:root { --bg:#f6f7f9; --card:#fff; --fg:#1b1f24; --muted:#5b6470; --accent:#2563eb; --ok:#16a34a; --warn:#d97706; --err:#dc2626; --border:#e2e5ea; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1115; --card:#181b21; --fg:#e7e9ee; --muted:#9aa3ae; --accent:#3b82f6; --border:#2a2f38; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); display:grid; place-items:center; min-height:100vh; padding:16px; }
main { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:28px; width:100%; max-width:440px; }
h1 { margin:0 0 4px; font-size:1.4rem; }
p.sub { margin:0 0 20px; color:var(--muted); }
label { display:block; font-size:.9rem; color:var(--muted); margin:14px 0 6px; }
select, input[type=range] { width:100%; }
select { padding:8px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--fg); }
button { width:100%; margin-top:20px; padding:14px; font-size:1.05rem; font-weight:600; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; }
button.stop { background:var(--err); }
button:disabled { opacity:.6; cursor:wait; }
.status { margin-top:16px; display:flex; align-items:center; gap:8px; color:var(--muted); }
.dot { width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none; }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.err { background:var(--err); }
.meter { height:10px; border-radius:5px; background:var(--border); overflow:hidden; margin-top:14px; }
.meter > div { height:100%; width:0; background:var(--ok); transition:width 60ms linear; }
a { color:var(--accent); }
ul.links { padding-left:18px; }