:root{--panel-bg:#fffffff0;--panel-fg:#1f2430;--accent:#2f6db5;--muted:#5b6272;font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,Yu Gothic UI,sans-serif}html,body,#root{background:#1a2340;width:100%;height:100%;margin:0;overflow:hidden}.viewport{position:fixed;inset:0}.hud{pointer-events:none;color:var(--panel-fg);position:fixed;inset:0}.hud>*{pointer-events:auto}.topbar{background:var(--panel-bg);white-space:nowrap;border-radius:12px;align-items:center;gap:16px;padding:8px 14px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 2px 10px #0000002e}.clock{font-variant-numeric:tabular-nums;align-items:baseline;gap:8px;display:flex}.clock .day{color:var(--muted);font-size:13px}.clock .time{font-size:20px;font-weight:700}.speeds{gap:4px;display:flex}.speeds button{cursor:pointer;background:#fff;border:1px solid #c9ced8;border-radius:8px;min-width:40px;padding:5px 8px;font-size:14px}.speeds button.active{background:var(--accent);border-color:var(--accent);color:#fff}.population{color:var(--muted);font-size:13px}.panel{box-sizing:border-box;background:var(--panel-bg);border-radius:12px;width:min(300px,100vw - 24px);padding:14px 16px;position:absolute;top:12px;right:12px;box-shadow:0 2px 12px #00000038}.panel h2{margin:0 28px 10px 0;font-size:18px}.panel dl{grid-template-columns:max-content 1fr;gap:6px 12px;margin:0;font-size:14px;display:grid}.panel dt{color:var(--muted)}.panel dd{overflow-wrap:anywhere;margin:0}.panel .close{cursor:pointer;color:var(--muted);background:0 0;border:none;font-size:22px;line-height:1;position:absolute;top:8px;right:10px}.panel .follow{align-items:center;gap:6px;margin-top:12px;font-size:14px;display:flex}.panel .note{color:var(--muted);margin:10px 0 0;font-size:12px}.help{color:#fff;white-space:nowrap;background:#0000008c;border-radius:8px;padding:6px 12px;font-size:12px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.legend{background:var(--panel-bg);border-radius:10px;grid-template-columns:repeat(2,max-content);gap:4px 12px;margin:0;padding:8px 10px;font-size:12px;list-style:none;display:grid;position:absolute;bottom:12px;left:12px}.legend .swatch{vertical-align:middle;border-radius:2px;outline:1px solid #00000026;width:10px;height:10px;margin-right:6px;display:inline-block}@media (max-width:720px){.help,.legend{display:none}}