:root { color-scheme: light; --background: #87a6b4; --ink: #332d3c; --haze: #dce3e877; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); }
body { color: var(--ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body[data-concept="cloud"] { --background: #a9bacc; --ink: #243244; --haze: #dce3e877; color-scheme: light; }
body[data-concept="dawn"] { --background: #ba9c9b; --ink: #332d3c; --haze: #edcec077; color-scheme: light; }
body[data-concept="blue"] { --background: #152c50; --ink: #f1f3fa; --haze: #12264577; }
body[data-concept="drift"] { --background: #d9d9df; --ink: #3b3d48; --haze: #f0e9e577; color-scheme: light; }
::selection { background: #9f6348; color: white; }
.scene { position: fixed; inset: 0; overflow: hidden; background: var(--background); }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; }
#sky { transform: scale(1.025) translateY(10px); transition: opacity 1.4s ease, transform 1.8s ease-out; }
.sky-ready #sky { opacity: 1; transform: none; }
.ready #machine { opacity: 1; }
.graphics-lost #machine { display: none; }
main { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100svh; padding: 60px 24px; overflow: clip; }
main a { position: absolute; top: 81svh; left: 50%; transform: translate(-50%, -50%); color: var(--ink); font-size: clamp(25px, 2.4vw, 35px); font-weight: 400; text-decoration: none; letter-spacing: -.045em; white-space: nowrap; }
@media (max-width: 600px) { main a { top: 69svh; } }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 9px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
body:is([data-concept="low"], [data-concept="mist"], [data-concept="peaks"], [data-concept="distant"]) { --background: #ba9c9b; --ink: #332d3c; --haze: #edcec077; color-scheme: light; }
body:is([data-concept="diagonal"], [data-concept="close"], [data-concept="expanded"], [data-concept="quiet"]) { --background: #ba9c9b; --ink: #332d3c; --haze: #edcec077; color-scheme: light; }
body:is([data-concept="air"], [data-concept="distance"], [data-concept="dusk"], [data-concept="afterglow"]) { --background: #ba9c9b; --ink: #332d3c; --haze: #edcec077; color-scheme: light; }
body:is([data-concept="ember"], [data-concept="violet"], [data-concept="glacier"], [data-concept="copper"]) { --ink: #332d3c; color-scheme: light; }
body[data-concept="ember"] { --background: #ae9c99; }
body[data-concept="violet"] { --background: #a698a8; }
body[data-concept="copper"] { --background: #a2afaa; }