/* SocietyBench — brutalist landing page styles */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
  --ink: #000000;
  --paper: #F5F9FD;       /* very light blue background for main content */
  --paper-2: #BBDEFB;     /* medium blue for stripes */
  --paper-3: #ffffff;
  --blue: #2196F3;        /* primary blue (replaces orange) */
  --blue-dark: #0D47A1;   /* deeper blue for external links */
  --blue-light: #64B5F6;  /* light blue accent */
  --sky: #87CEEB;         /* sky blue for sidebar */
  --cjk: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --script: "Dancing Script", "Snell Roundhand", "Apple Chancery", cursive;
  --orange: #F59E0B;      /* amber accent: highlights, badges, extremes */
  --orange-ink: #B45309;  /* readable amber for text on light backgrounds */
  --muted: #546E7A;       /* blue-grey for muted text */
  --shadow: 4px 4px 0 rgba(33, 150, 243, 0.2);
  --shadow-lg: 8px 8px 0 rgba(33, 150, 243, 0.15);
  --shadow-xl: 12px 12px 0 rgba(33, 150, 243, 0.1);
  --border: 2.5px solid var(--blue);
  --border-thick: 4px solid var(--blue);
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Space Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sidebar-w: 280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #FFCC80; color: var(--ink); }

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ============================== NETWORK ANIMATION ===========================
   Canvas background layer for floating node network effect */
#network-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.85;
}

/* ============================== CROWD ANIMATION =============================
   Bottom crowd walking animation */
#crowd-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
  pointer-events: auto;
  z-index: 9998;
  overflow: hidden;
  cursor: pointer;
}

#crowd-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.crowd-person {
  position: absolute;
  bottom: 0;
  opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  display: flex;
  align-items: flex-end;
  transition: opacity 0.1s ease, filter 0.15s ease;
  cursor: pointer;
  will-change: transform;
}

/* When container has a hovered person, dim all people by default */
#crowd-container.person-hovered .crowd-person {
  opacity: 0.3 !important;
  transition: opacity 0.2s ease, filter 0.15s ease;
}

/* The highlighted person: scale via inner img so we don't fight the
   translateX walk animation on the outer element. */
#crowd-container.person-hovered .crowd-person.highlighted {
  opacity: 1 !important;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
  z-index: 100;
}
#crowd-container.person-hovered .crowd-person.highlighted img {
  transform: scaleX(var(--flip, 1)) scale(1.2);
}

.crowd-person svg,
.crowd-person img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: bottom;
  transform-origin: bottom center;
  transition: transform 0.15s ease;
}

/* Bobbing wrapper — translateY oscillation gives a walking gait. Each
   person gets a random animation-delay so the crowd isn't synchronized. */
.crowd-person-bob {
  width: 100%;
  height: 100%;
  animation: crowd-bob 1s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes crowd-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

/* Pause bob when crowd is hovered, just like the walk slows to 0. */
#crowd-container:hover .crowd-person-bob {
  animation-play-state: paused;
}

/* When the user scrolls past the threshold, the crowd starts dispersing.
   The `.dispersing` class overrides every `:hover` rule so the speed-up
   plays through even if the mouse is still physically over a person. */
#crowd-container.dispersing,
#crowd-container.dispersing:hover {
  pointer-events: none;
}
#crowd-container.dispersing .crowd-person-bob,
#crowd-container.dispersing:hover .crowd-person-bob,
#crowd-container.dispersing .crowd-person,
#crowd-container.dispersing:hover .crowd-person {
  animation-play-state: running !important;
}
#crowd-container.dispersing.person-hovered .crowd-person,
#crowd-container.dispersing .crowd-person.highlighted {
  opacity: 1 !important;
  filter: none !important;
  transform: none;
}

/* Thought bubble that pops above a hovered person, with random question text. */
.crowd-thought-bubble {
  position: fixed;
  transform: translate(-50%, -100%) scale(0.85);
  transform-origin: 50% 100%;
  background: var(--sky, #87CEEB);
  color: var(--ink, #000);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  padding: 10px 16px;
  border: 2px solid var(--ink, #000);
  border-radius: 22px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.crowd-thought-bubble.show {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}
/* Two little tail dots underneath, classic comic thought-bubble look. */
.crowd-thought-bubble::after,
.crowd-thought-bubble::before {
  content: "";
  position: absolute;
  background: var(--sky, #87CEEB);
  border: 2px solid var(--ink, #000);
  border-radius: 50%;
}
.crowd-thought-bubble::after {
  width: 10px;
  height: 10px;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
}
.crowd-thought-bubble::before {
  width: 5px;
  height: 5px;
  left: calc(50% + 10px);
  bottom: -22px;
}

/* Slowing down state - gradually reduce speed */
.crowd-person.slowing {
  animation-play-state: running !important;
}

/* Paused state when fully stopped */
.crowd-person.paused {
  animation-play-state: paused !important;
}

/* Walking animation - left to right (GPU-composited via transform) */
.crowd-left-to-right {
  left: 0;
  animation: walk-left-to-right linear forwards;
}

@keyframes walk-left-to-right {
  0%   { transform: translateX(-500px); }
  100% { transform: translateX(calc(100vw + 500px)); }
}

/* Walking animation - right to left */
.crowd-right-to-left {
  right: 0;
  animation: walk-right-to-left linear forwards;
}

@keyframes walk-right-to-left {
  0%   { transform: translateX(500px); }
  100% { transform: translateX(calc(-100vw - 500px)); }
}

/* ============================== SHELL LAYOUT ===============================
   Single content column under the fixed pill nav. */
.shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: var(--border-thick);
  background: var(--sky);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 20;
}
.sidebar .sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 24px;
  border-bottom: 2px solid var(--blue);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sidebar .sb-brand .brand-mark {
  width: 22px; height: 22px;
  background: var(--blue);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--blue-dark);
  display: inline-block;
}
.sidebar .sb-brand .ver {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--blue);
  font-weight: 700;
}

.sidebar nav {
  padding: 14px 0 24px;
  flex: 1;
}
.sb-group {
  padding: 18px 24px 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--blue-dark);
  text-transform: uppercase;
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 24px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: background 100ms, border-color 100ms;
}
.sb-link::before {
  content: "▸";
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
}
.sb-link:hover {
  background: #FFE0B2;
  border-left-color: #FFB74D;
}
.sb-link.active {
  background: #FFCC80;
  color: var(--ink);
  border-left-color: #FF9800;
  font-weight: 800;
}
.sb-link.active::before { color: var(--paper-3); }

.sb-external {
  padding: 16px 24px;
  border-top: 2px solid var(--blue);
  background: var(--blue-dark);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.sb-external a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper-3);
  opacity: 1;
  text-decoration: none;
  transition: opacity 100ms, color 100ms;
}
.sb-external a:hover { opacity: 1; color: var(--blue-light); }
.sb-external a .arr { color: var(--blue-light); }

.sb-footer {
  padding: 14px 24px 18px;
  border-top: 2px solid var(--blue);
  background: var(--blue-dark);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--paper-3);
  flex-shrink: 0;
}
.sb-footer .blind {
  display: inline-block;
  background: var(--blue-light);
  color: var(--ink);
  padding: 3px 6px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}

/* mobile drawer toggle */
.mobile-bar {
  display: none;
}

/* main column */
.main-col {
  min-width: 0;
  background: var(--paper);
}

/* compact top banner inside main (persistent across pages) */
.page-header {
  border-bottom: var(--border-thick);
  background: var(--paper);
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.page-header .ph-left {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
}
.page-header .ph-crumb {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}
.page-header .ph-crumb b { color: var(--ink); }
.page-header .ph-tags {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-header .ph-tags .dot { color: var(--blue); }
.page-header .ph-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.page-header .ph-btn {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  background: var(--paper-3);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 7px 12px;
  text-decoration: none;
  transition: transform 100ms, box-shadow 100ms;
}
.page-header .ph-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.page-header .ph-btn.primary { background: var(--blue); }

/* One-page scroll: all sections are always rendered. scroll-margin-top keeps
   anchor jumps clear of the fixed pill nav. */
.page-section { display: block; scroll-margin-top: 76px; }

/* tighter first-section spacing */
.page-section:first-of-type { padding-top: clamp(36px, 5vw, 64px); }
.page-section { border-bottom: none; }
.page-section + .page-section {
  border-top: 2px dashed rgba(0,0,0,0.18);
}
/* No divider directly under the hero — the video background already provides
   a strong visual break, the dashed line just clutters it. */
.hero + .page-section { border-top: 0; }

/* page title (for non-overview pages) */
.page-title {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.page-title .slash { color: var(--blue); }
.page-lede {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  max-width: 70ch;
  margin: 0 0 36px;
  line-height: 1.6;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  padding: clamp(56px, 9vw, 120px) 0;
  border-bottom: var(--border);
}
section:last-of-type { border-bottom: none; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: var(--border-thick);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 60px;
}
.brand {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 22px; height: 22px;
  background: var(--blue);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-block;
}
.topnav {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}
.topnav a {
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 120ms;
}
.topnav a:hover, .topnav a:focus-visible { border-color: var(--blue); outline: none; }

.tagrow {
  border-top: var(--border);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  padding: 9px 0;
}
.tagrow-inner {
  display: flex; gap: 0; align-items: center; flex-wrap: wrap;
  column-gap: 22px;
}
.tagrow-inner span { color: var(--ink); }
.tagrow-inner .dot { color: var(--blue); }

/* ---------- Hero ---------- */
.hero {
  /* Full-viewport-height hero so the WebP background fills the screen.
     dvh on supporting browsers handles mobile address-bar resize cleanly;
     vh is the universal fallback.
     display:flex is set just below. */
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 90px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero { display: flex; }

/* Inside the overview page, the sections form a continuous long scroll —
   no dashed dividers, and a single consistent gap between cards instead of
   each section's own large padding stacking up. */
body.layout-pill .page-section + .page-section {
  border-top: 0 !important;
}
body.layout-pill .page-section[data-page="overview"]:not(.hero) {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

/* Hero video background — sits behind .hero-content, in front of page bg. */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Static fallback while the video loads / if it fails. */
  background: #000;
}
.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* Overlay: a soft wash so the video stays visible but text stays readable. */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%,
      rgba(248, 246, 240, 0.55) 0%,
      rgba(248, 246, 240, 0.25) 60%,
      rgba(248, 246, 240, 0.10) 100%),
    linear-gradient(180deg,
      rgba(248, 246, 240, 0.15) 0%,
      rgba(248, 246, 240, 0.25) 100%);
  pointer-events: none;
}
/* Hero text/buttons must sit above the video layer */
.hero-content {
  position: relative;
  z-index: 1;
}
/* Subtle white halo behind text for legibility on top of the video */
.hero-content h1,
.hero-content .pitch {
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.95),
    0 0 18px rgba(255, 255, 255, 0.85);
}
/* Animated WebP is treated as an image by browsers, so prefers-reduced-motion
   does not auto-pause it the way it does CSS animations. We intentionally
   leave the WebP visible even when reduced-motion is requested — Chrome and
   Safari may still slow it internally; on systems that don't, the user gets
   the intended hero motion (which is what an explicit hero video implies).
   If absolute stillness is needed, the user can pause via browser settings.
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } } */

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 110px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.hero h1::before {
  content: "🌍";
  font-size: 0.8em;
}
.hero h1::after {
  content: "🌐";
  font-size: 0.8em;
}
.hero h1 .slash { color: var(--blue); }
.tagline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  max-width: 22ch;
}
.tagline .accent { color: var(--blue); font-style: italic; }
.pitch {
  font-family: var(--mono);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 64ch;
  margin: 0 auto 36px;
  line-height: 1.55;
  text-align: center;
}
.cursor {
  display: none;
}
@keyframes blink { 50% { opacity: 0; } }

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
}
.btn {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: var(--paper-3);
  color: var(--ink);
  border: var(--border);
  padding: 12px 18px;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 120ms, box-shadow 120ms, background 120ms;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
  outline: none;
}
.btn:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--ink); }
.btn.primary { background: var(--blue); }
.btn .glyph { font-weight: 800; color: var(--blue); }
.btn.primary .glyph { color: var(--ink); }
.btn .badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--blue);
  padding: 3px 6px;
  margin-left: 6px;
}

/* ---------- Section headers ---------- */
.eyebrow {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 10px;
  background: var(--blue);
  border: 2px solid var(--ink);
}
h2.section-title {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0 0 24px;
}
.title-mark {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  background: var(--blue);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--blue-dark);
  margin-right: 0.3em;
  vertical-align: middle;
}
h3.subsection-title {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.04em;
  margin: 8px 0 12px;
  text-align: center;
}

/* ---------- Teaser figure ---------- */
.figbox {
  background: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 2.5px solid var(--blue);
}
.figbox img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.figbox .figbox-cap {
  border-top: var(--border);
  background: var(--paper-3);
  font-family: var(--mono);
  font-size: 13px;
  padding: 14px 18px;
}
.figbox .figbox-cap strong { font-weight: 700; }

.fig-frame {
  margin: 0 auto;
}

/* ---------- Abstract ---------- */
.abstract-body {
  max-width: 100%;
  font-size: 16.5px;
  line-height: 1.65;
  text-align: justify;
}
.abstract-body p { margin: 0 0 18px; }
.abstract-body strong { font-weight: 700; }

/* ---------- Card grids ---------- */
.cards {
  display: grid;
  gap: 24px;
}
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-5 { grid-template-columns: repeat(5, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 28px 24px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 120ms, box-shadow 120ms;
}
.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.card .numeral {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 28px;
  color: var(--blue);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.card .card-title {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.02em;
  margin: 0;
}
.card .card-body {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.card .pts {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 4px 8px;
  align-self: flex-start;
}

/* ---------- Method ---------- */
.method-table {
  border: var(--border-thick);
  background: var(--paper-3);
  box-shadow: var(--shadow);
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13.5px;
}
.method-table th, .method-table td {
  border: 1.5px solid var(--ink);
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
}
.method-table thead th {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.method-table tbody tr:nth-child(even) { background: var(--paper-2); }
.method-table .phase-cell {
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  width: 22%;
}
.method-table .phase-cell .ph-num {
  display: inline-block;
  background: var(--blue);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 1px 7px;
  margin-right: 8px;
  font-size: 11.5px;
}

/* anonymization phases vertical list */
.phase-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.phase-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: start;
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 22px 22px;
}
.phase-row .ph-big {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--blue);
  font-size: 40px;
  line-height: 1;
}
.phase-row h4 {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14.5px;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}
.phase-row p {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
}

.dual-axis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.axis-card {
  background: var(--paper-3, #141414);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: none;
  padding: 22px 20px 24px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.axis-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.axis-card .axis-tag {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 14px;
}
.axis-card h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: none;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  text-wrap: pretty;
}
.axis-card .metric {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 14px;
  color: var(--blue-light);
  text-wrap: pretty;
}
body:not(.dark-theme) .axis-card .metric { color: var(--blue-dark); }
.axis-card .scale {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}
.axis-card .scale b { color: var(--blue); }

/* ---------- Leaderboard ---------- */
.callout {
  background: var(--blue);
  border: var(--border-thick);
  box-shadow: var(--shadow-lg);
  padding: 24px 28px;
  margin: 0 0 36px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 21px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: var(--ink);
}
.callout .big {
  font-size: 1.5em;
  font-weight: 800;
}

.lb-wrap {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.lb {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  min-width: 880px;
}
.lb thead th {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 10px;
  text-align: center;
  border-right: 1px solid #333;
  white-space: nowrap;
}
.lb thead th:last-child { border-right: none; }
.lb thead th.sys-col { text-align: left; }
.lb thead .sub { font-size: 9.5px; opacity: 0.7; display: block; margin-top: 2px; letter-spacing: 0.08em; }
.lb tbody td {
  border: 1px solid var(--ink);
  padding: 11px 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lb tbody td.sys {
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}
.lb tbody td.sys .fn {
  display: block;
  font-weight: 400;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.lb tbody tr:nth-child(even) { background: var(--paper-2); }
.lb tbody tr.best td { background: #fff3e9; }
.lb tbody tr.best td.sys {
  border-left: 6px solid var(--blue);
  padding-left: 14px;
}
.lb tbody td .pair { display: inline-flex; gap: 5px; }
.lb tbody td .pair .c { color: var(--ink); font-weight: 700; }
.lb tbody td .pair .t { color: var(--muted); }
.lb tbody td .pair .sep { color: var(--muted); }
.lb tbody td.avg { font-weight: 800; background: rgba(255,107,26,0.08); }
.lb tbody tr.best td.avg { background: rgba(255,107,26,0.22); }

/* group headers in projected */
.lb tbody tr.group-head td {
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
}

/* projected — italicized numbers */
.lb.projected tbody td .pair, 
.lb.projected tbody td.avg,
.lb.projected tbody td.num { font-style: italic; }

.lb-notes {
  margin: 14px 2px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
}
.lb-notes p { margin: 4px 0; }
.lb-notes .sym { color: var(--blue); font-weight: 700; }

.projected-note {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--paper-3);
  border: 2px solid var(--ink);
  padding: 8px 14px;
  display: inline-block;
  margin-bottom: 20px;
}
.projected-note::before {
  content: "▸ ";
  color: var(--blue);
}

/* ---------- Try the benchmark widget ---------- */
.try-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
}
.panel {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 22px 22px;
}
.panel .panel-label {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.field {
  margin-bottom: 18px;
}
.field-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.select {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 12px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}
.model-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.model-btn {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 11px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 100ms, box-shadow 100ms;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.model-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.model-btn .mtag {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 6px;
}
.model-btn.active {
  background: var(--blue);
  border-color: var(--ink);
}
.model-btn.active .mtag { background: var(--ink); color: var(--blue); }

.view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.view-block {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 22px 22px;
}
.view-block.full { grid-column: span 2; }
.view-block .vb-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 4px;
}
.view-block.full .vb-label .meta {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.context-box {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 14px 16px;
}
.qbox .q {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.qbox .qmeta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.08em;
}
.output-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.output-cell {
  border: 2px solid var(--ink);
  padding: 16px;
  background: var(--paper);
}
.output-cell .num {
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  color: var(--blue);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.output-cell .num.bad {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}
/* Chinese ground-truth format is "第 14 日" — the 第 / 日 are full-width CJK
   glyphs that render at the same 84px height as the digit, making it look
   like three giant words. Scale the whole num down so the digit still feels
   like a hero number but the surrounding characters stop overwhelming it. */
body[data-lang="zh"] .output-cell .num {
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.01em;
}
.output-cell .num-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.output-cell .reason {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  margin-top: 12px;
  border-top: 1.5px solid var(--ink);
  padding-top: 10px;
  color: var(--ink);
}

.reveal-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.gt-values {
  font-family: var(--mono);
  font-size: 14px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.gt-values.hidden { display: none; }
.gt-values .gv b { color: var(--blue); font-weight: 800; font-size: 18px; }
.gt-pending {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.verdict {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 16px;
  border: 2px solid var(--ink);
}
.verdict::before {
  content: "VERDICT — ";
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* ---------- Qualitative ---------- */
.qual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}
.pullquote {
  background: var(--paper-3);
  border: var(--border-thick);
  border-left: 8px solid var(--blue);
  box-shadow: var(--shadow);
  padding: 24px 24px;
}
.pullquote .pq-label {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  color: var(--orange-ink);
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1.55;
}
.pullquote blockquote::before { content: "“"; color: var(--blue); font-weight: 800; }
.pullquote blockquote::after { content: "”"; color: var(--blue); font-weight: 800; }
.pullquote .pq-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 10px;
}

/* ---------- Limitations ---------- */
.lim-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
  max-width: 80ch;
}
.lim-list li {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  padding-left: 28px;
  position: relative;
}
.lim-list li::before {
  content: "▸";
  color: var(--blue);
  font-weight: 800;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
}
.lim-list li strong { font-weight: 700; }

/* ---------- Citation ---------- */
.cite-block {
  background: #0a0a0a;
  color: #f0ece2;
  border: var(--border-thick);
  box-shadow: var(--shadow-lg);
  position: relative;
  padding: 26px 28px 26px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
}
.cite-block pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--mono);
}
.cite-block .copy-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  background: var(--blue);
  color: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 var(--paper);
  padding: 7px 12px;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
}
.cite-block .copy-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--paper);
}
.cite-block .copy-btn.copied { background: var(--paper); color: var(--ink); }
.cite-block .kw { color: var(--blue); }

/* ---------- Footer ---------- */
.footer {
  border-top: var(--border-thick);
  padding: 28px 0 32px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.footer .blind-tag {
  background: var(--ink);
  color: var(--blue);
  padding: 6px 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.footer .back-top {
  text-decoration: none;
  border: 2px solid var(--ink);
  padding: 6px 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: var(--paper-3);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 100ms, box-shadow 100ms;
}
.footer .back-top:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Focus rings ---------- */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- Tabs (cached/live) ---------- */
.tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.tab {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 18px;
  background: var(--paper-3);
  border: var(--border);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
  color: var(--ink);
}
.tab:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.tab.active {
  background: var(--blue);
  box-shadow: 6px 6px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.tab .glyph { color: var(--ink); margin-right: 6px; font-weight: 800; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* mode banner (live-mode status, fallback warnings) */
.mode-banner {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mode-banner.info { background: var(--paper-3); }
.mode-banner.warn { background: var(--blue); }
.mode-banner.error { background: #ffe2db; }
.mode-banner .dot {
  width: 9px; height: 9px; background: var(--blue); border: 1.5px solid var(--ink);
  display: inline-block;
}
.mode-banner.warn .dot { background: var(--ink); }

/* ---------- Live mode ---------- */
.live-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
}

.qchoice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* The 5 question cards stack tall and push the RUN button far down. Cap the
     list height and let it scroll internally so the panel stays compact. */
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
.qchoice-list::-webkit-scrollbar { width: 8px; }
.qchoice-list::-webkit-scrollbar-track { background: transparent; }
.qchoice-list::-webkit-scrollbar-thumb {
  background: var(--paper-2);
  border-radius: 999px;
}
body.dark-theme .qchoice-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
.qchoice {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 110ms, box-shadow 110ms;
  font-family: var(--mono);
}
.qchoice:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.qchoice input { position: absolute; opacity: 0; pointer-events: none; }
.qchoice .qrow-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.qchoice .qtag {
  background: var(--ink);
  color: var(--paper);
  padding: 2px 7px;
}
.qchoice .qtag.win {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.qchoice .qtxt {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.qchoice .qmark {
  width: 14px; height: 14px;
  border: 2px solid var(--ink);
  background: var(--paper-3);
  display: inline-block;
  flex-shrink: 0;
}
.qchoice.selected {
  background: var(--blue);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.qchoice.selected .qmark { background: var(--ink); }
.qchoice.selected .qtag { background: var(--ink); color: var(--blue); }
.qchoice.selected .qtag.win { background: var(--paper); color: var(--ink); }

.model-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.model-pair label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.model-pair .side-tag {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 7px;
  margin-right: 6px;
  font-weight: 800;
}
.model-pair .side-tag.b { background: var(--blue); color: var(--ink); }

.run-btn {
  margin-top: 22px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--ink);
  border: var(--border-thick);
  box-shadow: var(--shadow-lg);
  padding: 16px 22px;
  width: 100%;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
}
.run-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--ink);
}
.run-btn:disabled {
  opacity: 0.55;
  cursor: progress;
  background: var(--paper-2);
}

.live-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.live-card {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
}
.live-card .lc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
}
.live-card .lc-name {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.live-card .lc-side {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 8px;
}
.live-card .lc-side.b { background: var(--blue); color: var(--ink); }
.live-card .lc-num {
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(44px, 5.4vw, 72px);
  color: var(--blue);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.live-card .lc-num-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.live-card .lc-reason {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  border-top: 1.5px solid var(--ink);
  padding-top: 10px;
  margin-top: auto;
}
.live-card.thinking .lc-num::after {
  content: "_";
  color: var(--blue);
  animation: blink 1.05s steps(2, end) infinite;
  margin-left: 4px;
}
.live-card.thinking .lc-reason {
  color: var(--muted);
}
.live-gt-bar {
  margin-top: 18px;
  background: #fff3e9;
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  display: grid;
  gap: 8px;
}
.live-gt-bar .gt-headline {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.live-gt-bar .gt-headline b { color: var(--orange-ink); }
.live-gt-bar .gt-verdicts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.live-gt-bar .gt-verdict {
  font-family: var(--mono);
  font-size: 12.5px;
  border: 2px solid var(--ink);
  background: var(--paper-3);
  padding: 10px 12px;
}
.live-gt-bar .gt-verdict b {
  display: block;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 4px;
}

.budget-bar {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.budget-bar .meter {
  flex: 1;
  height: 8px;
  border: 2px solid var(--ink);
  background: var(--paper);
  position: relative;
  max-width: 220px;
}
.budget-bar .meter .fill {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform-origin: left center;
  transform: scaleX(1);
}
.budget-bar.low .meter .fill { background: var(--ink); }
.budget-bar.low { color: var(--orange-ink); }

/* ---------- Leaderboard caption ---------- */
.lb-caption {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 18px;
  letter-spacing: 0.04em;
}
.lb-caption a {
  color: var(--orange-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--blue);
  letter-spacing: 0.06em;
}
.lb-caption a:hover { background: var(--blue); color: var(--ink); }

/* ---------- Expand the benchmark cards ---------- */
.expand-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}
.expand-card .ec-body {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.expand-card .ec-action {
  align-self: flex-start;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 9px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 110ms, box-shadow 110ms, background 110ms;
}
.expand-card .ec-action:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--blue);
}

/* suggest topic form */
.suggest-form {
  display: none;
  flex-direction: column;
  gap: 10px;
  border-top: 2px dashed var(--ink);
  padding-top: 14px;
  margin-top: 4px;
}
.suggest-form.open { display: flex; }
.suggest-form label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.suggest-form input,
.suggest-form textarea {
  font-family: var(--mono);
  font-size: 12.5px;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 8px 10px;
  box-shadow: 2px 2px 0 var(--ink);
  width: 100%;
}
.suggest-form textarea { resize: vertical; min-height: 70px; }
.suggest-form .field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.suggest-form .submit {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 14px;
  cursor: pointer;
  align-self: flex-start;
}
.suggest-form .submit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.suggest-form .ok-msg {
  background: var(--ink);
  color: var(--blue);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.expand-note {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.expand-note::before { content: "▸ "; color: var(--blue); font-weight: 800; }

/* ---------- Leaderboard sub-tabs (Models / Events) ---------- */
.lb-tab-pane { display: none; }
.lb-tab-pane.active { display: block; }

/* event cards inside Events tab inherit .card / .cards-5 styles */
.lb-event-card {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 120ms, box-shadow 120ms;
}
.lb-event-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.lb-event-card .numeral {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--blue);
  font-size: 28px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.lb-event-card .domain {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.lb-event-card .arc {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}
.lb-event-card .chips {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lb-event-card .chip {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 3px 7px;
}

/* ---------- Expand-card drawer ---------- */
.expand-card .drawer-toggle {
  margin-top: 6px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: background 100ms, color 100ms;
}
.expand-card .drawer-toggle:hover { background: var(--ink); color: var(--blue); }
.expand-card .drawer-toggle[aria-expanded="true"] {
  background: var(--ink);
  color: var(--blue);
}
.expand-card .drawer {
  display: none;
  margin-top: 14px;
  background: #0a0a0a;
  color: #f0ece2;
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  font-family: var(--mono);
}
.expand-card .drawer.open { display: block; }
.expand-card .drawer-pre {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.expand-card .drawer-pre .kw { color: var(--blue); font-weight: 800; }
.expand-card .drawer-pre .dim { color: #898475; }
.expand-card .drawer-cta {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  background: var(--blue);
  color: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 2px 2px 0 var(--paper);
  padding: 8px 12px;
  text-decoration: none;
  transition: transform 110ms, box-shadow 110ms;
}
.expand-card .drawer-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--paper);
}

.discussions-line {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.discussions-line a {
  color: var(--orange-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--blue);
}
.discussions-line a:hover { background: var(--blue); color: var(--ink); }

/* ---------- Results Deep-dive ---------- */
.dd-divider {
  height: 0;
  border-top: 2px dashed rgba(0,0,0,0.22);
  margin: 56px 0;
}
.dd-block .dd-head {
  margin-bottom: 22px;
}
.dd-block .dd-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 2px;
}
.dd-block h3 {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.dd-block .dd-sub {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 86ch;
}
.dd-block .dd-take {
  font-family: var(--mono);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 18px 0 0;
  border-left: 4px solid var(--blue);
  padding: 4px 0 4px 16px;
  color: var(--ink);
  max-width: 88ch;
}
.dd-block .dd-take::before {
  content: "▸ ";
  font-style: normal;
  color: var(--blue);
  font-weight: 800;
  margin-right: 4px;
}

/* Stress card grid */
.dd-stress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dd-stress-card {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dd-stress-card .sc-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
}
.dd-stress-card .sc-name {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.dd-stress-card .sc-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.dd-stress-card .sc-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dd-stress-card .sc-stat {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 3px 7px;
}
.dd-stress-card .sc-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.dd-stress-card .sc-mini {
  border: 2px solid var(--ink);
  padding: 10px 12px;
  background: var(--paper);
}
.dd-stress-card .sc-mini.best {
  background: #fff3e9;
  border-color: var(--blue);
}
.dd-stress-card .sc-mini .mlabel {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--ink);
}
.dd-stress-card .sc-mini.best .mlabel { color: var(--orange-ink); }
.dd-stress-card .sc-mini .mvals {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dd-stress-card .sc-mini .mvals .sep { color: var(--muted); margin: 0 4px; }
.dd-stress-card .sc-gap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 16px;
  border: 2px solid var(--ink);
}
.dd-stress-card .sc-gap .gax {
  font-family: var(--mono);
}
.dd-stress-card .sc-gap .gax-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--paper);
  opacity: 0.55;
  text-transform: uppercase;
}
.dd-stress-card .sc-gap .gax-val {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.dd-stress-card .sc-gap .gax-val.winner {
  color: var(--blue);
  font-size: 42px;
}
.dd-stress-card .sc-gap .gax-pct {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--paper);
  opacity: 0.62;
  margin-top: 2px;
}

/* Ablation tables */
.dd-table-wrap {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.dd-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  min-width: 560px;
}
.dd-table thead th {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: right;
  border-right: 1px solid #333;
  white-space: nowrap;
}
.dd-table thead th:first-child { text-align: left; }
.dd-table thead th:last-child { border-right: none; }
.dd-table tbody td {
  border: 1px solid var(--ink);
  padding: 11px 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dd-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.dd-table tbody tr:nth-child(even) { background: var(--paper-2); }
.dd-table tbody tr.baseline {
  background: #e6f0ff;
}
.dd-table tbody tr.baseline td {
  font-weight: 800;
  border-color: #4f7fc7;
}
.dd-table tbody tr.baseline td:first-child {
  border-left: 6px solid #4f7fc7;
  padding-left: 18px;
}
.dd-table .delta {
  color: #2b58a5;
  font-size: 9.5px;
  font-weight: 700;
  vertical-align: sub;
  margin-left: 3px;
  letter-spacing: 0.04em;
}
.dd-table .delta.extreme {
  color: var(--orange-ink);
  font-weight: 800;
}
.dd-table .num.extreme {
  color: var(--orange-ink);
  font-weight: 800;
}
.dd-table .leak {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--orange-ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-left: 6px;
}

/* responsive */
@media (max-width: 880px) {
  .dd-stress-grid { grid-template-columns: 1fr; }
  .dd-stress-card .sc-mini-row { grid-template-columns: 1fr; }
}

/* Type badges in unified leaderboard */
.lb tbody td.type {
  text-align: center;
  white-space: nowrap;
}
.lb .type-badge {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1.5px solid var(--ink);
  background: var(--paper-3);
  display: inline-block;
}
.lb .type-badge.llm { background: var(--ink); color: var(--paper); }
.lb .type-badge.llm---proj { background: var(--paper); color: var(--ink); }
.lb .type-badge.agent---proj {
  background: var(--paper);
  color: var(--orange-ink);
  border-color: var(--blue);
}
.lb .type-badge.baseline { background: #ddd; color: var(--ink); }
.lb .type-badge.human {
  background: #2b58a5;
  color: #fff;
  border-color: #2b58a5;
}
.lb tbody tr.ital td .pair,
.lb tbody tr.ital td.avg .pair { font-style: italic; }
.lb tbody tr.ital td.sys { font-style: italic; }
.lb tbody tr.reference {
  background: #eef3fb !important;
  border-top: 2px solid #2b58a5;
}
.lb tbody tr.reference td.sys {
  border-left: 6px solid #2b58a5;
  padding-left: 14px;
  font-style: normal;
  font-weight: 800;
}
.lb tbody td.not-reported {
  color: var(--muted);
  font-size: 11.5px;
  text-align: left;
  padding-left: 14px;
  font-style: italic;
}

/* ---------- Preview GT (Live mode) ---------- */
.preview-gt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 6px 10px;
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.preview-gt-btn:hover { background: var(--ink); color: var(--blue); }
.preview-gt-btn[aria-expanded="true"] { background: var(--ink); color: var(--blue); }
.preview-gt-btn[aria-expanded="true"] .pv-glyph::before { content: "▾ "; }
.preview-gt-card {
  margin-top: 10px;
  background: #fff3e9;
  border: 2px solid var(--blue);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 12px 14px;
  font-family: var(--mono);
  /* Long CAL-GT descriptions can run several lines — cap the card height and
     let it scroll internally so it stays compact in the panel. */
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.preview-gt-card::-webkit-scrollbar { width: 8px; }
.preview-gt-card::-webkit-scrollbar-track { background: transparent; }
.preview-gt-card::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 999px; }
body.dark-theme .preview-gt-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
.preview-gt-card .pgt-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  padding: 2px 0;
}
.preview-gt-card .pgt-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--orange-ink);
  text-transform: uppercase;
  min-width: 60px;
}
.preview-gt-card b {
  color: var(--orange-ink);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.preview-gt-card .pgt-note {
  font-size: 11px;
  color: var(--muted);
}
.preview-gt-card .pgt-hint {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* ---------- Custom-question textarea (Live mode) ---------- */
.custom-q {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px dashed rgba(0,0,0,0.22);
}
.custom-q-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.custom-q-label .cq-or { color: var(--muted); }
.custom-q-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.45;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 12px;
  resize: vertical;
  min-height: 64px;
}
.custom-q-input:focus {
  outline: none;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.custom-q-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.cq-toggle {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.cq-toggle input { accent-color: var(--blue); }
.cq-hint {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.cq-hint.active {
  color: var(--orange-ink);
  font-weight: 700;
}

/* ---------- Leaderboard update stamp ---------- */
.lb-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: -4px 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lb-stamp-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.lb-stamp-item b {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.lb-stamp-item .dot {
  width: 8px;
  height: 8px;
  background: var(--blue);
  border: 1.5px solid var(--ink);
  display: inline-block;
  animation: stamp-pulse 2.4s ease-in-out infinite;
}
@keyframes stamp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* sort-toggle arrow inside ctrl-btn */
.bars-toolbar .ctrl-btn .arr {
  display: inline-block;
  margin-left: 4px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---------- Bars view (Leaderboard sub-tab) ---------- */
.bars-toolbar {
  display: flex;
  gap: 18px 28px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--paper-3);
  border: var(--border);
  box-shadow: var(--shadow);
}
.bars-toolbar .ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bars-toolbar .ctrl-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.bars-toolbar .ctrl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.bars-toolbar .ctrl-btn {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 7px 11px;
  cursor: pointer;
  margin: 0 -1px -1px 0;
  transition: background 100ms, color 100ms;
  white-space: nowrap;
}
.bars-toolbar .ctrl-btn:hover { background: var(--paper-2); }
.bars-toolbar .ctrl-btn.active {
  background: var(--blue);
  color: var(--ink);
  z-index: 1;
  position: relative;
}

.bars-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.bars-meta b { color: var(--ink); font-weight: 700; }
.bars-meta .pill {
  display: inline-block;
  border: 1.5px solid var(--ink);
  padding: 1px 6px;
  margin: 0 4px;
  font-weight: 700;
}

.bars-chart {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 18px 22px 22px;
  position: relative;
}
.bars-axis-top {
  display: grid;
  grid-template-columns: 220px 1fr 64px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 12px;
}
.bars-axis-top .ax-track {
  position: relative;
  height: 14px;
  margin-left: 12px;
  margin-right: 8px;
}
.bars-axis-top .ax-track .tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1.5px solid var(--muted);
  padding-left: 4px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 64px;
  align-items: center;
  gap: 0;
  padding: 6px 0;
  font-family: var(--mono);
}
.bar-row .label {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bar-row .label .rank {
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--paper-2);
  padding: 1px 5px;
  border: 1.5px solid var(--ink);
}
.bar-row .label .type-mini {
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 800;
  padding: 1px 5px;
  border: 1.5px solid var(--ink);
  margin-left: auto;
}
.bar-row .label .type-mini.llm        { background: var(--ink); color: var(--paper); }
.bar-row .label .type-mini.proj       { background: var(--paper); color: var(--ink); }
.bar-row .label .type-mini.agent-proj { background: var(--paper); color: var(--orange-ink); border-color: var(--blue); }
.bar-row .label .type-mini.baseline   { background: #ddd; color: var(--ink); }
.bar-row .label .type-mini.human      { background: #2b58a5; color: #fff; border-color: #2b58a5; }

.bar-row.italic .label { font-style: italic; }
.bar-row.reference .label { font-style: normal; }

.bar-row .track {
  position: relative;
  height: 26px;
  border: 2px solid var(--ink);
  background: var(--paper);
  margin-left: 12px;
  margin-right: 8px;
}
.bar-row .track .fill {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 350ms cubic-bezier(.2,.7,.2,1);
}
.bar-row.italic .track .fill { background: repeating-linear-gradient(45deg, var(--blue) 0 6px, #ffb98a 6px 12px); }
.bar-row.reference .track .fill { background: #2b58a5; }
.bar-row.best .track {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.bar-row.best .track .fill { background: var(--blue); }
.bar-row .track .baseline-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 0;
  border-left: 2px dashed var(--muted);
  z-index: 2;
}
.bar-row .track .baseline-mark .lab {
  position: absolute;
  bottom: -16px;
  left: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.bar-row .score {
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.bar-row .score .delta {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.bar-row.best .score { color: var(--orange-ink); }

.bars-legend {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.bars-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.bars-legend .lg i {
  width: 18px; height: 10px; display: inline-block;
  border: 1.5px solid var(--ink);
}
.bars-legend .lg-best i        { background: var(--blue); outline: 2px solid var(--blue); outline-offset: 1px; }
.bars-legend .lg-llm i         { background: var(--blue); }
.bars-legend .lg-proj i        { background: repeating-linear-gradient(45deg, var(--blue) 0 4px, #ffb98a 4px 8px); }
.bars-legend .lg-ref i         { background: #2b58a5; border-color: #2b58a5; }
.bars-legend .lg-baseline-mark i {
  background: transparent;
  border: none;
  border-left: 2px dashed var(--muted);
  width: 2px;
  height: 14px;
}

@media (max-width: 780px) {
  .bars-axis-top, .bar-row { grid-template-columns: 130px 1fr 56px; }
  .bar-row .label { font-size: 11px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 50;
    box-shadow: 8px 0 0 rgba(0,0,0,0.18);
  }
  body[data-drawer="open"] .sidebar { transform: translateX(0); }
  body[data-drawer="open"]::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 40;
  }
  .mobile-bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 25;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 18px;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--border-thick);
    font-family: var(--mono);
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  .mobile-bar .mb-brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--paper); text-decoration: none;
  }
  .mobile-bar .mb-brand .brand-mark {
    width: 18px; height: 18px;
    background: var(--blue);
    border: 2px solid var(--paper);
  }
  .mobile-bar .mb-toggle {
    background: var(--blue);
    color: var(--ink);
    border: 2px solid var(--paper);
    box-shadow: 2px 2px 0 var(--paper);
    padding: 6px 10px;
    font-family: var(--mono);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.14em;
    cursor: pointer;
  }
  .page-header { top: 0; padding: 14px var(--gutter); }
}
@media (max-width: 960px) {
  .cards-3 { grid-template-columns: 1fr; }
  .cards-5 { grid-template-columns: 1fr 1fr; }
  .dual-axis-grid { grid-template-columns: 1fr; }
  .try-grid { grid-template-columns: 1fr; }
  .qual-grid { grid-template-columns: 1fr; }
  .view-grid { grid-template-columns: 1fr; }
  .view-block.full { grid-column: span 1; }
  .output-row { grid-template-columns: 1fr; }
  .live-grid { grid-template-columns: 1fr; }
  .live-result-grid { grid-template-columns: 1fr; }
  .live-gt-bar .gt-verdicts { grid-template-columns: 1fr; }
  .model-pair { grid-template-columns: 1fr; }
  .topnav { display: none; }
}
@media (max-width: 540px) {
  .cards-5 { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(48px, 14vw, 80px); }
  .btn { font-size: 12px; padding: 10px 12px; }
}

/* =============================================================================
 * Language toggle (sidebar)  —  EN / 中
 * Sits just below .sb-brand, above the first .sb-group.
 * ========================================================================== */
.lang-toggle {
  display: flex;
  margin: -6px 24px 22px;
  border: 2px solid var(--ink);
  background: var(--paper-3);
  user-select: none;
}
.lang-btn {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 6px 0 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.lang-btn + .lang-btn { border-left: 2px solid var(--ink); }
.lang-btn:hover { background: var(--paper-2); }
.lang-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.lang-btn.active {
  background: var(--ink);
  color: var(--paper-3);
}

/* Chinese mode retunes the TOKENS rather than overriding consumers: any
   component that re-declares `font-family: var(--mono)` would otherwise throw
   away a CJK tail added further up, and terminate in a generic that hands CJK
   to the OS default (sharp-edged Microsoft YaHei on Windows). CJK families sit
   after the Latin faces, so Latin and numerals keep the mono/grotesk look. */
body[data-lang="zh"] {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --display: "Space Grotesk", -apple-system, "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Mono headings are set uppercase with wide tracking — on CJK that reads as
   harsh and over-spaced, so Chinese headings pull the tracking back in. */
body[data-lang="zh"] h2.section-title,
body[data-lang="zh"] h3.subsection-title,
body[data-lang="zh"] .page-title,
body[data-lang="zh"] .card-title {
  letter-spacing: 0.01em;
}
body[data-lang="zh"] .pitch,
body[data-lang="zh"] .abstract-body,
body[data-lang="zh"] .card-body,
body[data-lang="zh"] .ec-body {
  line-height: 1.75;
}

/* ============================================================================
 * DARK THEME — applied when <body class="dark-theme">
 * Flips the core neutral tokens to a black base while keeping accent blues
 * as the brand color. A handful of stubbornly-hardcoded #fff / overlays are
 * patched below.
 * ========================================================================= */
body.dark-theme {
  --ink: #f1f5f9;
  --paper: #0a0a0a;
  --paper-2: #1a1a1a;
  --paper-3: #141414;
  --blue: #60a5fa;
  --blue-dark: #3b82f6;
  --blue-light: #93c5fd;
  --sky: #1e3a8a;
  --orange: #F59E0B;
  --orange-ink: #FBBF24;  /* lifted for contrast against the near-black canvas */
  --muted: #94a3b8;
  --shadow: 4px 4px 0 rgba(96, 165, 250, 0.22);
  --shadow-lg: 8px 8px 0 rgba(96, 165, 250, 0.16);
  --shadow-xl: 12px 12px 0 rgba(96, 165, 250, 0.12);
  color-scheme: dark;
}
body.dark-theme ::selection { background: #1e40af; color: #f1f5f9; }

/* Crowd people: SVGs use currentColor and inherited body color = #f1f5f9 →
   they'd glow nearly-white against the dark bg. Tone them to a darker grey
   so they read as silhouettes, not flashlights. */
body.dark-theme .crowd-person { color: #cbd5e1; opacity: 0.78; }

/* Topnav: was rgba(255,255,255,…) milky glass — flip to dark glass. */
body.dark-theme .topnav {
  background: rgba(18, 18, 18, 0.82);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
body.dark-theme .topnav-brand { color: #f1f5f9; }
body.dark-theme .topnav-brand .brand-mark { border-color: #f1f5f9; box-shadow: 1.5px 1.5px 0 #000; }
body.dark-theme .topnav .topnav-links a.sb-link { color: #94a3b8; }
body.dark-theme .topnav .topnav-links a.sb-link:hover { color: #f1f5f9; background: rgba(255,255,255,0.06); }
body.dark-theme .topnav .topnav-links a.sb-link.active:not(.topnav-cta) { color: #f1f5f9; background: rgba(255,255,255,0.10); }
body.dark-theme .topnav-aux { border-left-color: rgba(255,255,255,0.10); }
body.dark-theme .topnav-icon { color: #94a3b8; }
body.dark-theme .topnav-icon:hover { background: rgba(255,255,255,0.08); color: #f1f5f9; }
body.dark-theme .topnav-lang { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
body.dark-theme .topnav-lang .lang-btn { color: #94a3b8; }
body.dark-theme .topnav-lang .lang-btn:hover { color: #f1f5f9; background: rgba(255,255,255,0.08); }
body.dark-theme .topnav-lang .lang-btn.active { background: #60a5fa; color: #0a0a0a; box-shadow: 0 1px 6px rgba(96,165,250,0.4); }

/* Hero overlay: was a milky-white veil over the video — flip to a dark veil
   so the video reads as ambient texture, not a foreground. */
body.dark-theme.layout-pill .hero-video-overlay {
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%,
      rgba(10, 10, 10, 0.45) 0%,
      rgba(10, 10, 10, 0.65) 50%,
      rgba(10, 10, 10, 0.85) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.30) 0%, rgba(10, 10, 10, 0.55) 100%);
}

body.dark-theme.layout-pill .hero-title-sub { color: #f1f5f9; }
body.dark-theme.layout-pill .hero-title-sub em {
  background: linear-gradient(90deg, #93c5fd, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.dark-theme.layout-pill .hero .pitch { color: #cbd5e1; }

/* Hero pill buttons: white-on-light was the light theme — flip to dark. */
body.dark-theme.layout-pill .hero .btn {
  background: linear-gradient(180deg, rgba(32,34,38,0.92) 0%, rgba(18,19,22,0.94) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e8ecf2;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 0 0 0.5px rgba(255,255,255,0.05),
    0 8px 20px rgba(0,0,0,0.45);
}
body.dark-theme.layout-pill .hero .btn:hover,
body.dark-theme.layout-pill .hero .btn:focus-visible {
  background: linear-gradient(180deg, rgba(44,47,52,0.95) 0%, rgba(26,28,32,0.96) 100%);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 10px 26px rgba(0,0,0,0.55);
}
body.dark-theme.layout-pill .hero .btn.primary {
  background: linear-gradient(180deg, #ffffff 0%, #e9edf3 100%);
  color: #0a0a0a;
  border-color: rgba(255,255,255,0.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 8px 22px rgba(0,0,0,0.4);
}
body.dark-theme.layout-pill .hero .btn.primary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
  color: #0a0a0a;
  border-color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 12px 30px rgba(0,0,0,0.5);
}

/* Code blocks and a handful of other hard-coded whites. */
body.dark-theme .figbox { background: #f1f5f9; }
body.dark-theme .figbox img { background: #f1f5f9; }
body.dark-theme .lb tbody tr.best td,
body.dark-theme .live-gt-bar,
body.dark-theme .dd-stress-card .sc-mini.best,
body.dark-theme .preview-gt-card,
body.dark-theme .dd-table tbody tr.baseline { background: #1e2a3a; color: #f1f5f9; }
body.dark-theme .mode-banner.error { background: #3a1a1a; color: #fca5a5; }
body.dark-theme .custom-q-input:focus { background: #1a1a1a; }
body.dark-theme code, body.dark-theme pre { background: #161616; color: #f1f5f9; }
/* NOTE: no blanket `body.dark-theme a { color: inherit }` here — the base
   `a { color: inherit }` already sets that default at a specificity that
   accent rules like `.lb-caption a` can beat. Re-declaring it under
   body.dark-theme (0,2,1) would flatten every accent link to body colour. */
body.dark-theme a[href^="http"]:not(.btn):not(.topnav-brand):not(.topnav-icon):not(.sb-link):not(.sb-brand) {
  color: #93c5fd;
}

/* Light-pill accents that were inverted in the original light theme
   (white-on-dark looks fine on a paper background, but on a near-black
   canvas they read as glaring white slabs). Re-invert them in dark mode
   into subtle outlined chips. */
body.dark-theme .method-table thead th,
body.dark-theme .method-table .phase-cell .ph-num,
body.dark-theme .bar-row .label .type-mini.llm,
body.dark-theme .lb .type-badge.llm {
  background: transparent;
  color: #cbd5e1;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}
/* Method-table header: a distinct deep-blue band so the column labels read
   as a header, clearly differentiated from the bright accent blue used for
   the phase numbers below. */
body.dark-theme .method-table thead th {
  background: #15396e;
  color: #cfe2ff;
  border-color: #1e4e9c;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.dark-theme .method-table .phase-cell .ph-num {
  background: #60a5fa;
  color: #0a0a0a;
  border-color: #60a5fa;
}
/* Cell borders inside the dark table look harsh in pure white — soften. */
body.dark-theme .method-table th,
body.dark-theme .method-table td {
  border-color: rgba(255, 255, 255, 0.28);
}
/* Striped rows used a light-blue tint — flip to a barely-visible dark wash. */
body.dark-theme .method-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
body.dark-theme .lb tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
body.dark-theme .dd-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }

/* Callout (the big blue banner) — the original is solid --blue with dark
   text. In dark theme keep blue tint but soften so it doesn't feel like
   a popup card sitting on top of the page. */
body.dark-theme .callout {
  background: rgba(96, 165, 250, 0.12);
  color: #f1f5f9;
  border-color: #60a5fa;
}

/* Callout's nested .big stays bright blue */
body.dark-theme .callout .big { color: #93c5fd; }

/* ----- Abstract: text left, video right (LayerPano3D-style) ----- */
/* This section breaks out of the 1280px .wrap cap to spread text to the far
   left and video to the far right, like the reference layout. */
#abstract .wrap { max-width: 1880px; }
.abstract-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 140px);
  align-items: center;
}
/* "Abstract" heading is centered over the text column. */
/* "Abstract" heading is centered over the text column, with the square mark
   sitting immediately to the left of the centered text. */
.abstract-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35em;
  text-align: center;
  margin-bottom: 22px;
}
.abstract-title .title-mark { margin-right: 0; }
/* The abstract section's .wrap is widened to 1880px for the text+video row,
   but the teaser figure below it should match the 1280px width used by the
   method figures further down the page. */
#abstract > .wrap > .figbox { max-width: var(--max); margin-left: auto; margin-right: auto; }
.abstract-grid .abstract-body { margin: 0; }
.abstract-video {
  margin: 0;
  position: sticky;
  top: 90px;
}
.abstract-video-el {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
}
body.dark-theme .abstract-video-el {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
@media (max-width: 860px) {
  .abstract-grid { grid-template-columns: 1fr; gap: 24px; }
  .abstract-video { position: static; top: auto; order: -1; }
}
body.layout-pill .shell { grid-template-columns: 1fr; }
body.layout-pill .sidebar,
body.layout-pill .page-header,
body.layout-pill .mobile-bar { display: none !important; }

/* The fixed floating nav bar at the top center of the viewport */
.topnav-wrap {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 16px;
}
.topnav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 6px 8px 6px 18px;
  box-shadow:
    0 10px 28px rgba(13, 71, 161, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  max-width: calc(100vw - 32px);
  min-height: 52px;
}
.topnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding: 4px 8px 4px 0;
  border: 0;
}
.topnav-brand .brand-mark {
  width: 18px;
  height: 18px;
  background: var(--blue);
  border: 2px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  flex-shrink: 0;
}
.topnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0 4px;
}
.topnav-links li { margin: 0; padding: 0; }
.topnav .topnav-links a.sb-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: #475569;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
  /* override sidebar's ::before triangle */
}
.topnav .topnav-links a.sb-link::before { content: none; }
.topnav .topnav-links a.sb-link:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
  border-left-color: transparent;
}
.topnav .topnav-links a.sb-link.active:not(.topnav-cta) {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.06);
  font-weight: 700;
  border-left-color: transparent;
}
.topnav-aux {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  align-self: stretch;
}
/* "Try it" is the primary call to action — gold shimmering text. */
.topnav .topnav-links a.sb-link.topnav-cta {
  position: relative;
  font-weight: 800;
  gap: 5px;
  background: linear-gradient(100deg, #b8860b 0%, #ffd700 35%, #fff6c0 50%, #ffd700 65%, #b8860b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ctaShine 3s linear infinite, ctaPulse 2.2s ease-in-out infinite;
}
.topnav .topnav-links a.sb-link.topnav-cta:hover,
.topnav .topnav-links a.sb-link.topnav-cta.active {
  background: linear-gradient(100deg, #b8860b 0%, #ffd700 35%, #fff6c0 50%, #ffd700 65%, #b8860b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes ctaShine { from { background-position: 200% 0; } to { background-position: -50% 0; } }
@keyframes ctaPulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,190,60,0.55)); }
  50% { filter: drop-shadow(0 0 9px rgba(255,215,0,0.95)); }
}
@media (prefers-reduced-motion: reduce) {
  .topnav .topnav-links a.sb-link.topnav-cta { animation: none; }
}
.cta-star { font-size: 11px; line-height: 1; }
.topnav-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #475569;
  text-decoration: none;
  flex-shrink: 0;
  align-self: center;
  transition: background 140ms ease, color 140ms ease;
}
.topnav-icon:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.topnav-icon svg { width: 17px; height: 17px; }
.topnav-lang {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.06);
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 999px;
  padding: 0 3px;
  gap: 2px;
  height: 30px;
  align-self: center;
  margin: 0;
}
.topnav-lang .lang-btn + .lang-btn { border-left: 0; }
.topnav-lang .lang-btn {
  background: transparent;
  border: 0;
  padding: 0 12px;
  height: 24px;
  min-width: 36px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #475569;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease;
}
.topnav-lang .lang-btn:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
.topnav-lang .lang-btn[data-lang="zh"] {
  font-family: var(--cjk);
  font-size: 14px;
  letter-spacing: 0;
}
.topnav-lang .lang-btn.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 4px rgba(13, 71, 161, 0.3);
}
.topnav-lang .lang-btn + .lang-btn { border-left: 0; }
.topnav-lang .lang-btn.active {
  background: var(--ink);
  color: #fff;
}

/* ----- Hero composition under the pill layout ----- */
body.layout-pill .hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: clamp(110px, 14vw, 160px);
  padding-bottom: clamp(80px, 10vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
body.layout-pill .hero-content {
  text-align: center;
  width: 100%;
  max-width: 1080px;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Announcement pill */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 7px 16px 7px 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 28px;
  text-shadow: none;
}
.hero-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

/* H1 reset for the pill layout — drop the uppercase + emoji flanking */
body.layout-pill .hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
  margin: 0 auto 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: min(95vw, 1100px);
  color: var(--ink);
}
body.layout-pill .hero h1::before,
body.layout-pill .hero h1::after { content: none; }
.hero-title-main {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--script);
  font-size: 2.35em;
  font-weight: 700;
  letter-spacing: 0.005em;
  /* The script face still descends below its box, so keep a little leading. */
  line-height: 1.22;
  background: none;
  color: var(--ink);
}
/* "Society" — the calligraphic half, in gold. */
.hero-title-main em {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  background: linear-gradient(170deg, #fff2b8 0%, #ffd700 38%, #e0a80c 72%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* "Bench" — rounded geometric sans, softer counterpoint to the script. */
.hero-title-main b {
  font-family: "Archivo Black", var(--display);
  font-weight: 400;
  font-size: 0.46em;
  letter-spacing: -0.01em;
  margin-left: 0.1em;
  /* Solid black glyphs ringed in gold: paint-order puts the stroke behind the
     fill so the outline sits outside the letterform instead of eating it. */
  background: none;
  color: #000;
  -webkit-text-fill-color: #000;
  -webkit-text-stroke: 4px #d4a017;
  paint-order: stroke fill;
}
.wm-slash {
  font-family: var(--display);
  font-style: normal;
  font-weight: 300;
  font-size: 0.4em;
  margin: 0 0.22em;
  transform: translateY(-0.12em);
  background: linear-gradient(180deg, #ffd700, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title-sub {
  display: inline-block;
  /* The script wordmark carries a tall line box (deep descenders need the
     leading), which leaves a visual gap far bigger than the metric one — pull
     the sub-title back up into that empty half-leading. */
  margin-top: -0.06em;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.hero-title-sub em {
  font-style: normal;
  color: var(--blue-dark);
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.layout-pill .hero .pitch {
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  color: #475569;
  max-width: 64ch;
  margin: 0 auto 40px;
  line-height: 1.55;
  text-align: center;
  text-shadow: none;
}
body.layout-pill .hero .pitch .cursor { display: none; }

/* Pill action buttons */
body.layout-pill .hero .btnrow {
  margin-top: 0;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.layout-pill .hero .btn {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  /* Labels must never break mid-word: CJK fallbacks differ in width by a
     fraction of a pixel and the content box has almost no slack, so let the
     button grow instead of wrapping the text. */
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  color: var(--ink);
  border-radius: 999px;
  padding: 15px 30px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 16px rgba(0, 0, 0, 0.04);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
body.layout-pill .hero .btn:hover,
body.layout-pill .hero .btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  background: #fff;
  outline: none;
}
body.layout-pill .hero .btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
body.layout-pill .hero .btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
body.layout-pill .hero .btn.primary:hover {
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20);
}
body.layout-pill .hero .btn .glyph { display: none; }
body.layout-pill .hero .btn .badge {
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 9.5px;
  margin-left: 4px;
}
body.layout-pill .hero .btn.primary .badge { background: rgba(255, 255, 255, 0.2); }

/* Slightly stronger overlay so the title stays legible over the video */
body.layout-pill .hero-video-overlay {
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%,
      rgba(248, 249, 252, 0.72) 0%,
      rgba(248, 249, 252, 0.55) 45%,
      rgba(248, 249, 252, 0.35) 100%),
    linear-gradient(180deg, rgba(248, 249, 252, 0.30) 0%, rgba(248, 249, 252, 0.45) 100%);
}
body.layout-pill .hero-content h1,
body.layout-pill .hero-content .pitch { text-shadow: none; }

/* Reveal the first section right under the hero with a clean offset */
body.layout-pill main#top { padding-top: 0; }
/* On non-overview pages there is no hero pushing content down, so add
   breathing room under the floating pill nav. */
body.layout-pill.subpage main#top {
  /* Leave room for the floating pill nav: ~18px top offset + ~52px pill
     height + breathing room. */
  padding-top: clamp(86px, 7vw, 100px);
}
/* Trim per-section padding on non-overview pages so the title sits close
   to the floating pill nav instead of hovering in a giant void. */
body.layout-pill.subpage .page-section {
  padding-top: clamp(8px, 1vw, 16px);
  padding-bottom: clamp(40px, 5vw, 64px);
  /* On subpages only one section is ever visible, so the adjacent-sibling
     dashed divider would just float as a stray line under the pill nav.
     Strip it. */
  border-top: 0 !important;
}
/* Smaller page titles — the original 76px hero-size was meant to act as the
   hero on each subpage; in the new pill-layout the hero only lives on home,
   so subpage titles can read at a more conventional H1 scale. */
body.layout-pill.subpage .page-title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  margin-bottom: 8px;
}
body.layout-pill.subpage .page-lede {
  font-size: 14px;
  margin-bottom: 24px;
}

/* Tablet — collapse internal nav links */
@media (max-width: 900px) {
  .topnav { padding: 6px 10px; gap: 6px; }
  .topnav-brand { font-size: 15px; padding-right: 4px; }
  .topnav-links { display: none; }
  .topnav-aux { padding-left: 6px; margin-left: 2px; }
}
/* On narrow screens the sub line is too long to fit even at 0.62em — let it
   wrap naturally there. */
@media (max-width: 720px) {
  .hero-title-sub { white-space: normal; font-size: 0.55em; }
  body.layout-pill .hero h1 { font-size: clamp(32px, 8vw, 48px); }
}
@media (max-width: 540px) {
  .topnav-wrap { top: 12px; padding: 0 10px; }
  body.layout-pill .hero { padding-top: 100px; }
}


/* ===================== Deep-dive: validity evidence bars ================== */
.vb-title { margin-top: 0; }
.vb-lede {
  max-width: 78ch;
  margin: 0 auto 26px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.vb-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}
.vb-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr 92px;
  align-items: center;
  gap: 16px;
}
.vb-name {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: right;
}
.vb-track {
  position: relative;
  height: 26px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  overflow: hidden;
}
.vb-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.35), rgba(96, 165, 250, 0.7));
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vb-val {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.vb-leak {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: #f59e0b;
}
/* Our protocol is the reference line — mark it, don't shout it. */
.vb-row.is-ours .vb-name { color: var(--ink); font-weight: 700; }
.vb-row.is-ours .vb-track { border-color: rgba(96, 165, 250, 0.55); }
.vb-row.is-ours .vb-fill { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.vb-conclusion {
  max-width: 78ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 500;
}
.vb-more {
  max-width: 78ch;
  margin: 10px auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
}
@media (max-width: 640px) {
  .vb-row { grid-template-columns: 1fr; gap: 4px; }
  .vb-name { text-align: left; }
}

/* Subpage (demo.html): no hero, so clear the fixed nav. */
body.layout-pill.subpage main#top { padding-top: clamp(86px, 7vw, 100px); }

/* The generic .sb-link.active background must not flatten the CTA's gradient
   (background-clip:text + transparent fill would paint nothing). */
.topnav .topnav-links a.sb-link.topnav-cta.active,
.topnav .topnav-links a.sb-link.topnav-cta:hover,
.topnav .topnav-links a.sb-link.topnav-cta {
  background-image: linear-gradient(100deg, #b8860b 0%, #ffd700 35%, #fff6c0 50%, #ffd700 65%, #b8860b 100%);
  background-color: transparent;
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero actions: keep the three buttons on one row down to small screens so they
   never wrap 2 + 1 into a stranded centered row. */
body.layout-pill .hero .btnrow { flex-wrap: nowrap; }
@media (max-width: 900px) {
  body.layout-pill .hero .btn { padding: 11px 18px; font-size: 13.5px; }
}
@media (max-width: 520px) {
  body.layout-pill .hero .btnrow { flex-wrap: wrap; }
}

/* ---------- Method sub-block headings ----------
   Same eyebrow-over-title pattern as the deep-dive sub-blocks: a small
   tracked blue label with a rule under it, then the heading, left-aligned. */
.mth-head { margin: 40px 0 18px; }
.mth-head .mth-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 2px;
}
.mth-head .subsection-title {
  margin: 0;
  text-align: left;
  letter-spacing: -0.005em;
  font-size: clamp(20px, 2.4vw, 28px);
}
body[data-lang="zh"] .mth-head .mth-num { letter-spacing: 0.14em; }


/* ---------- Method step cards ----------
   Numbered cards in a row, replacing the old two-column table and the
   number-beside-paragraph phase list. Auto-fit so 3- and 4-up rows both
   reflow to fewer columns on narrow screens instead of squeezing. */
.step-cards {
  display: grid;
  gap: 16px;
  margin: 0 0 8px;
}
.step-cards-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.step-cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step-card {
  background: var(--paper-3, #141414);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 22px 20px 24px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.step-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.step-card .sc-num {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 14px;
}
.step-card .sc-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
  text-wrap: pretty;
}
.step-card .sc-body {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: var(--blue-light);
  text-wrap: pretty;
}
.step-card .sc-body em { font-style: normal; color: var(--ink); }
.step-card .sc-body strong { color: var(--ink); }
body:not(.dark-theme) .step-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}
body:not(.dark-theme) .step-card .sc-body { color: var(--blue-dark); }
body[data-lang="zh"] .step-card .sc-title { letter-spacing: 0.01em; }

body:not(.dark-theme) .axis-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}
body:not(.dark-theme) .axis-card .scale { border-top-color: rgba(0, 0, 0, 0.1); }
body[data-lang="zh"] .axis-card h4 { letter-spacing: 0.01em; }

/* ===========================================================================
   2026-08-02 — layout + chrome adjustments
   =========================================================================== */

/* The three method sub-blocks lost their "SUB-BLOCK NN / …" eyebrows, so the
   title and its lead-in now centre over the cards they introduce instead of
   starting hard against the left rule. */
.mth-head.mth-center {
  text-align: center;
  align-items: center;
  justify-content: center;
}
.mth-head.mth-center .subsection-title { text-align: center; }
.mth-intro-center {
  text-align: center;
  /* !important because these paragraphs carry an inline `margin` shorthand,
     which would otherwise reset the auto side-margins and leave the 78ch block
     hugging the left edge with its text merely centred inside it. */
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 78ch;
}

/* Same treatment for the leaderboard header: title, freshness stamp and the
   one-line caption all centre; the table and everything below it are
   untouched. */
.section-title.lb-center {
  justify-content: center;
  text-align: center;
}
.lb-stamp.lb-center {
  justify-content: center;
  text-align: center;
}
.lb-caption.lb-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Frames: a 2.5–4 px saturated blue ring around every table, card and figure
   read as glare rather than as structure — at this density the page was more
   outline than content. Neutral hairlines instead. Blue is kept where it
   carries meaning: links, title marks, active tabs, the best-in-table row. */
:root {
  --border: 1.5px solid rgba(24, 24, 27, 0.14);
  --border-thick: 2px solid rgba(24, 24, 27, 0.18);
}
body.dark-theme {
  --border: 1.5px solid rgba(255, 255, 255, 0.12);
  --border-thick: 2px solid rgba(255, 255, 255, 0.16);
}
.figbox { border: var(--border) !important; }
.callout { border: var(--border) !important; }

/* --- Leaderboard header + table proportions ------------------------------ */

/* Keep the freshness stamp on one line at any width. It is three short
   label/value pairs; letting them wrap turned a caption into a paragraph. */
.lb-stamp.lb-center {
  flex-wrap: nowrap;
  gap: 14px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .lb-stamp.lb-center { font-size: 10.5px; gap: 10px; }
}

/* The three view tabs sit under a centred title, so centre them too. */
.tabs { justify-content: center; }

/* The System column was taking 43% of the table (532 of 1236 px) because auto
   layout hands all slack to the only text column, squeezing every score into
   101 px. Fixed layout with an explicit first column shares the width out
   evenly instead. */
.lb { table-layout: fixed; }
.lb th:first-child,  .lb td:first-child  { width: 224px; }
.lb th:nth-child(2), .lb td:nth-child(2) { width: 78px; }
.lb td:first-child { overflow-wrap: anywhere; }

/* --- Question pickers on the Try-it page --------------------------------- */
/* Each prediction point carries several calibration questions and several
   temporal events; these two selects sit on the right of the block labels and
   choose which one the widget is answering. */
.qbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.q-pick {
  flex: 0 1 min(340px, 58%);
  font: inherit;
  font-size: 11.5px;
  font-family: var(--mono);
  padding: 4px 8px;
  color: var(--ink);
  background: var(--paper, #fff);
  border: var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-overflow: ellipsis;
}
body.dark-theme .q-pick { color: #e8e8ea; background: rgba(255, 255, 255, 0.05); }
.q-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (max-width: 720px) {
  .qbox-head { flex-direction: column; align-items: stretch; }
  .q-pick { flex: 1 1 auto; }
}

/* A <select> is intrinsically as wide as its longest option. The point and
   question pickers now carry long question text, so clear the min-width that
   would otherwise push the whole grid past the viewport. */
.q-pick { min-width: 0; max-width: 100%; }
.select { min-width: 0; max-width: 100%; }
.field,
.panel,
.view-grid,
.view-block,
.qbox { min-width: 0; }
/* When the label and the picker cannot sit side by side, the picker takes its
   own full-width row rather than shrinking to an unreadable stub. */
.qbox-head { flex-wrap: wrap; }
.q-pick { flex: 1 1 190px; }
/* Note under the live-mode preset list: how many questions the point really has. */
.qchoice-note {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 8px 2px 0;
}

/* The three difficulty ablations share one block; the buttons swap the table. */
.dd-head-center { text-align: center; }
.dd-head-center h3 { margin-left: auto; margin-right: auto; }
.dd-head-center .dd-sub { margin-left: auto; margin-right: auto; }
.dd-tabs { justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }

/* The freshness stamp and the "want your model here?" line are one row. */
.lb-stamp-cta { font-weight: 600; }
.lb-stamp-cta a { white-space: nowrap; }
@media (max-width: 900px) {
  .lb-stamp.lb-center { flex-wrap: wrap; white-space: normal; }
}

/* --- Homepage rhythm ----------------------------------------------------- */
/* 120 px of padding on both sides of every section put 240 px of nothing
   between blocks. Even, but far too airy once the page lost two sections. */
.page-section { padding-top: 76px; padding-bottom: 76px; }
body.layout-pill .page-section.hero {
  padding-top: clamp(110px, 14vw, 160px);   /* clears the floating nav */
  /* The block is centred between the paddings, so a bottom pad larger than the
     top one lifts the title off the vertical centre — it reads as sitting too
     low otherwise, with the nav taking the eye's top edge. */
  padding-bottom: clamp(150px, 16vw, 232px);
}

/* Citation now closes the Contribute block instead of owning a section. */
.cite-sub { margin-top: 52px; }
.cite-sub-title {
  text-align: center;
  margin: 0 auto 18px;
}

/* --- Dark theme: light-theme leftovers that turn into glare or vanish ------ */
/* The two baseline rows kept a light-theme background (#eef3fb) while the text
   stayed light: contrast 1.02, i.e. invisible. Same for the BASELINE badge on
   #ddd. Both become a quiet tint of the page instead. */
body.dark-theme .lb tbody tr.reference {
  background: rgba(255, 255, 255, 0.05) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.16);
}
body.dark-theme .lb tbody tr.reference td.sys {
  border-left: 3px solid rgba(255, 255, 255, 0.22);
}
body.dark-theme .lb .type-badge.baseline,
body.dark-theme .lb .type-badge.llm---proj,
body.dark-theme .lb .type-badge.agent---proj {
  background: transparent;
  color: #cbd5e1;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}
body.dark-theme .lb .type-badge.human {
  background: transparent;
  color: #93b4e8;
  border: 1.5px solid rgba(147, 180, 232, 0.45);
}

/* Near-white blocks on a dark page read as glare. Table headers, the panel
   label and the verdict box carry no meaning in their brightness, so they get
   the same quiet tint as everything else. */
body.dark-theme .lb thead th,
body.dark-theme .dd-table thead th {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}
body.dark-theme .panel-label {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}
body.dark-theme .verdict {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

/* The baseline rows carry a one-sentence footnote in the System cell. The cell
   is nowrap (so model names never break) and fixed at 224 px, so the sentence
   ran straight across the next three columns. Let that one span wrap. */
.lb tbody td.sys .fn {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
  max-width: 100%;
}

/* The AVG column was tinted with 8% orange, which over a near-black page reads
   as a muddy brown band rather than as emphasis. Neutral tint instead; the
   column already stands out through its bold weight and its position. */
body.dark-theme .lb tbody td.avg { background: rgba(255, 255, 255, 0.05); }
body.dark-theme .lb tbody tr.best td.avg { background: rgba(147, 180, 232, 0.14); }
/* BASELINE is the longest type badge and overran its 77 px column by 5 px. */
.lb .type-badge.baseline { font-size: 8.5px; letter-spacing: 0.1em; }


/* ===================== Small headings, calmed down ======================= */
/* The view tabs were a solid bright-blue block with a 6 px hard white shadow —
   the loudest thing on the page for a control that only switches a table. A
   selected tab now reads through a quiet tint and a thin accent underline. */
.tab {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 9px 16px;
  background: transparent;
  border: var(--border);
  border-bottom: 2px solid transparent;
  box-shadow: none;
  color: var(--muted);
  transition: color 120ms, background 120ms, border-color 120ms;
}
.tab:hover {
  transform: none;
  box-shadow: none;
  color: var(--ink);
  background: rgba(127, 127, 127, 0.07);
}
.tab.active {
  transform: none;
  box-shadow: none;
  background: rgba(127, 127, 127, 0.09);
  color: var(--ink);
  border-bottom-color: var(--blue);
}
.tab .glyph { color: inherit; font-weight: 600; opacity: 0.6; }

/* Eyebrow labels: they name a box, they are not the content. Muted, lighter,
   and underlined with a hairline instead of a 2 px blue rule. */
.view-block .vb-label {
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--muted);
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}
.field-label {
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--muted);
}
.panel .panel-label {
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: transparent;
  border: var(--border);
  padding: 3px 8px;
}
.expand-card .drawer-toggle {
  font-weight: 600;
  letter-spacing: 0.12em;
  border: var(--border);
  color: var(--muted);
}
.expand-card .drawer-toggle:hover { color: var(--ink); background: rgba(127, 127, 127, 0.07); }

/* The headline callout kept an 8 px blue hard shadow. Same tint, no shadow. */
.callout { box-shadow: none; }

/* ======================= Leaderboard table, redrawn ===================== */
/* It was a grid: every cell boxed in a 1 px rule, a solid black header band,
   zebra striping, an orange column and a hard-shadowed best row. Six competing
   signals for one ranking. Now: no vertical rules, one hairline per row, and
   emphasis carried by weight and a single accent on the leading row. */
.lb thead th {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.11em;
  padding: 0 12px 12px;
  border-right: none;
  border-bottom: 1.5px solid rgba(127, 127, 127, 0.3);
}
.lb thead .sub { opacity: 0.65; letter-spacing: 0.06em; }
.lb tbody td {
  border: none;
  border-bottom: 1px solid rgba(127, 127, 127, 0.16);
  padding: 13px 12px;
}
.lb tbody tr:last-child td { border-bottom: none; }
.lb tbody tr:nth-child(even) { background: transparent; }
.lb tbody tr:hover td { background: rgba(127, 127, 127, 0.06); }
.lb tbody td.sys { font-weight: 600; letter-spacing: 0.01em; }
.lb tbody td.sys .fn { font-size: 10px; opacity: 0.85; }

/* The leading row: a tint and a 2 px accent bar, no shadow, no colour block. */
.lb tbody tr.best td { background: rgba(96, 165, 250, 0.07); }
.lb tbody tr.best td.sys {
  border-left: 2px solid var(--blue);
  padding-left: 14px;
  box-shadow: none;
}
.lb tbody tr.best td:last-child { box-shadow: none; }

/* AVG is the column that decides the order: separated by a hairline and set in
   the full ink colour, with no fill of its own. */
.lb thead th:last-child,
.lb tbody td.avg {
  border-left: 1px solid rgba(127, 127, 127, 0.3);
  background: transparent;
}
body.dark-theme .lb tbody td.avg { background: transparent; }
body.dark-theme .lb tbody tr.best td.avg { background: transparent; }
.lb tbody td.avg .pair .c,
.lb tbody td.avg .pair .t { color: var(--ink); font-weight: 700; }
.lb tbody td.avg { font-size: 13.5px; }

/* Cal | Time: the calibration number leads, the temporal number follows in a
   lighter tone, and the separator recedes. */
.lb tbody td .pair { gap: 6px; }
.lb tbody td .pair .sep { opacity: 0.35; font-weight: 400; }
.lb tbody td .pair .t { opacity: 0.75; }

/* Type badges shrink to a quiet word — the column header already says "type". */
.lb .type-badge {
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  padding: 0;
}
body.dark-theme .lb .type-badge.llm,
body.dark-theme .lb .type-badge.baseline,
body.dark-theme .lb .type-badge.human,
body.dark-theme .lb .type-badge.llm---proj,
body.dark-theme .lb .type-badge.agent---proj {
  background: transparent;
  border: none;
  color: var(--muted);
}
.lb tbody tr.best .type-badge { color: var(--blue); }

/* Bars controls: same treatment as the view tabs — selected reads through a
   quiet tint and the ink colour, not a solid blue chip. */
.bars-toolbar .ctrl-btn, .ctrl-btn {
  background: transparent;
  border: var(--border);
  color: var(--muted);
  font-weight: 600;
  box-shadow: none;
}
.bars-toolbar .ctrl-btn:hover, .ctrl-btn:hover { background: rgba(127, 127, 127, 0.07); color: var(--ink); transform: none; }
.bars-toolbar .ctrl-btn.active, .ctrl-btn.active {
  background: rgba(127, 127, 127, 0.09);
  color: var(--ink);
  border-color: rgba(127, 127, 127, 0.4);
  box-shadow: none;
  transform: none;
}
.ctrl-label { color: var(--muted); font-weight: 600; }

/* Model picker on the Try-it page: selected reads through a tint and a left
   accent, matching the tabs and the leaderboard's leading row. */
.model-btn.active {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.45);
  border-left: 2px solid var(--blue);
}
.model-btn.active .mtag { background: transparent; color: var(--blue); border-color: transparent; }
.model-btn .mtag { background: transparent; color: var(--muted); border: none; font-weight: 600; }

/* ================= Ablation tables, matched to the leaderboard ============ */
/* Same reading: no cell grid, one hairline per row, a transparent header, and
   the reference row set off by a rule rather than a colour block. */
.dd-table-wrap {
  background: transparent;
  border: var(--border);
  box-shadow: none;
}
.dd-table thead th {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.11em;
  padding: 14px 14px 12px;
  border-right: none;
  border-bottom: 1.5px solid rgba(127, 127, 127, 0.3);
}
.dd-table tbody td {
  border: none;
  border-bottom: 1px solid rgba(127, 127, 127, 0.16);
  padding: 13px 14px;
}
.dd-table tbody tr:last-child td { border-bottom: none; }
.dd-table tbody tr:nth-child(even) { background: transparent; }
.dd-table tbody tr:hover td { background: rgba(127, 127, 127, 0.06); }

/* The full-bank row is what every other row is measured against: a top rule
   and full-strength figures, no fill. */
.dd-table tbody tr.baseline { background: transparent; }
.dd-table tbody tr.baseline td {
  font-weight: 700;
  /* An older rule painted every border on this row #4f7fc7, which showed up as
     a blue column separator on the last cell only. */
  border-color: rgba(127, 127, 127, 0.3);
  border-top: 1.5px solid rgba(127, 127, 127, 0.35);
  border-bottom: none;
}
/* No accent bar on the reference row: it reads as a different kind of cell
   next to the rows above it. The top rule and the heavier figures are enough. */
.dd-table tbody tr.baseline td:first-child {
  border-left: none;
  padding-left: 14px;
}
/* The last column is the one the block is about; set it off like AVG. */
.dd-table thead th:last-child,
.dd-table tbody td:last-child { border-left: 1px solid rgba(127, 127, 127, 0.3); }

/* Deltas are annotation, not data: they recede unless they are the extreme. */
.dd-table .delta { color: var(--muted); font-weight: 600; opacity: 0.85; }
.dd-table .delta.extreme { opacity: 1; }
/* Dark theme kept a solid slate fill on the full-bank row and a stripe on the
   even rows; both predate the hairline treatment above. */
body.dark-theme .dd-table tbody tr.baseline { background: transparent; }
body.dark-theme .dd-table tbody tr:nth-child(even) { background: transparent; }
body.dark-theme .dd-table tbody tr:hover td { background: rgba(255, 255, 255, 0.05); }

/* --- Try-it: readable dropdowns, and a context box that folds ------------- */
/* A native <select> popup takes its colours from the options; ours had none,
   so the list rendered white while the text stayed near-white. */
body.dark-theme .q-pick,
body.dark-theme .select { color-scheme: dark; }
body.dark-theme .q-pick option,
body.dark-theme .select option { background: #15181d; color: #e8e8ea; }

/* The context is a few hundred words. Clamped by default with a fade, so the
   two questions and the model output stay visible without scrolling. */
.context-box { position: relative; }
.context-box.clamped {
  max-height: 9.2em;
  overflow: hidden;
}
.context-box.clamped::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.2em;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}
body.dark-theme .context-box.clamped::after {
  background: linear-gradient(to bottom, transparent, #0f1115);
}
.ctx-toggle {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: var(--border);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}
.ctx-toggle:hover { color: var(--ink); background: rgba(127, 127, 127, 0.07); }

/* --- Try-it: tighter ---------------------------------------------------- */
/* Boxes were padded like posters and stretched to a common height, so a
   two-line question sat in a 300 px card. They hug their content now. */
.view-grid { gap: 14px; align-items: start; }
.view-block { padding: 16px 18px; }
.panel { padding: 18px; }
.model-btn { padding: 9px 12px; }
.model-btns { gap: 7px; }
.field { margin-bottom: 14px; }
/* An 84 px numeral for a two-digit probability was the loudest thing here. */
.output-cell .num,
body[data-lang="zh"] .output-cell .num { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; }
.out-num-label, .vb-label { margin-bottom: 8px; }

/* The four ablation buttons were sized by their labels, so the row read as
   ragged (291 / 213 / 213 / 239 px) and wrapped unevenly. Equal columns
   instead: one row on desktop, 2x2 on tablets, stacked on phones. */
.dd-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
.dd-tabs .tab {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
  padding: 9px 10px;
}
@media (max-width: 1080px) {
  .dd-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 520px) {
  .dd-tabs { grid-template-columns: 1fr; max-width: 340px; }
}

/* --- Try-it: fixed question boxes, one compact result strip -------------- */
/* The two question boxes resized with every pick, so the whole column jumped.
   Fixed height instead; a long question scrolls inside its own box. */
.qbox { min-height: 216px; }
.qbox .q {
  max-height: 7.4em;
  overflow-y: auto;
  margin-bottom: 8px;
  padding-right: 4px;
  font-size: 13.5px;
  line-height: 1.55;
}
/* A question longer than the fixed box scrolls; keep the scrollbar quiet. */
.qbox .q::-webkit-scrollbar { width: 6px; }
.qbox .q::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.35); border-radius: 3px; }
.qbox .qmeta { margin-top: auto; }
.qbox { display: flex; flex-direction: column; }

/* Ground truth and verdict on one line. */
.gt-strip .reveal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.gt-strip .gt-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0;
}
/* `.gt-strip .gt-values` outranks `.hidden`, so the truth stayed on screen
   before the reveal — the verdict line gave the answer away. */
.gt-strip .gt-values.hidden { display: none; }
.gt-strip .btn.primary { padding: 8px 14px; font-size: 11.5px; }
.gt-strip .gv { font-size: 12px; }
.gt-strip .gv.verdict {
  background: transparent;
  border: none;
  padding: 0;
  font-style: italic;
  color: var(--muted);
}
/* The model output pair: smaller label, tighter cells, one-line reason. */
.output-row { gap: 12px; }
.output-cell { padding: 12px 14px; }
.output-cell .reason { font-size: 11.5px; line-height: 1.45; margin-top: 6px; }
.output-cell .num-label { margin-bottom: 4px; }
/* The verdict's label was baked into CSS content, so it stayed English in the
   Chinese view. The strip already reads as the result line; drop the prefix. */
.verdict::before { content: none; }

/* --- Full context in its own window -------------------------------------- */
.ctx-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 10px; }
.anon-note {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  min-width: 0;
}
/* Only the note under the box shares a row with the button. Inside the modal
   the panel is a flex column, where `flex: 1 1 320px` read as a 320 px tall
   basis and left a hole under the note. */
.ctx-foot .anon-note { flex: 1 1 320px; }
.ctx-modal-panel .anon-note { flex: 0 0 auto; }
.ctx-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.ctx-modal[hidden] { display: none; }
.ctx-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.ctx-modal-panel {
  position: relative;
  width: min(900px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--paper);
  border: var(--border-thick);
}
body.dark-theme .ctx-modal-panel { background: #0f1115; }
.ctx-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ctx-modal-close {
  background: transparent; border: var(--border); color: var(--muted);
  font-size: 14px; line-height: 1; padding: 5px 9px; cursor: pointer;
}
.ctx-modal-close:hover { color: var(--ink); background: rgba(127, 127, 127, 0.08); }
.ctx-modal-body {
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  border: var(--border);
  padding: 14px 16px;
}
/* The anonymization note belongs with the page's opening sentence, not under
   the context box — it applies to everything on the page. */
.intro-anon {
  max-width: 78ch;
  margin: 0 auto 26px;
  text-align: center;
}
.ctx-foot { margin-top: 10px; }

/* --- Replay page: quieter controls, gold model names --------------------- */
/* The two selects carried a 2 px near-white border and a 3 px hard shadow in
   the same colour — two bright rectangles above the fold. */
.panel .select {
  border: var(--border);
  box-shadow: none;
  background: rgba(127, 127, 127, 0.06);
  padding: 9px 12px;
}
.panel .select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Model names in gold; the row is otherwise plain, and the selected one is
   carried by a tint and a left bar rather than by a brighter frame. */
.model-btn {
  color: #e6c07b;
  border: var(--border);
  box-shadow: none;
  background: transparent;
}
.model-btn:hover { background: rgba(230, 192, 123, 0.07); }
.model-btn.active {
  background: rgba(230, 192, 123, 0.12);
  border-color: rgba(230, 192, 123, 0.45);
  border-left: 2px solid #e6c07b;
  color: #f0d29b;
}
.model-btn .mtag { color: var(--muted); }
.model-btn.active .mtag { color: #e6c07b; }

/* The two things to know before reading a number, side by side under the lead
   sentence: what is on the menu, and that none of it is the real world. */
/* One note, centred under the lead sentence: a small chip naming it, the text
   running alongside, and a hairline rule instead of a box. */
.try-notes { max-width: 1100px; margin: 0 auto 30px; }
.try-note {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(127, 127, 127, 0.22);
  text-align: center;
}
.try-note p {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.tn-label {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
  border: var(--border);
  border-radius: 3px;
  padding: 3px 7px;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .try-note { flex-direction: column; gap: 8px; }
}