:root{--ink:#1d2a33;--paper:#ffffff;--floor:#6fa8c0;--safety:#e8b64c;--line:#d7dee3}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#dfe6ea}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block}.card{position:absolute;top:18px;left:18px;z-index:10;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:0 8px 28px #1d2a3324;max-width:340px}.card h1{font-size:17px;color:var(--ink);letter-spacing:.2px;display:flex;align-items:center;gap:8px}.card h1 .dot{width:10px;height:10px;border-radius:3px;background:var(--floor);display:inline-block;box-shadow:0 0 0 3px #6fa8c040}.card p{font-size:12px;color:#5a6a74;margin-top:5px;line-height:1.45}.card .hint{margin-top:8px;font-size:11px;color:#8794a0}.card .hint b{color:#5a6a74;font-weight:600}#bar{position:absolute;left:50%;bottom:18px;transform:translate(-50%);z-index:10;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:96vw;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;padding:9px 12px;box-shadow:0 8px 28px #1d2a3324}#bar button{border:1px solid var(--line);background:#fff;color:var(--ink);font:600 12px/1 Segoe UI,system-ui,sans-serif;padding:9px 13px;border-radius:10px;cursor:pointer;transition:all .15s;white-space:nowrap}#bar button:hover{border-color:var(--floor);color:#2b6f8c;transform:translateY(-1px)}#bar button.active{background:var(--floor);border-color:var(--floor);color:#fff}#bar .sep{width:1px;background:var(--line);margin:2px 3px}#bar button.tgl.on{background:#1d2a33;border-color:#1d2a33;color:#ffd97a}#bar button.quality{display:inline-flex;align-items:center;gap:6px}#bar .qbadge{font-size:10px;padding:3px 6px;border-radius:6px;background:#e7f0f4;color:#2b6f8c}#zoneName{position:absolute;left:50%;bottom:78px;transform:translate(-50%);z-index:9;background:#1d2a33d9;color:#fff;font:600 13px/1 Segoe UI,sans-serif;padding:8px 16px;border-radius:99px;opacity:0;transition:opacity .4s;pointer-events:none;letter-spacing:.3px}#zoneName.show{opacity:1}@media (max-width:640px){.card{max-width:70vw;padding:11px 14px}.card p{display:none}#bar{gap:5px;padding:7px 8px}#bar button{padding:8px 9px;font-size:11px}}