.solar-system-container{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,transparent 0%,transparent 30%,rgba(5,5,5,.2) 50%,rgba(5,5,5,.5) 75%,rgba(5,5,5,.7) 100%)}.solar-system{position:relative;width:560px;height:560px}.sun{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;background:radial-gradient(circle,#ffd93d,#ff9500 70%,#ff6b00);border-radius:50%;box-shadow:0 0 40px 10px #ffd93d66,0 0 80px 20px #ff950033;z-index:10}.orbit{position:absolute;top:50%;left:50%;width:var(--orbit-size);height:var(--orbit-size);margin-top:calc(var(--orbit-size) / -2);margin-left:calc(var(--orbit-size) / -2);border:1px solid var(--accent-color);border-radius:50%;animation:orbit var(--duration) linear infinite}.planet{position:absolute;top:50%;left:0;width:var(--planet-size);height:var(--planet-size);margin-top:calc(var(--planet-size) / -2);margin-left:calc(var(--planet-size) / -2);background:radial-gradient(circle at 30% 30%,var(--planet-color) 0%,color-mix(in srgb,var(--planet-color) 60%,black) 100%);border-radius:50%;box-shadow:0 0 calc(var(--planet-size) * .5) calc(var(--planet-size) * .1) color-mix(in srgb,var(--planet-color) 30%,transparent);filter:saturate(.2) brightness(.85)}.planet.saturn:after{content:"";position:absolute;top:50%;left:50%;width:calc(var(--planet-size) * 2.2);height:calc(var(--planet-size) * 2.2);border:2px solid rgba(244,213,158,.4);border-radius:50%;transform:translate(-50%,-50%)}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:500px){.solar-system{transform:scale(.7)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #050505;--text-color: #e0e0e0;--accent-color: #2a2a2a;--text-muted: #666666}html,body,#root{width:100%;height:100%;max-height:100vh;overflow:hidden}body{font-family:Space Mono,JetBrains Mono,SF Mono,Monaco,Inconsolata,Fira Mono,Droid Sans Mono,Source Code Pro,monospace;background-color:var(--bg-color);background-image:radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 40px 70px,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 50px 160px,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 90px 40px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 160px 120px,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 200px 50px,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 220px 150px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 260px 90px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 300px 130px,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 340px 30px,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 380px 170px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 420px 60px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 460px 140px,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 500px 100px,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 80px 200px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 150px 250px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 250px 220px,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 350px 280px,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 450px 240px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 70px 320px,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 180px 360px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 280px 340px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 400px 380px,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 520px 300px,rgba(255,255,255,.5),transparent);background-size:550px 400px;color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{position:relative}.header{position:absolute;top:0;left:0;padding:24px 32px;z-index:100}.logo{font-size:16px;font-weight:400;letter-spacing:.25em;color:var(--text-color);opacity:.7}.footer{position:absolute;bottom:0;left:0;right:0;padding:16px 32px;text-align:center;z-index:100;display:flex;align-items:center;justify-content:center;gap:6px}.footer p{font-size:14px;color:var(--text-color);letter-spacing:.05em;opacity:.6}.footer-logo{height:24px;width:auto;opacity:.6}.help-button{position:fixed;top:24px;right:32px;background:none;border:1px solid var(--accent-color);color:var(--text-color);opacity:.5;width:24px;height:24px;border-radius:50%;font-family:inherit;font-size:14px;cursor:pointer;transition:opacity .2s;z-index:100}.help-button:hover{opacity:.8}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#0a0a0a;border:1px solid var(--accent-color);padding:24px;max-width:400px;width:90%}.modal-header{color:#4a9eff;font-size:12px;margin-bottom:16px;opacity:.8}.modal-content{margin-bottom:24px}.modal-content p{font-size:14px;line-height:1.6;color:var(--text-color);margin-bottom:12px}.modal-content p:last-child{margin-bottom:0}.modal-content a{color:#4a9eff;text-decoration:none}.modal-content a:hover{text-decoration:underline}.modal-button{display:block;margin-left:auto;background:none;border:1px solid var(--accent-color);color:var(--text-color);padding:8px 24px;font-family:inherit;font-size:12px;cursor:pointer;transition:background .2s}.modal-button:hover{background:var(--accent-color)}
