:root { color-scheme: dark; --paper: #101121; --ink: #f4f0eb; background: var(--paper); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { -webkit-font-smoothing: antialiased; overflow: hidden; background: var(--paper); isolation: isolate; }
.cosmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, #282240 0, #141525 50%, #0b101c 100%); }
.nebula { position: absolute; inset: -15%; background: radial-gradient(ellipse at 65% 32%, #756fa936, transparent 33%), radial-gradient(ellipse at 29% 62%, #b0697425, transparent 34%), radial-gradient(ellipse at 78% 76%, #3f779920, transparent 36%); filter: blur(32px); transform: rotate(-24deg); }
.nebula::after { content: ""; position: absolute; inset: 15% 5%; border-radius: 50%; background: linear-gradient(154deg, transparent 32%, #a29ce70c 43%, #ae8ac41b 49%, #46599115 57%, transparent 68%); filter: blur(24px); }
.stars { position: absolute; inset: -24px; background: url("assets/stars.svg") center / cover; opacity: .85; }
.stardust { position: absolute; width: 75vw; height: 60vh; left: 12.5vw; top: 8vh; border-radius: 50%; background: radial-gradient(ellipse, #a292cf0b, transparent 65%); box-shadow: 0 0 120px 40px #9382b708; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse, transparent 30%, #05091460 100%); }
main { height: 100svh; display: grid; place-items: center; padding: 45px 24px 82px; overflow: clip; }
.greeting { display: grid; justify-items: center; gap: clamp(20px, 3svh, 30px); text-align: center; }
.scene { position: relative; width: min(440px, 52svh, 83vw); aspect-ratio: 1; isolation: isolate; }
.planet { position: absolute; width: 94%; aspect-ratio: 1; left: 3%; top: 3%; z-index: -2; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 33% 15%, #e4d6f7, #baa4d5 34%, #8b74af 60%, #403355 85%, #282239); box-shadow: inset 2px 3px 6px #fff1ff88, inset -12px -16px 22px #1a14274d, 0 0 45px #bc9fea35, 0 0 120px 24px #9672bd25; }
.planet-detail { position: absolute; display: block; pointer-events: none; user-select: none; }
.snowboard { width: 20%; height: 38%; left: 9%; top: 44%; rotate: -19deg; opacity: .86; }
.synthesizer { width: 29%; height: 18%; right: 4%; top: 17%; rotate: 16deg; opacity: .9; }
.loopstation { width: 25%; height: 13%; left: 42%; top: 83%; rotate: -7deg; opacity: .85; }
.crater { position: absolute; border-radius: 50%; background: #b5a0d236; box-shadow: inset 0 2px 2px #8d77aa18; }
.crater-one { width: 23%; height: 10%; left: 17%; top: 45%; rotate: -28deg; }
.crater-two { width: 15%; height: 7%; right: 15%; bottom: 23%; rotate: -28deg; }
.planet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.15' d='M0 0h140v140H0z'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: .4; }
.orbit { position: absolute; inset: -4%; z-index: -1; }
.orbit svg { width: 100%; height: 100%; fill: none; stroke: #d2bfe6; stroke-width: 1; opacity: .45; }
.character { position: absolute; width: 72%; height: 96%; left: 14%; top: -2%; object-fit: contain; user-select: none; filter: drop-shadow(0 12px 10px #17102330); }
[data-depth] { will-change: transform; }
.spark { position: absolute; color: #eedcc2; font-family: Georgia, serif; line-height: 1; user-select: none; text-shadow: 0 0 22px #f6d7ad55; }
.spark-one { left: 9%; top: 12%; font-size: clamp(25px, 4.8svh, 39px); rotate: 12deg; }
.spark-two { right: 5%; bottom: 16%; font-size: clamp(24px, 4svh, 34px); color: #c1b4dc; }
.satellite { position: absolute; width: 10px; height: 10px; left: 7%; bottom: 28%; border-radius: 50%; background: #f4b38e; box-shadow: inset -3px -2px 3px #cf8b6440; }
h1 { margin: 0; font-size: clamp(35px, 5.4vw, 68px); font-weight: 500; line-height: 1.14; letter-spacing: -.06em; text-shadow: 0 3px 28px #0b071540; }
h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.065em; color: #d1bfdf; }
.language { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; font-size: 10px; }
.language span { color: #656273; }
.language button { min-width: 44px; min-height: 44px; padding: 10px; border: 0; background: transparent; color: #918b9e; font: inherit; letter-spacing: .07em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s; }
.language button[aria-pressed="true"], .language button:hover { color: var(--ink); }
.language button:focus-visible { outline: 2px solid #9c83c3; outline-offset: 1px; border-radius: 4px; }
::selection { background: #7e638e; color: white; }
@media (max-width: 600px) and (min-height: 501px) { main { padding-inline: 16px; } .greeting { gap: 32px; } .scene { width: min(340px, 45svh, 88vw); } h1 { font-size: clamp(40px, 10vw, 56px); } h1 span, h1 em { display: block; } h1 em { margin-top: 2px; } }
@media (max-height: 500px) { main { padding-block: 18px 54px; } .greeting { gap: 24px; } .scene { width: 52svh; } h1 { font-size: clamp(26px, 7svh, 35px); } .language { bottom: 3px; } }
@media (prefers-reduced-motion: reduce) { [data-depth] { transform: none !important; will-change: auto; } }