:root{--bg:#000;--bg-soft:#0a000cc7;--magenta:#d000ff;--magenta-dim:#a020f0;--purple:#6a00b8;--blue:#3030ff;--cyan:#00d4ff;--text:#f7e9ff;--text-dim:#a98fc0}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;margin:0;padding:0;font-family:JetBrains Mono,IBM Plex Mono,Menlo,Consolas,monospace;font-size:12px;overflow:hidden}#map{background:var(--bg);position:absolute;inset:0}#ui-root{pointer-events:none;z-index:5;position:absolute;inset:0}#ui-root>*{pointer-events:auto}.hidden{display:none!important}.welcome-modal{z-index:100;backdrop-filter:blur(6px);background:radial-gradient(#3c005073 0%,#000000f2 70%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.welcome-card{background:var(--bg-soft);border:1px solid var(--magenta-dim);border-radius:4px;width:min(420px,90vw);padding:28px 32px 24px;box-shadow:0 0 40px #d000ff59,inset 0 0 20px #d000ff0f}.welcome-card h1{letter-spacing:.12em;color:var(--cyan);text-shadow:0 0 12px #00d4ff99;margin:0 0 6px;font-size:22px}.welcome-card p{color:var(--text-dim);margin:0 0 14px;font-size:12px}.welcome-card input{border:1px solid var(--purple);width:100%;color:var(--text);box-sizing:border-box;background:#000000a6;border-radius:2px;outline:none;padding:10px 12px;font-family:inherit;font-size:13px}.welcome-card input:focus{border-color:var(--magenta);box-shadow:0 0 10px #d000ff66}.welcome-row{gap:10px;margin-top:14px;display:flex}.welcome-card button{border:1px solid var(--magenta-dim);color:var(--text);letter-spacing:.08em;cursor:pointer;background:linear-gradient(#a020f02e,#3030ff2e);border-radius:2px;flex:1;padding:9px 14px;font-family:inherit;font-size:12px;transition:all .12s}.welcome-card button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px #00d4ff66}.welcome-card button:disabled{opacity:.5;cursor:wait}.welcome-err{color:#ff5cd8;min-height:14px;margin-top:10px;font-size:11px}.welcome-hint{color:var(--text-dim);opacity:.7;margin-top:8px;font-size:10.5px}.welcome-hint em{color:var(--cyan);cursor:pointer;font-style:normal}.welcome-hint em:hover{text-decoration:underline}.info-panel{background:var(--bg-soft);border:1px solid #d000ff59;border-radius:3px;width:260px;padding:14px 16px;position:absolute;top:16px;left:16px;box-shadow:0 0 20px #d000ff26}.info-panel h2{letter-spacing:.18em;color:var(--cyan);text-shadow:0 0 8px #00d4ff80;margin:0 0 4px;font-size:13px}.info-panel .rule{background:linear-gradient(90deg, var(--magenta), transparent);height:1px;margin:6px 0 10px}.info-panel .stats{color:var(--text-dim);margin-bottom:14px;font-size:11px;line-height:1.55}.info-panel .stats span{color:var(--text)}.info-panel .section-title{letter-spacing:.16em;color:var(--magenta);margin:10px 0 6px;font-size:11px}.btn-row{gap:6px;margin-bottom:10px;display:flex}.btn-row button{border:1px solid var(--purple);color:var(--text);letter-spacing:.04em;cursor:pointer;white-space:nowrap;background:#00000080;border-radius:2px;flex:1;padding:6px;font-family:inherit;font-size:10px;transition:all .12s}.audio-hint{min-height:0;color:var(--text-dim);margin:-4px 0 8px;font-size:10px;line-height:1.35}.audio-hint:empty{display:none}.audio-hint[data-tone=err]{color:#ff5cd8}.btn-row button.active{border-color:var(--cyan);color:var(--cyan);background:#00d4ff14;box-shadow:inset 0 0 8px #00d4ff33}.btn-row button:hover{border-color:var(--magenta)}.bar-row{align-items:center;gap:8px;margin-bottom:4px;font-size:10.5px;display:flex}.bar-row .label{width:36px;color:var(--text-dim)}.bar-row .bar{background:#ffffff12;border-radius:1px;flex:1;height:6px;position:relative;overflow:hidden}.bar-row .bar-fill{background:linear-gradient(90deg, var(--magenta), var(--cyan));transition:right 60ms linear;position:absolute;inset:0 100% 0 0;box-shadow:0 0 6px #00d4ff66}.bar-row .val{text-align:right;width:36px;color:var(--cyan);font-variant-numeric:tabular-nums}.slider-row{align-items:center;gap:8px;margin-bottom:6px;font-size:10.5px;display:flex}.slider-row .label{width:56px;color:var(--text-dim)}.slider-row input[type=range]{accent-color:var(--magenta);flex:1}.slider-row .val{text-align:right;width:44px;color:var(--cyan);font-variant-numeric:tabular-nums}.palette-bar{background:var(--bg-soft);border:1px solid #d000ff59;border-radius:3px;width:320px;padding:8px 10px;position:absolute;bottom:16px;right:16px}.palette-bar .palette-grad{border-radius:2px;height:12px;margin-bottom:4px;position:relative}.palette-bar .palette-marker{border-left:1px solid var(--cyan);border-right:1px solid var(--cyan);height:16px;position:absolute;top:-2px;box-shadow:0 0 6px #00d4ffb3}.palette-bar .palette-labels{color:var(--text-dim);justify-content:space-between;font-size:9.5px;display:flex}