:root{
  --bg:#060a14; --panel:rgba(12,18,32,.78); --line:rgba(140,170,255,.16); --txt:#e6ecff; --mut:#8e9bbd;
  --acc:#4cc2ff; --lift:#4be08a; --drag:#ffa646; --warn:#ff5b5b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#c:active{cursor:grabbing}
#top{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:10px;padding:0 14px;pointer-events:none;z-index:5}
#top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{font-size:22px;color:var(--acc)}
.brand b{display:block;font-size:15px;letter-spacing:.2px}
.brand small{color:var(--mut);font-size:11px}
.spacer{flex:1;pointer-events:none!important}
button,select{font:inherit;color:inherit}
button.ghost,.seg button,.chips button{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;transition:.15s}
button:hover{background:rgba(255,255,255,.12)}
.panel{position:fixed;top:56px;bottom:56px;width:272px;overflow-y:auto;background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:4px 14px 12px;z-index:4;scrollbar-width:thin}
#left{left:12px}#right{right:12px;width:310px}
.panel section{padding:10px 0;border-bottom:1px solid var(--line)}
.panel section:last-child{border:0}
h3{margin:2px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--mut);display:flex;align-items:center;gap:8px}
.muted{color:var(--mut);margin:6px 0 0}.tiny{font-size:10.5px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
select{background:#101830;border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.sl{margin:7px 0}
.sl .h{display:flex;justify-content:space-between;font-size:12px}
.sl .h b{font-variant-numeric:tabular-nums;color:var(--acc);font-weight:600}
input[type=range]{width:100%;margin:3px 0 0;accent-color:var(--acc);height:18px}
.seg{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.seg button{flex:1;padding:5px 6px;font-size:12px;white-space:nowrap}
.seg button.on,.chips button.on,.tabs button.on{background:rgba(76,194,255,.22);border-color:var(--acc)}
.toggles label{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer;user-select:none}
.toggles input{accent-color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:5px}.chips button{font-size:12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.stat small{display:block;color:var(--mut);font-size:10.5px}
.stat b{font-size:16px;font-variant-numeric:tabular-nums}
.stat.l b{color:var(--lift)}.stat.d b{color:var(--drag)}
.badge{background:var(--warn);color:#fff;border-radius:5px;padding:1px 7px;font-size:10px;letter-spacing:1px;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}
#polar{width:100%;height:auto;margin-top:8px;border-radius:8px;background:rgba(0,0,0,.25)}
#explain{margin:0;color:#cfd8f5}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.tabs button{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:11.5px;cursor:pointer}
.tabbody h4{margin:0 0 6px;font-size:13px}
.tabbody p{margin:0 0 8px;color:#cfd8f5}
.tabbody code{background:rgba(255,255,255,.08);padding:0 4px;border-radius:4px}
#legend{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:11px;color:var(--mut);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 14px;z-index:3}
#legBar{display:block;width:180px;height:8px;border-radius:4px}
#labels{position:fixed;inset:0;pointer-events:none;z-index:2}
.lbl{position:absolute;transform:translate(-50%,-50%);font-size:11px;font-weight:700;letter-spacing:1px;text-shadow:0 1px 4px #000;white-space:nowrap}
.lbl.lift{color:var(--lift)}.lbl.drag{color:var(--drag)}.lbl:not(.lift):not(.drag){color:#9fc4ff;opacity:.8}
#toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--acc);border-radius:10px;padding:8px 14px;z-index:9}
.only-narrow{display:none}
@media (max-width:900px){
  .only-narrow{display:inline-block}
  .panel{top:56px;bottom:auto;max-height:55vh;left:8px!important;right:8px!important;width:auto!important;display:none}
  .panel.open{display:block}
  #legend{bottom:8px;font-size:10px;padding:5px 10px}#legBar{width:90px}
}