:root { color-scheme: light dark; --paper: #f7f5f0; --ink: #1f1c1a; --muted: #5c574f; --accent: #c74000; --on-accent: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { max-width: 42rem; margin-inline: auto; padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(3rem, env(safe-area-inset-bottom)); }
header { display: flex; align-items: center; gap: .75rem; font-weight: 650; letter-spacing: .18em; }
.mark { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; width: 2rem; height: 2rem; padding: .4rem; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: .5rem; }
.mark i { border-radius: 50%; background: var(--accent); }
.mark i:nth-child(2), .mark i:nth-child(3) { opacity: .55; }
h1 { margin: 5rem 0 1.25rem; font-size: 2.5rem; font-weight: 650; line-height: 1.45; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; max-width: 40ch; color: var(--muted); font-size: 1.125rem; line-height: 1.65; }
a { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; max-width: 100%; margin-top: 3rem; padding: .9rem 1.75rem; border-radius: 1.5rem; background: var(--accent); color: var(--on-accent); font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
a span { font-size: .875rem; font-weight: 450; }
a:hover { filter: brightness(.93); }
a:active { filter: brightness(.85); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
@media (prefers-color-scheme: dark) { :root { --paper: #1a1a17; --ink: #f5f2ed; --muted: #bfbab0; --accent: #ff8f47; --on-accent: #1a1a17; } }
@media (max-width: 350px) { h1 { font-size: 2rem; margin-top: 3.5rem; } }