@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Shippori+Mincho:wght@400;600&display=swap');

:root {
	--sky-ink: #e9edf0;
	--sky-muted: rgba(220, 228, 232, .54);
	--sky-faint: rgba(220, 228, 232, .18);
	--sky-line: rgba(220, 228, 232, .15);
	--sky-glass: rgba(7, 12, 17, .72);
	--sky-accent: #b9d7d6;
}

html:has(body.celestial-field-page) { background: #030609; overflow: hidden; }

body.celestial-field-page {
	width: 100%; height: 100%; margin: 0 !important; overflow: hidden;
	background: #030609 !important; color: var(--sky-ink);
	font-family: "Noto Sans JP", sans-serif; font-weight: 300;
}

body.celestial-field-page::before, body.celestial-field-page::after { display: none !important; }
.sky-app, .sky-app * { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.sky-app {
	position: fixed; z-index: 1; inset: 0; min-height: 100dvh; overflow: hidden; isolation: isolate;
	background: radial-gradient(circle at 50% 40%, #0b1722, #030609 70%);
}

.sky-app__canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.sky-app__canvas:active { cursor: grabbing; }
.sky-app__vignette { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 53% 46%, transparent 42%, rgba(0, 3, 7, .34) 100%), linear-gradient(180deg, rgba(1,4,7,.16), transparent 30%, rgba(1,4,7,.2)); }

.sky-header {
	position: absolute; z-index: 8; top: 0; left: 0; right: 0; height: 92px; padding: 25px clamp(24px, 3.3vw, 54px);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; pointer-events: none;
	background: linear-gradient(180deg, rgba(2,5,8,.45), transparent);
}

.sky-brand { display: inline-flex; width: max-content; align-items: center; gap: 12px; color: var(--sky-ink) !important; text-decoration: none !important; pointer-events: auto; font: 300 11px/1.4 "DM Mono", monospace; letter-spacing: .16em; }
.sky-brand b { font-weight: 500; }
.sky-brand svg { width: 27px; height: 27px; overflow: visible; fill: var(--sky-ink); stroke: var(--sky-ink); stroke-width: .7; }

.sky-header__center { text-align: center; text-transform: uppercase; font: 400 10px/1.5 "DM Mono", monospace; letter-spacing: .15em; }
.sky-header__center span { display: block; color: var(--sky-muted); }
.sky-header__center strong { display: block; margin-top: 4px; font-weight: 400; color: var(--sky-ink); }

.icon-button { justify-self: end; display: flex; width: 34px; height: 30px; padding: 7px 0; flex-direction: column; justify-content: space-between; align-items: flex-end; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.icon-button > span:not(.sr-only) { display: block; height: 1px; width: 27px; background: var(--sky-ink); transition: width .25s, transform .25s, opacity .2s; }
.icon-button > span:nth-child(2) { width: 18px; }
.icon-button:hover > span:nth-child(2) { width: 27px; }
.icon-button.is-active > span:first-child { transform: translateY(7.5px) rotate(45deg); }
.icon-button.is-active > span:nth-child(2) { width: 27px; opacity: 0; }
.icon-button.is-active > span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.sky-readout { position: absolute; z-index: 4; left: clamp(24px, 3.3vw, 54px); top: 50%; display: flex; flex-direction: column; gap: 23px; transform: translateY(-50%); pointer-events: none; }
.sky-readout p { position: relative; margin: 0; padding-left: 15px; font-family: "DM Mono", monospace; }
.sky-readout p::before { content: ""; position: absolute; left: 0; top: 4px; width: 1px; height: 32px; background: var(--sky-line); }
.sky-readout span { display: block; color: var(--sky-muted); font-size: 9px; letter-spacing: .18em; }
.sky-readout strong { display: inline-block; margin-top: 4px; font-size: 17px; font-weight: 300; letter-spacing: -.03em; }
.sky-readout small { margin-left: 7px; color: var(--sky-accent); font-size: 10px; }

.sky-reticle { position: absolute; z-index: 3; left: 50%; top: 50%; width: 66px; height: 66px; transform: translate(-50%, -50%); border: 1px solid rgba(230,240,242,.15); border-radius: 50%; pointer-events: none; }
.sky-reticle::before, .sky-reticle::after { content: ""; position: absolute; background: rgba(230,240,242,.24); }
.sky-reticle::before { left: 50%; top: -7px; width: 1px; height: 80px; }
.sky-reticle::after { top: 50%; left: -7px; height: 1px; width: 80px; }
.sky-reticle i { position: absolute; top: 50%; width: 3px; height: 3px; background: var(--sky-ink); border-radius: 50%; transform: translateY(-50%); }
.sky-reticle i:first-child { left: -2px; } .sky-reticle i:nth-child(2) { right: -2px; }
.sky-reticle span { position: absolute; inset: 22px; border: 1px solid rgba(230,240,242,.12); border-radius: 50%; }

.sky-panel {
	position: absolute; z-index: 7; right: 0; top: 0; bottom: 0; width: min(390px, 92vw); padding: 112px 44px 30px;
	display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
	background: linear-gradient(120deg, rgba(9,15,21,.74), rgba(4,8,12,.91)); border-left: 1px solid rgba(220,228,232,.09);
	backdrop-filter: blur(22px) saturate(.7); -webkit-backdrop-filter: blur(22px) saturate(.7);
	transition: transform .65s cubic-bezier(.76,0,.24,1), opacity .4s;
}
.sky-panel.is-closed { transform: translateX(100%); opacity: 0; pointer-events: none; }
.sky-panel__intro .kicker { margin: 0 0 17px; color: var(--sky-accent); font: 400 9px "DM Mono", monospace; letter-spacing: .23em; }
.sky-panel__intro h1 { margin: 0; font: 400 clamp(33px, 3vw, 43px)/1.38 "Shippori Mincho", serif; letter-spacing: .04em; }
.sky-panel__intro > p:last-child { margin: 17px 0 27px; color: var(--sky-muted); font-size: 12px; line-height: 1.85; letter-spacing: .05em; }

.sky-controls { border-top: 1px solid var(--sky-line); padding-top: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: block; margin-bottom: 17px; }
.field > span, .range-field > span { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--sky-muted); font: 400 9px "DM Mono", monospace; letter-spacing: .13em; }
.field > span small { font: inherit; color: rgba(220,228,232,.3); letter-spacing: .04em; }
.field input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--sky-line); border-radius: 0; outline: none; color: var(--sky-ink); background: rgba(255,255,255,.025); font: 300 12px "DM Mono", monospace; color-scheme: dark; transition: border-color .2s, background .2s; }
.field input:focus { border-color: rgba(185,215,214,.55); background: rgba(185,215,214,.04); }
.field input[type="number"] { font-size: 11px; }
.button-row { display: flex; gap: 9px; margin: -3px 0 22px; }
.button-row--single { justify-content: flex-end; margin-top: -5px; }
.button-row--single .soft-button { flex: 0 0 112px; }
.soft-button { flex: 1; height: 34px; border: 1px solid var(--sky-line); color: var(--sky-muted); background: transparent; font: 400 10px "Noto Sans JP", sans-serif; letter-spacing: .06em; cursor: pointer; transition: color .2s, background .2s; }
.soft-button:hover { color: var(--sky-ink); background: rgba(255,255,255,.05); }

.location-picker { margin: 1px 0 16px; }
.location-picker__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--sky-muted); font: 400 9px "DM Mono", monospace; letter-spacing: .13em; }
.location-picker__heading small { color: rgba(220,228,232,.34); font: inherit; letter-spacing: .02em; }
.world-map { position: relative; width: 100%; aspect-ratio: 2/1; overflow: hidden; border: 1px solid var(--sky-line); background: #071016; }
.world-map::before, .world-map::after { content: ""; position: absolute; z-index: 1; pointer-events: none; opacity: .45; }
.world-map::before { left: 50%; top: 0; bottom: 0; width: 1px; background: var(--sky-line); }
.world-map::after { left: 0; right: 0; top: 50%; height: 1px; background: var(--sky-line); }
.world-map > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .72; }
.world-map__pins { position: absolute; z-index: 2; inset: 0; }
.city-pin { position: absolute; width: 16px; height: 16px; padding: 0; transform: translate(-50%,-50%); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.city-pin::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%,-50%); border: 1px solid rgba(218,233,232,.75); border-radius: 50%; background: rgba(7,16,22,.92); box-shadow: 0 0 0 2px rgba(7,16,22,.55); transition: transform .16s, background .16s, box-shadow .16s; }
.city-pin:hover, .city-pin:focus-visible { z-index: 2; outline: none; }
.city-pin:hover::before, .city-pin:focus-visible::before { transform: translate(-50%,-50%) scale(1.55); background: var(--sky-ink); box-shadow: 0 0 8px rgba(185,215,214,.8); }
.city-pin.is-selected::before { background: var(--sky-accent); border-color: white; box-shadow: 0 0 9px rgba(185,215,214,.85); }
.city-select { display: block; margin-top: 8px; }
.city-select select { width: 100%; height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--sky-line); border-radius: 0; outline: none; color: var(--sky-ink); background: rgba(255,255,255,.025); font: 300 11px "Noto Sans JP", sans-serif; color-scheme: dark; cursor: pointer; }
.city-select select:focus { border-color: rgba(185,215,214,.55); }
.selected-city { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 7px; }
.selected-city strong { color: var(--sky-ink); font: 400 12px "Noto Sans JP", sans-serif; letter-spacing: .08em; }
.selected-city small { color: var(--sky-muted); font: 300 9px "DM Mono", monospace; letter-spacing: .04em; }

.playback-row { display: grid; grid-template-columns: 96px 1fr; gap: 9px; align-items: end; margin: -4px 0 22px; }
.playback-button { display: flex; height: 36px; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(185,215,214,.28); color: var(--sky-accent); background: rgba(185,215,214,.035); font: 400 10px "Noto Sans JP", sans-serif; letter-spacing: .05em; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.playback-button:hover { border-color: rgba(185,215,214,.55); background: rgba(185,215,214,.075); }
.playback-button i { position: relative; display: block; width: 8px; height: 9px; }
.playback-button.is-playing i::before, .playback-button.is-playing i::after { content: ""; position: absolute; top: 0; width: 2px; height: 9px; background: currentColor; }
.playback-button.is-playing i::before { left: 1px; }.playback-button.is-playing i::after { right: 1px; }
.playback-button:not(.is-playing) i { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.playback-scale > span { display: block; margin-bottom: 7px; color: var(--sky-muted); font: 400 9px "DM Mono", monospace; letter-spacing: .13em; }
.playback-scale select { width: 100%; height: 36px; padding: 0 27px 0 9px; border: 1px solid var(--sky-line); border-radius: 0; outline: none; color: var(--sky-ink); background: rgba(255,255,255,.025); font: 300 10px "Noto Sans JP", sans-serif; color-scheme: dark; cursor: pointer; }
.playback-scale select:focus { border-color: rgba(185,215,214,.55); }

.range-field { display: block; margin-bottom: 21px; }
.range-field output { color: var(--sky-accent); }
.range-field input { width: 100%; height: 12px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.range-field input::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--sky-accent) var(--range-progress, 37.5%), var(--sky-line) var(--range-progress, 37.5%)); }
.range-field input::-webkit-slider-thumb { width: 8px; height: 8px; margin-top: -3.5px; appearance: none; border: 1px solid var(--sky-accent); border-radius: 50%; background: #0b1218; }
.range-field input::-moz-range-track { height: 1px; background: var(--sky-line); }
.range-field input::-moz-range-progress { height: 1px; background: var(--sky-accent); }
.range-field input::-moz-range-thumb { width: 7px; height: 7px; border: 1px solid var(--sky-accent); border-radius: 50%; background: #0b1218; }

.toggle-row { display: flex; flex-wrap: wrap; gap: 11px 17px; }
.toggle-row label { display: flex; align-items: center; gap: 7px; color: var(--sky-muted); font-size: 10px; cursor: pointer; }
.toggle-row label:has(input:disabled) { opacity: .32; cursor: default; }
.toggle-row input { position: absolute; opacity: 0; }
.toggle-row label span { position: relative; width: 20px; height: 10px; border: 1px solid var(--sky-line); border-radius: 8px; }
.toggle-row label span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--sky-muted); transition: transform .2s, background .2s; }
.toggle-row input:checked + span::after { transform: translateX(10px); background: var(--sky-accent); box-shadow: 0 0 6px rgba(185,215,214,.6); }

.sky-panel__science { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 34px; color: rgba(220,228,232,.32); font: 300 9px/1.7 "DM Mono", monospace; letter-spacing: .03em; }
.sky-panel__science p { margin: 0; }.sky-panel__science b { color: var(--sky-muted); font-weight: 400; letter-spacing: .15em; }
.sky-panel__science a { color: var(--sky-muted) !important; text-decoration: underline; text-decoration-color: var(--sky-line); text-underline-offset: 2px; }
.science-dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: #9fc9b1; box-shadow: 0 0 9px #7bb896; }

.star-labels { position: absolute; z-index: 3; inset: 0; pointer-events: none; transition: opacity .25s; }
.star-label { position: absolute; display: flex; align-items: center; gap: 7px; transform: translate(8px,-50%); color: rgba(236,241,242,.72); text-shadow: 0 1px 5px #020406; white-space: nowrap; font: 300 10px "Noto Sans JP", sans-serif; letter-spacing: .08em; }
.star-label::before { content: ""; width: 13px; height: 1px; background: rgba(220,228,232,.23); }
.star-label.body-label { color: rgba(255,244,211,.88); font-weight: 400; letter-spacing: .12em; }
.star-label.body-label::before { width: 18px; background: rgba(255,231,176,.48); }

.constellation-labels { position: absolute; z-index: 3; inset: 0; pointer-events: none; transition: opacity .25s; }
.constellation-label { position: absolute; display: none; transform: translate(-50%,-50%); padding: 4px 8px; color: rgba(195,215,218,.58); background: rgba(2,6,9,.32); text-shadow: 0 1px 5px #020406; white-space: nowrap; font: 300 10px "Noto Sans JP", sans-serif; letter-spacing: .14em; }
.constellation-label::before, .constellation-label::after { content: ""; position: absolute; top: 50%; width: 8px; height: 1px; background: rgba(185,215,214,.18); }
.constellation-label::before { right: 100%; }.constellation-label::after { left: 100%; }

.sky-selection {
	position: absolute; z-index: 8; width: 178px; min-height: 94px; padding: 17px 18px 15px;
	transform: translate(16px, calc(-100% - 16px)); border: 1px solid rgba(220,228,232,.2);
	background: rgba(5,10,14,.84); box-shadow: 0 12px 38px rgba(0,0,0,.28);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	pointer-events: auto; transition: opacity .18s, transform .18s;
}
.sky-selection[hidden] { display: none; }
.sky-selection::after { content: ""; position: absolute; left: -17px; bottom: -17px; width: 25px; height: 25px; border-left: 1px solid rgba(220,228,232,.3); transform: rotate(-45deg); transform-origin: top left; }
.sky-selection > span { display: block; color: var(--sky-accent); font: 400 9px "DM Mono", monospace; letter-spacing: .2em; }
.sky-selection > strong { display: block; margin-top: 7px; color: var(--sky-ink); font: 400 18px "Shippori Mincho", serif; letter-spacing: .06em; }
.sky-selection > small { display: block; margin-top: 7px; color: var(--sky-muted); font: 300 9px/1.5 "DM Mono", monospace; letter-spacing: .07em; }
.sky-selection button { position: absolute; top: 7px; right: 8px; width: 22px; height: 22px; padding: 0; border: 0; color: var(--sky-muted); background: transparent; font: 300 16px/1 "DM Mono", monospace; cursor: pointer; }
.sky-selection button:hover { color: var(--sky-ink); }

.sky-compass { position: absolute; z-index: 3; left: 50%; bottom: 37px; width: min(520px, 48vw); height: 28px; transform: translateX(-50%); pointer-events: none; border-top: 1px solid var(--sky-line); overflow: hidden; }
.sky-compass::before { content: ""; position: absolute; left: 50%; top: 0; height: 7px; width: 1px; background: var(--sky-ink); }
.sky-compass span { position: absolute; top: 9px; color: var(--sky-muted); transform: translateX(-50%); font: 300 10px "DM Mono", monospace; }
.sky-help { position: absolute; z-index: 4; left: clamp(24px, 3.3vw, 54px); bottom: 31px; margin: 0; color: rgba(220,228,232,.4); font-size: 10px; letter-spacing: .08em; pointer-events: none; }
.sky-help span { color: var(--sky-muted); font: 400 9px "DM Mono", monospace; }

.sky-loader { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: #030609; transition: opacity 1.2s ease, visibility 1.2s; }
.sky-loader i { width: 2px; height: 2px; border-radius: 50%; background: white; box-shadow: 0 0 7px 2px white; animation: sky-loader 1.8s ease-in-out infinite; }
.sky-loader p, .sky-error { margin: 0; color: var(--sky-muted); font: 300 9px "DM Mono", monospace; letter-spacing: .25em; }
.sky-app.is-ready .sky-loader { opacity: 0; visibility: hidden; }
.sky-error { position: absolute; z-index: 30; left: 50%; bottom: 30px; transform: translateX(-50%); }

@keyframes sky-loader { 0%,100% { transform: scale(.5); opacity: .35; } 50% { transform: scale(1.7); opacity: 1; } }

@media (max-width: 850px) {
	.sky-header { height: 75px; padding: 20px 22px; }
	.sky-header__center { display: none; }
	.sky-readout { left: 22px; top: 105px; transform: none; flex-direction: row; gap: 17px; }
	.sky-readout p { padding-left: 10px; }.sky-readout p::before { height: 26px; }
	.sky-readout strong { font-size: 15px; }
	.sky-panel { width: min(370px, 100vw); padding: 90px 28px 25px; }
	.sky-panel__intro h1 { font-size: 34px; }
	.sky-compass { width: 65vw; bottom: 28px; }
	.sky-help { display: none; }
}

@media (max-width: 520px) {
	.sky-readout p:nth-child(3) { display: none; }
	.sky-panel { padding-left: 24px; padding-right: 24px; }
	.sky-panel__intro > p:last-child { margin-bottom: 20px; }
	.toggle-row { gap: 13px; }
	.sky-compass { width: 75vw; }
}

@media (prefers-reduced-motion: reduce) {
	.sky-panel, .sky-loader { transition-duration: .01s; }
	.sky-loader i { animation: none; }
}