:root{
    /* One warm accent, ORIONS house cinnabar — the same value the studio ships to clients.
       Three near-identical reds used to be in play (#e2582c here, #eb5939 on the site, #f08a5e
       inside the gradient): four accents means no accent, only a palette. */
    --ink:#e6e0d3; --charcoal:#0a0a0b; --snow:#efe9dd; --cinnabar:#eb5939; --cin-d:#ff8a5c;
    /* channel form of --cinnabar, so every tint is rgba(var(--cin-rgb),a) instead of a hand-typed
       triple. Three stale reds were hiding in decimal — rgba(226,88,44) (the old cinnabar) behind
       borders that had already moved to the token, plus rgba(207,79,40) and var(--cin-d). A tint that
       cannot be derived from the accent will always drift away from it. */
    --cin-rgb:235,89,57;
    /* night prismatic — one identity across landing · auth · workspace */
    /* --paper is the working surface (Home + canvas) — lifted off --app so the rail reads as a
       dark frame around a lit sheet, and so long-form Thai isn't near-white on near-black.
       --card must stay clearly above --paper: the Think / Refine panel sits on it. */
    --app:#050506; --paper:#111114; --sheet:#0a0a0b; --card:#1c1c20;
    /* The canvas ground — --paper rotated warm (R above B instead of below), then dropped 3
       levels to pay for the grain. The noise tile averages light, so at 3% it ADDS about 5
       levels rather than sitting neutral: laid over the warm value directly the sheet came out
       at (24,23,20), brighter than --paper and brighter than anything asked for. Measured, not
       guessed. Composited this lands at (21,20,18) — a shade above --paper on purpose, since
       the rail is meant to read as a dark frame around a lit sheet. */
    --stock:#100F0D;
    /* ink rules: heavier where a nib lands, fading along the stroke */
    --rule:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 62%,rgba(255,255,255,.02));
    --rule-h:linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.13) 62%,rgba(255,255,255,.05));
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.2);
    --dim:#a5a29a; --mute:#83827b; --soft:rgba(255,255,255,.05);
    --ui:"Inter","IBM Plex Sans Thai Looped",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --body:"Newsreader","Noto Serif Thai",Georgia,"Times New Roman",serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
    /* Chromatic dispersion — the identity, not a texture. It now RESOLVES into --cinnabar at
       100%, so the prism and the flat accent are one family instead of two competing warms.
       Reserved for three things only: the mark, an accent word in display type, and Think (the
       second mind speaking). Everywhere else it used to appear was scaffolding — mono eyebrows,
       status dots, meters, version numbers — and scaffolding takes --mute or the flat accent. */
    --grad:linear-gradient(100deg,#4fc3ff 0%,#dff4ff 32%,#f08a5e 68%,#eb5939 100%);
    --pop:0 1px 0 rgba(255,255,255,.06) inset,0 30px 80px rgba(0,0,0,.6);
    --ease:cubic-bezier(.22,1,.36,1);
    /* one reveal curve across the whole product — the hero's entrance, the marketing sections
       on scroll, and the document settling into shape all ease the same way, so motion reads
       as one considered language rather than several unrelated animations */
    --reveal:cubic-bezier(.16,1,.3,1);
    /* system tokens — one source for values that used to be hand-typed per rule.
       (Full type scale + 4/8/12/16 radius tightening is the deliberate post-launch pass.) */
    /* The semantic pair, given the same shape as the cinnabar family so it cannot drift the way
       that one did: a fill, a lighter form for text on dark, and channels for tints. Five greens
       were in play (#57c795, #5d9e7e, #5fd08a, #6fd39a, #8fdcb8) doing one job between them —
       "this succeeded" — plus a lone #cfd6ff on a checkbox that belonged to no palette at all. */
    --on-ink:#0a0a0a; --ok:#57c795; --ok-d:#8fdcb8; --ok-rgb:87,199,149; --warn:#c9a04a;
    --r-xs:4px; --r-sm:6px; --r-md:8px; --r-ml:10px; --r-lg:12px; --r-xl:16px; --r-pill:100px;
    /* Four durations, because there are four kinds of movement here — feedback, a state change, a
       panel, a layout. There were twenty-six, hand-typed: .12 .13 .14 .15 .16 .18 .20 .22 .24 .25
       .26 .28 .32 .34 .35 .4 .5. The gap between .12s and .13s is under one frame at 60Hz — a
       difference nobody can perceive and everybody has to maintain. --base and --slow already
       existed and were used 49 times against 70 hand-typed values, so the scale was there and
       simply losing. (Ambient loops — liquid, chromaflow, the pulses — are not transitions and
       keep their own timing.) */
    --fast:.15s; --base:.2s; --slow:.3s; --xslow:.5s;
  }
  .liquid{background:var(--grad);background-size:280% 280%;animation:liquid 9s ease-in-out infinite}
  @keyframes liquid{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @media(prefers-reduced-motion:reduce){.liquid{animation:none}}
  *{box-sizing:border-box;margin:0;padding:0}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  html,body{height:100%}
  body{font-family:var(--ui);background:var(--app);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
  button{cursor:pointer;font-family:inherit;background:none;border:none;color:inherit;font-size:inherit;transition:transform var(--fast),background var(--fast),color var(--fast),border-color var(--fast),box-shadow var(--fast)}
  button:disabled{opacity:.45;pointer-events:none}
  button:active{transform:translateY(.5px)}
  button:focus-visible{outline:2px solid var(--cinnabar);outline-offset:2px}
  /* an ink wash, not a system highlight — and never pure white on a reading surface */
  ::selection{background:rgba(230,224,211,.24);color:var(--ink)}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:var(--r-sm);border:2px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:padding-box}

  /* ===== layout — rail left · main right ===== */
  /* rail column MUST equal .rail-in width (284px) — a 268px column clipped the rail's right
     16px under the content pane, cutting off New/Search/Crystallize/⌘K on the right */
  .app{display:grid;grid-template-columns:284px 1fr;height:100vh;transition:grid-template-columns var(--xslow) var(--ease)}
  .app.rail-off{grid-template-columns:0 1fr}
  .main{grid-column:2;grid-row:1;min-width:0;height:100vh;display:flex;flex-direction:column;background:var(--paper);position:relative}

  /* rail toggle — always outside the rail (can always reopen) */
  .rail-toggle{position:absolute;top:15px;left:16px;z-index:30;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
    color:var(--dim);background:rgba(255,255,255,.06);border:1px solid var(--line);backdrop-filter:blur(8px);transition:var(--base) var(--ease)}
  .rail-toggle:hover{background:rgba(255,255,255,.1);color:var(--ink)}
  .main.has-top .rail-toggle{display:none}
  /* the mode switch lives in the rail — which is off-screen on a phone, so the three ways of
     working were invisible there. This copy rides in the main column below the burger row;
     desktop never sees it (the rail seg is right there). */
  .seg.top-seg{display:none} /* .seg sets inline-flex further down — needs to outrank it */
  .main.has-top .top-seg{display:none!important} /* canvas open — the topbar owns this strip */

  /* ===== topbar (canvas state) ===== */
  .top{display:flex;align-items:center;gap:7px;padding:13px 22px;border-bottom:1px solid var(--line);flex:none;background:rgba(5,5,6,.72);backdrop-filter:blur(16px) saturate(1.2);z-index:5;transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease)}
  .top.tuck{transform:translateY(-100%);opacity:0;pointer-events:none}
  /* narrow: collapse the secondary buttons (Home/Add files/Paste/Undo/snapshots) to icons so
     the primary actions — Refine + Export — never overflow off the right edge */
  @media(max-width:1040px){
    .top{padding:13px 14px;gap:5px}
    .top .tb:not(.dark):not(.accent){font-size:0;gap:0;padding:8px 9px}
    .top .tb:not(.dark):not(.accent) svg{font-size:13px}
  }
  .tb{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--dim);white-space:nowrap}
  .tb:hover{background:rgba(255,255,255,.05);color:var(--ink)}
  .tb.dark{background:var(--ink);color:var(--on-ink);font-weight:600}
  .tb.dark:hover{background:#fff}
  /* plan-locked control (e.g. Refine on Basic) — dimmed + a small PRO tag */
  .tb.locked{background:transparent;color:var(--mute);font-weight:500;border:1px solid var(--line)}
  .tb.locked:hover{background:rgba(255,255,255,.04);color:var(--dim)}
  .tb.locked::after{content:"PRO";font-family:var(--mono,ui-monospace,monospace);font-size:9px;letter-spacing:.12em;padding:1px 5px;border:1px solid currentColor;border-radius:var(--r-pill);opacity:.85;margin-left:2px}
  .tb.accent{color:var(--ink);font-weight:600;border:1px solid var(--line2)}
  .tb.think{background:var(--grad);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    font-weight:700;border:1px solid var(--line2);animation:chromaflow 8s ease-in-out infinite}
  .tb.think:hover{border-color:rgba(255,255,255,.5);background:var(--grad);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
  .tb.accent:hover{background:rgba(255,255,255,.05);border-color:var(--ink)}
  .top-title{font-family:var(--body);font-style:italic;font-size:16.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-align:center;padding:0 8px}
  .save-ind{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mute);opacity:0;transition:opacity var(--slow);white-space:nowrap}
  .save-ind.show{opacity:1}
  .exp-wrap{position:relative}
  .exp-menu{position:absolute;top:calc(100% + 8px);right:0;background:rgba(24,24,27,.92);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-ml);
    padding:6px;min-width:200px;box-shadow:var(--pop);display:none;z-index:40;transform-origin:top right;animation:popIn .24s var(--ease)}
  @keyframes popIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
  .exp-menu.show{display:block}
  .exp-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:500;text-align:left;transition:var(--fast)}
  .exp-item:hover{background:rgba(255,255,255,.05)}
  .exp-item .mo{font-family:var(--mono);font-size:10px;color:var(--mute);margin-left:auto}

  /* ===== HOME (brief + attach files) ===== */
  .home,.cv{animation:viewIn .5s var(--ease) both}
  @keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .home{position:relative;flex:1;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:40px 24px}
  .home::before{content:"";position:fixed;inset:-24%;pointer-events:none;z-index:0;
    background:
      radial-gradient(36% 44% at 80% 22%,rgba(64,150,255,.05),transparent 72%),
      radial-gradient(28% 38% at 16% 86%,rgba(255,90,31,.04),transparent 72%),
      radial-gradient(24% 32% at 68% 90%,rgba(79,195,255,.03),transparent 72%);
    animation:agl 24s ease-in-out infinite alternate}
  .home::after{content:none}
  .home>*{position:relative;z-index:1}
  .home-in{width:100%;max-width:800px;padding-bottom:7vh;margin:auto;display:flex;flex-direction:column} /* margin:auto centers when short, stays fully scrollable when tall */
  .h-eye{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);font-weight:500}
  /* E1 — time-aware greeting eyebrow above the home title */
  @keyframes titleMorph{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
  .h-title.morph{animation:titleMorph var(--slow) var(--ease)}
  .h-greet{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;animation:paneIn .5s var(--ease) both}
  .h-title{font-family:var(--body);font-weight:500;font-size:clamp(25px,2.7vw,35px);letter-spacing:-.012em;line-height:1.22;margin:4px 0 22px;color:#ded8cb;text-wrap:balance}
  /* mode — a Claude-style product switcher at the top of the rail; three ways of working */
  /* mode — segmented switch: three words, a sliding thumb, nothing else */
  /* mode — sits just under the composer, left-aligned, quiet (Claude's model-picker spot) */
  .seg{position:relative;display:inline-flex;align-self:flex-start;gap:2px;margin:16px 0 0;padding:2px;border:1px solid rgba(255,255,255,.07);border-radius:var(--r-pill);background:rgba(255,255,255,.02)}
  .seg button{position:relative;z-index:1;font-size:12px;font-weight:600;color:var(--mute);padding:6px 15px;border-radius:var(--r-pill);transition:color var(--base) var(--ease)}
  /* rail variant — full width at the top of the sidebar, three equal segments */
  /* inset 12px to match New/Search — a full-bleed seg made "Crystallize" jam the rail edge */
  .seg.rail-seg{display:flex;align-self:stretch;margin:14px 12px 16px;border-radius:var(--r-lg);background:rgba(255,255,255,.03)}
  .seg.rail-seg button{flex:1;min-width:0;text-align:center;padding:7px 2px;font-size:11px;letter-spacing:-.01em;white-space:nowrap;border-radius:var(--r-md)}
  .seg.rail-seg .seg-thumb{border-radius:var(--r-md)}
  .seg button:hover{color:var(--dim)}
  .seg button.on{color:var(--ink)}
  .seg-thumb{position:absolute;top:3px;left:0;height:calc(100% - 6px);border-radius:var(--r-pill);background:rgba(255,255,255,.09);
    transition:transform var(--slow) var(--ease),width var(--slow) var(--ease);will-change:transform}
  .md-scope{font-family:var(--mono);font-size:9px;color:var(--cin-d);letter-spacing:.04em;text-transform:none}
  /* first-paint entrance — list rows drift in 30ms apart, then .settled turns it off so
     re-renders (rename, select, save) never replay the animation */
  .rail:not(.settled) .s-item,.rail:not(.settled) .md-item,.rail:not(.settled) .p-row{animation:railIn .26s var(--ease) both}
  .rail:not(.settled) :is(#recentList,#mdList,#projList)>*:nth-child(2){animation-delay:30ms}
  .rail:not(.settled) :is(#recentList,#mdList,#projList)>*:nth-child(3){animation-delay:60ms}
  .rail:not(.settled) :is(#recentList,#mdList,#projList)>*:nth-child(4){animation-delay:90ms}
  .rail:not(.settled) :is(#recentList,#mdList,#projList)>*:nth-child(5){animation-delay:120ms}
  .rail:not(.settled) :is(#recentList,#mdList,#projList)>*:nth-child(n+6){animation-delay:150ms}
  @keyframes railIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
  /* pane switch — a quiet fade+rise so mode changes feel fluid, never abrupt */
  .mode-pane.pane-in{animation:paneIn .22s var(--ease)}
  @keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* keyboard focus — visible ring on controls only (contenteditable keeps its soft bg) */
  button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(79,195,255,.55);outline-offset:2px;border-radius:var(--r-sm)}
  .mode-pane{animation:homeUp .4s var(--ease) both}
  /* the save-hint teaches once — hidden as soon as a conversation exists, and on phones */
  .id-note{font-size:12px;color:var(--mute);margin-top:14px;text-align:center;line-height:1.5}
  .idea.hero.has-chat .id-note{display:none}
  @media(max-width:760px){.id-note{display:none}}
  /* Brief start surface */
  /* one shape family across all three entry surfaces — same radius, tint and focus behaviour as .id-in */
  .brief-start{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:16px 16px 12px;transition:border-color var(--base),background var(--base)}
  .brief-start:focus-within{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
  .brief-start textarea{width:100%;background:transparent;border:none;outline:none;resize:none;color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.7;min-height:78px}
  .brief-start textarea::placeholder{color:var(--mute)}
  /* wraps because Ref joined Attach here — three controls don't fit 375px on one line */
  .brief-start-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px}
  .brief-start-foot .go{margin-left:auto}
  .brief-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
  .brief-files:empty{display:none}
  .brief-interview .id-thread{max-height:46vh}
  .brief-interview .id-m .tx{font-size:15.5px;line-height:1.78}
  /* Brief — the current question pops as a focused card, Claude-style */
  .q-card{border:1px solid var(--line2);border-left:2px solid var(--cinnabar);border-radius:var(--r-lg);
    background:rgba(255,255,255,.04);padding:16px 18px;margin:16px 0 6px;animation:qPop .34s var(--ease) both}
  .q-eye{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--cin-d);font-weight:600;margin-bottom:10px}
  .q-dot{width:6px;height:6px;border-radius:50%;background:var(--cinnabar)}
  .q-body{font-family:var(--body);font-size:15.5px;line-height:1.7;color:#efece6}
  .q-body strong,.q-body b{color:#eae4d8;font-weight:600}
  .q-body p{margin:0 0 8px}.q-body p:last-child{margin-bottom:0}
  .q-body ul{margin:8px 0 0 18px}.q-body li{margin:4px 0}
  @keyframes qPop{from{opacity:0;transform:translateY(10px) scale(.985)}60%{opacity:1;transform:translateY(-2px) scale(1.004)}to{transform:none}}
  /* one-tap answers — same row shape as the command palette, so it reads as a known control */
  .q-opts{display:flex;flex-direction:column;gap:2px;margin-top:14px}
  .q-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-sm);
    font-family:var(--ui);font-size:13px;color:var(--dim);transition:background var(--base),color var(--base)}
  .q-opt .qo-n{width:22px;height:22px;flex:none;border-radius:var(--r-xs);display:grid;place-items:center;
    background:var(--soft);color:var(--mute);font-family:var(--mono);font-size:10px}
  .q-opt .qo-t{flex:1;min-width:0}
  .q-opt .qo-k{flex:none;font-size:11px;color:transparent}
  .q-opt.on{background:rgba(255,255,255,.07);color:var(--ink)}
  .q-opt.on .qo-n{background:rgba(255,255,255,.14);color:var(--ink)}
  .q-opt.on .qo-k{color:var(--mute)}
  .q-opt.q-other{color:var(--mute);margin-top:2px}
  .q-opt.q-other:hover{color:var(--ink)}
  .q-opt .qo-skip{flex:none;font-size:11px;font-weight:600;color:var(--mute);padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line)}
  .q-opt .qo-skip:hover{color:var(--ink);border-color:var(--line2)}
  .q-hint{margin-top:9px;font-size:11px;color:var(--mute)}
  @media(hover:none){.q-opt .qo-k{display:none}.q-hint{display:none}}
  .brief-compile{display:flex;align-items:center;gap:14px;margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r-lg);background:rgba(120,235,180,.06);animation:chipIn .24s var(--ease)}
  .brief-compile .bc-note{flex:1;font-size:13px;color:var(--dim)}
  .brief-compile .go{flex:none}
  /* early escape hatch — offered before VÆST calls it complete, so keep it quieter than the green "done" state */
  .brief-compile.early{background:transparent;border-color:var(--line);border-style:dashed}
  .brief-compile.early .go{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--ink)}
  .brief-box{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);transition:border-color var(--base),background var(--base)}
  .brief-box:focus-within{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
  .brief-box textarea{width:100%;border:none;outline:none;resize:none;background:none;font-family:inherit;
    font-size:15px;line-height:1.72;color:var(--ink);padding:20px 22px 6px;min-height:124px;max-height:320px}
  .brief-box textarea::placeholder{color:var(--mute)}
  .chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 16px 0}
  .chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--dim);
    background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;max-width:100%}
  .chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chip b{color:var(--cinnabar);font-weight:600;font-size:9px;letter-spacing:.04em}
  .chip button{color:var(--mute);font-size:13px;line-height:1;padding:0 1px}
  .chip button:hover{color:var(--cin-d)}
  .bb-foot{display:flex;align-items:center;gap:12px;padding:12px 14px 14px}
  .bb-attach{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--dim);padding:8px 13px;border-radius:var(--r-sm);border:1px solid var(--line2);transition:var(--fast)}
  .bb-attach:hover{border-color:var(--ink);color:var(--ink)}
  .bb-hint{font-size:12px;color:var(--mute)}
  .go{margin-left:auto;display:inline-flex;align-items:center;gap:9px;color:var(--on-ink);
    font-weight:600;font-size:15px;padding:12px 24px;border-radius:var(--r-ml);transition:transform var(--slow) var(--ease),box-shadow var(--slow) var(--ease),filter var(--base);
    background:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,0.65)}
  .go:hover{background:#fff;transform:translateY(-1.5px);box-shadow:0 9px 26px rgba(0,0,0,0.65)}
  .go:active{transform:none}
  .h-foot{margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mute)}

  /* drop overlay */
  .dropzone{position:fixed;inset:0;z-index:90;background:rgba(5,5,6,.92);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;pointer-events:none}
  .dropzone.on{display:flex}
  .dz-in{border:1.5px dashed var(--cinnabar);border-radius:var(--r-lg);padding:44px 68px;font-size:15px;font-weight:600;color:var(--cin-d);background:var(--sheet)}

  /* ===== CANVAS — seamless editorial (no paper sheet) ===== */
  /* ═══ the canvas as stock, not as a screen ═══════════════════════════════════════════
     Four moves, all below the threshold where anyone would name them, because a texture
     you notice is decoration and this has to read as material.

     1 — GROUND. --paper is #111114, which carries a blue bias (B is 3 above R). Uncoated
         stock in low light goes the other way. --stock is the same value rotated warm:
         the eye reads "paper" before it reads "darker", and nothing about the layout moved.
     2 — GRAIN. A tiled fractal-noise tile at 3.5% over the ground. At 100% zoom it is
         invisible per-pixel and present as a whole — the difference between a surface and
         a fill. Tiled so it costs one rasterise, and pinned to .doc so it travels with the
         page the way tooth travels with paper.
     3 — INK. Rules stop being uniform 1px hairlines. Real ruling is heavier where the nib
         starts, so borders carry a gradient that fades along their length.
     4 — Print drops all of it — see the export CSS. Grain on a laser printer is dirt. */
  .cv{flex:1;overflow-y:auto;min-height:0;background:var(--stock);padding:0}
  /* Measured, because the note that sat here quoted a 700px column that had not existed for a
     while: at 16.5px a Thai character averages 7.37px, so this width gives ~81 per line. Thai
     has no spaces between words — when a line wraps the eye has nothing to grab — so the
     measure matters more here than in Latin, and it is why the column came in when the type
     did. Left at the old 860px the same text runs to 102. The whole column narrows together
     (heading, tools, body) so the section toolbar stays beside the text. */
  /* the tooth of the stock — one 140px fractal-noise tile at 3.5%. Deliberately below the
     threshold of "I can see a texture": the job is to stop the ground reading as a flat fill. */
  .doc{max-width:684px;margin:0 auto;padding:78px 50px 145px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
    background-repeat:repeat}
  @media(max-width:720px){.doc{padding:56px 26px 100px}}
  .mast-head{padding-bottom:40px;margin-bottom:4px;border-bottom:1px solid transparent;border-image:var(--rule) 1}
  .mh-eye{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);font-weight:500}
  /* the eyebrow is now editable — a quiet affordance, not a button */
  .mh-eye[onclick]{cursor:pointer;transition:color var(--base)}
  .mh-eye[onclick]:hover{color:var(--dim)}
  .mh-eye.unset{color:#5f5e59}.mh-eye.unset:hover{color:var(--cinnabar)}
  .mh-title{font-family:var(--body);font-style:italic;font-weight:500;font-size:clamp(31px,4vw,42px);line-height:1.12;
    letter-spacing:-.004em;margin-top:20px;outline:none;text-wrap:balance;border-radius:var(--r-xs);transition:background var(--base) var(--ease)}
  .mh-title:hover,.mh-title:focus{background:var(--soft)}
  .mh-meta{display:flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  .mh-meta .sl{color:var(--dim);font-family:var(--body);font-style:italic;font-size:15px;font-weight:500}
  /* flow trail — signposts the sequence: Crystallize ✓ → Think (optional) → Refine → Export */
  .flow-trail{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
  .flow-trail .ft{display:inline-flex;align-items:center;gap:6px}
  .flow-trail .ft.act{cursor:pointer;color:var(--dim);transition:color var(--fast)}
  .flow-trail .ft.act:hover{color:var(--ink)}
  .flow-trail .ft.done{color:var(--mute)}
  .flow-trail .ft.next{color:var(--cin-d)}
  .flow-trail .ft .ck{color:var(--cin-d)}
  .flow-trail .ft em{font-style:normal;font-size:9px;opacity:.75;border:1px solid var(--line2);border-radius:var(--r-xl);padding:1px 5px;letter-spacing:.06em}
  .flow-trail .sep{opacity:.3}
  .sec{padding:52px 0 0;animation:secIn .7s var(--reveal) both;transition:opacity var(--slow) var(--ease);border-radius:var(--r-sm)}
  /* the crystallize moment: on a fresh document each section carries an inline animation-delay,
     so they settle into place one after another — the same cascade the hero opens with. Only on
     a fresh Crystallize/Brief (renderDoc adds the delays); edits and undo re-render with no
     stagger, so working never feels laggy. */
  .sec.pour{animation-duration:.8s}
  .sec:first-of-type{padding-top:40px}
  @keyframes secIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .sec.flash{animation:flash 1.6s var(--ease)}
  @keyframes flash{0%{background:rgba(var(--cin-rgb),.09)}100%{background:transparent}}
  .sec.drop-tgt{box-shadow:0 0 0 2px var(--cinnabar),0 0 0 8px rgba(var(--cin-rgb),.12);background:rgba(var(--cin-rgb),.04)}
  .sec-top{display:flex;align-items:center;justify-content:space-between;min-height:20px;gap:8px}
  .sec-eye{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--mute);font-weight:500;display:flex;align-items:center;gap:9px}
  .sec-eye .pin-on{color:var(--cinnabar)}
  .sec-tools{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity var(--fast)}
  .sec:hover .sec-tools{opacity:1}
  .st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--mute);padding:5px 8px;border-radius:var(--r-xs);transition:var(--fast)}
  .st:hover{background:rgba(255,255,255,.06);color:var(--ink)}
  .st.on{color:var(--cinnabar)}
  .st.busy{color:var(--cin-d);pointer-events:none}
  .st.think b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
  .st.think:hover b{-webkit-text-fill-color:var(--ink)}
  /* flow-trail hint — light the per-section Think buttons so people find the moved control */
  .st.think.hint{color:var(--ink);background:rgba(255,255,255,.09);animation:pl 1.1s ease-in-out 2}
  .sec-tools:has(.st.hint){opacity:1}
  /* ── Think per section — Mimir proposes, approve applies to this section only ── */
  .sec-think{border:1px solid var(--line);border-radius:var(--r-ml);background:var(--card);margin:14px 0 6px;padding:4px 16px 10px;animation:chipIn .24s var(--ease)}
  .sth-hd{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);padding:10px 0 4px}
  .sth-hd b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sth-count{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute)}
  .sth-stream{font-family:var(--body);font-size:13.5px;line-height:1.75;color:var(--dim);padding:6px 0 8px}
  .sth-i{padding:10px 0;border-top:1px solid var(--line);animation:pushIn .34s var(--ease) both}
  .sth-i .sth-t{font-family:var(--body);font-size:13.5px;line-height:1.7;color:var(--ink)}
  .sth-i.done .sth-t{color:var(--mute)}
  .sth-i .mi-act{display:flex;gap:8px;margin-top:9px}
  .sth-foot{display:flex;border-top:1px solid var(--line);padding-top:4px;margin-top:2px}
  /* inline section idea composer */
  .sec-idea{display:flex;align-items:flex-end;gap:8px;margin:10px 0 6px;padding:9px 10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-ml);animation:chipIn .24s var(--ease)}
  .sec-idea textarea{flex:1;background:transparent;border:none;outline:none;resize:none;color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.55;max-height:140px;padding:5px 4px}
  .sec-idea textarea::placeholder{color:var(--mute)}
  .si-go{flex:none;font-size:12px;font-weight:600;color:var(--on-ink);background:var(--ink);padding:8px 14px;border-radius:var(--r-md)}
  .si-go:hover{background:#fff}
  /* whole-document idea bar */
  /* quiet secondary input — recedes so the document itself is the focus (matches .brief-box.secondary) */
  .doc-idea{display:flex;align-items:flex-end;gap:9px;margin:10px 0 30px;padding:9px 11px;background:transparent;border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);transition:border-color var(--fast),opacity var(--base)}
  .doc-idea:focus-within{border-color:var(--line2)}
  .doc-idea.working{opacity:.5;pointer-events:none}
  .doc-idea textarea{flex:1;background:transparent;border:none;outline:none;resize:none;color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.55;max-height:120px;padding:6px 5px}
  .doc-idea textarea::placeholder{color:var(--mute)}
  .di-go{flex:none;font-size:12px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line2);padding:8px 15px;border-radius:var(--r-md);transition:var(--fast)}
  .di-go:hover{background:rgba(255,255,255,.12);color:#fff}
  /* Brief · Match a reference — reshape the brief toward a pasted example */
  .ref-panel,.bref-panel{margin:10px 0 30px;padding:14px 15px;border:1px solid var(--line);border-left:2px solid var(--cinnabar);
    border-radius:var(--r-lg);background:rgba(255,255,255,.03);animation:qPop .28s var(--ease) both}
  .bref-panel{margin:12px 0 0}
  .rp-eye,.bref-eye{font-size:12px;line-height:1.5;color:var(--dim);margin-bottom:10px}
  .bref-eye b{color:var(--ink);font-weight:600}
  .ref-panel textarea,.bref-panel textarea{width:100%;background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:var(--r-md);outline:none;resize:vertical;
    color:var(--ink);font-family:var(--ui);font-size:13px;line-height:1.6;padding:10px 12px;max-height:280px;transition:border-color var(--fast)}
  .ref-panel textarea:focus,.bref-panel textarea:focus{border-color:var(--line2)}
  .ref-panel textarea::placeholder,.bref-panel textarea::placeholder{color:var(--mute)}
  .rp-foot,.bref-foot{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin-top:11px}
  /* the set reference, shown quietly under the composer */
  .bref-chip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
  .bref-chip .chip.ref b{color:var(--cinnabar)}
  .bref-note{font-size:11px;color:var(--mute)}
  #brefBtn.on{border-color:var(--cinnabar);color:var(--ink)}
  .rp-x{font-size:12px;font-weight:600;color:var(--mute);padding:8px 12px;border-radius:var(--r-md);transition:var(--fast)}
  .rp-x:hover{color:var(--ink)}
  .rp-go{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink);
    background:rgba(255,255,255,.06);border:1px solid var(--line2);padding:8px 15px;border-radius:var(--r-md);transition:var(--fast)}
  .rp-go:hover{background:rgba(255,255,255,.12);color:#fff}
  .rp-attach{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--dim);padding:7px 11px;border-radius:var(--r-md);border:1px solid var(--line);transition:var(--fast)}
  .rp-attach:hover{color:var(--ink);border-color:var(--line2)}
  /* line-height 1.4: Thai stacks vowels above and tone marks above those — 1.32 clipped them */
  /* gentle tracking only — a serif at display size doesn't want the tight negative tracking a
     sans can carry, and Thai's loops get cramped under it too */
  .sec-h{font-family:var(--body);font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.004em;line-height:1.4;margin:16px 0 18px;outline:none;border-radius:var(--r-xs);padding:2px 5px;margin-left:-5px;transition:background var(--fast)}
  .sec-h:hover,.sec-h:focus{background:var(--soft)}
  /* document body — comfortable serif */
  /* #d8d5ce on --paper is 12.9:1 — still far past WCAG AAA, but off the 16:1 of near-white on
     near-black, which halates around Thai's thin strokes and tone marks. */
  .sec-c{font-family:var(--body);font-size:16px;line-height:1.78;color:#d9d4c9;outline:none;border-radius:var(--r-xs);padding:2px 5px;margin-left:-5px;max-width:none;transition:background var(--fast)}
  .sec-c:hover{background:var(--soft)}
  .sec-c:focus{background:rgba(255,255,255,.055)}
  .sec-c p{margin:0 0 22px;text-wrap:pretty}.sec-c p:last-child{margin-bottom:4px}
  .sec-c strong{font-weight:600;color:var(--ink)}
  .sec-c em{font-style:italic}
  /* sub-heading inside a section — serif now, like everything VÆST writes (law #4). Size and
     brightness carry the step down from .sec-h; weight can't, since only 400/500 are loaded. */
  .sec-c .ph{font-family:var(--body);font-weight:500;color:var(--ink);font-size:17.5px;line-height:1.5;letter-spacing:-.002em;margin:30px 0 12px}
  .sec-c ul{margin:13px 0 20px;padding-left:26px}
  .sec-c ul li{margin:10px 0;padding-left:6px}
  .sec-c ul{list-style:none;padding-left:22px}
  .sec-c ul li{position:relative}
  .sec-c ul li::before{content:"–";position:absolute;left:-22px;color:var(--mute)}
  .sec-c ol{margin:13px 0 20px;padding-left:28px}
  .sec-c ol li{margin:10px 0;padding-left:6px}
  .sec-c ol li::marker{color:var(--mute);font-family:var(--mono);font-size:13px}
  .sec-c blockquote{border-left:2px solid transparent;
    border-image:linear-gradient(180deg,rgba(230,224,211,.85),rgba(230,224,211,.42)) 1;
    padding:3px 0 3px 20px;margin:20px 0;color:var(--dim);font-style:italic}
  .sec-c code{font-family:var(--mono);font-size:.8em;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:var(--r-xs)}
  .sec-c hr{border:0;height:0;border-top:1px solid var(--line);margin:26px 0;width:64px}
  .sec-c pre{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 17px;overflow-x:auto;margin:16px 0}
  .sec-c pre code{background:none;padding:0;font-size:13.5px;line-height:1.72}
  .sec-c a{color:var(--cin-d);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .sec-c img{max-width:100%;height:auto;border-radius:var(--r-sm);margin:16px 0;display:block;box-shadow:0 1px 2px rgba(0,0,0,0.40),0 8px 26px rgba(0,0,0,0.52)}
  /* tables — airy, readable */
  .sec-c table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;line-height:1.6;display:block;overflow-x:auto}
  .sec-c th{font-family:var(--ui);text-align:left;font-weight:600;font-size:13.5px;color:var(--ink);
    border-bottom:1.5px solid transparent;border-image:var(--rule-h) 1;padding:10px 20px 10px 0;white-space:nowrap}
  .sec-c td{border-bottom:1px solid transparent;border-image:var(--rule) 1;padding:11px 20px 11px 0;vertical-align:top}
  .sec-c tr:last-child td{border-bottom:none}
  /* per-section attached files */
  .sec-files{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 2px}
  .sec-file{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--cin-d);
    background:rgba(var(--cin-rgb),.06);border:1px solid rgba(var(--cin-rgb),.22);border-radius:var(--r-sm);padding:5px 10px}
  .sec-file button{color:var(--cin-d);opacity:.6;font-size:12px}.sec-file button:hover{opacity:1}

  /* streaming state */
  /* 700px matches .doc so the crystallizing text doesn't reflow when the final document swaps in */
  .gen{max-width:860px;margin:0 auto;padding:88px 56px 120px}
  @media(max-width:720px){.gen{padding:56px 26px}}
  .gen-eye{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--cin-d);font-weight:500;margin-bottom:24px}
  /* sources converging — each name fades up in turn, then the document streams below */
  .gen-conv{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-8px 0 30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
  .gc-src{font-family:var(--mono);font-size:11px;color:var(--dim);background:rgba(255,255,255,.05);border:1px solid var(--line);
    border-radius:var(--r-pill);padding:6px 13px;opacity:0;transform:translateY(6px);animation:gcin .5s var(--ease) forwards}
  .gc-plus{font-family:var(--mono);font-size:12px;color:var(--mute)}
  @keyframes gcin{to{opacity:1;transform:none}}
  .pulse{width:8px;height:8px;border-radius:50%;background:var(--cinnabar);animation:pl 1.1s ease-in-out infinite}
  @keyframes pl{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}
  .gen-body{font-family:var(--body);font-size:18.5px;line-height:2;color:#ecebe5}
  /* generation flourish */
  .gen-bar{position:absolute;left:0;right:0;top:0;height:2px;z-index:6;overflow:hidden;display:none}
  .gen-bar.on{display:block}
  .gen-bar::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#4fc3ff,#dff4ff,#f08a5e,var(--cinnabar),transparent);
    background-size:40% 100%;animation:genrun 1.15s linear infinite}
  @keyframes genrun{from{background-position:-40% 0}to{background-position:140% 0}}
  .genning .gen-body,.genning #genBody{position:relative}
  .gen-body .cursor,#genBody .cursor{box-shadow:0 0 10px 1px rgba(79,195,255,.7)}
  .gen-body .ph{font-family:var(--body);font-weight:500;color:var(--ink)}
  .cursor{display:inline-block;width:2px;height:1.05em;border-radius:2px;background:var(--cinnabar);margin-left:2px;vertical-align:text-bottom;animation:curfade 1.1s var(--ease) infinite}
  @keyframes curfade{0%,100%{opacity:1}50%{opacity:.28}}
  /* time-to-first-token status — a quiet rotating line, gone the instant text lands */
  .id-wait{color:var(--mute);font-style:italic;animation:waitfade 1.6s var(--ease) infinite}
  @keyframes waitfade{0%,100%{opacity:.55}50%{opacity:.9}}
  @keyframes bl{0%,50%{opacity:1}51%,100%{opacity:0}}

  /* ===== MASTERING panel ===== */
  .mast{border:1px solid var(--line);border-radius:var(--r-ml);overflow:hidden;margin:6px 0 40px;background:var(--card);box-shadow:var(--pop);animation:popIn .32s var(--ease)}
  .mast-top{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:#0c0c0e;color:var(--ink);border-bottom:1px solid var(--line)}
  .mast-hd{display:flex;flex-direction:column;gap:4px;min-width:0}
  .mast-ttl{font-size:13px;font-weight:600;letter-spacing:.01em}
  .mast-sub{font-family:var(--ui);font-size:11.5px;font-weight:500;line-height:1.45;color:var(--dim);max-width:56ch}
  .mast-count{margin-left:auto;flex:none;padding-top:2px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
  .mi{display:flex;gap:12px;padding:15px 16px;border-top:1px solid var(--line)}
  .mi:first-of-type{border-top:none}
  .mi.done{opacity:.55}
  .mi-dot{width:8px;height:8px;border-radius:50%;background:var(--cinnabar);flex:none;margin-top:7px}
  .mi.done .mi-dot{background:var(--mute)}
  .mi.fixed .mi-dot{background:var(--ok)}
  .mi-b{flex:1;min-width:0}
  .mi-t{font-family:var(--body);font-size:14px;line-height:1.6;color:var(--ink)}
  .mi-t strong{font-weight:700;color:var(--ink)}
  .mi-act{display:flex;gap:8px;margin-top:10px}
  .mi-ap{background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:600;padding:7px 14px;border-radius:var(--r-sm);transition:var(--fast)}
  .mi-ap:hover{background:#fff}
  .mi-sk{color:var(--dim);font-size:12px;font-weight:600;padding:7px 10px;border-radius:var(--r-sm)}
  .mi-sk:hover{color:var(--ink);background:rgba(255,255,255,.05)}
  .mi-tag{margin-top:9px;font-size:11px;font-weight:700}
  .mi-tag.ok{color:var(--ok)}.mi-tag.skip{color:var(--mute)}
  .mi-peek{color:var(--dim);font-size:11px;font-weight:600;margin-left:8px;text-decoration:underline;text-underline-offset:2px}
  .mi-peek:hover{color:var(--ink)}
  .mi-run{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--cin-d);margin-top:9px}
  .mast-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.025)}
  .mi-all{background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:700;padding:8px 15px;border-radius:var(--r-sm)}
  .mi-all:hover{background:#fff}
  .mi-close{margin-left:auto;color:var(--dim);font-size:12px;font-weight:600;padding:8px 10px}
  .mi-close:hover{color:var(--ink)}

  /* ===== RAIL (Black Russian) ===== */
  .rail{grid-column:1;grid-row:1;background:#0a0a0b;color:var(--snow);overflow:hidden;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
  .rail-in{width:284px;height:100%;display:flex;flex-direction:column;margin-right:auto}
  .r-top{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;flex:none}
  .r-mark{width:24px;height:24px;flex:none}
  .r-wm{font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:.12em}
  .r-wm i{font-style:normal;color:inherit}
  .r-new{display:flex;align-items:center;gap:10px;margin:2px 12px 10px;padding:11px 13px;border-radius:var(--r-sm);
    border:1px solid rgba(255,255,255,.16);font-size:13px;font-weight:600;color:var(--snow);transition:var(--fast)}
  .r-new:hover{background:rgba(255,255,255,.1);border-color:rgba(0,0,0,0.64)}
  .r-search{display:flex;align-items:center;gap:9px;margin:0 12px 10px;padding:9px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:500;color:#8f8c84;background:rgba(255,255,255,.045);transition:var(--fast) var(--ease)}
  .r-search:hover{background:rgba(255,255,255,.09);color:#d6d3cb}
  .r-search svg{opacity:.7;flex:none}
  .r-search .rs-k{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.04em;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-xs);padding:2px 6px}
  .r-scroll{flex:1;overflow-y:auto;padding:4px 12px 10px;min-height:0}
  .r-scroll::-webkit-scrollbar-thumb{border-color:#0a0a0b;background:rgba(255,255,255,.16)}
  .r-lbl{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
    text-transform:uppercase;color:#8b8a84;font-weight:600;padding:16px 6px 7px}
  .r-lbl button{width:20px;height:20px;border-radius:var(--r-xs);display:grid;place-items:center;color:#8e8e88;font-size:13px}
  .r-lbl button:hover{background:rgba(255,255,255,.09);color:var(--snow)}
  .s-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-sm);font-size:13px;font-weight:500;
    color:#b9b9b2;cursor:pointer;transition:var(--fast);position:relative}
  .s-item:hover{background:rgba(255,255,255,.06);color:var(--snow)}
  .s-item.on{background:rgba(255,255,255,.09);color:var(--snow);font-weight:600}
  .s-item .dot{width:5px;height:5px;border-radius:50%;background:#54544f;flex:none}
  .s-item.on .dot{background:var(--cinnabar)}
  /* mode icon per Recents/Projects item — colour-cues the three modes without shouting */
  .s-item .s-ic{flex:none;display:flex;color:#6f6e68;transition:color var(--fast)}
  .s-item:hover .s-ic,.s-item.on .s-ic{color:var(--dim)}
  /* Mode is carried by the glyph, not by a hue. Three tints used to do it — #c98a5e, #7fb0d6,
     #7f9c86 — a second colour system running underneath a palette that is charcoal, off-white and
     one warm accent, and the only blue and green left in the product. They were also redundant:
     the icon already says which mode a session is. The one coloured thing in the list stays the
     dot on the session you have open, which is the only fact the list cannot show by shape. */
  .mi-ic{display:block}
  /* MD library list */
  .md-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-sm);font-size:12px;color:var(--dim);cursor:pointer;transition:background var(--fast)}
  .md-item:hover{background:rgba(255,255,255,.05);color:var(--ink)}
  .md-item .mi-ic{flex:none;color:#6f6e68}
  .md-item .md-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .md-item .more{opacity:0;flex:none;color:var(--mute);font-size:13px;padding:0 2px}
  .md-item:hover .more{opacity:1}
  .r-lbl-n{font-family:var(--mono);font-size:9px;color:var(--mute);letter-spacing:0}
  /* MD viewer sheet — solid surface so the bright home behind never bleeds through */
  .md-sheet{max-width:640px;max-height:76vh;display:flex;flex-direction:column;background:#141417;border:1px solid var(--line2)}
  #mdView{background:rgba(0,0,0,.72)}
  .md-view-hd{display:flex;align-items:flex-start;gap:14px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
  .md-view-t{flex:1;font-size:17px;font-weight:600;color:var(--ink);line-height:1.4;outline:none;border-radius:var(--r-xs)}
  .md-view-t:focus{background:rgba(255,255,255,.05)}
  .md-view-act{display:flex;gap:8px;flex:none}
  .md-view-act button{font-size:12px;font-weight:600;color:var(--dim);border:1px solid var(--line2);border-radius:var(--r-md);padding:6px 11px;transition:var(--fast)}
  .md-view-act button:hover{color:var(--ink);border-color:var(--ink)}
  .md-view-body{padding:18px 22px 24px;overflow-y:auto;font-family:var(--body);font-size:16px;line-height:1.95;color:#d8d5ce}
  .md-view-body h1,.md-view-body h2,.md-view-body .ph{font-family:var(--ui);color:var(--ink)}
  .s-item .sb{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
  .s-item .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .s-item .tt.editing{overflow:visible;white-space:normal;background:rgba(255,255,255,.14);color:var(--snow);
    outline:1px solid rgba(0,0,0,0.65);border-radius:var(--r-xs);padding:1px 5px;margin:-1px -5px;cursor:text}
  .s-item .more{opacity:0;width:20px;height:20px;border-radius:var(--r-xs);display:grid;place-items:center;color:#8e8e88;font-size:13px;letter-spacing:.5px;flex:none}
  .s-item:hover .more{opacity:1}
  .s-item .more:hover{background:rgba(255,255,255,.1);color:var(--snow)}
  .p-row{display:flex;align-items:center;gap:7px;padding:8px 9px 5px;font-size:12px;font-weight:700;color:#d8d8d2;position:relative;cursor:pointer;border-radius:var(--r-sm)}
  .p-row:hover{background:rgba(255,255,255,.03)}
  .p-row .pcar{font-size:9px;color:var(--mute);width:9px;flex:none;transition:color var(--fast)}
  .p-row:hover .pcar{color:var(--dim)}
  .p-row .pi{font-family:var(--mono);font-size:9px;color:var(--cinnabar)}
  .p-row .p-n{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--mute);font-weight:400}
  .p-row .more{opacity:0;margin-left:auto;width:20px;height:20px;border-radius:var(--r-xs);display:grid;place-items:center;color:#8e8e88;font-size:13px}
  .p-row .p-n+.more{margin-left:6px}
  .p-row:hover .more{opacity:1}
  .p-row .more:hover{background:rgba(255,255,255,.1);color:var(--snow)}
  .p-kids{padding-left:10px}
  /* General-pool divider inside the MD library when a project scope is also shown */
  .md-div{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:8px 9px 3px}
  /* drag a Recent / MD onto a project to file it there */
  .p-block{border-radius:var(--r-md);transition:background var(--fast),box-shadow var(--fast)}
  .p-block.drop-on{background:rgba(var(--cin-rgb),.1);box-shadow:inset 0 0 0 1px var(--cinnabar)}
  .s-item[draggable],.md-item[draggable]{cursor:grab}
  .s-item[draggable]:active,.md-item[draggable]:active{cursor:grabbing}
  /* empty states — a quiet dashed card with a glyph, not a bare mumble */
  .r-empty{display:flex;align-items:center;gap:9px;font-size:11px;color:#8b8a84;line-height:1.5;padding:2px 12px 8px}
  .r-empty svg{display:none}
  .r-empty b{font-weight:600;color:var(--dim);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .r-empty b:hover{color:var(--ink)}
  .r-empty.sm{border:none;padding:2px 9px 6px;margin:0}
  /* document outline — jump nav for the open doc */
  /* rail usage meter — quiet, glanceable, click-through to Settings */
  .r-usage{flex:none;margin:8px 12px 2px;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-lg);
    background:rgba(255,255,255,.025);cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color var(--fast),background var(--fast)}
  .r-usage:hover{border-color:var(--line2);background:rgba(255,255,255,.045)}
  .r-usage .qn{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;color:var(--ink)}
  .r-usage .qn em{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--dim)}
  .r-usage .qbar{height:6px;border-radius:var(--r-sm);background:rgba(255,255,255,.09);overflow:hidden}
  .r-usage .qbar i{display:block;height:100%;border-radius:var(--r-sm);background:var(--cinnabar)}
  .r-usage .qbar i.hot{background:var(--cinnabar)}
  .r-usage .qv{font-size:11px;color:var(--mute)}
  .r-foot{flex:none;padding:12px 16px 14px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px;
    font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#8b8a84}
  .sync{width:6px;height:6px;border-radius:50%;background:#7a7871;flex:none}
  .sync.ok{background:var(--ok)}.sync.sync{background:var(--warn);animation:pl 1s infinite}.sync.off{background:var(--cinnabar)}
  .r-foot .tok{margin-left:auto}

  /* ctx menu */
  .ctx{position:fixed;background:rgba(24,24,27,.92);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);border:1px solid rgba(255,255,255,.12);color:var(--ink);border-radius:var(--r-ml);padding:5px;
    min-width:176px;box-shadow:var(--pop);z-index:100;display:none}
  .ctx.show{display:block;animation:popIn var(--base) var(--ease)}
  .ctx button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:var(--r-xs);font-size:13px;font-weight:500}
  .ctx button:hover{background:rgba(255,255,255,.05)}
  .ctx button.danger{color:var(--cin-d)}
  .ctx .sep{height:1px;background:var(--line);margin:4px 6px}
  .ctx .cap{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:7px 12px 3px}
  .ctx .ctx-ask{display:block;width:calc(100% - 12px);margin:2px 6px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);font-family:var(--ui);font-size:12px;outline:none}
  .ctx .ctx-ask:focus{border-color:var(--line2);background:rgba(255,255,255,.06)}
  .ctx .ctx-ask::placeholder{color:var(--mute)}

  /* selection toolbar — refine highlighted text */
  .sel-bar{position:fixed;z-index:95;display:none;align-items:center;gap:1px;padding:4px;background:rgba(18,18,21,.9);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
    border-radius:var(--r-ml);box-shadow:var(--pop);transform:translate(-50%,-100%);will-change:top,left}
  .sel-bar.show{display:flex;animation:selIn .18s var(--ease)}
  .sel-bar.below{transform:translate(-50%,0)}
  @keyframes selIn{from{opacity:0;transform:translate(-50%,-100%) scale(.94)}to{opacity:1}}
  .sel-bar button{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#e6e2da;
    padding:7px 11px;border-radius:var(--r-sm);white-space:nowrap;transition:background var(--fast),color var(--fast)}
  .sel-bar button:hover{background:rgba(245,243,238,.13);color:var(--ink)}
  .sel-bar .sb-div{width:1px;height:15px;background:rgba(245,243,238,.15);margin:0 3px;flex:none}
  .sel-bar .sb-ask{background:transparent;border:none;outline:none;color:#e6e2da;font-family:var(--ui);font-size:12px;width:150px;padding:7px 8px}
  .sel-bar .sb-ask::placeholder{color:#79766e}
  .sel-bar .sb-ask:focus{width:200px;transition:width var(--base) var(--ease)}
  .sel-bar .sb-run{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;font-size:12px;color:#e6e2da;white-space:nowrap}

  /* command palette (⌘K) */
  .pal{position:fixed;inset:0;z-index:130;display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;
    background:rgba(0,0,0,0.60);backdrop-filter:blur(5px)}
  .pal.show{display:flex;animation:palBg var(--base) var(--ease)}
  @keyframes palBg{from{opacity:0}to{opacity:1}}
  .pal-box{width:100%;max-width:552px;background:rgba(22,22,25,.88);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);box-shadow:var(--pop);overflow:hidden;animation:palIn .26s var(--ease)}
  @keyframes palIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
  .pal-in{display:flex;align-items:center;gap:12px;padding:16px 19px;border-bottom:1px solid var(--line)}
  .pal-in svg{color:var(--mute);flex:none}
  .pal-in input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:15px;color:var(--ink)}
  .pal-in input::placeholder{color:var(--mute)}
  .pal-in kbd{font-family:var(--mono);font-size:10px;color:var(--mute);border:1px solid var(--line2);border-radius:var(--r-xs);padding:3px 7px}
  .pal-list{max-height:52vh;overflow-y:auto;padding:7px}
  .pal-cap{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:11px 10px 5px}
  .pal-item{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--ink)}
  .pal-item .pi-i{width:27px;height:27px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--soft);color:var(--dim);flex:none;font-size:13px}
  .pal-item .pi-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pal-item .pi-s{font-family:var(--mono);font-size:10px;color:var(--mute);flex:none}
  .pal-item.on{background:rgba(255,255,255,.1);color:var(--ink)}
  .pal-item.on .pi-i{background:rgba(255,255,255,.14);color:var(--ink)}
  .pal-item.on .pi-s{color:var(--dim)}
  .pal-empty{padding:26px;text-align:center;color:var(--mute);font-size:13px}

  /* version snapshots modal */
  .snap{position:fixed;inset:0;z-index:130;display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;background:rgba(0,0,0,0.60);backdrop-filter:blur(5px)}
  .snap.show{display:flex;animation:palBg var(--base) var(--ease)}
  .snap-box{width:100%;max-width:520px;background:rgba(22,22,25,.88);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);box-shadow:var(--pop);overflow:hidden;animation:palIn .26s var(--ease)}
  .snap-hd{display:flex;align-items:center;gap:10px;padding:16px 19px;border-bottom:1px solid var(--line)}
  /* Panel titles — same family, same italic, same weight, and they were 18, 25 and 22, because
     each was written on the day its panel was. Nobody ever saw the three side by side; the user
     sees them on consecutive clicks. */
  .snap-hd b{font-family:var(--body);font-style:italic;font-weight:500;font-size:22px}
  .snap-hd .save{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:600;padding:8px 14px;border-radius:var(--r-sm)}
  .snap-hd .save:hover{background:#fff}
  .snap-list{max-height:56vh;overflow-y:auto;padding:7px}
  .snap-it{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm)}
  .snap-it:hover{background:var(--soft)}
  .snap-it .si-b{flex:1;min-width:0}
  .snap-it .si-n{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .snap-it .si-t{font-family:var(--mono);font-size:10px;color:var(--mute);margin-top:2px}
  .snap-it .si-r{font-size:12px;font-weight:600;color:var(--cin-d);padding:6px 11px;border-radius:var(--r-sm)}
  .snap-it .si-r:hover{background:rgba(var(--cin-rgb),.08)}
  .snap-it .si-x{color:var(--mute);font-size:13px;padding:6px 8px;border-radius:var(--r-xs)}
  .snap-it .si-x:hover{color:var(--ink);background:rgba(255,255,255,.06)}
  .snap-empty{padding:30px 20px;text-align:center;color:var(--mute);font-size:13px;line-height:1.7}

  /* auth — Sign in / Sign up */
  /* auth — the landing's night, in liquid glass · vars re-scoped so every child resolves light */
  .auth{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:24px;background:#050506;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    --ink:#f2f1ee;--dim:#a1a09b;--mute:#77766f;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.2);--card:rgba(255,255,255,.05);--soft:rgba(255,255,255,.06);--cin-d:#ff8a5c;
    color:var(--ink)}
  .auth::before{content:"";position:fixed;inset:-24%;pointer-events:none;
    background:
      radial-gradient(38% 46% at 78% 24%,rgba(64,150,255,.07),transparent 72%),
      radial-gradient(30% 40% at 20% 84%,rgba(255,90,31,.05),transparent 72%),
      radial-gradient(26% 34% at 66% 88%,rgba(79,195,255,.035),transparent 72%);
    animation:agl 20s ease-in-out infinite}
  @keyframes agl{0%,100%{transform:none}33%{transform:translate(-2.5%,1.8%) scale(1.07)}66%{transform:translate(2%,-1.5%) scale(1.04)}}
  .auth::after{content:none}
  .auth.show{display:flex}
  .auth-x{position:absolute;top:18px;right:20px;width:32px;height:32px;border-radius:50%;
    display:grid;place-items:center;color:var(--mute);font-size:15px;transition:var(--fast);z-index:2}
  .auth-x:hover{color:var(--ink);background:rgba(255,255,255,.07)}
  .auth-in{position:relative;z-index:2;width:100%;max-width:404px;margin-top:auto;margin-bottom:auto;animation:viewIn .5s var(--ease) both;
    background:rgba(255,255,255,.055);backdrop-filter:blur(28px) saturate(1.35);-webkit-backdrop-filter:blur(28px) saturate(1.35);
    border:1px solid rgba(255,255,255,.13);border-radius:var(--r-xl);padding:38px 34px 30px;
    box-shadow:0 34px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
  .auth-mark{display:flex;align-items:center;gap:11px;margin-bottom:32px}
  .auth-mark svg{width:30px;height:30px;border-radius:var(--r-md)}
  .auth-mark .wm{font-family:var(--ui);font-weight:700;font-size:17px;letter-spacing:.12em;color:var(--ink)}
  .auth-mark .wm i{font-style:normal;color:inherit}
  .auth-h{font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1.1;margin-bottom:24px;color:var(--ink)}
  .auth-f{display:flex;flex-direction:column;gap:10px}
  .auth-f input{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:13px 16px;font-family:inherit;font-size:15px;
    color:var(--ink);background:rgba(255,255,255,.05);outline:none;transition:border-color var(--base) var(--ease),background var(--base) var(--ease)}
  .auth-f input:focus{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.085)}
  .auth-f input::placeholder{color:#8b8a84}
  .auth-f input:-webkit-autofill{-webkit-text-fill-color:#f2f1ee;-webkit-box-shadow:0 0 0 40px #1b1b1d inset;caret-color:#f2f1ee}
  .auth-go{margin-top:6px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--on-ink);font-weight:600;font-size:15px;
    padding:13px;border-radius:var(--r-lg);background:#f2f1ee;
    box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform var(--slow) var(--ease),background var(--base)}
  .auth-go:hover{background:#fff;transform:translateY(-1px)}
  /* Google — quieter than .auth-go on purpose: the filled button is whichever action the form
     is currently for, and this sits above it as the calmer, faster alternative */
  .auth-goog{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
    padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
    font-family:var(--ui);font-size:13px;font-weight:500;color:var(--ink);background:rgba(255,255,255,.04);
    transition:border-color var(--base) var(--ease),background var(--base) var(--ease)}
  .auth-goog:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.075)}
  .auth-goog svg{flex:none}
  .auth-or{display:flex;align-items:center;gap:12px;margin:15px 0 14px;font-size:11px;color:var(--mute)}
  .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09)}
  .auth-err{font-size:12px;color:var(--cin-d);min-height:18px;line-height:1.5}
  .auth-err.ok{color:var(--dim)} /* "check your inbox" is the happy path, not a failure */
  .auth-sw{margin-top:18px;font-size:13px;color:var(--dim)}
  /* plan sheet — Claude-style: three cards, one clearly recommended, three bullets each */
  .auth-in.plans{max-width:880px}
  .pl-hd{font-family:var(--body);font-size:27px;font-weight:500;color:#efece6;text-align:center}
  .pl-ctx{text-align:center;font-size:13px;color:var(--cin-d);margin:8px 0 0}
  .pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
  .pl-card{position:relative;display:flex;flex-direction:column;padding:22px 20px 18px;border:1px solid var(--line);
    border-radius:var(--r-xl);background:rgba(255,255,255,.025);text-align:left}
  .pl-card.hot{border-color:rgba(var(--cin-rgb),.55);background:rgba(var(--cin-rgb),.05)}
  .pl-badge{position:absolute;top:-10px;left:18px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
    text-transform:uppercase;background:var(--cinnabar);color:#fff;padding:3px 10px;border-radius:var(--r-pill)}
  .pl-name{font-size:15px;font-weight:700;color:var(--ink)}
  .pl-price{font-size:26px;font-weight:700;color:#efe9dd;margin:7px 0 0;letter-spacing:-.01em}
  .pl-price i{font-style:normal;font-size:12px;color:var(--mute);font-weight:500;letter-spacing:0}
  .pl-list{list-style:none;margin:16px 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
  .pl-list li{font-size:12px;color:var(--dim);line-height:1.5;padding-left:19px;position:relative}
  .pl-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--cin-d);font-size:11px}
  .pl-eng{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--mute);line-height:1.7}
  .pl-eng b{color:var(--dim);font-weight:600}
  .pl-cta{margin-top:auto;width:100%;text-align:center;font-size:13px;font-weight:600;padding:10px 0;
    border-radius:var(--r-md);border:1px solid var(--line2);color:var(--ink);transition:var(--fast)}
  .pl-cta:hover{background:rgba(255,255,255,.08)}
  .pl-card.hot .pl-cta{background:var(--ink);color:#0a0a0c;border-color:transparent}
  .pl-card.hot .pl-cta:hover{background:#fff}
  /* legible, not shouted — the reader should be able to finish it without effort */
  .pl-terms{max-width:62ch;margin:22px auto 0;text-align:center;font-size:12px;line-height:1.75;color:var(--mute)}
  .pl-terms a{color:var(--dim);border-bottom:1px solid rgba(255,255,255,.18)}
  .pl-terms a:hover{color:var(--ink);border-color:var(--ink)}
  .pl-foot{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--mute)}
  .pl-foot b{color:var(--dim);font-weight:600}
  .pl-foot button,.pl-foot a{font-size:12px;color:var(--dim);text-decoration:none;transition:color var(--fast)}
  .pl-foot button:hover,.pl-foot a:hover{color:var(--ink)}
  .pl-dot{opacity:.5}
  @media(max-width:760px){.pl-grid{grid-template-columns:1fr;gap:12px}.pl-card.hot{order:-1}.auth-in.plans{max-width:420px}}
  .plan-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    padding:14px 16px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:var(--r-lg);
    background:rgba(255,255,255,.02);color:var(--ink,#f2f1ee);cursor:pointer;text-align:left;
    transition:border-color var(--base),background var(--base),transform var(--base) var(--ease)}
  .plan-opt:hover{border-color:var(--acc,var(--cinnabar));background:rgba(255,255,255,.05);transform:translateY(-1px)}
  .plan-opt b{font-size:15px}
  .plan-price{font-size:15px;font-weight:600;white-space:nowrap}
  .auth-sw button{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:6px}
  .auth-foot{margin-top:40px;text-align:center}
  .auth-foot .af-links{margin-top:10px;font-family:var(--ui);font-size:12px;color:var(--mute)}
  .auth-foot .af-links a{color:var(--dim);text-decoration:none}
  .auth-foot .af-links a:hover{color:var(--ink)}

  /* usage analytics modal */
  .stats{position:fixed;inset:0;z-index:135;display:none;align-items:flex-start;justify-content:center;padding:6vh 20px 20px;background:rgba(0,0,0,0.62);backdrop-filter:blur(6px);overflow-y:auto}
  .stats.show{display:flex;animation:palBg var(--base) var(--ease)}
  .stats-box{width:100%;max-width:720px;background:rgba(22,22,25,.88);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);box-shadow:var(--pop);padding:32px 32px 28px;animation:palIn .28s var(--ease)}
  .stats-hd{display:flex;align-items:flex-end;gap:12px;margin-bottom:4px}
  .stats-hd b{font-family:var(--body);font-style:italic;font-weight:500;font-size:22px}
  .stats-hd .x{margin-left:auto;color:var(--mute);font-size:20px;padding:4px 8px;border-radius:var(--r-sm)}
  .stats-hd .x:hover{color:var(--ink);background:var(--soft)}
  .stats-note{font-size:12px;color:var(--mute);line-height:1.6;margin-bottom:18px}
  .rate-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
  .rate-f{display:flex;flex-direction:column;gap:5px}
  .rate-f label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  .rate-f input{width:140px;border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 11px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--app);outline:none}
  .rate-f input:focus{border-color:var(--ink)}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
  @media(max-width:640px){.kpis{grid-template-columns:1fr 1fr}}
  .kpi{background:var(--app);border:1px solid var(--line);border-radius:var(--r-ml);padding:14px 15px}
  .kpi .kn{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .kpi .kv{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:5px}
  .kpi .kv small{font-size:12px;font-weight:500;color:var(--mute)}
  .st-tbl{width:100%;border-collapse:collapse;font-size:13px}
  .st-tbl th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500;padding:8px 10px 8px 0;border-bottom:1px solid var(--line2)}
  .st-tbl td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
  .st-tbl td.num,.st-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
  .st-tbl .marg{font-weight:700}
  .st-tbl .marg.good{color:var(--ok)}.st-tbl .marg.thin{color:var(--cin-d)}
  .st-h2{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:22px 0 8px}
  .r-foot .who{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .r-foot .who:hover{color:#d6d3cb;text-decoration:underline;text-underline-offset:2px}

  /* share comments */
  .cmt-add{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:var(--r-xs);padding:6px 11px;margin:10px 0 4px;transition:var(--fast)}
  .cmt-add:hover{color:var(--ink);border-color:var(--line2)}
  .cmt{border-left:2px solid var(--cinnabar);background:rgba(var(--cin-rgb),.05);border-radius:0 6px 6px 0;padding:11px 14px;margin:10px 0}
  .cmt .ch{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:10px;color:var(--mute);margin-bottom:5px}
  .cmt .ch b{color:var(--cin-d);letter-spacing:.04em}
  .cmt .ct{font-size:13px;line-height:1.7;color:var(--ink);font-family:var(--ui)}
  .cmt .cr{margin-left:auto;color:var(--mute);font-size:11px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .cmt .cr:hover{color:var(--ink)}
  .cmt-form{border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px;margin:10px 0;background:var(--card)}
  .cmt-form input,.cmt-form textarea{width:100%;background:var(--app);border:1px solid var(--line);border-radius:var(--r-xs);color:var(--ink);
    font-family:var(--ui);font-size:13px;padding:8px 10px;outline:none;margin-bottom:8px}
  .cmt-form textarea{min-height:64px;resize:vertical;line-height:1.6}
  .cmt-form input:focus,.cmt-form textarea:focus{border-color:var(--ink)}
  .cmt-form .row{display:flex;gap:8px;justify-content:flex-end}
  .cmt-form .send{background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:600;padding:8px 16px;border-radius:var(--r-xs)}
  .cmt-form .send:hover{background:#fff}
  .cmt-form .cxl{color:var(--mute);font-size:12px;font-weight:600;padding:8px 10px}

  /* snapshot diff */
  .diffv{position:fixed;inset:0;z-index:132;display:none;align-items:flex-start;justify-content:center;padding:6vh 20px 20px;background:rgba(0,0,0,0.62);backdrop-filter:blur(5px);overflow-y:auto}
  .diffv.show{display:flex;animation:palBg var(--base) var(--ease)}
  .diff-box{width:100%;max-width:760px;background:rgba(22,22,25,.88);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);box-shadow:var(--pop);padding:26px 28px 24px;animation:palIn .26s var(--ease)}
  .diff-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
  .diff-hd b{font-family:var(--body);font-style:italic;font-weight:500;font-size:22px}
  .diff-hd .x{margin-left:auto;color:var(--mute);font-size:20px;padding:4px 8px;border-radius:var(--r-sm)}
  .diff-hd .x:hover{color:var(--ink);background:var(--soft)}
  .diff-sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
  .df-sec{padding:14px 0;border-top:1px solid var(--line)}
  .df-h{font-size:13px;font-weight:700;margin-bottom:7px;display:flex;gap:8px;align-items:baseline}
  .df-tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
  .df-tag.add{color:var(--ok)}.df-tag.del{color:var(--cinnabar)}.df-tag.mod{color:var(--warn)}
  .df-b{font-family:var(--body);font-size:14.5px;line-height:1.85;color:var(--dim);word-break:break-word}
  .df-b ins{background:rgba(var(--ok-rgb),.14);color:var(--ok-d);text-decoration:none;border-radius:2px;padding:0 1px}
  .df-b del{background:rgba(var(--cin-rgb),.1);color:#c98a6e;text-decoration:line-through;border-radius:2px;padding:0 1px}
  .df-none{padding:20px 0;color:var(--mute);font-size:13px}

  /* project voice textarea */
  .vc-ta{width:100%;min-height:150px;resize:vertical;background:var(--app);border:1px solid var(--line2);border-radius:var(--r-sm);
    padding:12px 14px;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink);outline:none}
  .vc-ta:focus{border-color:var(--ink)}
  .vc-ta::placeholder{color:var(--mute)}
  .vc-ta[readonly]{opacity:.85}

  /* brand-voice: distil from the brand's own material */
  .vc-extract{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 13px;background:rgba(255,255,255,.015)}
  .vc-ex-lbl{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--dim);margin-bottom:9px}
  .vc-link{display:flex;gap:7px}
  .vc-link input{flex:1;min-width:0;background:var(--app);border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 11px;font-family:var(--ui);font-size:12px;color:var(--ink);outline:none}
  .vc-link input:focus{border-color:var(--ink)}
  .vc-link input::placeholder{color:var(--mute)}
  .vc-link input:disabled{opacity:.5}
  .vc-add{flex:none;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line2);font-size:12px;font-weight:600;color:var(--ink);transition:var(--fast)}
  .vc-add:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
  .vc-add:disabled{opacity:.5;border-color:var(--line)}
  .vc-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  .vc-src:empty{display:none}
  .vc-chip{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:4px 6px 4px 9px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--app);font-size:11px;color:var(--dim)}
  .vc-chip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vc-chip button{flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:var(--mute);font-size:10px}
  .vc-chip button:hover{background:rgba(255,255,255,.1);color:var(--ink)}
  .vc-ex-row{display:flex;align-items:center;gap:10px;margin-top:11px}
  .vc-file{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--dim)}
  .vc-file:hover{color:var(--ink)}
  .vc-distill{margin-left:auto;padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line2);font-size:12px;font-weight:700;
    color:var(--cinnabar);transition:var(--fast)}
  .vc-distill:hover{border-color:var(--cinnabar)}
  .vc-distill:disabled{opacity:.6;border-color:var(--line)}
  .vc-or{text-align:center;font-size:11px;color:var(--mute);margin:14px 0 10px}
  .vc-confirm{margin-top:10px;font-size:12px;line-height:1.6;color:var(--dim)}
  .vc-confirm b{color:var(--ink)}

  .cv-tab .tx{margin-left:8px;opacity:.6;font-size:10px}
  .cv-tab .tx:hover{opacity:1}
  .cv-tab.addt{padding:6px 12px;color:var(--mute);border-style:dashed}
  .cv-tab.addt:hover{color:var(--ink)}
  /* no margin-left:auto / float here — the buttons used to hang off the message header and
     needed pushing right. They now sit in the .id-acts flex row, where an auto margin on every
     child spreads them evenly across the full width instead of grouping them. */
  .id-use{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--mute);border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 8px}
  .id-use:hover{color:var(--ink);border-color:var(--line2)}
  .id-m .who{display:flex;align-items:center;gap:8px}
  .cmt .cr.ca{margin-left:auto;color:var(--cinnabar);text-decoration:none;font-weight:700}
  .cmt .cr.ca+.cr{margin-left:12px}

  /* share view — client-side paper mode (warm cream, matches the exported PDF deliverable) */
  body.share-light{--ink:#161511;--charcoal:#f2f0e9;--snow:#161511;--app:#fdfdf9;--paper:#fdfdf9;--sheet:#fdfdf9;--card:#fffefb;
    --line:rgba(27,24,21,.11);--line2:rgba(27,24,21,.2);--dim:#5a5a55;--mute:#9b9a94;--soft:rgba(27,24,21,.05);--cin-d:#c24a24}
  body.share-light .sec-c,body.share-light .gen-body{color:#26251f}
  body.share-light .top{background:rgba(253,253,249,.88)}
  body.share-light .tb.dark{color:#fff}
  body.share-light ::selection{background:rgba(17,17,16,.16);color:#12110f}

  .bb-chain{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mute);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;margin-right:10px;transition:var(--fast)}
  .bb-chain:hover{color:var(--ink);border-color:var(--line2)}
  .bb-chain.on{color:var(--cinnabar);border-color:var(--line2);font-weight:700}
  .vc-taste{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12px;color:var(--dim)}
  .vc-taste b{color:var(--ink)}
  .vc-taste button{font-size:11px;font-weight:600;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
  .vc-taste button:hover{color:var(--cin-d)}
  .stop-btn{position:fixed;right:30px;bottom:30px;z-index:61;display:none;align-items:center;gap:8px;background:rgba(22,22,25,.9);backdrop-filter:blur(14px);border:1px solid var(--line2);color:var(--ink);font-size:13px;font-weight:600;padding:10px 18px;border-radius:var(--r-pill);box-shadow:0 10px 30px rgba(0,0,0,.4)}
  .stop-btn.show{display:inline-flex}
  .stop-btn:hover{border-color:var(--ink)}
  .stop-btn .sq{width:9px;height:9px;border-radius:2px;background:var(--cinnabar)}
  .to-top{position:fixed;right:30px;bottom:30px;z-index:60;width:42px;height:42px;border-radius:50%;
    background:rgba(22,22,25,.85);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);color:var(--ink);font-size:15px;
    opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--base) var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.4)}
  .to-top.show{opacity:1;visibility:visible;transform:none}
  .to-top:hover{background:rgba(34,34,38,.95);border-color:rgba(255,255,255,.3)}
  /* a quiet invitation to the story — bottom-right, only on the home (never over the canvas) */
  .about-fab{position:fixed;right:24px;bottom:24px;z-index:55;display:inline-flex;align-items:center;gap:6px;
    font-family:var(--ui);font-size:12px;color:var(--dim);text-decoration:none;opacity:.9;
    background:rgba(22,22,25,.72);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
    border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;box-shadow:0 6px 24px rgba(0,0,0,.4);
    transition:color var(--fast),border-color var(--fast),transform var(--fast),opacity var(--fast)}
  .about-fab b{color:var(--ink);font-weight:600}
  .about-fab .af-ar{color:var(--cinnabar);font-size:11px}
  .about-fab:hover{opacity:1;border-color:var(--line2);transform:translateY(-1px)}
  .main.has-top .about-fab{display:none}

  .exp-sep{height:1px;background:var(--line);margin:5px 8px}
  .exp-item.present .mo{color:var(--cinnabar);font-weight:700}
  .exp-item.present{font-weight:600}

  /* settings tabs + profile + usage */
  .set-wide{max-width:520px}
  .set-tabs{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid var(--line)}
  .set-tab{font-size:12px;font-weight:600;color:var(--mute);padding:12px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--fast)}
  .set-tab:hover{color:var(--dim)}
  .set-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
  .set-body{padding:20px 20px 24px;max-height:calc(84vh - 116px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .set-pane{display:none}.set-pane.on{display:block;animation:homeUp var(--slow) var(--ease)}
  .pf-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}
  .pf-av{width:60px;height:60px;border-radius:50%;flex:none;background:var(--card) center/cover no-repeat;border:1px solid var(--line2);
    display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:var(--ink);cursor:pointer;transition:var(--base)}
  .pf-av:hover{border-color:var(--ink)}
  .pf-av.sm{width:20px;height:20px;font-size:10px;border-width:1px;margin-right:2px}
  .pv-toggle{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--dim);cursor:pointer}
  .pv-toggle input{margin-top:2px;accent-color:var(--cinnabar)}
  .usage-break{margin-top:12px}
  .ub-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--dim)}
  .ub-row b{color:var(--ink);font-family:var(--mono);font-size:12px}
  .ub-off{font-family:var(--mono);font-size:10px;font-style:normal;letter-spacing:.04em;color:var(--cin-d);margin-left:7px}
  .s-item .lock{flex:none;font-size:10px;opacity:.7;margin-right:2px}

  /* CI dialog — replaces browser confirm/prompt */
  .dlg{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
  .dlg.show{display:flex;animation:palBg var(--base) var(--ease)}
  .dlg-box{width:100%;max-width:400px;background:rgba(22,22,25,.92);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
    border:1px solid rgba(255,255,255,.13);border-radius:var(--r-xl);padding:24px 24px 18px;box-shadow:0 34px 90px rgba(0,0,0,.55);animation:palIn .26s var(--ease)}
  .dlg-msg{font-size:15px;line-height:1.6;color:var(--ink);margin-bottom:18px}
  .dlg-in{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-ml);padding:11px 14px;
    font-family:var(--ui);font-size:13px;color:var(--ink);outline:none;margin-bottom:18px}
  .dlg-in:focus{border-color:rgba(255,255,255,.5)}
  .dlg-row{display:flex;justify-content:flex-end;gap:10px}
  .dlg-cancel{font-size:13px;font-weight:600;color:var(--dim);padding:9px 16px;border-radius:var(--r-md)}
  .dlg-cancel:hover{color:var(--ink);background:var(--soft)}
  .dlg-ok{font-size:13px;font-weight:600;color:var(--on-ink);background:var(--ink);padding:9px 18px;border-radius:var(--r-md)}
  .dlg-ok:hover{background:#fff}
  .dlg-ok.danger{background:var(--cinnabar);color:#fff}.dlg-ok.danger:hover{background:var(--cin-d)}

  /* paste tiles + settings + micro-motion */
  @keyframes chipIn{from{opacity:0;transform:translateY(5px) scale(.96)}}
  .chip{cursor:pointer;animation:chipIn var(--slow) var(--ease);transition:transform var(--fast) var(--ease),border-color var(--fast)}
  .chip:hover{transform:translateY(-1px);border-color:var(--line2)}
  .chip.paste b{color:var(--cinnabar);font-weight:700}
  .paste-body{padding:14px 18px 20px;max-height:56vh;overflow-y:auto}
  .paste-body pre{white-space:pre-wrap;word-break:break-word;font-family:var(--ui);font-size:13px;line-height:1.75;color:#e6e4de}
  /* display:block is load-bearing now: this class sits on a <div> in some places and a <label> in
     others, and a label is inline — without it the margin collapses and the field rides up beside
     its own name. */
  .set-lbl{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
  label.set-lbl{cursor:pointer}
  .tm-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
  .tm-row:last-child{border-bottom:none}
  .tm-e{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .tm-x{flex:none;width:22px;height:22px;border-radius:var(--r-xs);color:var(--mute);font-size:12px;transition:color var(--fast),background var(--fast)}
  .tm-x:hover{color:var(--cinnabar);background:rgba(var(--cin-rgb),.1)}
  .set-note{font-size:12px;color:var(--dim);line-height:1.65;margin-top:10px}
  /* Summing source picker */
  .sum-src{margin-top:16px;display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow-y:auto}
  .sum-warn{margin-bottom:10px;padding:10px 12px;border:1px solid var(--line);border-left:2px solid var(--cinnabar);border-radius:var(--r-md);background:rgba(255,255,255,.03);font-size:12px;line-height:1.5;color:var(--dim)}
  .sum-warn b{color:var(--ink);font-weight:600}
  .sum-r{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-md);cursor:pointer;transition:background var(--fast) var(--ease)}
  .sum-r:hover{background:rgba(255,255,255,.05)}
  .sum-r input{flex:none;width:16px;height:16px;accent-color:var(--cinnabar);cursor:pointer}
  .sum-nm{font-size:13px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .sum-r.on-topic .sum-nm{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
  .sum-sub{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mute);text-transform:uppercase}
  .set-link{font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .set-link:hover{color:var(--ink)}
  /* API keys pane */
  .api-key{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .api-key:last-child{border-bottom:none}
  .api-kmeta{display:flex;flex-direction:column;gap:3px;min-width:0}
  .api-kmeta b{font-size:13px}
  .api-kp{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--mute)}
  .api-new{border:1px solid var(--cinnabar);border-radius:var(--r-lg);padding:14px;background:rgba(var(--cin-rgb),.07)}
  .api-new-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cin-d);margin-bottom:9px}
  .api-newkey{font-family:var(--mono);font-size:12px;word-break:break-all;color:var(--ink);background:rgba(0,0,0,.28);border-radius:var(--r-md);padding:11px;margin-bottom:11px;user-select:all}
  .api-copy{font-family:var(--mono);font-size:11px;letter-spacing:.06em;font-weight:600;color:var(--on-ink);background:#f2f1ee;border-radius:var(--r-md);padding:9px 16px;cursor:pointer;transition:background var(--base)}
  .api-copy:hover{background:#fff}
  .r-gear{margin-left:auto;color:#8b8a84;padding:4px;border-radius:var(--r-sm);display:inline-flex;transition:var(--base) var(--ease)}
  .r-gear:hover{color:var(--snow);background:rgba(255,255,255,.07);transform:rotate(40deg)}
  .id-m{animation:chipIn var(--slow) var(--ease)}
  @keyframes homeUp{from{opacity:0;transform:translateY(10px)}}
  .home-in>*{animation:homeUp .5s var(--ease) both}
  .home-in>*:nth-child(2){animation-delay:.05s}.home-in>*:nth-child(3){animation-delay:.1s}
  .home-in>*:nth-child(4){animation-delay:.16s}.home-in>*:nth-child(5){animation-delay:.22s}

  /* comment badge + quota */
  .cbadge{flex:none;min-width:17px;height:17px;padding:0 5px;border-radius:var(--r-pill);background:var(--cinnabar);color:#fff;
    font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-right:2px}
  /* ── About tab — version badge + engine roster ── */
  .about-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 0 6px}
  .ab-mark{width:44px;height:44px;margin-bottom:12px}
  .ab-wm{font-family:var(--body);font-size:26px;font-weight:500;letter-spacing:.02em;color:#efe9dd}
  .ab-wm i{font-style:normal}
  .ab-ver{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--mute);margin-left:4px;vertical-align:2px}
  .ab-tag{font-size:12px;color:var(--mute);margin-top:8px}
  .engine-list{display:flex;flex-direction:column;gap:2px;margin-top:10px}
  .eg-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-ml);background:rgba(255,255,255,.02);border:1px solid var(--line)}
  .eg-l{flex:none;display:flex;align-items:center;gap:7px}
  .eg-l b{font-size:13px;font-weight:700;color:var(--ink)}
  .eg-role{font-size:11px;color:var(--mute);margin-left:6px}
  .eg-sub{flex:1;min-width:0;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eg-model{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--dim)}
  .eg-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
  .eg-dot.off{background:var(--cinnabar)}
  .eg-ver{flex:none;font-family:var(--mono);font-size:10px;color:var(--mute)}
  .ab-foot{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute);line-height:1.8;text-align:center}
  .ab-foot a{text-decoration:none}
  /* internal team chip in the rail (replaces the usage meter for unlimited accounts) */
  .r-usage.is-chip .qn em{color:var(--mute)}
  /* plan status card — top of Settings ▸ Usage; the free-tier upgrade path */
  .plan-status{margin:0 0 18px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-xl);background:rgba(255,255,255,.025)}
  .ps-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .ps-l{min-width:0}
  .ps-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .ps-name{font-size:17px;font-weight:700;color:var(--ink);margin-top:3px}
  .ps-sub{font-size:12px;color:var(--dim);margin-top:3px}
  .ps-btn{flex:none;font-size:13px;font-weight:600;color:#0a0a0c;background:var(--ink);border-radius:var(--r-md);padding:9px 18px;transition:var(--fast)}
  .ps-btn:hover{background:#fff}
  .ps-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
  .ps-btn.ghost:hover{background:rgba(255,255,255,.08)}
  .quota-row{display:flex;align-items:center;gap:10px;margin:2px 0 12px;font-size:12px;color:var(--dim)}
  .quota-row .qn{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  .quota-row .qbar{flex:1;max-width:220px;height:4px;border-radius:var(--r-xs);background:rgba(255,255,255,.08);overflow:hidden}
  .quota-row .qbar i{display:block;height:100%;border-radius:var(--r-xs);background:var(--cinnabar)}
  .quota-row .qbar i.hot{background:var(--cinnabar)}
  .quota-row .qv{font-family:var(--mono);font-size:10px;color:var(--dim)}

  /* fluid chroma — same breath as the landing, on every gradient accent */
  @keyframes chromaflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  .id-lbl,.id-m.ai .who,.cmt .cr.ca,.bb-chain.on,.chip.paste b,.mi-t .anchor{
    background-size:230% 100%;animation:chromaflow 8s ease-in-out infinite}

  /* flaw overlay — Refined/Think anchors, three rotating hues */
  mark.flaw{background:rgba(79,195,255,.16);color:inherit;border-bottom:2px solid rgba(79,195,255,.7);border-radius:2px;padding:0 1px;transition:background var(--slow)}
  mark.flaw.f1{background:rgba(255,161,75,.15);border-bottom-color:rgba(255,161,75,.7)}
  mark.flaw.f2{background:rgba(255,90,31,.14);border-bottom-color:rgba(255,90,31,.7)}
  mark.flaw.pulse{background:rgba(79,195,255,.36)}
  mark.flaw.f1.pulse{background:rgba(255,161,75,.34)}
  mark.flaw.f2.pulse{background:rgba(255,90,31,.32)}
  .mi-dot.f1{background:#f08a5e}.mi-dot.f2{background:#eb5939}
  .mi-t.hasq{cursor:pointer}
  .mi-t.hasq:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mute)}

  /* canvas tabs — multi-canvas sessions */
  .cv-tabs{display:none;align-items:center;gap:6px;padding:9px 22px 0;flex-wrap:wrap}
  .cv-tabs.has{display:flex}
  .cv-tab{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;transition:var(--fast)}
  .cv-tab:hover{color:var(--ink);border-color:var(--line2)}
  .cv-tab.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink);font-weight:600}

  /* idea sandbox — phase 1 */
  .idea{margin-top:26px;background:rgba(255,255,255,.035);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
    border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);overflow:hidden}
  /* the idea chat is the main surface — give it presence */
  /* Claude-like: the chat is an open thread, not a boxed card */
  .idea.hero{margin-top:14px;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
  .idea.hero:focus-within{box-shadow:none}
  .idea.hero .id-thread{max-height:none;overflow:visible;padding:2px 2px}
  .idea.hero .id-m .tx{font-size:15.5px;line-height:1.78}
  .idea.hero .id-in textarea{font-size:15px;line-height:1.65}
  .idea.hero .id-in{padding:14px 12px 14px 18px}
  .idea.hero .id-in textarea{font-size:15px;padding:8px 4px}
  .idea.hero .id-send{width:36px;height:36px;font-size:15px}
  .idea.hero .id-attach{width:36px;height:36px}
  /* optional brief, demoted below the chat */
  /* home stays a clean Idea chat; brief/files reveal on demand via a quiet toggle */
  .brief-box.collapsed{display:none}
  /* ── anonymous trial — log in / sign up, top-right (ChatGPT-style) ── */
  /* floats over scrollable home content — needs its own backdrop so scrolled text never collides with it */
  .anon-bar{position:absolute;top:10px;right:16px;z-index:30;display:flex;align-items:center;gap:10px;
    padding:6px 8px 6px 14px;border-radius:var(--r-pill);background:rgba(13,13,15,.62);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06)}
  .anon-login{font-size:13px;font-weight:600;color:var(--dim);padding:7px 13px;border-radius:var(--r-md);transition:var(--fast)}
  .anon-login:hover{color:var(--ink);background:rgba(255,255,255,.06)}
  .anon-signup{font-size:13px;font-weight:600;color:var(--on-ink);background:var(--ink);padding:7px 15px;border-radius:var(--r-md);transition:var(--fast)}
  .anon-signup:hover{background:#fff}
  @media(max-width:640px){.anon-bar{top:10px;right:12px}}
  /* free-messages-left hint under the Idea input */
  .anon-limit{margin:14px 2px 2px;font-size:12px;color:var(--mute);text-align:center}
  .anon-limit .al-n{font-family:var(--mono);color:var(--cin-d);font-weight:600}
  .anon-limit button{font-size:12px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
  .anon-limit button:hover{color:var(--cin-d)}
  /* the trial hides the account-only footer — settings gear, sign-out, sync/who row */
  .app.anon .r-foot{display:none}
  /* the Crystallize entry surfaces only once there's a conversation to crystallize */
  .idea.hero .id-sum{opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease)}
  .idea.hero.has-chat .id-sum{opacity:1;pointer-events:auto}
  /* the optional brief/files box recedes — a quiet secondary to the Idea hero, not a second card */
  .brief-box.secondary{background:transparent;border-color:rgba(255,255,255,.06);box-shadow:none}
  .brief-box.secondary:focus-within{border-color:rgba(255,255,255,.14);box-shadow:none;transform:none}
  .brief-box.secondary textarea{min-height:44px}
  .id-hd{display:flex;align-items:center;gap:10px;padding:0 2px 10px}
  .id-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600;flex:none}
  .id-hint{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .id-sum{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.08em;font-weight:600;color:var(--ink);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);padding:6px 13px;transition:border-color var(--base),background var(--base)}
  .id-sum:hover{border-color:var(--ink);background:rgba(255,255,255,.06)}
  .id-thread{max-height:300px;overflow-y:auto;padding:6px 14px;display:block}
  /* first-run empty state — suggested starters */
  /* per-message actions — copy / regenerate / save */
  /* a row under the reply — where you finish reading is where you decide */
  .id-acts{display:flex;align-items:center;gap:6px;margin-top:12px;min-height:24px}
  .id-use.ghost{opacity:0;font-size:11px;padding:2px 7px;transition:opacity var(--fast) var(--ease)}
  .id-m:hover .id-use.ghost,.id-use.ghost:focus-visible{opacity:.62}
  .id-m:hover .id-use.ghost:hover{opacity:1}
  .id-approved{margin-left:2px}
  /* the decision on a fresh idea — Approve leans the taste, Rewrite tries another angle */
  .id-use.approve{color:var(--on-ink);background:var(--ink);border-color:var(--ink);opacity:1;font-size:10px;font-weight:600}
  .id-use.approve:hover{background:#fff;color:var(--on-ink)}
  .id-approved{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--cin-d);padding:2px 0}
  /* memory-horizon notice when the chat runs past what Galdr sees */
  .id-horizon{font-size:11px;color:var(--mute);text-align:center;padding:8px 8px 10px;border-bottom:1px solid rgba(255,255,255,.05);line-height:1.5}
  /* R1 — quiet serif starters on the empty Idea state (a vertical list, never a card strip) */
  .id-m{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .id-m:last-child{border-bottom:none}
  .id-m .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--mute);margin-bottom:9px}
  /* VÆST's name on a reply is a byline, not an event — a rainbow on every message in a long
     chat is the loudest thing on a page whose content is deliberately quiet serif. */
  .id-m.ai .who{color:var(--dim)}
  /* what VÆST says reads in the same serif voice as the canvas; sans is reserved for UI chrome */
  .id-m .tx{font-family:var(--body);font-size:15px;line-height:1.75;color:#d9d4c9;letter-spacing:.002em;word-break:break-word}
  .id-m.you .tx{color:#b4b1aa}
  .id-m .tx p{margin:8px 0}.id-m .tx ul,.id-m .tx ol{margin:8px 0 8px 20px}.id-m .tx li{margin:5px 0}
  /* markdown headings render as .ph — give replies real heading presence (มีหัว) */
  .id-m .tx .ph{font-family:var(--ui);font-size:17px;font-weight:600;letter-spacing:0;line-height:1.5;margin:22px 0 10px;color:#e8e2d6}
  .id-m .tx .ph:first-child{margin-top:0}
  .id-m .tx strong,.id-m .tx b{font-weight:600;color:#eae4d8}
  /* A1 — a stalled reply speaks instead of blinking dead */
  .id-m.ai.stalled .cursor{animation:none;background:transparent}
  .id-m.ai.stalled .cursor::after{content:" still thinking…";font-family:var(--ui);font-size:12px;font-style:italic;color:var(--mute);white-space:nowrap}
  /* Studio DNA — the studio's curated taste, top of Persona */
  .dna{border:1px solid var(--line);border-left:2px solid var(--cinnabar);border-radius:var(--r-xl);padding:18px 18px 16px;background:rgba(255,255,255,.02)}
  .dna-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .dna-eye{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cin-d);font-weight:600}
  .dna-note{font-size:12px;color:var(--mute)}
  .dna-f{display:block;margin-top:12px}
  .dna-f>span{display:block;font-size:11px;color:var(--dim);margin-bottom:6px;font-weight:600}
  .dna-f>span.ok{color:var(--ok-d)}.dna-f>span.no{color:var(--cin-d)}
  .dna-f textarea{width:100%;background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:var(--r-md);outline:none;resize:vertical;
    color:var(--ink);font-family:var(--ui);font-size:13px;line-height:1.6;padding:9px 11px;transition:border-color var(--fast)}
  .dna-f textarea:focus{border-color:var(--line2)}
  .dna-f textarea::placeholder{color:var(--mute)}
  .dna-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:600px){.dna-row{grid-template-columns:1fr}}
  .dna .dlg-ok{margin-top:16px}
  /* A2 — taste memory box in Settings ▸ Persona */
  .taste-box{margin-top:8px}
  .taste-stat{font-size:13px;color:var(--dim)}
  .taste-stat b{font-size:15px;color:var(--ink);font-weight:700}
  .taste-stat span{color:var(--mute)}
  .taste-recent{margin-top:10px;display:flex;flex-direction:column;gap:6px}
  .tr-row{display:flex;align-items:baseline;gap:9px;font-size:12px;line-height:1.5}
  .tr-v{flex:none;font-family:var(--mono);font-size:11px;width:12px}
  .tr-v.ok{color:var(--cin-d)}.tr-v.no{color:var(--mute)}
  .tr-t{color:var(--dim)}
  /* Taste memories — the curatable list (add · pin · remove) + distilled proposals */
  .tm-add{display:flex;gap:8px;margin-bottom:10px}
  .tm-add input{flex:1;background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:var(--r-md);outline:none;color:var(--ink);font-family:var(--ui);font-size:13px;padding:9px 12px}
  .tm-add input:focus{border-color:var(--line2)}
  .tm-add input::placeholder{color:var(--mute)}
  .tm-addbtn{flex:none;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--on-ink);background:var(--ink);border-radius:var(--r-md);padding:0 16px}
  .tm-addbtn:hover{background:#fff}
  .tm-row{display:flex;align-items:center;gap:9px;padding:8px 4px 8px 8px;border-bottom:1px solid var(--line)}
  .tm-row:last-child{border-bottom:none}
  .tm-row.pinned{background:rgba(255,255,255,.02);border-radius:var(--r-md)}
  .tm-pin{flex:none;font-size:13px;color:var(--mute);width:22px}
  .tm-row.pinned .tm-pin{color:var(--cin-d)}
  .tm-pin:hover{color:var(--ink)}
  .tm-t{flex:1;font-family:var(--body);font-size:14.5px;color:var(--ink);line-height:1.5}
  .tm-x{flex:none;color:var(--mute);font-size:12px;width:22px}
  .tm-x:hover{color:var(--cin-d)}
  .tm-prop{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
  .tm-prop span{flex:1;font-family:var(--body);font-size:14px;color:var(--dim);line-height:1.5}
  .tm-approve{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--on-ink);background:var(--ink);border-radius:var(--r-sm);padding:5px 11px;font-weight:600}
  .tm-approve:hover{background:#fff}
  .tm-approve:disabled{background:transparent;color:var(--cin-d);cursor:default}
  /* Think on an Idea reply — Mimir's pushes, each a one-tap follow-up */
  .id-use.think{gap:3px}.id-use.think b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .id-use.think:hover b{-webkit-text-fill-color:var(--ink)}
  .id-think{border:1px solid var(--line);border-left:2px solid var(--cinnabar);border-radius:var(--r-ml);background:rgba(255,255,255,.03);
    padding:12px 15px;margin:2px 0 14px;animation:qPop var(--slow) var(--ease) both}
  .it-hd{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--cin-d);font-weight:600;margin-bottom:8px}
  .it-hd b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .it-stream{font-family:var(--body);font-size:14.5px;line-height:1.7;color:var(--dim)}
  @keyframes pushIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .it-p{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-top:1px solid var(--line);animation:pushIn .34s var(--ease) both}
  .it-p:first-of-type{border-top:none}
  .it-t{flex:1;font-family:var(--body);font-size:14.5px;line-height:1.65;color:#e6e3dc}
  .it-t strong{color:var(--ink);font-weight:600}
  /* Three levels, because there are three different moves here and they are not equal. Keep it (✚)
     is an aside. Explore stays inside the conversation. Document leaves with something made — it
     is the forward move, so it is the only one that gets an edge. Two identical pills side by side
     told the eye they were the same decision. */
  .it-go{flex:none;font-size:11px;font-weight:600;color:var(--mute);border:1px solid transparent;border-radius:var(--r-pill);padding:5px 10px;transition:var(--fast);white-space:nowrap}
  .it-go:hover{color:var(--ink)}
  .it-go.pri{color:var(--ink);border-color:var(--line2);padding:5px 12px}
  .it-go.pri:hover{background:rgba(var(--cin-rgb),.1);border-color:var(--cinnabar)}
  .it-acts{flex:none;display:flex;align-items:center;gap:6px}
  .it-save{font-size:13px;line-height:1;color:var(--mute);width:26px;height:26px;border-radius:var(--r-pill);border:1px solid var(--line);transition:var(--fast)}
  .it-save:hover{color:var(--ink);border-color:var(--ink);background:rgba(255,255,255,.06)}
  .it-x{margin-top:6px;font-size:11px;color:var(--mute);font-weight:600}
  .it-x:hover{color:var(--ink)}
  .id-in{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);background:rgba(255,255,255,.035);margin-top:14px;transition:border-color var(--base),background var(--base)}
  .id-in:focus-within{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.05)}
  .id-in textarea{flex:1;background:transparent;border:none;outline:none;resize:none;color:var(--ink);font-family:var(--ui);font-size:13px;line-height:1.6;max-height:140px;padding:6px 4px}
  .id-in textarea::placeholder{color:var(--mute)}
  .id-send{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
  .id-send:hover{background:#fff}
  .id-send:disabled{opacity:.4}
  /* attach — same pool the desk and Brief use, reachable from the Idea composer */
  .id-attach{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mute);transition:color var(--base),background var(--base)}
  .id-attach:hover{color:var(--ink);background:rgba(255,255,255,.07)}
  .idea-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .idea-files:empty{display:none}
  /* A4 — what the project is feeding this conversation. One dim line, never a card. */
  .scope-line{margin-top:11px;font-size:11px;line-height:1.5;color:var(--mute)}
  .scope-line b{color:var(--dim);font-weight:600}
  .scope-line .sl-i{cursor:default;border-bottom:1px dotted rgba(255,255,255,.12)}
  /* C3 — the running summary of the interview */
  .brief-prog{display:flex;flex-wrap:wrap;gap:4px 16px;margin:14px 0 2px;font-size:11px;line-height:1.5}
  .bp-got{color:var(--dim)}
  .bp-need{color:var(--mute)}
  /* saved sparks — research auto-filed by topic */

  /* brief templates */

  /* tone preset */
  .tone{display:flex;align-items:center;gap:3px;margin-top:16px;padding:3px;background:rgba(255,255,255,.04);border-radius:var(--r-ml);width:fit-content}
  .tone button{font-size:12px;font-weight:500;color:var(--dim);padding:7px 13px;border-radius:var(--r-sm);transition:var(--fast) var(--ease)}
  .tone button:hover{color:var(--ink)}
  .tone button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,0.52)}

  /* toast */
  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:var(--on-ink);
    font-size:13px;font-weight:600;padding:11px 20px;border-radius:var(--r-ml);opacity:0;visibility:hidden;transition:var(--base);z-index:120;max-width:86vw;box-shadow:0 20px 60px rgba(0,0,0,0.65)}
  .toast.show{opacity:1;visibility:visible;transform:translateX(-50%)}

  /* mobile — rail slides in from the left */
  @media(max-width:760px){
    .app,.app.rail-off{grid-template-columns:1fr}
    .main{grid-column:1}
    .rail{position:fixed;top:0;left:0;bottom:0;width:284px;z-index:80;transform:translateX(-100%);transition:transform var(--slow) cubic-bezier(.22,.61,.36,1)}
    .app.rail-open .rail{transform:none}
    .scrim{position:fixed;inset:0;background:rgba(0,0,0,0.58);z-index:70;opacity:0;visibility:hidden;transition:var(--base)}
    .app.rail-open .scrim{opacity:1;visibility:visible}
    /* clears the burger (top 15 + 44) and the anon Log in / Sign up pill above it */
    .seg.top-seg{display:inline-flex;flex:none;margin:66px 0 0 16px;align-self:flex-start}
    /* the only route to the rail at this width, and it was the smallest control on screen.
       Keyed to width, not @media(hover:none) — a narrow window on a touch laptop needs it too. */
    .rail-toggle{width:44px;height:44px}
  }
  @media(min-width:761px){.scrim{display:none}}
  /* touch — no hover: tools must always be visible */
  @media(hover:none){.sec-tools,.s-item .more,.p-row .more{opacity:1}
    /* touch needs ~44px targets — grow the small controls on touch only, desktop unchanged */
    .id-send,.id-attach{width:44px;height:44px}
    .mode-seg button{padding-top:11px;padding-bottom:11px}
    /* no hover on touch: every per-reply action must be visible without one */
    .id-acts .id-use.ghost{opacity:1}
    .s-item .more,.p-row .more{width:32px;height:32px}
    .md-item .more,.chip button{min-width:30px;min-height:30px}}
  /* real iOS viewport */
  @supports(height:100dvh){.app,.main{height:100dvh}}

  /* ═══ phones ═══ */
  @media(max-width:560px){
    /* workspace topbar — horizontally scrollable, tighter, no middle title stealing space */
    .top{gap:4px;padding:10px 12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .top::-webkit-scrollbar{display:none}
    .top .tb{flex:none;padding:8px 11px;font-size:12px}
    .top .top-title{display:none}
    .top .save-ind{display:none}
    .cv-tabs{padding:8px 12px 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
    .cv-tabs::-webkit-scrollbar{display:none}
    /* share topbar — collapse the verbose label, keep icon + theme + open */
    .sh-lbl{display:none}
    .sh-open{padding:8px 12px}
    /* document reading */
    .doc{padding:40px 20px 100px}
    .mh-title{font-size:26px}
    /* home */
    .home{padding:24px 16px 60px}
    .h-title{font-size:clamp(30px,10vw,44px)}
    .brief-box{padding:16px 16px 12px}
    .bb-foot{flex-wrap:wrap;gap:8px}
    .bb-foot .go{margin-left:auto}
    .idea{margin-top:20px}
    .idea.hero .id-thread{max-height:42vh}
    .id-hint{display:none} /* keep IDEA label + Summing button uncrowded on narrow screens */
    /* floating actions clear of the iOS bottom bar */
    .to-top,.stop-btn{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
    /* modals go near full-screen sheets */
    .snap,.stats,.diffv{padding:0}
    .snap-box,.stats-box,.diff-box,.pal-box,.set-wide{max-width:100%;width:100%;border-radius:var(--r-xl) 16px 0 0;
      position:fixed;left:0;right:0;bottom:0;top:auto;max-height:92vh;overflow-y:auto;animation:sheetUp var(--slow) var(--ease)}
    .dlg-box{max-width:100%;margin:auto 12px}
    .set-tabs{overflow-x:auto;scrollbar-width:none}.set-tabs::-webkit-scrollbar{display:none}
    /* comment forms + inputs at ≥16px so iOS doesn't zoom-on-focus */
    .cmt-form input,.cmt-form textarea,.auth-f input,.dlg-in,.vc-ta,#brief,#ideaInput{font-size:15px}
    /* rail a hair narrower than the phone so the scrim shows */
    .rail{width:86vw;max-width:320px}
  }
  @keyframes sheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

  /* ── floating outline — a column of ticks at the right edge; hover a tick to read its title ── */
  .outline-rail{position:fixed;top:50%;right:14px;transform:translateY(-50%);z-index:40;
    display:none;flex-direction:column;gap:0;padding:6px 4px;align-items:flex-end}
  .outline-rail.on{display:flex}
  .ot-tick{position:relative;display:flex;align-items:center;justify-content:flex-end;height:16px;cursor:pointer}
  .ot-tick i{display:block;width:16px;height:2px;border-radius:2px;background:rgba(230,224,211,.28);transition:width var(--fast) var(--ease),background var(--fast)}
  .ot-tick:hover i,.ot-tick.cur i{width:24px;background:rgba(230,224,211,.72)}
  .ot-tick.cur i{background:var(--cin-d)}
  .ot-tick .ot-name{position:absolute;right:30px;top:50%;transform:translateY(-50%) translateX(6px);
    white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
    font-family:var(--ui);font-size:12px;color:var(--dim);background:rgba(12,12,14,.9);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);
    border-radius:var(--r-md);padding:5px 10px;max-width:240px;overflow:hidden;text-overflow:ellipsis}
  .ot-tick:hover .ot-name{opacity:1;transform:translateY(-50%) translateX(0)}
  .ot-tick .ot-name b{color:var(--cin-d);font-weight:600;margin-right:5px}
  @media(max-width:720px){.outline-rail{display:none!important}}

  /* E5 — Norrsken's last light sweeps the finished document once */
  .norr-sweep{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
  .norr-sweep::before{content:"";position:absolute;top:-20%;left:-40%;width:40%;height:140%;
    background:linear-gradient(100deg,transparent,rgba(120,200,255,.12),rgba(255,180,120,.10),transparent);
    filter:blur(14px);transform:skewX(-14deg);animation:norrSweep 1.5s var(--ease) forwards}
  @keyframes norrSweep{from{left:-45%}to{left:125%}}
  @media(prefers-reduced-motion:reduce){.norr-sweep{display:none}}

  /* E6 — keyboard shortcut sheet */
  .keys{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(5,5,6,.72);backdrop-filter:blur(4px)}
  .keys.show{display:flex;animation:paneIn var(--base) var(--ease) both}
  .keys-box{width:100%;max-width:440px;background:#141417;border:1px solid var(--line2);border-radius:var(--r-xl);padding:20px 22px;box-shadow:var(--pop)}
  .keys-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .keys-hd b{font-family:var(--body);font-style:italic;font-size:20px;color:var(--ink)}
  .keys-hd .x{color:var(--mute);font-size:15px}.keys-hd .x:hover{color:var(--ink)}
  .keys-grid{display:flex;flex-direction:column;gap:2px}
  .kr{display:flex;align-items:center;gap:8px;padding:9px 4px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
  .kr:first-child{border-top:none}
  .kr span{flex:1;min-width:0}
  .kr kbd{font-family:var(--mono);font-size:11px;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:var(--r-sm);padding:3px 8px;min-width:26px;text-align:center}