/* vNext prototype (legacy, to be reduced page by page). Not a source of truth for core. */

/* Layout: one editorial scroll in the order of the approved storyboard. Hero, six acts, skins, footer. The cut angle (18.4deg from vertical) is the only structural device. */
@property --t  { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --s  { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --sp { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

:root {
  /* Short names for the prototype CSS. Values come from the Velora Skin (palette, accent, light/dark): nothing is repeated here. */
  --bg: var(--vl-bg-main); --surface: var(--vl-bg-surface); --fg: var(--vl-text-primary); --muted: var(--vl-text-muted); --line: var(--vl-border-subtle); --accent: var(--vl-color-accent);
  --font-display: 'Outfit', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --cut-angle: 18.4deg;
  --axis: calc(90deg + var(--cut-angle));
  --pitch: 9px;
  --hair: calc(var(--vl-skin-border-width) * 1.2);
  --ease: var(--vl-ease-cinematic);
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.muted { color: var(--muted); }
@layer velora.reset { a { color: inherit; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code { font-family: var(--font-mono); font-size: .9em; }

/* ---------- Cut Reveal (mask, from the prototype) ---------- */
.cutm {
  --n: 8;
  --p: clamp(.04, calc(var(--t) * 1.2 - .1), 1.04);
  --w: calc(var(--t) * 160% - 10%);
  --m-wave: linear-gradient(var(--axis), #000 calc(var(--w) - 28%), transparent var(--w));
  --m-solid: linear-gradient(var(--axis), #000 calc(var(--w) - 70%), transparent calc(var(--w) - 45%));
  --m-blinds: repeating-linear-gradient(var(--axis), #000 0, #000 calc(var(--p) * 100% / var(--n)), transparent calc(var(--p) * 100% / var(--n)), transparent calc(100% / var(--n)));
  -webkit-mask-image: var(--m-wave), var(--m-solid), var(--m-blinds);
  mask-image: var(--m-wave), var(--m-solid), var(--m-blinds);
  -webkit-mask-composite: source-in, source-over, source-over;
  mask-composite: intersect, add, add;
}
@keyframes cut-a { from { --t: 0; } to { --t: 1; } }
@keyframes cut-in { from { --t: 0; } to { --t: 1; } }
.fan {
  -webkit-mask-image: linear-gradient(var(--axis), #000 var(--s), transparent var(--s)), repeating-linear-gradient(var(--axis), #000 0 var(--hair), transparent calc(var(--hair) + .7px) var(--pitch));
  mask-image: linear-gradient(var(--axis), #000 var(--s), transparent var(--s)), repeating-linear-gradient(var(--axis), #000 0 var(--hair), transparent calc(var(--hair) + .7px) var(--pitch));
}

/* status tags */
.st { display: inline-block; padding: 1px 8px; border: 1px solid var(--accent); }
.st.ex { background: var(--accent); color: var(--bg); }

/* ---------- header: wordmark, Cut Nav, Cut Progress ---------- */
.ac-o { --vl-swatch: #7F8668; } .ac-v { --vl-swatch: #D9431A; } .ac-c { --vl-swatch: #4A63F0; }
@media (max-width: 760px) { .vl-header__actions .vl-segmented, .vl-header__actions .vl-swatches { display: none; } }
/* ---------- hero + Cut Curtain ---------- */
.hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; container-type: size; height: clamp(560px, 84svh, 800px); }
.field { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(var(--axis), var(--line) 0 1px, transparent 1px 38px); }
.hero-in { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px 40px; align-content: center; align-items: center; padding: clamp(24px, 5vw, 56px) var(--gutter); max-width: 1280px; margin-inline: auto; }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 6.2rem); font-weight: 800; --n: 10; animation: cut-a 1.4s var(--ease) .75s backwards; }
.hero h1 em { font-style: normal; color: var(--accent); --vl-text-primary: var(--accent); --vl-color-primary: var(--fg); }
/* Hero ground: soft accent light behind the V mark and a faint wash from the top-left (chrome only, no motion) */
.hero { background:
  radial-gradient(55% 85% at 78% 52%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 72%),
  radial-gradient(45% 65% at 8% 8%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
  linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--bg) 90%, var(--accent))); }
.hero .lede { max-width: 48ch; margin-top: 22px; color: var(--muted); font-size: 1.05rem; }
.hero .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero .bigv { width: 100%; max-width: 300px; justify-self: end; fill: currentColor; display: block; align-self: end; }
@media (max-width: 820px) { .hero-in { grid-template-columns: minmax(0, 1fr); } .hero .bigv { display: none; } }
.curtain { --sk: calc(tan(var(--cut-angle)) * 100cqh); position: absolute; inset: 0 calc(var(--sk) * -1); pointer-events: none; z-index: 5; }
.curtain i { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100% / 7); width: calc(100% / 7 + var(--sk)); background: var(--fg); translate: 0 -105%;
  clip-path: polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); }
.curtain i:nth-child(odd) { background: color-mix(in oklab, var(--fg) 86%, var(--accent)); }
@keyframes lift { from { translate: 0 0; } to { translate: 0 -105%; } }
@keyframes lift2 { from { translate: 0 0; } to { translate: 0 -105%; } }
@media (prefers-reduced-motion: no-preference) {
  .curtain i { animation: lift 1.05s var(--ease) both; animation-delay: calc(80ms + var(--i) * 60ms); }
  .hero:has(.rp:checked) .curtain i { animation-name: lift2; }
  .hero:has(.rp:checked) h1 { animation-name: cut-in; }
}
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } .hero h1 { animation: none; } }
.replay { position: absolute; right: var(--gutter); top: 14px; z-index: 6; }
.replay .btn { display: inline-flex; gap: 8px; align-items: center; padding: 5px 10px; border: 1px solid var(--line); cursor: pointer; color: var(--muted); background: color-mix(in oklab, var(--bg) 80%, transparent); }
.replay .btn:hover { color: var(--fg); border-color: var(--fg); }
.rp:focus-visible + .btn { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Cut Divider ---------- */
.cd { --cp: 16px; --t: 1; height: clamp(80px, 14vw, 170px); background: var(--fg);
  -webkit-mask-image: repeating-linear-gradient(var(--axis), #000 0 calc(var(--t) * var(--cp)), transparent calc(var(--t) * var(--cp)) var(--cp));
  mask-image: repeating-linear-gradient(var(--axis), #000 0 calc(var(--t) * var(--cp)), transparent calc(var(--t) * var(--cp)) var(--cp)); }
@keyframes cdt { from { --t: 0; } to { --t: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .cd { animation: cdt linear both; animation-timeline: view(); animation-range: entry 5% cover 55%; } }
}

/* ---------- section scaffolding ---------- */
.act { padding-block: clamp(48px, 8vw, 104px); border-bottom: 1px solid var(--line); }
.act-h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px 48px; margin-bottom: clamp(24px, 4vw, 48px); align-items: end; }
.act-h h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.act-h .lead { max-width: 58ch; color: var(--muted); }
.act-h .hint { display: block; margin-top: 10px; color: var(--accent); filter: brightness(.9); }
.act-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; color: var(--muted); }
@media (max-width: 820px) { .act-h { grid-template-columns: minmax(0, 1fr); } }
pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 13px/1.7 var(--font-mono); background: var(--surface); border: 1px solid var(--line); }
.tile { border: 1px solid var(--line); background: var(--surface); }

/* ---------- Act 01: Cut Numerals on a dark band ---------- */
.band { background: var(--fg); color: var(--bg); border-bottom: 0; }
.band .act-h .lead { color: color-mix(in oklab, var(--bg) 66%, transparent); }
.band .st { border-color: color-mix(in oklab, var(--bg) 60%, transparent); }
.band .st.ex { background: var(--bg); color: var(--fg); }
.nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid color-mix(in oklab, var(--bg) 25%, transparent); }
.num { padding: 8px 18px 28px 0; display: grid; gap: 6px; overflow: hidden; border-right: 1px solid color-mix(in oklab, var(--bg) 25%, transparent); padding-left: 18px; }
.num:nth-child(5n+1) { padding-left: 0; }
.num:nth-child(5n) { border-right: 0; }
.num:nth-child(-n+5) { border-bottom: 1px solid color-mix(in oklab, var(--bg) 25%, transparent); }
.num:nth-child(n+6) { padding-top: 28px; }
.num .where { justify-self: start; margin-top: 6px; color: color-mix(in oklab, var(--bg) 66%, transparent); text-decoration: none; border-bottom: 1px solid currentColor; font-size: 11px; }
.num .where:hover, .num .where:focus-visible { color: var(--bg); }
.num .n { font: 800 clamp(3.4rem, 7.4vw, 7.2rem)/.8 var(--font-display); letter-spacing: -.045em; --s: 58%; width: fit-content; font-variant-numeric: tabular-nums; padding-top: .08em; }
.num h3 { font-size: 1.4rem; margin-top: 12px; }
.num p { color: color-mix(in oklab, var(--bg) 66%, transparent); max-width: 30ch; font-size: .95rem; }
.src { margin-top: 18px; color: color-mix(in oklab, var(--bg) 55%, transparent); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .num .n { animation: numcut linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    @keyframes numcut { from { --s: 100%; } to { --s: 30%; } }
  }
}
@media (max-width: 980px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .num { padding-right: 12px; padding-left: 12px; border-right: 1px solid color-mix(in oklab, var(--bg) 25%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--bg) 25%, transparent); padding-top: 28px; } .num:nth-child(5n+1), .num:nth-child(5n) { padding-left: 12px; border-right: 1px solid color-mix(in oklab, var(--bg) 25%, transparent); } .num:nth-child(odd) { padding-left: 0; } .num:nth-child(even) { border-right: 0; } .num:nth-child(n+9) { border-bottom: 0; } .num h3 { font-size: 1.15rem; } .num p { font-size: .85rem; } }

/* ---------- Act 02: Pinned Story (six beats) ---------- */
@keyframes beat { 0% { --t: 0; } 18% { --t: 1; } 82% { --t: 1; } 100% { --t: 0; } }
@keyframes beat-first { 0% { --t: 0; } 12% { --t: 1; } 89% { --t: 1; } 100% { --t: 0; } }
@keyframes beat-last { 0% { --t: 0; } 30% { --t: 1; } 100% { --t: 1; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story { position: relative; }
.pin { position: relative; padding-block: clamp(8px, 2vw, 24px); }
.beats { display: grid; gap: clamp(40px, 8vw, 88px); }
.beat { display: grid; gap: 14px; --n: 12; }
.beat .i { color: var(--muted); }
.beat .k { font: 800 clamp(3.2rem, 13vw, 11rem)/.92 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.beat .v { font: 500 clamp(1.4rem, 3.4vw, 3rem)/1.08 var(--font-display); color: var(--muted); max-width: 22ch; }
.beat pre { max-width: 560px; }
.pbar { display: none; height: 2px; background: var(--line); margin-top: 28px; }
.pbar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story { height: 640vh; view-timeline: --story block; }
    .pin { position: sticky; top: 0; height: 100svh; padding-top: 72px; overflow: hidden; display: grid; align-content: center; }
    .beats { gap: 0; }
    .beat { grid-area: 1 / 1; animation: beat linear both; animation-timeline: --story; align-content: center;
      -webkit-mask-image: var(--m-wave), var(--m-solid), var(--m-blinds); mask-image: var(--m-wave), var(--m-solid), var(--m-blinds);
      -webkit-mask-composite: source-in, source-over, source-over; mask-composite: intersect, add, add; }
    .beat:nth-child(1) { animation-name: beat-first; animation-range: cover 7% cover 26.7%; }
    .beat:nth-child(2) { animation-range: cover 26.7% cover 38.3%; }
    .beat:nth-child(3) { animation-range: cover 38.3% cover 50%; }
    .beat:nth-child(4) { animation-range: cover 50% cover 61.7%; }
    .beat:nth-child(5) { animation-range: cover 61.7% cover 73.3%; }
    .beat:nth-child(6) { animation-name: beat-last; animation-range: cover 73.3% cover 85%; }
    .pbar { display: block; }
    .pbar i { animation: grow linear both; animation-timeline: --story; animation-range: cover 15% cover 85%; }
  }
}

/* ---------- Act 03: Channel Stack ---------- */
.cs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.cs-ctl { padding: clamp(16px, 3vw, 32px); display: grid; gap: 10px; align-content: start; border-right: 1px solid var(--line); }
.cs-ctl label { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); cursor: pointer; }
.cs-ctl label::before { content: ''; grid-row: 1 / 3; width: 14px; height: 14px; border: 1.5px solid var(--fg); }
.cs-ctl input:checked + label { border-color: var(--accent); }
.cs-ctl input:checked + label::before { background: var(--accent); border-color: var(--accent); }
.cs-ctl input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-ctl b { font: 700 1.1rem var(--font-display); }
.cs-ctl small { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.cs-stage { padding: clamp(16px, 3vw, 32px); display: grid; gap: 22px; place-items: center; align-content: center; min-width: 0; overflow: hidden; }
.el { --cp: 14px; --t: 1; width: min(100%, 240px); aspect-ratio: 4 / 5; background: var(--fg); color: var(--bg); display: grid; grid-template-rows: auto 1fr auto; padding: 16px; }
.el svg { width: 44%; justify-self: center; align-self: center; fill: currentColor; }
.el b { font: 800 2.1rem/.95 var(--font-display); letter-spacing: -.03em; }
.el .mono { opacity: .65; }
/* The state itself is author CSS (focus); vl-state="smooth" is what makes it glide instead of snap. */
.el { --vl-state-duration: .7s; }
.el:focus { background: var(--accent); }
/* Each variant is a real element carrying exactly the attributes shown in the code. Core does the motion. */
.cs .v { display: none; }
.cs:has(#ch-enter:not(:checked)):has(#ch-loop:not(:checked)):has(#ch-hover:not(:checked)):has(#ch-state:not(:checked)) .v-0000 { display: contents; }
.cs:has(#ch-enter:not(:checked)):has(#ch-loop:not(:checked)):has(#ch-hover:not(:checked)):has(#ch-state:checked) .v-0001 { display: contents; }
.cs:has(#ch-enter:not(:checked)):has(#ch-loop:not(:checked)):has(#ch-hover:checked):has(#ch-state:not(:checked)) .v-0010 { display: contents; }
.cs:has(#ch-enter:not(:checked)):has(#ch-loop:not(:checked)):has(#ch-hover:checked):has(#ch-state:checked) .v-0011 { display: contents; }
.cs:has(#ch-enter:not(:checked)):has(#ch-loop:checked):has(#ch-hover:not(:checked)):has(#ch-state:not(:checked)) .v-0100 { display: contents; }
.cs:has(#ch-enter:not(:checked)):has(#ch-loop:checked):has(#ch-hover:not(:checked)):has(#ch-state:checked) .v-0101 { display: contents; }
.cs:has(#ch-enter:not(:checked)):has(#ch-loop:checked):has(#ch-hover:checked):has(#ch-state:not(:checked)) .v-0110 { display: contents; }
.cs:has(#ch-enter:not(:checked)):has(#ch-loop:checked):has(#ch-hover:checked):has(#ch-state:checked) .v-0111 { display: contents; }
.cs:has(#ch-enter:checked):has(#ch-loop:not(:checked)):has(#ch-hover:not(:checked)):has(#ch-state:not(:checked)) .v-1000 { display: contents; }
.cs:has(#ch-enter:checked):has(#ch-loop:not(:checked)):has(#ch-hover:not(:checked)):has(#ch-state:checked) .v-1001 { display: contents; }
.cs:has(#ch-enter:checked):has(#ch-loop:not(:checked)):has(#ch-hover:checked):has(#ch-state:not(:checked)) .v-1010 { display: contents; }
.cs:has(#ch-enter:checked):has(#ch-loop:not(:checked)):has(#ch-hover:checked):has(#ch-state:checked) .v-1011 { display: contents; }
.cs:has(#ch-enter:checked):has(#ch-loop:checked):has(#ch-hover:not(:checked)):has(#ch-state:not(:checked)) .v-1100 { display: contents; }
.cs:has(#ch-enter:checked):has(#ch-loop:checked):has(#ch-hover:not(:checked)):has(#ch-state:checked) .v-1101 { display: contents; }
.cs:has(#ch-enter:checked):has(#ch-loop:checked):has(#ch-hover:checked):has(#ch-state:not(:checked)) .v-1110 { display: contents; }
.cs:has(#ch-enter:checked):has(#ch-loop:checked):has(#ch-hover:checked):has(#ch-state:checked) .v-1111 { display: contents; }
.rd { background: var(--bg); width: min(100%, 420px); max-width: 100%; }
.rd span { display: block; }
.rd .a { display: none; color: var(--accent); }
.cs:has(#ch-enter:checked) .rd .a-enter, .cs:has(#ch-loop:checked) .rd .a-loop, .cs:has(#ch-hover:checked) .rd .a-hover, .cs:has(#ch-state:checked) .rd .a-state { display: block; }
@media (max-width: 820px) { .cs { grid-template-columns: minmax(0, 1fr); } .cs-ctl { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- Act 04: Hover Slice map ---------- */
.hs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hs { --sh: 0px; position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); text-decoration: none; color: var(--bg); border: 1px solid var(--line); outline-offset: 4px; }
.sl { --i: 0; --d: 1; position: absolute; inset: 0; background: var(--fg); display: grid; grid-template-rows: auto 1fr auto; padding: 16px; gap: 8px;
  -webkit-mask-image: linear-gradient(var(--axis), transparent calc(var(--i) * 20%), #000 calc(var(--i) * 20%), #000 calc((var(--i) + 1) * 20%), transparent calc((var(--i) + 1) * 20%));
  mask-image: linear-gradient(var(--axis), transparent calc(var(--i) * 20%), #000 calc(var(--i) * 20%), #000 calc((var(--i) + 1) * 20%), transparent calc((var(--i) + 1) * 20%));
  translate: calc(var(--d) * var(--sh) * sin(var(--cut-angle)) * -1) calc(var(--d) * var(--sh) * cos(var(--cut-angle)));
  transition: translate .7s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.sl:nth-child(even) { --d: -1; }
.sl .mono { opacity: .65; }
.sl svg { width: 40%; align-self: center; justify-self: center; fill: currentColor; opacity: .9; }
.sl b { font: 800 clamp(1.5rem, 2.6vw, 2.2rem)/.95 var(--font-display); letter-spacing: -.03em; }
.hs:is(:hover, :focus-visible) { --sh: clamp(12px, 2vw, 24px); border-color: var(--accent); }
@media (hover: none) { .hs { --sh: 10px; } }
@media (prefers-reduced-motion: reduce) { .sl { transition: none; } .hs:is(:hover, :focus-visible) { --sh: 0px; outline: 2px solid var(--accent); } }
@media (max-width: 900px) { .hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Act 05: Before/After Cut ---------- */
.ba { --H: clamp(260px, 38vw, 380px); --dx: calc(tan(var(--cut-angle)) * var(--H)); --sp: 50%; position: relative; height: var(--H); overflow: hidden; background: var(--fg); transition: --sp .8s var(--ease); }
.tile:has(#ba-n:checked) .ba { --sp: -25%; }
.tile:has(#ba-f:checked) .ba { --sp: 125%; }
.ba-l { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.ba-n { background: var(--fg); color: var(--bg); }
.ba-f { background: var(--surface); color: var(--fg); clip-path: polygon(0 0, calc(var(--sp) + var(--dx) / 2) 0, calc(var(--sp) - var(--dx) / 2) 100%, 0 100%); }
.ba-w { font: 800 clamp(4rem, 15vw, 11rem)/.9 var(--font-display); letter-spacing: -.04em; }
.ba-n .ba-w { --s: 46%; }
.ba-tag { position: absolute; top: 14px; max-width: 42%; }
.ba-n .ba-tag { right: 16px; text-align: right; color: color-mix(in oklab, var(--bg) 70%, transparent); }
.ba-f .ba-tag { left: 16px; color: var(--muted); }
.ba-ln { position: absolute; inset: 0; pointer-events: none; background: var(--accent);
  clip-path: polygon(calc(var(--sp) + var(--dx) / 2 - 1px) 0, calc(var(--sp) + var(--dx) / 2 + 1px) 0, calc(var(--sp) - var(--dx) / 2 + 1px) 100%, calc(var(--sp) - var(--dx) / 2 - 1px) 100%); }
@supports not (width: calc(tan(1deg) * 1px)) { .ba-f { clip-path: none; } .ba-ln { display: none; } }
@media (prefers-reduced-motion: reduce) { .ba { transition: none; } }
.tile-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tile-bar .sp2 { margin-inline-start: auto; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- Act 06: install + Title Index ---------- */
.copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 40px; margin-bottom: clamp(24px, 4vw, 48px); align-items: start; }
.copy p { color: var(--muted); max-width: 46ch; margin-bottom: 14px; }
@media (max-width: 820px) { .copy { grid-template-columns: minmax(0, 1fr); } }
.ti { position: relative; overflow: hidden; background: var(--fg); color: var(--bg); min-height: clamp(420px, 64svh, 620px); display: grid; align-items: end; }
.ti-bd { position: absolute; inset: 0; }
.bd { position: absolute; inset: 0; --t: 0; --n: 10; transition: --t 1s var(--ease); overflow: hidden; }
.bd::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(var(--axis), color-mix(in oklab, var(--bg) 14%, transparent) 0 1px, transparent 1px var(--g, 22px)); }
.bd::after { content: attr(data-w); position: absolute; right: -.04em; top: -.12em; font: 800 clamp(7rem, 26vw, 22rem)/.8 var(--font-display); letter-spacing: -.05em; color: color-mix(in oklab, var(--bg) 12%, transparent); white-space: nowrap; }
.bd.b1 { background: radial-gradient(70% 90% at 78% 30%, color-mix(in oklab, var(--accent) 55%, transparent), transparent 70%), var(--fg); --t: 1; --g: 18px; }
.bd.b2 { background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 35%, var(--fg)), var(--fg) 70%); --g: 30px; }
.bd.b3 { background: radial-gradient(60% 70% at 20% 20%, color-mix(in oklab, var(--bg) 22%, transparent), transparent 70%), var(--fg); --g: 12px; }
.bd.b4 { background: conic-gradient(from 200deg at 70% 60%, var(--fg), color-mix(in oklab, var(--accent) 45%, var(--fg)), var(--fg)); --g: 26px; }
.ti:has(.ti-list a:is(:hover, :focus-visible)) .b1 { --t: 0; }
.ti:has(.ti-list li:nth-child(1) a:is(:hover, :focus-visible)) .b1 { --t: 1; }
.ti:has(.ti-list li:nth-child(2) a:is(:hover, :focus-visible)) .b2 { --t: 1; }
.ti:has(.ti-list li:nth-child(3) a:is(:hover, :focus-visible)) .b3 { --t: 1; }
.ti:has(.ti-list li:nth-child(4) a:is(:hover, :focus-visible)) .b4 { --t: 1; }
.ti-list { position: relative; list-style: none; margin: 0; padding: clamp(20px, 4vw, 48px); display: grid; gap: 2px; }
.ti-list a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; text-decoration: none; color: var(--bg); transition: opacity .4s var(--ease); }
.ti-list li:not(:first-child) a { opacity: .42; }
.ti-list:has(a:is(:hover, :focus-visible)) a { opacity: .42; }
.ti-list a:is(:hover, :focus-visible) { opacity: 1 !important; outline-color: var(--bg); }
.ti-list .tt { font: 700 clamp(1.8rem, 4.8vw, 4rem)/1 var(--font-display); letter-spacing: -.025em; }
.ti-list .meta { color: color-mix(in oklab, var(--bg) 62%, transparent); }
@media (prefers-reduced-motion: reduce) { .bd, .ti-list a { transition: none; } }

/* ---------- Skins ---------- */
.skins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.skin { padding: 18px 18px 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.skin h3 { font-size: 1.6rem; }
.skin p { color: var(--muted); font-size: .92rem; }
.tag { display: inline-block; width: fit-content; padding: 1px 8px; border: 1px solid var(--line); color: var(--muted); }
.tag.free { border-color: var(--accent); color: var(--fg); }
@media (max-width: 900px) { .skins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .skins { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cut Footer ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .vl-footer__mark .cutm { animation: cut-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } }
}

/* ===== token bridge: only what the velora skin does not define =====
   Palette, radii, shadows and focus now come from html[data-editorial-theme="velora"].
   The accent selector (A9, Proposed) feeds the skin through --vl-skin-accent. */
:root {
  --vl-skin-accent: var(--accent);
}
.fcc { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); margin-top: 10px; }
.fcc b { color: var(--fg); font-weight: 500; }
.phero { border-bottom: 1px solid var(--line); padding-block: clamp(36px, 7vw, 88px) clamp(28px, 5vw, 56px); }
.phero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 40px; align-items: end; }
.phero h1 { font-size: clamp(2.6rem, 7.4vw, 6.8rem); font-weight: 800; }
.phero .lede { max-width: 52ch; margin-top: 22px; color: var(--muted); font-size: 1.05rem; }
@media (max-width: 820px) { .phero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Stage hero (standard hero): ambient glow (core mesh-pan), depth grid, cut-corner media with a floating second frame.
   Layout and paint only; every motion is a core attribute in the markup. */
.phero--stage { position: relative; isolation: isolate; overflow: clip; min-height: min(88vh, 780px); display: grid; align-items: center; padding-block: clamp(48px, 8vw, 104px); }
.phero--stage > .wrap { position: relative; z-index: 1; width: 100%; align-items: center; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.ph-bg { position: absolute; inset: 0; z-index: -1; perspective: 720px; perspective-origin: 50% 30%; pointer-events: none; }
.ph-glow { position: absolute; inset: 0; opacity: .5; --vl-color-primary: var(--accent); --vl-color-secondary: color-mix(in oklab, var(--accent) 60%, var(--fg)); }
.ph-grid { position: absolute; left: -40%; right: -40%; bottom: -6%; height: 78%; transform: rotateX(74deg); transform-origin: 50% 100%;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 88%); mask-image: linear-gradient(to top, #000 8%, transparent 88%); }
.ph-copy .ph-cta { margin-top: 28px; }
.ph-media { position: relative; min-height: clamp(320px, 38vw, 520px); }
.ph-main { position: absolute; inset: 0 0 0 8%; margin: 0; }
/* clip-path lives on the inner frame: vl-enter="clip-rise" animates clip-path on the figure itself. */
.ph-main-in { position: absolute; inset: 0; overflow: hidden; background: var(--surface) center / cover no-repeat;
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 56px 100%, 0 calc(100% - 56px)); }
.ph-main-in video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.92); }
.ph-main-in::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: color; opacity: .85; pointer-events: none; }
.ph-card { position: absolute; z-index: 2; left: 0; bottom: -4%; width: 42%; margin: 0; filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .35)); }
.ph-card-in { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); }
.ph-card-in img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.05); }
@media (max-width: 820px) {
  .phero--stage { min-height: 0; }
  .phero--stage > .wrap { grid-template-columns: minmax(0, 1fr); }
  .ph-media { min-height: 300px; }
  .ph-main { inset: 0 0 0 4%; }
  .ph-main-in { clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 36px 100%, 0 calc(100% - 36px)); }
  .ph-card { width: 46%; bottom: -6%; }
}
@media (prefers-reduced-motion: reduce) { .ph-main-in video { display: none; } }

/* Stage hero variants: photo / wireframe media, fan of cards, live-UI card, chips. */
.ph-main-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-main-in--photo img { filter: grayscale(.35) contrast(1.05) brightness(.82); }
.ph-main-in--photo::after { opacity: .3; }
.ph-main-in--wire img { filter: grayscale(1) contrast(1.15) brightness(1.05); }
.ph-card--ui { width: min(46%, 270px); }
.ph-ui { aspect-ratio: auto; display: grid; gap: 8px; padding: 22px 24px 26px; background: var(--surface); color: var(--fg); }
.ph-ui-k { color: var(--muted); }
.ph-ui-h { font: 800 1.5rem/1.05 var(--font-display); letter-spacing: -.02em; }
.ph-ui-t { color: var(--muted); font-size: .9rem; }
.ph-code { padding: 8px 10px; border: 1px solid var(--line); font-size: 12px; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.ph-sw { display: flex; gap: 10px; }
.ph-sw i { width: 34px; height: 34px; background: var(--c); }
.phero--fan .ph-media { min-height: clamp(340px, 40vw, 540px); }
.ph-fan { position: absolute; inset: 0; }
.ph-fan-card { position: absolute; margin: 0; width: 52%; top: 8%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.ph-fan-in { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px)); }
.ph-fan-in img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.05) brightness(.9); }
.ph-fan-card--1 { left: 0; rotate: -9deg; translate: 0 6%; }
.ph-fan-card--2 { left: 24%; rotate: -1deg; z-index: 1; }
.ph-fan-card--3 { left: 46%; rotate: 8deg; translate: 0 4%; z-index: 2; }
.phero--chips .ph-media { display: grid; align-content: center; min-height: clamp(320px, 36vw, 480px); }
.phero--chips .vls-jump { position: relative; z-index: 1; background: color-mix(in oklab, var(--bg) 82%, transparent); padding: 6px 18px; border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.ph-chips { position: absolute; inset: 0; pointer-events: none; }
.ph-chip { position: absolute; z-index: 2; }
.ph-chip b { display: grid; place-items: center; min-width: 6.5rem; min-height: 3.4rem; padding: 8px 14px; font-weight: 400; background: var(--fg); color: var(--bg);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.ph-chip--1 { top: -5%; right: 6%; }
.ph-chip--2 { bottom: -6%; left: 42%; }
.ph-chip--3 { bottom: -5%; right: 14%; }
.ph-chip--4 { bottom: -4%; left: 6%; }
@media (max-width: 820px) {
  .phero--fan .ph-media { min-height: 300px; }
  .ph-fan-card { width: 50%; }
  .ph-card--ui { width: 62%; }
  .phero--chips .ph-media { min-height: 0; padding-block: 28px; }
}
.act-h .vl-cta--cut { margin-top: 14px; }
/* Cut Numerals: larger solid area and heavier hatching so figures stay legible on the band */
.num .n { --s: 80%; --nh: calc(var(--hair) * 2.6);
  -webkit-mask-image: linear-gradient(var(--axis), #000 var(--s), transparent var(--s)), repeating-linear-gradient(var(--axis), #000 0 var(--nh), transparent calc(var(--nh) + .7px) var(--pitch));
  mask-image: linear-gradient(var(--axis), #000 var(--s), transparent var(--s)), repeating-linear-gradient(var(--axis), #000 0 var(--nh), transparent calc(var(--nh) + .7px) var(--pitch)); }
@keyframes numcut { from { --s: 100%; } to { --s: 72%; } }

/* Hover Slice: each card has its own cut (slice count --n, angle --a, direction --dn, amplitude --amp) */
.hs { --n: 5; --a: 18.4deg; --dn: -1; --amp: clamp(12px, 2vw, 24px); }
.sl { --d: 1;
  -webkit-mask-image: linear-gradient(calc(90deg + var(--a)), transparent calc(var(--i) * 100% / var(--n)), #000 calc(var(--i) * 100% / var(--n)), #000 calc((var(--i) + 1) * 100% / var(--n)), transparent calc((var(--i) + 1) * 100% / var(--n)));
  mask-image: linear-gradient(calc(90deg + var(--a)), transparent calc(var(--i) * 100% / var(--n)), #000 calc(var(--i) * 100% / var(--n)), #000 calc((var(--i) + 1) * 100% / var(--n)), transparent calc((var(--i) + 1) * 100% / var(--n)));
  translate: calc(var(--d) * var(--sh) * sin(var(--a)) * -1) calc(var(--d) * var(--sh) * cos(var(--a))); }
.sl:nth-child(even) { --d: var(--dn); }
.hs:is(:hover, :focus-visible) { --sh: var(--amp); }
@media (hover: none) { .hs { --sh: calc(var(--amp) * .5); } }
.hs-t { position: absolute; z-index: 3; left: 12px; bottom: 10px; color: var(--bg); background: var(--fg); padding: 2px 6px; font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { .hs:is(:hover, :focus-visible) { --sh: 0px; } }

/* Animated counter: same technique as .vl-counter in src/04d-premium.css (@property integer + counter(), zero JS).
   The site defines it locally because the staged velora-core.css does not include the premium layer. */
@property --vl-counter-value { syntax: "<integer>"; initial-value: 0; inherits: false; }
@keyframes vl-counter-up { from { --vl-counter-value: 0; } to { --vl-counter-value: var(--vl-counter-to, 100); } }
.vl-counter { counter-reset: vl-count var(--vl-counter-to, 0); }
.vl-counter::after { content: counter(vl-count); }
@supports (animation-timeline: view()) {
  .vl-counter--scroll, .num .n.vl-counter--scroll { counter-reset: vl-count var(--vl-counter-value); animation: vl-counter-up linear both, numcut linear both; animation-timeline: view(block), view(); animation-range: var(--ct-range, entry 10% cover 50%), entry 10% cover 50%; }
}
@media (prefers-reduced-motion: reduce) { .vl-counter--scroll { animation: none; counter-reset: vl-count var(--vl-counter-to, 0); } }
/* overflow:hidden makes .num the view() scroller; clip keeps the page as the scroller */
.num { overflow: clip; }

/* ---------- Story steps: a visual per step, driven by the same --story timeline (Existing technique: named view-timeline) ---------- */
@property --bv { syntax: '<integer>'; inherits: true; initial-value: 0; }
.beat { column-gap: clamp(20px, 4vw, 64px); }
.viz { display: grid; gap: 12px; align-content: center; padding: clamp(14px, 2vw, 26px); border: 1.5px solid var(--accent); background: var(--surface); min-height: 200px; position: relative; }
.viz .cap { color: var(--muted); font-size: 11.5px; }
.beat:nth-child(1) { --r0: 15; } .beat:nth-child(2) { --r0: 26.7; } .beat:nth-child(3) { --r0: 38.3; }
.beat:nth-child(4) { --r0: 50; } .beat:nth-child(5) { --r0: 61.7; } .beat:nth-child(6) { --r0: 73.3; }
.v1 .pg { display: grid; gap: 10px; }
div.bar, span.bar { display: block; height: 8px; background: var(--line); } .bar.sm { width: 30%; }
/* Skeleton hairlines in the Intent demo (were styled by accident through the old header rule). */
i.bar { display: block; border-bottom: 1px solid var(--line); }
.hdw { overflow: clip; display: block; } .hd { display: block; font: 800 clamp(1.6rem, 4vw, 3rem)/1.1 var(--font-display); letter-spacing: -.03em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font: 600 12px var(--font-mono); padding: 5px 9px; border: 1px solid var(--line); }
.chips .on, .lanes .on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.prev { height: 64px; border: 1px solid var(--line); overflow: clip; } .prev i { display: block; width: 100%; height: 100%; background: var(--accent); }
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lanes span { font: 600 12px var(--font-mono); padding: 6px 8px; border: 1px solid var(--line); text-align: center; }
.trk { height: 6px; background: var(--line); } .trk i { display: block; height: 100%; width: 22%; background: var(--accent); transform-origin: left; }
.v4 { --bv: 0; } .hd2 { font: 800 clamp(2rem, 5vw, 3.6rem)/1 var(--font-display); filter: blur(calc(var(--bv) * 1px)); }
.sld { height: 4px; background: var(--line); position: relative; margin: 8px 6px; }
.knob { position: absolute; top: 50%; left: calc((12 - var(--bv)) / 12 * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--accent); }
.bv::after { content: counter(bv); } .bv { counter-reset: bv var(--bv); font-style: normal; }
.ruler { position: relative; display: grid; gap: 8px; padding-top: 6px; border-top: 2px solid var(--fg); }
.ab { display: block; margin-left: var(--l); width: var(--w); font: 600 12px var(--font-mono); padding: 6px 8px; background: var(--accent); color: var(--bg); transform-origin: left; }
.ph { position: absolute; top: -2px; bottom: 0; left: 0; width: 2px; background: var(--fg); }
.pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pipe span { font: 700 13px var(--font-mono); padding: 12px 8px; text-align: center; background: var(--accent); color: var(--bg); }
.nojs { font: 600 12px var(--font-mono); } .nojs s { opacity: .6; }
@media (min-width: 900px) {
  .beat { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
  .beat .i { grid-column: 1 / -1; }
  .beat > :not(.i):not(.viz) { grid-column: 1; }
  .beat .viz { grid-column: 2; grid-row: 2 / span 3; }
  .beat .k { font-size: clamp(3rem, 8.5vw, 8.5rem); }
}
@media (max-width: 899px) { .viz { min-height: 0; padding: 12px; } .beat .k { font-size: clamp(2.6rem, 14vw, 5rem); } .beat .v { font-size: clamp(1.1rem, 4.6vw, 1.6rem); } .beat pre { font-size: 11px; } .hd2, .hd { font-size: 1.6rem; } .prev { height: 36px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .viz :is(.hd, .chips span:not(.on), .prev i, .lanes span:not(.on), .trk i, .v4, .ph, .ab, .pipe span, .nojs) { animation-timeline: --story; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; }
    .v1 .hd { animation-name: vz-rise; animation-range: cover calc(var(--r0) * 1% + 2%) cover calc(var(--r0) * 1% + 7%); }
    .v2 .chips span:not(.on) { animation-name: vz-dim; animation-range: cover calc(var(--r0) * 1% + 2%) cover calc(var(--r0) * 1% + 5%); }
    .v2 .prev i { animation-name: vz-rise; animation-range: cover calc(var(--r0) * 1% + 3%) cover calc(var(--r0) * 1% + 8%); }
    .v3 .lanes span:not(.on) { animation-name: vz-dim; animation-range: cover calc(var(--r0) * 1% + 2%) cover calc(var(--r0) * 1% + 5%); }
    .v3 .trk i { animation-name: vz-grow; animation-range: cover calc(var(--r0) * 1% + 3%) cover calc(var(--r0) * 1% + 8%); }
    .viz.v4 { animation-timeline: --story; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; }
    .v4 { animation-name: vz-blur; animation-range: cover calc(var(--r0) * 1% + 2%) cover calc(var(--r0) * 1% + 9%); }
    .v5 .ph { animation-name: vz-play; animation-range: cover calc(var(--r0) * 1% + 2%) cover calc(var(--r0) * 1% + 9%); }
    .v5 .ab { animation-name: vz-grow; animation-range: cover calc(var(--r0) * 1% + var(--o) * 0.8%) cover calc(var(--r0) * 1% + var(--o) * 0.8% + 2%); }
    .v6 .pipe span { animation-name: vz-pop; animation-range: cover calc(var(--r0) * 1% + var(--o) * 0.6%) cover calc(var(--r0) * 1% + var(--o) * 0.6% + 2%); }
    .v6 .nojs { animation-name: vz-dim-in; animation-range: cover calc(var(--r0) * 1% + 6%) cover calc(var(--r0) * 1% + 8%); }
  }
}
@keyframes vz-rise { from { clip-path: inset(100% 0 0 0); translate: 0 40%; } to { clip-path: inset(0); translate: 0 0; } }
@keyframes vz-dim { from { opacity: 1; } to { opacity: .3; } }
@keyframes vz-dim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vz-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vz-blur { from { --bv: 12; } to { --bv: 0; } }
@keyframes vz-play { from { left: 0; } to { left: calc(100% - 2px); } }
@keyframes vz-pop { from { opacity: .15; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Channel Stack as layers: each channel is a sheet under the card; active channels light up ---------- */
.lay { --sx: 28px; position: relative; width: min(100%, 300px); padding: 0 calc(var(--sx) * 4) calc(var(--sx) * 4) 0; box-sizing: content-box; max-width: 100%; }
.lay .el { position: relative; z-index: 6; width: 100%; max-width: 200px; }
.lay::before { content: ''; display: block; position: absolute; }
.pl { position: absolute; left: 0; top: 0; width: min(100%, 200px); height: calc(100% - var(--sx) * 4); translate: calc(var(--k) * var(--sx)) calc(var(--k) * var(--sx)); z-index: calc(6 - var(--k)); border: 1.5px dashed var(--line); background: var(--bg); display: flex; align-items: flex-end; gap: 8px; padding: 0 8px; box-sizing: border-box; transition: background-color .3s, border-color .3s; }
.pl b { font: 700 12px/var(--sx) var(--font-display); height: var(--sx); }
.pl .mono { font-size: 10.5px; line-height: var(--sx); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl { color: var(--muted); }
.cs:has(#ch-enter:checked) .pl:nth-of-type(1), .cs:has(#ch-loop:checked) .pl:nth-of-type(2), .cs:has(#ch-hover:checked) .pl:nth-of-type(3), .cs:has(#ch-state:checked) .pl:nth-of-type(4) { border: 1.5px solid var(--accent); background: color-mix(in oklab, var(--accent) 16%, var(--bg)); color: var(--fg); }
.cs:has(#ch-enter:checked) .pl:nth-of-type(1)::before { content: ''; position: absolute; inset: 0 0 var(--sx) 0; background: repeating-linear-gradient(var(--axis), var(--accent) 0 2px, transparent 2px 9px); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .cs:has(#ch-loop:checked) .pl:nth-of-type(2) { animation: plfl 3.4s ease-in-out infinite; }
  @keyframes plfl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}
@media (max-width: 480px) { .lay { --sx: 22px; } .pl .mono { display: none; } }
.lay { margin: 10px 0 0 12px; }

/* ---------- Standard image crop: .cut-media (site convention, Proposed) ---------- */
.cut-media { --cs: 22px; --ce: 2px; --e: calc(var(--ce) * 1.32);
  border-radius: 0; background: var(--accent);
  clip-path: polygon(0 0, calc(100% - var(--cs)) 0, 100% calc(var(--cs) * 3), 100% 100%, 0 100%); }
.cut-media::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--accent);
  clip-path: polygon(evenodd,
    0 0, calc(100% - var(--cs)) 0, 100% calc(var(--cs) * 3), 100% 100%, 0 100%, 0 0,
    var(--ce) var(--ce), calc(100% - var(--cs) - var(--e)) var(--ce), calc(100% - var(--ce)) calc(var(--cs) * 3 + var(--ce) * .2), calc(100% - var(--ce)) calc(100% - var(--ce)), var(--ce) calc(100% - var(--ce)), var(--ce) var(--ce)); }
.cut-media--bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cs) 100%, 0 calc(100% - var(--cs) * 3)); }
.cut-media--bl::after { clip-path: polygon(evenodd,
    0 0, 100% 0, 100% 100%, var(--cs) 100%, 0 calc(100% - var(--cs) * 3), 0 0,
    var(--ce) var(--ce), calc(100% - var(--ce)) var(--ce), calc(100% - var(--ce)) calc(100% - var(--ce)), calc(var(--cs) + var(--e)) calc(100% - var(--ce)), var(--ce) calc(100% - var(--cs) * 3 - var(--ce) * .2), var(--ce) var(--ce)); }
.ic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); align-items: end; }
.ic-grid figure { margin: 0; display: grid; gap: 10px; }
.ic-grid figcaption { display: grid; gap: 2px; font-size: 12px; } .ic-grid figcaption .mono { color: var(--muted); }
.ic-code { margin-top: 20px; max-width: 640px; }
@media (max-width: 700px) { .ic-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Act 06: where Velora runs (radio-driven, keyboard accessible) ---------- */
.hx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1.5px solid var(--accent); background: var(--surface); }
.hx-list { display: grid; align-content: start; border-right: 1px solid var(--line); }
.hx-list label { display: grid; gap: 4px; padding: 18px 20px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color .3s, color .3s; position: relative; }
.hx-list label:last-of-type { border-bottom: 0; }
.hx-list .tt { font: 700 clamp(1.5rem, 3vw, 2.4rem)/1 var(--font-display); letter-spacing: -.02em; }
.hx-list .meta { color: var(--muted); font-size: 12px; }
.hx-list label:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.hx-list label:has(input:checked) { background: var(--accent); color: var(--bg); }
.hx-list label:has(input:checked) .meta { color: color-mix(in oklab, var(--bg) 80%, transparent); }
.hx-list label:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: -4px; }
.hx-stage { display: grid; padding: clamp(18px, 3vw, 36px); min-height: 320px; }
.hx-p { display: grid; gap: 16px; align-content: center; }
.flow { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; }
.flow span { font: 700 13px var(--font-mono); padding: 8px 12px; border: 1.5px solid var(--accent); }
.flow span:last-child { background: var(--accent); color: var(--bg); }
.flow span + span::before { content: '→'; margin-right: 10px; color: var(--muted); font-weight: 400; }
.flow span + span { position: relative; }
.hx-p p { font: 500 clamp(1.1rem, 2vw, 1.5rem)/1.2 var(--font-display); max-width: 34ch; }
.hx-p pre { max-width: 100%; overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .hx-list label { transition: none; } }
@media (max-width: 820px) { .hx { grid-template-columns: minmax(0, 1fr); } .hx-list { border-right: 0; border-bottom: 1px solid var(--line); } .hx-stage { min-height: 300px; } }
.hx-p .st { justify-self: start; }

/* ---------- Act 06 Title Index, readable version (hover/focus list over four cut backgrounds) ---------- */
.ti { background: #0C0C0B; color: #EDEDDC; }
.ti::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(8,8,7,.92) 0%, rgba(8,8,7,.78) 38%, rgba(8,8,7,0) 75%); }
.ti-list { z-index: 2; }
.ti .bd { background: #0C0C0B; }
.ti .bd.b1 { background: radial-gradient(75% 95% at 78% 28%, color-mix(in oklab, #A9B08B 70%, transparent), transparent 72%), #0C0C0B; }
.ti .bd.b2 { background: radial-gradient(75% 95% at 78% 28%, color-mix(in oklab, #E2452B 78%, transparent), transparent 72%), #0C0C0B; }
.ti .bd.b3 { background: radial-gradient(75% 95% at 78% 28%, color-mix(in oklab, #4B63F0 78%, transparent), transparent 72%), #0C0C0B; }
.ti .bd.b4 { background: conic-gradient(from 210deg at 72% 38%, #0C0C0B, color-mix(in oklab, #EDEDDC 38%, #0C0C0B), #0C0C0B 60%); }
.ti .bd::after { color: rgba(237,237,220,.2); }
.ti-list a { color: #EDEDDC; }
.ti-list li:not(:first-child) a, .ti-list:has(a:is(:hover, :focus-visible)) a { opacity: .82; }
.ti-list li:first-child a { opacity: 1; }
.ti-list:has(a:is(:hover, :focus-visible)) li:first-child:not(:has(a:is(:hover, :focus-visible))) a { opacity: .82; }
.ti-list a:is(:hover, :focus-visible) { opacity: 1 !important; }
.ti-list .meta { color: rgba(237,237,220,.9); font-size: 12.5px; }
.ti-list a:is(:hover, :focus-visible) .tt { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }

.flow span:last-child::before { color: inherit; }

/* Header: eight nav items must fit in one row on desktop */
@media (min-width: 1240px) {
  .vl-header__actions { flex-wrap: nowrap; }
  .vl-header--cut .vl-header__inner { flex-wrap: nowrap; gap: 8px 14px; }
  .vl-header--cut .vl-nav { flex-wrap: nowrap; gap: 0; }
  .vl-header--cut .vl-nav__link { padding-inline: 9px; font-size: .88rem; white-space: nowrap; }
  .vl-header--cut .vl-header__brand { width: 92px; flex: none; }
}

/* Cross-document View Transitions (same rule as velora.css in the distribution; the stylesheet itself is velora-transitions.css) */
@view-transition { navigation: auto; }

/* Accessibility: skip link and focus rings for scroll regions and buttons without one */
.mk:focus { outline: 2px solid var(--accent); outline-offset: 4px; }
.ic-code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Hero V: 3D layers on the core stage, cuts and sway from core primitives ----------
   Core: .vl-3d-stage / .vl-3d-scene (perspective, tilt via --vl-3d-rot-*), vl-enter="cut-reveal",
   and vl-loop-effect="sway". Local: layout, depth offset per layer, toggles. */
.vx { position: relative; justify-self: end; align-self: end; width: min(100%, 460px); display: grid; grid-template-columns: minmax(0, 320px) auto; gap: 18px; align-items: center; --vx-d: 14px; --vl-3d-perspective: 900px; }
.vx-stage { position: relative; aspect-ratio: 429 / 456; }
.vx-scene { position: absolute; inset: 0; }
.vx-obj { position: absolute; inset: 0; transform-style: preserve-3d; --vl-cut-count: 3; }
.vx-set { display: contents; }
.vx-l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: currentColor;
  color: color-mix(in oklab, var(--fg) calc(100% - (4 - var(--k)) * 15%), var(--bg));
  translate: 0 0 calc(var(--k) * var(--vx-d));
  --vl-enter-delay: calc(var(--k) * 90ms); }
.vx-k4 { color: var(--fg); }
.vx-shadow { position: absolute; left: 12%; right: 12%; bottom: -6%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--fg) 42%, transparent), transparent); filter: blur(10px); }
.vx-tg { order: 0; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.vx-tg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); color: var(--muted); cursor: pointer; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: color-mix(in oklab, var(--bg) 70%, transparent); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.vx:has(#vx-3d:checked) label[for="vx-3d"], .vx:has(#vx-cut:checked) label[for="vx-cut"], .vx:has(#vx-sh:checked) label[for="vx-sh"], .vx:has(#vx-lp:checked) label[for="vx-lp"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.vx input:focus-visible ~ .vx-tg { outline: 0; }
.vx:has(#vx-3d:focus-visible) label[for="vx-3d"], .vx:has(#vx-cut:focus-visible) label[for="vx-cut"], .vx:has(#vx-sh:focus-visible) label[for="vx-sh"], .vx:has(#vx-lp:focus-visible) label[for="vx-lp"] { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 3D off: flat single layer, no tilt, no sway */
.vx:not(:has(#vx-3d:checked)) .vx-scene { --vl-3d-rot-x: 0deg; --vl-3d-rot-y: 0deg; }
.vx:not(:has(#vx-3d:checked)) .vx-obj { animation: none; }
.vx:not(:has(#vx-3d:checked)) .vx-l:not(.vx-k4) { display: none; }
/* cuts: on = cut-reveal layers, off = plain fade layers (the set swap replays the enter) */
.vx:has(#vx-cut:checked) .vx-set-plain, .vx:not(:has(#vx-cut:checked)) .vx-set-cut { display: none; }
/* shadow off */
.vx:not(:has(#vx-sh:checked)) .vx-shadow { display: none; }
/* loop off pauses the core animations in place */
.vx:not(:has(#vx-lp:checked)) .vx-obj { animation-play-state: paused; }
@media (max-width: 820px) {
  .vx { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 14px; }
  .vx-stage { width: min(44vw, 170px); margin-inline: auto; translate: -16% 0; }
  .vx { gap: 0; }
  .vx-tg { position: absolute; inset-inline-end: 0; top: 50%; translate: 0 -50%; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
  .vx-tg label { min-height: 40px; padding: 0 12px; }
}

/* Scroll-driven media inside .cut-media: .vl-media sets overflow:hidden, which makes it the nearest
   scroll container, so view() timelines on the <img> bind to a box that never scrolls and stay frozen.
   overflow:clip crops the same way without creating a scroll container. (Finding for core: Proposed fix) */
.cut-media.vl-media { overflow: clip; }

/* Hero: V mark vertically centred in the scene; tighter title leading (Proposed, site) */
.hero-in .vx { align-self: center; }
.hero h1 { line-height: 1; letter-spacing: -.025em; }
@media (max-width: 820px) { .hero h1 { line-height: 1.02; } }

/* Hover Slice cards: cut label sits under the card kicker, never over the title; icons share the Cut language */
.hs-t { left: 16px; right: 16px; top: 40px; bottom: auto; width: max-content; max-width: calc(100% - 32px); }
.hs .sl svg { width: 46%; max-height: 52%; }

/* Index list (.ix): wide directory rows, a different component from Spec Cards (site convention, Proposed) */
.ix { display: grid; border-top: 1px solid var(--fg); }
.ix a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.4fr) 56px 28px; align-items: center; gap: 20px; padding: 26px 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); isolation: isolate; outline-offset: -3px;
  background: linear-gradient(108.4deg, var(--fg) 0 50%, transparent 50%) 100% 0 / 260% 100% no-repeat; transition: background-position .6s var(--ease), color .35s; }
.ix a:is(:hover, :focus-visible) { background-position: 0 0; color: var(--bg); }
.ix a:focus-visible { outline: 2px solid var(--accent); }
.ix i { font-style: normal; font-size: 12px; letter-spacing: .06em; opacity: .7; }
.ix b { font: 800 clamp(1.8rem, 3.6vw, 3rem)/1 var(--font-display); letter-spacing: -.03em; }
.ix-d { display: grid; gap: 4px; color: inherit; }
.ix-d .mono { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.ix svg { width: 48px; height: 48px; fill: currentColor; justify-self: center; }
.ix em { font-style: normal; font-size: 1.4rem; transition: translate .4s var(--ease); }
.ix a:is(:hover, :focus-visible) em { translate: 6px 0; }
@media (max-width: 760px) { .ix a { grid-template-columns: 36px minmax(0, 1fr) 40px; gap: 6px 14px; padding: 20px 8px; } .ix .ix-d { grid-column: 2; grid-row: 2; } .ix svg { grid-column: 3; grid-row: 1 / span 2; width: 36px; height: 36px; } .ix em { display: none; } }
@media (prefers-reduced-motion: reduce) { .ix a, .ix em { transition: none; } }


/* Skin stages: the V mark re-voiced by each Skin's own palette and motion voice. Decorative, CSS only (site convention, Proposed).
   Premium Skins show a motion-voice teaser only; they are not in the public package. */
.skin { gap: 8px; }
.sk-st { --poly: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); position: relative; aspect-ratio: 16 / 10; background: var(--line); clip-path: var(--poly); margin-bottom: 6px; }
.sk-in { position: absolute; inset: 1px; clip-path: var(--poly); overflow: hidden; display: grid; place-items: center; background: var(--sb); color: var(--sf); isolation: isolate; }
.sk-v { width: 24%; fill: currentColor; position: relative; z-index: 2; }
.sk-in::before, .sk-in::after { content: ''; position: absolute; pointer-events: none; }
.sk-velora   { --sb: #E3E3CD; --sf: #0A0A09; --sa: #7F8668; }
.sk-noir     { --sb: #0D0F0C; --sf: #E8EFE2; --sa: #BBCBB1; }
.sk-earth    { --sb: #FBF9F4; --sf: #1B1C19; --sa: #6A7D57; }
.sk-aethel   { --sb: #000;    --sf: #E7E5E4; --sa: #9B6E49; }
.sk-meridian { --sb: #0D100A; --sf: #E8EFE2; --sa: #6DA585; }
.sk-obsidian { --sb: #05070B; --sf: #EDF6FF; --sa: #5AA7FF; }
.sk-signal   { --sb: #F2F0EA; --sf: #0A0A09; --sa: #FF4F00; }
.sk-lumen    { --sb: #F7F6FF; --sf: #2B2540; --sa: #8C7BFF; }
.sk-vc { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* static compositions (reduced motion shows these) */
.sk-velora::after   { inset: -20%; background: linear-gradient(108.4deg, transparent 49.3%, var(--sa) 49.3% 50.7%, transparent 50.7%); }
.sk-noir::before    { left: 0; right: 0; top: 0; height: 14%; background: #000; z-index: 3; } .sk-noir::after { left: 0; right: 0; bottom: 0; height: 14%; background: #000; z-index: 3; }
.sk-earth::after    { inset: 0; background: radial-gradient(circle at 20% 80%, var(--sa) 0 3px, transparent 4px), radial-gradient(circle at 78% 70%, var(--sa) 0 2px, transparent 3px), radial-gradient(circle at 64% 88%, var(--sa) 0 4px, transparent 5px); opacity: .55; }
.sk-earth { border-radius: 0; } .sk-earth .sk-v { fill: var(--sa); }
.sk-aethel::after   { inset: 0; background: repeating-linear-gradient(0deg, transparent 0 11px, color-mix(in oklch, var(--sa) 45%, transparent) 11px 12px); } .sk-aethel .sk-v { fill: var(--sa); }
.sk-meridian::after { inset: -30%; background: repeating-radial-gradient(circle at 32% 62%, transparent 0 9px, color-mix(in oklch, var(--sa) 55%, transparent) 9px 10px); }
.sk-obsidian::before { inset: 0; background: linear-gradient(var(--sa), var(--sa)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--sa), var(--sa)) 0 50% / 100% 1px no-repeat; opacity: .35; }
.sk-obsidian::after { left: 0; right: 0; top: 30%; height: 1px; background: var(--sa); box-shadow: 0 0 10px 1px var(--sa); }
.sk-signal::before  { left: 0; right: 0; bottom: 12%; height: 9%; background: var(--sa); } .sk-signal::after { left: 0; right: 0; bottom: 26%; height: 4%; background: var(--sf); }
.sk-lumen::after    { width: 70%; aspect-ratio: 1; left: 15%; top: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--sa) 55%, transparent), color-mix(in oklch, #7fb4ff 28%, transparent) 55%, transparent 72%); filter: blur(10px); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .sk-velora::after   { animation: sk-sweep 4.2s var(--ease) infinite alternate; }
  .sk-velora .sk-v    { animation: sk-slice 4.2s var(--ease) infinite alternate; }
  .sk-noir::before    { animation: sk-bar-t 5s var(--ease) infinite alternate; } .sk-noir::after { animation: sk-bar-b 5s var(--ease) infinite alternate; }
  .sk-noir .sk-v      { animation: sk-fade 5s ease-in-out infinite alternate; }
  .sk-earth .sk-v     { animation: sk-breathe 5.5s ease-in-out infinite; }
  .sk-earth::after    { animation: sk-rise 6s linear infinite; }
  .sk-aethel .sk-v    { animation: sk-steps 3.2s steps(4, jump-none) infinite alternate; }
  .sk-meridian::after { animation: sk-drift 14s linear infinite; }
  .sk-obsidian::after { animation: sk-scan 2.6s linear infinite; }
  .sk-signal::before  { animation: sk-snap 2.4s cubic-bezier(.7, 0, .2, 1) infinite; } .sk-signal::after { animation: sk-snap 2.4s cubic-bezier(.7, 0, .2, 1) .12s infinite; }
  .sk-signal .sk-v    { animation: sk-snapv 2.4s cubic-bezier(.7, 0, .2, 1) .24s infinite; }
  .sk-lumen::after    { animation: sk-orb 8s ease-in-out infinite alternate; }
  .sk-lumen .sk-v     { animation: sk-dissolve 6s ease-in-out infinite alternate; }
}
@keyframes sk-sweep { from { translate: -34% 0; } to { translate: 34% 0; } }
@keyframes sk-slice { from { translate: -6% 9%; } to { translate: 6% -9%; } }
@keyframes sk-bar-t { from { height: 0; } to { height: 22%; } } @keyframes sk-bar-b { from { height: 0; } to { height: 22%; } }
@keyframes sk-fade { from { opacity: .35; } to { opacity: 1; } }
@keyframes sk-breathe { 0%, 100% { scale: .92; } 50% { scale: 1.08; } }
@keyframes sk-rise { from { translate: 0 0; } to { translate: 0 -26%; } }
@keyframes sk-steps { from { translate: 0 18%; } to { translate: 0 -18%; } }
@keyframes sk-drift { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-8%, 6%) rotate(8deg); } }
@keyframes sk-scan { from { top: 4%; } to { top: 96%; } }
@keyframes sk-snap { 0% { translate: -105% 0; } 22%, 70% { translate: 0 0; } 100% { translate: 105% 0; } }
@keyframes sk-snapv { 0% { translate: 0 120%; } 25%, 70% { translate: 0 0; } 100% { translate: 0 -120%; } }
@keyframes sk-orb { from { translate: -14% 6%; scale: .9; } to { translate: 14% -4%; scale: 1.12; } }
@keyframes sk-dissolve { from { opacity: .45; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }

/* Premium waitlist form (Buttondown embed, plain HTML POST, no script) */
.wl { display: grid; gap: 10px; margin-top: 32px; max-width: 560px; }
.wl label { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.wl-r { display: flex; flex-wrap: wrap; gap: 10px; }
.wl input[type="email"] { flex: 1 1 240px; min-height: 48px; padding: 0 14px; font: 500 15px var(--font-body); background: var(--surface); color: var(--fg); border: 1px solid var(--fg); border-radius: 0; }
.wl input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl button.vl-cta--cut { min-height: 48px; cursor: pointer; }
.wl p { color: var(--muted); font-size: 12px; }

/* Entrance choreography (site convention, Proposed): core vl-enter + --vl-enter-delay, one sequence per section.
   .sq items release their transform after the entrance so hover and focus effects keep working. */
.sq[vl-enter] { animation-fill-mode: backwards; --vl-enter-duration: 760ms; --vl-enter-ease: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .sq[vl-enter] { animation: none; opacity: 1; } }

/* Reduced motion safety net for scroll-linked channels.
   The core neutralises vl-effect, vl-enter, vl-exit, vl-loop-effect and three vl-scroll values only;
   the rest of vl-scroll, vl-loop and vl-timeline keep scrubbing and can rest at opacity 0. */
@media (prefers-reduced-motion: reduce) {
  [vl-scroll], [vl-timeline], [vl-loop] { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Code blocks wrap on small screens, so nothing scrolls sideways */
@media (max-width: 700px) {
  pre, .code, .sk-code, .ic-code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
}

/* Scrollbars: slim thumb, no track, no arrows. Quiet at rest, clearer under the pointer or on focus.
   Chromium and Safari use the WebKit pseudo-elements (the only way to drop the arrow buttons);
   Firefox uses the standard properties. They are exclusive on purpose: in Chromium the standard
   properties switch the pseudo-elements off. */
:root {
  --sb-rest: color-mix(in oklab, var(--fg) 24%, transparent);
  --sb-on: color-mix(in oklab, var(--fg) 56%, transparent);
}
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-thumb { background-color: var(--sb-rest); background-clip: content-box; border: 3px solid transparent; border-radius: 10px; min-height: 36px; min-width: 36px; }
  *:not(html, body):is(:hover, :focus-visible, :focus-within)::-webkit-scrollbar-thumb { background-color: var(--sb-on); }
  .vl-scroll-shadows::-webkit-scrollbar-thumb, .mo-shadow::-webkit-scrollbar-thumb { background-color: var(--sb-on); }
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-rest) transparent; }
  *:not(html, body):is(:hover, :focus-visible, :focus-within) { scrollbar-color: var(--sb-on) transparent; }
  .vl-scroll-shadows, .mo-shadow { scrollbar-color: var(--sb-on) transparent; }
}

/* Footer wordmark: the crop at the bottom fades into the page instead of ending in a hard line */


/* ---------- mobile menu (native popover, no JavaScript) ---------- */
@media (max-width: 960px) {
  .vl-header__actions .vl-cta--cut { padding: 7px 12px; font-size: .82rem; white-space: nowrap; }
  :root:has(#th-auto:checked) .vl-header__settings label[for="th-auto"], :root:has(#th-light:checked) .vl-header__settings label[for="th-light"], :root:has(#th-dark:checked) .vl-header__settings label[for="th-dark"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  :root:has(#ac-olive:checked) .vl-header__settings label[for="ac-olive"], :root:has(#ac-verm:checked) .vl-header__settings label[for="ac-verm"], :root:has(#ac-cobalt:checked) .vl-header__settings label[for="ac-cobalt"] { outline: 2px solid var(--fg); outline-offset: 2px; }
}

/* Hero on phones: the mark fills the empty band above the headline */
@media (max-width: 820px) {
  .hero-in { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; align-items: start; }
  .hero-in > .vx { order: -1; justify-self: center; align-self: center; }
  .hero-in > div:first-child { align-self: end; }
}

/* Phones: the stat numbers are stacked, so each one counts up while it enters the screen (not on the shared desktop stagger) */
@media (max-width: 820px) {
  .num .n.vl-counter--scroll { animation-range: entry 0% entry 90%, entry 0% entry 90%; }
}

/* Channel layers: the box is exactly the card (200px) plus the stagger of the sheets, so the whole stack centres in the stage */
.lay { width: 200px; max-width: calc(100% - var(--sx) * 4); margin: 10px 0 0; justify-self: center; }

/* Hover Slice on touch screens: at rest the card is whole (no offset, no mask seams). The slices part only while it is pressed or hovered. */
@media (hover: none) { .hs { --sh: 0px; } .hs:active { --sh: var(--amp); } }
.hs:not(:hover):not(:focus-visible):not(:active) .sl { -webkit-mask-image: none; mask-image: none; }

/* Code samples live in a details element on every page (same pattern as Primitives). */
.vls-more { border-top: 1px solid var(--line); }
.vls-more > summary { cursor: pointer; padding: 10px 16px; color: var(--muted); font-size: 11px; list-style: none; }
.vls-more > summary::-webkit-details-marker { display: none; }
.vls-more > summary::after { content: " +"; }
.vls-more[open] > summary::after { content: " −"; }
.snip { margin: 22px 0 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; text-transform: none; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.vls-snip { margin-top: 22px; border: 1px solid var(--line); }
.vls-snip .snip { margin: 0; border-width: 1px 0 0; }
.vls-code[open] > pre { margin-top: 0; }