:root { --fg:#e9ecf5; --muted:#8a92a8; --line:rgba(255,255,255,.09); --panel:rgba(10,12,22,.78); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#04050a; color:var(--fg); overflow:hidden;
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
canvas { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
canvas.dragging { cursor:grabbing; } canvas.pointing { cursor:pointer; }
.title { position:fixed; top:max(18px, env(safe-area-inset-top)); left:22px; pointer-events:none; max-width:min(420px, calc(100vw - 44px)); }
.title h1 { margin:0; font-weight:300; letter-spacing:.32em; text-transform:uppercase; font-size:20px; }
.title p { margin:6px 0 0; color:var(--muted); font-size:12.5px; }
.banner { position:fixed; top:14px; right:240px; background:#5a1d12; color:#ffd8c9; padding:6px 10px; border-radius:6px; font-size:12px; letter-spacing:.04em; }
.legend { position:fixed; left:22px; bottom:max(18px, env(safe-area-inset-bottom)); background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; display:grid; gap:7px; font-size:11.5px; color:var(--muted); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lg-row { display:flex; align-items:center; gap:10px; }
.lg-label { width:46px; color:var(--fg); letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; }
.lg-sizes { display:flex; align-items:center; gap:8px; width:96px; }
.lg-sizes i { width:var(--s); height:var(--s); border-radius:50%; background:#f4f1ea; box-shadow:0 0 8px rgba(255,240,220,.6); }
.lg-heat { width:96px; height:8px; border-radius:4px; background:linear-gradient(90deg,#7896ff 0%,#a5beff 20%,#e1e8ff 35%,#fff8eb 45%,#ffe1a0 55%,#ffbe64 65%,#ff8c3c 78%,#ff4b2d 100%); }
.lg-sizes i.lg-gdisc { border-radius:50%; background:radial-gradient(closest-side,#fff4e0 0%,#ffbe64 35%,rgba(120,150,255,.35) 75%,transparent 100%); box-shadow:none; transform:scaleY(.55); }
.lg-ring { width:14px; height:14px; border-radius:50%; border:1px dashed rgba(170,220,255,.8); margin-left:2px; }
.galaxies { position:fixed; top:max(18px, env(safe-area-inset-top)); right:18px; display:flex; flex-direction:column; gap:4px; width:200px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.galaxies button { display:flex; align-items:center; gap:8px; text-align:left; background:none; border:0; color:#cfd4e2; font:inherit; font-size:12px;
  padding:6px 8px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.galaxies button:hover { background:rgba(255,255,255,.06); color:var(--fg); }
.galaxies button.active { background:rgba(255,255,255,.1); color:#fff; }
.galaxies .uni { color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; }
.gdot { width:8px; height:8px; border-radius:50%; flex:none; }
.gc { margin-left:auto; color:var(--muted); font-size:11px; font-variant-numeric: tabular-nums; }
.hint { position:fixed; bottom:max(18px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); color:var(--muted); font-size:11.5px;
  pointer-events:none; transition:opacity .6s; white-space:nowrap; }
.controls { position:fixed; right:18px; bottom:max(18px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:6px; }
.controls button { width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--fg); font-size:16px; cursor:pointer; }
.controls button:hover { border-color:rgba(255,255,255,.25); }
.card { position:fixed; width:min(360px, calc(100vw - 24px)); max-height:min(70vh, 560px); overflow:auto; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow:0 20px 60px rgba(0,0,0,.5); font-size:12.5px; z-index:5; }
.card h2 { margin:0 0 2px; font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; }
.card .full { color:var(--muted); font-size:12px; margin:0 0 4px 18px; }
.card .dot { width:10px; height:10px; border-radius:50%; flex:none; }
.card .cat { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.card .ref { color:#aadcff; font-size:11px; margin-left:6px; }
.card p { margin:8px 0; color:#cfd4e2; }
.card .metric { display:grid; grid-template-columns:52px 1fr; gap:4px 10px; margin:10px 0; }
.card .metric b { font-weight:600; color:var(--fg); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.card .bar { height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:5px; }
.card .bar > span { display:block; height:100%; }
.card .ev { color:var(--muted); font-size:11.5px; margin-top:3px; }
.card dl { margin:8px 0; display:grid; grid-template-columns:auto 1fr; gap:4px 10px; }
.card dt { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding-top:1px; }
.card dd { margin:0; }
.card ul { margin:4px 0 0; padding-left:16px; }
.card a { color:#9fc6ff; text-decoration:none; } .card a:hover { text-decoration:underline; }
.card .close { position:absolute; top:8px; right:10px; background:none; border:0; color:var(--muted); font-size:18px; cursor:pointer; display:none; }
.card.pinned .close { display:block; }
@media (max-width: 640px) {
  .title { left:14px; max-width:calc(100vw - 28px); } .title h1 { font-size:17px; } .title p { font-size:11px; }
  .hint { display:none; }
  .banner { top:auto; bottom:110px; right:12px; }
  .legend { left:12px; padding:8px 10px; }
  .card { left:12px !important; right:12px; top:auto !important; bottom:max(12px, env(safe-area-inset-bottom)); width:auto; max-height:58vh; }
  .controls { display:none; }
  .galaxies { top:auto; bottom:auto; left:0; right:0; top:calc(max(14px, env(safe-area-inset-top)) + 78px); width:auto; flex-direction:row; overflow-x:auto;
    border-radius:0; border-left:0; border-right:0; padding:5px 10px; scrollbar-width:none; background:rgba(8,10,18,.6); }
  .galaxies::-webkit-scrollbar { display:none; }
  .galaxies button { padding:5px 9px; font-size:11.5px; border:1px solid var(--line); border-radius:999px; }
  .galaxies .gc { margin-left:2px; }
  .card ~ .legend { display:none; }
}