:root { color-scheme: light dark; --fg: #1c1c1e; --bg: #faf8f4; --muted: #6b6b70; --line: #ddd8cf; --accent: #2f7f8c; }
@media (prefers-color-scheme: dark) { :root { --fg: #ececec; --bg: #16181b; --muted: #9a9aa0; --line: #33363b; --accent: #5fb3c0; } }
body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;
       max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; line-height: 1.75;
       color: var(--fg); background: var(--bg); }
nav { display: flex; justify-content: flex-end; gap: 1rem; font-size: .9rem; }
header { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
header img { width: 72px; height: 72px; border-radius: 16px; }
h1 { font-size: 1.7rem; margin: 0; line-height: 1.3; }
h2 { font-size: 1.1rem; margin-top: 2.5rem; }
.lede { color: var(--muted); margin: .2rem 0 0; }
a { color: var(--accent); }
.store { display: inline-block; margin: 1.5rem 0 .5rem; padding: .7rem 1.4rem; border-radius: 10px;
         background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 600; }
figure { margin: 1.5rem 0; }
figure img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
figcaption { font-size: .85rem; color: var(--muted); }
hr { border: none; border-top: 1px solid var(--line); margin: 3rem 0; }
footer { font-size: .85rem; color: var(--muted); }