*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body,html{background-color:#050814;background-image:radial-gradient(circle,#141e3ccc 0%,#0000 80%),url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23FFF' opacity='0.5'/%3E%3Ccircle cx='40' cy='30' r='1.5' fill='%23FFF' opacity='0.8'/%3E%3Ccircle cx='80' cy='70' r='0.8' fill='%23FFF' opacity='0.4'/%3E%3Ccircle cx='20' cy='80' r='2' fill='%23FFF' opacity='0.9'/%3E%3C/svg%3E");background-size:100% 100%,200px 200px;width:100vw;height:100vh;font-family:Comic Sans MS,Chalkboard SE,sans-serif;overflow:hidden}#root{perspective:1200px;width:100%;height:100%;position:relative}.playback-controls{z-index:50;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.btn-toggle{border:4px solid #fff;border-radius:40px;padding:15px 40px;font-size:2rem;transition:all .2s;box-shadow:0 10px 20px #00000080}.btn-pause{color:#fff;background:#ff4b4b}.btn-play{color:#fff;background:#4facfe}.solar-system-stage{width:100%;height:100%;transform-style:preserve-3d;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(65deg)}.sun{transform-style:preserve-3d;background:radial-gradient(circle at 30% 30%,#fff7b0 0%,#fc0 30%,#ff4500 90%);border-radius:50%;justify-content:center;align-items:center;font-size:5vmin;animation:3s infinite alternate sun-pulse;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(-65deg);box-shadow:0 0 60px #f70,inset -5px -5px 20px #ff000080}@keyframes sun-pulse{0%{transform:translate(-50%,-50%)rotateX(-65deg)scale(1);box-shadow:0 0 40px #f70}to{transform:translate(-50%,-50%)rotateX(-65deg)scale(1.05);box-shadow:0 0 80px #fc0,0 0 150px #ff640066}}.orbit-container{pointer-events:none;transform-style:preserve-3d;border:1px solid #6496ff26;border-radius:50%;animation:linear infinite spin;position:absolute;top:50%;left:50%;box-shadow:0 0 15px #6496ff0d}@keyframes spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.planet-wrapper{cursor:pointer;pointer-events:auto;transform-style:preserve-3d;padding:20px;animation:linear infinite counter-spin;position:absolute;top:0;left:50%}@keyframes counter-spin{0%{transform:translate(-50%,-50%)rotate(360deg)}to{transform:translate(-50%,-50%)rotate(0)}}.planet{transform-style:preserve-3d;border-radius:50%;transition:transform .2s;position:relative;transform:rotateX(-65deg);box-shadow:inset -1.5vmin -1.5vmin 2vmin #000c,inset .5vmin .5vmin 1vmin #fff6,0 0 10px #00000080}.planet:hover{transform:rotateX(-65deg)scale(1.2)}.planet.saturn:after{content:"";border:4px solid #e0c296b3;border-radius:50%;width:180%;height:180%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(75deg);box-shadow:0 0 10px #e0c2964d,inset 0 0 10px #e0c2964d}.planet.uranus:after{content:"";border:2px solid #71c8d699;border-radius:50%;width:150%;height:150%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateY(75deg)}.paused{animation-play-state:paused!important}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100;background:#00000ad9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.detail-card{text-align:center;background:linear-gradient(135deg,#fff,#e6f0fa);border-radius:30px;width:450px;max-width:90%;padding:30px;animation:.4s cubic-bezier(.175,.885,.32,1.275) popIn;box-shadow:0 20px 50px #000c,0 0 0 5px #fff3}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.card-planet-preview{border-radius:50%;margin:0 auto 20px;box-shadow:inset -15px -15px 30px #0009,inset 5px 5px 10px #ffffff80}.card-planet-preview.saturn:after{content:"";border:6px solid #e0c296cc;border-radius:50%;width:160%;height:160%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(75deg)}.card-planet-preview.uranus:after{content:"";border:4px solid #71c8d6cc;border-radius:50%;width:140%;height:140%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateY(75deg)}.card-title{color:#1a2a40;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;font-size:3.5rem}.card-fact{color:#334;margin-bottom:30px;font-size:1.6rem;font-weight:700;line-height:1.4}.button-group{justify-content:center;gap:15px;display:flex}button{cursor:pointer;border:none;border-radius:20px;padding:15px 25px;font-family:inherit;font-size:1.5rem;font-weight:700;transition:transform .1s}button:active{transform:scale(.95)}.btn-listen{color:#fff;background:#4facfe;box-shadow:0 5px #288add}.btn-close{color:#fff;background:#ff4b4b;box-shadow:0 5px #cc2a2a}