:root { color-scheme: light dark; --canvas: #F7F6F3; --ink: #37352F; --muted: #6B6964; --border: #DDD8CF; --button: #2F2E2A; --inverse: #FFFFFF; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { width: min(100% - 48px, 540px); margin: 64px auto; }
.brand { font-weight: 650; letter-spacing: -.03em; }
h1 { margin: 48px 0 24px; font: 500 clamp(36px, 8vw, 58px)/1.08 Georgia, serif; letter-spacing: -.04em; }
p { color: var(--muted); }
a { color: inherit; text-underline-offset: 4px; }
.actions { display: grid; justify-items: start; gap: 20px; margin: 28px 0; }
.button { display: inline-block; border: 1px solid var(--button); border-radius: 12px; padding: 12px 20px; background: var(--button); color: var(--inverse); text-decoration: none; font-size: 15px; font-weight: 600; }
.secondary { background: transparent; color: var(--ink); }
a:focus-visible { outline: 3px solid #2F6FAD; outline-offset: 5px; }
.stores { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 16px; }
.stores .button { margin: 0 8px 12px 0; }
.note { font-size: 13px; }
@media (prefers-color-scheme: dark) { :root { --canvas: #191919; --ink: #F1F1EF; --muted: #B8B5AE; --border: #3A3A37; --button: #F7F7F5; --inverse: #191919; } }
@media (max-width: 420px) { main { margin-top: 32px; } h1 { margin-top: 32px; } }