:root{--bg:#06101c;--panel:#0b1725;--panel2:#0e1c2c;--line:#213145;--muted:#8291a4;--text:#edf5fb;--cyan:#28d7e5;--orange:#ff9e47;--red:#ff5264}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}body{min-height:100vh;background-image:radial-gradient(circle at 70% 12%,#0c2733 0,transparent 27%),linear-gradient(#07121f,#050c15)}
button,select,input{font:inherit}button{color:inherit;cursor:pointer}header{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:#07111ee8;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none;font-size:14px;letter-spacing:2px;font-weight:800}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:1.7px;margin-top:3px}.mark{width:38px;height:38px;border:1px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%)}
.header-actions{display:flex;align-items:center;gap:20px}.status{font-size:10px;letter-spacing:1.5px;color:#9eb1c3}.status i,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#42e3a4;box-shadow:0 0 12px #42e3a4;margin-right:8px}.icon-btn{border:1px solid var(--line);background:transparent;border-radius:50%;width:32px;height:32px}
main{width:min(1600px,94vw);margin:auto}.hero{padding:56px 4px 34px;display:flex;justify-content:space-between;align-items:end}.eyebrow{font-size:10px;color:var(--cyan);letter-spacing:2.5px}.hero h1{font-size:clamp(38px,4.3vw,68px);line-height:.96;margin:14px 0 18px;letter-spacing:-3px}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #718197}.hero p{color:#98a7b9;max-width:590px;margin:0;line-height:1.55}.legend{display:flex;gap:20px;color:#8999aa;font-size:10px;letter-spacing:1px}.legend b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.cyan{background:var(--cyan)}.orange{background:var(--orange)}.red{background:var(--red)}
.workspace{display:grid;grid-template-columns:270px minmax(500px,1fr) 260px;gap:14px}.panel{background:linear-gradient(145deg,#0c1928,#091522);border:1px solid var(--line);box-shadow:0 16px 50px #0005}.controls,.learn{padding:20px}.panel-head{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}.panel-head>span{font-family:monospace;color:var(--cyan);font-size:11px}.panel-head h2{font-size:15px;margin:0;letter-spacing:.5px}.panel-head .text-btn{margin-left:auto}.text-btn{border:0;background:transparent;color:var(--cyan);font-size:10px;text-transform:uppercase;letter-spacing:1px}
.select-label,.slider-row{display:block;color:#718398;font-size:9px;letter-spacing:1.3px;margin-bottom:18px}.select-label select{display:block;width:100%;margin-top:8px;background:#101f30;border:1px solid #2a3c50;color:#dbe8f2;padding:10px;outline:none}.slider-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.slider-title output{color:white;font-size:11px;letter-spacing:0}.slider-row input{width:100%;accent-color:var(--cyan);height:3px}.slider-range{display:flex;justify-content:space-between;color:#4f6276;font-size:8px;margin-top:4px}.control-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.secondary{padding:10px 5px;border:1px solid #2c4055;background:#101f30;font-size:10px;text-transform:uppercase;letter-spacing:.7px}.secondary:hover{border-color:var(--cyan)}
.sim-column{min-width:0}.viewport{overflow:hidden}.viewport-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:1.4px;color:#8fa0b2}.chip{border:1px solid #2a3a4d;background:transparent;color:#6f8295;padding:5px 8px;font-size:8px;text-transform:uppercase}.chip.active{color:var(--cyan);border-color:#277681;background:#0e3037}
#simCanvas{width:100%;height:470px;display:block;background:#081523}.readouts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.readouts div{padding:13px 16px;border-right:1px solid var(--line)}.readouts div:last-child{border:0}.readouts span{display:block;color:#607489;font-size:8px;letter-spacing:1.4px}.readouts strong{font-family:monospace;font-size:14px;display:block;margin-top:5px}.transport{height:58px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:0 15px}.transport button{border:1px solid #2d4053;background:#102031;width:32px;height:32px}.transport .play{background:var(--cyan);color:#041116;border:0;width:40px}.timeline{height:3px;background:#26384b;flex:1;margin-left:8px}.timeline div{height:100%;width:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}#clock{font-family:monospace;font-size:10px;color:#8c9daf}
.analytics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.chart-card{padding:16px}.card-title{display:flex;justify-content:space-between}.card-title span{display:block;color:#62768b;font-size:8px;letter-spacing:1.3px}.card-title strong{font-size:12px}.card-title b{font-family:monospace;color:var(--orange);font-size:13px}canvas#energyChart,canvas#collapseChart{width:100%;height:120px;display:block;margin-top:10px}
.formula{border:1px solid #254353;background:#0a2430;padding:15px;margin-bottom:15px}.formula span,.note strong{font-size:8px;color:var(--cyan);letter-spacing:1.4px}.formula strong{font-family:Georgia,serif;font-size:24px;display:block;margin:8px 0}.formula p,.concept p,.note p{color:#7f91a4;font-size:10px;line-height:1.5;margin:0}.concept{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.concept>b{font-family:monospace;color:#52677b;font-size:10px}.concept.active>b{color:var(--orange)}.concept strong{font-size:11px;display:block;margin-bottom:5px}.note{border-left:2px solid var(--orange);padding:2px 0 2px 12px;margin-top:20px}
.saved-section{margin:14px 0 60px;padding:20px}.saved-section .panel-head div p{font-size:10px;color:var(--muted);margin:3px 0 0}.saved-section .text-btn{margin-left:auto}.saved-runs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}.empty{grid-column:1/-1;padding:25px;text-align:center;color:#6f8193;font-size:11px;border:1px dashed #28394b}.run{border:1px solid #25384b;padding:14px;background:#0d1b2a}.run-top{display:flex;justify-content:space-between}.run h3{font-size:11px;margin:0}.run time{font-size:8px;color:#66798d}.run-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:13px 0}.run-stats span{color:#708297;font-size:8px}.run-stats b{display:block;color:#dce8f2;font-family:monospace;font-size:11px;margin-top:3px}.run-actions{display:flex;gap:6px}.run-actions button{flex:1;border:1px solid #2b4055;background:#112236;padding:7px;font-size:8px;text-transform:uppercase}.run-actions button:first-child{color:var(--cyan)}
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#dffcff;color:#08212a;padding:10px 18px;font-size:11px;opacity:0;pointer-events:none;transition:.25s;z-index:30}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1150px){.workspace{grid-template-columns:250px 1fr}.learn{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.learn .panel-head{grid-column:1/-1}.learn .formula,.learn .concept,.learn .note{margin:0;padding:12px;border:1px solid var(--line)}}@media(max-width:780px){main{width:96vw}.hero{padding-top:35px}.legend{display:none}.workspace{display:block}.controls,.viewport,.learn{margin-bottom:12px}.analytics{grid-template-columns:1fr}.learn{display:block}.readouts div{padding:9px 7px}.readouts strong{font-size:11px}#simCanvas{height:390px}.hero h1{letter-spacing:-2px}.saved-runs{grid-template-columns:1fr}}