/* Fonts are served by the main site from /fonts/ (static/fonts in Hugo).
   local() is a fallback for previewing the page straight from disk. */
@font-face {
  font-family: 'LibertinusSans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/LibertinusSans-Regular.woff2') format('woff2'), local('Libertinus Sans');
}
@font-face {
  font-family: 'LibertinusSans';
  font-style: normal;
  font-weight: 600 700;   /* one bold file serves both the 600 and bold weights used here */
  font-display: swap;
  src: url('/fonts/LibertinusSans-Bold.woff2') format('woff2'), local('Libertinus Sans Bold');
}
@font-face {
  font-family: 'LibertinusSans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/LibertinusSans-Italic.woff2') format('woff2'), local('Libertinus Sans Italic');
}
@font-face {
  font-family: 'UbuntuMono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/UbuntuMono-Regular.woff2') format('woff2'), local('Ubuntu Mono');
}
@font-face {
  font-family: 'UbuntuMono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/UbuntuMono-Bold.woff2') format('woff2'), local('Ubuntu Mono Bold');
}
@font-face {
  font-family: 'UbuntuMono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/UbuntuMono-Italic.woff2') format('woff2'), local('Ubuntu Mono Italic');
}
@font-face {
  font-family: 'UbuntuMono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/UbuntuMono-BoldItalic.woff2') format('woff2'), local('Ubuntu Mono Bold Italic');
}

:root {
  --font-sans: 'LibertinusSans', Georgia, serif;
  --font-mono: 'UbuntuMono', 'Courier New', monospace;
  color-scheme: dark;
  --grain: rgba(235,219,178,0.05);
  --glow-1: rgba(214,89,14,0.07);
  --glow-2: rgba(104,157,106,0.05);
  --shadow: rgba(0,0,0,0.5);
  --purple: #b16286;
  --purple-b: #d3869b;
  /* text drawn in the accent colour, and the heatmap fill + its strong-cell text */
  --ink-accent: var(--yellow-b);
  --heat: var(--yellow-b);
  --heat-ink: var(--bg);
  --bg: #1d2021;
  --bg1: #282828;
  --bg2: #3c3836;
  --bg3: #504945;
  --fg: #ebdbb2;
  --fg-dim: #a89984;
  --gray: #928374;
  --yellow: #d79921;
  --yellow-b: #fabd2f;
  --orange: #d65d0e;
  --orange-b: #fe8019;
  --aqua: #689d6a;
  --aqua-b: #8ec07c;
  --red: #cc241d;
  --red-b: #fb4934;
  --blue: #458588;
  --blue-b: #83a598;
  --green: #98971a;
  --green-b: #b8bb26;
}

/* Gruvbox light. The "-b" accents use gruvbox's darker faded tones here,
   so they keep enough contrast against the cream background. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f9f5d7;
  --bg1: #f2e5bc;
  --bg2: #ebdbb2;
  --bg3: #d5c4a1;
  --fg: #3c3836;
  --fg-dim: #665c54;
  --gray: #7c6f64;
  --yellow: #d79921;
  --yellow-b: #b57614;
  --orange: #d65d0e;
  --orange-b: #af3a03;
  --aqua: #689d6a;
  --aqua-b: #427b58;
  --red: #cc241d;
  --red-b: #9d0006;
  --blue: #458588;
  --blue-b: #076678;
  --green: #98971a;
  --green-b: #79740e;
  --grain: rgba(60,56,54,0.06);
  --glow-1: rgba(214,93,14,0.06);
  --glow-2: rgba(104,157,106,0.08);
  --shadow: rgba(60,56,54,0.2);
  --purple: #b16286;
  --purple-b: #8f3f71;
  --ink-accent: var(--orange-b);
  --heat: var(--yellow);
  --heat-ink: var(--fg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); height: 100%;}
html, body { overflow-x: hidden; max-width: 100%; }

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.5;
  /* faint grain + a soft off-center glow, built from gradients only */
  background-image:
    radial-gradient(circle at 1px 1px, var(--grain) 1px, transparent 0),
    radial-gradient(ellipse 900px 500px at 78% -10%, var(--glow-1), transparent 60%),
    radial-gradient(ellipse 700px 500px at 5% 30%, var(--glow-2), transparent 65%);
  background-size: 3px 3px, auto, auto;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat;
  min-height: 100%;
  display: flex; 
  flex-direction: column;
}

.mono { font-family: var(--font-mono); }

a { color: var(--green); }
a:hover { color: var(--aqua); }

/* subtle CRT scanline + vignette overlay */
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.10) 0px,
      rgba(0,0,0,0.10) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
  z-index: 999;
  mix-blend-mode: multiply;
}

/* ============ NAV ============ */
header {
  border-bottom: 1px solid var(--bg3);
  padding: 18px 48px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(2px);
}
.logo {
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--orange-b);
  text-decoration: none;
}
.logo span { color: var(--gray); }

/* ============ SIDEBAR NAV ============ */
.sidebar-nav {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 240px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-right: 1px solid var(--bg3);
  padding: 80px 24px 24px;
  z-index: 15;
  backdrop-filter: blur(2px);
}

.sidebar-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

.sidebar-nav a {
  color: var(--fg-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-nav a:hover, 
.sidebar-nav a:focus-visible {
  color: var(--aqua-b);
  border-color: var(--aqua-b);
  outline: none;
}
.sidebar-nav a.active {
  color: var(--aqua-b);
  border-color: var(--aqua-b);
}

/* ============ HERO ============ */
.hero {
  padding: 90px 48px 70px;
  max-width: 1180px;
  margin: 0 auto;
/*  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px; */ 
  display: flex; 
  flex-direction: column;
  align-items: center;
}
.hero-cb {
    line-height: normal;
    font-size: 1rem;
    transform: translateZ(0);
    color: transparent;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 860px ) {
    .hero-cb {
        font-size: 13px;
        line-height: 1.1;
    }
}
@media (max-width: 490px ) {
    .hero-cb {
        font-size: 7px;
        line-height: 1.1;
    }
}

.cb-y { color:#fabd2f; }
.cb-o { color:#fe8019; }
.cb-g { color:#b8bb26; }
.hero-tag {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--orange-b);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--orange-b);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--orange-b);
  animation: blink 1.6s infinite steps(2);
}
@keyframes blink { 50% { opacity: 0.25; } }

h1 {
  font-size: clamp(28px, 6vw, 54px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: var(--fg);
}

h2 { color: var(--green-b);}
h3 { color: var(--aqua-b);}
h4 { color: var(--blue-b);}

h1 em {
  font-style: italic;
  color: var(--aqua-b);
}
.hero p.lede {
  margin-top: 22px;
  font-size: 18px;
  color: var(--fg-dim);
  max-width: 46ch;
}
.hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 16px;
}
.btn {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 22px;
  border: 1px solid var(--yellow-b);
  color: var(--ink-accent);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: var(--yellow-b); color: var(--bg); }
.btn.ghost {
  border-color: var(--bg3);
  color: var(--fg-dim);
}
.btn.ghost:hover { background: var(--bg2); color: var(--fg); }

/* --- signature: loss curve scope panel --- */
.scope {
  border: 1px solid var(--bg3);
  background: var(--bg1);
  padding: 18px 20px 14px;
  position: relative;
}
.scope-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.scope-head .live { color: var(--aqua-b); }
svg.loss { display: block; width: 100%; height: auto; }
.scope-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--gray);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--bg3);
}
.scope-foot b { color: var(--fg); font-weight: normal; }

/* ============ SECTION LABEL ============ */
.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 48px;
  border-top: 1px solid var(--bg2);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--blue-b);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section h2 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 40px;
  max-width: 30ch;
}

/* ============ LOGBOOK ============ */
.logbook { display: flex; flex-direction: column; }
.entry {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid var(--bg2);
}
.entry:last-child { border-bottom: 1px solid var(--bg2); }
.entry-id {
  font-family: var(--font-sans);
  color: var(--orange-b);
  font-size: 14px;
}
.entry-id .date {
  display: block;
  color: var(--gray);
  margin-top: 4px;
  font-size: 13px;
}
.entry h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.entry p { color: var(--fg-dim); max-width: 62ch; }
.tags {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tags span {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
/* ============ TAG FILTER BAR ============ */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.tag-filter-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--bg3);
  color: var(--fg-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tag-filter-btn[data-tag="all"] {
  border-color: var(--fg-dim);
  color: var(--fg-dim);
}
.tag-filter-btn[data-tag="all"].active {
  background: var(--fg-dim);
  color: var(--bg);
}
.tag-filter-btn:not([data-tag="all"]) {
  border-color: currentColor;
}
.tag-filter-btn:not([data-tag="all"]).active {
  background: color-mix(in srgb, currentColor 22%, transparent);
}
.entry.is-hidden { display: none; }
/* ============ METRICS STRIP ============ */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--bg2);
}
.metric {
  padding: 26px 24px;
  border-left: 1px solid var(--bg2);
}
.metric:first-child { border-left: none; }
.metric .pre {
  display: flex;
  align-items: flex-end;
  min-height: 32px;
  line-height: 1.4;
}
.metric .post {margin-top: 6px; }
.metric .ref {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
}
.metric .ref a {
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px dotted var(--bg3);
}
.metric .ref a:hover { color: var(--aqua-b); border-color: var(--aqua-b); }
.metric .num {
  font-family: var(--font-mono);
  font-size: 30px;
  color: var(--ink-accent);
  margin: 6px 0;
  line-height: 1.1;
}
.metric .label {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ============ SINGLE ENTRY BODY ============ */
.entry-body p { margin-bottom: 18px; }
.entry-body a { color: var(--aqua-b); }

/* ============ FOOTER ============ */
footer {
  border-top: 1px solid var(--bg2);
  padding: 36px 48px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--gray);
}
footer a { color: var(--gray); text-decoration: none; }
footer a:hover { color: var(--aqua-b); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 50px; }
  h1 { font-size: 38px; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-left: none; border-top: 1px solid var(--bg2); }
  .metric:first-child { border-top: none; }
  .entry { grid-template-columns: 1fr; gap: 8px; }
  header { padding: 16px 24px; }
  .section, .hero { padding-left: 24px; padding-right: 24px; }
  nav ul { gap: 18px; }
  
}

/* ============ PUBLICATIONS ============ */ 
.publications-list { 
  min-width: 100%;
}
.publications-list li {
  margin-bottom: 14px;
}
.publications-list a {
  text-decoration: none;
  color: inherit;
}
.publications-list em:nth-of-type(1) {
  font-style: italic;
  font-weight: bold;
  color: var(--blue-b);
}
.publications-list em:nth-of-type(2) {
  font-style: italic;
  font-weight: normal;
  color: var(--aqua-b);
}

main { 
  flex: 1 0 auto; 
  margin-left: var(--nav-w);
  padding-top: 80px;
  transition: margin-left 0.2s ease;
}

/* ============ BURGER MENU ============ */
.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 20;
  margin: 0;
  line-height: 0;
  flex-shrink: 0;
  align-self: center;
}
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--fg);
  transition: transform 0.2s, opacity 0.2s;
}
.burger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.burger.is-open span:nth-child(2) {
  opacity: 0;
}
.burger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============ CODE BLOCKS ============ */
.entry-body pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--bg3);
  background: var(--bg2);
  margin-bottom: 12px;
}
.entry-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.entry-body p code {
  background: var(--bg2);
  padding: 2px 6px;
  border: 1px solid var(--bg3);
}

/* ============ PUBLICATION ABSTRACTS ============ */
.publications-list summary {
  cursor: pointer;
  color: var(--gray);
  font-family: var(--font-sans);
  font-size: 13px;
  list-style: none;
  margin-top: 6px;
}
.publications-list summary::-webkit-details-marker { display: none; }
.publications-list summary::before {
  content: "▸ abstract";
  color: var(--aqua-b);
}
.publications-list details[open] summary::before {
  content: "▾ abstract";
}
.publications-list details {
  margin-top: 4px;
  margin-bottom: 10px;
}
.publications-list details p {
  color: var(--fg-dim);
  font-size: 14px;
  margin-top: 8px;
  padding-left: 14px;
  border-left: 2px solid var(--bg3);
}

/* Layout + spacing only — colors, fonts, and borders all come from
   style.css's existing tokens (--bg*, --fg*, --*-b, .mono, .section, .tags)
   so this stays in sync if the palette ever changes. */

.dl-lede {
  color: var(--fg-dim);
  max-width: 60ch;
  margin-bottom: 18px;
}

.dl-meta {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--gray);
  margin-bottom: 28px;
}

.dl-status-text { color: var(--gray); }

.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 680px) {
  .dl-grid { grid-template-columns: 1fr; }
}

.dl-past-section {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--bg2);
}
.dl-past-heading {
  font-size: 15px;
  margin-bottom: 16px;
}
.dl-grid-past .dl-box { opacity: 0.6; }
.dl-grid-past .dl-box[open] { opacity: 1; }

.dl-box {
  border: 1px solid var(--bg3);
  background: var(--bg1);
  padding: 16px 18px;
}

.dl-box summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dl-box summary::-webkit-details-marker { display: none; }
.dl-name::before {
  content: "▸";
  color: var(--aqua-b);
  margin-right: 8px;
}
.dl-box[open] .dl-name::before { content: "▾"; }

.dl-box-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.dl-name {
  color: var(--aqua-b);
  font-weight: 600;
  font-size: 16px;
}
.dl-year {
  color: var(--gray);
  font-size: 12px;
  margin-left: 6px;
}

.dl-ranks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dl-rank {
  font-size: 12px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.dl-date {
  font-size: 13px;
  color: var(--fg-dim);
}

.dl-countdown {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.dl-dot[data-status="soon"] { background: var(--orange-b); animation: blink 1.6s infinite steps(2); }
.dl-dot[data-status="ok"] { background: var(--yellow-b); }
.dl-dot[data-status="closed"] { background: var(--gray); }

.dl-box[data-status="soon"] .dl-countdown { color: var(--orange-b); }
.dl-box[data-status="ok"] .dl-countdown { color: var(--yellow-b); }
.dl-box[data-status="closed"] .dl-countdown { color: var(--gray); }

.dl-box-body {
  margin-top: 14px;
}

.dl-sub-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-dim);
  padding: 7px 0;
  border-top: 1px dashed var(--bg3);
}
.dl-sub-item:first-child { border-top: 0; }

.dl-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px dotted var(--bg3);
}
.dl-link:hover { color: var(--aqua-b); border-color: var(--aqua-b); }

.dl-legend {
  margin-top: 20px;
  font-size: 12px;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dl-legend .dl-dot { margin-left: 10px; }
.dl-legend .dl-dot:first-child { margin-left: 0; }

/* ============ HIDDEN CLASS ============ */
.hidden {
  display: none !important;
}

/* ============ TOKENIZATION DEMO ============ */
.tokenization-demo {
  margin-top: 24px;
}

#input-text {
  width: 100%;
  min-height: 100px;
  padding: 16px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  resize: vertical;
  margin-bottom: 24px;
}

#input-text:focus {
  outline: none;
  border-color: var(--aqua-b);
}

.tokenization-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.result-row {
  padding: 16px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
}

.result-row h3 {
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--aqua-b);
}

.tokens-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.token-chip {
  padding: 6px 12px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.token-chip:hover {
  background: var(--bg3);
  color: var(--fg);
  border-color: var(--aqua-b);
}

/* ============ TF-IDF DEMO ============ */
.tfidf-demo {
  margin-top: 24px;
}

#corpus-input {
  width: 100%;
  min-height: 150px;
  padding: 16px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  resize: vertical;
  margin-bottom: 24px;
}

#corpus-input:focus {
  outline: none;
  border-color: var(--aqua-b);
}

.tfidf-options {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: -12px 0 20px;
  font-size: 13px;
  color: var(--fg-dim);
}
.tfidf-options label { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tfidf-options input { accent-color: var(--aqua-b); }

.tfidf-results h3 {
  margin-bottom: 10px;
  color: var(--aqua-b);
}

.heatmap {
  overflow-x: auto;
}

.tfidf-table {
  border-collapse: collapse;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tfidf-table th,
.tfidf-table td {
  padding: 3px 8px;
  text-align: center;
  border: 1px solid var(--bg2);
  white-space: nowrap;
}

.tfidf-table thead th {
  background: var(--bg);
  color: var(--aqua-b);
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 3;
}

.term-cell {
  text-align: left !important;
  color: var(--fg);
  background: var(--bg);
  position: sticky;
  left: 0;
  z-index: 2;
}
.tfidf-table thead .term-cell { z-index: 4; }

.tfidf-cell {
  min-width: 42px;
  color: var(--fg);
  cursor: default;
}
.tfidf-cell.is-absent { color: var(--bg3); }
.tfidf-cell:not(.is-absent):hover { outline: 1px solid var(--aqua-b); outline-offset: -1px; }

.idf-col {
  color: var(--gray);
  background: var(--bg);
}
.tfidf-table thead .idf-col { color: var(--gray); }
.tfidf-table tbody tr td.idf-col:nth-last-child(2) { border-left: 2px solid var(--bg3); }
.tfidf-table thead th.idf-col:nth-last-child(2) { border-left: 2px solid var(--bg3); }

/* ============ TF-IDF TOOLTIP ============ */
.tfidf-tooltip {
  position: fixed;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  border: 1px solid var(--bg3);
  padding: 16px;
  border-radius: 4px;
  z-index: 1000;
  max-width: 300px;
  display: none;
  backdrop-filter: blur(2px);
  box-shadow: 0 0 15px var(--shadow);
}

.tooltip-content h4 {
  margin-bottom: 8px;
  color: var(--aqua-b);
  font-size: 16px;
}

.tooltip-content p {
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
}

.tooltip-content strong {
  color: var(--ink-accent);
}

/* ============ NAIVE BAYES DEMO ============ */
.nb-demo { margin-top: 24px; display: flex; flex-direction: column; }

.nb-label {
  font-size: 13px;
  color: var(--aqua-b);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.nb-label span { color: var(--gray); }

.nb-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
  margin-bottom: 20px;
  white-space: pre;
  overflow-x: auto;
}
.nb-textarea.nb-test { white-space: pre-wrap; }
.nb-textarea:focus { outline: none; border-color: var(--aqua-b); }

.nb-options { margin-top: -8px; }
.nb-options input[type="range"] { width: 110px; vertical-align: middle; }
#nb-alpha-value { color: var(--fg); min-width: 3ch; }

.nb-summary {
  font-size: 12px;
  color: var(--gray);
  margin: -8px 0 22px;
}

.nb-demo .result-row { margin-bottom: 16px; }
.nb-h-note { font-size: 12px; color: var(--gray); font-weight: normal; margin-left: 8px; }

/* posterior bars */
.nb-posteriors { display: flex; flex-direction: column; gap: 8px; }
.nb-post {
  display: grid;
  grid-template-columns: 140px 1fr 56px;
  grid-template-areas: "label track pct" ". meta meta";
  align-items: center;
  column-gap: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
}
.nb-post-label { grid-area: label; color: var(--c); }
.nb-post.is-top .nb-post-label { font-weight: bold; }
.nb-post-track { grid-area: track; height: 10px; background: var(--bg2); }
.nb-post-bar {
  display: block;
  height: 100%;
  background: var(--c);
  transition: width 0.2s ease;
}
.nb-post:not(.is-top) .nb-post-bar { opacity: 0.55; }
.nb-post-pct { grid-area: pct; text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; }
.nb-post-meta { grid-area: meta; font-size: 12px; color: var(--gray); }

/* evidence table (builds on .tfidf-table) */
.nb-cell { color: var(--fg-dim); min-width: 72px; }
.nb-cell.is-smoothed { color: var(--bg3); }
.nb-cell.is-best {
  color: var(--c);
  font-weight: bold;
  background: color-mix(in srgb, var(--c) 14%, var(--bg1));
}

.nb-unknown { font-size: 12px; color: var(--gray); margin-top: 10px; }
.nb-unknown:empty { display: none; }
.nb-empty { font-size: 13px; color: var(--gray); }

@media (max-width: 680px) {
  .nb-post { grid-template-columns: 96px 1fr 48px; }
}

/* ============ SVM DEMO ============ */
.svm-demo { margin-top: 24px; }

.svm-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.svm-group { display: flex; flex-wrap: wrap; gap: 6px; }

.svm-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--bg3);
  color: var(--fg-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.svm-btn:hover { color: var(--fg); border-color: var(--fg-dim); }
.svm-btn.active { color: var(--fg); border-color: var(--aqua-b); background: color-mix(in srgb, var(--aqua-b) 14%, transparent); }
.svm-btn:focus-visible { outline: 1px solid var(--aqua-b); outline-offset: 2px; }

.svm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.svm-dot-a { background: var(--orange-b); }
.svm-dot-b { background: var(--aqua-b); }

.svm-controls { margin: 0 0 16px; align-items: center; }
.svm-controls label[hidden] { display: none; }
.svm-controls input[type="range"] { width: 120px; vertical-align: middle; }
.svm-select {
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--bg1);
  color: var(--fg);
  border: 1px solid var(--bg3);
  padding: 3px 6px;
  margin-left: 4px;
}
.svm-val { color: var(--fg); display: inline-block; min-width: 4ch; }

.svm-canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: manipulation;
  border: 1px solid var(--bg2);
}
.svm-legend { font-size: 12px; color: var(--gray); margin-top: 10px; line-height: 1.6; }

/* ============ WORD SIMILARITY DEMO ============ */
.ws-demo { margin-top: 24px; }

.ws-corpus-box { margin-bottom: 18px; }
.ws-corpus-box summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--aqua-b);
  margin-bottom: 8px;
  list-style: none;
}
.ws-corpus-box summary::-webkit-details-marker { display: none; }
.ws-corpus-box summary::before { content: "▸ "; }
.ws-corpus-box[open] summary::before { content: "▾ "; }
.ws-corpus-box summary span { color: var(--gray); }
.ws-edit { font-size: 12px; }
.ws-corpus-box textarea { margin-top: 6px; }

.ws-controls { margin: 0 0 18px; align-items: center; }
.ws-controls input[type="range"] { width: 110px; vertical-align: middle; }

.ws-inputs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ws-input {
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 8px 12px;
  width: 170px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  color: var(--fg);
}
.ws-input:focus { outline: none; border-color: var(--aqua-b); }
.ws-vs { color: var(--gray); font-size: 14px; }

.ws-pairs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 22px;
  font-size: 12px;
  color: var(--gray);
}
.ws-pairs .svm-btn { font-size: 12px; padding: 3px 9px; }

.ws-results { display: flex; flex-direction: column; gap: 16px; }

.ws-score {
  padding: 16px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
}
.ws-score-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-family: var(--font-sans);
}
.ws-pair-label em { color: var(--aqua-b); font-style: normal; }
.ws-score-num { font-size: 28px; color: var(--ink-accent); font-variant-numeric: tabular-nums; }
.ws-shared { font-family: var(--font-sans); font-size: 12px; color: var(--gray); margin-top: 10px; }

.ws-bar { display: block; height: 8px; background: var(--bg2); flex: 1; min-width: 40px; }
.ws-bar span { display: block; height: 100%; background: var(--yellow-b); transition: width 0.2s ease; }

.ws-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 680px) { .ws-cols { grid-template-columns: 1fr; } }
.ws-col {
  padding: 14px 16px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
}
.ws-col h4 { font-size: 14px; font-weight: normal; color: var(--gray); margin-bottom: 10px; font-family: var(--font-sans); }
.ws-col h4 em { color: var(--aqua-b); font-style: normal; }
.ws-neighbours { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ws-neighbours li {
  display: grid;
  grid-template-columns: 11ch 1fr 5ch;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.ws-n-word { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-n-score { color: var(--fg-dim); text-align: right; font-variant-numeric: tabular-nums; }
.ws-neighbours .ws-bar span { background: var(--aqua-b); opacity: 0.8; }
.ws-missing { font-family: var(--font-sans); font-size: 13px; color: var(--gray); }
.ws-missing em { color: var(--orange-b); font-style: normal; }

/* ============ REGEX DEMO ============ */
.rx-demo { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }

.rx-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-presets .svm-btn { font-size: 12px; padding: 3px 9px; }

.rx-pattern-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  padding: 4px 12px;
  font-size: 13px;
  color: var(--fg-dim);
}
.rx-pattern-row:focus-within { border-color: var(--aqua-b); }
.rx-pattern-row label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.rx-pattern-row input[type="checkbox"] { accent-color: var(--aqua-b); }
.rx-slash { color: var(--gray); font-size: 18px; }
.rx-pattern {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--ink-accent);
  font-family: var(--font-mono);
  font-size: 17px;
  padding: 8px 0;
}
.rx-pattern:focus { outline: none; }

.rx-error { font-size: 13px; color: var(--red-b); margin-top: -8px; }
.rx-error:empty { display: none; }
.rx-note {
  font-size: 14px;
  color: var(--fg-dim);
  border-left: 2px solid var(--aqua-b);
  padding-left: 12px;
  margin-top: -4px;
}

.rx-preview {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rx-hit {
  background: color-mix(in srgb, var(--yellow-b) 28%, transparent);
  color: var(--fg);
  border-bottom: 2px solid var(--yellow-b);
  padding: 1px 0;
}
.rx-hit.rx-alt {
  background: color-mix(in srgb, var(--orange-b) 28%, transparent);
  border-bottom-color: var(--orange-b);
}
.rx-edit { margin-top: 12px; }
.rx-edit summary { cursor: pointer; font-size: 12px; color: var(--gray); list-style: none; }
.rx-edit summary::-webkit-details-marker { display: none; }
.rx-edit summary::before { content: "▸ "; }
.rx-edit[open] summary::before { content: "▾ "; }
.rx-edit textarea { margin: 8px 0 0; }

.rx-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .rx-cols { grid-template-columns: 1fr; } }
.rx-cols .result-row { margin: 0; }

.rx-explain { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.rx-explain li {
  display: grid;
  grid-template-columns: minmax(6ch, max-content) 1fr;
  gap: 12px;
  align-items: baseline;
  padding-left: calc(var(--d) * 18px);
  color: var(--fg-dim);
}
.rx-explain code {
  color: var(--ink-accent);
  background: var(--bg2);
  padding: 1px 6px;
  white-space: pre;
}

.rx-cheat { width: 100%; border-collapse: collapse; font-size: 13px; }
.rx-cheat td { padding: 4px 8px; border-top: 1px solid var(--bg2); color: var(--fg-dim); vertical-align: top; }
.rx-cheat tr:first-child td { border-top: none; }
.rx-cheat td:first-child { white-space: nowrap; width: 1%; }
.rx-cheat code { color: var(--ink-accent); }
.rx-cheat tbody tr { cursor: pointer; }
.rx-cheat tbody tr:hover td, .rx-cheat tbody tr:focus-visible td { background: var(--bg2); color: var(--fg); }
.rx-cheat tbody tr:focus-visible { outline: 1px solid var(--aqua-b); outline-offset: -1px; }
.rx-cheat tbody tr.active td { background: color-mix(in srgb, var(--aqua-b) 14%, transparent); color: var(--fg); }
.rx-cheat th { text-align: left; font-weight: normal; font-size: 12px; color: var(--gray); padding: 0 8px 6px; }
.rx-cheat td:last-child { white-space: nowrap; }

.rx-table td { text-align: left; }
.rx-none { color: var(--bg3); }

/* ============ WORD2VEC DEMO ============ */
.w2v-demo { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.w2v-analogy-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.w2v-label { font-size: 12px; color: var(--gray); }
.w2v-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .w2v-layout { grid-template-columns: 1fr; } }
.w2v-canvas { display: block; width: 100%; cursor: grab; touch-action: none; border: 1px solid var(--bg2); }
.w2v-canvas:active { cursor: grabbing; }
.w2v-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.w2v-legend label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.w2v-legend input { accent-color: var(--aqua-b); margin: 0; }

.w2v-info {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  padding: 14px 16px;
  font-size: 14px;
  min-height: 180px;
}
.w2v-info h4 { font-family: var(--font-sans); font-size: 13px; font-weight: normal; color: var(--gray); margin: 0 0 8px; }
.w2v-info h4 + ol + h4 { margin-top: 16px; }
.w2v-info h4 em, .w2v-eq em { color: var(--aqua-b); font-style: normal; }
.w2v-info h4 span { font-size: 12px; }
.w2v-info .ws-neighbours li { grid-template-columns: 12ch 1fr 4ch; }
.w2v-eq { font-family: var(--font-mono); font-size: 15px; color: var(--fg-dim); }
.w2v-eq strong { color: var(--ink-accent); }
.w2v-eq span { color: var(--gray); font-size: 13px; margin-left: 4px; }
.w2v-runners { font-family: var(--font-sans); font-size: 12px; color: var(--gray); margin-top: 6px; }
.w2v-note { color: var(--fg-dim); margin-top: 12px; line-height: 1.5; }
.w2v-note em { color: var(--ink-accent); font-style: normal; }
.w2v-hint { color: var(--gray); font-size: 14px; }

.w2v-reset {
  font-family: var(--font-sans);
  font-size: 12px;
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  letter-spacing: 1px;
  padding: 0;
}
.w2v-reset:hover { color: var(--aqua-b); }
.w2v-view { font-family: var(--font-sans); font-size: 12px; color: var(--gray); margin-top: 10px; }

.w2v-method {
  background: var(--bg1);
  border: 1px solid var(--bg3);
  padding: 12px 16px;
}
.w2v-method summary { cursor: pointer; font-size: 13px; color: var(--aqua-b); list-style: none; }
.w2v-method summary::-webkit-details-marker { display: none; }
.w2v-method summary::before { content: "▸ "; }
.w2v-method[open] summary::before { content: "▾ "; }
.w2v-method ol { margin: 14px 0 0 20px; display: flex; flex-direction: column; gap: 10px; color: var(--fg-dim); font-size: 14px; max-width: 75ch; }
.w2v-method strong { color: var(--fg); font-weight: 600; }
.w2v-method em { color: var(--ink-accent); }
.w2v-method p { margin-top: 12px; font-size: 14px; color: var(--gray); }
.w2v-method code { font-family: var(--font-mono); color: var(--fg-dim); background: var(--bg2); padding: 1px 5px; }

/* ============ MONO WHERE IT HELPS ============ */
/* Code, patterns and numbers that should line up stay monospaced */
.rx-explain code, .rx-cheat code, .nb-post-pct, .ws-score-num, .ws-n-score, .svm-val,
#nb-alpha-value, .dl-date { font-family: var(--font-mono); }

/* ============ THEME TOGGLE ============ */
.theme-toggle {
  font-family: var(--font-sans);
  font-size: 14px;
  background: none;
  border: 1px solid var(--bg3);
  color: var(--fg-dim);
  padding: 4px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--aqua-b); border-color: var(--aqua-b); outline: none; }
.theme-toggle svg { width: 14px; height: 14px; }

/* word pickers (combobox) */
.ws-combo { position: relative; }
.ws-input { padding-right: 30px; background-image: none; cursor: text; }
.ws-combo::after {
  content: "▾";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
  pointer-events: none;
  font-size: 13px;
}
.ws-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  box-shadow: 0 6px 18px var(--shadow);
  padding: 4px 0;
}
.ws-list li {
  padding: 5px 12px;
  font-size: 15px;
  color: var(--fg-dim);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.ws-list li[aria-selected="true"] { background: var(--bg2); color: var(--fg); }
.ws-list li:hover { color: var(--fg); }
.ws-alt { font-size: 12px; color: var(--gray); }
.ws-list .ws-none { cursor: default; color: var(--gray); font-size: 13px; }

/* ============ OVERVIEW ============ */
.ov-lede { color: var(--fg-dim); font-size: 18px; max-width: 64ch; margin: -16px 0 36px; }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .ov-grid { grid-template-columns: 1fr; } }
.ov-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.ov-card:hover, .ov-card:focus-visible {
  border-color: var(--aqua-b);
  background: color-mix(in srgb, var(--aqua-b) 6%, var(--bg1));
  color: var(--fg);
  outline: none;
}
.ov-num { font-family: var(--font-mono); font-size: 14px; color: var(--orange-b); padding-top: 3px; }
.ov-body { display: flex; flex-direction: column; gap: 6px; }
.ov-title { font-size: 20px; font-weight: 600; color: var(--aqua-b); }
.ov-text { color: var(--fg-dim); font-size: 15px; line-height: 1.5; }
.ov-tag { font-size: 13px; color: var(--gray); margin-top: 2px; }
.ov-go { color: var(--gray); font-size: 18px; transition: transform 0.15s, color 0.15s; }
.ov-card:hover .ov-go, .ov-card:focus-visible .ov-go { color: var(--aqua-b); transform: translateX(3px); }
.ov-foot { margin-top: 28px; font-size: 14px; color: var(--gray); max-width: 64ch; }

/* ============ EDITABLE AND CODE-LIKE TEXT ============ */
/* Anything you can type into, and readouts of tokens, stats or engine
   output, use the monospace font; prose, labels and buttons stay sans. */
#input-text, #corpus-input, .nb-textarea, .ws-input, .ws-list li,
.rx-preview, .rx-error, #rx-count,
.nb-summary, .nb-post-meta, .nb-unknown,
#svm-stats, #svm-status, #w2v-variance, #ws-corpus-count,
.ws-shared, .ws-n-word, .w2v-runners {
  font-family: var(--font-mono);
}
.rx-preview { font-size: 15px; line-height: 1.7; }
.ws-list .ws-none { font-family: var(--font-sans); }

/* ============ BM25 DEMO ============ */
.bm-demo { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.bm-query-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 18px;
  padding: 10px 14px;
  background: var(--bg1);
  border: 1px solid var(--bg3);
  color: var(--fg);
}
.bm-query-input:focus { outline: none; border-color: var(--aqua-b); }
.bm-demo .ws-pairs { margin: -4px 0 4px; }
.bm-demo .svm-btn.active { color: var(--fg); border-color: var(--aqua-b); background: color-mix(in srgb, var(--aqua-b) 14%, transparent); }

.bm-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; }
@media (max-width: 1000px) { .bm-top { grid-template-columns: 1fr; } }
.bm-top .result-row { margin: 0; }
.bm-slider { display: grid; grid-template-columns: 9ch 1fr 5ch; align-items: center; gap: 10px; font-size: 15px; margin-top: 6px; }
.bm-slider em { font-style: normal; color: var(--gray); font-size: 13px; display: block; }
.bm-slider input { width: 100%; accent-color: var(--aqua-b); }
.bm-hint { font-size: 13px; color: var(--gray); margin: 2px 0 12px; }
.bm-controls .svm-btn { margin-top: 4px; }

.bm-chart svg { display: block; width: 100%; height: auto; }
.bm-axis text { font-family: var(--font-sans); font-size: 11px; fill: var(--gray); }
.bm-axis line { stroke: var(--bg3); stroke-width: 1; }
.bm-axis .bm-grid { stroke: var(--bg2); }
.bm-line-tfidf, .bm-line-bm25, .bm-line-long { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.bm-line-tfidf { stroke: var(--blue-b); }
.bm-line-bm25 { stroke: var(--orange-b); }
.bm-line-long { stroke: var(--orange-b); stroke-dasharray: 5 4; opacity: 0.7; }
.bm-asym { stroke: var(--gray); stroke-dasharray: 2 4; }
.bm-asym-label { font-family: var(--font-mono); font-size: 11px; fill: var(--gray); }
.bm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--fg-dim); margin-top: 6px; }
.bm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bm-key { display: inline-block; width: 18px; height: 0; border-top: 2.2px solid; }
.bm-key.tfidf { border-color: var(--blue-b); }
.bm-key.bm25 { border-color: var(--orange-b); }
.bm-key.long { border-color: var(--orange-b); border-top-style: dashed; opacity: 0.7; }

.bm-summary { font-family: var(--font-mono); font-size: 13px; color: var(--gray); }
.bm-unknown { color: var(--orange-b); }

.bm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .bm-cols { grid-template-columns: 1fr; } }
.bm-col h3 { font-size: 16px; margin-bottom: 10px; color: var(--orange-b); }
.bm-col .bm-h-tfidf { color: var(--blue-b); }
.bm-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bm-row { background: var(--bg1); border: 1px solid var(--bg3); transition: border-color 0.15s; }
.bm-row.is-linked { border-color: var(--aqua-b); }
.bm-head {
  width: 100%;
  display: grid;
  grid-template-columns: 2ch 4ch 1fr 5ch 4ch;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: left;
}
.bm-head:focus-visible { outline: 1px solid var(--aqua-b); outline-offset: -1px; }
.bm-rank { color: var(--gray); }
.bm-id { color: var(--aqua-b); }
.bm-bar { height: 8px; background: var(--bg2); }
.bm-bar span { display: block; height: 100%; background: var(--orange-b); transition: width 0.2s ease; }
.bm-col:last-child .bm-bar span { background: var(--blue-b); }
.bm-score { text-align: right; font-variant-numeric: tabular-nums; }
.bm-move { font-size: 12px; text-align: right; }
.bm-move.up { color: var(--green-b); }
.bm-move.down { color: var(--red-b); }
.bm-move.same { color: var(--gray); }
.bm-detail { display: none; padding: 2px 14px 12px; border-top: 1px dashed var(--bg3); }
.bm-row.is-open .bm-detail { display: block; }
.bm-text { font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); line-height: 1.6; margin: 10px 0 8px; }
.bm-text mark { background: color-mix(in srgb, var(--yellow-b) 28%, transparent); color: var(--fg); border-bottom: 2px solid var(--yellow-b); }
.bm-parts { list-style: none; display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono); font-size: 12px; }
.bm-parts li { display: grid; grid-template-columns: 10ch 1fr auto; gap: 8px; color: var(--fg-dim); }
.bm-term { color: var(--fg); }
.bm-f { color: var(--gray); }
.bm-part { color: var(--ink-accent); text-align: right; }
.bm-empty { font-size: 14px; color: var(--gray); padding: 8px 0; }

/* ============ COLLAPSIBLE SIDEBAR ============ */
:root { --nav-w: 240px; --nav-w-collapsed: 64px; }
html.nav-collapsed { --nav-w: var(--nav-w-collapsed); }

.sidebar-nav {
  width: var(--nav-w);
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.2s ease, padding 0.2s ease;
}
footer { margin-left: var(--nav-w); transition: margin-left 0.2s ease; }

.nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 4px 0;
  margin: -4px 0 26px;
}
.nav-toggle svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s ease; }
.nav-toggle:hover, .nav-toggle:focus-visible { color: var(--aqua-b); outline: none; }

.sidebar-nav a { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.nav-num { font-family: var(--font-mono); font-size: 13px; color: var(--gray); transition: color 0.15s; }
.sidebar-nav a:hover .nav-num, .sidebar-nav a.active .nav-num { color: var(--aqua-b); }

/* collapsed: numbers only, names available on hover and to screen readers */
html.nav-collapsed .sidebar-nav { padding-left: 0; padding-right: 0; }
html.nav-collapsed .sidebar-nav ul { align-items: center; }
html.nav-collapsed .nav-toggle { margin-left: auto; margin-right: auto; }
html.nav-collapsed .nav-toggle svg { transform: rotate(180deg); }
html.nav-collapsed .nav-toggle-label,
html.nav-collapsed .nav-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html.nav-collapsed .nav-num { font-size: 15px; }

/* narrow screens: the content keeps the collapsed margin and the expanded
   menu slides over it instead of pushing it aside */
@media (max-width: 860px) {
  main, footer { margin-left: var(--nav-w-collapsed); }
  html:not(.nav-collapsed) .sidebar-nav { box-shadow: 8px 0 24px var(--shadow); }
}

/* ============ ELIZA ============ */
.eliza-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; align-items: start; }
@media (max-width: 1000px) { .eliza-layout { grid-template-columns: 1fr; } }
.eliza-side { margin: 0; }
.eliza-workings { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.eliza-step { display: flex; flex-direction: column; gap: 4px; color: var(--fg-dim); }
.eliza-step > b { font-weight: 600; color: var(--fg); font-size: 14px; }
.eliza-step code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-accent);
  background: var(--bg2);
  padding: 1px 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.eliza-step code i { font-style: normal; color: var(--gray); font-size: 11px; }
.eliza-step code.is-used { outline: 1px solid var(--aqua-b); }
.eliza-note { font-size: 12px; color: var(--gray); }
.eliza-groups { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.eliza-groups i { font-style: normal; font-family: var(--font-mono); color: var(--gray); font-size: 12px; }
.eliza-hint { color: var(--gray); font-size: 14px; }
.eliza-care { font-size: 13px; color: var(--gray); margin-top: 14px; }

.about { margin-top: 32px; max-width: 72ch; }
.about h3 { font-size: 17px; margin: 20px 0 8px; }
.about p { color: var(--fg-dim); margin-bottom: 12px; }
.about em { color: var(--fg); }
.refs { padding-left: 20px; color: var(--fg-dim); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.refs a { color: var(--aqua-b); overflow-wrap: anywhere; }

/* ============ ELIZA: late-90s instant-messenger window ============ */
/* Raised and sunken bevels are drawn with the theme's own greys, so the
   window follows light/dark mode like the rest of the site. */
.im-window {
  --im-hi: var(--bg3);            /* light edge of a raised bevel */
  --im-lo: var(--bg);             /* dark edge */
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 2px solid;
  border-color: var(--im-hi) var(--im-lo) var(--im-lo) var(--im-hi);
  box-shadow: 4px 4px 0 var(--shadow);
  font-family: var(--font-sans);
}
:root[data-theme="light"] .im-window { --im-hi: #fffbe6; --im-lo: var(--bg3); }

.im-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 4px 10px;
  background: linear-gradient(90deg, #076678, #458588);   /* gruvbox faded → neutral blue */
  color: #fbf1c7;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  user-select: none;
}
.im-controls { display: flex; gap: 3px; }
.im-controls i {
  font-style: normal;
  width: 18px;
  height: 16px;
  line-height: 13px;
  text-align: center;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--fg);
  background: var(--bg2);
  border: 1px solid;
  border-color: var(--im-hi) var(--im-lo) var(--im-lo) var(--im-hi);
}

.im-buddy {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--im-lo);
}
.im-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--orange-b);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 20px;
  border: 2px solid;
  border-color: var(--im-lo) var(--im-hi) var(--im-hi) var(--im-lo);
}
.im-buddy-info { display: flex; flex-direction: column; line-height: 1.25; }
.im-buddy-name { font-weight: 600; color: var(--fg); font-size: 15px; }
.im-status { font-weight: normal; font-size: 12px; color: var(--green-b); margin-left: 6px; }
.im-status::before { content: "●"; margin-right: 4px; font-size: 10px; }
.im-buddy-sub { font-size: 12px; color: var(--gray); }

.im-log {
  list-style: none;
  height: 340px;
  overflow-y: auto;
  margin: 8px 8px 0;
  padding: 10px 12px;
  background: var(--bg1);
  border: 2px solid;
  border-color: var(--im-lo) var(--im-hi) var(--im-hi) var(--im-lo);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.45;
}
.im-msg { overflow-wrap: anywhere; }
.im-name { font-weight: bold; }
.im-bot .im-name { color: var(--orange-b); }
.im-you .im-name { color: var(--blue-b); }
.im-time { color: var(--gray); font-size: 12px; margin-left: 6px; }
.im-colon { color: var(--gray); }
.im-bot .im-text { color: var(--fg); }
.im-you .im-text { color: var(--fg-dim); }
.im-notice { color: var(--gray); font-size: 12px; font-style: italic; text-align: center; padding: 2px 0 4px; }

.im-typing { margin: 4px 10px 0; font-size: 12px; color: var(--gray); font-style: italic; height: 16px; }
.im-typing[hidden] { display: block; visibility: hidden; }
.im-typing span { animation: im-dot 1.2s infinite; }
.im-typing span:nth-child(2) { animation-delay: 0.2s; }
.im-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes im-dot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }

.im-compose { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 8px; }
.im-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 9px 10px;
  background: var(--bg1);
  color: var(--fg);
  border: 2px solid;
  border-color: var(--im-lo) var(--im-hi) var(--im-hi) var(--im-lo);
}
.im-input:focus { outline: 1px dotted var(--aqua-b); outline-offset: -4px; }
.im-buttons { display: flex; justify-content: flex-end; gap: 6px; }
.im-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 4px 16px;
  min-width: 76px;
  background: var(--bg2);
  color: var(--fg);
  cursor: pointer;
  border: 2px solid;
  border-color: var(--im-hi) var(--im-lo) var(--im-lo) var(--im-hi);
}
.im-btn:active { border-color: var(--im-lo) var(--im-hi) var(--im-hi) var(--im-lo); }
.im-btn:focus-visible { outline: 1px dotted var(--aqua-b); outline-offset: -5px; }
.im-send { font-weight: 600; }

.im-statusbar {
  font-size: 12px;
  color: var(--gray);
  padding: 3px 8px;
  border-top: 1px solid var(--im-lo);
  min-height: 22px;
}

/* ============ ABOUT + REFERENCES (every demo) ============ */
.about code { font-family: var(--font-mono); font-size: 0.92em; color: var(--ink-accent); background: var(--bg2); padding: 0 5px; }
.w2v-demo .about { margin-top: 12px; }

/* =====================================================================
   MACHINE LEARNING DEMOS
   ===================================================================== */

/* ============ COMMON ============ */
.ml-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.ml-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) { .ml-layout { grid-template-columns: 1fr; } }
.ml-side { margin: 0; }
.ml-side h3 { font-size: 16px; margin: 0 0 10px; }
.ml-side h3 + .bm-slider { margin-top: 0; }
.ml-side h3:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bg2); }
.ml-side .bm-slider { grid-template-columns: 11ch 1fr 10ch; }

.ml-canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: none;
  border: 1px solid var(--bg2);
}

.ml-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 15px; }
.ml-checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ml-checks input { accent-color: var(--aqua-b); }
.ml-small { font-size: 12px; padding: 2px 9px; }
.ml-small:disabled { opacity: 0.4; cursor: default; }
.ml-select-row { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-top: 8px; }

.ml-stats { width: 100%; border-collapse: collapse; font-size: 14px; }
.ml-stats th { text-align: left; font-weight: normal; color: var(--fg-dim); padding: 4px 0; }
.ml-stats td { text-align: right; font-family: var(--font-mono); color: var(--fg); padding: 4px 0; font-variant-numeric: tabular-nums; }
.ml-stats tr + tr th, .ml-stats tr + tr td { border-top: 1px dashed var(--bg3); }
.ml-warn { font-size: 13px; color: var(--orange-b); margin-top: 10px; }
.ml-warn:empty { display: none; }

/* class key: colour + shape (circle, square, triangle) */
.ml-key { display: inline-block; width: 10px; height: 10px; background: var(--c); border-radius: 50%; }
.ml-key[data-shape="1"] { border-radius: 0; }
.ml-key[data-shape="2"] { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ============ REGRESSION ============ */
.rg-equation {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-accent);
  margin-bottom: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.rg-eq-note { display: block; font-family: var(--font-sans); font-size: 13px; color: var(--gray); margin-top: 2px; }

/* ============ DECISION TREE ============ */
.dt-tree-row { margin-top: 16px; }
.dt-tree-row h3 { font-size: 16px; margin-bottom: 10px; }
.dt-tree { overflow-x: auto; padding-bottom: 6px; }
.dt-svg { display: block; margin: 0 auto; }
.dt-edge { fill: none; stroke: var(--bg3); stroke-width: 1.5; }
.dt-edge.on-path { stroke: var(--aqua-b); stroke-width: 2.5; }
.dt-edge-label { font-family: var(--font-sans); font-size: 11px; fill: var(--gray); }
.dt-node { cursor: default; outline: none; }
.dt-box { fill: var(--bg2); stroke: var(--bg3); stroke-width: 1; transition: stroke 0.1s; }
.dt-node.is-leaf .dt-box { fill: color-mix(in srgb, var(--c) 14%, var(--bg1)); stroke: color-mix(in srgb, var(--c) 55%, var(--bg3)); }
.dt-node.on-path .dt-box, .dt-node.is-hover .dt-box, .dt-node:focus-visible .dt-box { stroke: var(--aqua-b); stroke-width: 2.5; }
.dt-title { font-family: var(--font-mono); font-size: 12px; fill: var(--fg); }
.dt-node.is-leaf .dt-title { font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.dt-sub { font-family: var(--font-mono); font-size: 11px; fill: var(--gray); }

/* ============ SELF-ORGANISING MAP ============ */
.som-controls { margin: 0; align-items: center; }
.som-sliders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 24px;
  margin-bottom: 12px;
}
.som-sliders .bm-slider { grid-template-columns: 9ch 1fr 10ch; }
@media (max-width: 1000px) { .som-sliders { grid-template-columns: 1fr; } }
.som-progress { height: 3px; background: var(--bg2); margin-bottom: 14px; }
.som-progress span { display: block; height: 100%; width: 0; background: var(--aqua-b); transition: width 0.1s linear; }
.som-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .som-views { grid-template-columns: 1fr; } }
.som-canvas { cursor: default; }
.som-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .som-bottom { grid-template-columns: 1fr; } }
.som-bottom .result-row { margin: 0; }
.som-bottom h3 { font-size: 16px; margin-bottom: 10px; }
.som-swatch { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; border: 1px solid var(--bg3); }
.som-pulls { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============ LINE CHARTS (ML.lineChart) ============ */
.ml-chart-box { min-height: 60px; }
.ml-chart { display: block; max-width: 100%; height: auto; }
.ml-chart-bg { fill: var(--bg1); stroke: var(--bg3); stroke-width: 1; }
.ml-chart-grid { stroke: var(--bg2); stroke-width: 1; }
.ml-chart-tick { font-family: var(--font-mono); font-size: 11px; fill: var(--gray); }
.ml-chart-label { font-family: var(--font-sans); font-size: 13px; fill: var(--fg-dim); }
.ml-chart-legend { font-family: var(--font-sans); font-size: 12px; fill: var(--fg-dim); }
.ml-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ml-chart-marker { stroke: var(--fg-dim); stroke-width: 1.2; stroke-dasharray: 3 3; }

/* ============ GRADIENT DESCENT ============ */
.ml-warn.gd-good { color: var(--aqua-b); }
.ml-warn.gd-note { color: var(--fg-dim); line-height: 1.45; }
#gd-land { cursor: crosshair; }

/* ============ K-NEAREST NEIGHBOURS ============ */
.kn-votes { min-height: 70px; }
.kn-vote { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 6.5ch; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 5px; }
.kn-vote-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-vote-bar { height: 8px; background: var(--bg2); }
.kn-vote-bar span { display: block; height: 100%; }
.kn-vote-n { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--fg-dim); }
.kn-verdict { font-size: 14px; margin: 8px 0 0; color: var(--fg-dim); }
.kn-verdict strong { color: var(--fg); }

/* ============ NEURAL NETWORK ============ */
.nn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(210px, 0.6fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) { .nn-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nn-layout .ml-side { grid-column: 1 / -1; } }
@media (max-width: 760px) { .nn-layout { grid-template-columns: 1fr; } }
#nn-net { cursor: default; }
.nn-arch { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.nn-step-row { display: grid; grid-template-columns: 1fr auto 3ch auto; gap: 6px; align-items: center; font-size: 15px; }
.nn-step-row b { font-family: var(--font-mono); font-weight: normal; text-align: center; color: var(--ink-accent); }
.nn-features label { font-family: var(--font-mono); }

/* ============ K-MEANS ============ */
.km-phase { font-size: 14px; line-height: 1.5; color: var(--fg-dim); margin: 0; min-height: 4.5em; }
.km-phase strong { color: var(--fg); }
.km-phase em { color: var(--ink-accent); font-style: normal; }
.km-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .km-charts { grid-template-columns: 1fr; } }

/* ============ SHARED: part headings in two-part demos ============ */
.ml-part { font-size: 17px; margin: 30px 0 4px; color: var(--ink-accent); }
.ml-part:first-of-type { margin-top: 22px; }

/* ============ LOGISTIC REGRESSION ============ */
.lr-eq2 { font-size: 13px; }

/* ============ RANDOM FOREST ============ */
.rf-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .rf-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rf-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rf-thumb { display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 1px solid var(--bg2); cursor: pointer; color: var(--fg-dim); font-family: var(--font-sans); font-size: 12px; text-align: center; }
.rf-thumb canvas { display: block; width: 100%; }
.rf-thumb span { padding: 0 0 4px; }
.rf-thumb:hover, .rf-thumb:focus-visible { border-color: var(--aqua-b); outline: none; color: var(--fg); }
.rf-thumb.is-off { opacity: 0.35; }

/* ============ EVALUATING CLASSIFIERS ============ */
.ev-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ev-layout { grid-template-columns: 1fr; } }
#ev-hist { cursor: ew-resize; }
.ev-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .ev-bottom { grid-template-columns: 1fr; } }
table.ev-matrix { width: 100%; border-collapse: separate; border-spacing: 4px; margin-bottom: 12px; font-size: 14px; }
.ev-matrix th { font-weight: normal; color: var(--fg-dim); text-align: center; padding: 2px 4px; }
.ev-matrix tr th:first-child { text-align: right; }
.ev-matrix td { text-align: center; padding: 8px 4px; border: 1px solid var(--bg3); }
.ev-matrix td b { display: block; font-family: var(--font-mono); font-size: 20px; font-weight: normal; color: var(--fg); }
.ev-matrix td span { font-size: 12px; color: var(--fg-dim); }
.ev-matrix .ev-tp, .ev-matrix .ev-tn { background: color-mix(in srgb, var(--aqua-b) 12%, var(--bg1)); }
.ev-matrix .ev-fp, .ev-matrix .ev-fn { background: color-mix(in srgb, var(--orange-b) 14%, var(--bg1)); }
.ev-pop { font-size: 16px; line-height: 1.6; color: var(--fg-dim); margin: 0; }
.ev-pop b { color: var(--fg); font-family: var(--font-mono); font-weight: normal; }
.cv-folds { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.cv-row { display: grid; grid-template-columns: 8ch minmax(0, 1fr) 5ch; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-dim); }
.cv-bar { display: flex; gap: 2px; height: 12px; }
.cv-bar i { display: block; height: 100%; }
.cv-train { background: var(--bg3); }
.cv-test { background: var(--orange-b); }
.cv-acc { font-family: var(--font-mono); text-align: right; color: var(--fg); }

/* ============ PCA ============ */
.pc-loadings th em { font-style: normal; color: var(--gray); font-size: 12px; }
.pc-loadings tr:first-child th { text-align: right; font-family: var(--font-mono); }
.pc-loadings td { position: relative; }
.pc-load { display: inline-block; width: calc(var(--w) * 0.45); max-width: 45px; height: 6px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.ev-matrix td.ev-corner { border: none; background: none; }

/* =====================================================================
   SHELL: sidebar collections, overview hub, cards, search, cross-links
   ===================================================================== */
.page, .demo-panel { scroll-margin-top: 80px; }

/* ---- sidebar: collections with expandable lists ---- */
.nav-tree { gap: 10px !important; }
.nav-tree > li > a, .nav-group-head { margin-bottom: 4px; }
.nav-group { display: flex; flex-direction: column; }
.nav-group-head { display: flex; align-items: center; gap: 4px; }
.nav-caret {
  flex-shrink: 0; width: 22px; height: 22px; margin-left: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--gray); cursor: pointer; padding: 0;
}
.nav-caret svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.nav-caret[aria-expanded="true"] svg { transform: rotate(90deg); }
.nav-caret:hover, .nav-caret:focus-visible { color: var(--fg); outline: none; }
.nav-group-head a { color: var(--fg) !important; font-weight: 600; }
.nav-code { color: var(--col) !important; font-weight: 600; letter-spacing: 0.5px; }
.sidebar-nav .nav-sub {
  gap: 13px; margin: 8px 0 14px 8px; padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--col) 45%, transparent);
  text-transform: lowercase;
}
.nav-sub[hidden] { display: none !important; }
.nav-home .nav-num { font-size: 14px; }

/* collapsed sidebar: collection codes over their numbers */
html.nav-collapsed .nav-caret { display: none; }
html.nav-collapsed .nav-group-head { justify-content: center; }
html.nav-collapsed .sidebar-nav .nav-sub { margin: 6px 0 12px; padding-left: 0; border-left: none; align-items: center; }
html.nav-collapsed .nav-code { font-size: 12px !important; }

/* ---- demo crumbs and pager ---- */
.demo-crumb { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.demo-crumb a { color: var(--col, var(--gray)); text-decoration: none; border-bottom: 1px solid transparent; }
.demo-crumb a:hover, .demo-crumb a:focus-visible { border-color: currentColor; outline: none; }
.demo-crumb .crumb-num { font-family: var(--font-mono); }
.demo-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--bg2); font-size: 15px; }
.demo-pager a { color: var(--fg-dim); text-decoration: none; display: flex; flex-direction: column; gap: 2px; max-width: 48%; }
.demo-pager a span { font-size: 12px; color: var(--gray); font-family: var(--font-mono); }
.demo-pager a:hover, .demo-pager a:focus-visible { color: var(--aqua-b); outline: none; }
.demo-pager .pager-next { text-align: right; margin-left: auto; align-items: flex-end; }
.demo-panel.is-loading .section > h2::after { content: ' · loading…'; font-size: 14px; color: var(--gray); font-weight: normal; }
.demo-load-error { color: var(--red-b); font-size: 15px; }

/* ---- collection pages ---- */
.collection-page .ov-card { border-left: 3px solid var(--col); }
.ov-also { font-size: 12px; color: var(--gray); }
.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.eyebrow a:hover { color: var(--aqua-b); }

/* ---- hub: chips, search, compact cards ---- */
.hub-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 0 0 26px; }
.hub-chips .svm-btn { display: inline-flex; align-items: center; gap: 7px; }
.hub-chips .chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.hub-chips .chip-count { font-family: var(--font-mono); font-size: 11px; color: var(--gray); }
.hub-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 420px;
  border: 1px solid var(--bg3); background: var(--bg1); padding: 6px 10px; color: var(--gray);
}
.hub-search:focus-within { border-color: var(--aqua-b); }
.hub-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.hub-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--fg); font-family: var(--font-mono); font-size: 15px; }
.hub-search input::placeholder { color: var(--gray); font-family: var(--font-sans); }
.hub-search kbd { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--bg3); padding: 0 5px; color: var(--gray); }
.hub-heading { font-size: 17px; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hub-heading a { color: var(--col, var(--fg)); text-decoration: none; }
.hub-heading a:hover { text-decoration: underline; }
.hub-heading .hub-count { font-size: 13px; color: var(--gray); font-weight: normal; font-family: var(--font-mono); }
.hub-start { margin-bottom: 34px; }
.hub-group { margin-bottom: 30px; }
.hub-empty { color: var(--fg-dim); font-size: 16px; }

.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.dc {
  --c1: var(--gray); --c2: var(--c1);
  background: var(--bg1);
  border: 2px solid var(--c1);
  border-left-width: 5px;
  transition: background 0.15s;
}
/* in several collections: a border of alternating colour dashes */
.dc.dc-multi {
  border-color: transparent;
  background:
    linear-gradient(var(--bg1), var(--bg1)) padding-box,
    repeating-linear-gradient(-45deg, var(--c1) 0 7px, var(--c2) 7px 14px) border-box;
}
.dc:hover { background-color: color-mix(in srgb, var(--c1) 6%, var(--bg1)); }
.dc.dc-multi:hover { background: linear-gradient(color-mix(in srgb, var(--c1) 6%, var(--bg1)), color-mix(in srgb, var(--c1) 6%, var(--bg1))) padding-box, repeating-linear-gradient(-45deg, var(--c1) 0 7px, var(--c2) 7px 14px) border-box; }
.dc-row { display: flex; align-items: center; }
.dc-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px; padding: 10px 6px 10px 12px; color: var(--fg); text-decoration: none; }
.dc-name:hover .dc-title, .dc-name:focus-visible .dc-title { color: var(--aqua-b); }
.dc-name:focus-visible { outline: none; }
.dc-num { font-family: var(--font-mono); font-size: 12px; color: var(--gray); white-space: nowrap; }
.dc-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.dc-more {
  flex-shrink: 0; align-self: stretch; width: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-left: 1px solid var(--bg2); color: var(--gray); cursor: pointer;
}
.dc-more svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.dc-more[aria-expanded="true"] svg { transform: rotate(45deg); }
.dc-more:hover, .dc-more:focus-visible { color: var(--fg); outline: none; background: var(--bg2); }
.dc-snippet { margin: -4px 12px 10px; font-size: 13px; line-height: 1.45; color: var(--fg-dim); }
.dc-info { padding: 0 12px 12px; border-top: 1px dashed var(--bg3); }
.dc-info p { margin: 10px 0 8px; font-size: 14px; line-height: 1.5; color: var(--fg-dim); }
.dc-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; font-size: 13px; }
.dc-tag { color: var(--gray); }
.dc-cols { color: var(--gray); font-size: 12px; }
.dc-go { color: var(--aqua-b); text-decoration: none; margin-left: auto; }
.dc-go:hover { text-decoration: underline; }
mark { background: color-mix(in srgb, var(--yellow-b) 35%, transparent); color: inherit; padding: 0 1px; }

/* ---- cross-references between demos ---- */
a.xref {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--col, var(--aqua-b));
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background: color-mix(in srgb, var(--col, var(--aqua-b)) 10%, transparent);
  padding: 0 2px;
  cursor: pointer;
}
a.xref:hover, a.xref:focus-visible { background: color-mix(in srgb, var(--col, var(--aqua-b)) 22%, transparent); outline: none; }
a.xref::after { content: '↗'; font-size: 0.75em; margin-left: 2px; color: var(--col, var(--aqua-b)); }
.xref-tip {
  position: fixed; z-index: 50; max-width: 320px;
  background: var(--bg1); border: 1px solid var(--bg3); border-left: 4px solid var(--col, var(--aqua-b));
  box-shadow: 0 6px 20px var(--shadow);
  padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--fg-dim);
}
.xref-tip[hidden] { display: none; }
.xref-tip strong { display: block; color: var(--fg); font-size: 15px; margin-bottom: 3px; }
.xref-tip .tip-col { font-family: var(--font-mono); font-size: 11px; color: var(--col, var(--gray)); }
.xref-tip .tip-go { display: block; margin-top: 6px; font-size: 12px; color: var(--gray); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nav-code { text-transform: none; }
.sidebar-nav .nav-col { white-space: normal; line-height: 1.3; }
.nav-group-head { align-items: baseline; }
.nav-caret { align-self: center; }
.sidebar-nav .nav-col .nav-label { text-transform: none; }