:root { --bg:#f6f5f2; --card:#fff; --ink:#1f1e1c; --muted:#6b6862; --line:#dedbd4; --accent:#3d5a80; --err:#a33; --warn:#8a5a00; }
@media (prefers-color-scheme: dark) { :root { --bg:#1a1a19; --card:#242422; --ink:#ecebe7; --muted:#a19e97; --line:#3a3936; --accent:#8fb3dc; --err:#e88; --warn:#e0b45a; } }
* { box-sizing:border-box } body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,sans-serif; }
main { max-width:560px; margin:4vh auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; }
h1 { font-size:20px; margin:0 0 12px; overflow-wrap:anywhere } .eyebrow { color:var(--muted); margin:0 0 2px; font-size:12px; letter-spacing:.06em }
h2 { font-size:15px; margin:16px 0 6px }
dl { margin:0; display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; font-size:14px } dt { color:var(--muted) } dd { margin:0; overflow-wrap:anywhere }
pre { white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:8px; padding:12px; margin:0 }
pre.summary { font:15px/1.5 system-ui,sans-serif } pre.script { font:12px/1.45 Menlo,monospace; max-height:50vh; overflow:auto }
.mono { font:12px/1.45 Menlo,monospace } .warn { color:var(--warn); font-size:14px } .sub { color:var(--muted); font-size:13px }
label { display:block; font-size:14px; margin:16px 0 4px }
input { width:100%; padding:10px 12px; font-size:20px; letter-spacing:.2em; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink) }
button { margin-top:14px; width:100%; padding:12px; font-size:16px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer }
button.secondary { background:#777 } button:disabled { opacity:.5 }
.msg { margin:14px 0 0; font-size:15px } .msg.err { color:var(--err) }
.code { font:600 28px/1.3 Menlo,monospace; letter-spacing:.08em; text-align:center; margin:8px 0; padding:12px; border:2px solid var(--accent); border-radius:8px }