:root { color-scheme: dark; --ink: #11110f; --paper: #f4f1e8; --accent: #d7ff7a; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--ink); color: var(--paper); font-family: Georgia, "Times New Roman", serif; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
main { position: relative; display: grid; min-height: 100vh; place-items: center; padding: 32px; }
h1 { margin: 0; color: var(--paper); font-size: clamp(58px, 12vw, 196px); font-weight: 400; line-height: 0.88; letter-spacing: 0; text-align: center; text-wrap: balance; transition: color 240ms ease; }
body:hover h1 { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { canvas { display: none; } h1 { transition: none; } }