:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#000;color:#fafafa;overflow-x:hidden}.starfield{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0}.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--dur) ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:var(--min-o);transform:scale(1)}to{opacity:var(--max-o);transform:scale(var(--scale))}}.star--large{box-shadow:0 0 6px 2px #b4c8ff99}.nebula-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.nebula{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;animation:nebula-drift 30s ease-in-out infinite alternate}.nebula--1{width:600px;height:400px;top:5%;left:-5%;background:radial-gradient(ellipse,rgba(120,0,255,.6),rgba(0,100,255,.2),transparent 70%);animation-delay:0s}.nebula--2{width:500px;height:500px;top:40%;right:-10%;background:radial-gradient(ellipse,rgba(255,0,100,.5),rgba(255,50,200,.2),transparent 70%);animation-delay:-10s}.nebula--3{width:700px;height:350px;bottom:0;left:20%;background:radial-gradient(ellipse,rgba(0,200,255,.4),rgba(0,100,200,.15),transparent 70%);animation-delay:-20s}.nebula--4{width:400px;height:400px;top:15%;left:50%;background:radial-gradient(ellipse,rgba(255,160,0,.3),rgba(255,80,0,.1),transparent 70%);animation-delay:-5s}@keyframes nebula-drift{0%{transform:translate(0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}to{transform:translate(-20px,15px) scale(.97)}}.shooting-star{position:fixed;width:120px;height:2px;background:linear-gradient(90deg,#fff0,#fff 30%,#b4c8ffcc);border-radius:2px;z-index:2;opacity:0;animation:shoot var(--shoot-dur) linear var(--shoot-delay) infinite;transform-origin:left center;transform:rotate(var(--angle))}.shooting-star:after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 12px 4px #b4d2ffcc}@keyframes shoot{0%{opacity:0;transform:rotate(var(--angle)) translate(0)}5%{opacity:1}30%{opacity:1}50%{opacity:0;transform:rotate(var(--angle)) translate(calc(100vw + 200px))}to{opacity:0}}.planets-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none}.planet{position:absolute;border-radius:50%;overflow:hidden}.planet--saturn{width:120px;height:120px;bottom:15%;right:8%;background:radial-gradient(circle at 35% 35%,#f5d5a0,#c8a050 40%,#a07830 70%,#705020);box-shadow:inset -15px -10px 30px #00000080,0 0 40px #c8a05026;animation:planet-float 20s ease-in-out infinite alternate}.planet--saturn:before{content:"";position:absolute;top:50%;left:50%;width:220px;height:40px;transform:translate(-50%,-50%) rotateX(70deg) rotate(-15deg);border:4px solid rgba(210,180,120,.5);border-radius:50%;background:linear-gradient(90deg,transparent 10%,rgba(210,180,120,.15) 30%,rgba(210,180,120,.3) 50%,rgba(210,180,120,.15) 70%,transparent 90%);pointer-events:none}.planet--saturn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(135deg,transparent 40%,rgba(0,0,0,.3) 100%)}.planet--mars{width:50px;height:50px;top:20%;left:12%;background:radial-gradient(circle at 40% 35%,#e87040,#c04020 50%,#901810);box-shadow:inset -8px -6px 16px #00000080,0 0 20px #c850281a;animation:planet-float 15s ease-in-out infinite alternate-reverse}.planet--mars:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(135deg,transparent 40%,rgba(0,0,0,.4) 100%)}.planet--neptune{width:80px;height:80px;top:60%;left:5%;background:radial-gradient(circle at 38% 35%,#70b0ff,#3070d0 45%,#1a4090 80%);box-shadow:inset -10px -8px 24px #0006,0 0 30px #3264dc26;animation:planet-float 25s ease-in-out infinite alternate;animation-delay:-5s}.planet--neptune:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(150deg,transparent 35%,rgba(0,0,0,.35) 100%)}.planet--jupiter{width:160px;height:160px;top:8%;right:15%;background:repeating-linear-gradient(180deg,#d2aa78cc,#b48c5a99 8px,#a07846b3 12px,#c8a06499 20px,#be9664cc 25px),radial-gradient(circle at 40% 40%,#e8c890,#c8a060 50%,#a08040);box-shadow:inset -18px -12px 40px #0006,0 0 50px #c8a0501a;animation:planet-float 30s ease-in-out infinite alternate-reverse;animation-delay:-10s}.planet--jupiter:before{content:"";position:absolute;width:28px;height:18px;top:55%;left:55%;background:radial-gradient(ellipse,#c85028b3,#b43c1e80);border-radius:50%;box-shadow:0 0 8px #c850284d}.planet--jupiter:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(135deg,transparent 40%,rgba(0,0,0,.35) 100%)}@keyframes planet-float{0%{transform:translate(0)}50%{transform:translate(10px,-15px)}to{transform:translate(-8px,10px)}}.space-app{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.title{font-size:clamp(2.5rem,6vw,5rem);font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#a78bfa,#60a5fa,#f472b6,#fbbf24);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 8s ease-in-out infinite;margin-bottom:.5rem;text-shadow:none}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.subtitle{font-size:clamp(1rem,2vw,1.35rem);color:#ffffff80;font-weight:300;letter-spacing:.15em;text-transform:uppercase;margin-bottom:3rem}.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:1200px;width:100%;padding:0 1rem}.scene-card{position:relative;aspect-ratio:4/3;border-radius:1rem;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.08);transition:transform .4s ease,box-shadow .4s ease}.scene-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 60px #0009,0 0 40px var(--glow)}.scene-card__canvas{position:absolute;top:0;right:0;bottom:0;left:0}.scene-card__label{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 1rem 1rem;background:linear-gradient(transparent,#000c);font-size:.85rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#fffc}.scene-nebula{--glow: rgba(120, 0, 255, .3);background:linear-gradient(135deg,#0a0015,#1a0030,#0d0020)}.scene-nebula .swirl{position:absolute;border-radius:50%;filter:blur(30px);animation:swirl-pulse 6s ease-in-out infinite alternate}.scene-nebula .swirl--1{width:70%;height:60%;top:10%;left:15%;background:radial-gradient(ellipse,rgba(100,0,255,.5),rgba(60,0,180,.2),transparent)}.scene-nebula .swirl--2{width:50%;height:50%;top:30%;left:40%;background:radial-gradient(ellipse,rgba(200,50,255,.4),rgba(150,0,200,.15),transparent);animation-delay:-2s}.scene-nebula .swirl--3{width:60%;height:40%;bottom:5%;left:10%;background:radial-gradient(ellipse,rgba(0,150,255,.35),transparent);animation-delay:-4s}@keyframes swirl-pulse{0%{opacity:.6;transform:scale(1) rotate(0)}to{opacity:1;transform:scale(1.1) rotate(5deg)}}.scene-galaxy{--glow: rgba(100, 150, 255, .3);background:radial-gradient(ellipse at center,#0a1030,#050818)}.scene-galaxy .arm{position:absolute;top:50%;left:50%;width:90%;height:20%;transform-origin:0% 50%;background:linear-gradient(90deg,rgba(180,160,255,.4),rgba(100,120,255,.1) 40%,transparent 80%);border-radius:50%;filter:blur(8px);animation:arm-rotate 40s linear infinite}.scene-galaxy .arm--1{transform:translate(-50%,-50%) rotate(0);animation-delay:0s}.scene-galaxy .arm--2{transform:translate(-50%,-50%) rotate(120deg);animation-delay:-13.3s}.scene-galaxy .arm--3{transform:translate(-50%,-50%) rotate(240deg);animation-delay:-26.6s}.scene-galaxy .core{position:absolute;top:50%;left:50%;width:25%;height:25%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,240,200,.8),rgba(200,180,100,.3),transparent);filter:blur(4px)}@keyframes arm-rotate{0%{transform:translate(-50%,-50%) rotate(var(--start, 0deg))}to{transform:translate(-50%,-50%) rotate(calc(var(--start, 0deg) + 360deg))}}.scene-supernova{--glow: rgba(255, 100, 50, .3);background:radial-gradient(circle at center,#1a0800,#0a0200)}.scene-supernova .burst{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;animation:burst-pulse 3s ease-in-out infinite alternate}.scene-supernova .burst--core{width:15%;height:20%;background:radial-gradient(ellipse,#fff,#ffe080 30%,#ff8020 60%,transparent);filter:blur(3px)}.scene-supernova .burst--mid{width:40%;height:55%;background:radial-gradient(ellipse,rgba(255,120,30,.6),rgba(255,50,0,.2),transparent);filter:blur(10px);animation-delay:-1s}.scene-supernova .burst--outer{width:80%;height:80%;background:radial-gradient(ellipse,rgba(255,60,0,.2),rgba(150,0,50,.1),transparent);filter:blur(20px);animation-delay:-2s}.scene-supernova .ray{position:absolute;top:50%;left:50%;width:2px;height:45%;background:linear-gradient(to top,rgba(255,200,100,.6),transparent);transform-origin:bottom center;filter:blur(1px);animation:ray-pulse 2s ease-in-out infinite alternate}@keyframes burst-pulse{0%{opacity:.7;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}@keyframes ray-pulse{0%{opacity:.3}to{opacity:.8}}.scene-blackhole{--glow: rgba(200, 100, 255, .3);background:radial-gradient(circle at center,#080012,#020008)}.scene-blackhole .disk{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(65deg);border-radius:50%;animation:disk-spin 10s linear infinite}.scene-blackhole .disk--inner{width:30%;height:30%;background:radial-gradient(circle,#000 30%,rgba(255,150,50,.8) 60%,rgba(255,80,20,.4) 80%,transparent);border:2px solid rgba(255,200,100,.3);z-index:2}.scene-blackhole .disk--outer{width:80%;height:80%;background:conic-gradient(from 0deg,#ff963266,#c832ff4d,#ff641e66,#6400ff33,#ff963266);filter:blur(8px);z-index:1;animation-delay:-5s}.scene-blackhole .event-horizon{position:absolute;top:50%;left:50%;width:18%;height:18%;transform:translate(-50%,-50%);border-radius:50%;background:#000;box-shadow:0 0 30px 15px #000000e6,0 0 60px 20px #6400c833;z-index:3}@keyframes disk-spin{0%{transform:translate(-50%,-50%) rotateX(65deg) rotate(0)}to{transform:translate(-50%,-50%) rotateX(65deg) rotate(360deg)}}.scene-aurora{--glow: rgba(0, 255, 150, .3);background:linear-gradient(180deg,#020810,#051020,#081828)}.scene-aurora .wave{position:absolute;left:-10%;right:-10%;height:40%;filter:blur(20px);opacity:.5;animation:aurora-wave 8s ease-in-out infinite alternate}.scene-aurora .wave--1{top:15%;background:linear-gradient(90deg,transparent,rgba(0,255,150,.3),rgba(0,200,255,.3),transparent)}.scene-aurora .wave--2{top:25%;background:linear-gradient(90deg,transparent,rgba(100,0,255,.3),rgba(0,150,255,.2),transparent);animation-delay:-3s}.scene-aurora .wave--3{top:35%;background:linear-gradient(90deg,transparent,rgba(0,200,100,.2),rgba(200,0,255,.2),transparent);animation-delay:-6s}@keyframes aurora-wave{0%{transform:translate(-5%) scaleY(1);opacity:.4}50%{transform:translate(5%) scaleY(1.3);opacity:.7}to{transform:translate(-3%) scaleY(.9);opacity:.5}}.scene-cluster{--glow: rgba(255, 220, 100, .3);background:radial-gradient(ellipse at center,#101008,#080804)}.scene-cluster .cluster-star{position:absolute;border-radius:50%;animation:cluster-twinkle var(--dur) ease-in-out infinite alternate}@keyframes cluster-twinkle{0%{opacity:.4;box-shadow:0 0 4px var(--color)}to{opacity:1;box-shadow:0 0 12px var(--color)}}.scene-star{position:absolute;border-radius:50%;background:#fff;opacity:.7;animation:twinkle-mini var(--dur) ease-in-out infinite alternate}@keyframes twinkle-mini{0%{opacity:.3}to{opacity:.9}}.footer{position:relative;z-index:10;padding:3rem 2rem 2rem;text-align:center;color:#ffffff40;font-size:.8rem;letter-spacing:.1em}