:root{color-scheme:dark;--bg:#03070d;--text:#ecf4f8;--muted:#81939f;--cyan:#8de5ed;--line:rgba(151,205,226,.15);font-family:Arial,"Noto Sans Thai",Tahoma,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:800px;height:100svh;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible,#globe:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}a{color:inherit;text-decoration:none}.stars,.nebula{position:absolute;inset:0;pointer-events:none;overflow:hidden}.stars canvas{width:100%;height:100%}.nebula{background:radial-gradient(ellipse at 47% 52%,#102c442b,transparent 48%),radial-gradient(ellipse at 80% 20%,#16495b12,transparent 40%)}
.header{position:relative;z-index:3;margin:0 4%;height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font-size:15px;font-weight:700;letter-spacing:2.3px;white-space:nowrap}.brand-orbit{color:var(--cyan);padding-right:1px}.live-status,.clock{font-family:monospace;font-size:12px;letter-spacing:1.6px;color:#9aacb7;display:flex;gap:10px;align-items:center}.clock{font-variant-numeric:tabular-nums;letter-spacing:1px}.status-dot{height:5px;width:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px #80f2e9}
main{position:relative;height:calc(100% - 200px);min-height:600px;isolation:isolate}.title-block{position:absolute;top:33px;width:100%;text-align:center;pointer-events:none;z-index:2}.eyebrow{color:var(--cyan);font-family:monospace;font-size:11px;letter-spacing:3.6px;margin:0 0 15px}h1{font-size:clamp(42px,5.2vw,76px);font-weight:400;letter-spacing:-3px;line-height:1.1;margin:0}h1 span{font-weight:600;background:linear-gradient(110deg,#f3fbff 20%,#a8d3df 95%);background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:15px;letter-spacing:3px;color:#8eabb9;margin:15px 0 0}
#globe{position:absolute;inset:195px 0 100px;z-index:1;touch-action:none;cursor:grab;border-radius:8px}#globe.dragging{cursor:grabbing}#globe canvas{width:100%;height:100%;display:block}.static-earth{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);width:min(42vh,62vw);aspect-ratio:1;border-radius:50%;background:linear-gradient(100deg,#0001,#000d),url('assets/earth-day.jpg') 60% center/auto 100%;box-shadow:0 0 32px #2499df22,inset -40px -10px 65px #000;opacity:.65}.webgl-ready .static-earth{display:none}.orbital-ring{position:absolute;top:54%;left:50%;width:min(72vw,920px);height:30%;border:1px solid #6ab7d414;border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg);pointer-events:none;z-index:0}.ring-two{width:min(62vw,810px);height:47%;transform:translate(-50%,-50%) rotate(31deg);border-color:#6ab7d409}.ring-one:before{content:"";position:absolute;left:15%;top:12%;width:4px;height:4px;background:#8ed4e7;border-radius:50%;box-shadow:0 0 12px #8ed4e7}
.coordinates{position:absolute;left:4.5%;top:49%;display:flex;flex-direction:column;gap:13px;pointer-events:none;z-index:2}.tiny-heading{color:#7994a3;letter-spacing:2px;font:11px monospace}.coordinates #sun-position{font:14px monospace;letter-spacing:1px;color:#b9dce6}.coordinate-line{width:38px;border-top:1px solid #77b7c763}.coordinate-note{font-size:12px;color:var(--muted)}.view-label{position:absolute;right:4.5%;top:46%;display:flex;align-items:center;gap:14px;writing-mode:vertical-rl;font:10px monospace;letter-spacing:2.2px;color:#7393a3;pointer-events:none;z-index:2}.crosshair{font-size:22px;font-weight:100;color:#87c8d8}.vertical-line{height:60px;border-right:1px solid #6baabe44}
.interaction-panel{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:max-content;max-width:96%;text-align:center;z-index:3}#gesture-hint{font-size:13px;color:#95aab7;margin:0 0 15px}#gesture-hint span{padding:0 9px;color:#447180}.controls{display:inline-flex;align-items:center;gap:5px;border:1px solid #8ed5e529;border-radius:100px;background:linear-gradient(120deg,#11202acc,#07111cdd);padding:6px 10px;box-shadow:0 6px 40px #0005;backdrop-filter:blur(12px)}.controls button{min-height:40px;padding:0 14px;border:0;border-radius:22px;background:transparent;color:#c1d7e0;cursor:pointer;font-size:13px;display:flex;gap:10px;align-items:center;justify-content:center;transition:background .2s,color .2s}.controls button:hover{background:#86d6e914;color:#fff}.controls button:disabled{opacity:.35;cursor:default}.controls .icon-button{width:40px;padding:0;font:22px monospace}.control-divider{height:17px;border-left:1px solid #85bfd526}#rotation-icon{color:var(--cyan);font-size:17px}#render-status{font-size:12px;color:#a9c5d1;max-width:480px;margin:10px auto 0}#render-status:empty{display:none}.no-script{position:absolute;bottom:0;width:100%;text-align:center;font-size:14px}
.footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin:0 4%;border-top:1px solid var(--line);height:108px;gap:24px}.footer-title{font-size:19px;letter-spacing:-.3px}.footer p{font-size:12px;color:var(--muted);margin:8px 0 0}.day-night{display:flex;gap:18px;align-items:center;font:12px monospace;letter-spacing:1.5px}.day-night p{font-family:Arial,Tahoma,sans-serif;letter-spacing:0}.sun-symbol{font-size:35px;font-weight:100;color:#7ba9bc}.live-pill{font:9px monospace;letter-spacing:1px;color:var(--cyan);border:1px solid #83d3da33;padding:3px 5px;margin-left:8px}
@media(min-height:950px){#globe{inset:210px 0 100px}.title-block{top:45px}}
@media(max-width:700px){body{min-height:760px}.header{height:72px;margin:0 6%}.wordmark{font-size:12px;letter-spacing:1.5px}.live-status{display:none}.clock{font-size:11px}.title-block{top:35px}.eyebrow{font-size:9px;letter-spacing:2.5px}h1{font-size:47px;letter-spacing:-2px}.subtitle{font-size:13px;margin-top:12px}main{height:calc(100% - 192px);min-height:568px}#globe{inset:170px 0 100px}.coordinates{left:7%;top:auto;bottom:140px;gap:8px}.tiny-heading{font-size:9px;letter-spacing:1px}.coordinates #sun-position{font-size:11px}.coordinate-note,.coordinate-line,.view-label{display:none}.orbital-ring{width:96vw;height:24%;top:50%}.ring-two{width:90vw;height:35%}.interaction-panel{bottom:4px}#gesture-hint{font-size:12px}.controls button{padding:0 10px;font-size:12px}.footer{height:120px;margin:0 6%;gap:15px}.footer-title{font-size:16px}.footer p{font-size:11px;line-height:1.7;max-width:170px}.day-night{font-size:10px;gap:0;letter-spacing:1px}.sun-symbol{display:none}.day-night p{max-width:145px}.live-pill{margin-left:4px;font-size:8px}}
@media(max-width:360px){.clock{font-size:9px}.controls{gap:0;padding:5px}.footer-title{font-size:14px}}
/* Programmatic focus during dragging must not draw a viewport-sized outline. */
#globe.pointer-focus:focus{outline:none}
/* Decorative orbits must not widen narrow viewports after rotation. */
main{overflow-x:clip}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}