/* Aligned NVS project page. One centered column; serif display, Noto Sans text; tokens from tokens.json.
   Motion: scroll-linked scenes and reveals, all disabled under prefers-reduced-motion. */
:root {
  --page:#ffffff; --surface:#f6f8fa; --surface-strong:#eef3f7; --mist:#eef4f8; --line:#d9dee4;
  --ink:#172026; --ink-muted:#5c6670; --deep:#1b3a4b; --on-deep:#eef4f8; --teal:#38b2ac;
  --link:#0f766e; --link-hover:#115e59; --button:#1b3a4b; --on-button:#ffffff; --button-hover:#25506a;
  --focus:#0f766e; --misaligned:#b45309;
  --shadow-figure:0 1px 2px rgba(23,32,38,0.08);
  --font-serif:Georgia,"Times New Roman",serif;
  --font-sans:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --content-width:960px; --text-width:760px;
  --nav-h:52px; --ease:cubic-bezier(0.28,0.11,0.32,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --page:#11191f; --surface:#182229; --surface-strong:#1f2c35; --mist:#15232d; --line:#2c3a44;
  --ink:#e8eef2; --ink-muted:#9aa7b1; --deep:#0b1a22; --on-deep:#e8eef2;
  --link:#4fd1c5; --link-hover:#81e6d9; --button:#38b2ac; --on-button:#0b1a22; --button-hover:#4fd1c5;
  --focus:#81e6d9; --misaligned:#f6ad55; --shadow-figure:0 1px 2px rgba(0,0,0,0.4); color-scheme:dark; } }
:root[data-theme="dark"] {
  --page:#11191f; --surface:#182229; --surface-strong:#1f2c35; --mist:#15232d; --line:#2c3a44;
  --ink:#e8eef2; --ink-muted:#9aa7b1; --deep:#0b1a22; --on-deep:#e8eef2;
  --link:#4fd1c5; --link-hover:#81e6d9; --button:#38b2ac; --on-button:#0b1a22; --button-hover:#4fd1c5;
  --focus:#81e6d9; --misaligned:#f6ad55; --shadow-figure:0 1px 2px rgba(0,0,0,0.4); color-scheme:dark; }

* { box-sizing:border-box; }
html { scroll-padding-top:var(--nav-h); }
body { margin:0; background:var(--page); color:var(--ink); font-family:var(--font-sans); font-size:17px; line-height:27px; -webkit-font-smoothing:antialiased; }
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--link-hover); text-decoration:underline; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
img { max-width:100%; }
.nowrap { white-space:nowrap; }

.localnav-inner, .hero-inner, .scene-sticky, .section > .inner, .footer {
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
}

/* Local nav: translucent bar that firms up once the hero scrolls away */
.localnav { position:sticky; top:0; z-index:10; height:var(--nav-h); background:color-mix(in srgb, var(--page) 72%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid transparent; transition:border-color .4s var(--ease), background-color .4s var(--ease); }
.localnav.stuck { border-bottom-color:var(--line); background:color-mix(in srgb, var(--page) 84%, transparent); }
.localnav-inner { max-width:calc(var(--content-width) + 32px); height:100%; margin:0 auto; display:flex; align-items:center; gap:24px; }
.localnav-title { flex:none; font-family:var(--font-serif); font-size:19px; color:var(--ink); margin-right:auto; }
.localnav-title:hover { color:var(--ink); text-decoration:none; }
.localnav ul { flex:none; display:flex; gap:20px; margin:0; padding:0; list-style:none; white-space:nowrap; }
.localnav ul a { font-size:13px; line-height:18px; color:var(--ink-muted); transition:color .3s var(--ease); }
.localnav ul a:hover, .localnav ul a[aria-current="true"] { color:var(--ink); text-decoration:none; }
.localnav-cta { flex:none; margin:3px 0 0 -8px; font-size:13px; line-height:18px; font-weight:500; padding:4px 12px; border-radius:999px; background:var(--button); color:var(--on-button) !important; text-decoration:none !important; transition:background-color .3s var(--ease), transform .2s var(--ease), opacity .3s var(--ease); }
.localnav-cta:hover { background:var(--button-hover); }
.localnav.theme-open .localnav-cta { opacity:0; pointer-events:none; }
/* Theme switch: a single icon for the current mode (light, auto, dark) that expands into a slider.
   The position comes from data-theme on <html>, which the inline script in <head> sets before first paint. */
.theme-slot { position:relative; flex:none; width:32px; height:32px; margin:3px 0 0 -12px; }
.theme-switch { --i:1; position:absolute; top:0; right:0; z-index:1; width:32px; height:32px; border:1px solid transparent; border-radius:999px; overflow:hidden; background:transparent; transition:width .4s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease); }
:root[data-theme="light"] .theme-switch { --i:0; }
:root[data-theme="dark"] .theme-switch { --i:2; }
.theme-track { position:absolute; top:0; left:0; display:flex; transform:translateX(calc(var(--i) * -30px)); transition:transform .4s var(--ease-out); }
.theme-thumb { position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:999px; background:var(--page); box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px var(--line); opacity:0; transform:translateX(calc(var(--i) * 30px)); transition:transform .4s var(--ease-out), opacity .3s var(--ease); }
.theme-switch button { position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:999px; background:none; color:var(--ink-muted); cursor:pointer; transition:color .3s var(--ease); }
.theme-switch button[aria-checked="true"], .theme-switch.open button:hover { color:var(--ink); }
.theme-switch button:focus-visible { outline-offset:-2px; }
.theme-switch svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-switch .i-phone { display:none; }
@media (hover:none) and (pointer:coarse) { .theme-switch .i-phone { display:block; } .theme-switch .i-monitor { display:none; } }
.theme-switch.open { width:92px; background:var(--surface-strong); border-color:var(--line); }
.theme-switch.open .theme-track { transform:none; }
.theme-switch.open .theme-thumb { opacity:1; }
/* Sections menu: when the links do not fit beside the title (script.js measures this and sets .collapsed),
   they fold into a three-line button that drops them down as a list under the nav. */
.menu-toggle { display:none; position:relative; flex:none; width:32px; height:32px; margin:3px 0 0 -12px; padding:0; border:0; border-radius:999px; background:none; color:var(--ink-muted); cursor:pointer; transition:color .3s var(--ease); }
.menu-toggle:hover, .menu-open .menu-toggle { color:var(--ink); }
.menu-toggle span { position:absolute; left:8px; width:16px; height:1.8px; border-radius:1px; background:currentColor; transition:transform .35s var(--ease-out), opacity .2s var(--ease); }
.menu-toggle span:nth-child(1) { top:10px; }
.menu-toggle span:nth-child(2) { top:15px; }
.menu-toggle span:nth-child(3) { top:20px; }
.menu-open .menu-toggle span:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity:0; }
.menu-open .menu-toggle span:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }
.localnav.collapsed .menu-toggle { display:block; }
.localnav.collapsed ul { position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; padding:4px max(16px, calc((100% - var(--content-width)) / 2), env(safe-area-inset-left, 0px)) 12px; background:var(--page); border-bottom:1px solid var(--line); box-shadow:0 12px 24px -16px rgba(0,0,0,0.25); visibility:hidden; opacity:0; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .4s var(--ease-out), visibility 0s linear .4s; }
.localnav.collapsed.menu-open ul { visibility:visible; opacity:1; transform:none; transition:opacity .3s var(--ease), transform .4s var(--ease-out), visibility 0s; }
.localnav.collapsed li + li { border-top:1px solid var(--line); }
.localnav.collapsed ul a { display:block; padding:12px 0; font-size:15px; line-height:20px; }
/* Without JavaScript the links simply hide on phones. */
@media (max-width:640px) { html:not(.js) .localnav ul { display:none; } }

/* Hero */
.hero { position:relative; min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; justify-content:center; padding-block:64px 96px; text-align:center; overflow:hidden;
  background:radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%), var(--page); }
.hero-inner { max-width:calc(var(--content-width) + 32px); margin:0 auto; will-change:transform, opacity; }
.hero h1 { font-family:var(--font-serif); font-size:clamp(38px, 6.2vw, 72px); line-height:1.06; font-weight:400; letter-spacing:-0.02em; margin:0 0 32px; text-wrap:balance; }
.venue { font-size:14px; line-height:21px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--link); margin:0 0 20px; }
.authors, .affils { display:flex; flex-wrap:wrap; justify-content:center; column-gap:18px; margin:0; }
.authors { font-size:19px; line-height:30px; }
.authors span, .affils span { white-space:nowrap; }
.authors sup, .affils sup { font-size:11px; color:var(--ink-muted); margin-left:1px; }
.affils sup { margin:0 2px 0 0; }
.affils { font-size:15px; line-height:22px; color:var(--ink-muted); margin-top:10px; }
.buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:36px 0 0; padding:0; list-style:none; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:11px 22px 11px 18px; border-radius:999px; background:var(--button); color:var(--on-button) !important; font-size:16px; line-height:20px; font-weight:500; text-decoration:none !important; transition:background-color .3s var(--ease), transform .2s var(--ease); }
.btn:hover { background:var(--button-hover); }
.btn:active, .localnav-cta:active { transform:scale(0.96); }
.btn svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn[aria-disabled="true"] { opacity:0.5; cursor:default; }
.btn[aria-disabled="true"]:hover { background:var(--button); }
.btn[aria-disabled="true"]:active { transform:none; }
.scroll-cue { position:absolute; left:50%; bottom:28px; width:26px; height:42px; margin-left:-13px; border:2px solid var(--line); border-radius:999px; }
.scroll-cue span { position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--ink-muted); animation:cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform:translateY(0); opacity:0; } 30% { opacity:1; } 80%,100% { transform:translateY(14px); opacity:0; } }
@media (max-width:640px) { .hero { padding-top:48px; } .authors { font-size:17px; line-height:27px; } }

/* Intro: staggered fade-up with a light blur on load */
.js .intro { opacity:0; transform:translateY(28px); filter:blur(8px); animation:intro 1.2s var(--ease-out) forwards; animation-delay:calc(var(--d, 0) * 110ms + 150ms); }
@keyframes intro { to { opacity:1; transform:none; filter:none; } }

/* Teaser scene: pinned while the slider wipes from conventional to ours */
.scene { position:relative; height:300vh; }
.scene-sticky { position:sticky; top:var(--nav-h); height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; }
.scene-lead { font-family:var(--font-serif); font-size:clamp(26px, 3.6vw, 40px); line-height:1.15; letter-spacing:-0.01em; margin:0; opacity:var(--lead, 1); transform:translateY(calc((1 - var(--lead, 1)) * 24px)); }
.stage { width:min(100%, var(--text-width), calc((100svh - var(--nav-h) - 300px) * 1.25)); transform:scale(var(--s, 1)); transform-origin:50% 40%; }
.stage .compare { border-radius:calc(8px + 16px * (1 - var(--s, 1)) * 7); }
.readout { display:flex; justify-content:center; gap:clamp(24px, 6vw, 72px); }
.readout-item { display:flex; flex-direction:column; align-items:center; gap:2px; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.readout-item .label { font-size:13px; line-height:18px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.readout-item.conv .label { color:var(--misaligned); }
.readout-item.ours .label { color:var(--link); }
.readout-item .num { font-family:var(--font-serif); font-size:clamp(34px, 5vw, 56px); line-height:1; font-variant-numeric:tabular-nums; }
.readout-item .num small { font-family:var(--font-sans); font-size:0.36em; color:var(--ink-muted); }
.readout-item.dim { opacity:0.3; transform:scale(0.92); }
.scene-hint { font-size:14px; line-height:21px; color:var(--ink-muted); margin:0; }
.scene-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 20px; }
/* Both legends share one grid cell, so the row keeps its width when the view changes */
.scene-legend { display:grid; }
.scene-legend .scene-hint { grid-area:1 / 1; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.scene-legend .scene-hint[hidden] { display:flex; visibility:hidden; }
.opacity-range { width:120px; margin:0 4px; accent-color:var(--button); cursor:pointer; }
.demo-btn.opacity-reset { margin-left:8px; padding:4px 12px; font-size:13px; line-height:18px; }
.swatch { display:inline-block; width:12px; height:12px; border-radius:3px; }
.swatch.turbo { width:96px; height:10px; background:linear-gradient(90deg, #23171b, #3887f9, #2fe5ad, #96fa50, #ffb827, #e34613, #900d00); }

.compare { position:relative; overflow:hidden; border-radius:8px; box-shadow:var(--shadow-figure); user-select:none; touch-action:pan-y; background:var(--surface); }
.compare img { display:block; width:100%; height:auto; pointer-events:none; }
.compare .after { position:absolute; inset:0; clip-path:inset(0 0 0 50%); }
.compare .after img { width:100%; height:100%; object-fit:cover; }
/* Teaser views: each render sits at half opacity over the ground truth; the error maps crossfade in on top */
.compare img.view-render { position:absolute; inset:0; width:100%; height:100%; opacity:var(--render-opacity, 0.5); }
.compare img.view-error { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .4s var(--ease); }
.compare[data-view="error"] img.view-error { opacity:1; }
.compare .bar { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:var(--teal); pointer-events:none; }
.compare .knob { position:absolute; top:50%; left:50%; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:999px; background:var(--teal); box-shadow:0 0 0 2px var(--page), 0 4px 14px rgba(0,0,0,0.25); }
.compare .knob::before, .compare .knob::after { content:""; position:absolute; top:11px; border:5px solid transparent; }
.compare .knob::before { left:3px; border-right-color:var(--deep); }
.compare .knob::after { right:3px; border-left-color:var(--deep); }
.compare input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.compare input:focus-visible ~ .bar .knob { outline:2px solid var(--focus); outline-offset:2px; }

/* Sections. Each section is one or more pages; a page fills the viewport below the nav and centers its content.
   Spacing and display type shrink with viewport height (svh), and fitPages() in script.js shrinks
   [data-fit] figures, then zooms the page's content, until the page fits on one screen. */
.section.tint { background:var(--mist); }
.section > .inner { max-width:calc(var(--content-width) + 32px); margin:0 auto; }
.page { min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; justify-content:center; padding-block:clamp(16px, 3.2svh, 48px); }
.page > * { flex:none; width:100%; }
.page [data-fit] { width:var(--fit-w, 100%); }
.section h2 { font-family:var(--font-serif); font-size:clamp(30px, min(4.8vw, 6.4svh), 56px); line-height:1.1; font-weight:400; letter-spacing:-0.015em; text-align:center; margin:0 0 clamp(16px, 4.4svh, 40px); }
.section h3 { font-size:22px; line-height:30px; font-weight:600; margin:0 0 clamp(12px, 2.6svh, 20px); }
.prose { max-width:var(--text-width); margin:0 auto; }
.prose p { margin:0 0 clamp(12px, 2.6svh, 22px); line-height:clamp(26px, 3.6svh, 31px); }
.prose p:last-child { margin-bottom:0; }
.prose.justify p { text-align:justify; hyphens:auto; }

/* TL;DR: words light up as the paragraph scrolls through the viewport */
.tldr { max-width:880px; margin:0 auto; font-family:var(--font-serif); font-size:clamp(24px, min(3.4vw, 5.2svh), 40px); line-height:1.45; letter-spacing:-0.01em; text-align:center; text-wrap:pretty; }
.tldr b { display:block; font-family:var(--font-sans); font-size:14px; line-height:21px; letter-spacing:0.08em; color:var(--link); margin-bottom:20px; }
.tldr .s { display:block; }
.tldr .s + .s { margin-top:0.5em; }
.tldr .w { transition:opacity .25s linear; white-space:nowrap; }
.js .tldr .w { opacity:0.2; }
.js .tldr .w.on { opacity:1; }

/* Protocol steps light up in turn */
.steps { max-width:var(--text-width); margin:0 auto clamp(20px, 5svh, 56px); padding:0; list-style:none; counter-reset:none; }
.steps li { display:flex; align-items:baseline; gap:20px; padding:clamp(8px, 1.9svh, 18px) 0; border-top:1px solid var(--line); font-family:var(--font-serif); font-size:clamp(20px, min(2.8vw, 3.8svh), 32px); line-height:1.25; transition:opacity .6s var(--ease), transform .6s var(--ease); }
.steps li:last-child { border-bottom:1px solid var(--line); }
.steps .n { flex:none; font-family:var(--font-sans); font-size:14px; line-height:21px; font-weight:600; color:var(--link); font-variant-numeric:tabular-nums; }
.js .steps li { opacity:0.22; transform:translateX(-12px); }
.js .steps li.on { opacity:1; transform:none; }

.figure { margin:0 auto clamp(20px, 4.4svh, 40px); max-width:var(--content-width); }
.figure:last-child { margin-bottom:0; }
.figure figcaption, .caption { font-size:14px; line-height:21px; color:var(--ink-muted); margin:14px 0 0; }
.figure figcaption b, .caption b { color:var(--ink); font-weight:600; }

.strip { display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr)); gap:10px; }
.strip figure { margin:0; min-width:0; }
.strip img { display:block; width:100%; height:auto; border-radius:8px; background:var(--surface); box-shadow:var(--shadow-figure); }
.strip figcaption { font-size:13px; line-height:18px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-muted); text-align:center; margin-top:8px; }
.strip figure.ours figcaption { color:var(--link); }
.strip figure.ours figcaption::before { content:""; display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--teal); margin-right:6px; vertical-align:1px; }
@media (max-width:640px) { .strip { grid-template-columns:repeat(2, minmax(0,1fr)); } .strip[style*="--cols:3"] { grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* Reveal on scroll */
.js .reveal, .js .reveal-group > * { opacity:0; transform:translateY(40px) scale(0.98); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay:calc(var(--i, 0) * 90ms); }
.js .reveal.in, .js .reveal-group.in > * { opacity:1; transform:none; }

/* Segmented control for the two results tables */
.seg-wrap { display:flex; justify-content:center; margin:0 0 clamp(14px, 3.4svh, 32px); }
.seg { position:relative; display:inline-flex; padding:4px; border-radius:999px; background:var(--surface-strong); border:1px solid var(--line); }
.seg button { position:relative; z-index:1; appearance:none; border:0; background:none; font:inherit; font-size:15px; line-height:20px; font-weight:500; color:var(--ink-muted); padding:9px 20px; border-radius:999px; cursor:pointer; transition:color .35s var(--ease); }
.seg button[aria-selected="true"] { color:var(--ink); }
.seg-thumb { position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:var(--page); box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px var(--line); transition:transform .5s var(--ease-out), width .5s var(--ease-out); }
@media (max-width:520px) { .seg button { font-size:13px; padding:8px 12px; } }
.panel.enter { animation:panel-in .7s var(--ease-out); }
@keyframes panel-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.panel.enter tbody tr { animation:row-in .6s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 28ms); }
@keyframes row-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Each results panel is only as wide as its table and sits centred, so spare width is margin outside the
   table's border rather than space inside it. On narrow screens it caps at the column and the table scrolls. */
.panel { width:fit-content; max-width:100%; margin:0 auto; }
.table-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0 0 12px; }
.table-meta .caption { margin:0; }
.tag { display:inline-flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.tag > span { font-size:13px; line-height:18px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:3px 8px; background:var(--surface-strong); }
.tag > span + span { border-left:1px solid var(--line); }
.tag i { font-style:normal; font-weight:400; color:var(--ink-muted); margin-right:4px; text-transform:none; letter-spacing:0; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
table { width:100%; border-collapse:collapse; font-size:15px; line-height:22px; font-variant-numeric:tabular-nums; }
th { background:var(--surface-strong); font-size:13px; line-height:18px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; text-align:right; padding:clamp(6px, 1.3svh, 12px) 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:clamp(4px, 1svh, 9px) 10px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; padding-left:16px; }
th:last-child, td:last-child { padding-right:16px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:not(.group) { transition:background-color .25s var(--ease); }
tbody tr:not(.group):hover { background:var(--surface-strong); }
tr.group th { background:var(--page); text-align:left; color:var(--ink-muted); padding:clamp(4px, 0.9svh, 8px) 16px; }
tr.ours td:first-child::before { content:""; display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--teal); margin-right:8px; vertical-align:1px; }
td.best { font-weight:700; }
td.second { text-decoration:underline; text-underline-offset:3px; }
.div { border-left:1px solid var(--line); }

.footer { background:var(--deep); color:var(--on-deep); padding-block:40px; text-align:center; font-size:14px; line-height:21px; }
.footer a { color:var(--on-deep); text-decoration:underline; }

/* Interactive alignment demo (Evaluation protocol). */
.demo { max-width:var(--content-width); margin:0 auto; }
.demo [hidden] { display:none !important; }
.demo button { font-family:inherit; }
.demo-steps { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 clamp(10px, 2svh, 16px); }
.demo-steps button { display:inline-flex; align-items:center; gap:8px; padding:6px 16px 6px 6px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:15px; line-height:20px; font-weight:500; cursor:pointer; }
.demo-steps button span { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:var(--surface-strong); font-size:13px; line-height:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.demo-steps button:hover { background:var(--surface-strong); }
.demo-steps button[aria-selected="true"] { background:var(--button); border-color:var(--button); color:var(--on-button); }
.demo-steps button[aria-selected="true"] span { background:var(--on-button); color:var(--button); }
.demo-explain { max-width:var(--text-width); min-height:108px; margin:0 auto clamp(10px, 2svh, 16px); }
.demo-stage { position:relative; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.demo-panel { margin:0; min-width:0; }
.demo-label { font-size:13px; line-height:18px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 8px; }
.demo-label.misaligned { color:var(--misaligned); }
.demo-media { position:relative; aspect-ratio:16 / 9; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-figure); background:var(--surface-strong); }
.demo-media > canvas { display:block; width:100%; height:100%; }
.demo-media > canvas.orbit { cursor:grab; touch-action:none; }
.demo-media > canvas.orbit:active { cursor:grabbing; }
.demo-media > .compare { position:absolute; inset:0; border-radius:0; box-shadow:none; }
.demo-media .compare canvas { display:block; width:100%; height:100%; pointer-events:none; }
.chip.left.aligned { color:var(--link); }
.demo-links { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.demo-legend { display:flex; flex-wrap:wrap; gap:4px 16px; margin:8px 0 0; padding:0; list-style:none; font-size:14px; line-height:21px; color:var(--ink-muted); }
.demo-legend i { display:inline-block; width:18px; height:0; border-top:2px solid; margin-right:6px; vertical-align:middle; }
@media (min-width:641px) { .demo .demo-legend[hidden] { display:block !important; visibility:hidden; height:21px; overflow:hidden; } }
.demo-legend .given i { border-color:var(--misaligned); }
.demo-legend .solved i { border-color:var(--teal); }
.demo-legend .truth i { border-top-style:dashed; border-color:var(--ink-muted); }
.demo-legend .points i { width:8px; height:8px; border:1px solid var(--deep); border-radius:999px; background:var(--teal); }
.demo-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 16px; margin-top:clamp(10px, 2svh, 16px); }
.demo-actions .btn { border:0; cursor:pointer; padding:9px 18px; }
/* Next: label, then a chevron that nudges forward on hover; the last step shows a restart arrow instead */
.demo-actions .demo-next { gap:4px; padding:9px 12px 9px 20px; }
.demo-next svg { stroke-width:2.2; transition:transform .25s var(--ease); }
.demo-next:hover .i-next { transform:translateX(3px); }
.demo-next:hover .i-restart { transform:rotate(-40deg); }
.demo-btn { padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:15px; line-height:20px; font-weight:500; cursor:pointer; }
.demo-btn:hover { background:var(--surface-strong); }
.demo-btn:disabled { opacity:0.55; cursor:default; }
.demo-toggle { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.demo-toggle button { padding:8px 16px; border:0; background:var(--surface); color:var(--ink); font-size:15px; line-height:20px; font-weight:500; cursor:pointer; }
.demo-toggle button + button { border-left:1px solid var(--line); }
.demo-toggle button:hover { background:var(--surface-strong); }
.demo-toggle button[aria-pressed="true"] { background:var(--button); color:var(--on-button); }
.demo-toggle button:disabled { opacity:0.55; cursor:default; }
.demo > .caption { margin-top:clamp(10px, 2svh, 16px); }
/* Demo scene: while it fits on one screen, the page is pinned and scrolling walks through the four steps.
   Each step holds for --demo-span of scroll; the views stay side by side and the new step slides in sideways. */
.demo-scroll { --demo-span:65svh; overflow-x:clip; }
.demo-scroll[data-pinned] > .inner { height:calc(100svh - var(--nav-h) + 3 * var(--demo-span)); }
.demo-scroll[data-pinned] .page { position:sticky; top:var(--nav-h); }
.demo-explain.slide-next, .demo-stage.slide-next { animation:demo-slide-next .5s var(--ease-out); }
.demo-explain.slide-prev, .demo-stage.slide-prev { animation:demo-slide-prev .5s var(--ease-out); }
@keyframes demo-slide-next { from { opacity:0.2; transform:translateX(40px); } }
@keyframes demo-slide-prev { from { opacity:0.2; transform:translateX(-40px); } }
@media (max-width:640px) {
  .demo-stage { grid-template-columns:minmax(0,1fr); }
  .demo-explain { min-height:0; }
}

/* Reduced motion: no pinning, no transforms, everything visible */
@media (prefers-reduced-motion: reduce) {
  .js .intro, .js .reveal, .js .reveal-group > *, .js .steps li, .js .tldr .w { opacity:1; transform:none; filter:none; animation:none; transition:none; }
  .scene { height:auto; }
  .scene-sticky { position:static; height:auto; padding-block:48px 72px; }
  .stage { transform:none; width:min(100%, var(--text-width)); }
  .scroll-cue span, .panel.enter, .panel.enter tbody tr, .demo-explain, .demo-stage { animation:none; }
  .demo-next svg, .seg-thumb, .theme-switch, .theme-track, .theme-thumb, .menu-toggle span, .localnav.collapsed ul { transition:none; }
}