:root { --primary: oklch(0.54 0.16 255); --ink: oklch(0.2 0.02 255); --ink-soft: oklch(0.5 0.02 255); --canvas: oklch(0.975 0.008 255); --line: oklch(0.91 0.012 255); }
@media (prefers-color-scheme: dark) { :root { --ink: oklch(0.96 0.005 255); --ink-soft: oklch(0.72 0.02 255); --canvas: oklch(0.2 0.014 255); --line: oklch(0.35 0.02 255); } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.6 'DM Sans', system-ui, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 48px 16px 64px; }
h1, h2 { font-family: 'Manrope', system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(30px, 5vw, 42px); margin: 0 0 12px; }
h2 { font-size: 20px; margin: 32px 0 8px; }
p, li { color: var(--ink-soft); }
a { color: var(--primary); }
.logo { display: flex; align-items: center; gap: 10px; font: 800 20px 'Manrope', system-ui, sans-serif; color: var(--ink); text-decoration: none; margin-bottom: 40px; }
.mark { width: 30px; height: 30px; border-radius: 9px; background: var(--primary); }
.btn { display: inline-block; padding: 12px 18px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 600; text-decoration: none; }
footer { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 16px; font-size: 14px; color: var(--ink-soft); }