:root { --bg: #f5ebd8; --card: #fffaf0; --ink: #26211f; --ink-2: #514842; --teal: #0d5660; --act: #a8481b; --line: rgba(38,33,31,.16); color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg: #0e2429; --card: #183940; --ink: #f5ebd8; --ink-2: #d4cbbd; --teal: #f3c56a; --act: #f0b541; --line: rgba(245,235,216,.2); color-scheme: dark; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.55 Georgia, "Iowan Old Style", "Palatino Linotype", serif; }
main { max-width: 680px; margin: 0 auto; padding: 40px max(20px, env(safe-area-inset-left)) 64px max(20px, env(safe-area-inset-right)); }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
header img { width: 56px; height: 56px; border-radius: 14px; }
header a { color: inherit; text-decoration: none; font: 700 22px/1.1 -apple-system, "Segoe UI", Roboto, sans-serif; }
h1 { font: 800 clamp(30px, 6vw, 42px)/1.1 -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0 0 8px; color: var(--teal); text-wrap: balance; }
h2 { font: 700 21px/1.25 -apple-system, "Segoe UI", Roboto, sans-serif; margin: 34px 0 8px; }
p, li { color: var(--ink-2); }
a { color: var(--teal); }
.meta { font-size: 15px; color: var(--ink-2); }
.card { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 18px 20px; margin: 22px 0; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--act); color: var(--bg); font: 700 17px -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; }
.btn.alt { background: transparent; color: var(--ink); border: 2px solid var(--line); }
footer { margin-top: 48px; font-size: 15px; color: var(--ink-2); border-top: 2px solid var(--line); padding-top: 16px; }
footer a { margin-right: 14px; }