.moon-phase-sandbox{--moon-panel-bg: rgba(6, 10, 18, .76);--moon-panel-border: rgba(203, 213, 225, .18);--moon-control-bg: rgba(17, 24, 39, .72);--moon-control-border: rgba(203, 213, 225, .22);--moon-control-hover: rgba(245, 158, 11, .52);--moon-selected-bg: rgba(245, 158, 11, .18);--moon-selected-border: rgba(245, 158, 11, .62);--moon-selected-text: #ffe8b6;--moon-muted: rgba(226, 232, 240, .72);position:relative;width:100vw;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 72% 22%,rgba(255,196,120,.13),transparent 22rem),radial-gradient(circle at 18% 72%,rgba(76,201,240,.1),transparent 18rem),#02040b;color:#f8fafc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.moon-phase-canvas{position:absolute;inset:0;touch-action:none}.moon-phase-canvas canvas{display:block;width:100%;height:100%;cursor:grab}.moon-phase-canvas canvas:active{cursor:grabbing}.moon-phase-sandbox.is-surface .moon-phase-canvas canvas{cursor:grab}.moon-phase-sandbox.is-scene-unavailable .moon-phase-canvas{opacity:.42}.moon-phase-sandbox.is-scene-unavailable .moon-hud:not(.moon-scene-fallback){display:none}.moon-hud{position:absolute;z-index:5;border:1px solid var(--moon-panel-border);background:var(--moon-panel-bg);box-shadow:0 18px 42px #00000038;backdrop-filter:blur(14px)}.moon-hud-primary{top:1rem;left:1rem;display:flex;max-width:min(58rem,calc(100vw - 2rem));align-items:flex-start;gap:.55rem;border-radius:.5rem;padding:.58rem}.moon-info-toggle{top:1rem;left:1rem;border-radius:.5rem}.moon-scene-fallback{top:50%;left:50%;display:grid;width:min(28rem,calc(100vw - 2rem));gap:.8rem;border-radius:.5rem;padding:.9rem;transform:translate(-50%,-50%)}.moon-scene-fallback div{display:grid;gap:.22rem}.moon-scene-fallback span{color:var(--moon-muted);font-size:.76rem;font-weight:750}.moon-scene-fallback strong{color:#fff;font-size:1rem;line-height:1.35}.moon-scene-fallback .moon-text-button{justify-self:start}.moon-readouts{display:grid;width:min(16.75rem,calc(100vw - 5.4rem));grid-template-columns:minmax(0,11rem) 5.2rem;gap:.55rem;justify-content:stretch}.moon-readouts div{min-width:0;border:1px solid rgba(203,213,225,.1);border-radius:.38rem;background:#0f172a85;padding:.5rem .6rem}.moon-readouts .moon-readout-lit{width:auto}.moon-readouts .moon-readout-view{grid-column:1 / -1;width:auto;min-width:0}.moon-readouts .moon-eclipse-readout{grid-column:1 / -1;border:1px solid rgba(251,146,60,.38);background:#431407b8}.moon-eclipse-readout strong{color:#fed7aa}.moon-readouts span,.moon-date span,.moon-speed output,.moon-toggle span,.moon-location-pill span{color:var(--moon-muted);font-size:.76rem;font-weight:650}.moon-readouts strong{display:block;overflow:hidden;margin-top:.1rem;color:#fff;font-size:.96rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.moon-readouts .moon-readout-view strong{overflow:visible;text-overflow:clip;white-space:normal}.moon-tutorial{top:1rem;right:1rem;display:grid;width:min(22rem,calc(100vw - 2rem));gap:.6rem;border-radius:.5rem;padding:.68rem;transition:border-color .16s ease,transform .16s ease}.moon-tutorial.is-advancing{border-color:#f59e0b80;transform:translateY(.08rem)}.moon-tutorial-header,.moon-tutorial-body{display:grid}.moon-tutorial-header{grid-template-columns:1fr auto;align-items:center;gap:.5rem}.moon-tutorial-header span{color:var(--moon-muted);font-size:.74rem;font-weight:760;letter-spacing:0}.moon-tutorial-close{width:1.9rem;min-height:1.9rem}.moon-tutorial-body{gap:.34rem}.moon-tutorial-body strong{color:#fff;font-size:.98rem;line-height:1.2}.moon-tutorial-body p{margin:0;color:#e2e8f0db;font-size:.82rem;line-height:1.35}.moon-tutorial-body kbd{justify-self:start;border:1px solid rgba(245,158,11,.38);border-radius:.3rem;background:#f59e0b21;color:#ffedc3;font:inherit;font-size:.76rem;font-weight:800;padding:.18rem .42rem}.moon-time-panel{right:1rem;bottom:1rem;display:grid;width:min(31rem,calc(100vw - 2rem));gap:.62rem;border-radius:.5rem;padding:.74rem}.moon-time-panel.is-collapsed{width:min(26rem,calc(100vw - 2rem));gap:0}.moon-date,.moon-speed,.moon-control-row,.moon-time-header,.moon-view-panel,.moon-location-pill,.moon-toggle{display:flex;align-items:center}.moon-date,.moon-speed{gap:.55rem}.moon-time-header{min-width:0;gap:.55rem}.moon-time-header .moon-date{min-width:0;flex:1}.moon-date span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.moon-control-row{flex-wrap:wrap;gap:.45rem}.moon-icon-button,.moon-text-button,.moon-presets button,.moon-segmented button{appearance:none;min-height:2.15rem;border:1px solid var(--moon-control-border);border-radius:.38rem;background:var(--moon-control-bg);color:#f8fafc;cursor:pointer;font:inherit;font-size:.78rem;font-weight:750}.moon-icon-button{display:inline-grid;width:2.25rem;place-items:center;padding:0}.moon-panel-action{flex:0 0 auto}.moon-text-button,.moon-presets button,.moon-segmented button{padding:.42rem .68rem}.moon-icon-button:hover,.moon-text-button:hover,.moon-presets button:hover,.moon-segmented button:hover{border-color:var(--moon-control-hover);color:var(--moon-selected-text)}.moon-speed input{min-width:8rem;flex:1;accent-color:#f59e0b}.moon-speed input[type=range]{appearance:none;height:1.4rem;background:transparent;cursor:pointer}.moon-speed input[type=range]::-webkit-slider-runnable-track{height:.32rem;border-radius:999px;background:linear-gradient(90deg,#94a3b861,#f59e0b9e)}.moon-speed input[type=range]::-moz-range-track{height:.32rem;border-radius:999px;background:linear-gradient(90deg,#94a3b861,#f59e0b9e)}.moon-speed input[type=range]::-webkit-slider-thumb{appearance:none;width:.9rem;height:.9rem;margin-top:-.29rem;border:2px solid #2a1b05;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 2px #fbbf2433}.moon-speed input[type=range]::-moz-range-thumb{width:.9rem;height:.9rem;border:2px solid #2a1b05;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 2px #fbbf2433}.moon-speed output{width:4.3rem;text-align:right}.moon-presets{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem}.moon-presets button{min-width:0;padding-right:.36rem;padding-left:.36rem;white-space:nowrap}.moon-presets button.is-active{border-color:var(--moon-selected-border);background:var(--moon-selected-bg);color:var(--moon-selected-text)}.moon-view-panel{bottom:1rem;left:1rem;max-width:calc(100vw - 2rem);flex-wrap:wrap;gap:.55rem;border-radius:.5rem;padding:.65rem}.moon-segmented{display:inline-flex;border:1px solid rgba(203,213,225,.12);border-radius:.42rem;background:#0f172a9e;padding:.18rem}.moon-segmented button{border-color:transparent;background:transparent}.moon-segmented button[aria-pressed=true]{border-color:var(--moon-selected-border);background:var(--moon-selected-bg);color:var(--moon-selected-text)}.moon-segmented button:disabled{cursor:default;opacity:1}.moon-toggle{gap:.42rem;border:1px solid rgba(203,213,225,.12);border-radius:.38rem;background:#0f172a9e;padding:.48rem .62rem}.moon-toggle input{appearance:none;accent-color:#f59e0b;display:grid;width:1rem;height:1rem;margin:0;place-items:center;border:1px solid rgba(203,213,225,.42);border-radius:.22rem;background:#02061785;cursor:pointer}.moon-toggle input:before{width:.48rem;height:.48rem;border-radius:.14rem;background:#f59e0b;content:"";opacity:0;transform:scale(.72);transition:opacity .12s ease,transform .12s ease}.moon-toggle input:checked{border-color:var(--moon-selected-border);background:#f59e0b24}.moon-toggle input:checked:before{opacity:1;transform:scale(1)}.moon-location-pill{gap:.38rem;border-radius:999px;background:#0f172ac2;padding:.5rem .68rem}.moon-surface-compass{left:50%;bottom:4.6rem;width:min(30rem,calc(100vw - 2rem));border-color:#cbd5e121;border-radius:.38rem;background:#060a1270;padding:.35rem .7rem;transform:translate(-50%)}.moon-compass-bar{position:relative;height:1.42rem;overflow:hidden}.moon-compass-bar:before{position:absolute;top:50%;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(226,232,240,.38),transparent);content:""}.moon-compass-center{position:absolute;top:.18rem;left:50%;width:1px;height:1.04rem;background:#ffe8b6c7;box-shadow:0 0 .75rem #f59e0b47}.moon-compass-marker{position:absolute;top:50%;min-width:1.9rem;color:#e2e8f0b8;font-size:.72rem;font-weight:780;text-align:center;transform:translate(-50%,-50%);white-space:nowrap}.moon-compass-marker.is-pole{min-width:3.1rem;color:#fed7aa;text-shadow:0 0 .65rem rgba(251,146,60,.38)}.moon-compass-marker.is-home{min-width:2.8rem;color:#fde68a;text-shadow:0 0 .65rem rgba(250,204,21,.34)}.moon-compass-marker.is-alien{min-width:1.25rem;color:#86efac;font-size:.86rem;text-shadow:0 0 .7rem rgba(34,197,94,.48)}@media(max-width:760px){.moon-hud-primary{right:.6rem;left:.6rem;max-width:none;padding:.75rem}.moon-info-toggle{top:.6rem;left:.6rem}.moon-readouts{display:grid;grid-template-columns:minmax(0,1fr) 5.2rem;justify-content:stretch}.moon-readouts div{min-width:0;padding:.45rem .5rem}.moon-readouts .moon-readout-view{grid-column:1 / -1;min-width:0}.moon-readouts strong{font-size:.82rem}.moon-time-panel{right:.6rem;bottom:.6rem;left:.6rem;width:auto;padding:.65rem}.moon-time-panel.is-collapsed{width:auto}.moon-view-panel{right:.6rem;bottom:13.2rem;left:.6rem;padding:.55rem}.moon-time-panel.is-collapsed+.moon-view-panel{bottom:4.7rem}.moon-tutorial{top:.6rem;right:.6rem;width:min(21rem,calc(100vw - 1.2rem))}.moon-surface-compass{bottom:9.3rem;width:min(28rem,calc(100vw - 1.2rem))}.moon-speed input{min-width:6rem}}@media(max-width:440px){.moon-hud-primary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}.moon-readouts{width:100%;grid-template-columns:1fr 1fr}.moon-readouts .moon-readout-view,.moon-readouts div:last-child{grid-column:1 / -1}.moon-control-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.moon-presets{grid-template-columns:repeat(7,minmax(3.65rem,1fr));overflow-x:auto;padding-bottom:.1rem}.moon-icon-button,.moon-text-button{width:100%;min-width:0}.moon-hud-primary .moon-panel-action{width:2.25rem}.moon-tutorial-close{width:1.9rem}.moon-surface-compass{bottom:10.2rem}}