/* Ziko theme – "ביטופיה", a planet made of code. Deep-space indigo + violet, circuit cyan, energy gold; Ziko teal/orange.
   Display: Secular One; body: Rubik; code: JetBrains Mono (sans + mono only). Loaded after app.css on coder only.
   Track themes: body.trk-kid (8-10, bright & chunky), body.trk-mid (10-13), body.trk-teen (13-18, dark console, mature). */
:root{--ink:#141046;--ink2:#221A6B;--sp:#0F0B33;--sp2:#1A1452;--vio:#6B3BFF;--vio2:#4B22D6;--cy:#22D3EE;--cy2:#0EA5C6;--gold:#FFC83D;--gold2:#E0A10F;--teal:#14B8A6;--or:#FF8A3D;--mute:#9C97D6;--card:#1C1660;--line:#3A2F9A;
  --p:#6B3BFF;--v:#6B3BFF;--k:#22D3EE;--navy:#141046;--blue:#4C8DFF;--cyan:#22D3EE;--g:#22C55E;--o:#FF8A3D;--bg:#F3F0FF;--grad:linear-gradient(135deg,#141046,#3A1F9E 55%,#0EA5C6);--ia:#FFC83D;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
html,body,#app{background:var(--sp)}
body,button,textarea,input{font-family:Rubik,"Varela Round",system-ui,sans-serif}
h1,h2,.name,.wordmark,.gate-h,.wttl h1,.s3t h1,.cucard h2,.ci-t h1,.cxh h1,.mcard b{font-family:"Secular One",Rubik,system-ui,sans-serif;font-weight:400;letter-spacing:.2px}
.bg-math{display:none}
/* header + gates */
.top{background:linear-gradient(120deg,#141046,#2B1C8C 60%,#0E7490);box-shadow:0 6px 18px #0008;--ia:var(--gold)}.top::after{display:none}
.name{font-size:20px}.sub{color:#BFF4FF}.dot{background:var(--cy);animation:none}
.alon-av{background:#0F0B33;box-shadow:0 0 0 3px var(--cy);animation:none;border-radius:50%;overflow:hidden}.alon-av img{border-radius:50%}.alon-av .lid,.alon-hero .lid,.alon-hero .ant{display:none}
.trial-note{background:var(--gold);color:var(--ink);font-weight:700;font-size:12.5px;padding:5px 10px}
.banner{background:#221A6B;color:#fff;border-bottom-color:#3A2F9A}
.gate,.onb{background:radial-gradient(ellipse at 50% 0%,#3A1F9E,#0F0B33 70%)}
.gate .card,.onb .card{border-radius:26px;box-shadow:0 10px 0 #0a072a,0 20px 50px #0009}
.card .primary,.send,.btn{background:var(--vio);box-shadow:0 4px 0 var(--vio2)}
.onb .wordmark{color:var(--vio2)}.alon-hero.coder img{filter:drop-shadow(0 10px 14px #6b3bff55)}
/* age-track picker cards (decorated by coderstages.js) */
.opt.trkcard{display:flex!important;gap:10px;align-items:center;text-align:right;padding:8px!important;border-radius:18px!important;border:3px solid #E4DEFF!important;background:#fff!important;min-height:86px}
.opt.trkcard img{width:76px;height:76px;object-fit:cover;border-radius:14px;flex:none;background:#141046}
.opt.trkcard span{display:flex;flex-direction:column;gap:2px}.opt.trkcard b{font-size:16.5px;color:var(--ink)}.opt.trkcard small{font-size:13px;color:#4B4680;font-weight:600}
.opt.trkcard em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--vio2)}
.opt.trkcard.sel{border-color:var(--vio)!important;box-shadow:0 0 0 4px #6b3bff33,0 4px 0 var(--vio2)!important;background:#F5F1FF!important}
.opt.trk-13-18 img{object-position:40% 50%}
/* chat */
body.coder-world #chatView{background:radial-gradient(ellipse at 50% -20%,#3A1F9E 0%,#141046 45%,#0F0B33 100%)}
body.coder-world main{background:transparent}
body.coder-world .topicbar{background:#1C1660;color:#E9E6FF;border-color:#3A2F9A}
.bot .bubble{background:#fff;border:2px solid #CFC6FF;box-shadow:0 3px 0 #8F7DFF;color:var(--ink);border-radius:20px 20px 20px 6px}
.me .bubble{background:linear-gradient(135deg,#6B3BFF,#4B22D6);box-shadow:0 3px 0 #2E148F;color:#fff}
.bubble{unicode-bidi:plaintext}.bubble.err{background:#FFF4D6;color:var(--ink)}
.ccode{direction:ltr;text-align:left;unicode-bidi:isolate;background:#0F0B33;color:#C9F7FF;font-family:var(--mono);font-size:13px;line-height:1.5;border-radius:12px;padding:8px 10px;margin:6px 0;white-space:pre;overflow-x:auto;border:1px solid #3A2F9A}
.me .ccode{background:#2A1680;color:#fff;border-color:#8F7DFF}
.chips button,.chips button:nth-child(2),.chips button:nth-child(3){background:#1C1660;border:2px solid var(--cy);box-shadow:0 3px 0 var(--cy2);color:#fff;font-weight:700}
.composer{background:#141046;border-top:2px solid #3A2F9A}.composer textarea{background:#fff}
/* parent */
.par-top h2{color:var(--ink)}.pbig{background:#F1EDFF!important;border:2px solid #DCD3FF}.pbig b{color:var(--vio2)!important;font-family:"Secular One",Rubik,sans-serif;font-weight:400}
.panel{border:2px solid #DCD3FF;box-shadow:0 3px 0 #DCD3FF}.panel h3{color:var(--ink)}
body.coder-world #parentView,body.coder-world #progressView{background:#F3F0FF}
.pstages{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.pstages li{display:flex;gap:8px;align-items:center}.pstages li img{width:30px;height:30px;flex:none;border-radius:8px;background:#141046}.pstages li.lock{color:#8D88B8}.pstages li.lock img{filter:grayscale(1) opacity(.45)}.pstages li.done span{font-weight:700}
.pstages small{color:#6E68A8}.pnote{font-size:12.5px;color:#6E68A8;margin:8px 0 0}
.pbadges{display:flex;flex-wrap:wrap;gap:6px}.pbadges span{display:inline-flex;background:#EDE7FF;color:var(--ink);border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px}
.cparent .stats{grid-template-columns:repeat(3,1fr)}
/* ===== world shell ===== */
body.coder-world #tabs,body.coder-world .tabhelp{display:none}
#cDock{flex:none;position:relative;z-index:5;display:grid;grid-template-columns:1fr 1fr 1.2fr 1fr 1fr;align-items:end;gap:2px;margin:0 10px calc(var(--sb,0px) + 10px);padding:6px 8px;border-radius:26px;background:linear-gradient(180deg,#221A6B,#141046);border:1px solid #3A2F9A;box-shadow:0 8px 0 #07051c,0 14px 30px #0008;--ia:var(--gold)}
#cDock button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:#A9A3E6;font-weight:800;font-size:11.5px;padding:4px 0;border-radius:16px}
#cDock button svg{width:24px;height:24px}#cDock button.on{color:var(--cy)}#cDock button.on:not(.zmid){background:#ffffff12}
#cDock .zmid{margin-top:-30px}#cDock .zmid img{width:62px;height:62px;border-radius:50%;background:#0F0B33;border:4px solid #141046;box-shadow:0 0 0 3px var(--cy),0 0 18px #22d3ee88}
body[data-v="stagesView"] .top,body[data-v="stagesView"] .trial-note{display:none}
body[data-v="stagesView"] #app{position:relative}
#stagesView{background:var(--sp);color:#fff}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:#0F0B33cc;border:1px solid #ffffff2a;color:#fff;font-weight:800;font-size:12.5px;backdrop-filter:blur(6px)}
.chip svg{width:15px;height:15px;color:var(--gold)}.chip.chipc{background:var(--gold);color:var(--ink);border-color:var(--gold2)}.chip.chipc svg{color:var(--ink)}.chip.red{background:#E11D48;border-color:#FB7185}.chip.cc{background:#6B3BFF;border-color:#A78BFA}
.cta{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:18px;background:linear-gradient(180deg,#FFD866,#FFC83D);color:var(--ink);font-weight:900;font-size:16.5px;box-shadow:0 5px 0 var(--gold2),0 10px 24px #ffc83d44;text-align:center}
.cta svg{width:20px;height:20px}.cta.wide{display:flex;width:100%}.cta.big{font-size:18px;padding:15px 18px}.cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold2)}
.cta.alt{background:#221A6B;color:#fff;box-shadow:0 5px 0 #0a072a;border:1px solid #4A3FB8}.cta[disabled]{opacity:.45;pointer-events:none}
.later{all:unset;cursor:pointer;color:#B9B4F0;font-weight:700;font-size:14px;padding:8px;text-decoration:underline;align-self:center}
.bubble3{background:#fff;color:var(--ink);border-radius:18px 18px 18px 6px;padding:10px 13px;font-weight:600;font-size:15px;line-height:1.45;box-shadow:0 4px 0 #8F7DFF}
.bubble3.big{font-size:16.5px}
@keyframes bob{50%{transform:translateY(-7px)}}@keyframes pulse{50%{box-shadow:0 0 0 10px #22d3ee00,0 0 26px #22d3eeaa}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* map */
.world{padding-bottom:20px}
.whero{position:relative;height:400px;background:center 30%/cover;overflow:hidden}
.wshade{position:absolute;inset:0;background:linear-gradient(180deg,#0F0B3300 30%,#0F0B33cc 72%,#0F0B33 100%)}
.whud{position:absolute;top:calc(var(--st,0px) + 12px);right:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.wttl{position:absolute;bottom:42px;right:16px;left:140px;z-index:2}.wttl small{color:var(--cy);font-weight:800;font-size:13px}
.wttl h1{margin:0;font-size:56px;line-height:1;color:#fff;text-shadow:0 4px 0 #4B22D6,0 0 30px #6b3bffaa}.wttl p{margin:4px 0 0;font-weight:700;color:#D8D4FF;font-size:14px}
.wz{position:absolute;left:-4px;bottom:24px;width:150px;height:150px;object-fit:contain;z-index:2;filter:drop-shadow(0 8px 12px #000a);animation:bob 3.4s ease-in-out infinite}
.wprog{position:absolute;bottom:20px;right:16px;left:140px;height:10px;border-radius:9px;background:#ffffff22;z-index:2;overflow:hidden}.wprog i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--cy),var(--gold));box-shadow:0 0 12px var(--cy)}
.wnext{position:absolute;bottom:2px;right:16px;z-index:2;font-size:11.5px;font-weight:700;color:#B9B4F0}
.mcard{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:10px;margin:-6px 14px 0;padding:22px 14px 14px;border-radius:24px;background:linear-gradient(180deg,#2A2080,#1C1660);border:2px solid #5B4FE0;box-shadow:0 8px 0 #07051c,0 0 30px #6b3bff44;z-index:3}
.mcard .ribbon{position:absolute;top:-13px;right:16px;background:var(--cy);color:var(--ink);font-weight:900;font-size:12.5px;padding:4px 12px;border-radius:999px;box-shadow:0 3px 0 var(--cy2)}
.mrow{display:flex;gap:12px;align-items:center}.mart{width:74px;height:74px;flex:none;object-fit:contain;filter:drop-shadow(0 6px 8px #0008)}
.mtxt{display:flex;flex-direction:column}.mtxt small{color:var(--cy);font-weight:800;font-size:12.5px}.mcard b{font-size:24px;line-height:1.15;color:#fff}
.mtalk{display:flex;gap:8px;align-items:flex-end}.mtalk .zhead{flex:none;border-radius:50%;background:#0F0B33;box-shadow:0 0 0 2px var(--cy)}.mtalk .bubble3{font-size:14.5px}
.path{position:relative;margin:26px 10px 10px;background:radial-gradient(#ffffff10 1px,#0000 1.5px) 0 0/22px 22px;border-radius:24px}
.path svg{position:absolute;inset:0;width:100%;height:100%}.pbed{fill:none;stroke:#2A2080;stroke-width:16;stroke-linecap:round;vector-effect:non-scaling-stroke}
.plit{fill:none;stroke:var(--cy);stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #22d3ee)}
.pdash{fill:none;stroke:#ffffff30;stroke-width:2;stroke-dasharray:3 9;vector-effect:non-scaling-stroke}
.node{all:unset;cursor:pointer;position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:132px;z-index:1}
.node .disc{position:relative;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3A2F9A,#141046);border:4px solid #4A3FB8;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 #07051c}
.node .disc img{width:72px;height:72px;object-fit:contain}
.node.done .disc{border-color:var(--cy);box-shadow:0 6px 0 #07051c,0 0 22px #22d3ee88}
.node.now .disc{border-color:var(--gold);animation:pulse 2s infinite;width:94px;height:94px}.node.now .disc img{width:82px;height:82px}
.node.lock .disc img{filter:grayscale(1) brightness(.45)}.node.lock{cursor:default}
.node.k-concept .disc{border-radius:26px}
.node .lk{position:absolute;inset:auto;top:50%;left:50%;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;background:#0F0B33dd;display:flex;align-items:center;justify-content:center;color:#fff;--ia:var(--gold)}.node .lk .ico,.node .lk svg{width:20px;height:20px;margin:0}
.node .num{position:absolute;top:-4px;right:20px;width:26px;height:26px;border-radius:50%;background:var(--vio);color:#fff;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.node .lbl{margin-top:6px;font-weight:800;font-size:13px;text-align:center;line-height:1.2;color:#fff;text-shadow:0 2px 4px #000}.node.lock .lbl{color:#8D88B8}
.node .kd{font-size:10.5px;font-weight:800;color:var(--cy);letter-spacing:.3px}
.node .st{display:flex;gap:1px;margin-top:-10px;z-index:2}.node .st i svg{width:16px;height:16px;color:#4A3FB8}.node .st i.on svg{color:var(--gold);filter:drop-shadow(0 0 3px #ffc83d)}
.node .here{position:absolute;top:-30px;display:flex;align-items:center;gap:4px;background:var(--gold);color:var(--ink);font-weight:900;font-size:11.5px;padding:2px 9px 2px 3px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 0 var(--gold2)}.node .here img{border-radius:50%;background:#0F0B33}
/* stage briefing */
.scene3{position:relative;min-height:470px;background:center 40%/cover;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.back3{all:unset;cursor:pointer;position:absolute;top:calc(var(--st,0px) + 12px);right:12px;z-index:3;display:inline-flex;gap:4px;align-items:center;background:#0F0B33cc;border:1px solid #ffffff33;color:#fff;font-weight:800;font-size:13.5px;padding:6px 12px;border-radius:999px}
.back3 svg{width:16px;height:16px;transform:scaleX(-1)}.back3.in{position:static}
.s3t{position:absolute;top:calc(var(--st,0px) + 56px);right:16px;left:16px;text-align:center;z-index:2;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.s3t h1{width:100%;margin:6px 0 0;font-size:34px;line-height:1.1;text-shadow:0 3px 0 #4B22D6,0 0 20px #000}
.s3art{position:absolute;right:14px;bottom:150px;width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 8px 12px #000a);z-index:1;animation:bob 4s ease-in-out infinite}
.s3z{position:absolute;left:-10px;bottom:110px;width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 10px 14px #000a);z-index:1}
.s3say{position:relative;z-index:2;display:flex;gap:8px;align-items:flex-end;margin:0 14px 16px}.s3say .bubble3{flex:1}
.hear{flex:none;border:0;background:var(--cy);border-radius:50%;width:42px;height:42px;color:var(--ink);box-shadow:0 3px 0 var(--cy2);display:flex;align-items:center;justify-content:center}.hear svg{width:22px;height:22px}
.learn3{margin:12px 14px;padding:12px 14px;border-radius:18px;background:#1C1660;border:1px solid #3A2F9A}.learn3 h3{margin:0 0 6px;display:flex;gap:6px;align-items:center;font-size:16px;color:var(--cy)}.learn3 h3 svg{width:18px;height:18px}
.learn3 ul{margin:0;padding:0 18px 0 0;display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14.5px;color:#E2DEFF}
.nav3{display:flex;flex-direction:column;gap:10px;margin:14px}
.okline{margin:0 14px;display:flex;gap:6px;align-items:center;font-weight:800;color:var(--gold);font-size:14px}.okline svg{width:18px;height:18px}
/* play */
.stg.play{padding:calc(var(--st,0px) + 10px) 0 20px}.ptop{display:flex;align-items:center;gap:8px;padding:0 12px 8px}.ptop b{flex:1;font-size:16px;font-weight:800}
.lab{display:flex;flex-direction:column;gap:10px;padding:0 12px}
.brief{display:flex;gap:8px;align-items:flex-start;background:#1C1660;border:1px solid #3A2F9A;border-radius:16px;padding:10px 12px;font-weight:600;font-size:14.5px;line-height:1.4;color:#EAE7FF}
.brief svg{flex:none;width:20px;height:20px;color:var(--gold);margin-top:1px}.brief .cap{flex:none;font-style:normal;background:var(--gold);color:var(--ink);font-weight:900;font-size:12px;border-radius:999px;padding:3px 9px;margin-inline-start:auto}
.stage3{position:relative;display:flex;justify-content:center;align-items:center;min-height:190px;box-sizing:border-box;padding:30px 8px 14px;border-radius:22px;background:radial-gradient(ellipse at 50% 0%,#3A2F9A,#141046 75%);border:2px solid #4A3FB8;box-shadow:inset 0 0 40px #0008,0 6px 0 #07051c;overflow:hidden}
.board3{--ts:min(calc((min(100vw,480px) - 64px) / var(--w)),58px);position:relative;width:calc(var(--ts) * var(--w));height:calc(var(--ts) * var(--h))}
.tiles{display:grid;grid-template-columns:repeat(var(--w),var(--ts));grid-auto-rows:var(--ts)}
.t{position:relative;margin:2px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.t.floor{background:linear-gradient(180deg,#3B4BC8,#2B37A0);box-shadow:inset 0 -4px 0 #1E2780,inset 0 0 0 1px #6F7FFF55}
.t.floor::after{content:"";position:absolute;inset:30%;border:1px solid #9FB0FF33;border-radius:4px}
.t.wall{background:linear-gradient(180deg,#2A2260,#191446);box-shadow:inset 0 3px 0 #4A3F9A,0 3px 0 #07051c;border-radius:8px}
.t.wall::before{content:"";position:absolute;inset:22% 22%;background:repeating-linear-gradient(90deg,#6B3BFF55 0 2px,#0000 2px 8px);border-radius:3px}
.t.gap{background:radial-gradient(#ffffff55 1px,#0000 1.5px) 0 0/9px 9px,#05031a;box-shadow:inset 0 0 12px #6b3bff88}
.t.bridge{background:repeating-linear-gradient(90deg,#FFB54A 0 30%,#E08A1E 30% 34%),#FFB54A;box-shadow:inset 0 -4px 0 #B86A10,0 0 14px #ffc83d88}
.t.pop{animation:popin .35s}@keyframes popin{0%{transform:scale(.2)}70%{transform:scale(1.15)}}
.tiles .t.goal,body.trk-kid .tiles .t.goal{background:radial-gradient(circle,#22D3EE 0 22%,#0E7490 23% 34%,#22D3EE55 35% 48%,#2B37A0 50%);box-shadow:0 0 18px #22d3ee,inset 0 -4px 0 #1E2780}
.gem{width:70%;height:70%;display:flex;animation:bob 2s ease-in-out infinite;filter:drop-shadow(0 0 6px #7fe7ff)}.gem svg{width:100%;height:100%}
.gem.got{animation:gotit .5s forwards}@keyframes gotit{to{transform:translateY(-30px) scale(1.6);opacity:0}}
.ziko{position:absolute;top:0;left:0;width:var(--ts);height:var(--ts);transform:translate(calc(var(--x) * var(--ts)),calc(var(--y) * var(--ts)));transition:transform .26s cubic-bezier(.4,1.4,.6,1);z-index:2;display:flex;align-items:center;justify-content:center}
.ziko img{width:88%;height:88%;border-radius:50%;filter:drop-shadow(0 4px 4px #000a);position:relative;z-index:1}
.ziko .cone{position:absolute;inset:-6px;transition:transform .22s}.ziko .cone::before{content:"";position:absolute;top:50%;right:-6px;transform:translateY(-50%);border:9px solid #0000;border-left:13px solid var(--gold);filter:drop-shadow(0 0 4px #ffc83d)}
.ziko[data-dir="E"] .cone{transform:rotate(0)}.ziko[data-dir="S"] .cone{transform:rotate(90deg)}.ziko[data-dir="W"] .cone{transform:rotate(180deg)}.ziko[data-dir="N"] .cone{transform:rotate(-90deg)}
.ziko.shake img,.shake{animation:shake .4s}@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.hud3{position:absolute;top:8px;left:10px;display:flex;gap:6px}.g3{display:inline-flex;gap:3px;align-items:center;background:#0F0B33cc;border-radius:999px;padding:3px 9px 3px 6px;font-weight:900;font-size:13px}.g3 svg{width:16px;height:16px}
.win3{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:radial-gradient(circle,#6b3bffcc,#0F0B33ee 70%);animation:fadeup .4s both}
.win3 img{width:130px;height:130px;object-fit:contain;animation:bob 1.4s ease-in-out infinite}.win3 b{font-family:"Secular One",Rubik,sans-serif;font-weight:400;font-size:30px;text-shadow:0 3px 0 #4B22D6}
.stars{display:flex;gap:4px}.stars i svg{width:34px;height:34px;color:#4A3FB8}.stars i.on svg{color:var(--gold);filter:drop-shadow(0 0 8px #ffc83d)}
.stars i.on:nth-child(1){animation:popin .4s .1s both}.stars i.on:nth-child(2){animation:popin .4s .3s both}.stars i.on:nth-child(3){animation:popin .4s .5s both}
/* program + blocks */
.prog{display:flex;flex-direction:column;gap:8px}
.area{border-radius:18px;padding:8px;background:#F4F1FF;color:var(--ink);border:2px solid #DCD3FF;display:flex;flex-direction:column;gap:5px}
.area .ah{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:#4B4680}.area .ah svg{width:16px;height:16px;color:var(--vio)}.area .ah em{margin-inline-start:auto;font-style:normal;font-size:12px;background:#E4DEFF;border-radius:999px;padding:1px 8px}
.area.fn{background:#FFF0F8;border-color:#F7B6DA}.area.fn .ah svg{color:#E64FA0}.area.ev{background:#FFF8E1;border-color:#FFD97A}.area.ev .ah svg{width:18px;height:18px}
.pblk{--c:#4C8DFF;--d:#2F6BE0;border-radius:12px;background:var(--c);box-shadow:0 3px 0 var(--d);color:#fff}
.pblk .ph{display:flex;align-items:center;gap:6px;padding:7px 9px;font-weight:800;font-size:15px;min-height:26px}.pblk .ph svg{width:22px;height:22px;flex:none}
.pblk .x{all:unset;cursor:pointer;margin-inline-start:auto;width:26px;height:26px;border-radius:50%;background:#0003;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.pblk.sel{outline:3px solid var(--ink);outline-offset:1px}.pblk.hl{box-shadow:0 0 0 4px #fff,0 0 22px var(--c);transform:scale(1.02)}
.num{display:inline-flex;align-items:center;gap:2px;background:#fff;color:var(--ink);border-radius:999px;padding:1px}.num button{all:unset;cursor:pointer;width:26px;height:26px;border-radius:50%;background:#EDE7FF;text-align:center;font-weight:900;line-height:26px}.num b{min-width:20px;text-align:center}
.cnd{all:unset;cursor:pointer;font-size:11.5px;background:#0003;border-radius:999px;padding:2px 8px}
.pbody{margin:0 14px 6px 6px;padding:5px;border-radius:0 0 10px 10px;background:#ffffffd9;display:flex;flex-direction:column;gap:5px;border-right:5px solid var(--d)}
.pelse{padding:2px 9px;font-weight:800;font-size:13px}
.drop{all:unset;cursor:pointer;text-align:center;border:2px dashed #B9AEF5;border-radius:10px;padding:3px;color:#8F84D6;font-weight:800;font-size:13px}.drop.on{border-color:var(--vio);background:#EDE7FF;color:var(--vio2);padding:6px}
.c-move{--c:#4C8DFF;--d:#2F5FD0}.c-left,.c-right{--c:#14B8A6;--d:#0E8476}.c-build{--c:#FF8A3D;--d:#D2621B}.c-repeat,.c-while{--c:#F5B82E;--d:#C78D0C}.c-repeat,.c-while{color:var(--ink)}
.c-if{--c:#8B5CF6;--d:#6431D9}.c-call{--c:#E64FA0;--d:#B32877}.c-set,.c-repeatv{--c:#22C55E;--d:#15924A}
.palette{display:flex;flex-wrap:wrap;gap:7px;padding:10px;border-radius:18px;background:#1C1660;border:1px solid #3A2F9A}
.pal{all:unset;cursor:pointer;--c:#4C8DFF;--d:#2F6BE0;flex:1 1 calc(33% - 8px);min-width:92px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px 7px;border-radius:14px;background:var(--c);box-shadow:0 4px 0 var(--d);color:#fff;font-weight:800;font-size:14px;text-align:center}
.pal svg{width:28px;height:28px}.pal code{font-family:var(--mono);font-size:10.5px;opacity:.9;background:#0002;border-radius:6px;padding:0 5px}.pal small{font-size:10.5px;opacity:.85}
.pal:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d)}.pal.c-repeat,.pal.c-while{color:var(--ink)}
.pyview{border-radius:16px;overflow:hidden;border:1px solid #3A2F9A;background:#0B0828}.pyh{display:flex;justify-content:space-between;padding:6px 12px;background:#1C1660;font-weight:800;font-size:13px;color:#C9C3FF}.pyh code{color:var(--cy)}
.pyview pre{margin:0;padding:10px 12px;font-family:var(--mono);font-size:13.5px;line-height:1.55;color:#E6F6FF;text-align:left;white-space:pre;overflow-x:auto;min-height:40px}
.kw{color:#FF79C6;font-weight:700}.nm{color:#FFC83D;text-decoration:none}.cm{color:#7A86B8;font-style:normal}
.labbar{display:flex;gap:8px}.labbar button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:18px;font-weight:900;font-size:17px;padding:12px}
.labbar .run{flex:2;background:linear-gradient(180deg,#34E3A0,#16B97A);color:#03311F;box-shadow:0 5px 0 #0B7F52,0 0 22px #34e3a055}.labbar .run svg{width:22px;height:22px}.labbar .run.on{opacity:.7}
.labbar .hintb{flex:1;background:#221A6B;color:var(--gold);box-shadow:0 5px 0 #07051c;border:1px solid #4A3FB8}.labbar .hintb svg{width:20px;height:20px}
.labbar .reset{width:48px;flex:none;background:#221A6B;color:#C9C3FF;box-shadow:0 5px 0 #07051c;border:1px solid #4A3FB8}.labbar .reset svg{width:20px;height:20px}
.zsay{display:flex;gap:8px;align-items:flex-end;animation:fadeup .3s both}.zsay img{width:44px;height:44px;border-radius:50%;background:#0F0B33;box-shadow:0 0 0 2px var(--cy);flex:none}
.zsay>div{flex:1;background:#fff;color:var(--ink);border-radius:16px 16px 16px 5px;padding:9px 12px;font-weight:600;font-size:14.5px;line-height:1.45;white-space:pre-line;box-shadow:0 3px 0 #8F7DFF}
.zsay.ok>div{background:#DFFBEF;box-shadow:0 3px 0 #16B97A}.zsay.no>div{background:#FFF4D6;box-shadow:0 3px 0 #E0A10F}.zsay.hint>div{background:#EDE7FF}
#labMsg{display:flex;flex-direction:column;gap:10px}
.labtoast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-weight:900;padding:8px 16px;border-radius:999px;z-index:60;box-shadow:0 4px 0 var(--gold2)}
/* text editor + terminal */
.stage3.term{display:block;padding:0;background:#07051c;min-height:120px}
.tbar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#1C1660}.tbar i{width:10px;height:10px;border-radius:50%;background:#FF5F57}.tbar i:nth-child(2){background:#FEBC2E}.tbar i:nth-child(3){background:#28C840}.tbar span{margin-inline-start:auto;font-family:var(--mono);font-size:11.5px;color:#8F89C9}
.out{margin:0;padding:10px 12px;font-family:var(--mono);font-size:13.5px;line-height:1.5;color:#7CFFB2;text-align:left;white-space:pre-wrap;min-height:70px;background:#07051c}
.out.mini{border-radius:14px;border:1px solid #3A2F9A;min-height:0}
.ed{border-radius:16px;overflow:hidden;border:2px solid #4A3FB8;background:#0B0828}
.edh{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#1C1660;font-family:var(--mono);font-size:12.5px;color:#fff;font-weight:700}.edh code{color:var(--cy);font-family:Rubik,sans-serif;font-size:11.5px}
.edw{display:flex;align-items:stretch}.ln{margin:0;padding:10px 6px 10px 8px;min-width:22px;text-align:right;font-family:var(--mono);font-size:16px;line-height:1.45;color:#5A54A0;background:#0F0B33;user-select:none}
.edw textarea{flex:1;border:0;outline:0;resize:none;background:transparent;color:#F1EEFF;font-family:var(--mono);font-size:16px;line-height:1.45;padding:10px;min-height:150px;white-space:pre;overflow-x:auto;tab-size:4;caret-color:var(--gold);max-height:none;overflow-y:hidden;box-sizing:border-box}
.toks{display:flex;gap:6px;overflow-x:auto;padding:8px;background:#141046;scrollbar-width:none}.toks button{all:unset;cursor:pointer;flex:none;font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;background:#2A2080;border:1px solid #4A3FB8;border-radius:10px;padding:7px 10px}
.tests{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:12.5px;text-align:left}.tests div{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 10px;border-radius:10px;background:#1C1660}
.tests .p{border-left:4px solid #34E3A0}.tests .f{border-left:4px solid #FB7185}.tests i svg{width:16px;height:16px}.tests .p i{color:#34E3A0}.tests .f i{color:#FB7185}.tests code{color:#fff}.tests span{color:#B9B4F0}
.webprev{border-radius:14px;overflow:hidden;border:2px solid #4A3FB8;background:#fff}.wbar{display:flex;align-items:center;gap:5px;padding:6px 10px;background:#E9E6FF}.wbar i{width:9px;height:9px;border-radius:50%;background:#C4BDF0}.wbar span{margin-inline-start:8px;font-family:var(--mono);font-size:11.5px;color:#4B4680;background:#fff;border-radius:999px;padding:1px 10px}
.webprev iframe{display:block;width:100%;height:110px;border:0}
/* concept mini-games */
.cg{display:flex;flex-direction:column;gap:12px;padding:0 0 10px}
.items{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:46px}.it{all:unset;cursor:pointer;background:#fff;color:var(--ink);font-weight:800;font-size:16px;padding:10px 16px;border-radius:14px;box-shadow:0 4px 0 #8F7DFF}.it.sel{background:var(--gold);box-shadow:0 4px 0 var(--gold2),0 0 0 3px #fff}
.bins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bin{all:unset;cursor:pointer;box-sizing:border-box;min-height:140px;border-radius:18px;padding:8px;background:#1C1660;border:2px dashed #5B4FE0;display:flex;flex-direction:column;gap:6px;align-items:center}
.bin b{font-size:17px;color:var(--cy)}.bin span{display:flex;flex-direction:column;gap:4px;width:100%}.bin i{font-style:normal;background:#34E3A0;color:#03311F;font-weight:800;font-size:13px;border-radius:10px;padding:4px;text-align:center;animation:popin .3s}
.fbn{margin:0;background:#FFF4D6;color:var(--ink);border-radius:12px;padding:8px 12px;font-weight:700;font-size:14px}.fbo{margin:0;background:#DFFBEF;color:#03311F;border-radius:12px;padding:8px 12px;font-weight:800;font-size:14px}
.gate3{align-self:center;display:flex;flex-direction:column;align-items:center;padding:10px 30px;border-radius:20px;background:#07051c;border:3px solid var(--cy);box-shadow:0 0 24px #22d3ee66}.gate3 small{color:#B9B4F0;font-weight:700}.gate3 b{font-size:54px;font-family:"Secular One",sans-serif;font-weight:400;color:var(--gold);line-height:1.1}
.bulbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bulb{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;border-radius:16px;background:#1C1660;border:2px solid #3A2F9A}
.bulb i{width:44px;height:44px;border-radius:50%;background:#2A2260;box-shadow:inset 0 -4px 0 #141046}.bulb.on i{background:radial-gradient(circle at 40% 35%,#FFF6C8,#FFC83D 55%,#E0A10F);box-shadow:0 0 22px #ffc83d,0 0 44px #ffc83d88}
.bulb b{font-size:20px}.bulb span{font-family:var(--mono);color:var(--cy);font-weight:700}
.sum{text-align:center;font-weight:800;font-size:18px;color:#D8D4FF}.sum b{color:#fff;font-size:24px}.sum.ok b{color:#34E3A0}.bincode{text-align:center;font-family:var(--mono);font-size:28px;letter-spacing:8px;color:var(--cy)}
.msgcard{background:#fff;color:var(--ink);border-radius:18px;padding:12px 14px;box-shadow:0 5px 0 #8F7DFF;border-right:6px solid #E11D48}.msgcard small{font-weight:800;color:#6E68A8}.msgcard p{margin:4px 0 0;font-weight:700;font-size:16.5px;line-height:1.4}
.chopts{display:flex;flex-direction:column;gap:8px}.chopts button{all:unset;cursor:pointer;background:#1C1660;border:2px solid #4A3FB8;border-radius:16px;padding:13px 14px;font-weight:800;font-size:15.5px;color:#fff;box-shadow:0 4px 0 #07051c}
.chopts .ok{background:#16B97A;border-color:#34E3A0}.chopts .bad{background:#9F1239;border-color:#FB7185}
.route{display:flex;align-items:center;gap:6px;justify-content:center}.route img{width:64px;height:64px;object-fit:contain}.route .rz{width:52px;height:52px;border-radius:50%;background:#0F0B33;box-shadow:0 0 0 2px var(--cy)}
.route .wire{flex:1;max-width:160px;height:6px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--cy) 0 10px,#0000 10px 18px);animation:flow 1s linear infinite;background-size:18px 6px}@keyframes flow{to{background-position:-18px 0}}
.packets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pk{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center;padding:12px 6px;border-radius:16px;background:#2A2080;border:2px solid #5B4FE0;box-shadow:0 4px 0 #07051c}
.pk small{font-family:var(--mono);color:var(--cy);font-weight:700}.pk b{font-size:18px}.pk.used{opacity:.3}
.msgline{min-height:48px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;background:#fff;color:var(--ink);border-radius:16px;padding:8px;font-weight:800;font-size:19px}.msgline em{color:#8D88B8;font-style:normal;font-size:14px}.msgline span{animation:popin .3s}.msgline.ok{box-shadow:0 0 0 4px #34E3A0}
.crys{display:flex;align-items:flex-end;justify-content:center;gap:4px;min-height:140px}.cr{display:flex;flex-direction:column;align-items:center;gap:4px}.cr i{display:flex;width:calc(26px + var(--s) * 14px);filter:drop-shadow(0 0 8px #7fe7ff)}.cr i svg{width:100%}.cr b{font-size:18px}
.sw{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:900;font-size:18px;text-align:center;line-height:38px;box-shadow:0 3px 0 var(--gold2);margin-bottom:30px}.sw[disabled]{opacity:.3}
.swaps{text-align:center;font-weight:700;color:#D8D4FF}.swaps b{color:var(--gold);font-size:20px}
.aig h4{margin:2px 0 0;display:flex;gap:6px;align-items:center;font-size:15px;color:var(--cy)}.aig h4 svg{width:18px;height:18px}
.aigrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.aic{display:flex;flex-direction:column;gap:5px;padding:9px;border-radius:16px;background:#1C1660;border:1px solid #4A3FB8}
.aic .f{background:#2A2080;border-radius:9px;padding:3px 8px;font-weight:700;font-size:13.5px;text-align:center}.lb{display:flex;gap:4px}.lb button{all:unset;cursor:pointer;flex:1;text-align:center;padding:6px 2px;border-radius:10px;background:#0F0B33;border:1px solid #4A3FB8;font-weight:800;font-size:13px}.lb button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.pr{text-align:center;font-weight:900;padding:6px;border-radius:10px}.pr.y{background:#16B97A}.pr.n{background:#9F1239}
.cipher,.plain{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:16px;background:#07051c;border:2px solid #3A2F9A}.cipher small,.plain small{font-family:var(--mono);color:#8F89C9}.cipher b,.plain b{font-family:var(--mono);font-size:28px;letter-spacing:4px;color:#FB7185}
.plain b{color:#C9C3FF}.plain.ok{border-color:#34E3A0;box-shadow:0 0 22px #34e3a066}.plain.ok b{color:#34E3A0}
.wheel{display:flex;align-items:center;justify-content:center;gap:14px}.wheel button{all:unset;cursor:pointer;width:52px;height:52px;border-radius:50%;background:var(--vio);box-shadow:0 4px 0 var(--vio2);text-align:center;line-height:52px;font-size:28px;font-weight:900}
.wheel div{display:flex;flex-direction:column;align-items:center;width:86px;height:86px;justify-content:center;border-radius:50%;background:conic-gradient(var(--cy),var(--vio),var(--gold),var(--cy));padding:4px}.wheel div small,.wheel div b{background:#0F0B33}.wheel div b{font-size:30px;width:100%;text-align:center;border-radius:0 0 40px 40px}.wheel div small{width:100%;text-align:center;border-radius:40px 40px 0 0;font-family:var(--mono);color:#B9B4F0;padding-top:8px}
.abc{display:grid;grid-template-columns:repeat(13,1fr);gap:2px;font-family:var(--mono);font-size:11px}.abc span{display:flex;flex-direction:column;align-items:center;background:#1C1660;border-radius:5px;padding:2px 0}.abc i{font-style:normal;color:var(--cy)}
.cg.done .learned{display:flex;flex-direction:column;align-items:center;gap:4px}.learned img{width:150px;height:150px;object-fit:contain;animation:bob 2s infinite}.learned span{display:flex;gap:6px;align-items:center;background:var(--gold);color:var(--ink);font-weight:900;border-radius:999px;padding:6px 14px}.learned svg{width:18px;height:18px}
/* unlock */
.cunlock{position:fixed;inset:0;z-index:72;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(circle,#3A1F9Eee,#07051cf6 70%);overflow:hidden}
.cunlock .rays{position:absolute;width:200vmax;height:200vmax;background:repeating-conic-gradient(#22d3ee22 0 8deg,#0000 8deg 20deg);animation:spin 18s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.cunlock .bits i{position:absolute;width:10px;height:10px;background:var(--cy);border-radius:2px;top:110%;left:calc(var(--i,0) * 7%);animation:rise 3s linear infinite}
.cunlock .bits i:nth-child(odd){background:var(--gold)}.cunlock .bits i:nth-child(3n){background:var(--vio)}
.cunlock .bits i:nth-child(1){left:5%;animation-delay:.1s}.cunlock .bits i:nth-child(2){left:12%;animation-delay:.8s}.cunlock .bits i:nth-child(3){left:20%;animation-delay:1.6s}.cunlock .bits i:nth-child(4){left:28%;animation-delay:.4s}.cunlock .bits i:nth-child(5){left:36%;animation-delay:2.2s}.cunlock .bits i:nth-child(6){left:44%;animation-delay:1.1s}.cunlock .bits i:nth-child(7){left:52%;animation-delay:.2s}.cunlock .bits i:nth-child(8){left:60%;animation-delay:1.9s}.cunlock .bits i:nth-child(9){left:68%;animation-delay:.6s}.cunlock .bits i:nth-child(10){left:76%;animation-delay:1.4s}.cunlock .bits i:nth-child(11){left:84%;animation-delay:2.5s}.cunlock .bits i:nth-child(12){left:92%;animation-delay:.9s}.cunlock .bits i:nth-child(13){left:16%;animation-delay:2.8s}.cunlock .bits i:nth-child(14){left:72%;animation-delay:2.9s}
@keyframes rise{to{transform:translateY(-130vh) rotate(360deg)}}
.cucard{position:relative;z-index:2;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:12px 16px 14px;border-radius:28px;background:linear-gradient(180deg,#2A2080,#141046);border:2px solid #6B5BFF;box-shadow:0 10px 0 #07051c,0 0 60px #6b3bff88;animation:fadeup .5s both}
.cucard .cheer{width:150px;height:150px;object-fit:contain;margin-top:-80px;filter:drop-shadow(0 10px 14px #000a)}
.sector{position:relative}.sector img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 18px #22d3ee)}.sector span{position:absolute;top:0;right:-4px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:900;display:flex;align-items:center;justify-content:center}
.cucard small{color:var(--cy);font-weight:800}.cucard h2{margin:0;font-size:30px;color:#fff;text-shadow:0 3px 0 #4B22D6}
.gain{display:flex;flex-direction:column;align-items:center;gap:2px}.gain span{display:flex;gap:3px}.gain i svg{width:30px;height:30px;color:#4A3FB8}.gain i.on svg{color:var(--gold);filter:drop-shadow(0 0 6px #ffc83d)}.gain b{color:var(--gold);font-size:16px}
.got,.rankup{margin:0;display:flex;gap:6px;align-items:center;font-weight:700;font-size:14px;color:#E2DEFF}.got svg,.rankup svg{width:18px;height:18px;color:var(--cy)}.rankup{background:#6B3BFF;border-radius:999px;padding:4px 12px;color:#fff}
.cliff{width:100%;box-sizing:border-box;background:#0F0B33;border:1px dashed #5B4FE0;border-radius:18px;padding:10px 12px;text-align:right}.cliff b{color:var(--gold)}.cliff p{margin:2px 0 6px;font-weight:600;font-size:14.5px;color:#E2DEFF}
.cliff .nx{display:flex;gap:8px;align-items:center;font-weight:800;font-size:13px;color:var(--cy)}.cliff .nx img{width:40px;height:40px;object-fit:contain;filter:grayscale(.3)}
.cucard .cta{width:100%}
/* prologue */
.cintro{position:fixed;inset:0;z-index:70;overflow:hidden;color:#fff;background:#07051c}
.ci-bg{position:absolute;inset:-10%;background:url(img/bitopia-prologue.webp) center/cover;animation:kenburns 20s ease-out forwards}@keyframes kenburns{from{transform:scale(1.15)}to{transform:scale(1)}}
.cintro[data-k="0"] .ci-bg{filter:hue-rotate(-30deg) saturate(.8) brightness(1.15)}.cintro[data-k="2"] .ci-bg{filter:brightness(.6) blur(1px)}
.ci-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07051cdd 0%,#07051c22 30%,#07051c00 50%,#07051cf2 82%)}
.ci-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff07 0 2px,#0000 2px 4px);pointer-events:none}
.cintro .bar{display:none}
.ci-beat{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:70px 18px 90px}
.ci-t{text-align:center;animation:fadeup .8s .1s both}.ci-t h1{margin:8px 0 6px;font-size:58px;line-height:1;text-shadow:0 5px 0 #4B22D6,0 0 40px #6b3bffcc}.ci-t p{margin:0 auto;max-width:330px;font-weight:700;font-size:17px;line-height:1.45;color:#E2DEFF;text-shadow:0 2px 6px #000}
.ci-t.glitch h1{position:relative;color:#fff;animation:glitch 1.2s infinite steps(2)}@keyframes glitch{0%{text-shadow:3px 0 #FF2D95,-3px 0 #22D3EE}50%{text-shadow:-4px 2px #FF2D95,4px -2px #22D3EE;transform:translateX(2px)}100%{text-shadow:2px -1px #FF2D95,-2px 1px #22D3EE}}
.ci-bug{position:absolute;left:50%;bottom:120px;width:190px;height:190px;transform:translateX(-50%);object-fit:contain;animation:fadeup .8s .6s both,bob 2s 1.4s ease-in-out infinite;filter:drop-shadow(0 0 30px #c026d3)}
.ci-say{margin-top:auto;display:flex;flex-direction:column;gap:10px;animation:fadeup .8s .6s both;position:relative;z-index:2}.ci-say .bubble3{margin-left:110px;font-size:16.5px}
.ci-z{position:absolute;left:-14px;bottom:200px;width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 10px 16px #000a);animation:fadeup .8s .3s both}
.cintro[data-k="2"] .ci-beat{padding-bottom:26px}
.ci-tap{all:unset;cursor:pointer;position:absolute;z-index:4;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:var(--gold);color:var(--ink);font-weight:900;font-size:17px;padding:12px 28px;border-radius:999px;box-shadow:0 5px 0 var(--gold2)}.ci-tap svg{width:20px;height:20px}
.ci-dots{position:absolute;z-index:4;top:52px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.ci-dots i{width:26px;height:5px;border-radius:4px;background:#ffffff40}.ci-dots i.on{background:var(--cy)}
/* codex */
.codex{padding:calc(var(--st,0px) + 14px) 14px 20px}.cxh{display:flex;gap:10px;align-items:center;margin-bottom:12px}.cxh img{width:58px;height:58px;border-radius:50%;background:#0F0B33;box-shadow:0 0 0 3px var(--cy)}.cxh h1{margin:0;font-size:28px}.cxh p{margin:0;color:#B9B4F0;font-weight:600;font-size:13.5px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ccard{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:18px;background:linear-gradient(180deg,#2A2080,#1C1660);border:2px solid #5B4FE0;box-shadow:0 5px 0 #07051c}
.ccard b{font-size:17px;color:var(--gold)}.ccard p{margin:0;font-size:13px;line-height:1.4;color:#E2DEFF;font-weight:600}.ccard pre{margin:0;direction:ltr;text-align:left;font-family:var(--mono);font-size:11.5px;color:#7CFFB2;background:#07051c;border-radius:10px;padding:6px 8px;white-space:pre-wrap}
.ccard.lock{background:#141046;border-style:dashed;border-color:#3A2F9A;align-items:center;justify-content:center;text-align:center;min-height:120px}.ccard.lock i svg{width:26px;height:26px;color:#5B4FE0}.ccard.lock b{color:#8D88B8}
/* ===== track themes ===== */
body.trk-kid .pal{min-height:74px;font-size:15.5px}body.trk-kid .pal svg{width:32px;height:32px}body.trk-kid .pblk .ph{font-size:16px;padding:9px 10px}
body.trk-kid .stage3{background:radial-gradient(ellipse at 50% 0%,#4F3BD8,#221A6B 80%)}
body.trk-kid .t.floor{background:linear-gradient(180deg,#4ADE80,#22A55A);box-shadow:inset 0 -4px 0 #157A40,inset 0 0 0 1px #A7F3D055}body.trk-kid .t.floor::after{border-color:#ffffff40;border-radius:50%;inset:38%}
body.trk-kid .t.wall{background:linear-gradient(180deg,#7C6A55,#5A4A3A);box-shadow:inset 0 4px 0 #A08A70,0 3px 0 #2a2018}body.trk-kid .t.wall::before{background:radial-gradient(circle at 30% 30%,#2E9E5B 0 30%,#0000 32%),radial-gradient(circle at 70% 60%,#2E9E5B 0 26%,#0000 28%)}
body.trk-teen{--mono:"JetBrains Mono",ui-monospace,monospace}
body.trk-teen .whero{height:360px}body.trk-teen .wttl h1{font-family:var(--mono);font-weight:700;font-size:44px;letter-spacing:-1px;text-shadow:0 0 24px #22d3eeaa}
body.trk-teen .mcard{background:#0B0828;border-color:#22D3EE66;box-shadow:0 0 0 1px #22d3ee22,0 8px 0 #000}body.trk-teen .mcard .ribbon{font-family:var(--mono);letter-spacing:.5px}
body.trk-teen .node .disc{border-radius:20px;background:#0B0828}body.trk-teen .node .num{font-family:var(--mono);border-radius:6px}
body.trk-teen .bubble3{border-radius:12px;box-shadow:0 0 0 1px #22d3ee55;background:#F6F4FF}body.trk-teen .chip{border-radius:8px;font-family:Rubik,sans-serif}
body.trk-teen .s3t h1{font-size:30px}
@media (prefers-reduced-motion:reduce){.wz,.s3art,.gem,.node.now .disc,.cunlock .rays,.cunlock .bits i,.ci-bg,.ci-t.glitch h1,.ci-bug{animation:none}}
/* text missions: the win banner sits on the terminal title bar so the real output + tests stay readable */
.stage3.term .win3{inset:0 0 auto 0;height:auto;flex-direction:row;gap:10px;padding:6px 12px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,#6b3bff,#2A2080)}
.stage3.term .win3 img{width:38px;height:38px}.stage3.term .win3 b{font-size:17px;margin:0}.stage3.term .win3 .stars i svg{width:18px;height:18px}
.stage3.term:has(.win3) .out{padding-top:34px}

/* mission clarity: facing, trail, teach + mini-demo, absolute-direction blocks */
.boardwrap{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1}
.faceline{margin:0;color:#FFC83D;font-weight:800;font-size:13.5px;text-align:center;text-shadow:0 1px 8px #000;letter-spacing:.01em}
.faceline b{color:#fff}
.t.visited{box-shadow:inset 0 -4px 0 #1E2780,0 0 0 2px #FFC83D99,inset 0 0 12px #ffc83d55}
body.trk-kid .t.visited{box-shadow:inset 0 -4px 0 #157A40,0 0 0 2px #FFC83Daa,inset 0 0 10px #ffc83d66}
.ziko .cone{inset:-10px}
.ziko .cone::before{border-width:12px;border-left-width:18px;right:-10px;filter:drop-shadow(0 0 8px #ffc83d)}
.c-east{--c:#4C8DFF;--d:#2F5FD0}.c-west{--c:#FB7185;--d:#E11D48}.c-north{--c:#38BDF8;--d:#0284C7}.c-south{--c:#A78BFA;--d:#6D28D9}
.teach3{display:flex;flex-direction:column;gap:8px}
.zsay.teach>div{background:#E8F7FF;box-shadow:0 3px 0 #22D3EE}
.minidemo{border-radius:18px;padding:8px 8px 6px;background:#141046;border:1px solid #4A3FB8;display:flex;flex-direction:column;align-items:center;gap:4px}
.minidemo .board3{--ts:34px}
.minidemo .faceline{font-size:12px}
.democap{font-weight:800;font-size:13px;color:#EAE7FF;text-align:center;line-height:1.35}
#labShow{margin-top:8px}
.stage3{padding-bottom:10px}