:root{--bg:#050a18;--panel:rgba(8,16,36,.92);--line:#1d3a66;--blue:#1e7bff;--blue2:#4fa3ff;--text:#eaf2ff;--soft:#b6c8e4;--muted:#8095b5;--gold:#ffc447;--ok:#43d98a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#02040b;color:var(--text);font:14px/1.4 "Segoe UI",Inter,system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{overflow:hidden}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
#app{position:relative;display:grid;height:100vh;height:100dvh;width:100%;overflow:hidden;
  grid-template-columns:clamp(250px,21vw,332px) minmax(0,1fr);grid-template-rows:clamp(64px,11.5vh,120px) minmax(0,1fr) clamp(150px,24vh,250px);gap:8px;padding:6px 8px 8px;
  background:radial-gradient(1200px 600px at 80% -10%,#0d2150 0,transparent 60%),#02040b}
body.embed-mode #app{height:100vh;height:100dvh}
.glass{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.5),inset 0 0 0 1px rgba(80,150,255,.07)}
/* header */
#head{grid-column:1/3;display:flex;align-items:center;gap:12px;min-width:0;background:linear-gradient(90deg,rgba(10,22,52,.9),rgba(4,8,20,.2) 60%,rgba(20,26,60,.7));border-radius:10px;padding:0 6px}
#logo{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
#logo svg{height:min(100%,92px);width:auto;max-height:90px;flex:none;filter:drop-shadow(0 0 8px rgba(80,160,255,.5))}
.ttl{min-width:0}
h1{margin:0;font:800 clamp(22px,3.4vw,50px)/1.05 "Segoe UI",Inter,system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap}
h1 span{background:linear-gradient(#5fb4ff,#1678ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ttl p{margin:2px 0 0;color:var(--soft);font-size:clamp(10px,.85vw,13px);line-height:1.25;max-width:84ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#tabs{display:flex;gap:8px;flex:none}
#tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:clamp(76px,8.2vw,126px);height:clamp(48px,8.6vh,88px);border:1px solid #2a3f66;background:linear-gradient(#10203c,#0a1428);border-radius:9px;color:#d5e4ff;font-size:clamp(10px,.95vw,14px)}
#tabs button svg{width:clamp(26px,3vw,44px);height:auto}
#tabs button.on{border-color:#2a8bff;box-shadow:0 0 16px rgba(30,123,255,.6),inset 0 0 12px rgba(30,123,255,.35);background:linear-gradient(#123a74,#0b2650)}
#tabs button:hover{border-color:#4fa3ff}
/* side */
#side{grid-row:2/4;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:#2a4a7a transparent}
#side section{padding:10px 12px}
h2{margin:0;font-size:16px;font-weight:600}
.hrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.hrow2{display:flex;gap:6px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #2c4572;background:#0e1b34;color:#e6f0ff;border-radius:7px;padding:5px 10px;min-height:30px}
.btn.sm{font-size:13px}
.btn:hover{border-color:#4fa3ff}
.btn.big{flex:1;min-height:40px;font-size:15px;background:#0f1c33}
.btn.big.on{background:linear-gradient(#2388ff,#1264d8);border-color:#3b97ff;box-shadow:0 0 14px rgba(30,123,255,.5)}
.lab{display:block;color:var(--blue2);margin:6px 0 3px;font-size:14px}
.selwrap{position:relative}
.selwrap i{position:absolute;left:10px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#ffc447;box-shadow:0 0 8px currentColor;pointer-events:none}
select{width:100%;appearance:none;-webkit-appearance:none;background:#0c1730 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23cfe0ff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid #2c4572;border-radius:8px;padding:8px 28px 8px 36px;font-size:15px;min-height:38px}
select option{background:#0c1730}
.sl{display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:5px;row-gap:2px}
.sl label{font-size:14px;color:#e5eeff}
.sl output{font-size:14px;color:#cfe0ff;font-variant-numeric:tabular-nums}
.sl input{grid-column:1/3;width:100%;margin:2px 0}
input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,#2a7cff var(--p,50%),#2a3b5b var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6.5px;border-radius:50%;background:#4aa0ff;border:2px solid #cfe6ff;box-shadow:0 0 8px rgba(40,140,255,.8)}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#2a3b5b}
input[type=range]::-moz-range-progress{height:5px;border-radius:3px;background:#2a7cff}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#4aa0ff;border:2px solid #cfe6ff}
input[type=range]:disabled{opacity:.4}
input:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid #7cc0ff;outline-offset:2px}
.ck{display:flex;align-items:center;gap:10px;margin:6px 0 0;font-size:14.5px;cursor:pointer;position:relative}
.ck input{position:absolute;opacity:0;width:20px;height:20px;margin:0}
.ck i{width:20px;height:20px;border-radius:4px;border:1px solid #3a6bb5;background:#0c1730;flex:none;position:relative}
.ck input:checked+i{background:#1e7bff;border-color:#4aa0ff}
.ck input:checked+i:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.ck input:focus-visible+i{outline:2px solid #7cc0ff;outline-offset:2px}
.pp{display:flex;gap:8px;margin-top:12px}
#modeBox{margin-top:8px}
#modeBox .mb{border:1px solid #27406b;background:rgba(14,30,60,.6);border-radius:8px;padding:7px 9px;font-size:13px;color:var(--soft)}
#modeBox .mb b{color:#fff}
#modeBox .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
#modeBox .row .btn{padding:3px 8px;min-height:28px;font-size:12.5px}
#modeBox select{padding:5px 26px 5px 9px;min-height:30px;font-size:13px}
#presets{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.ps{position:relative;display:flex;align-items:center;gap:0;border:1px solid #243d68;border-radius:8px;overflow:hidden;background:#0b1428;height:44px;padding:0;text-align:left;color:#e8f1ff;font-size:15px}
.ps canvas{width:96px;height:100%;flex:none;display:block}
.ps span{padding:0 12px}
.ps.on{border:1.5px solid #3b97ff;box-shadow:0 0 14px rgba(30,123,255,.55)}
.ps:hover{border-color:#4fa3ff}
/* stage */
#stage{position:relative;min-height:0;border-radius:10px;overflow:hidden;border:1px solid #14284d;background:#02040b}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:grab}
#gl:active{cursor:grabbing}
#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#labels{position:absolute;inset:0;pointer-events:none;z-index:3}
.lbl{position:absolute;left:0;top:0;white-space:nowrap;background:rgba(6,10,22,.88);border:1px solid #8a6a2a;border-radius:6px;padding:4px 9px;font-size:clamp(11px,1.05vw,15px);line-height:1.3;will-change:transform}
.lbl b{display:block;font-size:1.1em}
.lbl.ray{border-color:#b9892e;color:#ffe9b8}
.lbl.sun b{color:#ffc447}.lbl.earth b{color:#6fb7ff}.lbl.earth{border-color:#2f6aa8}.lbl.moon b{color:#e2e2e2}.lbl.moon{border-color:#777}.lbl.sat b{color:#fff}.lbl.sat{border-color:#8aa0c0}
.lbl.tiny{font-size:11px;opacity:.85}
#inset{position:absolute;right:8px;top:8px;width:clamp(190px,25%,380px);z-index:4;padding:6px 8px 8px}
#inset canvas{display:block;width:100%;aspect-ratio:2.05;border-radius:6px}
.pt{font-size:clamp(12px,1.05vw,15px);font-weight:600;margin-bottom:5px}
#hint{position:absolute;left:10px;bottom:8px;z-index:4;font-size:12px;color:#cfe0ff;background:rgba(5,10,24,.8);border:1px solid #27406b;border-radius:6px;padding:3px 8px;pointer-events:none;max-width:70%}
#hint:empty{display:none}
#chip{position:absolute;left:10px;top:8px;z-index:4;font-size:12px;color:#bfe6c9;background:rgba(5,10,24,.8);border:1px solid #23573b;border-radius:6px;padding:3px 8px;pointer-events:none}
#chip.bad{color:#ffb7b0;border-color:#7a2f2a}
#sciPanel{background:#071126;position:absolute;inset:8px 8px auto 8px;max-height:calc(100% - 16px);overflow:auto;z-index:8;padding:12px 14px}
#sciPanel[hidden]{display:none}
#sciX{position:sticky;top:0;float:right}
#sci h3{margin:10px 0 3px;font-size:14px;color:var(--blue2)}
#sci p,#sci li{font-size:13px;color:#d5e3f8;margin:3px 0}
#sci code{background:#0c1a33;border-radius:4px;padding:0 4px;color:#ffd78a}
#sci table{border-collapse:collapse;width:100%;font-size:12.5px;margin:4px 0}
#sci td,#sci th{border-bottom:1px solid #1d3a66;padding:3px 6px;text-align:left}
#sci .ok{color:var(--ok)}#sci .no{color:#ff8a80}
/* bottom */
#bottom{grid-column:2;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;min-height:0}
.pn{display:flex;flex-direction:column;padding:8px 10px;min-width:0;min-height:0;overflow:hidden}
.pn canvas{flex:1;min-height:0;width:100%;display:block}
.legend{display:flex;gap:12px;justify-content:center;font-size:12px;color:var(--soft);padding-top:3px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.cap{font-size:clamp(10px,.85vw,13px);color:#dbe8ff;line-height:1.3;padding-top:4px}
.potrow{display:flex;gap:6px;flex:1;min-height:0}
.potrow canvas{flex:1;min-width:0}
.bar{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--soft)}
.bar i{flex:1;width:11px;border-radius:3px;background:linear-gradient(#ff2a1a,#ffe030 25%,#36e36a 50%,#2fb7ff 75%,#2a2bff)}
.dil{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.dil svg{width:clamp(34px,3.6vw,50px);flex:none}
.dil p{margin:0;font-size:clamp(11px,1vw,14px);color:#dbe8ff}
#dilT{width:100%;border-collapse:collapse;font-size:clamp(11px,.95vw,13.5px);background:rgba(8,18,40,.7);border-radius:6px}
#dilT td{padding:4px 7px;border-bottom:1px solid #1a3157;white-space:nowrap}
#dilT td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:#fff}
/* mobile: stacked */
@media (max-width:860px){
  html,body{overflow:auto;height:auto}
  body{overflow-y:auto}
  #app{display:flex;flex-direction:column;height:auto;min-height:100vh;min-height:100dvh;overflow:visible;gap:8px}
  body.embed-mode #app{height:auto;min-height:100dvh}
  #head{flex-direction:column;align-items:stretch;gap:6px;padding:6px}
  #logo svg{height:44px}
  h1{font-size:22px;white-space:normal}
  .ttl p{display:none}
  #tabs{overflow-x:auto;gap:6px;padding-bottom:2px}
  #tabs button{flex:1 0 82px;height:56px}
  #stage{order:2;height:62vh;height:62dvh;min-height:340px;flex:none}
  #head{order:1}
  #side{order:3;overflow:visible}
  #bottom{order:4;grid-column:auto;grid-template-columns:1fr;gap:8px}
  .pn{height:230px}
  #pnDil{height:auto}
  #inset{width:46%;padding:4px 5px}
  #inset .pt{font-size:10px;margin-bottom:2px}
  .lbl{font-size:10.5px;padding:2px 6px}
  .lbl.tiny{display:none!important}
  #hint{max-width:92%;font-size:11px}
}