.planets{display:flex;gap:1rem;padding:1.5rem;overflow-x:auto;border-radius:1rem;background:radial-gradient(circle at 0 50%,#fbbf24 0,#7c2d12 4rem,#0f172a 9rem,#020617);background-attachment:local;color:#e2e8f0}.planet{position:relative;flex:none;width:200px;height:290px;margin:0;text-align:center;animation:appear .6s ease-out both}.planet svg{display:block;overflow:visible}.planet:not(.placeholder){padding:0;border:none;border-radius:0;background:none;box-shadow:none;color:inherit;font-weight:inherit;line-height:inherit;cursor:pointer;outline:none;perspective:800px}.globe{transform-box:fill-box;transform-origin:center;transition:transform .3s ease-out,filter .3s}.planet:hover .globe,.planet:focus .globe{transform:scale(1.12);filter:drop-shadow(0 0 calc(var(--size) / 3) var(--color))}.planets:has(.planet:hover) .planet:not(:hover,.placeholder)>*{opacity:.5}.front,.back{position:absolute;inset:0;backface-visibility:hidden;transition:transform .6s ease-in-out,opacity .3s,visibility 0s .3s}.back,.planet.flipped .front{visibility:hidden}.planet.flipped .back{visibility:visible;transform:rotateY(0)}.back{padding:3rem 1rem;transform:rotateY(180deg)}.back dl{margin:.75rem 0 0;font-size:.85rem}.back dt{opacity:.7}.back dd{margin:0 0 .5rem;font-weight:600}.planet.flipped .front{transform:rotateY(-180deg)}@media(prefers-reduced-motion:reduce){.globe,.front,.back{transition:none}}.caption{margin:0}.planet small{display:block;opacity:.7}.stats{font-family:monospace;font-size:.85rem;opacity:.7}.placeholder{animation:none}@keyframes appear{0%{opacity:0;transform:scale(.6)}}.planet-picker{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}.planet-picker label{display:inline-flex;align-items:center;gap:.35rem;margin:0}.planet-picker input{margin:0}
