/* Dark, single-column exam theme inspired by the linked AMC 8 archive page. */
:root {
  --paper: #000;
  --white: #11102c;
  --ink: #f7f7ff;
  --body: #c4c5d7;
  --muted: #999bb8;
  --teal: #8582dc;
  --teal-dark: #6e6bc9;
  --teal-pale: #232247;
  --line: #2e2d50;
  --gold: #363252;
  --gold-line: #a9a1de;
  --red: #e0878c;
  --red-pale: #372033;
  --green: #86cfa8;
  --green-pale: #18352b;
  --serif: Arial, Helvetica, sans-serif;
  --sans: Arial, Helvetica, sans-serif;
}
body { background: #000; color: var(--ink); }
a, .quiet-link, .quiet-button { color: #b9b9f3; }
a:hover, .quiet-link:hover, .quiet-button:hover { color: #e0dfff; }
:focus-visible { outline-color: #b1aef9; }
.site-header { border-bottom: 0; background: #292a61; backdrop-filter: none; }
.header-inner { width: min(720px, calc(100% - 32px)); min-height: 38px; }
.logo { gap: 7px; color: #fff; font-size: 12px; font-weight: 500; }
.logo b { color: #fff; }
.logo-mark { width: 21px; height: 21px; border: 1px solid #aeb1f4; border-radius: 50%; color: #fff; background: transparent; font-size: 13px; }
.header-link { padding: 5px 8px; border-radius: 4px; color: #d2d2e8; font-size: 11px; font-weight: 400; }
.header-link:hover, .header-link.active { color: #fff; background: rgba(255,255,255,.11); }
.page-wrap { width: min(640px, calc(100% - 32px)); }
.topline { padding-top: 30px; }
.eyebrow { color: #adabec; font-size: 10px; letter-spacing: .08em; }
.eyebrow-dot { background: #8582dc; }
.home-page .topline { padding: 32px 0 0; position: relative; z-index: 1; }
.home-page .topline::before { display: none; content: ''; position: absolute; z-index: -1; inset: -1px calc(50% - 50vw) -340px; background: #0e0e29; pointer-events: none; }
.home-grid { display: block; min-height: 0; padding: 0 0 28px; }
.intro { position: relative; padding: 39px 0 46px; }
.intro-rule { display: none; }
.intro h1 { margin: 0 0 28px; color: #fff; font-family: var(--sans); font-size: clamp(35px, 5vw, 48px); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; text-align: center; }
.lede { max-width: 100%; margin: 0 0 14px; color: #d5d5e3; font-family: var(--sans); font-size: 13px; line-height: 1.55; }
.hero-links { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 0 0 14px; font-size: 12px; }
.hero-links a { color: #c9c8f4; text-decoration: underline; text-underline-offset: 2px; }
.jump-links { max-width: 100%; color: #bcbce4; font-size: 12px; line-height: 1.75; }
.jump-links button { padding: 0; border: 0; color: #bcbce4; background: none; font: inherit; cursor: pointer; }
.jump-links button:hover { color: #fff; text-decoration: underline; }
.archive-stats { display: none; }
.setup-card { max-width: 640px; margin: 31px auto 30px; padding: 20px; border-color: #242442; border-radius: 7px; background: #11102c; box-shadow: none; }
.setup-heading { margin-bottom: 20px; }
.setup-heading h2 { color: #fff; font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: 0; }
.setup-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 5px; color: #bebaff; background: #252449; }
.field-label { color: #c9c8df; font-weight: 400; }
.segment { border-color: #373657; border-radius: 5px; background: #0d0c24; }
.segment button { color: #d5d4e8; border-radius: 4px; font-weight: 400; }
.segment button.active { color: #fff; background: #7773c9; box-shadow: none; }
.field select { border-color: #373657; border-radius: 5px; color: #fff; background: #161530; }
.count-row button { border-color: #373657; color: #eeeefa; background: #171631; }
.count-row button.active { border-color: #aaa5ea; background: #36345f; box-shadow: none; }
.primary { border-color: #7773c9; background: #7773c9; color: #fff; box-shadow: none; font-weight: 500; }
.primary:hover:not(:disabled) { color: white; background: #6864bd; }
.secondary { border-color: #4a496b; color: #e7e6f5; background: #1a1938; font-weight: 400; }
.secondary:hover:not(:disabled) { color: #fff; background: #28274a; }
.start-button { width: auto; min-width: 100px; min-height: 33px; margin-top: 0; padding: 7px 13px; border-radius: 4px; text-transform: uppercase; font-size: 11px; }
.continue-button { color: #b9b8f1; text-align: left; }
.recent-strip { border-color: var(--line); background: #11102c; }
.recent-strip strong { color: #fff; }
.recent-strip span:last-child { color: var(--body); }
.how-section { padding: 35px 0 50px; border-color: #24243c; }
.section-heading h2 { color: #fff; font-family: var(--sans); font-size: 26px; font-weight: 400; letter-spacing: 0; }
.section-heading p { color: #aaaac0; }
.how-grid article { border-color: var(--line); background: #11102c; }
.how-grid article > span { color: #a7a4ef; font-family: var(--sans); }
.how-grid h3 { color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 500; }
.how-grid p { color: #b4b4cb; }
.site-footer { border-color: #26263c; color: #9999b4; }
.site-footer a { color: #bdbcf1; }

.quiz-shell, .results-shell, .exam-shell, .progress-page { max-width: 640px; }
.quiz-top { color: #d7d7e8; font-weight: 400; }
.timer { color: #fff; font-size: 15px; }
.timer.urgent { color: #ff9a9a; }
.progress-track { background: #292948; }
.progress-track > span { background: #7773c9; }
.problem-card, .booklet-card, .answer-card, .result-hero, .review-item, .attempt-list, .empty-state, .queue-grid button, .progress-stats > div { border-color: #282742; border-radius: 6px; background: #11102c; box-shadow: none; }
.problem-heading h1, .exam-heading h1, .result-hero h1, .progress-intro h1, .section-heading h2, .answer-card h2, .answer-heading h2, .answer-heading h3 { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: 0; }
.problem-heading h1 { font-size: 25px; }
.problem-intro, .exam-heading p, .result-hero p, .progress-intro p { color: #c2c2d7; }
.number-chip { border: 1px solid #44436b; border-radius: 4px; color: #fff; background: #19183a; font-family: var(--sans); font-size: 18px; font-weight: 400; }
.source-panel { border-color: #34334f; background: #0e0d29; }
.source-panel-head { border-color: #34334f; background: #171633; }
.source-panel-head strong { color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 500; }
.source-panel-head span, .source-panel > p { color: #a9a9c4; }
.source-panel-head a { color: #bab9ed; }
.source-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 13px; }
.source-panel > p { border-color: #34334f; }
.answer-choice, .exam-choices button { border-color: #42415d; color: #ededf7; background: #151431; }
button.answer-choice:hover:not(:disabled), .exam-choices button:hover:not(:disabled) { border-color: #9e9bef; background: #25244a; }
.answer-choice.selected, .exam-choices button.selected { border-color: #8b87df; color: #fff; background: #333168; }
.answer-choice.correct { border-color: #539773; background: #1a3a2b; }
.answer-choice.incorrect { border-color: #b87178; background: #3b232e; }
.choice-letter { border-color: #4a4968; border-radius: 4px; color: #fff; background: #1b1a3a; }
.answer-choice.selected .choice-letter { border-color: #9c98f5; background: #6864bd; }
.answer-choice.correct .choice-letter { border-color: #66ab85; background: #37684b; }
.answer-choice.incorrect .choice-letter { border-color: #bd747b; background: #793b49; }
.feedback { border-color: #457258; background: #183326; }
.feedback.bad { border-color: #70434f; background: #321f2c; }
.feedback h3 { color: #fff; font-family: var(--sans); font-weight: 500; }
.feedback p { color: #d0d0df; }
.feedback a { color: #c1befa; }
.feedback-icon { color: #0d2516; background: #90dbad; }
.feedback.bad .feedback-icon { color: #fff; background: #ab6570; }
.keyboard-tip { color: #9393ac; }
.exam-layout { display: block; }
.booklet-card { margin-bottom: 16px; }
.booklet-card iframe { height: 570px; }
.booklet-card > p { border-color: #34334f; color: #a9a9c4; }
.answer-card { max-width: none; width: 100%; padding: 20px; }
.answer-card-head h2 { color: #fff; font-size: 23px; }
.flag-button, .question-grid button, .text-button { border-color: #44435d; color: #d5d5e8; background: #191834; }
.flag-button.active { border-color: #a69de3; color: #fff; background: #44406f; }
.question-grid button.answered { border-color: #6b67b5; color: #fff; background: #3b3971; }
.question-grid button.current { border-color: #a19deb; color: #fff; background: #7773c9; }
.question-grid button.flagged { box-shadow: inset 0 -3px #aaa4e5; }
.text-button { border: 0; color: #bcb9ec; }
.result-hero { grid-template-columns: 170px 1fr; gap: 22px; padding: 24px; }
.score-ring { width: 160px; height: 160px; background: conic-gradient(#8582dc calc(var(--pct) * 1%), #292846 0); }
.score-ring > div { width: 130px; height: 130px; background: #11102c; }
.score-ring strong { color: #fff; font-family: var(--sans); font-size: 35px; font-weight: 400; }
.score-ring span { color: #c4c4d8; }
.score-ring small { color: #a9a9c2; }
.review-grid { grid-template-columns: repeat(5, 1fr); }
.review-item { border-color: #393852; }
.review-item:hover { border-color: #8884db; }
.review-item strong { color: #fff; font-family: var(--sans); font-size: 17px; font-weight: 400; }
.review-item span { color: #b6b6cb; }
.review-item small { color: #a7a4ed; }
.review-item.missed small { color: #e9a0ab; }
.review-item.skipped small { color: #aaa9bd; }
.progress-stats > div { border-color: #33324b; }
.progress-stats strong { color: #c4c1ff; font-family: var(--sans); font-weight: 400; }
.progress-stats span { color: #c4c4d6; }
.attempt-list { border-color: #33324b; }
.attempt-row { border-color: #33324b; color: #fff; background: #11102c; }
.attempt-row:hover { background: #1b1a3b; }
.attempt-row strong { color: #fff; font-family: var(--sans); font-weight: 400; }
.attempt-row > span, .attempt-row small { color: #b4b4ca; }
.attempt-row b { font-family: var(--sans); font-weight: 400; }
.queue-grid button { border-color: #33324b; color: #fff; }
.queue-grid button:hover { border-color: #8b87df; }
.queue-grid button span:first-child, .queue-grid button strong { color: #e4e4f2; }
.queue-grid button strong { font-family: var(--sans); font-size: 14px; font-weight: 400; }
.queue-grid button span:last-child { color: #c7c4f7; }
.empty-state { border-color: #383750; }
.empty-state h3 { color: #fff; font-family: var(--sans); font-weight: 400; }
.empty-state p { color: #c1c1d4; }
.toast { background: #292857; }
@media (max-width: 700px) {
  .header-inner, .page-wrap { width: min(100% - 28px, 640px); }
  .home-grid { padding-top: 0; }
  .intro { padding-top: 34px; }
  .intro h1 { font-size: 35px; }
  .setup-card { max-width: none; }
  .result-hero { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .header-inner { min-height: 40px; }
  .logo { font-size: 11px; }
  .header-link { font-size: 10px; }
  .home-page .topline { padding-top: 21px; }
  .intro h1 { font-size: 31px; }
  .hero-links { font-size: 11px; }
  .jump-links { font-size: 11px; }
  .setup-card { padding: 16px; }
  .booklet-card iframe { height: 440px; }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
}

body:has(.home-page) { background: linear-gradient(to bottom, #0e0e29 0 435px, #000 435px); }

/* Direct-answer problem pages */
.exam-shell { max-width: 720px; }
.exam-heading { align-items: flex-start; }
.exam-heading h1 { font-size: clamp(27px, 4vw, 36px); }
.exam-overview { margin: 0 0 22px; padding: 18px; border: 1px solid #34334f; border-radius: 6px; background: #11102c; }
.exam-overview .answer-meter { margin: 0 0 16px; color: #d1d0e3; }
.exam-overview .question-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.exam-overview .question-grid button { aspect-ratio: 1; min-height: 36px; }
.exam-overview > .secondary { margin-top: 14px; }
.exam-problems { display: grid; gap: 18px; }
.exam-problem { margin: 0; padding: 25px 27px; scroll-margin-top: 18px; }
.inline-problem .problem-heading { margin-bottom: 18px; }
.inline-problem .problem-heading h2 { margin: 0; color: #fff; font-size: 23px; font-weight: 400; }
.problem-source { color: #f2f2fa; font-size: 16px; line-height: 1.6; overflow-x: auto; }
.problem-source p { margin: 0 0 13px; }
.problem-source p:last-child { margin-bottom: 0; }
.problem-source img, .choice-copy img { display: block; max-width: min(100%, 520px); height: auto; margin: 14px auto; padding: 8px; border-radius: 4px; background: #fff; }
.problem-source math, .choice-copy math { max-width: 100%; color: inherit; }
.problem-source math[display="block"] { display: block; margin: 12px auto; text-align: center; }
.inline-choices { gap: 8px; margin-top: 20px; }
.inline-choices .answer-choice { min-height: 48px; align-items: flex-start; padding: 10px 12px; color: #f1f1fa; text-align: left; }
.inline-choices .choice-letter { flex-shrink: 0; margin-top: 1px; }
.choice-copy { display: block; min-width: 0; padding-top: 4px; line-height: 1.45; }
.choice-copy:empty::before { content: ' '; }
.choice-copy p { margin: 0; }
.choice-copy img { max-width: min(100%, 350px); }
.inline-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 11px; }
.source-credit { margin: 18px 0 0; color: #a7a7bd; font-size: 11px; }
.source-credit a { color: #c6c3f7; }
.exam-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 26px 0 46px; padding: 17px 0; border-top: 1px solid #34334f; color: #c7c7db; font-size: 12px; }
#quick-problem { margin-top: 18px; }
#quick-controls .inline-choices { margin-top: 20px; }
@media (max-width: 700px) {
  .exam-overview .question-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .exam-heading { flex-direction: column; }
  .exam-heading .secondary { width: auto; }
  .exam-problem { padding: 20px 17px; }
  .inline-problem .problem-heading h2 { font-size: 21px; }
  .problem-source { font-size: 15px; }
}

/* Inline review and worked solutions */
.review-card .problem-source { margin-top: 20px; }
.review-card .inline-choices { margin-top: 22px; }
.static-choices .answer-choice { cursor: default; }
.answer-tag { margin-left: auto; padding: 5px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.answer-choice.correct .answer-tag { color: #d6f2df; background: #315d42; }
.answer-choice.incorrect .answer-tag { color: #ffe3e5; background: #693b44; }
.review-answer { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; padding: 13px 15px; border: 1px solid #4d7f5f; border-radius: 5px; color: #e8f5ec; background: #1a3628; font-size: 13px; }
.review-answer.bad { border-color: #6f4b54; color: #f5e8eb; background: #36212c; }
.review-answer span { color: #d2d2df; }
.worked-solution { margin-top: 28px; padding-top: 22px; border-top: 1px solid #36354e; }
.worked-solution h2 { margin: 0 0 14px; color: #fff; font-size: 21px; font-weight: 500; }
.solution-content { color: #f0f0fa; font-size: 15px; line-height: 1.7; overflow-x: auto; }
.solution-content p { margin: 0 0 14px; }
.solution-content p:last-child { margin-bottom: 0; }
.solution-content img { display: block; max-width: min(100%, 520px); height: auto; margin: 14px auto; padding: 8px; border-radius: 4px; background: #fff; }
.solution-content math { color: inherit; }
.solution-content math[display="block"] { display: block; margin: 12px auto; text-align: center; }
.feedback .solution-content { margin: 12px 0; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); font-size: 13px; }
@media (max-width: 480px) {
  .answer-tag { white-space: normal; text-align: right; }
  .review-answer { display: grid; }
}

.theme-switch { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #77769d; white-space: nowrap; }
.theme-short { display: none; }
@media (max-width: 700px) {
  .theme-name { display: none; }
  .theme-short { display: inline; }
}