@font-face{font-family:Allura;src:url('assets/allura.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#03050d;color:#fff}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{-webkit-tap-highlight-color:transparent}
.universe{position:relative;isolation:isolate;width:100%;height:100svh;min-height:280px;overflow:hidden;background:#03050d}
.nebula{position:absolute;z-index:-4;inset:-2%;background:#090e1a url('assets/nebula.webp') center/cover no-repeat;filter:brightness(1.08) contrast(1.08) saturate(1.08);opacity:.92;pointer-events:none}
.atmosphere{position:absolute;z-index:-3;inset:0;background:radial-gradient(ellipse at 8% 12%,#18233f55,transparent 62%),radial-gradient(ellipse at 90% 86%,#24203c40,transparent 65%),radial-gradient(ellipse at 50% 50%,transparent 20%,#01020870 100%);pointer-events:none}
#sky{position:absolute;z-index:-2;inset:0;width:100%;height:100%;pointer-events:none}
.edge-light{position:absolute;z-index:-1;inset:0;box-shadow:inset 0 0 100px 10px #01030a40;pointer-events:none}
.heart-stage{position:absolute;z-index:2;inset:0;display:grid;place-items:center;perspective:900px;pointer-events:none}
.heart-system{position:relative;width:min(600px,83vw,76svh);aspect-ratio:600/540;transform-style:preserve-3d;pointer-events:auto;touch-action:none;user-select:none;cursor:grab}
.heart-system.is-dragging{cursor:grabbing}
.heart{position:relative;display:block;width:100%;height:100%;outline:none;pointer-events:none;touch-action:none;user-select:none;transform-origin:50% 50%;transform-style:preserve-3d;will-change:transform,opacity;transition:transform .42s cubic-bezier(.2,.72,.25,1),opacity .7s ease}
.heart.is-dragging{transition:none}
.heart.is-traveling{transition:opacity .7s ease}
.heart.is-resetting{transition:none}
.constellation{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px #eff6ff90);transition:filter 1.2s}
.heart:focus-visible .constellation{filter:drop-shadow(0 0 12px #f5faffc0)}
.thread{stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-opacity:.9}
.name-volume{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .7s ease}
.name-volume.is-traveling,.name-volume.is-resetting{transition:none}
.point-cloud{position:absolute;z-index:2;inset:0;pointer-events:none;transition:opacity .7s ease}
.point-cloud.is-traveling,.point-cloud.is-resetting{transition:none}
.heart-point{position:absolute;left:0;top:0;width:clamp(8px,2.3%,14px);height:clamp(8px,2.3%,14px);border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0 17%,#ecf4ff 39%,#a9c5e8 70%,#5e77a0 100%);box-shadow:inset -2px -2px 3px #58709485,0 0 7px 2px #f7fbffb8,0 0 18px 3px #adc9ff72;backface-visibility:visible;pointer-events:none;will-change:transform,opacity}
.heart-point.is-bright{width:clamp(10px,2.7%,17px);height:clamp(10px,2.7%,17px);box-shadow:inset -2px -2px 3px #58709485,0 0 9px 3px #fff,0 0 24px 5px #afcaff99}
.heart-point.is-bright::after{content:'';position:absolute;inset:-65%;background:linear-gradient(transparent 47%,#f9fcff88 49%,#f9fcff88 51%,transparent 53%),linear-gradient(90deg,transparent 47%,#f9fcff88 49%,#f9fcff88 51%,transparent 53%);pointer-events:none}
.name-wrap{position:absolute;left:15%;right:12%;top:36%;height:32%;transform:translateZ(17px);transform-style:preserve-3d;pointer-events:none}
.name{position:absolute;left:50%;top:50%;display:block;width:85%;height:auto;overflow:visible;filter:drop-shadow(0 0 7px #ffffff65) drop-shadow(0 0 22px #ccd6ff45);transform:translate(-50%,-50%) rotate(-5deg) translateZ(15px)}
.name.name-depth{opacity:.45;filter:brightness(.72) drop-shadow(0 0 5px #adc7ff91);transform:translate(-50%,-50%) rotate(-5deg) translateZ(var(--depth))}
.launch-heart{position:absolute;z-index:3;left:50%;top:calc(100% + 14px);display:grid;place-items:center;width:50px;height:50px;padding:0;transform:translateX(-50%);border:0;background:transparent;color:#fff;cursor:pointer;pointer-events:auto;touch-action:manipulation;transition:transform .25s ease,opacity .4s ease}
.launch-heart svg{width:23px;height:23px;filter:drop-shadow(0 0 5px #fff)}
.launch-heart:disabled{opacity:0;pointer-events:none}
.launch-heart:not(:disabled):hover{transform:translateX(-50%) scale(1.12)}
.launch-heart:focus-visible{outline:2px solid white;outline-offset:4px}
.universe audio{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-script{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:30px}.no-script span{font:90px Allura,cursive}
@media(max-width:600px){.nebula{background-size:100% 100%;filter:brightness(1.03) contrast(1.06) saturate(1.08);opacity:.9}.heart-system{width:min(94vw,70svh)}}
@media(max-height:480px) and (orientation:landscape){.heart-system{width:60svh}}
@media(max-height:400px){.heart-system{width:55svh}}
@media(prefers-reduced-motion:reduce){.constellation{transition:none}}