/* ===== compose: one sentence in, one ScreenGui out ===== */
#compose code{font-size:.92em;background:rgba(23,22,27,.05);border:1px solid var(--line);border-radius:5px;padding:.05em .35em}
.compose-frame{padding:0}

/* ---------- the arch: rounded brick profile + 9-slice guides ---------- */
.compose-arch{position:relative;margin:64px clamp(16px,7%,96px) 0;padding:clamp(72px,9vw,108px) 24px 34px;text-align:center}
.compose-arch .lede{margin-left:auto;margin-right:auto}
.compose-brick{position:absolute;inset:0 0 -140px 0;pointer-events:none}
.compose-brick-body{position:absolute;inset:0;border:1px solid var(--line2);border-bottom:0;border-radius:120px 120px 0 0;
  background:radial-gradient(circle,rgba(23,22,27,.07) 1.3px,transparent 1.8px) 0 0/22px 22px,linear-gradient(var(--card),color-mix(in srgb,var(--card) 0%,transparent));
  -webkit-mask-image:linear-gradient(#000 0,#000 50%,transparent 100%);mask-image:linear-gradient(#000 0,#000 50%,transparent 100%)}
.compose-stud{position:absolute;top:-10px;left:var(--x);width:clamp(34px,5vw,58px);height:10px;margin-left:calc(clamp(34px,5vw,58px) / -2);
  border:1px solid var(--line2);border-bottom:0;border-radius:6px 6px 0 0;background:var(--card)}
.compose-stud::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;height:1px;background:var(--card)}
.compose-stud::before{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:1px;background:var(--line2)}
.compose-guide{position:absolute;opacity:0;transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.compose-guide.gh{left:0;right:0;top:120px;height:1px;background:repeating-linear-gradient(90deg,var(--sel) 0 4px,transparent 4px 8px);transform:scaleX(0)}
.compose-guide.gv{top:0;height:300px;width:1px;background:repeating-linear-gradient(180deg,var(--sel) 0 4px,transparent 4px 8px);transform:scaleY(0);transform-origin:top;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.compose-guide.gv.l{left:120px}.compose-guide.gv.r{right:120px}
.compose-guide-tag{position:absolute;left:128px;top:101px;font:500 10.5px var(--mono);color:var(--sel);letter-spacing:.02em;opacity:0;transition:opacity .6s .6s}
.compose-arch.in .compose-guide{opacity:.4;transform:none}
.compose-arch.in .compose-guide-tag{opacity:.8}
.compose-arch>*:not(.compose-brick){position:relative}

/* ---------- pinned flow: prompt → real pieces → studio ---------- */
.compose-track{position:relative;height:210vh;margin-top:8px}
.compose-pin{position:sticky;top:60px;height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:0 clamp(20px,3.2vw,40px);overflow:hidden}
.compose-flow{width:100%;display:grid;grid-template-columns:.82fr 1fr 1.26fr;gap:clamp(18px,3vw,44px);align-items:start;transform-origin:50% 50%}
.compose-col{min-width:0;display:flex;flex-direction:column}
.compose-step{font:500 12px var(--mono);color:var(--ink);margin:0 0 12px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compose-step b{display:inline-grid;place-items:center;font-weight:500;width:22px;height:18px;border:1px solid var(--line2);border-radius:5px;margin-right:6px;font-size:10.5px;background:var(--card)}
.compose-step span{color:var(--mute)}

/* prompt card */
.compose-prompt{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 14px 12px;
  box-shadow:0 1px 0 #fff inset,0 18px 36px -24px rgba(23,22,27,.35);transition:border-color .4s}
.compose-prompt-text{margin:0;font:450 18px/1.45 var(--sans);letter-spacing:-.014em;color:var(--ink);min-height:calc(1.45em * 5)}
.compose-prompt-text .caret{display:inline-block;width:1.5px;height:1.05em;background:var(--sel);vertical-align:-.15em;margin:0 1px;animation:compose-blink 1s steps(1) infinite}
.compose-prompt.sent .caret{opacity:0;animation:none}
@keyframes compose-blink{50%{opacity:0}}
.compose-prompt-bot{display:flex;align-items:center;gap:6px;margin-top:12px}
.compose-srv{display:inline-flex;align-items:center;gap:5px;font:500 10.5px var(--mono);color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:2px 7px 2px 6px;white-space:nowrap}
.compose-srv i{width:5px;height:5px;border-radius:50%;background:var(--ok)}

.compose-stats{margin:22px 0 0;padding:0}
.compose-stats div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.compose-stats dt{font-size:13px;color:var(--ink2)}
.compose-stats dd{margin:0;font:450 24px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.compose-stats .compose-stat-s{font:500 14px var(--mono);letter-spacing:-.02em;padding-bottom:3px}

/* real pieces picked from the manifest */
.compose-picks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.compose-pick{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);
  opacity:.32;transform:translate3d(0,6px,0);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.compose-pick.on{opacity:1;transform:none}
.compose-pick-thumb{display:grid;place-items:center;width:68px;height:46px;padding:4px;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  background:var(--bg2) radial-gradient(circle,rgba(23,22,27,.12) 1px,transparent 1.4px) 0 0/7px 7px}
.compose-pick-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.compose-pick-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.compose-pick-meta b{font:500 14px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compose-pick-meta small{font:400 10.5px/1.3 var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* studio viewport */
.compose-vp{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b1320;border:1px solid #0b0b0d;box-shadow:0 24px 44px -28px rgba(0,0,0,.6)}
.compose-canvas{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1.6px) 0 0/20px 20px,radial-gradient(120% 90% at 50% 45%,#1a2638 0%,#0b1320 70%)}
.compose-scene{position:absolute;left:50%;top:50%;transform-origin:50% 50%;will-change:transform}
.compose-piece{position:absolute;max-width:none;user-select:none;opacity:0;transform:translate3d(0,10px,0) scale(.995);transition:opacity .55s var(--ease),transform .6s var(--ease)}
.compose-piece.on{opacity:1;transform:none}
.compose-vp-tag{position:absolute;left:8px;top:8px;font:500 10px var(--mono);color:#e7ecf3;background:rgba(10,16,26,.55);border-radius:5px;padding:3px 7px}
.compose-vp-done{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--mono);color:#fff;background:rgba(10,16,26,.7);border-radius:6px;padding:4px 8px;
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.compose-vp-done i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.compose-vp.done .compose-vp-done{opacity:1;transform:none}

/* explorer */
.compose-exp{margin-top:12px;height:196px;flex:none;display:flex;flex-direction:column;background:#2e2e2e;border:1px solid #0b0b0d;border-radius:12px;overflow:hidden}
.compose-exp-h{height:28px;flex:none;display:flex;align-items:center;padding:0 12px;font:600 11.5px var(--sans);color:#e5e5e5;background:#353535;border-bottom:1px solid #1f1f1f}
.compose-exp-b{position:relative;flex:1;min-height:0;overflow:hidden}
.compose-tree{list-style:none;margin:0;padding:6px 0}
.compose-tree li{display:flex;align-items:center;gap:7px;height:22px;padding-left:calc(10px + var(--d) * 16px);font:400 12px var(--sans);color:#dcdcdc;white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.compose-tree li.on{opacity:1;transform:none}
.compose-tree li i{flex:none;width:7px;height:7px;border-radius:2px;background:var(--sel);opacity:.55;transition:opacity .3s}
.compose-tree li.on i{opacity:1}
.compose-tree li b{flex:none;font:600 11.5px var(--sans);color:#e8e8e8}
.compose-tree li span{font:400 11.5px var(--sans);color:#aaa6af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compose-tree li:first-child i{background:#b9a6ff}
.compose-tree li:first-child span{color:#8fe08a}

/* ---------- 2-up cards ---------- */
.compose-cards{margin-top:0}
.compose-card .body{max-width:470px}
.compose-card .stagebox{aspect-ratio:16/10}

/* card 1: client graph */
.compose-graph-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.compose-graph-svg .orb{fill:none;stroke:var(--line2);stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.compose-graph-svg .wl{fill:none;stroke:var(--line2);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s var(--ease);transition-delay:var(--dl)}
.compose-graph-svg .pl{fill:none;stroke:var(--sel);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:10 var(--len);stroke-dashoffset:calc(var(--len) + 10);opacity:0}
.compose-card.in .compose-graph-svg .wl{stroke-dashoffset:0}
.compose-card.in .compose-graph-svg .pl{opacity:1;animation:compose-pulse 2.8s linear infinite;animation-delay:calc(var(--dl) + 1.2s)}
.compose-card.in .compose-graph-svg .orb{animation:compose-orbit 40s linear infinite}
@keyframes compose-pulse{to{stroke-dashoffset:0}}
@keyframes compose-orbit{to{stroke-dashoffset:-140}}
.compose-node{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;
  background:var(--ink);color:#fff;border-radius:11px;box-shadow:0 0 0 5px var(--bg2),0 0 0 6px var(--line),0 16px 30px -14px rgba(23,22,27,.55)}
.compose-node img{width:16px;height:16px;filter:brightness(0) invert(1)}
.compose-node b{font:500 13.5px var(--mono);white-space:nowrap}
.compose-node span{font:400 10.5px var(--mono);color:#9f9ca6;border-left:1px solid #3a3842;padding-left:8px;white-space:nowrap}
@media (max-width:520px){.compose-node{gap:6px;padding:0 10px}.compose-node span{display:none}}

.compose-cfg{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.compose-cfg-h{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 8px 0 14px;border-bottom:1px solid var(--line);font:500 11.5px var(--mono);color:var(--ink2)}
.compose-copy{font:500 11.5px var(--mono);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:3px 9px;background:var(--bg);transition:background .15s,border-color .15s}
.compose-copy:hover{border-color:var(--line2);background:#fff}
.compose-cfg pre{margin:0;padding:12px 14px;font:400 12.5px/1.6 var(--mono);color:var(--ink2);overflow:auto}
.compose-cfg pre code{background:none;border:0;padding:0;font-size:inherit}
.compose-cfg .k{color:var(--ink)}.compose-cfg .s{color:#0a7d3f}

/* card 2: native fallback build */
.compose-native{display:grid;grid-template-rows:1fr 1fr;--sc:.78}
.compose-nrow{position:relative;display:grid;place-items:center}
.compose-nrow.art{border-top:1px dashed var(--line2)}
.compose-nlab{position:absolute;left:14px;top:12px;font:500 10.5px var(--mono);color:var(--mute)}
.compose-nbtn,.compose-abtn{position:relative;width:calc(292px * var(--sc));height:calc(69px * var(--sc))}
.compose-nbtn>*{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.compose-nbtn .n-frame{background:var(--n-main,#89c4ff);opacity:.0}
.compose-nbtn .n-round{background:var(--n-main,#89c4ff);border-radius:calc(6px * var(--sc))}
.compose-nbtn .n-grad{background:linear-gradient(var(--n-g0,#559fff),var(--n-g1,#0073ff));border-radius:calc(6px * var(--sc))}
.compose-nbtn .n-stroke{border-radius:calc(6px * var(--sc));box-shadow:0 0 0 calc(4px * var(--sc)) var(--n-stroke,#3e5873);transform:scale(1.04)}
.compose-nbtn .n-text{left:calc(87.51px * var(--sc));top:calc(5px * var(--sc));width:calc(117px * var(--sc));height:calc(48px * var(--sc));display:flex;align-items:center;
  font:900 calc(40px * var(--sc))/1 Inter,"Arial Black","Segoe UI Black",var(--sans);color:#fff;letter-spacing:-.01em;-webkit-text-stroke:calc(6px * var(--sc)) #000;paint-order:stroke fill;transform:translateY(4px)}
.compose-nbtn .n-sel{inset:calc(-6px * var(--sc));border:1px dashed var(--sel);border-radius:4px;opacity:0}
.compose-native[data-step="1"] .n-frame{opacity:1}
.compose-native:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .n-round{opacity:1}
.compose-native:is([data-step="3"],[data-step="4"],[data-step="5"]) .n-grad{opacity:1}
.compose-native:is([data-step="4"],[data-step="5"]) .n-stroke{opacity:1;transform:none}
.compose-native[data-step="5"] .n-text{opacity:1;transform:none}
.compose-native:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .n-sel{opacity:.7}
.compose-ntag{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);height:20px;width:120px}
.compose-ntag b{position:absolute;inset:0;display:grid;place-items:center;font:500 10.5px var(--mono);color:var(--sel);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s var(--ease)}
.compose-native[data-step="1"] .compose-ntag b[data-s="1"],.compose-native[data-step="2"] .compose-ntag b[data-s="2"],.compose-native[data-step="3"] .compose-ntag b[data-s="3"],
.compose-native[data-step="4"] .compose-ntag b[data-s="4"],.compose-native[data-step="5"] .compose-ntag b[data-s="5"]{opacity:1;transform:none}
.compose-abtn img{position:absolute;left:calc(-16px * var(--sc));top:calc(-16px * var(--sc));width:calc(324px * var(--sc));height:calc(97px * var(--sc));max-width:none}

.compose-layers{list-style:none;margin:16px 0 0;padding:0;counter-reset:cl}
.compose-layers li{counter-increment:cl;display:grid;grid-template-columns:26px 92px 1fr;align-items:baseline;gap:6px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute);transition:color .3s}
.compose-layers li::before{content:counter(cl,decimal-leading-zero);font:500 10.5px var(--mono);color:var(--line2);transition:color .3s}
.compose-layers li b{font:500 12.5px var(--mono);color:var(--mute);transition:color .3s}
.compose-layers li span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compose-layers li.on{color:var(--ink2)}.compose-layers li.on b{color:var(--ink)}.compose-layers li.on::before{color:var(--sel)}
.compose-note{margin:14px 0 0;font-size:13.5px;color:var(--ink2);text-wrap:pretty}
.compose-note code{font-size:12px!important}

/* ---------- responsive ---------- */
@media (max-width:1180px) and (min-width:981px){
  .compose-step span{display:none}
  .compose-flow{gap:18px;grid-template-columns:.8fr 1fr 1.2fr}
  .compose-prompt{padding:13px 12px 10px}
  .compose-prompt-text{font-size:16px;min-height:calc(1.45em * 6)}
  .compose-stats .compose-stat-s{font-size:12.5px}
  .compose-pick{grid-template-columns:58px minmax(0,1fr);gap:9px}
  .compose-pick-thumb{width:58px;height:40px}
}
@media (max-width:980px){
  .compose-arch{margin-top:44px;padding-top:68px}
  .compose-brick-body{border-radius:64px 64px 0 0}
  .compose-guide.gh{top:64px}.compose-guide.gv.l{left:64px}.compose-guide.gv.r{right:64px}
  .compose-guide-tag{left:70px;top:46px}
  .compose-track{height:auto;margin-top:20px}
  .compose-pin{position:relative;top:0;height:auto;display:block;padding:0 16px 40px;overflow:visible}
  .compose-flow{grid-template-columns:1fr;gap:30px}
  .compose-prompt-text{min-height:calc(1.45em * 3)}
  .compose-picks{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  .compose-pick:nth-child(-n+2){border-top:0}
  .compose-vp{max-width:640px}
  .compose-exp{max-width:640px;height:190px}
  .compose-native{--sc:.66}
  .compose-layers li{grid-template-columns:24px 84px 1fr}
}
@media (max-width:620px){
  .compose-picks{grid-template-columns:1fr}
}
@media (max-width:420px){
  .compose-arch{margin-left:10px;margin-right:10px;padding-left:12px;padding-right:12px}
  .compose-native{--sc:.6}
}
@media (prefers-reduced-motion:reduce){
  .compose-track{height:auto;margin-top:8px}
  .compose-pin{position:relative;top:auto;height:auto;display:block;padding:8px clamp(20px,3.2vw,40px) 40px;overflow:visible}
  .compose-guide,.compose-guide-tag{transition:none;opacity:.4;transform:none}
  .compose-pick,.compose-tree li,.compose-stats,.compose-vp-done,.compose-nbtn>*,.compose-ntag b{transition:none!important}
  .compose-prompt-text .caret{animation:none;opacity:0}
  .compose-card .compose-graph-svg .wl{stroke-dashoffset:0;transition:none}
  .compose-card .compose-graph-svg .pl{display:none}
}