@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap");:root{--viewport-scale:min(1vh,1vw);--base-unit:clamp(8px,var(--viewport-scale),16px);--sun-size:clamp(60px,calc(var(--base-unit) * 5),120px);--orbit-scale:clamp(0.6,calc(var(--viewport-scale) * 0.1),1);--mercury-size:clamp(6px,calc(var(--base-unit) * 0.6),12px);--venus-size:clamp(8px,calc(var(--base-unit) * 0.9),18px);--earth-size:clamp(8px,calc(var(--base-unit) * 1),20px);--mars-size:clamp(7px,calc(var(--base-unit) * 0.7),14px);--jupiter-size:clamp(20px,calc(var(--base-unit) * 2.5),50px);--saturn-size:clamp(18px,calc(var(--base-unit) * 2.2),44px);--uranus-size:clamp(12px,calc(var(--base-unit) * 1.6),32px);--neptune-size:clamp(12px,calc(var(--base-unit) * 1.5),30px);--pluto-size:clamp(4px,calc(var(--base-unit) * 0.5),10px)}*{box-sizing:border-box}*,body,html{padding:0;margin:0}body,html{min-height:100vh;width:100vw}body{background-color:#000;min-height:100vh;overflow:hidden;position:relative}.solar-system,body{display:flex;justify-content:center;align-items:center}.solar-system{position:fixed;width:100vw;height:100vh;transform-origin:center center}.sun{width:var(--sun-size);height:var(--sun-size);border-radius:50%;background:radial-gradient(circle at center,#fff7e6 0,gold 20%,#ff8c00 45%,#ff4500 100%);box-shadow:0 0 60px #ff8c00,0 0 120px rgba(255,140,0,.4),inset -4px -4px 20px rgba(0,0,0,.3);z-index:1}.orbit,.sun{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit{border:1px solid hsla(0,0%,100%,.2)}.orbit,.planet{border-radius:50%;pointer-events:none}.planet{position:absolute;left:50%;top:50%;transform-origin:center center;box-shadow:0 0 10px hsla(0,0%,100%,.2);z-index:2}.mercury{width:var(--mercury-size);height:var(--mercury-size);background:linear-gradient(45deg,#807e7d,#6e6c6b 50%,#4a4a4a);box-shadow:inset -2px -2px 4px rgba(0,0,0,.4),0 0 8px hsla(0,0%,100%,.2)}.venus{width:var(--venus-size);height:var(--venus-size);background:linear-gradient(45deg,#e6b87c,#c7956b 50%,#9e7854);box-shadow:inset -3px -3px 6px rgba(0,0,0,.4),0 0 12px hsla(34,68%,69%,.4)}.earth{width:var(--earth-size);height:var(--earth-size);background:linear-gradient(45deg,#4b6995,#3f7ac5 50%,#204b8f);box-shadow:inset -3px -3px 6px rgba(0,0,0,.4),0 0 15px rgba(63,122,197,.5)}.mars{width:var(--mars-size);height:var(--mars-size);background:linear-gradient(45deg,#c1440e,#a93b0c 50%,#8b2f09);box-shadow:inset -2px -2px 4px rgba(0,0,0,.4),0 0 12px rgba(193,68,14,.4)}.jupiter{width:var(--jupiter-size);height:var(--jupiter-size);background:linear-gradient(45deg,#c88b3a,#b47431 50%,#915c27);box-shadow:inset -4px -4px 8px rgba(0,0,0,.4),0 0 20px rgba(200,139,58,.4)}.saturn{width:var(--saturn-size);height:var(--saturn-size);background:linear-gradient(45deg,#c5ab6e,#b69a5d 50%,#8f784a);box-shadow:inset -4px -4px 8px rgba(0,0,0,.4),0 0 20px hsla(42,43%,60%,.4)}.saturn-rings{position:absolute;width:calc(var(--saturn-size) * 2);height:calc(var(--saturn-size) * .1);background:linear-gradient(90deg,hsla(42,43%,60%,.1),hsla(42,43%,60%,.8) 50%,hsla(42,43%,60%,.1));border-radius:50%;transform:rotate(-30deg);top:50%;left:50%;transform-origin:center;margin-left:calc(var(--saturn-size) * -1);margin-top:calc(var(--saturn-size) * -.05);box-shadow:inset 0 0 10px rgba(0,0,0,.3),0 0 8px hsla(42,43%,60%,.3)}.uranus{width:var(--uranus-size);height:var(--uranus-size);background:linear-gradient(45deg,#4fd0e7,#3cbed5 50%,#2da4b9);box-shadow:inset -3px -3px 6px rgba(0,0,0,.4),0 0 15px rgba(79,208,231,.4)}.neptune{width:var(--neptune-size);height:var(--neptune-size);background:linear-gradient(45deg,#4b70dd,#3a5fc7 50%,#2d4ba6);box-shadow:inset -3px -3px 6px rgba(0,0,0,.4),0 0 15px rgba(75,112,221,.4)}.pluto{width:var(--pluto-size);height:var(--pluto-size);background:linear-gradient(45deg,#936c5a,#7d5b4b 50%,#634639);box-shadow:inset -1px -1px 3px rgba(0,0,0,.4),0 0 8px rgba(147,108,90,.3)}.solar-system-container{position:fixed;width:100vw;height:100vh;background-color:#000}.controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);padding:15px;border-radius:10px;display:flex;gap:20px;align-items:center;z-index:10;pointer-events:all}.controls button{background:#333;color:#fff;border:none;padding:8px 16px;border-radius:5px;cursor:pointer;transition:background .3s}.controls button:hover{background:#444}.speed-control{display:flex;align-items:center;gap:10px;color:#fff}.orbit-hidden{border-color:transparent}@media (max-width:768px){.solar-system{transform:none}.controls{flex-direction:column;gap:10px;bottom:10px;padding:10px}.planet-info{left:10px;right:10px;top:10px;max-width:none;font-size:14px}}@media (max-width:480px){.solar-system{transform:none}}@media (max-height:600px){.solar-system{transform:none}}@media (max-height:500px) and (orientation:landscape){.controls,.solar-system{transform:none}.controls{flex-direction:row;right:10px;left:auto}}