:root {
  --bg: #fbfaf8; --fg: #1a1a1a; --muted: #5a5a5a;
  --rule: #e2ded8; --accent: #6b5b3e; --card: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14150f; --fg: #eceae4; --muted: #a3a09a;
    --rule: #2c2d26; --accent: #c9b184; --card: #1b1c15;
  }
}
:root[data-theme="dark"] {
  --bg: #14150f; --fg: #eceae4; --muted: #a3a09a;
  --rule: #2c2d26; --accent: #c9b184; --card: #1b1c15;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.65 ui-serif, Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 4rem 16px 5rem; }
header { border-bottom: 1px solid var(--rule); padding-bottom: 1.75rem; margin-bottom: 2.5rem; }
h1 {
  font-size: 2.6rem; line-height: 1.1; margin: 0 0 .5rem;
  letter-spacing: -.015em; font-weight: 600;
}
.tag { color: var(--muted); font-size: 1.05rem; margin: 0; font-style: italic; }
h2 {
  font-size: 1.15rem; margin: 2.5rem 0 .75rem; letter-spacing: .02em;
  text-transform: uppercase; font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; color: var(--accent);
}
p { margin: 0 0 1.1rem; }
ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
li { margin-bottom: .5rem; }
a { color: var(--fg); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 1.25rem 1.4rem; margin: 1.5rem 0;
}
.card p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .82rem;
     text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
code { font: .9em ui-monospace, "SF Mono", Menlo, Consolas, monospace;
       background: color-mix(in srgb, var(--accent) 12%, transparent);
       padding: .12em .38em; border-radius: 4px; }
footer { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
         color: var(--muted); font-size: .9rem; }
.crumb { margin: 0 0 .75rem; font-family: ui-sans-serif, system-ui, sans-serif;
         font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }