:root{color-scheme:dark;--cyan:#64d8e8;--coral:#e4838e;--silver:#cbd5e6;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#040814;color:#e6edf4;font-size:16px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0}button,input,select{font:inherit}button,select{min-height:2.75rem;border:1px solid #334354;border-radius:.65rem;background:#0c1423;color:#d6e8f9;padding:.55rem .85rem;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){border-color:#64d8e8a0}button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}[hidden]{display:none!important}
#stage{position:relative;height:100vh;height:100dvh;width:100%;overflow:hidden;background:#040814;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none}
#aim{position:absolute;left:50%;top:50%;width:4rem;height:4rem;transform:translate(-50%,-50%);pointer-events:none;border:1px solid #b9c3d080;border-radius:50%;z-index:2}#aim:after{content:"";position:absolute;inset:-.5rem;border:1px solid #64d8e810;border-radius:50%}#aim.selected{border-color:var(--silver)}#aim.selected[data-tone=blue]{border-color:var(--cyan)}#aim.selected[data-tone=red]{border-color:var(--coral)}#lockProgress{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);transform:rotate(-90deg);overflow:visible;opacity:0}#lockProgress circle{fill:none;stroke:var(--cyan);stroke-width:2.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}#aim.locking #lockProgress{opacity:1}
.floating{position:absolute;z-index:5;top:max(1rem,env(safe-area-inset-top))}.primary{background:#133042;border-color:#4c8c9c;color:#dcf8fb}#start{left:1rem;max-width:calc(100% - 6rem);font-size:.875rem}.settings{right:max(1rem,env(safe-area-inset-right));font-size:.875rem;background:#080e1b99;border-color:#8d9caa80;display:flex;align-items:center;gap:.35rem}.settings span{font-size:1.2rem;line-height:1}
.empty-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 3rem);max-width:26rem;text-align:center;background:#040814;padding:2rem .5rem;z-index:3}.eyebrow{font-size:.875rem;letter-spacing:.25em;color:#7c9bb0}.empty-state h1{font-size:1.4rem;line-height:1.5;font-weight:500;letter-spacing:.03em;margin:1rem 0}.empty-state p:not(.eyebrow){font-size:.875rem;line-height:1.8;color:#8ca1af}.empty-state button{margin-top:.7rem}.status{position:absolute;z-index:3;top:calc(max(1rem,env(safe-area-inset-top)) + 3.3rem);left:1rem;right:1rem;margin:0;text-align:center;line-height:1.6;color:#9bafbd;font-size:.875rem;pointer-events:none;white-space:pre-line}.status:empty{display:none}
.satellite-info{position:absolute;z-index:4;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));margin:0 auto;max-width:40rem;max-height:calc(50dvh - 3.5rem - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;padding:.75rem 1rem;border:1px solid #64d8e880;border-radius:.85rem;background:linear-gradient(120deg,#0b1625ee,#070e1cea);backdrop-filter:blur(8px);box-shadow:0 0 28px #64d8e809;pointer-events:auto}.satellite-info header{display:flex;align-items:center;gap:.65rem;min-height:1.5rem}.satellite-info h2{font-size:1.125rem;line-height:1.3;font-weight:600;margin:0;overflow-wrap:anywhere}.satellite-info header>span{font-family:"SFMono-Regular",Consolas,monospace;font-size:.75rem;color:#a8b4c3}.satellite-info p{font-size:.875rem;line-height:1.5;color:#c0c9d6;margin:.4rem 0 .6rem}#satDescription{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}#musicToggle{margin-left:auto;background:none;border:0;min-width:2rem;min-height:2rem;padding:0;color:var(--silver);font-size:1.3rem}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem .65rem;border-top:1px solid #a1b8ca33;padding-top:.55rem;margin:.5rem 0 0}.metrics dt{font-size:.75rem;color:#91a2b5;margin-bottom:.15rem}.metrics dd{font-family:"Bahnschrift","DIN Alternate","PingFang SC",sans-serif;font-variant-numeric:tabular-nums;font-size:clamp(.6875rem,3.1vw,.875rem);font-weight:500;margin:0;white-space:nowrap}
.tone-blue{color:var(--cyan)}.tone-red{color:var(--coral)}.tone-silver{color:var(--silver)}#nearbyNames{position:absolute;z-index:3;top:max(1rem,env(safe-area-inset-top));left:max(1rem,env(safe-area-inset-left));width:min(11rem,calc(50vw - 3rem));margin:0;padding:0;list-style:none;background:transparent;font-size:.8125rem;line-height:1.55;pointer-events:none}#nearbyNames:empty{display:none}#nearbyNames li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000}
#navigation{position:absolute;inset:0;pointer-events:none;z-index:2}.navigation-marker{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%);color:var(--cyan);text-shadow:0 1px 4px #000}.navigation-arrow{display:block;font-size:1.1rem;line-height:1}.navigation-label{font-size:.75rem;line-height:1.4;white-space:nowrap;margin-top:.15rem}
.caption{font-size:.875rem;line-height:1.65;color:#8ea3b1;overflow-wrap:anywhere}dialog{width:calc(100% - 1.5rem);max-width:36rem;max-height:calc(100dvh - 2rem);padding:0;border:1px solid #2b4354;border-radius:1rem;background:#09111d;color:#dce6ef}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.panel-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #20313e;background:#09111d;z-index:1}.panel-header h2{font-size:1.125rem;margin:0;font-weight:550}.panel-header button{font-size:.875rem}.panel-body{padding:0 1.25rem 1.25rem}.panel-body section{padding:1.25rem 0;border-bottom:1px solid #1c2c37}.panel-body h3{font-size:1rem;font-weight:550;margin:0 0 .75rem}.panel-body p{line-height:1.65;margin:.65rem 0}.actions{display:flex;flex-wrap:wrap;gap:.5rem}.actions button{font-size:.875rem}label{display:block;font-size:.875rem;margin:1rem 0 .4rem}select{width:100%;font-size:.875rem}details{margin-top:1.25rem}summary{font-size:.875rem;min-height:2.75rem;padding:.6rem 0;cursor:pointer}pre{font-family:ui-monospace,monospace;white-space:pre-wrap;font-size:.875rem;line-height:1.7;overflow-wrap:anywhere}.fatal{position:fixed;inset:30% 1rem auto;text-align:center;color:#ffc68f}.error-text{color:#ffc68f!important}.permission-body{padding:1.5rem}.permission-body h2{font-size:1.3rem;font-weight:550;line-height:1.5;margin:.8rem 0}.permission-body>p{line-height:1.8}.permission-body .actions{margin-top:1.25rem}.permission-body .eyebrow{margin-top:0}
@media(min-width:600px){.metrics{grid-template-columns:repeat(5,minmax(0,1fr))}.satellite-info{padding:.8rem 1.1rem}.metrics dd{font-size:.95rem}.satellite-info h2{font-size:1.25rem}}
@media(min-width:768px){#start{left:50%;transform:translateX(-50%)}.empty-state h1{font-size:1.65rem}#nearbyNames{font-size:.875rem}}
@media(orientation:landscape) and (max-height:500px){.satellite-info{padding:.5rem .8rem;max-width:42rem}.satellite-info h2{font-size:1rem}.metrics{grid-template-columns:repeat(5,minmax(0,1fr));margin:.3rem 0 0;padding-top:.3rem}.metrics dd{font-size:.85rem}#satDescription{-webkit-line-clamp:1;margin:.25rem 0}.empty-state{padding:.5rem}.empty-state h1{margin:.5rem 0}.empty-state button{margin:0}#nearbyNames{font-size:.75rem;line-height:1.35}}
@media(prefers-reduced-motion:no-preference){.satellite-info{animation:reveal .15s ease-out}@keyframes reveal{from{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:none}}}

#status{left:auto;right:1rem;top:calc(max(1rem,env(safe-area-inset-top)) + 3rem);width:calc(50vw - 1.5rem);text-align:right;font-size:.75rem;line-height:1.5}
#satDescription{display:block;-webkit-line-clamp:unset;overflow:visible}
.satellite-info{height:clamp(14rem,28dvh,17rem);touch-action:pan-y;scrollbar-width:thin}
#musicToggle.music-toggle{right:7rem;min-width:2.75rem;min-height:2.75rem;margin:0;border:1px solid #64d8e840;border-radius:.65rem;background:#091421d9;color:var(--cyan);font-size:1.3rem}
.zoom-control{--zoom-position:.5;position:absolute;z-index:5;right:max(.125rem,env(safe-area-inset-right));top:25%;height:32dvh;width:3rem;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ns-resize;opacity:.46;transform:translateX(.2rem);transition:opacity .2s,transform .2s;color:#fff;outline-offset:-3px}
.zoom-control.is-active,.zoom-control:focus-visible,.zoom-control:hover{opacity:1;transform:none}.zoom-control:focus-visible{outline:1px solid #ffffff80;border-radius:.4rem}.zoom-track{position:absolute;top:0;bottom:0;right:.875rem;width:1px;background:#ffffff40;pointer-events:none}.zoom-ticks{position:absolute;inset:0 -2px;background:repeating-linear-gradient(to top,transparent 0,transparent calc(10% - 1px),#ffffff60 calc(10% - 1px),#ffffff60 10%);mask-image:linear-gradient(#000,transparent 48%,transparent 52%,#000)}
.zoom-thumb{position:absolute;bottom:calc(var(--zoom-position)*100%);left:-5px;width:11px;height:18px;transform:translateY(50%);border:1px solid #ffffffc0;border-radius:3px;background:repeating-linear-gradient(to bottom,#080d18 0,#080d18 3px,#ffffffa0 3px,#ffffffa0 4px);box-shadow:0 0 8px #0008}.is-snapped .zoom-thumb{background:#fff;height:6px;border-radius:3px}.is-dragging .zoom-thumb{box-shadow:0 0 9px #ffffff30}
.zoom-detent{position:absolute;bottom:50%;left:-7px;width:15px;height:1px;background:#fff}.zoom-detent b,.zoom-detent small{position:absolute;right:21px;white-space:nowrap;font-weight:400;text-shadow:0 1px 4px #000;font-size:.6875rem;letter-spacing:.04em}.zoom-detent b{bottom:-4px}.zoom-detent small{top:9px;color:#ffffffb0;font-size:.625rem}.zoom-end{position:absolute;right:12px;white-space:nowrap;font-style:normal;font-size:.625rem;opacity:0;transition:opacity .2s}.zoom-max{top:-5px}.zoom-min{bottom:-5px}.is-active .zoom-end,.zoom-control:focus-visible .zoom-end{opacity:.7}.zoom-control output{position:absolute;right:2.5rem;bottom:calc(var(--zoom-position)*100%);transform:translateY(50%);font-family:Consolas,monospace;font-size:.8125rem;white-space:nowrap;text-shadow:0 1px 5px #000;opacity:0;pointer-events:none}.zoom-control.is-active:not(.is-snapped) output{opacity:1}
#skyView{position:absolute;z-index:5;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));min-height:2.75rem;background:#091421d9;border-color:#64d8e860;color:var(--cyan);font-size:.875rem}
#aim,#navigation,#nearbyNames{transition:opacity .35s ease}.globe-mode #aim,.globe-mode #navigation,.globe-mode #nearbyNames{opacity:0;pointer-events:none}