:root {
      --blue: #0033A0;
      --blue-dark: #001f63;
      --blue-light: #eaf0ff;
      --yellow: #FCD116;
      --yellow-soft: #fff7c9;
      --green: #10834b;
      --red: #c62828;
      --ink: #15213d;
      --muted: #5b6780;
      --white: #ffffff;
      --shadow: 0 16px 38px rgba(0, 51, 160, 0.16);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: "Segoe UI", Arial, sans-serif;
      background:
        radial-gradient(circle at 8% 12%, rgba(252, 209, 22, 0.32) 0 8%, transparent 8.2%),
        radial-gradient(circle at 92% 82%, rgba(0, 51, 160, 0.15) 0 12%, transparent 12.2%),
        linear-gradient(135deg, #edf3ff, #fffdf1);
    }

    header {
      background: linear-gradient(110deg, var(--blue-dark), var(--blue) 62%, #1f5ed2);
      color: white;
      padding: 18px clamp(18px, 4vw, 58px);
      box-shadow: 0 4px 14px rgba(0, 31, 99, 0.22);
    }

    .topbar {
      max-width: 1200px;
      margin: auto;
      display: flex;
      align-items: center;
      gap: 16px;
      justify-content: space-between;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .brand-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 50%;
      font-size: 28px;
      background: var(--yellow);
      color: var(--blue-dark);
      border: 3px solid white;
    }

    .brand h1 {
      font-size: clamp(1.1rem, 2.6vw, 1.7rem);
      margin: 0;
      letter-spacing: 0.3px;
    }

    .brand p {
      margin: 3px 0 0;
      opacity: 0.88;
      font-size: 0.88rem;
    }

    .fullscreen-btn {
      border: 2px solid var(--yellow);
      color: var(--blue-dark);
      background: var(--yellow);
      font-weight: 800;
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: transform .2s, background .2s;
    }

    .fullscreen-btn:hover { transform: translateY(-2px); background: white; }

    main {
      width: min(1100px, calc(100% - 28px));
      margin: 28px auto;
    }

    .dashboard {
      display: grid;
      grid-template-columns: 1.3fr repeat(3, minmax(120px, 0.45fr));
      gap: 14px;
      margin-bottom: 20px;
    }

    .stat {
      border-radius: 16px;
      padding: 15px 18px;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 5px 18px rgba(25, 50, 100, 0.09);
      border: 1px solid rgba(0, 51, 160, 0.1);
    }

    .stat label {
      color: var(--muted);
      text-transform: uppercase;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.8px;
      display: block;
    }

    .stat strong {
      margin-top: 5px;
      display: block;
      font-size: 1.3rem;
      color: var(--blue);
    }

    .progress-card strong { font-size: 1rem; }

    .progress-track {
      width: 100%;
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      margin-top: 10px;
      background: #dce5ff;
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--yellow), #ffae00);
      transition: width .35s ease;
    }

    .quiz-card {
      min-height: 520px;
      overflow: hidden;
      border: 1px solid rgba(0, 51, 160, 0.12);
      border-radius: 24px;
      background: rgba(255,255,255,0.96);
      box-shadow: var(--shadow);
    }

    .question-banner {
      min-height: 158px;
      padding: clamp(22px, 4vw, 42px);
      color: white;
      background: linear-gradient(125deg, var(--blue-dark), var(--blue) 65%, #2968d9);
      position: relative;
      overflow: hidden;
    }

    .question-banner::after {
      content: "?";
      position: absolute;
      right: 5%;
      bottom: -65px;
      font-family: Georgia, serif;
      line-height: 1;
      font-size: 220px;
      font-weight: bold;
      color: rgba(252, 209, 22, 0.22);
    }

    .category {
      display: inline-block;
      z-index: 1;
      position: relative;
      color: var(--blue-dark);
      background: var(--yellow);
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 0.75rem;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .question-banner h2 {
      max-width: 890px;
      z-index: 1;
      position: relative;
      margin: 15px 0 0;
      font-size: clamp(1.25rem, 3vw, 2rem);
      line-height: 1.3;
    }

    .question-content { padding: clamp(20px, 4vw, 36px); }

    .directions {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 0.95rem;
      font-weight: 600;
    }

    .choices {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 13px;
    }

    .choice {
      min-height: 72px;
      cursor: pointer;
      text-align: left;
      display: flex;
      gap: 13px;
      align-items: center;
      padding: 13px 16px;
      color: var(--ink);
      background: white;
      border: 2px solid #dce5f7;
      border-radius: 14px;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 700;
      transition: transform .18s, border .18s, box-shadow .18s, background .18s;
    }

    .choice:hover:not(:disabled) {
      border-color: var(--blue);
      box-shadow: 0 6px 16px rgba(0, 51, 160, 0.14);
      transform: translateY(-2px);
    }

    .choice:disabled { cursor: default; }

    .letter {
      width: 33px;
      height: 33px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: white;
      background: var(--blue);
      border-radius: 50%;
      font-weight: 900;
    }

    .choice.correct {
      border-color: var(--green);
      color: #075d31;
      background: #e8f8ee;
    }

    .choice.correct .letter { background: var(--green); }

    .choice.wrong {
      border-color: var(--red);
      color: #8f1313;
      background: #ffeded;
    }

    .choice.wrong .letter { background: var(--red); }

    .feedback {
      display: none;
      margin-top: 22px;
      padding: 15px 18px;
      border-radius: 14px;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.45;
    }

    .feedback.show { display: block; animation: slideIn .28s ease; }
    .feedback.correct-feedback { color: #075d31; background: #e8f8ee; border-left: 6px solid var(--green); }
    .feedback.wrong-feedback { color: #821717; background: #ffeded; border-left: 6px solid var(--red); }

    @keyframes slideIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .controls {
      display: flex;
      gap: 12px;
      justify-content: space-between;
      margin-top: 20px;
      flex-wrap: wrap;
    }

    .control-group { display: flex; gap: 10px; flex-wrap: wrap; }

    button.control {
      cursor: pointer;
      min-height: 45px;
      border: 0;
      border-radius: 10px;
      padding: 10px 17px;
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: 800;
      transition: transform .2s, opacity .2s, background .2s;
    }

    button.control:hover:not(:disabled) { transform: translateY(-2px); }
    button.control:disabled { cursor: not-allowed; opacity: 0.5; }

    .primary { color: var(--blue-dark); background: var(--yellow); }
    .secondary { color: white; background: var(--blue); }
    .outline { color: var(--blue); background: white; border: 2px solid var(--blue) !important; }
    .danger { color: white; background: var(--red); }

    .question-map {
      display: flex;
      gap: 7px;
      justify-content: center;
      flex-wrap: wrap;
      padding: 22px 10px 6px;
    }

    .map-dot {
      width: 27px;
      height: 27px;
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      color: var(--blue);
      background: white;
      font-size: 0.72rem;
      font-weight: 900;
      box-shadow: 0 2px 7px rgba(0, 51, 160, 0.16);
    }

    .map-dot.current { outline: 3px solid var(--yellow); background: var(--blue); color: white; }
    .map-dot.right { background: var(--green); color: white; }
    .map-dot.wrong-dot { background: var(--red); color: white; }

    .welcome, .results {
      text-align: center;
      padding: clamp(32px, 7vw, 75px) clamp(20px, 6vw, 90px);
    }

    .welcome .trophy, .results .trophy {
      width: 100px;
      height: 100px;
      margin: 0 auto 18px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      font-size: 50px;
      color: var(--blue-dark);
      background: var(--yellow);
      box-shadow: 0 8px 0 #d9aa00;
    }

    .welcome h2, .results h2 {
      color: var(--blue);
      font-size: clamp(1.8rem, 5vw, 3rem);
      margin: 0 0 12px;
    }

    .welcome p, .results p {
      max-width: 720px;
      margin: 0 auto 25px;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.6;
    }

    .rules {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      max-width: 800px;
      margin: 27px auto;
      text-align: left;
    }

    .rule {
      padding: 17px;
      border-radius: 14px;
      background: var(--blue-light);
      border-bottom: 4px solid var(--yellow);
    }

    .rule span { font-size: 1.7rem; }
    .rule strong { display: block; margin-top: 7px; color: var(--blue); }
    .rule small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }

    .result-score {
      margin: 25px auto;
      width: min(240px, 100%);
      aspect-ratio: 1;
      display: grid;
      align-content: center;
      justify-items: center;
      border: 10px solid var(--yellow);
      border-radius: 50%;
      color: var(--blue);
      background: var(--blue-light);
    }

    .result-score strong { font-size: 3.2rem; line-height: 1; }
    .result-score span { margin-top: 7px; font-size: 0.9rem; font-weight: 800; }

    footer {
      padding: 16px;
      text-align: center;
      color: var(--muted);
      font-size: 0.82rem;
    }

    @media (max-width: 720px) {
      .topbar { align-items: flex-start; }
      .fullscreen-btn { font-size: 0; width: 45px; height: 45px; padding: 0; }
      .fullscreen-btn::after { content: "⛶"; font-size: 23px; }
      .dashboard { grid-template-columns: 1fr 1fr; }
      .progress-card { grid-column: span 2; }
      .choices { grid-template-columns: 1fr; }
      .rules { grid-template-columns: 1fr; }
      .controls { align-items: stretch; }
      .control-group { width: 100%; }
      .control-group button { flex: 1; }
    }

    @media print {
      header, .dashboard, .controls, .question-map, footer { display: none; }
      body { background: white; }
      main { margin: 0; width: 100%; }
      .quiz-card { box-shadow: none; border: 1px solid #bbb; }
    }
/* Exam adaptations of the supplied blue-and-yellow Quiz Bee design. */
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffb800; outline-offset: 4px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.header-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.text-size-btn { padding: 8px 12px; border: 1px solid #ffffff60; border-radius: 10px; background: #ffffff12; color: white; font-size: 15px; font-weight: 700; }
.text-size-btn span { font-size: 22px; }
.text-size-btn.active { color: var(--blue-dark); background: var(--yellow); border-color: var(--yellow); }
.stat { display: flex; flex-direction: column; justify-content: center; }
.stat strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.progress-card strong { font-size: 19px; }
#progress-caption { margin-top: 7px; font-size: 12px; color: var(--muted); }
.progress-track { flex-shrink: 0; }
.timer-track { height: 4px; background: var(--blue-light); border-radius: 4px; overflow: hidden; margin-top: 10px; }
#timer-progress { width: 100%; height: 100%; background: var(--blue); }
#timer-box.urgent { background: #fff2e4; border-color: #f4b954; }
#timer-box.urgent strong { color: #b34717; }
.quiz-card { min-height: 0; }
.question-content { padding: 0; }
.question-banner { padding: 30px 36px 34px; }
.banner-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; position: relative; z-index: 1; }
.question-number { font-size: 12px; font-weight: 800; letter-spacing: .8px; color: #fff; }
.question-number span { color: #b9cdf4; margin-left: 4px; font-weight: 500; }
.points { font-size: 12px; margin-left: auto; border: 1px solid #ffffff50; padding: 5px 10px; border-radius: 6px; background: #ffffff12; }
.question-banner h2 { font-size: clamp(30px, 3vw, 42px); max-width: 940px; margin-top: 22px; line-height: 1.35; }
.choice-content { padding: 28px 36px 30px; }
.directions { font-size: 16px; font-weight: 500; margin-bottom: 22px; }
.choice { min-height: 88px; padding: 17px 20px; gap: 15px; }
.answer-text { font-size: 22px; line-height: 1.4; }
.letter { width: 39px; height: 39px; font-size: 17px; }
.answer-radio { width: 21px; height: 21px; border: 2px solid #d4def2; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.choice.selected { background: var(--yellow-soft); border-color: #dbb000; box-shadow: 0 4px 15px #fcd11626; }
.choice.selected .letter { background: var(--yellow); color: var(--blue-dark); }
.choice.selected .answer-radio { background: var(--blue); border-color: var(--blue); position: relative; }
.choice.selected .answer-radio:after { content: ''; position: absolute; top: 4px; left: 4px; width: 8px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); }
.card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding-bottom: 20px; border-bottom: 1px solid #e5eaf5; }
.flag-button { display: flex; align-items: center; gap: 7px; padding: 7px 0; font-size: 14px; font-weight: 600; border: 0; background: none; color: var(--muted); }
.flag-button[aria-pressed=true] { color: #986c00; }
.flag-button svg { width: 17px; height: 17px; }
.save-status { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; }
.save-status svg { width: 15px; height: 15px; color: var(--green); }
.controls { align-items: center; }
.control, .next-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.previous-button svg { transform: rotate(180deg); width: 17px; }
.page-indicator { display: flex; gap: 9px; font-size: 13px; color: var(--muted); }
.page-indicator b { color: var(--blue); }
.question-map { gap: 10px; padding-top: 27px; }
.question-grid button { position: relative; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--blue); background: white; font-size: 12px; font-weight: 800; box-shadow: 0 2px 7px #0033a025; }
.question-grid button.answered { background: var(--blue-light); color: var(--blue); box-shadow: inset 0 0 0 2px #91ace9; }
.question-grid button.current { outline: 3px solid var(--yellow); background: var(--blue); color: white; outline-offset: 1px; }
.question-grid button.flagged:after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--yellow); border: 1px solid #b28a00; border-radius: 50%; right: -1px; top: -1px; }
.navigator-legend { display: flex; justify-content: center; gap: 22px; font-size: 12px; color: var(--muted); margin-top: 15px; }
.navigator-legend span { display: flex; gap: 6px; align-items: center; }
.navigator-legend i { width: 9px; height: 9px; border-radius: 50%; }
.current-dot { background: var(--blue); }
.answered-dot { background: #c5d5fb; border: 1px solid #91ace9; }
.flagged-dot { background: var(--yellow); border: 1px solid #b28a00; }
.keyboard-hint { text-align: center; margin-top: 20px; font-size: 12px; color: var(--muted); }
.keyboard-hint span { margin: 0 10px; }
kbd { font: inherit; padding: 1px 5px; background: white; border: 1px solid #cdd9ef; border-radius: 4px; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 20px 0; border-top: 1px solid #0033a018; }
footer>div { display: flex; align-items: center; gap: 6px; text-align: left; }
footer svg { width: 16px; height: 16px; }
.session-status { font-size: 12px; color: var(--blue); }
dialog { width: min(600px, calc(100% - 30px)); border: 1px solid #cad7f1; border-radius: 22px; padding: 30px; color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: #001f6380; backdrop-filter: blur(5px); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; }
.close-dialog { border: 0; background: none; font-size: 30px; color: var(--muted); }
dialog h2 { color: var(--blue); font-size: 30px; margin: 20px 0 12px; }
dialog p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.review-stats { display: flex; gap: 12px; margin: 22px 0; }
.review-stats>div { flex: 1; background: var(--blue-light); border-radius: 12px; padding: 15px; color: var(--muted); font-size: 13px; }
.review-stats b { display: block; font-size: 28px; color: var(--blue); margin-bottom: 5px; }
.review-list { display: flex; flex-wrap: wrap; gap: 8px; }
.review-list button { border: 1px solid #cdd9ef; background: var(--blue-light); border-radius: 7px; padding: 9px 12px; color: var(--blue); font-weight: 700; }
.review-list .unanswered { background: #fff; }
.review-list .flagged { box-shadow: inset 0 -4px var(--yellow); }
.dialog-note { font-size: 12px; }
.dialog-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 25px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 15px); background: var(--blue-dark); color: white; border-radius: 12px; padding: 14px 22px; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 5; max-width: calc(100% - 30px); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.large-text .question-banner h2 { font-size: clamp(36px, 3.6vw, 49px); }
.large-text .answer-text { font-size: 27px; }
.complete-panel { text-align: center; padding: 55px 30px; }
.complete-icon { display: grid; place-items: center; background: var(--yellow); color: var(--blue); width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 30px; box-shadow: 0 7px 0 #d9aa00; }
.complete-icon svg { width: 45px; height: 45px; }
.complete-panel .question-type { color: var(--muted); font-size: 12px; letter-spacing: 1px; font-weight: 700; }
.complete-panel h3 { color: var(--blue); font-size: 44px; margin: 15px 0; }
.complete-panel p { color: var(--muted); font-size: 18px; line-height: 1.8; }
.complete-panel .next-button { background: var(--yellow); color: var(--blue-dark); border: 0; border-radius: 10px; padding: 15px 24px; font-size: 16px; font-weight: 800; }
@media (max-width: 720px) {
  header { padding: 17px 18px; }
  .topbar { gap: 12px; }
  .brand { gap: 10px; }
  .brand-icon { width: 43px; height: 43px; font-size: 24px; border-width: 2px; }
  .brand h1 { font-size: 18px; }
  .brand p { font-size: 11px; line-height: 1.5; }
  .header-tools { gap: 7px; }
  .text-size-btn { padding: 8px; font-size: 12px; }
  .text-size-btn span { font-size: 17px; }
  .fullscreen-btn { width: 39px; height: 40px; }
  main { margin: 20px auto; }
  .dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .progress-card { grid-column: span 3; }
  .stat { padding: 13px; border-radius: 13px; }
  .stat label { font-size: 10px; letter-spacing: .4px; }
  .stat strong { font-size: 23px; }
  .progress-card strong { font-size: 18px; }
  .question-banner { padding: 23px 21px 27px; }
  .banner-meta { gap: 10px; }
  .category { font-size: 10px; padding: 6px 10px; }
  .question-number { font-size: 10px; }
  .points { display: none; }
  .question-banner h2 { font-size: 30px; margin-top: 18px; }
  .choice-content { padding: 23px 19px; }
  .directions { font-size: 14px; line-height: 1.6; }
  .choice { min-height: 78px; padding: 14px; gap: 12px; }
  .answer-text { font-size: 21px; }
  .letter { width: 34px; height: 34px; font-size: 15px; }
  .card-bottom { gap: 8px; flex-wrap: wrap; }
  .flag-button { font-size: 13px; }
  .save-status { font-size: 10px; }
  .controls { gap: 14px; }
  button.control { font-size: 13px; padding: 11px 13px; }
  .controls .control-group { width: auto; }
  .controls .control-group:first-child { width: 100%; }
  .controls .control-group:last-child { margin-left: auto; }
  .page-indicator { font-size: 12px; }
  .question-map { gap: 10px; }
  .question-grid button { width: 31px; height: 31px; font-size: 11px; }
  footer { flex-wrap: wrap; justify-content: center; font-size: 11px; }
  footer>div { width: 100%; justify-content: center; }
  .keyboard-hint { display: none; }
  .large-text .question-banner h2 { font-size: 36px; }
  .large-text .answer-text { font-size: 25px; }
  dialog { padding: 24px; }
  dialog h2 { font-size: 27px; }
  .dialog-actions { flex-wrap: wrap; }
  .review-stats { gap: 8px; }
  .review-stats>div { padding: 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } }
.header-tools a.control { padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; }
@media (max-width: 720px) {
  .header-tools { flex-wrap: wrap; justify-content: flex-end; max-width: 135px; }
  .header-tools a.control { width: 100%; padding: 6px 8px; font-size: 11px; text-align: center; }
  .brand { min-width: 0; }
}
/* Larger examination controls and navigation targets. */
button.control, .next-button, .secondary-button {
  min-height: 52px;
  padding: 14px 22px;
  font-size: 17px;
}
.fullscreen-btn { min-height: 52px; padding: 12px 18px; font-size: 16px; }
.text-size-btn { min-width: 52px; min-height: 52px; font-size: 17px; }
.text-size-btn span { font-size: 23px; }
.header-tools a.control { min-height: 48px; padding: 12px 16px; font-size: 16px; }
.flag-button { min-height: 48px; font-size: 16px; gap: 10px; }
.flag-button svg { width: 21px; height: 21px; }
.question-grid button { width: 44px; height: 44px; font-size: 15px; }
.question-map { gap: 12px; }
.review-list button { min-width: 44px; min-height: 44px; font-size: 16px; }
.close-dialog { width: 48px; height: 48px; font-size: 36px; }
.answer { min-height: 92px; }
button.control svg, .next-button svg { width: 21px; height: 21px; }
@media (max-width: 720px) {
  header .topbar { flex-wrap: wrap; }
  header .brand { flex: 1 1 100%; }
  .header-tools { width: 100%; max-width: none; justify-content: flex-start; }
  .header-tools a.control { width: auto; padding: 12px 14px; font-size: 16px; }
  .fullscreen-btn { width: auto; height: auto; font-size: 16px; min-height: 52px; padding: 12px 16px; }
  .fullscreen-btn::after { content: none; }
  button.control { font-size: 16px; padding: 13px 16px; }
  .question-grid button { width: 42px; height: 42px; font-size: 14px; }
  .question-map { gap: 11px; }
  .flag-button { font-size: 16px; }
}
/* Tighter examination layout, with large questions and controls retained. */
main { margin-top: 18px; margin-bottom: 18px; }
header { padding-top: 13px; padding-bottom: 13px; }
.dashboard { gap: 12px; margin-bottom: 15px; }
.stat { padding: 12px 16px; }
.question-banner { padding: 23px 30px 26px; }
.question-banner h2 { margin-top: 16px; }
.choice-content { padding: 22px 28px; }
.directions { margin-bottom: 16px; }
.choices { gap: 10px; }
.choice.answer { min-height: 80px; padding: 14px 18px; }
.card-bottom { margin-top: 14px; padding-bottom: 12px; }
.controls { margin-top: 12px; }
.question-map { padding-top: 20px; gap: 10px; }
.navigator-legend { margin-top: 11px; }
.keyboard-hint { margin-top: 14px; }
footer { margin-top: 12px; padding-top: 15px; padding-bottom: 15px; }
@media (max-width: 720px) {
  header { padding: 13px 17px; }
  main { margin-top: 15px; }
  .dashboard { gap: 8px; }
  .stat { padding: 11px 12px; }
  .question-banner { padding: 21px 20px 24px; }
  .choice-content { padding: 19px 17px; }
  .choice.answer { min-height: 76px; padding: 13px 14px; }
  .question-map { padding-top: 19px; }
}
.source-instructions { white-space: pre-wrap; font-size: 18px; line-height: 1.6; margin: 18px 0; }
.answer-letter[hidden] { display: none; }