:root { --bg: #f6f5f1; --ink: #1d1d1b; --muted: #6b6a66; --line: #dcdad3; --cloud: #e2e1dc; --rain: #cfe3f7; --time: #f6dfc0; --lime: #b9e66a; }
@media (prefers-color-scheme: dark) { :root { --bg: #151514; --ink: #f1f0ec; --muted: #a3a29c; --line: #34332f; --cloud: #3a3936; --rain: #23415e; --time: #5a4126; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 Manrope, system-ui, sans-serif; }
header, main, footer { max-width: 680px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 32px; }
.mark { font: 600 20px Sora, sans-serif; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.mark span { opacity: 0.5; }
main { padding-top: 40px; padding-bottom: 48px; }
h1 { font: 600 34px/1.2 Sora, sans-serif; letter-spacing: -0.02em; margin: 0 0 24px; }
h1.hero { font-size: clamp(34px, 7vw, 52px); }
h2 { font: 600 20px/1.3 Sora, sans-serif; margin: 36px 0 8px; }
mark { color: inherit; border-radius: 0.3em; padding: 0 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.cloud { background: var(--cloud); } mark.rain { background: var(--rain); } mark.time { background: var(--time); }
.lede { font-size: 19px; }
.practical::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); margin-right: 10px; vertical-align: middle; }
.soon, footer { color: var(--muted); }
a { color: inherit; }
footer { border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 32px; font-size: 14px; }