/* The Values deck — the "What we are looking for" section of / as a diagonal card deck that the
   reader scrolls through (Values Card Deck plan, docs/frontend/Values_Card_Deck_Scroll_Focus_Plan_Oct_08_2026.md,
   D1300–D1346). The founder, 2026-10-08: six cards in a diagonal cascade, every value name legible,
   and then, as the reader scrolls on, each card in turn drops out of the cascade into a slot on the
   left, flattens and shows its image while that value's name and description appear beside it.
   Scrolling back plays it in reverse.

   ONE FILE, LINKED BY / ALONE, AFTER custom.css (D1308). custom.css is shared with hackerhouse.html
   and must end on the legibility block (D873), so nothing here lives there; this file reads that
   block's tokens and never restates their values (§3.11).

   THREE STATES, AND THE FIRST IS TODAY'S PAGE.
     - Off: <body> lacks `values-v2`. The deck block carries `hidden` in the markup, so it is not
       rendered and its images are never fetched (D1306, D1325); the grid shows. Nothing below
       applies: every rule either starts with `.values-v2` or selects an element of the hidden
       block. If this file fails to load, the page is exactly today's.
     - Static (the default once the switch is on): six rows of image, numeral, name and description,
       no pin, no slant, no motion (D1314, D1340). It is what no script, reduced motion, an engine
       without `overflow: clip` or scroll-driven animations, and print all get, with no code path of
       their own.
     - Live: /scripts/values.js adds `values-deck--live` to the block once every check passes. The
       section grows a tall track; one full-height stage inside it stays put (`position: sticky`)
       while the scroll position drives every card. The founder chose to scrub the movement to the
       scroll with CSS scroll-driven animations, as the reference does (D1305 branch (b), A1, §5.6):
       there is no scroll listener, no timer and no animation library, and every live motion rule
       sits inside `@supports (animation-timeline: view())`.

   No `will-change` anywhere (D1313), no `backdrop-filter` (D1324), no `:has()` (D1330). */

/* The numbers (D1312, D1334, D1331), declared once. The track is the cascade's dwell, six steps of
   one value each and a tail on the last, plus one stage height, because a 100svh sticky stage stays
   pinned for the track's length less its own: 60 + 6 × 80 + 40 + 100 = 680svh, 580svh of it pinned.
   Each step splits into a move (a card drops into the slot, the text swaps) and a hold (nothing
   moves); the move starts at half the step and is tuned on the spike with the rest (§5.6). */
.values-deck {
    --vd-n: 6;
    --vd-cascade: 60svh;
    --vd-step: 80svh;
    --vd-tail: 40svh;
    --vd-move: 40svh;
    /* Each card overlaps the next by at least 36% of its width (Pine Labs' 210/330), so the cascade
       stays one stack at every width (D1334). */
    --vd-overlap: 0.64;
    /* The portrait-phone cascade fills the stage's height, no step taller than this share of a card
       (D1331 Fill, A2): a half-card cap, against a third-card cap (0.333), chosen on the spike. */
    --vd-cap: 0.5;
    /* The description's size: the house's desktop body clamp, and its phone clamp below (D1344). */
    --vd-desc: clamp(1rem, 1.3vw, 1.75rem);
}

/* --- 1. The switch ------------------------------------------------------------------------------
   Shown under `values-v2` on <body>; it outranks main.css's `[hidden]` rule by specificity. */
.values-v2 .values-deck {
    display: block;
}
.values-v2 .bento-grid {
    display: none;
}

/* Sticky cannot pin inside a scroll container, and `overflow: hidden` makes both the section and its
   wrapper one (§3.2). `clip` clips the same pixels without that (D1319). The section's own
   `overflow: hidden` is an inline style, which only `!important` outranks. Where `clip` is not
   understood the declaration is dropped and the section stays `hidden`; values.js never arms a live
   deck there. Reached through the section's own class, never `:has()` (D1330). */
.values-v2 .scroll-section--values {
    overflow: clip !important;
}
.values-v2 .scroll-section--values > .content-blockv5 {
    overflow: clip;
}

/* The section's own starfield is cut to one stage height at its top, so the heading keeps its stars
   at their usual scale instead of having them stretched over a six-screen track (§3.3, D1318), and
   fades out over its last quarter into the plain ground below (D1341). This outranks the helix
   mode's `.helix-above .stars` mask, which no longer reaches this pair. */
.values-v2 .scroll-section--values > .content-blockv5 > .stars,
.values-v2 .scroll-section--values > .content-blockv5 > .twinkling {
    bottom: auto;
    height: 100vh;
    height: 100svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

/* The deck is the section's last visible block; the live track must end at the section's end so the
   stage releases exactly where the helix's strip begins (§4.8). The static list keeps the space. */
.values-v2 .scroll-section--values > .content-blockv5 > .content-innerv5 {
    padding-bottom: 0;
}

/* In helix mode the section is made transparent so the helix can show under its last strip
   (custom.css, D803). With the deck, that would show the fixed hero behind the heading and under the
   pinned stage for the whole run (§3.17). So the section gets its ground back everywhere but that
   strip, in the shape of the helix's own mask: opaque to the strip's top, clear --helix-fade lower
   (§4.8, D1318). The ground is the one ring mode has: black, or the lifted sky under tl-3. */
.values-v2 .scroll-section--values.helix-above {
    background-image: linear-gradient(to bottom, #000 calc(100% - var(--helix-reach, 0px)), transparent calc(100% - var(--helix-reach, 0px) + var(--helix-fade, 0px)));
}
.tl-3 .values-v2 .scroll-section--values.helix-above {
    background-image: linear-gradient(to bottom, var(--tl-ground) calc(100% - var(--helix-reach, 0px)), transparent calc(100% - var(--helix-reach, 0px) + var(--helix-fade, 0px)));
}

/* --- 2. The static list (D1314, D1340) ------------------------------------------------------------
   Image card on the left, numeral, name and description beside it, at every width. One column up
   to 1,000 px (A9), two columns of three rows above, in TRAITS order row by row. */
.values-deck {
    position: relative;
    margin-top: 1rem;
    padding: 0 1.25rem 3rem;
}
.values-deck__band,
.values-deck__stage > .stars,
.values-deck__stage > .twinkling {
    display: none;
}
.values-deck__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
    max-width: 44rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: vd;
}
.values-deck__item {
    display: grid;
    grid-template-columns: clamp(6rem, 36vw, 13rem) minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
    counter-increment: vd;
}

/* The card: the house gradient over an opaque black base, so each card is a solid in the stack and
   nothing behind it shows through its label (D1336); the cyan border is the card's own ::after,
   ABOVE the image, where the grid's sits beneath its content (D1324). Square, to match the icons,
   each shown whole with its transparency over the ground (D1310, D1346). */
.values-deck__card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(74, 0, 255, 0.2), #000000) #000;
    isolation: isolate;
}
.values-deck__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}
.values-deck__card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(90deg,
        #00ffff 0%,
        #00aaff 16.66%,
        #0084ff 33.33%,
        #00ffff 50%,
        #00aaff 66.66%,
        #0084ff 83.33%,
        #00ffff 100%);
    background-size: 200% 100%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    /* Runs on the focused card only, and is paused, never removed, everywhere else: removing it
       would reset the gradient's position and jump the border of the card that is leaving (D1337). */
    animation: vd-border-glow 8s linear infinite;
    animation-play-state: paused;
}
@keyframes vd-border-glow {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* The name on the card is a visual duplicate for the cascade (D1315). The static list shows every
   image, so it has no use for it. */
.values-deck__label {
    display: none;
}

.values-deck__text {
    text-align: left;
}
/* Names in Centrion, the face tl-2 gives the grid labels (D879); one face, so 400 (D1344). */
.values-deck__text h3 {
    margin: 0;
    font-family: 'Centrion', 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: clamp(1.25rem, 1.6vw, 2rem);
    line-height: 1.1;
}
/* The position numeral, the Details index's own idiom (D708, D1338): a counter, not markup, with
   empty alternative text because the <ol> already says where each item is. The static list is all
   in view, so its rows say "01" alone; the live deck adds the total. */
.values-deck__text h3::before {
    content: counter(vd, decimal-leading-zero) / "";
    display: block;
    margin-bottom: 0.75rem;
    font-size: calc(0.8 * var(--vd-desc));
    line-height: 1;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.85);
}
/* The page's body face (custom.css's system stack, which D869 kept), not Inter (D1344). */
.values-deck__text p {
    margin: 0.5rem 0 0;
    max-width: 26em;
    font-size: var(--vd-desc);
    font-weight: 300;
    line-height: 1.6;
}

/* The phone block, the house's own query: phone-sized type, the poem's 1.25rem gutter. */
@media screen and (max-width: 1000px) and (orientation: portrait), screen and (max-width: 600px) {
    .values-deck {
        --vd-desc: clamp(1rem, 2.4vw, 1.5rem);
    }
}
/* Other windows up to 1,000 px (landscape phones, short desktop windows): a 3rem frame (D1335). */
@media (min-width: 601px) and (max-width: 1000px) and (orientation: landscape) {
    .values-deck {
        padding-inline: 3rem;
    }
}
/* Above 1,000 px every side-index label shows; the frame clears them (D1335). Two columns. */
@media (min-width: 1001px) {
    .values-deck {
        padding-inline: max(11rem, 11.5vw);
    }
    .values-deck__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
        row-gap: 2rem;
        max-width: none;
    }
}

/* Ink and weight follow the grid's under the legibility flag, each with the `!important` that
   custom.css's white `.content-innerv5 p, … h3` rule needs beating, so ?tl=-4 and ?tl=-5 revert the
   deck with the grid (§3.11, D1339). */
.tl-4 .values-deck__text p,
.tl-4 .values-deck__text h3 {
    color: var(--tl-ink) !important;
}
.tl-4 .values-deck__label {
    color: var(--tl-ink);
}
.tl-5 .values-deck__text p {
    font-weight: var(--tl-w-body);
}

/* --- 3. The live deck (D1305 branch (b), §5.6) ---------------------------------------------------
   Screen only, so print keeps the static list (§8.8); only without a reduced-motion preference,
   which values.js already checks at load, so a preference set later also gets the list; and only on
   a screen at least 321px tall. Below that the stack cannot hold its names and the focus layout
   cannot fit, so those screens get the static list, the founder's pre-approved fallback for
   too-short landscape phones (D1328, A4). Measured on the spike, 2026-10-08: at 568×320 (the
   phone arrangement on its side) "Contrarianism" ran 39px past its card and the focus layout 53px
   past the screen; at 667×320 the stack held by 9px, at 844×340 by 28px and at 844×390 by 74px.
   CSS, not script, so a phone turned either way follows. */
@supports (animation-timeline: view()) {
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 321px) {

    .values-deck--live {
        padding: 0;
    }

    /* The track: its length is the run (D1312), and it is the scroll timeline every card reads. */
    .values-deck--live .values-deck__track {
        position: relative;
        height: calc(var(--vd-cascade) + var(--vd-n) * var(--vd-step) + var(--vd-tail) + 100svh);
        view-timeline: --vd-track;
    }

    /* Seven contiguous bands, one per state (cascade + six values), which values.js's observer
       watches for the one thing that is not movement: which card is focused, for its border, the
       GA events and the debug readout (§5.6). The state line is the middle of the viewport, so each
       boundary sits 50svh further down the track than the dwells alone would put it (§5.2):
       band 0 to 110svh, then one step each, and band 6 to the track's end. */
    .values-deck--live .values-deck__band {
        display: block;
        position: absolute;
        left: 0;
        width: 1px;
        top: calc(50svh + var(--vd-cascade) + var(--vd-b) * var(--vd-step));
        height: var(--vd-step);
        pointer-events: none;
    }
    .values-deck--live .values-deck__band:nth-of-type(1) { top: 0; height: calc(50svh + var(--vd-cascade)); }
    .values-deck--live .values-deck__band:nth-of-type(2) { --vd-b: 0; }
    .values-deck--live .values-deck__band:nth-of-type(3) { --vd-b: 1; }
    .values-deck--live .values-deck__band:nth-of-type(4) { --vd-b: 2; }
    .values-deck--live .values-deck__band:nth-of-type(5) { --vd-b: 3; }
    .values-deck--live .values-deck__band:nth-of-type(6) { --vd-b: 4; }
    .values-deck--live .values-deck__band:nth-of-type(7) { --vd-b: 5; height: auto; bottom: 0; }

    /* The stage: one screen, pinned for the run, with its own starfield at the stage's scale (§3.3,
       D1318). It is the size container every length below is measured in, so the geometry is the
       stage's own, whatever a scrollbar takes from the window.

       THE GEOMETRY (§4.3, D1334, D1335, D1328, D1331). Every card's box is laid out at its FOCUS
       size in the slot, and the cascade draws it smaller by a unitless factor --vd-f, so the
       focused card rests at scale(1) and is rasterised sharp (D1313). F is the frame's inner width,
       inside a padding that clears the side index; w is the drawn cascade card; sx and sy are the
       stair's steps; the cascade is centred in the stage both ways. 1.07 is a card's height with
       the 4° slant (tan 4° = 0.07); 1.92 × the label is the 1.6 × line-height legibility floor
       on the drawn name (G1). */
    .values-deck--live .values-deck__stage {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        container-type: size;
        isolation: isolate;
        --vd-pad: max(11rem, 11.5vw);
        --vd-g: 16px;
        --vd-gap: clamp(2rem, 5vw, 6rem);
        --vd-f: 0.7407;
        --vd-fw: min(clamp(17.55rem, 29.7cqw, 26rem), calc((100cqh - 2 * var(--vd-g) - (var(--vd-n) - 1) * 1.92rem) * 1.35 / 1.07), calc(100cqh - 2 * var(--vd-g)));
        --vd-w: calc(var(--vd-fw) * var(--vd-f));
        --vd-label: max(1rem, calc(0.054 * var(--vd-w)));
        --vd-floor: calc(1.92 * var(--vd-label));
        --vd-frame: calc(100cqw - 2 * var(--vd-pad));
        --vd-stepx: min(calc((var(--vd-frame) - var(--vd-w)) / (var(--vd-n) - 1)), calc(var(--vd-overlap) * var(--vd-w)));
        --vd-stepy: max(var(--vd-floor), min(calc(0.72 * var(--vd-stepx)), calc((100cqh - 1.07 * var(--vd-w) - 2 * var(--vd-g)) / (var(--vd-n) - 1))));
        /* The focus composition: card, gap, panel, centred as one group (§4.4, D1335). */
        --vd-panel: min(calc(26 * var(--vd-desc)), calc(var(--vd-frame) - var(--vd-fw) - var(--vd-gap)));
        --vd-slot-x: calc((100cqw - var(--vd-fw) - var(--vd-gap) - var(--vd-panel)) / 2);
        --vd-slot-y: calc((100cqh - var(--vd-fw)) / 2);
        --vd-left: calc((100cqw - var(--vd-w) - (var(--vd-n) - 1) * var(--vd-stepx)) / 2);
        --vd-top: calc((100cqh - 1.07 * var(--vd-w) - (var(--vd-n) - 1) * var(--vd-stepy)) / 2);
    }
    .values-deck--live .values-deck__stage > .stars,
    .values-deck--live .values-deck__stage > .twinkling {
        display: block;
    }

    .values-deck--live .values-deck__list {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        max-width: none;
        margin: 0;
    }
    /* Each item covers the stage, so the six cards share one slot and the six text blocks one
       panel; only the active ones are opaque. Nothing leaves the accessibility tree (D1315). Each
       item's own move starts at --vd-at, the next one's at --vd-next (§5.6). */
    .values-deck--live .values-deck__item {
        position: absolute;
        inset: 0;
        display: block;
        --vd-at: calc(var(--vd-cascade) + var(--i) * var(--vd-step));
        --vd-next: calc(var(--vd-at) + var(--vd-step));
    }

    /* THE CHOREOGRAPHY (D1337), as scroll ranges. 0 → 1: the front card moves from its place into
       the slot, flattening and growing, while the other five fade where they lie and then wait,
       invisibly, 12svh above the slot. k → k+1: card k+1 drops into the slot in front of card k,
       fading in over the first 40% of the move and flattening as it lands; card k stays beneath and
       fades once covered. Scrolling back plays every range backwards, a true mirror (A10). In the
       cascade the front card is on top; in focus a later card is above an earlier one, and the swap
       waits until the five have faded. The fall eases with the house ease-out (D137, D1313). */
    .values-deck--live .values-deck__card {
        position: absolute;
        left: var(--vd-slot-x);
        top: var(--vd-slot-y);
        width: var(--vd-fw);
        height: var(--vd-fw);
        aspect-ratio: auto;
        transform-origin: 0 0;
        --vd-cx: calc(var(--vd-left) + var(--i) * var(--vd-stepx) - var(--vd-slot-x));
        --vd-cy: calc(var(--vd-top) + (var(--vd-n) - 1 - var(--i)) * var(--vd-stepy) - var(--vd-slot-y));
        animation-name: vd-park, vd-drop, vd-drop-fade, vd-cover, vd-stack;
        animation-duration: auto;
        animation-timing-function: linear, cubic-bezier(0.33, 1, 0.68, 1), linear, linear, linear;
        animation-fill-mode: both, forwards, forwards, forwards, both;
        animation-timeline: --vd-track;
        animation-range-start: contain var(--vd-cascade), contain var(--vd-at), contain var(--vd-at), contain var(--vd-next), contain var(--vd-cascade);
        animation-range-end: contain calc(var(--vd-cascade) + var(--vd-move)), contain calc(var(--vd-at) + var(--vd-move)), contain calc(var(--vd-at) + var(--vd-move)), contain calc(var(--vd-next) + var(--vd-move)), contain calc(var(--vd-cascade) + var(--vd-move));
    }
    .values-deck--live .values-deck__item:first-child .values-deck__card {
        animation-name: vd-lead, vd-cover, vd-stack;
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1), linear, linear;
        animation-fill-mode: both, forwards, both;
        animation-range-start: contain var(--vd-cascade), contain var(--vd-next), contain var(--vd-cascade);
        animation-range-end: contain calc(var(--vd-cascade) + var(--vd-move)), contain calc(var(--vd-next) + var(--vd-move)), contain calc(var(--vd-cascade) + var(--vd-move));
    }
    .values-deck--live .values-deck__item:last-child .values-deck__card {
        animation-name: vd-park, vd-drop, vd-drop-fade, vd-stack;
        animation-timing-function: linear, cubic-bezier(0.33, 1, 0.68, 1), linear, linear;
        animation-fill-mode: both, forwards, forwards, both;
        animation-range-start: contain var(--vd-cascade), contain var(--vd-at), contain var(--vd-at), contain var(--vd-cascade);
        animation-range-end: contain calc(var(--vd-cascade) + var(--vd-move)), contain calc(var(--vd-at) + var(--vd-move)), contain calc(var(--vd-at) + var(--vd-move)), contain calc(var(--vd-cascade) + var(--vd-move));
    }

    /* The focused card's border runs; every other card's stays paused (D1324, D1337). A scroll
       timeline cannot start a time-based animation, so this is the one thing keyed on the state
       values.js writes. */
    .values-deck--live[data-state="1"] .values-deck__item:nth-child(1) .values-deck__card::after,
    .values-deck--live[data-state="2"] .values-deck__item:nth-child(2) .values-deck__card::after,
    .values-deck--live[data-state="3"] .values-deck__item:nth-child(3) .values-deck__card::after,
    .values-deck--live[data-state="4"] .values-deck__item:nth-child(4) .values-deck__card::after,
    .values-deck--live[data-state="5"] .values-deck__item:nth-child(5) .values-deck__card::after,
    .values-deck--live[data-state="6"] .values-deck__item:nth-child(6) .values-deck__card::after {
        animation-play-state: running;
    }

    /* The image only in focus (D1301): it fades in over the last 30% of its card's move, so it lands
       before it lights, and the name on the card fades out as it does, because a transparent icon
       cannot cover it (D1339, B13). */
    .values-deck--live .values-deck__card img {
        animation: vd-image linear both;
        animation-duration: auto;
        animation-timeline: --vd-track;
        animation-range: contain var(--vd-at) contain calc(var(--vd-at) + var(--vd-move));
    }

    /* The cascade's name: drawn at max(1rem, 0.054 × w) and written at that size divided by the
       cascade factor, because the card is laid out at focus size and drawn smaller (D1339, D1344).
       Top-left, one line, inside the band the card above leaves showing (§4.3). */
    .values-deck--live .values-deck__label {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        padding: calc(0.4 * var(--vd-label) / var(--vd-f)) calc(0.75 * var(--vd-label) / var(--vd-f));
        font-family: 'Centrion', 'Source Sans Pro', sans-serif;
        font-weight: 400;
        font-size: calc(var(--vd-label) / var(--vd-f));
        line-height: 1.2;
        white-space: nowrap;
        animation: vd-label linear both;
        animation-duration: auto;
        animation-timeline: --vd-track;
        animation-range: contain var(--vd-at) contain calc(var(--vd-at) + var(--vd-move));
    }

    /* The text panel: right of the card on a desktop, vertically centred on it (§4.4). The outgoing
       block fades over 40–50% of the move, rising 12px; the incoming over 50–60%, from 12px below.
       Never both at once (A11); empty for at most a tenth of the move (D1337). */
    .values-deck--live .values-deck__text {
        position: absolute;
        left: calc(var(--vd-slot-x) + var(--vd-fw) + var(--vd-gap));
        top: var(--vd-slot-y);
        width: var(--vd-panel);
        height: var(--vd-fw);
        display: flex;
        flex-direction: column;
        justify-content: center;
        animation-name: vd-text-in, vd-text-out;
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both, forwards;
        animation-timeline: --vd-track;
        animation-range-start: contain var(--vd-at), contain var(--vd-next);
        animation-range-end: contain calc(var(--vd-at) + var(--vd-move)), contain calc(var(--vd-next) + var(--vd-move));
    }
    .values-deck--live .values-deck__item:last-child .values-deck__text {
        animation-name: vd-text-in;
        animation-fill-mode: both;
        animation-range: contain var(--vd-at) contain calc(var(--vd-at) + var(--vd-move));
    }
    .values-deck--live .values-deck__text h3 {
        font-size: clamp(2rem, 3vw, 4rem);
    }
    .values-deck--live .values-deck__text h3::before {
        content: counter(vd, decimal-leading-zero) " / 06" / "";
    }

    /* The phone block: the same story in a portrait arrangement (D1300). The frame is the poem's
       1.25rem gutter (D1335); the focus card is the frame's width, at most 52svh tall, with the text
       left-aligned under it on the card's left edge; the cascade card is 0.47 of it (§4.3), and the
       stair fills the stage's height, no step taller than --vd-cap of a card (D1331). The text
       panel's height is reserved as 9rem, so the slot sits in the same place for all six. */
    @media screen and (max-width: 1000px) and (orientation: portrait), screen and (max-width: 600px) {
        .values-deck--live .values-deck__stage {
            --vd-pad: 1.25rem;
            --vd-gap: 1.25rem;
            --vd-f: 0.47;
            --vd-fw: min(calc(100cqw - 2 * var(--vd-pad)), 52cqh, 25.5rem, calc((100cqh - 2 * var(--vd-g) - (var(--vd-n) - 1) * 1.92rem) / 1.07 / 0.47));
            --vd-stepy: clamp(var(--vd-floor), calc((100cqh - 1.07 * var(--vd-w) - 2 * var(--vd-g)) / (var(--vd-n) - 1)), calc(var(--vd-cap) * var(--vd-w)));
            --vd-panel: var(--vd-fw);
            --vd-slot-x: calc((100cqw - var(--vd-fw)) / 2);
            --vd-slot-y: max(var(--vd-g), calc((100cqh - var(--vd-fw) - var(--vd-gap) - 9rem) / 2));
        }
        .values-deck--live .values-deck__text {
            left: var(--vd-slot-x);
            top: calc(var(--vd-slot-y) + var(--vd-fw) + var(--vd-gap));
            height: auto;
            display: block;
        }
    }
    /* Landscape phones and short desktop windows up to 1,000 px: a 3rem frame (D1335). */
    @media (min-width: 601px) and (max-width: 1000px) and (orientation: landscape) {
        .values-deck--live .values-deck__stage {
            --vd-pad: 3rem;
        }
    }

    /* In helix mode the stage's own starfield is masked over its bottom strip by custom.css's
       `.helix-above .stars`, which would leave a starless strip at the bottom of the screen for the
       whole run. Instead the mask grows in only over the last --helix-reach of the run, as the
       section's clear strip rises into view under it, so the two meet at release and the stars go
       on to the screen's edge until then (§5.6's optional "unmask only at release", A12). */
    .values-v2 .scroll-section--values.helix-above .values-deck--live .values-deck__stage {
        animation: vd-release linear both;
        animation-duration: auto;
        animation-timeline: --vd-track;
        animation-range: contain calc(100% - var(--helix-reach, 0px)) contain 100%;
    }
    .values-v2 .scroll-section--values.helix-above .values-deck--live .values-deck__stage > .stars,
    .values-v2 .scroll-section--values.helix-above .values-deck--live .values-deck__stage > .twinkling {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--vd-release) * var(--helix-reach, 0px)), transparent calc(100% - var(--vd-release) * (var(--helix-reach, 0px) - var(--helix-fade, 0px))));
        mask-image: linear-gradient(to bottom, #000 calc(100% - var(--vd-release) * var(--helix-reach, 0px)), transparent calc(100% - var(--vd-release) * (var(--helix-reach, 0px) - var(--helix-fade, 0px))));
    }

    @keyframes vd-lead {
        from { transform: translate(var(--vd-cx), var(--vd-cy)) skewY(4deg) scale(var(--vd-f)); }
        to { transform: translate(0px, 0px) skewY(0deg) scale(1); }
    }
    @keyframes vd-park {
        0% { transform: translate(var(--vd-cx), var(--vd-cy)) skewY(4deg) scale(var(--vd-f)); opacity: 1; }
        43% { transform: translate(var(--vd-cx), var(--vd-cy)) skewY(4deg) scale(var(--vd-f)); opacity: 0; }
        43.01%, 100% { transform: translate(0px, -12cqh) skewY(4deg) scale(1); opacity: 0; }
    }
    @keyframes vd-drop {
        from { transform: translate(0px, -12cqh) skewY(4deg) scale(1); }
        to { transform: translate(0px, 0px) skewY(0deg) scale(1); }
    }
    @keyframes vd-drop-fade {
        0% { opacity: 0; }
        40%, 100% { opacity: 1; }
    }
    @keyframes vd-cover {
        0%, 95% { opacity: 1; }
        100% { opacity: 0; }
    }
    @keyframes vd-stack {
        0%, 43% { z-index: calc(var(--vd-n) - var(--i)); }
        43.01%, 100% { z-index: var(--i); }
    }
    @keyframes vd-image {
        0%, 70% { opacity: 0; }
        100% { opacity: 1; }
    }
    @keyframes vd-label {
        0%, 70% { opacity: 1; }
        100% { opacity: 0; }
    }
    @keyframes vd-text-in {
        0%, 50% { opacity: 0; translate: 0 12px; }
        60%, 100% { opacity: 1; translate: 0 0; }
    }
    @keyframes vd-text-out {
        0%, 40% { opacity: 1; translate: 0 0; }
        50%, 100% { opacity: 0; translate: 0 -12px; }
    }
    @keyframes vd-release {
        from { --vd-release: 0; }
        to { --vd-release: 1; }
    }
}
}

/* Registered so the release ramp above interpolates; unregistered, it would flip at the midpoint. */
@property --vd-release {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}