/* ============ TOKENS ============ */
:root{
  --bg:#07070a; --bg2:#0b0b10; --panel:#0f0f16; --panel2:#13131b;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  /* #66656f measured 3.22-3.50:1 against this file's four surfaces — under
     WCAG 1.4.3's 4.5:1 floor at all four, across ~63 `color:` call sites.
     #84838f clears every one (4.95-5.39:1) while holding the same 1.34:1
     separation from --muted that content-lab.css's own --cl-faint fix
     settled on; enforced by CONTRAST_SURFACES in
     scripts/check-asset-invariants.mjs. */
  --text:#f2f1ec; --muted:#9b9aa4; --dim:#84838f;
  --gold:#e8b84b; --gold2:#f5d07c; --gold-dim:rgba(232,184,75,.13);
  --blue:#8ab4ff;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.68,.16,1);
  --r:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(232,184,75,.32);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#232329;border-radius:99px;border:3px solid var(--bg)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
h1,h2,h3{font-weight:700;letter-spacing:-.02em}
h2 em,h1 em,.pull-q em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold2);letter-spacing:0}

/* ============ GRAIN + CANVAS + CURSOR ============ */
body::after{content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.045;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:10000;border-radius:50%;opacity:0}
.cursor-dot{width:6px;height:6px;background:var(--gold);transform:translate(-50%,-50%)}
.cursor-ring{width:36px;height:36px;border:1px solid rgba(232,184,75,.55);transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,background .25s}
.cursor-ring.hot{width:56px;height:56px;background:rgba(232,184,75,.08);border-color:rgba(232,184,75,.9)}
/* (pointer:coarse) OR a narrow viewport.
   The OR matters twice over: a resized desktop browser still reports
   pointer:fine and maxTouchPoints:0, so a coarse-only query is untestable in
   any headless harness — and below 720px the layout is already the mobile
   layout, so larger targets there are consistent rather than a regression. */
@media (pointer:coarse),(max-width:720px){.cursor-dot,.cursor-ring{display:none}}

/* ============ NAV ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top)) calc(30px + env(safe-area-inset-right)) 16px calc(30px + env(safe-area-inset-left));transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(7,7,10,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:var(--line)}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:700;letter-spacing:.14em;font-size:15px}
.brand-mark{color:var(--gold);text-shadow:0 0 18px rgba(232,184,75,.8);font-size:13px}
.brand-sub{font:400 10px var(--mono);color:var(--dim);letter-spacing:.3em;text-transform:uppercase}
.nav-links{display:flex;gap:34px}
.nav-links a{font:500 13px var(--sans);color:var(--muted);letter-spacing:.04em;position:relative;transition:color .3s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:12px}
.kbd-hint{font:500 11px var(--mono);color:var(--muted);background:transparent;border:1px solid var(--line2);border-radius:8px;padding:6px 10px;transition:.3s}
.kbd-hint:hover{color:var(--gold2);border-color:rgba(232,184,75,.5)}
.vault-btn{font:500 11px var(--mono);letter-spacing:.18em;color:var(--muted);background:transparent;border:1px solid var(--line2);border-radius:8px;padding:6px 11px;display:inline-flex;gap:8px;align-items:center;transition:.3s}
.vault-btn:hover{color:var(--text);border-color:rgba(255,255,255,.32)}
.vault-btn b{color:var(--gold2);font-weight:600}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:999px;font:600 14px var(--sans);letter-spacing:.02em;padding:13px 26px;transition:transform .35s var(--ease),box-shadow .35s;position:relative;overflow:hidden;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-gold{background:linear-gradient(180deg,#f6d383,#dfa738);color:#181104;box-shadow:0 12px 34px -12px rgba(232,184,75,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{box-shadow:0 18px 44px -12px rgba(232,184,75,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line2)}
.btn-ghost:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07)}
.btn-lg{padding:16px 32px;font-size:15px}
.btn-sm{padding:9px 18px;font-size:12.5px}
.btn-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%);animation:sheen 3.8s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.chip-btn{font:500 12px var(--mono);letter-spacing:.04em;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:999px;padding:8px 15px;transition:.3s var(--ease)}
.chip-btn:hover{color:var(--text);border-color:rgba(255,255,255,.35);transform:translateY(-1px)}
.chip-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.chip-btn.on{color:#181104;background:linear-gradient(180deg,#f6d383,#dfa738);border-color:transparent;font-weight:600}
.link-btn{background:none;border:none;color:var(--muted);font:500 12.5px var(--sans);border-bottom:1px solid var(--line2);padding-bottom:1px;transition:.3s}
.link-btn:hover{color:var(--gold2);border-color:var(--gold)}

/* ============ HERO ============ */
.hero{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:120px 6vw 80px}
.hero-inner{max-width:640px}
.hero-eyebrow{font:500 11px var(--mono);letter-spacing:.42em;color:var(--gold);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:30px}
.hero-eyebrow::before{content:'';width:34px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(3.2rem,8.4vw,6.4rem);line-height:.98;letter-spacing:-.035em}
.hero h1 em{display:block;font-size:1.04em}
.hero-sub{color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.7;max-width:490px;margin:28px 0 38px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;align-items:center;gap:22px;margin-top:56px;font:500 11px var(--mono);letter-spacing:.22em;color:var(--dim);text-transform:uppercase;flex-wrap:wrap}
.hero-stats b{color:var(--text);font-weight:500}
.hero-stats .arr{color:var(--gold)}
.hero > *{animation:heroIn 1.1s var(--ease) both}
.hero-inner>*:nth-child(1){animation-delay:.05s}.hero-inner>*:nth-child(2){animation-delay:.15s}.hero-inner>*:nth-child(3){animation-delay:.3s}.hero-inner>*:nth-child(4){animation-delay:.45s}.hero-inner>*:nth-child(5){animation-delay:.6s}
@keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:500 9.5px var(--mono);letter-spacing:.4em;color:var(--dim)}
.scroll-cue i{width:1px;height:44px;background:var(--line2);position:relative;overflow:hidden;display:block}
.scroll-cue i::after{content:'';position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--gold);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:110%}}

/* ============ MARQUEE ============ */
.marquee{position:relative;z-index:1;border-block:1px solid var(--line);background:var(--bg);overflow:hidden;padding:15px 0}
.marquee-track{display:flex;gap:0;width:max-content;animation:mq 36s linear infinite}
.marquee-track span{font:500 11px var(--mono);letter-spacing:.34em;color:var(--dim);text-transform:uppercase;padding:0 26px;white-space:nowrap}
.marquee-track b{color:var(--gold);font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
section{position:relative;z-index:1;background:var(--bg)}
.wrap{max-width:1240px;margin:0 auto;padding:0 6vw}
.section-head{max-width:720px;margin-bottom:64px}
.eyebrow{font:500 11px var(--mono);letter-spacing:.42em;color:var(--gold);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow::before{content:'';width:30px;height:1px;background:var(--gold)}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.03em}
.section-sub{color:var(--muted);margin-top:20px;font-size:1.02rem;line-height:1.75;max-width:560px}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* .glow is now a CLIPPING FRAME; the gradient moved to .glow::before.
   See the long note beside the ≤720 block for why this shape and not a
   simpler one — briefly: overflow on #model kills .model-sticky, right:0
   moves the visual, clip-path does not reduce scrollable overflow, and a
   transform still contributes its transformed box.

   The frame is left:0;right:0, and `section` has no width constraint (.wrap
   supplies the max-width), so the frame's edges ARE the viewport's edges.
   Clipping here is therefore pixel-identical to the clipping the viewport
   already did — the glow just no longer extends the scrollable area first.

   Height covers the BLURRED extent, not the box: a 60px blur spreads roughly
   180px, so clipping at the box edge would shave visible ink off the top and
   bottom. Each section below offsets the frame so that span matches exactly
   what is on screen today. */
.glow{position:absolute;left:0;right:0;height:920px;overflow:hidden;pointer-events:none}
.glow::before{content:'';position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(232,184,75,.09),transparent 65%);filter:blur(60px)}

/* ============ MODEL ============ */
#model{padding:130px 0 110px;scroll-margin-top:-90px}
/* frame -320..600, so the ::before sits at an absolute top of -140 exactly as
   before (-320 + 180), and its 180px of blur spread stays inside the frame. */
#model .glow{top:-320px}
#model .glow::before{top:180px;right:-180px}
.model-grid{display:grid;grid-template-columns:340px 1fr;gap:70px;align-items:start}
.model-sticky{position:sticky;top:120px}
.model-note{margin-top:24px;font:400 12.5px/1.7 var(--sans);color:var(--dim);border-left:2px solid rgba(232,184,75,.4);padding-left:14px}
.model-note b{color:var(--gold2);font-weight:600}
.layers{display:flex;flex-direction:column;gap:16px}
.layer{display:grid;grid-template-columns:86px 1fr 190px;gap:26px;align-items:center;padding:30px 32px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));transition:border-color .4s,transform .5s var(--ease),box-shadow .5s}
.layer:hover{border-color:rgba(232,184,75,.4);transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(0,0,0,.8)}
.layer-num{font:500 13px var(--mono);color:var(--gold);letter-spacing:.2em}
.layer h3{font-size:1.25rem;margin-bottom:8px}
.layer p{color:var(--muted);font-size:.92rem;line-height:1.65}
.mini{height:74px;display:flex;align-items:center;justify-content:center;gap:12px}
.mini-block{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#1c1c26,#101018);border:1px solid var(--line2);display:grid;place-items:center;color:var(--gold);font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.mini-arrow{color:var(--dim);font-size:15px}
.mini-grid{display:grid;grid-template-columns:repeat(3,14px);gap:5px}
.mini-grid i{width:14px;height:14px;border-radius:4px;background:var(--gold-dim);border:1px solid rgba(232,184,75,.45);transition:transform .4s var(--ease),background .4s}
.layer:hover .mini-grid i{background:rgba(232,184,75,.4);transform:scale(1.12)}
.layer:hover .mini-grid i:nth-child(odd){transform:scale(1.2) rotate(8deg)}
.mini-dots{display:flex;gap:7px}
.mini-dots i{width:11px;height:11px;border-radius:50%;background:var(--c,#888);opacity:.85;transition:transform .4s var(--ease)}
.layer:hover .mini-dots i{transform:translateY(-5px)}
.layer:hover .mini-dots i:nth-child(2){transition-delay:.05s}.layer:hover .mini-dots i:nth-child(3){transition-delay:.1s}.layer:hover .mini-dots i:nth-child(4){transition-delay:.15s}.layer:hover .mini-dots i:nth-child(5){transition-delay:.2s}
.mini-loop{width:48px;height:48px;border-radius:50%;border:1.5px dashed rgba(232,184,75,.6);display:grid;place-items:center;color:var(--gold);font-size:16px;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ PULL QUOTE ============ */
.pull{padding:110px 6vw;text-align:center;border-block:1px solid var(--line);background:linear-gradient(180deg,var(--bg),#0a0a0f,var(--bg))}
.pull-q{font-family:var(--serif);font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.1;letter-spacing:-.01em}
.pull-a{margin-top:26px;font:500 11px var(--mono);letter-spacing:.4em;color:var(--dim)}

/* ============ STUDIO ============ */
#studio{padding:130px 0;scroll-margin-top:-90px}
/* Left-side bleed. In LTR only RIGHT overflow extends the scrollable area, so
   this one was never the panning culprit — it gets the same treatment anyway
   because iPadOS Safari is desktop-class and an RTL locale flips which side
   is dangerous. -100 + 180 = 80, unchanged. */
#studio .glow{top:-100px}
#studio .glow::before{top:180px;left:-220px}
.studio-grid{display:grid;grid-template-columns:430px 1fr;gap:22px;align-items:start}
.panel{border:1px solid var(--line);border-radius:26px;padding:30px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -40px rgba(0,0,0,.7);scroll-margin-top:20px}
.panel-label{font:500 10.5px var(--mono);letter-spacing:.34em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
.panel h3{font-size:1.55rem;letter-spacing:-.02em}
.panel-sub{color:var(--muted);font-size:.9rem;line-height:1.65;margin:10px 0 24px}
.field-label{font:500 10px var(--mono);letter-spacing:.3em;color:var(--dim);margin:20px 0 10px}
#rawMaterial{scroll-margin-top:20px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 15px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font:500 12.5px var(--sans);transition:.3s var(--ease)}
.chip:hover{color:var(--text);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.chip.active{background:var(--gold-dim);border-color:rgba(232,184,75,.55);color:var(--gold2)}
textarea{width:100%;min-height:225px;resize:none;background:#0a0a0f;border:1px solid var(--line2);border-radius:18px;padding:17px 18px;color:var(--text);font:400 14px/1.7 var(--sans);margin-top:8px;transition:border-color .3s,box-shadow .3s}
textarea::placeholder{color:var(--dim)}
textarea:focus{outline:none;border-color:rgba(232,184,75,.55);box-shadow:0 0 0 4px rgba(232,184,75,.1)}
.input-meta{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.12em;color:var(--dim);margin-top:10px}
.sample-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 24px}
.sample-row .mono{font-size:9.5px;letter-spacing:.3em}
.btn-run{width:100%;justify-content:center}
.btn-run .tri{font-size:11px}
.btn-run.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.hint{margin-top:14px;text-align:center;font-size:10px;letter-spacing:.22em;color:var(--dim)}

/* ---- mode toggle + interview (frontier: extraction-first) ---- */
.mode-toggle{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.02);margin-bottom:6px}
.seg{border:none;background:transparent;color:var(--muted);font:600 12px var(--sans);letter-spacing:.02em;padding:8px 16px;border-radius:999px;transition:.3s var(--ease);display:inline-flex;gap:7px;align-items:center}
.seg:hover{color:var(--text)}
.seg.on{background:var(--gold-dim);color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(232,184,75,.4)}
.studio-grid.mode-interview .paste-only{display:none}
.studio-grid:not(.mode-interview) .interview-only{display:none}
.interview{margin-top:8px;border:1px solid var(--line);border-radius:18px;padding:18px;background:linear-gradient(180deg,rgba(232,184,75,.04),rgba(255,255,255,.01))}
.iv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.iv-head .panel-label{margin:0}
.iv-turns{font:600 11px var(--mono);color:var(--gold2);letter-spacing:.14em}
.persona-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:thin}
.persona-row .chip{flex:none;font-size:11.5px;padding:7px 13px}
.topic-input{width:100%;background:#0a0a0f;border:1px solid var(--line2);border-radius:12px;padding:10px 13px;color:var(--text);font:400 12.5px var(--sans);margin-bottom:12px}
.topic-input:focus{outline:none;border-color:rgba(232,184,75,.5)}
.topic-input::placeholder{color:var(--dim)}
#homeBrandRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#homeBrandRow .topic-input{margin-bottom:0;flex:1;min-width:0}
#homeBrandRow .topic-input:disabled{opacity:.55;cursor:not-allowed}
.brand-url-lock{font-size:10px;letter-spacing:.04em;color:var(--dim);white-space:nowrap;margin-bottom:12px}
.brand-url-lock a{color:var(--gold);text-decoration:underline}
.brand-strip{display:inline-flex;align-items:center;gap:5px;margin-left:8px;vertical-align:middle}
.brand-strip b{font:600 11px var(--sans);color:var(--text)}
.brand-strip .bs-sw{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid rgba(255,255,255,.18)}
.brand-strip .bs-tag{font-size:9.5px;letter-spacing:.12em;color:var(--dim)}
.brand-strip .bs-tag.warn{color:var(--gold)}
.brand-strip .bs-tag a{color:var(--gold);text-decoration:underline;margin-left:4px}
.log{display:flex;flex-direction:column;gap:10px;max-height:248px;overflow-y:auto;padding:4px 2px 8px;scrollbar-width:thin}
.log:empty::before{content:'The panel will ask, you answer — your words become the clay.';color:var(--dim);font-size:12px;font-style:italic;padding:8px 2px}
.bubble{display:flex;gap:10px;max-width:92%}
.bubble .av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 9.5px var(--mono);color:#141005;background:linear-gradient(135deg,#f0cd7d,#8a6a1f)}
.bubble .tx{font-size:13px;line-height:1.5;padding:9px 13px;border-radius:14px}
.bubble.them .tx{background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.22);color:#e9e7df;border-top-left-radius:4px}
.bubble.them.wrap .tx{font-family:var(--serif);font-style:italic;color:var(--gold2);background:transparent;border-style:dashed}
.bubble.me{align-self:flex-end;flex-direction:row-reverse}
.bubble.me .av{background:linear-gradient(135deg,#3a3a44,#22222a);color:var(--gold2)}
.bubble.me .tx{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:#e6e4dd;border-top-right-radius:4px}
.bubble.me.live .tx{border-style:dashed;color:var(--muted);min-height:38px}
.bubble.me.live.rec .tx{border-color:rgba(232,184,75,.5);box-shadow:0 0 0 3px rgba(232,184,75,.08)}
.bubble .tx .interim{color:var(--dim)}
.bubble .tx .caret2{display:inline-block;width:6px;height:13px;background:var(--gold);vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(2) infinite}
.iv-controls{display:flex;align-items:center;gap:12px;margin-top:14px}
.mic{width:58px;height:58px;border-radius:50%;flex:none;border:1.5px solid rgba(232,184,75,.5);background:rgba(232,184,75,.06);color:var(--gold2);font-size:20px;display:grid;place-items:center;position:relative;transition:.3s var(--ease)}
.mic:hover{background:rgba(232,184,75,.14)}
.mic.on{background:linear-gradient(180deg,#f6d383,#dfa738);color:#181104;border-color:transparent}
.mic.on::before,.mic.on::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(232,184,75,.6);animation:micpulse 1.8s ease-out infinite}
.mic.on::after{animation-delay:.9s}
@keyframes micpulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.iv-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.type-fallback{width:100%;background:#0a0a0f;border:1px solid var(--line2);border-radius:11px;padding:9px 12px;color:var(--text);font:400 12.5px var(--sans)}
.type-fallback:focus{outline:none;border-color:rgba(232,184,75,.5)}
.type-fallback::placeholder{color:var(--dim)}
.iv-status{margin-top:12px;font-size:10.5px;letter-spacing:.12em;color:var(--dim)}

/* output states */
.output-panel{min-height:660px;display:flex;flex-direction:column}
.out-state{flex:1;display:flex;flex-direction:column}
.out-empty{align-items:center;justify-content:center;text-align:center;gap:18px;color:var(--muted)}
.empty-py{width:130px;opacity:.9;margin-bottom:6px}
.empty-py path{animation:dashMove 7s linear infinite}
@keyframes dashMove{to{stroke-dashoffset:-220}}
.out-empty p{font-size:1.05rem;color:var(--text)}
.out-empty .mono{font-size:10px;letter-spacing:.3em}
/* processing */
.proc{align-items:center;justify-content:center;text-align:center;gap:22px;padding:40px 0}
.proc-tri{position:relative;width:96px;height:96px;display:grid;place-items:center;color:var(--gold);font-size:34px;text-shadow:0 0 24px rgba(232,184,75,.7)}
.proc-tri::before,.proc-tri::after{content:'';position:absolute;inset:0;border:1px solid rgba(232,184,75,.45);border-radius:50%;animation:pulse 2.1s ease-out infinite}
.proc-tri::after{animation-delay:1.05s}
@keyframes pulse{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.proc-tri span{animation:float 2.4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-7px)}}
.proc-stage{font:500 13px var(--mono);letter-spacing:.18em;color:var(--gold2);text-transform:uppercase;min-height:20px}
.proc-bar{width:min(340px,80%);height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.proc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:99px;transition:width .55s var(--ease);box-shadow:0 0 14px rgba(232,184,75,.8)}
.proc-log{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--dim);letter-spacing:.06em;min-height:96px}
.proc-line{opacity:0;transform:translateY(6px);transition:.45s var(--ease)}
.proc-line.show{opacity:1;transform:none}
.proc-line::before{content:'· ';color:var(--gold)}

/* results */
.results-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.results-head h3{font-size:1.5rem;margin-top:8px}
.results-meta{font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.chip-mini{color:var(--gold2);border:1px solid rgba(232,184,75,.4);background:var(--gold-dim);border-radius:99px;padding:3px 10px;letter-spacing:.08em}
.chip-mini.prov{color:#bfe3c4;border-color:rgba(120,210,150,.4);background:rgba(120,210,150,.1)}
.results-actions{display:flex;gap:10px;flex-wrap:wrap}
.subhead{font-size:10px;letter-spacing:.34em;color:var(--dim);text-transform:uppercase;margin:26px 0 14px;display:flex;align-items:center;gap:14px}
.subhead::after{content:'';flex:1;height:1px;background:var(--line)}
.anim{opacity:0;transform:translateY(20px) scale(.985);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.anim.show{opacity:1;transform:none}
/* live bar (frontier: real distribution + analytics) */
.live-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid rgba(120,210,150,.3);background:linear-gradient(90deg,rgba(120,210,150,.08),rgba(255,255,255,.01));border-radius:14px;padding:12px 16px;margin-bottom:22px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#76d296;box-shadow:0 0 10px #76d296;animation:livepulse 1.4s ease-in-out infinite}
@keyframes livepulse{50%{opacity:.35}}
.live-bar .mono{font-size:9.5px;letter-spacing:.26em;color:var(--muted)}
.live-bar b{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.live-bar .live-eng{margin-left:auto;color:var(--dim)}
.live-bar .live-eng b{font-size:1rem;color:#76d296}
/* echoes (frontier: vault-as-memory / personal RAG) */
.echoes-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,80%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.echo{scroll-snap-align:start;border:1px dashed rgba(138,180,255,.35);border-radius:16px;padding:15px 16px;background:linear-gradient(180deg,rgba(138,180,255,.05),transparent)}
.echo q{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.4;display:block;quotes:none;color:#dfe6f5}
.echo-meta{margin-top:10px;font-size:8.5px;letter-spacing:.22em;color:var(--dim)}
.echo.empty{border-style:solid;border-color:var(--line);background:transparent;color:var(--dim);font-size:12.5px;font-style:italic;display:flex;align-items:center;grid-auto-columns:1fr}
/* nuggets */
.nuggets-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(330px,82%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.nugget{scroll-snap-align:start;border:1px solid var(--line);border-radius:20px;padding:22px;background:linear-gradient(180deg,var(--panel2),var(--panel));position:relative;transition:border-color .35s,transform .45s var(--ease)}
.nugget:hover{border-color:rgba(232,184,75,.45);transform:translateY(-3px)}
.nug-top{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;letter-spacing:.3em;color:var(--dim);margin-bottom:16px}
.ring-wrap{position:relative;width:40px;height:40px;display:grid;place-items:center}
.ring-wrap svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring-wrap circle{fill:none;stroke-width:3;stroke-linecap:round}
.rb{stroke:rgba(255,255,255,.09)}
.rf{stroke:var(--gold);stroke-dasharray:97.4;filter:drop-shadow(0 0 5px rgba(232,184,75,.6))}
.ring-wrap b{font:600 11px var(--mono);color:var(--gold2)}
.nugget q{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.42;display:block;quotes:none;color:#e9e7df}
.nug-src{margin-top:16px;font-size:9px;letter-spacing:.26em;color:var(--dim)}
/* bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;grid-auto-flow:row dense}
.pcard{border:1px solid var(--line);border-radius:22px;padding:19px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)),var(--panel);display:flex;flex-direction:column;gap:14px;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.pcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22);box-shadow:0 26px 60px -28px rgba(0,0,0,.85)}
.pcard.wide{grid-column:span 2}
.pcard-head{display:flex;align-items:center;gap:9px;font-size:9.5px;letter-spacing:.28em;color:var(--muted);text-transform:uppercase}
.pdot{width:7px;height:7px;border-radius:50%;background:var(--c,#fff);box-shadow:0 0 10px var(--c,#fff);flex:none}
.pscore{margin-left:auto;color:var(--gold2);border:1px solid rgba(232,184,75,.35);background:var(--gold-dim);padding:3px 9px;border-radius:99px;font-size:9.5px;letter-spacing:.1em;display:inline-flex;gap:6px;align-items:center}
.pscore .lv{width:6px;height:6px;border-radius:50%;background:#76d296;box-shadow:0 0 8px #76d296;animation:livepulse 1.4s ease-in-out infinite}
.pcard-body{flex:1}
.pcard-foot{display:flex;gap:9px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:13px}
/* analytics strip inside card */
.analytics{display:none;grid-template-columns:1.25fr 1.25fr .9fr;gap:12px;border-top:1px solid var(--line);padding-top:13px}
.live .analytics{display:grid}
.an-cell{display:flex;flex-direction:column;gap:5px;min-width:0}
.an-k{font-size:8px;letter-spacing:.24em;color:var(--dim)}
.an-cell svg{width:100%;height:30px;display:block}
.spark polyline,.ret polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.spark polyline{stroke:var(--gold2);filter:drop-shadow(0 0 4px rgba(232,184,75,.45))}
.ret polyline{stroke:var(--blue)}
.live .spark polyline{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease)}
.live .ret polyline{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease) .35s}
.an-cell .imp{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.an-cell .hook{font-size:9px;letter-spacing:.16em;color:var(--dim)}
.an-cell .hook i{color:var(--blue);font-style:normal;font-weight:600}
.an-cell .engv{font-size:1.05rem;font-weight:700}
.engbar{height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.engbar i{display:block;height:100%;background:linear-gradient(90deg,#76d296,#bfe3c4);border-radius:99px;width:0;transition:width 1.6s var(--ease) .3s}
/* This registry no longer renders the board card (see index.js's
   studioCardHTML — 8 of these 10 pieces render through the shared
   PyraPiecesStudio/mocks.css registry now). It survives as the fallback
   overlay's (.ped-preview, editor.js) markup for when the Content/Video
   Studio bridge is unavailable. 13 class names below carry a `pk-` prefix
   (piece-fallback) specifically because mocks.css defines a BARE rule of
   the same name with different values — .pin-img is the exact collision
   PR #175 documented for studio.css vs index.css, and it recurs here for
   any class name both files happen to reuse. Unprefixed names in this
   block don't collide: mocks.css either has no bare rule of that name at
   all (.ig-top/.ig-tags were renamed to igq-top/igq-tags on the STUDIO
   side for this exact reason — see the igq mock's note in
   studio-editor.js), or the bare rule is byte-identical, like .ig-frame. */
/* X */
.x-thread{display:flex;flex-direction:column;gap:12px}
.x-post{display:flex;gap:11px}
.x-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f0cd7d,#8a6a1f);display:grid;place-items:center;font-weight:700;color:#141005;font-size:13px;flex:none}
.x-meta{font-size:12px;color:var(--dim)}
.x-meta b{color:var(--text);font-weight:600}
.x-meta .vf{color:#1d9bf0}
.x-post p{font-size:13px;line-height:1.55;margin-top:3px;color:#e6e4dd;white-space:pre-line}
.x-line{width:2px;height:9px;background:var(--line2);margin-left:16px;border-radius:2px}
/* LinkedIn */
.li-body{background:#fff;color:#111;border-radius:14px;padding:16px}
.li-head{display:flex;gap:10px;align-items:center;margin-bottom:11px}
.li-ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0a66c2,#003d75);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.pk-li-name{font-weight:600;font-size:13px}
.li-sub{font-size:11px;color:#777}
.li-text{font-size:13px;line-height:1.6;white-space:pre-line}
.li-react{display:flex;gap:8px;margin-top:13px;padding-top:10px;border-top:1px solid #ececec;font-size:11.5px;color:#777;align-items:center}
/* Instagram */
.ig-frame{border-radius:16px;padding:1.6px;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.pk-ig-inner{background:#0b0b10;border-radius:14.5px;padding:26px 20px 20px;text-align:center}
.ig-top{font-size:8.5px;letter-spacing:.32em;color:var(--dim);margin-bottom:20px}
.ig-quote{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.38;color:#f0eee7}
.pk-ig-cap{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.55}
.ig-tags{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ig-tags span{color:var(--gold2);font-size:11.5px}
/* TikTok */
.home-video-frame{position:relative;overflow:hidden;background:#000;margin:0 auto}.home-video-frame.vertical{width:min(100%,320px);aspect-ratio:9/16}
/* The voice-state badge on homepage video cards. Full badge style lives in
   mocks.css (loaded by this page too); this wrap guard is stated here as
   well because check-asset-invariants section 7 pairs index-editor.js's
   text-bearing classes with THIS sheet. */
.video-facts{overflow-wrap:anywhere}
.board-cover{position:absolute;inset:0;display:block;width:100%;height:100%}
.tt{display:flex;gap:14px}
.tt-main{flex:1;min-width:0}
.tt-label{font-size:8.5px;letter-spacing:.3em;color:#25f4ee}
.tt-hook{border-left:2px solid #25f4ee;padding-left:12px;margin-bottom:14px}
.tt-hook p{font-size:13.5px;font-weight:600;margin-top:4px;line-height:1.45}
.tt-beats{list-style:none;display:flex;flex-direction:column;gap:11px}
.tt-beats li{border-left:2px solid var(--line2);padding-left:12px}
.tt-beats .mono{font-size:8.5px;letter-spacing:.2em;color:var(--dim)}
.tt-beats p{font-size:12.5px;color:#d9d7d0;line-height:1.5;margin-top:3px}
.tt-cap{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.5}
.tt-cap b{color:#fe2c55;font:600 9px var(--mono);letter-spacing:.24em;margin-right:8px}
.tt-rail{display:flex;flex-direction:column;gap:15px;align-items:center;justify-content:flex-end;font-size:10px;color:var(--dim)}
.tt-rail .ic{width:34px;height:34px;border-radius:50%;background:#181820;border:1px solid var(--line2);display:grid;place-items:center;font-size:14px;margin-bottom:3px;color:#e8e6df}
/* YouTube */
/* pk- prefixed for the reason documented above the X mock rules: mocks.css
   is loaded by this page too and defines a BARE .yt-thumb. Both rules
   survived only because every property they happened to share carried an
   identical value — undesigned luck, not compatibility, and the next edit to
   either file would have broken it silently. */
.pk-yt-thumb{position:relative;border-radius:14px;aspect-ratio:16/9;background:radial-gradient(120% 140% at 20% 10%,#2b2010 0%,#12100c 45%,#0a0a0e 100%);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.pk-yt-thumb::before{content:'▲';position:absolute;font-size:120px;color:rgba(232,184,75,.07);top:-14px}
.play{width:52px;height:37px;background:#ff0033;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:14px;padding-left:3px;box-shadow:0 8px 26px -6px rgba(255,0,51,.6);transition:transform .35s var(--ease)}
.pcard:hover .play{transform:scale(1.12)}
.pk-yt-dur{position:absolute;right:9px;bottom:9px;background:rgba(0,0,0,.85);font-size:10px;padding:2px 7px;border-radius:5px;letter-spacing:.08em}
.yt-badge{position:absolute;left:9px;top:9px;background:rgba(232,184,75,.15);border:1px solid rgba(232,184,75,.4);color:var(--gold2);font-size:8.5px;padding:2px 7px;border-radius:5px;letter-spacing:.24em}
.pk-yt-title{font-weight:600;font-size:14.5px;line-height:1.35;margin-top:13px}
.pk-yt-meta{font-size:10px;color:var(--dim);margin-top:6px;letter-spacing:.1em}
.yt-desc{font:400 11.5px/1.65 var(--mono);color:var(--muted);margin-top:12px;white-space:pre-line;border-top:1px solid var(--line);padding-top:12px;max-height:170px;overflow:hidden;position:relative}
.yt-desc::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(transparent,var(--panel))}
/* Newsletter */
.nl{background:#0c0c12;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.nl-bar{display:flex;gap:6px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
.nl-bar i{width:9px;height:9px;border-radius:50%;background:#2c2c34}
.nl-bar i:first-child{background:#e8b84b}
.nl-bar span{margin-left:8px;font-size:8.5px;letter-spacing:.3em;color:var(--dim)}
.pk-nl-subj{font-weight:600;font-size:14.5px;padding:15px 17px 3px}
.pk-nl-prev{font-size:12px;color:var(--dim);padding:0 17px;font-style:italic}
.nl-body{font-family:var(--serif);font-size:15px;line-height:1.65;padding:13px 17px 15px;color:#ddd9d0;white-space:pre-line}
.nl-cta{padding:0 17px 17px;font:600 12px var(--sans);color:var(--gold2)}
/* Threads */
.th{display:flex;flex-direction:column;gap:11px}
.th-post{display:flex;gap:11px}
.th-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ededf3,#9a9aa6);display:grid;place-items:center;font-weight:700;color:#14141a;font-size:13px;flex:none}
.th-meta{font-size:12px;color:var(--dim)} .th-meta b{color:var(--text);font-weight:600}
.th-post p{font-size:13.5px;line-height:1.62;margin-top:3px;color:#e9e7df;white-space:pre-line}
.th-nod{font-size:10px;color:var(--dim);font-style:italic;margin-top:3px}
.th-foot{display:flex;gap:18px;color:var(--dim);font-size:11px;padding-top:3px}
/* Bluesky */
.bs{display:flex;flex-direction:column;gap:11px}
.bs-post{display:flex;gap:11px}
.bs-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7cc0ff,#1185fe);display:grid;place-items:center;font-weight:700;color:#04263f;font-size:13px;flex:none}
.bs-meta{font-size:12px;color:var(--dim)} .bs-meta b{color:var(--text);font-weight:600} .bs-meta .hnd{color:#7cc0ff}
.bs-post p{font-size:13.5px;line-height:1.58;margin-top:3px;color:#e9e7df}
.bs-second{font-size:12.5px;color:var(--muted);border-left:2px solid var(--line2);padding-left:10px;margin-top:8px}
.bs-link{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:8px 11px;margin-top:9px;font-size:11px;color:var(--muted)}
.bs-link .lk{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#16243a,#0d1622);display:grid;place-items:center;color:#7cc0ff;flex:none;font-size:12px}
.bs-feed{display:inline-flex;align-items:center;gap:7px;font:500 10px var(--mono);letter-spacing:.1em;color:#7cc0ff;border:1px solid rgba(124,192,255,.35);background:rgba(124,192,255,.08);border-radius:99px;padding:4px 11px;align-self:flex-start}
.bs-foot{display:flex;gap:18px;color:var(--dim);font-size:11px}
/* Pinterest */
.pin-canvas{position:relative;border-radius:14px;padding:14px;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0) 0 0/14px 14px,linear-gradient(180deg,rgba(230,0,35,.06),rgba(255,255,255,.01));border:1px solid var(--line);display:grid;place-items:center}
.pk-pin-img{position:relative;height:210px;aspect-ratio:4/5;max-width:100%;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#3a1418,#190c10 60%,#0c0a0c);display:flex;align-items:flex-end;padding:13px;border:1px solid rgba(230,0,35,.3)}
.pk-pin-img .pin-title{font:700 15px/1.2 var(--sans);color:#fff;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.pk-pin-save{position:absolute;top:9px;right:9px;background:#e60023;color:#fff;font:700 11px var(--sans);border-radius:99px;padding:5px 12px;box-shadow:0 6px 16px -6px rgba(230,0,35,.7)}
.pin-tag{position:absolute;top:9px;left:9px;font:600 8px var(--mono);letter-spacing:.24em;color:#fff;background:rgba(0,0,0,.5);border-radius:6px;padding:3px 7px}
.pin-board{display:inline-flex;align-items:center;gap:7px;font:500 10px var(--mono);letter-spacing:.12em;color:var(--gold2);margin-top:12px}
.pin-board .dotr{width:7px;height:7px;border-radius:50%;background:#e60023;box-shadow:0 0 8px #e60023}
.pin-desc{font-size:12px;color:var(--muted);line-height:1.55;margin-top:8px}
.pin-alt{font:400 9.5px var(--mono);color:var(--dim);margin-top:9px;border-top:1px solid var(--line);padding-top:9px}
.pin-alt i{color:var(--gold2);font-style:normal}
/* Reddit */
.rd{display:flex;gap:12px}
.rd-votes{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;color:var(--dim);font-size:11px}
.rd-votes .up{color:#ff4500;font-size:13px} .rd-votes .dn{font-size:13px}
.rd-votes b{color:var(--text);font-weight:600}
.rd-main{flex:1;min-width:0}
.rd-sub{font-size:11px;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rd-sub .r{color:#ff7a45;font-weight:600}
.pk-rd-flair{font:600 8.5px var(--mono);letter-spacing:.14em;color:#ff7a45;border:1px solid rgba(255,69,0,.4);background:rgba(255,69,0,.1);border-radius:99px;padding:2px 8px}
.pk-rd-title{font:600 14.5px/1.35 var(--sans);color:#f0eee7}
.pk-rd-body{font-size:12.5px;line-height:1.6;color:#cfcdc6;margin-top:9px;white-space:pre-line}
.rd-note{font-size:10.5px;color:var(--dim);font-style:italic;margin-top:10px}
.rd-foot{display:flex;gap:16px;color:var(--dim);font-size:11px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.fineprint{margin-top:22px;font:400 10px var(--mono);letter-spacing:.14em;color:var(--dim);text-align:right}

/* ============ DEPLOYED — results take the stage (desktop) ============ */
/* minmax(0,1fr), not 1fr. A 1fr track's automatic minimum is min-content, so
   a single wide descendant among the result cards blew the column out to
   489px inside a 362px container — which is why the page only started panning
   sideways AFTER a run, when .deployed is applied. minmax(0,…) caps that
   minimum at zero and lets the track obey its container instead. */
.studio-grid.deployed{grid-template-columns:minmax(0,1fr);gap:18px}
.studio-grid.deployed .output-panel{min-height:0}
.studio-grid.deployed .interview,.studio-grid.deployed .mode-toggle,.studio-grid.deployed .sample-row{display:none}
@media (min-width:1081px){
  .studio-grid.deployed{gap:16px}
  .studio-grid.deployed > .panel:first-child{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 16px;
    padding:16px 20px;border-radius:18px;transition:padding .4s var(--ease);
  }
  .studio-grid.deployed > .panel:first-child > h3,
  .studio-grid.deployed > .panel:first-child > .panel-sub,
  .studio-grid.deployed > .panel:first-child > .field-label,
  .studio-grid.deployed > .panel:first-child > .sample-row,
  .studio-grid.deployed > .panel:first-child > .hint{display:none}
  .studio-grid.deployed > .panel:first-child > .panel-label{margin-bottom:0;margin-right:6px}
  .studio-grid.deployed #srcChips::before{content:'SOURCE';font:500 9.5px var(--mono);letter-spacing:.28em;color:var(--dim);margin-right:2px}
  .studio-grid.deployed #toneChips::before{content:'VOICE';font:500 9.5px var(--mono);letter-spacing:.28em;color:var(--dim);margin-right:2px}
  .studio-grid.deployed > .panel:first-child textarea{
    flex:1 1 260px;min-height:44px;height:44px;max-height:44px;margin-top:0;overflow:hidden;
    padding:11px 16px;border-radius:12px;line-height:1.4;
    transition:min-height .4s var(--ease),max-height .4s var(--ease),padding .4s var(--ease),border-color .3s,box-shadow .3s;
  }
  .studio-grid.deployed .btn-run{width:auto;padding:11px 22px}
  .studio-grid.deployed > .panel:first-child:has(textarea:focus){
    flex-direction:column;align-items:stretch;gap:14px;padding:24px 26px;border-radius:22px;
  }
  .studio-grid.deployed > .panel:first-child:has(textarea:focus) textarea{
    min-height:220px;height:auto;max-height:none;overflow:auto;padding:17px 18px;line-height:1.7;
  }
  .studio-grid.deployed > .panel:first-child:has(textarea:focus) .btn-run{width:100%;padding:16px 32px}
  .studio-grid.deployed > .panel:first-child:has(textarea:focus) .input-meta{display:flex;width:100%;margin-top:0}
  .studio-grid.deployed > .panel:first-child:has(textarea:focus) #srcChips,
  .studio-grid.deployed > .panel:first-child:has(textarea:focus) #toneChips{align-self:flex-start}
}

/* ============ LOOP ============ */
#loop{padding:130px 0 140px;border-top:1px solid var(--line);scroll-margin-top:-90px}
/* Anchored from the bottom: -340 + 180 = -160, unchanged. */
#loop .glow{bottom:-340px}
#loop .glow::before{bottom:180px;right:-160px}
.loop-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.loop-points{list-style:none;margin-top:34px;display:flex;flex-direction:column;gap:20px}
.loop-points li{padding-left:26px;position:relative;color:var(--muted);font-size:.95rem;line-height:1.7}
.loop-points li::before{content:'▲';position:absolute;left:0;top:2px;color:var(--gold);font-size:10px}
.loop-points b{color:var(--text);font-weight:600}
.loop-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.stat{border:1px solid var(--line);border-radius:16px;padding:16px 14px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);transition:border-color .35s}
.stat:hover{border-color:rgba(232,184,75,.4)}
.stat .k{font:500 8.5px var(--mono);letter-spacing:.26em;color:var(--dim);text-transform:uppercase}
.stat .v{font-size:1.35rem;font-weight:700;margin-top:8px;letter-spacing:-.02em}
.stat .v.gold{color:var(--gold2)}
.terminal{border:1px solid var(--line2);border-radius:18px;background:#0a0a0f;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.term-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.term-bar i{width:11px;height:11px;border-radius:50%}
.term-bar i:nth-child(1){background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{margin-left:10px;font-size:10px;letter-spacing:.2em;color:var(--dim)}
.term-body{padding:20px 22px;font:400 12px/1.9 var(--mono);color:#b9b7c2;min-height:280px;white-space:pre-wrap;word-break:break-word}
.term-body .cmt{color:var(--dim)}
.term-body .ins{color:#8ab4ff}
.term-body .add{color:var(--gold2)}
.caret{display:inline-block;width:8px;height:15px;background:var(--gold);vertical-align:-2px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ============ FOOTER ============ */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:70px 6vw 46px;background:var(--bg2)}
.foot-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px}
.foot-brand p{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--muted);margin-top:14px}
.foot-col h4{font:500 10px var(--mono);letter-spacing:.34em;color:var(--dim);text-transform:uppercase;margin-bottom:18px}
.foot-col li{list-style:none;margin-bottom:11px;font-size:13px;color:var(--muted)}
.foot-col kbd{font:500 10.5px var(--mono);border:1px solid var(--line2);border-radius:6px;padding:2px 7px;color:var(--gold2);margin-right:8px}
.foot-bottom{max-width:1240px;margin:56px auto 0;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 10.5px var(--mono);letter-spacing:.2em;color:var(--dim)}

/* ============ CMDK ============ */
.cmdk{position:fixed;inset:0;z-index:5000;display:flex;justify-content:center;align-items:flex-start;padding-top:16vh;background:rgba(4,4,7,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.cmdk.open{opacity:1;visibility:visible}
.cmdk-box{width:min(560px,92vw);background:#101018;border:1px solid var(--line2);border-radius:20px;overflow:hidden;box-shadow:0 50px 120px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(14px) scale(.98);transition:transform .35s var(--ease)}
.cmdk.open .cmdk-box{transform:none}
.cmdk-box input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:19px 22px;color:var(--text);font:400 15px var(--sans)}
.cmdk-box input:focus{outline:none}
.cmdk-box input::placeholder{color:var(--dim)}
.cmdk-list{list-style:none;max-height:320px;overflow-y:auto;padding:8px}
.cmdk-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 15px;border-radius:12px;font-size:13.5px;color:var(--muted);cursor:pointer;transition:.2s}
.cmdk-item.sel{background:var(--gold-dim);color:var(--text)}
.cmdk-item.sel .ci-hint{color:var(--gold2);border-color:rgba(232,184,75,.4)}
.ci-hint{font:500 9.5px var(--mono);letter-spacing:.16em;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:3px 8px;text-transform:uppercase;flex:none}
.cmdk-empty{padding:22px;text-align:center;color:var(--dim);font-size:13px}
.cmdk-foot{border-top:1px solid var(--line);padding:11px 18px;font:400 9.5px var(--mono);letter-spacing:.22em;color:var(--dim);display:flex;gap:20px}

/* ============ VAULT DRAWER (frontier: persistent memory) ============ */
.drawer-back{position:fixed;inset:0;z-index:5400;background:rgba(4,4,7,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.3s}
.drawer-back.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:5500;background:linear-gradient(180deg,#101018,#0b0b10);border-left:1px solid var(--line2);box-shadow:-40px 0 120px -40px rgba(0,0,0,.9);transform:translateX(100%);transition:transform .42s var(--ease);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:24px 22px 16px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:1.3rem}
.drawer-head p{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.5;max-width:300px}
.drawer-close{background:transparent;border:1px solid var(--line2);border-radius:9px;width:34px;height:34px;color:var(--muted);font-size:15px;flex:none;transition:.3s}
.drawer-close:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.drawer-body{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:22px;scrollbar-width:thin}
.vault-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vault-stats .stat{padding:13px 12px}
.vault-stats .v{font-size:1.2rem}
.drawer-sec h4{font:500 10px var(--mono);letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.echo-test{width:100%;background:#0a0a0f;border:1px solid var(--line2);border-radius:12px;padding:11px 13px;color:var(--text);font:400 13px var(--sans);margin-bottom:12px}
.echo-test:focus{outline:none;border-color:rgba(138,180,255,.5)}
.echo-test::placeholder{color:var(--dim)}
.echo-list{display:flex;flex-direction:column;gap:9px}
.echo-list .er{border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.echo-list .er q{font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.4;quotes:none;color:#dfe6f5;display:block}
.echo-list .er .erm{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:8.5px;letter-spacing:.18em;color:var(--dim)}
.echo-list .er .erm .sc{height:4px;flex:1;margin:0 10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;max-width:90px}
.echo-list .er .erm .sc i{display:block;height:100%;background:var(--blue);border-radius:99px}
.vault-list{display:flex;flex-direction:column;gap:10px}
.vitem{border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.vitem-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.2em;color:var(--dim);margin-bottom:9px}
.vitem-top .vm{color:var(--gold2);border:1px solid rgba(232,184,75,.35);background:var(--gold-dim);border-radius:99px;padding:2px 8px}
.vitem q{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.42;quotes:none;color:#e9e7df;display:block}
.vitem-kw{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.vitem-kw span{font:500 9px var(--mono);color:var(--muted);border:1px solid var(--line2);border-radius:99px;padding:2px 8px}
.drawer-foot{padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font:400 9.5px var(--mono);letter-spacing:.16em;color:var(--dim);display:flex;align-items:center;justify-content:space-between;gap:10px}
.vault-clear{font:inherit;letter-spacing:inherit;color:var(--dim);background:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;transition:color .2s,border-color .2s}
.vault-clear:hover{color:#e08585;border-color:rgba(224,133,133,.4)}

/* ============ TOAST ============ */
.toasts{position:fixed;bottom:calc(28px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:6000;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{background:rgba(16,16,24,.9);backdrop-filter:blur(16px);border:1px solid rgba(232,184,75,.35);color:var(--text);font:500 12.5px var(--sans);letter-spacing:.02em;padding:12px 22px;border-radius:999px;box-shadow:0 18px 50px -12px rgba(0,0,0,.8);opacity:0;transform:translateY(16px) scale(.95);transition:.45s var(--ease)}
.toast.show{opacity:1;transform:none}
.toast::before{content:'▲ ';color:var(--gold);font-size:9px}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  /* Same min-content blowout as .deployed above — these are the tracks every
     narrow viewport lands on, so they need the same cap. */
  .studio-grid,.loop-grid,.model-grid{grid-template-columns:minmax(0,1fr)}
  .model-sticky{position:static;margin-bottom:44px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .loop-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){.nav-links{display:none}}
@media (max-width:720px){
  .bento{grid-template-columns:1fr}
  .pcard.wide{grid-column:span 1}
  .layer{grid-template-columns:1fr;gap:16px}
  .mini{justify-content:flex-start}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .hero{padding-top:110px}
  .drawer{top:auto;left:0;right:0;bottom:0;width:100%;height:auto;max-height:90vh;border-left:none;border-top:1px solid var(--line2);border-radius:22px 22px 0 0;transform:translateY(100%)}
  .drawer.open{transform:none}
}
@media (max-width:560px){
  nav{padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left))}
  .kbd-hint{display:none}
  .wrap{padding:0 5vw}
  .hero-stats{gap:12px 18px}
  .tt{flex-direction:column}
  .tt-rail{flex-direction:row;justify-content:flex-start;gap:22px;padding-top:4px}
  .results-head{align-items:flex-start}
  .panel{padding:22px}
  .analytics{grid-template-columns:1fr 1fr}
  .an-cell:last-child{grid-column:span 2}
  .iv-controls{flex-wrap:wrap}
  .iv-mid{order:3;flex-basis:100%}
  .echoes-row,.nuggets-row{grid-auto-columns:84%}
  .rd-votes{flex-direction:row;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal,.anim{opacity:1!important;transform:none!important}
}

/* ── auth control (gateway-client mountAuthControl) ── */
.auth-ctl{background:none;border:1px solid var(--line,#2a2a35);border-radius:999px;color:var(--mut,#9aa);cursor:pointer;font:inherit;font-size:11px;letter-spacing:.08em;margin-left:8px;padding:6px 12px;text-transform:uppercase;transition:color .2s,border-color .2s}
.auth-ctl:hover{border-color:var(--gold,#e8b84b);color:var(--gold,#e8b84b)}

/* Example picker + provenance banner. The banner sits INSIDE #outResults
   because .sample-row is display:none under .deployed, so nothing in the
   input panel is reachable once a board is on screen. */
.ex-lead{margin-left:10px}
.example-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border:1px solid var(--line2,rgba(255,255,255,.14));border-left:3px solid var(--gold,#d6a545);border-radius:8px;background:rgba(214,165,69,.10);font-size:13px;line-height:19px}
.example-banner b{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.26em;color:var(--gold,#d6a545)}
.example-banner .link-btn{margin-left:auto}

/* ===== Mobile foundations (M1) =====
   Everything below is gated on a coarse pointer or a narrow viewport, so the
   >=1081px desktop path is untouched. */

html{-webkit-text-size-adjust:100%}
/* Stops the whole page rubber-banding behind fixed overlays on iOS. */
body{overscroll-behavior-y:none}
/* The default grey flash reads as a rendering artefact over the gold buttons
   and the platform mock chrome. */
*{-webkit-tap-highlight-color:transparent}

@media (pointer:coarse),(max-width:720px){
  /* Safari zooms the viewport whenever a focused field is under 16px. The fix
     is the font size — NOT maximum-scale, which would also kill pinch-zoom. */
  .cmdk-box input,.echo-test,.topic-input,.type-fallback,textarea{font-size:16px}
}

/* A pasted URL or a long token in generated copy overflows these cards: every
   one is white-space:pre-line with no break guard. `anywhere` rather than
   break-all so ordinary prose still wraps on word boundaries.

   The list below is DERIVED, not eyeballed: check-asset-invariants.mjs reads
   index-editor.js for every class that receives an escaped interpolation and
   fails the build if one has no rule here. The original six covered six of the
   23 such classes, and picking them by hand is exactly how the other 17 were
   missed — including .rd-title and .pin-title, which take a headline straight
   from the model. Nine of the 23 carry the `pk-` prefix described above the
   X mock rules — the invariant re-derives the class list from
   index-editor.js's own markup strings, so it tracks the renamed classes
   automatically.

   Ungated by media query on purpose: overflow-wrap:anywhere only does anything
   to content that would otherwise overflow, so desktop rendering is identical
   for every string that already fits. Utility classes (.mono, .r, .hnd) are in
   the list because they ARE the text-bearing element at their call sites; the
   same "only fires on overflow" argument makes their wider reach harmless. */
.x-post p,.li-text,.yt-desc,.nl-body,.th-post p,.pk-rd-body,
.bs-second,.hnd,.pk-ig-cap,.ig-quote,.ig-top,.mono,.pk-nl-prev,.pk-nl-subj,
.pin-desc,.pin-title,.r,.pk-rd-flair,.rd-note,.pk-rd-title,.th-nod,
.tt-label,.yt-badge,.pk-yt-dur,.pk-yt-title{overflow-wrap:anywhere}

@media (max-width:480px){
  .wrap{padding:0 14px}
  .panel{padding:16px}
  .pcard{padding:14px}
  /* Was reserving a screen and a half of empty space before any board
     existed (index.css .output-panel min-height:660px). */
  .output-panel{min-height:auto}
  .loop-stats{grid-template-columns:repeat(2,1fr)}
  .toasts{left:12px;right:12px;transform:none}
}

/* ===== Touch targets (M2) =====
   40 controls were under the 44px floor here, 20 of them the resonate/copy
   pair on each of the 10 cards. Same gate as the M1 block above. */
@media (pointer:coarse),(max-width:720px){
  .btn,.btn-run{min-height:44px}
  .btn-sm{padding:12px 18px}
  .chip-btn,.chip{padding:11px 15px;min-height:44px;display:inline-flex;align-items:center}
  /* .link-btn is an underlined text button — the underline is the affordance,
     so the extra height goes in padding and the border stays put. */
  .link-btn{padding:13px 4px 12px;min-height:44px}
  .vault-btn,.kbd-hint{padding:11px 14px;min-height:44px}
  /* ── the nav has to fit a phone ───────────────────────────────────────
     Measured at 375px: 434px of content, so VAULT / Open Studio / the auth
     chip ran off the right edge. The 44px touch targets above are correct
     and stay; what goes is everything that is redundant at this width.

     1. ⌘K is a control a touch device cannot invoke, and index.js's own
        hasKeyboard() already treats ≤720px as keyboardless. studio.html
        hides its equivalent #cmdBtn at exactly this breakpoint; this one
        was only hidden at ≤560, below where the overflow begins.
     2. "studio" under the wordmark — studio.css hides the same sub-label
        at the same breakpoint for the same reason (see its comment): it is
        the decorative one, and here it sits inches from a button that says
        Open Studio.
     3. The auth chip is capped rather than trimmed: signed out it reads
        "sign in", but signed in it becomes "@<login> · sign out", which is
        unbounded — one long GitHub handle would push the bar out again on
        a screen that has no room to give. */
  .kbd-hint{display:none}
  .brand-sub{display:none}
  .nav-right{gap:8px}
  .btn-sm{padding:12px 14px}
  .auth-ctl{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding:6px 8px;letter-spacing:.04em;margin-left:0}
  .drawer-close{width:44px;height:44px}
  .topic-input,.type-fallback,.echo-test{min-height:44px}
  .brand{min-height:44px;display:inline-flex;align-items:center}
  /* The Paste/Interview switch, 32px. studio.css gained the equivalent floor
     in the same pass and this file did not — and the selector does not carry
     across: studio's control is `.seg button`, a child, where this page puts
     the class on the button itself. Copying that rule over verbatim would
     have matched nothing here and still looked fixed. */
  .seg{min-height:44px}
}

/* Keyboard-only copy. #cmdkBtn is display:none at <=560 and there is no
   physical keyboard to press anyway, so advertising ⌘K / ⌘↵ on a phone is a
   promise the page cannot keep. Every palette command is mirrored by an
   on-screen control, so nothing is lost by staying quiet about it. */
@media (max-width:720px){.kbd-only{display:none}}

/* ===== The page panned sideways on a phone (device report) =====
   .glow is a 560px blurred circle parked deliberately OUTSIDE its section
   (#model right:-180px, #loop right:-160px) as an ambient bleed. On a 390px
   viewport its right edge lands at 570 — and 570 was exactly the document's
   scrollWidth, so this one decorative div was the entire overflow.

   body{overflow-x:hidden} does not save it. When html's overflow is visible
   the body's value is propagated to the viewport and the body itself is
   treated as visible — which iOS Safari honours by letting the page pan and
   zoom out anyway. That is the "strange zoom" in the report.

   ── Why the ::before frame, and not something simpler ──────────────────────
   Clipping higher up is not available: #model contains .model-sticky, and an
   overflow on an ancestor silently kills position:sticky. right:0 does not
   contain it, it MOVES the visual. clip-path paints a smaller shape but does
   not reduce scrollable overflow. A transform still contributes its
   transformed box. The one thing that works is making .glow a clipping frame
   whose edges coincide with the viewport, and putting the gradient in a
   pseudo-element inside it.

   ── This block is now a PERFORMANCE choice, not containment ────────────────
   Containment holds at every width, desktop included, so the phone no longer
   depends on these rules to avoid panning. They stay because a 560px circle
   under a 60px blur is real GPU work on a phone for ink that is mostly
   off-screen there anyway. The old `right:0` overrides are gone: the frame
   already prevents the overflow they existed to prevent, and keeping them
   would move the visual for no reason. */
@media (max-width:720px){
  .glow::before{width:300px;height:300px;filter:blur(48px)}
  /* Same absolute positions the ≤720 rules produced before: frame offset plus
     these equals -100, -100 and 80 respectively. */
  #model .glow::before{top:220px;right:0}
  #loop .glow::before{bottom:240px;right:0}
  #studio .glow::before{top:180px;left:-80px}
}

/* Reopen a saved pillar from the drawer. The vault was a list you could read
   but not use before this — see restoreHomeRun in index.js. */
.v-reopen{
  margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--gold2);background:none;border:1px solid rgba(232,184,75,.35);
  border-radius:99px;padding:7px 12px;cursor:pointer;transition:.25s var(--ease)
}
.v-reopen:hover{background:var(--gold-dim);color:var(--gold2)}
@media (pointer:coarse),(max-width:720px){
  .v-reopen{min-height:44px;padding:11px 16px;display:inline-flex;align-items:center}
}

/* Body scroll locks while a studio iframe overlay owns the screen. The home
   page opens BOTH bridges (index.js), and neither lock class was styled here
   — studio.css has the twin rule but index.html never loads it, so the page
   scrolled (and iOS rubber-banded) behind the full-screen editors. */
html.vs-open,html.vs-open body,html.cs-open,html.cs-open body{overflow:hidden}