@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light dark;--bg:#fafafa;--fg:#141416;--muted:#6b6b73;--panel:rgba(255,255,255,.88);--soft:#f0f0f2;--line:#dedee3;--strong:#141416;--on-strong:#fff;--shadow:0 24px 80px #00000007;--font:'Space Grotesk',sans-serif}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#09090b;--fg:#f1f1f3;--muted:#9999a3;--panel:rgba(16,16,19,.88);--soft:#1c1c21;--line:#2e2e35;--strong:#f3f3f5;--on-strong:#111114;--shadow:0 24px 80px #00000030}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#09090b;--fg:#f1f1f3;--muted:#9999a3;--panel:rgba(16,16,19,.88);--soft:#1c1c21;--line:#2e2e35;--strong:#f3f3f5;--on-strong:#111114;--shadow:0 24px 80px #00000030}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;transition:background-color .45s,color .45s}#qa-particles{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}main{width:min(100%,820px);margin:auto;padding:28px 28px 70px}.topbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 52px}.brand{font-size:11px;font-weight:600;letter-spacing:.2em}.theme-toggle{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--fg);cursor:pointer}.theme-toggle svg{grid-area:1/1}.sun-icon{display:none}:root[data-theme="dark"] .sun-icon{display:block}:root[data-theme="dark"] .moon-icon{display:none}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .sun-icon{display:block}:root:not([data-theme="light"]) .moon-icon{display:none}}
header{margin-bottom:38px}.eyebrow{font-size:10px;letter-spacing:.23em;color:var(--muted);margin:0 0 14px;font-weight:600}h1,h2,h3{font-family:'Syne',var(--font);font-weight:600;line-height:1.1}h1{font-size:clamp(42px,8vw,72px);letter-spacing:-.065em;margin:0}h1 span{font-weight:500;color:var(--muted)}.subtitle{color:var(--muted);font-size:14px;margin:15px 0 0}#quiz-dhcp-dns{padding:32px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(14px);transition:background-color .45s,border-color .45s}h2{font-size:30px;letter-spacing:-.04em;margin:0 0 16px}h3{font-size:19px;letter-spacing:-.025em;margin:30px 0 17px}p{margin:12px 0}.profile-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:14px}.profile-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.profile-bar span{color:var(--muted)}.profile-bar strong{font-weight:600;color:var(--fg)}button,input,select{font:inherit}button{cursor:pointer;transition:background-color .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s}button:disabled{opacity:.45;cursor:default}button:active:not(:disabled){transform:scale(.97)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--fg);outline-offset:4px}.text-button,.back-button{font-size:12px;font-weight:500;color:var(--muted);background:transparent;border:0;padding:8px 0;min-height:40px;text-decoration:none}.text-button:hover,.back-button:hover{color:var(--fg)}.back-button{margin-top:22px}.difficulty-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.difficulty-button{min-height:58px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--fg);font-size:15px;font-weight:500;position:relative}.difficulty-button[aria-pressed="true"]{background:var(--strong);color:var(--on-strong);border-color:var(--strong)}
#qa-difficulty-easy:hover,#qa-difficulty-easy:focus-visible{background:#19834d;color:#fff;border-color:#19834d;box-shadow:0 5px 22px #19834d25}#qa-difficulty-medium:hover,#qa-difficulty-medium:focus-visible{background:#f4cf49;color:#171713;border-color:#f4cf49;box-shadow:0 5px 22px #f4cf4925}#qa-difficulty-hard:hover,#qa-difficulty-hard:focus-visible{background:#f04d60;color:#fff;border-color:#f04d60;box-shadow:0 5px 22px #f04d6025}
body[data-difficulty="easy"]{--accent:#19834d;--accent-ink:#fff}body[data-difficulty="medium"]{--accent:#f4cf49;--accent-ink:#171713}body[data-difficulty="hard"]{--accent:#f04d60;--accent-ink:#fff}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mode-button{min-height:82px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--fg);font-size:16px;font-weight:500;display:flex;justify-content:center;align-items:center;gap:10px}.mode-button::after{content:'↗';font-size:17px;color:var(--muted)}.mode-button:hover,.btn:hover,.review-button:hover,.theme-toggle:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.mode-button:hover::after{color:inherit}.scoring-note{color:var(--muted);font-size:12px;line-height:1.8;margin:20px 0 0}.scoring-note strong{color:var(--fg);font-weight:500}.leaderboard{margin-top:30px;padding-top:4px;border-top:1px solid var(--line)}.leader-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.leader-header h3{margin:24px 0 16px}.leader-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.leader-filter label{font-size:12px;color:var(--muted)}#qa-leader-level{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:7px 12px}select{margin-left:auto;min-height:40px;min-width:130px;color:var(--fg);border:1px solid var(--line);border-radius:6px;background:var(--soft);font-size:13px;padding:8px 12px}.text-small{font-size:12px}.text-muted{color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500}td,th{padding:14px 8px;border-bottom:1px solid var(--line)}td:first-child{color:var(--muted);width:52px}td:nth-child(2){overflow-wrap:anywhere}td:nth-child(3),td:nth-child(4){white-space:nowrap;font-variant-numeric:tabular-nums}.your-score{background:var(--soft);font-weight:600}#qa-leader-status{font-size:13px;color:var(--muted)}label[for="qa-name-input"]{font-size:12px;font-weight:500}#qa-name-input{display:block;background:var(--soft);color:var(--fg);width:100%;margin-top:8px;border:1px solid var(--line);border-radius:8px;padding:14px;font-size:17px}#qa-name-screen>p{font-size:14px;color:var(--muted);margin:0 0 26px}.viz-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px}.btn,.review-button{min-height:46px;border:1px solid var(--line);border-radius:8px;padding:12px 20px;background:var(--soft);color:var(--fg);font-size:13px;font-weight:500}.btn-primary,.review-button[aria-pressed="true"]{color:var(--on-strong);background:var(--strong);border-color:var(--strong)}.btn:disabled:hover{background:var(--strong);color:var(--on-strong);border-color:var(--strong)}.viz-row,.session-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.session-meta{font-size:11px;color:var(--muted);margin:16px 0 0}.tabular-nums{font-variant-numeric:tabular-nums}#qa-timer{font-size:15px;color:var(--fg)}.progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin:18px 0 28px}.progress-bar{height:100%;background:var(--fg);transition:width .3s ease}#qa-context{font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}#qa-question{font-family:var(--font);font-size:clamp(21px,4vw,28px);font-weight:500;letter-spacing:-.035em;line-height:1.35;margin:0 0 25px}fieldset{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}.form-check{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:9px;background:transparent;padding:15px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.form-check:hover{background:var(--soft)}.form-check:has(input:checked){border-color:var(--fg);background:var(--soft)}.form-check:has(input:disabled){cursor:default}.form-check-input{accent-color:var(--fg);width:17px;height:17px;flex-shrink:0;margin:4px 0 0}.form-check-label{font-size:14px;overflow-wrap:anywhere}#qa-feedback{border:1px solid var(--line);border-radius:9px;padding:16px;margin-top:20px;background:var(--soft);font-size:13px}#qa-verdict{font-weight:600;margin-top:0}#qa-answer{font-weight:500}#qa-explanation{color:var(--muted);margin-bottom:0}.grade-hero{text-align:center;padding:8px 0 26px}.grade-status{font-size:11px;letter-spacing:.23em;color:var(--muted)}.grade-number{display:flex;align-items:baseline;justify-content:center;gap:12px;line-height:1;margin:20px 0;font-variant-numeric:tabular-nums}#qa-score{font-family:'Syne',var(--font);font-size:clamp(80px,18vw,128px);font-weight:600;letter-spacing:-.08em}.grade-denominator{font-size:24px;color:var(--muted)}.grade-count,.grade-message,#qa-result-time{font-size:13px;color:var(--muted)}.saved-result{font-size:12px;color:var(--fg)}.review-title{text-align:center;font-size:17px;margin:12px 0 18px}.review-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.review-item{border-bottom:1px solid var(--line);padding:18px 0;font-size:13px}.review-item strong{font-weight:500}.review-item p{margin:8px 0}.review-solution{font-weight:500}#qa-result>.viz-controls{justify-content:center}#qa-error{border-left:2px solid var(--fg);padding:10px 14px;background:var(--soft);font-size:13px;margin-top:0}#qa-loading{font-size:13px;color:var(--muted)}[hidden]{display:none!important}
@media(max-width:520px){main{padding:20px 18px 44px}.topbar{margin-bottom:38px}header{margin-bottom:28px}#quiz-dhcp-dns{padding:23px 19px;border-radius:14px}.profile-bar{align-items:flex-start;gap:4px}.profile-actions{gap:14px}h3{font-size:18px}.mode-grid,.difficulty-options{gap:7px}.mode-button{font-size:14px;min-height:70px}.mode-button::after{display:none}.difficulty-button{font-size:14px;min-height:52px}td,th{padding:12px 5px}.leader-filter{gap:8px}.viz-controls{gap:12px}.scoring-note{font-size:11px}.form-check{padding:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.text-button:hover,.back-button:hover{color:var(--accent)}.form-check:hover{border-color:var(--accent)}
/* Open editorial layout */
main{width:min(100%,1240px);padding:44px 64px 80px;min-height:100svh}
.topbar{margin:0 0 70px;align-items:flex-start}
.wordmark{display:flex;flex-direction:column;gap:0;font-size:27px;line-height:.86;letter-spacing:-.075em;margin:0;font-weight:800}
.wordmark>span{color:var(--fg);font-weight:800}.logo-dot{color:var(--muted)}
.theme-toggle{width:40px;height:40px;border:0;background:transparent}
#quiz-dhcp-dns{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.profile-bar{padding:0 0 28px;font-size:15px;border-bottom:0;gap:24px}
.profile-actions{gap:24px}.profile-actions .text-button{font-size:12px}
.menu-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.4fr);gap:90px;margin-top:42px;align-items:start}
.section-label{font-family:var(--font);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 28px;line-height:1.5}
.difficulty-options{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:210px}
.difficulty-button{min-height:54px;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:10px 16px;border:0;border-radius:3px;background:transparent;color:var(--muted);font-size:20px;letter-spacing:-.035em}
.difficulty-button[aria-pressed="true"]{background:var(--soft);color:var(--fg)}
.difficulty-button::after{content:'';opacity:0;width:4px;height:4px;border-radius:50%;background:currentColor}.difficulty-button[aria-pressed="true"]::after{opacity:1}
.mode-grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.mode-button{min-height:126px;width:100%;display:grid;grid-template-columns:30px 1fr 44px;gap:18px;align-items:center;text-align:left;padding:18px 14px 18px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-family:'Syne',var(--font);font-size:clamp(34px,4vw,54px);font-weight:600;letter-spacing:-.055em}
.mode-button::after{content:none}.mode-index{font-family:var(--font);font-size:10px;letter-spacing:0;align-self:center;color:var(--muted)}.mode-arrow{font-family:var(--font);font-size:30px;text-align:right;font-weight:400;color:var(--muted);transition:transform .3s}
.mode-button:hover{padding-left:16px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.mode-button:hover .mode-index,.mode-button:hover .mode-arrow{color:inherit}.mode-button:hover .mode-arrow{transform:translate(3px,-3px)}
#qa-name-screen{max-width:540px;margin:10vh auto 0}#qa-name-title{font-size:clamp(34px,5vw,58px);margin-bottom:22px}#qa-name-input{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:16px 0;font-size:24px}#qa-name-screen .viz-controls{margin-top:32px}
#qa-session{max-width:760px;margin:0 auto}#qa-question{font-size:clamp(26px,4vw,36px);line-height:1.3;margin-bottom:32px}.progress{height:2px;margin-bottom:36px}.form-check{border-radius:3px;padding:19px 18px}.btn,.review-button{border-radius:3px}
.leaderboard{max-width:920px;margin:0 auto;padding:0;border:0}.leader-header{margin-top:40px;align-items:flex-end}.leader-header h2{font-size:clamp(36px,5.5vw,64px);letter-spacing:-.055em;margin:0}.leader-header .section-label{margin-bottom:14px}#qa-leader-level{border:0;border-radius:0;padding:0;font-size:10px}.leaderboard>p{margin:24px 0 36px}.leaderboard .back-button{margin:0}.leaderboard table{font-size:16px}.leaderboard td,.leaderboard th{padding:22px 12px}.your-score{background:transparent}.your-score td:nth-child(2){text-decoration:underline;text-underline-offset:5px}
@media(min-width:1000px){.topics-column{padding-top:0}.menu-layout{margin-top:65px}.profile-bar{margin-left:calc((100% - 90px)/3.4 + 90px)}}
@media(max-width:760px){main{padding:28px 26px 56px}.topbar{margin-bottom:46px}.profile-bar{gap:8px;align-items:flex-start}.profile-actions{gap:18px}.menu-layout{grid-template-columns:1fr;gap:42px;margin-top:30px}.section-label{margin-bottom:18px}.difficulty-options{flex-direction:row;max-width:none;gap:6px}.difficulty-button{flex:1;font-size:17px;min-height:48px;padding:10px 12px}.mode-button{min-height:100px;font-size:40px;grid-template-columns:24px 1fr 32px;gap:14px}.mode-arrow{font-size:26px}.wordmark{font-size:24px}#qa-name-screen{margin-top:6vh}.leader-header{align-items:flex-start;gap:8px}.leaderboard td,.leaderboard th{padding:18px 5px}.leaderboard table{font-size:13px}}
@media(max-width:380px){main{padding-inline:20px}.profile-actions{gap:12px}.profile-actions .text-button{font-size:11px}.mode-button{font-size:35px}.difficulty-button{font-size:16px;padding-inline:10px}}

/* Answer feedback uses its own semantic colors in both themes. */
:root{--correct:#16804a;--incorrect:#c6384c}
:root[data-theme="dark"]{--correct:#65dc9c;--incorrect:#ff7f90}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--correct:#65dc9c;--incorrect:#ff7f90}}
[data-outcome="correct"]{--outcome:var(--correct)}[data-outcome="incorrect"]{--outcome:var(--incorrect)}
.form-check[data-outcome]:has(input:checked),.form-check[data-outcome]:hover{border-color:var(--outcome);background:color-mix(in srgb,var(--outcome) 5%,var(--bg))}
.form-check[data-outcome] .form-check-input{position:absolute;opacity:0;pointer-events:none}
.status-icon{display:inline-block;width:20px;height:20px;flex-shrink:0;color:var(--outcome);vertical-align:middle}
.form-check .status-icon{margin-top:2px}
#qa-feedback[data-outcome="correct"],#qa-feedback[data-outcome="incorrect"]{border-color:var(--outcome);background:color-mix(in srgb,var(--outcome) 5%,var(--bg))}
#qa-verdict{display:flex;align-items:flex-start;gap:9px;color:var(--outcome,var(--fg))}#qa-verdict .status-icon{margin-top:1px}

/* Compact homepage controls; session and feedback retain their layout. */
#qa-menu{max-width:840px;margin:0 auto}
#qa-menu .profile-bar{margin:0 0 38px;padding:0 0 24px;border-bottom:1px solid var(--line);align-items:center;gap:18px}
.player-identity{display:flex;align-items:baseline;gap:18px;min-width:0;flex-wrap:wrap}
#qa-menu #qa-player-name{font-family:'Manrope',var(--font);font-size:28px;line-height:1.3;letter-spacing:-.045em;font-weight:600;overflow-wrap:anywhere}
#qa-menu .profile-actions{gap:0}#qa-menu #qa-open-leaderboard{padding:8px 14px;border:1px solid var(--line);border-radius:7px;color:var(--fg)}#qa-menu #qa-open-leaderboard:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#qa-menu .menu-layout{display:flex;flex-direction:column;gap:30px;margin:0}
#qa-menu .difficulty-column,#qa-menu .topics-column{width:100%;padding:0}
#qa-menu .section-label{font-family:'Manrope',var(--font);font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.035em;text-transform:none;color:var(--fg);margin:0 0 15px}
#qa-menu .difficulty-options{display:flex;flex-direction:row;gap:4px;width:min(100%,420px);max-width:none;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:4px}
#qa-menu .difficulty-button{flex:1;min-height:40px;border-radius:6px;border:1px solid transparent;font-family:'Manrope',var(--font);font-size:14px;font-weight:600;letter-spacing:-.015em;justify-content:center;gap:0;padding:8px 18px;background:transparent;color:var(--muted)}
#qa-menu .difficulty-button::after{display:none}
#qa-menu #qa-difficulty-easy[aria-pressed="true"],#qa-menu #qa-difficulty-easy:hover{background:#19834d;border-color:#19834d;color:#fff}
#qa-menu #qa-difficulty-medium[aria-pressed="true"],#qa-menu #qa-difficulty-medium:hover{background:#f4cf49;border-color:#f4cf49;color:#171713}
#qa-menu #qa-difficulty-hard[aria-pressed="true"],#qa-menu #qa-difficulty-hard:hover{background:#f04d60;border-color:#f04d60;color:#fff}
#qa-menu .mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0}
#qa-menu .mode-button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:72px;padding:18px 20px;border:1px solid var(--line);border-radius:8px;background:transparent;font-family:'Manrope',var(--font);font-size:19px;font-weight:600;letter-spacing:-.035em;transition:background-color .25s,color .25s,border-color .25s,transform .25s}
#qa-menu .mode-button>span:nth-child(2){flex:0}#qa-menu .mode-arrow{display:block;font-size:20px;color:var(--muted);font-weight:400}
#qa-menu .mode-button:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);padding:18px 20px;transform:translateY(-2px)}#qa-menu .mode-button:hover .mode-arrow{color:inherit}
.leaderboard td:nth-child(5){white-space:nowrap;font-size:12px;color:var(--muted)}
@media(max-width:760px){#qa-menu .profile-bar{margin-bottom:30px;gap:12px;align-items:flex-start}.player-identity{gap:4px 14px}#qa-menu #qa-player-name{font-size:25px}#qa-menu .profile-actions{width:auto}#qa-menu #qa-open-leaderboard{padding:7px 11px;font-size:11px}#qa-menu .menu-layout{gap:26px}#qa-menu .section-label{font-size:20px}#qa-menu .difficulty-button{font-size:13px;padding:8px 12px}#qa-menu .mode-grid{gap:8px}#qa-menu .mode-button{min-height:66px;padding:14px 12px;font-size:15px;gap:8px}#qa-menu .mode-button:hover{padding:14px 12px}#qa-menu .mode-arrow{font-size:16px}.leaderboard table{font-size:12px}.leaderboard td:nth-child(5){font-size:11px}}
@media(max-width:390px){#qa-menu .mode-grid{grid-template-columns:1fr}#qa-menu .mode-button{min-height:54px;font-size:16px}#qa-menu .profile-bar{flex-direction:column}#qa-menu .profile-actions{align-self:flex-end}}

/* Large menu return controls in the quiz and leaderboard. */
.back-button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:220px;max-width:100%;padding:14px 24px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--fg);font-size:18px;font-weight:600;line-height:1.4;text-align:center}
.back-button:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media(max-width:600px){.back-button{width:100%;min-width:0}}