/* SocietyBench — brutalist landing page styles */

: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 */
  --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 ===============================
   Left sidebar (fixed-width on desktop) + main content column.
   Pages are toggled via [data-active-page] on the <body>; sections with
   data-page matching the active value are visible, others are hidden. */
.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); }

/* page visibility */
.page-section { display: none; }
body[data-active-page="overview"]    .page-section[data-page="overview"],
body[data-active-page="method"]      .page-section[data-page="method"],
body[data-active-page="try"]         .page-section[data-page="try"],
body[data-active-page="contribute"]  .page-section[data-page="contribute"],
body[data-active-page="leaderboard"] .page-section[data-page="leaderboard"],
body[data-active-page="deepdive"]    .page-section[data-page="deepdive"],
body[data-active-page="qualitative"] .page-section[data-page="qualitative"],
body[data-active-page="limitations"] .page-section[data-page="limitations"],
body[data-active-page="cite"]        .page-section[data-page="cite"] {
  display: block;
}

/* 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.
     NOTE: display is intentionally NOT set here — it would override the
     page-routing rule that hides non-active sections. The active route
     (body[data-active-page="overview"] .page-section[data-page="overview"])
     sets display:block, and the layout-pill rule below upgrades it to flex
     on the overview page only. */
  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;
}
body[data-active-page="overview"] .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[data-active-page="overview"] .page-section + .page-section {
  border-top: 0 !important;
}
body.layout-pill[data-active-page="overview"] .page-section[data-page="overview"]:not(.hero) {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

/* Animated WebP background — sits behind .hero-content, in front of page bg.
   We use an <img> tag with an animated WebP (videos/hero.webp) rather than a
   <video> tag: browsers treat WebP as an image, so it isn't subject to
   Chrome's strict autoplay policy and just loops on every page load —
   including for returning visitors whose password gate auto-unlocks during
   page-load (which is not a user gesture). */
.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: 1fr 1fr; gap: 24px; }
.axis-card {
  background: var(--paper-3);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 26px 24px;
}
.axis-card .axis-tag {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.axis-card h4 {
  font-family: var(--mono);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 19px;
  margin: 0 0 10px;
}
.axis-card .metric {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.axis-card .scale {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  border-top: 1.5px solid var(--ink);
  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; }
}

/* ============================== AUTH GATE ============================== */
html.auth-locked,
html.auth-locked body { overflow: hidden; }

#auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: linear-gradient(135deg, #87CEEB 0%, #F5F9FD 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.4s ease;
}
#auth-gate.auth-fadeout { opacity: 0; pointer-events: none; }

#auth-form {
  background: #fff;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  font-family: var(--mono);
}
#auth-form.auth-shake { animation: authShake 0.4s ease; }
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-bottom: 28px;
}
.auth-brand .brand-mark {
  width: 14px;
  height: 14px;
  background: var(--blue);
  display: inline-block;
}
.auth-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.auth-sub {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.55;
}
#auth-input {
  width: 100%;
  padding: 14px 16px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  margin-bottom: 14px;
}
#auth-input:focus {
  border-color: var(--blue);
  box-shadow: 4px 4px 0 var(--blue);
  transform: translate(-2px, -2px);
}
.auth-btn {
  width: 100%;
  padding: 14px 16px;
  border: 2.5px solid var(--ink);
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.auth-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.auth-btn:active { transform: translate(0, 0); box-shadow: none; }
.auth-err {
  font-family: var(--mono);
  font-size: 12px;
  color: #d32f2f;
  letter-spacing: 0.08em;
  margin: 12px 0 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-transform: uppercase;
}

/* =============================================================================
 * 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);
}

/* CJK text gets a slightly larger line-height for readability. */
body[data-lang="zh"] {
  font-family: var(--mono), "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}
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;
  --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 { 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-main {
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
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: rgba(20, 20, 20, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 16px rgba(0,0,0,0.4);
}
body.dark-theme.layout-pill .hero .btn:hover,
body.dark-theme.layout-pill .hero .btn:focus-visible {
  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
body.dark-theme.layout-pill .hero .btn.primary {
  background: #f1f5f9;
  color: #0a0a0a;
  border-color: #f1f5f9;
}
body.dark-theme.layout-pill .hero .btn.primary:hover {
  background: #fff;
  color: #0a0a0a;
}

/* Auth gate, code blocks, and a handful of other hard-coded whites. */
body.dark-theme #auth-form { background: #141414; border-color: #f1f5f9; box-shadow: 8px 8px 0 #000; }
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; }
body.dark-theme a { color: inherit; }
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 .axis-card .axis-tag,
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);
}
body.dark-theme .axis-card .axis-tag {
  border-color: rgba(255, 255, 255, 0.16);
}
/* 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: minmax(0, 0.54fr) minmax(0, 1.08fr);
  gap: clamp(56px, 11vw, 220px);
  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; }
.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 {
  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;
}
.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: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", var(--mono);
  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 {
  /* Hero only shows on the overview/home page. Other pages route via the
     [data-active-page] rules above which set display:none on non-matching
     sections — but .hero's own display:flex below would override that, so we
     gate the layout-pill rules on `body[data-active-page="overview"]`. */
}
body.layout-pill[data-active-page="overview"] .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: 6px;
  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-block;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--ink) 0%, #1f2937 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title-sub {
  display: inline-block;
  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;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  color: var(--ink);
  border-radius: 999px;
  padding: 13px 24px;
  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:not([data-active-page="overview"]) 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:not([data-active-page="overview"]) .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:not([data-active-page="overview"]) .page-title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  margin-bottom: 8px;
}
body.layout-pill:not([data-active-page="overview"]) .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; }
}