:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101520; color: #e9edf7; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at top right, #203350 0, transparent 55%); min-height: 100vh; }
main { max-width: 900px; margin: auto; padding: 45px 24px; }
.eyebrow { font-size: .75rem; letter-spacing: .14em; color: #70dbc7; font-weight: 750; }
h1 { font-size: clamp(1.7rem, 5vw, 2.7rem); margin: 12px 0; letter-spacing: -.04em; }
h1 span { color: #70dbc7; }
.intro, footer, .dashboard span { color: #a9b5ca; }
.dashboard { display: flex; gap: 20px; margin: 30px 0 16px; }
.dashboard div { flex: 1; background: #1a2333; padding: 16px; border: 1px solid #2e3b51; border-radius: 12px; }
.dashboard strong, .dashboard span { display: block; }
.dashboard strong { font-size: 1.4rem; margin-bottom: 4px; }
.dashboard span { font-size: .8rem; }
progress { display: block; width: 100%; height: 7px; border: 0; border-radius: 10px; accent-color: #70dbc7; margin-bottom: 24px; }
progress::-webkit-progress-bar { background: #2e3b51; border-radius: 10px; }
progress::-webkit-progress-value { background: #70dbc7; border-radius: 10px; }
.card { background: #192232; border: 1px solid #34445f; border-radius: 18px; padding: 28px; box-shadow: 0 16px 50px #0003; }
.question-meta { display: flex; justify-content: space-between; gap: 12px; color: #70dbc7; font-size: .8rem; font-weight: 700; }
#mode { color: #c4b5fd; }
h2 { font-size: 1.25rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; margin: 20px 0; }
.options { display: grid; gap: 12px; }
button { font: inherit; cursor: pointer; color: #10251f; background: #70dbc7; border: 1px solid transparent; border-radius: 10px; padding: 12px 18px; font-weight: 650; }
button:hover { filter: brightness(1.08); }
button:focus-visible, a:focus-visible { outline: 3px solid #d5bcff; outline-offset: 4px; }
.option { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: #212d41; color: #edf2ff; border: 1px solid #3b4e6b; font-weight: 450; padding: 16px; }
.letter { display: grid; place-items: center; min-width: 30px; height: 30px; border: 1px solid #657791; border-radius: 7px; font-weight: 750; }
.option-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.option-text { min-width: 0; }
.practice-group { color: #a9b5ca; font-size: .75rem; margin: 12px 0 0; }
.question-body { margin-bottom: 22px; line-height: 1.65; }
.question-body:empty { display: none; }
.question-body p { white-space: pre-wrap; margin: 12px 0; }
.question-body ol { padding-left: 25px; }
.question-body li { margin: 8px 0; }
.source-label { font-family: Consolas, "Courier New", monospace; color: #9fc7ff; font-size: .9rem; }
.code-block { margin: 16px 0; border: 1px solid #3c4a62; border-radius: 10px; overflow: hidden; background: #101827; min-width: 0; }
.code-block figcaption { background: #202c40; color: #b4c4db; padding: 7px 16px; font-size: .72rem; letter-spacing: .04em; }
.code-block pre { margin: 0; padding: 16px; max-width: 100%; overflow-x: auto; font-size: .9rem; line-height: 1.65; white-space: pre; tab-size: 4; }
.code-block pre:focus-visible { outline: 2px solid #d5bcff; outline-offset: -3px; }
.code-block code, .answer-code { font-family: Consolas, "Courier New", monospace; }
.answer-code { font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.token-keyword { color: #c9b0ff; }
.token-builtin { color: #83caff; }
.token-string { color: #a5e5b3; }
.token-number { color: #f1ca84; }
.token-comment { color: #97a8bf; font-style: italic; }
.option.wrong { background: #452c35; border-color: #f0a3ab; }
.option.correct { background: #164b40; border-color: #70dbc7; }
.option:disabled { cursor: default; }
.option:disabled:not(.correct):not(.wrong) { opacity: .6; }
.feedback { margin-top: 20px; white-space: pre-wrap; line-height: 1.65; }
.feedback:empty { display: none; }
.feedback.success { color: #99edcf; }
.feedback.retry { color: #f4d395; }
.actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 20px; }
.secondary { color: #d7e2f4; background: transparent; border: 1px solid #51637c; font-size: .85rem; }
footer { font-size: .8rem; line-height: 1.6; margin-top: 22px; }
.footer-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.small { font-size: .72rem; opacity: .85; margin-top: 25px; }
a { color: #70dbc7; }
.notice { white-space: pre-wrap; color: #ffce8d; line-height: 1.6; }
[hidden] { display: none !important; }
@media (max-width: 560px) {
  main { padding: 25px 14px; }
  .card { padding: 20px 16px; }
  .dashboard { gap: 8px; }
  .dashboard div { padding: 12px 9px; }
  .dashboard strong { font-size: 1.15rem; }
  .dashboard span { font-size: .7rem; }
}