:root{color-scheme:dark;--accent:#ffcf75;--muted:#aebfce;--panel:#12202deb;font:13px/1.6 "Segoe UI","Meiryo",sans-serif;color:#eff4f8;background:#142b3b}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button,select,summary{cursor:pointer}button{border:1px solid #526273;border-radius:8px;background:#263847;color:#e8eef6;padding:7px 11px}button:hover{background:#3c5164}button:disabled{opacity:.5;cursor:default}input,select{color:#edf4f8;background:#152431;border:1px solid #516171;border-radius:6px;padding:5px;min-width:0}input[type=range]{padding:0;accent-color:var(--accent)}input[type=checkbox]{accent-color:var(--accent)}:is(button,input,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.glass{background:var(--panel);border:1px solid #62748466;border-radius:14px;box-shadow:0 8px 28px #0003}#street-view,#sky,#overlay{position:fixed;inset:0;width:100%;height:100%}#street-view{z-index:1}#sky{z-index:0}#overlay{z-index:2;pointer-events:none}.topbar{position:fixed;z-index:30;left:18px;right:18px;top:16px;display:flex;align-items:center;gap:12px;pointer-events:none}.topbar>*{pointer-events:auto}.topbar button{background:#142332ed}.topbar h1{font-size:18px;line-height:1.3;margin:1px 0;text-shadow:0 2px 6px #000}.eyebrow{font-size:8px;letter-spacing:.17em;color:var(--accent)}#lang-btn{margin-left:auto;font-size:11px}#panel{position:fixed;z-index:20;top:80px;left:18px;bottom:80px;width:310px;overflow:auto;padding:16px}h2{font-size:13px;margin:0 0 9px}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading span{color:var(--accent);font-size:11px}.field{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;font-size:11px}.field select{max-width:175px;flex:1}.field input[type=range]{width:155px}.date-row{display:flex;gap:8px;margin:10px 0 4px}.date-row label{display:block;min-width:0}.date-row label:first-child{width:72px}.date-row label:last-child{flex:1}.date-row span,.clock-row label span{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}.date-row input{width:100%}#day-slider,#time-slider{width:100%;height:18px;display:block}.range-scale{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.muted{font-size:10px;color:var(--muted);line-height:1.6;margin:7px 0}.clock-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:11px}.clock-row input{width:140px;font-size:18px;color:var(--accent);font-weight:600}.clock-row button{font-size:11px}.position-cards{display:flex;gap:8px;margin:10px 0}.position-cards div{flex:1;padding:9px;background:#ffffff08;border-radius:8px}.position-cards span{display:block;font-size:10px;color:var(--muted)}.position-cards strong{font-size:17px;font-weight:600;color:var(--accent);white-space:nowrap}.play-row{display:flex;gap:7px}.play-row #play{flex:1;color:var(--accent)}.play-row button{font-size:11px}.speed select{flex:0;width:90px}.checks{display:grid;gap:5px;margin:10px 0;font-size:11px}.checks label{display:flex;align-items:center;gap:5px}.checks input{margin:0}.primary{display:block;width:100%;font-weight:650;background:var(--accent);color:#172c3c;border-color:var(--accent);margin:12px 0}.primary:hover{background:#ffdf9c}details{border-top:1px solid #71849744;padding-top:8px;margin-top:10px}summary{font-size:11px;color:#d5e0ed}#coordinate-form{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}#coordinate-form label{flex:1;min-width:100px;font-size:10px}#coordinate-form input{display:block;width:100%;margin-top:3px}#coordinate-form button{width:100%}.export-row{display:flex;gap:6px;margin-top:12px}.export-row button{flex:1;font-size:10px}.readout{position:fixed;z-index:10;top:18px;left:50%;transform:translateX(-50%);padding:8px 18px;display:flex;gap:10px;align-items:center;font-variant-numeric:tabular-nums}.readout strong{font-size:12px}.readout #readout-time{font-size:22px;color:var(--accent);font-weight:650}.readout #readout-basis{font-size:10px;color:var(--muted)}.status{position:fixed;bottom:20px;left:18px;max-width:min(550px,calc(100% - 330px));z-index:25;padding:8px 12px;font-size:11px}.bottom-actions{position:fixed;right:18px;bottom:20px;display:flex;gap:7px;z-index:30}.bottom-actions button{background:#152632f2;font-size:11px}#guide{position:fixed;z-index:25;right:18px;bottom:72px;width:300px;max-height:55vh;overflow:auto;padding:16px}#guide p{font-size:12px}#guide-close{float:right;padding:0 7px;font-size:20px}#guide h2{padding-right:25px}.legend{display:flex;gap:12px;font-size:10px}.yellow{color:var(--accent)}.blue{color:#8dcde8}#map-panel{position:fixed;right:18px;top:90px;width:340px;height:300px;z-index:26;padding:8px;display:flex;flex-direction:column}#map-panel.expanded{left:18px;right:18px;top:80px;bottom:72px;width:auto;height:auto}.map-toolbar{display:flex;gap:6px;align-items:center;font-size:10px;margin-bottom:8px}.map-toolbar span{flex:1}.map-toolbar button{font-size:10px}#map-canvas{flex:1;min-height:100px}#map-note{margin:5px}#panel[hidden]{display:none}
@media(max-width:900px){.readout{left:auto;right:18px;top:74px;transform:none;font-size:10px}.readout #readout-time{font-size:18px}.readout #readout-basis{max-width:80px}.status{max-width:calc(100% - 36px);bottom:66px;font-size:10px}#panel{bottom:105px}#guide{bottom:110px}#map-panel{width:min(340px,calc(100vw - 36px));top:130px}}
@media(max-width:520px){.topbar{left:12px;right:12px;top:10px}.topbar h1{font-size:15px}.eyebrow{font-size:7px}#panel{left:12px;top:116px;bottom:120px;width:calc(100% - 24px);padding:14px}.readout{top:65px;left:12px;right:12px;justify-content:center}.readout #readout-basis{max-width:none}.status{left:12px;bottom:62px;max-width:calc(100% - 24px)}.bottom-actions{left:12px;right:12px;bottom:14px;justify-content:center}.bottom-actions button{flex:1}#guide{left:12px;right:12px;bottom:115px;width:auto}#map-panel{left:12px;right:12px;top:116px;width:auto;height:50vh}#map-panel.expanded{left:12px;right:12px;top:116px;bottom:115px;height:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
#day-slider,#time-slider{margin:0}.wide{width:100%;font-size:11px}
.speed select{flex:0 0 90px}

.location-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 14px}.location-shortcuts button{padding:8px 5px;min-height:38px;font-size:12px}.location-shortcuts button[aria-pressed="true"]{background:#f7cc70;color:#162735;border-color:#f7cc70}
html,body{height:100%}#street-view{position:fixed!important;height:100vh!important}

#sky{touch-action:none;cursor:grab}#sky.dragging{cursor:grabbing}