:root { --h0: 100svh; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-0); }
body {
  margin: 0; background: var(--surface-0); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
p, figure, ol, ul { margin: 0; }
h1, h2, h3 { margin: 0; }
button { border-radius: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--surface-0); padding: 10px 14px; font-family: var(--mono); font-size: var(--t-label); }
.skip:focus { top: 12px; }

.frame { padding-inline: var(--edge); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.section { padding-block: var(--sp-5); border-top: 1px solid var(--hairline); }

.eyebrow { font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: var(--t-eyebrow-tr); text-transform: uppercase; color: var(--secondary); margin: 0 0 var(--sp-2); }
.d-hero, .d-sec { font-family: var(--disp); font-weight: 400; color: var(--ink-strong); font-optical-sizing: auto; text-wrap: balance; }
.d-hero { font-size: var(--t-hero); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-tr); }
.d-sec { font-size: var(--t-sec); line-height: var(--t-sec-lh); letter-spacing: var(--t-sec-tr); }
.ts { font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); font-variant-numeric: tabular-nums; color: var(--secondary); }
.note { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--faint); }
.synthetic { font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); color: var(--secondary); }
.cite { font-size: var(--t-small); color: var(--secondary); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; display: inline-block; padding-block: 4px; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
.cite:hover { color: var(--ink); text-decoration-color: var(--ink); }
.textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 5px; font-size: var(--t-body); padding-block: 6px; transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.textlink:hover { text-decoration-color: var(--ink); }
.arrow { display: inline-block; width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.tri { display: inline-block; width: 0.7em; height: 0.6em; fill: currentColor; margin-right: 0.25em; }
.up { color: var(--movement-up-text); }
.dn { color: var(--down-text); }
.flat { color: var(--tier-clear-text); }
.live-dot { width: 6px; height: 6px; background: var(--accent); display: inline-block; flex: none; }
.js:not(.rm) .live-dot { animation: live 2.4s var(--ease-in-out) infinite; }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.ticks { position: relative; border: 1px solid var(--hairline); }
.ticks::before, .ticks::after { content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; }
.ticks::before { top: -1px; left: -1px; border-top: 1px solid var(--secondary); border-left: 1px solid var(--secondary); }
.ticks::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--secondary); border-right: 1px solid var(--secondary); }


.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; box-sizing: border-box;
  font-family: var(--mono); font-weight: 600; font-size: var(--t-btn); letter-spacing: var(--tr-label); text-transform: uppercase;
  border: 1px solid var(--ink); padding: 0 18px; background: var(--ink); color: var(--surface-0);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn-outline:hover { background: transparent; border-color: var(--ink); }
.btn:not(.btn-outline):hover { background: var(--ink-strong); }

.btns { display: flex; flex-wrap: wrap; gap: 12px; }


.masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.masthead-in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
.wordmark { height: 28px; width: auto; aspect-ratio: 444 / 82; }
.mainnav { display: flex; align-items: center; gap: 28px; }
.navlink { font-family: var(--mono); font-weight: 600; font-size: var(--t-btn); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; text-underline-offset: 6px; text-decoration-color: var(--hairline-strong); }
.navlink:hover { text-decoration-line: underline; }
.caret { width: 9px; height: 6px; fill: var(--faint); margin-left: 6px; }
.navtoggle { display: none; width: 44px; height: 44px; background: none; border: 0; padding: 11px; cursor: pointer; }
.navtoggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; }
@media (max-width: 960px) { .wordmark { height: 22px; } .mainnav { display: none; } .navtoggle { display: block; } }


.run { position: relative; }
.stage-track { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stage { position: sticky; top: calc(-1 * var(--h0)); height: calc(var(--h0) + 100svh); }
.slot { position: absolute; left: 0; right: 0; top: 0; height: 100%; overflow: hidden; z-index: 0; }
.story-static-on .slot, .capture-poster .slot, .capture-postersrc .slot { height: 100vh; height: 100svh; }
.globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.story-svg-wrap, .story-pins { position: absolute; left: 0; right: 0; top: var(--h0); height: 100vh; height: 100svh; z-index: 1; pointer-events: none; }
.story-svg { width: 100%; height: 100%; overflow: visible; }


.hero { position: relative; z-index: 1; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; display: flex; flex-direction: column; padding-top: var(--nav-h); }
.hero-grid { flex: 1 1 0; min-height: 0; width: 100%; align-items: center; --g-d: min(67.5svh, 56vw); --t-cols: 6; --g-gap: 0.85; }
.hero-grid { align-content: center; grid-template-rows: auto auto; }
.hero-text { grid-column: 1 / span var(--t-cols); grid-row: 1; align-self: end; position: relative; z-index: 1; }
.d-hero { max-width: none; }
.hero-sub { margin-top: var(--sp-3); font-size: var(--t-lead); line-height: var(--t-lead-lh); color: var(--ink-soft); max-width: 26em; }
.ticker { max-width: calc(5 * (var(--col) + var(--gut)) - var(--gut)); }
.hero .btns { margin-top: var(--sp-4); }

.g-anchor { position: absolute; left: calc(var(--edge) + var(--t-cols) * (var(--col) + var(--gut)) - var(--gut) + var(--g-gap) * var(--col) + var(--g-d) / 2); top: calc(var(--nav-h) + (100% - var(--nav-h)) / 2); width: 0; height: 0; }
.poster { position: absolute; left: 0; top: 0; width: calc(var(--g-d) * 1.3); height: calc(var(--g-d) * 1.3); max-width: none; transform: translate(-50%, -50%); z-index: 0; }
.globe-on .poster { visibility: hidden; }
.hero-note { position: absolute; left: var(--edge); bottom: 18px; z-index: 2; margin: 0; text-align: left; }
@media (max-width: 720px) { .hero-note { position: relative; left: auto; bottom: auto; order: 2; max-width: none; margin: 0; padding: 0 var(--edge) 14px; text-align: left; background: var(--surface-0); } }

.gp-card { position: fixed; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: var(--surface-0); border: 1px solid var(--hairline-strong); white-space: nowrap; font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); font-variant-numeric: tabular-nums; color: var(--ink); pointer-events: none; }
.gp-card[hidden] { display: none; }
.gc-name { font-family: var(--sans); font-weight: 600; font-size: var(--t-small); letter-spacing: 0; color: var(--ink-strong); }
.gc-score { font-weight: 600; color: var(--ink-strong); }
.gc-band { text-transform: capitalize; }
#gp-list button { all: unset; }
@media (max-width: 1180px) { .hero-grid { --t-cols: 6; --g-gap: 0.55; --g-d: min(67.5svh, 54vw); } }
@media (min-width: 1920px) { .hero-grid { --t-cols: 5; } }
@media (min-width: 2400px) {
  .btn { height: 60px; font-size: 16px; padding-inline: 26px; }
}
@media (max-width: 720px) {
  .hero { height: auto; min-height: 100svh; }
  .hero-grid { flex: 1 0 auto; display: flex; flex-direction: column; align-items: stretch; --g-d: 85vw; }
  .g-anchor { position: relative; left: auto; top: auto; order: 0; width: 100%; height: calc(var(--g-d) * 1.08); flex: none; }
  .poster { left: 50%; top: calc(var(--g-d) * 0.54); }
  .hero-text { order: 1; flex: 1 0 auto; align-self: stretch; margin-inline: calc(-1 * var(--edge)); padding: 0 var(--edge) var(--sp-3); background: linear-gradient(180deg, var(--surface-0-a90) 0, var(--surface-0) 40px); }
  .hero-sub { margin-top: var(--sp-2); font-size: var(--t-body); line-height: var(--t-body-lh); }
  .hero .btns { margin-top: var(--sp-3); }
}


.ticker { position: relative; z-index: 2; grid-column: 1 / span var(--t-cols); grid-row: 2; margin-top: var(--sp-5); min-width: 0; height: 72px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-label-tight); text-transform: uppercase; white-space: nowrap; display: grid; grid-template-rows: 30px 1fr; }
.tk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--hairline); color: var(--secondary); }
.tk-stamp { min-width: 0; overflow: hidden; text-overflow: clip; font-variant-numeric: tabular-nums; }
.tk-live { color: var(--accent); font-weight: 600; letter-spacing: var(--tr-label); margin-right: 4px; }
.tk-pause { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--hairline-strong); color: var(--secondary); cursor: pointer; padding: 0; flex: none; transition: color var(--dur-fast) var(--ease-out); }
.tk-pause:hover { color: var(--ink); }
.tk-pause svg { width: 9px; height: 9px; fill: currentColor; }
.tk-view { min-width: 0; height: 100%; overflow: hidden; }
.tk-track { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; width: max-content; will-change: transform; }
.tk-item, .tk-tag { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px 0 0; margin-right: 16px; position: relative; }
.tk-item::after, .tk-tag::after { content: ''; position: absolute; right: 0; top: 10px; bottom: 10px; width: 1px; background: var(--hairline); }
.tk-tag { color: var(--faint); }
.tk-out { visibility: hidden; }
.tk-mk { display: none; }
.mk-fresh .tk-mk { display: flex; }
.tk-l { color: var(--secondary); }
.tk-v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-c { font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-pend { color: var(--faint); }
.tk-note { color: var(--secondary); text-transform: none; letter-spacing: 0; white-space: normal; width: min(330px, calc(100vw - 2 * var(--edge) - 8px)); line-height: 1.3; }
.rm .tk-view { overflow-x: auto; }
@media (max-width: 720px) {
  .ticker { order: -1; margin: 0 0 var(--sp-1); flex: none; max-width: none; }
}


.story { position: relative; z-index: 1; height: 300vh; height: 300svh; }
.story-copy { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 1; pointer-events: none; }
.story-copy::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface-0) 0, var(--surface-0-a92) calc(var(--fe, 720px) * 0.55), var(--surface-0-a90) calc(var(--fe, 720px) * 0.7), transparent var(--fe, 720px)); opacity: var(--fade, 1); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--surface-0) var(--mtop, 0px)); mask-image: linear-gradient(180deg, transparent 0, var(--surface-0) var(--mtop, 0px)); }

.story-in { position: relative; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); grid-template-rows: auto auto 1fr auto; padding-top: calc(var(--nav-h) + 8px); padding-bottom: calc(var(--cl-h, 92px) + 28px); }
.story-in > * { grid-column: 1 / span 4; }

.story-in { z-index: 1; }
.story-copy::after { content: ''; position: absolute; left: 0; top: 0; z-index: 0; width: calc(var(--he, 0px) + 300px); height: calc(var(--hb, 0px) + 200px); background: radial-gradient(ellipse 100% 100% at 0 0, var(--surface-0) 0, var(--surface-0) 66%, var(--surface-0-a92) 74%, transparent 100%); opacity: var(--fade, 1); pointer-events: none; }
.no-js .story-copy::after, .story-static-on .story-copy::after, .capture-closure .story-copy::after { display: none; }
@media (max-width: 720px) { .story-copy::after { display: none; } }

@media (min-width: 721px) { .story-in > .story-h { grid-column: 1 / span 6; } }
.beats { list-style: none; padding: 0; position: relative; align-self: center; margin-top: 0; min-height: 5em; }
.beat { position: absolute; left: 0; top: 0; right: 0; font-family: var(--disp); font-size: calc(var(--t-sec) * 0.78); line-height: 1.22; color: var(--ink); max-width: 15em; padding-left: 18px; }
.beat::before { content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 2px; background: var(--accent); transform-origin: top; }
.beat-close { color: var(--ink-soft); }
.js:not(.story-static-on) .beat { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js:not(.story-static-on) .beat::before { transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-out); }
.js:not(.story-static-on) .beat.on { opacity: 1; transform: none; }
.js:not(.story-static-on) .beat.on::before { transform: scaleY(1); }

.cl-lane { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.cl-break { fill: none; stroke: var(--ink-strong); stroke-width: 2; stroke-linecap: butt; }
.cl-ship { fill: var(--ink-strong); stroke: var(--surface-0); stroke-width: 1; paint-order: stroke; }
.cl-ship.q { fill: var(--tier-extreme); }
.cl-arc { fill: none; stroke: var(--secondary); stroke-width: 1.5; stroke-linecap: round; }
.cl-ring { fill: var(--surface-0); stroke: var(--ink); stroke-width: 1.5; }
.pin { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); will-change: transform, opacity; }
.pin.on { opacity: 1; }
.pin-in { position: absolute; white-space: nowrap; font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--t-label-tr); line-height: 1.45; color: var(--ink-strong); text-transform: uppercase; text-shadow: 0 0 3px var(--surface-0), 0 0 6px var(--surface-0); }
.pin-in .stamp { display: block; color: var(--ink-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.pin-area .pin-in { color: var(--secondary); letter-spacing: 3px; font-weight: 400; }
.story-copy .pin-statw { z-index: 1; }
.stat { display: block; max-width: 22em; }
.stat-num { display: block; font-family: var(--mono); font-size: var(--t-stat); line-height: 0.95; font-weight: 400; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-line { display: block; margin: calc(var(--t-stat) * 0.22) 0 2px; font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--ink-strong); }
.pin-stat { white-space: normal; width: min(340px, 26vw); font-family: var(--sans); font-weight: 400; letter-spacing: 0; text-transform: none; text-shadow: 0 0 3px var(--surface-0), 0 0 8px var(--surface-0), 0 0 14px var(--surface-0); }
.pin-stat .cite, .stat .cite { color: var(--ink); font-weight: 500; }
.footnote { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--secondary); max-width: 34em; }
.pin-foot { grid-row: 4; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); margin-top: var(--sp-2); }
.pin-foot.on { opacity: 1; }

.cl-inst { position: absolute; left: var(--fe, 50%); right: var(--edge); bottom: 24px; height: var(--cl-h, 92px); pointer-events: auto; display: grid; grid-template-rows: auto 1fr; gap: 12px; font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); color: var(--secondary); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.cl-inst.on { opacity: 1; }
.cl-counts { display: flex; align-items: baseline; gap: 28px; white-space: nowrap; }
.cl-c { display: inline-flex; align-items: baseline; gap: 10px; text-transform: uppercase; }
.cl-v { font-size: var(--t-lead); color: var(--ink-strong); font-weight: 500; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.cl-halt { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.cl-halt.on { opacity: 1; }
.cl-halt .cl-v { color: var(--tier-extreme-text); }
.cl-syn { margin-left: auto; color: var(--secondary); text-transform: uppercase; }
.cl-scrub { position: relative; display: flex; flex-direction: column; cursor: ew-resize; touch-action: none; padding-top: 2px; }
.cl-ends { order: 2; display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--t-eyebrow); color: var(--secondary); }
.cl-rail { order: 1; position: relative; height: 1px; background: var(--hairline-strong); margin-top: 22px; }
.cl-fill { position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.cl-ticks { position: absolute; inset: 0; }
.cl-tick { position: absolute; top: -4px; width: 1px; height: 9px; background: var(--secondary); }
.cl-head { position: absolute; top: -5px; width: 11px; height: 11px; margin-left: -5px; background: var(--surface-0); border: 2px solid var(--ink-strong); }
.cl-t { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: var(--t-label); color: var(--ink-strong); font-weight: 600; white-space: nowrap; }
.cl-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }


.no-js .story, .story-static-on .story { display: flex; flex-direction: column; height: auto; }
.no-js .story-copy, .story-static-on .story-copy, .no-js .story-in, .story-static-on .story-in { display: contents; }
.no-js .cl-inst, .story-static-on .cl-inst { display: none; }
.no-js .story-copy .eyebrow, .story-static-on .story-copy .eyebrow { order: 1; margin: var(--sp-6) var(--edge) var(--sp-2); }
.no-js .story-h, .story-static-on .story-h { order: 2; margin: 0 var(--edge) var(--sp-4); max-width: 24em; }
.no-js .story-static, .story-static-on .story-static { order: 3; }
.no-js .beats, .story-static-on .beats { order: 4; align-self: flex-start; width: calc(100% - 2 * var(--edge)); margin: 0 var(--edge) var(--sp-6); max-width: calc(7 * var(--col) + 6 * var(--gut)); position: static; min-height: 0; counter-reset: b; }
.js:not(.story-static-on) .story-static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.no-js .story-copy::before, .story-static-on .story-copy::before { display: none; }
.no-js .beat, .story-static-on .beat { position: static; max-width: none; padding: 10px 0 10px 32px; border-top: 1px solid var(--hairline); font-family: var(--sans); font-size: var(--t-body); line-height: var(--t-body-lh); counter-increment: b; }
.no-js .beat::before, .story-static-on .beat::before { content: counter(b); position: absolute; margin-left: -32px; background: none; width: auto; top: auto; bottom: auto; font-family: var(--mono); font-size: var(--t-label); color: var(--secondary); padding-top: 3px; }
.no-js .beat-close, .story-static-on .beat-close { border-bottom: 1px solid var(--hairline); }
.no-js .story-static, .story-static-on .story-static { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: 0 var(--edge) var(--sp-4); }
.ss-map { grid-column: 1 / -1; }
.ss-img { width: 100%; height: auto; }
.story-static .stat { grid-column: 1 / span 6; margin-top: var(--sp-3); }
.story-static .footnote { grid-column: 7 / span 6; margin-top: var(--sp-3); align-self: start; }
@media (max-width: 720px) {
  .story { height: 250vh; height: 250svh; }
  .story-copy::before { background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-0-a92) 19%, transparent 27%, transparent 52%, var(--surface-0-a92) 58%, var(--surface-0) 66%); }
  .story-in { padding-top: calc(var(--nav-h) - 24px); padding-bottom: calc(var(--cl-h, 92px) + 20px); }
  .story-in > * { grid-column: 1 / -1; }
  .beats { align-self: end; min-height: 3.6em; }
  .beat { font-size: var(--t-lead); }
  .pin-stat { width: auto; }
  .stat-line { font-size: var(--t-label); }
  .cl-inst { left: var(--edge); bottom: 12px; --cl-h: 88px; }
  .cl-counts { gap: 16px; }
  .cl-syn { display: none; }
  .story-static .stat, .story-static .footnote { grid-column: 1 / -1; }
}


.engine-grid { row-gap: var(--sp-4); align-items: start; }
.engine-head { grid-column: 1 / span 6; }

.engine-frame { grid-column: 1 / span 8; width: 100%; max-width: 842px; background: var(--surface-1); }
.engine-bar { display: flex; align-items: center; gap: 16px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); text-transform: uppercase; color: var(--secondary); }
.engine-kind { color: var(--ink-strong); font-weight: 600; letter-spacing: var(--tr-label); }
.engine-not { margin-left: auto; }
.engine-media { position: relative; aspect-ratio: 840 / 472; }
.engine-still, .eng-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.engine-media.has-clip .engine-still { visibility: hidden; }
.engine-lines { grid-column: 9 / span 4; align-self: end; display: grid; gap: 6px; color: var(--ink-soft); }
.engine-bar > span { white-space: nowrap; }
@media (min-width: 1920px) { .engine-frame { grid-column: 1 / span 6; } .engine-lines { grid-column: 7 / span 4; } }
@media (min-width: 2400px) { .engine-frame { grid-column: 1 / span 5; } .engine-lines { grid-column: 6 / span 4; } }
@media (max-width: 1180px) { .engine-head { grid-column: 1 / span 8; } .engine-frame { grid-column: 1 / -1; } .engine-lines { grid-column: 1 / span 8; align-self: start; } }

@media (max-width: 720px) {
  .engine-head, .engine-lines { grid-column: 1 / -1; }
  .engine-bar { flex-wrap: wrap; height: auto; padding: 7px 12px; column-gap: 12px; row-gap: 2px; }
  .engine-when { order: 3; flex-basis: 100%; }
}
.engine-lines .textlink { margin-left: 6px; }


.pub-head { margin-bottom: var(--sp-4); }
.pub-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--sp-3); padding: var(--sp-3) 28px 20px; }
.pub-left { grid-column: 1 / span 5; min-width: 0; }
.pub-right { grid-column: 6 / span 7; min-width: 0; padding-left: var(--gut); border-left: 1px solid var(--hairline); }
.pub-k { font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); color: var(--secondary); display: flex; gap: 10px; align-items: center; margin-bottom: calc(var(--t-num) * 0.22); }
.beta { border: 1px solid var(--hairline-strong); padding: 0 5px; color: var(--secondary); font-size: var(--t-eyebrow); }
.pub-row { display: flex; align-items: flex-end; gap: calc(var(--t-num) * 0.24) 24px; flex-wrap: wrap; min-height: calc(var(--t-num) * 0.92); }
.pub-num { font-family: var(--mono); font-weight: 400; line-height: var(--t-num-lh); font-size: var(--t-num); letter-spacing: -0.04em; color: var(--ink-strong); font-variant-numeric: tabular-nums; min-width: calc(4ch - 0.1em); } 
.pub-num .pend { font-size: 0.24em; letter-spacing: var(--tr-label); color: var(--faint); font-weight: 600; }
.pub-meta { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; font-family: var(--mono); min-width: 9em; }
.pub-band { font-size: var(--t-lead); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; }
.pub-bandk { font-size: var(--t-eyebrow); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--secondary); }
.pub-chg { display: flex; gap: 18px; margin-top: 8px; font-size: var(--t-label); font-variant-numeric: tabular-nums; color: var(--secondary); }
.pub-chg b { font-weight: 600; }
.pend-s { font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--faint); font-weight: 600; }

.pub-meta { position: relative; }
[data-hri-state="loading"] .pub-meta > .st-live, [data-hri-state="nodata"] .pub-meta > .st-live { display: block; visibility: hidden; }
[data-hri-state="loading"] .pub-meta > .pub-chg, [data-hri-state="nodata"] .pub-meta > .pub-chg { display: flex; }
.pub-meta > .pend-s { position: absolute; left: 0; bottom: 8px; }
.pub-scale { margin-top: calc(var(--t-num) * 0.22); font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--faint); }
.subs { display: grid; margin-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.sub { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 3em 4.2em; column-gap: 10px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--hairline); font-size: var(--t-small); color: var(--ink-soft); }
.sub-v, .hs { font-family: var(--mono); font-size: var(--t-label); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.sub-d, .hm { font-family: var(--mono); font-size: var(--t-label); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub > .missing { grid-column: 2 / -1; text-align: right; }
.missing { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-label); font-weight: 600; color: var(--faint); }
.bar { display: block; height: 3px; background: var(--hairline); min-width: 0; }
.bar i { display: block; height: 100%; width: var(--w); }
.js:not(.rm) .bar i { width: 0; transition: width var(--dur-slow) var(--ease-out); }
.js:not(.rm) .bar.drawn i { width: var(--w); }
.pub-rk { font-size: var(--t-small); color: var(--faint); margin-bottom: 10px; }
.hlist { list-style: none; padding: 0; border-bottom: 1px solid var(--hairline); }
.hr { display: grid; grid-template-columns: 24px minmax(0, 1fr) 3em 4.2em; column-gap: 12px; row-gap: 5px; align-items: center; padding: 8px 0 9px; border-top: 1px solid var(--hairline); }
.fi { width: 24px; height: 24px; display: block; }
.fi-none { border: 1px solid var(--hairline-strong); background: var(--surface-1); }
.hn { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.hn b { font-weight: 500; font-size: var(--t-small); color: var(--ink); }
.hn small { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--secondary); }
.hr .bar { grid-column: 2 / -1; }
.hr-pend .hn b { font-family: var(--mono); font-size: var(--t-eyebrow); }
@media (max-width: 720px) { .hr-pend:nth-child(n+6) { display: none; } }
.pub-out { margin-top: var(--sp-2); }
.pub-slot-msg { font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--faint); text-transform: uppercase; display: none; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.pub-err { grid-column: 1 / -1; display: none; align-items: center; gap: 12px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); padding-bottom: 20px; }
.pub-errk { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-label); font-weight: 600; color: var(--ink); width: 100%; }
.pub-errb { color: var(--ink-soft); max-width: var(--measure); flex: 1 1 20em; }
.retry { height: 40px; padding: 0 16px; font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-label); color: var(--accent); background: none; border: 1px solid var(--hairline-strong); cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.retry:hover { color: var(--ink); }
.pub-foot { grid-column: 1 / -1; display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--hairline); padding-top: 14px; }
.live-mark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 600; color: var(--ink); }

#pub[data-fresh="0"] .live-mark { visibility: hidden; }
[data-hri-state="loading"] .pub-foot > .live-mark, [data-hri-state="nodata"] .pub-foot > .live-mark { display: inline-flex; visibility: hidden; }
.pend { font-family: var(--mono); font-weight: 600; letter-spacing: var(--tr-label); color: var(--faint); }
[data-hri-state] .st-loading, [data-hri-state] .st-nodata { display: none; }
[data-hri-state="loading"] .st-live, [data-hri-state="nodata"] .st-live { display: none; }
[data-hri-state="loading"] .st-loading { display: inline; }
[data-hri-state="nodata"] .st-nodata { display: inline; }
#pub[data-err="1"]:not([data-hri-state="loading"]) .pub-err { display: flex; }
#pub[data-list="0"] .hlist { display: none; }
#pub[data-list="0"] #pub-list-msg { display: block; }
@media (max-width: 1180px) { .pub-left { grid-column: 1 / span 6; } .pub-right { grid-column: 7 / span 6; padding-left: 16px; } }
@media (max-width: 900px) {
  .pub-panel { padding: 20px 16px 16px; }
  .pub-left, .pub-right { grid-column: 1 / -1; }
  .pub-right { padding-left: 0; border-left: 0; }
}


.caps-grid { row-gap: var(--sp-4); align-items: start; }
.caps-head { grid-column: 1 / span 5; grid-row: 1; }
.caps-list { grid-column: 1 / span 5; grid-row: 2; }
.caps-vis { grid-column: 6 / span 7; grid-row: 1 / span 2; position: sticky; top: calc(50svh - 330px); }
.cap, .cap-q { position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 8px; width: 100%; text-align: left; padding: 20px 0 20px 18px; background: none; border: 0; border-top: 1px solid var(--hairline); color: var(--ink); font: inherit; cursor: pointer; }
.cap-q { cursor: default; border-bottom: 1px solid var(--hairline); }
.cap::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-slow) var(--ease-out); }
.cap[aria-selected="true"]::before { transform: scaleY(1); }
.cap-i { grid-row: 1; font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); color: var(--secondary); padding-top: 6px; font-variant-numeric: tabular-nums; }
.cap-n { grid-column: 2; display: block; font-size: var(--t-lead); line-height: var(--t-lead-lh); color: var(--secondary); transition: color var(--dur-base) var(--ease-out); }
.cap-q .cap-n { grid-column: 2; grid-row: 1; }
.cap-q .cap-qs { grid-row: 2; }
.cap-does, .cap-qs { grid-column: 2; display: block; margin-top: 6px; font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--secondary); max-width: var(--measure); transition: color var(--dur-base) var(--ease-out); }
.cap[aria-selected="true"] .cap-n, .cap:hover .cap-n { color: var(--ink-strong); }
.cap[aria-selected="true"] .cap-does { color: var(--ink); }
.cap[aria-selected="true"] .cap-i { color: var(--accent); }

.caps-panel { padding: 16px; display: grid; }
.caps-panel > .inst { grid-area: 1 / 1; min-width: 0; }
.inst-frame { position: relative; width: 100%; aspect-ratio: 720 / 440; }
.inst-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; min-height: 32px; }
.morph-out, .morph-in { transition: none; }
.cap-notes { margin-top: var(--sp-3); min-height: 9.5em; }
.cap-exp { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--ink-soft); max-width: var(--measure); }
.cap-get { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: var(--t-body); color: var(--ink); max-width: var(--measure); }

.cap-getk { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink-strong); }
.seg-b { height: 32px; padding: 0 12px; background: none; border: 1px solid var(--hairline-strong); color: var(--secondary); font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-label); text-transform: uppercase; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.seg-b:hover { color: var(--ink); }

.sar { overflow: hidden; background: var(--surface-1); cursor: ew-resize; touch-action: none; aspect-ratio: 960 / 600; user-select: none; }
.sar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sar-after { clip-path: inset(0 0 0 36%); }
.sar[data-state="loading"] .sar-img, .sar[data-state="error"] .sar-img { visibility: hidden; }
.sar-wait { position: absolute; left: 0; right: 0; top: 50%; text-align: center; color: var(--secondary); }
.sar:not([data-state="live"]) .sar-pass, .sar:not([data-state="live"]) .sar-handle { visibility: hidden; }
.sar[data-state="live"] .sar-wait { display: none; }
.sar[data-state="error"] .sar-wait { display: none; }
.sar-handle { position: absolute; top: 0; bottom: 0; left: 36%; width: 0; }
.sar-handle i { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--ink-strong); }
.sar-handle::after { content: ''; position: absolute; top: 50%; left: -9px; width: 18px; height: 18px; margin-top: -9px; background: var(--surface-0); border: 1px solid var(--ink-strong); }
.sar-handle:focus-visible { outline: none; }
.sar-handle:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.sar-pass { position: absolute; top: 10px; padding: 2px 6px; background: var(--surface-0-a90); color: var(--ink-strong); }
.sar-l { left: 10px; } .sar-r { right: 10px; }
.sar-marks { position: absolute; inset: 0; pointer-events: none; }
.sar-chg { position: absolute; border: 1px solid var(--accent); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.sar-chg.on { opacity: 1; }
.sar-lab { position: absolute; left: -1px; bottom: calc(100% + 6px); display: grid; gap: 1px; padding: 3px 6px; background: var(--surface-0-a90); font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); color: var(--secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sar-lab b { color: var(--ink-strong); font-weight: 500; text-transform: none; }
.sar-lab.below { bottom: auto; top: calc(100% + 6px); }
.sar-num { position: absolute; left: -1px; top: -1px; transform: translate(-100%, 0); padding: 0 5px; background: var(--surface-0); color: var(--ink-strong); font-family: var(--mono); font-size: var(--t-label); }
.sar-key { display: none; list-style: none; padding: 0; margin: 10px 0 0; font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); color: var(--secondary); }
.sar-key li { padding: 3px 0; }
.sar-key b { color: var(--ink-strong); font-weight: 500; margin-right: 8px; }
.sar-lab.right { left: auto; right: -1px; text-align: right; }
.sc-svg, .ew-svg { width: 100%; height: 100%; overflow: visible; }

.api-frame { aspect-ratio: auto; min-height: 360px; display: flex; flex-direction: column; font-family: var(--mono); }
.api-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.api-langs { display: inline-flex; gap: 4px; }
.api-lang, .api-copy { height: 28px; padding: 0 10px; background: none; border: 1px solid var(--hairline-strong); color: var(--secondary); font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-label); text-transform: uppercase; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.api-lang[aria-pressed="true"] { color: var(--ink-strong); border-color: var(--ink-soft); }
.api-lang:hover, .api-copy:hover { color: var(--ink); }
.api-req { margin: 14px 0 0; font-family: var(--mono); font-size: var(--t-label); line-height: 1.6; color: var(--ink-strong); white-space: pre-wrap; word-break: break-all; }
.api-st { margin: 10px 0 12px; }
.api-body { margin: 0; font-family: var(--mono); font-size: var(--t-label); line-height: 1.65; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; font-variant-numeric: tabular-nums; }
.api-body .k { color: var(--secondary); }
.api-body .n { color: var(--ink-strong); }
.api-caret { display: inline-block; width: 7px; height: 1.1em; vertical-align: -0.2em; background: var(--accent); }
.synthetic::before { content: ''; display: inline-block; width: 8px; height: 1px; background: var(--faint-line); vertical-align: middle; margin-right: 8px; }
.real::before { background: var(--accent-6); }

.sv-field { fill: var(--surface-0); }
.sv-edge { fill: none; stroke: var(--faint-line); stroke-width: 1; transition: stroke var(--dur-base) var(--ease-out); }
.sv-edge.dep { stroke: var(--ink-strong); stroke-width: 1.5; }
.sv-edge-hot { fill: none; stroke: var(--tier-extreme); stroke-width: 1.5; }
.hovering .sv-edge-hot { stroke-opacity: 0.25; }
.sv-node { fill: var(--surface-0); stroke: var(--secondary); stroke-width: 1.25; }
.sv-port { fill: var(--surface-2); }
.sv-node.hot { stroke: var(--tier-extreme); stroke-width: 1.75; }
.sv-node.src { fill: var(--tier-catastrophic); stroke: none; }
.sv-n { cursor: pointer; outline: none; }
.sv-n .sv-hit { fill: transparent; }
.sv-n.dep .sv-node { stroke: var(--ink-strong); }
.sv-n:focus-visible .sv-hit { stroke: var(--accent); stroke-width: 1.5; }
.sv-lab { font-family: var(--sans); font-size: 15px; fill: var(--ink-soft); }
.sv-lab-dim { font-family: var(--sans); font-size: 15px; fill: var(--secondary); }
.sv-ts { font-family: var(--mono); font-size: 14px; fill: var(--ink-strong); letter-spacing: 0.5px; }
.sv-ts-dim { font-family: var(--mono); font-size: 14px; fill: var(--secondary); letter-spacing: 0.5px; }
.sv-big { font-family: var(--mono); font-size: 44px; fill: var(--ink-strong); letter-spacing: -0.5px; }
.sv-rule { stroke: var(--hairline-strong); stroke-width: 1; }
.sv-route { fill: none; stroke: var(--accent); stroke-width: 1.5; }
@media (max-width: 1180px) {
  .section { padding-block: var(--sp6-7); }   
  .caps-head, .caps-list, .caps-vis { grid-column: 1 / -1; grid-row: auto; }
  .caps-vis { position: static; max-width: 760px; }
}
@media (max-width: 720px) {
  .section { padding-block: var(--sp6-7); }   
  .sar-key { display: block; }
  .caps-panel { padding: 10px; }
  .sv-lab, .sv-lab-dim { font-size: 24px; }
  .sv-ts, .sv-ts-dim { font-size: 23px; }
  .sv-big { font-size: 66px; }
}


.eng-h { max-width: 18em; margin-bottom: var(--sp-4); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); position: relative; padding-top: 28px; }
.steps::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink-soft); transform: scaleX(0); transform-origin: left; transition: transform calc(var(--dur-slow) * 3) var(--ease-out); }
.steps.drawn::before, .rm .steps::before, .no-js .steps::before { transform: none; }
.step { position: relative; display: grid; gap: 8px; align-content: start; }
.step::before { content: ''; position: absolute; left: 0; top: -32px; width: 9px; height: 9px; background: var(--surface-0); border: 1px solid var(--ink-soft); }
.step-n { font-family: var(--disp); font-size: calc(var(--t-sec) * 0.78); line-height: 1.2; font-weight: 400; color: var(--ink-strong); }
.step-d { font-size: var(--t-lead); line-height: var(--t-lead-lh); color: var(--ink-soft); max-width: 18em; }
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; row-gap: var(--sp-3); padding-top: 0; padding-left: 28px; }
  .steps::before { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }
  .steps.drawn::before { transform: none; }
  .step::before { left: -28px; top: 7px; }
}


.demo-grid { row-gap: var(--sp-4); align-items: start; }
.ask { grid-column: 1 / span 5; }
.ask-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.ask-list li { padding: 14px 0; border-top: 1px solid var(--hairline); font-size: var(--t-lead); line-height: var(--t-lead-lh); color: var(--ink-soft); }
.ask-list li:last-child { border-bottom: 1px solid var(--hairline); }
.reply { margin-top: var(--sp-3); font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--t-label-tr); text-transform: uppercase; color: var(--secondary); }
.form-card { grid-column: 7 / span 6; padding: 28px 28px 24px; container-type: inline-size; }
.form-title { font-family: var(--sans); font-weight: 600; font-size: var(--t-lead); color: var(--ink-strong); margin: 0 0 8px; }
.form-lead { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--secondary); margin: 0 0 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.field-wide { grid-column: 1 / -1; }
@container (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--secondary); margin-bottom: 6px; }
.field .opt, .field .hint { font-size: var(--t-label); letter-spacing: 0; color: var(--secondary); margin-left: 6px; }
.field .hint { text-transform: none; }
.field input { width: 100%; border: 1px solid var(--hairline-strong); background: var(--surface-0); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); padding: 11px 12px; border-radius: 0; text-overflow: ellipsis; }
.field input::placeholder { color: var(--faint); }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--ink); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--secondary); margin-top: 14px; text-align: center; }
.form-status { font-size: var(--t-body); color: var(--ink); margin-top: 12px; }
@media (max-width: 1180px) { .ask, .form-card { grid-column: 1 / -1; } }
@media (max-width: 720px) { .form-card { padding: 24px 16px; } }


.footer { position: relative; z-index: 2; background: var(--surface-0); padding-block: var(--sp-4) var(--sp-2); border-top: 1px solid var(--hairline); }
.footer-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--sp-3); }
.footer-cols > :first-child { grid-column: 1 / span 6; }
.footer-cols > .footer-col { grid-column: span 2; }
.footer .wordmark { height: 24px; }
.footer-tag { margin-top: 12px; font-size: var(--t-body); color: var(--secondary); max-width: 26em; }
.footer-head { font-size: var(--t-small); color: var(--faint); margin-bottom: 10px; }
.footer-col a { display: block; font-size: var(--t-body); color: var(--ink-soft); text-decoration: none; padding: 4px 0; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--ink); text-decoration-line: underline; }
.footer-legal { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--t-small); color: var(--faint); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-legal a { color: var(--secondary); text-decoration: none; padding-block: 5px; }
.footer-legal a:hover { text-decoration: underline; }
@media (max-width: 720px) { .footer-cols > :first-child { grid-column: 1 / -1; } .footer-cols > .footer-col { grid-column: span 6; } }

.engine, .pub, .caps, .eng, .demo { position: relative; z-index: 2; background: var(--surface-0); }


.review { position: fixed; right: 12px; bottom: 12px; z-index: 50; max-width: calc(100vw - 24px); display: flex; flex-direction: column-reverse; align-items: flex-end; font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: 0.5px; color: var(--ink); }
.no-review .review { display: none; }
.rv-toggle { height: 32px; padding: 0 12px; background: var(--surface-3); color: var(--ink); border: 1px solid var(--hairline-strong); font: inherit; text-transform: uppercase; letter-spacing: var(--tr-label); cursor: pointer; }
.rv-body { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--hairline-strong); max-width: 1080px; }
.rv-toggle[aria-expanded="false"] + .rv-body { display: none; }
.rv-g { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rv-k { color: var(--ink-soft); text-transform: uppercase; letter-spacing: var(--tr-label); margin-right: 4px; }
.rv-b, .rv-a { height: 28px; padding: 0 9px; background: none; border: 1px solid var(--hairline-strong); color: var(--ink-soft); font: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.rv-b[aria-pressed="true"] { color: var(--surface-0); background: var(--ink); border-color: var(--ink); }
.rv-b:hover, .rv-a:hover { color: var(--ink); }
.rv-b[aria-pressed="true"]:hover { color: var(--surface-0); }


.capture .masthead, .capture .hero-text, .capture .ticker, .capture .review, .capture .poster { visibility: hidden; }
.capture-closure .story-copy::before, .capture-closure .story-in, .capture-closure .cl-inst { visibility: hidden; }
.capture-postersrc .hero-grid { --g-d: 800px; }
.capture-postersrc .g-anchor { left: 50%; top: 50%; position: absolute; width: 0; height: 0; order: 0; }
.capture-poster .story-svg-wrap, .capture-poster .story-pins, .capture-postersrc .story-svg-wrap, .capture-postersrc .story-pins { visibility: hidden; }


.no-js .pub-err, .no-js .caps-vis, .no-js .pub-left, .no-js .pub-rk, .no-js .hlist, .no-js .pub-slot-msg, .no-js .pub-foot, .no-js .tk-pause { display: none; }
.no-js .caps-list { grid-column: 1 / span 8; }
.no-js .pub-right { grid-column: 1 / -1; border-left: 0; padding-left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}