:root{--bg:#faf9f7;--panel:#fff;--ink:#1c1917;--muted:#7c7269;--accent:#087ea4;--accent-dark:#066887;--accent-tint:#e6f4f9;--border:#e7e3de;--code-bg:#0d1117;--code-inline-bg:#efece8;--warn-tint:#fdf6e3;--warn-border:#e8c96f;--error-tint:#fdf0ef;--error-border:#e5a49e}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.65}code,pre,kbd{font-family:ui-monospace,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.app-shell{grid-template-columns:280px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;gap:16px;height:100vh;padding:20px 16px;display:flex;position:sticky;top:0;overflow-y:auto}.sidebar-brand{align-items:center;gap:10px;padding:4px 8px;display:flex}.sidebar-logo{font-size:28px}.sidebar-brand strong{font-size:15px;display:block}.sidebar-brand small{color:var(--muted);font-size:12px}.sidebar nav{flex-direction:column;gap:2px;display:flex}.sidebar nav a{color:var(--muted);border-radius:8px;align-items:baseline;gap:8px;padding:7px 10px;font-size:14px;text-decoration:none;display:flex}.sidebar nav a:hover{background:var(--bg);color:var(--ink)}.sidebar nav a.active{background:var(--accent-tint);color:var(--accent-dark);font-weight:600}.lesson-num{color:var(--muted);min-width:20px;font-family:ui-monospace,Menlo,monospace;font-size:12px}.sidebar nav a.active .lesson-num{color:var(--accent-dark)}.sidebar-footer{color:var(--muted);margin-top:auto;padding:8px;font-size:12px}.content{max-width:880px;padding:40px clamp(20px,5vw,64px) 96px}.loading{color:var(--muted)}h1{letter-spacing:-.01em;margin:0 0 12px;font-size:1.8rem;line-height:1.25}h2{border-bottom:1px solid var(--border);margin:40px 0 8px;padding-bottom:6px;font-size:1.3rem}h3{margin:28px 0 6px;font-size:1.05rem}p{margin:10px 0}.lead{color:#44403c;font-size:1.05rem}a{color:var(--accent)}ul,ol{padding-left:24px}li{margin:4px 0}hr{border:none;border-top:1px solid var(--border);margin:32px 0}code{background:var(--code-inline-bg);border-radius:5px;padding:2px 5px;font-size:.85em}pre{background:var(--code-bg);color:#e6edf3;border-radius:10px;padding:14px 16px;font-size:13px;line-height:1.55;overflow-x:auto}pre code{font-size:inherit;color:inherit;background:0 0;padding:0}blockquote{background:var(--accent-tint);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;margin:16px 0;padding:12px 16px}blockquote p{margin:6px 0}table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14.5px}th{text-align:left;background:var(--code-inline-bg)}th,td{border:1px solid var(--border);vertical-align:top;padding:8px 12px}details{background:var(--panel);border:1px solid var(--border);border-radius:8px;margin:12px 0;padding:10px 14px}summary{cursor:pointer;color:var(--accent-dark);font-weight:600}button{font:inherit;border:1px solid var(--accent-dark);background:var(--accent);color:#fff;cursor:pointer;border-radius:7px;padding:6px 14px;font-size:14px}button:hover{background:var(--accent-dark)}button.ghost{color:var(--accent-dark);border-color:var(--border);background:0 0}button.ghost:hover{background:var(--accent-tint)}button:disabled{opacity:.5;cursor:not-allowed}.demo-box{border:1px solid var(--border);background:var(--panel);border-radius:12px;margin:20px 0;overflow:hidden}.demo-box-header{border-bottom:1px solid var(--border);background:var(--bg);justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:14px;display:flex}.demo-box-canvas{padding:20px}.demo-box-source{border-radius:0;margin:0}.exercise{border:1.5px dashed var(--warn-border);background:var(--warn-tint);border-radius:12px;margin:20px 0;overflow:hidden}.exercise-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;font-size:14px;display:flex}.exercise-file{background:#0000000d;margin-top:4px;font-size:12px;display:block}.exercise-actions{gap:8px;display:flex}.exercise-canvas{background:var(--panel);border-top:1px dashed var(--warn-border);padding:20px}.error-boundary{background:var(--error-tint);border:1px solid var(--error-border);border-radius:10px;padding:14px 16px}.error-boundary pre{color:#7f1d1d;background:#0000000f;font-size:12.5px}@media (width<=860px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);height:auto;position:static}.content{padding-top:24px}}.lesson-done{color:#15803d;margin-left:auto;font-size:.8rem}.progress-summary{background:var(--accent-tint);border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:.6rem .9rem;font-size:.92rem}.lesson-done-bar{border-top:1px solid var(--border);margin-top:2.5rem;padding-top:1.25rem}.lesson-done-bar label{cursor:pointer;color:var(--muted);align-items:center;gap:.5rem;font-size:.95rem;display:inline-flex}