:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Arial,sans-serif;color:#edf1f4;background:#000;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#000}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #bdd6e8;outline-offset:5px}a{color:inherit;text-underline-offset:4px}[hidden]{display:none!important}
#earth-app{position:relative;min-height:650px;height:100svh;overflow:hidden;isolation:isolate}
#space{position:absolute;inset:0;touch-action:none;cursor:grab}#space:active{cursor:grabbing}#earth-canvas{display:block;width:100%;height:100%}
#pale-dot{position:absolute;top:50%;left:50%;width:2px;height:2px;background:#b5cfdf;border-radius:50%;transform:translate(-50%,-50%);will-change:opacity;pointer-events:none}
#earth-app .site-header{position:absolute;top:28px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:start;gap:20px;pointer-events:none}.site-header>*{pointer-events:auto}#earth-app .site-header>div{order:-1}.site-header a{font-size:13px;color:#c6cbd0;text-decoration:none}
h1{font-size:25px;font-weight:450;line-height:1.3;margin:12px 0 0;letter-spacing:.02em}
#distance-readout{margin:18px 0 0;font-size:13px;line-height:1.5}#distance-readout>span:first-child{display:block;color:#bac4ce;font-size:11px;margin-bottom:2px}#distance-value{font-weight:400;font-size:27px;font-variant-numeric:tabular-nums;margin-right:5px}
.lang-switcher{position:static!important;transform:none!important;color:#dbe0e4!important;font-size:13px!important}.lang-switcher summary{background:#000b!important;color:#dbe0e4!important;border-color:#4b5259!important}.lang-switcher .lang-menu,.lang-switcher nav{background:#101215!important;color:#edf1f4!important}.lang-switcher a{color:#edf1f4!important}.lang-switcher a:hover,.lang-switcher a:focus-visible,.lang-switcher a[aria-current="true"]{background:#263038!important}
.zoom-buttons{position:absolute;right:35px;top:47%;display:grid;gap:8px}.zoom-buttons button{width:46px;height:46px;border:1px solid #76818d85;border-radius:50%;background:#0008;font-size:28px;font-weight:300}.zoom-buttons button:disabled{opacity:.3;cursor:default}
.distance-controls{position:absolute;bottom:112px;left:50%;width:min(620px,calc(100% - 160px));transform:translateX(-50%);text-align:center;text-shadow:0 1px 5px #000}
/* Leave room beyond both track ends for labels centered on the true ticks. */
.distance-scale{position:relative;height:80px;margin:0 30px}
#distance-slider{position:absolute;top:28px;left:0;width:100%;height:24px;display:block;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize}
#distance-slider::-webkit-slider-runnable-track{height:3px;background:#53616c;border-radius:3px}#distance-slider::-moz-range-track{height:3px;background:#53616c;border-radius:3px}
#distance-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border:0;border-radius:50%;background:#bad2e2}#distance-slider::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#bad2e2}
/* The thumb center travels between 9px and width−9px. Labels use that track. */
.waypoints{position:absolute;top:0;bottom:0;left:9px;right:9px;pointer-events:none}.waypoint{position:absolute;top:0;width:0;height:100%}
.waypoint:before{content:"";position:absolute;left:-.5px;top:32px;width:1px;height:7px;background:#8295a4}.waypoint[data-side=below]:before{top:42px}
.waypoints button{position:absolute;top:5px;left:0;transform:translateX(-50%);width:max-content;min-height:24px;padding:3px 1px;font-size:11px;line-height:18px;white-space:nowrap;border:0;background:transparent;color:#ced6dd;pointer-events:auto}
.waypoint[data-side=below] button{top:51px}.waypoints button[data-align=start]{text-align:left}.waypoints button[data-align=end]{text-align:right}
.gesture-hint{color:#9eabb7;font-size:11px;line-height:1.5;margin:0 auto;max-width:100%}
/* Keep the scale still when the first interaction dismisses its hint. */
.gesture-hint[hidden]{display:block!important;visibility:hidden}
.flight{position:absolute;left:36px;bottom:66px;display:flex;align-items:center;gap:10px}.flight button{border:1px solid #626e78;border-radius:22px;background:#0009;padding:9px 15px;min-height:40px;font-size:12px}.flight span{font-size:11px;color:#aeb8c1}
.real-time{position:absolute;right:36px;bottom:72px;display:grid;gap:5px;text-align:right;font-size:11px;line-height:1.4;color:#bbc4cd}.real-time time{font-variant-numeric:tabular-nums}
footer{position:absolute;bottom:18px;left:36px;right:36px;display:flex;gap:14px;align-items:center;color:#9ea8b1;font-size:10px}footer a{color:#9ea8b1}#earth-app footer .legal-links{margin-left:auto!important;display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:8px!important;row-gap:2px;font-size:10px!important}footer .legal-links a{white-space:nowrap}
#landmark{position:absolute;bottom:245px;left:50%;transform:translateX(-50%);margin:0;width:min(640px,calc(100% - 150px));text-align:center;color:#e4eaf0;font-size:16px;line-height:1.7;text-shadow:0 1px 14px #000;background:#0006;padding:8px 12px;border-radius:6px;transition:opacity .4s;pointer-events:none}
.is-distant #landmark{top:calc(50% - 32px);bottom:auto;transform:translate(-50%,-100%)}
#load-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:#c4ccd4;background:#0009;padding:12px 16px;text-align:center;max-width:80%}
.real-time,.site-header,.flight,footer{text-shadow:0 1px 5px #000}
/* Desktop controls grow with the viewport; the approved mobile rules stay intact. */
@media(min-width:651px){
 #earth-app{--desktop-unit:clamp(1px,.0694444444vw,2.6666667px)}
 #distance-readout{position:fixed;top:clamp(90px,8vh,160px);left:50%;transform:translateX(-50%);margin:0;text-align:center;font-size:calc(16 * var(--desktop-unit));line-height:1.2;white-space:nowrap;text-shadow:0 2px 6px #000,0 0 18px #0009}
 #distance-readout>span:first-child{font-size:calc(11 * var(--desktop-unit));margin-bottom:calc(4 * var(--desktop-unit));color:#ced7df}
 #distance-value{font-size:calc(42 * var(--desktop-unit));font-weight:500;margin-right:calc(5 * var(--desktop-unit))}
 .zoom-buttons{right:calc(35 * var(--desktop-unit));gap:calc(8 * var(--desktop-unit))}
 .zoom-buttons button{width:calc(46 * var(--desktop-unit));height:calc(46 * var(--desktop-unit));font-size:calc(28 * var(--desktop-unit))}
 .distance-controls{width:min(60vw,2200px);bottom:calc(112 * var(--desktop-unit))}
 .distance-scale{height:calc(80 * var(--desktop-unit));margin:0 calc(30 * var(--desktop-unit))}
 #distance-slider{top:calc(28 * var(--desktop-unit));height:calc(24 * var(--desktop-unit))}
 #distance-slider::-webkit-slider-runnable-track{height:calc(3 * var(--desktop-unit))}
 #distance-slider::-moz-range-track{height:calc(3 * var(--desktop-unit))}
 #distance-slider::-webkit-slider-thumb{width:calc(18 * var(--desktop-unit));height:calc(18 * var(--desktop-unit));margin-top:calc(-7.5 * var(--desktop-unit))}
 #distance-slider::-moz-range-thumb{width:calc(18 * var(--desktop-unit));height:calc(18 * var(--desktop-unit))}
 .waypoints{left:calc(9 * var(--desktop-unit));right:calc(9 * var(--desktop-unit))}
 .waypoint:before{top:calc(32 * var(--desktop-unit));height:calc(7 * var(--desktop-unit))}
 .waypoint[data-side=below]:before{top:calc(42 * var(--desktop-unit))}
 .waypoints button{top:calc(5 * var(--desktop-unit));min-height:calc(24 * var(--desktop-unit));padding:calc(3 * var(--desktop-unit)) 1px;font-size:calc(12 * var(--desktop-unit));line-height:calc(18 * var(--desktop-unit))}
 .waypoint[data-side=below] button{top:calc(51 * var(--desktop-unit))}
 .gesture-hint{font-size:calc(11 * var(--desktop-unit))}
 .flight{left:calc(36 * var(--desktop-unit));bottom:calc(66 * var(--desktop-unit));gap:calc(10 * var(--desktop-unit))}
 .flight button{border-radius:calc(22 * var(--desktop-unit));padding:calc(9 * var(--desktop-unit)) calc(15 * var(--desktop-unit));min-height:calc(40 * var(--desktop-unit));font-size:calc(12 * var(--desktop-unit))}
 .flight span{font-size:calc(11 * var(--desktop-unit))}
 .real-time{right:calc(36 * var(--desktop-unit));bottom:calc(72 * var(--desktop-unit));gap:calc(5 * var(--desktop-unit));font-size:calc(11 * var(--desktop-unit))}
 #landmark{bottom:calc(245 * var(--desktop-unit));width:min(calc(640 * var(--desktop-unit)),calc(100% - 150 * var(--desktop-unit)));font-size:calc(16 * var(--desktop-unit));padding:calc(8 * var(--desktop-unit)) calc(12 * var(--desktop-unit))}
 .is-distant #landmark{top:calc(50% - 32 * var(--desktop-unit));bottom:auto}
}
@media(max-width:650px){
 #earth-app .site-header{top:max(20px,env(safe-area-inset-top));left:20px;right:20px}h1{font-size:22px;margin-top:13px;max-width:225px}#distance-readout{margin-top:15px;font-size:12px}#distance-value{font-size:25px}#distance-readout>span:first-child{max-width:225px;font-size:10px}
 .zoom-buttons{right:16px;top:43%;gap:10px}.is-distant .zoom-buttons{top:calc(50% - 24px)}
 .distance-controls{width:calc(100% - 40px);bottom:140px}.distance-scale{margin:0 30px}.waypoints button{font-size:10px}
 .gesture-hint{font-size:10px;max-width:340px;line-height:1.5}
 .flight{left:20px;bottom:70px;gap:7px}.flight span{display:none}.flight button{font-size:11px;padding:8px 11px}
 .real-time{right:20px;bottom:73px;font-size:10px;max-width:185px;gap:3px}
 footer{left:20px;right:20px;bottom:20px;gap:8px;font-size:8px}#earth-app footer .legal-links{font-size:8px!important;gap:8px!important}
 #landmark{bottom:245px;width:calc(100% - 132px);font-size:13px;line-height:1.8;padding:6px 10px}
}
@media(prefers-reduced-motion:reduce){#landmark{transition:none}}