/* ==========================================================================
   OpenQARP — "depth is the metaphor"
   One ground throughout, light or dark; sections are separated by rhythm and
   type, never by a coloured band.
   Amber appears only where a measurement happens.
   ========================================================================== */

/* Tokens are roles, not colours: the same names carry both themes.
   `surface` is the page, `contrast` is the band that opposes it, `raised` is a
   card sitting on the surface. The dark block below re-points them; nothing
   outside :root should name a literal colour. */
:root {
  color-scheme: light;

  --surface:      #F3F4F8;
  --raised:       #FFFFFF;
  --ink:          #0B0E1C;
  --ink-2:        #3A4059;
  --mist:         #666C85;   /* 4.7:1 on the light surface; #6E748C failed at 4.2 */
  --line:         rgba(11, 14, 28, 0.10);
  --line-strong:  rgba(11, 14, 28, 0.25);
  --code-bg:      rgba(11, 14, 28, 0.06);
  --shadow:       rgba(11, 14, 28, 0.25);

  --contrast:      #201B34;
  --contrast-2:    #2A2441;
  --contrast-ink:  #E9E7F6;
  --contrast-mist: #9C96BE;
  --contrast-line: rgba(233, 231, 246, 0.15);
  --tip-bg:        #201B34;
  --tip-ink:       #EDEBF8;
  --tip-mist:      #A49DC6;

  --cobalt:      #2B4DFF;
  --cobalt-2:    #1A34D6;
  --cobalt-soft: #6E86FF;
  --amber:       #F0A500;
  --syn-num:     #8a4b00;
  --syn-str:     #1f6b3a;
  --syn-key:     var(--cobalt-2);

  /* Geist is the sans and Geist Mono the code face: one family, drawn together */
  --sans: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  /* one value on both sides of every section: the content-to-content gap is 2× */
  --sec-pad: clamp(96px, 12vh, 160px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark keeps the same rhythm: the page takes the lilac dark, and the contrast
   band descends further rather than flipping to a bright stripe. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface:      #201B34;
  --raised:       #2A2441;
  --ink:          #EDEBF8;
  --ink-2:        #C6C1DC;
  --mist:         #9C96BE;
  --line:         rgba(233, 231, 246, 0.15);
  --line-strong:  rgba(233, 231, 246, 0.32);
  --code-bg:      rgba(233, 231, 246, 0.12);
  --shadow:       rgba(0, 0, 0, 0.5);

  --contrast:      #16122A;
  --contrast-2:    #241F3C;
  --contrast-ink:  #EDEBF8;
  --contrast-mist: #A49DC6;
  --contrast-line: rgba(233, 231, 246, 0.16);
  --tip-bg:        #362E52;
  --tip-ink:       #EDEBF8;
  --tip-mist:      #B5AED2;

  --cobalt:      #8FA2FF;
  --cobalt-2:    #A9B6FF;
  --cobalt-soft: #8FA2FF;
  --amber:       #F5B733;
  --syn-num:     #E0A76A;
  --syn-str:     #7FC79B;
  --syn-key:     #A9B6FF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: 6px; }
code { font-family: var(--mono); font-size: 0.88em; }
p code { padding: 0.05em 0.35em; border-radius: 5px; background: var(--code-bg); }

/* width: 100% so a grid parent (the centred sections) cannot shrink-wrap it;
   min-width: 0 so the same parent cannot widen it to its content either: a
   grid item's default minimum is its min-content width, and the no-wrap
   benchmark table pushed the whole section past the viewport on narrow
   screens, where body's overflow-x: hidden then clipped the table instead
   of letting .tbl-scroll scroll it */
.wrap { width: 100%; min-width: 0; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* --------------------------------------------------------------------------
   type
   -------------------------------------------------------------------------- */

h1, h2 { font-weight: 500; letter-spacing: -0.032em; text-wrap: balance; }

h1 { font-size: clamp(2.9rem, 8.2vw, 7.2rem); line-height: 0.99; }

.h-xl {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.03;
  margin-bottom: 28px;
}

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 40ch;
  text-wrap: pretty;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--cobalt);
  padding: 12px 4px;
}
.link-arrow::after {
  content: ""; width: 9px; height: 9px;
  border-right: 1.7px solid currentColor; border-top: 1.7px solid currentColor;
  transform: rotate(45deg); transition: transform 0.3s var(--ease);
}
.link-arrow:hover::after { transform: rotate(45deg) translate(3px, -3px); }

/* a quiet control, used wherever motion is offered on request */
.replay {
  font: 500 0.78rem var(--mono); color: var(--cobalt);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
  transition: border-color 0.2s;
}
.replay:hover { border-color: var(--cobalt); }

/* --------------------------------------------------------------------------
   nav
   -------------------------------------------------------------------------- */

/* No bar: two controls pinned in the corner, nothing else fixed to the page.
   Their colour follows whatever section happens to be under them. */
.wordmark {
  position: fixed; top: 14px; left: var(--gutter); z-index: 50;
  display: inline-flex; align-items: center; height: 34px;
  padding: 0 14px; border-radius: 999px;
  font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  transition: background 0.3s, backdrop-filter 0.3s;
}
/* Over the hero they float bare; once the page scrolls, content passes beneath
   them and they need a ground of their own to stay legible. */
.wordmark.scrolled, .corner.scrolled {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.corner {
  position: fixed; top: 14px; right: var(--gutter); z-index: 50;
  display: flex; align-items: center; gap: 2px;
  padding: 0 4px; border-radius: 999px;
  color: var(--ink);
  transition: background 0.3s, backdrop-filter 0.3s;
}
.corner-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: none; border: 0; border-radius: 50%;
  color: inherit; opacity: 0.6; cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}
.corner-btn:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
/* the wave is the scroll animation; the slash says it is off */
.corner .ic-slash { display: none; }
html.still .corner .ic-slash { display: block; }
html.still #motion-toggle { opacity: 0.85; }
/* each icon shows the theme you would switch TO */
.corner .ic-sun { display: none; }
:root[data-theme="dark"] .corner .ic-sun { display: block; }
:root[data-theme="dark"] .corner .ic-moon { display: none; }

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Fixed behind the page: the hero is transparent over it, every other section
   is opaque, and a section reveals it only by fading. It must not sit inside
   a section, because a transformed ancestor would capture the fixed box. */
.field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0;
}
main { position: relative; z-index: 1; }

/* Warp: each chapter is a section, a hold, and a transparent runway. The
   section is sticky, so the compositor holds it still through the hold (a
   few wheel notches where the reader can stop on it) and then while it fades
   out over the runway (its `top` is set per section so a tall one sticks by
   its bottom edge); the incoming section is held with position: fixed while
   it settles. app.js only drives opacity and scale, so nothing lags the
   scroll. Without html.warp (still mode, no JS) both collapse to a plain page. */
.hold { height: 220px; pointer-events: none; }
.runway { height: 36vh; pointer-events: none; }
html:not(.warp) .hold, html:not(.warp) .runway { display: none; }
html.warp .chapter > section, html.warp .chapter > .tail { position: sticky; top: 0; }
html.warp .chapter > .fixed { position: fixed !important; top: 0 !important; left: 0; right: 0; }
html.warp .hero { min-height: 100vh; }
html.warp .core, html.warp .code, html.warp .library, html.warp .agents, html.warp .install { min-height: 100vh; display: grid; align-content: center; }
html.warp .tail { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
html.warp .tail .collab { display: grid; align-content: center; }
/* Only while pinned. A permanent layer was tried (2026-09-10) and made every
   section shimmer on scroll; the one-frame promotion pop on the first
   upward notch is the lesser evil. */
.pinned { will-change: transform, opacity; }
.hero-in {
  position: relative;
  text-align: center;
  background: radial-gradient(ellipse 62% 55% at 50% 50%,
    color-mix(in srgb, var(--surface) 86%, transparent) 0%,
    color-mix(in srgb, var(--surface) 55%, transparent) 45%,
    color-mix(in srgb, var(--surface) 0%, transparent) 100%);
  padding: 18vh var(--gutter) 12vh;
  max-width: 1000px;
}
.hero-in .lede { margin: 30px auto 38px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }
.hero-caption {
  position: absolute; bottom: 22px; left: 0; right: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px;
  text-align: center; font-size: 0.8rem; color: var(--mist);
  padding-inline: var(--gutter);
}
.hero-caption .replay { font-size: 0.8rem; }

/* pip chip — the one thing on the page that looks like a button */
.pip {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 1rem var(--mono);
  color: var(--raised); background: var(--ink);
  border: 0; border-radius: 999px;
  padding: 15px 26px 15px 22px;
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.35s var(--ease), background 0.25s, box-shadow 0.6s ease;
}
.pip::before { content: "$"; color: var(--cobalt-soft); }
/* Hover: a highlight runs once around the rim, then a faint halo stays for
   as long as the pointer does. The rim is a conic gradient on a 2px ring
   just outside the pill: the mask keeps only the ring (padding-box minus
   content-box), so nothing paints over the face. */
@property --pip-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pip::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--pip-a),
    transparent 0 58%, var(--cobalt-soft) 80%, #fff 86%, transparent 93%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; pointer-events: none;
}
.pip:hover::after { animation: pip-sweep 1.1s cubic-bezier(0.45, 0, 0.2, 1) forwards; }
@keyframes pip-sweep {
  0%   { --pip-a: 0deg; opacity: 1; }
  70%  { opacity: 1; }
  100% { --pip-a: 400deg; opacity: 0; }
}
.pip:hover {
  transform: translateY(-1px); background: color-mix(in srgb, var(--ink) 88%, var(--cobalt));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cobalt) 45%, transparent),
              0 0 22px 2px color-mix(in srgb, var(--cobalt) 22%, transparent);
  transition-delay: 0s, 0s, 0.75s;   /* the halo lands as the sweep ends */
}
html.still .pip::after { animation: none; }
.pip:active { transform: translateY(0); }
.pip-done {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em;
  background: var(--cobalt); border-radius: inherit;
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.25s, transform 0.35s var(--ease);
  pointer-events: none;
}
.pip.copied .pip-done { opacity: 1; transform: scale(1); }
.pip-big { font-size: clamp(1.2rem, 3vw, 2rem); padding: 22px 44px 22px 36px; gap: 18px; }

/* --------------------------------------------------------------------------
   the stage: blocks, then a primitive, then an engine around all of it
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  height: 320vh;
  background: var(--surface);
}
/* the pin spans the viewport so the section mark sits at the window edge
   like every other; the copy and scene share the same column as .wrap */
.stage-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; align-content: center;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
}
.stage-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 24px;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 0 var(--gutter);
}
.stage-copy { position: relative; min-height: 300px; }
.stage-step {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(24px);
  pointer-events: none;
}
.stage-step h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.03; margin-bottom: 20px; }
.stage-step p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; max-width: 38ch; opacity: 0.72; }


.scene { width: 100%; height: auto; max-height: 84vh; overflow: visible; }

.wires { opacity: 0; }
.wires line { stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1.6; }

.blk { opacity: 0; will-change: transform, opacity; }
.blk > rect {
  fill: var(--raised);
  stroke: currentColor; stroke-opacity: 0.16; stroke-width: 1.4;
}
.blk-name { font: 500 15px var(--sans); fill: currentColor; letter-spacing: -0.01em; }
.blk-gates rect { fill: var(--surface); stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1.4; }
.blk-gates text { font: 500 13px var(--mono); fill: currentColor; }
.blk-gates .cx { stroke: currentColor; stroke-width: 1.6; }
.blk-gates .cx-dot { fill: currentColor; }
.blk-gates .cx-tgt { fill: none; stroke: currentColor; stroke-width: 1.6; }
.blk-gates.meter rect { stroke: var(--amber); stroke-opacity: 0.9; }
.blk-gates.meter path, .blk-gates.meter line { fill: none; stroke: var(--amber); stroke-width: 1.7; }

.prim { opacity: 0; }
.prim-lead { fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; }
.prim .hb { fill: var(--amber); }
.prim-label { font: 500 13px var(--mono); fill: currentColor; opacity: 0.6; }
.prim-value { font: 500 30px var(--sans); fill: currentColor; letter-spacing: -0.02em; }
#prim-value { opacity: 0; }

.engine { opacity: 0; }
.engine-frame { fill: none; stroke: currentColor; stroke-opacity: 0.32; stroke-width: 1.6; }
.engine-name text { font: 500 19px var(--sans); fill: currentColor; letter-spacing: -0.01em; }
.engine-name .engine-sub { font-size: 16px; opacity: 0.55; }

@media (max-width: 900px) {
  .stage { height: 280vh; }
  .stage-pin { align-content: start; padding-top: 96px; }
  .stage-in { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 16px; }
  .stage-copy { min-height: 250px; }
  .scene { max-height: 46vh; align-self: start; }
}


/* --------------------------------------------------------------------------
   benchmarks
   -------------------------------------------------------------------------- */

.light { background: var(--surface); color: var(--ink); position: relative; }

/* Section marks: the name set vertically in the outer margin, faint enough to
   read as texture rather than a heading. Left-hand ones run bottom-to-top,
   right-hand ones top-to-bottom, so both turn their heads toward the content.
   `writing-mode` does the rotation; a transform would need origin arithmetic. */
.section-tag {
  position: absolute; top: 50%; z-index: 0;
  writing-mode: vertical-rl;
  font: 500 clamp(3rem, 6vw, 7rem)/1 var(--sans);
  letter-spacing: -0.03em;
  color: var(--ink);
  opacity: 0.10;
  pointer-events: none; user-select: none;
}
/* 12px, not 6: in vertical writing mode the line box runs a few pixels wider
   than the font size, and at 6px the right-hand marks pushed the page 4px wide */
.section-tag.left  { left: 18px;  transform: translateY(-50%) rotate(180deg); }
.section-tag.right { right: 18px; transform: translateY(-50%); }
/* below this the outer margin is narrower than the type, so they would sit on
   the content instead of beside it */
@media (max-width: 1400px) { .section-tag { display: none; } }

.core { padding: var(--sec-pad) 0; }

.bench {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px;
  margin-top: 80px;
}
.fig figcaption { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.fig figcaption strong { font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; }
.fig figcaption span { color: var(--mist); font-size: 0.9rem; }
/* The charts are drawn in a 400-unit viewBox and scale with their column. In
   the single-column layout that column is the whole section, so the cap
   keeps them near their three-column size instead of doubling the type. */
.chart { width: 100%; max-width: 440px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .lbl { font: 400 12.5px var(--sans); fill: var(--ink); }
.chart .lbl.dim { fill: var(--mist); }
.chart .val { font: 500 13px var(--mono); fill: var(--ink); }
.chart .val.dim { fill: var(--mist); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .tick { font: 400 11px var(--mono); fill: var(--mist); }
.chart .bar {
  fill: var(--cobalt);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1.1s var(--ease);
}
.chart .bar.other { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.chart .bar.grow { transform: scaleX(1); }
.chart .hit { fill: transparent; cursor: default; }
@media (max-width: 960px) { .bench { grid-template-columns: 1fr; gap: 48px; } }

.tbl { margin-top: 44px; color: var(--mist); font-size: 0.9rem; }
.tbl summary { cursor: pointer; width: max-content; padding: 6px 0; }
.method { max-width: 66ch; margin: 14px 0 4px; line-height: 1.55; text-wrap: pretty; }
.tbl-scroll { overflow-x: auto; margin-top: 18px; }
.tbl table { border-collapse: collapse; min-width: 560px; }
.tbl th, .tbl td { text-align: left; padding: 6px 18px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { font-weight: 500; color: var(--ink); }
.tbl td.num { font-family: var(--mono); }

.tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--tip-bg); color: var(--tip-ink);
  border: 1px solid var(--contrast-line); border-radius: 10px;
  padding: 10px 12px; font-size: 0.85rem; line-height: 1.4; max-width: 300px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.tip strong { display: block; font-weight: 500; margin-bottom: 2px; }
.tip .ket { font-family: var(--mono); letter-spacing: 0.02em; }
.tip .mono { font-family: var(--mono); color: var(--tip-mist); }

/* --------------------------------------------------------------------------
   code (light)
   -------------------------------------------------------------------------- */

.code { padding: var(--sec-pad) 0; }
.code-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.code-copy .lede { margin-bottom: 18px; }
@media (max-width: 960px) { .code-grid { grid-template-columns: 1fr; gap: 40px; } }

.cell {
  background: var(--raised);
  border-radius: 22px;
  box-shadow: 0 1px 0 var(--line), 0 30px 80px -30px var(--shadow);
  overflow: hidden;
}
.src {
  font: 400 0.9rem/1.62 var(--mono);
  padding: 26px 28px;
  overflow-x: auto;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.src .k { color: var(--syn-key); }
.src .n { color: var(--syn-num); }
.src .s { color: var(--syn-str); }
.src .b { color: var(--ink-2); }

.out { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; padding: 22px 28px 24px; background: var(--surface); }
@media (max-width: 560px) { .out { grid-template-columns: 1fr; } }
.circ { width: 100%; height: auto; }
.circ .q { font: 500 12px var(--mono); fill: var(--mist); }
.circ .w { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1.4; }
.circ .w.cl { stroke-opacity: 0.22; }
.circ .g rect { fill: var(--raised); stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1.4; transition: stroke 0.3s, stroke-opacity 0.3s; }
.circ .g text { font: 500 13px var(--mono); fill: var(--ink); }
.circ .g .cx { stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1.6; transition: stroke 0.3s, stroke-opacity 0.3s; }
.circ .g .dot { fill: var(--ink); fill-opacity: 0.6; transition: fill 0.3s, fill-opacity 0.3s; }
.circ .g .tgt { fill: none; stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1.6; transition: stroke 0.3s, stroke-opacity 0.3s; }
.circ .g.on rect { stroke: var(--cobalt); stroke-opacity: 1; }
.circ .g.on .cx, .circ .g.on .tgt { stroke: var(--cobalt); stroke-opacity: 1; }
.circ .g.on .dot { fill: var(--cobalt); fill-opacity: 1; }
.circ .m path, .circ .m line { fill: none; stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1.6; transition: stroke 0.3s, stroke-opacity 0.3s; }
.circ .m.on rect { stroke: var(--amber); }
.circ .m.on path, .circ .m.on line { stroke: var(--amber); stroke-opacity: 1; }
.circ .ph { stroke: var(--cobalt); stroke-width: 1.5; opacity: 0; transition: opacity 0.2s; }
.circ .ph.live { opacity: 1; }

.hist-plot { position: relative; height: 128px; }
.rule { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-strong); }
/* the marker sits outside the plot: above the line it collided with the
   right-hand column's value label */
.rule span { position: absolute; left: 100%; margin-left: 8px; top: -0.62em; font: 500 11px var(--mono); color: var(--mist); }
.cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.bar { width: 100%; height: 0; background: var(--amber); border-radius: 4px 4px 0 0; transition: height 0.12s linear; }
.val { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 500 11px var(--mono); color: var(--ink-2); }
.ticks {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 7px;
  font: 500 11px var(--mono); color: var(--mist); text-align: center;
}
.hist-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px; white-space: nowrap; margin-top: 18px;
  font-size: 0.78rem; color: var(--mist); font-family: var(--mono);
}
/* the counter keeps its final width from shot 0, so the line never re-wraps
   mid-run and the cell's height stays put */
#shotn { display: inline-block; min-width: 5ch; text-align: right; }

/* --------------------------------------------------------------------------
   library wall
   -------------------------------------------------------------------------- */

.library { padding: var(--sec-pad) 0; overflow: hidden; }
.wall { margin: 72px 0 64px; display: flex; flex-direction: column; gap: 12px; }
.row {
  display: grid;
  /* a fixed label column so all three tracks start on the same line */
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-left: var(--gutter);
}
.row-name {
  font: 500 0.85rem var(--sans);
  color: var(--cobalt);
  white-space: nowrap;
}
.row-track {
  overflow: hidden;
  padding: 4px 0;
  /* the belt runs past both ends forever, so fade rather than clip */
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 90px), transparent 100%);
}
.row-belt {
  display: flex; gap: 14px;
  width: max-content;
  will-change: transform;
}
.row-belt span {
  flex: none;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.1;
  padding: 10px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; gap: 6px; }
  .row-track { mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 60px), transparent 100%); }
}
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 24px; }
.counts div { border-top: 1px solid var(--line); padding-top: 16px; }
.counts b { display: block; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: -0.032em; line-height: 1; }
.counts span { display: block; margin-top: 8px; color: var(--mist); font-size: 0.95rem; }
@media (max-width: 760px) { .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   install + colophon
   -------------------------------------------------------------------------- */

.agents { padding: var(--sec-pad) 0; }
.install { padding: var(--sec-pad) 0; }
.install-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.install-in .h-xl { margin-bottom: 44px; }
.install-sub { margin-top: 24px; color: var(--mist); }

/* --------------------------------------------------------------------------
   collaborate
   -------------------------------------------------------------------------- */

/* The closing section sits over the field like the hero does, so the page
   ends on the view it opened with. The footer keeps its own ground. */
.collab { padding: clamp(48px, 6vh, 88px) 0 clamp(56px, 8vh, 88px); background: transparent; }
.collab-in {
  max-width: 1040px; margin-inline: auto; text-align: center;
  padding: clamp(40px, 7vh, 90px) clamp(18px, 3vw, 44px);
  /* the same veil the hero uses, so copy stays legible over the field */
  background: radial-gradient(ellipse 74% 64% at 50% 50%,
    color-mix(in srgb, var(--surface) 86%, transparent) 0%,
    color-mix(in srgb, var(--surface) 55%, transparent) 45%,
    color-mix(in srgb, var(--surface) 0%, transparent) 100%);
}
.collab-in h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); margin-bottom: 20px; }

/* Three doors, one bell. The rule above each column is the whole division:
   no cards, no numbering, because these are alternatives and not a sequence. */
.collab-three {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px; margin: 40px 0 42px; text-align: left;
}
.collab-three > div { border-top: 1px solid var(--line-strong); padding-top: 18px; }
.collab-three h3 { font-size: 1.06rem; font-weight: 500; margin-bottom: 10px; }
.collab-three p {
  color: var(--mist); font-size: 0.97rem; line-height: 1.55;
  max-width: 38ch; text-wrap: pretty;
}
.btn {
  display: inline-flex; align-items: center;
  font-weight: 500;
  color: var(--surface); background: var(--ink);
  border-radius: 999px; padding: 12px 22px;
  transition: background 0.25s;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 88%, var(--cobalt)); }

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding: clamp(56px, 8vh, 88px) 0 40px; background: var(--surface); position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
}
.footer-name { font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; }
.footer-blurb { color: var(--mist); font-size: 0.92rem; line-height: 1.55; max-width: 42ch; }
.footer-blurb + .footer-blurb { margin-top: 12px; }
.footer-col { display: flex; flex-direction: column; align-items: start; gap: 10px; }
.footer-col h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink); margin-bottom: 2px;
}
.footer-col a { color: var(--mist); font-size: 0.92rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--cobalt); }
.footer-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  margin-top: clamp(48px, 7vh, 72px); padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--mist); font-size: 0.86rem;
}
.footer-base a { color: var(--mist); text-decoration: underline; text-underline-offset: 3px; }
.footer-base a:hover { color: var(--cobalt); }
@media (max-width: 820px) {
  .collab-three { grid-template-columns: 1fr; gap: 24px; }
  .collab-three p { max-width: 56ch; }
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   still mode (html.still, from ?motion=reduced)
   The OS reduced-motion flag is deliberately ignored: the scroll effects are
   the page. This mode is kept as an opt-in. Large motion is cut; the stage
   still builds, because the build is the explanation, but it unpins, plays
   on its own clock, looping with a 3 s hold on the finished frame.
   -------------------------------------------------------------------------- */

html.still { scroll-behavior: auto; }
html.still .chart .bar { transition: none; transform: none; }

html.still .stage { height: auto; }
html.still .stage-pin {
  position: static; height: auto;
  align-items: center;
  padding-block: clamp(80px, 12vh, 140px);
}
html.still .stage-copy { position: static; min-height: 0; display: grid; gap: 40px; }
html.still .stage-step {
  position: static; inset: auto;
  opacity: 1 !important; transform: none !important; pointer-events: auto;
}
html.still .stage-step h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 12px; }
html.still .scene { max-height: none; }

@media (max-width: 900px) {
  html.still .stage-in { grid-template-columns: 1fr; }
  html.still .scene { max-height: none; }
}

/* --------------------------------------------------------------------------
   AGENTS — the paths an agent reads, set as paths. The two columns encode the
   only structure here: where a thing is, and what it is for. No cards, no
   numbering; this is a list, not a sequence.
   -------------------------------------------------------------------------- */
.agent-files { margin-top: 40px; }
.agent-files div {
  display: grid; grid-template-columns: minmax(0, auto) 1fr;
  gap: 6px 32px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.agent-files a { color: var(--cobalt); text-decoration: none; }
.agent-files a:hover code { text-decoration: underline; }
.agent-files code { font: 500 0.86rem var(--mono); white-space: nowrap; }
.agent-files span { color: var(--mist); font-size: 0.95rem; text-wrap: pretty; }
.agents-note {
  margin-top: 34px; max-width: 62ch;
  color: var(--ink-2); line-height: 1.55; text-wrap: pretty;
}
@media (max-width: 680px) {
  .agent-files div { grid-template-columns: 1fr; gap: 3px; }
  .agent-files code { white-space: normal; word-break: break-all; }
}