/* vNext prototype (legacy, to be reduced page by page). Not a source of truth for core. */
.phero .photo { aspect-ratio: 4 / 3; overflow: hidden; }
.phero .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Motion page */
.mo-stack { --vl-stack-offset: 8rem; --vl-stack-spread: 1.25rem; margin-top: 8px; }
/* Stacking cards: two-layer border so the cut corners keep a complete edge */
.mcard { --b: 1.5px; --c: 40px; --c2: 18px; --k: calc(var(--b) * .586);
  --fill: var(--surface); --ink: var(--fg); --soft: var(--muted); --edge: var(--accent);
  isolation: isolate; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; gap: 10px clamp(18px, 4vw, 52px);
  min-height: 270px; padding: clamp(22px, 3.4vw, 40px); padding-top: clamp(40px, 5vw, 56px); margin-bottom: 24px; background: var(--edge); color: var(--ink);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c2) 100%, 0 calc(100% - var(--c2))); }
.mcard::before { content: ""; position: absolute; inset: var(--b); z-index: -1; background: var(--fill);
  clip-path: polygon(0 0, calc(100% - (var(--c) - var(--k))) 0, 100% calc(var(--c) - var(--k)), 100% 100%, calc(var(--c2) - var(--k)) 100%, 0 calc(100% - (var(--c2) - var(--k)))); }
.mc-1 { --fill: var(--surface); }
.mc-2 { --fill: color-mix(in oklab, var(--surface) 90%, var(--accent) 10%); --soft: color-mix(in oklab, var(--fg) 76%, transparent); }
.mc-3 { --fill: color-mix(in oklab, var(--surface) 80%, var(--accent) 20%); --soft: color-mix(in oklab, var(--fg) 78%, transparent); }
.mc-4 { --fill: var(--fg); --ink: var(--bg); --soft: color-mix(in oklab, var(--bg) 68%, transparent); }
.mc-n { font: 800 clamp(5rem, 13vw, 10rem)/.78 var(--font-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--soft); align-self: end; }
.mc-b { display: grid; gap: 10px; align-content: end; }
.mc-b b { font: 800 clamp(1.5rem, 3.2vw, 2.5rem)/1.02 var(--font-display); letter-spacing: -.03em; max-width: 20ch; }
.mc-b p { margin: 0; color: var(--soft); max-width: 44ch; }
.mc-k { color: var(--soft); }
.mc-g { position: absolute; top: clamp(18px, 2.6vw, 28px); left: clamp(22px, 3.4vw, 40px); display: flex; gap: 5px; }
.mc-g i { display: block; width: 22px; height: 3px; background: color-mix(in oklab, var(--soft) 40%, transparent); }
.mc-g i.on { background: var(--accent); }
@media (max-width: 620px) { .mcard { grid-template-columns: minmax(0, 1fr); min-height: 230px; --c: 30px; } .mc-n { font-size: 4.2rem; } }
.mo-shadow { --vl-bg-surface: var(--surface); height: 15rem; padding: 18px 22px; border: 1px solid var(--line); max-width: 640px; }
.mo-shadow p { margin: 0 0 14px; }
.mo-rev figure img { display: block; }
.mo-h .mpanel { margin: 0; flex: 0 0 min(72vw, 28rem); display: grid; gap: 10px; }
.mo-h .mpanel figcaption { color: var(--muted); }
.mo-h .vl-horizontal-section__pin { padding-inline: clamp(16px, 5vw, 64px); padding-top: 72px; box-sizing: border-box; }
.mo-ctr { overflow: hidden; display: grid; gap: 6px; padding-block: 56px; }
.mo-ctr > div { white-space: nowrap; font: 800 clamp(3rem, 12vw, 9rem)/1 var(--font-display); letter-spacing: -.04em; }
.mo-ctr > div:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.mo-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.mo-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.mo-list b { font: 800 clamp(1.6rem, 4vw, 3rem)/1 var(--font-display); letter-spacing: -.03em; }
.mo-list .mono { color: var(--muted); }
.mo-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.mm { padding: 28px 20px; min-height: 160px; display: grid; gap: 8px; align-content: center; }
.mm b { font: 800 1.5rem/1.1 var(--font-display); letter-spacing: -.02em; } .mm p { color: var(--muted); }
.mo-nat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.mn { padding: 28px 20px; min-height: 220px; display: grid; gap: 10px; align-content: center; justify-items: start; }
.mo-pop { inset: 0; margin: auto; width: min(92vw, 26rem); padding: 24px; background: var(--surface); color: var(--fg); border: 1.5px solid var(--accent); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); opacity: 0; transform: translateY(24px); transition: opacity .35s, transform .35s var(--ease), overlay .35s allow-discrete, display .35s allow-discrete; }
.mo-pop:popover-open { opacity: 1; transform: none; }
@starting-style { .mo-pop:popover-open { opacity: 0; transform: translateY(24px); } }
.mo-pop::backdrop { background: color-mix(in oklab, var(--fg) 40%, transparent); }
.mo-pop b { font: 800 1.5rem/1 var(--font-display); display: block; margin-bottom: 8px; } .mo-pop p { color: var(--muted); margin: 0 0 16px; }
.mo-acc { width: 100%; justify-items: stretch; align-content: start; gap: 0; border: 1px solid var(--line); padding: 0; }
.mo-acc details { border-bottom: 1px solid var(--line); } .mo-acc details:last-child { border-bottom: 0; }
.mo-acc summary { cursor: pointer; padding: 14px 18px; font: 700 1.05rem var(--font-display); list-style: none; display: flex; justify-content: space-between; }
.mo-acc summary::after { content: '+'; } .mo-acc details[open] summary::after { content: '−'; }
.mo-acc summary::-webkit-details-marker { display: none; }
.mo-acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mo-acc p { margin: 0; padding: 0 18px 16px; color: var(--muted); }
@media (max-width: 800px) { .mo-modes, .mo-nat { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .mo-pop { transition: none; } }
.ic-code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* page transitions */
.vt-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.vt-t { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.vt-t th, .vt-t td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vt-t thead th { font: 700 12px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.vt-t tbody tr:last-child th, .vt-t tbody tr:last-child td { border-bottom: 0; }
.vt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.vt-n { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 1rem; line-height: 1.4; }
.vt-n b { font: 700 12px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: block; margin-bottom: 2px; }
@media (max-width: 820px) { .vt-two { grid-template-columns: minmax(0, 1fr); } }
.vt-h3 { font: 800 clamp(2rem, 5vw, 3.4rem)/1 var(--font-display); letter-spacing: -.03em; }
.vt-t2 { min-width: 520px; }
.vt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.vt-pick label { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vt-pick select { font: 600 14px var(--font-body); min-height: 44px; padding: 0 12px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 0; }
.vt-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vt-pick span { color: var(--muted); font-size: 12px; }
.vt-wrap + .vt-n, .vt-wrap + .vt-two { margin-top: 24px; }

/* Scroll channel and range */
.mo-sc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mo-sc.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mo-d { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 14px; padding: 26px 14px; overflow: clip; }
.mo-obj { display: inline-grid; place-items: center; min-width: 8rem; min-height: 5rem; padding: 10px 14px; background: var(--fg); color: var(--bg); font-size: 12px; text-transform: none; letter-spacing: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.mo-r { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.mo-sc code { font: 11px var(--font-mono); text-transform: none; letter-spacing: 0; }
@media (max-width: 980px) { .mo-sc, .mo-sc.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mo-sc, .mo-sc.c4 { grid-template-columns: minmax(0, 1fr); } }

/* Tables stack into cards on small screens, so nothing scrolls sideways */
@media (max-width: 700px) {
  .vt-wrap { overflow: visible; border: 0; background: none; }
  .vt-t, .vt-t2 { min-width: 0; }
  .vt-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vt-t, .vt-t tbody, .vt-t tr, .vt-t th, .vt-t td { display: block; }
  .vt-t tr { margin-bottom: 12px; border: 1px solid var(--line); background: var(--surface); }
  .vt-t th[scope="row"] { border-bottom: 1px solid var(--line); }
  .vt-t td { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 10px; }
  .vt-t td::before { content: attr(data-label); font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .vt-t tbody tr:last-child th, .vt-t tbody tr:last-child td { border-bottom: 1px solid var(--line); }
  .vt-t tr > :last-child { border-bottom: 0 !important; }
}

/* Stack: code sits beside the cards */
.mo-sbs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(18px, 3vw, 36px); align-items: start; margin-top: 8px; }
.mo-sbs .mo-stack { margin-top: 0; }
.mo-sbs .ic-code { position: sticky; top: 8rem; margin: 0; font-size: 12.5px; line-height: 1.65; }
@media (max-width: 980px) { .mo-sbs { grid-template-columns: minmax(0, 1fr); } .mo-sbs .ic-code { position: static; } }

/* Scroll shadows: the shadow is a fraction of the cover, so it is fully hidden at both ends.
   The core draws both at the same size, which lets a faint shadow leak at the start and the end. */
.mo-shadow {
  --sz: var(--vl-scroll-shadow-size, 2.5rem);
  --sh: calc(var(--sz) * .35);
  --sc: color-mix(in oklab, var(--fg) 24%, transparent);
  background:
    linear-gradient(var(--surface) 60%, transparent) center top / 100% var(--sz) local no-repeat,
    linear-gradient(transparent, var(--surface) 40%) center bottom / 100% var(--sz) local no-repeat,
    linear-gradient(to bottom, var(--sc), transparent) center top / 100% var(--sh) scroll no-repeat,
    linear-gradient(to top, var(--sc), transparent) center bottom / 100% var(--sh) scroll no-repeat;
  background-color: var(--surface);
}
.mo-shadow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Horizontal section: the first panel starts centred, the last one ends centred */
.mo-h { --w: min(72vw, 28rem); --vl-h-section-gap: 2rem; --vl-h-travel-end: calc(-3 * (var(--w) + var(--vl-h-section-gap))); }
.mo-h .mpanel { flex-basis: var(--w); }
.mo-h .vl-horizontal-section__pin { padding-inline: 0; padding-inline-start: calc(50% - var(--w) / 2); }
/* Panel tilt: the angle follows the panel's distance from the centre on the same scroll timeline as the track.
   Needs typed arithmetic (calc with length / length); without it the panels stay flat. */
@property --d { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes mo-tilt { from { --d: var(--x0); } to { --d: var(--x1); } }
.mo-h .mpanel:nth-child(1) { --i: 0; } .mo-h .mpanel:nth-child(2) { --i: 1; } .mo-h .mpanel:nth-child(3) { --i: 2; } .mo-h .mpanel:nth-child(4) { --i: 3; }
@supports (animation-timeline: view()) and (rotate: calc(10px / 1px * 1deg)) { @media (prefers-reduced-motion: no-preference) {
  .mo-h .mpanel { --x0: calc(var(--i) * (var(--w) + var(--vl-h-section-gap))); --x1: calc(var(--x0) + var(--vl-h-travel-end));
    --t: calc(var(--d) / var(--w));
    animation: mo-tilt linear both; animation-timeline: --vl-h-section; animation-range: contain 0% contain 100%;
    transform: perspective(1100px) rotateY(clamp(-26deg, calc(var(--t) * 22deg), 26deg)) scale(calc(1 - min(abs(var(--t)), 1.3) * .07)); }
} }