:root { --ink:#1f3a4d; --muted:#5f6f7c; --line:#e3e8ed; --bg:#ffffff; --accent:#f39a4c; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --ink:#e8eef3; --muted:#9fb0bd; --line:#2a3a47; --bg:#12202b; --accent:#f6b06e; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font: 17px/1.6 ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  padding-block: 32px 64px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main { max-width: 680px; margin: 0 auto; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .25em; text-wrap: balance; }
h2 { font-size: 1.15rem; margin: 1.8em 0 .4em; }
p, li { color: var(--ink); } .muted { color: var(--muted); font-size: .9rem; }
a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.draft { border:1.5px dashed var(--accent); border-radius: 12px; padding: 10px 14px; font-size: .9rem; }
nav { display:flex; gap:16px; margin-bottom: 24px; font-weight: 700; }
.brand { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.brand img { transform: rotate(-14deg); }