* { box-sizing: border-box; border-radius: 0 !important; }
html { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-nh); }
body { margin: 0; min-width: 0; overflow-x: hidden; font-size: var(--text-body); line-height: var(--leading-body); }
button, select { color: inherit; font: inherit; }
button, select, a { min-height: var(--touch-target-min); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .38; }
:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 20; left: 8px; top: -80px; background: var(--color-ink); color: var(--color-paper); padding: 12px 20px; }
.skip-link:focus { top: 8px; }
.site-header, .site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: var(--border-grid); padding: 0 20px; min-height: 64px; }
.site-footer { border-top: var(--border-grid); border-bottom: 0; padding-block: 20px; }
.brand { border: 0; background: transparent; padding: 0; font-size: 25px; font-weight: 300; letter-spacing: -.02em; }
.utility-label, .eyebrow, .meta, label, legend, .site-footer, .button, .count-label, summary { font-family: var(--font-s-condensed); font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; }
#app { min-height: calc(100vh - 130px); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cell, .state-cell { border-bottom: var(--border-grid); border-right: var(--border-grid); padding: clamp(20px, 4vw, 45px); min-width: 0; }
.cell:last-child { border-right: 0; }
.span-12 { grid-column: span 12; }.span-8 { grid-column: span 8; }.span-6 { grid-column: span 6; }.span-4 { grid-column: span 4; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(40px, 7vw, 84px); line-height: 1.04; font-weight: 300; letter-spacing: -.03em; margin-bottom: 20px; }
h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.12; font-weight: 300; letter-spacing: -.02em; }
h3 { font-size: 25px; line-height: 1.27; font-weight: 300; }
.hero-copy { font-size: clamp(18px, 2vw, 25px); max-width: 58ch; }
.big-number { font-size: clamp(64px, 12vw, 150px); font-weight: 100; line-height: .9; display: block; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-grid); border-left: var(--border-grid); }
.button { border: 0; border-right: var(--border-grid); border-bottom: var(--border-grid); background: var(--color-paper); padding: 18px 20px; text-align: left; transition: background var(--motion-state), color var(--motion-state); }
.button:hover, .button.primary, .button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.button.primary:hover { background: var(--color-paper); color: var(--color-ink); }
.button.danger { border: var(--border-grid); }
.area-list, .stat-list, .wrong-list { list-style: none; padding: 0; margin: 0; }
.area-list li, .stat-list li { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--color-ink); padding: 12px 0; }
.area-list li:first-child, .stat-list li:first-child { border-top: 0; }
.notice { border-left: 6px solid var(--color-ink); padding: 12px 20px; margin: 20px 0; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
select { width: 100%; border: 0; border-bottom: var(--border-grid); background: var(--color-paper); padding: 12px 0; }
.count-box { background: var(--color-ink); color: var(--color-paper); }
.question-header { display: flex; justify-content: space-between; gap: 20px; }
progress { appearance: none; width: 100%; height: 12px; border: var(--border-grid); background: var(--color-paper); }
progress::-webkit-progress-bar { background: var(--color-paper); } progress::-webkit-progress-value { background: var(--color-ink); } progress::-moz-progress-bar { background: var(--color-ink); }
.technical-context { border: var(--border-grid); padding: 20px; white-space: pre-wrap; overflow-x: auto; }
.options { display: grid; border-top: var(--border-grid); }
.option { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; min-height: 64px; border: 0; border-bottom: var(--border-grid); background: var(--color-paper); padding: 0 20px 0 0; text-align: left; }
.option-marker { display: grid; place-items: center; height: 100%; border-right: var(--border-grid); margin-right: 20px; font-family: var(--font-s-condensed); }
.option[aria-pressed="true"] { outline: 4px double var(--color-ink); outline-offset: -6px; }
.option.correct { background: var(--color-ink); color: var(--color-paper); }
.option.incorrect { outline: 6px double var(--color-ink); outline-offset: -8px; }
.state-tag { display: block; font: 500 12px var(--font-s-condensed); letter-spacing: .1em; margin-top: 6px; }
.feedback { padding: 20px; border-bottom: var(--border-grid); }
.feedback-title { font-size: 25px; font-weight: 300; }
details { border-top: var(--border-grid); padding: 16px 20px; } summary { cursor: pointer; }
.refs a { color: inherit; overflow-wrap: anywhere; }
.wrong-item { border-top: var(--border-grid); padding: 20px 0; }
.wrong-item p { overflow-wrap: anywhere; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
dialog { width: min(520px, calc(100% - 32px)); border: var(--border-grid); padding: 0; color: var(--color-ink); background: var(--color-paper); }
dialog::backdrop { background: rgba(41,41,41,.65); }
.dialog-content { padding: 25px; }
@media (max-width: 767px) {
  .span-8, .span-6, .span-4 { grid-column: span 12; }
  .cell { border-right: 0; }
  .filters, .actions { grid-template-columns: 1fr; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .question-header { display: block; }
}
@media (max-width: 374px) { .site-header { padding-inline: 12px; }.cell, .state-cell { padding: 20px 14px; }.utility-label { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }