:root{--orbit-speed: 12s}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top,#1e293b,#020617 60%);color:#fff;overflow:hidden}.app{min-height:100vh;display:flex;flex-direction:column;padding:24px}header{text-align:center;margin-bottom:20px}header h1{font-size:3rem;margin-bottom:8px}header p{opacity:.8}.controls{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:24px}.control{display:flex;gap:10px;align-items:center;background:#ffffff14;padding:12px 18px;border-radius:14px}button{background:#2563eb;color:#fff;border:none;padding:12px 18px;border-radius:14px;cursor:pointer;font-size:1rem}button:hover{opacity:.9}.space{position:relative;flex:1;display:grid;place-items:center}.sun{width:120px;height:120px;border-radius:999px;background:radial-gradient(circle,#fde047,#f59e0b);box-shadow:0 0 80px #fbbf24cc;position:absolute}.orbit-ring{width:420px;height:420px;border:2px dashed rgba(255,255,255,.2);border-radius:999px;position:absolute;transition:opacity .3s ease}.orbit-ring.hidden{opacity:0}.orbit{width:420px;height:420px;position:relative;animation:spin var(--orbit-speed) linear infinite}.planet{width:48px;height:48px;border-radius:999px;background:linear-gradient(135deg,#38bdf8,#2563eb);position:absolute;top:50%;left:100%;transform:translate(-50%,-50%);box-shadow:0 0 30px #38bdf899}.moon-orbit{width:90px;height:90px;position:absolute;top:-20px;left:-20px;animation:spin 4s linear infinite reverse}.moon{width:16px;height:16px;border-radius:999px;background:#e2e8f0;position:absolute;top:0;left:50%}footer{text-align:center;padding-top:12px;opacity:.7}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}