:root {
  --bg: #f6f1e7; --fg: #2b1d0c; --muted: #6b5a3e; --edge: #c9b48a; --field: #fffdf8;
  --accent: #8a5a12; --ok: #1f6f5c; --err: #a3301f;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14100c; --fg: #f4e6c4; --muted: #c4b798; --edge: #6e5a35; --field: #0f0c09;
    --accent: #ffd27a; --ok: #7fd6c2; --err: #ff8a7a;
  }
}
:root[data-theme="dark"] {
  --bg: #14100c; --fg: #f4e6c4; --muted: #c4b798; --edge: #6e5a35; --field: #0f0c09;
  --accent: #ffd27a; --ok: #7fd6c2; --err: #ff8a7a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { font-size: 1.7rem; margin: 0 0 8px; color: var(--accent); }
.lede { margin: 0 0 20px; }
.steps { padding-left: 1.3em; margin: 0 0 24px; }
.steps li { margin-bottom: 4px; }
.tag { color: var(--accent); font-weight: 600; }
code, kbd { font: 0.92em ui-monospace, Consolas, monospace; border: 1px solid var(--edge); border-radius: 4px; padding: 0 4px; }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
.opt { font-weight: 400; color: var(--muted); }
textarea, input { width: 100%; background: var(--field); color: var(--fg); border: 1px solid var(--edge); border-radius: 6px; padding: 10px; font: inherit; }
textarea { font: 13px/1.4 ui-monospace, Consolas, monospace; resize: vertical; }
textarea:focus, input:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { margin-top: 18px; background: var(--accent); color: var(--bg); border: 0; border-radius: 6px; padding: 10px 22px; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: wait; }
#status { min-height: 1.5em; margin: 12px 0 0; }
#status.ok { color: var(--ok); }
#status.err { color: var(--err); }
details { margin-top: 32px; color: var(--muted); }
summary { cursor: pointer; }