/* ──────────────────────────────────────────────────────────────────────────
   ASENA project page — design tokens
   Dark theme by default; the theme switch preserves an explicit light choice.
   Chart + status colors are the validated house palette (see README).
   ────────────────────────────────────────────────────────────────────────── */

/* IBM Plex Mono — self-hosted mirror of the Google Fonts subsets (no third-party
   request on load; the unicode-range rules make the browser fetch only the
   subsets a page actually uses). Rebuild: see webpage/README.md → Fonts. */
/* IBM Plex Mono 400 — cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono 400 — cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono 400 — vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 — cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono 500 — cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono 500 — vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plexmono/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* NVIDIA Sans — self-hosted (bundled from the paper source). Static cuts:
   400 / 400 italic / 500 / 700; other weights snap to these. */
@font-face {
  font-family: 'NVIDIA Sans';
  src: url('../fonts/NVIDIASans_Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA Sans';
  src: url('../fonts/NVIDIASans_It.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA Sans';
  src: url('../fonts/NVIDIASans_Md.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA Sans';
  src: url('../fonts/NVIDIASans_Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f0efec;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #6f6e69;
  --hairline: rgba(11, 11, 11, 0.1);
  --grid: #e1e0d9;
  --baseline: #c3c2b7;

  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(42, 120, 214, 0.12);
  --good: #0ca30c;
  --good-soft: rgba(12, 163, 12, 0.1);
  --critical: #d03b3b;
  --critical-soft: rgba(208, 59, 59, 0.1);
  /* text-on-tinted-chip variants: same hue, stepped for AA contrast */
  --accent-text: #1c5cab;
  --good-text: #006300;
  --critical-text: #a72e2e;

  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;

  /* soft card depth on the light page; dark mode relies on hairlines */
  --shadow-card: 0 22px 60px rgba(11, 11, 11, 0.07);

  --font-sans: 'NVIDIA Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --col: 880px;
  --col-wide: 1200px;
  --nav-h: 56px;
  --radius: 12px;
}

/* Dark is opt-in via the nav toggle (persisted) — the page does not follow
   the OS preference; like its reference paper pages, it has one face. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232321;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --hairline: rgba(255, 255, 255, 0.1);
    --grid: #2c2c2a;
    --baseline: #383835;

    --accent: #3987e5;
    --accent-soft: rgba(57, 135, 229, 0.16);
    --good-soft: rgba(12, 163, 12, 0.14);
    --critical-soft: rgba(208, 59, 59, 0.16);
    --accent-text: #86b6ef;
    --good-text: #2fbf2f;
    --critical-text: #e66767;

    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;

    --shadow-card: none;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* faint accent glows at the top corners (dark-lab ambience) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60vw 40vh at 12% -6%, var(--accent-soft), transparent 60%),
    radial-gradient(50vw 34vh at 92% -4%, rgba(25, 158, 112, 0.08), transparent 60%);
}

h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 0.6em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent); color: var(--accent-ink); }

.col { max-width: var(--col); margin: 0 auto; padding: 0 20px; }
.col--wide { max-width: var(--col-wide); }

.section { padding: 92px 0; }
.section + .section { border-top: 1px solid var(--hairline); }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.section h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

.section-note {
  color: var(--muted);
  font-size: 0.85rem;
}

/* reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Chrome: progress bar + nav ───────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: 8px;
  left: 20px;
  z-index: 70;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--ink);
  transform: translateY(calc(-100% - 12px));
}
.skip-link:focus { transform: none; }
.section[tabindex="-1"]:focus { outline: none; }

#progressbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 60;
}

#topnav {
  container: section-navigation / inline-size;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
#topnav.is-scrolled {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom-color: var(--hairline);
}
/* while over the (always dark) cover video, force light chrome */
#topnav:not(.is-scrolled) .brand { color: #fff; }
#topnav:not(.is-scrolled) .nav-links a { color: rgba(255, 255, 255, 0.72); }
#topnav:not(.is-scrolled) .nav-links a:hover { color: #fff; }
#topnav:not(.is-scrolled) .nav-links a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-size: 0.95rem;
}
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }

.theme-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--hairline); }
#topnav:not(.is-scrolled) .theme-toggle { color: rgba(255, 255, 255, 0.72); }
#topnav:not(.is-scrolled) .theme-toggle:hover { color: #fff; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.is-active { color: var(--accent-text); background: var(--accent-soft); }

.nav-toggle { display: none; }
#topnav :is(a, button):focus-visible, .skip-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 960px) {
  #topnav { gap: 8px; padding-inline: 20px; }
  #topnav:not([data-menu-ready]) .brand { display: none; }
  #topnav[data-menu-ready] .nav-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--ink);
    font: 500 .85rem var(--font-sans);
    cursor: pointer;
  }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: var(--hairline); }
  .nav-toggle svg { width: 16px; height: 16px; transition: transform .18s ease; }
  .nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  #topnav[data-menu-ready] .nav-links {
    position: absolute;
    inset: 100% 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: calc(100vh - var(--nav-h) - 12px);
    max-height: calc(100dvh - var(--nav-h) - 12px);
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    margin: 0;
    padding: 12px 20px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 18px 24px -20px rgba(0, 0, 0, .25);
  }
  #topnav[data-menu-ready] .nav-toggle[aria-expanded="false"] + .nav-links { display: none; }
  #topnav[data-menu-ready] .nav-links::-webkit-scrollbar { display: block; width: 6px; }
  #topnav[data-menu-ready] .nav-links a {
    display: flex;
    align-items: center;
    flex: none;
    min-height: 44px;
    padding: 10px 14px;
    font-size: .75rem;
    letter-spacing: .08em;
  }
}
@media (prefers-reduced-motion: reduce) {
  #topnav, .nav-toggle svg { transition: none; }
}
/* Keep the menu and theme buttons reachable when phone text is enlarged.
   The hidden word remains the disclosure button's accessible name. */
@container section-navigation (max-width: 16rem) {
  #topnav[data-menu-ready] .nav-toggle:not([hidden]) { min-width: 44px; padding: 0; }
  .nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── Cover hero: full-viewport teaser ─────────────────────────────────── */
/* Always dark, both themes — it's a video surface. */

.hero-cover {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: #0d0d0d;
}
.teaser-cover { margin: 0; position: absolute; inset: 0; }
.teaser-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.teaser-ph-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(60vw 45vh at 18% 0%, rgba(57, 135, 229, 0.14), transparent 60%),
    radial-gradient(50vw 38vh at 88% 8%, rgba(25, 158, 112, 0.1), transparent 60%),
    #0d0d0d;
}
.teaser-ph-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #898781;
}
.teaser-ph-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #6b6a65;
}

.hero-cover-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg,
    rgba(13, 13, 13, 0.45), transparent 26%,
    transparent 55%, rgba(13, 13, 13, 0.82));
}
.hero-cover-text {
  width: 100%;
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 0 24px 96px;
}
.hero-wordmark {
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1;
  color: #fff;
}
.hero-cover-tagline {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.hero-cover-tagline .accent { color: #3987e5; } /* cover is always dark */

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.hero-scroll-cue:hover { color: #fff; text-decoration: none; }
.hero-scroll-cue svg { animation: cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue svg { animation: none; }
}

/* ── Page title block (top of Overview) ───────────────────────────────── */

.page-title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
}
.page-title .accent { color: var(--accent); display: block; }
.page-subline {
  max-width: 62ch;
  margin: 0 0 24px;
  color: var(--ink-2);
  font-size: 1.05rem;
}

.hero-links { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 34px; }
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.25;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn small { font-size: 0.62rem; font-weight: 400; color: inherit; opacity: 0.75; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { border-color: var(--hairline); color: var(--ink); }
.btn.is-soon { opacity: 0.55; cursor: default; }

/* ── Demo wall ────────────────────────────────────────────────────────── */

.video-filters {
  display: flex;
  flex-wrap: wrap; /* pills flow to new rows; labels never fold internally */
  gap: 8px;
  justify-content: center;
  margin-bottom: 22px;
}
.video-filters[hidden], .video-card[hidden], .clips-block[hidden] { display: none; }
.filter-chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--hairline);
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--muted); }
.filter-chip.is-active { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.video-card {
  display: block;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-align: left;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.video-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
/* The card's picture: a composed still with the play mark, condensed length,
   and a selection tag that remains accurate when the replay is paused. */
.video-frame { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0b0b; }
.video-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-ph {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--hairline) 70%, transparent) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--hairline) 70%, transparent) 23px 24px),
    var(--surface);
}
.video-soon,
.video-dur,
.video-now {
  position: absolute;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.video-soon { left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px dashed var(--muted); color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.video-dur { right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.72); color: #fff; }
.video-dur:empty { display: none; }
.video-now { left: 8px; top: 8px; background: var(--accent); color: var(--accent-ink); display: none; }
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0b0b0b;
  font-size: 1rem;
  padding-left: 3px; /* optical centre of the glyph */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
  pointer-events: none;
}
.video-card.is-live { cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.video-card.is-live:hover,
.video-card.is-live:focus-visible { transform: translateY(-2px); border-color: var(--muted); }
.video-card.is-live:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.video-card.is-live:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.video-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-card); }
.video-card.is-active .video-play { display: none; }
.video-card.is-active .video-now { display: block; }
.video-card.is-soon .video-thumb { opacity: 0.85; filter: saturate(0.85); }
.video-caption { display: block; padding: 12px 14px 14px; text-align: left; }
.video-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.video-title { display: block; margin: 0 0 4px; color: var(--ink); font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.video-sub { display: block; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }

/* ── Kind chips (demo cards) ─────────────────────────────────────────── */

.clips-block { margin-top: 34px; }
.clips-title { margin: 0 0 7px; font-size: 1.12rem; }
.clips-note { margin: 0 0 20px; color: var(--muted); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) {
  .video-card.is-live, .video-play { transition: none; }
  .video-card.is-live:hover, .video-card.is-live:focus-visible { transform: none; }
}
.replay-block { scroll-margin-top: 80px; }
.chip-kind {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border-radius: 4px;
}
.chip-kind--sim { border: 1px solid var(--hairline); color: var(--muted); }
.chip-kind--real { background: var(--ink); color: var(--bg); }
.chip-meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }
.gallery-error {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--critical);
  padding: 10px 0;
  text-align: center;
}

/* ── Player ───────────────────────────────────────────────────────────── */

.pl-root {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 16px 12px;
  text-align: left;
  box-shadow: var(--shadow-card);
}
.pl-note { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); padding: 40px 0; text-align: center; }
.pl-root.is-error .pl-note { color: var(--critical); }
.pl-retry { font: inherit; color: var(--accent-text); background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; padding: 8px 12px; cursor: pointer; }

.pl-header { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; }
.pl-titlewrap { min-width: 0; max-width: 100%; }
.pl-title { color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.pl-badges { display: inline-flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pl-badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: normal;
  max-width: 100%;
}
.pl-badge--sim { border: 1px solid var(--hairline); color: var(--muted); }
.pl-badge--real { background: var(--ink); color: var(--bg); }
.pl-badge--success { background: var(--good-soft); color: var(--good-text); }
.pl-badge--failure { background: var(--critical-soft); color: var(--critical-text); }
.pl-badge--live { border: 1px dashed var(--accent); color: var(--accent-text); }

.pl-metrics { display: flex; gap: 14px; flex-wrap: wrap; }
.pl-metric { display: flex; flex-direction: column; align-items: flex-end; }
.pl-metric-k { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pl-metric-v { color: var(--ink); font-weight: 700; font-size: 0.95rem; }

.pl-instruction {
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.pl-inst-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pl-inst-text { color: var(--ink); font-size: 0.94rem; flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }

.pl-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}
.pl-body--no-log { grid-template-columns: minmax(0, 1fr); }
/* Multiview stage: one primary tile over a rail of the other lanes. The
   player assigns grid areas (p | a b c), so a swap moves nothing in the DOM
   and playing videos never restart. Every lane is 2:1 — the 360° equirect's
   native shape; other media letterbox inside it. */
.pl-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}
.pl-lane.is-primary { order: -1; }
.pl-lane.is-off { display: none; } /* a lane with nothing to show right now */
.pl-lane.is-entering { animation: pl-enter 0.6s ease-out; }
@keyframes pl-enter { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
/* A lane on its way out (a clip that ended) keeps its corner while the swap
   animation delivers it there (player: _flipLanes), then fades and leaves. */
.pl-stage { position: relative; }
.pl-lane.is-leaving,
.pl-stage.is-hud .pl-lane.is-leaving:not(.is-primary) { opacity: 0; pointer-events: none; transition: opacity 0.4s ease 0.7s; }
.pl-clips { position: absolute; inset: 0; }
.pl-clips .pl-video[hidden] { display: none; }
/* HUD layout: the main view full width, the other lanes as game-style insets
   (minimap bottom-left, body bottom-right, a third lane top-right). */
/* The stage sets the height (16:9 — the equirect's ceiling/body strips are
   the crop); every lane is absolutely placed so a swap can animate rectangles. */
.pl-stage.is-hud { display: block; position: relative; aspect-ratio: 16 / 9; }
.pl-stage.is-hud .pl-lane.is-primary { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.pl-stage.is-hud .pl-lane.is-primary .pl-video { object-fit: cover; }
.pl-stage.is-hud .pl-lane:not(.is-primary) {
  position: absolute;
  bottom: 12px;
  z-index: 4;
  aspect-ratio: auto;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--surface) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  transition: opacity 0.4s;
}
.pl-stage.is-hud .pl-lane[data-slot="bl"] { left: 12px; width: 27%; aspect-ratio: 1.2; }
/* same height as the minimap (22.5% of the stage width), thinner: a 2:3
   portrait, cover-cropped to the robot in the middle of the wide render */
.pl-stage.is-hud .pl-lane[data-slot="br"] { right: 12px; width: 15%; aspect-ratio: 2 / 3; }
/* the following minimap is a radar: a circle centred on the robot, no label */
.pl-stage.is-hud .pl-lane--map:not(.is-primary) { width: 22.5%; aspect-ratio: 1; border-radius: 50%; }
.pl-stage.is-hud .pl-lane--map:not(.is-primary) .pl-lane-label { display: none; }
.pl-stage.is-hud .pl-lane[data-slot="tr"] { right: 12px; top: 12px; bottom: auto; width: 27%; aspect-ratio: 2; }
.pl-stage.is-hud .pl-lane[data-slot="tl"] { left: 12px; top: 12px; bottom: auto; width: 27%; aspect-ratio: 2; }
.pl-stage.is-hud.has-tl .pl-lane.is-primary .pl-lane-label { left: calc(27% + 24px); max-width: calc(46% - 36px); } /* between the two top insets */
.pl-stage.is-hud .pl-lane:not(.is-primary) .pl-video { object-fit: cover; }
.pl-stage.is-hud .pl-lane--map:not(.is-primary) .pl-canvas { background: transparent; } /* radar on the HUD backing */
.pl-stage.is-hud .pl-lane:not(.is-primary) .pl-lane-label { left: 6px; bottom: 5px; padding: 1px 6px; font-size: 0.5rem; }
.pl-stage.is-hud.is-outro .pl-lane:not(.is-primary) { opacity: 0; pointer-events: none; }
.pl-lane {
  position: relative;
  aspect-ratio: 2 / 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg);
}
.pl-lane[role="button"] { cursor: pointer; }
.pl-lane[role="button"]:hover,
.pl-lane[role="button"]:focus-visible { border-color: var(--accent); outline: none; }
.pl-lane.is-primary { cursor: default; border-color: var(--hairline); }
.pl-lane .pl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #0b0b0b;
}
/* the puppet is a VP9-alpha render (robot + soft ground disc) — it floats on
   the page like the splat; framed at render time, so no CSS zoom */
.pl-lane--puppet .pl-video { background: transparent; }
.pl-lane .pl-mapwrap { position: absolute; inset: 0; }
.pl-lane-label {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 2;
  max-width: calc(100% - 16px);
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.pl-lane-label b { font-weight: 600; color: var(--ink); }
.pl-lane.is-primary .pl-lane-label { bottom: auto; top: 8px; } /* the bottom is for the speech windows (and, in the HUD, the minimap) */
.pl-lane:not(.is-primary) .pl-lane-label span { display: none; } /* rail: name only */
.pl-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg);
  /* trajectory-view reads these: */
  --traj-surface: var(--bg);
  --traj-grid: var(--grid);
  --traj-wall: var(--ink-2);
  --traj-ink: var(--ink);
  --traj-muted: var(--muted);
  --traj-trail: var(--accent);
  --traj-robot: var(--accent);
  --traj-scan: var(--muted);
  --traj-goal: var(--good);
  --traj-incident: var(--critical);
  --traj-start: var(--muted);
  --traj-plan: var(--accent);
  --traj-object: var(--ink-2);
}
.pl-fpv {
  position: absolute;
  top: 10px; right: 10px;
  width: 30%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
}
.pl-fpv img { display: block; width: 100%; }
.pl-fpv-label {
  position: absolute;
  left: 6px; bottom: 5px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: #fff; /* always sits over dark imagery, both themes */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

.pl-log {
  /* height 0 + min-height 100%: take the row's height (set by the stage)
     without letting the log's own content define it */
  height: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}
.pl-log-scroll {
  position: relative; /* offsetParent for log lines — auto-follow math needs it */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
}
.pl-log-line {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 9px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}
.pl-log-line:hover { background: var(--surface-2); }
.pl-log-line.is-future { opacity: 0.2; }
.pl-log-line.is-current { background: var(--accent-soft); border-left-color: var(--accent); color: var(--ink); }
.pl-log-time { color: var(--muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; }
.pl-log-chip {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.pl-log-line--instruction .pl-log-chip,
.pl-log-line--tool .pl-log-chip { background: var(--accent-soft); color: var(--accent-text); }
.pl-log-line--incident .pl-log-chip { background: var(--critical-soft); color: var(--critical-text); }
.pl-log-line--incident .pl-log-text { color: var(--critical-text); }
.pl-log-line--result .pl-log-chip { background: var(--good-soft); color: var(--good-text); }
.pl-log-line--llm .pl-log-text { font-style: italic; }
.pl-log-empty { color: var(--muted); padding: 16px; }
/* Tool families — the atomic-skill palette. One hue per family so the log
   and the timeline read as a rhythm of look / think / move / remember. */
:root {
  --tool-move: #2f7ee8;
  --tool-look: #7a5af8;
  --tool-memory: #0f9d8a;
  --tool-plan: #d9820b;
  --tool-speak: #c8397a;
}
[data-theme="dark"] {
  --tool-move: #6ea6ff;
  --tool-look: #a891ff;
  --tool-memory: #3fc7b2;
  --tool-plan: #f0a637;
  --tool-speak: #ff7fb0;
}
.pl-log-line--fam-move .pl-log-chip { background: color-mix(in srgb, var(--tool-move) 16%, transparent); color: var(--tool-move); }
.pl-log-line--fam-look .pl-log-chip { background: color-mix(in srgb, var(--tool-look) 16%, transparent); color: var(--tool-look); }
.pl-log-line--fam-memory .pl-log-chip { background: color-mix(in srgb, var(--tool-memory) 16%, transparent); color: var(--tool-memory); }
.pl-log-line--fam-plan .pl-log-chip { background: color-mix(in srgb, var(--tool-plan) 16%, transparent); color: var(--tool-plan); }
.pl-log-line--fam-speak .pl-log-chip { background: color-mix(in srgb, var(--tool-speak) 16%, transparent); color: var(--tool-speak); }
.pl-log-line--fam-look.pl-log-line--info { opacity: 0.72; } /* observations are the beat, not the melody */
.pl-log-line--fam-look.pl-log-line--info.is-current { opacity: 1; }
.pl-log-line.is-current .pl-log-chip { box-shadow: 0 0 0 1px currentColor inset; }

/* Subtasks: the agent's plan as pills, ticked off live */
.pl-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
}
.pl-plan-label, .pl-plan-wait {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pl-plan-wait::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--muted); animation: pl-pulse 1.4s ease-in-out infinite; vertical-align: middle; }
.pl-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
  transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s;
}
.pl-step-num {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--hairline);
}
.pl-step.is-active { color: var(--ink); border-color: color-mix(in srgb, var(--tool-plan) 55%, transparent); background: color-mix(in srgb, var(--tool-plan) 10%, transparent); }
.pl-step.is-active .pl-step-num { background: var(--tool-plan); color: #fff; border-color: transparent; animation: pl-pulse 1.6s ease-in-out infinite; }
.pl-step.is-done { color: var(--ink-2); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 9%, transparent); }
.pl-step.is-done .pl-step-num { background: var(--good); color: #fff; border-color: transparent; }
.pl-step.is-done .pl-step-text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-2) 45%, transparent); }
.pl-step.is-fresh { transform: scale(1.04); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); }
.pl-step.is-fresh .pl-step-num { animation: pl-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes pl-pop { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }

/* Subtask-done pop-up: the frame holds under it for a beat (see _enterHold) */
.pl-toast {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 18px calc(18px + 14%); /* sits above the minimap's crown */
  background: color-mix(in srgb, #000 14%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.pl-toast.is-on { opacity: 1; }
.pl-toast-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(520px, 90%);
  padding: 12px 20px 13px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pl-toast.is-on .pl-toast-card { transform: scale(1); }
.pl-toast-mark {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--good);
  color: #fff;
  font-weight: 700;
}
.pl-toast.is-on .pl-toast-mark { animation: pl-pop 0.35s ease-out; }
.pl-toast-body { min-width: 0; }
.pl-toast-kicker { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--good); }
.pl-toast-text { margin: 3px 0 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.pl-toast-note { margin: 3px 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--ink-2); }
.pl-stage.is-hud.is-hold .pl-lane:not(.is-primary) { opacity: 0.6; }

/* the speed button while the conversation cap is in force */
.pl-btn--speed.is-talk { color: var(--tool-speak); border-color: color-mix(in srgb, var(--tool-speak) 45%, transparent); }

/* The map is being built: a pulsing mapping counter (m² seen so far) —
   top-right on a tile, top-centre inside the HUD's circular minimap. */
.pl-map-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
}
.pl-map-tag::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
  animation: pl-pulse 1.4s ease-in-out infinite;
}
/* the big map's corners hold insets: the counter takes the free bottom-left */
.pl-stage.is-hud .pl-lane--map.is-primary .pl-map-tag { top: auto; right: auto; bottom: 10px; left: 10px; }
.pl-stage.is-hud .pl-lane--map:not(.is-primary) .pl-map-tag {
  top: 9px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px 1px 5px;
  font-size: 0.48rem;
}

/* Speech pop-ups: what the person said (voice) and what the robot said
   (say()) as subtitle windows on the main view, the speaker tagged in the
   log's colours (TASK blue, SPEAK pink). They sit between the HUD insets. */
.pl-speech {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 2;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(640px, 74%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* HUD: centred in the gap between the minimap (22.5 % + 12 px) and the body inset (15 % + 12 px) */
.pl-stage.is-hud .pl-speech { left: calc(22.5% + 22px); right: calc(15% + 22px); bottom: 14px; transform: none; width: auto; max-width: none; }
.pl-stage.has-card .pl-speech { opacity: 0; }
.pl-speech-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  max-width: 100%;
  font-size: 0.86rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pl-speech-item.is-on { opacity: 1; transform: translateY(0); }
.pl-speech-item.is-person { border-left-color: var(--accent); }
.pl-speech-item.is-caption { border-left-color: var(--accent); }
.pl-speech-item.is-caption .pl-speech-who { background: var(--accent-soft); color: var(--accent-text); }
.pl-speech-item.is-caption .pl-speech-who::before { display: none; }
.pl-speech-item.is-robot { border-left-color: var(--tool-speak); }
.pl-speech-who {
  flex: none;
  position: relative;
  top: -1px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pl-speech-who::before { /* the live dot: these words are in the air */
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
  animation: pl-pulse 1.2s ease-in-out infinite;
}
.pl-speech-item.is-person .pl-speech-who { background: var(--accent-soft); color: var(--accent-text); }
.pl-speech-item.is-robot .pl-speech-who { background: color-mix(in srgb, var(--tool-speak) 16%, transparent); color: var(--tool-speak); }
@media (max-width: 760px) {
  .pl-speech { max-width: 94%; bottom: 8px; }
  .pl-stage.is-hud .pl-speech { left: 3%; right: 3%; bottom: 8px; }
  .pl-speech-item { font-size: 0.76rem; padding: 6px 10px 7px 8px; gap: 8px; }
}

.pl-cut-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* End card: the last frame holds, the result reads out, the evidence shows */
.pl-outro {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, #000 28%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.pl-outro.is-on { opacity: 1; pointer-events: auto; }
.pl-outro-card {
  max-width: min(580px, 92%);
  max-height: calc(100% - 20px); /* never taller than the tile it sits on */
  overflow: auto;
  padding: 12px 18px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  color: var(--ink);
  transform: translateY(10px);
  transition: transform 0.6s ease;
}
.pl-outro.is-on .pl-outro-card { transform: translateY(0); }
.pl-outro-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pl-outro-mark {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
}
.pl-outro-mark.is-ok { background: var(--good); }
.pl-outro-mark.is-fail { background: var(--critical); }
.pl-outro-title { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pl-outro-text { margin: 0; font-size: 0.88rem; line-height: 1.4; color: var(--ink); }
.pl-outro-speech {
  margin: 8px 0 0;
  padding: 6px 12px 7px 14px;
  border-left: 3px solid var(--tool-speak);
  background: color-mix(in srgb, var(--tool-speak) 7%, transparent);
  border-radius: 0 8px 8px 0;
}
.pl-outro-speech-label { display: block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tool-speak); margin-bottom: 3px; }
.pl-outro-speech p { margin: 0; font-size: 0.86rem; line-height: 1.4; color: var(--ink); font-style: italic; }
.pl-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.pl-evidence-item { margin: 0; }
.pl-evidence-item { cursor: zoom-in; }
.pl-evidence-item img, .pl-evidence-ph {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 150px; /* keeps the card inside its tile, captions included */
  object-fit: contain; /* the whole image, always — a cropped map loses its labels */
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
}
.pl-evidence-ph {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 8px;
}
/* zoomed: the figure takes the whole tile until clicked again */
.pl-outro-card .pl-evidence-item.is-zoomed {
  position: fixed; /* escapes the card's overflow; positioned by the player */
  z-index: 50;
  margin: 0;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  cursor: zoom-out;
}
.pl-outro-card .pl-evidence-item.is-zoomed img { max-height: none; height: calc(100% - 26px); width: 100%; object-fit: contain; aspect-ratio: auto; }
.pl-evidence-item figcaption { margin-top: 4px; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.05em; line-height: 1.35; color: var(--muted); }

/* timeline */
.pl-timeline { padding: 10px 0 6px; cursor: pointer; outline-offset: 4px; touch-action: none; }
.pl-timeline:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.pl-tl-track {
  position: relative;
  height: 22px;
}
.pl-tl-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: var(--surface-2);
  border-radius: 999px;
}
.pl-tl-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: 999px;
  pointer-events: none;
}
.pl-tl-ticks { position: absolute; inset: 0; pointer-events: none; }
.pl-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: var(--muted);
  border-radius: 1px;
}
.pl-tick--llm, .pl-tick--info { height: 7px; opacity: 0.55; }
.pl-tick--tool { background: var(--accent); }
.pl-tick--incident { background: var(--critical); height: 18px; width: 3px; }
.pl-tick--result { background: var(--good); height: 14px; }
.pl-tick--fam-move { background: var(--tool-move); }
.pl-tick--fam-look { background: var(--tool-look); }
.pl-tick--fam-memory { background: var(--tool-memory); }
.pl-tick--fam-plan { background: var(--tool-plan); }
.pl-tick--fam-speak { background: var(--tool-speak); }
.pl-tl-cut { /* time removed here (a declined step, an idle wait) */
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 5px;
  transform: translateX(-50%);
  background: var(--muted);
  opacity: 0.7;
}
.pl-tl-playhead {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 20px;
  transform: translate(-50%, -50%);
  background: var(--ink);
  border-radius: 2px;
  pointer-events: none;
}

/* transport */
.pl-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-btn {
  width: 34px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
}
.pl-btn:hover { border-color: var(--muted); }
.pl-btn svg { width: 14px; height: 14px; }
.pl-btn--speed { width: auto; padding: 0 10px; font-family: var(--font-mono); font-size: 0.72rem; }
.pl-btn--layout { width: auto; padding: 0 10px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; }
.pl-clock { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-source {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
}

/* Recorded mission highlights: a compact table of contents for the replay. */
.pl-highlights {
  margin: 16px 0;
}
.pl-highlights-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 12px; }
.pl-highlights-heading { color: var(--ink); font-size: 0.84rem; font-weight: 500; }
.pl-highlights-hint { color: var(--muted); font-size: 0.75rem; }
.pl-share {
  margin-left: auto;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: transparent;
  color: var(--accent-text);
  font: 0.68rem var(--font-mono);
  cursor: pointer;
}
.pl-share:hover { border-color: var(--accent); background: var(--accent-soft); }
.pl-highlight-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.pl-highlight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.pl-highlight:hover { background: var(--surface-2); border-color: var(--muted); }
.pl-highlight[aria-current] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.pl-highlight-marker { display: flex; justify-content: space-between; gap: 8px; width: 100%; font: 0.62rem var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.pl-highlight[aria-current] .pl-highlight-number { color: var(--accent-text); }
.pl-highlight-title { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; line-height: 1.4; }
.pl-highlight-description { margin: 12px 0 0; min-height: 2.8em; color: var(--ink-2); font-size: 0.78rem; line-height: 1.4; }
.pl-share-status { display: block; color: var(--accent-text); font-size: 0.75rem; }
.pl-share-status:empty { display: none; }
.pl-share-link { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px; border: 1px solid var(--accent); background: var(--surface); color: var(--ink); font: 0.75rem var(--font-mono); }
.pl-share-link[hidden] { display: none; }
.pl-highlight:focus-visible, .pl-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .pl-highlight-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-highlights-hint { display: none; }
  .pl-highlight-description { min-height: 4.2em; }
}
@media (prefers-reduced-motion: reduce) { .pl-highlight { transition: none; } }

/* ── Overview ─────────────────────────────────────────────────────────── */

.authors { color: var(--ink); font-size: 1rem; }
.authors sup { color: var(--muted); font-size: 0.7em; }
.affiliations { color: var(--muted); font-size: 0.85rem; white-space: pre-wrap; }
.authors-note { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }

.contributions { padding-left: 1.2em; }
.contributions li { margin-bottom: 0.6em; }
.contributions li::marker { color: var(--accent); }

/* ── Method ───────────────────────────────────────────────────────────── */

.method-figure {
  margin: 30px 0 26px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.method-figure svg { display: block; width: 100%; height: auto; }
.diag-box { fill: var(--surface-2); stroke: var(--hairline); rx: 8; }
.diag-box--accent { fill: var(--accent-soft); stroke: var(--accent); }
.diag-box--contract { fill: transparent; stroke: var(--accent); stroke-dasharray: 5 4; }
.diag-label { fill: var(--ink); font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.diag-sub { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.diag-arrow { stroke: var(--muted); stroke-width: 1.5; fill: none; marker-end: url(#arrowhead); }
.diag-arrowhead { fill: var(--muted); }
figcaption { color: var(--muted); font-size: 0.82rem; margin-top: 12px; text-align: center; }

.step-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
}
.step-num { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent); margin-bottom: 8px; }
.step-title { font-size: 1rem; margin-bottom: 6px; }
.step-text { font-size: 0.85rem; color: var(--ink-2); margin: 0; }
.method-control-note {
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: 0.85rem;
  line-height: 1.65;
}

/* ── Atomic-instruction dataset showcase ─────────────────────────────── */

.subhead {
  font-size: 1.2rem;
  margin: 56px 0 12px;
}

.atoms-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-card);
}
.atoms-stage { position: relative; }
.atoms-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  background: #000;
}
.atoms-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin-top: 8px;
}
.atoms-mode { display: flex; justify-content: end; gap: 4px; margin-left: auto; }
.atoms-mode-btn, .atoms-play {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
}
.atoms-play { min-width: 58px; }
.atoms-mode-btn.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.atoms-mode-btn:disabled, .atoms-play:disabled { opacity: 0.4; cursor: default; }
.atoms-controls :is(button, input):focus-visible, .atoms-filters button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.atoms-scrubber { flex-basis: 100%; display: flex; align-items: center; gap: 10px; }
.atoms-scrubber input { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.atoms-scrubber input:disabled { cursor: default; }
.atoms-time { flex: none; font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.atoms-filters .filter-chip { min-height: 44px; max-width: 100%; white-space: normal; }
.atoms-scene {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--muted);
}
.atoms-status {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(13, 13, 13, 0.8);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.4;
}
.atoms-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.atoms-instruction {
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin: 0 0 14px;
}
.atoms-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.atoms-chip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.atoms-chip--dim { background: var(--surface-2); color: var(--muted); }
.atoms-legend {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
  margin: 0;
}

.atoms-rail {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.atoms-thumb {
  position: relative;
  flex: none;
  width: 178px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.atoms-thumb-cat {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(13, 13, 13, 0.65);
  color: #fff;
  max-width: calc(100% - 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atoms-thumb:hover { border-color: var(--muted); }
.atoms-thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.atoms-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.atoms-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.atoms-thumb-cap {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  padding: 6px 9px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atoms-thumb.is-active .atoms-thumb-cap { color: var(--ink-2); }

@media (max-width: 880px) {
  .atoms-featured { grid-template-columns: 1fr; }
}

/* ── Results ──────────────────────────────────────────────────────────── */

.placeholder-flag[hidden] { display: none; }
.placeholder-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px dashed var(--muted);
  color: var(--muted);
  margin-left: 10px;
  vertical-align: middle;
}

.findings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0 40px;
}
.finding-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.finding-index { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); margin-bottom: 12px; }
.finding-value { font-size: 2.5rem; font-weight: 700; color: var(--ink); line-height: 1; }
.finding-unit { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-left: 8px; }
.finding-title { font-size: 0.98rem; margin: 12px 0 6px; }
.finding-text { font-size: 0.85rem; margin: 0; }

.chart { position: relative; margin: 10px 0 8px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: 18px; padding: 4px 2px 10px; font-size: 0.8rem; color: var(--ink-2); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.chart-swatch { width: 12px; height: 12px; border-radius: 3px; }
.chart-swatch--s1, .chart-key--s1 { background: var(--s1); }
.chart-swatch--s2, .chart-key--s2 { background: var(--s2); }
.chart-swatch--s3, .chart-key--s3 { background: var(--s3); }
.chart-grid { stroke: var(--grid); stroke-width: 1; }
.chart-baseline { stroke: var(--baseline); stroke-width: 1; }
.chart-tick { fill: var(--muted); font-family: var(--font-sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-xlabel { fill: var(--muted); font-family: var(--font-sans); font-size: 11.5px; }
.chart-value { fill: var(--ink-2); font-family: var(--font-sans); font-size: 11px; font-weight: 500; }
.chart-bar--s1 { fill: var(--s1); }
.chart-bar--s2 { fill: var(--s2); }
.chart-bar--s3 { fill: var(--s3); }
.chart-hit { fill: transparent; cursor: pointer; }
.chart-group:focus { outline: none; }
.chart-group:focus-visible .chart-hit { stroke: var(--accent); stroke-width: 1.5; }
.chart-group.is-hover .chart-bar { filter: brightness(1.14); }
.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 9px 12px;
  pointer-events: none;
  z-index: 5;
  min-width: 150px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.chart-tooltip-head { font-size: 0.74rem; color: var(--muted); margin-bottom: 6px; }
.chart-tooltip-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.chart-tooltip-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tooltip-name { color: var(--muted); }
.chart-key { width: 10px; height: 3px; border-radius: 2px; }

.results-table-wrap { overflow-x: auto; margin-top: 26px; }
table.results {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
table.results th, table.results td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
table.results thead th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
}
table.results .col-num { text-align: right; font-variant-numeric: tabular-nums; }
table.results tbody th { color: var(--ink); font-weight: 500; text-align: left; }
table.results td.is-best { color: var(--ink); font-weight: 700; }

/* ── Platform ─────────────────────────────────────────────────────────── */

.platform-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 34px;
  align-items: start;
}
.specs { margin: 0; }
.spec-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.88rem;
}
.spec-row dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.spec-row dd { margin: 0; color: var(--ink); }

/* ── 3D splat viewer (Platform) ───────────────────────────────────────── */
/* Transparent stage: the scan floats on the page; its carpet disc grounds it. */

.splat-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-top: 26px;
}
.splat-mount { position: absolute; inset: 0; z-index: 1; cursor: grab; }
.splat-mount:active { cursor: grabbing; }
.splat-mount canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.splat-poster {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
}
.splat-poster-title { font-family: var(--font-sans); font-weight: 500; font-size: 1rem; }
.splat-poster-sub { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; color: var(--muted); }
.splat-poster:disabled { cursor: progress; }
.splat-hint {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  pointer-events: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 78%, transparent);
  backdrop-filter: blur(4px);
}
.splat-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.splat-line { stroke: var(--muted); stroke-width: 1.2; }
.splat-label {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  box-shadow: 0 2px 10px rgba(11, 11, 11, 0.08);
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.figure-placeholder {
  margin-top: 26px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ── Limitations / BibTeX / footer ────────────────────────────────────── */

.limitations-list { padding-left: 1.2em; }
.limitations-list li { margin-bottom: 0.55em; }
.limitations-list li::marker { color: var(--muted); }

.bibtex-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.bibtex-box pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
.bibtex-box code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); }
.bibtex-copy {
  align-self: flex-end;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 5px 12px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  cursor: pointer;
}
.bibtex-copy:hover { border-color: var(--muted); }

footer.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 44px 0 60px;
  color: var(--muted);
  font-size: 0.82rem;
}
footer.site-footer .footer-live {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .step-cards { grid-template-columns: repeat(2, 1fr); }
  .findings { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .pl-body { grid-template-columns: 1fr; }
  .pl-lane-label { font-size: 0.5rem; }
  .pl-log { height: auto; min-height: 0; }
  /* tall SLAM maps need height, not width, on a phone */
  .pl-canvas { aspect-ratio: 1 / 1; }
  .pl-log-scroll { max-height: 240px; }
  .pl-source { display: none; }
  .step-cards { grid-template-columns: 1fr; }

  /* diagrams and charts keep a legible size and scroll sideways instead
     of shrinking into noise */
  .method-figure { overflow-x: auto; }
  .method-figure svg { min-width: 700px; }
  .chart { overflow-x: auto; }
  .chart-svg { min-width: 560px; }

  .splat-stage { aspect-ratio: 4 / 3; }
  .splat-label { max-width: 48%; }
}

/* Three featured recordings share one row on a wide screen. */
@media (min-width: 1100px) {
  #video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Editorial captions stay below the footage at every text size. */
.pl-caption-track { padding: 0 16px 10px; min-height: 4rem; }
.pl-caption-track .pl-speech-item { opacity: 1; transform: none; box-shadow: none; backdrop-filter: none; flex-wrap: wrap; }
.pl-caption-track .pl-speech-text { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.pl-root .pl-highlight-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); }
.pl-highlight-title { overflow-wrap: anywhere; }