:root{
  --bg:#ffffff; --fg:#0a0a0a; --mute:#707070; --faint:#9a9a9a; --line:rgba(0,0,0,.09); --soft:#f4f4f4; --bubble:#f1f1f1; --paper:#F3F2EE;
  --btn:#0a0a0a; --btn-fg:#ffffff;
  font-family:"Geist",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0f0f0f; --fg:#f2f2f2; --mute:#9a9a9a; --faint:#6e6e6e; --line:rgba(255,255,255,.1); --soft:#1a1a1a; --bubble:#232323; --btn:#f2f2f2; --btn-fg:#0a0a0a; }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
code,pre{font-family:"Geist Mono",ui-monospace,Menlo,monospace}

/* ── the shell: your chats on the left, the app beside them ── */
.shell{display:grid;grid-template-columns:auto minmax(0,1fr);height:100vh}
.side{width:264px;height:100vh;display:flex;flex-direction:column;gap:4px;padding:12px 10px;border-right:1px solid var(--line);background:var(--soft);overflow:hidden;transition:width .28s cubic-bezier(.3,1,.4,1),padding .28s ease}
.shell.closed .side{width:0;padding-left:0;padding-right:0;border-right:0}
.side>*{min-width:244px}
.side svg,.side-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side-top{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 6px 0 8px;margin-bottom:6px}
.side-icon{width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--mute);display:grid;place-items:center}
.side-icon:hover{background:var(--line);color:var(--fg)}
.shell:not(.closed) .bar #sideOpen,.shell:not(.closed) .bar .brand{display:none}
.side-new,.side-link{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:10px;border:0;background:transparent;font-size:14px;font-weight:500;color:var(--fg);text-decoration:none;text-align:left}
.side-new:hover,.side-link:hover{background:var(--line)}
.side-search{display:flex;align-items:center;gap:8px;height:36px;margin:6px 0 4px;padding:0 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:var(--mute)}
.side-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font:inherit;font-size:13.5px}
.side-list{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px 16px}
.side-g{font-size:12px;font-weight:500;color:var(--faint);padding:14px 10px 6px}
.ci{position:relative;display:flex;flex-direction:column;gap:1px;width:100%;padding:8px 34px 8px 10px;border-radius:10px;border:0;background:transparent;text-align:left;color:var(--fg)}
.ci:hover{background:var(--line)}
.ci.on{background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.ci-t{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-s{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* working: three dots breathing; finished while you were elsewhere: a yellow dot until you open it */
.ci-work{display:inline-flex;gap:2px;margin-right:7px;vertical-align:middle}
.ci-work b{width:4px;height:4px;border-radius:50%;background:var(--fg);animation:ci-breathe 1.1s ease-in-out infinite}
.ci-work b:nth-child(2){animation-delay:.15s}.ci-work b:nth-child(3){animation-delay:.3s}
@keyframes ci-breathe{0%,80%,100%{opacity:.2}40%{opacity:1}}
.ci-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#F5B300;box-shadow:0 0 0 3px color-mix(in srgb,#F5B300 22%,transparent);margin-right:8px;vertical-align:middle}
.ci-more{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--mute);opacity:0}
.ci:hover .ci-more,.ci.menu .ci-more,.ci:focus-visible .ci-more{opacity:1}
.ci-more:hover{background:var(--line);color:var(--fg)}
.ci-menu{position:absolute;right:4px;top:calc(100% - 4px);z-index:30;min-width:150px;padding:4px;border-radius:12px;background:var(--bg);border:1px solid var(--line);box-shadow:0 12px 32px -8px rgba(0,0,0,.25)}
.ci-menu button{display:flex;width:100%;align-items:center;gap:8px;height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;font-size:13px;color:var(--fg);text-align:left}
.ci-menu button:hover{background:var(--soft)}
.ci-menu .del{color:#D93636}
.ci-ask{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:var(--bg);box-shadow:0 0 0 1px var(--line);font-size:13px}
.ci-ask div{display:flex;gap:6px}
.ci-ask .del-go{background:#D93636;color:#fff}
.ci-edit{width:100%;height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:13.5px;outline:0}
.side-empty{padding:12px 10px;font-size:13px;color:var(--mute)}
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;box-shadow:0 0 40px rgba(0,0,0,.25)}
}

.app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);height:100vh;max-width:1500px;width:100%;margin:0 auto;padding:0 20px;min-width:0}
.bar{display:flex;align-items:center;gap:10px;height:60px;border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:18px;letter-spacing:-.02em;margin-right:6px;color:inherit;text-decoration:none}
.pills{display:flex;gap:6px;flex:1}
.pill{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;white-space:nowrap}
.pill.on{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.spend{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:6px 14px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.spend-k,.dot{color:var(--mute)}
.ghost{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;white-space:nowrap}
.ghost.sm{padding:4px 10px;font-size:12px}
.btn{border:0;background:var(--btn);color:var(--btn-fg);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:500}

.main{display:grid;grid-template-columns:minmax(360px,44%) minmax(0,1fr);gap:20px;min-height:0;padding:16px 0}
.main>*{min-width:0}

/* ── the chat ───────────────────────────────────────── */
.chat{display:flex;flex-direction:column;min-height:0}
.thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:4px 4px 16px;scroll-behavior:smooth}
.hello{margin:auto 0;text-align:center;padding:40px 12px}
.hello-t{font-size:26px;font-weight:600;letter-spacing:-.02em}
.hello-s{font-size:14px;color:var(--mute);margin-top:6px}
.u{align-self:flex-end;max-width:85%;background:var(--bubble);border-radius:18px;padding:10px 14px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.a{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.55;max-width:100%}
.a .msg{white-space:pre-wrap;word-wrap:break-word}
.a .msg code,.step-body code{font-size:12.5px;background:var(--soft);padding:1px 5px;border-radius:5px}

/* the live line under a turn, Claude Code style */
.status{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.dots{display:inline-flex;gap:3px;width:22px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--fg);opacity:.25;animation:dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.2;transform:translateY(0)}40%{opacity:.9;transform:translateY(-2px)}}
.status .sep{opacity:.5}
.status .verb{color:var(--fg)}

/* steps: collapsible lines like "Planned the component ›" */
.step{font-size:13.5px;color:var(--mute)}
.step>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.step>summary::-webkit-details-marker{display:none}
.step>summary::after{content:"›";transition:transform .15s ease;font-size:15px}
.step[open]>summary::after{transform:rotate(90deg)}
.step-body{margin-top:8px;color:var(--fg);font-size:14px;line-height:1.55;white-space:pre-wrap;border-left:2px solid var(--line);padding-left:12px}
pre.step-code{margin:8px 0 0;max-height:260px;overflow:auto;background:var(--soft);border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.55;color:var(--fg);white-space:pre}
.typing::after{content:"▍";animation:blink 1s steps(1) infinite;opacity:.7}
@keyframes blink{50%{opacity:0}}

/* questions with options */
.qs{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:16px;padding:14px}
.q-t{font-size:14px;font-weight:600;margin-bottom:8px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 13px;font-size:13.5px}
.opt:hover{border-color:var(--fg)}
.opt.on{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.qs.done .opt:not(.on){opacity:.4}
.qs-foot{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute)}
.qs-foot .btn{margin-left:auto}

/* the card of a built component */
.built{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.built-top{display:flex;align-items:center;gap:10px;padding:12px 14px}
.built-ic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-size:12px;font-weight:600}
.built-n{font-weight:600;font-size:14.5px}
.built-s{font-size:12.5px;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.built-top .ghost{margin-left:auto}
.mini{display:block;width:100%;height:200px;border:0;border-top:1px solid var(--line);background:var(--paper)}
.built-acts{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--line)}
.line{display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:10px;padding:6px 6px 6px 10px;font-size:12px;width:100%}
.line code{flex:1;overflow-x:auto;white-space:nowrap}

/* the spend line under every finished turn */
.meta{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.meta>summary{list-style:none;cursor:pointer}
.meta>summary::-webkit-details-marker{display:none}
.meta dl{display:grid;grid-template-columns:auto auto;justify-content:start;gap:3px 14px;margin:8px 0 0}
.meta dt{color:var(--faint)}
.meta dd{margin:0;color:var(--mute)}
.oops{color:#C0392B;font-size:13.5px}
.a.stopped{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

.pickers{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;align-items:center}
.closed-note{margin:0 0 8px;padding:10px 14px;border-radius:14px;background:var(--soft);border:1px solid var(--line);color:var(--mute);font-size:13px;line-height:1.45}
.composer{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:22px;padding:8px;background:var(--bg);transition:border-color .2s ease,background-color .2s ease}
.composer:focus-within{border-color:var(--fg)}
.composer.drop{border-style:dashed;border-color:var(--fg);background:var(--soft)}
.comp-row{display:flex;align-items:flex-end;gap:6px}
.composer textarea{flex:1;resize:none;border:0;outline:none;background:transparent;color:var(--fg);font:15px/1.45 "Geist",system-ui,sans-serif;padding:7px 4px;max-height:180px}
.clip{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--mute);display:grid;place-items:center}
.clip:hover{background:var(--soft);color:var(--fg)}
.clip svg{width:19px;height:19px}
.att{display:flex;flex-wrap:wrap;gap:6px}
/* the component this chat is changing — the AI is told it; × makes the next message start a new one */
.sel{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;height:30px;padding:0 4px 0 12px;margin-bottom:8px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.sel[hidden]{display:none}
.sel b{color:var(--ink);font-weight:600}
.sel button{width:22px;height:22px;border-radius:50%;border:0;background:transparent;color:var(--mute);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.sel button:hover{background:var(--line);color:var(--ink)}
.att:empty{display:none}
.chip-img{position:relative;width:58px;height:58px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.chip-img img{width:100%;height:100%;object-fit:cover;display:block}
.chip-x{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:11px;line-height:18px;padding:0;display:grid;place-items:center}
.chip-note{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 10px;font-size:12.5px}
.chip-note b{font-weight:600}
.chip-note span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.chip-note .chip-x{position:static;background:transparent;color:var(--mute);font-size:13px}
.u .pics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.u .pics img{width:120px;max-height:120px;object-fit:cover;border-radius:10px;display:block}
.u .edit-line{display:block;font-size:13px;opacity:.85}
#editBtn.on{background:#3355FF;border-color:#3355FF;color:#fff}
.note-pop{position:fixed;z-index:50;width:280px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 18px 50px -12px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:8px;animation:pop .22s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.96)}}
.note-what{font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-pop textarea{resize:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:14px/1.4 "Geist",system-ui,sans-serif;background:var(--bg);color:var(--fg);outline:none}
.note-pop textarea:focus{border-color:var(--fg)}
.note-acts{display:flex;justify-content:flex-end;gap:6px}
.btn.sm{padding:6px 12px;font-size:12.5px}
.step.ok>summary{color:var(--fg)}
.step.ok>summary::before{content:"✓";color:#1FB257;font-weight:700}
.step.warn>summary::before{content:"!";color:#E5484D;font-weight:700}
.send{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--btn);color:var(--btn-fg);display:grid;place-items:center}
.send svg{width:18px;height:18px}
.send:disabled{opacity:.35;cursor:default}

/* ── the big preview ────────────────────────────────── */
.view{display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-height:0}
.stage-top{display:flex;align-items:center;gap:10px}
.view-name{flex:1;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--mute)}
.seg button.on{background:var(--bg);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stage-tools{display:flex;gap:6px}
.stage{position:relative;border-radius:24px;background:var(--paper);overflow:hidden;min-height:0;border:1px solid var(--line)}
.stage.dark{background:#1B1A17}
#frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:1}
.code{position:absolute;inset:0;margin:0;padding:20px;overflow:auto;background:var(--bg);color:var(--fg);font-size:12.5px;line-height:1.55;white-space:pre}
.empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;color:#1A1915;pointer-events:none;
  background:radial-gradient(circle at 1px 1px,rgba(26,25,21,.08) 1px,transparent 1.2px) 0 0/22px 22px}
.stage.dark .empty{color:#F2F1EC;background:radial-gradient(circle at 1px 1px,rgba(242,241,236,.07) 1px,transparent 1.2px) 0 0/22px 22px}
.idle-tray{width:190px}
.empty-s{font-size:13px;opacity:.5}
#frame.reveal{animation:reveal .7s cubic-bezier(.2,.8,.2,1)}
@keyframes reveal{from{opacity:0;filter:blur(14px);transform:scale(.97)}to{opacity:1;filter:none;transform:none}}

/* ── the assembly: only the component, building itself from its code ── */
.asm{position:absolute;inset:0;overflow:hidden;color:#1A1915;background:#F3F2EE}
.asm.inline{position:relative;inset:auto;height:200px;border-radius:16px;border:1px solid var(--line)}
.stage.dark .asm{background:#1B1A17}
.asm-mid{position:absolute;inset:0;display:grid;place-content:center;justify-items:center}
.asm-tray{position:relative;display:flex;gap:6px;padding:5px;border-radius:27px;min-width:150px;min-height:54px;transform-origin:center;
  border:1.5px dashed rgba(26,25,21,.26);transition:background-color .45s ease,box-shadow .55s ease,border-color .45s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.asm-tray.wait{animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{border-color:rgba(26,25,21,.1);transform:scale(.985)}}
.asm-tray.wait::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(26,25,21,.08) 50%,transparent 70%);background-size:250% 100%;animation:ghostshine 1.6s linear infinite}
@keyframes ghostshine{from{background-position:120% 0}to{background-position:-120% 0}}
.asm-tray.solid{background:#fff;border-color:transparent;box-shadow:0 0 0 1px rgba(26,25,21,.06),0 1px 1px rgba(26,25,21,.04),0 6px 16px -6px rgba(26,25,21,.1),0 22px 44px -24px rgba(26,25,21,.16)}
.asm-tray.flash::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.95) 50%,transparent 70%);transform:translateX(-115%);animation:flash .8s cubic-bezier(.25,.7,.25,1) forwards}
@keyframes flash{to{transform:translateX(115%)}}
.asm-tray.flash{transform:scale(1.04)}
.asm.out{opacity:0;filter:blur(12px);transform:scale(1.03);transition:opacity .38s ease,filter .38s ease,transform .38s ease}
/* a key: a faint outline, then its colour, its icon draws, its words type — then every state the code writes */
.asm-tray.has{min-width:0}
.asm-tray{transition:background-color .45s ease,box-shadow .55s ease,border-color .45s ease,transform .45s cubic-bezier(.3,1.5,.5,1),min-width .5s cubic-bezier(.3,1.2,.5,1)}
.asm-tray.bare{border-color:transparent}
.asm-key{box-sizing:border-box;height:44px;width:44px;flex:none;border-radius:22px;display:flex;align-items:center;padding:0 20px 0 15px;overflow:hidden;
  font:600 15px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;white-space:nowrap;
  background:transparent;color:#1A1915;box-shadow:inset 0 0 0 1.5px rgba(26,25,21,.2);
  transition:transform .5s cubic-bezier(.3,1.35,.5,1),opacity .25s ease,filter .3s ease,background-color .4s ease,color .4s ease,box-shadow .45s ease,width .5s cubic-bezier(.3,1.25,.5,1)}
.asm-key.solo{padding:0;justify-content:center}
.asm-key.field{padding:0 16px;font-weight:500}
.asm-key.plain{box-shadow:none}
.asm-key.in{opacity:0;filter:blur(8px);transform:scale(.6)}
.asm-key.filled{box-shadow:none}
.asm-ic{position:relative;display:inline-flex;width:0;height:18px;margin-right:0;flex:none;transition:width .4s cubic-bezier(.3,1.25,.5,1),margin .4s cubic-bezier(.3,1.25,.5,1)}
.asm-ic.has{width:18px;margin-right:8px}
.asm-key.solo .asm-ic.has{margin-right:0}
.asm-ic svg{position:absolute;left:0;top:0;width:18px;height:18px;transition:opacity .22s ease,filter .22s ease,transform .3s cubic-bezier(.3,1.4,.5,1)}
.asm-ic svg.draw *{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .7s cubic-bezier(.4,0,.2,1) forwards}
.asm-ic svg.spin{animation:spin .8s linear infinite}
.asm-ic svg.gone{opacity:0;filter:blur(4px);transform:scale(.4)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.asm-w{display:inline-flex;min-width:1px}
.asm-w .ch{display:inline-block}
.asm-w .ch.come{animation:come .34s cubic-bezier(.3,1.3,.5,1) both}
.asm-w .ch.gone{animation:gone .22s ease forwards}
@keyframes come{from{opacity:0;filter:blur(5px);transform:translateY(6px)}to{opacity:1;filter:none;transform:none}}
@keyframes gone{to{opacity:0;filter:blur(5px);transform:translateY(-5px)}}
.asm-fx{position:absolute;inset:0;pointer-events:none}
.asm-fx i{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;animation:spark .75s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
.only-narrow{display:none}
@media (max-width:980px){ .only-narrow{display:block} }
.err{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;color:#B42318;border:1px solid #F3C7C3;border-radius:12px;padding:10px 12px;font-size:12.5px;font-family:"Geist Mono",ui-monospace,monospace;white-space:pre-wrap;max-height:40%;overflow:auto}
.totals{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.totals b{color:var(--fg);font-weight:600}

/* narrow: the chat is the app; each component previews inside its own card */
@media (max-width:980px){
  .app{padding:0 14px}
  .bar{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:8px}
  .main{grid-template-columns:minmax(0,1fr)}
  .view{display:none}
  .chat{min-height:calc(100vh - 120px)}
}
@media (min-width:981px){ .mini{height:150px} }
/* the notes waiting to be applied, all together */
.notes{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.notes-h{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:600}
.notes-tip{font-size:12px;font-weight:400;color:var(--mute)}
.notes .chip-note{display:flex;background:var(--bg)}
.notes .chip-note span{flex:1;max-width:none}
.chip-note i{flex:none;font-style:normal;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:#3355FF;color:#fff;font-size:11px;font-weight:600;line-height:20px;text-align:center}
.notes-acts{display:flex;justify-content:flex-end;gap:6px;margin-top:2px}
.btn:disabled{opacity:.45;cursor:default}
.note-hint{font-size:11.5px;color:var(--mute)}
.apply-bar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;
  background:#0a0a0a;color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);font-size:13px;animation:pop .25s cubic-bezier(.3,1.4,.5,1)}
.apply-bar .btn{background:#fff;color:#0a0a0a}
.apply-n{display:inline-flex;align-items:center;gap:6px}
.apply-n::before{content:"";width:8px;height:8px;border-radius:50%;background:#3355FF}
/* the real build: the finished component's own pieces, at their own places, one at a time */
.asm-probe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none}
.asm-mid.gone,.asm-real.gone{opacity:0;filter:blur(10px);transform:scale(.96);transition:opacity .45s ease,filter .45s ease,transform .45s ease}
.asm-real{position:absolute;inset:0;pointer-events:none}
.rp{position:absolute;box-sizing:border-box;transition:opacity .35s ease,filter .4s ease,transform .5s cubic-bezier(.3,1.35,.5,1),background-color .4s ease,box-shadow .5s ease}
.rp.in{opacity:0;filter:blur(6px);transform:scale(.86)}
.rp-box{box-shadow:inset 0 0 0 1.5px rgba(26,25,21,.22)}
.stage.dark .rp-box{box-shadow:inset 0 0 0 1.5px rgba(242,241,236,.25)}
.rp-svg svg{display:block;overflow:visible}
.rp-svg svg.draw *{stroke-dasharray:80;stroke-dashoffset:80;animation:draw .8s cubic-bezier(.4,0,.2,1) forwards}
.rp-text{white-space:pre;overflow:visible}
.asm-real.flash::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-100%);animation:flash .9s cubic-bezier(.25,.7,.25,1) forwards}
.asm.out-soft{opacity:0;transition:opacity .32s ease}
/* editing: the noted parts are marked, then each change is made on the component itself */
.rp-mark{position:absolute;border:2px dashed #3355FF;border-radius:12px;pointer-events:none;animation:markpulse 1.4s ease-in-out infinite;transition:opacity .35s ease}
.rp-mark::before{content:attr(data-n);position:absolute;left:-11px;top:-11px;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:#3355FF;color:#fff;font:600 11px/20px -apple-system,system-ui,sans-serif;text-align:center}
.rp-mark.gone{opacity:0}
@keyframes markpulse{50%{border-color:rgba(51,85,255,.35)}}
.rp.mv{transition:left .6s cubic-bezier(.3,1.2,.5,1),top .6s cubic-bezier(.3,1.2,.5,1),width .6s cubic-bezier(.3,1.2,.5,1),height .6s cubic-bezier(.3,1.2,.5,1),
  font-size .5s ease,line-height .5s ease,color .45s ease,background .45s ease,background-color .45s ease,box-shadow .45s ease,border-radius .45s ease,opacity .35s ease,filter .35s ease}
.rp.hl{outline:2px solid #3355FF;outline-offset:4px;border-radius:10px}
.rp-box.hl{outline-offset:3px}
/* an edit reads as its changes: what went, what came */
.step-code.diff{white-space:pre-wrap}
.step-code.diff .del{color:#B42318;background:rgba(229,72,77,.08);display:block}
.step-code.diff .add{color:#067647;background:rgba(31,178,87,.09);display:block}
@media (prefers-color-scheme:dark){.step-code.diff .del{color:#F28B82}.step-code.diff .add{color:#7EE2A8}}
.step-code.diff .dsep{color:var(--mute);display:block}
/* the next page waits, invisible, on top of the current one, and takes its place when ready */
/* the next page loads UNDER the one on the stage, drawn but covered — a fully transparent frame is
   one the browser may not draw at all, and a component that lays itself out on its first frames
   was measured as having no parts */
.stage iframe.next{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:0;pointer-events:none}
.totals .all-chats{margin-left:auto;opacity:.75}
/* which screen of the component the build is on */
.screen-note{position:absolute;left:16px;top:16px;z-index:6;padding:6px 12px;border-radius:999px;background:#0a0a0a;color:#fff;font-size:12.5px;font-weight:500;pointer-events:none}
.screen-note.in{animation:pop .25s cubic-bezier(.3,1.4,.5,1)}

/* ── sign in, and the person's account at the foot of the chat list ── */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.gate-card{width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 28px 22px;border-radius:24px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 24px 60px -24px rgba(0,0,0,.35);text-align:center}
.gate-t{font-size:22px;font-weight:600;letter-spacing:-.02em}
.gate-s{font-size:14px;line-height:1.45;color:var(--mute);margin-bottom:10px}
.gate-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:14.5px;font-weight:500;text-decoration:none;transition:transform .15s ease}
.gate-btn:active{transform:scale(.97)}
.gate-btn svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#fff;box-sizing:content-box}
.gate-back{margin-top:4px;font-size:13px;color:var(--mute);text-decoration:none}
.gate-back:hover{color:var(--fg)}
.side-me{position:relative;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.me-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--fg);text-align:left}
.me-btn:hover{background:var(--line)}
.me-pic{width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--fg);color:var(--bg);font-size:13px;font-weight:600}
.me-pic img{width:100%;height:100%;object-fit:cover}
.me-who{display:flex;flex-direction:column;min-width:0;font-size:13px;line-height:1.3}
.me-who b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-who span{color:var(--mute);font-size:12px}
.me-menu{top:auto;bottom:calc(100% + 4px);left:4px;right:4px}
.me-mail{padding:8px 10px 6px;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Liked: the hearted components, a grid in place of the chat ── */
.shell.liked-mode .main{display:none}
.liked{overflow-y:auto;min-height:0;padding:22px 2px 48px}
.liked-head{display:flex;align-items:baseline;gap:10px;margin:0 0 18px}
.liked-head h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.liked-n{color:var(--mute);font-size:15px}
.liked-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.liked-card{border-radius:20px;background:var(--bg);box-shadow:0 0 0 1px var(--line);overflow:hidden;cursor:pointer;outline:none;transition:box-shadow .2s ease,opacity .26s ease,transform .26s ease}
.liked-card:hover,.liked-card:focus-visible{box-shadow:0 0 0 1px var(--line),0 14px 34px -16px rgba(0,0,0,.35)}
.liked-card.gone{opacity:0;transform:scale(.96)}
.liked-shot{position:relative;aspect-ratio:1;background:var(--paper)}
.liked-shot img,.liked-shot iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;object-fit:cover;pointer-events:none}
.liked-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 14px}
.liked-t{display:flex;flex-direction:column;min-width:0;font-size:13.5px;line-height:1.3}
.liked-t b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liked-t span{color:var(--mute);font-size:12px}
.liked-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:80px 16px;text-align:center}
.liked-empty[hidden]{display:none}
.liked-empty-t{font-size:18px;font-weight:600}
.liked-empty-s{max-width:340px;color:var(--mute);font-size:14px;line-height:1.45;margin-bottom:8px}
.built-btns .heart,.stage-tools .heart{height:30px}
.shell.liked-mode #spendBtn,.shell.liked-mode .pickers{visibility:hidden}
.side-link.on{background:var(--line)}