/* opus5-update — the cutting room.
   One hard projector light, felt bench, paper documents, a reel of film running past,
   and a grease pencil that takes lines out. Mobile is designed, not collapsed. */

:root{
  --felt:        oklch(0.25 0.045 158);
  --felt-deep:   oklch(0.175 0.035 158);
  --felt-lift:   oklch(0.31 0.05 158);
  --felt-edge:   oklch(0.40 0.045 158);
  --paper:       oklch(0.945 0.012 95);
  --paper-warm:  oklch(0.90 0.02 92);
  --paper-dim:   oklch(0.88 0.018 150);
  --ink:         oklch(0.21 0.03 152);
  --ink-dim:     oklch(0.45 0.03 152);

  --flame:            oklch(0.66 0.20 34);   /* the grease pencil */
  --flame-on-paper:   oklch(0.52 0.19 30);   /* same hue, readable on paper */
  --flame-on-felt:    oklch(0.76 0.16 38);   /* same hue, readable on felt */

  --display: "Martian Mono", ui-monospace, monospace;
  --text: "Archivo", system-ui, sans-serif;

  --ease-out-quart: cubic-bezier(0.23, 1, 0.32, 1);

  --reel-w: 62px;
  --gutter: clamp(20px, 5vw, 80px);
  --pad-x: calc(var(--reel-w) + clamp(24px, 4vw, 72px));
  --rhythm: clamp(64px, 12vh, 150px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--felt);color:var(--paper);
  font-family:var(--text);font-size:clamp(16px, 1rem + 0.15vw, 18px);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `overflow: hidden` on an ancestor kills position:sticky,
     and the pinned scenes depend on it */
  overflow-x:clip;
}
a{color:inherit}
code{font-family:var(--display);font-weight:400}
h1,h2,h3{font-family:var(--display);letter-spacing:-0.035em;text-wrap:balance;margin:0}

:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:1px}
.doc :focus-visible,.install :focus-visible{outline-color:var(--flame-on-paper)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:90;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:.8rem;padding:12px 18px;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

/* ── the room: beam, dust, grain ──────────────────────────────────────────── */
.room{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.beam{
  position:absolute;inset:-20% -10% auto -10%;height:150vh;
  background:
    radial-gradient(60% 42% at 68% 0%, oklch(0.72 0.09 92 / .30), transparent 70%),
    conic-gradient(from 190deg at 72% -8%, transparent 40%, oklch(0.66 0.07 96 / .14) 50%, transparent 60%);
}
.dust{
  position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 22% 18%, oklch(0.92 0.03 95 / .45), transparent),
    radial-gradient(1.4px 1.4px at 68% 32%, oklch(0.92 0.03 95 / .35), transparent),
    radial-gradient(1.8px 1.8px at 43% 62%, oklch(0.92 0.03 95 / .30), transparent),
    radial-gradient(1.2px 1.2px at 81% 74%, oklch(0.92 0.03 95 / .40), transparent),
    radial-gradient(1.5px 1.5px at 12% 84%, oklch(0.92 0.03 95 / .28), transparent);
}
body::after{  /* grain, fixed layer, never on a scrolling container */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.05;
  /* 90px tile at two octaves: feTurbulence is rasterised once, and a smaller,
     simpler tile is the difference between a smooth first paint and a stall */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='90' height='90' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: no-preference){
  /* a projector gate never holds perfectly steady — 2% flicker, nothing more */
  .beam{animation:gate 5.5s steps(24, end) infinite}
  .dust{animation:drift 26s linear infinite}
  @keyframes gate{0%,100%{opacity:1}45%{opacity:.965}72%{opacity:.985}}
  @keyframes drift{to{transform:translate3d(0,-38px,0)}}
}

/* ── the reel: crosses every section boundary, tilted in 3D ───────────────── */
.reel{
  position:fixed;top:0;bottom:0;left:clamp(10px,4vw,72px);width:var(--reel-w);z-index:1;
  perspective:900px;pointer-events:none;
}
.reel-inner{
  position:absolute;inset:-10% 0;
  transform:rotateY(14deg) rotateZ(-.6deg);
  transform-origin:left center;
  background:
    repeating-linear-gradient(to bottom, transparent 0 15px, oklch(0.12 0.025 158) 15px 37px, transparent 37px 52px) left 9px top 0 / 13px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 15px, oklch(0.12 0.025 158) 15px 37px, transparent 37px 52px) right 9px top 0 / 13px 100% no-repeat,
    linear-gradient(to right, oklch(0.16 0.03 158), oklch(0.21 0.035 158) 55%, oklch(0.145 0.03 158));
  border-inline:1px solid oklch(0.42 0.045 158 / .55);
  box-shadow:14px 0 44px oklch(0.10 0.02 158 / .55);
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .reel-inner{animation:reel-run linear both;animation-timeline:scroll(root block)}
    @keyframes reel-run{to{background-position-y:-1560px,-1560px,0}}
  }
}

main{position:relative;z-index:2}

/* ── scenes ───────────────────────────────────────────────────────────────── */
.scene{padding:var(--rhythm) var(--gutter) var(--rhythm) var(--pad-x)}
h2{font-size:clamp(1.6rem,3.4vw,2.7rem);font-weight:700;line-height:1.08;max-width:20ch}
.lede{font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--paper-dim);max-width:60ch;margin:18px 0 0;text-wrap:pretty}
p{text-wrap:pretty}

/* Reveals enhance an already-visible default: only the .js class hides them. */
.js .reveal{opacity:0;clip-path:inset(0 0 22% 0)}
.js .reveal.is-in{opacity:1;clip-path:inset(0 0 0 0);transition:opacity 560ms var(--ease-out-quart),clip-path 700ms var(--ease-out-quart)}
.js .reveal[data-reveal="head"].is-in{transition-duration:440ms,560ms}
.js .reveal[data-reveal="panel"]{opacity:0;transform:translateY(14px) scale(.985);clip-path:none}
.js .reveal[data-reveal="panel"].is-in{opacity:1;transform:none;transition:opacity 480ms var(--ease-out-quart),transform 620ms var(--ease-out-quart)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{clip-path:none;transform:none}
  .js .reveal.is-in{transition:opacity 260ms ease}
}

/* ── 1 · slate ────────────────────────────────────────────────────────────── */
/* rows: slate / hero / meter — hero takes the slack so the frame breathes without a hole */
.scene--slate{min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(20px,3vh,40px);padding-top:clamp(22px,4vh,44px);padding-bottom:clamp(28px,5vh,60px)}
.scene--slate .hero{align-content:center}
.slate{
  display:flex;gap:clamp(12px,2.5vw,30px);align-items:baseline;flex-wrap:wrap;
  font-family:var(--display);font-size:clamp(10px,1.4vw,11.5px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-dim);
  border-bottom:1px solid oklch(0.42 0.045 158 / .5);padding-bottom:14px;
}
.slate b{color:var(--paper);font-weight:700}
.slate-take{color:var(--flame-on-felt)}
.slate a{margin-left:auto;text-decoration:none;border-bottom:1px solid oklch(0.88 0.018 150 / .45);padding-bottom:2px}

.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(24px,4vw,68px);align-items:center}
.hero-title{
  font-size:clamp(2.4rem, 6.6vw, 5.2rem);font-weight:700;line-height:.98;
  display:flex;flex-wrap:wrap;gap:0 .34em;margin:0;
}
.hero-title .w{display:inline-block}
/* transform + opacity only: an animated blur() repaints the whole word every frame
   and showed up as a 54ms long task on a throttled CPU */
.js .hero-title .w{
  opacity:0;transform:translateY(.46em) scale(.985);
  animation:word-in 700ms var(--ease-out-quart) forwards;
  animation-delay:calc(var(--d) * 85ms + 120ms);
}
@keyframes word-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .js .hero-title .w{animation:none;opacity:1;transform:none;filter:none}
}
.hero-title .struck{position:relative}
.hero-title .struck::after{
  content:"";position:absolute;left:-.07em;right:-.07em;top:.52em;height:.085em;border-radius:3px;
  background:var(--flame);transform:rotate(-1.6deg) scaleX(0);transform-origin:left center;
  animation:strike-in 460ms var(--ease-out-quart) 780ms forwards;
  box-shadow:0 0 18px oklch(0.66 0.20 34 / .5);
}
@keyframes strike-in{to{transform:rotate(-1.6deg) scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .hero-title .struck::after{animation:none;transform:rotate(-1.6deg) scaleX(1)}
}

.hero-side{display:grid;gap:clamp(18px,3vh,30px)}
.hero-sub{font-size:clamp(1rem,1.25vw,1.16rem);color:var(--paper-dim);margin:0;max-width:46ch}

.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.meter{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;margin:0;font-family:var(--display)}
.meter-big{font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.meter-big--after{color:var(--flame-on-felt)}
.meter-arrow{color:var(--paper-dim);font-size:1.1rem}
.meter-label{font-family:var(--text);font-size:.86rem;color:var(--paper-dim);max-width:34ch;line-height:1.35}

.cta{
  display:inline-flex;align-items:center;gap:12px;background:var(--paper);color:var(--ink);
  text-decoration:none;font-family:var(--display);font-weight:600;font-size:.88rem;
  padding:16px 24px;border-radius:2px;min-height:48px;
  box-shadow:0 14px 34px oklch(0.10 0.02 158 / .45);
}
.cta span{color:var(--flame-on-paper)}
@media (hover:hover) and (pointer:fine){
  .cta{transition:transform 160ms var(--ease-out-quart),box-shadow 160ms var(--ease-out-quart)}
  .cta:hover{transform:translateY(-2px);box-shadow:0 20px 44px oklch(0.10 0.02 158 / .55)}
}
.cta:active{transform:scale(.985)}

/* ── documents on the bench ───────────────────────────────────────────────── */
.doc{
  margin:0;background:linear-gradient(to bottom, var(--paper), var(--paper-warm));
  color:var(--ink);padding:18px 20px 20px;border-radius:3px;
  box-shadow:0 26px 64px oklch(0.10 0.02 158 / .5), 0 2px 0 oklch(0.98 0.01 95 / .6) inset;
}
.doc figcaption{
  font-family:var(--display);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-dim);border-bottom:1px solid oklch(0.86 0.015 95);padding-bottom:10px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.doc pre{margin:14px 0 0;overflow-x:auto}
.doc code{font-family:var(--display);font-weight:300;font-size:clamp(.66rem,.8vw,.76rem);line-height:1.85;white-space:pre-wrap}
.doc--tilt{transform:rotate(-.6deg)}
.doc .cut{position:relative;opacity:.88;display:inline-block}
.doc .cut::after{
  content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;margin-top:-1px;
  background:var(--flame-on-paper);transform:rotate(-.7deg);
}

/* ── 2 · what changed ─────────────────────────────────────────────────────── */
.scene--changed{background:linear-gradient(to bottom, transparent, oklch(0.22 0.04 158) 70%)}
.evidence{margin-top:clamp(30px,5vh,52px);display:grid;gap:clamp(22px,4vh,40px);max-width:88ch}
.quote{margin:0;border-top:1px solid var(--felt-edge);padding-top:22px}
.quote p{font-family:var(--display);font-weight:300;font-size:clamp(.98rem,1.5vw,1.25rem);line-height:1.6;margin:0;max-width:46ch}
.quote cite{display:block;margin-top:14px;font-style:normal;font-size:.84rem;color:var(--paper-dim)}
.quote cite a{color:var(--flame-on-felt)}
.swap{display:grid;gap:1px;background:var(--felt-edge);border:1px solid var(--felt-edge);border-radius:2px;overflow:hidden}
.swap-row{background:var(--felt);padding:18px 20px;display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:16px;align-items:start}
.swap-row--now{background:var(--felt-lift)}
.swap-row p{margin:0;max-width:54ch}
.tag{font-family:var(--display);font-size:.72rem;color:var(--paper-dim);padding-top:.3em}
.tag--hot{color:var(--flame-on-felt)}
.aside{color:var(--paper-dim);max-width:62ch;margin:0}

/* ── 3 · THE CUT ──────────────────────────────────────────────────────────── */
.cut-scene{
  position:relative;height:340vh;background:var(--felt-deep);
  view-timeline-name:--cut;view-timeline-axis:block;
}
.cut-stage{
  position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  gap:clamp(10px,2vh,22px);padding:clamp(18px,4vh,42px) var(--gutter) clamp(16px,3vh,30px) var(--pad-x);
}
.cut-head h2{font-size:clamp(1.35rem,2.3vw,2rem);max-width:24ch}
.cut-note{color:var(--paper-dim);max-width:56ch;margin:10px 0 0;font-size:.95rem}
.doc--big{align-self:center;width:100%;max-width:94ch;padding:18px 22px 20px}
.doc--big code{line-height:1.5;font-size:clamp(.56rem,.72vw,.7rem)}
.doc--big .l{display:block;position:relative}
.doc--big .l--gap{height:.9em}
.tokens{font-family:var(--display);color:var(--ink-dim);letter-spacing:.05em}
.tokens-num{font-style:normal;color:var(--flame-on-paper);font-weight:700}
.tokens-fallback{color:var(--flame-on-paper);font-weight:700}
.cut-caption{
  font-family:var(--display);font-size:clamp(10px,1.3vw,11px);letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper-dim);margin:0;display:grid;
}
.cut-caption span{grid-area:1/1}
.cut-caption-b{opacity:0}

/* static fallback: the scene reads as already-cut. .88 keeps struck text >4.5:1 */
.l--doomed{opacity:.88}
.l--doomed::after{
  content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;margin-top:-1px;
  background:var(--flame-on-paper);transform:rotate(-.5deg);transform-origin:left center;
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* every line owns its own animation and its slice of the timeline: no parent
       variable driving children, no scroll listener */
    .l--doomed{opacity:1;animation:line-out linear both;animation-timeline:--cut;
      animation-range:contain calc(8% + var(--i) * 9%) contain calc(31% + var(--i) * 9%)}
    .l--doomed::after{
      transform:rotate(-.5deg) scaleX(0);animation:strike linear both;animation-timeline:--cut;
      animation-range:contain calc(6% + var(--i) * 9%) contain calc(19% + var(--i) * 9%);
      box-shadow:0 0 10px oklch(0.52 0.19 30 / .55);
    }
    @keyframes strike{to{transform:rotate(-.5deg) scaleX(1)}}
    @keyframes line-out{
      0%{opacity:1;transform:none}
      52%{opacity:.72;transform:none}
      100%{opacity:0;transform:translateX(26px)}
    }
    .cut-caption-a{animation:cap-out linear both;animation-timeline:--cut;animation-range:contain 6% contain 20%}
    .cut-caption-b{animation:cap-in linear both;animation-timeline:--cut;animation-range:contain 60% contain 76%}
    @keyframes cap-out{to{opacity:0}}
    @keyframes cap-in{from{opacity:0}to{opacity:1}}

    @property --tk{syntax:"<integer>";inherits:false;initial-value:10874}
    .tokens-num{counter-reset:tk var(--tk);animation:tk-down linear both;
      animation-timeline:--cut;animation-range:contain 8% contain 78%}
    .tokens-num::after{content:counter(tk) " "}
    .tokens-num + .tokens-fallback{display:none}
    @keyframes tk-down{from{--tk:10874}to{--tk:5708}}
  }
}

/* ── 4 · contact sheet, panned sideways by vertical scroll ────────────────── */
.sheet-scene{
  position:relative;height:300vh;background:linear-gradient(to bottom, var(--felt-deep), var(--felt));
  view-timeline-name:--sheet;view-timeline-axis:block;
}
.sheet-stage{
  position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr;
  gap:clamp(16px,3vh,34px);padding:clamp(24px,5vh,56px) 0 clamp(28px,5vh,56px) var(--pad-x);
  overflow:hidden;align-content:start;
}
.sheet-head{padding-right:var(--gutter)}
.sheet-note{color:var(--paper-dim);max-width:52ch;margin:10px 0 0;font-size:.95rem}
.sheet-track{
  display:flex;gap:clamp(16px,2vw,28px);align-items:flex-start;padding-right:var(--gutter);
  will-change:transform;
}
/* Each card is a frame of film: sprocket holes top and bottom, and they are
   deliberately not the same height — a contact sheet, not a card grid. */
.frame{
  flex:0 0 clamp(240px,25vw,330px);background:var(--felt-lift);
  border:1px solid var(--felt-edge);border-radius:3px;
  padding:26px 20px 24px;display:grid;gap:10px;align-content:start;
  box-shadow:0 18px 40px oklch(0.10 0.02 158 / .4);position:relative;
}
.frame::before,.frame::after{
  content:"";position:absolute;left:14px;right:14px;height:7px;
  background:repeating-linear-gradient(to right, oklch(0.14 0.025 158) 0 9px, transparent 9px 20px);
  border-radius:2px;opacity:.85;
}
.frame::before{top:8px}
.frame::after{bottom:8px}
/* two frames run longer than the rest — a contact sheet has uneven exposures.
   min-height, not stretch: stretch left a card of mostly empty felt. */
.frame--tall{min-height:min(46vh,360px);padding-bottom:30px}
.frame--hot{border-color:oklch(0.66 0.20 34 / .5);background:linear-gradient(160deg, var(--felt-lift), oklch(0.30 0.06 42))}
.frame-no{font-family:var(--display);font-size:.7rem;color:var(--flame-on-felt);letter-spacing:.12em}
.frame h3{font-size:1.05rem;font-weight:600;line-height:1.25}
.frame p{margin:0;font-size:.92rem;color:var(--paper-dim)}
/* the quoted line from a real config: full hairline box, no accent stripe */
.evid{
  display:block;margin-top:6px;font-size:.68rem;line-height:1.6;color:var(--paper);
  background:oklch(0.145 0.025 158);border:1px solid oklch(0.66 0.20 34 / .35);
  padding:9px 11px;border-radius:2px;overflow-wrap:anywhere;
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sheet-track{animation:pan linear both;animation-timeline:--sheet;animation-range:contain 0% contain 100%}
    /* travel = track width minus one viewport, expressed in track-relative units */
    @keyframes pan{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-100% + min(92vw, 900px)),0,0)}}
  }
}
@supports not (animation-timeline: view()){
  /* no scroll timelines: the sheet becomes a plain readable grid */
  .sheet-scene{height:auto}
  .sheet-stage{position:static;height:auto;padding-right:var(--gutter)}
  .sheet-track{flex-wrap:wrap}
  .frame{flex:1 1 280px}
}
@media (prefers-reduced-motion: reduce){
  .sheet-scene{height:auto}
  .sheet-stage{position:static;height:auto;padding-right:var(--gutter)}
  .sheet-track{flex-wrap:wrap}
  .frame{flex:1 1 280px}
}

/* Below-the-fold scenes skip layout and paint until they are near the viewport.
   Only applied to scenes without pinning or scroll timelines — content-visibility
   would confuse those. intrinsic-size keeps the scrollbar honest. */
.scene--proof,.scene--hooks,.scene--door{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ── 5 · judgement ────────────────────────────────────────────────────────── */
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,64px);align-items:start}
.rules{margin:clamp(22px,4vh,38px) 0 0;display:grid;gap:14px}
.rules > div{display:grid;grid-template-columns:minmax(0,86px) minmax(0,1fr);gap:16px;border-top:1px solid var(--felt-edge);padding-top:14px}
.rules dt{font-family:var(--display);font-size:.78rem;font-weight:600;color:var(--flame-on-felt)}
.rules dd{margin:0;color:var(--paper-dim);max-width:52ch}
.terminal{
  margin:0;background:oklch(0.135 0.025 158);border:1px solid var(--felt-edge);border-radius:3px;
  padding:18px 20px 20px;box-shadow:0 26px 60px oklch(0.09 0.02 158 / .55);
}
.terminal figcaption{font-family:var(--display);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--paper-dim);border-bottom:1px solid var(--felt-edge);padding-bottom:10px}
.terminal pre{margin:14px 0 0;overflow-x:auto;max-width:100%}
.terminal code{font-family:var(--display);font-weight:300;font-size:clamp(.58rem,.7vw,.7rem);line-height:1.85;color:var(--paper-dim)}
.t-dim{opacity:.55}
.t-key{color:var(--paper);font-weight:600}
.t-hot{color:var(--flame-on-felt);font-weight:700}
.t-sev{color:var(--flame-on-felt)}

/* ── 6 · the repeated nudge ───────────────────────────────────────────────── */
.scene--hooks{background:linear-gradient(to bottom, var(--felt), var(--felt-deep));overflow:hidden}
.nudges{margin:clamp(28px,5vh,50px) 0;display:grid;gap:9px;font-family:var(--display);font-size:clamp(.6rem,.78vw,.72rem);color:var(--paper-dim)}
.nudges span{border:1px solid var(--felt-edge);padding:11px 14px;border-radius:2px;max-width:min(70ch,100%);background:oklch(0.22 0.035 158 / .6)}
.nudges span:nth-child(1){opacity:.95}
.nudges span:nth-child(2){opacity:.8;margin-left:clamp(0px,2vw,26px)}
.nudges span:nth-child(3){opacity:.64;margin-left:clamp(0px,4vw,52px)}
.nudges span:nth-child(4){opacity:.48;margin-left:clamp(0px,6vw,78px)}
.nudges span:nth-child(5){opacity:.34;margin-left:clamp(0px,8vw,104px)}
.nudges span:nth-child(6){opacity:.2;margin-left:clamp(0px,10vw,130px)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .nudges span{animation:nudge linear both;animation-timeline:view();animation-range:entry 18% cover 55%}
    @keyframes nudge{from{transform:translateX(46px)}to{transform:none}}
  }
}
.resolve{color:var(--paper-dim);max-width:64ch;margin:0}
.resolve code{color:var(--paper);background:oklch(0.145 0.025 158);padding:2px 6px;border-radius:2px;font-size:.9em}

/* ── 7 · door ─────────────────────────────────────────────────────────────── */
.scene--door{min-height:82svh;display:grid;align-content:center;gap:clamp(36px,7vh,72px)}
.door{max-width:70ch}
.install{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:oklch(0.145 0.025 158);
  border:1px solid var(--felt-edge);padding:16px 18px;border-radius:3px;margin:clamp(22px,4vh,34px) 0 0;
}
.install code{font-size:clamp(.6rem,.8vw,.75rem);color:var(--paper);overflow-x:auto;flex:1 1 300px}
.copy{
  font-family:var(--display);font-size:.74rem;background:transparent;color:var(--paper-dim);
  border:1px solid var(--felt-edge);padding:11px 16px;border-radius:2px;cursor:pointer;min-height:44px;
  transition:color 140ms var(--ease-out-quart),border-color 140ms var(--ease-out-quart);
}
.copy:hover{color:var(--paper);border-color:var(--paper-dim)}
.copy[data-done="1"]{color:var(--flame-on-felt);border-color:var(--flame-on-felt)}
.then{color:var(--paper-dim);margin:18px 0 0}
.then code,.lede code{color:var(--paper)}
.door-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:clamp(24px,4vh,36px)}
.ghost{font-family:var(--display);font-size:.82rem;color:var(--paper-dim);text-decoration:none;border-bottom:1px solid oklch(0.88 0.018 150 / .35);padding-bottom:3px;min-height:44px;display:inline-flex;align-items:center}
.ghost:hover{color:var(--paper)}
.colophon{
  display:flex;gap:clamp(14px,3vw,30px);flex-wrap:wrap;font-family:var(--display);
  font-size:.72rem;font-weight:300;color:var(--paper-dim);opacity:.75;
  border-top:1px solid var(--felt-edge);padding-top:18px;
}

/* ── tablet ───────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  /* minmax(0,1fr), never plain 1fr: a bare 1fr track takes its min size from
     max-content, so one long line inside <pre> widens the whole page */
  .hero{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(22px,4vh,36px)}
  .proof-grid{grid-template-columns:minmax(0,1fr)}
  .doc--tilt{transform:none}
}

/* ── phone: designed, not collapsed ───────────────────────────────────────── */
@media (max-width:720px){
  :root{
    --reel-w:34px;
    --gutter:18px;
    --pad-x:calc(var(--reel-w) + 16px);
    --rhythm:clamp(52px,9vh,76px);
  }
  .reel{left:0;perspective:none}
  .reel-inner{transform:none;box-shadow:8px 0 26px oklch(0.10 0.02 158 / .5);background-size:9px 100%,9px 100%,auto}
  .beam{background:radial-gradient(70% 34% at 72% 0%, oklch(0.72 0.09 92 / .26), transparent 72%)}

  .slate{font-size:10px;gap:10px 16px}
  .slate a{margin-left:0}
  .hero-title{font-size:clamp(2.15rem,10.5vw,3.1rem);gap:0 .28em}
  .hero-sub{font-size:1.02rem}
  .doc code{font-size:.68rem;line-height:1.75}

  /* the meter becomes the mobile hero statement, not a footnote */
  .hero-foot{display:grid;gap:18px}
  .meter{gap:.35em}
  .meter-big{font-size:clamp(1.7rem,9vw,2.3rem)}
  .meter-label{font-size:.84rem;max-width:none}
  .cta{width:100%;justify-content:space-between}

  /* the peak unpins: a phone thumb should not fight a 340vh scrub */
  .cut-scene{height:auto;view-timeline-name:none}
  .cut-stage{position:static;height:auto;gap:16px;padding:var(--rhythm) var(--gutter) var(--rhythm) var(--pad-x)}
  .doc--big{max-width:none;padding:16px 16px 18px}
  .doc--big code{font-size:.63rem;line-height:1.55}
  .l--doomed{opacity:.88;animation:none}
  .l--doomed::after{transform:rotate(-.5deg) scaleX(1);animation:none}
  .tokens-num{animation:none;counter-reset:none}
  .tokens-num::after{content:""}
  .tokens-num + .tokens-fallback{display:inline}
  .cut-caption-a{display:none}
  .cut-caption-b{opacity:1;animation:none}

  /* contact sheet: swipeable by thumb instead of scroll-panned */
  .sheet-scene{height:auto;view-timeline-name:none}
  /* clip the stage, scroll inside the track: otherwise the cards widen the document
     and the whole page gains a horizontal scrollbar */
  .sheet-stage{position:static;height:auto;padding:var(--rhythm) 0 var(--rhythm) var(--pad-x);overflow:clip}
  .sheet-head{padding-right:var(--gutter)}
  .sheet-track{
    animation:none;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px var(--gutter) 14px 0;gap:12px;max-width:100%;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .sheet-track::-webkit-scrollbar{display:none}
  .frame{flex:0 0 78vw;scroll-snap-align:start}

  .swap-row{grid-template-columns:1fr;gap:8px}
  .rules > div{grid-template-columns:1fr;gap:6px}
  .nudges span{margin-left:0 !important;max-width:none}
  .install{gap:10px}
  .install code{flex:1 1 100%;font-size:.66rem}
  .copy{width:100%}
  .door-links{gap:14px}
  .door-links .cta{width:100%;justify-content:space-between}
}

@media (max-width:400px){
  .hero-title{font-size:2rem}
  .frame{flex:0 0 84vw}
}