:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #fff;
  --ink: #1b2435;
  --muted: #647084;
  --line: #e3e7ee;
  --accent: #245bd8;
  --accent-soft: #edf3ff;
  --success: #176348;
  --success-soft: #eef8f3;
  --error: #9b432e;
  --error-soft: #fff4ef;
  --subtle: #f0f2f5;
  --quiet: #fafbfc;
  --on-accent: #fff;
  --success-line: #86bda3;
  --error-line: #d8a18e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
:root[data-bank="advanced"] {
  --bg: #f3f6f5;
  --accent: #126b5c;
  --accent-soft: #e4f2ed;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111722;
  --surface: #1a2331;
  --ink: #e6edf7;
  --muted: #a7b5c8;
  --line: #354257;
  --accent: #9abaff;
  --accent-soft: #263753;
  --success: #9be0bb;
  --success-soft: #193a30;
  --success-line: #487e66;
  --error: #ffc3ad;
  --error-soft: #432b29;
  --error-line: #9b6256;
  --subtle: #273244;
  --quiet: #17202d;
  --on-accent: #111c31;
}
:root[data-theme="dark"][data-bank="advanced"] {
  --bg: #101b1b;
  --surface: #192928;
  --line: #354b48;
  --ink: #e4eeeb;
  --muted: #a5bbb5;
  --accent: #81d9bd;
  --accent-soft: #23443b;
  --subtle: #263b37;
  --quiet: #152320;
  --on-accent: #102b23;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.65; -webkit-text-size-adjust: 100%; transition: background-color .3s, color .3s; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
button, a { outline-offset: 5px; }
:focus-visible { outline: 3px solid var(--accent); }
h1:focus { outline: none; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 4px; }
button { -webkit-appearance: none; appearance: none; }
.shell { max-width: 1120px; margin: 0 auto; padding: 0 40px; min-height: 100dvh; display: flex; flex-direction: column; }
.site-header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 750; color: var(--ink); text-decoration: none; min-height: 48px; }
.brand img { object-fit: contain; flex-shrink: 0; transition: filter .2s; }
/* The transparent logo is monochrome. Follow the actual page theme, including
   manual overrides, rather than the system preference alone. Alpha is retained. */
[data-theme="dark"] .brand img { filter: invert(1); }
.header-label { font-size: 13px; letter-spacing: .04em; color: var(--muted); }
main { flex: 1; padding: 54px 0 60px; }
.screen { width: 100%; }
.intro { padding: 6px 0 36px; }
.eyebrow { display: block; font-size: 11px; font-weight: 750; letter-spacing: .2em; color: var(--accent); margin-bottom: 16px; }
h1 { font-size: clamp(30px, 4.7vw, 48px); line-height: 1.35; letter-spacing: -.04em; margin: 0; font-weight: 750; }
.accent-dot { color: var(--accent); }
.intro-description { color: var(--muted); font-size: 17px; margin: 18px 0 0; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mode-card { display: flex; flex-direction: column; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px; color: var(--ink); min-height: 278px; box-shadow: 0 5px 18px #23304b04; transition: transform .2s, border-color .2s, box-shadow .2s; }
.mode-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.mode-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; white-space: nowrap; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 700; }
.mode-icon.group-icon { font-size: 15px; line-height: 1; }
.mode-count { color: var(--muted); font-size: 13px; }
.mode-title { font-size: 24px; font-weight: 750; margin-bottom: 8px; }
.mode-description { font-size: 15px; color: var(--muted); line-height: 1.8; }
.mode-cta { display: flex; justify-content: space-between; color: var(--accent); font-size: 14px; font-weight: 650; margin-top: auto; padding-top: 22px; }
.how-it-works { display: flex; align-items: center; justify-content: center; gap: 24px; color: var(--muted); font-size: 13px; margin-top: 34px; }
.how-it-works b { font-size: 11px; margin-right: 7px; color: #8792a3; }
.how-it-works i { font-style: normal; color: #a8b1bf; }
.site-footer { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); padding: 24px 0 max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.question-screen { max-width: 850px; margin: 0 auto; }
.participants-screen { max-width: 850px; margin: 0 auto; }
.participants-intro { margin: 38px 0 32px; }
.participants-intro h1 { font-size: clamp(26px, 3.7vw, 38px); }
.participant-count-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.participant-count-button { display: flex; justify-content: center; align-items: baseline; gap: 10px; padding: 30px 16px; min-height: 120px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); transition: transform .15s, border-color .15s, background .15s; }
.participant-count-button strong { font-size: 38px; line-height: 1.4; font-weight: 650; }
.participant-count-button span { font-size: 15px; color: var(--muted); }
.round-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.text-button { border: 0; background: transparent; color: var(--muted); min-height: 48px; padding: 8px 0; font-size: 14px; }
.round-name { font-size: 14px; color: var(--muted); }
.progress-heading { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.question-number { font-size: 22px; color: var(--ink); margin-right: 6px; }
.question-total { font-size: 14px; }
.progress-track { height: 5px; border-radius: 8px; overflow: hidden; background: var(--line); margin-bottom: 24px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s ease; }
.question-card { padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.question-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.badge { padding: 4px 10px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.badge.neutral { color: var(--muted); background: var(--subtle); margin-left: auto; }
.question-prompt { font-size: clamp(21px, 2.8vw, 28px); line-height: 1.65; letter-spacing: -.02em; overflow-wrap: anywhere; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; background: var(--subtle); border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere; }
.options { display: grid; gap: 12px; margin-top: 26px; }
.option-button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 70px; padding: 17px 18px; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.7; transition: border-color .15s, background .15s, transform .15s; }
.option-label { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--subtle); font-size: 14px; font-weight: 650; }
.option-text { flex: 1; overflow-wrap: anywhere; }
.option-state { font-size: 12px; font-weight: 650; flex-shrink: 0; }
.option-button.is-correct { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.option-button.is-correct .option-label { background: var(--success-soft); }
.option-button.is-wrong { background: var(--error-soft); border-color: var(--error-line); color: var(--error); }
.option-button.is-wrong .option-label { background: var(--error-soft); }
.option-button.is-muted { color: var(--muted); background: var(--quiet); }
.group-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.vote-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 166px; padding: 22px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); transition: background .15s, border-color .15s; }
.vote-heading { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; }
.vote-number { display: flex; align-items: baseline; gap: 7px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vote-count { font-size: 34px; line-height: 1.2; font-weight: 650; color: var(--ink); }
.vote-result { font-size: 13px; font-weight: 600; }
.vote-button.is-correct { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.vote-button.is-wrong { background: var(--error-soft); border-color: var(--error-line); color: var(--error); }
.vote-tally { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 12px; }
.selection-count { font-size: 14px; color: var(--muted); }
.feedback { margin-top: 24px; border-radius: 14px; padding: 22px; background: var(--success-soft); border: 1px solid var(--success-line); }
.feedback.wrong { background: var(--error-soft); border-color: var(--error-line); }
.feedback-heading { display: flex; gap: 9px; align-items: center; color: var(--success); }
.wrong .feedback-heading { color: var(--error); }
.feedback-heading h2 { font-size: 17px; margin: 0; }
.feedback-icon { font-size: 20px; }
.feedback p { margin: 10px 0 0; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.correct-answer { font-weight: 600; }
.sources { margin-top: 14px; font-size: 13px; color: var(--muted); }
.sources summary { cursor: pointer; min-height: 44px; display: list-item; padding: 10px 0; }
.sources ul { margin: 0; padding-left: 20px; }
.sources a { display: inline-block; padding: 8px 0; }
.question-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 28px; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; padding: 13px 24px; min-height: 50px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; font-weight: 600; transition: background .15s, transform .15s; }
.primary-button { background: var(--accent); color: var(--on-accent); }
.primary-button:disabled { background: var(--subtle); color: var(--muted); }
.secondary-button { background: var(--surface); border-color: var(--line); color: var(--ink); }
.result-screen { text-align: center; max-width: 850px; margin: 12px auto; }
.completion-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 24px; color: var(--accent); background: var(--accent-soft); border-radius: 21px; font-size: 30px; }
.result-screen h1 { font-size: clamp(28px, 4vw, 40px); }
.result-description { color: var(--muted); margin: 16px 0 32px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 28px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.stat { display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line); }
.stat:last-child { border: 0; }
.stat strong { font-size: 34px; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; }
.stat span { font-size: 13px; color: var(--muted); }
.time-summary { color: var(--muted); font-size: 13px; margin: 16px 0 28px; }
.result-note { font-size: 15px; color: var(--muted); line-height: 1.9; margin: 0 0 30px; }
.result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.total-votes-summary { font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.loading, .error-screen { padding: 60px 0; text-align: center; }
.error-screen h1, .loading h1 { font-size: 28px; }
.error-screen p { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { padding: 24px; text-align: center; }
@media (hover: hover) {
  .participant-count-button:hover { background: var(--accent-soft); border-color: #aebfe5; transform: translateY(-3px); }
  .mode-card:hover { transform: translateY(-4px); border-color: #aebfe5; box-shadow: 0 12px 28px #23304b0a; }
  .option-button:not(:disabled):hover { background: var(--accent-soft); border-color: #aebfe5; }
  .vote-button:not(:disabled):hover { background: var(--accent-soft); border-color: #aebfe5; }
  .primary-button:not(:disabled):hover { filter: brightness(.92); }
  .secondary-button:hover { background: var(--subtle); }
  .text-button:hover { color: var(--accent); }
}
button:not(:disabled):active { transform: translateY(1px); }
@media (max-width: 700px) {
  .shell { padding: 0 22px; }
  .site-header { min-height: 82px; }
  main { padding: 34px 0 40px; }
  .mode-grid { gap: 16px; }
  .mode-card { padding: 22px; }
  .question-card { padding: 25px; }
  .question-meta { gap: 8px; }
  .how-it-works { gap: 14px; }
}
@media (max-width: 520px) {
  .participant-count-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .participant-count-button { min-height: 96px; padding: 20px 14px; }
  .participant-count-button strong { font-size: 32px; }
  .participants-intro { margin: 24px 0; }
  .shell { padding: 0 16px; }
  .brand { font-size: 18px; gap: 9px; }
  .brand img { width: 38px; height: 38px; }
  .header-label { font-size: 11px; }
  .intro { padding-bottom: 28px; }
  .intro-description { font-size: 15px; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 0; padding: 23px; border-radius: 18px; }
  .mode-topline { margin-bottom: 13px; }
  .mode-title { font-size: 22px; }
  .mode-cta { padding-top: 17px; }
  .how-it-works { gap: 9px; font-size: 11px; }
  .how-it-works b { display: none; }
  .site-footer { font-size: 11px; flex-wrap: wrap; }
  .round-toolbar { margin-bottom: 15px; }
  .round-name { font-size: 12px; }
  .question-card { padding: 22px 17px; border-radius: 18px; }
  .question-meta { font-size: 11px; }
  .question-prompt { font-size: 21px; }
  .option-button { padding: 15px 12px; gap: 10px; font-size: 15px; flex-wrap: wrap; }
  .option-state { margin-left: 42px; }
  .option-label { width: 30px; height: 30px; }
  .feedback { padding: 18px 15px; }
  .question-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .group-answers { gap: 12px; }
  .vote-button { min-height: 144px; padding: 18px 8px; }
  .vote-heading { font-size: 22px; }
  .vote-count { font-size: 30px; }
  .selection-count { text-align: center; }
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .stat:nth-child(2) { border: 0; }
  .stat strong { font-size: 30px; }
  .result-actions > button { flex: 1; padding-inline: 16px; }
}
.header-controls { display: flex; align-items: center; gap: 10px; }
.control-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; background: var(--surface); color: var(--ink); font-size: 13px; white-space: nowrap; transition: background .2s, border-color .2s; }
.bank-toggle { color: var(--accent); background: var(--accent-soft); border-color: transparent; font-weight: 650; }
.bank-toggle:disabled { cursor: wait; }
.theme-symbol { font-size: 18px; line-height: 1; }
.bank-overview { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; color: var(--muted); font-size: 12px; }
.bank-chip { border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; color: var(--accent); background: var(--surface); font-weight: 650; }
.answer-hint { color: var(--muted); font-size: 13px; margin: 18px 0 -8px; }
.multi-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.multi-count { color: var(--muted); font-size: 14px; }
.option-button.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.option-button.is-selected .option-label { background: var(--accent); color: var(--on-accent); }
.option-button.is-selected .option-label::after { content: "✓"; font-size: 10px; position: absolute; transform: translate(14px, -15px); color: var(--accent); }
[data-bank="advanced"] .intro { padding: 28px 28px 30px; margin-bottom: 28px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px 20px 20px 6px; background: linear-gradient(120deg, var(--accent-soft), var(--bg)); }
[data-bank="advanced"] .eyebrow { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; }
[data-bank="advanced"] .mode-grid { grid-template-columns: minmax(0, 1fr); }
[data-bank="advanced"] .mode-card { border-radius: 12px; padding: 28px; min-height: 0; border-top: 3px solid var(--accent); }
.challenge-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: 12px; }
[data-bank="advanced"] .mode-topline { gap: 8px; }
[data-bank="advanced"] .mode-icon { border-radius: 8px; }
[data-bank="advanced"] .question-card { border-radius: 14px; border-top: 3px solid var(--accent); }
[data-bank="advanced"] .question-prompt { font-size: clamp(20px, 2.5vw, 26px); line-height: 1.8; }
[data-bank="advanced"] .round-name { color: var(--accent); }
[data-bank="advanced"] .progress-heading { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.sources a, .round-name { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .site-header { flex-wrap: wrap; gap: 8px; padding: 14px 0; }
  .header-controls { gap: 6px; }
  .control-button { padding: 8px 10px; font-size: 12px; }
  .theme-label { display: none; }
  [data-bank="advanced"] .intro { padding: 22px 16px; }
  [data-bank="advanced"] .eyebrow { font-size: 10px; }
  .bank-overview { line-height: 1.9; }
  .option-text { min-width: 0; }
  .round-toolbar { align-items: flex-start; }
  .round-name { text-align: right; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}