:root{color-scheme:dark;--panel-bg: rgba(14, 24, 33, .78);--panel-border: rgba(159, 196, 210, .2);--accent: #7fd0ff;--text: #eef7fb;--muted: #9fbbc6;--shadow: 0 24px 80px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at top,rgba(70,114,135,.35),transparent 35%),linear-gradient(180deg,#08131f,#0d2230 30%,#07131d);font-family:Georgia,Times New Roman,serif}canvas{display:block}.hud{position:fixed;inset:0;pointer-events:none}.hud-toggle{display:none;position:absolute;top:24px;left:24px;width:54px;height:54px;padding:0;pointer-events:auto;border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);color:var(--text);z-index:10;align-items:center;justify-content:center;flex-direction:column;gap:5px}.hud-toggle span{width:22px;height:2px;border-radius:999px;background:currentColor;transition:transform .18s ease,opacity .18s ease}.hud:not(.panel-collapsed) .hud-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hud:not(.panel-collapsed) .hud-toggle span:nth-child(2){opacity:0}.hud:not(.panel-collapsed) .hud-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.panel,.legend,.status,.controls{position:absolute;pointer-events:auto;color:var(--text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--shadow)}.panel{top:24px;left:24px;width:min(360px,calc(100vw - 48px));padding:18px 18px 16px;border-radius:22px}.panel h1{margin:0 0 8px;font-size:1.5rem;letter-spacing:.03em}.panel p{margin:0 0 16px;color:var(--muted);line-height:1.4;font-size:.94rem}.field{margin-bottom:12px}.field label{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:.84rem;color:var(--muted)}.field input{width:100%}.field input[type=range]{accent-color:var(--accent)}.buttons{display:flex;gap:10px;margin-top:16px}button{border:0;border-radius:999px;padding:11px 16px;font:inherit;cursor:pointer;transition:transform .18s ease}button:hover{transform:translateY(-1px)}button.primary{background:linear-gradient(135deg,#89d8ff,#4c9bd3);color:#04101a}button.secondary{background:#ffffff14;color:var(--text)}.status{top:24px;right:24px;width:min(300px,calc(100vw - 48px));padding:14px 16px;border-radius:18px}.status strong{display:block;margin-bottom:6px;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.status .warning{color:#ffd9a8}.status .danger{color:#ffb2a0}.legend{left:24px;bottom:24px;padding:12px 14px;border-radius:16px;color:var(--muted);font-size:.85rem}.controls{right:24px;bottom:24px;padding:12px 14px;border-radius:16px;color:var(--muted);font-size:.85rem;max-width:min(320px,calc(100vw - 48px))}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#ffffff14;padding:6px 10px;margin-top:8px;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase}.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}@media(max-width:1100px),(pointer:coarse){.hud{overflow:auto;display:grid;align-content:start;padding:76px 12px 12px}.hud-toggle{display:inline-flex;position:fixed;top:12px;left:12px}.panel,.status,.legend,.controls{position:static;width:auto;max-width:none;margin:0 0 12px}.hud.panel-collapsed{overflow:visible;display:block;padding:0}.hud.panel-collapsed .panel,.hud.panel-collapsed .status,.hud.panel-collapsed .legend,.hud.panel-collapsed .controls{display:none}}