:root{
  --bg:#0B0A08; --surface:#13110D;
  --line:rgba(233,227,211,.09); --line2:rgba(233,227,211,.18);
  /* #5D584B measured 2.66-2.79:1 on --bg/--surface, the worst of the five
     tokens this pass fixed. #837c6a clears both (4.54/4.76:1). This palette
     is TIGHT: --muted #97917F is itself only just clear, so the whole usable
     band for --faint is about 1.32-1.36:1 away from it. This value sits at
     the top of that band — a bigger margin collapses --faint into --muted
     and the token stops meaning anything. Widening it properly means
     lifting --muted too, which is a visual-design decision, not this. */
  --text:#EAE6DA; --muted:#97917F; --faint:#837c6a;
  --gold:#D6A545; --gold-hi:#E8BE66; --gold-soft:rgba(214,165,69,.13);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Geist',-apple-system,'Helvetica Neue',sans-serif;
  --mono:'Geist Mono','SF Mono',Menlo,monospace;
  --sys:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --yt:'Roboto',var(--sys);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{background:radial-gradient(1300px 900px at 50% -12%, #17130C 0%, var(--bg) 58%) fixed;color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;overflow-x:hidden;scrollbar-width:none;-webkit-font-smoothing:antialiased}
body::-webkit-scrollbar{display:none}
::selection{background:rgba(214,165,69,.32);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(234,230,218,.12);border-radius:99px;border:3px solid var(--bg)}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono)} .mut{color:var(--muted)}
kbd{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
[hidden]{display:none!important}
#field{position:fixed;inset:0;z-index:0;opacity:0}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}
header.bar{z-index:20}

.bar{position:fixed;top:0;left:0;right:0;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));z-index:20;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.bar.scrolled{background:rgba(11,10,8,.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;padding:6px 4px}
.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(--faint);letter-spacing:.3em;text-transform:uppercase}
.brand svg{display:none}
.rail{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:340px;height:40px;opacity:0;pointer-events:none;transition:opacity .5s}
body.in-studio .rail{opacity:1;pointer-events:auto}
.rail-line{position:absolute;left:24px;right:24px;top:50%;height:1px;background:var(--line)}
.rail-line i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
.rail-step{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;padding:8px 6px;color:var(--faint);transition:color .4s}
.rail-step:nth-child(2){left:24px}.rail-step:nth-child(3){left:50%}.rail-step:nth-child(4){left:calc(100% - 24px)}
.rail-step b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em}
.rail-step span{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em}
.rail-step.active{color:var(--gold)} .rail-step.done{color:var(--muted)} .rail-step:hover{color:var(--text)}
.bar-right{display:flex;align-items:center;gap:10px}
.ghost-btn{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:9px 15px;display:inline-flex;align-items:center;gap:8px;transition:all .35s var(--ease)}
.ghost-btn:hover{color:var(--text);border-color:var(--line2);background:rgba(255,255,255,.03)}
/* display, not opacity. An opacity:0 button is invisible but still occupies
   its full width, so on the hero screen and during slicing the bar reserved
   ~87px for a control that was not there and shoved VAULT toward the edge —
   which is the crowding you see on a phone. The 0.5s fade is not worth a
   permanent hole in the layout. */
#backBtn{display:none}
body.in-studio #backBtn{display:inline-flex;pointer-events:auto}
#backBtn.off{display:none!important}
.badge{font-size:9.5px;background:var(--gold-soft);color:var(--gold);border-radius:999px;padding:1px 7px;letter-spacing:.05em}

.btn-primary{position:relative;display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:13px;letter-spacing:.02em;color:#1A1305;background:linear-gradient(180deg,var(--gold-hi),#C6913A);border-radius:999px;padding:13px 26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 28px rgba(214,165,69,.22);transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .3s;overflow:hidden}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 36px rgba(214,165,69,.3)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-primary kbd{color:rgba(26,19,5,.75);background:rgba(0,0,0,.09);border-color:rgba(0,0,0,.22)}
.btn-primary.big{padding:16px 32px;font-size:13.5px}
.btn-primary[disabled]{opacity:.32;pointer-events:none}
.btn-primary.live{background:transparent;border:1px solid rgba(214,165,69,.55);color:var(--gold);box-shadow:none}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:13px 24px;transition:all .35s var(--ease)}
.btn-ghost:hover{color:var(--text);border-color:var(--line2);background:rgba(255,255,255,.03);transform:translateY(-1px)}
.link-btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--gold);opacity:.75;transition:opacity .3s;padding:6px 2px}
.link-btn:hover{opacity:1}
.icon-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--muted);border:1px solid transparent;transition:all .3s var(--ease)}
.icon-btn:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:var(--line)}
.icon-btn.on{color:var(--gold)} .icon-btn.ok{color:var(--gold)}

#hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:120px 28px 40px}
.hero-inner{max-width:1060px;margin:0 auto;width:100%}
.eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.3em;color:var(--gold);margin-bottom:34px}
.eyebrow-line{width:44px;height:1px;background:var(--gold);opacity:.6}
.hero-h{font-family:var(--serif);font-weight:400;font-size:clamp(58px,10.5vw,138px);line-height:.98;letter-spacing:-.015em;margin-bottom:36px}
.hero-h .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero-h .w{display:inline-block;will-change:transform}
.hero-h em{font-style:italic;color:var(--gold)}
.hero-sub{max-width:580px;font-size:16.5px;line-height:1.75;color:#C9C3B3;margin-bottom:26px}
.hero-quote{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--text);margin-bottom:44px}
.hero-quote span{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.22em;margin-left:14px}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:84px}
.phil{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.phil-item{padding:26px 28px 6px 0;border-right:1px solid var(--line)}
.phil-item:last-child{border-right:none}
.phil-item+.phil-item{padding-left:28px}
.phil-item b{display:block;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.24em;color:var(--gold);margin-bottom:12px}
.phil-item p{font-size:13.5px;line-height:1.65;color:var(--muted);max-width:26ch}
.hero-foot{max-width:1060px;margin:56px auto 0;width:100%;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--faint)}

#studio{min-height:100vh;min-height:100dvh;padding:118px 28px 60px}
.stage{display:none;max-width:1180px;margin:0 auto}
.stage.active{display:block}
.stage-label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.3em;color:var(--gold);margin-bottom:18px}
.serif-h{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,62px);line-height:1.04;letter-spacing:-.01em;margin-bottom:16px}
.serif-h em{font-style:italic;color:var(--gold)} .serif-h.sm{font-size:30px}
.stage-sub{max-width:560px;color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:38px}
.meta-line{font-size:10px;letter-spacing:.2em;margin-top:14px}

.seg{position:relative;display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:26px;background:rgba(255,255,255,.015)}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#221E16;border:1px solid var(--line2);border-radius:999px;transition:transform .5s var(--ease)}
.seg.speak .seg-thumb{transform:translateX(100%)}
.seg button{position:relative;z-index:1;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--muted);padding:10px 26px;border-radius:999px;transition:color .35s}
.seg button.on{color:var(--text)}
.pane{max-width:760px}
#pillarText{width:100%;min-height:230px;max-height:460px;resize:none;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:16px;padding:24px 26px;color:var(--text);font-family:var(--sans);font-size:15.5px;line-height:1.75;transition:border-color .4s,box-shadow .4s;overflow-y:auto}
#pillarText::placeholder{color:var(--faint)}
#pillarText:focus{outline:none;border-color:rgba(214,165,69,.45);box-shadow:0 0 0 4px rgba(214,165,69,.07)}
.pane-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:0 4px}
#pillarCount{font-size:10px;letter-spacing:.18em}
.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.persona{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:20px;background:rgba(255,255,255,.015);transition:all .35s var(--ease)}
.persona:hover{transform:translateY(-3px);border-color:rgba(214,165,69,.4);background:rgba(255,255,255,.03)}
.p-mono{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold-soft);color:var(--gold);font-family:var(--serif);font-size:16px}
.p-name{font-weight:600;font-size:13.5px}
.p-style{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em}
.interview{border:1px solid var(--line);border-radius:20px;padding:34px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.iv-head{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;margin-bottom:26px}
.rec{display:inline-flex;align-items:center;gap:7px;color:#E06A5A}
.rec i{width:7px;height:7px;border-radius:50%;background:#E06A5A;animation:blink 1.3s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
#ivName{color:var(--text)}
.iv-q{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,29px);line-height:1.35;margin-bottom:26px;min-height:2.6em}
#ivAnswer{width:100%;min-height:110px;resize:vertical;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:12px;padding:18px 20px;color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.7}
#ivAnswer:focus{outline:none;border-color:rgba(214,165,69,.45)}
#ivAnswer::placeholder{color:var(--faint)}
.iv-foot{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.iv-foot .btn-ghost{padding:11px 20px} .iv-foot .btn-primary{padding:12px 24px;font-size:12px}
.iv-change{margin-top:22px;font-size:9.5px}
.meta-rows{max-width:760px;margin-top:34px;display:flex;flex-direction:column;gap:16px}
.meta-row{display:flex;align-items:center;gap:22px}
.meta-label{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.26em;color:var(--faint);width:64px;flex-shrink:0}
.brand-url-input{flex:1;min-width:0;background:#0a0a0f;border:1px solid var(--line2);border-radius:10px;padding:8px 12px;color:var(--text);font:400 12.5px var(--sans)}
.brand-url-input:focus{outline:none;border-color:rgba(232,184,75,.5)}
.brand-url-input::placeholder{color:var(--faint)}
.brand-url-input:disabled{opacity:.55;cursor:not-allowed}
.brand-url-lock{font-size:10px;letter-spacing:.04em;color:var(--faint);white-space:nowrap}
.brand-url-lock a{color:var(--gold);text-decoration:underline}
.meta-row.locked .meta-label{opacity:.6}
.brand-strip{display:inline-flex;align-items:center;gap:5px;margin-top:4px}
.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:400 9.5px var(--mono);letter-spacing:.12em;color:var(--faint)}
.brand-strip .bs-tag.warn{color:var(--gold)}
.brand-strip .bs-tag a{color:var(--gold);text-decoration:underline;margin-left:4px}
.brand-strip .bs-action{font:400 9.5px var(--mono);letter-spacing:.1em;color:var(--muted);background:none;border:1px solid var(--line2);border-radius:6px;padding:2px 6px;cursor:pointer}
.brand-strip .bs-action:hover{color:var(--text);border-color:var(--gold)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 15px;transition:all .3s var(--ease)}
.chip:hover{color:var(--text);border-color:var(--line2)}
.chip.on{color:var(--gold);border-color:rgba(214,165,69,.55);background:var(--gold-soft)}
.pillar-action{max-width:760px;margin-top:40px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;scroll-margin-top:80px}
#sliceHint{font-size:9.5px;letter-spacing:.22em}

.slice-wrap{max-width:640px;margin:6vh auto 0;text-align:center}
.emblem{width:130px;margin:0 auto 34px;display:block;overflow:visible}
.emblem path{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linejoin:round}
.emblem .e1{stroke-dasharray:340;stroke-dashoffset:340;animation:dash 2.6s var(--ease) infinite}
.emblem .e2,.emblem .e3{stroke:rgba(214,165,69,.5);animation:strata 2.6s ease-in-out infinite}
.emblem .e3{animation-delay:.4s}
.emblem circle{fill:var(--gold);animation:blink 1.4s infinite}
@keyframes dash{0%{stroke-dashoffset:340}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes strata{0%,100%{opacity:.15}50%{opacity:.8}}
.slice-bar{height:2px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;margin-bottom:34px}
.slice-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
.slice-log{text-align:left;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.3);padding:24px 26px;min-height:190px;font-size:12px;line-height:2.15}
.log-line{color:var(--muted);white-space:pre-wrap}
.log-line .log-t{color:var(--faint);margin-right:14px}
.log-line .log-x{color:var(--gold);margin-right:10px}
.log-line.done{color:#CFC9B8}
.cursor{color:var(--gold);animation:blink .8s infinite;margin-left:2px}
.slice-frags{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:26px}
.frag{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--text);border:1px solid rgba(214,165,69,.35);background:var(--gold-soft);border-radius:999px;padding:7px 16px}

.echoes-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
#newPillarBtn{margin-top:8px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:34px 0 24px;border-bottom:1px solid var(--line);padding-bottom:16px}
.tab{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--muted);padding:8px 14px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;transition:all .3s var(--ease)}
.tab b{font-weight:500;color:var(--faint);font-size:9.5px}
.tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.tab.on{color:var(--gold);background:var(--gold-soft)} .tab.on b{color:var(--gold)}
/* Docked inspector: the panel is FIXED to the viewport's top-right (like the
   reference design — it overlaps the stage header and stays put while the
   board scrolls), and .insp-open reserves its track so the multi-column board
   reflows beside it (columns:3 340px degrades to 2, then 1, with no JS). */
.echoes{columns:3 340px;column-gap:18px}
/* The reserved track: .stage is max-width:1180 centered, so forcing
   margin-right slides the WHOLE stage (headline, tabs, banner, grid, deploy
   bar — nothing inside resizes or reflows while the viewport has spare
   margin) smoothly left to clear the fixed panel; margin-left:auto absorbs
   the shift. Only when the viewport genuinely can't fit 1180px + panel does
   the stage narrow. On ultra-wide screens the panel floats in the empty
   margin and the content barely moves at all. */
#stage-echoes{transition:margin-right .45s var(--ease)}
@media(min-width:721px){#stage-echoes.insp-open{margin-right:372px}}
.echo-card{position:relative;break-inside:avoid;display:inline-block;width:100%;margin-bottom:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.echo-card:hover{transform:translateY(-3px);border-color:rgba(214,165,69,.3);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.sheen{position:absolute;top:-25%;bottom:-25%;left:0;width:45%;background:linear-gradient(105deg,transparent,rgba(232,190,102,.14),transparent);transform:translateX(-170%) skewX(-18deg);pointer-events:none;z-index:5}
.ec-chrome{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.ec-glyph{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-family:var(--mono);font-size:11px;font-weight:600;flex-shrink:0}
.ec-name{font-size:11.5px;font-weight:600;letter-spacing:.03em}
.ec-format{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:var(--faint)}
/* Only ever rendered on a card still showing its heuristic draft — see
   engineChip(). Deliberately quiet: it is information, not an alarm. */
.ec-draft{font-size:8px;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line2);border-radius:5px;padding:1px 5px;margin-left:6px;cursor:help}
.ec-actions{margin-left:auto;display:flex;gap:2px}

/* ───── MOCKUPS : shared, X, Threads, Bluesky, LinkedIn, Instagram, video-
   frame, platform-chrome, story, Pinterest, YouTube, Reddit, Newsletter,
   quote-graphic ─────
   Moved to mocks.css — every platform-card rule PyraPiecesStudio's
   render() functions depend on, so a page other than this one can render
   the same markup with the same styling. Loads alongside this file on
   studio.html and content-studio.html; nothing below depends on load
   order relative to it, since no --m-* variable or mock selector remains
   in this file. */

/* deploy bar */
.deploy-bar{position:sticky;bottom:calc(22px + env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:30px;padding:14px 16px 14px 24px;background:rgba(19,17,13,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.db-stats{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted)}
.db-stats b{color:var(--gold);font-weight:500}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin:0 4px 1px 8px;animation:blink 1.4s infinite}
.db-actions{display:flex;gap:10px;flex-wrap:wrap}
.db-actions .btn-ghost{padding:11px 20px} .db-actions .btn-primary{padding:12px 26px;font-size:12px}
#deployBtn .db-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,0,0,.16)}
#deployBtn .db-label{position:relative}
#deployBtn.busy{pointer-events:none}

#scrim{position:fixed;inset:0;background:rgba(8,7,5,.6);backdrop-filter:blur(4px);z-index:40;opacity:0}
#vault{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:#12100C;border-left:1px solid var(--line2);z-index:41;display:flex;flex-direction:column;transform:translateX(105%)}
.vault-head{display:flex;justify-content:space-between;align-items:flex-start;padding:calc(30px + env(safe-area-inset-top)) 28px 22px;border-bottom:1px solid var(--line)}
.vault-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.vs{padding:20px 10px;text-align:center;border-right:1px solid var(--line)}
.vs:last-child{border-right:none}
.vs b{display:block;font-family:var(--serif);font-weight:400;font-size:32px;color:var(--gold)}
.vs span{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:var(--faint)}
.vault-list{flex:1;overflow-y:auto;padding:20px 28px}
.v-run{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;transition:border-color .3s}
.v-run:hover{border-color:rgba(214,165,69,.35)}
.v-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.v-top b{font-size:13px;font-weight:600;line-height:1.4}
.v-top span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;flex-shrink:0;padding-top:3px}
.v-meta{font-family:var(--mono);font-size:9px;letter-spacing:.16em;margin-bottom:10px}
.v-restore{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--gold)}
.v-empty{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);text-align:center;padding:60px 20px;line-height:1.6}
.vault-foot{padding:20px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.vault-foot p{font-family:var(--serif);font-style:italic;font-size:13.5px}

#palette{position:fixed;inset:0;z-index:50;background:rgba(8,7,5,.55);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding-top:16vh}
.pal-box{width:540px;max-width:92vw;background:#15120D;border:1px solid var(--line2);border-radius:18px;box-shadow:0 40px 120px rgba(0,0,0,.7);overflow:hidden}
#palInput{width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:20px 24px;color:var(--text);font-family:var(--sans);font-size:15px}
#palInput:focus{outline:none}
#palInput::placeholder{color:var(--faint)}
#palList{max-height:320px;overflow-y:auto;padding:8px}
.pal-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 16px;border-radius:11px;font-size:13.5px;cursor:pointer;transition:background .2s}
.pal-item.sel{background:var(--gold-soft);color:var(--gold)}
.pal-hint{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--faint);display:flex;gap:8px;align-items:center}
.pal-empty{padding:26px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.pal-foot{padding:12px 24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9px;letter-spacing:.2em}

#toast{position:fixed;bottom:calc(30px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:60;background:#1B1712;border:1px solid rgba(214,165,69,.4);color:var(--text);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;padding:12px 22px;border-radius:999px;box-shadow:0 16px 50px rgba(0,0,0,.6);opacity:0;pointer-events:none;white-space:nowrap}
.spark{position:fixed;width:5px;height:5px;border-radius:50%;background:var(--gold-hi);z-index:70;pointer-events:none}

/* ───── INSPECTOR : per-asset detail panel ───── */
/* Pinned to the viewport, not placed in the card flow: top clears the fixed
   .bar, right matches #studio's 28px page padding.
   HEIGHT IS BOUNDED BY top + bottom, never by content — the panel spans the
   gap between them and scrolls inside it, so it cannot outgrow the screen.
   max-height restates that same sum in dvh as a guard, for the day someone
   swaps an inset for a fixed height. bottom is 56px rather than the old
   104px: .deploy-bar is sticky INSIDE .stage and .insp-open slides the stage
   left to reserve this track, so the bar never passes under the panel and the
   extra clearance only cost 48px of readable height.
   Internal scroll; page scroll stays the board's. z 30 sits
   above content (bar 20) and below scrim/vault/palette (40/41/50). */
#inspector{position:fixed;top:84px;right:28px;bottom:56px;width:344px;max-height:calc(100dvh - 140px);z-index:30;overflow-y:auto;overscroll-behavior:contain;background:#12100C;border:1px solid var(--line2);border-radius:16px;padding:20px 20px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
#inspector[hidden]{display:none}
.echo-card.sel{border-color:rgba(214,165,69,.55);box-shadow:0 0 0 1px rgba(214,165,69,.3)}
.insp-head{display:flex;align-items:center;gap:10px}
.insp-glyph{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;font-family:var(--mono);font-size:12px;font-weight:600;flex-shrink:0}
.insp-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.insp-title b{font-size:13px;letter-spacing:.03em}
.insp-format{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:var(--faint)}
.insp-close{margin-left:auto;flex-shrink:0}
.insp-hook{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.45;overflow-wrap:anywhere}
.insp-status{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--muted)}
.insp-status.ok{color:var(--gold)}
.insp-rows{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.insp-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.insp-row dt{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--faint)}
.insp-row dd{margin:0;font-size:12px;text-align:right;overflow-wrap:anywhere}
.insp-sec{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--faint)}
.insp-sec.warn{color:#E8A87C}
.insp-desc{font-size:12.5px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.insp-score-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.insp-score-num{font-family:var(--mono);font-size:12px;color:var(--gold)}
.insp-score-num.none{color:var(--faint)}
.insp-bar{height:4px;border-radius:999px;background:rgba(233,227,211,.08);overflow:hidden;margin-top:8px}
.insp-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
.insp-score-note{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--faint);margin-top:7px}
.insp-warns{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.insp-warn{font-size:11.5px;line-height:1.5;color:#E8A87C;background:rgba(232,168,124,.07);border:1px solid rgba(232,168,124,.18);border-radius:10px;padding:8px 10px;overflow-wrap:anywhere}
.insp-actions{display:flex;flex-direction:column;gap:8px}
.insp-primary{justify-content:space-between;width:100%;padding:13px 20px}
.insp-actions-row{display:flex;gap:8px}
.insp-actions-row .btn-ghost,.insp-fav{flex:1;justify-content:center;padding:12px 14px}
.insp-fav.on{color:var(--gold);border-color:rgba(214,165,69,.4)}
.insp-actions button[disabled]{opacity:.45;pointer-events:none}
/* Body scroll locks while a studio iframe overlay owns the screen. cs-open
   (content studio) was toggled by its bridge since #131 but styled nowhere,
   so the board kept scrolling — and rubber-banding on iOS — behind it. */
html.vs-open,html.vs-open body,html.cs-open,html.cs-open body{overflow:hidden}
#inspScrim{position:fixed;inset:0;background:rgba(8,7,5,.6);backdrop-filter:blur(4px);z-index:40;opacity:0}
#inspScrim[hidden]{display:none}
/* ≤720px the same element becomes a bottom sheet: card context stays visible
   above it, and the right-drawer gesture stays the vault's. z 40/41 mirrors
   scrim/vault — below palette 50, toast 60, editor 9500. */
@media(max-width:720px){
  #inspector{left:0;right:0;bottom:0;top:auto;width:auto;height:auto;max-width:100vw;max-height:min(78vh,640px);z-index:41;border-radius:18px 18px 0 0;border-bottom:none;transform:translateY(105%);padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}

@media(max-width:980px){.echoes{columns:2 300px}.persona-grid{grid-template-columns:repeat(2,1fr)}.phil{grid-template-columns:1fr}.phil-item{border-right:none;border-bottom:1px solid var(--line);padding:20px 0!important}.phil-item:last-child{border-bottom:none}}
@media(max-width:720px){.rail{display:none}.bar{padding:calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 14px calc(18px + env(safe-area-inset-left))}#cmdBtn{display:none}#hero,#studio{padding-left:18px;padding-right:18px}.echoes{columns:1}.persona-grid{grid-template-columns:1fr 1fr}.deploy-bar{flex-direction:column;align-items:stretch;text-align:center}.db-actions{justify-content:center}.db-actions .btn-ghost{flex:1 1 calc(50% - 5px);padding-left:8px;padding-right:8px}.db-actions .btn-primary{flex:1 1 100%}#vault{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ── auth control (gateway-client mountAuthControl) ── */
.auth-ctl{background:none;border:1px solid rgba(214,165,69,.25);border-radius:999px;color:#8b8577;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:#d6a545;color:#d6a545}

/* ===== Showcase-only mocks (example board) =====
   Moved to mocks.css with the rest of the platform-card CSS — blog post,
   landing page, case study, campaign plan, and the markdown-heading rule
   for their bodies. */

/* Provenance banner for the pre-built example board. Persistent and in-flow,
   deliberately — a dismissible toast would leave a screenshot of this board
   carrying no disclosure at all. */
.example-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border:1px solid var(--line2);border-left:3px solid var(--gold);border-radius:8px;background:var(--gold-soft);font-size:13px;line-height:19px;color:var(--muted)}
.example-banner b{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--gold)}
.example-banner .link-btn{margin-left:auto}

/* Example picker. Sits beside the sample-pillar link: "try" = you do it,
   "see" = we already did. */
.ex-row{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ex-row .ex-lead{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--faint)}
.ex-row .link-btn{padding:2px 8px;border:1px solid var(--line);border-radius:999px}
.ex-row .link-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ===== Mobile foundations (M1) ===== */

html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}
*{-webkit-tap-highlight-color:transparent}

/* (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){
  /* #pillarText is 15.5px and #palInput 15px — both under the 16px threshold
     that makes Safari zoom the viewport on focus. */
  #pillarText,#palInput,#ivAnswer,input,textarea{font-size:16px}
}

/* studio.css previously had NO breakpoint below 720, so a 390px phone was
   rendered with byte-identical rules to a 719px tablet. */
@media (max-width:480px){
  #hero,#studio{padding-left:14px;padding-right:14px}
  #hero{padding-top:96px}
  #studio{padding-top:96px}
  .stage-head h2{font-size:34px;line-height:1.1}
  .vault-stats{grid-template-columns:repeat(2,1fr)}
  .vs{padding:16px 8px}
  .vs b{font-size:24px}
  .persona-grid{grid-template-columns:1fr}
  /* white-space:nowrap on an element centred with translateX(-50%) overflows
     BOTH edges once the string is long. */
  #toast{left:12px;right:12px;transform:none;white-space:normal;text-align:center}
}

/* ===== Touch targets (M2) =====
   Same (pointer:coarse) OR narrow-viewport gate as the M1 block above, for
   the same two reasons. 44px is the Apple HIG / WCAG 2.2 AAA floor; 125
   controls on this page were under it, 102 of them the Edit/heart/copy row
   that appears on every one of the 34 cards. */
@media (pointer:coarse),(max-width:720px){
  .icon-btn{width:44px;height:44px}
  /* 2px gaps between three 30px glyphs read as one smudged control; at 44px
     they need less separation, not more, or the row wraps. */
  .ec-actions{gap:4px}
  .tab{padding:12px 16px;min-height:44px}
  .chip{padding:12px 16px;min-height:44px}
  .ghost-btn{padding:11px 15px;min-height:44px}
  .btn-ghost{min-height:44px}
  .link-btn{padding:12px 8px;min-height:44px;display:inline-flex;align-items:center}
  .ex-row .link-btn{padding:10px 14px}
  .seg button{min-height:44px}
  .v-restore{padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px;align-items:center}
  /* 42px, and it is #enterBtn — the first button on the site, the one that
     opens the studio at all. The earlier sweep ran from the echoes board
     onward and never measured the hero, so the one screen every visitor
     starts on was the one screen not audited. `.big` (padding 16px 32px)
     already cleared 44 on its own, which is why the slice button passed and
     this did not. */
  .btn-primary{min-height:44px}
}

/* Controls that only EXIST on hover. A touch device has no hover state, so
   .icon-btn's border (below) was permanently invisible on touch — the
   mock-specific version of this same problem (.ig-nav, .mock-pin .pin-save)
   moved to mocks.css with the mocks themselves.
   Widened past (hover:none) for the same testability reason as above. */
@media (hover:none),(max-width:720px){
  /* .icon-btn's border materialises only on :hover, so on touch the card
     actions were three low-contrast glyphs with no visible boundary. */
  .icon-btn{border-color:var(--line);color:var(--text)}
}

/* Keyboard-only copy — #cmdBtn is already display:none at <=720 (see the
   breakpoint above), so the shortcut it names is unreachable there. */
@media (max-width:720px){
  .kbd-only{display:none}
  .btn-primary kbd{display:none}
}

/* ===== Filter bar (M3) =====
   16 platform chips at the M2 44px floor wrapped into FIVE rows at 390px: a
   261px filter bar spending 31% of an 844px viewport and pushing the first
   card to y=908 — below the fold, so the board this page exists to show was
   not visible on arrival. Taller chips are right; a taller *bar* is not. One
   horizontally-scrolling row is the platform-native answer, and it keeps the
   count of platforms free to grow without costing vertical space. */
@media (max-width:720px){
  .tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    /* overflow-y would compute to auto alongside overflow-x and can produce a
       vertical scrollbar inside a 44px row. Pin it. */
    overflow-y:hidden;
    /* Without this, a swipe past the last chip hands the gesture to the page
       and triggers iOS back-navigation mid-filter. */
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  /* Chips must keep their intrinsic width; flex would otherwise shrink 16 of
     them to fit and undo the whole point. */
  .tab{flex:0 0 auto}
  /* The only affordance a scrollbar-less scroller has is the content visibly
     running off the edge. Fade whichever side has more to reach — never both
     unconditionally, or the last chip looks permanently dimmed once you get
     there. studio.js toggles these; without JS the row still scrolls, just
     without the hint. */
  .tabs.has-next{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%)}
  .tabs.has-prev{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 100%)}
  .tabs.has-prev.has-next{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
}

/* ===== The button that runs the product (M5) =====
   #sliceBtn sat 223px below the fold on arrival at 390px, 109px wide, with
   nothing on screen suggesting anything was down there. stage-pillar is a
   discrete screen reached by a button, not a scroll-to-section marketing
   page, so there is no scroll habit to fall back on — you land, see a text
   box and two rows of chips, and the action is simply absent.

   Sticky rather than fixed, matching .deploy-bar on the echoes stage: the bar
   belongs to its own stage instead of floating over every screen, it releases
   to its natural position at full scroll so the tone chips above it are never
   permanently covered, and iOS keeps a sticky element above the on-screen
   keyboard where a fixed one can end up behind it. The safe-area inset goes
   on `bottom` only — .deploy-bar's convention — since adding it to the
   padding as well would double-count it. */
@media (max-width:720px){
  .pillar-action{
    position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:6;
    flex-direction:column;align-items:stretch;gap:8px;margin-top:24px;
    padding:14px 16px;
    background:rgba(19,17,13,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid var(--line2);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)
  }
  /* 109px for the primary action on a 390px screen was the other half of the
     problem — it read as one more secondary link. */
  .pillar-action .btn-primary{width:100%;justify-content:center}
  #sliceHint{text-align:center}
}

/* ===== Three fixes from a real iPhone (device report) =====

   1. The page did not blend into Safari's chrome the way the homepage does.
   The homepage paints a FLAT var(--bg) that is byte-identical to its
   theme-color, so the browser's tinted bars and the page meet invisibly.
   This page paints a radial gradient whose top is ~#17130C while its
   theme-color declares #0B0A08 — the gradient's outer stop, not the colour
   actually under the chrome. One colour cannot match both ends of a
   gradient, so on phones the page goes flat and matches the meta tag
   exactly. The glow stays on desktop, where no browser chrome samples it.

   2. The header needed 407px inside a 390px bar: brand 145 + bar-right 226 +
   36 of padding. The VAULT pill was cut off at the right edge, and with no
   room left for space-between the stage indicator butted straight against
   the wordmark — the "PYRA studio01 — PILLAR" jam. The brand's own "studio"
   sub-label is the 54px that has to go, and it is also the redundant one:
   it sits next to a stage indicator that already says where you are, on a
   page whose title is Studio. 407 - 54 = 353, with room to spare.

   3. .pane-foot is flex-direction:row / nowrap, so on a 362px pane its three
   blocks were crushed to 70px, 83px and 201px — every label wrapping
   mid-phrase into a three-line column, which is what made that row read as
   noise. They stack instead. */
@media (max-width:720px){
  body{background:var(--bg)}
  .brand-sub{display:none}
  .pane-foot{flex-direction:column;align-items:flex-start;gap:12px}
  /* Stacking .pane-foot is not enough on its own: the lead still shared a
     line with the first example chip and the other two dropped below it, so
     the row read as one chip promoted above the rest. Full-width lead puts
     all three on equal footing. */
  .ex-row .ex-lead{width:100%}
  /* align-items:center hangs a 64px SOURCE/VOICE label against the MIDDLE of
     a chip group that now wraps to two rows, so the label floats beside the
     gap between rows and reads as belonging to neither. Top-align it and let
     it keep its own line. */
  .meta-row{align-items:flex-start;gap:10px;flex-direction:column}
  .meta-label{width:auto}
}

/* The wrap-guard rule for every mock class that renders model output
   moved to mocks.css with the mocks themselves — the check-asset-
   invariants.mjs derivation this comment used to describe now reads
   mocks.css instead of this file for that pairing. */