/* /value-chain/data/ (prefix vcd-), part 1: shell, rail, splash orbit, buffer bench, architecture film.
   Imported only by src/pages/value-chain/data.astro. Choreography: control/choreo/value-chain__data.md.
   Motif: the five-layer orbit and its one event (illustrative 0x00A41F), geometry from src/data/vc-data/orbit.ts.
   Stability: HTML is the composed end state; pre-states only under :root[data-m-go] (and [data-vcd-ready], set by the
   page script before any staged visual comes near the viewport); transform, opacity, clip-path and filter only;
   native sticky, never counter-translation; scroll-driven rules as longhands inside @supports. */

:root { --vcd-oh: min(820px, calc(100svh - 80px)); }
.vcd-sec, .vcd-rail, .vcd-sp {
  --vcd-night: #072d2b;
  --vcd-deep: #0a3d3a;
  --vcd-forest: #0e4d4a;
  --vcd-abyss: #050f0f;
  --vcd-sage: #6bb68f;
  --vcd-sage-lt: #a6dcbf;
  --vcd-leaf: #3f8f6b;
  --vcd-ochre: #c98a2b;
  --vcd-ochre-lt: #f0b45c;
  --vcd-ind: #2c3e7a;
  --vcd-ind-lt: #b9c6ef;
  --vcd-paper: #f6f4ef;
  --vcd-mist: #e2ebe6;
  --vcd-ink: #25302e;
  --vcd-ink-2: #3a4744;
  --vcd-on-dark: #f3f6f2;
  --vcd-on-dark-2: #d8e6de;
  --vcd-mono: var(--gft-font-mono, ui-monospace, monospace);
  --vcd-gutter: clamp(16px, 4.5vw, 72px);
  --vcd-e: cubic-bezier(.16, 1, .3, 1);
  --vcd-e2: cubic-bezier(.65, 0, .35, 1);
}

/* ------------------------------------------------------------------ shell */
.vcd-sec { position: relative; isolation: isolate; overflow: clip; color: var(--vcd-ink); padding-block: clamp(64px, 8vw, 120px); }
.vcd-wrap { position: relative; z-index: 1; width: min(1440px, calc(100% - 2 * var(--vcd-gutter))); margin-inline: auto; }
.vcd-sec--night { background: var(--vcd-night); color: var(--vcd-on-dark); }
.vcd-sec--deep { background: var(--vcd-deep); color: var(--vcd-on-dark); }
.vcd-sec--forest { background: var(--vcd-forest); color: var(--vcd-on-dark); }
.vcd-sec--abyss { background: var(--vcd-abyss); color: var(--vcd-on-dark); }
.vcd-sec--paper { background: var(--vcd-paper); }
.vcd-sec--mist { background: var(--vcd-mist); }
.vcd-sec p { max-width: none; }
.vcd-sec [hidden] { display: none !important; }
/* The named block entrances are staged by this page on its own visuals (triggered at about 38% in view): the kit's
   whole-section lift is neutralised so the section never dims as a slab. */
:root[data-m-go] .vcd-sec[data-m]:not([data-m-in]) { opacity: 1; transform: none; }
:root[data-m-go] .vcd-sec[data-m][data-m-in] { animation-name: none; }

.vcd-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 600 13px/1.5 var(--vcd-mono); letter-spacing: .1em; text-transform: uppercase; }
.vcd-eyebrow::before { content: ''; flex: 0 0 28px; height: 2px; background: var(--vcd-ochre); }
.vcd-h2 { font-size: clamp(2rem, 3.2vw, 3.3rem); line-height: 1.06; letter-spacing: -.045em; max-width: 22ch; text-wrap: balance; }
.vcd-h3 { font-size: clamp(1.3rem, 1.7vw, 1.65rem); line-height: 1.18; letter-spacing: -.03em; }
.vcd-lede { margin: 18px 0 0; font-size: 17px; line-height: 1.6; max-width: 52ch; color: var(--vcd-ink-2); }
.vcd-lede--dark { color: var(--vcd-on-dark-2); }
.vcd-body { margin: 0; font-size: 17px; line-height: 1.6; }
.vcd-body--dark { color: var(--vcd-on-dark-2); }
.vcd-label { margin: 0; font: 600 13px/1.4 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; }
.vcd-legend { padding: 0; margin: 0 0 10px; font: 600 13px/1.4 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; }
.vcd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.vcd-sec .gft-cite { font-size: 13px; }
.vcd-sec--night .gft-cite, .vcd-sec--deep .gft-cite, .vcd-sec--forest .gft-cite, .vcd-sec--abyss .gft-cite { color: var(--vcd-on-dark); }
.vcd-test { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 8px 18px 0 0; font-size: 15px; font-weight: 650; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.vcd-test span { font: 600 13px/1 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 6px 8px; border: 1px solid var(--vcd-ochre); color: inherit; }
.vcd-test--dark span { border-color: var(--vcd-ochre-lt); }
.vcd-slider__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 13px/1.4 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; }
.vcd-slider__l output { font: 700 17px/1 var(--vcd-mono); letter-spacing: 0; text-transform: none; color: var(--vcd-ochre-lt); font-variant-numeric: tabular-nums; }
.vcd-sec--paper .vcd-slider__l output, .vcd-sec--mist .vcd-slider__l output { color: #7a4a0c; }
.vcd-sec input[type=range] { width: 100%; accent-color: var(--vcd-ochre); }

/* ------------------------------------------------------------------ rail: one tick per block */
.vcd-rail { position: fixed; left: 4px; top: 50%; translate: 0 -50%; z-index: 35; height: min(52svh, 420px); pointer-events: none; }
.vcd-rail__track { position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: rgb(120 150 140 / .38); }
.vcd-rail__fill { position: absolute; inset: 0; background: var(--vcd-ochre); transform-origin: 50% 0; }
.vcd-rail__ticks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.vcd-rail__tick { position: absolute; left: 0; top: calc(var(--vcd-i) / 7 * 100%); translate: 0 -50%; }
.vcd-rail__tick a { display: flex; align-items: center; gap: 5px; min-height: 44px; min-width: 24px; text-decoration: none; color: inherit; pointer-events: auto; }
.vcd-rail__dot { flex: 0 0 auto; width: 12px; height: 12px; margin-left: 5px; border: 2px solid var(--vcd-ochre); border-radius: 50%; background: var(--vcd-night); transition: scale .3s, background-color .3s; }
.vcd-rail__label { opacity: 0; translate: -6px 0; writing-mode: vertical-rl; rotate: 180deg; padding: 8px 3px; background: var(--vcd-night); color: var(--vcd-on-dark); font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: opacity .3s, translate .3s; }
.vcd-rail__label b { color: var(--vcd-ochre-lt); font-weight: 700; }
.vcd-rail a[aria-current] .vcd-rail__dot { background: var(--vcd-ochre); scale: 1.3; }
.vcd-rail a[aria-current] .vcd-rail__label, .vcd-rail a:hover .vcd-rail__label, .vcd-rail a:focus-visible .vcd-rail__label { opacity: 1; translate: 0 0; }
@media (max-width: 1100px) { .vcd-rail { left: 0; } .vcd-rail__track { left: 0; width: 3px; } .vcd-rail__ticks { display: none; } }
@supports (animation-timeline: scroll()) {
  :root[data-m-go] .vcd-rail__fill { animation-name: vcd-fill; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); }
}
@keyframes vcd-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ------------------------------------------------------------------ 1. splash: the orbit as the set-piece */
.gft-splash[data-splash='vc-b-data'] .gft-splash__structure { inset: 0; }
.gft-splash[data-splash='vc-b-data'] .gft-splash__structure::after { background: linear-gradient(90deg, #072d2b 0%, #072d2bf2 24%, #072d2b00 44%); }
.gft-splash[data-splash='vc-b-data'] h1 { font-size: clamp(2.5rem, 4.05vw, 3.95rem); line-height: 1.02; max-width: min(15ch, 38vw); }
.gft-splash[data-splash='vc-b-data'] h1 .vcd-accent { color: var(--vcd-ochre-lt, #f0b45c); font-weight: 400; letter-spacing: -.02em; }
.gft-splash[data-splash='vc-b-data'] .gft-splash__lede { max-width: min(40ch, 36vw); font-size: 17px; color: #dbe8e1; }
.vcd-sp { position: absolute; inset: 0; pointer-events: none; }
.vcd-sp__orb { position: absolute; top: calc(52% - var(--vcd-oh) / 2); left: 64%; height: var(--vcd-oh); aspect-ratio: 900 / 700; translate: -50% 0; }
.vcd-sp__svg { width: 100%; height: 100%; overflow: visible; }
.vcd-sp__warps line { stroke: #6bb68f; stroke-opacity: .2; stroke-width: 1.2; }
.vcd-sp__cells path { fill: #6bb68f; fill-opacity: .12; }
.vcd-sp__cells path.is-held { fill: #8fd0ad; fill-opacity: .75; }
.vcd-sp__base { fill: none; stroke: #6bb68f; stroke-width: 1.5; }
.vcd-sp__lit { fill: none; stroke: var(--vcd-ochre-lt); stroke-width: 2.6; opacity: 0; transition: opacity .7s; }
.vcd-sp[data-lit='0'] .vcd-sp__ring[data-ring='0'] .vcd-sp__lit,
.vcd-sp[data-lit='1'] .vcd-sp__ring[data-ring='1'] .vcd-sp__lit,
.vcd-sp[data-lit='2'] .vcd-sp__ring[data-ring='2'] .vcd-sp__lit,
.vcd-sp[data-lit='3'] .vcd-sp__ring[data-ring='3'] .vcd-sp__lit,
.vcd-sp[data-lit='4'] .vcd-sp__ring[data-ring='4'] .vcd-sp__lit { opacity: 1; }
.vcd-sp__weft { fill: none; stroke: var(--vcd-ochre); stroke-width: 2; stroke-linecap: round; }
.vcd-sp__dot { fill: var(--vcd-ochre-lt); }
.vcd-sp__halo { fill: none; stroke: var(--vcd-ochre-lt); stroke-width: 1.5; opacity: .3; transition: opacity .5s; }
.vcd-sp[data-lit='0'] .vcd-sp__node[data-ring='0'] .vcd-sp__halo,
.vcd-sp[data-lit='1'] .vcd-sp__node[data-ring='1'] .vcd-sp__halo,
.vcd-sp[data-lit='2'] .vcd-sp__node[data-ring='2'] .vcd-sp__halo,
.vcd-sp[data-lit='3'] .vcd-sp__node[data-ring='3'] .vcd-sp__halo,
.vcd-sp[data-lit='4'] .vcd-sp__node[data-ring='4'] .vcd-sp__halo { opacity: 1; }
.vcd-sp__orbit { transform-box: view-box; transform-origin: 50% 50%; }
.vcd-sp__orbit circle { fill: #d9f3e5; }
.vcd-sp__core { transform-box: fill-box; transform-origin: center; }
.vcd-sp__core path { fill: #0e4d4a; stroke: var(--vcd-sage); stroke-width: 2.5; }
.vcd-sp__corefill { fill: none; stroke: var(--vcd-sage); stroke-width: 1; opacity: .5; }
.vcd-sp__run { opacity: 0; }
.vcd-sp__run circle { fill: #ffd28f; }
.vcd-sp__pk { transform: translateX(calc(var(--lit, 0) * 75px)); transition: transform 1.1s var(--vcd-e2); }
.vcd-sp__pk circle { fill: #ffd28f; }
.vcd-sp__pk .vcd-sp__pkh { fill: none; stroke: #ffd28f; stroke-width: 2; opacity: .6; }
.vcd-sp__key { position: absolute; left: 43.5%; top: 12%; width: min(250px, 19vw); padding: 14px 16px 12px; background: #072d2be8; border: 1px solid #6bb68f59; border-left: 3px solid var(--vcd-ochre); color: var(--vcd-on-dark); }
.vcd-sp__kicker { margin: 0 0 8px; font: 600 13px/1.4 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vcd-sage-lt); }
.vcd-sp__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.vcd-sp__rows li { display: grid; grid-template-columns: 30px 1fr; padding: 4px 6px; border-left: 2px solid transparent; transition: background-color .5s, border-color .5s; }
.vcd-sp__rows b { grid-row: 1 / 3; font: 700 13px/1.6 var(--vcd-mono); color: var(--vcd-ochre-lt); }
.vcd-sp__rows span { font-size: 15px; font-weight: 700; line-height: 1.3; }
.vcd-sp__rows em { font-style: normal; font-size: 13px; line-height: 1.35; color: #c9dcd1; }
.vcd-sp[data-lit='0'] .vcd-sp__rows li[data-ring='0'], .vcd-sp[data-lit='1'] .vcd-sp__rows li[data-ring='1'], .vcd-sp[data-lit='2'] .vcd-sp__rows li[data-ring='2'], .vcd-sp[data-lit='3'] .vcd-sp__rows li[data-ring='3'], .vcd-sp[data-lit='4'] .vcd-sp__rows li[data-ring='4'] { background: #0f4f4a; border-left-color: var(--vcd-ochre-lt); }
.vcd-sp__rows li em { display: block; }
.vcd-sp__ev { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; font: 13px/1.3 var(--vcd-mono); color: var(--vcd-sage-lt); }
.vcd-sp__ev b { font: 700 22px/1.1 var(--vcd-mono); color: #ffd28f; letter-spacing: .02em; }
.vcd-sp__ev i { font-style: normal; }

/* Splash entrance, three phases, from first paint (on screen at load): warps draw, rings reveal outer to inner, the
   event runs the weft from L1 to the core while the key lights row by row. Settled by 900 ms. */
:root[data-m-go] .vcd-sp__warps line { transform-box: fill-box; transform-origin: 50% 0; animation: vcd-sp-warp 300ms var(--vcd-e) calc(var(--i) * 30ms) 1 normal backwards; }
:root[data-m-go] .vcd-sp__ring { transform-box: view-box; transform-origin: 50% 50%; animation: vcd-sp-ring 360ms var(--vcd-e) calc(150ms + var(--i) * 80ms) 1 normal backwards; }
:root[data-m-go] .vcd-sp__cells { animation: vcd-fade 400ms ease-out 380ms 1 normal backwards; }
:root[data-m-go] .vcd-sp__node { animation: vcd-fade 200ms ease-out calc(450ms + var(--i) * 80ms) 1 normal backwards; }
:root[data-m-go] .vcd-sp__run { animation: vcd-sp-run 470ms var(--vcd-e2) 430ms 1 normal both; }
:root[data-m-go] .vcd-sp__pk circle { animation: vcd-fade 250ms ease-out 640ms 1 normal backwards; }
:root[data-m-go] .vcd-sp__rows li { animation: vcd-sp-row 260ms var(--vcd-e) calc(450ms + var(--i) * 90ms) 1 normal backwards; }
:root[data-m-go] .vcd-sp__key { animation: vcd-sp-key 420ms var(--vcd-e) 120ms 1 normal backwards; }
@keyframes vcd-sp-warp { from { transform: scaleY(0); } }
@keyframes vcd-sp-ring { from { opacity: 0; transform: scale(.84); } }
@keyframes vcd-fade { from { opacity: 0; } }
@keyframes vcd-sp-run {
  0% { opacity: 1; transform: translate(0, 0); }
  10% { transform: translate(37.5px, -12px); }
  20% { transform: translate(75px, 0); }
  30% { transform: translate(112.5px, 12px); }
  40% { transform: translate(150px, 0); }
  50% { transform: translate(187.5px, -12px); }
  60% { transform: translate(225px, 0); }
  70% { transform: translate(262.5px, 12px); }
  80% { transform: translate(300px, 0); }
  92% { opacity: 1; transform: translate(345px, -6px); }
  100% { opacity: 0; transform: translate(375px, 0); }
}
@keyframes vcd-sp-row { from { opacity: .3; transform: translateX(-10px); } }
@keyframes vcd-sp-key { from { opacity: 0; transform: translateX(-18px); } }
@media (max-width: 1099px) {
  .gft-splash[data-splash='vc-b-data'] .gft-splash__structure { inset: auto 0 56px 0; height: calc(92vw * 7 / 9 * .78 + 196px); }
  .vcd-sp { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .gft-splash[data-splash='vc-b-data'] .gft-splash__structure::after { background: none; }
  .gft-splash[data-splash='vc-b-data'] .gft-splash__content { padding-bottom: calc(92vw * 7 / 9 * .78 + 220px); }
  .gft-splash[data-splash='vc-b-data'] h1 { font-size: clamp(2.1rem, 8.6vw, 3.4rem); max-width: 16ch; }
  .gft-splash[data-splash='vc-b-data'] .gft-splash__lede { max-width: 42ch; }
  .vcd-sp__orb { position: relative; top: auto; left: auto; translate: none; flex: none; width: 92vw; height: calc(92vw * 7 / 9 * .78); aspect-ratio: auto; overflow: clip; }
  .vcd-sp__svg { height: auto; aspect-ratio: 900 / 700; }
  .vcd-sp__key { position: relative; left: auto; top: auto; width: calc(100% - 32px); padding: 8px 12px; }
  .vcd-sp__rows li { padding: 1px 6px; }
  .vcd-sp__ev { margin-top: 4px; }
  .vcd-sp__rows span { font-size: 14px; }
  .vcd-sp__rows em { display: none; }
  .vcd-sp__kicker { display: none; }
}

/* ------------------------------------------------------------------ 2. buffer bench */
.vcd-bench { padding: 0; }
.vcd-bench__frame { position: relative; min-height: max(100svh, 860px); }
.vcd-bench__orb { position: absolute; top: 0; left: 64%; height: var(--vcd-oh); aspect-ratio: 900 / 700; translate: -50% 0; perspective: 1500px; pointer-events: none; }
.vcd-bench__tilt { position: absolute; inset: 0; transform-origin: 50% 46%; }
.vcd-bo { width: 100%; height: 100%; overflow: visible; }
.vcd-bo__ring circle { fill: none; stroke: #6bb68f; stroke-width: 1.6; transition: stroke .5s, opacity .5s; }
.vcd-bo__ring[data-st='lit'] circle { stroke: #9fe0bd; stroke-width: 2.6; }
.vcd-bo__ring[data-st='wait'] circle { stroke: var(--vcd-ochre-lt); stroke-dasharray: 10 9; stroke-width: 2.2; }
.vcd-bo__ring[data-st='dim'] { opacity: .32; }
.vcd-bo__q { transform-box: view-box; transform-origin: 50% 50%; }
.vcd-bo__cell { fill: #0c4743; stroke: #6bb68f; stroke-opacity: .55; stroke-width: 1; }
.vcd-bo__cell[data-s='off'] { fill: none; stroke-opacity: .2; stroke-dasharray: 3 3; }
.vcd-bo__held { fill: #8fd0ad; opacity: 0; transition: opacity .35s ease-out; transition-delay: var(--d, 0ms); }
.vcd-bo__held[data-on] { opacity: 1; }
.vcd-bo__lost { fill: url(#vcd-hatch); opacity: 0; transition: opacity .35s ease-out; transition-delay: var(--d, 0ms); }
.vcd-bo__lost[data-on] { opacity: 1; }
.vcd-bo__seg { fill: none; stroke: var(--vcd-ochre); stroke-width: 2.4; stroke-linecap: round; transition: opacity .4s; }
.vcd-bo__seg[data-on='idle'] { opacity: .28; stroke-dasharray: 4 7; }
.vcd-bo__seg[data-on='cut'] { stroke-dasharray: 34 200; opacity: .9; }
.vcd-bo__x { fill: none; stroke: #ffb35a; stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.vcd-bo__wan[data-wan='down'] .vcd-bo__x { opacity: 1; }
.vcd-bo__halo { fill: none; stroke: var(--vcd-ochre-lt); stroke-width: 1.5; opacity: .5; }
.vcd-bo__dot { fill: var(--vcd-ochre-lt); }
.vcd-bo__node[data-st='dim'] { opacity: .35; }
.vcd-bo__node[data-st='wait'] .vcd-bo__dot { fill: #072d2b; stroke: var(--vcd-ochre-lt); stroke-width: 2.5; }
.vcd-bo__core { fill: #0e4d4a; stroke: var(--vcd-sage); stroke-width: 2.5; }
.vcd-bo__pkts circle { fill: #ffd28f; }
.vcd-bench__labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.vcd-bench__lab { position: absolute; left: var(--x); top: calc(50% + 22px); translate: -50% 0; display: grid; justify-items: center; gap: 2px; padding: 4px 6px; background: #072d2bd9; font: 13px/1.2 var(--vcd-mono); color: var(--vcd-on-dark-2); transition: opacity .4s; }
.vcd-bench__lab b { font-size: 15px; color: var(--vcd-on-dark); }
.vcd-bench__lab[data-st='lit'] span { color: #a6e8c3; }
.vcd-bench__lab[data-st='wait'] span { color: var(--vcd-ochre-lt); }
.vcd-bench__lab[data-st='dim'] { opacity: .75; }
.vcd-bench__wanlab { position: absolute; left: var(--x); top: calc(50% - 104px); translate: -50% 0; display: grid; justify-items: center; padding: 6px 10px; background: #072d2bea; border: 1px solid #f0b45c66; }
.vcd-bench__wanlab span { font: 600 13px/1.2 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vcd-on-dark-2); }
.vcd-bench__wanlab b { font: 800 22px/1.15 var(--vcd-mono); color: var(--vcd-ochre-lt); }
.vcd-bench[data-link='up'] .vcd-bench__wanlab b { color: #a6e8c3; }
.vcd-bench[data-link='idle'] .vcd-bench__wanlab b { color: var(--vcd-on-dark-2); font-size: 17px; }
.vcd-bench__ringlab { position: absolute; right: 3%; top: 4%; display: grid; gap: 2px; padding: 8px 12px; background: #072d2bd9; border-left: 2px solid var(--vcd-sage); text-align: left; }
.vcd-bench__ringlab > span { font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vcd-sage-lt); }
.vcd-bench__ringlab b { font-size: 15px; color: var(--vcd-on-dark); }
.vcd-bench__grid { z-index: 2; padding-top: clamp(40px, 6svh, 64px); padding-bottom: 40px; pointer-events: none; }
.vcd-bench__panel { pointer-events: auto; width: min(500px, 37vw); padding: 0 20px 20px 0; background: linear-gradient(90deg, #072d2b 88%, #072d2b00); }
.vcd-h2--bench { font-size: clamp(2rem, 3.2vw, 3rem); max-width: 14ch; }
.vcd-bench__panel .vcd-lede { margin-top: 12px; font-size: 17px; }
.vcd-modes { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.vcd-modes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vcd-mode { position: relative; display: block; cursor: pointer; }
.vcd-mode input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vcd-mode__card { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; min-height: 56px; padding: 8px 12px; border: 1px solid #6bb68f66; background: #0a3d3a; transition: background-color .3s, border-color .3s; }
.vcd-mode__n { font: 700 13px/1 var(--vcd-mono); color: var(--vcd-ochre-lt); }
.vcd-mode__t { font-size: 15px; font-weight: 650; line-height: 1.25; }
.vcd-mode input:checked + .vcd-mode__card { background: #1a6b5a; border-color: #a6e8c3; box-shadow: inset 4px 0 0 var(--vcd-ochre-lt); }
.vcd-mode input:focus-visible + .vcd-mode__card { outline: 3px solid var(--vcd-ochre-lt); outline-offset: 2px; }
.vcd-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.vcd-slider__l { color: var(--vcd-on-dark-2); }
.vcd-bench__reads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.vcd-read { margin: 0; padding: 10px 12px; border: 1px solid #6bb68f59; background: #062724; }
.vcd-read dt { font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vcd-on-dark-2); }
.vcd-read dd { margin: 0; }
.vcd-read__v { position: relative; font: 800 28px/1.15 var(--gft-font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--vcd-on-dark); }
.vcd-read[data-tile='link'] .vcd-read__v { color: var(--vcd-ochre-lt); }
.vcd-bench[data-link='up'] .vcd-read[data-tile='link'] .vcd-read__v { color: #a6e8c3; }
.vcd-bench[data-link='idle'] .vcd-read[data-tile='link'] .vcd-read__v { font-size: 20px; line-height: 1.6; color: var(--vcd-on-dark-2); }
.vcd-bench[data-overflow='true'] .vcd-read[data-tile='over'] .vcd-read__v { color: var(--vcd-ochre-lt); }
.vcd-read__n { font-size: 13px; line-height: 1.35; color: var(--vcd-on-dark-2); }
.vcd-bench__foot { padding-block: 8px clamp(64px, 9svh, 110px); }
.vcd-state { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); padding: 28px 0 0; border-top: 1px solid #6bb68f4d; }
.vcd-state .vcd-h3 { margin-bottom: 12px; max-width: 30ch; }
.vcd-state .vcd-body { color: var(--vcd-on-dark-2); max-width: 60ch; }
.vcd-spec { margin: 0; display: grid; gap: 12px; }
.vcd-spec div { padding-left: 14px; border-left: 2px solid #6bb68f80; }
.vcd-spec dt { font: 600 13px/1.4 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vcd-sage-lt); }
.vcd-spec dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--vcd-on-dark-2); }
.vcd-spec code { font: 14px/1.5 var(--vcd-mono); color: var(--vcd-on-dark); white-space: normal; }
.vcd-bench__note { margin-top: 26px; font-size: 15px; line-height: 1.6; color: var(--vcd-on-dark-2); max-width: 110ch; }

/* Bench entrance "beat-up", staged on the orbit at about 38% in view: the state tiles beat up in reed order, the
   hour-cells deal clockwise in four 90-degree groups, the read-outs roll from blank (script). */
:root[data-m-go][data-vcd-ready] .vcd-bench__orb:not([data-vcd-in]) .vcd-bo__q { opacity: .15; transform: rotate(-28deg); }
:root[data-m-go][data-vcd-ready] .vcd-bench__orb:not([data-vcd-in]) .vcd-bo__ring { opacity: .35; }
:root[data-m-go][data-vcd-ready] .vcd-bench:not([data-vcd-in]) .vcd-mode { opacity: .3; transform: translateY(16px) scaleY(.9); }
:root[data-m-go] .vcd-bench__orb[data-vcd-in] .vcd-bo__q { animation: vcd-deal 520ms var(--vcd-e) calc(140ms + var(--q) * 110ms) 1 normal backwards; }
:root[data-m-go] .vcd-bench__orb[data-vcd-in] .vcd-bo__ring { animation: vcd-ring-in 420ms var(--vcd-e) 0ms 1 normal backwards; }
:root[data-m-go] .vcd-bench[data-vcd-in] .vcd-mode { animation: vcd-beat 420ms var(--vcd-e) calc(var(--i) * 60ms) 1 normal backwards; }
@keyframes vcd-deal { from { opacity: .15; transform: rotate(-28deg); } }
@keyframes vcd-ring-in { from { opacity: .35; } }
@keyframes vcd-beat { from { opacity: .3; transform: translateY(16px) scaleY(.9); } 70% { transform: translateY(-2px) scaleY(1.01); } }
/* Live: the CUT cross flickers once per 3 s while the bench is on screen. */
:root[data-m-go] .vcd-bench[data-vcd-on] .vcd-bo__wan[data-wan='down'] .vcd-bo__x { animation: vcd-flick 3s linear 0s infinite normal none; }
@keyframes vcd-flick { 0%, 88%, 100% { opacity: 1; } 92% { opacity: .2; } 96% { opacity: 1; } }
/* Hand-over 2 to 3: as the bench leaves, its orbit tilts back into the film's plates (scroll-linked, transform only). */
@supports (animation-timeline: view()) {
  @media (min-width: 1100px) {
    .vcd-bench { view-timeline-name: --vcd-bench; view-timeline-axis: block; }
    :root[data-m-go] .vcd-bench__tilt { animation-name: vcd-tilt; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --vcd-bench; animation-range-start: exit 10%; animation-range-end: exit 90%; }
  }
}
@keyframes vcd-tilt { from { transform: rotateX(0deg); opacity: 1; } to { transform: rotateX(64deg) translateY(12%); opacity: .55; } }

@media (max-width: 1099px) {
  .vcd-bench__frame { min-height: 0; display: flex; flex-direction: column; }
  .vcd-bench__orb { position: sticky; top: 0; z-index: 3; order: 0; left: auto; translate: none; width: 100%; height: 60svh; aspect-ratio: auto; background: var(--vcd-night); border-bottom: 1px solid #6bb68f4d; }
  .vcd-bench__tilt { inset: 0; }
  .vcd-bo { position: absolute; left: 50%; top: 50%; width: auto; height: 100%; aspect-ratio: 900 / 700; translate: -50% -50%; max-width: none; }
  .vcd-bench__labels, .vcd-bench__wanlab { display: none; }
  .vcd-bench__ringlab { right: 8px; top: auto; bottom: 8px; }
  .vcd-bench__grid { order: 1; padding-top: 28px; pointer-events: auto; }
  .vcd-bench__panel { width: 100%; padding: 0; background: none; }
  .vcd-modes__grid .vcd-mode__card { min-height: 52px; }
  .vcd-sliders { grid-template-columns: 1fr; }
  .vcd-read__v { font-size: 24px; }
  .vcd-state { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ 3. architecture film */
.vcd-film { padding: 0; }
.vcd-film__rig { display: grid; grid-template-columns: minmax(0, 1fr); }
.vcd-film__rig > * { grid-area: 1 / 1; min-width: 0; }
/* The head is as tall as the stage, so both pins release on the same scroll line: the header text can never stay
   behind over the stage's read-out band while the stage leaves (r8 review, step 10). */
.vcd-film__head { position: sticky; top: 0; align-self: start; z-index: 4; height: 100svh; pointer-events: none; transition: opacity .5s; --hb: #0a3d3a; }
.vcd-film__hin { position: relative; padding: clamp(20px, 3.4svh, 34px) var(--vcd-gutter) 18px calc(var(--vcd-gutter) + 8px); }
.vcd-film__hin > * { max-width: min(64vw, 900px); }
.vcd-film__hin::before { content: ''; position: absolute; inset: 0 0 -36px; z-index: -1; background: linear-gradient(var(--hb) 0 74%, transparent); transition: background-color .9s; }
.vcd-film[data-step='2'] .vcd-film__head, .vcd-film[data-step='3'] .vcd-film__head, .vcd-film[data-step='5'] .vcd-film__head { --hb: #0d4744; }
.vcd-film[data-step='4'] .vcd-film__head { --hb: #141d44; }
.vcd-film__head .vcd-eyebrow { margin-bottom: 10px; color: var(--vcd-sage-lt); }
.vcd-h2--film { font-size: clamp(1.6rem, 2.25vw, 2.2rem); max-width: 34ch; line-height: 1.1; }
.vcd-film__stage { position: sticky; top: 0; align-self: start; height: 100svh; overflow: clip; z-index: 1; }
.vcd-film__ground { position: absolute; inset: 0; background: var(--vcd-deep); }
.vcd-film__ground i { position: absolute; inset: 0; opacity: 0; transition: opacity .9s; }
.vcd-film__g1 { background: radial-gradient(ellipse at 60% 55%, #12605a 0%, #0e4d4a 55%, #0a3d3a 100%); }
.vcd-film__g2 { background: radial-gradient(ellipse at 40% 50%, #2a3b72 0%, #1b2552 60%, #121a3b 100%); }
.vcd-film[data-step='2'] .vcd-film__g1, .vcd-film[data-step='3'] .vcd-film__g1, .vcd-film[data-step='5'] .vcd-film__g1 { opacity: 1; }
.vcd-film[data-step='4'] .vcd-film__g2 { opacity: 1; }
.vcd-film__track { position: relative; z-index: 3; pointer-events: none; }
.vcd-fstep { min-height: 85svh; padding-inline: var(--vcd-gutter); }
.vcd-fstep--intro { min-height: 95svh; padding-top: 30svh; }
.vcd-fstep[data-fs='5'] { min-height: 96svh; padding-bottom: 108px; }
.vcd-fcard { pointer-events: auto; position: sticky; top: 25svh; width: min(410px, 30vw); padding: 22px 24px; background: #072d2b; border: 1px solid #6bb68f59; border-left: 3px solid var(--vcd-ochre); color: var(--vcd-on-dark); }
.vcd-fcard .vcd-eyebrow { color: var(--vcd-sage-lt); margin-bottom: 10px; }
.vcd-fcard .vcd-h3 { margin-bottom: 10px; }
.vcd-fcard .vcd-body { color: var(--vcd-on-dark-2); }
.vcd-fcard--intro { top: 42svh; }
.vcd-fstep--b .vcd-fcard { top: 68.5svh; width: min(1080px, 78vw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 28px; padding-block: 16px; }
.vcd-fstep--b .vcd-fcard .vcd-eyebrow { grid-column: 1 / -1; }
.vcd-fstep--b .vcd-fcard .vcd-h3 { margin: 0; }
.vcd-fstep--c .vcd-fcard { margin-left: auto; }
@media (min-width: 1100px) {
  :root[data-m-go] .vcd-fstep:not(.vcd-fstep--intro):not([data-fs='5']) { min-height: 175svh; margin-bottom: -90svh; }
  :root[data-m-go] .vcd-fstep--intro { min-height: 185svh; margin-bottom: -90svh; }
}
/* Keep the plate occluder opaque; only the copy fades, after the previous copy has left. */
:root[data-m-go] .vcd-fcard { visibility: hidden; pointer-events: none; transition: visibility 0s .08s; }
:root[data-m-go] .vcd-film .vcd-fstep .vcd-fcard > * { opacity: var(--vcd-card-copy, 0); transform: translateY(var(--vcd-card-y, 12px)); transition: var(--vcd-card-transition, opacity .08s ease-out, transform .08s ease-out); }
:root[data-m-go] .vcd-film[data-step='0'] .vcd-fstep[data-fs='0'] .vcd-fcard,
:root[data-m-go] .vcd-film[data-step='1'] .vcd-fstep[data-fs='1'] .vcd-fcard,
:root[data-m-go] .vcd-film[data-step='2'] .vcd-fstep[data-fs='2'] .vcd-fcard,
:root[data-m-go] .vcd-film[data-step='3'] .vcd-fstep[data-fs='3'] .vcd-fcard,
:root[data-m-go] .vcd-film[data-step='4'] .vcd-fstep[data-fs='4'] .vcd-fcard,
:root[data-m-go] .vcd-film[data-step='5'] .vcd-fstep[data-fs='5'] .vcd-fcard { --vcd-card-copy: 1; --vcd-card-y: 0px; --vcd-card-transition: opacity .42s ease-out .16s, transform .5s var(--vcd-e) .16s; visibility: visible; pointer-events: auto; transition: visibility 0s; }

/* The camera: one transform per framing on the camera, one per plate state on each plate (fixed-size wrappers). */
.vcd-film__cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --tx: 8vw; --ty: 6svh; --cs: 1; transform: translate(var(--tx), var(--ty)) scale(var(--cs)); transition: transform .58s var(--vcd-e) .09s; }
.vcd-film__thread { position: absolute; left: -1px; top: -200px; width: 2px; height: 620px; background: linear-gradient(#f0b45c00, #f0b45c 12%, #f0b45c 92%, #f0b45c99); opacity: .85; transition: opacity .45s .09s; }
.vcd-pslot { --pw: min(480px, 34vw); position: absolute; left: calc(var(--pw) / -2); top: calc(var(--pw) / -2); width: var(--pw); height: var(--pw); transform: translateY(var(--py, 0px)); transition: transform .58s var(--vcd-e) .09s, opacity .45s .09s; }
.vcd-pslot[data-p='0'] { --py: 170px; z-index: 1; }
.vcd-pslot[data-p='1'] { --py: 85px; z-index: 2; }
.vcd-pslot[data-p='2'] { --py: 0px; z-index: 3; }
.vcd-pslot[data-p='3'] { --py: -85px; z-index: 4; }
.vcd-pslot[data-p='4'] { --py: -170px; z-index: 5; }
.vcd-pent { width: 100%; height: 100%; }
.vcd-plate { width: 100%; height: 100%; transform: perspective(1500px) rotateX(64deg) scale(var(--ps, 1)); transition: transform .58s var(--vcd-e) .09s; }
.vcd-plate svg { width: 100%; height: 100%; overflow: visible; }
.vcd-plate__disc { fill: #0f504b; fill-opacity: .55; transition: fill .6s, fill-opacity .6s; }
.vcd-plate__ring { fill: none; stroke: #6bb68f; stroke-width: 4; transition: stroke .6s, stroke-width .6s; }
.vcd-pd { opacity: .55; transition: opacity .6s; }
.vcd-pd__sk { fill: #0a3d3a; stroke: #a6dcbf; stroke-width: 3; }
.vcd-pd__hot { fill: #165f57; stroke: var(--vcd-ochre-lt); stroke-width: 4; }
.vcd-pd__fab { fill: none; stroke: #6bb68f; stroke-width: 2; opacity: .7; }
.vcd-pd__needle { stroke: var(--vcd-ochre-lt); stroke-width: 5; stroke-linecap: round; }
.vcd-pd__bar { stroke: #d8e6de; stroke-width: 5; }
.vcd-pd__on { fill: #8fd0ad; }
.vcd-pd__off { fill: none; stroke: #6bb68f; stroke-width: 2.5; }
.vcd-pd__cut { fill: none; stroke: var(--vcd-ochre-lt); stroke-width: 4; stroke-dasharray: 10 8; }
.vcd-pd__x { fill: none; stroke: #ffb35a; stroke-width: 6; stroke-linecap: round; }
.vcd-pd__sec { fill: #0a3d3a; stroke: #6bb68f; stroke-width: 2; }
.vcd-pd__sec--hot { fill: #1b6a5c; stroke: var(--vcd-ochre-lt); stroke-width: 3; }
.vcd-pd__n { font: 700 20px var(--vcd-mono); fill: var(--vcd-ochre-lt); }
.vcd-pd__t { font: 700 17px var(--gft-font-display); fill: #f3f6f2; }
.vcd-pd__core { fill: #0e4d4a; stroke: var(--vcd-sage); stroke-width: 3; }
.vcd-pd__core--top { stroke: var(--vcd-ochre-lt); stroke-width: 4; }
.vcd-pd__id { transform-box: view-box; transform: translate(var(--fx), var(--fy)); }
.vcd-pd__id rect { fill: #072d2b; stroke: var(--vcd-ochre-lt); stroke-width: 2.5; }
.vcd-pd__id text { font: 700 15px var(--vcd-mono); fill: #ffe2b0; }
.vcd-pd__band { fill: var(--vcd-ind-lt); fill-opacity: .28; stroke: var(--vcd-ind-lt); stroke-width: 2; stroke-dasharray: 8 6; }
.vcd-pd__pb { fill: #b9c6ef; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s var(--vcd-e); transition-delay: calc(var(--k) * 70ms); }
.vcd-wire { fill: none; stroke: #a6dcbf; stroke-width: 3; stroke-opacity: .6; }
.vcd-pk-dot { fill: #ffd28f; }
.vcd-film__pk { position: absolute; left: 0; top: 0; transform: translateY(var(--pky, 210px)); transition: transform .58s var(--vcd-e) .09s; z-index: 6; }
.vcd-film__pk i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #ffd28f; box-shadow: 0 0 0 5px #ffd28f40, 0 0 22px #ffd28f; }
.vcd-film__pk b { position: absolute; left: 16px; top: -11px; font: 700 13px/1 var(--vcd-mono); color: #ffe2b0; padding: 4px 6px; background: #072d2be6; white-space: nowrap; }
/* Per step: framing, lit plate, plate drawing, packet. */
.vcd-film[data-step='0'] .vcd-film__cam { --tx: 12vw; --ty: 3svh; --cs: 1.18; }
.vcd-film[data-step='1'] .vcd-film__cam { --tx: 13vw; --ty: -12svh; --cs: 1.32; }
.vcd-film[data-step='2'] .vcd-film__cam { --tx: 13vw; --ty: -3svh; --cs: 1.32; }
.vcd-film[data-step='3'] .vcd-film__cam { --tx: 0vw; --ty: -11svh; --cs: 1; }
.vcd-film[data-step='4'] .vcd-film__cam { --tx: -10vw; --ty: 12svh; --cs: 1.22; }
.vcd-film[data-step='5'] .vcd-film__cam { --tx: -12vw; --ty: 24svh; --cs: 1.22; }
.vcd-film[data-step='1'] .vcd-film__pk { --pky: 170px; }
.vcd-film[data-step='2'] .vcd-film__pk { --pky: 85px; }
.vcd-film[data-step='3'] .vcd-film__pk { --pky: 0px; }
.vcd-film[data-step='4'] .vcd-film__pk { --pky: -85px; }
.vcd-film[data-step='5'] .vcd-film__pk { --pky: -170px; }
.vcd-film[data-step='1'] .vcd-pslot[data-p='0'] .vcd-pd,
.vcd-film[data-step='2'] .vcd-pslot[data-p='1'] .vcd-pd,
.vcd-film[data-step='3'] .vcd-pslot[data-p='2'] .vcd-pd,
.vcd-film[data-step='4'] .vcd-pslot[data-p='3'] .vcd-pd,
.vcd-film[data-step='5'] .vcd-pslot[data-p='4'] .vcd-pd { opacity: 1; }
.vcd-film[data-step='1'] .vcd-pslot[data-p='0'] .vcd-plate__ring,
.vcd-film[data-step='2'] .vcd-pslot[data-p='1'] .vcd-plate__ring,
.vcd-film[data-step='3'] .vcd-pslot[data-p='2'] .vcd-plate__ring,
.vcd-film[data-step='5'] .vcd-pslot[data-p='4'] .vcd-plate__ring { stroke: var(--vcd-ochre-lt); stroke-width: 6; }
.vcd-film[data-step='1'] .vcd-pslot[data-p='0'] .vcd-plate__disc,
.vcd-film[data-step='2'] .vcd-pslot[data-p='1'] .vcd-plate__disc,
.vcd-film[data-step='3'] .vcd-pslot[data-p='2'] .vcd-plate__disc,
.vcd-film[data-step='5'] .vcd-pslot[data-p='4'] .vcd-plate__disc { fill: #17665e; fill-opacity: .82; }
.vcd-film[data-step='4'] .vcd-pslot[data-p='3'] .vcd-plate__ring { stroke: var(--vcd-ind-lt); stroke-width: 6; }
.vcd-film[data-step='4'] .vcd-pslot[data-p='3'] .vcd-plate__disc { fill: #2c3e7a; fill-opacity: .9; }
/* Step 2: the camera pans up one plate; step 3: the L3 plate turns face-on and the others make room. */
.vcd-film[data-step='3'] .vcd-pslot[data-p='2'] .vcd-plate { --ps: 1.6; transform: perspective(1500px) rotateX(0deg) scale(var(--ps)); }
.vcd-film[data-step='3'] .vcd-pslot[data-p='0'] { --py: 420px; opacity: .18; transition: transform .52s var(--vcd-e) .06s, opacity .18s ease-out .04s; }
.vcd-film[data-step='3'] .vcd-pslot[data-p='1'] { --py: 330px; opacity: .18; transition: transform .52s var(--vcd-e) .06s, opacity .18s ease-out .04s; }
.vcd-film[data-step='3'] .vcd-pslot[data-p='3'] { --py: -330px; opacity: .18; transition: transform .52s var(--vcd-e) .06s, opacity .18s ease-out .04s; }
.vcd-film[data-step='3'] .vcd-pslot[data-p='4'] { --py: -420px; opacity: .18; transition: transform .52s var(--vcd-e) .06s, opacity .18s ease-out .04s; }
.vcd-film[data-step='3'] .vcd-film__thread { opacity: 0; }
.vcd-film:not([data-step='4']):not([data-step='5']) .vcd-pd__pb { transform: scaleY(.15); }
.vcd-pd__id { transition: transform .42s var(--vcd-e) calc(260ms + var(--k) * 65ms); }
.vcd-film[data-step='3'] .vcd-pd__id { transform: translate(var(--tx), var(--ty)); transition: transform .42s var(--vcd-e) calc(260ms + var(--k) * 65ms); }

/* Leaders, boards and read-out: each fades with its step (composed in markup, only re-lit). */
.vcd-film__leads { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.vcd-lead { position: absolute; display: grid; gap: 10px; width: min(300px, 22vw); visibility: hidden; transition: visibility 0s .08s; }
.vcd-lead p { margin: 0; padding: 10px 12px; background: #072d2b; border: 1px solid #6bb68f4d; font-size: 15px; line-height: 1.45; color: var(--vcd-on-dark-2); }
.vcd-lead b { display: block; margin-bottom: 2px; font: 700 13px/1.3 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vcd-sage-lt); }
.vcd-lead p > * { display: block; opacity: var(--vcd-lead-copy, 0); transform: translateY(var(--vcd-lead-y, 10px)); transition: opacity .08s ease-out, transform .08s ease-out; }
.vcd-lead__loss { border-left: 3px solid var(--vcd-ochre-lt) !important; }
.vcd-lead__loss b { color: var(--vcd-ochre-lt); }
/* Keep these annotations below the complete heading and its 36px fade, including during their entrance. */
.vcd-lead[data-for='1'], .vcd-lead[data-for='2'] { right: var(--vcd-gutter); top: max(26svh, 240px); }
.vcd-lead[data-for='3'] { left: var(--vcd-gutter); right: var(--vcd-gutter); top: 22svh; width: auto; grid-template-columns: min(300px, 22vw) min(300px, 22vw); justify-content: space-between; }
.vcd-lead[data-for='4'], .vcd-lead[data-for='5'] { left: calc(var(--vcd-gutter) + 8px); top: 24svh; }
.vcd-film[data-step='1'] .vcd-lead[data-for='1'], .vcd-film[data-step='2'] .vcd-lead[data-for='2'], .vcd-film[data-step='3'] .vcd-lead[data-for='3'], .vcd-film[data-step='4'] .vcd-lead[data-for='4'], .vcd-film[data-step='5'] .vcd-lead[data-for='5'] { --vcd-lead-copy: 1; --vcd-lead-y: 0px; visibility: visible; transition: visibility 0s; }
.vcd-film[data-step='1'] .vcd-lead[data-for='1'] p > *, .vcd-film[data-step='2'] .vcd-lead[data-for='2'] p > *, .vcd-film[data-step='3'] .vcd-lead[data-for='3'] p > *, .vcd-film[data-step='4'] .vcd-lead[data-for='4'] p > *, .vcd-film[data-step='5'] .vcd-lead[data-for='5'] p > * { transition: opacity .42s ease-out .16s, transform .5s var(--vcd-e) .16s; }
.vcd-film__dup { position: absolute; z-index: 5; left: 50%; top: 62svh; translate: -50% 0; margin: 0; padding: 6px 12px; background: #072d2bf0; border: 1px solid var(--vcd-ochre-lt); font: 700 15px/1.3 var(--vcd-mono); color: #ffe2b0; opacity: 0; visibility: hidden; transition: opacity .08s ease-out, visibility 0s .08s; white-space: nowrap; }
.vcd-film[data-step='3'] .vcd-film__dup { opacity: 1; visibility: visible; transition: opacity .42s .4s, visibility 0s; }
.vcd-film__boards { position: absolute; z-index: 5; left: 47%; top: max(26svh, 240px); width: min(260px, 19vw); margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vcd-film__boards li { display: grid; padding: 12px 14px; background: #0f504bf2; border: 1px solid #a6dcbf80; border-left: 3px solid var(--vcd-ochre-lt); opacity: 0; transform: translateX(-60px) rotate(-4deg); transform-origin: 0 50%; transition: opacity .45s, transform .7s var(--vcd-e); transition-delay: calc(var(--k) * 110ms); }
.vcd-film__boards b { font-size: 17px; }
.vcd-film__boards span { font: 700 22px/1.2 var(--vcd-mono); color: #ffe2b0; }
.vcd-film[data-step='5'] .vcd-film__boards li { opacity: 1; transform: none; }
.vcd-film__foot { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 40px var(--vcd-gutter) 16px calc(var(--vcd-gutter) + 8px); background: linear-gradient(#072d2b00, #072d2bf2 42%); transition: opacity .5s; }
.vcd-film__read { display: grid; }
.vcd-film__r { grid-area: 1 / 1; margin: 0; display: grid; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .08s ease-out, visibility 0s .08s; }
.vcd-film__rl { font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vcd-sage-lt); }
.vcd-film__rv { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.vcd-film__rs { font-size: 15px; color: var(--vcd-on-dark-2); max-width: 70ch; }
.vcd-film[data-step='0'] .vcd-film__r[data-for='1'], .vcd-film[data-step='1'] .vcd-film__r[data-for='1'], .vcd-film[data-step='2'] .vcd-film__r[data-for='2'], .vcd-film[data-step='3'] .vcd-film__r[data-for='3'], .vcd-film[data-step='4'] .vcd-film__r[data-for='4'], .vcd-film[data-step='5'] .vcd-film__r[data-for='5'] { opacity: 1; visibility: visible; transition: opacity .42s ease-out .16s, visibility 0s; }
.vcd-film__nav { display: flex; align-items: stretch; gap: 4px; }
.vcd-film__tab, .vcd-film__pn { display: grid; align-content: center; min-height: 52px; min-width: 44px; padding: 6px 10px; border: 1px solid #6bb68f59; background: #072d2bcc; color: var(--vcd-on-dark); text-decoration: none; font-size: 13px; line-height: 1.25; }
.vcd-film__tab { width: 118px; }
.vcd-film__tab b { font: 700 13px/1.2 var(--vcd-mono); color: var(--vcd-ochre-lt); }
.vcd-film__tab[aria-current] { background: #1a6b5a; border-color: #a6e8c3; }
.vcd-film__pn { font-size: 20px; }

/* Arrival "ply": the five plies open out of the orbit's centre one after another, bottom to top, 90 ms apart (clip and
   opacity only: nothing in the pinned stage travels while the page scrolls; settles by 850 ms). */
:root[data-m-go][data-vcd-ready] .vcd-film__stage:not([data-vcd-in]) .vcd-pent { clip-path: circle(7% at 50% 50%); opacity: .55; }
:root[data-m-go] .vcd-film__stage[data-vcd-in] .vcd-pent { animation: vcd-ply 540ms var(--vcd-e) calc(var(--p) * 90ms) 1 normal backwards; }
.vcd-pslot[data-p='0'] .vcd-pent { --py-in: 170px; }
.vcd-pslot[data-p='1'] .vcd-pent { --py-in: 85px; }
.vcd-pslot[data-p='2'] .vcd-pent { --py-in: 0px; }
.vcd-pslot[data-p='3'] .vcd-pent { --py-in: -85px; }
.vcd-pslot[data-p='4'] .vcd-pent { --py-in: -170px; }
@keyframes vcd-ply { from { clip-path: circle(7% at 50% 50%); opacity: .55; } to { clip-path: circle(100% at 50% 50%); opacity: 1; } }
:root[data-m-go][data-vcd-ready] .vcd-film__stage:not([data-vcd-in]) .vcd-film__foot { opacity: .3; }
:root[data-m-go] .vcd-film__stage[data-vcd-in] .vcd-film__foot { animation: vcd-fade-up 500ms var(--vcd-e) 380ms 1 normal backwards; }
@keyframes vcd-fade-up { from { opacity: .3; } }

@media (max-width: 1099px) {
  .vcd-film__rig > * { grid-area: auto; }
  .vcd-film__head { grid-row: 1; grid-column: 1; }
  .vcd-film__stage, .vcd-film__track { grid-row: 2; grid-column: 1; }
  .vcd-film__track { padding-top: 44svh; }
  .vcd-film__head { position: relative; max-width: none; height: auto; }
  .vcd-film__hin { padding: 48px var(--vcd-gutter) 20px; }
  .vcd-film__hin::before { display: none; }
  .vcd-film__stage { height: 42svh; z-index: 5; border-bottom: 1px solid #6bb68f4d; }
  .vcd-film__cam { --tx: 0vw !important; --ty: 2svh !important; --cs: .62 !important; }
  .vcd-film[data-step='3'] .vcd-film__cam { --cs: .5 !important; }
  .vcd-pslot { --pw: 480px; }
  .vcd-film__leads, .vcd-film__boards, .vcd-film__dup, .vcd-film__nav { display: none; }
  .vcd-film__foot { padding: 20px 16px 8px; grid-template-columns: 1fr; }
  .vcd-film__rv { font-size: 18px; }
  .vcd-film__rs { display: none; }
  .vcd-film__pk b { display: none; }
  .vcd-fstep { min-height: 52svh; padding-top: 24px; }
  .vcd-fstep[data-fs='5'] { min-height: 52svh; padding-bottom: 24px; }
  :root[data-m-go] .vcd-fcard { --vcd-card-copy: 1; --vcd-card-y: 0px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .vcd-fcard, .vcd-fstep--b .vcd-fcard { position: relative; top: auto; width: auto; display: block; }
}
/* /value-chain/data/ (prefix vcd-), part 2: spine dial, tier portals, outage interlude, rim and core, closing loom.
   Imported only by src/pages/value-chain/data.astro. Same stability contract as data.css. */

/* ------------------------------------------------------------------ 4. spine dial (paper) */
.vcd-gov { padding-block: 42px 0; }
.vcd-gov__grid { display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: 4%; align-items: stretch; }
.vcd-gov__left { display: flex; flex-direction: column; min-width: 0; }
.vcd-gov__carry { position: relative; margin: 0 0 10px; padding: 8px 12px; background: #fff; border: 1px solid #0e4d4a33; border-left: 3px solid var(--vcd-ochre); width: 86%; }
.vcd-gov__carry::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 3px; height: 56px; margin-left: -1.5px; background: var(--vcd-ochre); }
.vcd-gov__carry .vcd-label { color: #7a4a0c; }
.vcd-dial { position: sticky; top: 0; margin: 0; padding-bottom: 24px; }
.vcd-dial__box { position: relative; aspect-ratio: 1; }
.vcd-dial__box::after { content: ''; position: absolute; z-index: -1; left: 94.33%; top: 50%; width: 3px; height: 600svh; margin-left: -1.5px; background: var(--vcd-ochre); transform-origin: 50% 0; }
.vcd-dial__svg { width: 100%; height: 100%; overflow: visible; }
.vcd-dial__lv { fill: none; stroke-width: 16; stroke-linecap: butt; opacity: .38; transition: opacity .5s; }
.vcd-dial__lv[data-l='0'] { stroke: #8fc9a8; }
.vcd-dial__lv[data-l='1'] { stroke: #3f8f6b; }
.vcd-dial__lv[data-l='2'] { stroke: #0e4d4a; }
.vcd-dial__lv[data-l='3'] { stroke: #2c3e7a; }
.vcd-gov[data-level='0'] .vcd-dial__lv[data-l='0'], .vcd-gov[data-level='1'] .vcd-dial__lv[data-l='1'], .vcd-gov[data-level='2'] .vcd-dial__lv[data-l='2'], .vcd-gov[data-level='3'] .vcd-dial__lv[data-l='3'] { opacity: 1; }
.vcd-dial__ticks line { stroke: #25302e; stroke-width: 2; opacity: .5; }
.vcd-dial__lvt { font: 700 17px var(--vcd-mono); fill: #25302e; }
.vcd-dial__rim { fill: none; stroke: #0e4d4a; stroke-width: 5; }
.vcd-dial__sec { fill: #fbfaf7; stroke: #0e4d4a; stroke-width: 1.6; transition: fill .4s; }
.vcd-gov[data-sheet='0'] .vcd-dial__sec[data-k='0'], .vcd-gov[data-sheet='1'] .vcd-dial__sec[data-k='1'], .vcd-gov[data-sheet='2'] .vcd-dial__sec[data-k='2'], .vcd-gov[data-sheet='3'] .vcd-dial__sec[data-k='3'], .vcd-gov[data-sheet='4'] .vcd-dial__sec[data-k='4'], .vcd-gov[data-sheet='5'] .vcd-dial__sec[data-k='5'] { fill: #d6ebde; stroke-width: 3; }
.vcd-gl { transform-box: fill-box; transform-origin: center; transition: transform .55s var(--vcd-e), opacity .35s; }
.vcd-gl rect { fill: #fff; stroke: #0e4d4a; stroke-width: 2.2; }
.vcd-gl path { fill: none; stroke: #0e4d4a; stroke-width: 1.8; }
.vcd-gl--table rect { fill: #e3e9f7; stroke: #2c3e7a; }
.vcd-gl--table path { stroke: #2c3e7a; }
.vcd-gov[data-phase='0'] .vcd-gl--table, .vcd-gov[data-phase='1'] .vcd-gl--sheet { opacity: 0; transform: rotateY(90deg); }
.vcd-dial__pkt { transform-box: view-box; transform-origin: 0 0; }
.vcd-dial__pkt circle { fill: var(--vcd-ochre); }
.vcd-dial__hand { transform-box: view-box; transform-origin: 0 0; transform: rotate(var(--a)); transition: transform .7s var(--vcd-e2); }
.vcd-dial__hand line { stroke: var(--vcd-ochre); stroke-width: 5; stroke-linecap: round; }
.vcd-dial__hand circle { fill: var(--vcd-ochre); stroke: #fff; stroke-width: 3; }
.vcd-dial__core { fill: var(--vcd-paper); stroke: #0e4d4a; stroke-width: 2; }
.vcd-dial__tabs { position: absolute; inset: 0; }
.vcd-dial__tab { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: grid; justify-items: center; width: 22%; min-height: 44px; padding: 4px; border: 0; background: transparent; color: var(--vcd-ink); font-size: 15px; font-weight: 650; line-height: 1.15; text-align: center; border-radius: 6px; }
.vcd-dial__tab b { font: 700 13px/1.2 var(--vcd-mono); color: #7a4a0c; }
.vcd-dial__tab[aria-selected='true'] span { text-decoration: underline; text-decoration-color: var(--vcd-ochre); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.vcd-dial__tab:hover { background: #ffffffa8; }
.vcd-dial__read { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 31%; margin: 0; display: grid; justify-items: center; text-align: center; gap: 2px; }
.vcd-dial__read b { font-size: clamp(28px, 2.8vw, 40px); line-height: 1; letter-spacing: -.04em; color: var(--vcd-ink); white-space: nowrap; }
.vcd-dial__read span { font-size: 13px; font-weight: 650; line-height: 1.25; color: var(--vcd-ink-2); }
.vcd-dial__read em { font: normal 600 13px/1.2 var(--vcd-mono); color: #7a4a0c; }
.vcd-dial__ctl { width: 86%; margin-top: 8px; }
.vcd-dial__ctl .vcd-slider__l { color: var(--vcd-ink-2); }
.vcd-dial__lvls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--vcd-ink-2); line-height: 1.3; }
.vcd-dial__lvls b { display: block; font: 700 13px var(--vcd-mono); color: var(--vcd-ink); }
.vcd-dial__cap { width: 86%; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--vcd-ink-2); }
.vcd-gov__thread { margin: auto 0 0; width: 86%; padding: 0 0 26px; font: 600 13px/1.4 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: #7a4a0c; text-align: right; }
.vcd-gov__right { min-width: 0; padding-bottom: clamp(72px, 10svh, 120px); }
.vcd-h2--gov { font-size: clamp(1.9rem, 2.6vw, 2.7rem); max-width: 26ch; line-height: 1.1; }
/* fx skew, page cut (r8 review, step 10): the words shear in sideways on their own line (skewX, opacity) instead of
   rising skewed through line masks, so a word still entering never prints over the line above or below it. Each word
   starts further right than the one before it, so neighbours never cover each other. */
.vcd-h2--gov[data-m=split] .m-w { overflow: visible; }
:root[data-m-go] .vcd-h2--gov[data-m=split][data-m-fx=skew]:not([data-m-in]) .m-c { translate: .4em 0; opacity: 0; transform: skewX(-16deg); }
:root[data-m-go] .vcd-h2--gov[data-m=split][data-m-fx=skew][data-m-in] .m-c { animation-name: vcd-gov-skew; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vcd-gov-skew { from { translate: .4em 0; opacity: 0; transform: skewX(-16deg); } 55% { opacity: 1; } to { translate: 0 0; opacity: 1; transform: skewX(0); } }
.vcd-book { margin-top: 28px; }
.vcd-sheet__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; font-size: 15px; color: var(--vcd-ink-2); }
.vcd-sheet__meta b { color: var(--vcd-ink); }
.vcd-grid { overflow-x: auto; border: 1px solid #0e4d4a55; background: #fff; }
.vcd-grid__row { display: grid; grid-template-columns: repeat(var(--n), minmax(92px, 1fr)); min-width: calc(var(--n) * 92px); }
.vcd-grid__c { position: relative; padding: 9px 10px; min-height: 40px; border-right: 1px solid #0e4d4a26; border-bottom: 1px solid #0e4d4a26; font-size: 15px; line-height: 1.25; }
.vcd-grid__row--h .vcd-grid__c { background: #0e4d4a; color: #f3f6f2; font-weight: 700; min-height: 64px; }
.vcd-grid__row--ex .vcd-grid__c { font: 700 22px/1.2 var(--vcd-mono); color: #0e4d4a; text-align: right; }
.vcd-grid__c--cur::after { content: ''; position: absolute; inset: 3px; border: 2px solid var(--vcd-ochre); }
:root[data-m-go] .vcd-gov[data-vcd-on] .vcd-grid__c--cur::after { animation: vcd-blink 1.2s steps(1, end) 0s infinite normal none; }
@keyframes vcd-blink { 50% { opacity: 0; } }
.vcd-sheet__note { margin-top: 8px; font-size: 15px; color: var(--vcd-ink-2); }
.vcd-phase { display: grid; margin-top: 24px; }
.vcd-phase__c { grid-area: 1 / 1; padding: 20px 22px; background: #fff; border: 1px solid #0e4d4a40; border-left: 4px solid #0e4d4a; transition: opacity .4s .18s, transform .55s var(--vcd-e) .18s; }
.vcd-phase__c[data-ph='1'] { border-left-color: var(--vcd-ind); }
.vcd-phase__c .vcd-h3 { font-size: 20px; margin: 6px 0 10px; }
.vcd-phase__c ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--vcd-ink-2); }
.vcd-phase__b { margin: 0; font: 600 13px/1.4 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vcd-ink-2); }
.vcd-phase__b b { color: #7a4a0c; }
.vcd-gov[data-phase='0'] .vcd-phase__c[data-ph='1'], .vcd-gov[data-phase='1'] .vcd-phase__c[data-ph='0'] { opacity: 0; transform: translateX(20px); pointer-events: none; visibility: hidden; transition: opacity .16s, transform .16s, visibility 0s .16s; }
.vcd-cad { margin-top: 40px; padding-top: 28px; border-top: 2px solid #0e4d4a; }
.vcd-cad__pull { margin: 0; font: italic 400 24px/1.35 var(--gft-font-serif); color: #1f2a28; max-width: 40ch; }
.vcd-cad__rest { margin-top: 8px; font-size: 17px; color: var(--vcd-ink-2); }
.vcd-cad__panels { display: grid; margin-top: 22px; }
.vcd-cad__p { grid-area: 1 / 1; transition: opacity .45s, transform .55s var(--vcd-e); }
.vcd-cad__p .vcd-h3 { margin-bottom: 10px; max-width: 34ch; }
.vcd-cad__p .vcd-body { color: var(--vcd-ink-2); max-width: 62ch; }
.vcd-cad__p .vcd-eyebrow { color: var(--vcd-ink-2); }
.vcd-cad__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.vcd-cad__acts li { position: relative; padding: 12px 12px 12px 40px; background: #fff; border: 1px solid #0e4d4a40; font-size: 15px; line-height: 1.45; }
.vcd-cad__acts li::before { content: ''; position: absolute; left: 12px; top: 14px; width: 16px; height: 16px; border: 2px solid #0e4d4a; border-radius: 3px; background: linear-gradient(135deg, transparent 45%, #0e4d4a 45% 60%, transparent 60%); }
.vcd-gov[data-month] .vcd-cad__p { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .16s, transform .16s, visibility 0s .16s; }
.vcd-gov[data-cad='0'] .vcd-cad__p[data-cad='0'], .vcd-gov[data-cad='1'] .vcd-cad__p[data-cad='1'], .vcd-gov[data-cad='2'] .vcd-cad__p[data-cad='2'] { opacity: 1; visibility: visible; transform: none; transition: opacity .4s .18s, transform .55s .18s; }
.vcd-gov__links { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
/* Entrance "wind": the hand winds clockwise from Month 1 to the month shown, the level arcs follow, the sectors
   cascade in, the sheet grid wipes left to right. */
:root[data-m-go][data-vcd-ready] .vcd-dial:not([data-vcd-in]) .vcd-dial__hand { transform: rotate(110deg); }
:root[data-m-go][data-vcd-ready] .vcd-dial:not([data-vcd-in]) .vcd-dial__sec { opacity: .82; }
:root[data-m-go][data-vcd-ready] .vcd-dial:not([data-vcd-in]) .vcd-dial__lv { opacity: .55; }
:root[data-m-go][data-vcd-ready] .vcd-gov:not([data-vcd-in]) .vcd-grid { clip-path: inset(0 18% 0 0); }
:root[data-m-go] .vcd-dial[data-vcd-in] .vcd-dial__hand { animation: vcd-wind 760ms var(--vcd-e2) 0ms 1 normal backwards; }
:root[data-m-go] .vcd-dial[data-vcd-in] .vcd-dial__sec { animation: vcd-sec 380ms var(--vcd-e) calc(300ms + var(--k) * 40ms) 1 normal backwards; }
:root[data-m-go] .vcd-dial[data-vcd-in] .vcd-dial__lv { animation: vcd-lv 300ms ease-out calc(var(--i) * 140ms) 1 normal backwards; }
:root[data-m-go] .vcd-gov[data-vcd-in] .vcd-grid { animation: vcd-wipe 620ms var(--vcd-e2) 260ms 1 normal backwards; }
@keyframes vcd-wind { from { transform: rotate(110deg); } }
@keyframes vcd-sec { from { opacity: .82; } }
@keyframes vcd-lv { from { opacity: .55; } }
@keyframes vcd-wipe { from { clip-path: inset(0 18% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* The readiness thread draws down from 3 o'clock while the block is read (Firefox: drawn). */
@supports (animation-timeline: view()) {
  .vcd-gov { view-timeline-name: --vcd-gov; view-timeline-axis: block; }
  :root[data-m-go] .vcd-dial__box::after { animation-name: vcd-thread; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --vcd-gov; animation-range-start: entry 80%; animation-range-end: exit 30%; }
}
@keyframes vcd-thread { from { transform: scaleY(.04); } to { transform: scaleY(1); } }

/* ------------------------------------------------------------------ 5. tier portals (mist) */
.vcd-tiers { padding-block: 0; }
.vcd-tiers__top { display: grid; grid-template-columns: 30% minmax(0, 1fr); grid-template-areas: 'carry head' 'run run'; column-gap: 10%; padding-top: clamp(48px, 7svh, 72px); }
.vcd-tiers__top::before { content: ''; position: absolute; left: 35.8%; top: -100px; bottom: 190px; width: 3px; margin-left: -1.5px; background: var(--vcd-ochre); }
.vcd-tiers__carry { grid-area: carry; align-self: start; padding: 14px 16px; background: #fff; border-left: 3px solid var(--vcd-ochre); }
.vcd-tiers__month { margin: 6px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.vcd-tiers__act { margin: 0; font-size: 15px; line-height: 1.45; color: var(--vcd-ink-2); }
.vcd-tiers__head { grid-area: head; }
.vcd-h2--tiers { font-size: clamp(1.9rem, 2.7vw, 2.8rem); max-width: 28ch; }
.vcd-run { grid-area: run; position: relative; height: 380px; margin-top: 12px; }
.vcd-run__read { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 30%; margin: 0; display: grid; }
.vcd-run__s { grid-area: 1 / 1; padding: 14px 16px; background: #ffffffe8; border: 1px solid #0e4d4a33; font-size: 15px; line-height: 1.5; color: var(--vcd-ink); opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .16s; }
.vcd-tiers[data-tier='all'] .vcd-run__s[data-for='all'], .vcd-tiers[data-tier='t1'] .vcd-run__s[data-for='t1'], .vcd-tiers[data-tier='t1b'] .vcd-run__s[data-for='t1b'], .vcd-tiers[data-tier='t2'] .vcd-run__s[data-for='t2'], .vcd-tiers[data-tier='t3'] .vcd-run__s[data-for='t3'] { opacity: 1; visibility: visible; transition: opacity .4s .18s; }
.vcd-run__stage { position: absolute; inset: 0; }
.vcd-run__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vcd-run__line path { fill: none; stroke: var(--vcd-ochre); stroke-width: 3; }
.vcd-portal { position: absolute; left: var(--x); top: 50%; height: var(--h); aspect-ratio: .6; translate: -50% -50%; }
.vcd-portal__ring { position: absolute; inset: 0; }
.vcd-portal__ring svg { width: 100%; height: 100%; overflow: visible; }
.vcd-portal__base { fill: #e2ebe6c4; stroke: #0e4d4a; stroke-width: 5; vector-effect: non-scaling-stroke; transition: stroke .4s, opacity .4s; }
.vcd-portal[data-t='t3'] .vcd-portal__base { stroke: var(--vcd-ochre); stroke-dasharray: 12 9; }
.vcd-portal__turn { transform-box: view-box; transform-origin: 0 0; }
.vcd-portal__ticks { fill: none; stroke: #0e4d4a; stroke-width: 9; stroke-dasharray: 1.5 9; opacity: .55; }
.vcd-portal__gate { fill: var(--vcd-ochre); transform-box: fill-box; transform-origin: 0 50%; transition: transform .5s var(--vcd-e); }
.vcd-tiers[data-tier='t3'] .vcd-portal__gate { transform: rotate(-24deg); }
.vcd-portal__tag { position: absolute; left: 50%; top: 100%; translate: -50% 8px; white-space: nowrap; font: 700 15px/1.2 var(--vcd-mono); color: var(--vcd-ink); }
.vcd-portal__fig { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 2px 10px; background: #e2ebe6e0; font-size: 72px; font-weight: 850; letter-spacing: -.05em; line-height: 1; white-space: nowrap; color: var(--vcd-forest); opacity: 0; transform: scale(.9); transition: opacity .4s, transform .5s var(--vcd-e); pointer-events: none; }
.vcd-portal__fig--none { font-size: 34px; color: #7a4a0c; }
.vcd-tiers[data-tier='all'] .vcd-portal[data-t='t1'] .vcd-portal__fig, .vcd-tiers[data-tier='t1'] .vcd-portal[data-t='t1'] .vcd-portal__fig, .vcd-tiers[data-tier='t1b'] .vcd-portal[data-t='t1b'] .vcd-portal__fig, .vcd-tiers[data-tier='t2'] .vcd-portal[data-t='t2'] .vcd-portal__fig, .vcd-tiers[data-tier='t3'] .vcd-portal[data-t='t3'] .vcd-portal__fig { opacity: 1; transform: none; }
.vcd-tiers:not([data-tier='all']) .vcd-portal { opacity: .4; transition: opacity .4s; }
.vcd-tiers[data-tier='t1'] .vcd-portal[data-t='t1'], .vcd-tiers[data-tier='t1b'] .vcd-portal[data-t='t1b'], .vcd-tiers[data-tier='t2'] .vcd-portal[data-t='t2'], .vcd-tiers[data-tier='t3'] .vcd-portal[data-t='t3'] { opacity: 1; }
:root[data-m-go] .vcd-tiers[data-vcd-on] .vcd-portal__turn { animation: vcd-turn 40s linear 0s infinite normal none; }
@keyframes vcd-turn { to { transform: rotate(360deg); } }
.vcd-tiers__body { position: relative; padding-bottom: 56px; }
.vcd-tiers__body::after { content: ''; position: absolute; left: 35.8%; bottom: 0; width: 3px; height: 48px; margin-left: -1.5px; background: var(--vcd-ochre); pointer-events: none; }
.vcd-chips { position: relative; z-index: 2; margin-top: 32px; padding-block: 10px; background: var(--vcd-mist); border-bottom: 1px solid #0e4d4a33; }
.vcd-seg { margin: 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: 18px; }
.vcd-seg .vcd-legend { margin: 0; float: none; }
.vcd-seg__row { display: flex; flex-wrap: wrap; gap: 6px; }
.vcd-seg__opt { position: relative; }
.vcd-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vcd-seg__opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid #0e4d4a66; background: #fff; font-size: 15px; font-weight: 650; }
.vcd-seg__opt input:checked + span { background: var(--vcd-forest); color: #fff; border-color: var(--vcd-forest); }
.vcd-seg__opt input:focus-visible + span { outline: 3px solid var(--vcd-ochre); outline-offset: 2px; }
.vcd-figs { margin: 28px 0 0; }
.vcd-figs > .vcd-label { color: var(--vcd-ink-2); margin-bottom: 12px; }
.vcd-figs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vcd-fig { display: grid; grid-template-rows: auto 64px minmax(48px, auto) 1fr auto; gap: 6px; min-height: 270px; padding: 18px; background: #fff; border: 1px solid #0e4d4a33; border-top: 4px solid var(--vcd-forest); transition: opacity .4s; }
.vcd-fig[data-t='t3'] { border-top-color: var(--vcd-ochre); border-top-style: dashed; }
.vcd-fig p { margin: 0; }
.vcd-fig .gft-cite { justify-self: start; }
.vcd-fig__t { font: 700 13px/1.3 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vcd-ink-2); }
.vcd-fig__v { font-size: 48px; font-weight: 850; letter-spacing: -.05em; line-height: 1.2; color: var(--vcd-forest); }
.vcd-fig__v--none { font-size: 28px; line-height: 2; color: #7a4a0c; }
.vcd-fig__l { font-size: 15px; font-weight: 650; line-height: 1.4; }
.vcd-fig__need { font-size: 15px; line-height: 1.45; color: var(--vcd-ink-2); }
.vcd-tiers:not([data-tier='all']) .vcd-fig, .vcd-tiers:not([data-tier='all']) .vcd-ledger__row:not(.vcd-ledger__row--h) { opacity: .4; }
.vcd-tiers[data-tier='t1'] .vcd-fig[data-t='t1'], .vcd-tiers[data-tier='t1b'] .vcd-fig[data-t='t1b'], .vcd-tiers[data-tier='t2'] .vcd-fig[data-t='t2'], .vcd-tiers[data-tier='t3'] .vcd-fig[data-t='t3'],
.vcd-tiers[data-tier='t1'] .vcd-ledger__row[data-t='t1'], .vcd-tiers[data-tier='t1b'] .vcd-ledger__row[data-t='t1b'], .vcd-tiers[data-tier='t2'] .vcd-ledger__row[data-t='t2'], .vcd-tiers[data-tier='t3'] .vcd-ledger__row[data-t='t3'] { opacity: 1; }
.vcd-ledger { margin-top: 40px; border-top: 2px solid var(--vcd-forest); }
.vcd-ledger__row { display: grid; grid-template-columns: 1.15fr 1.4fr 1.5fr .65fr 1.5fr 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid #0e4d4a33; font-size: 15px; line-height: 1.45; transition: opacity .4s, background-color .4s; }
.vcd-ledger__row--h { font: 600 13px/1.35 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vcd-ink-2); }
.vcd-ledger__tier { font-weight: 750; }
.vcd-ledger__mark { font-size: 13px; color: var(--vcd-ink-2); }
.vcd-ledger__mark i { display: flex; gap: 4px; margin-bottom: 6px; }
.vcd-ledger__mark i b { width: 22px; height: 8px; border: 1.5px solid var(--vcd-forest); }
.vcd-ledger__mark i b[data-on] { background: var(--vcd-forest); }
.vcd-tiers__src { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; margin-top: 22px; font-size: 15px; line-height: 1.5; color: var(--vcd-ink-2); }
/* Entrance "pick": portals arrive from depth one after another, then the thread draws through them. */
:root[data-m-go][data-vcd-ready] .vcd-run:not([data-vcd-in]) .vcd-portal__ring { opacity: .2; transform: scale(.6); }
:root[data-m-go][data-vcd-ready] .vcd-run:not([data-vcd-in]) .vcd-run__line { clip-path: inset(0 100% 0 35%); }
:root[data-m-go] .vcd-run[data-vcd-in] .vcd-portal__ring { animation: vcd-pick 480ms var(--vcd-e) calc(var(--k) * 120ms) 1 normal backwards; }
:root[data-m-go] .vcd-run[data-vcd-in] .vcd-run__line { animation: vcd-line 520ms var(--vcd-e2) 380ms 1 normal backwards; }
@keyframes vcd-pick { from { opacity: .2; transform: scale(.6); } }
@keyframes vcd-line { from { clip-path: inset(0 100% 0 35%); } to { clip-path: inset(0 0 0 0); } }
/* ------------------------------------------------------------------ 6. outage interlude (abyss) */
.vcd-inter { padding: 0; }
.vcd-inter__rig { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.vcd-inter__rig > * { grid-area: 1 / 1; min-width: 0; }
.vcd-inter__stage { position: sticky; top: 0; align-self: start; height: 100svh; overflow: clip; z-index: 1; background: var(--vcd-abyss); }
.vcd-inter__stage::before { content: ''; position: absolute; left: 35.8%; top: 0; width: 3px; height: 40px; margin-left: -1.5px; background: linear-gradient(var(--vcd-ochre), #f0b45c00); pointer-events: none; z-index: 2; }
.vcd-inter__bg { position: absolute; inset: 0; pointer-events: none; }
.vcd-inter__bg svg { width: 100%; height: 100%; }
.vcd-ibg__ring { fill: none; stroke: #6bb68f; stroke-width: .8; opacity: .22; }
.vcd-ibg__outer { fill: none; stroke: var(--vcd-ochre); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .55; }
.vcd-ibg__weft { fill: none; stroke: var(--vcd-ochre); stroke-width: 1.2; opacity: .45; }
.vcd-ibg__weft--whole { opacity: 0; transition: opacity .5s; }
.vcd-inter[data-out='false'] .vcd-ibg__weft--whole { opacity: .45; }
.vcd-ibg__cut path { fill: none; stroke: #ffb35a; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.vcd-inter[data-out='true'] .vcd-ibg__cut path { opacity: .9; }
.vcd-ibg__node { fill: var(--vcd-ochre); opacity: .5; }
.vcd-inter__in { height: 100%; display: grid; grid-template-rows: auto auto auto 1fr; padding-top: clamp(32px, 4.5svh, 44px); }
.vcd-inter__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 40px; align-items: end; }
.vcd-inter__head .vcd-eyebrow { color: var(--vcd-sage-lt); }
.vcd-h2--inter { font-size: clamp(1.85rem, 2.8vw, 2.75rem); max-width: 30ch; }
.vcd-inter__ctl { padding: 12px 14px; background: #0b1c1bf0; border: 1px solid #6bb68f4d; }
.vcd-inter__ctl .vcd-slider__l { color: var(--vcd-on-dark-2); }
.vcd-inter__cap { margin: 4px 0 0; font-size: 15px; color: var(--vcd-on-dark-2); }
.vcd-inter__cap b { color: var(--vcd-on-dark); }
.vcd-inter__quote { margin: 10px 0 0; padding: 8px 14px; background: #0b1c1bc7; border-left: 3px solid var(--vcd-ochre); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 20px; align-items: center; transition: border-color .4s, background-color .4s; }
.vcd-inter__quote blockquote { margin: 0; font: italic 400 clamp(18px, 1.65vw, 22px)/1.28 var(--gft-font-serif); color: #fff3df; }
.vcd-inter__quote figcaption { font-size: 13px; line-height: 1.4; color: var(--vcd-on-dark-2); }
.vcd-inter[data-beat='2'] .vcd-inter__quote { background: #122c2af0; border-left-color: #ffd28f; }
.vcd-lanes { display: grid; gap: 6px; margin-top: 8px; align-content: start; }
.vcd-lane__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.vcd-lane__k { font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vcd-on-dark-2); }
.vcd-lane__r { margin: 0; font-size: 17px; color: var(--vcd-on-dark-2); white-space: nowrap; }
.vcd-lane__r b { position: relative; font-size: 22px; color: var(--vcd-on-dark); font-variant-numeric: tabular-nums; }
.vcd-lane--cloud .vcd-lane__r b { color: #ffc27a; }
.vcd-lane__cells { position: relative; display: grid; grid-template-columns: repeat(72, minmax(0, 1fr)); gap: 2px; height: 38px; margin-top: 6px; overflow: clip; }
.vcd-lane__cells > i { display: block; background: #2e7d62; transition: opacity .35s; }
.vcd-lane__cells > i[data-s='out'] { background: repeating-linear-gradient(135deg, #4a2810 0 3px, #8a4d16 3px 5px); }
.vcd-lane__cells > i[data-s='held'] { background: #a6e8c3; }
.vcd-lane__cells > i[data-s='lost'] { background: repeating-linear-gradient(45deg, #5a3a12 0 3px, #f0b45c 3px 6px); }
.vcd-lane__scan { position: absolute; inset: 0; pointer-events: none; }
.vcd-lane__scan i { position: absolute; top: -2px; bottom: -2px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; opacity: .8; }
:root[data-m-go] .vcd-inter[data-vcd-on] .vcd-lane__scan i { animation: vcd-scanh 6s linear 0s infinite normal none; }
@keyframes vcd-scanh { from { transform: translateX(0); } to { transform: translateX(min(1310px, 92vw)); } }
.vcd-chips4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.vcd-chip4 { display: grid; gap: 1px; padding: 6px 10px; background: #0b1c1bf0; border: 1px solid #6bb68f40; border-left: 3px solid #6bb68f; }
.vcd-chip4 span { font: 13px/1.3 var(--vcd-mono); color: var(--vcd-on-dark-2); }
.vcd-chip4 b { display: block; min-height: 1.3em; font-size: 15px; line-height: 1.3; color: var(--vcd-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcd-chip4 small { font-size: 13px; line-height: 1.35; color: var(--vcd-on-dark-2); }
.vcd-inter[data-out='true'] .vcd-lane--cloud .vcd-chip4 { border-left-color: #ffb35a; }
.vcd-inter[data-out='true'] .vcd-lane--cloud .vcd-chip4 b { color: #ffc27a; }
.vcd-lane__axis { display: flex; justify-content: space-between; padding-top: 2px; font: 13px/1.2 var(--vcd-mono); color: var(--vcd-on-dark-2); }
.vcd-lane__key { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--vcd-on-dark-2); }
.vcd-lane__key li { display: flex; align-items: center; gap: 6px; }
.vcd-lane__key i { display: inline-block; width: 14px; height: 14px; background: #2e7d62; }
.vcd-lane__key i[data-s='out'] { background: repeating-linear-gradient(135deg, #4a2810 0 3px, #8a4d16 3px 5px); }
.vcd-lane__key i[data-s='held'] { background: #a6e8c3; }
.vcd-lane__key i[data-s='lost'] { background: repeating-linear-gradient(45deg, #5a3a12 0 3px, #f0b45c 3px 6px); }
.vcd-inter__bottom { align-self: end; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; position: relative; }
.vcd-inter__more { position: relative; }
.vcd-inter__more summary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid #6bb68f66; background: #0b1c1b; font-size: 15px; font-weight: 650; cursor: pointer; }
.vcd-inter__morebody { position: absolute; z-index: 5; left: 0; bottom: calc(100% + 8px); width: min(640px, 88vw); max-height: 70svh; overflow: auto; padding: 18px 20px; background: #0b1c1b; border: 1px solid #6bb68f66; }
.vcd-inter__morebody p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--vcd-on-dark-2); }
.vcd-inter__track { position: relative; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.vcd-beat { min-height: 85svh; padding-inline: var(--vcd-gutter); }
.vcd-beat:last-child { min-height: 110svh; }
.vcd-beat__card { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vcd-inter__beatbox { position: absolute; z-index: 3; right: 0; bottom: 20px; width: min(420px, 31vw); display: grid; }
.vcd-beatbox { grid-area: 1 / 1; padding: 16px 18px; background: #0b1c1bf5; border: 1px solid #6bb68f59; border-left: 3px solid var(--vcd-ochre-lt); opacity: 0; transition: opacity .16s; }
.vcd-beatbox .vcd-eyebrow { color: var(--vcd-sage-lt); margin-bottom: 8px; }
.vcd-inter[data-beat='0'] .vcd-beatbox[data-b='0'], .vcd-inter[data-beat='1'] .vcd-beatbox[data-b='1'], .vcd-inter[data-beat='2'] .vcd-beatbox[data-b='2'] { opacity: 1; transition: opacity .4s .2s; }
.vcd-beat__card .vcd-eyebrow { color: var(--vcd-sage-lt); margin-bottom: 8px; }
.vcd-beat__t { margin: 0; font-size: 17px; line-height: 1.5; color: var(--vcd-on-dark); }
/* Entrance "shed": the lanes open up and down from the axis line, then the cells and chips follow. */
:root[data-m-go][data-vcd-ready] .vcd-lanes:not([data-vcd-in]) .vcd-lane--cloud { clip-path: inset(26% 0 0 0); opacity: .72; }
:root[data-m-go][data-vcd-ready] .vcd-lanes:not([data-vcd-in]) .vcd-lane--edge { clip-path: inset(0 0 26% 0); opacity: .72; }
:root[data-m-go][data-vcd-ready] .vcd-lanes:not([data-vcd-in]) .vcd-chip4 { opacity: .65; }
:root[data-m-go] .vcd-lanes[data-vcd-in] .vcd-lane--cloud { animation: vcd-shed-up 560ms var(--vcd-e) 0ms 1 normal backwards; }
:root[data-m-go] .vcd-lanes[data-vcd-in] .vcd-lane--edge { animation: vcd-shed-down 560ms var(--vcd-e) 60ms 1 normal backwards; }
:root[data-m-go] .vcd-lanes[data-vcd-in] .vcd-chip4 { animation: vcd-chip 360ms var(--vcd-e) 360ms 1 normal backwards; }
@keyframes vcd-shed-up { from { clip-path: inset(26% 0 0 0); opacity: .72; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes vcd-shed-down { from { clip-path: inset(0 0 26% 0); opacity: .72; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes vcd-chip { from { opacity: .65; } }
/* Hand-over 6 to 7: the edge lane rewinds right to left into block 7's hour-cell ring (script sets data-rewind). */
.vcd-inter[data-rewind] .vcd-lane--edge .vcd-lane__cells > i { opacity: .1; transition-delay: calc((71 - var(--c)) * 5ms); }

/* ------------------------------------------------------------------ 7. rim and core (forest) */
.vcd-build { padding-block: clamp(56px, 8svh, 96px) clamp(72px, 10svh, 120px); }
.vcd-build__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.vcd-build__text { scroll-margin-top: 24px; }
.vcd-build__text .vcd-eyebrow { color: var(--vcd-sage-lt); }
.vcd-h2--build { font-size: clamp(1.9rem, 2.8vw, 2.9rem); max-width: 20ch; margin-bottom: 18px; }
.vcd-tally { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; margin-top: 22px; padding: 14px 16px; background: #0a3d3a; border: 1px solid #a6dcbf59; }
.vcd-tally__n { grid-row: span 2; display: flex; gap: 14px; margin: 0; font-size: 15px; font-weight: 650; }
.vcd-tally__n b { display: block; font-size: 28px; line-height: 1; color: #fff; }
.vcd-tally__v { margin: 0; font-size: 17px; font-weight: 700; color: #a6e8c3; }
.vcd-tally__v[data-ok='false'] { color: #ffc27a; }
.vcd-tally__note { margin: 0; font-size: 15px; line-height: 1.4; color: var(--vcd-on-dark-2); }
.vcd-btn { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 8px 14px; border: 1px solid #a6dcbf; background: transparent; color: var(--vcd-on-dark); font-size: 15px; font-weight: 650; }
.vcd-ctrls { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.vcd-ctrls .vcd-legend { color: var(--vcd-on-dark-2); }
.vcd-ctrl { position: relative; display: block; cursor: pointer; }
.vcd-ctrl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vcd-ctrl__card { display: grid; gap: 2px; padding: 10px 14px; background: #0a3d3a; border: 1px solid #a6dcbf40; transition: background-color .3s, border-color .3s; }
.vcd-ctrl__risk { font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vcd-ochre-lt); }
.vcd-ctrl__c { font-size: 15px; font-weight: 650; line-height: 1.35; }
.vcd-ctrl__l { font-size: 13px; color: var(--vcd-on-dark-2); }
.vcd-ctrl input:checked + .vcd-ctrl__card { background: #17665e; border-color: #a6e8c3; box-shadow: inset 4px 0 0 var(--vcd-ochre-lt); }
.vcd-ctrl input:focus-visible + .vcd-ctrl__card { outline: 3px solid var(--vcd-ochre-lt); outline-offset: 2px; }
.vcd-cps { display: grid; margin-top: 14px; }
.vcd-cp { grid-area: 1 / 1; padding: 16px 18px; background: #072d2b; border-left: 3px solid var(--vcd-ochre-lt); transition: opacity .4s .18s; }
.vcd-cp .vcd-eyebrow { color: var(--vcd-sage-lt); margin-bottom: 6px; }
.vcd-cp .vcd-h3 { font-size: 20px; margin-bottom: 8px; }
.vcd-cp__v { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--vcd-on-dark-2); }
.vcd-cp__v b { display: block; font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vcd-sage-lt); }
.vcd-build:not([data-ctrl='0']) .vcd-cp[data-cp='0'], .vcd-build:not([data-ctrl='1']) .vcd-cp[data-cp='1'], .vcd-build:not([data-ctrl='2']) .vcd-cp[data-cp='2'], .vcd-build:not([data-ctrl='3']) .vcd-cp[data-cp='3'] { opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .16s; }
.vcd-lists { display: none; }
.vcd-plan { position: sticky; top: 3svh; margin: 0; }
.vcd-plan__box { position: relative; aspect-ratio: 1000 / 780; perspective: 1600px; }
.vcd-plan__turn { position: absolute; inset: 0; transform-origin: 50% 50%; }
.vcd-plan__svg { width: 100%; height: 100%; overflow: visible; }
.vcd-pl__ring { fill: none; stroke: #a6dcbf; stroke-width: 1.4; opacity: .45; }
.vcd-pl__ring--0 { stroke-width: 4; opacity: 1; stroke: #8fd0ad; }
.vcd-pl__ring--2 { stroke-width: 3; opacity: 1; stroke: var(--vcd-ochre-lt); stroke-dasharray: 12 8; }
.vcd-pl__lan { fill: none; stroke: var(--vcd-ochre-lt); stroke-width: 3; }
.vcd-pl__wan { stroke: var(--vcd-ochre-lt); stroke-width: 3; stroke-dasharray: 6 6; }
.vcd-pl__x { stroke: #ffb35a; stroke-width: 4; stroke-linecap: round; }
.vcd-pl__box { fill: #072d2b; stroke: #a6dcbf; stroke-width: 2; }
.vcd-pl__t { font: 700 19px var(--gft-font-display); fill: #f3f6f2; }
.vcd-pl__t--c { font-size: 17px; }
.vcd-pl__s { font: 600 17px var(--gft-font-display); fill: #d8e6de; }
.vcd-pl__s--o, .vcd-pl__s--c { fill: #ffd9a0; }
.vcd-pl__fc { fill: none; stroke: var(--vcd-ind-lt); stroke-width: 6; }
.vcd-pl__m { fill: var(--vcd-ind-lt); }
.vcd-pl__gate { fill: #072d2b; stroke: #ffd9a0; stroke-width: 2.5; }
.vcd-pl__node { fill: #072d2b; stroke: #a6dcbf; stroke-width: 3; }
.vcd-pl__hex { fill: #165f57; stroke: var(--vcd-ochre-lt); stroke-width: 3.5; }
.vcd-pl__glow { transform-box: fill-box; transform-origin: center; }
.vcd-pl__glow circle { fill: none; stroke: #a6e8c3; stroke-width: 1.5; opacity: .5; }
.vcd-pl__cells path { fill: #8fd0ad; transition: opacity .3s; transition-delay: calc(var(--c) * 14ms); }
.vcd-pl__pkts circle { fill: #ffd28f; }
.vcd-pn > :not(text) { opacity: .5; transition: opacity .45s; }
.vcd-build[data-ctrl='0'] .vcd-pn[data-hl~='0'] > *, .vcd-build[data-ctrl='1'] .vcd-pn[data-hl~='1'] > *, .vcd-build[data-ctrl='2'] .vcd-pn[data-hl~='2'] > *, .vcd-build[data-ctrl='3'] .vcd-pn[data-hl~='3'] > * { opacity: 1; }
:root[data-m-go] .vcd-build[data-vcd-on][data-ctrl='0'] .vcd-pn[data-hl~='0'] .vcd-pl__node, :root[data-m-go] .vcd-build[data-vcd-on][data-ctrl='3'] .vcd-pn[data-hl~='3'] .vcd-pl__gate, :root[data-m-go] .vcd-build[data-vcd-on][data-ctrl='2'] .vcd-pn[data-hl~='2'] .vcd-pl__m { animation: vcd-pnode 2.4s ease-in-out 0s infinite alternate none; }
@keyframes vcd-pnode { from { opacity: 1; } to { opacity: .45; } }
.vcd-plan__chips { position: absolute; inset: 0; container-type: inline-size; }
.vcd-ichip { position: absolute; left: 0; top: 0; display: grid; justify-items: start; width: max-content; max-width: 15cqw; min-height: 44px; padding: 5px 9px; border: 1.5px solid #a6dcbf; background: #072d2b; color: var(--vcd-on-dark); text-align: left; transform: translate(var(--rx), var(--ry)) translate(-50%, -50%); transition: transform .75s var(--vcd-e2), border-color .3s; }
.vcd-ichip[data-lane='core'] { transform: translate(var(--cx), var(--cy)) translate(-50%, -50%); border-color: var(--vcd-ochre-lt); }
.vcd-ichip[data-ok='false'] { border-style: dashed; border-color: #ffb35a; }
.vcd-ichip__tag { font: 700 13px/1.2 var(--vcd-mono); letter-spacing: .08em; color: #a6e8c3; }
.vcd-ichip[data-lane='core'] .vcd-ichip__tag { color: #ffd9a0; }
.vcd-ichip__t { font-size: 13px; font-weight: 650; line-height: 1.25; }
.vcd-ichip__n { display: none; }
.vcd-ichip:hover, .vcd-ichip:focus-visible { background: #17665e; z-index: 2; }
.vcd-plan__ringkey { position: absolute; left: 0; bottom: 0; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vcd-on-dark-2); }
.vcd-plan__ringkey li:first-child { color: #a6e8c3; }
.vcd-plan__ringkey li:last-child { color: #ffd9a0; }
.vcd-plan__cap { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--vcd-ochre-lt); font-size: 15px; line-height: 1.5; color: var(--vcd-on-dark-2); }
/* Entrance "knot": chips knot onto their rings, rim first then core; constraint cards deal in from the left. The
   edge-box ring lights clockwise when the outage lane rewinds into it (script sets data-vcd-lit). */
:root[data-m-go][data-vcd-ready] .vcd-plan:not([data-vcd-in]) .vcd-ichip { clip-path: inset(0 0 100% 0); }
:root[data-m-go] .vcd-plan[data-vcd-in] .vcd-ichip { animation: vcd-knot 460ms var(--vcd-e) calc(var(--o, 0) * 70ms) 1 normal backwards; }
:root[data-m-go][data-vcd-ready] .vcd-build:not([data-vcd-in]) .vcd-ctrl { opacity: .3; translate: -24px 0; }
:root[data-m-go] .vcd-build[data-vcd-in] .vcd-ctrl { animation: vcd-deal-l 460ms var(--vcd-e) calc(200ms + var(--i) * 70ms) 1 normal backwards; }
:root[data-m-go][data-vcd-ready] .vcd-plan:not([data-vcd-lit]) .vcd-pl__cells path { opacity: .12; }
/* Reveal at the final ring position: scaling here also scales the positioning translation. */
@keyframes vcd-knot { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes vcd-deal-l { from { opacity: .3; translate: -24px 0; } }
/* Hand-over 7 to 8: rings and item controls share one turn, remaining visible until the plan leaves. */
@supports (animation-timeline: view()) {
  @media (min-width: 1100px) {
    .vcd-build { view-timeline-name: --vcd-build; view-timeline-axis: block; }
    :root[data-m-go] .vcd-plan__turn { animation-name: vcd-edge; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --vcd-build; animation-range-start: exit 0%; animation-range-end: exit 70%; }
  }
}
@keyframes vcd-edge { from { transform: rotateX(0deg); } to { transform: rotateX(86deg) translateY(10%); } }

/* ------------------------------------------------------------------ 8. closing loom (night) */
.vcd-close { min-height: 100svh; padding-block: clamp(40px, 6svh, 64px) clamp(80px, 12svh, 120px); }
.vcd-close__grid { display: grid; grid-template-columns: minmax(0, 68%) minmax(0, 1fr); grid-template-areas: 'head head' 'loom read' 'basis read'; column-gap: 3%; align-items: start; }
.vcd-close__head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4px 48px; align-items: end; margin-bottom: 20px; }
.vcd-close__head .vcd-eyebrow { grid-column: 1 / -1; color: var(--vcd-sage-lt); }
.vcd-h2--close { font-size: clamp(1.8rem, 2.6vw, 2.7rem); max-width: 28ch; }
.vcd-close__head .vcd-lede { margin: 0; }
.vcd-loom { grid-area: loom; position: relative; min-width: 0; }
.vcd-loom__warps { display: grid; grid-template-columns: repeat(8, 11.2%); padding-left: 11.9%; }
.vcd-loom__warps > * { margin-inline: 2px; }
.vcd-loom__btn { display: grid; align-content: start; justify-items: center; min-height: 58px; padding: 6px 4px; border: 1px solid #6bb68f4d; background: #0a3d3a; color: var(--vcd-on-dark); font-size: 13px; line-height: 1.2; text-align: center; transition: background-color .3s, border-color .3s; }
.vcd-loom__btn b { font: 700 15px/1.2 var(--vcd-mono); color: var(--vcd-ochre-lt); }
.vcd-loom__btn[aria-pressed='true'] { background: #1a6b5a; border-color: #a6e8c3; }
.vcd-loom__svg { display: block; width: 100%; height: auto; overflow: visible; }
.vcd-loom__exit path { fill: none; stroke: var(--vcd-ochre); stroke-width: 2.4; stroke-dasharray: 3 7; opacity: .7; transition: opacity .6s, stroke-dasharray .6s; }
.vcd-close[data-sel='7'] .vcd-loom__exit path { stroke-dasharray: none; opacity: 1; stroke-width: 3; }
.vcd-loom__warp line { stroke: #6bb68f; stroke-width: 3; opacity: .45; transition: opacity .5s; transform-box: fill-box; transform-origin: 50% 0; }
.vcd-loom__warp line[data-on] { opacity: 1; stroke: #a6e8c3; }
.vcd-loom__loose path { fill: none; stroke: #6bb68f; stroke-width: 1.5; stroke-dasharray: 4 8; opacity: .45; }
.vcd-loom__woven { clip-path: inset(-30px var(--wx, 50%) -30px 0); transition: clip-path .8s var(--vcd-e2); }
.vcd-loom__woven path { fill: none; stroke: var(--vcd-ochre-lt); stroke-width: 4; stroke-linecap: round; }
.vcd-loom__flow path { fill: none; stroke: #ffe2b0; stroke-width: 1.2; stroke-dasharray: 2 26; opacity: .6; }
.vcd-loom__knots circle { fill: #072d2b; stroke: #ffd28f; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s; }
.vcd-loom__knots circle[data-on] { opacity: 1; }
:root[data-m-go] .vcd-close[data-vcd-on] .vcd-loom__knots circle[data-cur] { animation: vcd-knotp 1.8s ease-in-out 0s infinite alternate none; }
@keyframes vcd-knotp { from { transform: scale(1); } to { transform: scale(1.5); } }
.vcd-loom__lab { font: 600 17px var(--vcd-mono); fill: #d8e6de; }
.vcd-loom__labn { fill: var(--vcd-ochre-lt); font-weight: 800; }
.vcd-loom__shuttle { transform: translateX(calc(219px + var(--sel) * 112px)); transition: transform .8s var(--vcd-e2); }
.vcd-loom__sway path { fill: #165f57; stroke: #ffd28f; stroke-width: 3.5; }
.vcd-loom__sway text { font: 700 17px var(--vcd-mono); fill: #ffe2b0; }
.vcd-loom__ctl { margin-top: 10px; }
.vcd-loom__ctl .vcd-slider__l { color: var(--vcd-on-dark-2); }
.vcd-loom__read { grid-area: read; position: relative; z-index: 2; margin-top: 62px; padding: 20px 22px; background: #062724; border: 1px solid #6bb68f59; border-top: 3px solid var(--vcd-ochre-lt); }
.vcd-loom__read .vcd-label { color: var(--vcd-sage-lt); }
.vcd-loom__code { margin: 2px 0 0; font: 800 40px/1.1 var(--vcd-mono); color: #ffd28f; }
.vcd-loom__read .vcd-h3 { margin: 4px 0 10px; }
.vcd-loom__sig { margin: 0; min-height: 4.8em; font-size: 17px; line-height: 1.55; color: var(--vcd-on-dark-2); }
.vcd-loom__sig .vcd-w { display: inline; }
:root[data-m-go] .vcd-loom__sig .vcd-w { animation: vcd-word 260ms ease-out calc(var(--w) * 40ms) 1 normal backwards; }
@keyframes vcd-word { from { opacity: 0; } }
.vcd-loom__link { margin: 12px 0 0; }
.vcd-loom__link a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 700; color: #a6e8c3; }
.vcd-loom__link a::after { content: ' ↗'; margin-left: 6px; }
.vcd-loom__link span { font-size: 15px; color: var(--vcd-on-dark-2); }
.vcd-close__basis { grid-area: basis; margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--vcd-on-dark-2); max-width: 100ch; }
/* Entrance "comb": the warps comb down left to right, then the wefts weave to the stage shown. */
:root[data-m-go][data-vcd-ready] .vcd-loom:not([data-vcd-in]) .vcd-loom__warp line { transform: scaleY(.12); }
:root[data-m-go][data-vcd-ready] .vcd-loom:not([data-vcd-in]) .vcd-loom__woven { clip-path: inset(-30px 100% -30px 0); }
:root[data-m-go] .vcd-loom[data-vcd-in] .vcd-loom__warp line { animation: vcd-comb 380ms var(--vcd-e) calc(var(--k) * 50ms) 1 normal backwards; }
:root[data-m-go] .vcd-loom[data-vcd-in] .vcd-loom__woven { animation: vcd-weave 560ms var(--vcd-e2) 340ms 1 normal backwards; }
:root[data-m-go] .vcd-loom[data-vcd-in] .vcd-loom__btn { animation: vcd-comb-b 380ms var(--vcd-e) calc(var(--k) * 50ms) 1 normal backwards; }
@keyframes vcd-comb { from { transform: scaleY(.12); } }
@keyframes vcd-comb-b { from { opacity: .3; transform: translateY(-14px); } }
@keyframes vcd-weave { from { clip-path: inset(-30px 100% -30px 0); } }

/* ------------------------------------------------------------------ phones and narrow screens, acts II and III */
@media (max-width: 1099px) {
  .vcd-gov__grid { grid-template-columns: minmax(0, 1fr); }
  .vcd-dial { position: relative; width: min(86vw, 520px); margin-inline: auto; }
  .vcd-dial__box::after { left: 50%; }
  .vcd-dial__ctl, .vcd-dial__cap, .vcd-gov__thread, .vcd-gov__carry { width: 100%; }
  .vcd-gov__thread { text-align: left; padding: 8px 0 20px; }
  .vcd-gov__right { padding-bottom: 32px; }
  .vcd-dial__tabs { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .vcd-dial__tab { position: relative; left: auto; top: auto; translate: none; width: auto; min-height: 48px; border: 1px solid #0e4d4a55; background: #fff; font-size: 13px; }
  .vcd-dial__box { aspect-ratio: auto; }
  .vcd-dial__svg { aspect-ratio: 1; height: auto; }
  .vcd-dial__read { top: calc(min(86vw, 520px) / 2); }
  .vcd-cad__acts { grid-template-columns: 1fr; }
  .vcd-tiers__top { grid-template-columns: 1fr; grid-template-areas: 'head' 'carry' 'run'; row-gap: 18px; }
  .vcd-tiers__top::before { left: 50%; }
  .vcd-run { height: auto; display: grid; gap: 12px; }
  .vcd-run__stage { position: relative; height: 34svh; order: 0; }
  .vcd-run__read { position: relative; width: auto; translate: none; top: auto; order: 1; }
  .vcd-portal__fig { font-size: 40px; }
  .vcd-portal__tag { font-size: 13px; }
  .vcd-chips { overflow-x: auto; }
  .vcd-seg { width: max-content; padding-inline: 16px; }
  .vcd-seg .vcd-legend { display: none; }
  .vcd-seg__row { flex-wrap: nowrap; }
  .vcd-figs__grid { grid-template-columns: 1fr 1fr; }
  .vcd-fig { min-height: 230px; padding: 14px; grid-template-rows: auto 48px auto 1fr auto; }
  .vcd-fig__v { font-size: 32px; }
  .vcd-fig__v--none { font-size: 22px; line-height: 2.2; }
  .vcd-ledger__row--h { display: none; }
  .vcd-ledger__row { grid-template-columns: 1fr; gap: 6px; padding: 16px; margin-top: 10px; background: #fff; border: 1px solid #0e4d4a33; }
  .vcd-tiers__src { grid-template-columns: 1fr; }
  .vcd-inter__stage, .vcd-inter__in { display: contents; }
  .vcd-inter__rig { display: flex; flex-direction: column; }
  .vcd-inter__bg { z-index: 0; inset: 0 0 auto 0; height: 100svh; }
  .vcd-inter__top { grid-template-columns: 1fr; gap: 16px; position: relative; z-index: 1; width: min(1440px, calc(100% - 2 * var(--vcd-gutter))); margin: 40px auto 0; }
  .vcd-h2--inter { font-size: 30px; }
  .vcd-inter__quote { grid-template-columns: 1fr; width: calc(100% - 2 * var(--vcd-gutter)); margin-inline: auto; position: relative; z-index: 1; }
  .vcd-lanes { position: sticky; top: 0; z-index: 4; width: 100%; padding: 8px var(--vcd-gutter); background: var(--vcd-abyss); border-bottom: 1px solid #6bb68f4d; }
  .vcd-lane__cells { height: 24px; gap: 1px; }
  .vcd-lane__r, .vcd-lane__r b { font-size: 15px; }
  .vcd-lane__r { white-space: normal; flex-basis: 100%; }
  .vcd-lane__head { min-height: 72px; align-content: flex-start; }
  .vcd-chip4 span { display: none; }
  .vcd-lane__head { flex-wrap: wrap; gap: 2px 10px; }
  .vcd-chips4 { grid-template-columns: 1fr 1fr; gap: 4px; }
  .vcd-chip4 { padding: 4px 8px; }
  .vcd-chip4 b { font-size: 13px; min-height: 2.6em; white-space: normal; }
  .vcd-chip4 small, .vcd-lane__key { display: none; }
  .vcd-inter__bottom { width: calc(100% - 2 * var(--vcd-gutter)); margin: 12px auto 0; position: relative; z-index: 1; }
  .vcd-inter__morebody { position: relative; bottom: auto; margin-top: 8px; width: 100%; max-height: none; }
  .vcd-beat { min-height: 60svh; padding-top: 20px; }
  .vcd-beat:last-child { min-height: 70svh; }
  .vcd-beat__card { position: relative; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: 16px 18px; background: #0b1c1bf5; border: 1px solid #6bb68f59; border-left: 3px solid var(--vcd-ochre-lt); }
  .vcd-inter__beatbox { display: none; }
  .vcd-dial__box::after, .vcd-tiers__top::before, .vcd-gov__carry::before, .vcd-tiers__body::after, .vcd-inter__stage::before { display: none; }
  .vcd-build__grid { grid-template-columns: 1fr; }
  .vcd-plan { position: relative; top: auto; order: -1; }
  .vcd-ichip { max-width: none; width: 30px; min-height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; pointer-events: none; }
  .vcd-ichip__tag, .vcd-ichip__t { display: none; }
  .vcd-ichip__n { display: block; font: 700 13px/1 var(--vcd-mono); }
  .vcd-plan__ringkey { position: relative; margin-top: 8px; }
  .vcd-lists { display: grid; gap: 14px; margin-top: 22px; }
  .vcd-list__h { font: 600 13px/1.3 var(--vcd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vcd-on-dark-2); margin-bottom: 6px; }
  .vcd-list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
  .vcd-list li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; padding: 10px 12px; background: #0a3d3a; border: 1px solid #a6dcbf40; }
  .vcd-list__n { font: 700 15px/1.4 var(--vcd-mono); color: #ffd28f; }
  .vcd-list__t { font-size: 15px; font-weight: 650; line-height: 1.35; }
  .vcd-list__t small { display: block; font-size: 13px; font-weight: 400; color: var(--vcd-on-dark-2); }
  .vcd-list__mv { grid-column: 2; justify-self: start; min-height: 44px; padding: 6px 12px; border: 1px solid #a6dcbf; background: transparent; color: var(--vcd-on-dark); font-size: 15px; }
  .vcd-close__grid { grid-template-columns: 1fr; grid-template-areas: 'head' 'loom' 'read' 'basis'; }
  .vcd-close__head { grid-template-columns: 1fr; }
  .vcd-loom__btn { min-height: 44px; padding: 4px 0; }
  .vcd-loom__btn span, .vcd-loom__lab, .vcd-loom__sway text { display: none; }
  .vcd-loom__btn b { font-size: 13px; }
  .vcd-loom__read { margin-top: 18px; }
  .vcd-loom__exit { display: none; }
}

/* Selected controls keep their figures at 7:1 on the lit ground. */
.vcd-mode input:checked + .vcd-mode__card .vcd-mode__n, .vcd-ctrl input:checked + .vcd-ctrl__card .vcd-ctrl__risk, .vcd-loom__btn[aria-pressed='true'] b, .vcd-film__tab[aria-current] b { color: #ffe9c4; }