:root { --accent:#b3251e; --ink:#1f2329; --muted:#5f6670; --line:#dcdfe6; --bg:#f6f7f9; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
header { background:var(--accent); color:#fff; padding:14px 20px; font-weight:700; letter-spacing:.01em; }
main { max-width:640px; margin:28px auto; padding:0 16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px 22px; }
h1 { font-size:1.25rem; margin:0 0 10px; }
p { margin:8px 0; }
.muted { color:var(--muted); font-size:.9rem; }
button, .btn { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:10px 18px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
button.ghost { background:#fff; color:var(--accent); border:1px solid var(--accent); }
button:disabled { opacity:.55; cursor:default; }
pre { background:#f4f6f9; border:1px solid var(--line); border-radius:6px; padding:12px; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,"DejaVu Sans Mono",monospace; font-size:.92rem; max-height:50vh; overflow:auto; }
.note { border-left:4px solid var(--accent); background:#fcf4f3; padding:8px 12px; border-radius:0 6px 6px 0; margin:12px 0; font-size:.92rem; }
.ok { border-left-color:#2b8a5b; background:#eef8f2; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
[hidden] { display:none !important; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#e8eaee; --muted:#a3a9b3; --line:#3a3f47; --bg:#17191d; }
  .card { background:#1f2227; } pre { background:#16181c; } .note { background:#2a1d1c; } .ok { background:#18281f; }
  button.ghost { background:#1f2227; }
}