*{box-sizing:border-box}body{margin:0;background:#0d1117;color:#e6edf3;font-family:system-ui,sans-serif}
main{max-width:480px;margin:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));text-align:center}
h1{font-size:1.1rem;margin:4px 0;color:#8b949e}#gauge{width:100%;max-width:320px}
#readout{font-size:4.5rem;font-weight:700;margin-top:-30px;font-variant-numeric:tabular-nums}#unit{font-size:1.2rem;color:#8b949e}
.band{display:inline-block;padding:6px 14px;border-radius:20px;background:#30363d;margin:6px 0 12px;font-weight:600}
.stats{display:flex;gap:8px}.stats div{flex:1;background:#161b22;border-radius:10px;padding:8px;color:#8b949e;font-size:.85rem}
.stats b{display:block;color:#e6edf3;font-size:1.4rem}
canvas{width:100%;background:#161b22;border-radius:10px;margin-top:12px}.cap{color:#8b949e;font-size:.8rem}
.row{display:flex;gap:10px;margin:14px 0}button{flex:2;font-size:1.3rem;padding:16px;border:0;border-radius:12px;background:#238636;color:#fff;font-weight:700}
button.stop{background:#da3633}button.sec{flex:1;background:#30363d}
details{text-align:left;background:#161b22;padding:10px;border-radius:10px}label{display:block;margin:8px 0}
input[type=number]{width:80px;font-size:1rem;background:#0d1117;color:#e6edf3;border:1px solid #30363d;border-radius:6px;padding:4px}
.note{color:#8b949e;font-size:.75rem;margin-top:14px}