:root{font:16px/1.65 system-ui,sans-serif;color:#102845;background:#f3f6fb}*{box-sizing:border-box}body{margin:0}header{background:#fff;display:flex;justify-content:space-between;align-items:center;padding:22px max(24px,calc((100vw - 1200px)/2));border-bottom:1px solid #d9e3ef}a{color:#087b91;text-underline-offset:4px}nav{display:flex;gap:24px}.brand{font-size:24px;font-weight:750;text-decoration:none;color:#102845;line-height:1.1}.brand small{display:block;font-size:12px;font-weight:500;margin-top:6px}main{max-width:1200px;margin:auto;padding:38px 24px 60px}.eyebrow{font-size:12px;letter-spacing:2px;color:#087b91;font-weight:700}h1{font-size:clamp(32px,5vw,48px);line-height:1.1;letter-spacing:-1.5px;margin:14px 0}h2{margin-top:0;font-size:27px;line-height:1.25}h3{font-size:16px}.intro>p{max-width:690px;color:#53657b}.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;margin-top:32px}aside,section{background:#fff;border:1px solid #dce5ef;border-radius:16px;padding:24px;min-width:0}aside{align-self:start;position:sticky;top:20px}label{display:block;font-size:14px;font-weight:650;margin-bottom:8px}select{width:100%;padding:12px;border:1px solid #b9c9db;border-radius:8px;font:inherit;background:#fff;color:inherit}.note{font-size:13px;color:#64748b}button{font:inherit;font-size:14px;font-weight:650;border:0;border-radius:8px;background:#087b91;color:#fff;padding:11px 17px;cursor:pointer}button:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:default}.quiet{background:#eaf3f8;color:#102845}#lessons{display:grid;gap:8px;margin:24px 0}#lessons button{text-align:left;background:#f1f5fa;color:#334b65}#lessons button[aria-pressed=true]{background:#102845;color:#fff}details{border-top:1px solid #e2e8f0;padding:15px 0}summary{font-weight:650;cursor:pointer}ol{padding-left:22px}li{margin-bottom:10px}.editor-head,.output-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 10px}.editor-head label{margin:0}textarea{display:block;width:100%;resize:vertical;padding:16px;border:1px solid #b5c6da;border-radius:9px;font:14px/1.65 ui-monospace,Consolas,monospace;tab-size:2}#code{min-height:280px;background:#f9fbff}#stdin{min-height:70px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}#status,#feedback{font-size:14px}#status{color:#087b91}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#0e223b;color:#e7f5ff;padding:20px;border-radius:10px;font:14px/1.7 ui-monospace,Consolas,monospace;max-height:440px;overflow:auto}#timing{font-size:12px;color:#64748b}footer{max-width:1200px;margin:0 auto;padding:25px;font-size:13px;border-top:1px solid #dce5ef}:focus-visible{outline:3px solid #21bed4;outline-offset:3px}@media(max-width:760px){.layout{grid-template-columns:1fr}aside{position:static}main{padding:25px 16px}section,aside{padding:19px}nav{gap:14px;font-size:13px}header{padding:18px}#lessons{grid-template-columns:1fr}h2{font-size:24px}}

#compile-progress{display:block;width:100%;height:8px;margin:20px 0 8px;accent-color:#087b91}#compile-progress[hidden]{display:none}#compile-wait{min-height:0;overflow-wrap:anywhere}