:root {
  --bg: #fbfaf7; --fg: #1d2420; --muted: #5b6660; --line: #dcd9d0; --card: #ffffff;
  --accent: #1f5f4a; --accent-fg: #ffffff; --warn-bg: #fff4d6; --warn-line: #e5c35c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181a; --fg: #e7ebe8; --muted: #9aa5a0; --line: #2b3236; --card: #1c2224;
    --accent: #5fbf9a; --accent-fg: #0d1512; --warn-bg: #2d2813; --warn-line: #6b5a1c;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 system-ui, "Segoe UI", sans-serif; }
header.site { border-bottom: 1px solid var(--line); }
header.site nav { max-width: 56rem; margin: 0 auto; padding: .9rem 1rem; display: flex; gap: 1.2rem; align-items: baseline; flex-wrap: wrap; }
header.site .brand { font-weight: 700; font-size: 1.15rem; margin-right: auto; color: var(--fg); text-decoration: none; }
header.site a { color: var(--fg); text-decoration: none; }
header.site a:hover { text-decoration: underline; }
main { max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
main.narrow { max-width: 34rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: 1rem 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2.2rem 0 .4rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .2rem; }
p, li { max-width: 42rem; }
.lead { font-size: 1.2rem; color: var(--muted); }
a { color: var(--accent); }
.button, button.button { display: inline-block; background: var(--accent); color: var(--accent-fg); border: 0; border-radius: .4rem; padding: .65rem 1.2rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1rem 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem 1.1rem; }
.card h3 { margin-top: 0; }
.note { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: .4rem; padding: .7rem 1rem; }
code, pre { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }
pre { background: var(--card); border: 1px solid var(--line); border-radius: .4rem; padding: .8rem 1rem; overflow-x: auto; }
:not(pre) > code { background: var(--card); border: 1px solid var(--line); border-radius: .25rem; padding: .05rem .3rem; }
figure { margin: 1.2rem 0; }
figure img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: .4rem; }
figcaption { color: var(--muted); font-size: .9rem; }
ol.steps { padding-left: 1.3rem; }
ol.steps > li { margin: .8rem 0; }
label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
input[type=text] { width: 100%; font: inherit; font-size: 1.2rem; letter-spacing: .08em; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--card); color: var(--fg); text-transform: uppercase; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
footer div { max-width: 56rem; margin: 0 auto; padding: 1rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.plain { font-weight: 400; }
.muted { color: var(--muted); }