:root{--bg:#0d1117;--fg:#e6edf3;--muted:#9aa4ad;--accent:#2f81f7;--surface:#111823;--border:#1f2732}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe\ UI,Roboto,Helvetica,Arial,sans-serif}.appbar{position:fixed;inset:0 0 auto 0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:max(.5rem,env(safe-area-inset-top)) .75rem .5rem .75rem;background:rgba(13,17,23,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);z-index:10}.brand{display:flex;align-items:center;gap:.5rem;font-weight:700}.brand svg{width:22px;height:22px}.actions{display:flex;align-items:center;gap:.25rem}.icon-btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--fg);width:40px;height:40px;border-radius:10px;display:grid;place-items:center}.icon-btn:active{background:#161b22;border-color:#2a333f}.menu{position:relative}.menu-panel{position:absolute;right:0;top:48px;min-width:160px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.25rem;display:none;box-shadow:0 8px 24px rgba(0,0,0,.3)}.menu.open .menu-panel{display:block}.menu-item{width:100%;text-align:left;padding:.6rem .75rem;color:var(--fg);background:transparent;border:0;border-radius:8px}.menu-item:hover{background:#0b1320}main{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding: calc(56px + 1rem) 1rem 1rem}.card{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1rem}.canvas-wrap{width:min(86vw,340px);aspect-ratio: 1 / 1;display:grid;place-items:center;margin:0 auto}canvas{width:100%!important;height:auto!important;display:block}.readout{text-align:center;margin-top:.5rem}.speed{font-size:clamp(1.8rem,7vw,3rem);font-weight:800;letter-spacing:.5px}.unit{font-size:.95rem;color:var(--muted)}.chips{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}.chip{padding:.35rem .6rem;border-radius:999px;background:#0b1320;border:1px solid var(--border);color:var(--muted);font-size:.85rem}.controls{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem;flex-wrap:wrap}button{appearance:none;border:1px solid #2a333f;background:#161b22;color:var(--fg);padding:.6rem .9rem;border-radius:10px;font-weight:600}button.primary{background:var(--accent);border-color:#2563eb;color:#fff}.status{text-align:center;font-size:.9rem;color:var(--muted);min-height:1.2em}.location{text-align:center;font-size:1rem;margin-top:.25rem}.small{font-size:.85rem;color:var(--muted)}footer{text-align:center;color:var(--muted);font-size:.85rem;padding-bottom:.5rem}