/* ─────────────────────────────────────────────────────────────────
   COMMON SENSE · Design System
   Palette: Pure black-on-white — "typeset clarity"
   Strategy: Restrained monochrome — ink IS the brand
   All colors in OKLCH · WCAG AA/AAA contrast throughout
   ───────────────────────────────────────────────────────────────── */

/* ░░ TOKENS ░░ */
:root {
  /* Monochrome palette — OKLCH */
  --bg:          oklch(1.000 0.000 0);       /* pure white          */
  --bg-inv:      oklch(0.090 0.000 0);       /* near-black          */
  --surface:     oklch(0.970 0.000 0);       /* off-white panel     */
  --surface-mid: oklch(0.935 0.000 0);       /* mid panel           */
  --surface-inv: oklch(0.130 0.000 0);       /* dark panel          */
  --ink:         oklch(0.090 0.000 0);       /* body text (≥7:1)    */
  --ink-inv:     oklch(0.970 0.000 0);       /* text on dark        */
  --muted:       oklch(0.430 0.000 0);       /* secondary (≥4.5:1)  */
  --muted-inv:   oklch(0.640 0.000 0);       /* muted on dark       */
  --border:      oklch(0.860 0.000 0);       /* subtle border       */
  --border-mid:  oklch(0.720 0.000 0);       /* mid border          */
  --border-inv:  oklch(0.250 0.000 0);       /* border on dark      */
  --correct:     oklch(0.090 0.000 0);       /* correct = black     */
  --wrong:       oklch(0.500 0.000 0);       /* wrong = mid grey    */

  /* Typography */
  --font-sans: 'Sora', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid type scale */
  --text-xs:   clamp(0.65rem, 1vw,  0.75rem);
  --text-sm:   clamp(0.80rem, 1.2vw, 0.875rem);
  --text-base: clamp(0.95rem, 1.5vw, 1rem);
  --text-lg:   clamp(1.10rem, 2vw,  1.25rem);
  --text-xl:   clamp(1.25rem, 2.5vw, 1.50rem);
  --text-2xl:  clamp(1.50rem, 3vw,  2.00rem);
  --text-3xl:  clamp(2.00rem, 4vw,  2.75rem);
  --text-4xl:  clamp(2.50rem, 5vw,  3.75rem);
  --text-hero: clamp(3.00rem, 7vw,  5.50rem);

  /* Spacing */
  --sp-1:  0.25rem;  --sp-2:  0.50rem;  --sp-3:  0.75rem;
  --sp-4:  1.00rem;  --sp-6:  1.50rem;  --sp-8:  2.00rem;
  --sp-10: 2.50rem;  --sp-12: 3.00rem;  --sp-16: 4.00rem;
  --sp-20: 5.00rem;  --sp-24: 6.00rem;

  /* Radii */
  --r-sm:   0.25rem;  --r-md:   0.50rem;
  --r-lg:   0.875rem; --r-xl:   1.50rem;
  --r-full: 9999px;

  /* Z-index scale */
  --z-base:   1;
  --z-sticky: 100;
  --z-modal:  400;
  --z-toast:  600;

  /* Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ░░ RESET ░░ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: var(--text-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--ink-inv);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: var(--sp-4); }

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { opacity: 0.6; }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ░░ PAGE TRANSITIONS ░░ */
.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page-hidden { display: none !important; }
.page-entering { animation: page-in 0.40s var(--ease-out-expo) both; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ░░ BUTTONS ░░ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.btn:active { opacity: 0.75; }
.btn-sm  { font-size: var(--text-sm);  padding: var(--sp-2)  var(--sp-4); }
.btn-md  { font-size: var(--text-base);padding: var(--sp-3)  var(--sp-6); }
.btn-lg  { font-size: var(--text-lg);  padding: var(--sp-4)  var(--sp-8); }

.btn-primary {
  background: var(--ink);
  color: var(--ink-inv);
}
.btn-primary:hover { background: oklch(0.200 0.000 0); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border-mid);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); background: transparent; }

/* Inverse (on dark bg) */
.btn-primary-inv {
  background: var(--bg);
  color: var(--ink);
}
.btn-primary-inv:hover { background: var(--surface); }

.btn-ghost-inv {
  background: transparent;
  color: var(--muted-inv);
  border: 1.5px solid var(--border-inv);
}
.btn-ghost-inv:hover { color: var(--ink-inv); border-color: var(--ink-inv); }

/* ░░ TAGS ░░ */
.tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--surface-mid);
  color: var(--muted);
  border: 1px solid var(--border);
}
.tag-dark  { background: var(--ink);  color: var(--ink-inv); border-color: var(--ink); }
.tag-outline { background: transparent; color: var(--muted); border: 1px solid var(--border-mid); }

/* ─────────────────────────────────────────────────────────────────
   HERO — dark section (full height, no nav above it)
   ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--bg-inv);
  color: var(--ink-inv);
  min-height: 80dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 10vw, 7rem) var(--sp-6) clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}

/* Dot grid */
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, oklch(0.300 0 0) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.50;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted-inv);
  border: 1px solid var(--border-inv);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  letter-spacing: 0.01em;
  animation: fade-up 0.55s var(--ease-out-expo) 0.10s both;
}

.kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-inv);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.hero-heading {
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
  color: var(--ink-inv);
  animation: fade-up 0.65s var(--ease-out-expo) 0.20s both;
}
.hero-em {
  font-style: italic;
  color: var(--ink-inv);
  font-weight: 700;
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--muted-inv);
  max-width: 58ch;
  line-height: 1.70;
  text-wrap: pretty;
  animation: fade-up 0.65s var(--ease-out-expo) 0.30s both;
}

.hero-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  animation: fade-up 0.65s var(--ease-out-expo) 0.40s both;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
  animation: fade-up 0.65s var(--ease-out-expo) 0.52s both;
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink-inv);
  font-family: var(--font-mono);
  line-height: 1.1;
}
.stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted-inv);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}
.stat-div { width: 1px; height: 36px; background: var(--border-inv); }

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--muted-inv);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  opacity: 0.55;
  animation: fade-up 0.9s var(--ease-out-expo) 0.80s both;
}
.scroll-dot { animation: scroll-bounce 1.6s ease-in-out infinite; }
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ─────────────────────────────────────────────────────────────────
   DATASETS SECTION — white
   ───────────────────────────────────────────────────────────────── */
.datasets-section {
  padding: var(--sp-24) var(--sp-6);
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-heading {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
  line-height: 1.10;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.section-sub {
  font-size: var(--text-lg);
  color: var(--muted);
  max-width: 55ch;
  text-wrap: pretty;
  margin-bottom: var(--sp-4);
  margin-top: 0;
}

.dataset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.dataset-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: border-color 0.20s, box-shadow 0.20s;
  cursor: pointer;
}
.dataset-card:hover {
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.card-icon {
  color: var(--ink);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  flex-shrink: 0;
}

.card-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }

.card-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.card-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.65;
}

.card-meta {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

.card-btn {
  background: var(--surface);
  color: var(--muted);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-btn:hover {
  background: var(--ink);
  color: var(--ink-inv);
  border-color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────
   CUSTOM DATASET PANEL
   ───────────────────────────────────────────────────────────────── */
.dataset-card-custom {
  border-style: dashed;
}
.dataset-card-custom:hover {
  border-style: solid;
}

.custom-panel {
  margin-top: var(--sp-8);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: fade-up 0.35s var(--ease-out-expo) both;
}
.custom-panel-inner {
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.custom-panel-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Tabs */
.custom-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface-mid);
  border-radius: var(--r-md);
  padding: 3px;
  width: fit-content;
}
.custom-tab {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-md) - 2px);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.custom-tab.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.10);
}
.custom-tab:hover:not(.active) { color: var(--ink); }

.custom-tab-panel { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Form elements */
.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.form-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.form-input {
  flex: 1;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  outline: none;
  transition: border-color 0.16s;
  min-width: 0;
}
.form-input:focus { border-color: var(--ink); }
.form-input::placeholder { color: var(--muted); font-weight: 400; }
.form-input-sm { flex: 0 0 160px; }

.form-textarea {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 160px;
  width: 100%;
  transition: border-color 0.16s;
  line-height: 1.6;
}
.form-textarea:focus { border-color: var(--ink); }
.form-textarea::placeholder { color: var(--muted); }

.form-hint {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.65;
}
.form-hint code {
  font-family: var(--font-mono);
  background: var(--surface-mid);
  padding: 1px 5px;
  border-radius: 3px;
}
.form-error {
  font-size: var(--text-sm);
  color: var(--wrong);
  font-weight: 500;
}
.custom-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Hide AI comparison for custom datasets (no published baselines) */
.ai-comparison.hidden,
.results-comparison.hidden { display: none !important; }
.how-section {
  padding: var(--sp-24) var(--sp-6);
  background: var(--bg-inv);
  color: var(--ink-inv);
}
.how-section .section-heading { color: var(--ink-inv); }
.how-section .section-sub     { color: var(--muted-inv); }

.how-grid {
  display: flex;
  align-items: flex-start;
  margin-top: var(--sp-12);
}
.how-step {
  flex: 1;
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.how-step h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-inv);
}
.how-step p  { font-size: var(--text-sm); color: var(--muted-inv); line-height: 1.65; }
.how-num {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--ink-inv);
  opacity: 0.25;
  line-height: 1;
}
.how-connector {
  width: 1px;
  background: var(--border-inv);
  align-self: stretch;
  flex-shrink: 0;
  margin-top: var(--sp-8);
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.footer-logo { font-weight: 700; font-size: var(--text-base); color: var(--muted); }
.footer-note { font-size: var(--text-xs); color: var(--muted); max-width: 70ch; line-height: 1.7; }
.footer-note a { color: var(--muted); }
.footer-note a:hover { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────
   QUIZ NAV
   ───────────────────────────────────────────────────────────────── */
.quiz-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: oklch(1.000 0.000 0 / 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.quiz-nav .nav-inner {
  display: flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-6);
  gap: var(--sp-4);
  max-width: 100%;
}
.quiz-back {
  gap: var(--sp-2);
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-4);
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: var(--r-full);
}
.quiz-back svg { flex-shrink: 0; }
.quiz-back-text { display: inline; }
.quiz-nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.quiz-dataset-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.quiz-score-display {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  background: var(--surface-mid);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  line-height: 1;
}
.score-num {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--ink);
  transition: transform 0.2s var(--ease-out-expo), opacity 0.15s;
  display: inline-block;
}
.score-num.bump {
  animation: score-bump 0.3s var(--ease-out-expo);
}
@keyframes score-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.score-sep {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 1px;
}
.score-denom {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   QUIZ MAIN
   ───────────────────────────────────────────────────────────────── */
.quiz-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-8) var(--sp-6) var(--sp-16);
  background: var(--bg);
}
.quiz-state {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}
.hidden { display: none !important; }

/* Loading */
.quiz-loading-state { padding-top: var(--sp-16); text-align: center; }

.loader-ring { width: 56px; height: 56px; position: relative; }
.loader-ring div {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--ink);
  animation: spin 1.0s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loader-ring div:nth-child(1) { animation-delay: -0.45s; }
.loader-ring div:nth-child(2) { animation-delay: -0.30s; }
.loader-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.loading-label { font-size: var(--text-xl); font-weight: 600; color: var(--ink); }
.loading-sub   { font-size: var(--text-sm); color: var(--muted); }

/* Error */
.quiz-error-state { padding-top: var(--sp-16); text-align: center; gap: var(--sp-4); }
.error-icon    { font-size: 2.5rem; }
.error-heading { font-size: var(--text-2xl); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.error-msg     { font-size: var(--text-base); color: var(--muted); max-width: 45ch; }

/* Progress bar — GPU composited */
.progress-bar-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.progress-bar-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--ink);
  border-radius: var(--r-full);
  transform-origin: left;
  transform: scaleX(0);
  /* will-change only during the transition — not globally */
  transition: transform 0.50s var(--ease-out-expo);
}
.progress-bar-fill.animating {
  will-change: transform;
}
.progress-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Question card — modern entry animation via @starting-style */
.question-card {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-8) var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.32s var(--ease-out-expo),
    translate 0.32s var(--ease-out-expo);
}
/* Entry: transition FROM these values when card first renders */
@starting-style {
  .question-card {
    opacity: 0;
    translate: 0 14px;
  }
}
/* Fallback: browsers without @starting-style get the keyframe */
@supports not (selector(:where(.x))) {
  .question-card { animation: fade-up 0.38s var(--ease-out-expo) both; }
}
.question-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.question-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-mid);
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.question-cat {
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.question-text {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 60ch;
}

/* Choices */
.choices-grid { display: flex; flex-direction: column; gap: var(--sp-2); }

.choice-btn {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.14s var(--ease-out-quart),
    border-color 0.14s var(--ease-out-quart),
    transform 0.10s var(--ease-out-quart),
    box-shadow 0.14s var(--ease-out-quart);
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}
.choice-btn:hover:not([disabled]) {
  background: var(--surface);
  border-color: var(--border-mid);
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.06);
  transform: translateY(-1px);
}
.choice-btn:active:not([disabled]) { transform: translateY(0); }
.choice-btn[disabled] { cursor: default; }

.choice-key {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--muted);
  background: var(--surface-mid);
  border-radius: var(--r-sm);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
  line-height: 1;
  letter-spacing: 0.02em;
}
.choice-btn:hover:not([disabled]) .choice-key {
  background: var(--ink);
  color: var(--ink-inv);
}

.choice-text { flex: 1; min-width: 0; }

.choice-btn.correct {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inv);
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.18);
  transform: none;
}
.choice-btn.correct .choice-key {
  background: oklch(1 0 0 / 0.18);
  color: var(--ink-inv);
}
.choice-btn.wrong {
  background: var(--surface);
  border-color: var(--border);
  color: oklch(0.60 0 0);
  transform: none;
  box-shadow: none;
}
.choice-btn.wrong .choice-key {
  background: var(--border);
  color: oklch(0.60 0 0);
}
/* Selected but waiting for answer (pressed state) */
.choice-btn.selected:not(.correct):not(.wrong) {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
}

/* Open answer (GSM8K) */
.open-answer-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.open-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.open-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.18s;
  outline: none;
}
.open-input:focus { border-color: var(--ink); }
.open-input::placeholder { color: var(--muted); font-weight: 400; }

/* ── Feedback ────────────────────────────────────────────────────── */
.feedback-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: fade-up 0.42s var(--ease-out-expo) both;
  width: 100%;
}

/* Clean, editorial feedback banner */
.feedback-banner {
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Top bar: verdict row */
.feedback-verdict-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
}
.feedback-banner.is-correct .feedback-verdict-row {
  background: var(--ink);
}
.feedback-banner.is-wrong .feedback-verdict-row {
  background: var(--surface-mid);
  border: 1.5px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.feedback-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
  font-weight: 900;
}
.feedback-banner.is-correct .feedback-icon {
  background: oklch(1 0 0 / 0.14);
  color: var(--ink-inv);
}
.feedback-banner.is-wrong .feedback-icon {
  background: var(--border-mid);
  color: var(--ink);
}

.feedback-verdict {
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.feedback-banner.is-correct .feedback-verdict { color: var(--ink-inv); }
.feedback-banner.is-wrong   .feedback-verdict { color: var(--ink); }

/* Explanation row */
.feedback-explanation-row {
  padding: var(--sp-4) var(--sp-6);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.feedback-banner.is-correct .feedback-explanation-row {
  background: var(--surface);
  border-color: var(--border);
}
.feedback-banner.is-wrong .feedback-explanation-row {
  background: var(--bg);
  border-color: var(--border);
}
.feedback-explanation {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--muted);
  word-break: break-word;
}

/* Next button row below feedback */
.feedback-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
}

/* ── AI comparison ────────────────────────────────────────────────── */
.ai-comparison {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  overflow: hidden;
}
.ai-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.ai-bars { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.ai-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.ai-bar-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 'You' row gets bold emphasis */
.ai-bar-row.ai-row-you .ai-bar-label {
  font-weight: 800;
}
.ai-bar-track {
  height: 8px;
  background: var(--surface-mid);
  border-radius: var(--r-full);
  overflow: hidden;
  min-width: 0;
}
.ai-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;
  transition: transform 0.9s var(--ease-out-expo);
}
.ai-bar-pct {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  min-width: 36px;
}
/* Bar fills */
.ai-bar-you     { background: var(--ink); }
.ai-bar-model-0 { background: oklch(0.35 0 0); }
.ai-bar-model-1 { background: oklch(0.50 0 0); }
.ai-bar-model-2 { background: oklch(0.65 0 0); }
.ai-bar-model-3 { background: oklch(0.78 0 0); }

/* Results */
.quiz-results-state { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.results-card {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-12) var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
  animation: fade-up 0.45s var(--ease-out-expo) both;
}
.results-badge {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-4);
}
.results-heading {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.results-score   { display: flex; align-items: baseline; gap: var(--sp-1); line-height: 1; }
.results-score-num {
  font-family: var(--font-mono);
  font-size: var(--text-hero);
  font-weight: 800;
  color: var(--ink);
}
.results-score-denom {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  color: var(--muted);
}
.results-verdict { font-size: var(--text-lg); color: var(--muted); max-width: 40ch; line-height: 1.65; }
.results-comparison {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-align: left;
  overflow: hidden;
}
.results-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-2);
}

/* ─────────────────────────────────────────────────────────────────
   SHARED ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Layout */
  .how-grid        { flex-direction: column; }
  .how-connector   { width: 100%; height: 1px; margin-top: 0; align-self: auto; }
  .hero-stats      { gap: var(--sp-4); }
  .footer-inner    { flex-direction: column; align-items: flex-start; }

  /* Quiz shell — tighter gutters */
  .quiz-main       { padding: var(--sp-6) var(--sp-4) var(--sp-12); }
  .quiz-state      { gap: var(--sp-5); align-items: stretch; }

  /* Progress row — don't let label escape */
  .progress-bar-wrap { overflow: hidden; }

  /* Question card */
  .question-card   { padding: var(--sp-5) var(--sp-5) var(--sp-6); gap: var(--sp-4); }
  .question-text   { font-size: var(--text-xl); letter-spacing: -0.02em; max-width: none; }

  /* Choice buttons */
  .choice-btn      { padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); }

  /* Feedback */
  .feedback-banner           { border-radius: var(--r-md); }
  .feedback-verdict-row      { padding: var(--sp-4) var(--sp-5); }
  .feedback-explanation-row  { padding: var(--sp-3) var(--sp-5); }

  /* AI comparison */
  .ai-comparison       { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); }
  .ai-bar-row          { grid-template-columns: 72px 1fr 40px; gap: var(--sp-2); }

  /* Next / feedback actions */
  .feedback-actions    { padding: var(--sp-4) var(--sp-5); }
  .feedback-actions .btn { width: 100%; justify-content: center; }

  /* Results */
  .results-card        { padding: var(--sp-6) var(--sp-5); }
  .results-comparison  { padding: var(--sp-4) var(--sp-5); }

  /* Custom panel */
  .custom-panel-inner  { padding: var(--sp-5); gap: var(--sp-4); }
  .form-input-sm       { flex: 0 0 100px; }
}

@media (max-width: 480px) {
  /* Quiz shell — phone gutters (16px each side) */
  .quiz-main       { padding: var(--sp-4) var(--sp-4) var(--sp-10); }
  .quiz-state      { gap: var(--sp-4); align-items: stretch; }

  /* Nav — compact on small phones */
  .quiz-nav .nav-inner { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .quiz-back-text      { display: none; }
  .quiz-dataset-badge  { max-width: 100px; font-size: 0.62rem; padding: 2px var(--sp-2); }

  /* Hero */
  .hero-actions    { flex-direction: column; width: 100%; }
  .btn-lg          { width: 100%; justify-content: center; }

  /* Question card — edge-to-edge with breathing room */
  .question-card   { padding: var(--sp-4) var(--sp-4) var(--sp-5); border-radius: var(--r-md); }
  .question-text   { font-size: var(--text-lg); }
  .choices-grid    { gap: var(--sp-2); }
  .choice-btn      { padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); }

  /* AI bars — even shorter labels */
  .ai-bar-row      { grid-template-columns: 52px 1fr 34px; gap: var(--sp-2); }
  .ai-bar-label    { font-size: 0.6rem; }
  .ai-bar-pct      { font-size: 0.6rem; }

  /* Feedback */
  .feedback-verdict-row    { padding: var(--sp-3) var(--sp-4); }
  .feedback-explanation-row { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
  .feedback-icon           { width: 24px; height: 24px; font-size: 0.8rem; flex-shrink: 0; }
  .feedback-verdict        { font-size: var(--text-sm); }
  .feedback-explanation    { font-size: 0.72rem; }
  .feedback-actions        { padding: var(--sp-3) var(--sp-4); }

  /* Results */
  .results-actions          { flex-direction: column; width: 100%; }
  .results-actions .btn     { width: 100%; justify-content: center; }
  .results-card             { padding: var(--sp-5) var(--sp-4); }
  .results-comparison       { padding: var(--sp-4); }
}


@media (max-width: 480px) {
  /* Quiz main — even tighter on phones */
  .quiz-main       { padding: var(--sp-4) var(--sp-3) var(--sp-10); }
  .quiz-state      { gap: var(--sp-4); }

  /* Question card — nearly edge to edge */
  .question-card   { padding: var(--sp-4) var(--sp-3) var(--sp-5); border-radius: var(--r-md); }
  .question-text   { font-size: var(--text-lg); }

  /* Nav */
  .quiz-back-text      { display: none; }
  .quiz-dataset-badge  { max-width: 110px; font-size: 0.65rem; }
  .quiz-nav .nav-inner { padding: var(--sp-3) var(--sp-3); gap: var(--sp-2); }

  /* Hero */
  .hero-actions    { flex-direction: column; width: 100%; }
  .btn-lg          { width: 100%; justify-content: center; }

  /* AI bars — shorter label column on phones */
  .ai-bar-row      { grid-template-columns: 58px 1fr 34px; gap: var(--sp-2); }
  .ai-bar-label    { font-size: 0.65rem; }
  .ai-bar-pct      { font-size: 0.65rem; min-width: 30px; }

  /* Feedback */
  .feedback-verdict-row    { padding: var(--sp-3) var(--sp-3); gap: var(--sp-2); }
  .feedback-explanation-row { padding: var(--sp-3) var(--sp-3); }
  .feedback-icon   { width: 26px; height: 26px; font-size: 0.85rem; }
  .feedback-verdict { font-size: var(--text-sm); }
  .feedback-explanation { font-size: 0.75rem; }

  /* Results */
  .results-actions            { flex-direction: column; width: 100%; }
  .results-actions .btn       { width: 100%; justify-content: center; }
  .results-card               { padding: var(--sp-5) var(--sp-3); }
}


/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kicker-dot   { animation: none; }
  .loader-ring div { animation-duration: 2s !important; }
}

/* ─────────────────────────────────────────────────────────────────
   QUESTION COUNT SELECTOR
   ───────────────────────────────────────────────────────────────── */
.qcount-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  margin-bottom: var(--sp-2);
}
.qcount-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.qcount-options {
  display: flex;
  gap: var(--sp-2);
}
.qcount-btn {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.qcount-btn.active,
.qcount-btn:hover {
  background: var(--ink);
  color: var(--ink-inv);
  border-color: var(--ink);
}