:root{--accent:#39e6ff;--accent-soft:#7bf0ff;--amber:#ffb84d;--bg:#02060b;--panel:#06121a9e;--border:#39e6ff47;--border-strong:#39e6ff99;--text:#d6f6ff;--muted:#5f8ba0;--mono:"SF Mono", "Fira Code", ui-monospace, monospace;--sans:"Syne", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);width:100%;height:100%;color:var(--text);font-family:var(--mono);margin:0;overflow:hidden}.app{width:100%;height:100%;position:relative}canvas{display:block}.scanlines{pointer-events:none;z-index:5;mix-blend-mode:screen;background:repeating-linear-gradient(#39e6ff09 0 1px,#0000 1px 3px);position:absolute;inset:0}.scanlines:after{content:"";background:radial-gradient(#0000 55%,#02060b8c 100%);position:absolute;inset:0}.hud{pointer-events:none;z-index:10;grid-template-rows:auto 1fr auto;padding:22px;display:grid;position:absolute;inset:0}.hud>*{pointer-events:auto}.hud-head{justify-content:space-between;align-items:center;display:flex}.brand{font-family:var(--sans);letter-spacing:.16em;color:var(--accent-soft);text-shadow:0 0 12px #39e6ff80;align-items:center;gap:10px;font-size:14px;font-weight:800;display:flex}.brand-mark{border:2px solid var(--accent);border-radius:3px;width:16px;height:16px;position:relative;box-shadow:0 0 10px #39e6ff99,inset 0 0 6px #39e6ff80}.brand-mark:after{content:"";border:1px solid var(--accent);opacity:.6;border-radius:1px;position:absolute;inset:3px}.hud-meta{color:var(--accent);letter-spacing:.14em;text-shadow:0 0 8px #39e6ff80;font-size:11px}.spot-list,.spot-card,.hud-foot{background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);box-shadow:0 0 24px #39e6ff14,inset 0 0 20px #39e6ff0a}.spot-list{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);flex-direction:column;align-self:start;gap:2px;width:258px;margin-top:18px;padding:8px;display:flex}.spot-row{text-align:left;color:var(--text);cursor:pointer;background:0 0;border:1px solid #0000;border-left-width:2px;grid-template-columns:auto 1fr;grid-template-areas:"idx name""idx region";column-gap:10px;padding:8px 10px;transition:background .15s,border-color .15s;display:grid}.spot-row:hover{background:#39e6ff12}.spot-row.active{border-left-color:var(--amber);background:#39e6ff21}.spot-idx{color:var(--accent);grid-area:idx;align-self:center;font-size:12px}.spot-row.active .spot-idx{color:var(--amber)}.spot-name{font-family:var(--sans);letter-spacing:.02em;grid-area:name;font-size:14px;font-weight:600}.spot-region{color:var(--muted);grid-area:region;font-size:11px}.spot-card{clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));width:300px;padding:18px 20px;animation:.28s cardIn;position:absolute;top:74px;right:22px}@keyframes cardIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card-idx{color:var(--amber);letter-spacing:.16em;text-shadow:0 0 8px #ffb84d80;font-size:11px}.spot-card h2{font-family:var(--sans);letter-spacing:.02em;text-shadow:0 0 14px #39e6ff66;margin:6px 0 2px;font-size:26px}.card-region{color:var(--muted);margin:0 0 14px;font-size:13px}.spot-card dl{flex-direction:column;gap:8px;margin:0 0 16px;display:flex}.spot-card dl>div{border-bottom:1px solid #39e6ff24;justify-content:space-between;padding-bottom:6px;display:flex}.spot-card dt{color:var(--muted);letter-spacing:.08em;font-size:11px}.spot-card dd{color:var(--accent-soft);margin:0;font-size:13px}.play-btn{background:linear-gradient(180deg, var(--accent), #17b8d6);color:#02181f;width:100%;font-family:var(--mono);letter-spacing:.06em;cursor:pointer;border:none;border-radius:2px;padding:11px;font-size:13px;font-weight:700;box-shadow:0 0 18px #39e6ff66}.play-btn:hover{filter:brightness(1.1)}.close-btn{width:100%;color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:2px;margin-top:8px;padding:9px;font-size:12px}.close-btn:hover{color:var(--text);border-color:var(--border-strong)}.hud-foot{color:var(--accent);letter-spacing:.12em;border-radius:2px;place-self:end center;padding:7px 18px;font-size:11px}.marker-label{white-space:nowrap;color:var(--amber);letter-spacing:.06em;text-shadow:0 0 8px #ffb84d99;background:#02080eb8;border:1px solid #ffb84d80;border-radius:2px;align-items:center;gap:6px;padding:2px 7px;font-size:11px;display:flex;transform:translateY(-26px);box-shadow:0 0 14px #ffb84d40}.marker-idx{color:var(--amber)}.geo-readout{letter-spacing:.14em;color:var(--muted);background:var(--panel);border:1px solid var(--border);clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));border-radius:2px;align-items:center;gap:12px;padding:8px 14px;font-size:12px;display:flex;position:absolute;bottom:22px;left:22px}.geo-readout .geo-dot{background:var(--muted);border-radius:50%;width:7px;height:7px;box-shadow:0 0 #39e6ff00}.geo-readout.live{color:var(--accent)}.geo-readout.live .geo-dot{background:var(--accent);box-shadow:0 0 10px #39e6ffcc}.geo-readout .geo-val{color:var(--accent-soft);text-align:right;font-variant-numeric:tabular-nums;min-width:82px}.geo-readout:not(.live) .geo-val{color:var(--muted)}.home-label{font-family:var(--mono);white-space:nowrap;color:var(--amber);letter-spacing:.12em;text-shadow:0 0 8px #ffb84d99;background:#02080eb8;border:1px solid #ffb84d80;border-radius:2px;padding:2px 7px;font-size:10px;transform:translateY(26px);box-shadow:0 0 14px #ffb84d33}.veil{z-index:20;pointer-events:none;background:var(--bg);opacity:0;transition:opacity .34s;position:absolute;inset:0}.veil.show{opacity:1}.terrain-back{background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);color:var(--accent-soft);font-family:var(--mono);letter-spacing:.08em;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));border-radius:2px;padding:10px 16px;font-size:12px;position:absolute;top:74px;left:22px;box-shadow:0 0 24px #39e6ff14,inset 0 0 20px #39e6ff0a}.terrain-back:hover{color:var(--text);border-color:var(--border-strong)}.clip-stage{z-index:25;opacity:0;pointer-events:none;background:radial-gradient(#02060b8c,#02060be6);flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:opacity .7s;display:flex;position:absolute;inset:0}.clip-stage.show{opacity:1;pointer-events:auto}.clip-frame{aspect-ratio:9/16;border:1px solid var(--border-strong);background:#000;max-width:calc(100vw - 40px);height:min(78vh,138.667vw);transition:transform .7s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;transform:scale(.965);box-shadow:0 0 60px #39e6ff29,inset 0 0 40px #39e6ff0d}.clip-stage.show .clip-frame{transform:scale(1)}.clip-video{object-fit:cover;width:100%;height:100%;display:block}.clip-corner{border:2px solid var(--accent);opacity:.9;pointer-events:none;width:22px;height:22px;position:absolute}.clip-corner.tl{border-bottom:none;border-right:none;top:8px;left:8px}.clip-corner.tr{border-bottom:none;border-left:none;top:8px;right:8px}.clip-corner.bl{border-top:none;border-right:none;bottom:8px;left:8px}.clip-corner.br{border-top:none;border-left:none;bottom:8px;right:8px}.clip-head,.clip-foot{font-family:var(--mono);letter-spacing:.14em;color:var(--accent-soft);text-shadow:0 1px 6px #000c;pointer-events:none;justify-content:space-between;align-items:center;padding:12px 16px;font-size:11px;display:flex;position:absolute;left:0;right:0}.clip-head{background:linear-gradient(#02060bb3,#0000);top:0}.clip-foot{color:var(--muted);background:linear-gradient(#0000,#02060bb3);bottom:0}.clip-scan{color:var(--amber)}.rec-dot{background:var(--amber);width:8px;height:8px;box-shadow:0 0 10px var(--amber);border-radius:50%;margin-right:7px;animation:1.2s step-end infinite rec-blink;display:inline-block}@keyframes rec-blink{0%,60%{opacity:1}61%,to{opacity:.25}}.clip-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.clip-btn{background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);color:var(--accent-soft);font-family:var(--mono);letter-spacing:.06em;cursor:pointer;border-radius:2px;padding:10px 16px;font-size:12px;transition:color .2s,border-color .2s,filter .2s}.clip-btn:hover{color:var(--text);border-color:var(--border-strong)}.clip-btn.primary{background:linear-gradient(180deg, var(--accent), #17b8d6);color:#02181f;border:none;font-weight:700}.clip-btn.primary:hover{filter:brightness(1.1)}.clip-cue{background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border-strong);color:var(--accent-soft);font-family:var(--mono);letter-spacing:.08em;cursor:pointer;border-radius:2px;padding:10px 16px;font-size:12px;animation:2s ease-in-out infinite cue-pulse;position:absolute;bottom:84px;left:50%;transform:translate(-50%);box-shadow:0 0 24px #39e6ff1f}.clip-cue:hover{color:var(--text)}@keyframes cue-pulse{0%,to{opacity:.75}50%{opacity:1}}.hud.dimmed{opacity:.12;pointer-events:none;transition:opacity .5s}@media (width<=640px){.spot-list{width:190px}.spot-card{width:min(300px,100vw - 44px)}.clip-frame{width:calc(100vw - 32px);height:auto;max-height:74vh}}.spot-name{-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;display:-webkit-box;overflow:hidden}.spot-region{white-space:nowrap;text-overflow:ellipsis;max-width:210px;overflow:hidden}.spot-list{max-height:min(58vh,520px);overflow-y:auto}.spot-empty{color:var(--muted);padding:10px;font-size:12px}.card-summary{font-family:var(--sans);color:var(--text);opacity:.92;margin:0 0 14px;font-size:13.5px;line-height:1.5}.score-grid{flex-direction:column;gap:9px;margin:0 0 15px;display:flex}.score-top{justify-content:space-between;margin-bottom:4px;font-size:11px;display:flex}.score-label{color:var(--muted);letter-spacing:.06em}.score-num{color:var(--accent-soft);font-variant-numeric:tabular-nums}.score-bar{background:#39e6ff1f;border-radius:3px;height:5px;overflow:hidden}.score-bar>span{border-radius:3px;height:100%;transition:width .3s;display:block}a.play-btn{text-align:center;box-sizing:border-box;text-decoration:none;display:block}.dose-panel{background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));border-radius:2px;width:210px;padding:12px 14px;position:absolute;bottom:66px;left:22px;box-shadow:0 0 24px #39e6ff14,inset 0 0 20px #39e6ff0a}.dose-head{letter-spacing:.16em;color:var(--accent);text-shadow:0 0 8px #39e6ff80;justify-content:space-between;margin-bottom:8px;font-size:11px;display:flex}.dose-val{color:var(--amber);font-variant-numeric:tabular-nums}.dose-panel input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.sev-legend{color:var(--muted);letter-spacing:.04em;justify-content:space-between;margin-top:10px;font-size:10px;display:flex}.sev-legend span{align-items:center;gap:5px;display:flex}.sev-legend i{border-radius:50%;width:8px;height:8px;display:inline-block}.boot{z-index:15;font-family:var(--mono);letter-spacing:.16em;color:var(--accent-soft);text-shadow:0 0 10px #39e6ff80;flex-direction:column;align-items:center;gap:8px;font-size:13px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.boot.error{color:var(--amber);text-shadow:0 0 10px #ffb84d80}.boot-sub,.boot-dot~.boot-sub{letter-spacing:.04em;color:var(--muted);text-align:center;max-width:60vw;font-size:11px}.boot-dot{background:var(--accent);width:9px;height:9px;box-shadow:0 0 12px var(--accent);border-radius:50%;animation:1.1s step-end infinite rec-blink}