/* Landing sections — the home page's stages (hero composition, trace
   ledger, gives poster, breadth reel, closing) and the play-detail fold.
   Split sequentially from living-terminal.css: rule ORDER is unchanged and
   this file loads immediately after it, so the cascade is identical. */

/* Landing hero composition: promise, proof, then one action. The terminal owns
   the vertical space; its scrollback moves inside a fixed paper window so the
   page never jumps while the screenplay advances. */
.landing-hero-static{
  min-height:calc(100dvh - 76px);
  padding:14px clamp(22px,3.8vw,58px) 12px;
  display:flex;
  flex-direction:column;
}
.hero-fold{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(250px,.54fr) minmax(640px,1.46fr);
  column-gap:clamp(20px,2.6vw,38px);
  row-gap:16px;
  align-content:center;
  align-items:center;
  padding:clamp(8px,1.4vh,16px) 0;
}
.landing-hero-static .hero-message{display:block;padding:0;min-width:0}
/* The teaching line: the disease in one clause, the headline is the cure. */
.hero-kicker{
  margin:0 0 clamp(11px,1.8vh,17px);
  font:800 11px/1.45 var(--mono,ui-monospace,monospace);
  letter-spacing:.13em;
  color:var(--accent);
}
.landing-hero-static .hero-h1{
  max-width:none;
  margin:0;
  font-size:clamp(36px,3.1vw,48px);
  line-height:.96;
  letter-spacing:-.038em;
  text-transform:none;
}
.landing-hero-static .hero-h1 span{display:block;white-space:nowrap}
.landing-hero-static .hero-dek{
  max-width:39ch;
  margin:clamp(17px,2.2vh,25px) 0 0;
  font-size:clamp(15.5px,1.15vw,17.5px);
  line-height:1.5;
}
.hero-terminal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
#living-terminal{width:100%}
.hero-terminal .lt-wrap{max-width:none}
.hero-terminal .lt-strip{
  padding:clamp(12px,1.5vw,18px);
  border:1px solid color-mix(in srgb,var(--text-primary) 15%,transparent);
  border-radius:12px;
  background-color:color-mix(in srgb,var(--bg-surface) 91%,var(--control-bg));
  background-image:
    radial-gradient(color-mix(in srgb,var(--text-primary) 8%,transparent) .6px,transparent .8px),
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));
  background-size:11px 11px,100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 1px rgba(25,55,47,.08),
    8px 9px 0 color-mix(in srgb,var(--text-primary) 11%,transparent);
}
.hero-terminal .lt-window{
  border:1px solid color-mix(in srgb,var(--text-primary) 55%,transparent);
  border-radius:7px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 9px 24px rgba(25,55,47,.16);
}
.hero-terminal .lt-titlebar{height:34px}
.hero-terminal .lt-body{
  height:clamp(300px,48dvh,470px);
  padding:13px 18px 44px;
  font-size:14.5px;
  line-height:1.56;
}
.hero-terminal .lt-line{min-height:1.56em}
.hero-terminal .lt-promptrow{padding:8px 18px;font-size:14px}
.hero-terminal .lt-statusbar{padding:6px 18px}
.hero-terminal .lt-controls{margin-top:8px}
.hero-terminal-action{
  position:relative;
  width:100%;
  margin:clamp(18px,2.4vh,27px) 0 0;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
/* The one action owns the brightest colour on the paper side; the terminal
   owns the motion. Ember = runnable, everywhere on the site.
   (Scoped under .landing-page to outrank printed-play's press-paper button.) */
/* printed-play's press-paper treatment excludes .hero-terminal-action buttons,
   so the one hero action can hold ember. */
.landing-page .hero-terminal-action .btn{
  min-height:44px;
  max-width:100%;
  white-space:normal;
  text-align:left;
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:6px 6px 0 color-mix(in srgb,var(--text-primary) 22%,transparent);
}
.landing-page .hero-terminal-action .btn:hover,
.landing-page .hero-terminal-action .btn:focus-visible{
  background:color-mix(in srgb,var(--accent) 86%,#000);
  color:#fff;
}
/* The real run is an artifact, not a second button: the command itself,
   visible and copyable, in the same dark register as the terminal. */
.hero-run-real{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  margin:clamp(14px,2vh,20px) 0 0;
  max-width:min(46ch,100%);
  min-width:0;
}
.hero-run-label{opacity:.62}
.hero-cmd-note{
  font:500 11px/1.5 var(--mono,ui-monospace,monospace);
  letter-spacing:.04em;
  color:color-mix(in srgb,var(--text-primary) 62%,transparent);
}
.hero-terminal-caption{
  margin:0 2px 9px;
  font:italic 500 13.5px/1.45 var(--sans,Arial,sans-serif);
  color:color-mix(in srgb,var(--text-primary) 68%,transparent);
}
/* Hero simulation state — the same window becomes "your machine". The
   harness rail turns into an ambient environment switcher: it recolors the
   terminal frame and names the harness, never gates the run. */
.landing-hero-static[data-skin="claude"]{--sim-accent:var(--accent-soft)}
.landing-hero-static[data-skin="hermes"]{--sim-accent:var(--accent)}
.landing-hero-static[data-skin="codex"]{--sim-accent:var(--bg-inverse)}
.landing-hero-static[data-skin="kimi"]{--sim-accent:var(--accent-soft)}
.landing-hero-static[data-skin="buzz"]{--sim-accent:color-mix(in srgb,var(--bg-surface-muted) 55%,var(--text-primary))}
.landing-hero-static[data-skin="cursor"]{--sim-accent:var(--text-primary)}
.landing-hero-static[data-skin="pi"]{--sim-accent:color-mix(in srgb,var(--bg-inverse) 70%,var(--accent-soft))}
/* Two terminals on one desk. Sam's window tucks back and freezes; yours
   arrives in front as a real floating window — no exhibit mat, a deeper
   shadow, the harness accent on its frame. Click Sam's window to return. */
.terminal-stack{position:relative}
#your-terminal{position:absolute;inset:0;z-index:2}
#your-terminal[hidden]{display:none}
#your-terminal .lt-wrap{max-width:none}
#your-terminal .lt-strip{background:none;background-image:none;border:0;padding:0 0 8px;border-radius:0;box-shadow:none}
#your-terminal .lt-window{
  border:1.5px solid var(--sim-accent,var(--text-primary));
  border-radius:8px;
  box-shadow:
    0 2px 8px rgba(25,55,47,.25),
    0 22px 52px rgba(25,55,47,.38);
  transition:border-color .25s ease;
}
#your-terminal.do-arrive .lt-window{animation:your-window-arrive .42s cubic-bezier(.2,.85,.3,1.08) both}
@keyframes your-window-arrive{
  from{opacity:0;transform:translateY(30px) scale(.955)}
  to{opacity:1;transform:none}
}
/* Environment flavors for the preview window. CLI vendors keep the dark
   register on their own ground with their own accent and prompt glyph;
   chat vendors flip the window to a light app with message bubbles.
   Evocation through banner, palette, and voice — never counterfeit chrome. */
.harness-mark .term-glyph{font:800 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.02em}
[data-skin="claude"] #your-terminal .lt-window{--lt-accent:#E08053;background:#262B39}
[data-skin="claude"] #your-terminal .lt-line.ask::before{content:'\276F\00a0\00a0'}
[data-skin="codex"] #your-terminal .lt-window{--lt-accent:#9FE8C3;background:#161616}
[data-skin="cursor"] #your-terminal .lt-window{--lt-accent:#8AB4F8;background:#15171C}
[data-skin="pi"] #your-terminal .lt-window{--lt-accent:#D8C46B;background:#171F29}
[data-skin="hermes"] #your-terminal .lt-window{--lt-accent:#E0895A;background:#241D18}
[data-skin="kimi"] #your-terminal .lt-window{
  --lt-ink:#20242A;--lt-dim:rgba(32,36,42,.62);--lt-faint:rgba(32,36,42,.36);
  --lt-line:rgba(32,36,42,.12);--lt-bad:#B0442C;
  --lt-accent:#2B59E8;--lt-ok:#3E8355;
  background:#FDFCF9;
}
[data-skin="kimi"] #your-terminal .lt-line.ask{
  margin:10px 0 6px;padding:9px 12px;border-radius:9px;
  background:rgba(32,36,42,.06);color:var(--lt-ink);max-width:64ch;
}
[data-skin="kimi"] #your-terminal .lt-line.ask::before{
  content:'you';display:block;margin-bottom:3px;
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--lt-faint);
}
[data-skin="kimi"] #your-terminal .lt-line.say{
  position:relative;padding-left:16px;opacity:1;
}
[data-skin="kimi"] #your-terminal .lt-line.say::before{
  content:'';position:absolute;left:2px;top:.5em;width:8px;height:8px;
  border-radius:50%;background:var(--lt-accent);
}
[data-skin="kimi"] #your-terminal .lt-promptrow{
  margin:6px 12px 12px;border:1px solid var(--lt-line);border-radius:9px;
  background:#fff;padding:9px 12px;
}
[data-skin="kimi"] #your-terminal .lt-promptrow .lt-caret{display:none}
.is-sim #living-terminal .lt-wrap{
  transform:translate(-13px,-11px) scale(.965);
  opacity:.45;
  filter:saturate(.55);
  transition:transform .4s ease,opacity .4s ease,filter .4s ease;
  cursor:pointer;
}
.is-sim #living-terminal .lt-controls{opacity:0;pointer-events:none;transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){
  #your-terminal .lt-window{animation:none}
  .is-sim #living-terminal .lt-wrap{transition:none}
}
.hero-compatibility .harness-brand[data-simskin]{cursor:pointer;transition:background .15s ease,color .15s ease}
.hero-compatibility .harness-brand[data-simskin]:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
.hero-compatibility .harness-brand.is-active{background:var(--accent);color:var(--text-on-accent)}
.hero-compatibility .harness-brand.is-active b{color:inherit}
.hero-compatibility .harness-brand[data-simskin]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hero-terminal-caption b{font-weight:750}
.hero-terminal-caption .ta{margin-left:6px;font:700 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:inherit}
.hero-terminal-caption .ta:hover{color:var(--accent)}
.hero-run-real.is-ready .ds-command{box-shadow:0 0 0 2px var(--accent)}
.hero-run-real.is-ready .hero-run-label{color:var(--accent);opacity:1}

/* ————— the chapter spine: read, never operated. Four printed chapter
   labels; the ember rule sits under wherever the film currently is. ————— */
.hero-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 16px;margin:2px 0 22px}
.hero-chapters span{display:flex;flex-direction:column;gap:3px;padding-bottom:7px;border-bottom:2px solid color-mix(in srgb,var(--text-primary) 12%,transparent);opacity:.42;transition:opacity .35s ease,border-color .35s ease}
.hero-chapters b{font:800 9.5px/1.3 var(--font-technical);letter-spacing:.08em;white-space:nowrap}
.hero-chapters i{font:500 10.5px/1.35 var(--font-technical);font-style:normal;opacity:.72}
.hero-chapters .is-past{opacity:.62}
.hero-chapters .is-on{opacity:1;border-bottom-color:var(--accent)}
@media (max-width:960px){
  .hero-chapters{grid-template-columns:1fr 1fr}
  .hero-chapters b{white-space:normal}
}

/* Sam's tucked window is live glass — one small tab says so. The tab is
   drawn on the host (not the wrap) so it dodges the wrap's fade/transform,
   and it rises from her visible top edge like a file-folder cut. */
.is-sim #living-terminal{position:relative}
.is-sim #living-terminal::after{
  content:'↺ SAM’S WINDOW';
  position:absolute;top:-27px;left:-13px;z-index:3;cursor:pointer;
  padding:5px 11px 7px;border-radius:7px 7px 0 0;
  background:var(--text-primary);color:var(--text-primary);
  font:800 8.5px/1 var(--font-technical);letter-spacing:.09em;
}
.is-sim #living-terminal .lt-wrap:hover{opacity:.75;filter:saturate(.8)}

/* ————— the anatomy loupe: vocabulary in the rail, magnified proof on the
   trace. One highlighter color for every term; a tap enlarges its atoms in
   place and dims the rest of the ledger — optics, not ornament. ————— */
/* Terms are pressable, so they wear the site's click grammar — underline +
   the loupe glyph — never the marigold emphasis highlighter. */
.lens-term{border:0;margin:0;padding:1px 3px 2px;border-radius:4px;
  background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;
  text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);
  text-decoration-thickness:2px;text-underline-offset:3.5px;
  transition:background .15s ease,color .15s ease,text-decoration-color .15s ease}
.lens-term::after{content:'⌕';margin-left:2px;font-size:.82em;color:var(--accent);opacity:.65}
.lens-term:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);text-decoration-color:var(--accent)}
.lens-term:hover::after{opacity:1}
.lens-term.is-active{background:var(--text-primary);color:var(--text-primary);text-decoration:none}
.lens-term.is-active::after{color:var(--accent-soft);opacity:1}
.trace-key{display:block;font:700 8.5px/1.5 var(--font-technical);letter-spacing:.06em;opacity:.55;margin-top:2px}
.trace-ledger .trace-ledger-head,.trace-ledger .trace-foot,.trace-ledger .trace-row>*{transition:opacity .28s ease}
.trace-ledger.is-lens :is(.trace-ledger-head,.trace-foot){opacity:.2}
.trace-ledger.is-lens .trace-row>*{opacity:.2}
.trace-ledger.is-lens .trace-row>*:has(.lens-hit),
.trace-ledger.is-lens .trace-row>.lens-hit,
.trace-ledger.is-lens .trace-row.lens-hit>*{opacity:1}
[data-atom]{transition:transform .28s ease,box-shadow .28s ease}
.lens-hit{position:relative;z-index:2;transform:scale(1.26);transform-origin:left center;
  background:var(--bg-paper);border-radius:7px;
  box-shadow:0 0 0 2px var(--accent),0 12px 30px rgba(25,55,47,.2)}
.trace-tool.lens-hit{padding:6px 10px;margin:-6px -10px}
em.trace-blank.lens-hit{padding:2px 7px;font-style:italic}
i.trace-key.lens-hit{display:inline-block;padding:3px 7px;opacity:1;margin-top:4px}
.trace-row.trace-correction.lens-hit{transform:scale(1.02);transform-origin:center;padding-inline:18px}
.recipe-stat span[data-atom="tokens"].lens-hit{display:inline-block;padding:2px 7px;transform:scale(1.18)}
/* receipt chips carry ranges now (@1–7): grow them gently and give them
   room so neighbours never paint over a chip's tail; chips in the mint
   column grow leftward so the ledger edge never clips them */
.trace-chip.lens-hit{transform:scale(1.1);margin-inline:5px}
.trace-mint .trace-chip.lens-hit{transform-origin:right center;margin-inline:0}
@media (prefers-reduced-motion:reduce){.lens-hit,[data-atom]{transition:none;transform:none!important}}

/* Recipe stage — the trace as a relay of receipts. A chip is minted in one
   row and spent in a later one; that visible handoff is the dependency
   story, no graph vocabulary required. */
.recipe-stage{
  display:grid;
  grid-template-columns:minmax(250px,.54fr) minmax(0,1.46fr);
  column-gap:clamp(20px,2.6vw,38px);
  align-items:start;
  padding-block:clamp(52px,8vh,92px);
}
.recipe-rail{max-width:44ch}
.recipe-rail .landing-section-title{margin-bottom:clamp(14px,2vh,20px)}
.recipe-dek{margin:0;font-size:16.5px;line-height:1.55}
.trace-ledger-head{display:flex;justify-content:space-between;gap:2ch;flex-wrap:wrap;padding:12px 18px;border-bottom:1.5px solid var(--text-primary)}
.trace-hint{opacity:.5}
.trace-row{display:grid;grid-template-columns:3.5ch minmax(11ch,15ch) minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 18px;border-top:1px dashed color-mix(in srgb,var(--text-primary) 30%,transparent)}
.trace-row:nth-of-type(2){border-top:0}
.trace-num{font-size:11.5px;color:color-mix(in srgb,var(--text-primary) 45%,transparent)}
.trace-tool{font:750 15.5px/1.3 var(--font-editorial)}
.trace-verb{font:500 15px/1.6 var(--font-editorial)}
.trace-blank{font-style:italic;opacity:.8;border-bottom:1px dashed color-mix(in srgb,var(--text-primary) 45%,transparent)}
.trace-mint{display:inline-flex;align-items:center;gap:8px;justify-self:end}
.trace-mint>i{font-style:normal;color:color-mix(in srgb,var(--text-primary) 45%,transparent)}
.trace-chip{display:inline-flex;align-items:center;gap:5px;padding:4.5px 10px;border:1px solid color-mix(in srgb,var(--text-primary) 40%,transparent);border-radius:999px;background:color-mix(in srgb,var(--chipc,var(--bg-paper)) 34%,var(--bg-paper));color:var(--text-primary);font:600 11.5px/1 var(--font-technical);letter-spacing:.02em;cursor:pointer;transition:background .15s ease,box-shadow .15s ease;vertical-align:middle}
.trace-chip i{font-style:normal;font-weight:800}
.trace-chip[data-chip="1"]{--chipc:var(--accent-soft)}
.trace-chip[data-chip="8"]{--chipc:var(--bg-surface-muted)}
.trace-chip[data-chip="9"]{--chipc:var(--accent-soft)}
.trace-chip[data-chip="12"]{--chipc:var(--accent)}
.trace-chip[data-chip="13"]{--chipc:var(--bg-inverse)}
.trace-chip.is-lit,.trace-chip.is-pinned{background:color-mix(in srgb,var(--chipc,var(--accent)) 58%,var(--bg-paper));box-shadow:0 0 0 2px var(--accent)}
.trace-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trace-cred{display:block;margin-top:3px;font:600 10px/1.2 var(--font-technical);letter-spacing:.05em;color:color-mix(in srgb,var(--text-primary) 52%,transparent)}
.trace-guard{display:inline-block;margin-left:8px;padding:3px 7px;border:1px solid var(--accent);border-radius:3px;font:700 9.5px/1.2 var(--font-technical);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);vertical-align:middle}
.trace-correction{border-top:1.5px dashed color-mix(in srgb,var(--accent) 70%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.trace-correction .trace-num{color:var(--accent);font-weight:800}
.trace-correction .trace-verb{font-size:14.5px;line-height:1.55}
.trace-chip-fixed{--chipc:var(--bg-surface-muted);cursor:default;border-color:color-mix(in srgb,var(--lt-ok,#3E8355) 60%,var(--text-primary))}
.trace-chip-fixed i{color:#3E8355}
.trace-foot{padding:15px 18px;border-top:1.5px solid var(--text-primary);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px 24px;align-items:center}
.trace-foot p{margin:0;font:500 14.5px/1.55 var(--font-editorial)}
.trace-foot .replay-uri{justify-self:end}
.recipe-drift-main{margin:clamp(18px,3vh,26px) 0 0;font:500 15.5px/1.6 var(--font-editorial)}
.recipe-stat{margin:12px 0 0;font:500 13.5px/1.5 var(--font-editorial);color:color-mix(in srgb,var(--text-primary) 75%,transparent)}
.recipe-stat b{color:var(--text-primary)}
@media (max-width:960px){
  .recipe-stage{grid-template-columns:1fr;row-gap:24px}
  .recipe-rail{max-width:61ch}
}
@media (max-width:820px){
  .trace-row{grid-template-columns:3.5ch minmax(0,1fr);row-gap:7px}
  .trace-tool{grid-column:2}
  .trace-verb{grid-column:2;line-height:1.75}
  .trace-mint{grid-column:2;justify-self:start}
  .trace-foot{grid-template-columns:1fr}
  .trace-foot .replay-uri{justify-self:start}
}

/* Breadth reel — the hero terminal's younger sibling. Small, quiet, no
   sound: the same ritual making a play in four rooms. Sales and marketing
   compose in a warm workspace; devops and ai in the terminal. The room is
   part of the argument. */
.breadth-stage .breadth-heading p{max-width:56ch}
.breadth-rail{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:clamp(18px,3vh,26px) 0 14px}
.breadth-chips{display:flex;gap:7px;flex-wrap:wrap}
.breadth-chip{padding:8px 13px;border:1px solid color-mix(in srgb,var(--text-primary) 28%,transparent);background:var(--bg-paper);color:var(--text-primary);font:700 11px/1 var(--font-technical);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background .15s ease,color .15s ease}
.breadth-chip:hover:not(.is-active){border-color:var(--text-primary)}
.breadth-chip.is-active{background:var(--text-primary);color:var(--text-primary);border-color:var(--text-primary)}
.breadth-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.breadth-live{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:clamp(18px,2.5vw,34px);align-items:start}
.breadth-theater .lt-wrap{max-width:none}
.breadth-theater .lt-strip{background:none;background-image:none;border:0;padding:0;box-shadow:none;border-radius:0}
.breadth-theater .lt-window{box-shadow:0 2px 6px rgba(25,55,47,.18),0 14px 34px rgba(25,55,47,.22)}
.breadth-theater .lt-body{height:min(300px,40vh);font-size:13px}
.breadth-theater .lt-controls{display:none}
.breadth-theater .lt-statusbar{font-size:10.5px}
/* The workspace room: warm paper, soft rows, a message box — the same
   script, dressed for people who never open a terminal. */
[data-surface="workspace"] .breadth-theater .lt-window{
  --lt-ink:#2A2C26;--lt-dim:rgba(42,44,38,.62);--lt-faint:rgba(42,44,38,.36);
  --lt-line:rgba(42,44,38,.11);--lt-accent:#C0653F;--lt-ok:#3E8355;--lt-bad:#B0442C;
  background:#FBF8F3;border-radius:13px;
}
[data-surface="workspace"] .breadth-theater .lt-line.ask{
  margin:10px 0 7px;padding:10px 13px;border-radius:10px;
  background:rgba(42,44,38,.055);color:var(--lt-ink);max-width:58ch;
}
[data-surface="workspace"] .breadth-theater .lt-line.ask::before{
  content:'you';display:block;margin-bottom:3px;
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--lt-faint);
}
[data-surface="workspace"] .breadth-theater .lt-line.say{position:relative;padding-left:16px;opacity:1}
[data-surface="workspace"] .breadth-theater .lt-line.say::before{
  content:'';position:absolute;left:2px;top:.5em;width:8px;height:8px;
  border-radius:50%;background:var(--lt-accent);
}
[data-surface="workspace"] .breadth-theater .lt-promptrow{
  margin:6px 12px 12px;border:1px solid var(--lt-line);border-radius:11px;
  background:#fff;padding:10px 13px;
}
[data-surface="workspace"] .breadth-theater .lt-promptrow .lt-caret{display:none}
/* The mint: an empty slot while the run works, a real catalog card when
   the save lands. */
.breadth-mint{display:grid;gap:10px}
.breadth-mint-label{opacity:.6}
.breadth-mint-slot{min-height:250px;display:grid;place-items:center;border:1.5px dashed color-mix(in srgb,var(--text-primary) 35%,transparent);padding:14px}
.breadth-mint-ghost{font:600 11px/1 var(--font-technical);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--text-primary) 45%,transparent)}
.breadth-mint-slot.is-minted{border-style:solid;border-color:var(--text-primary)}
.breadth-mint-card{display:block;width:min(100%,240px);opacity:0;transform:translateY(8px) scale(.98);transition:opacity .35s ease,transform .35s ease}
.is-minted .breadth-mint-card{opacity:1;transform:none}
.breadth-mint-card .play-cover{width:100%}
/* The cover was set for shelf sizes; at mint-slot width the display type
   has to come down or it clips its own name. */
.breadth-mint-card .cover-title{font-size:19px;max-width:none}
.breadth-mint-card .cover-top,.breadth-mint-card .cover-foot{font-size:7.5px}
/* Stable geometry: the reel and the mint never change the section's height.
   Both rooms share one window footprint, the slot and the control reserve
   their space, so nothing below the section ever moves. */
.breadth-theater .lt-promptrow{margin:6px 12px 12px;padding:10px 13px;min-height:42px;box-sizing:border-box}
[data-surface="terminal"] .breadth-theater .lt-promptrow{border-top:0}
.breadth-mint-slot{min-height:300px}
.breadth-mint-card{width:min(100%,210px)}
.breadth-mint-ctl{display:grid;gap:8px;margin-top:12px;min-height:72px;visibility:hidden}
.breadth-mint-ctl.is-on{visibility:visible}
.mint-ctl-meta{opacity:.5;text-align:center}
.breadth-action{margin-top:clamp(18px,3vh,26px)}
@media (prefers-reduced-motion:reduce){
  .breadth-mint-card{opacity:1;transform:none;transition:none}
}
@media (max-width:960px){
  .breadth-live{grid-template-columns:1fr}
  .breadth-mint-slot{min-height:0;padding:18px}
  .breadth-theater .lt-body{height:min(260px,38vh)}
}

/* Dividend stage — the handover economics, printed. Same spine as the
   trace: argument in the rail, evidence in the artifact column. Named
   dividend-* (not instrument-*): the profile page owns .instrument-stage
   with entirely different children, and the two must never collide again. */
.dividend-stage{
  display:grid;
  grid-template-columns:minmax(250px,.54fr) minmax(0,1.46fr);
  column-gap:clamp(20px,2.6vw,38px);
  align-items:start;
  padding-block:clamp(52px,8vh,92px);
}
.dividend-rail{max-width:44ch}
.dividend-rail .landing-section-title{margin-bottom:clamp(14px,2vh,20px)}
.dividend-dek{margin:0;font-size:16.5px;line-height:1.55}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:2ch;padding:12px 18px;border-bottom:1.5px solid var(--text-primary)}
.sheet-tag{flex:0 0 auto;padding:3px 7px;border:1px solid var(--accent);border-radius:3px;font:700 8.5px/1 var(--font-technical);letter-spacing:.12em;color:var(--accent)}
/* The dividend, poster-set on a soft field: no frame, no rules, no nested
   boxes — one flat rounded surface, filled chips, three display lines an
   executive reads in three seconds. Panel left, rail right: the spread
   alternates sides down the page. */
.dividend-stage{grid-template-columns:minmax(0,1.42fr) minmax(250px,.58fr)}
.dividend-rail{order:2}
.dividend-poster{
  order:1;
  background:color-mix(in srgb,var(--bg-surface-muted) 42%,var(--bg-paper));
  border-radius:18px;
  padding:clamp(22px,3vh,32px) clamp(22px,3vw,40px) clamp(20px,3vh,28px);
}
.poster-head{display:flex;justify-content:space-between;align-items:baseline;gap:2ch;margin-bottom:clamp(18px,3vh,30px)}
.poster-eg{color:color-mix(in srgb,var(--text-primary) 42%,transparent)}
.poster-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:clamp(16px,2.6vh,26px)}
.poster-flow i{font-style:normal;color:color-mix(in srgb,var(--text-primary) 40%,transparent)}
.poster-chip{padding:8px 12px;border-radius:7px;background:var(--bg-paper);font:700 10px/1.2 var(--font-technical);letter-spacing:.08em;color:var(--text-primary)}
.poster-chip.is-play{background:var(--accent);color:#fffaf4}
.poster-lines{display:grid;gap:8px;padding:0 clamp(4px,1.5vw,20px);font:750 clamp(25px,2.7vw,42px)/1.1 var(--font-editorial);letter-spacing:-.025em}
.poster-lines b{font-weight:850}
.poster-lines .is-ember{color:var(--accent)}
.poster-foot{margin-top:clamp(18px,3vh,28px);color:color-mix(in srgb,var(--text-primary) 48%,transparent)}
@media (max-width:960px){
  .dividend-stage{grid-template-columns:1fr;row-gap:24px}
  .dividend-rail{order:1;max-width:61ch}
  .dividend-poster{order:2}
  .poster-lines{font-size:clamp(24px,6.4vw,34px)}
}

/* ————— Landing aesthetic pass (parallel.ai study) —————
   White ground. Panels are soft greige fields — no frames, no offset
   shadows, no nested rules. Sections separate with a single top hairline
   and generous air; a thin vertical hairline stands between each rail and
   its panel. Chips are filled, never outlined. */
.landing-page .pnl{background-color:transparent;background-image:none}
.landing-page .landing-section{border-top:1px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
@media (min-width:961px){
  .recipe-rail{border-right:1px solid var(--border-subtle);padding-right:clamp(20px,2.4vw,36px)}
  .dividend-rail{border-left:1px solid var(--border-subtle);padding-left:clamp(20px,2.4vw,36px)}
}
.trace-ledger-head{border-bottom:0;padding:18px 22px 4px}
.trace-row{border-top:1px solid color-mix(in srgb,var(--text-primary) 8%,transparent);padding-left:22px;padding-right:22px}
.trace-row:nth-of-type(2){border-top:0}
.trace-chip{border:0}
.trace-guard{border:0;background:color-mix(in srgb,var(--accent) 14%,var(--bg-paper))}
.trace-correction{border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.trace-foot{border-top:1px solid color-mix(in srgb,var(--text-primary) 10%,transparent);padding:16px 22px}
.breadth-chip{border:0;background:var(--bg-field)}
.breadth-chip:hover:not(.is-active){border:0;background:color-mix(in srgb,var(--text-primary) 10%,var(--bg-field))}
.breadth-chip.is-active{border:0;background:var(--text-primary)}
.breadth-mint-slot{border:0;background:var(--bg-field);border-radius:16px}
.breadth-mint-slot.is-minted{border:0}
.hero-terminal .lt-strip{border:0;background-image:none;background-color:var(--bg-field);box-shadow:0 12px 34px rgba(25,55,47,.10)}
.dividend-poster{background:var(--bg-field)}
.poster-chip{background:var(--bg-page)}
/* ————— end aesthetic pass ————— */

/* The closing spread: question in the rail, the one command as the final
   artifact — largest chip on the page, ember copy, quiet exits beneath. */
.closing-stage{
  display:grid;
  grid-template-columns:minmax(250px,.54fr) minmax(0,1.46fr);
  column-gap:clamp(20px,2.6vw,38px);
  align-items:center;
  padding-block:clamp(64px,10vh,110px);
}
.closing-rail .landing-section-title{margin-bottom:clamp(14px,2vh,20px)}
.closing-dek{margin:0;font-size:16.5px;line-height:1.55;max-width:44ch}
.closing-action{display:grid;gap:12px;justify-items:start}
@media (min-width:961px){
  .closing-action{border-left:1px solid var(--border-subtle);padding-left:clamp(24px,3vw,44px)}
}
.closing-cmd-note{opacity:.55}
.closing-links{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}
.closing-links a,.closing-links .ta{
  font:700 10.5px/1 var(--font-technical);letter-spacing:.07em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px;color:inherit;cursor:pointer;
}
.closing-links a:hover,.closing-links .ta:hover{color:var(--accent)}
@media (max-width:960px){
  .closing-stage{grid-template-columns:1fr;row-gap:26px}
  .closing-action{justify-items:stretch}
}

.hero-next-cue button{
  padding:6px 2px;
  font:700 10.5px/1 var(--mono,ui-monospace,monospace);
  letter-spacing:.1em;
  color:color-mix(in srgb,var(--text-primary) 58%,transparent);
  cursor:pointer;
}
.hero-next-cue button:hover,.hero-next-cue button:focus-visible{color:var(--accent)}
.hero-next-cue{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:30px;
  padding:4px clamp(12px,1.4vw,22px) 8px 0;
}

@media (min-width:961px){
  /* The opening panel is one composed screen. Its height is budgeted against
     the sticky masthead; scrollback, not the page, absorbs short viewports. */
  .landing-page{padding-top:8px}
  .landing-hero-static{
    min-height:0;
    height:calc(100svh - 61px);
    max-height:calc(100svh - 61px);
    overflow:hidden!important;
  }
  .hero-compatibility{margin-top:7px}
  .hero-compatibility-label,
  .hero-compatibility .harness-brand{min-height:52px}
  .hero-compatibility-label{gap:4px}
  .hero-compatibility .harness-brand{padding:7px 9px;gap:7px}
  .hero-compatibility .harness-mark{width:22px;height:22px}
  .hero-compatibility .harness-mark svg{width:19px;height:19px}
  .hero-compatibility .agent-letter{width:20px;height:20px;font-size:10.5px}
  .hero-compatibility .harness-brand b{font-size:11px}
}

@media (min-width:961px) and (max-height:850px){
  .landing-hero-static{padding-top:8px;padding-bottom:8px}
  .hero-fold{padding:5px 0;column-gap:clamp(22px,2.6vw,44px)}
  .landing-hero-static .hero-h1{font-size:clamp(34px,2.95vw,44px)}
  .hero-kicker{margin-bottom:9px;font-size:10px}
  .landing-hero-static .hero-dek{margin-top:12px;font-size:14.5px;line-height:1.42}
  .hero-terminal .lt-strip{padding:9px 11px}
  .hero-terminal .lt-titlebar{height:28px}
  .hero-terminal .lt-title{font-size:11px}
  .hero-terminal .lt-dots{gap:5px}
  .hero-terminal .lt-dots i{width:8px;height:8px}
  .hero-terminal .lt-body{
    height:clamp(230px,44svh,350px);
    padding:10px 14px 28px;
    font-size:13.5px;
    line-height:1.5;
  }
  .hero-terminal .lt-line{min-height:1.5em}
  .hero-terminal .lt-promptrow{padding:6px 14px;font-size:13px}
  .hero-terminal .lt-statusbar{padding:4px 14px;font-size:10.5px}
  .hero-terminal .lt-controls{margin-top:4px;gap:11px}
  .hero-terminal .lt-controls button{padding:4px 2px;font-size:11px}
  .hero-terminal .lt-controls [data-lt="sound"]{padding:5px 8px}
  .hero-terminal-action{margin-top:12px}
  .hero-terminal-action .btn{min-height:37px;padding:10px 13px;font-size:11px}
  .hero-run-real{margin-top:10px;gap:5px}
  .hero-cmd-note{font-size:10px}
  .hero-terminal-caption{font-size:12.5px;margin-bottom:6px}
}

@media (max-width:960px){
  .landing-hero-static{min-height:auto;padding:17px 16px 26px}
  .hero-fold{display:grid;grid-template-columns:1fr;gap:25px;padding:27px 0 22px}
  .landing-hero-static .hero-h1{max-width:100%;font-size:clamp(40px,11.4vw,54px)}
  .landing-hero-static .hero-h1 span{white-space:normal}
  .landing-hero-static .hero-dek{max-width:61ch;font-size:16px;line-height:1.47}
  .hero-terminal .lt-strip{padding:8px;border-radius:8px;box-shadow:5px 6px 0 color-mix(in srgb,var(--text-primary) 11%,transparent)}
  .hero-terminal .lt-body{height:clamp(310px,48dvh,440px);font-size:13.5px;padding:12px 11px 34px}
  .hero-terminal .lt-title{font-size:11px}
  .hero-terminal .lt-dots{gap:5px}.hero-terminal .lt-dots i{width:8px;height:8px}
  .hero-terminal .lt-promptrow,.hero-terminal .lt-statusbar{padding-left:11px;padding-right:11px}
  .hero-terminal .lt-statusbar{font-size:10px}
  .hero-terminal .lt-controls{gap:11px}
  .hero-terminal-action{margin-top:21px}
  .hero-terminal-action,.hero-terminal-action .btn{width:100%}
  .hero-terminal-action .btn{justify-content:center;text-align:center;white-space:normal}
  .hero-run-real{max-width:none}
  .hero-next-cue{padding:8px 10px 2px 0}
}

/* ————— play detail: the preview runs in the fold — landing grammar.
   Copy left, terminal right; the cover is demoted to a receipt below. ————— */
.play-page .play-hero-live{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
.play-hero-live h1{font-size:clamp(40px,4.6vw,72px)}
.play-hero-stage{display:flex;flex-direction:column;gap:10px;min-width:0}
/* the slot is pre-reserved so the mount neither jumps the page nor
   starves the IntersectionObserver (a 0-height target never intersects) */
.play-hero-stage #play-terminal{min-height:calc(min(400px,50vh) + 150px + 2*clamp(16px,4vw,44px))}
.play-hero-stage .lt-body{height:min(400px,50vh);font-size:13px}
.play-hero-stage .stage-note{opacity:.55}
.record-cover{max-width:180px;margin:0 0 18px}
/* receipt scale: the sleeve shrinks, so its type must too */
.record-cover .cover-title{font-size:15px}
.record-cover .cover-top,.record-cover .cover-foot{font-size:5.5px}
.record-cover .cover-activity-meta{font-size:5.5px}
@media (max-width:960px){
  .play-page .play-hero-live{grid-template-columns:minmax(0,1fr)}
  .play-hero-copy{min-width:0}
  .play-hero-stage #play-terminal{min-height:calc(min(360px,46vh) + 150px + 2*clamp(16px,4vw,44px))}
  .play-hero-stage .lt-body{height:min(360px,46vh)}
}
@media (max-width:640px){
  .play-hero-stage #play-terminal{min-height:calc(min(330px,44vh) + 166px + 2*clamp(16px,4vw,44px))}
  .play-hero-stage .lt-body{height:min(330px,44vh)}
}
.result-full{margin-top:26px;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.result-full>summary{list-style:none;cursor:pointer;padding:15px 2px;display:flex;justify-content:space-between;gap:2ch;align-items:center}
.result-full>summary::-webkit-details-marker{display:none}
.result-full>summary span{display:flex;flex-direction:column}
.result-full>summary b{font-size:16px}
.result-full>summary small{font:500 12px/1.5 var(--font-technical);opacity:.6}
.result-full>summary i{font:400 26px/1 var(--font-editorial);font-style:normal;transition:transform .18s}
.result-full[open]>summary i{transform:rotate(45deg)}
.result-full>.result-sheet{margin-bottom:18px}

/* ————— hello-first fold: the glass idles as its own poster ————— */
.hero-poster{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:10px;padding:13px 24px;border:0;border-radius:999px;
  background:var(--text-primary);color:var(--text-primary);font:800 12px/1 var(--font-technical);letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;box-shadow:0 12px 30px rgba(25,55,47,.38)}
.hero-poster i{font-style:normal;font-size:14px;color:var(--accent-soft)}
.hero-poster:hover{background:color-mix(in srgb,var(--text-primary) 88%,var(--accent-soft))}
.hero-poster:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero-cmd-note a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.harness-still{cursor:default}

/* ————— Sam's film, re-homed one section down ————— */
.sam-stage{display:grid;grid-template-columns:minmax(250px,.52fr) minmax(0,1.48fr);
  column-gap:clamp(20px,2.6vw,38px);align-items:start;padding-block:clamp(52px,8vh,92px)}
.sam-rail{max-width:44ch}
.sam-dek{margin:0;font-size:16.5px;line-height:1.55}
.sam-note{display:block;opacity:.55;margin-top:14px}
.sam-theater #sam-terminal{min-height:calc(min(430px,52vh) + 150px + 2*clamp(16px,4vw,44px))}
.sam-theater .lt-body{height:min(430px,52vh);font-size:13.5px}
@media (max-width:960px){
  .sam-stage{grid-template-columns:1fr;row-gap:22px}
  .sam-theater .lt-body{height:min(360px,46vh)}
}

/* the weather card is the film's finale: let it print at full width */
.hero-terminal .lt-card,.sam-theater .lt-card{max-width:78ch}
.hero-terminal .lt-card span:empty{min-height:.7em}

/* tree card: the terminal's own dialect — no frame, monospace branches */
.lt-card.tree{border:0;background:transparent;padding:4px 0 4px 1ch;margin:8px 0 8px 1ch;max-width:none}
.lt-card.tree b{font-size:13px;letter-spacing:.06em;color:var(--lt-ink)}
.lt-card.tree span{color:var(--lt-dim);white-space:pre;font-size:13px;line-height:1.7}
.lt-card.tree span.warm{color:var(--lt-accent)}
.lt-card.tree span.good{color:var(--lt-ok)}
/* a light comment over a command — the terminal's own teaching voice */
.lt-line.rem{color:var(--lt-faint);margin-top:7px}

/* ————— video-grammar transport: bar on top, controls under it on the left,
   like every player people already know. ————— */
.lt-controls{flex-wrap:wrap;gap:0 6px;margin-top:8px}
.lt-progress{flex:0 0 100%;order:-1;margin-bottom:9px}
.lt-controls button{font-size:15px;padding:4px 8px;line-height:1}
.lt-controls [data-lt="sound"]{border:0;padding:4px 8px;background:none}
.lt-controls [data-lt="sound"][aria-pressed="true"]{background:none;color:var(--lt-accent, var(--accent))}
.lt-time{font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.05em;color:rgba(25,55,47,.55);margin-left:6px}

/* the hero statusbar was dead text — the film needs no caption rail */
.hero-terminal .lt-statusbar{display:none}

/* ————— transport inside the glass, the way video players do it: dark chrome,
   round glass buttons, pill time, accent progress. Works on light skins too
   via currentColor mixes. ————— */
.lt-window .lt-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0;padding:9px 14px 12px;border-top:1px solid var(--lt-line)}
.lt-window .lt-progress{flex:0 0 100%;order:-1;height:3px;margin:0 0 9px;
  background:color-mix(in srgb,var(--lt-ink) 22%,transparent);border-radius:2px}
.lt-window .lt-progress i{background:var(--lt-accent)}
.lt-window .lt-progress u{background:color-mix(in srgb,var(--lt-ink) 55%,transparent);top:-2px;bottom:-2px}
.lt-window .lt-progress:hover{height:5px;margin-block:-1px 8px}
.lt-window .lt-controls button{width:36px;height:36px;padding:0;border:0;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;
  color:var(--lt-ink);background:color-mix(in srgb,var(--lt-ink) 14%,transparent)}
.lt-window .lt-controls button:hover{background:color-mix(in srgb,var(--lt-ink) 26%,transparent);color:var(--lt-ink)}
.lt-window .lt-controls button:focus-visible{outline:2px solid var(--lt-accent);outline-offset:2px}
.lt-window .lt-controls [data-lt="sound"]{border:0}
.lt-window .lt-controls [data-lt="sound"][aria-pressed="true"]{background:var(--lt-accent);color:var(--lt-paper,#fffaf4)}
.lt-window .lt-time{font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;
  color:var(--lt-ink);background:color-mix(in srgb,var(--lt-ink) 12%,transparent);
  border-radius:999px;padding:10px 14px;margin-left:2px}

/* phone: pre-formatted tree lines shrink instead of clipping; anything still
   wider scrolls inside the glass, never the page */
.lt-body{overflow-x:auto}
@media (max-width:700px){
  .lt-card.tree b{font-size:11px}
  .lt-card.tree span{font-size:10.5px;line-height:1.7}
  .lt-window .lt-controls{gap:0 8px;padding:8px 10px 10px}
  .lt-window .lt-controls button{width:32px;height:32px;font-size:13px}
  .lt-window .lt-time{padding:8px 10px;font-size:11px}
}