:root { --sand:#FAF4EC; --paper:#FFFFFF; --ink:#0F4C5C; --ink-soft:#4E6E74; --coral:#E76F51; --line:#E6DCCD; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --sand:#0C2228; --paper:#12313A; --ink:#EAF2F0; --ink-soft:#A3BDBF; --coral:#F08A6C; --line:#224650; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--sand); color:var(--ink); font:17px/1.65 "DM Sans","Segoe UI",system-ui,sans-serif; }
.wrap { max-width: 760px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 32px 64px; }
.brand { display:inline-flex; align-items:center; gap:9px; font:700 22px "Quicksand","Nunito",sans-serif; color:var(--ink); text-decoration:none; letter-spacing:-.02em; }
h1 { font:700 clamp(30px,5vw,42px)/1.1 "Quicksand","Nunito",sans-serif; letter-spacing:-.02em; margin:36px 0 8px; text-wrap:balance; }
h2 { font:700 22px/1.25 "Quicksand","Nunito",sans-serif; margin:34px 0 8px; }
p, li { color:var(--ink); max-width: 68ch; }
.meta { color:var(--ink-soft); font-size:15px; }
.note { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--ink-soft); font-size:15px; margin-top:20px; }
a { color: var(--coral); }
footer { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }