:root{--bg:#050a14;--card:#0a1424;--card2:#0d1a2e;--line:#1b3252;--line2:#2a4a78;--text:#e9f0fb;--muted:#9fb2cc;--blue:#2c7bff;--blue2:#1d5fd6;--orange:#ff8a1f;--ok:#4cd08a;--bad:#ff7b6b;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:13px/1.35 Inter,system-ui,"Segoe UI",Arial,sans-serif;-webkit-text-size-adjust:100%}
body{background:radial-gradient(1200px 700px at 30% -10%,#0b1f3d 0,#050a14 60%)}
.app{display:grid;grid-template-rows:auto minmax(0,1fr) minmax(150px,21vh) auto;gap:8px;height:100vh;height:100dvh;padding:8px 10px;overflow:hidden}
.card{background:linear-gradient(180deg,#0c172a,#08111f);border:1px solid var(--line);border-radius:10px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #6fa8ff;outline-offset:2px}
/* header */
.top{display:flex;gap:10px;align-items:stretch;justify-content:space-between;min-height:0}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 0}
.logo{height:76px;width:auto;border-radius:8px;flex:none;object-fit:contain}
.ttl h1{margin:0;font:700 clamp(22px,2.9vw,40px)/1.05 Inter,system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.ttl h1 span{color:var(--orange)}
.ttl p{margin:3px 0 0;color:#cdd9ea;font-size:clamp(11px,1.05vw,14px);max-width:560px;line-height:1.3}
.tabs{display:flex;gap:8px;flex:0 1 auto;min-width:0}
.tabs button{flex:1 1 0;min-width:60px;width:clamp(70px,9vw,122px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(180deg,#0e1b31,#091322);border:1px solid var(--line);border-radius:10px;padding:6px 4px;font-weight:600;font-size:clamp(11px,1vw,13.5px);color:#dfe9f7}
.tabs button svg{width:clamp(30px,3.2vw,46px);height:auto;fill:none;stroke:#cfe0f7;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.tabs button:hover{border-color:var(--line2)}
.tabs button.on{border-color:#4f93ff;box-shadow:0 0 0 1px #4f93ff,0 0 18px rgba(44,123,255,.45);background:linear-gradient(180deg,#14305a,#0c1d38)}
.tabs button.on svg{stroke:#fff}
/* middle */
.mid{display:grid;grid-template-columns:clamp(230px,20.5vw,310px) minmax(0,1fr);gap:8px;min-height:0}
.ctl{padding:9px 11px 10px;overflow:auto;min-height:0;display:flex;flex-direction:column}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.ch h2{margin:0;font-size:15px;font-weight:600}
.ghost{background:#0f1d33;border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-weight:500;display:inline-flex;align-items:center;gap:6px;min-height:30px}
.ghost:hover{border-color:var(--line2)}.ghost.wide{flex:1}
.sl{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l o" "r r" "lo hi";gap:1px 6px;margin:7px 0 2px}
.sl label{grid-area:l;font-weight:500;font-size:13px}.sl output{grid-area:o;font-size:13px;color:#fff;font-variant-numeric:tabular-nums}
.sl input{grid-area:r}.sl .lo{grid-area:lo;color:var(--muted);font-size:11.5px}.sl .hi{grid-area:hi;color:var(--muted);font-size:11.5px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(90deg,#2c7bff var(--p),#2a3a55 var(--p))}
input[type=range]::-moz-range-track{height:6px;border-radius:4px;background:linear-gradient(90deg,#2c7bff var(--p),#2a3a55 var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:#3b86ff;border:2px solid #cfe2ff;box-shadow:0 0 6px rgba(44,123,255,.7)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#3b86ff;border:2px solid #cfe2ff}
.cks{margin:8px 0 4px;display:grid;gap:5px}
.ck{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;user-select:none}
.ck input{position:absolute;opacity:0;width:1px;height:1px}
.ck i{width:18px;height:18px;border-radius:4px;background:#1c3a6e;border:1px solid #3c70c4;display:grid;place-items:center;flex:none}
.ck input:checked+i{background:#2c7bff;border-color:#6fa8ff}
.ck input:checked+i::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.ck input:focus-visible+i{outline:3px solid #6fa8ff;outline-offset:2px}
.go{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin-top:auto;padding-top:8px}
.go button{min-height:42px;border-radius:8px;font-weight:600;font-size:clamp(12px,1.05vw,14px);white-space:nowrap;padding:0 6px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line2)}
.cta{background:linear-gradient(180deg,#3b86ff,#1f62d8);border-color:#6fa8ff!important}.sec{background:#14243f}
.stagebtns{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;z-index:3}.stagebtns .ghost{background:rgba(8,16,30,.85);min-height:28px;padding:3px 10px;font-size:12px}
/* stage */
.stage{position:relative;min-width:0;min-height:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#9db4cc}
.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}
.leaders line{stroke:#fff;stroke-width:1.3;opacity:.9}.leaders circle{fill:#fff;stroke:rgba(0,0,0,.4);stroke-width:1}
.labels{position:absolute;inset:0;pointer-events:none}
.lbl{position:absolute;left:0;top:0;background:rgba(6,12,24,.86);border:1.5px solid #fff;border-radius:6px;padding:4px 9px 5px;font-size:clamp(10.5px,.92vw,12.5px);line-height:1.28;white-space:nowrap;will-change:transform;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.lbl h4{margin:0;font-size:1.12em;font-weight:700}.lbl p{margin:0;color:#f4f7fc}
.lbl.ash h4,.lbl.cra h4{color:#fff}.lbl.cra h4{color:#ffc74d}.lbl.col{border-color:#ff7a3c}.lbl.col h4{color:#ff6a28}.lbl.lav{border-color:#ff6a40}.lbl.lav h4{color:#ff5a30}
.lbl.cra{border-color:#ffc74d}
.chips{position:absolute;left:8px;bottom:8px;display:flex;gap:5px;flex-wrap:wrap;pointer-events:none;max-width:60%}
.chip{background:rgba(6,12,24,.8);border:1px solid var(--line2);border-radius:7px;padding:2px 7px;font-size:11.5px;color:#cfe0f7}.chip b{color:#fff;font-variant-numeric:tabular-nums}
.xsbox{position:absolute;right:8px;top:8px;width:clamp(150px,21%,320px);background:rgba(6,12,24,.82);border:1px solid var(--line2);border-radius:8px;padding:6px 8px 8px;backdrop-filter:blur(3px)}
.xsbox h3{margin:0 0 4px;font-size:clamp(11px,1vw,13.5px);font-weight:600}.xsbox canvas{display:block;width:100%;aspect-ratio:1/1.12;border-radius:5px}
.hint{position:absolute;left:45%;top:8px;transform:translateX(-50%);background:rgba(6,12,24,.72);border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-size:11px;color:#cfe0f7;pointer-events:none;transition:opacity 1s;white-space:nowrap}
.hint.off{opacity:0}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#0a1424;color:#cfe0f7;font-weight:600;z-index:6;transition:opacity .5s}#loading.done{opacity:0;pointer-events:none}
.overlay{position:absolute;inset:0;background:rgba(5,10,20,.93);z-index:4;display:flex;flex-direction:column;padding:10px 12px;min-height:0}
.overlay[hidden]{display:none}.ovh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.ovh h3{margin:0;font-size:16px}
.ovb{flex:1;min-height:0;display:flex;flex-direction:column}.ovb canvas{flex:1;min-height:0;width:100%;display:block}
.cmpt{width:100%;border-collapse:collapse;font-size:12.5px}.cmpt th,.cmpt td{padding:5px 7px;border-bottom:1px solid var(--line);text-align:right}.cmpt th:first-child,.cmpt td:first-child{text-align:left}.cmpt tr.me td{color:#ffc74d;font-weight:600}.cmpt th{color:var(--muted);font-weight:600}
.bar{display:inline-block;height:8px;border-radius:4px;background:linear-gradient(90deg,#2c7bff,#ff8a1f);vertical-align:middle;margin-left:6px}
/* panels */
.row4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.35fr);gap:8px;min-height:0}
.pnl{padding:7px 9px 6px;display:flex;flex-direction:column;min-width:0;min-height:0}
.pnl h3,.types h3,.cmp h3{margin:0 0 4px;font-size:13.5px;font-weight:600}
.pb{flex:1;min-height:0;display:flex;gap:6px;position:relative}
.pb canvas{flex:1;min-width:0;min-height:0;width:100%;height:100%;display:block;border-radius:6px}
.leg{width:64px;flex:none;display:grid;grid-template-columns:12px 1fr;grid-template-rows:auto 1fr;font-size:10.5px;gap:3px 5px}.leg span{grid-column:1/3;color:#dfe9f7;white-space:nowrap}
.leg i{border-radius:3px;min-height:60px}.gH{background:linear-gradient(180deg,#ff8cf0,#ffe14a 33%,#ff4a1a 66%,#1a0504)}.gT{background:linear-gradient(180deg,#e51b0f,#ffd51a 33%,#18d3a0 55%,#1b6cff 80%,#0a2cd0)}
.tk{display:flex;flex-direction:column;justify-content:space-between;color:#dfe9f7}.tk b{font-weight:400}
.row2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:8px}
.types,.cmp{padding:7px 9px 8px}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cards button{display:flex;align-items:center;gap:6px;background:#0c1830;border:1px solid var(--line);border-radius:8px;padding:4px;text-align:left;min-width:0}
.cards button img{width:34%;aspect-ratio:16/10;object-fit:cover;border-radius:5px;flex:none}
.cards button span{display:flex;flex-direction:column;font-size:clamp(10px,.88vw,12px);line-height:1.2;min-width:0}.cards button em{font-style:normal;color:var(--muted)}
.cards button.on{border-color:#4f93ff;box-shadow:0 0 0 1px #4f93ff,0 0 12px rgba(44,123,255,.45)}
.cards5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cards5 button{background:#0c1830;border:1px solid var(--line);border-radius:8px;padding:0 0 3px;display:flex;flex-direction:column;align-items:center;font-size:clamp(10px,.88vw,12px);line-height:1.15;overflow:hidden}
.cards5 button img{width:100%;aspect-ratio:16/8;object-fit:cover}.cards5 button em{font-style:normal;color:var(--muted);font-size:.92em}
.cards5 button:hover,.cards button:hover{border-color:var(--line2)}
/* science drawer */
.sci{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);z-index:20;background:#0a1424;border-left:1px solid var(--line2);padding:12px 14px 40px;overflow:auto;box-shadow:-10px 0 40px rgba(0,0,0,.6)}
.sci[hidden]{display:none}.sh{display:flex;justify-content:space-between;align-items:center}.sh h2{margin:0;font-size:18px}
.sci details{border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin:9px 0;background:#0c182b}.sci summary{cursor:pointer;font-weight:700}
.sci p,.sci li{color:#d4e0f1;font-size:13px}.sci code{background:#15233b;padding:1px 5px;border-radius:4px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:12px;white-space:normal}
.checks{font:12px/1.45 "JetBrains Mono",ui-monospace,Consolas,monospace}.checks .p{color:var(--ok)}.checks .f{color:var(--bad)}.disc{color:var(--muted);font-size:12px}
.leg{flex:none}
@media (min-width:821px) and (max-height:900px){
 .ttl p{display:none}.logo{height:52px}.ttl h1{font-size:clamp(20px,2.4vw,34px)}.app{gap:6px;padding:6px 8px;grid-template-rows:auto minmax(0,1fr) minmax(128px,19vh) auto}
 .sl .lo,.sl .hi{display:none}.sl{margin:5px 0 0}.cks{gap:3px;margin:6px 0 2px}.ck{font-size:12.5px}.ck i{width:16px;height:16px}
 .go{padding-top:6px}.go button{min-height:36px}.ctl{padding:7px 10px 8px}.types,.cmp{padding:5px 8px 6px}.cards button img{width:30%}
 .tabs button{padding:3px}.tabs button svg{width:clamp(26px,2.6vw,38px)}
}
@media (max-width:1100px){.tabs button span{font-size:10.5px}.ttl p{display:none}}
@media (max-width:820px){
 html,body{height:auto}
 .app{display:flex;flex-direction:column;height:auto;min-height:100dvh;overflow:visible;padding:6px}
 .top{flex-direction:column}.brand{flex:none}.logo{height:52px}.ttl h1{white-space:normal;font-size:22px}
 .tabs{overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}.tabs button{flex:none;width:92px}
 .mid{display:flex;flex-direction:column}
 .stage{order:1;height:62dvh;min-height:360px;flex:none}.ctl{order:2;overflow:visible}
 .xsbox{width:34%;min-width:112px;top:6px;right:6px}.xsbox canvas{aspect-ratio:1/1}
 .chips{max-width:100%;bottom:44px}.hint{display:none}
 .row4{grid-template-columns:minmax(0,1fr);gap:8px}.pnl{height:210px}
 .row2{grid-template-columns:minmax(0,1fr)}.types,.cmp{min-width:0}.cards{display:flex;overflow-x:auto;gap:6px;padding-bottom:3px}.cards button{flex:none;width:176px}
 .cards5{display:flex;overflow-x:auto}.cards5 button{flex:none;width:112px}
 .lbl{font-size:10px;padding:3px 6px}
}
body.embed-mode,body.embed-mode html{height:100%}
@media (max-width:820px){body.embed-mode .stage{height:56dvh}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}