:root { color-scheme: light; --paper: #fbfaf4; --ink: #07344f; --blue: #0797e3; --gold: #ffca18; --surface: #fff; --muted: #5d5b66; --pattern: #dfe2de; --shadow: #c8c9c3; }
html[data-theme="dark"] { color-scheme: dark; --paper: #071a28; --ink: #dff5ff; --blue: #57c7ff; --gold: #ffd34d; --surface: #0d2b3d; --muted: #abc5d1; --pattern: #12384b; --shadow: #020c13; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; color: var(--ink); font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif; background-color: var(--paper); background-image: radial-gradient(var(--pattern) 1.3px, transparent 1.3px); background-size: 28px 28px; }
main { width: min(520px, calc(100% - 36px)); padding: 42px; text-align: center; background: var(--surface); border: 4px solid var(--ink); box-shadow: 9px 10px 0 var(--shadow); }
span { display: block; color: var(--blue); font-size: 72px; animation: spin 2s linear infinite; }
h1 { margin: 12px 0; font-size: clamp(36px, 10vw, 58px); letter-spacing: -.05em; }
p { color: var(--muted); font-size: 18px; }
a { display: inline-block; margin-top: 16px; padding: 12px 16px; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 900 13px "Courier New", monospace; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }