:root { --black-hole-scale:.5; --galaxy-plane:-15deg; color-scheme:dark; --bg:#080d13; --text:#e6eee9; --muted:#8c9b9d; --green:#a3d995; --line:#b6d8ce20; --color-brand-wordmark:#e6eee9; --color-brand-seed:#74be5f; }
  * { box-sizing:border-box; }
  body { margin:0; overflow:hidden; background:var(--bg); color:var(--text); font:13px/1.5 system-ui,sans-serif; }
  button { font:inherit; color:inherit; cursor:pointer; }
  button:focus-visible, input:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
  button:disabled { opacity:.5; cursor:default; }
  #galaxy { position:fixed; inset:0; display:block; width:100%; height:100%; image-rendering:pixelated; touch-action:manipulation; }
  .chrome { position:relative; z-index:1; pointer-events:none; height:100svh; min-height:600px; }
  .chrome button, .chrome input, .chrome label { pointer-events:auto; }
  header { position:absolute; top:28px; left:40px; right:40px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .brand { display:flex; align-items:center; gap:19px; }
  .brand .wordmark { width:86px; height:30px; display:block; }
  .brand .divider { height:20px; border-left:1px solid var(--line); }
  .mono { font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:1.5px; text-transform:uppercase; }
  .brand-label { color:#c6d5d0; }
  .controls { display:flex; align-items:center; gap:10px; }
  .switch { display:flex; padding:3px; border:1px solid var(--line); border-radius:7px; background:#0d161cdd; }
  .switch button { border:0; background:transparent; border-radius:4px; padding:6px 11px; color:var(--muted); font-size:11px; }
  .switch button[aria-pressed="true"] { color:var(--text); background:#b3d9bc15; }
  .button { display:inline-flex; gap:8px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:6px; background:#0d161ce8; padding:9px 13px; color:#c5d6cc; font-size:11px; }
  .button:hover { border-color:#a3d99566; background:#14251e; }
  .button.primary { border-color:#9bcd8a55; color:#c6e6bd; background:#15251bf0; }
  .button svg { height:12px; width:12px; fill:none; stroke:currentColor; stroke-width:1.5; }
  .intro { position:absolute; top:112px; left:40px; }
  .eyebrow { color:#83ad85; }
  h1 { margin:12px 0 8px; font-size:clamp(28px,3.5vw,46px); font-weight:450; letter-spacing:-1.8px; line-height:1.15; }
  .intro p { color:var(--muted); font-size:12px; margin:0; }
  .coordinates { position:absolute; top:126px; right:40px; text-align:right; color:#617575; line-height:1.9; }
  .coordinates strong { color:#afbeb5; font-weight:400; }
  #core { position:absolute; left:50%; top:53%; transform:translate(-50%,-50%) rotate(var(--galaxy-plane)) scale(var(--black-hole-scale)); width:96px; display:grid; place-items:center; }
  #core .wordmark { width:96px; height:33px; filter:drop-shadow(0 0 7px #96d28330); }
  .core-caption { position:absolute; top:68px; white-space:nowrap; font-size:8px; letter-spacing:2px; color:#a0b5a1; }
  .arrival { position:absolute; right:40px; top:44%; width:185px; border-left:1px solid #a3d99555; padding:0 0 0 14px; color:var(--muted); opacity:0; transition:opacity .5s; }
  .arrival.visible { opacity:1; }
  .arrival strong { display:block; color:#d4e7c9; font-size:12px; font-weight:500; margin:5px 0; }
  .arrival .mono { color:#759074; font-size:8px; }
  .bottom { position:absolute; bottom:27px; left:40px; right:40px; }
  .summary { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
  .total { display:flex; gap:13px; align-items:baseline; }
  .total strong { font:32px/1 ui-monospace,monospace; color:#e4eee5; font-weight:400; letter-spacing:-1px; }
  .total span { color:var(--muted); font-size:11px; }
  .feed { display:flex; align-items:center; gap:14px; }
  .feed-label { display:flex; align-items:center; gap:8px; color:#8fba90; font-size:9px; letter-spacing:1px; white-space:nowrap; }
  .dot { width:5px; height:5px; background:var(--green); box-shadow:0 0 8px #a3d99570; }
  #auto-label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; cursor:pointer; }
  input[type="checkbox"] { accent-color:#96c98a; width:12px; height:12px; }
  .legend { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#0b121bd9; backdrop-filter:blur(10px); }
  .star-class { position:relative; text-align:left; padding:15px 17px 14px; min-width:0; border:0; border-right:1px solid var(--line); background:transparent; transition:background .15s; }
  .star-class:last-child { border-right:0; }
  .star-class:hover,.star-class[aria-pressed="true"] { background:#9bb8aa0d; }
  .star-class[aria-pressed="true"]:after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); }
  .class-title { display:flex; gap:9px; align-items:center; margin-bottom:8px; color:#b5c2c6; font-size:10px; }
  .class-title canvas { height:16px; width:16px; image-rendering:pixelated; }
  .class-number { font:24px/1 ui-monospace,monospace; color:#d8e4e5; }
  .class-id { color:#657b7f; font:8px ui-monospace,monospace; margin-left:9px; }
  .private { display:none; margin-top:11px; padding-top:9px; border-top:1px dashed #a3d99540; color:#a5c59c; font:9px ui-monospace,monospace; }
  .private strong { font-size:12px; font-weight:400; margin-right:5px; }
  body[data-view="superuser"] .private { display:block; }
  .footnote { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:14px; color:#687f82; font-size:9px; }
  .footnote .link-button { border:0; padding:0; background:transparent; color:#9ab2b1; font-size:9px; text-decoration:underline; text-underline-offset:3px; }
  #tooltip { position:fixed; z-index:4; display:none; pointer-events:none; padding:8px 11px; border:1px solid var(--line); border-radius:5px; background:#0c151eee; color:#c9ddce; font:10px/1.7 ui-monospace,monospace; }
  #tooltip span { display:block; color:#8ca1a8; font-size:9px; }
  dialog { max-width:560px; width:calc(100% - 36px); max-height:85svh; overflow:auto; padding:28px; border:1px solid var(--line); border-radius:10px; background:#0e171f; color:var(--text); }
  dialog::backdrop { background:#03070bc9; backdrop-filter:blur(6px); }
  dialog h2 { font-size:20px; font-weight:500; margin:0 0 16px; }
  dialog p { font-size:12px; line-height:1.8; color:#a7b6ba; }
  dialog pre { padding:16px; overflow:auto; background:#080e15; border-radius:5px; color:#9ccbba; font:11px/1.7 ui-monospace,monospace; }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  @media(min-width:1600px) { .intro { top:135px; } .bottom { bottom:36px; } }
  @media(max-width:800px) { header { top:20px; left:22px; right:22px; gap:10px; flex-wrap:wrap; } .brand { gap:12px; } .brand-label { font-size:9px; } .intro { top:112px; left:22px; } .coordinates { display:none; } .bottom { left:22px; right:22px; bottom:20px; } .star-class { padding:11px; } .arrival { right:22px; width:130px; top:37%; } .class-title { font-size:9px; gap:5px; } .class-number { font-size:21px; } .class-id { display:none; } .footnote { font-size:8px; } .feed-label { display:none; } }
  @media(max-width:560px) { .chrome { min-height:600px; } header { left:18px; right:18px; } .brand .wordmark { width:70px; } .brand-label { font-size:8px; letter-spacing:1px; } .controls { gap:6px; } .switch button { padding:5px 7px; font-size:9px; } #pause { padding:8px; } #pause span { display:none; } .intro { left:18px; top:97px; } h1 { font-size:31px; letter-spacing:-1px; } .intro p { font-size:10px; } .eyebrow { font-size:8px; } .bottom { left:18px; right:18px; bottom:17px; } .legend { grid-template-columns:repeat(3,minmax(0,1fr)); } .star-class { padding:9px 12px; } .star-class:nth-child(3) { border-right:0; } .star-class:nth-child(-n+3) { border-bottom:1px solid var(--line); } .class-title { margin-bottom:5px; } .class-number { font-size:20px; } .private { margin-top:6px; padding-top:5px; font-size:8px; } .private strong { font-size:10px; } .total { display:block; } .total strong { font-size:27px; } .total span { display:block; margin-top:6px; font-size:9px; } .summary { margin-bottom:11px; align-items:center; gap:8px; } .feed { gap:7px; } .button.primary { font-size:10px; padding:8px 10px; } #auto-label { font-size:9px; } .footnote { align-items:start; gap:10px; line-height:1.7; } .footnote > span { max-width:225px; } #core { top:48%; width:78px; } #core .wordmark { width:78px; } .core-caption { top:58px; font-size:7px; } .arrival { top:29%; width:auto; max-width:145px; font-size:9px; } .arrival strong { font-size:10px; } }
  @media(max-height:650px) { body { overflow:auto; } #galaxy { min-height:650px; position:absolute; } .chrome { height:650px; } .intro { top:83px; } h1 { font-size:28px; } }
  @media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
  .summary .feed-label { display:flex; }
  .legend[hidden], #privacy-note[hidden], #density-scale[hidden] { display:none; }
  #density-scale { color:var(--green); }
  .footnote #about { margin-left:auto; }
  @media(max-width:800px) { .coordinates { display:block; top:122px; right:22px; font-size:8px; letter-spacing:1px; } }
  @media(max-width:560px) { .coordinates { top:184px; right:18px; line-height:1.8; } .summary .feed-label { display:none; } .feed .button { font-size:10px; padding:8px; } }