:root { --fg:#eef3ff; --dim:#7d8aa3; --acc:#6cd0ff; --bg:#05060a; --line:rgba(255,255,255,.08); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); overflow:hidden;
  font-family:system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-user-select:none; user-select:none; }
#stars { position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.55; }
#app { position:relative; z-index:1; height:100%; max-width:1100px; margin:0 auto;
  padding:max(16px, env(safe-area-inset-top)) 28px max(20px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; }
header { width:100%; display:flex; justify-content:space-between; align-items:center; }
.brand { font-size:15px; letter-spacing:.45em; font-weight:700; color:var(--dim); }
button { font:inherit; color:var(--fg); cursor:pointer; border:none; background:none; }
.icon-btn { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; fill:var(--dim); }
.icon-btn:active { background:var(--line); }

.gauge { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; min-height:0; }
.speed { font-size:min(32vh, 30vw); font-weight:200; line-height:.9; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.speed small { display:block; text-align:center; font-size:max(18px, 3.2vh); font-weight:500; color:var(--dim); letter-spacing:.2em; margin-top:1.2vh; }
.bar { width:min(520px, 70%); height:4px; margin-top:2.4vh; border-radius:2px; background:var(--line); overflow:hidden; }
#bar-fill { height:100%; width:100%; background:linear-gradient(90deg,#2a6dff,var(--acc)); transform-origin:left; transform:scaleX(0); }

.dock { width:min(640px, 100%); display:flex; flex-direction:column; gap:22px; }
.big { width:100%; min-height:min(120px, 14vh); font-size:max(28px, 4vh); font-weight:700; letter-spacing:.2em; border-radius:999px;
  background:#f2f5fb; color:#05060a; box-shadow:0 10px 40px rgba(0,0,0,.45); transition:background .2s, color .2s; }
.big.running { background:transparent; color:var(--fg); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.big:active { transform:scale(.985); }
.vol { display:flex; align-items:center; gap:16px; color:var(--dim); fill:var(--dim); padding:0 8px; }
input[type=range] { flex:1; height:56px; accent-color:var(--fg); background:transparent; }

.sim { width:min(640px, 100%); display:flex; gap:14px; align-items:center; margin-top:14px; }
.sim.hidden { display:none; }
.chip { min-height:56px; padding:0 24px; border-radius:999px; background:var(--line); font-size:18px; font-weight:600; }
.chip.active, .seg-btn.active { background:var(--fg); color:#05060a; }
.status { min-height:22px; margin-top:12px; color:var(--dim); font-size:15px; text-align:center; }

dialog { border:none; padding:0; background:transparent; color:var(--fg); max-width:min(720px, 94vw); width:100%; }
dialog::backdrop { background:rgba(0,0,0,.7); }
.sheet { background:#0d111b; border:1px solid var(--line); border-radius:28px; padding:28px; display:flex; flex-direction:column; gap:20px; }
.sheet h2 { margin:0; font-size:26px; }
.sheet p { margin:0; font-size:19px; line-height:1.6; color:#c9d3e6; }
.sheet .fine { font-size:14px; color:var(--dim); }
.row { display:flex; align-items:center; gap:16px; }
.lbl { min-width:110px; color:var(--dim); font-size:17px; }
.seg { display:flex; gap:8px; flex:1; }
.seg-btn { flex:1; min-height:60px; border-radius:16px; background:var(--line); font-size:18px; font-weight:600; }
.close { align-self:flex-end; }
.ok { min-height:80px; }
@media (orientation:portrait) { .speed { font-size:min(26vh, 40vw); } }