:root{--bg:#0b1424;--card:rgba(13,23,41,.9);--line:rgba(150,190,255,.2);--acc:#4fd1c5;--gold:#ffd45a;--ink:#e8f0ff;--muted:#93a4c0;--ok:#6df08a;--bad:#ff8a5a;--r:14px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#17304f 0%,#0b1424 62%,#060b15 100%);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
body.lv0{font-size:17px}
#view{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none}
.stageui{position:absolute;inset:0;pointer-events:none}
.stageui>*{pointer-events:auto}
button{font:inherit;color:var(--ink);background:rgba(30,48,80,.85);border:1px solid var(--line);border-radius:10px;padding:7px 12px;cursor:pointer}
button:hover:not(:disabled){background:rgba(46,72,118,.95)}
button:disabled{opacity:.4;cursor:default}
button.primary{background:linear-gradient(180deg,#2fb5aa,#1c8d86);border-color:#4fd1c5;font-weight:700}
button.primary:hover{background:linear-gradient(180deg,#3cc7bb,#22a098)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;backdrop-filter:blur(8px)}
h1,h2,h3{margin:0 0 6px}h3{font-size:.8em;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}h2{font-size:1.2em}
.muted,.fine{color:var(--muted);font-size:.85em}.fine{margin-top:10px}
.sp{flex:1}

/* header */
header{position:fixed;top:0;left:0;right:0;height:50px;display:flex;align-items:center;gap:10px;padding:0 10px;background:linear-gradient(180deg,rgba(6,11,21,.92),rgba(6,11,21,.55));z-index:5;border-bottom:1px solid var(--line)}
header[hidden]{display:none}
.brand small{display:block;font-size:.6em;letter-spacing:.2em;color:var(--acc);line-height:1}.brand b{font-size:1.05em}
.tabs{display:flex;gap:6px;margin:0 auto}
.tab{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px}
.tab span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#26416b;font-size:.8em;font-weight:700}
.tab small{color:var(--muted);font-size:.75em}
.tab.on{background:linear-gradient(180deg,#2e5a8f,#244a78);border-color:var(--acc)}
.tab.on span{background:var(--acc);color:#052624}
.tab.full small{color:var(--ok)}
.hright{display:flex;gap:6px}.hright button{padding:5px 10px;font-size:.85em}

/* gate */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;z-index:8;background:radial-gradient(120% 90% at 50% 20%,#17304f 0%,#0b1424 70%)}
.gate[hidden]{display:none}
.gatecard{max-width:820px;text-align:center}
.gatecard small{color:var(--acc);letter-spacing:.25em;font-weight:700}
.gatecard h1{font-size:clamp(1.6rem,4.6vw,2.6rem);line-height:1.1;margin:10px 0}
.gatecard>p{color:#c3d2ea;max-width:620px;margin:0 auto 12px}
.gatecard h2{margin-top:20px;color:var(--gold)}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:10px}
.lvl{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px;border-radius:16px;background:rgba(20,38,66,.85);border:1px solid var(--line)}
.lvl b{font-size:1.35em}.lvl span{color:var(--gold);font-weight:600}.lvl small{color:#b4c4de;font-size:.88em;line-height:1.35;letter-spacing:0;font-weight:400;text-transform:none}
.lvl:hover{border-color:var(--acc);transform:translateY(-2px)}

/* caption, toast, flash */
.caption{position:fixed;left:50%;transform:translateX(-50%);top:64px;max-width:min(640px,92vw);background:rgba(255,212,90,.96);color:#2a2000;padding:10px 16px;border-radius:14px;font-weight:600;z-index:7;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:150px;background:rgba(10,20,36,.95);border:1px solid var(--acc);padding:8px 14px;border-radius:10px;z-index:7}
.caption[hidden],.toast[hidden]{display:none}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:4}
#flash.go{animation:fl 1.2s ease-out}
@keyframes fl{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

/* level gating of controls */
body.lv0 [data-lv="1"],body.lv0 [data-lv="2"],body.lv1 [data-lv="2"]{display:none!important}

/* stage 1 */
.s1 .shelf{position:absolute;left:10px;top:62px;display:flex;flex-direction:column;gap:8px}
.atomchip{display:flex;flex-direction:column;align-items:center;width:66px;padding:7px 4px;border-radius:14px;background:rgba(14,24,42,.9);border-color:var(--c)}
.atomchip i{font-style:normal;font-weight:800;font-size:1.25em;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,var(--c) 55%);color:#071018;text-shadow:0 0 3px #fff8}
.atomchip small{font-size:.65em;color:var(--muted);margin-top:3px;white-space:nowrap}
.s1.big .atomchip{width:78px}.s1.big .atomchip i{width:46px;height:46px;font-size:1.4em}.s1.big .atomchip small{font-size:.75em}
.s1 .toolrow{position:absolute;left:90px;right:350px;top:58px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;pointer-events:none}
.s1 .toolrow>*{pointer-events:auto}
.s1 .toolrow label{display:flex;align-items:center;gap:4px;font-size:.82em;background:rgba(13,23,41,.75);padding:4px 8px;border-radius:999px;border:1px solid var(--line)}
.s1 .toolrow button{font-size:.85em;padding:5px 10px}
.s1 .info{position:absolute;right:10px;top:62px;width:330px;max-height:calc(100% - 230px);overflow:auto}
.info .name{font-size:1.35em;font-weight:800;color:var(--gold)}
.info .formula{font-size:1.8em;font-weight:800;letter-spacing:.02em;margin-bottom:4px}
.info .selrow{font-size:.85em;color:#bcd0f0;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:8px}
.info .warn{color:var(--bad);margin:4px 0}.info .fact{margin:6px 0;color:#d6e4fb}
.info .chipline{margin:4px 0;color:#d6e4fb}
.info .grid2,.s2 .grid2,.s3 .grid2{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:.88em;margin:6px 0}
.grid2 span{color:var(--muted)}.grid2 b{text-align:right}
.info .geo,.s2 .geo{font-size:.85em;margin-top:6px;padding:6px 8px;background:rgba(40,64,104,.35);border-radius:8px}
.geo small{color:#b4c4de;font-size:.95em}
.s1 .mission{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;width:min(800px,calc(100% - 200px))}
.s1 .mission{display:flex;gap:12px;align-items:stretch}
.mission .mbody{flex:1;min-width:0}.mdia{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding-right:10px;border-right:1px solid var(--line)}.mdia[hidden]{display:none}
.mdia svg{background:rgba(0,0,0,.25);border-radius:10px}
.s1.big .mdia svg{width:176px;height:122px}
.recipe{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.rc{display:inline-flex;align-items:center;gap:4px;font-size:.8em;padding:2px 8px 2px 3px;border-radius:999px;background:rgba(40,64,104,.5);border:1px solid var(--line)}
.rc i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--c);color:#071018;font-weight:800;font-size:.85em}.rc.ok{border-color:var(--ok);color:var(--ok)}.rc.over{border-color:var(--bad);color:var(--bad)}
.mission .mrow{display:flex;gap:10px;align-items:center}.mission .mt{flex:1;font-weight:600}
.mission .mhint{margin:6px 0 0;color:#b8d4f6;font-size:.88em}
.mission .mrow2{display:flex;gap:8px;align-items:center;margin-top:8px}
.s1.big .mission .mt{font-size:1.15em}
.dots{display:flex;gap:5px;flex:1;flex-wrap:wrap}.dots i{width:10px;height:10px;border-radius:50%;background:#2a3d5e}.dots i.ok{background:var(--ok)}.dots i.cur{outline:2px solid var(--gold);outline-offset:1px}
.banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);padding:18px 30px;background:linear-gradient(180deg,#ffd45a,#ffb23a);color:#2a1d00;border-radius:20px;text-align:center;box-shadow:0 12px 50px rgba(255,190,60,.5);animation:pop .5s cubic-bezier(.2,1.6,.4,1);pointer-events:none!important;z-index:6}
.banner[hidden]{display:none}
.banner b{display:block;font-size:1.8em}.banner span{font-size:1.1em}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* stage 2 */
.s2 .rlist{position:absolute;left:10px;top:62px;width:230px;display:flex;flex-direction:column;gap:6px;max-height:calc(100% - 80px);overflow:auto}
.rbtn{text-align:left;display:flex;gap:8px;align-items:center}.rbtn.cur{border-color:var(--acc);background:rgba(46,90,143,.9)}
.tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#26416b;font-size:.7em;color:transparent}.tick.on{background:var(--ok);color:#052}
.s2 .rpanel{position:absolute;right:10px;top:62px;width:420px;max-height:calc(100% - 76px);overflow:auto}
.rpanel .story{color:#c3d2ea;font-size:.9em;margin-bottom:8px}
.badge{display:inline-block;background:var(--ok);color:#052;font-weight:800;border-radius:999px;padding:2px 10px;font-size:.8em;margin-bottom:6px}.badge[hidden]{display:none}
.eqline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 10px;margin:10px 0}
.eqline .sp{display:flex;flex-direction:column;align-items:center;gap:2px}
.eqline .fm{font-size:1.5em;font-weight:800}.eqline small{color:var(--muted);font-size:.7em;max-width:84px;text-align:center}
.eqline .op,.eqline .arrow{font-size:1.4em;color:var(--gold);padding-bottom:18px}
.stp{display:flex;align-items:center;gap:4px}.stp button{padding:1px 9px;font-size:1.1em;border-radius:8px}.stp b{min-width:20px;text-align:center;font-size:1.2em;color:var(--gold)}
.bal{border-collapse:collapse;margin:6px 0;font-size:.9em}.bal td,.bal th{padding:3px 12px;text-align:center}.bal td:first-child{text-align:left;color:var(--muted)}
.bal th i{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c);color:#071018;font-weight:800}
.bal .ok{color:var(--ok);font-weight:800}.bal .bad{color:var(--bad);font-weight:800}
.okmsg{color:var(--ok)}.badmsg{color:var(--bad)}
.ctl{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.sl{display:flex;flex-direction:column;gap:3px;font-size:.9em}.sl input{width:100%;accent-color:var(--acc)}.sl b{color:var(--gold)}.sl small{color:var(--muted)}
.chk{display:flex;gap:6px;align-items:center;font-size:.9em}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.result{margin:10px 0;min-height:1em}
.enbox summary{cursor:pointer;color:var(--muted);margin:6px 0}.enbox canvas{width:100%;max-width:340px;background:rgba(0,0,0,.2);border-radius:8px}

/* stage 3 */
.s3 .sub{position:absolute;left:10px;top:62px;width:170px;display:flex;flex-direction:column;gap:6px}
.s3 .lab{position:absolute;right:10px;top:62px;width:410px;max-height:calc(100% - 76px);overflow:auto;display:flex;flex-direction:column;gap:8px}
.lab .story{color:#c3d2ea;font-size:.88em}
.pill{display:inline-block;padding:3px 14px;border-radius:999px;font-weight:800;font-size:1.1em;background:#35507a}
.pill[data-s=solid]{background:#4a78d8}.pill[data-s=liquid]{background:#2aa6c4}.pill[data-s=gas]{background:#d9733a}.pill[data-s=mixed]{background:#8a63c8}
.phase small{margin-left:8px;color:var(--muted)}
.lab canvas{width:100%;background:rgba(0,0,0,.2);border-radius:8px}
.tbl table{width:100%;font-size:.8em;border-collapse:collapse}.tbl th,.tbl td{padding:2px 6px;text-align:right}
.goals{margin-top:6px}.goal{display:flex;gap:8px;align-items:flex-start;font-size:.88em;padding:6px 0;border-top:1px solid var(--line)}
.goal i{flex:none;width:18px;height:18px;border-radius:50%;background:#26416b;display:grid;place-items:center;font-style:normal;color:#052;font-size:.75em}.goal.ok i{background:var(--ok)}.goal.ok{color:#bfe9c9}

/* help */
.helpcard{position:fixed;right:12px;top:58px;width:340px;max-width:calc(100% - 24px);z-index:9;background:rgba(10,18,34,.97);border:1px solid var(--acc);border-radius:14px;padding:14px 16px;font-size:.9em}
.helpcard[hidden]{display:none}.helpcard>button{position:absolute;right:8px;top:6px;padding:0 9px;font-size:1.3em}

/* phones */
@media (max-width:820px){
 header{height:46px;gap:6px}.brand{display:none}.tabs{margin:0}.tab{padding:5px 9px}.tab small{display:none}
 .hright button{font-size:.75em;padding:4px 7px}#voiceBtn,#soundBtn{display:none}
 .s1 .shelf{left:6px;right:6px;top:auto;bottom:122px;flex-direction:row;overflow-x:auto;gap:6px}
 .atomchip{flex:none;width:56px}.s1.big .atomchip{width:66px}
 .s1 .toolrow{left:6px;right:6px;top:50px;overflow-x:auto;flex-wrap:nowrap}.s1 .toolrow>*{flex:none}
 .s1 .info{left:6px;right:6px;top:auto;bottom:auto;width:auto;top:88px;max-height:26vh;font-size:.9em;opacity:.96}
 .s1 .mission{left:6px;right:6px;width:auto;transform:none;bottom:6px;padding:8px 10px}
 .mission .mt{font-size:.88em}.mdia{padding-right:6px}.mdia svg{width:112px;height:78px}.s1.big .mdia svg{width:120px;height:84px}.rc{font-size:.72em}.s1.big .mission .mt{font-size:1em}
 .toast{bottom:210px}
 .s2 .rlist{left:6px;right:6px;top:50px;width:auto;flex-direction:row;overflow-x:auto;padding:6px}.s2 .rlist h3{display:none}.rbtn{flex:none;white-space:nowrap}
 .s2 .rpanel{left:6px;right:6px;top:auto;bottom:6px;width:auto;max-height:46vh}
 .s3 .sub{left:6px;right:6px;top:50px;width:auto;flex-direction:row;overflow-x:auto;padding:6px}.s3 .sub h3{display:none}
 .s3 .lab{left:6px;right:6px;top:auto;bottom:6px;width:auto;max-height:46vh}
 .caption{top:56px}
}