/* LIBERO-PeRM project page.
   One idea carries the page: the three preference levels are three lanes. They move as lanes of
   rollouts in the hero, and the same three lanes list all 37 preferences below it.
   White surfaces with dark type on a cool paper body. The project blue appears on the wordmark's PeRM,
   the frame of the navigation card and selected states; the only other colour is the level a thing belongs to. */

:root {
  color-scheme: light;
  --ink: #0f1a30;            /* text, headings, selected states */
  --accent: #0071e3;         /* the project blue: selected states, rules, question tags */
  --accent-bg: #e8f1fd;
  /* surface of the navigation card and the hero */
  --wash: #ffffff;
  --wash-clear: rgba(255, 255, 255, 0);
  --on-wash: #0f1a30;
  --on-wash-2: #5b6577;      /* secondary text on the surface */
  --wash-line: #d6dce6;
  --wash-edge: #a9b3c4;
  --wash-fill: #f3f5f9;      /* hover */
  --wash-btn: #0071e3;       /* filled button on the surface */
  --on-wash-btn: #ffffff;
  --paper: #f3f5f9;          /* page */
  --sheet: #ffffff;          /* clips, lists, tables */
  --text: #1c2740;
  --muted: #5b6577;
  --rule: #d6dce6;
  --rule-strong: #a9b3c4;
  --on-ink: #ffffff;
  --on-ink-muted: #9fb0cc;

  /* preference levels: the hues the rendered curves use */
  --motion: #e0483e;  --motion-ink: #b8342b;  --motion-bg: #fdecea;
  --skill: #168fcf;   --skill-ink: #0d6aa1;   --skill-bg: #e5f2fb;
  --profile: #5b3cc4; --profile-ink: #5b3cc4; --profile-bg: #eeeafb;
  --second: #2c3e50;  --none: #8a8a8f;

  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rail: 150px;             /* the navigation card */
  --gutter: 174px;           /* the column it floats in: 12 + card + 12 */
  --pad: clamp(20px, 4vw, 56px);
  --r: 6px;
}
.lv-motion  { --c: var(--motion);  --ct: var(--motion-ink);  --cb: var(--motion-bg);  --cw: #a82c24; }
.lv-skill   { --c: var(--skill);   --ct: var(--skill-ink);   --cb: var(--skill-bg);   --cw: #0a5a8c; }
.lv-profile { --c: var(--profile); --ct: var(--profile-ink); --cb: var(--profile-bg); --cw: #5b3cc4; }
.lv-multi   { --c: var(--second);  --ct: var(--second);      --cb: #e9edf2;           --cw: var(--second); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--body); font-variant-numeric: lining-nums; }
img, video { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
sub, sup { line-height: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--sheet); color: var(--ink); padding: 10px 14px; border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- rail ---------- */
.rail { position: fixed; inset: 12px auto auto 12px; width: var(--rail); max-height: calc(100vh - 24px); overflow-y: auto; z-index: 30;
  background: var(--wash); color: var(--on-wash); display: flex; flex-direction: column; padding: 16px 0 14px;
  border: 1.5px solid var(--accent); border-radius: 10px; }
.rail-mark { font: 700 19px/1 var(--cond); color: var(--on-wash); text-decoration: none; letter-spacing: -.005em; padding: 0 13px; }
.rail-toggle { display: none; }
.rail-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rail-nav { display: flex; flex-direction: column; margin-top: 14px; }
.rail-nav a { font: 500 15.5px/1.2 var(--cond); text-decoration: none; padding: 6px 10px 6px 10px; border-left: 3px solid transparent; }
.rail-nav a:hover { background: var(--wash-fill); }
.rail-nav a.active { font-weight: 700; color: var(--accent); border-left-color: var(--accent); background: var(--accent-bg); }
.rail-links { margin-top: 12px; padding: 12px 13px 0; border-top: 1px solid var(--wash-line); display: flex; flex-direction: column; gap: 8px; }
.rail-links a { font: 600 15.5px/1.2 var(--cond); color: var(--on-wash); text-decoration: none; }
.rail-links a:hover { text-decoration: underline; }
a.soon { cursor: default; opacity: .62; }
a.soon:hover { text-decoration: none; }
.tag-soon { font: 500 12.5px/1 var(--cond); margin-left: 7px; padding: 2px 6px 3px; border: 1px solid currentColor; border-radius: 3px; opacity: .85; }
main { min-width: 0; }

/* ---------- hero ---------- */
.hero { --h: clamp(620px, 100vh, 900px);
  background: var(--wash); color: var(--on-wash); border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 48px); padding-left: calc(var(--gutter) + var(--pad)); min-height: var(--h); overflow: hidden; }
.hero-copy { align-self: center; padding: 56px 0; max-width: 660px; }
.venue { font: 500 16px/1.3 var(--cond); color: var(--on-wash-2); }
.hero h1 { font: 700 clamp(50px, 5.7vw, 98px)/.92 var(--cond); letter-spacing: -.02em; margin: 14px 0 18px -3px; }
.hero h1 .perm { color: var(--accent); }
.tagline { font: 400 clamp(19px, 1.7vw, 23px)/1.35 var(--body); max-width: 30em; }
.authors { margin-top: 30px; display: grid; gap: 8px; }
.names { font-size: 16px; line-height: 1.75; font-weight: 500; }
.names span, .affil span { white-space: nowrap; }
.authors sup { font-size: .66em; margin-left: 1px; color: var(--on-wash-2); }
.affil { font-size: 14px; line-height: 1.7; color: var(--on-wash-2); }
.affil span { margin-right: 14px; }
.affil sup { margin: 0 1px 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; font: 600 16px/1 var(--cond); padding: 11px 18px 12px; border-radius: var(--r); text-decoration: none; cursor: pointer;
  border: 1px solid var(--wash-edge); color: var(--on-wash); background: transparent; }
.btn:hover { border-color: var(--on-wash); background: var(--wash-fill); }
.btn.solid, .btn.dark { background: var(--wash-btn); color: var(--on-wash-btn); border-color: var(--wash-btn); }
.btn.solid:hover, .btn.dark:hover { background: var(--wash-btn); opacity: .86; }
.facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin-top: 40px; border-top: 1px solid var(--wash-line); }
.facts > div { padding: 14px 26px 0 0; margin-right: 26px; border-right: 1px solid var(--wash-line); }
.facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.facts dt { font: 500 14px/1.2 var(--cond); color: var(--on-wash-2); }
.facts dd { font: 700 25px/1.15 var(--cond); margin-top: 4px; }
.facts dd span { display: block; font: 400 13.5px/1.3 var(--body); color: var(--on-wash-2); max-width: 11em; margin-top: 3px; }

/* three lanes of rollouts: motion moves up, skill down, user profile up */
.lanes { --tile: clamp(124px, 11.6vw, 178px); display: grid; grid-template-columns: repeat(3, var(--tile)); gap: 14px; padding-right: clamp(14px, 2vw, 28px); height: var(--h); }
.lane { position: relative; overflow: hidden; height: 100%; }
.lane-head { position: absolute; inset: 0 0 auto 0; z-index: 2; padding: 18px 0 30px; background: linear-gradient(var(--wash) 62%, var(--wash-clear));
  font: 600 15.5px/1.2 var(--cond); pointer-events: none; }
.lane-head b { display: inline-block; font-weight: 600; background: var(--cb); color: var(--ct); padding: 4px 9px 5px; border-radius: 4px; }
.lane-head small { display: block; font: 400 13px/1.3 var(--body); color: var(--on-wash-2); margin-top: 5px; }
.lane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 80px; background: linear-gradient(var(--wash-clear), var(--wash)); pointer-events: none; }
.lane-track { animation: lane-up var(--dur, 80s) linear infinite; will-change: transform; }
.lane.down .lane-track { animation-name: lane-down; }
@keyframes lane-up { to { transform: translateY(-50%); } }
@keyframes lane-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
/* the lanes hold still under the pointer and for keyboard focus, so a tile can be read and picked.
   A mouse click must not leave them frozen: .go (set on click, cleared when the pointer leaves) keeps them running. */
.lanes:hover .lane-track { animation-play-state: paused; }
.lanes:has(:focus-visible) .lane-track { animation-play-state: paused; }
.lanes.go .lane-track { animation-play-state: running; }
.tile { display: block; margin-bottom: 14px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); }
.tile video { width: 100%; aspect-ratio: 1; object-fit: cover; background: #dfe6f0; }
.tile span { display: block; border-top: 4px solid var(--c); padding: 7px 10px 10px; font: 500 14px/1.22 var(--cond); min-height: 3.1em; }
.tile:hover, .tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 8vw, 104px) var(--pad) 0 calc(var(--gutter) + var(--pad)); max-width: calc(1320px + var(--gutter)); }
.sec-head h2 { font: 700 clamp(29px, 3vw, 40px)/1.08 var(--cond); letter-spacing: -.012em; color: var(--ink); }
.lede { margin-top: 16px; font-size: 18.5px; line-height: 1.6; }
h3 { font: 600 21px/1.25 var(--cond); color: var(--ink); }
h3.sub { margin-top: 44px; }
.prose { margin-top: 20px; }
.prose p { font-size: 17.5px; line-height: 1.7; text-align: justify; hyphens: auto; }
.fig { margin-top: 34px; }
.fig img { width: 100%; height: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); }
.fig figcaption { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.fig.tight { margin-top: 20px; }
.formula { font: 500 16px/1.5 var(--body); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 9px 14px; margin-top: 10px; overflow-x: auto; white-space: nowrap; }
.lvl { display: inline-block; font: 600 14px/1 var(--cond); color: var(--ct); background: var(--cb); padding: 5px 9px 6px; border-radius: 4px; white-space: nowrap; }

/* ---------- preference board ---------- */
.board { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: clamp(22px, 3vw, 40px); align-items: start; margin-top: 36px; }
.board-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.blane { border-top: 4px solid var(--c); padding-top: 12px; }
.blane h3 { font-size: 19px; color: var(--ct); }
.blane p { font-size: 14px; line-height: 1.35; color: var(--muted); margin: 3px 0 10px; min-height: 2.7em; }
.pref { display: block; width: 100%; text-align: left; font: 500 15.5px/1.22 var(--cond); padding: 7px 9px 8px; margin-bottom: 2px; border: 0; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; }
.pref:hover { background: var(--cb); }
.pref[aria-pressed="true"] { background: var(--c); color: #fff; }
.board .player { position: sticky; top: 20px; }
.aside-note { margin-top: 48px; border-left: 3px solid var(--accent); padding-left: 20px; }
.aside-note p { margin-top: 8px; }

/* ---------- player (board and explorer share it) ---------- */
.clip { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; aspect-ratio: 2 / 1; }
.clip video { width: 100%; height: 100%; cursor: pointer; }
.p-top { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.p-id { font: 500 14px/1 var(--cond); color: var(--muted); }
.p-ctl { margin-left: auto; display: flex; gap: 6px; }
.p-nav, .switch { display: flex; gap: 6px; padding-left: 10px; border-left: 1px solid var(--rule-strong); }
.p-ctl button, .p-ctl a, .p-nav button, .switch button { font: 600 14px/1 var(--cond); padding: 7px 11px 8px; border: 1px solid var(--rule-strong); background: var(--sheet); border-radius: 4px; cursor: pointer; }
.p-ctl a { color: inherit; text-decoration: none; white-space: nowrap; }
.p-ctl a[hidden] { display: none; }
.p-ctl button:hover, .p-ctl a:hover, .p-nav button:hover, .switch button:hover { border-color: var(--ink); }
.p-nav button:disabled { opacity: .4; cursor: default; border-color: var(--rule); }
.switch button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.player h3 { margin-top: 12px; font-size: 25px; line-height: 1.15; }
.p-task { margin-top: 6px; }
.p-how { margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.readout { margin-top: 16px; display: grid; grid-template-columns: auto minmax(60px, 1fr) 3ch; gap: 7px 12px; align-items: center; }
.readout .r-title { grid-column: 1 / -1; font: 600 14.5px/1.2 var(--cond); color: var(--ink); }
.readout .r-lab { font: 500 14.5px/1.2 var(--cond); color: var(--muted); }
.readout .r-bar { height: 8px; border-radius: 4px; background: #e3e8f0; overflow: hidden; }
.readout .r-bar i { display: block; height: 100%; background: var(--c); border-radius: 4px; }
.readout .r-val { font: 600 16px/1 var(--cond); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }

/* ---------- suites ---------- */
.strip { display: flex; margin-top: 34px; border: 1px solid var(--rule-strong); border-radius: var(--r); overflow: hidden; background: var(--sheet); }
.strip-seg { flex: var(--n) 1 0; min-width: 0; text-align: left; padding: 16px 16px 18px; border: 0; border-right: 1px solid var(--rule-strong); background: transparent; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.strip-seg:last-child { border-right: 0; }
.strip-seg:hover { background: var(--paper); }
.s-n { font: 700 34px/1 var(--cond); color: var(--ink); }
.s-name { font: 600 16.5px/1.2 var(--cond); color: var(--ink); overflow-wrap: anywhere; }
.s-d { font-size: 14.5px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.strip-reuse { margin-top: 14px; font-size: 16px; }
.release { margin-top: 12px; border-top: 1px solid var(--rule-strong); }
.release li { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.release a { font: 600 17px/1.3 var(--cond); color: var(--ink); }
.release span { font-size: 16px; line-height: 1.5; color: var(--text); }

/* ---------- task explorer ---------- */
.ex-bar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 32px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule-strong); border-radius: var(--r); overflow: hidden; background: var(--sheet); }
.seg button { font: 600 15px/1 var(--cond); padding: 10px 14px 11px; border: 0; border-right: 1px solid var(--rule); background: transparent; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button small { font-weight: 500; font-size: 13.5px; margin-left: 6px; color: var(--muted); }
.seg button:hover { background: var(--paper); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg button[aria-pressed="true"] small { color: #fff; }
.ex-search input { font: 400 16px/1.2 var(--body); padding: 9px 12px; width: min(300px, 78vw); border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--sheet); color: var(--text); }
.ex-count { font: 500 15px/1 var(--cond); color: var(--muted); }
.ex-note { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.ex-body { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; margin-top: 16px; }
.ex-list { position: relative; max-height: 660px; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--sheet); overscroll-behavior: contain; }
.row { display: block; width: 100%; text-align: left; padding: 10px 12px 11px 11px; border: 0; border-bottom: 1px solid var(--rule); border-left: 4px solid transparent; background: transparent; cursor: pointer; }
.row:hover { background: var(--paper); }
.row[aria-current="true"] { background: var(--cb); border-left-color: var(--c); }
.row b { display: block; font: 600 16px/1.22 var(--cond); color: var(--ink); }
.row span { display: block; font-size: 14px; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.row em { font: 500 13px/1 var(--cond); font-style: normal; color: var(--ct); margin-top: 5px; display: block; }
.ex-empty { padding: 22px 16px; font-size: 16px; color: var(--muted); }
.ex-empty button { display: block; margin-top: 10px; font: 600 15px/1 var(--cond); padding: 8px 12px; border: 1px solid var(--rule-strong); background: var(--sheet); border-radius: 4px; cursor: pointer; }

/* ---------- pipeline ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin-top: 34px; }
.steps li { counter-increment: step; border-top: 3px solid var(--accent); padding-top: 12px; }
.steps li::before { content: "Stage " counter(step); font: 600 15px/1 var(--cond); color: var(--muted); }
.steps h3 { margin-top: 6px; }
.steps p { margin-top: 8px; font-size: 16px; line-height: 1.55; }

/* ---------- metrics ---------- */
.defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin-top: 32px; }
.def { border-top: 3px solid var(--accent); padding-top: 12px; }
.def p { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.def .formula { font-size: 15.5px; }
.levels { margin-top: 12px; border-collapse: collapse; width: 100%; border-top: 1px solid var(--rule-strong); }
.levels th, .levels td { text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; }
.levels th { width: 150px; font-weight: 400; padding-right: 16px; }
.levels td b { color: var(--ink); font-weight: 600; }

/* ---------- results ---------- */
.q { padding: 28px 0 34px; border-top: 1px solid var(--rule-strong); }
.q-side { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
#results .sec-head { margin-bottom: 34px; }
.q-tag { font: 700 34px/1 var(--cond); color: var(--accent); letter-spacing: -.01em; }
.q-name { font: 500 17px/1.25 var(--cond); color: var(--muted); }
.q-main h3 { font-size: 23px; }
.q-main h3 + p { margin-top: 10px; }
.q-main p + h3 { margin-top: 26px; }
.table-wrap { margin-top: 18px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px 8px; overflow-x: auto; }
.t-cap { font-size: 14.5px; line-height: 1.45; color: var(--muted); max-width: none; margin-bottom: 8px; }
table.data { border-collapse: collapse; width: 100%; font: 400 15px/1.2 var(--cond); font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 8px 9px; text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; padding-left: 0; }
table.data thead th { font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--accent); }
table.data thead tr.grp th { border-bottom: 0; text-align: center; padding-bottom: 0; color: var(--ink); }
table.data tbody tr + tr td { border-top: 1px solid var(--rule); }
table.data td.best { font-weight: 700; color: var(--ink); }
table.data small { font-size: .8em; font-weight: 400; color: var(--muted); margin-left: 1px; }

/* ---------- citation, footer ---------- */
.bibtex { margin-top: 22px; background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px; position: relative;
  --wash-btn: var(--accent); --on-wash-btn: #ffffff; }
.bibtex pre { margin: 0; font: 400 14px/1.6 var(--code); overflow-x: auto; padding-right: 130px; }
.bibtex .btn { position: absolute; right: 14px; top: 14px; padding: 9px 13px 10px; font-size: 15px; }
.foot { padding: 56px var(--pad) 48px calc(var(--gutter) + var(--pad)); font-size: 15px; color: var(--muted); max-width: calc(1320px + var(--gutter)); }

/* ---------- enlarged clip ---------- */
.lightbox { border: 0; padding: 0; background: transparent; width: min(96vw, 1360px); max-width: none; }
.lightbox::backdrop { background: rgba(8, 13, 26, .86); }
.lightbox video { width: 100%; height: auto; background: var(--sheet); border-radius: var(--r); }
.lightbox-close { display: block; margin: 0 0 10px auto; font: 600 15px/1 var(--cond); padding: 9px 13px 10px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; cursor: pointer; }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  :root { --gutter: 0px; }
  .rail { position: sticky; inset: auto; top: 0; width: auto; max-height: none; overflow: visible; flex-direction: row; align-items: center; padding: 11px var(--pad);
    border: 0; border-bottom: 1.5px solid var(--accent); border-radius: 0; }
  .rail-mark { padding: 0; font-size: 21px; }
  .rail-nav a { font-size: 16px; }
  .rail-links a { font-size: 16px; }
  .rail-toggle { display: inline-flex; margin-left: auto; font: 600 15px/1 var(--cond); padding: 9px 13px 10px; border-radius: var(--r); border: 1px solid var(--wash-edge); background: transparent; color: var(--on-wash); cursor: pointer; }
  .rail-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--wash); padding: 6px 0 18px; border-top: 1px solid var(--wash-line); border-bottom: 1.5px solid var(--accent); max-height: calc(100vh - 54px); overflow-y: auto; }
  .rail.open .rail-panel { display: flex; }
  .rail-nav { margin-top: 0; }
  .rail-nav a { padding: 9px var(--pad) 9px calc(var(--pad) - 3px); }
  .rail-links { margin: 12px var(--pad) 0; padding: 14px 0 0; flex-direction: row; gap: 22px; }
  html { scroll-padding-top: 70px; }
  .hero { --h: clamp(600px, calc(100vh - 54px), 860px); }
  .board .player { top: 70px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-right: var(--pad); min-height: 0; }
  .hero-copy { padding: 44px 0 8px; }
  .lanes { --tile: 1fr; height: 330px; padding-right: 0; margin-bottom: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; margin-top: 30px; }
  .facts > div { border-right: 0; margin-right: 0; padding: 12px 12px 0 0; border-top: 1px solid var(--wash-line); margin-top: 12px; }
  .board, .ex-body { grid-template-columns: minmax(0, 1fr); }
  .board .player { position: static; order: -1; }
  .ex-list { max-height: 300px; }
  .steps, .defs { grid-template-columns: minmax(0, 1fr); }
  .strip { flex-direction: column; }
  .strip-seg { border-right: 0; border-bottom: 1px solid var(--rule-strong); flex: none; }
  .strip-seg:last-child { border-bottom: 0; }
  .q-tag { font-size: 30px; }
  .release li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .levels th { width: 112px; }
  .bibtex pre { padding-right: 0; padding-top: 44px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .board-lanes { grid-template-columns: minmax(0, 1fr); }
  .blane p { min-height: 0; }
  .tile span { font-size: 12.5px; padding: 6px 7px 8px; }
  .lane-head { font-size: 14px; }
  .lane-head small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lane-track { animation: none; }
}