/* Dino Forcing project page — styled after https://arijit-hub.github.io/ */

/* ── Variables: dark (default) ── */
:root {
  color-scheme: dark;
  --bg:         #111111;
  --surface:    #191919;
  --surface-2:  #202020;
  --text:       #dededd;
  --muted:      #8a8a8a;
  --faint:      #6a6a6a;
  --border:     #2e2e2e;
  --line:       #4a4a4a;
  --accent:     #34d399;
  --accent-dim: rgba(52, 211, 153, 0.10);
  --accent-ink: #0f2a20;
  --paper:      #ffffff;
  --shadow-md:  rgba(0, 0, 0, 0.5);
  --card-shadow: none;
  --scrim:      rgba(0, 0, 0, 0.88);
  --tip-bg:     #0d0d0d;

  /* figure palette */
  --img:        #f0a875;
  --dino:       #7cb4f5;
  --dino-hi:    #cfe3fb;
  --grad:       #f472b6;
  --chip:       #d9c46b;
  --chip-t:     #e9d77f;
  --prior:      #5a5a5a;
  --zero:       #151515;
  --zero-2:     #222222;
  --neutral:    #e6e6f0;
  --other:      #6f7680;
  --other-2:    #9aa3ad;
  --grid:       #262626;
  --s-repa:     #82aadc;
  --s-redi:     #f0a875;
  --s-rae:      #c3a6ee;
  --s-reg:      #ee9a9a;

  --r:          14px;
  --r-sm:       8px;
  --font:       'JetBrains Mono', 'Courier New', monospace;
}

/* ── Variables: light ── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:         #f7f7f5;
  --surface:    #ffffff;
  --surface-2:  #f1f1ee;
  --text:       #1d1d1b;
  --muted:      #5d5d5a;
  --faint:      #8c8c88;
  --border:     #e2e2dd;
  --line:       #bdbdb7;
  --accent:     #059669;
  --accent-dim: rgba(5, 150, 105, 0.08);
  --accent-ink: #ffffff;
  --shadow-md:  rgba(20, 20, 15, 0.12);
  --card-shadow: 0 1px 2px rgba(20, 20, 15, 0.04), 0 4px 16px rgba(20, 20, 15, 0.04);
  --scrim:      rgba(247, 247, 245, 0.94);
  --tip-bg:     #ffffff;

  --img:        #dd6b20;
  --dino:       #2b74cc;
  --dino-hi:    #ffffff;
  --grad:       #db2777;
  --chip:       #c99a06;
  --chip-t:     #946c00;
  --prior:      #a3a39e;
  --zero:       #f3f3f0;
  --zero-2:     #e6e6e2;
  --neutral:    #4b4b5a;
  --other:      #9aa1a9;
  --other-2:    #7b838c;
  --grid:       #ecece8;
  --s-repa:     #4a7fc1;
  --s-redi:     #e07b3a;
  --s-rae:      #8b5cf6;
  --s-reg:      #d9534f;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  line-height: 1.75;
  max-width: 980px;
  margin: 0 auto;
  padding: 3.5rem 2rem 2rem;
}

h1, h2, h3 { font-family: var(--font); font-weight: 700; line-height: 1.25; }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
  transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

code, .mono { font-family: var(--font); }
.accent { color: var(--accent); }
strong { font-weight: 700; }

#ode-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* ── Sections ── */
section { margin: 4rem 0; }
section:first-of-type { margin-top: 0; }

.sectionheader {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.sectionheader::before {
  content: '//';
  color: var(--accent);
  letter-spacing: 0;
  font-size: 0.85rem;
}
.sectionheader i { font-size: 0.72rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.75rem;
  box-shadow: var(--card-shadow);
}

.prose p { margin: 0 0 1rem; text-align: justify; text-align-last: left; hyphens: auto; }
.prose p:last-child { margin-bottom: 0; }

/* ── Hero ── */
.hero { text-align: center; padding: 2.5rem 1.75rem 2rem; }
.hero__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.75rem;
  margin-bottom: 1.25rem;
}
.hero__title {
  font-size: 2.1rem;
  letter-spacing: -0.5px;
  margin: 0 0 0.4rem;
}
.hero__subtitle {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 1.75rem;
}
.hero__subtitle em { color: var(--text); font-style: italic; }

.authors {
  font-size: 0.88rem;
  line-height: 1.9;
  margin: 0 auto 0.5rem;
  max-width: 720px;
}
.authors a { text-decoration-color: var(--accent); text-decoration-thickness: 0.5px; white-space: nowrap; }
.authors sup { color: var(--accent); font-size: 0.65em; margin-left: 1px; }

.affiliations, .notes { font-size: 0.74rem; color: var(--muted); margin: 0.2rem 0; }
.affiliations sup { color: var(--accent); }
.affiliations span { white-space: nowrap; margin: 0 0.45rem; }

.link-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.btn i { font-size: 0.95rem; }
.btn .hf { font-size: 1rem; line-height: 1; }

/* ── Teaser: sample pyramid + convergence ── */
.teaser {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.5rem;
  align-items: center;
}
.pyramid { display: flex; flex-direction: column; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.pyramid__row { display: grid; }
.pyramid__row img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.pyramid__row--2 { grid-template-columns: repeat(2, 1fr); }
.pyramid__row--4 { grid-template-columns: repeat(4, 1fr); }
.pyramid__row--8 { grid-template-columns: repeat(8, 1fr); }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--font); }
.chart .tick { fill: var(--faint); font-size: 11px; }
.chart .axis-label { fill: var(--muted); font-size: 12px; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .ref { stroke: var(--faint); stroke-dasharray: 4 4; stroke-width: 1; }
.chart .ref-label { fill: var(--faint); font-size: 11px; }
.chart .pt { cursor: default; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.5rem;
}
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.legend .df { color: var(--accent); font-weight: 700; }

.caption {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 1rem 0 0;
  line-height: 1.6;
}
.caption strong { color: var(--text); }

/* ── TL;DR ── */
.tldr {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 0.9rem 1.2rem;
  margin: 0 0 1.5rem;
  font-size: 0.88rem;
}
.tldr b { color: var(--accent); }

/* ── Two-column explainer ── */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
.compare__item h3 {
  font-size: 0.82rem;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.compare__item p { font-size: 0.8rem; margin: 0; line-height: 1.65; color: var(--muted); }
.compare__item p strong { color: var(--text); }
.compare__item--ours { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.compare__item--ours h3 { color: var(--accent); }
.badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
}
.compare__item--ours .badge { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }

.math {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.8rem 1rem;
  margin: 0.9rem 0 0;
  overflow-x: auto;
  font-size: 0.95rem;
  text-align: center;
}

/* ── Steps (method) ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.step__num { font-size: 0.7rem; letter-spacing: 1.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.step h3 { font-size: 0.85rem; margin: 0.25rem 0 0.5rem; }
.step p { font-size: 0.78rem; color: var(--muted); margin: 0; line-height: 1.65; }

/* ── Tabs ── */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.tab {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab:hover { color: var(--text); border-color: var(--faint); }
.tab[aria-selected="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.tab:focus-visible, .btn:focus-visible, .copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Timeline controls ── */
.controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.1rem;
}
.play {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.play:hover { color: var(--accent); border-color: var(--accent); }
input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.tval { flex: none; font-size: 0.8rem; color: var(--accent); font-weight: 700; min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Frame strip (sampling figure) ── */
.strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 1rem;
}
.strip button {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, border-color 0.15s;
}
.strip button img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.strip button.active { opacity: 1; border-color: var(--accent); }
.strip button:hover { opacity: 0.85; }

/* ── Gallery ── */
.gallery { display: grid; gap: 4px; grid-template-columns: repeat(8, 1fr); }
.gallery.g3 { grid-template-columns: repeat(3, 1fr); max-width: 620px; margin: 0 auto; }
.gallery button { padding: 0; border: none; background: var(--surface); cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.gallery img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; transition: transform 0.25s, opacity 0.25s; }
.gallery button:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.5rem;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(92vw, 640px); max-height: 88vh; border-radius: var(--r-sm); border: 1px solid var(--border); image-rendering: auto; }

/* ── BibTeX ── */
.bibtex { position: relative; }
.bibtex pre {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem 1.4rem;
  font-size: 0.76rem;
  line-height: 1.7;
  overflow-x: auto;
}
.copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--font);
  font-size: 0.7rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Footer ── */
.footer {
  text-align: center;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--faint);
}
.footer p { margin: 0.2rem 0; }

/* ── Responsive ── */
@media (max-width: 760px) {
  body { padding: 1.5rem 1rem 1rem; }
  .hero { padding: 1.75rem 1rem 1.5rem; }
  .hero__title { font-size: 1.5rem; }
  .hero__subtitle { font-size: 0.9rem; }
  .card { padding: 1.25rem; }
  .teaser, .compare, .steps, .viz-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .strip { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #ode-canvas { display: none; }
  * { transition: none !important; }
}

/* let grid columns shrink so wide tables scroll inside their wrapper */
.teaser > *, .viz-grid > *, .compare > * { min-width: 0; }

/* ── Convergence chart draw-in ── */
.chart .draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease-out; }
.chart .pt, .chart .final { opacity: 0; transition: opacity 0.5s 1.4s; }
.chart.drawn .draw { stroke-dashoffset: 0; }
.chart.drawn .pt, .chart.drawn .final { opacity: 1; }

/* ── Live figures ── */
.fx-stage { position: relative; }
.fx-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.fx-stage .ov {
  position: absolute;
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 14px var(--shadow-md);
}
.fx-stage .ov canvas, .fx-stage .ov img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fx-scroll { overflow-x: auto; margin: 0 -0.25rem; padding: 0 0.25rem; }
.fx-scroll .fx-stage { min-width: 660px; }

.fx text { font-family: var(--font); }
.fx .lbl { fill: var(--muted); font-size: 11px; }
.fx .lbl--dino { fill: var(--dino); }
.fx .lbl--img { fill: var(--img); }
.fx .lbl--grad { fill: var(--grad); }
.fx .m { font-family: 'Times New Roman', Times, serif; font-style: italic; font-size: 16px; fill: var(--text); }
.fx .m .sub, .fx .sub { font-size: 0.72em; }
.fx .ro { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.fx .ro--dino { fill: var(--dino); }
.fx .ro--img { fill: var(--img); }
.fx .ro--acc { fill: var(--accent); font-size: 12px; }
.fx .big { fill: var(--text); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx .bar { fill: var(--border); }
.fx .bar-fill { fill: var(--accent); transition: width 0.12s linear; }

.fx .wire { fill: none; stroke-width: 1.5; stroke-opacity: 0.55; stroke-linejoin: round; }
.fx .flow {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.01 10;
  animation: fxdash 0.7s linear infinite;
  transition: opacity 0.4s;
}
.fx .flow.rev { animation-direction: reverse; }
.fx.paused .flow { animation-play-state: paused; }
@keyframes fxdash { to { stroke-dashoffset: -10.01; } }

.fx .plus { fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; }
.fx .plus-x { stroke: var(--text); stroke-width: 1.5; }
.fx .model { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: var(--accent); stroke-width: 2; }
.fx .model--prior { fill: color-mix(in srgb, var(--text) 3%, transparent); stroke: var(--prior); }
.fx .model-t { fill: var(--text); font-size: 13px; font-weight: 700; }
.fx .model-glow { fill: none; stroke: var(--grad); stroke-width: 2; animation: fxpulse 1.1s ease-in-out infinite alternate; }
@keyframes fxpulse { from { stroke-opacity: 0.25; } to { stroke-opacity: 0.95; } }
.fx .chip { fill: color-mix(in srgb, var(--chip) 14%, transparent); stroke: var(--chip); }
.fx .chip-t { fill: var(--chip-t); font-size: 11px; font-weight: 600; }
.fx .loss { fill: var(--bg); stroke: var(--line); }
.fx [data-show] { transition: opacity 0.45s; }

.fx .tok .tf { stroke-width: 1; }
.fx .tok .tt, .fx .tok .ts { stroke-width: 0.8; }
.fx .tok--img .tf { fill: color-mix(in srgb, var(--img) 16%, transparent); stroke: var(--img); }
.fx .tok--img .tt, .fx .tok--img .ts { fill: color-mix(in srgb, var(--img) 32%, transparent); stroke: var(--img); }
.fx .tok--dino .tf { fill: color-mix(in srgb, var(--dino) 20%, transparent); stroke: var(--dino); }
.fx .tok--dino .tt, .fx .tok--dino .ts { fill: color-mix(in srgb, var(--dino) 40%, transparent); stroke: var(--dino); }
.fx .tok--tgt .tf { fill: color-mix(in srgb, var(--dino) 50%, transparent); stroke: var(--dino); }
.fx .tok--tgt .tt, .fx .tok--tgt .ts { fill: color-mix(in srgb, var(--dino) 70%, transparent); stroke: var(--dino); }
.fx .tok--zero .tf { fill: var(--zero); stroke: var(--line); }
.fx .tok--zero .tt, .fx .tok--zero .ts { fill: var(--zero-2); stroke: var(--line); }
.fx .tok .tl { fill: var(--accent); font-size: 9px; }
.fx .zt { fill: var(--zero); stroke: color-mix(in srgb, var(--accent) 45%, transparent); }
.fx .ztl { fill: var(--accent); font-size: 11px; }
.fx .dt { fill: var(--dino); stroke: var(--dino); stroke-opacity: 0.6; }
.fx .ct { stroke-width: 0.8; }
.fx .ct--img { fill: color-mix(in srgb, var(--img) 30%, transparent); stroke: var(--img); }
.fx .ct--dino { fill: color-mix(in srgb, var(--dino) 40%, transparent); stroke: var(--dino); }
.fx .ct--zero { fill: var(--zero); stroke: var(--line); }
.fx .flyer { fill: var(--dino); stroke: var(--dino-hi); stroke-width: 1; }

.fx-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fx-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1rem 1rem 0.5rem;
  min-width: 0;
  box-shadow: var(--card-shadow);
}
.fx-panel--ours { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fx-panel__head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.5rem; }
.fx-panel--ours .fx-panel__head { color: var(--accent); }
.fx-panel--ours .badge { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.fx-flow { display: block; width: 100%; aspect-ratio: 480 / 250; margin-top: 0.6rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); }

.fx-toolbar { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.fx-toolbar .tabs { margin: 0; }
#fx-sample .strip button { position: relative; }
#fx-sample .strip button span {
  position: absolute; left: 4px; bottom: 3px;
  font-family: var(--font); font-size: 0.6rem; color: #fff;
  text-shadow: 0 1px 2px #000;
}

@media (max-width: 760px) {
  .fx-teaser { grid-template-columns: 1fr; }
}

/* ── Result charts ── */
.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; align-items: stretch; }
.viz-grid > .viz { display: flex; flex-direction: column; }
.viz-grid > .viz .viz-chart { margin-top: auto; }
.viz-title { font-size: 0.9rem; margin: 0 0 0.25rem; }
.viz-sub { font-size: 0.75rem; color: var(--muted); margin: 0 0 0.9rem; line-height: 1.6; }
.viz-sub strong { color: var(--text); }
.viz-filterbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.9rem; }
.seg { display: inline-flex; gap: 0.3rem; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.72rem; color: var(--muted); margin: 0 0 0.6rem; }
.viz-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.sw { display: inline-block; flex: none; }
.sw--dot { width: 9px; height: 9px; border-radius: 50%; background: var(--other); }
.sw--df { background: var(--accent); }
.sw--glow { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
.sw--hollow { background: transparent; border: 1.5px solid var(--other); }
.sw--muted { background: var(--other-2); }
.sw--front { width: 16px; height: 8px; border-top: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); border-right: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.viz-chart { width: 100%; min-height: 40px; }
.viz-chart svg { display: block; overflow: visible; }
.viz-note { font-size: 0.75rem; color: var(--muted); margin: 0.75rem 0 0; line-height: 1.6; min-height: 2.4em; }

.viz text { font-family: var(--font); }
.viz .tick { fill: var(--faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.viz .axis-title { fill: var(--faint); font-size: 10.5px; }
.viz .better { fill: color-mix(in srgb, var(--accent) 75%, transparent); font-size: 10.5px; }
.viz .group { fill: var(--muted); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.viz .name { fill: var(--text); font-size: 12px; }
.viz .meta { fill: var(--faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.viz .val { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz .val--df { fill: var(--text); font-weight: 700; font-size: 12px; }
.viz .note { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.viz .hit { fill: transparent; }
.viz [tabindex]:focus { outline: none; }

/* bubble chart */
.viz .zone { fill: color-mix(in srgb, var(--accent) 4%, transparent); }
.viz .zone-t { fill: color-mix(in srgb, var(--accent) 60%, transparent); font-size: 10.5px; }
.viz .pt .dot { fill: var(--other); stroke: var(--surface); stroke-width: 1.5; transition: fill 0.2s; }
.viz .pt--old .dot { fill: color-mix(in srgb, var(--other) 8%, transparent); stroke: var(--other); stroke-width: 1.5; }
.viz .pt--df .dot { fill: var(--accent); stroke: var(--accent-ink); stroke-width: 2; }
.viz .pt { cursor: default; }
.viz .pt:hover .dot, .viz .pt:focus-visible .dot { stroke: var(--text); }
.viz .pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: vizPulse 2.2s ease-out infinite; }
@keyframes vizPulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.2); opacity: 0; } }
.viz .frontier { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: vizDraw 1.1s ease-out forwards; }
.viz .frontier-t { fill: color-mix(in srgb, var(--accent) 75%, transparent); font-size: 10.5px; opacity: 0; animation: vizFade 0.5s 0.8s forwards; }
@keyframes vizDraw { to { stroke-dashoffset: 0; } }
@keyframes vizFade { to { opacity: 1; } }
.viz .lab { fill: var(--muted); font-size: 10.5px; opacity: 0; animation: vizFade 0.45s forwards; }
.viz .lab--old { fill: var(--faint); }
.viz .lab--df { fill: var(--text); font-size: 12px; font-weight: 700; }

/* comets */
.viz .comet .head { fill: var(--accent); stroke: var(--accent-ink); stroke-width: 2; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.viz .comet .mid { fill: var(--surface); stroke: var(--other); stroke-width: 1.5; }
.viz .comet .ripple { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.viz .comet .ripple.on { animation: vizPulse 2.4s ease-out infinite; }
.viz .comet:hover .hit, .viz .comet:focus-visible .hit { fill: color-mix(in srgb, var(--text) 3%, transparent); }

.viz .comet--muted .head { fill: var(--other-2); stroke: var(--surface); filter: none; }
.viz .comet--muted .ripple.on { animation: none; }
.viz .refline { stroke: var(--other); stroke-width: 1; stroke-opacity: 0.6; }

.viz-tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--tip-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem;
  font-family: var(--font);
  font-size: 0.72rem;
  color: var(--text);
  box-shadow: 0 6px 24px var(--shadow-md);
  max-width: 260px;
}
.viz-tip > b { display: block; font-size: 0.78rem; }
.viz-tip > span { display: block; color: var(--muted); margin: 0.1rem 0 0.4rem; }
.viz-tip__grid { display: grid; grid-template-columns: auto auto; gap: 0.1rem 1rem; }
.viz-tip__grid i { font-style: normal; color: var(--muted); }
.viz-tip__grid b { text-align: right; font-variant-numeric: tabular-nums; }

/* ── DINO inversion ── */
.inv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: center; }
.inv-compare {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.inv-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-orig-wrap { position: absolute; inset: 0; }
.inv-handle { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); pointer-events: none; }
.inv-handle span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent); font-size: 0.8rem;
}
.inv-tag {
  position: absolute; top: 10px; font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase;
  background: rgba(0, 0, 0, 0.65); color: #fff; padding: 0.15rem 0.5rem; border-radius: 4px; pointer-events: none;
}
.inv-tag--l { left: 10px; }
.inv-tag--r { right: 10px; }
.inv-compare input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; pointer-events: none; }
.inv-compare input:focus-visible ~ .inv-handle span { outline: 2px solid var(--text); }
.inv-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0 0 1.1rem; }
.inv-thumbs button { padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: none; cursor: pointer; opacity: 0.5; transition: opacity 0.15s, border-color 0.15s; }
.inv-thumbs button img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.inv-thumbs button[aria-selected="true"] { opacity: 1; border-color: var(--accent); }
.inv-thumbs button:hover { opacity: 0.85; }
.inv-metrics { display: grid; gap: 0.5rem; }
.inv-metrics div { display: grid; grid-template-columns: 1fr auto auto; gap: 1.2rem; align-items: baseline; padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); font-size: 0.75rem; color: var(--muted); }
.inv-metrics b { color: var(--text); font-size: 1rem; }
.inv-metrics small { color: var(--muted); font-weight: 400; font-size: 0.7rem; }

@media (max-width: 760px) {
  .viz-grid { grid-template-columns: 1fr; }
  .inv { grid-template-columns: 1fr; }
}

/* ── Theme toggle ── */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 60;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.25s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: rotate(-20deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* show the mode you would switch to */
.theme-toggle .fa-moon { display: none; }
:root[data-theme="light"] .theme-toggle .fa-moon { display: inline; }
:root[data-theme="light"] .theme-toggle .fa-sun { display: none; }

/* cross-fade surfaces when the theme flips (class is added only during the switch) */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, fill 0.3s, stroke 0.3s, box-shadow 0.3s !important;
}

:root[data-theme="light"] .gallery button { background: var(--surface-2); }