:root{--bg:#F5F4FC;--panel:#fff;--objbg:#F8F7FE;--ink:#1E1A3C;--mute:#625F85;--line:#E1DFF2;
--acc:#3D348B;--btn:#3D348B;--btnink:#fff;--ptr:#7678ED;--hi:#FFF2C4;--hiline:#F7B801;--flash:#F18701;--chg:#F35B04}
@media (prefers-color-scheme:dark){:root{--bg:#14112B;--panel:#1D1941;--objbg:#241F4D;--ink:#EEEDFB;--mute:#A7A4CC;--line:#322D63;
--acc:#7678ED;--btn:#7678ED;--btnink:#14112B;--ptr:#9A9CF5;--hi:#4A3B06}}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Space Grotesk",system-ui,sans-serif}
.app{display:grid;grid-template-columns:260px minmax(0,1fr) auto;min-height:100vh}

/* lessons */
.side{background:#3D348B;color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.brand h1{font-size:19px;line-height:1.2;margin:0}
.logo{width:30px;height:30px;border-radius:8px;background:#F7B801;flex:none;position:relative}
.logo::after{content:"";position:absolute;left:11px;top:8px;border-left:11px solid #3D348B;border-top:7px solid transparent;border-bottom:7px solid transparent}
#lessons{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.les{width:100%;text-align:left;display:grid;gap:2px;position:relative;padding:10px 36px 10px 14px;background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.les small{color:rgba(255,255,255,.75);font-size:13px}
.les.on{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14);box-shadow:inset 4px 0 0 #F7B801}
.les b{position:absolute;right:12px;top:10px;color:#F7B801}

/* main */
main{padding:20px 22px;display:grid;gap:14px;align-content:start;width:100%;max-width:900px;margin:0 auto}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
h2{margin:0;font-size:22px}
.idea{margin:6px 0 0;color:var(--mute);max-width:62ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 14px;min-height:44px;cursor:pointer}
button.pri{background:var(--btn);color:var(--btnink);border-color:var(--btn);font-weight:700}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:3px solid var(--flash);outline-offset:2px}
#code{list-style:none;margin:0;padding:0;font:600 15px/1.4 "JetBrains Mono",monospace;counter-reset:l}
#code li{counter-increment:l;padding:6px 10px;border-left:4px solid transparent;border-radius:4px;white-space:pre}
#code li::before{content:counter(l);display:inline-block;width:2ch;margin-right:14px;color:var(--mute);font-weight:400}
#code li.on{background:var(--hi);border-left-color:var(--hiline)}
canvas{display:block;width:100%;height:380px;border-radius:8px;background:var(--objbg)}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sp{display:flex;align-items:center;gap:8px;color:var(--mute)}
.sp input{width:120px;accent-color:var(--acc)}
.sp output{min-width:3ch;color:var(--ink)}
#stat{margin:12px 0 2px;color:var(--mute)}
#note{margin:0;min-height:3em}
.lbl{margin:10px 0 2px;color:var(--mute);font-size:13px}
.chg{margin:0;padding-left:20px}
.chg li{margin:2px 0}
.chg li::marker{color:var(--chg)}
.con{margin-top:10px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--objbg)}
.con span{color:var(--mute);font-size:13px}
pre{margin:2px 0 0;font:600 14px "JetBrains Mono",monospace;min-height:1.4em}
pre:empty::before{content:"No output yet";color:var(--mute);font-weight:400}

/* guide */
.guide{width:300px;background:var(--panel);border-left:1px solid var(--line);padding:18px 16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.gh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.gh h2{font-size:17px}
.x{font-size:22px;line-height:1;padding:0;width:44px}
.guide dl{margin:0}
.guide dt{font:600 13px "JetBrains Mono",monospace;margin-top:14px;display:flex;align-items:center;gap:8px}
.guide dd{margin:4px 0 0;color:var(--mute)}
.guide dl+h3{margin-top:20px}
.guide .gnote{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500}
.guide h3{margin:0 0 2px;font:600 11px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.guide dd b{color:var(--ink)}
.sw{width:12px;height:12px;border-radius:50%;display:inline-block}
.sw.ptr{background:var(--ptr)}
.sw.fl{background:var(--flash)}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;padding:12px}
  .brand{margin-bottom:10px}
  #lessons{display:flex;overflow-x:auto;padding-bottom:4px}
  .les{min-width:200px}
  main{padding:14px}
  .guide{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;max-height:65vh;z-index:5;border-left:0;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(30,26,60,.22);border-radius:14px 14px 0 0}
}

/* coins & challenge */
:root{--good:#1F7A46;--bad:#C4321C}
@media (prefers-color-scheme:dark){:root{--good:#4CC38A;--bad:#FF8A78}}
.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.coins{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;background:var(--panel);border:1px solid var(--line);border-radius:999px;color:var(--mute)}
.coins b{color:var(--ink);min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.coin{width:16px;height:16px;border-radius:50%;background:#F7B801;box-shadow:inset 0 0 0 3px #F18701}
.cd{font-weight:700}.cd.good{color:var(--good)}.cd.bad{color:var(--bad)}
.coins.pop{animation:pop .5s ease}
@keyframes pop{40%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.coins.pop{animation:none}}
.chal h3{margin:0 0 4px;font-size:17px}
.goal{margin:0 0 12px;font-weight:700}
.copts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{display:grid;gap:8px;text-align:left;height:auto;padding:12px;border-width:2px;background:var(--objbg)}
.opt code{display:block;font:600 14px/1.5 "JetBrains Mono",monospace;white-space:pre;overflow-x:auto}
.opt:not([aria-disabled=true]):hover{border-color:var(--acc)}
.opt[aria-disabled=true]{cursor:default}
.oh{display:flex;justify-content:space-between;gap:8px;color:var(--mute);font-size:13px}
.tag{font-weight:700;color:var(--acc)}
.opt.pick{border-color:var(--acc)}
.opt.ok{border-color:var(--good)}.opt.ok .tag{color:var(--good)}
.opt.no{border-color:var(--bad)}.opt.no .tag{color:var(--bad)}
.cres{margin:12px 0 0;min-height:3em}
@media (max-width:600px){.copts{grid-template-columns:1fr}}

/* learning guide */
.guide ol{margin:0 0 6px;padding-left:20px}
.guide ol li{margin:8px 0;color:var(--mute)}
.guide ol li b,.gtxt b,.gnote b{color:var(--ink)}
.gtxt{margin:0;color:var(--mute)}
.guide ol+h3,.gtxt+h3{margin-top:20px}
.guide h3{margin-top:20px}
.guide .gnote+h3{margin-top:0}

/* tutorial layer */
.welcome{border-left:6px solid var(--hiline)}
.welcome h3,.tut h3{margin:0 0 8px;font-size:17px}
.welcome p,.tut p{margin:0 0 10px;max-width:70ch}
.tut{border-left:6px solid var(--ptr)}
.words{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 12px}
.words dt{font:600 13px "JetBrains Mono",monospace;background:var(--objbg);border:1px solid var(--line);border-radius:6px;padding:2px 8px;white-space:pre}
.words dd{margin:0;color:var(--mute)}
.tut details{border-top:1px solid var(--line);padding-top:10px}
.tut summary{cursor:pointer;font-weight:700;color:var(--acc)}
.tut summary span{font-weight:400;color:var(--mute)}
.tut details p{margin:8px 0 0;color:var(--mute)}
.pred{margin:12px 0 0;padding:8px 12px;border-radius:8px;background:var(--hi);border-left:4px solid var(--hiline);font-weight:600}
.prog{margin:-8px 0 16px;font-size:13px;color:rgba(255,255,255,.85)}
.prog p{margin:0 0 6px}
.pbar{height:6px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:#F7B801;transition:width .4s}

/* finish, footer, polish */
.finish{border-left:6px solid var(--good)}
.finish h3{margin:0 0 8px;font-size:19px}
.finish h4{margin:14px 0 4px;font-size:15px}
.finish p,.finish li{max-width:70ch}
.finish ol,.finish ul{margin:6px 0;padding-left:22px}
.finish li{margin:4px 0}
.finish .bar{margin-top:14px}
.hint{margin:10px 0 0;font-size:13px;color:var(--mute)}
.skip{position:absolute;left:8px;top:-60px;z-index:10;background:var(--btn);color:var(--btnink);padding:10px 14px;border-radius:8px}
.skip:focus{top:8px}
.nojs{margin:0;padding:14px;background:var(--hi);text-align:center;font-weight:700}
.foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 32px;background:#3D348B;color:#fff;font-size:14px}
.foot b{display:block;margin-bottom:6px}
.foot p{margin:0 0 10px;color:rgba(255,255,255,.8)}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.foot a{color:#F7B801}
.foot a:focus-visible{outline:3px solid #F7B801;outline-offset:2px}
.foot button{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
@media (max-width:900px){.foot{grid-template-columns:1fr;padding:22px 16px}}
@media print{.side,.guide,.foot,#post,#runBtn{display:none!important}.app{display:block}}

.foot .made{grid-column:1/-1;margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);text-align:center;color:#fff}
.foot .made b{display:inline;margin:0}
.heart{color:#FF6B8B}

/* locks and retry notice */
main.locked>section:not(#lock){display:none!important}
.lockcard{border-left:6px solid var(--hiline)}
.lockcard h3{margin:0 0 6px;font-size:18px}
.lockcard p{margin:0 0 8px}
.notice{margin:12px 0 0;padding:10px 12px;border-radius:8px;border-left:4px solid var(--bad);background:var(--objbg);font-weight:600}