:root{color-scheme:light;--ink:#172d35;--muted:#64747a;--paper:#fffefb;--ground:#f1f0e9;--line:#d5dcd7;--blue:#165e86;--blue-dark:#104966;--green:#1c7458;--orange:#a76036;--code:#14242c;--shadow:0 12px 36px rgba(23,45,53,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.65 'DM Sans',system-ui,sans-serif}a{color:var(--blue)}h1,h2,h3{font-family:Literata,Georgia,serif;line-height:1.2;letter-spacing:-.025em}h1{font-size:clamp(2rem,4vw,3.4rem);margin:.3em 0}h2{font-size:1.65rem}h3{font-size:1.1rem}p{margin:.7em 0 1.2em}.mast{display:flex;align-items:center;justify-content:space-between;padding:14px max(3.3vw,20px);background:var(--paper);border-bottom:1px solid var(--line)}.brand{font-family:Literata,serif;font-size:1.35rem;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.045em}.brand span:first-child{color:var(--blue)}.brand-sub{font-family:'DM Sans',sans-serif;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-left:9px;color:var(--muted);font-weight:700}.mast nav{display:flex;gap:22px;align-items:center}.mast nav a,.text-button{text-decoration:none;color:var(--ink);font:600 .85rem 'DM Sans',sans-serif}.mast nav a:hover,.text-button:hover{color:var(--blue)}.mast nav form{margin:0}.text-button{background:none;border:0;cursor:pointer}main{max-width:1500px;padding:36px max(3.3vw,20px) 80px;margin:auto}footer{text-align:center;border-top:1px solid var(--line);padding:22px;color:var(--muted);font-size:.8rem}.eyebrow{text-transform:uppercase;color:var(--orange);letter-spacing:.13em;font-size:.68rem;font-weight:700;margin:0}.paper{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;padding:30px}.notice{border-left:4px solid var(--orange);background:#fff9ed;padding:12px 18px;margin-bottom:22px}.hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.6fr);gap:40px;background:#173746;color:#fff;border-radius:10px;padding:clamp(30px,5vw,70px);align-items:center}.hero .eyebrow{color:#d7b78e}.hero h1{max-width:760px}.hero p:not(.eyebrow){color:#d5e0df;max-width:580px}.hero a.light{background:#f3eee0;color:#143544;margin-top:12px}.progress-box{background:#ffffff11;border:1px solid #ffffff2e;border-radius:8px;padding:26px;display:flex;flex-direction:column;gap:9px}.progress-box strong{font:600 2.6rem Literata,serif}.progress-box span,.progress-box small{color:#d3e1df}.bar{height:8px;border-radius:10px;background:#ffffff30;overflow:hidden}.bar i{display:block;background:#deb781;height:100%}.section-heading{margin:55px 0 22px}.section-heading h2{margin:.25em 0}.section-heading p:last-child{color:var(--muted);margin:0}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:13px}.lesson-card{background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:138px;padding:21px;display:grid;grid-template-columns:45px 1fr;grid-template-rows:1fr auto;column-gap:12px;transition:transform .15s,border-color .15s,box-shadow .15s}.lesson-card:hover{transform:translateY(-3px);border-color:#8caaa9;box-shadow:var(--shadow)}.lesson-num{font:600 1.5rem Literata,serif;color:var(--blue)}.lesson-title{font:600 1.1rem Literata,serif}.lesson-state{grid-column:2;color:var(--green);font-size:.82rem}.lesson-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.lesson-heading h1{margin-bottom:2px}.lesson-heading p:last-child{color:var(--muted)}.back{text-decoration:none;font-size:.85rem;font-weight:700}.study-layout{display:grid;grid-template-columns:minmax(420px,1fr) minmax(420px,1.12fr);gap:20px;align-items:start}.lesson-copy{max-height:calc(100vh - 100px);overflow:auto;position:sticky;top:15px}.lesson-copy h2{margin-top:2em;border-top:1px solid var(--line);padding-top:22px}.lesson-copy h2:first-child{border:0;margin-top:0;padding:0}.lesson-copy pre,.results pre,#live-feedback pre{background:#12262e;color:#e4eeee;border-radius:6px;padding:15px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.lesson-copy code:not(pre code){background:#edf2ee;padding:2px 5px}.lesson-copy blockquote{border-left:3px solid #c5d2d2;margin-left:0;padding-left:20px;color:var(--muted)}.next{border-top:1px solid var(--line);margin-top:35px;padding-top:20px}.code-panel{border:1px solid #29434d;background:var(--code);color:#e4eceb;border-radius:8px;padding:20px;box-shadow:var(--shadow)}.code-panel h2{margin:.2em 0 0}.code-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.code-head .eyebrow,.output .eyebrow{color:#b9cdae}.save-state{color:#a9bcb8;font-size:.78rem}.task-list{list-style:none;padding:0;max-height:220px;overflow:auto;border-top:1px solid #ffffff27;margin:0 0 16px}.task-list li{display:flex;gap:8px;align-items:center;padding:7px 2px;border-bottom:1px solid #ffffff1a;font-size:.83rem}.task-id{font-family:ui-monospace,monospace;color:#c7d79d;min-width:40px}.task-state{margin-left:auto;color:#c5aaa0}.task-state.solved{color:#b7e4c7}.code-editor{display:block;width:100%;min-height:430px;background:#0b1b21;color:#dce8e6;border:1px solid #3b5961;border-radius:5px;padding:17px;font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical;tab-size:4}.code-editor:focus{outline:2px solid #7db9d6}.editor-actions{display:flex;gap:9px;margin-top:14px}.button{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid transparent;border-radius:5px;cursor:pointer;font:700 .84rem 'DM Sans',sans-serif;text-decoration:none;transition:background .15s}.button:disabled{opacity:.55;cursor:wait}.button.primary{background:#1d719c;color:white}.button.primary:hover:not(:disabled){background:var(--blue-dark)}.button.quiet{background:#edf2ec;color:var(--ink)}.button.quiet:hover:not(:disabled){background:#dae7de}.field-note{font-size:.78rem;color:#9bb0b4}.results{margin-top:18px;border-top:1px solid #ffffff27}.results h3{font-family:'DM Sans',sans-serif;font-size:.95rem}.results details,#live-feedback details{border-top:1px solid #ffffff26;padding:9px 0}.results summary,#live-feedback summary{cursor:pointer}.extra{border:1px solid #ffffff2d;padding:10px;margin:8px 0}.extra ul{margin-bottom:0}.result-list{list-style:none;padding:0}.result-list li{padding:6px 0;border-bottom:1px solid #ffffff22}.result-pass{color:#afe3c1}.result-open{color:#e7bbac}.playground-head{margin-bottom:20px}.playground{display:grid;grid-template-columns:1fr 1fr;gap:20px}.output{background:var(--paper);border:1px solid var(--line);padding:20px}.output pre{white-space:pre-wrap;overflow:auto;font:13px/1.5 ui-monospace,monospace}.admin-head{max-width:720px;margin-bottom:28px}.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.admin-grid .paper h2{margin-top:0}.admin-lessons{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.admin-lessons a{padding:12px 18px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--ink)}.admin-lessons a span{float:right;color:var(--blue)}.auth,.profile{max-width:440px;margin:50px auto}.auth h1,.profile h1{font-size:2.3rem}.auth form,.admin-grid form,.edit-lesson form{display:flex;flex-direction:column;gap:14px}.auth label,.paper label{display:flex;flex-direction:column;font-size:.83rem;font-weight:700;gap:5px}input,select,textarea{font:inherit;border:1px solid #b8c8c8;border-radius:4px;padding:10px;background:#fff;color:var(--ink)}input:focus,select:focus,textarea:focus{outline:2px solid #5a9dbe}input[type=file]{width:100%;margin:8px 0}.edit-lesson{max-width:1000px;margin:auto}.edit-lesson textarea{font:13px/1.5 ui-monospace,monospace}.invite-link{overflow-wrap:anywhere;background:#edf2ec;padding:14px}.totp-key{font-size:1.25rem;letter-spacing:.12em;overflow-wrap:anywhere}@media(max-width:980px){.study-layout,.playground{grid-template-columns:1fr}.lesson-copy{max-height:none;position:static}.hero{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}}@media(max-width:620px){main{padding:22px 14px 50px}.mast{align-items:start;gap:13px;flex-direction:column}.mast nav{flex-wrap:wrap;gap:12px}.hero{padding:25px}.admin-lessons{grid-template-columns:1fr}.lesson-heading{align-items:start;flex-direction:column}.paper{padding:20px}}
:where(.progress-box) progress{width:100%;height:10px;accent-color:#deb781}
.guide-table{overflow-x:auto;margin:18px 0}.guide-table table{border-collapse:collapse;width:100%;font-size:.85rem}.guide-table th,.guide-table td{border:1px solid var(--line);text-align:left;vertical-align:top;padding:9px 11px}.guide-table th{background:#e9efea}.guide-table tr:nth-child(even) td{background:#f7f8f4}