:root{--bg:#050a16;--panel:rgba(10,20,40,.78);--panel2:rgba(14,28,54,.9);--line:rgba(90,140,220,.32);--line2:rgba(90,140,220,.16);--text:#e8f0ff;--soft:#b6c6e2;--muted:#7f93b6;--accent:#2f8cff;--accent2:#58b0ff;--red:#ff3b3b;--amber:#ffb23d;--green:#42d68a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.35 Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
button,select,input{font:inherit;color:inherit}
#app{display:grid;grid-template-columns:332px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) clamp(180px,26dvh,252px);grid-template-areas:"head head" "side stage" "bot bot";height:100vh;height:100dvh;gap:0;background:radial-gradient(1200px 600px at 70% 0,#0b1c3c 0,#050a16 70%)}
.glass{background:var(--panel);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(6px)}
#head{grid-area:head;display:flex;align-items:center;gap:14px;padding:8px 14px;min-height:0;flex-wrap:wrap}
#logo{display:flex;align-items:center;gap:12px;flex:1 1 520px;min-width:0}
#logo svg{width:92px;height:68px;flex:none}
#logo h1{margin:0;font-size:clamp(22px,2.7vw,36px);font-weight:700;letter-spacing:-.4px;line-height:1.05}
#logo h1 span{color:#2b8cff}
#logo p{margin:4px 0 0;color:var(--soft);font-size:13px;max-width:620px}
#tabs{display:flex;gap:8px;flex:0 1 auto}
#tabs button{width:128px;height:84px;border-radius:9px;background:rgba(14,28,56,.75);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;color:var(--soft);font-size:13px}
#tabs button svg{width:46px;height:36px}
#tabs button:hover{border-color:#5aa8ff;color:#fff}
#tabs button.on{border:2px solid #2f9bff;color:#fff;background:linear-gradient(180deg,#0f2a5c,#0a1c3f);box-shadow:0 0 18px rgba(47,155,255,.45)}
#side{grid-area:side;overflow:auto;padding:8px 6px 8px 10px;display:flex;flex-direction:column;gap:8px;min-height:0}
#side section{padding:10px 12px}
h2{margin:0 0 6px;font-size:17px;font-weight:600}
.lab{display:block;margin:7px 0 4px;font-weight:600;font-size:13px}
.selwrap{display:flex;align-items:center;gap:8px;background:rgba(14,28,56,.9);border:1px solid var(--line);border-radius:8px;padding:2px 8px 2px 6px;height:42px}
.selwrap i{width:30px;height:30px;border-radius:50%;flex:none;background:#999;box-shadow:inset -5px -4px 8px rgba(0,0,0,.55)}
.selwrap select{flex:1;background:transparent;border:0;outline:0;height:36px;font-size:15px;cursor:pointer;min-width:0}
.selwrap select option{background:#0b1730;color:#fff}
.selwrap:focus-within{border-color:#58b0ff}
.info{margin:5px 0 2px;color:var(--soft);font-size:13px}.info span{display:block}
.info.two{display:flex;justify-content:space-between;align-items:flex-end}
.ibtn{width:34px;height:34px;border-radius:7px;border:1px solid var(--line);background:rgba(14,28,56,.9);cursor:pointer;display:grid;place-items:center}.ibtn:hover{border-color:#58b0ff}
.sl{display:grid;grid-template-columns:1fr auto;align-items:center;margin:8px 0 2px;gap:2px 8px}
.sl label{font-weight:600;font-size:13px}
.sl output{background:rgba(10,20,42,.95);border:1px solid var(--line);border-radius:6px;padding:3px 10px;min-width:92px;text-align:right;font-size:13px}
input[type=range]{grid-column:1/-1;width:100%;margin:4px 0 0;accent-color:var(--accent);height:20px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#2f8cff,#1a4b99)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #2f8cff;margin-top:-6px}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#1d4a96}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #2f8cff}
.ck{display:flex;align-items:center;gap:9px;margin:9px 0;cursor:pointer;font-size:14px;position:relative}
.ck input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.ck i{width:21px;height:21px;border-radius:4px;border:2px solid #4c86e6;background:rgba(10,20,42,.8);flex:none;display:grid;place-items:center}
.ck input:checked+i{background:#1f78ff;border-color:#1f78ff}
.ck input:checked+i::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ck input:focus-visible+i,.btn:focus-visible,#tabs button:focus-visible,.ibtn:focus-visible,select:focus-visible,input[type=range]:focus-visible{outline:2px solid #9fd0ff;outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:rgba(14,28,56,.9);border-radius:8px;cursor:pointer;padding:6px 12px}
.btn:hover{border-color:#58b0ff}
.btn.big{width:100%;height:40px;margin-top:8px;font-size:15px;font-weight:600}
.btn.big.on{background:linear-gradient(180deg,#1f7bff,#1560d8);border-color:#3c93ff;color:#fff}
.btn.sm{font-size:12px;padding:5px 10px}
.hrow2{display:flex;gap:8px;margin-top:8px}.hrow2 .btn{flex:1}
#presets{display:grid;grid-template-columns:1fr;gap:5px}
#presets button{text-align:left;padding:6px 9px;border-radius:7px;border:1px solid var(--line2);background:rgba(14,28,56,.7);cursor:pointer;font-size:12.5px;color:var(--soft)}
#presets button:hover{border-color:#58b0ff;color:#fff}#presets b{color:#fff;font-weight:600}
#stage{grid-area:stage;position:relative;min-width:0;min-height:0;overflow:hidden;margin:0 0 0 0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#leaders line{stroke:#fff;stroke-width:1.4;opacity:.9}#leaders circle{fill:#fff;stroke:#2f8cff;stroke-width:2}
#labels{position:absolute;inset:0;pointer-events:none}
.tag{position:absolute;white-space:nowrap;padding:5px 9px;border-radius:5px;font-size:13px;background:rgba(8,18,38,.85);border:1.5px solid #2f8cff;color:#fff;line-height:1.2;transform:translate(-50%,-50%)}
.tag b{color:#58b0ff;font-weight:600}.tag.red{border-color:#ff4343;background:rgba(40,8,12,.85)}.tag.dim{opacity:.0}
#eq{position:absolute;top:10px;right:10px;width:min(320px,calc(100% - 20px));padding:10px 12px;font-size:13px;z-index:3}
#eq h3{margin:0 0 4px;font-size:14px;font-weight:600}#eq h3 small{font-weight:400;font-size:13px;color:var(--soft)}
#eq h4{margin:6px 0 2px;font-size:13px;font-weight:600}
#eq p{margin:2px 0 2px 10px;color:var(--soft);font-size:12.5px}
.formula{font:italic 600 20px "Times New Roman",Georgia,serif;display:flex;align-items:center;gap:3px;margin:4px 0 2px 6px;color:#f4f8ff}
.formula .par{font-size:44px;font-weight:200;font-style:normal;line-height:.9;transform:scaleY(1.2)}
.frac{display:inline-flex;flex-direction:column;align-items:center;font-size:19px;line-height:1.05}.frac i{padding:0 4px}.frac i:first-child{border-bottom:1.6px solid #f4f8ff}
.formula sup{font:italic 600 14px serif;align-self:flex-start;margin-top:-2px}.formula sub{font-size:.62em}
.status{font-weight:700;margin-top:3px!important}.status.red{color:#ff3b3b}.status.amber{color:var(--amber)}.status.green{color:var(--green)}.status.blue{color:#58b0ff}
#legend{position:absolute;left:12px;bottom:10px;display:flex;gap:14px;font-size:12px;color:var(--soft);background:rgba(6,12,26,.6);padding:4px 10px;border-radius:6px;pointer-events:none}
#legend i{display:inline-block;width:24px;border-top:2.4px dashed #ff3b3b;vertical-align:middle;margin-right:6px}#legend i.l2{border-top:2px dotted #ffb23d}
#autocam{position:absolute;left:12px;top:10px;z-index:4}
#hint{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;font-size:12px;color:var(--soft);background:rgba(6,12,26,.6);padding:4px 10px;border-radius:6px;pointer-events:none;white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
#chip{position:absolute;left:12px;top:12px;font-size:12px;background:rgba(6,12,26,.7);border:1px solid var(--line2);padding:4px 10px;border-radius:12px;pointer-events:none;color:var(--soft)}
.ov{position:absolute;z-index:5;top:10px;left:10px;width:min(560px,calc(100% - 20px));max-height:calc(100% - 20px);overflow:auto;padding:12px 14px}
#ovDebris{left:auto;right:10px;top:auto;bottom:10px;width:min(430px,calc(100% - 20px));max-height:78%}
#ovSliders{width:min(520px,calc(100% - 20px))}
.ov h3{margin:0 0 6px;font-size:16px}.ov p{margin:4px 0;color:var(--soft);font-size:12.5px}
.ov table{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0}.ov th,.ov td{padding:4px 6px;text-align:right;border-bottom:1px solid var(--line2)}.ov th:first-child,.ov td:first-child{text-align:left}.ov th{color:var(--muted);font-weight:600}
.ov tr.pick{cursor:pointer}.ov tr.pick:hover td{background:rgba(47,140,255,.15)}.ov tr.sel td{background:rgba(47,140,255,.25)}
.bar{display:inline-block;height:8px;border-radius:4px;background:linear-gradient(90deg,#2f8cff,#ff6a3d);vertical-align:middle}
.ov canvas{width:100%;height:130px;display:block;margin:6px 0;background:rgba(4,10,22,.55);border-radius:6px}
.ov .row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.ov .stat{flex:1 1 90px;background:rgba(4,10,22,.55);border:1px solid var(--line2);border-radius:7px;padding:5px 8px;font-size:12px;color:var(--soft)}.ov .stat b{display:block;font-size:17px;color:#fff}
.ov .sl{margin:6px 0}
#sciPanel{position:absolute;inset:10px;z-index:8;overflow:auto;padding:14px 18px 18px;background:rgba(6,12,26,.96)}
#sciX{position:sticky;top:0;float:right}
#sci h3{margin:14px 0 4px;font-size:16px;color:#7cc0ff}#sci p,#sci li{color:var(--soft);font-size:13.5px;line-height:1.5}#sci code{background:rgba(47,140,255,.15);padding:1px 5px;border-radius:4px;color:#dbe9ff}
#sci table{border-collapse:collapse;width:100%;font-size:12.5px;margin:6px 0}#sci td,#sci th{border-bottom:1px solid var(--line2);padding:4px 6px;text-align:left;vertical-align:top}
.ok{color:var(--green)}.bad{color:#ff5a5a}
#bottom{grid-area:bot;display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr;gap:8px;padding:6px 10px 10px;min-height:0}
.pn{position:relative;padding:8px 10px 6px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.pt{font-weight:600;font-size:14px;margin-bottom:3px}
.pn canvas{flex:1;min-height:0;width:100%;display:block}
.tm{position:absolute;right:12px;bottom:8px;font-size:12px;color:#dfe9ff;text-shadow:0 0 4px #000}
@media(max-width:1100px){#tabs button{width:104px;height:72px;font-size:12px}#logo p{display:none}#app{grid-template-columns:300px minmax(0,1fr)}}
@media(max-width:860px){
  html,body{height:auto}
  #app{display:block;height:auto}
  body.embed-mode #app{height:auto}
  #head{padding:6px 10px}#logo svg{width:56px;height:42px}#logo h1{font-size:21px}
  #tabs{width:100%;gap:6px;overflow-x:auto;padding-bottom:2px}#tabs button{flex:1 0 82px;width:auto;height:56px;font-size:11px}#tabs button svg{width:30px;height:24px}
  #stage{height:62vh;height:62dvh;min-height:380px}
  #side{overflow:visible;padding:8px 10px}
  #bottom{grid-template-columns:1fr 1fr;grid-auto-rows:210px;padding:6px 10px 14px}
  #eq{width:min(250px,64%);padding:7px 9px;font-size:11.5px;top:6px;right:6px}.formula{font-size:16px}.formula .par{font-size:34px}.frac{font-size:15px}
  #eq p{font-size:11px;margin:1px 0 1px 6px}#eq h3,#eq h3 small{font-size:12px}
  #hint{display:none}.tag{font-size:11px;padding:3px 6px}
  .ov,#ovDebris{inset:6px;width:auto;max-height:none;top:6px;bottom:6px}
}
@media(max-width:520px){#bottom{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}
@media(max-width:860px){#app{display:flex;flex-direction:column}#head{order:0}#stage{order:1;flex:none}#side{order:2}#bottom{order:3}}