:root{--bg:#f4f8fb;--text:#2D3F54;--muted:#52647A;--border:rgba(82,100,122,.24);--blue:#004C94;--green:#73CC80;--red:#8B1E3F;--shadow:0 14px 35px rgba(45,63,84,.10);--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(0,76,148,.12),transparent 36%),radial-gradient(circle at bottom right,rgba(29,189,142,.10),transparent 30%),var(--bg);min-height:100vh}
header,main,.exercise-nav{max-width:500px;margin:auto;padding:20px}
header{text-align:center;padding-top:24px}
h1{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em;margin:0 0 8px}
h2{font-size:1.25rem;margin:0 0 12px}h3{margin-top:0}
p{line-height:1.6}header p{color:var(--muted);margin:0}
code,pre{font-family:var(--mono)}
.exercise-nav,.actions,.exercise-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.exercise-nav{justify-content:flex-end;padding-bottom:0}.exercise-head{justify-content:space-between;margin-bottom:12px}.exercise-head h2{margin:0}
button,.exercise-nav a{font:inherit;font-weight:750;border:2px solid transparent;border-radius:13px;padding:11px 15px;cursor:pointer;text-decoration:none;transition:background .15s}
button:hover:not(:disabled),.exercise-nav a:hover{filter:brightness(.94)}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #3C93FA;outline-offset:3px}
button:disabled{cursor:default}
.primary,.exercise-nav a{background:var(--blue);color:white}.ghost{background:rgba(82,100,122,.12);color:var(--text)}
.panel,.stat{background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:20px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}.stat{padding:12px 14px;color:var(--muted);font-size:.86rem}.stat strong{display:block;font-size:1.2rem;color:var(--text);margin-top:4px}
label{font-weight:750}select{display:block;font:inherit;color:var(--text);padding:12px;border:1px solid var(--border);border-radius:13px;margin:10px 0;width:100%;background:white}
.statement{border:2px solid #3C93FA;border-radius:18px;padding:16px;background:linear-gradient(135deg,rgba(60,147,250,.10),#fff)}
.codebox{border-radius:18px;overflow:hidden;background:#0f172a;color:#e5e7eb;box-shadow:0 14px 28px rgba(15,23,42,.12)}.code-header{background:#111827;color:#d1d5db;padding:10px 16px;font: .88rem var(--mono)}pre{margin:0;padding:18px;overflow-x:auto;font-size:1rem;line-height:1.8}
.hints{margin-top:14px;padding:12px 15px;border:1px solid #3C93FA;border-radius:14px;background:rgba(60,147,250,.08);font-size:.9rem}.hints p{margin:0}.hints p+p{margin-top:10px}
.hints code{display:inline-block;background:#0f172a;color:#e5e7eb;border:1px solid #334155;border-radius:6px;padding:1px 7px;font-weight:700}
.explanation-toggle{margin-top:8px;padding:7px 11px;font-size:.85rem}.variable-explanation{margin:10px 0 0;padding:12px;border-radius:12px;background:var(--bg);font-size:.9rem;overflow-wrap:anywhere}
#answers{margin-top:20px;display:grid;gap:12px}
fieldset{margin:0;border:1px solid var(--border);border-radius:14px;padding:10px 14px 14px;min-width:0}legend{padding:0 6px;font-weight:750}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.choice{font-family:var(--mono);background:rgba(60,147,250,.10);color:var(--blue);min-height:46px}.choice.selected{border-color:var(--blue);background:rgba(60,147,250,.22)}
.choice.good{background:var(--green);border-color:#388444;color:#163b20}.choice.bad{background:rgba(139,30,63,.14);border-color:var(--red);color:var(--red)}
.answer-status{display:block;min-height:1.4em;margin-top:8px;font-size:.9rem;color:var(--muted)}
.feedback:empty{display:none}.feedback,.solution{margin-top:18px;border:1px solid var(--border);border-radius:18px;padding:15px;line-height:1.6}.feedback.ok{background:rgba(115,204,128,.18);border-color:var(--green)}.feedback.bad{background:rgba(139,30,63,.12);border-color:var(--red)}.solution{background:#f4f8fb}.solution li{margin:5px 0}.actions{margin-top:18px}
@media(max-width:620px){header,main,.exercise-nav{padding:14px}.panel{padding:15px}.stats{grid-template-columns:repeat(2,1fr)}.choices{gap:6px}.choice{padding:10px 5px}pre{font-size:.9rem}.exercise-nav a{font-size:.85rem}select{font-size:.9rem}}