:root{--bg:#fff;--surface:#fff;--soft:#f5f8fc;--blue-soft:#edf5ff;--line:#d9e3ee;--text:#142033;--muted:#56677d;--blue:#1769c2;--teal:#087f71;--amber:#916000;--shadow:0 10px 30px rgba(29,55,84,.09);--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}button,input,textarea{font:inherit}.skip{position:fixed;top:-5rem;left:1rem;z-index:99;background:var(--blue);color:#fff;padding:.7rem}.skip:focus{top:1rem}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.4rem;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid #e2e9f1;box-shadow:0 5px 18px rgba(29,55,84,.05)}.brand{display:flex;align-items:center;gap:.75rem;color:var(--text);text-decoration:none;font-weight:800;line-height:1.08}.brand small{display:block;color:var(--muted);font-weight:550;margin-top:3px}.vip{color:var(--teal)}.brand-mark{width:38px;height:38px;display:grid;place-items:center;color:#fff;border-radius:11px;background:linear-gradient(135deg,var(--blue),#0c9483)}.top-actions{display:flex;gap:.55rem;align-items:center}.top-actions a{padding:.55rem .75rem;color:#4d6077;text-decoration:none;font-weight:700}.app-shell{display:grid;grid-template-columns:270px minmax(0,820px) 270px;max-width:1440px;margin:auto}.sidebar,.utility{position:sticky;top:74px;height:calc(100vh - 74px);overflow:auto;padding:1.2rem;background:#f8fafc}.sidebar{border-right:1px solid var(--line)}.utility{border-left:1px solid var(--line)}main{padding:2.6rem 3rem 6rem;min-height:calc(100vh - 74px)}.progress-card,.tool-card,.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.progress-card,.tool-card{padding:1rem;margin-bottom:1rem}.progress-card>div:first-child{display:flex;justify-content:space-between}.progress-track{height:8px;background:#e2eaf2;border-radius:9px;overflow:hidden;margin:.7rem 0}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--teal))}.progress-card small,.tool-card small,.lead{color:var(--muted)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.stats span{padding:.7rem;text-align:center;background:#fff;border:1px solid var(--line);border-radius:11px}.stats strong,.stats small{display:block}.stats strong{color:var(--teal);font-size:1.25rem}.stats small{color:var(--muted);font-size:.72rem}#lessonNav{display:grid;gap:.3rem;margin:1rem 0}.lesson-link{display:grid;grid-template-columns:28px 1fr 15px;gap:.5rem;align-items:center;padding:.62rem .7rem;color:var(--muted);text-decoration:none;border:1px solid transparent;border-radius:10px;font-size:.89rem}.lesson-link:hover,.lesson-link.active{background:var(--blue-soft);color:#174d80;border-color:#cbdced}.lesson-link.done .num{background:var(--teal);color:#fff}.num{width:27px;height:27px;display:grid;place-items:center;background:#e7eef5;color:#38526c;border-radius:8px;font-size:.75rem}.side-actions{display:grid;gap:.5rem;border-top:1px solid var(--line);padding-top:1rem}.side-actions label,.text-button{font-size:.85rem;color:var(--muted);cursor:pointer}.side-actions input{display:none}.text-button{background:none;border:0;text-align:left;padding:0}.mobile-menu{display:none}.secondary{background:#fff;color:#17324f;border:1px solid #cbd8e5;box-shadow:none}button{border:0;border-radius:10px;padding:.68rem .95rem;cursor:pointer;font-weight:750;background:linear-gradient(135deg,var(--blue),#0c9483);color:#fff}button:hover{transform:translateY(-1px)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #e7b955;outline-offset:2px}.lesson-title{font-size:clamp(2.3rem,6vw,4.7rem);line-height:1;letter-spacing:-.05em;margin:.5rem 0 1rem}.kicker,.eyebrow{color:var(--teal);font-size:.75rem;font-weight:850;letter-spacing:.11em}.lead{font-size:1.15rem;max-width:70ch}.lesson-meta{display:flex;gap:1rem;align-items:center;margin:1.4rem 0 2.6rem;color:var(--muted)}.lesson-meta i{height:1px;background:var(--line);flex:1}.content h2{font-size:1.7rem;line-height:1.2;margin:2.5rem 0 .8rem}.content p,.content li{max-width:72ch;color:#33475e}.code-block{position:relative;margin:1.2rem 0;padding:1.2rem;background:#0b1726;color:#d7fff5;border:1px solid #233b55;border-radius:14px;overflow:auto;white-space:pre-wrap;font:14px/1.65 ui-monospace,monospace}.copy{position:absolute;right:.55rem;top:.55rem;background:#18334c;padding:.35rem .55rem;font-size:.72rem}.card{padding:1.35rem;margin:2rem 0}.predict{background:var(--blue-soft);box-shadow:none}.practice{border-top:3px solid var(--teal)}textarea,input{width:100%;padding:.76rem;background:#fff;color:var(--text);border:1px solid #cfdbe7;border-radius:9px}.practice textarea,.reflection textarea{min-height:130px;resize:vertical}.field{margin:.8rem 0}.field label{display:block;color:var(--muted);font-weight:700;margin-bottom:.3rem}.quiz-options{display:grid;gap:.65rem;margin:1rem 0}.quiz-option{text-align:left;background:#fff;color:var(--text);border:1px solid #cfdbe7}.quiz-option.selected{background:var(--blue-soft);border-color:var(--blue)}.feedback{min-height:1.5rem;color:var(--muted)}.correct{color:var(--teal)}.incorrect{color:var(--amber)}.checklist{display:grid;gap:.65rem}.check{display:flex;gap:.7rem}.check input{width:auto;accent-color:var(--teal)}.lesson-actions{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);margin-top:3rem;padding-top:1.5rem}.done-banner{padding:1rem;margin:1.4rem 0;border:1px solid #95d2c3;border-radius:12px;background:#e8f7f2;color:#175c50}.tool-card h2{font-size:1rem;margin:.35rem 0}.tool-card ol{padding-left:1.2rem}.tool-card textarea{resize:vertical}.review-list{display:grid;gap:.8rem}.review-list a{display:grid;grid-template-columns:34px 1fr auto;gap:1rem;align-items:center;padding:1rem;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none}#toast{position:fixed;right:1rem;bottom:1rem;z-index:50;padding:.7rem 1rem;background:var(--text);color:#fff;border-radius:9px;transform:translateY(160%);transition:.25s}#toast.show{transform:none}.hidden{display:none!important}.confidence{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center}.confidence input{accent-color:var(--teal)}
@media(max-width:1120px){.app-shell{grid-template-columns:250px minmax(0,1fr)}.utility{display:none}}@media(max-width:760px){.mobile-menu{display:block}.topbar{padding:0 .75rem}.top-actions a,.wide{display:none}.brand>span:last-child{font-size:.9rem}.brand small{font-size:.66rem}.app-shell{display:block}.sidebar{position:fixed;z-index:40;left:0;top:74px;width:290px;transform:translateX(-110%);transition:.23s}.sidebar.open{transform:none}main{padding:1.6rem 1.1rem 5rem}.lesson-title{font-size:2.8rem}.confidence{grid-template-columns:1fr}}
.stats{grid-template-columns:repeat(3,1fr)}.live-lab,.match-card,.order-card,.bug-card,.retrieval-card{border-color:#cfdceb}.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.live-grid label,.preview-label{display:block;margin-bottom:7px;font-weight:800;color:#2d4661}.live-grid textarea,#bugEditor{min-height:290px;font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;background:#0d1828;color:#dcecff;border-color:#243c58;tab-size:2}.live-grid iframe,.mini-preview{width:100%;min-height:350px;border:1px solid var(--line);border-radius:10px;background:#fff}.mini-preview{min-height:150px;margin-top:14px}.lab-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}.lab-actions .secondary{background:#eef4fa;color:#24415f}.self-check{display:flex;gap:8px;align-items:center;font-weight:750}.self-check input{width:auto}.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.match-grid label{display:grid;gap:7px;padding:12px;border:1px solid var(--line);border-radius:10px}.match-grid select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff;color:var(--text)}#orderList{list-style:none;padding:0;display:grid;gap:8px}#orderList li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#f8fbfe}#orderList li span:last-child{display:flex;gap:5px}#orderList li button{padding:5px 10px}.retrieval-check{margin-top:14px;padding:14px;border-radius:10px;background:#eef8f5;border-left:4px solid var(--teal)}.predict textarea{margin-top:10px}.bug-card>p{color:var(--muted)}
@media(max-width:900px){.live-grid,.match-grid{grid-template-columns:1fr}.live-grid iframe{min-height:280px}}@media(max-width:520px){.lab-actions{align-items:stretch;flex-direction:column}.lab-actions>*{width:100%}.self-check{width:auto}}
.lesson-title{max-width:100%;overflow-wrap:anywhere;text-wrap:balance}.lesson-title+ .lead{max-width:68ch}.content{min-width:0}.topbar{min-width:0}.brand{min-width:0}.brand small{overflow-wrap:anywhere}
@media(max-width:520px){.lesson-title{font-size:clamp(2rem,12vw,2.8rem)}.topbar{height:auto;min-height:74px}.brand small{max-width:145px}}