:root { --bg:#fff; --bg-soft:#f4f6f9; --fg:#1c2330; --muted:#5f6b7d; --line:#dde2ea; --accent:#7a3cff; --accent-fg:#fff;
  --ok-bg:#e7f6ec; --ok-fg:#14532d; --err-bg:#fdecec; --err-fg:#7f1d1d; --stop:#c62828; --radius:10px; }
@media (prefers-color-scheme: dark) { :root { --bg:#11151c; --bg-soft:#1a202b; --fg:#e6e9ef; --muted:#9aa6b8; --line:#2a3342;
  --accent:#a98bff; --accent-fg:#0b1220; --ok-bg:#14301f; --ok-fg:#b7efc9; --err-bg:#3a1717; --err-fg:#fbc4c4; --stop:#e04848; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.wrap { max-width:760px; margin:0 auto; padding:0 16px; }
main.wrap { padding-top:20px; padding-bottom:40px; min-height:60vh; }
a { color:var(--accent); }
.topbar { border-bottom:1px solid var(--line); background:var(--bg-soft); }
.bar { display:flex; justify-content:space-between; align-items:center; padding-top:10px; padding-bottom:10px; }
.brand { font-weight:700; font-size:1.2rem; text-decoration:none; }
nav a { margin-left:14px; }
.card { background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:16px 0; }
.muted { color:var(--muted); }
label { display:block; margin:10px 0 4px; font-weight:600; }
input { font:inherit; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); max-width:100%; }
input[type=range] { width:100%; padding:0; }
button { font:inherit; padding:9px 16px; border:0; border-radius:8px; background:var(--accent); color:var(--accent-fg); cursor:pointer; }
button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
button:disabled { opacity:.5; cursor:default; }
button.stop { background:var(--stop); color:#fff; font-size:2rem; font-weight:800; width:100%; padding:22px; letter-spacing:.1em; }
.flash { padding:10px 14px; border-radius:8px; margin:12px 0; }
.flash.ok { background:var(--ok-bg); color:var(--ok-fg); } .flash.err { background:var(--err-bg); color:var(--err-fg); }
ul.plain { list-style:none; padding:0; margin:8px 0; }
ul.plain li { padding:4px 0; border-bottom:1px solid var(--line); }
.dev .out { display:flex; gap:8px; align-items:center; margin-left:12px; }
.foot { color:var(--muted); font-size:.9rem; padding-bottom:30px; }
kbd { border:1px solid var(--line); border-radius:4px; padding:0 5px; background:var(--bg-soft); }
pre { overflow:auto; }
[hidden] { display:none !important; }