:root{font-family:IBM Plex Sans,Segoe UI,sans-serif;color:#e8edf2;background:radial-gradient(circle at top,rgba(35,90,130,.65),transparent 40%),linear-gradient(160deg,#0d1b2a,#172a3a 45%,#223d4d)}*{box-sizing:border-box}body{margin:0;min-height:100vh}.page{min-height:100vh;display:grid;place-items:center;padding:2rem}.panel{width:min(820px,100%);background:#071018cc;border:1px solid rgba(180,210,230,.22);border-radius:24px;padding:2rem;box-shadow:0 30px 90px #00000059}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;color:#8ed1c7}h1{margin-top:0;margin-bottom:.5rem;font-size:clamp(2rem,5vw,3.5rem)}.lede{max-width:48rem;color:#ccdae4;line-height:1.6}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1.5rem}.status-grid div{background:#ffffff0a;border-radius:14px;padding:1rem}dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#9bb8cb}dd{margin:.35rem 0 0;font-size:1rem}.error{color:#ffb4a2;margin-top:1rem}.lesson-page{align-items:start;padding:3rem 2rem}.lesson{width:min(820px,100%);line-height:1.75;color:#ccdae4}.lesson h1,.lesson h2,.lesson h3,.lesson h4{color:#e8edf2;line-height:1.3}.lesson h1{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:.5rem}.lesson h2{font-size:1.4rem;margin-top:2.5rem}.lesson h3{font-size:1.1rem;margin-top:2rem}.lesson p{margin:1rem 0}.lesson a{color:#8ed1c7;text-underline-offset:3px}.lesson code{background:#ffffff14;padding:.15em .4em;border-radius:4px;font-size:.88em}.lesson pre{background:#0006;border:1px solid rgba(180,210,230,.15);border-radius:8px;padding:1.25rem;overflow-x:auto}.lesson pre code{background:none;padding:0;font-size:.9rem}.lesson ul,.lesson ol{padding-left:1.5rem}.lesson li{margin:.4rem 0}.lesson img{max-width:100%;border-radius:8px}.lesson blockquote{border-left:3px solid #8ed1c7;margin:1.5rem 0;padding:.5rem 1rem;color:#9bb8cb}.lesson-nav{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;margin-top:3rem}.submission-textarea{width:100%;background:#0d1b2a;color:#c8dde8;border:1px solid rgba(180,210,230,.2);border-radius:8px;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;line-height:1.5;resize:none;box-sizing:border-box}.submission-textarea:focus{outline:none;border-color:#8ed1c7}.submission-status{align-self:flex-start;margin:0;color:#8ed1c7;font-weight:600;font-size:.9rem}.complete-btn{background:#8ed1c7;color:#0d1b2a;border:none;border-radius:8px;padding:.75rem 1.75rem;font-size:1rem;font-weight:600;cursor:pointer}.complete-btn:hover:not(:disabled){background:#a8ddd5}.complete-btn:disabled{opacity:.6;cursor:default}
