... */
.chart { display: grid; grid-template-columns: repeat(var(--groups, 1), 1fr); gap: 1.25rem; }
.chart .g { display: flex; flex-direction: column; }
.chart .grp {
display: grid; grid-template-columns: repeat(var(--bars, 2), 1fr); gap: 4px; align-items: end;
height: var(--h, 150px); border-bottom: 1px solid var(--border); padding-top: 1.2rem;
}
.chart .bar {
position: relative; height: calc(var(--v) / var(--n, 100) * 100%);
background: var(--fg-faint); border-radius: 3px 3px 0 0; min-height: 2px;
}
.chart .bar.b2 { background: var(--fg-muted); }
.chart .bar.ours { background: var(--accent); }
.chart .bar::after {
content: attr(data-label); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
margin-bottom: .2rem; font-size: .7rem; font-weight: 600; color: var(--fg-muted);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chart .bar.ours::after { color: var(--accent); }
.chart .glabel { text-align: center; font-size: .8rem; color: var(--fg-muted); margin-top: .5rem; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .8rem; color: var(--fg-muted); margin: 0 0 1rem; }
.legend span::before {
content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 2px;
background: var(--fg-faint); margin-right: .45em; vertical-align: -.05em;
}
.legend .b2::before { background: var(--fg-muted); }
.legend .ours::before { background: var(--accent); }
/* ---------- Layout helpers ---------- */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.two-up.media-left { grid-template-columns: 3fr 2fr; }
.two-up.media-right { grid-template-columns: 2fr 3fr; }
.two-up.w-2-3 { grid-template-columns: 2fr 3fr; } /* ratio as a class, never inline: inline grid columns cannot be collapsed by the phone rule below */
.two-up.top { align-items: start; }
/* Titled two-column block (.duo; .swap-layout is the original name): a figure spans two rows on the left; the swap clip (top) and the three steps (bottom)
form a titled right-hand column, separated from the figure by a hairline so the two halves read one after the other */
:is(.swap-layout,.duo) { grid-template-columns: 3fr 2fr; grid-template-rows: auto 1fr; align-items: start; column-gap: 2.75rem; row-gap: 0; }
:is(.swap-layout,.duo) > figure:first-child { grid-column: 1; grid-row: 1 / span 2; }
:is(.swap-layout,.duo) > figure:nth-child(2) { grid-column: 2; grid-row: 1; }
:is(.swap-layout,.duo) > :nth-child(3) { grid-column: 2; grid-row: 2; align-self: end; margin: .25rem 0 1rem; }
:is(.swap-layout,.duo) > ol.steps { grid-template-columns: 1fr; gap: .6rem; } /* bottom-aligned with the figure caption (figure has 1rem bottom margin) */
:is(.swap-layout,.duo)::before { content: ""; grid-column: 2; grid-row: 1 / span 2; justify-self: start; align-self: stretch; width: 0; border-left: 1px solid var(--border); margin-left: -1.375rem; }
:is(.swap-layout,.duo) ol.steps li { position: relative; padding-left: 2.2em; font-size: .95rem; line-height: 1.45; } /* same size as the standalone steps; .88rem was too small (user, 2026-10-27) */
:is(.swap-layout,.duo) ol.steps li::before { position: absolute; left: 0; top: .12em; margin: 0; }
:is(.swap-layout,.duo) ol.steps li b { display: inline; font-size: inherit; margin: 0; }
.kicker { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 1rem; }
.kicker.sub { border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 2.5rem; } /* section-level sub-block header: hairline above so consecutive blocks read as separate (user, 2026-10-27) */
@media (max-width: 680px) {
/* same specificity as the desktop rules above (they carry the `figure` type), otherwise the columns survive on phones */
:is(.swap-layout,.duo) > figure:first-child, :is(.swap-layout,.duo) > figure:nth-child(2), :is(.swap-layout,.duo) > :nth-child(3) { grid-column: auto; grid-row: auto; }
:is(.swap-layout,.duo)::before { display: none; }
:is(.swap-layout,.duo) > :nth-child(3) { align-self: start; }
}
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.wide {
width: min(var(--maxw-wide), 100vw - 3rem);
margin-left: calc(50% - min(var(--maxw-wide), 100vw - 3rem) / 2);
}
@media (max-width: 680px) {
.two-up, .two-up.media-left, .two-up.media-right, .two-up.w-2-3, .three-up { grid-template-columns: 1fr; }
.three-up.keep { gap: .75rem; }
}
.three-up.keep { grid-template-columns: repeat(3, 1fr); }
/* ---------- Tool family row ---------- */
/* Row of same-height panels with different aspect ratios: --cols lists the images' widths at a common height
(fr units are proportional, so every panel renders at the same height); on phones the first panel takes a full row. */
.panels { display: grid; grid-template-columns: var(--cols, 1fr 1fr 1fr); gap: 1.25rem; align-items: start; }
.panels img { width: 100%; margin: 0; }
@media (max-width: 680px) {
.panels { grid-template-columns: var(--cols-sm, 1fr 1fr); gap: 1rem; }
.panels img:first-child { grid-column: 1 / -1; }
.panels.even img:first-child { grid-column: auto; } /* even count: plain 2-column grid on phones */
}
.tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.tools figure { margin: 0; text-align: center; }
.tools .media { aspect-ratio: 1; }
.tools figcaption { font-size: .84rem; color: var(--fg); font-weight: 500; margin-top: .45rem; max-width: none; }
.tools .kind { display: block; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; }
@media (max-width: 680px) { .tools { grid-template-columns: repeat(3, 1fr); } }
/* ---------- Numbered steps & accent bullet lists ---------- */
.num {
display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%;
background: var(--accent); color: var(--on-accent); font-size: .75em; font-weight: 700; vertical-align: .1em; margin-right: .35em;
}
ol.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: step; }
ol.steps.cols-2 { grid-template-columns: repeat(2, 1fr); }
ol.steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
ol.steps li { counter-increment: step; font-size: .95rem; color: var(--fg-muted); }
ol.steps li::before {
content: counter(step); display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
background: var(--accent); color: var(--on-accent); font-size: .8rem; font-weight: 700; margin-bottom: .5rem;
}
ol.steps li b { display: block; color: var(--fg); font-size: 1rem; margin-bottom: .25rem; }
@media (max-width: 680px) { ol.steps, ol.steps.cols-2, ol.steps.cols-4 { grid-template-columns: 1fr; } }
/* ---------- Step-synced clip:
+ data-t on each - (autonomous tool swap, 2026-10-30).
site.js names the step at the playhead in a badge on the clip and marks it aria-current in the list; the other steps dim while the clip runs. */
.media .step-badge {
position: absolute; left: .5rem; top: .5rem; /* top corner like .badge: the native control bar owns the bottom edge */
display: inline-flex; align-items: center; gap: .45em;
padding: .15rem .6rem .15rem .18rem; border-radius: 999px;
background: var(--overlay); color: #fff;
font: 600 .72rem/1.5 var(--font-sans); letter-spacing: .02em;
pointer-events: none;
}
.media .step-badge i { display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-style: normal; font-weight: 700; }
.media.needs-tap .step-badge { display: none; }
ol.steps li { transition: opacity .15s ease; }
ol.steps.live li:not([aria-current]) { opacity: .4; }
ul.list { list-style: none; padding: 0; margin: 0; max-width: none; } /* full column width (user, 2026-10-27) */
ul.list li { position: relative; padding-left: 1.25em; margin-bottom: .5em; color: var(--fg-muted); }
ul.list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45em; height: .45em; border-radius: 50%; background: var(--accent); }
ul.list li b { color: var(--fg); }
/* ---------- Video modal ---------- */
.vmodal {
position: fixed; inset: 0; z-index: 1000; display: none; place-items: center;
width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
background: rgba(0, 0, 0, .92); color: #fff; padding: 2rem;
}
.vmodal[open] { display: grid; }
.vmodal::backdrop { background: transparent; }
body:has(.vmodal[open]) { overflow: hidden; }
.vmodal video { max-width: min(1400px, 100%); max-height: 85vh; width: 100%; border-radius: var(--radius-sm); background: #000; }
.vclose {
position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff;
font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.vclose:hover { background: rgba(255, 255, 255, .25); }
.bibtex .copy.copied { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* ---------- Series hub (timeline of papers) ---------- */
.series .entry {
display: grid; grid-template-columns: 2fr 3fr; gap: 1.5rem; align-items: center;
padding: 1.75rem 0; border-top: 1px solid var(--border);
}
.series .entry:last-child { border-bottom: 1px solid var(--border); }
.series h3 { font-size: 1.25rem; margin: 0 0 .35rem; }
.series .meta { font-size: .74rem; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: .5rem; }
@media (max-width: 680px) { .series .entry { grid-template-columns: 1fr; } }
/* ---------- Utilities ---------- */
.center { text-align: center; }
.muted { color: var(--fg-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; border-radius: 0 0 6px 0; }
.skip:focus { left: 0; }
/* ---------- Explicit theme override (data-theme on ) ----------
Same tokens as the dark media query; lets a toggle or a test harness
force dark/light regardless of the OS setting. */
:root[data-theme="dark"] {
--bg: #0e1014;
--bg-soft: #1c2129;
--fg: #e7e9ec;
--fg-muted: #b3b8c2;
--fg-faint: #8b93a1;
--fg-ghost: #5c6470;
--accent-ink: #7aa2f7;
--on-accent: #0e1014;
--award: #f87171;
--border: #262b34;
--accent: #7aa2f7;
--accent-soft: #1d2a44;
--brand: #f0625f;
--ok: #4ade80;
--fail: #f87171;
--overlay: rgba(0, 0, 0, .6);
color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
/* ---------- Placeholder label shown until a clip is supplied ---------- */
.media .ph {
position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem;
text-align: center; color: var(--fg-ghost); font: 500 .74rem/1.4 var(--font-mono);
pointer-events: none;
}
/* ---------- Figures with transparent/white backgrounds ---------- */
img.onwhite { background: #fff; border-radius: var(--radius-sm); padding: .5rem; }
/* ---------- Section sub-headings ---------- */
.section > h3 { font-size: 1.15rem; margin: 2.5rem 0 .75rem; }
/* ---------- Landmarks, print, reduced transparency ---------- */
main:focus { outline: none; }
@media print { [role="tabpanel"][hidden] { display: block; } }
@media (max-width: 680px), (prefers-reduced-transparency: reduce) {
.toc { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 680px) {
.toc .motion { position: sticky; right: 0; margin-left: .5rem; background: var(--bg); box-shadow: 0 0 0 6px var(--bg); }
}
/* ---------- Loop seam fade, autoplay-refused fallback, 44px hit areas, text wrapping ---------- */
.media > video { transition: opacity .25s linear; }
.media > video.seam { opacity: 0; }
.media.needs-tap .badge { display: none; }
.toc a, .toc .motion, .tabs [role="tab"], .replay { position: relative; }
.toc a::after, .toc .motion::after, .tabs [role="tab"]::after, .replay::after, .bibtex .copy::after { content: ""; position: absolute; inset: -6px -2px; }
p, li, dd, figcaption { text-wrap: pretty; }
.carousel { overscroll-behavior-x: contain; }
/* =========================================================
wild-site additions (2026-10-28): seek chips, clip wall, tool picker, layer list, SVG bars.
All new selectors; nothing above changes for the v1 page.
========================================================= */
/* ---------- Seek chips under a long clip:
- ---------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.chips button {
appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted);
font: inherit; font-size: .85rem; font-weight: 500; padding: .32em .9em; border-radius: 999px; cursor: pointer; position: relative;
}
.chips button::after { content: ""; position: absolute; inset: -6px -2px; }
.chips button:hover { color: var(--accent-ink); border-color: var(--accent); }
.chips button[aria-current="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.chips button small { color: var(--fg-faint); font-weight: 500; margin-left: .4em; font-variant-numeric: tabular-nums; }
.chips button[aria-current="true"] small { color: var(--accent-ink); }
/* ---------- Clip wall: a dense grid of muted loops (in-the-wild collection) ---------- */
.wall { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.wall .media { border-radius: 0; }
.wall-cap {
position: absolute; left: .9rem; bottom: .9rem; z-index: 1; padding: .4rem .85rem; border-radius: 999px;
background: var(--overlay); color: #fff; font-size: .84rem; font-weight: 600; letter-spacing: .01em; pointer-events: none;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 680px) { .wall { grid-template-columns: repeat(3, 1fr); gap: 2px; } .wall-cap { left: .5rem; bottom: .5rem; font-size: .74rem; } }
/* ---------- Tool picker: a 2-column grid of tool tiles on the left (Passive / Articulated), the matching exploded view on the right.
Tiles are the tool photos themselves (520 px squares, trimmed to content); the stage figure is centred against the tile column. ---------- */
.picker { display: grid; grid-template-columns: 17rem 1fr; gap: 2rem; margin-top: 1.5rem; }
.picker .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem .75rem; align-content: start; margin: 0; }
.picker .tabs .group { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); margin: .5rem 0 -.3rem; }
.picker .tabs .group:first-child { margin-top: 0; }
.picker .tabs [role="tab"], .picker .tabs [role="tab"][aria-selected="true"] { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); background: none; text-align: center; color: var(--fg-muted); font-size: .86rem; line-height: 1.25; }
.picker .tabs .thumb { display: block; aspect-ratio: 1; padding: 9%; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; outline: 1px solid transparent; outline-offset: -2px; transition: border-color .15s ease, outline-color .15s ease; }
.picker .tabs .thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s ease; }
.picker .tabs [role="tab"]:hover { color: var(--accent-ink); }
.picker .tabs [role="tab"]:hover .thumb { border-color: var(--accent); }
.picker .tabs [role="tab"]:hover .thumb img { transform: scale(1.05); }
.picker .tabs [role="tab"][aria-selected="true"] { color: var(--accent-ink); font-weight: 600; }
.picker .tabs [role="tab"][aria-selected="true"] .thumb { border-color: var(--accent); outline-color: var(--accent); }
.picker .tabs .name { display: block; margin-top: .4rem; }
.picker .stage { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.picker .stage figure { margin: 0; }
.picker .stage img { display: block; width: 100%; height: auto; padding: 1rem; background: #fff; border-radius: var(--radius); animation: pk-in .3s ease; }
.picker .stage figcaption { text-align: left; max-width: none; margin: .75rem 0 0; font-size: .92rem; color: var(--fg-muted); }
.picker .stage figcaption b { color: var(--fg); }
@keyframes pk-in { from { opacity: 0; } }
@media (max-width: 680px) {
.picker { grid-template-columns: 1fr; gap: 1.25rem; }
.picker .tabs { grid-template-columns: repeat(4, 1fr); gap: .6rem .5rem; }
.picker .tabs [role="tab"], .picker .tabs [role="tab"][aria-selected="true"] { font-size: .78rem; }
.picker .stage img { padding: .5rem; }
}
/* ---------- SVG bar chart drawn in site colors ---------- */
.bars { width: 100%; height: auto; display: block; }
.bars text { font: 500 13px var(--font-sans); fill: var(--fg-muted); }
.bars .val { fill: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.bars .b { fill: var(--accent); }
.bars .b.alt { fill: var(--fg-faint); }
.bars .axis { stroke: var(--border); }
.legend .alt::before { background: var(--fg-faint); }
/* ---------- Donut + key list, stacked histogram (wild-site dataset block) ---------- */
.donut-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 1.25rem; align-items: center; }
.donut { width: 180px; height: 180px; display: block; }
.donut .big { font: 700 28px var(--font-sans); fill: var(--fg); letter-spacing: -.03em; }
.donut .small { font: 500 12px var(--font-sans); fill: var(--fg-muted); letter-spacing: .04em; text-transform: uppercase; }
ul.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem .5rem; font-size: .88rem; color: var(--fg-muted); }
ul.keys li { display: flex; align-items: center; gap: .5rem; }
ul.keys li b { margin-left: auto; color: var(--fg); font-variant-numeric: tabular-nums; }
ul.keys .sw { width: .7rem; height: .7rem; border-radius: 3px; flex: none; }
.hist { width: 100%; height: auto; display: block; }
.hist text { font: 500 12px var(--font-sans); fill: var(--fg-muted); }
.hist .axis { stroke: var(--border); }
.hist .grid { stroke: var(--border); stroke-dasharray: 2 3; }
@media (max-width: 680px) { .donut-wrap { grid-template-columns: 1fr; justify-items: center; } ul.keys { grid-template-columns: 1fr 1fr; width: 100%; } }
/* ---------- Dataset explorer (wild-site): filter pills, card grid, detail panel ---------- */
.explorer { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.25rem; background: var(--bg); }
.ex-bar { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.ex-group { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ex-group .lbl { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); margin-right: .25rem; }
.ex-group button, .ex-shuffle {
appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted);
font: inherit; font-size: .82rem; font-weight: 500; padding: .3em .8em; border-radius: 999px; cursor: pointer; position: relative;
}
.ex-group button::after, .ex-shuffle::after { content: ""; position: absolute; inset: -6px -2px; }
.ex-group button:hover, .ex-shuffle:hover { color: var(--accent-ink); border-color: var(--accent); }
.ex-group button[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.ex-group button small { color: var(--fg-faint); margin-left: .35em; font-variant-numeric: tabular-nums; }
.ex-group button[aria-pressed="true"] small { color: var(--accent-ink); }
.ex-count { font-size: .82rem; color: var(--fg-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
.ex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.ex-card { appearance: none; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--radius-sm); color: inherit; font: inherit; }
.ex-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ex-card .media { border-radius: var(--radius-sm); }
.ex-card[aria-pressed="true"] .media { outline: 2px solid var(--accent); outline-offset: 2px; }
.ex-card .meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--fg-muted); margin-top: .35rem; }
.ex-card .meta b { color: var(--fg); font-weight: 600; }
.ex-card .meta .fm { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-more { display: block; margin: 1rem auto 0; }
.ex-detail { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: grid; grid-template-columns: 3fr 2fr; gap: 1.25rem; align-items: start; }
.ex-detail .chips { justify-content: flex-start; margin: .5rem 0 0; }
.ex-detail .chips li { display: inline-flex; align-items: center; gap: .35em; padding: .25em .7em; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; color: var(--fg-muted); }
.ex-detail .chips li b { color: var(--fg); font-weight: 600; }
.ex-streams { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ex-streams .media { border-radius: var(--radius-sm); }
.ex-streams .cap { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 .3rem; }
.ex-empty { padding: 2rem 1rem; text-align: center; color: var(--fg-faint); font-size: .9rem; }
@media (max-width: 900px) { .ex-grid { grid-template-columns: repeat(3, 1fr); } .ex-detail { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .ex-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .explorer { padding: .75rem .75rem 1rem; } .ex-count { margin-left: 0; flex-basis: 100%; } }
/* ---------- Failure modes (wild-site): cards on the left drive one video stage on the right ---------- */
.fails { display: grid; grid-template-columns: 2fr 3fr; gap: 1.5rem; align-items: start; }
.fail-list { display: grid; gap: .4rem; }
.fail-list button {
appearance: none; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .85rem;
background: var(--bg); color: var(--fg-muted); font: inherit; font-size: .9rem; line-height: 1.4; cursor: pointer;
}
.fail-list button b { display: block; color: var(--fg); margin-bottom: .1rem; }
.fail-list button:hover { border-color: var(--accent); }
.fail-list button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.fail-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fail-stage { margin: 0; position: sticky; top: 4.5rem; }
@media (max-width: 760px) { .fails { grid-template-columns: 1fr; } .fail-stage { position: static; order: -1; } }
/* ---------- Dataset explorer preview card (paper page) and the explorer page / embed mode ---------- */
.ds-preview { position: relative; display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); aspect-ratio: 16 / 7; }
.ds-preview iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.ds-preview .go {
position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); padding: .5rem 1.1rem; border-radius: 999px;
background: var(--fg); color: var(--bg); font-size: .9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}
.ds-preview:hover { text-decoration: none; }
.ds-preview:hover .go { background: var(--accent); color: var(--on-accent); }
.ds-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 680px) { .ds-preview { aspect-ratio: 4 / 3; } }
.ex-head { margin: 1rem 0 1.5rem; }
.ex-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 .5rem; }
.embed .toc, .embed .ex-head, .embed .footer, .embed .ex-more, .embed .ex-detail { display: none !important; }
.embed .page { padding: .75rem .9rem; max-width: none; }
.embed .explorer { border: 0; padding: 0; }
.embed .ex-bar { margin-bottom: .6rem; }
.embed .ex-card { cursor: default; }
/* ---------- Secondary pages (explore, hardware guide): page head, left-aligned pill rows ---------- */
.ex-head, .page-head { margin: 1rem 0 1.5rem; }
.ex-head h1, .page-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 .5rem; }
.buttons.left { justify-content: flex-start; }
.buttons .lbl { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); margin-right: .25rem; align-self: center; }
/* ---------- Hardware guide (body.hw): module strip on top; each module = step list on the left that drives one sticky
portrait player on the right (same stage pattern as the paper page's failure cards); files and BOM as quiet rows below the list. ---------- */
.hw-modules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 1.75rem 0 0; }
.hw-modules a { display: block; color: inherit; }
.hw-modules a:hover { text-decoration: none; }
.hw-modules a:hover .name { color: var(--accent-ink); }
.hw-modules .media { aspect-ratio: 1; border-radius: var(--radius-sm); }
.hw-modules .name { display: block; font-weight: 600; font-size: .92rem; margin: .55rem 0 0; }
.hw-mod { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem 2.5rem; align-items: start; margin-top: 1.25rem; }
.hw-steps { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hw-stepbtn {
appearance: none; text-align: left; width: 100%; position: relative; cursor: pointer; color: inherit; font: inherit;
border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--radius-sm); background: var(--bg); padding: .9rem 1rem .9rem 3.1rem;
}
.hw-stepbtn .n { position: absolute; left: 1rem; top: .95rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .76rem; font-weight: 700; display: grid; place-items: center; }
.hw-stepbtn h3 { font-size: 1.02rem; margin: 0 0 .3rem; padding-right: 3rem; }
.hw-stepbtn .dur { position: absolute; right: .9rem; top: 1rem; font-size: .76rem; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.hw-stepbtn .parts { font-size: .88rem; color: var(--fg-muted); margin: 0; line-height: 1.55; }
.hw-stepbtn .parts b { color: var(--fg); font-weight: 600; }
.hw-stepbtn .parts span + span::before { content: " \00b7\0020"; color: var(--fg-ghost); }
.hw-stepbtn .note { font-size: .84rem; color: var(--fg-muted); margin: .6rem 0 0; padding: .55rem .75rem; background: var(--bg-soft); border-radius: 6px; line-height: 1.5; }
.hw-stepbtn .note b { color: var(--fg); }
.hw-stepbtn:hover { border-color: var(--fg-faint); border-left-color: var(--fg-faint); }
.hw-stepbtn[aria-pressed="true"] { border-color: var(--accent); border-left-color: var(--accent); }
.hw-stepbtn[aria-pressed="true"] .dur { color: var(--accent-ink); }
.hw-stepbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hw-stage { position: sticky; top: 4.5rem; }
.hw-stage .media { aspect-ratio: 9 / 16; border-radius: var(--radius-sm); background: #000; }
.hw-stage .media .ph { display: none; background: var(--bg-soft); }
.hw-stage .media.empty { background: var(--bg-soft); }
.hw-stage .media.empty > video { display: none; } /* .media > video sets display:block, which would beat the hidden attribute */
.hw-stage .media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hw-stage .media.yt > video { display: none; }
.hw-stage .media.empty .ph { display: grid; }
.hw-stage .cap { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; color: var(--fg-muted); margin: .55rem 0 0; }
.hw-stage .cap b { color: var(--fg); font-weight: 600; }
.hw-files { display: grid; gap: .5rem; margin-top: 1rem; }
.hw-files > a, .hw-files > details > summary {
display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
color: var(--fg); font-weight: 600; font-size: .92rem; cursor: pointer; list-style: none;
}
.hw-files > details > summary::-webkit-details-marker { display: none; }
.hw-files > a:hover, .hw-files > details > summary:hover { border-color: var(--fg-faint); text-decoration: none; }
.hw-files .ic { margin-left: auto; width: 15px; height: 15px; flex: none; color: var(--fg-faint); transition: transform .2s; }
.hw-files details[open] > summary .ic { transform: rotate(90deg); }
.hw-files .soon { font-weight: 500; color: var(--fg-faint); }
.hw-files a.soon { cursor: default; color: var(--fg-muted); }
.hw-files a.soon:hover { border-color: var(--border); }
.hw-files .tbl-wrap { margin-top: .5rem; }
.hw .tbl th, .hw .tbl td { white-space: normal; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0 0; }
.mode { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.mode h4 { margin: 0 0 .5rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
ul.checks { list-style: none; margin: 0; padding: 0; font-size: .92rem; color: var(--fg); line-height: 1.9; }
ul.checks li { position: relative; padding-left: 1.5em; }
ul.checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
ul.checks li.off { color: var(--fg-faint); }
ul.checks li.off::before { content: "\2715"; color: var(--fg-ghost); }
@media (max-width: 900px) { .hw-mod { grid-template-columns: 1fr 250px; gap: 1.25rem 1.75rem; } }
@media (max-width: 680px) {
.hw-modules { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.hw-mod { grid-template-columns: 1fr; }
.hw-stage { position: static; order: -1; max-width: 260px; margin: 0 auto; width: 100%; }
.hw-stepbtn h3 { padding-right: 0; }
.hw-stepbtn .dur { position: static; display: block; margin: 0 0 .35rem; } /* narrow cards: the duration sits above the title instead of overlapping it */
.modes { grid-template-columns: 1fr; }
}