:root {
  color-scheme: light;
  --cream: #f4f0e6;
  --paper: #fffdf6;
  --ink: #173d32;
  --muted: #64766d;
  --sage: #86a56f;
  --line: #d9d2c3;
  --gold: #e5b95f;
}

* { box-sizing: border-box; }
html { background: var(--cream); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 80% 0%, #fff8dc 0, transparent 34rem), var(--cream); font: 17px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: #245f4d; text-underline-offset: .18em; }
.shell { width: min(820px, calc(100% - 32px)); margin: 0 auto; }
header { padding: 56px 0 24px; }
.brand { display: flex; gap: 14px; align-items: center; text-decoration: none; }
.mark { display: grid; width: 52px; height: 52px; place-items: center; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 6px #eaf0df; font-size: 25px; }
.brand strong { color: var(--ink); font-size: 1.2rem; }
nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
nav a { font-size: .92rem; font-weight: 700; }
main { padding-bottom: 72px; }
.hero, article { padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-radius: 28px; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 18px 55px rgb(23 61 50 / .08); }
h1 { margin: 0 0 12px; font-size: clamp(2rem, 7vw, 3.8rem); line-height: 1.05; letter-spacing: -.035em; }
h2 { margin: 2.1em 0 .45em; font-size: 1.35rem; }
h3 { margin: 1.5em 0 .35em; font-size: 1.05rem; }
p, li { color: var(--muted); }
ul, ol { padding-left: 1.3em; }
.lede { max-width: 640px; font-size: 1.1rem; }
.meta { margin: 18px 0 0; color: var(--muted); font-size: .88rem; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.card { display: block; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fffdf8; text-decoration: none; }
.card strong { display: block; color: var(--ink); }
.card span { color: var(--muted); font-size: .9rem; }
.warning { padding: 16px 18px; border-left: 4px solid var(--gold); border-radius: 8px; background: #fff8dc; }
footer { padding: 26px 0 48px; color: var(--muted); font-size: .85rem; }
code { padding: .12em .35em; border-radius: 6px; background: #edf0e6; }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } header { padding-top: 30px; } }