:root{color-scheme:dark;--ink:#f7f8ff;--muted:#a6aecb;--panel:rgba(23,32,67,.74);--line:rgba(184,202,255,.18);--planet-color:#36c9ee;font-family:Nunito,ui-rounded,"Avenir Next",system-ui,sans-serif}*{box-sizing:border-box}html,body{min-width:320px;min-height:100vh}body{margin:0;overflow-x:hidden;color:var(--ink);background:#04091d}.space,.space:before,.space:after{position:fixed;inset:0;pointer-events:none;content:""}.space{z-index:-3;background:radial-gradient(ellipse at 50% 38%,#172c68,#0b1945 30%,#050b26 67%,#030617)}.space:before{z-index:-2;opacity:.68;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,rgba(141,167,255,.8) 0 1px,transparent 1.5px);background-size:103px 127px,181px 173px}.space:after{z-index:-1;background:radial-gradient(circle at 12% 25%,rgba(111,90,255,.2),transparent 23%),radial-gradient(circle at 88% 60%,rgba(40,177,224,.14),transparent 25%)}.page-shell{width:min(calc(100% - 32px),960px);margin:auto;padding:30px 0 22px;text-align:center}.site-header{display:inline-flex;align-items:center;gap:12px;text-align:left}.brand-mark{position:relative;width:40px;height:40px;border:2px solid #e4e9ff;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 16px #819dff}.brand-mark:after{position:absolute;top:11px;left:-8px;width:52px;height:13px;border:2px solid #d9dcff;border-radius:50%;content:""}.brand-mark span{position:absolute;top:9px;left:10px;width:7px;height:7px;border-radius:50%;background:#a97bf2}.eyebrow{margin:0 0 1px;color:#aeb8df;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase}h1{margin:0;font-size:clamp(2rem,5vw,3.1rem);line-height:1;letter-spacing:-.06em}h1 span{color:#bc85f2}.planet-stage{position:relative;display:grid;place-items:center;height:430px;max-width:720px;margin:8px auto 0;overflow:hidden}.stage-copy{position:absolute;top:10px;z-index:2}.stage-copy h2{margin:0;font-size:1.05rem}.sparkle{margin:0 0 4px;color:#ffd377;font-size:1.3rem}.drag-hint{margin:13px 0;color:var(--muted);font-size:.76rem}.planet-wrap{z-index:1;width:285px;height:285px;border-radius:50%;filter:drop-shadow(0 0 25px color-mix(in srgb,var(--planet-color),transparent 45%))}.planet{--rotation:0deg;position:relative;width:100%;height:100%;overflow:hidden;border-radius:50%;cursor:grab;transform:rotate(var(--rotation));background:radial-gradient(circle at 34% 25%,color-mix(in srgb,var(--planet-color),white 52%),var(--planet-color) 39%,color-mix(in srgb,var(--planet-color),#091b65 48%) 78%,#06124a);box-shadow:inset -28px -24px 45px rgba(1,7,42,.7),inset 20px 14px 35px rgba(255,255,255,.25),0 0 18px rgba(125,204,255,.7);touch-action:none}.planet:active{cursor:grabbing}.planet-land{position:absolute;background:color-mix(in srgb,var(--planet-color),#b5e86e 42%);opacity:.85}.land-one{top:42px;left:22px;width:120px;height:75px;border-radius:60% 35% 48% 40%;transform:rotate(-25deg)}.land-two{right:28px;bottom:20px;width:90px;height:130px;border-radius:40% 60% 45% 60%;transform:rotate(30deg)}.land-three{bottom:45px;left:111px;width:48px;height:38px;border-radius:60% 40%}.planet-cloud{position:absolute;width:88px;height:17px;border-radius:50%;background:rgba(240,255,255,.45);filter:blur(3px)}.cloud-one{top:100px;right:-8px;transform:rotate(-16deg)}.cloud-two{bottom:86px;left:-13px;transform:rotate(15deg)}.planet-shine{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.32),transparent 32%)}.orbit{position:absolute;width:520px;height:155px;border:1px solid rgba(119,193,255,.5);border-radius:50%;transform:rotate(-16deg)}.orbit-two{width:600px;height:180px;border-style:dotted;opacity:.35;transform:rotate(19deg)}.moon{position:absolute;border-radius:50%;background:#bfceef;box-shadow:inset -7px -5px 7px #626c9a,0 0 10px #bbcaff}.moon-one{top:122px;left:19%;width:18px;height:18px}.moon-two{right:19%;bottom:105px;width:11px;height:11px;background:#f4b9dc}.control-panel{display:flex;align-items:center;gap:18px;max-width:820px;margin:auto;padding:17px 14px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 45px #0004;backdrop-filter:blur(14px)}.control-block{min-width:0}.name-control{width:24%}.color-control{width:25%}.speed-control{flex:1}label,.control-label{display:block;margin-bottom:9px;color:#dfe5ff;font-size:.65rem;letter-spacing:.04em;text-transform:uppercase}input[type=text]{width:100%;padding:9px 10px;border:1px solid #394568;border-radius:8px;outline:none;color:#fff;background:#050c26aa}.color-options{display:flex;gap:9px}.color-choice{width:19px;height:19px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--choice);box-shadow:0 0 0 1px #ffffff66}.color-choice:nth-child(1){--choice:#36c9ee}.color-choice:nth-child(2){--choice:#54cf83}.color-choice:nth-child(3){--choice:#9d62e8}.color-choice:nth-child(4){--choice:#ff9a45}.color-choice:nth-child(5){--choice:#f05e91}.color-choice.selected{outline:2px solid white;outline-offset:3px}button:focus-visible,.planet:focus-visible,input:focus-visible{outline:3px solid #f8d37a;outline-offset:3px}input[type=text]:focus{border-color:#8ba9ff;box-shadow:0 0 0 3px #8ba9ff38}input[type=range]{width:100%;accent-color:#49c8ed;cursor:pointer}.range-labels{display:flex;justify-content:space-between;margin-top:3px;color:#9ba6c5;font-size:.58rem}.reset-button{flex:0 0 58px;min-height:43px;border:1px solid #435073;border-radius:9px;color:#e7ebff;background:#8292c921;cursor:pointer;font-size:.68rem}.reset-button span{display:block;font-size:1rem}.status{min-height:19px;margin:12px 0 0;color:#c0cae7;font-size:.75rem}footer{margin-top:10px;color:#7d89aa;font-size:.65rem}footer span{color:#f2678e;font-size:.9rem}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){.page-shell{padding-top:22px}.planet-stage{height:375px}.planet-wrap{width:235px;height:235px}.orbit{width:440px}.control-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}.name-control,.color-control,.speed-control{width:auto}.speed-control{grid-column:1/-1}.reset-button{position:absolute;right:26px;margin-top:-58px}}@media(max-width:390px){.planet-stage{height:350px}.planet-wrap{width:210px;height:210px}.moon-one{left:8%}.moon-two{right:8%}.control-panel{padding:14px 11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}