*{box-sizing:border-box}body{margin:0;background:#f7f8fc;color:#222641;font:16px/1.5 system-ui,sans-serif}header{background:white;border-bottom:1px solid #dddfea;display:flex;align-items:center;justify-content:space-between;padding:14px max(5vw,20px)}header strong{font-size:26px;letter-spacing:-1px}button{cursor:pointer;border:0;background:#5445bd;color:white;border-radius:10px;padding:12px 19px;font-weight:700;font-size:15px}nav button,.back{background:transparent;color:#454467}main{max-width:1060px;margin:36px auto;padding:0 20px}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 5%,#534685,transparent 55%),#211c48;color:white;padding:38px;border-radius:22px}.hero:after{content:"🪐";position:absolute;right:7%;top:0;font-size:clamp(60px,13vw,174px);transform:rotate(-15deg)}.hero>*{position:relative;z-index:1;max-width:69%}small{font-size:12px;letter-spacing:1.6px;font-weight:800;color:#696191}.hero small{color:#d9d0ff}h1{font-size:clamp(32px,5vw,54px);letter-spacing:-2px;margin:8px 0}.hero button{background:#dfef89;color:#282940}h2{margin:28px 0 14px}.row,article,.panel{background:white;border:1px solid #dedfea;border-radius:16px;padding:22px;margin:12px 0}.row{display:flex;align-items:center;gap:18px}.row button{margin-left:auto}.icon{font-size:30px;background:#eeeafa;padding:10px;border-radius:14px}h3,p{margin:3px 0 10px}button:disabled{background:#e8e8ef;color:#67677b;cursor:default}textarea,pre{width:100%;background:#201f36;color:#e2f69e;font:17px/1.6 monospace;padding:16px;border:0;border-radius:10px}textarea{height:165px}pre{white-space:pre-wrap;min-height:52px}input{padding:12px;font:inherit;max-width:100%}.diploma{text-align:center;padding:40px;border:5px double #a89656;background:#fffdf5}.diploma h1{overflow-wrap:anywhere}@media(max-width:550px){.row{flex-wrap:wrap}.row button{margin:0}.hero{padding:20px}nav button{padding:8px}}@media print{header,button,.back{display:none}.diploma{break-inside:avoid}}
.hero:after{display:none}.hero .cody{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:29%;max-height:100%;object-fit:contain}.hero p{max-width:64%}header strong{font-size:clamp(17px,3vw,26px);color:#184952}@media(max-width:550px){header{flex-wrap:wrap}.hero .cody{right:0;width:31%}}
:root{--ink:#103a48;--teal:#006c66;--mint:#dcf7ee}
body{background:#f5faf8;color:var(--ink)}
button,.hero button{background:var(--teal);color:white}
button:focus-visible,summary:focus-visible{outline:3px solid #d98013;outline-offset:3px}
nav button,.back{background:transparent;color:var(--ink)}
.hero{background:radial-gradient(circle at 82% 55%,#b0eadc 0 15%,transparent 15.3%),linear-gradient(110deg,#eafbf4,#c9f2e5);color:var(--ink);border:1px solid #b4dfd1}
small,.hero small{color:#28685e}.icon,.milestone,.guide{background:var(--mint)}
.guide{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;margin:16px 0}.guide img{width:70px;height:70px;object-fit:contain}.guide p{margin:3px 0}
textarea,pre{background:#112f3b}.diploma{border-color:#278176;background:#fafffc}.seal{width:105px;display:block;margin:auto}.signature{font-weight:650;color:#28685e}
.celebration{width:min(370px,92vw);border:1px solid #b5dacf;border-radius:20px;color:var(--ink);text-align:center;padding:22px;box-shadow:0 24px 80px #102e4038}.celebration::backdrop{background:#0b2735a6}.celebration img{display:block;width:98px;height:98px;margin:0 auto}.celebration h2{margin:8px 0}.milestone{padding:12px 16px;margin:16px 0;border-radius:12px}.milestone span,.milestone progress{display:block;width:100%}.milestone progress{accent-color:var(--teal);height:10px;margin-top:8px}.celebration button{width:100%}details{margin:16px 0}summary{cursor:pointer}
[data-module="0"]{--accent:#066b60;--wash:#daf6ed}
[data-module="1"]{--accent:#9c450d;--wash:#ffead6}
[data-module="2"]{--accent:#245aaa;--wash:#e4efff}
[data-module="3"]{--accent:#794099;--wash:#f4e7fb}
[data-module]{border-top:4px solid var(--accent)}
[data-module] .guide,[data-module] .icon,[data-module] .milestone{background:var(--wash)}
[data-module] small{color:var(--accent)}
[data-module] button:not(:disabled){background:var(--accent)}
[data-module] progress{accent-color:var(--accent)}
.study-route,.study-guide{padding:12px 16px;border-radius:12px}.study-route{background:white;border:1px solid #bbd8ce}.study-route summary,.study-guide summary{font-weight:750}.study-route section{margin:14px 0}.study-route section div{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}.study-route button{font-size:13px;padding:8px 10px}.study-route [aria-current]{background:#d4f6eb;color:#104e44;outline:2px solid #307864}.study-guide{background:var(--wash);border:1px solid var(--accent)}.study-guide p{margin:12px 0}.study-guide pre{min-height:auto;overflow-wrap:anywhere}.study-guide .extra{border-left:3px solid var(--accent);padding-left:10px}
.lesson-layout{display:grid;grid-template-columns:minmax(215px,27%) minmax(0,1fr);gap:18px;align-items:start}.lesson-layout>article{margin:0}.study-route{margin:0;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;border-top:5px solid #13796c}.study-route h2{margin:0 0 6px;font-size:24px}.study-route>strong,.study-route>p{font-size:14px}.study-route nav button{text-align:left;width:100%;line-height:1.4}.study-route nav button:disabled{color:#626c70}.study-route nav button[aria-current]{background:#d4f6eb;color:#104e44}.study-route .route-toggle{display:none}
@media(max-width:760px){.lesson-layout{display:block}.study-route{position:static;max-height:none;margin-bottom:12px}.study-route .route-toggle{display:block;width:100%;text-align:center;background:#066b60;color:white}.route-toggle[aria-expanded="false"]+nav{display:none}.study-route nav{max-height:50vh;overflow:auto}}
.sync-banner{max-width:1020px;margin:14px auto;padding:10px 16px;background:#e4f5ef;border-radius:12px;font-size:14px}.sync-banner button{margin-left:10px;padding:6px 10px;font-size:13px}@media print{.sync-banner{display:none}}