:root { --bg: #faf9f7; --fg: #1f1e1c; --muted: #6b6862; --accent: #c2603f; --accent-fg: #ffffff; --card: #ffffff; --border: #e5e2dc; --ok: #2f7d4a; --ok-bg: #e8f4ec; --err: #b3392b; --err-bg: #fbeae7; --pend-bg: #f3f1ed; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #1c1b19; --fg: #eeece8; --muted: #a8a49c; --accent: #e8957a; --accent-fg: #1c1b19; --card: #262522; --border: #3a3834; --ok: #7fcf98; --ok-bg: #1f3326; --err: #f0a093; --err-bg: #3a2320; --pend-bg: #2e2c29; }
}
:root[data-theme="dark"] { --bg: #1c1b19; --fg: #eeece8; --muted: #a8a49c; --accent: #e8957a; --accent-fg: #1c1b19; --card: #262522; --border: #3a3834; --ok: #7fcf98; --ok-bg: #1f3326; --err: #f0a093; --err-bg: #3a2320; --pend-bg: #2e2c29; }

* { 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: 720px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
h3 { font-size: 0.95rem; margin: 16px 0 6px; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
p.lead { color: var(--muted); margin: 0 0 28px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
code { font: 13px ui-monospace, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; display: block; overflow-wrap: anywhere; margin: 6px 0 10px; }
code.inline { display: inline; padding: 1px 5px; margin: 0; }
ol, ul { padding-left: 22px; margin: 0 0 10px; }
li { margin: 5px 0; }
a { color: var(--accent); }
.note { font-size: 13px; color: var(--muted); }
kbd { font: 12px ui-monospace, Menlo, monospace; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--card); }

button { font: inherit; font-weight: 600; color: var(--accent-fg); background: var(--accent); border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: progress; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.status { border-radius: 8px; padding: 12px 14px; font-size: 15px; }
.status.pending { background: var(--pend-bg); }
.status.ok { background: var(--ok-bg); color: var(--ok); }
.status.error { background: var(--err-bg); color: var(--err); }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 40px; margin: 0 0 18px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }

figure { margin: 12px 0 4px; }
figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }

.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; margin: -12px 0 24px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; border-bottom: 1px solid var(--border); padding: 6px 8px 6px 0; vertical-align: top; }