:root{--ink:#112640;--cyan:#4bbded;--panel:#6ac9e6;--green:#60e99a;--border:#122640;--muted:#254e67;--shadow:5px 5px 0 #142847}
*{box-sizing:border-box}
body{margin:0;background:var(--cyan);color:var(--ink);font:600 18px/1.55 Arial,"Segoe UI",sans-serif;padding:0 24px 40px}
button,input{font:inherit;color:inherit}button,a,label{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-underline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px dashed #112640;outline-offset:5px}
.site-header{max-width:1000px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0}
.brand{font:bold 25px "Courier New",monospace;direction:ltr;text-decoration:none}.site-header>a:last-child{font-size:16px}
main{max-width:1000px;margin:auto}.page-heading{margin:10px 0 24px}h1{font-size:clamp(27px,4vw,36px);line-height:1.3;margin:0 0 10px;font-weight:700}.page-heading p{margin:0;color:var(--muted);font-size:18px}
.card{background:var(--panel);border:3px solid var(--border);padding:24px;box-shadow:inset 2px 2px 0 #b0edff,inset -2px -2px 0 #2788b4,var(--shadow)}
.progress-line{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;font-size:16px}.counter{direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-weight:700;font-size:19px}
progress{display:block;width:100%;height:12px;border:2px solid var(--border);background:#b6e9f6;margin:0 0 24px;appearance:none}progress::-webkit-progress-bar{background:#b6e9f6}progress::-webkit-progress-value{background:#227749}progress::-moz-progress-bar{background:#227749}
.question-top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px}.topic{font-size:15px;color:var(--muted)}h2{font-size:27px;line-height:1.4;margin:0 0 18px;font-weight:700}
.reading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:start;margin:0 0 26px}.reading.no-code{display:block}.context{font-size:20px;line-height:1.65}.context p{margin:0 0 12px}.context p:last-child{margin:0}
.inline-code{direction:ltr;unicode-bidi:isolate;font-family:Consolas,"Courier New",monospace;font-size:1em;white-space:nowrap}
.code-wrap{min-width:0}.cs-code{font:var(--code-size,22px)/1.5 Consolas,"Courier New",monospace;background:#102941;color:#f0faff;border:2px solid var(--border);padding:12px;margin:0;direction:ltr;unicode-bidi:isolate;text-align:left;white-space:pre;overflow:auto;tab-size:4;max-width:100%}.cs-code>code{font:inherit}.code-comment{font-family:Arial,"Segoe UI",sans-serif}.code-hint{font-size:14px;color:var(--muted);margin:6px 0 0}.code-hint[hidden]{display:none}
.choices{border:0;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.choice{display:flex;align-items:center;gap:12px;padding:14px;min-height:76px;border:3px solid var(--border);box-shadow:inset 2px 2px 0 #fff6,4px 4px 0 #20354b;cursor:pointer;font-size:20px;line-height:1.45;min-width:0;position:relative}.choice:nth-of-type(1){background:#ffd3c7}.choice:nth-of-type(2){background:#c9e9ff}.choice:nth-of-type(3){background:#ffedb2}.choice:nth-of-type(4){background:#d4edce}
.choice input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--ink)}.choice-copy{min-width:0;flex:1}.choice-copy.code{font:20px/1.45 Consolas,"Courier New",monospace;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:isolate}.choice-marker{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border:2px solid var(--border);background:#fff4cc;font-size:16px;font-weight:700}.choice:has(input:checked){outline:3px solid var(--ink);outline-offset:2px}.choice:has(input:disabled){cursor:default}.choice:has(input:checked) .choice-marker{background:var(--ink);color:#fff}
.submit-row{display:flex;justify-content:flex-start;border-top:1px solid var(--border);padding-top:20px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:48px;background:var(--green);border:3px solid var(--border);padding:9px 22px;font-size:18px;font-weight:700;box-shadow:inset 2px 2px 0 #c4ffd9,inset -2px -2px 0 #289875,4px 4px 0 #192c49;text-decoration:none}.btn:hover{filter:brightness(1.04)}.btn:disabled{opacity:.55;cursor:default}.btn.secondary{background:#ffedb2;box-shadow:inset 2px 2px 0 #fff8d5,4px 4px 0 #192c49}
.feedback{margin-top:22px;padding:20px;border:3px solid var(--border);background:#fff4cc;scroll-margin-block:16px}.feedback.correct{background:#d4edce}.feedback h3{font-size:23px;margin:0 0 10px;line-height:1.4}.feedback p{font-size:20px;line-height:1.6;margin:0 0 16px}.feedback p:last-child{margin-bottom:0}.feedback .btn{margin-top:4px}.feedback:focus{outline:none}
.complete{text-align:center;padding:38px 24px}.complete h2{font-size:32px}.complete p{font-size:20px;margin:0 0 24px}.complete-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}.save-note{font-size:14px;color:var(--muted);text-align:center;margin:22px 0 0}.loading{text-align:center;padding:50px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){.reading{grid-template-columns:1fr;gap:18px}.cs-code{--code-size:22px}}
@media(max-width:600px){body{padding:0 12px 28px}.site-header{padding:18px 0;gap:12px}.brand{font-size:22px}.site-header>a:last-child{font-size:14px}.page-heading{margin-top:4px;margin-bottom:20px}.page-heading p{font-size:16px}.card{padding:18px 14px}.progress-line{font-size:14px}.counter{font-size:18px}.context{font-size:18px;line-height:1.6}h2{font-size:23px;line-height:1.45}.topic{font-size:14px}.reading{margin-bottom:22px}.cs-code{padding:10px;--code-size:20px}.choices{grid-template-columns:1fr;gap:14px}.choice{padding:12px 10px;gap:10px;font-size:18px;min-height:68px}.choice-copy.code{font-size:18px}.choice-marker{width:25px;height:25px;flex-basis:25px}.submit-row .btn{width:100%}.feedback{padding:16px 12px}.feedback h3{font-size:22px}.feedback p{font-size:18px}.feedback .btn{width:100%}.complete{padding:28px 16px}.complete h2{font-size:27px}.complete p{font-size:18px}.complete-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}