:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --night: #0b0e20;
    --night-soft: #12172d;
    --surface: rgba(20, 25, 49, 0.78);
    --surface-strong: rgba(29, 35, 65, 0.96);
    --line: rgba(188, 197, 237, 0.16);
    --line-strong: rgba(196, 204, 244, 0.28);
    --text: #f7f7ff;
    --text-soft: #b7bedc;
    --text-faint: #858daa;
    --violet: #9f91e9;
    --violet-strong: #bdb2ff;
    --violet-soft: rgba(159, 145, 233, 0.14);
    --gold: #f2ca80;
    --success: #9fd8be;
    --danger: #ffaaa3;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    background: var(--night);
}

body {
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 72% 12%, rgba(112, 91, 196, 0.2), transparent 31rem),
        radial-gradient(circle at 8% 72%, rgba(55, 105, 161, 0.13), transparent 30rem),
        linear-gradient(145deg, #0a0d1d 0%, #10142a 54%, #0c1023 100%);
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

.cosmic-background {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cosmic-background::before,
.cosmic-background::after {
    position: absolute;
    inset: -10%;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 0.7px, transparent 0.9px),
        radial-gradient(circle, rgba(194, 204, 255, 0.55) 0 0.55px, transparent 0.75px);
    background-position: 0 0, 24px 30px;
    background-size: 72px 72px, 98px 98px;
    content: "";
    opacity: 0.2;
    transform: rotate(-4deg);
}

.cosmic-background::after {
    background-position: 40px 20px, 5px 60px;
    background-size: 132px 132px, 176px 176px;
    opacity: 0.16;
    transform: rotate(7deg);
}

.cosmic-background span {
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    filter: blur(3rem);
    opacity: 0.12;
}

.cosmic-background span:nth-child(1) {
    top: 6%;
    right: -8rem;
    background: #7866df;
}

.cosmic-background span:nth-child(2) {
    bottom: 4%;
    left: -10rem;
    background: #4673a4;
}

.cosmic-background span:nth-child(3) {
    top: 58%;
    right: 22%;
    width: 14rem;
    height: 14rem;
    background: #cf9f72;
    opacity: 0.06;
}

.sky-main {
    display: grid;
    align-items: start;
    padding-block: clamp(1.25rem, 2.5vw, 2.5rem);
}

.sky-intro {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.85rem, 1.8vw, 1.35rem);
}

.simulator-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}

.sky-copy {
    min-width: 0;
}

.sky-kicker {
    margin: 0 0 0.7rem;
    color: var(--violet-strong);
    font-size: 0.75rem;
    font-weight: 820;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    max-width: none;
    margin-bottom: 0;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 780;
    line-height: 0.94;
    letter-spacing: -0.052em;
}

h1 span,
h1 em {
    display: inline;
}

h1 em {
    margin-left: 0.12em;
    color: var(--gold);
    font-style: normal;
    font-weight: 570;
}

.sky-lead {
    max-width: 29rem;
    margin: 0.65rem 0 0;
    color: var(--text-soft);
    font-size: clamp(0.9rem, 1.6vw, 1.02rem);
    line-height: 1.55;
}

.moment-panel-toggle {
    display: inline-flex;
    min-height: 2.75rem;
    padding: 0.58rem 0.72rem;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.5rem;
    border: 1px solid rgba(188, 176, 255, 0.3);
    border-radius: 0.78rem;
    color: #e7e2ff;
    background: rgba(91, 77, 157, 0.18);
    font-size: 0.76rem;
    font-weight: 780;
    cursor: pointer;
}

.moment-panel-toggle:hover,
.moment-panel-toggle[aria-expanded="true"] {
    border-color: rgba(205, 196, 255, 0.5);
    background: rgba(111, 94, 188, 0.28);
}

.moment-panel-toggle svg {
    width: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.moment-panel-toggle .moment-panel-chevron {
    width: 0.9rem;
    transition: transform 160ms ease;
}

.moment-panel-toggle[aria-expanded="true"] .moment-panel-chevron {
    transform: rotate(180deg);
}

.moment-panel {
    position: relative;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(15, 19, 40, 0.82);
    box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.16);
}

.sky-form {
    position: relative;
    display: grid;
    max-width: none;
    margin-top: 0;
    grid-template-columns: minmax(22rem, 1.2fr) minmax(18rem, 1fr) minmax(9rem, 0.48fr) auto;
    align-items: end;
    gap: 0.65rem;
}

.today-button {
    display: inline-flex;
    min-height: 3.15rem;
    margin-bottom: 0;
    padding: 0.38rem 0.62rem;
    align-items: center;
    justify-content: center;
    grid-column: 4;
    grid-row: 1;
    gap: 0.36rem;
    border: 1px solid rgba(188, 176, 255, 0.3);
    border-radius: 999px;
    color: #dcd6ff;
    background: rgba(91, 77, 157, 0.2);
    font-size: 0.67rem;
    font-weight: 790;
    cursor: pointer;
}

.moment-fields {
    grid-column: 1;
    grid-row: 1;
}

.location-field {
    grid-column: 2;
    grid-row: 1;
}

.reveal-button {
    grid-column: 3;
    grid-row: 1;
}

.form-hint {
    grid-column: 1 / -1;
    grid-row: 2;
}

.form-status {
    grid-column: 1 / -1;
    grid-row: 3;
}

.today-button:hover {
    border-color: rgba(205, 196, 255, 0.5);
    background: rgba(111, 94, 188, 0.3);
}

.today-button:disabled {
    opacity: 0.58;
    cursor: wait;
}

.today-button svg {
    width: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.moment-fields {
    display: grid;
    grid-template-columns: minmax(18rem, 1.45fr) minmax(7rem, 0.55fr);
    gap: 0.7rem;
}

.sky-essential-date,
.location-field {
    align-self: end;
    color-scheme: dark;
}

.sky-essential-date [data-milos-field-label],
.location-field [data-milos-field-label] {
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 780;
    letter-spacing: 0.035em;
}

.sky-essential-date [data-milos-field-note],
.location-field [data-milos-place-status] {
    color: var(--text-faint);
    font-size: 0.62rem;
    font-weight: 650;
}

.location-field [data-milos-place-results] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    right: 0;
    left: 0;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.38);
}

.date-entry {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 0.38rem;
    border: 0;
}

.date-entry > legend {
    float: left;
    width: auto;
    margin: 0;
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 780;
    letter-spacing: 0.035em;
}

.date-entry-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem;
    padding: 0.18rem;
    border: 1px solid var(--line);
    border-radius: 0.68rem;
    background: rgba(7, 10, 24, 0.48);
}

.date-entry-modes button {
    min-height: 2rem;
    padding: 0.38rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.48rem;
    color: var(--text-faint);
    background: transparent;
    font: inherit;
    font-size: 0.67rem;
    font-weight: 760;
    cursor: pointer;
}

.date-entry-modes button[aria-selected="true"] {
    border-color: rgba(184, 170, 255, 0.3);
    color: #eeeaff;
    background: rgba(102, 84, 191, 0.38);
}

.date-picker-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5.3rem, 0.42fr);
    gap: 0.38rem 0.45rem;
}

.date-picker-panel > small {
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-size: 0.6rem;
    line-height: 1.35;
}

.date-picker-field {
    align-self: end;
}

.year-jump-field {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
}

.year-jump-field > span {
    color: var(--text-faint);
    font-size: 0.58rem;
    font-weight: 720;
}

.year-jump-field select {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.72rem 0.58rem;
    border: 1px solid var(--line);
    border-radius: 0.72rem;
    color: var(--text);
    background: rgba(12, 16, 35, 0.88);
    color-scheme: dark;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 720;
}

.date-manual-panel[hidden],
.date-picker-panel[hidden] {
    display: none;
}

.sky-field {
    display: grid;
    min-width: 0;
    gap: 0.38rem;
}

.sky-field > span:first-child {
    display: flex;
    min-height: 1rem;
    align-items: baseline;
    justify-content: space-between;
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 780;
    letter-spacing: 0.035em;
}

.sky-field small {
    color: var(--text-faint);
    font-size: 0.62rem;
    font-weight: 650;
}

.sky-field input {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.72rem;
    color: var(--text);
    background: rgba(12, 16, 35, 0.72);
    font-size: 0.88rem;
}

.sky-field input:hover {
    border-color: var(--line-strong);
}

.sky-field input::placeholder {
    color: #777f9f;
}

.sky-field input[type="date"],
.sky-field input[type="time"] {
    color-scheme: dark;
}

.location-field {
    position: relative;
}

.location-input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.location-input-shell > svg {
    position: absolute;
    z-index: 1;
    left: 0.82rem;
    width: 1rem;
    fill: none;
    stroke: var(--text-faint);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
    pointer-events: none;
}

.location-input-shell input {
    padding-left: 2.35rem;
    padding-right: 2.6rem;
}

.search-spinner {
    position: absolute;
    right: 0.9rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(189, 178, 255, 0.22);
    border-top-color: var(--violet-strong);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.location-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 0.78rem;
    background: #171c36;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.38);
}

.location-option {
    display: grid;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.62rem 0.78rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.location-option:last-child {
    border-bottom: 0;
}

.location-option:hover,
.location-option[aria-selected="true"] {
    background: var(--violet-soft);
}

.location-option > span:first-child {
    display: grid;
    min-width: 0;
}

.location-option strong {
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-option small,
.location-option > span:last-child {
    color: var(--text-faint);
    font-size: 0.65rem;
}

.location-empty {
    margin: 0;
    padding: 0.85rem;
    color: var(--text-soft);
    font-size: 0.75rem;
    text-align: center;
}

.reveal-button {
    display: inline-flex;
    width: 100%;
    min-height: 3.2rem;
    padding: 0.72rem 0.85rem 0.72rem 1rem;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #b5a7ff;
    border-radius: 0.74rem;
    color: #17142b;
    background: linear-gradient(135deg, #c8bfff, #a99ae9);
    font-size: 0.88rem;
    font-weight: 830;
    box-shadow: 0 0.9rem 2.2rem rgba(111, 91, 200, 0.2);
    cursor: pointer;
}

.reveal-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.reveal-button:active {
    transform: translateY(0);
}

.reveal-button svg {
    width: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.form-hint {
    display: flex;
    margin: -0.15rem 0 0;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    color: var(--text-faint);
    font-size: 0.66rem;
}

.form-hint svg {
    width: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.35;
}

.form-hint a {
    color: inherit;
    text-underline-offset: 0.16rem;
}

.form-status {
    min-height: 1rem;
    margin: -0.25rem 0 0;
    color: var(--danger);
    font-size: 0.72rem;
    text-align: center;
}

.form-status.success {
    color: var(--success);
}

.sky-visual {
    position: relative;
    min-width: 0;
    padding: clamp(0.55rem, 1.2vw, 0.85rem);
    border: 1px solid var(--line);
    border-radius: clamp(1.15rem, 3vw, 1.7rem);
    background:
        linear-gradient(155deg, rgba(29, 35, 68, 0.74), rgba(10, 14, 31, 0.64));
    box-shadow:
        0 2.2rem 5.5rem rgba(0, 0, 0, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(1.2rem);
}

.visual-heading {
    display: flex;
    min-height: 2rem;
    padding: 0 0.45rem 0.65rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-soft);
    font-size: 0.67rem;
    font-weight: 760;
    letter-spacing: 0.035em;
}

.visual-heading-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.interaction-prompt {
    display: none;
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: 0.61rem;
    font-weight: 650;
}

.visual-meta {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
}

.catalog-status {
    color: rgba(239, 207, 143, 0.82);
    font-size: 0.59rem;
    font-weight: 720;
    white-space: nowrap;
}

.live-dot {
    flex: 0 0 auto;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--violet-strong);
    box-shadow: 0 0 0 0.28rem rgba(159, 145, 233, 0.09);
}

.canvas-frame {
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    height: clamp(34rem, 68vh, 50rem);
    min-height: 34rem;
    aspect-ratio: auto;
    border: 1px solid var(--line);
    border-radius: clamp(0.85rem, 2.5vw, 1.25rem);
    background: #010207;
    isolation: isolate;
}

#skyCanvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

#skyCanvas.is-interacting {
    cursor: grabbing;
}

.canvas-glow {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 48%, transparent 52%, rgba(36, 42, 66, 0.08) 73%, rgba(0, 0, 3, 0.28));
    box-shadow: inset 0 0 3.2rem rgba(0, 0, 0, 0.24);
    pointer-events: none;
}

.view-direction,
.moon-focus-indicator,
.sun-focus-indicator,
.fullscreen-button,
.controls-toggle-button,
.planetarium-shortcuts,
.zoom-controls,
.object-inspector,
.planetarium-controls {
    position: absolute;
    z-index: 3;
}

.view-direction {
    top: 0.72rem;
    left: 0.72rem;
    max-width: calc(100% - 7rem);
    padding: 0.38rem 0.55rem;
    overflow: hidden;
    border: 1px solid rgba(194, 202, 241, 0.16);
    border-radius: 999px;
    color: rgba(237, 239, 255, 0.86);
    background: rgba(7, 10, 24, 0.54);
    font-size: 0.62rem;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(0.8rem);
    pointer-events: none;
}

.fullscreen-button,
.controls-toggle-button,
.zoom-controls button,
.layer-controls button,
.constellation-panel button,
.time-controls button,
.object-inspector button {
    border: 1px solid rgba(194, 202, 241, 0.19);
    color: rgba(241, 242, 255, 0.9);
    background: rgba(7, 10, 24, 0.68);
    backdrop-filter: blur(0.9rem);
    cursor: pointer;
}

.fullscreen-button:hover,
.controls-toggle-button:hover,
.zoom-controls button:hover,
.layer-controls button:hover,
.constellation-panel button:hover:not(:disabled),
.time-controls button:hover:not(:disabled),
.object-inspector button:hover {
    border-color: rgba(205, 211, 246, 0.34);
    background: rgba(24, 29, 57, 0.86);
}

.fullscreen-button {
    top: 0.65rem;
    right: 0.65rem;
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    place-items: center;
    border-radius: 0.6rem;
}

.controls-toggle-button {
    top: 0.65rem;
    right: 3.2rem;
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    place-items: center;
    border-radius: 0.6rem;
}

.fullscreen-button svg,
.controls-toggle-button svg,
.zoom-controls svg,
.object-inspector svg,
.layer-controls svg,
.constellation-panel svg,
.auto-time-trigger svg {
    width: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.zoom-controls {
    top: 3.2rem;
    right: 0.65rem;
    display: grid;
    overflow: hidden;
    border-radius: 0.62rem;
}

.zoom-controls button {
    display: grid;
    width: 2.2rem;
    height: 2.05rem;
    padding: 0;
    place-items: center;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 660;
}

.zoom-controls button + button {
    border-top: 0;
}

.object-inspector {
    bottom: 4.15rem;
    left: 0.72rem;
    display: grid;
    max-width: min(19rem, calc(100% - 5.2rem));
    min-width: 10rem;
    padding: 0.7rem 2.45rem 0.7rem 0.78rem;
    gap: 0.08rem;
    border: 1px solid rgba(189, 178, 255, 0.3);
    border-radius: 0.75rem;
    color: var(--text);
    background: rgba(12, 15, 34, 0.88);
    box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(1rem);
}

.object-inspector > span {
    color: var(--violet-strong);
    font-size: 0.56rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.object-inspector > strong {
    font-size: 0.82rem;
}

.object-inspector > small {
    color: var(--text-soft);
    font-size: 0.62rem;
    line-height: 1.4;
}

.object-inspector #closeObjectButton {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    place-items: center;
    border-radius: 0.45rem;
}

.object-inspector .object-focus {
    position: static;
    display: inline-flex;
    width: max-content;
    height: auto;
    min-height: 1.8rem;
    margin-top: 0.42rem;
    padding: 0.32rem 0.58rem;
    align-items: center;
    gap: 0.32rem;
    border-color: rgba(213, 203, 255, 0.3);
    border-radius: 0.52rem;
    color: #f1edff;
    background: rgba(102, 81, 178, 0.32);
    font-size: 0.6rem;
    font-weight: 760;
}

.object-inspector .object-focus svg {
    width: 0.86rem;
}

.moon-focus-indicator,
.sun-focus-indicator {
    top: 0.65rem;
    left: 50%;
    display: flex;
    max-width: calc(100% - 15rem);
    padding: 0.34rem 0.38rem 0.34rem 0.58rem;
    align-items: center;
    gap: 0.58rem;
    border: 1px solid rgba(216, 220, 238, 0.2);
    border-radius: 0.72rem;
    color: rgba(245, 246, 252, 0.94);
    background: rgba(5, 7, 15, 0.78);
    box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(1rem);
    transform: translateX(-50%);
}

.moon-focus-indicator span,
.sun-focus-indicator span {
    display: grid;
    min-width: 0;
}

.moon-focus-indicator strong,
.moon-focus-indicator small,
.sun-focus-indicator strong,
.sun-focus-indicator small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moon-focus-indicator strong,
.sun-focus-indicator strong {
    font-size: 0.62rem;
}

.moon-focus-indicator small,
.sun-focus-indicator small {
    color: rgba(193, 198, 216, 0.7);
    font-size: 0.48rem;
}

.moon-focus-indicator button,
.sun-focus-indicator button {
    min-height: 1.72rem;
    padding: 0.3rem 0.52rem;
    border: 1px solid rgba(216, 220, 238, 0.18);
    border-radius: 0.48rem;
    color: rgba(241, 242, 250, 0.86);
    background: rgba(255, 255, 255, 0.06);
    font: inherit;
    font-size: 0.52rem;
    font-weight: 720;
    white-space: nowrap;
    cursor: pointer;
}

.planetarium-controls {
    right: 0.65rem;
    bottom: 0.65rem;
    left: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    pointer-events: none;
}

.view-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    pointer-events: auto;
}

.direction-controls,
.layer-controls,
.time-controls {
    display: inline-flex;
    overflow: hidden;
    border-radius: 0.62rem;
    box-shadow: 0 0.5rem 1.3rem rgba(0, 0, 0, 0.16);
    pointer-events: auto;
}

.direction-controls {
    min-height: 2rem;
    padding: 0.18rem 0.4rem;
    align-items: center;
    gap: 0.38rem;
    border: 1px solid rgba(194, 202, 241, 0.19);
    color: rgba(241, 242, 255, 0.9);
    background: rgba(7, 10, 24, 0.68);
    backdrop-filter: blur(0.9rem);
}

.direction-value {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(203, 194, 255, 0.24);
    border-radius: 50%;
    color: #ded8ff;
    background: rgba(96, 82, 166, 0.38);
    font-size: 0.52rem;
    font-weight: 850;
}

.direction-scrubber {
    display: grid;
    width: 5.5rem;
    gap: 0.03rem;
}

.direction-scrubber input {
    width: 100%;
    height: 0.8rem;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.direction-scrubber input::-webkit-slider-runnable-track {
    height: 0.16rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #8f82d6, #d9ba72, #8f82d6);
}

.direction-scrubber input::-webkit-slider-thumb {
    width: 0.62rem;
    height: 0.62rem;
    margin-top: -0.23rem;
    appearance: none;
    border: 1px solid rgba(255, 246, 211, 0.76);
    border-radius: 50%;
    background: #d8bc78;
    box-shadow: 0 0 0.55rem rgba(216, 188, 120, 0.42);
}

.direction-scrubber input::-moz-range-track {
    height: 0.16rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #8f82d6, #d9ba72, #8f82d6);
}

.direction-scrubber input::-moz-range-thumb {
    width: 0.62rem;
    height: 0.62rem;
    border: 1px solid rgba(255, 246, 211, 0.76);
    border-radius: 50%;
    background: #d8bc78;
    box-shadow: 0 0 0.55rem rgba(216, 188, 120, 0.42);
}

.direction-cardinals {
    display: flex;
    justify-content: space-between;
    color: rgba(188, 192, 220, 0.62);
    font-size: 0.34rem;
    font-weight: 760;
    line-height: 1;
    pointer-events: none;
}

.layer-controls {
    overflow: visible;
}

.constellation-menu {
    position: relative;
    display: inline-flex;
}

.layer-controls button,
.time-controls button {
    display: inline-flex;
    min-height: 2rem;
    padding: 0.38rem 0.58rem;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border-radius: 0;
    font-size: 0.58rem;
    font-weight: 740;
    white-space: nowrap;
}

.time-controls button + button {
    border-left: 0;
}

.constellation-trigger.is-active,
.layer-controls > button[aria-pressed="true"] {
    color: #ded8ff;
    background: rgba(96, 82, 166, 0.64);
}

.constellation-trigger {
    border-radius: 0.62rem 0 0 0.62rem !important;
}

.constellation-trigger .menu-chevron {
    width: 0.78rem;
    transition: transform 150ms ease;
}

.constellation-trigger[aria-expanded="true"] .menu-chevron {
    transform: rotate(180deg);
}

.layer-controls > #labelsButton {
    border-left: 0;
    border-radius: 0 0.62rem 0.62rem 0;
}

.constellation-panel {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    display: grid;
    width: 22rem;
    max-height: min(74vh, 38rem);
    padding: 0.38rem;
    overflow-y: auto;
    border: 1px solid rgba(197, 202, 234, 0.2);
    border-radius: 0.78rem;
    background: rgba(10, 13, 29, 0.95);
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(1.1rem);
}

.constellation-panel[hidden] {
    display: none;
}

.constellation-panel button {
    display: flex;
    width: 100%;
    min-height: 3rem;
    padding: 0.55rem 0.58rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-color: transparent;
    border-radius: 0.5rem;
    background: transparent;
    text-align: left;
}

.constellation-panel button > span:first-child {
    display: grid;
    gap: 0.08rem;
}

.constellation-panel strong {
    color: rgba(243, 244, 255, 0.92);
    font-size: 0.66rem;
}

.constellation-panel small {
    color: rgba(177, 181, 207, 0.72);
    font-size: 0.55rem;
}

.constellation-panel button:disabled {
    opacity: 0.42;
    cursor: default;
}

.setting-switch {
    position: relative;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1rem;
    border: 1px solid rgba(197, 202, 234, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.setting-switch::after {
    position: absolute;
    top: 0.14rem;
    left: 0.16rem;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    background: rgba(221, 224, 241, 0.68);
    content: "";
    transition: transform 150ms ease, background 150ms ease;
}

.constellation-panel button[aria-pressed="true"] .setting-switch {
    border-color: rgba(174, 159, 250, 0.62);
    background: rgba(118, 99, 208, 0.58);
}

.constellation-panel button[aria-pressed="true"] .setting-switch::after {
    background: #f0edff;
    transform: translateX(0.72rem);
}

.zodiac-settings {
    display: grid;
    margin-top: 0.28rem;
    padding: 0.68rem 0.58rem 0.46rem;
    gap: 0.48rem;
    border-top: 1px solid rgba(197, 202, 234, 0.13);
}

.constellation-package-settings {
    display: grid;
    margin-top: 0.28rem;
    padding: 0.68rem 0.58rem 0.5rem;
    gap: 0.48rem;
    border-top: 1px solid rgba(197, 202, 234, 0.13);
}

.constellation-package-settings > header {
    display: grid;
    gap: 0.08rem;
}

.constellation-package-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
}

.constellation-panel .constellation-package-options button {
    display: grid;
    min-height: 3.15rem;
    padding: 0.48rem 0.44rem;
    place-items: center;
    gap: 0.1rem;
    border: 1px solid rgba(197, 202, 234, 0.12);
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.constellation-panel .constellation-package-options button[aria-pressed="true"] {
    border-color: rgba(176, 160, 251, 0.5);
    color: #f1edff;
    background: linear-gradient(
        145deg,
        rgba(124, 104, 220, 0.28),
        rgba(92, 76, 176, 0.14));
}

.constellation-panel .constellation-package-options strong {
    font-size: 0.59rem;
}

.constellation-panel .constellation-package-options small {
    font-size: 0.49rem;
}

.zodiac-settings > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.7rem;
}

.zodiac-settings > header > span {
    display: grid;
    gap: 0.08rem;
}

.zodiac-settings output {
    flex: 0 0 auto;
    max-width: 6.5rem;
    padding: 0.26rem 0.42rem;
    overflow: hidden;
    border: 1px solid rgba(175, 161, 246, 0.28);
    border-radius: 999px;
    color: rgba(221, 214, 255, 0.94);
    background: rgba(124, 104, 220, 0.14);
    font-size: 0.58rem;
    font-weight: 790;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zodiac-system-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
}

.constellation-panel .zodiac-system-options button {
    display: grid;
    min-height: 3.2rem;
    padding: 0.48rem 0.36rem;
    place-items: center;
    gap: 0.12rem;
    border: 1px solid rgba(197, 202, 234, 0.12);
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.constellation-panel .zodiac-system-options button[aria-pressed="true"] {
    border-color: rgba(176, 160, 251, 0.5);
    color: #f1edff;
    background:
        linear-gradient(145deg, rgba(124, 104, 220, 0.28), rgba(92, 76, 176, 0.14));
    box-shadow: inset 0 0 0 1px rgba(220, 213, 255, 0.05);
}

.constellation-panel .zodiac-system-options strong {
    font-size: 0.58rem;
}

.constellation-panel .zodiac-system-options small {
    font-size: 0.49rem;
}

.zodiac-current-detail {
    min-height: 0.72rem;
    line-height: 1.35;
}

.constellation-panel .mouse-pan-setting {
    margin-top: 0.18rem;
    border-top-color: rgba(197, 202, 234, 0.13);
    border-radius: 0;
}

.time-controls button {
    min-width: 2.7rem;
}

.time-controls {
    overflow: visible;
    min-width: min(22rem, 68vw);
    align-items: stretch;
}

.auto-time-menu {
    position: relative;
    display: inline-flex;
}

.time-controls .auto-time-trigger {
    min-width: 4rem;
    border-radius: 0.62rem 0 0 0.62rem;
}

.auto-time-menu + button {
    border-left: 0;
}

.auto-time-trigger svg {
    width: 0.88rem;
}

.auto-time-trigger .auto-time-pause-icon {
    display: none;
}

.auto-time-trigger.is-running {
    color: #fff1c6;
    background: rgba(132, 96, 40, 0.72);
}

.auto-time-trigger.is-running .auto-time-play-icon {
    display: none;
}

.auto-time-trigger.is-running .auto-time-pause-icon {
    display: block;
}

.auto-time-panel {
    position: absolute;
    z-index: 6;
    bottom: calc(100% + 0.55rem);
    left: 0;
    display: grid;
    width: 16.5rem;
    padding: 0.68rem;
    gap: 0.42rem;
    border: 1px solid rgba(194, 202, 241, 0.22);
    border-radius: 0.78rem;
    color: rgba(241, 242, 255, 0.92);
    background: rgba(8, 11, 25, 0.96);
    box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(1rem);
}

.auto-time-panel[hidden] {
    display: none;
}

.auto-time-panel > strong {
    font-size: 0.72rem;
}

.auto-time-panel > small {
    margin-top: -0.28rem;
    color: rgba(192, 197, 225, 0.7);
    font-size: 0.56rem;
    line-height: 1.35;
}

.time-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.28rem;
    padding: 0.18rem;
    border: 1px solid rgba(194, 202, 241, 0.13);
    border-radius: 0.62rem;
    background: rgba(255, 255, 255, 0.025);
}

.time-controls .time-mode-switch button {
    min-height: 2rem;
    padding-inline: 0.45rem;
    justify-content: center;
    border-color: transparent;
    background: transparent;
    font-size: 0.56rem;
}

.time-controls .time-mode-switch button[aria-selected="true"] {
    border-color: rgba(178, 164, 248, 0.3);
    color: #ebe7ff;
    background: rgba(103, 86, 183, 0.38);
}

.time-rate-list {
    display: grid;
    gap: 0.34rem;
}

.time-rate-list[hidden] {
    display: none;
}

.time-controls .auto-time-panel button {
    width: 100%;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0.45rem 0.55rem;
    justify-content: space-between;
    border: 1px solid rgba(194, 202, 241, 0.15);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.035);
}

.time-controls .auto-time-panel button + button {
    border-left: 1px solid rgba(194, 202, 241, 0.15);
}

.auto-time-panel button small {
    color: rgba(192, 197, 225, 0.62);
    font-size: 0.5rem;
    font-weight: 620;
}

.auto-time-panel .cosmic-model-note {
    margin: 0.05rem 0 0;
    padding: 0.42rem 0.48rem;
    border-radius: 0.48rem;
    color: rgba(192, 197, 225, 0.72);
    background: rgba(114, 96, 191, 0.1);
    font-size: 0.5rem;
    line-height: 1.4;
}

.auto-time-panel .cosmic-model-note[hidden] {
    display: none;
}

.time-controls .auto-time-panel button[aria-pressed="true"] {
    border-color: rgba(231, 203, 142, 0.4);
    color: #fff0c4;
    background: rgba(151, 111, 43, 0.26);
}

.time-controls .auto-time-panel .auto-time-stop {
    justify-content: center;
    color: rgba(231, 233, 249, 0.76);
}

.time-scrubber {
    display: grid;
    flex: 1 1 10rem;
    min-width: 8.2rem;
    padding: 0.24rem 0.5rem 0.18rem;
    align-content: center;
    gap: 0.05rem;
    border-top: 1px solid rgba(194, 202, 241, 0.19);
    border-bottom: 1px solid rgba(194, 202, 241, 0.19);
    background: rgba(7, 10, 24, 0.76);
    backdrop-filter: blur(0.9rem);
}

.time-scrubber input {
    width: 100%;
    height: 0.82rem;
    margin: 0;
    accent-color: #d7b772;
    cursor: ew-resize;
    touch-action: manipulation;
}

.time-scrubber .moment-button {
    width: 100%;
    min-width: 0;
    min-height: 0.82rem;
    padding: 0;
    border: 0;
    color: var(--gold);
    background: transparent;
    font-size: 0.51rem;
    line-height: 1.2;
    backdrop-filter: none;
}

.time-scrubber .moment-button:hover:not(:disabled) {
    border: 0;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 0.12rem;
}

.canvas-frame.is-cosmic-time .time-scrubber {
    border-color: rgba(168, 150, 246, 0.3);
    background: rgba(15, 11, 35, 0.82);
}

.canvas-frame.is-cosmic-time .time-scrubber .moment-button {
    color: #c9bdff;
}

.canvas-frame.is-cosmic-time .constellation-menu {
    opacity: 0.46;
}

.time-controls button:disabled {
    color: rgba(174, 181, 216, 0.42);
    cursor: default;
}

.canvas-frame:fullscreen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
}

.canvas-frame:fullscreen .planetarium-controls {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: max(1rem, env(safe-area-inset-left));
}

.canvas-frame:fullscreen .view-direction {
    top: max(1rem, env(safe-area-inset-top));
    left: max(1rem, env(safe-area-inset-left));
}

.canvas-frame:fullscreen .moon-focus-indicator,
.canvas-frame:fullscreen .sun-focus-indicator {
    top: max(1rem, env(safe-area-inset-top));
}

.canvas-frame:fullscreen .fullscreen-button {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
}

.canvas-frame:fullscreen .controls-toggle-button {
    top: max(1rem, env(safe-area-inset-top));
    right: calc(max(1rem, env(safe-area-inset-right)) + 2.55rem);
}

.canvas-frame:fullscreen .planetarium-shortcuts {
    top: calc(max(1rem, env(safe-area-inset-top)) + 0.18rem);
    right: calc(max(1rem, env(safe-area-inset-right)) + 5.45rem);
}

.canvas-frame:fullscreen .zoom-controls {
    top: calc(max(1rem, env(safe-area-inset-top)) + 2.7rem);
    right: max(1rem, env(safe-area-inset-right));
}

.catalog-credit {
    display: flex;
    margin: 0.34rem 0.35rem -0.22rem;
    justify-content: flex-end;
    gap: 0.28rem;
    flex-wrap: wrap;
    color: var(--text-faint);
    font-size: 0.5rem;
    text-align: right;
}

.catalog-credit a {
    color: inherit;
    text-decoration: none;
}

.catalog-credit a:hover {
    color: var(--text-soft);
    text-decoration: underline;
    text-underline-offset: 0.12rem;
}

.result-placeholder {
    display: flex;
    min-height: 3.85rem;
    padding: 0.85rem 0.45rem 0.1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.result-placeholder strong {
    font-size: 0.8rem;
}

.result-placeholder span {
    color: var(--text-faint);
    font-size: 0.68rem;
}

.sky-result {
    padding: 1rem 0.35rem 0.2rem;
}

.result-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.result-heading p {
    margin: 0 0 0.18rem;
    color: var(--text-faint);
    font-size: 0.67rem;
}

.result-heading h2 {
    margin: 0;
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    letter-spacing: -0.025em;
}

.result-badge {
    flex: 0 0 auto;
    padding: 0.32rem 0.5rem;
    border: 1px solid rgba(159, 145, 233, 0.25);
    border-radius: 999px;
    color: var(--violet-strong);
    background: var(--violet-soft);
    font-size: 0.6rem;
    font-weight: 820;
}

.sky-facts {
    display: grid;
    margin-top: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--line);
}

.sky-facts article {
    display: grid;
    min-width: 0;
    padding: 0.78rem 0.75rem;
    gap: 0.16rem;
    border-right: 1px solid var(--line);
}

.sky-facts article:first-child {
    padding-left: 0;
}

.sky-facts article:last-child {
    padding-right: 0;
    border-right: 0;
}

.sky-facts span,
.sky-facts small {
    overflow: hidden;
    color: var(--text-faint);
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sky-facts strong {
    overflow: hidden;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sky-facts label {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.sky-facts select {
    min-width: 0;
    max-width: 7.4rem;
    padding: 0.18rem 1.2rem 0.18rem 0.38rem;
    border: 1px solid rgba(159, 145, 233, 0.24);
    border-radius: 999px;
    color: var(--violet-strong);
    background: rgba(159, 145, 233, 0.09);
    font: inherit;
    font-size: 0.52rem;
    font-weight: 760;
    cursor: pointer;
}

.sky-facts select option {
    color: #eceaf9;
    background: #111426;
}

.sky-story {
    margin: 0.78rem 0 0;
    color: var(--text-soft);
    font-size: 0.72rem;
    line-height: 1.55;
}

.result-actions {
    display: flex;
    margin-top: 0.85rem;
    gap: 0.55rem;
}

.result-actions milos-share-button {
    width: 100%;
}

.result-actions milos-share-button > button {
    width: 100%;
}

.share-button,
.download-button {
    display: inline-flex;
    min-height: 2.35rem;
    padding: 0.48rem 0.68rem;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.62rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.68rem;
    font-weight: 760;
    cursor: pointer;
}

.share-button {
    border-color: rgba(159, 145, 233, 0.34);
    color: var(--violet-strong);
    background: var(--violet-soft);
}

.share-button:hover,
.download-button:hover {
    background: rgba(255, 255, 255, 0.075);
}

.share-button svg,
.download-button svg {
    width: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.download-dialog {
    width: min(31rem, calc(100% - 2rem));
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(198, 201, 231, 0.2);
    border-radius: 1.1rem;
    color: var(--text);
    background: rgba(10, 12, 26, 0.97);
    box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, 0.58);
}

.download-dialog::backdrop {
    background: rgba(2, 3, 9, 0.72);
    backdrop-filter: blur(0.45rem);
}

.download-dialog-card {
    display: grid;
    padding: 1rem;
    gap: 0.8rem;
}

.download-dialog-card > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.download-dialog-card h2 {
    margin: 0.08rem 0 0;
    font-size: 1.18rem;
    letter-spacing: -0.025em;
}

.download-dialog-kicker {
    color: var(--violet-strong);
    font-size: 0.58rem;
    font-weight: 830;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.download-dialog-close {
    display: grid;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 0.58rem;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}

.download-dialog-close svg,
.download-confirm svg {
    width: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.download-dialog-card > p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.72rem;
    line-height: 1.5;
}

.download-dialog fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.download-dialog legend {
    margin-bottom: 0.42rem;
    color: var(--text-faint);
    font-size: 0.58rem;
    font-weight: 760;
}

.download-resolution-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.download-resolution-options button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 5rem;
    padding: 0.65rem;
    align-items: end;
    border: 1px solid rgba(196, 200, 229, 0.15);
    border-radius: 0.72rem;
    color: var(--text);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
    text-align: left;
    cursor: pointer;
}

.download-resolution-options button[aria-pressed="true"] {
    border-color: rgba(175, 159, 250, 0.58);
    background:
        linear-gradient(155deg, rgba(132, 110, 228, 0.28), rgba(88, 73, 173, 0.12));
    box-shadow: inset 0 0 0 1px rgba(218, 211, 255, 0.06);
}

.download-resolution-options button > span {
    display: grid;
    min-width: 0;
    gap: 0.16rem;
}

.download-resolution-options strong {
    font-size: 0.78rem;
}

.download-resolution-options small {
    color: var(--text-faint);
    font-size: 0.55rem;
    line-height: 1.35;
}

.download-resolution-options em {
    position: absolute;
    top: 0.42rem;
    right: 0.42rem;
    padding: 0.18rem 0.3rem;
    border-radius: 999px;
    color: #e7e0ff;
    background: rgba(144, 121, 237, 0.26);
    font-size: 0.46rem;
    font-style: normal;
    font-weight: 820;
}

.download-dialog-status {
    min-height: 1rem;
    color: #f2ca80;
    font-size: 0.62rem;
}

.download-dialog-actions {
    display: flex;
    justify-content: end;
    gap: 0.48rem;
}

.download-cancel,
.download-confirm {
    display: inline-flex;
    min-height: 2.4rem;
    padding: 0.48rem 0.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 0.62rem;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.035);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 760;
    cursor: pointer;
}

.download-confirm {
    border-color: rgba(174, 159, 250, 0.42);
    color: #f0ecff;
    background: rgba(121, 100, 216, 0.3);
}

.download-dialog button:disabled {
    opacity: 0.46;
    cursor: wait;
}

.planetarium-shortcuts {
    top: 0.82rem;
    right: 6rem;
    display: inline-flex;
    margin: 0;
    align-items: center;
    gap: 0.7rem;
    color: rgba(197, 202, 232, 0.72);
    font-size: 0.56rem;
    font-weight: 700;
    pointer-events: none;
}

.planetarium-shortcuts > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.planetarium-shortcuts kbd {
    display: grid;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.2rem;
    place-items: center;
    border: 1px solid rgba(197, 204, 237, 0.22);
    border-radius: 0.34rem;
    color: #e7eaff;
    background: rgba(7, 10, 24, 0.72);
    font: inherit;
}

.canvas-frame .view-direction,
.canvas-frame .moon-focus-indicator,
.canvas-frame .sun-focus-indicator,
.canvas-frame .zoom-controls,
.canvas-frame .object-inspector,
.canvas-frame .planetarium-controls,
.canvas-frame .planetarium-shortcuts {
    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 160ms ease;
}

.canvas-frame.is-controls-hidden .view-direction,
.canvas-frame.is-controls-hidden .moon-focus-indicator,
.canvas-frame.is-controls-hidden .sun-focus-indicator,
.canvas-frame.is-controls-hidden .zoom-controls,
.canvas-frame.is-controls-hidden .object-inspector,
.canvas-frame.is-controls-hidden .planetarium-controls {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.canvas-frame.is-controls-hidden .planetarium-shortcuts > span:first-child {
    display: none;
}

.canvas-frame.is-controls-hidden .planetarium-shortcuts {
    right: 6rem;
}

.sky-privacy-info {
    display: flex;
    margin: 0.48rem 0.35rem 0;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
    color: var(--text-faint);
    font-size: 0.58rem;
    text-align: right;
}

.sky-privacy-info a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--text-soft);
    text-underline-offset: 0.16rem;
}

.moment-fields {
    grid-template-columns: minmax(15rem, 1fr) 6.4rem;
}

.moment-fields .sky-field {
    width: 6.4rem;
}

.moment-fields .sky-field input[type="time"] {
    min-height: 2.7rem;
    padding: 0.52rem 0.58rem;
    font-size: 0.76rem;
}

.layer-controls {
    border-radius: 0.62rem;
}

.constellation-trigger {
    min-height: 2.75rem;
    border-radius: 0.62rem !important;
}

.sky-settings-panel {
    width: min(31rem, calc(100vw - 2rem));
    max-height: min(78vh, 42rem);
    padding: 0;
    gap: 0;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.settings-backdrop {
    display: none;
}

.sky-settings-panel .settings-header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    min-height: 3.5rem;
    padding: 0.72rem 0.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(197, 202, 234, 0.13);
    background: rgba(10, 13, 29, 0.97);
}

.sky-settings-panel .settings-header > span {
    display: grid;
    gap: 0.08rem;
}

.sky-settings-panel .settings-header strong {
    font-size: 0.84rem;
}

.sky-settings-panel .settings-header small {
    font-size: 0.59rem;
}

.sky-settings-panel .settings-close {
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    justify-content: center;
    border: 1px solid rgba(197, 202, 234, 0.16);
    border-radius: 0.65rem;
    font-size: 1.2rem;
}

.settings-section {
    display: grid;
    margin: 0;
    padding: 0.68rem 0.7rem;
    gap: 0.48rem;
    border-top: 1px solid rgba(197, 202, 234, 0.1);
}

.settings-section:first-of-type {
    border-top: 0;
}

.settings-section h3 {
    margin: 0;
    color: rgba(213, 207, 244, 0.72);
    font-size: 0.58rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.sky-settings-panel .settings-toggle-grid > button,
.sky-settings-panel .mouse-pan-setting,
.sky-settings-panel #settingsDownloadButton {
    min-height: 3.15rem;
    border: 1px solid rgba(197, 202, 234, 0.11);
    background: rgba(255, 255, 255, 0.025);
}

.sky-settings-panel .settings-toggle-grid > button[aria-pressed="true"],
.sky-settings-panel .mouse-pan-setting[aria-pressed="true"] {
    border-color: rgba(176, 160, 251, 0.3);
    background: rgba(111, 94, 188, 0.12);
}

.settings-layer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-action-icon {
    flex: 0 0 auto;
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.constellation-package-settings,
.zodiac-settings {
    margin-top: 0;
}

.constellation-package-settings > header {
    padding-top: 0.15rem;
}

.sky-settings-panel .mouse-pan-setting {
    display: none;
    margin: 0;
    border-radius: 0.5rem;
}

.settings-note {
    margin: 0;
    color: rgba(177, 181, 207, 0.72);
    font-size: 0.57rem;
    line-height: 1.45;
}

.planetarium-shortcuts {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .planetarium-shortcuts {
        display: inline-flex;
    }

    .sky-settings-panel .mouse-pan-setting {
        display: flex;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@container (max-width: 760px) {
    .planetarium-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .view-controls {
        width: 100%;
        justify-content: space-between;
    }

    .time-controls {
        width: 100%;
        min-width: 0;
    }

    .time-scrubber {
        min-width: 0;
    }

    .object-inspector {
        bottom: 6rem;
    }
}

@media (max-width: 900px) {
    .sky-main {
        align-items: start;
    }

    .sky-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .sky-copy {
        display: block;
    }

    .sky-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin-top: 0;
    }

    .moment-fields {
        grid-column: 1;
        grid-row: 1;
    }

    .location-field {
        grid-column: 2;
        grid-row: 1;
    }

    .reveal-button {
        grid-column: 1;
        grid-row: 2;
    }

    .today-button {
        grid-column: 2;
        grid-row: 2;
    }

    .form-hint {
        grid-row: 3;
    }

    .form-status {
        grid-row: 4;
    }

    h1 {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .sky-visual {
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 680px) {
    .sky-main {
        padding-block: 1rem 2rem;
    }

    .simulator-heading {
        align-items: start;
        flex-direction: column;
        gap: 0.85rem;
    }

    .sky-form {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0;
    }

    h1 {
        max-width: none;
        font-size: clamp(2.3rem, 12vw, 3.35rem);
    }

    h1 span,
    h1 em {
        display: inline;
    }

    h1 em {
        margin-left: 0.1em;
    }

    .sky-lead {
        margin-top: 0.85rem;
    }

    .sky-intro {
        gap: 0.85rem;
    }

    .sky-visual {
        padding: 0.45rem;
        border-radius: 1.1rem;
    }

    .canvas-frame {
        height: clamp(32rem, 72dvh, 42rem);
        min-height: 32rem;
        aspect-ratio: auto;
    }

    .moment-panel {
        padding: 0.7rem;
    }

    .today-button {
        grid-column: 1;
        grid-row: 1;
    }

    .moment-fields {
        grid-column: 1;
        grid-row: 2;
    }

    .location-field {
        grid-column: 1;
        grid-row: 3;
    }

    .reveal-button {
        grid-column: 1;
        grid-row: 4;
    }

    .form-hint {
        grid-row: 5;
    }

    .form-status {
        grid-row: 6;
    }

    .result-placeholder {
        min-height: 3.2rem;
    }

    .result-badge {
        display: none;
    }

    .interaction-prompt {
        display: inline;
    }

    .catalog-status {
        display: none;
    }
}

@media (max-width: 430px) {
    .interaction-prompt {
        display: inline;
    }

    .planetarium-shortcuts {
        display: none;
    }

    .planetarium-controls {
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .view-controls {
        width: 100%;
        justify-content: space-between;
    }

    .layer-controls {
        min-width: 0;
    }

    .time-controls {
        width: 100%;
        min-width: 0;
    }

    .layer-controls > button,
    .constellation-trigger,
    .time-controls button {
        min-height: 1.9rem;
        padding-inline: 0.43rem;
        font-size: 0.54rem;
    }

    .direction-controls {
        min-width: 0;
        flex: 0 1 7.8rem;
    }

    .direction-scrubber {
        min-width: 0;
        width: 4.75rem;
    }

    .constellation-panel {
        right: 0;
        left: auto;
        width: min(17.4rem, calc(100vw - 3rem));
    }

    .time-controls button {
        min-width: 2.35rem;
    }

    .time-controls .auto-time-trigger {
        min-width: 3.35rem;
        padding-inline: 0.38rem;
    }

    .auto-time-panel {
        width: min(16.5rem, calc(100vw - 2rem));
    }

    .time-scrubber {
        min-width: 0;
    }

    .object-inspector {
        bottom: 6rem;
    }

    .moon-focus-indicator,
    .sun-focus-indicator {
        top: 3.15rem;
        right: 3.25rem;
        left: 0.5rem;
        max-width: none;
        justify-content: space-between;
        transform: none;
    }

    .moon-focus-indicator small,
    .sun-focus-indicator small {
        display: none;
    }

    .moment-fields {
        grid-template-columns: 1fr;
    }

    .sky-facts {
        grid-template-columns: 1fr 1fr;
    }

    .sky-facts article {
        padding-inline: 0.6rem;
    }

    .sky-facts article:nth-child(2) {
        padding-right: 0;
        border-right: 0;
    }

    .sky-facts article:nth-child(3) {
        display: none;
    }

    .result-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* Object facts and close-up atlas */
.object-inspector-facts {
    display: grid;
    margin: 0.28rem 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
}

.object-inspector-facts[hidden] {
    display: none;
}

.object-inspector-facts > div {
    min-width: 0;
    padding: 0.38rem 0.44rem;
    border: 1px solid rgba(198, 201, 231, 0.1);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.025);
}

.object-inspector-facts dt,
.object-closeup-facts dt {
    color: rgba(184, 175, 236, 0.82);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.object-inspector-facts dd,
.object-closeup-facts dd {
    margin: 0.12rem 0 0;
    color: rgba(239, 240, 255, 0.9);
    font-size: 0.6rem;
    line-height: 1.35;
}

.object-closeup-dialog {
    width: min(58rem, calc(100% - 2rem));
    max-width: none;
    max-height: min(46rem, calc(100dvh - 2rem));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(199, 192, 242, 0.26);
    border-radius: 1.2rem;
    color: var(--text);
    background: rgba(7, 9, 21, 0.985);
    box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.7);
}

.object-closeup-dialog::backdrop {
    background: rgba(0, 1, 6, 0.76);
    backdrop-filter: blur(0.5rem);
}

.object-closeup-card {
    display: grid;
    max-height: inherit;
    grid-template-rows: auto minmax(0, 1fr);
}

.object-closeup-card > header {
    display: grid;
    min-height: 4.5rem;
    padding: 0.72rem 0.75rem 0.72rem 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    border-bottom: 1px solid rgba(199, 192, 242, 0.12);
}

.object-closeup-card > header > span {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

.object-closeup-card > header small {
    color: var(--violet-strong);
    font-size: 0.58rem;
    font-weight: 820;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.object-closeup-card > header strong {
    overflow: hidden;
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#objectCloseupCloseButton {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(199, 192, 242, 0.2);
    border-radius: 0.7rem;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

#objectCloseupCloseButton svg {
    width: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.object-closeup-layout {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(22rem, 1.35fr) minmax(18rem, 0.9fr);
    overflow: auto;
}

.object-closeup-visual {
    position: relative;
    display: grid;
    min-height: 28rem;
    margin: 0;
    padding: 1.1rem;
    place-items: center;
    overflow: hidden;
    border-right: 1px solid rgba(199, 192, 242, 0.1);
    background:
        radial-gradient(circle at 50% 45%, rgba(50, 59, 92, 0.2), transparent 54%),
        #010207;
}

.object-closeup-layout > *,
.object-closeup-visual img,
.object-closeup-visual canvas {
    min-width: 0;
}

.object-closeup-visual img,
.object-closeup-visual canvas {
    display: block;
    width: 100%;
    max-width: 42rem;
    height: auto;
    max-height: min(33rem, 63dvh);
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.object-closeup-visual img[hidden],
.object-closeup-visual canvas[hidden] {
    display: none;
}

.object-closeup-visual-kind {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.3rem 0.48rem;
    border: 1px solid rgba(203, 195, 246, 0.18);
    border-radius: 999px;
    color: rgba(232, 228, 255, 0.78);
    background: rgba(5, 7, 17, 0.68);
    font-size: 0.52rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    backdrop-filter: blur(0.7rem);
}

.object-closeup-visual figcaption {
    position: absolute;
    right: 0.85rem;
    bottom: 0.75rem;
    left: 0.85rem;
    color: rgba(204, 209, 232, 0.66);
    font-size: 0.54rem;
    line-height: 1.4;
    text-align: center;
}

.object-closeup-copy {
    display: grid;
    align-content: start;
    padding: clamp(1rem, 2.7vw, 1.55rem);
    gap: 1rem;
}

.object-closeup-copy > p {
    margin: 0;
    color: rgba(240, 241, 255, 0.92);
    font-size: 0.82rem;
    line-height: 1.62;
}

.object-closeup-facts {
    display: grid;
    margin: 0;
    gap: 0.5rem;
}

.object-closeup-facts > div {
    padding: 0.72rem;
    border: 1px solid rgba(199, 192, 242, 0.11);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.025);
}

.object-closeup-facts dd {
    font-size: 0.7rem;
    line-height: 1.45;
}

.object-closeup-actions {
    display: flex;
    gap: 0.48rem;
    flex-wrap: wrap;
}

.object-closeup-actions a {
    display: inline-flex;
    min-height: 2.75rem;
    padding: 0.52rem 0.72rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(199, 192, 242, 0.2);
    border-radius: 0.65rem;
    color: #e3dcff;
    background: rgba(111, 94, 188, 0.12);
    font-size: 0.66rem;
    font-weight: 760;
    text-decoration: none;
}

.object-closeup-actions a:first-child {
    border-color: rgba(172, 153, 255, 0.38);
    background: rgba(111, 94, 188, 0.28);
}

@media (max-width: 700px) {
    .object-closeup-dialog {
        width: calc(100% - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)));
        max-height: min(90dvh, 48rem);
        margin: auto max(1rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        border-radius: 1.15rem 1.15rem 0.82rem 0.82rem;
    }

    .object-closeup-dialog::after {
        position: absolute;
        top: 0.42rem;
        left: 50%;
        width: 2.6rem;
        height: 0.22rem;
        border-radius: 999px;
        background: rgba(218, 215, 238, 0.28);
        content: "";
        transform: translateX(-50%);
        pointer-events: none;
    }

    .object-closeup-card > header {
        min-height: 4.15rem;
        padding-top: 0.85rem;
    }

    .object-closeup-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .object-closeup-visual {
        width: 100%;
        min-height: 0;
        aspect-ratio: 4 / 3;
        border-right: 0;
        border-bottom: 1px solid rgba(199, 192, 242, 0.1);
    }

    .object-closeup-visual img,
    .object-closeup-visual canvas {
        max-height: 18rem;
    }

    .object-closeup-copy {
        padding: 0.9rem;
        gap: 0.72rem;
    }

    .object-closeup-copy > p {
        font-size: 0.76rem;
    }

    .object-closeup-facts {
        gap: 0.42rem;
    }
}

@media (max-width: 300px) {
    .object-inspector-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .object-closeup-dialog {
        width: calc(100% - 0.75rem);
        margin-right: 0.375rem;
        margin-left: 0.375rem;
    }

    .object-closeup-visual {
        min-height: 0;
        padding: 0.65rem;
    }

    .object-closeup-visual-kind {
        top: 0.58rem;
        left: 0.58rem;
    }

    .object-closeup-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 430px) {
    .date-entry {
        gap: 0.5rem;
    }

    .date-entry-modes button,
    .year-jump-field select,
    .date-picker-field input,
    .date-manual-panel input {
        min-height: 2.75rem;
    }

    #momentTime {
        min-height: 44px;
    }

    .date-entry-modes button {
        font-size: 0.74rem;
    }

    .date-picker-panel {
        grid-template-columns: minmax(0, 1fr) 6.6rem;
        gap: 0.42rem;
    }

    .date-picker-panel > small {
        font-size: 0.65rem;
    }

    .fullscreen-button,
    .controls-toggle-button {
        top: 0.5rem;
        min-height: 2.75rem;
        border-radius: 0.72rem;
    }

    .fullscreen-button {
        right: 0.5rem;
        width: 2.75rem;
        height: 2.75rem;
    }

    .controls-toggle-button {
        right: 3.55rem;
        display: inline-flex;
        width: auto;
        height: 2.75rem;
        padding: 0 0.72rem;
        align-items: center;
        gap: 0.38rem;
    }

    .controls-toggle-button .visually-hidden {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        clip: auto;
        font-size: 0.68rem;
        font-weight: 760;
        white-space: nowrap;
    }

    .zoom-controls {
        top: 3.65rem;
        right: 0.5rem;
        border-radius: 0.72rem;
    }

    .zoom-controls button {
        width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
    }

    .planetarium-controls {
        right: 0.5rem;
        bottom: max(0.5rem, env(safe-area-inset-bottom));
        left: 0.5rem;
        display: grid;
        padding: 0.5rem;
        gap: 0.45rem;
        border: 1px solid rgba(194, 202, 241, 0.2);
        border-radius: 0.95rem;
        background: rgba(6, 9, 22, 0.9);
        box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(1.1rem);
        pointer-events: auto;
    }

    .view-controls {
        display: grid;
        width: 100%;
        gap: 0.4rem;
    }

    .direction-controls {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.28rem 0.48rem;
        flex: none;
        border-radius: 0.68rem;
    }

    .direction-value {
        width: 2rem;
        height: 2rem;
        font-size: 0.65rem;
    }

    .direction-scrubber {
        width: auto;
        flex: 1 1 auto;
    }

    .direction-scrubber input {
        min-height: 44px;
        height: 44px;
    }

    .direction-cardinals {
        font-size: 0.46rem;
    }

    .layer-controls {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
        border-radius: 0.68rem;
    }

    .constellation-menu {
        display: flex;
        min-width: 0;
    }

    .layer-controls > button,
    .constellation-trigger,
    .time-controls button {
        min-height: 2.75rem;
        padding-inline: 0.64rem;
        font-size: 0.68rem;
    }

    .layer-controls .constellation-trigger {
        width: 100%;
        min-height: 44px;
    }

    .time-controls {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: auto auto minmax(6.5rem, 1fr) auto;
        align-items: stretch;
        border-radius: 0.68rem;
    }

    .time-controls .auto-time-trigger {
        min-width: 3.65rem;
        min-height: 2.75rem;
        padding-inline: 0.52rem;
    }

    .time-controls > button {
        min-width: 2.75rem;
    }

    .time-scrubber {
        min-width: 0;
        min-height: 2.75rem;
        padding-inline: 0.42rem;
    }

    .time-scrubber input[type="range"] {
        min-height: 44px;
        height: 44px;
    }

    .time-scrubber .moment-button {
        min-height: 2.75rem;
    }

    .constellation-panel {
        right: auto;
        bottom: calc(100% + 0.62rem);
        left: 0;
        width: min(22rem, calc(100vw - 2rem));
        max-height: min(56dvh, 30rem);
        padding: 0.5rem;
        border-radius: 0.95rem;
        overscroll-behavior: contain;
    }

    .constellation-panel button,
    .constellation-panel .zodiac-system-options button,
    .constellation-panel .constellation-package-options button {
        min-height: 2.75rem;
    }

    .constellation-panel strong {
        font-size: 0.72rem;
    }

    .constellation-panel small {
        font-size: 0.6rem;
        line-height: 1.35;
    }

    .constellation-package-options,
    .zodiac-system-options {
        grid-template-columns: 1fr 1fr;
    }

    .auto-time-panel {
        bottom: calc(100% + 0.62rem);
        left: 0;
        width: min(20rem, calc(100vw - 2rem));
        max-height: min(62dvh, 30rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .time-controls .auto-time-panel button,
    .time-controls .time-mode-switch button {
        min-height: 2.75rem;
        font-size: 0.68rem;
    }

    .object-inspector {
        bottom: 11.75rem;
    }

    .canvas-frame.is-controls-hidden .zoom-controls {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 280px) {
    .interaction-prompt {
        display: none;
    }

    .controls-toggle-button {
        width: 2.75rem;
        padding: 0;
        justify-content: center;
    }

    .controls-toggle-button .visually-hidden {
        display: none;
    }

    .time-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "auto previous next"
            "slider slider slider";
    }

    .auto-time-menu {
        min-width: 0;
        grid-area: auto;
    }

    .time-controls .auto-time-trigger,
    .time-controls > button {
        width: 100%;
        min-width: 0;
    }

    #previousHourButton {
        grid-area: previous;
    }

    .time-scrubber {
        grid-area: slider;
    }

    #nextHourButton {
        grid-area: next;
    }
}

@media (max-width: 430px) {
    body.is-sky-settings-open {
        overflow: hidden;
    }

    .canvas-frame {
        container-type: normal;
    }

    .moment-fields {
        grid-template-columns: minmax(0, 1fr) 6rem;
        align-items: end;
        gap: 0.45rem;
    }

    .moment-fields .sky-field {
        width: 6rem;
    }

    .layer-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-backdrop {
        position: fixed;
        z-index: 40;
        inset: 0;
        display: block;
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(2, 4, 12, 0.58);
        backdrop-filter: blur(0.16rem);
    }

    .settings-backdrop[hidden] {
        display: none;
    }

    .sky-settings-panel {
        position: fixed;
        z-index: 41;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-height: min(84dvh, 44rem);
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 1.15rem 1.15rem 0 0;
        background: rgba(8, 11, 25, 0.985);
        box-shadow: 0 -1.2rem 3rem rgba(0, 0, 0, 0.5);
    }

    .sky-settings-panel .settings-header {
        min-height: 4rem;
        padding-inline: 0.85rem;
    }

    .settings-section {
        padding: 0.72rem 0.8rem;
    }

    .settings-toggle-grid,
    .settings-layer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sky-settings-panel .settings-toggle-grid > button,
    .sky-settings-panel .mouse-pan-setting,
    .sky-settings-panel #settingsDownloadButton,
    .sky-settings-panel .constellation-package-options button,
    .sky-settings-panel .zodiac-system-options button {
        min-height: 3.25rem;
    }

    .sky-privacy-info {
        justify-content: flex-start;
        padding-inline: 0.15rem;
        text-align: left;
    }

    .sky-privacy-info a {
        min-height: 2.75rem;
    }
}

@media (max-width: 300px) {
    .moment-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .moment-fields .sky-field {
        width: 6.5rem;
    }

    .settings-toggle-grid,
    .settings-layer-grid,
    .constellation-package-options,
    .zodiac-system-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 901px) {
    .sky-essential-date [data-milos-date-year],
    .sky-essential-date [data-milos-date-today],
    .sky-essential-date [data-milos-field-note] {
        display: none;
    }

    .sky-form {
        grid-template-columns: minmax(15rem, 0.92fr) minmax(16rem, 1fr) auto auto;
        align-items: start;
    }

    .moment-fields {
        grid-template-columns: minmax(0, 1fr) 5.6rem;
        align-items: start;
        gap: 0.55rem;
    }

    .sky-essential-date,
    .location-field,
    .moment-fields .sky-field {
        align-self: start;
    }

    .sky-essential-date [data-milos-date-row] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sky-essential-date [data-milos-date-input] {
        grid-column: auto;
    }

    .moment-fields .sky-field {
        width: 5.6rem;
        gap: 0.4rem;
    }

    .moment-fields .sky-field > span:first-child {
        min-height: 0;
        line-height: 1.35;
    }

    #momentTime {
        min-height: 44px;
        height: 44px;
        padding: 0.5rem 0.62rem;
        font-size: 0.78rem;
    }

    .reveal-button,
    .today-button {
        min-height: 44px;
        height: 44px;
        margin-top: 1.35rem;
        align-self: start;
    }

    .location-field [data-milos-place-locate] {
        justify-self: start;
        padding-inline: 0.65rem;
    }
}

/* 2026-08: compact moment form, progressive sky settings and mobile-first canvas controls. */
.sky-form {
    grid-template-columns: minmax(20rem, 0.92fr) minmax(24rem, 1.08fr);
    align-items: start;
    gap: 0.75rem 0.9rem;
}

.moment-fields {
    grid-column: 1;
    grid-row: 1;
}

.location-field {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.4rem 0.5rem;
}

.location-field [data-milos-field-label],
.location-field [data-milos-place-results],
.location-field [data-milos-place-status] {
    grid-column: 1 / -1;
}

.location-field [data-milos-place-row] {
    grid-column: 1;
}

.location-field [data-milos-place-locate] {
    grid-column: 2;
    min-height: 44px;
    height: 44px;
    padding-inline: 0.78rem;
    align-self: end;
    border-radius: 0.72rem;
    white-space: nowrap;
}

.location-field [data-milos-place-results] {
    z-index: 24;
    top: calc(100% + 0.4rem);
    max-height: min(19rem, 48dvh);
    padding: 0.3rem;
    border-color: rgba(188, 176, 255, 0.32);
    background: rgba(14, 18, 39, 0.99);
}

.location-field [data-milos-place-option] {
    min-height: 44px;
    padding: 0.62rem 0.72rem;
    border-radius: 0.58rem;
}

.sky-form-footer {
    display: flex;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem 1rem;
}

.sky-form-support {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.7rem;
}

.sky-form-footer .form-hint {
    min-width: 0;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
}

.sky-form-footer .today-button,
.sky-form-footer .reveal-button {
    width: auto;
    min-height: 44px;
    height: 44px;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
}

.sky-form-footer .today-button {
    padding-inline: 0.78rem;
    border-radius: 0.72rem;
    font-size: 0.74rem;
}

.sky-form-footer .reveal-button {
    min-width: 9.6rem;
    padding-inline: 1rem;
    gap: 0.75rem;
}

.form-status {
    grid-column: 1 / -1;
    grid-row: 3;
}

.fullscreen-label {
    display: none;
}

.sky-tools {
    position: absolute;
    z-index: 4;
    top: 3.2rem;
    right: 0.65rem;
    display: grid;
    justify-items: end;
    gap: 0.35rem;
}

.tools-toggle-button {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(194, 202, 241, 0.19);
    border-radius: 0.6rem;
    color: rgba(241, 242, 255, 0.9);
    background: rgba(7, 10, 24, 0.68);
    backdrop-filter: blur(0.9rem);
    cursor: pointer;
}

.tools-toggle-button:hover,
.tools-toggle-button[aria-expanded="true"] {
    border-color: rgba(205, 211, 246, 0.34);
    background: rgba(71, 61, 132, 0.86);
}

.tools-toggle-button svg {
    width: 1rem;
    fill: rgba(7, 10, 24, 0.9);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
}

.sky-tools .zoom-controls {
    position: static;
    display: grid;
    border: 1px solid rgba(194, 202, 241, 0.16);
    background: rgba(6, 9, 22, 0.78);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(0.9rem);
}

.sky-tools .zoom-controls[hidden] {
    display: none;
}

.canvas-frame.is-controls-hidden .sky-tools {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.settings-backdrop {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: rgba(1, 3, 10, 0.46);
    backdrop-filter: blur(0.08rem);
}

.settings-backdrop[hidden] {
    display: none;
}

.sky-settings-panel {
    position: absolute;
    z-index: 7;
    top: 0.7rem;
    right: 0.7rem;
    bottom: auto;
    left: auto;
    display: grid;
    width: min(23.5rem, calc(100% - 1.4rem));
    max-height: calc(100% - 1.4rem);
    padding: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(197, 202, 234, 0.24);
    border-radius: 1rem;
    background: rgba(9, 12, 27, 0.985);
    box-shadow: 0 1.3rem 3.4rem rgba(0, 0, 0, 0.52);
}

.sky-settings-panel .settings-header {
    position: static;
    display: grid;
    min-height: 4rem;
    padding: 0.65rem 0.7rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
}

.sky-settings-panel .settings-header > span {
    min-width: 0;
}

.sky-settings-panel .settings-header > span strong,
.sky-settings-panel .settings-header > span small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sky-settings-panel .settings-back,
.sky-settings-panel .settings-close {
    align-content: center;
    justify-content: center;
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(197, 202, 234, 0.16);
    border-radius: 0.66rem;
}

.sky-settings-panel .settings-back[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
}

.sky-settings-panel .settings-back svg,
.sky-settings-panel .settings-close svg,
.sky-settings-panel .settings-chevron {
    width: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.settings-pages {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(174, 159, 250, 0.45) transparent;
    scrollbar-width: thin;
}

.settings-page[hidden] {
    display: none;
}

.settings-root,
.settings-page {
    padding: 0.65rem;
}

.settings-quick-action {
    margin-bottom: 0.5rem;
}

.sky-settings-panel .settings-quick-action > button,
.sky-settings-panel .settings-navigation > button {
    display: flex;
    width: 100%;
    min-height: 3.65rem;
    padding: 0.62rem 0.7rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border: 1px solid rgba(197, 202, 234, 0.11);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.025);
}

.sky-settings-panel .settings-quick-action > button {
    border-color: rgba(176, 160, 251, 0.24);
    background: rgba(111, 94, 188, 0.1);
}

.settings-navigation {
    display: grid;
    gap: 0.34rem;
}

.sky-settings-panel .settings-navigation > button:hover {
    border-color: rgba(176, 160, 251, 0.3);
    background: rgba(111, 94, 188, 0.12);
}

.sky-settings-panel .settings-navigation > button > span,
.sky-settings-panel .settings-quick-action > button > span {
    display: grid;
    min-width: 0;
    gap: 0.11rem;
}

.sky-settings-panel .settings-navigation strong,
.sky-settings-panel .settings-quick-action strong {
    font-size: 0.72rem;
}

.sky-settings-panel .settings-navigation small,
.sky-settings-panel .settings-quick-action small {
    font-size: 0.58rem;
    line-height: 1.35;
}

.sky-settings-panel .settings-section {
    padding: 0;
    border: 0;
}

.sky-settings-panel .settings-page .settings-section + .settings-section {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(197, 202, 234, 0.11);
}

.sky-settings-panel .settings-toggle-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
}

.sky-settings-panel .settings-toggle-grid > button,
.sky-settings-panel .mouse-pan-setting,
.sky-settings-panel #settingsDownloadButton {
    min-height: 3.65rem;
    padding: 0.62rem 0.7rem;
    border-radius: 0.72rem;
}

.sky-settings-panel .constellation-package-settings {
    margin: 0;
}

.sky-settings-panel .constellation-package-options,
.sky-settings-panel .zodiac-system-options {
    gap: 0.4rem;
}

@media (max-width: 900px) {
    .sky-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .moment-fields,
    .location-field,
    .sky-form-footer,
    .form-status {
        grid-column: 1;
    }

    .moment-fields {
        grid-row: 1;
    }

    .location-field {
        grid-row: 2;
    }

    .sky-form-footer {
        grid-row: 3;
    }

    .form-status {
        grid-row: 4;
    }
}

@media (max-width: 680px) {
    .sky-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .sky-form-support {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
    }

    .sky-form-footer .form-hint {
        order: 1;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow-wrap: anywhere;
    }

    .sky-form-footer .form-hint > * {
        min-width: 0;
    }

    .sky-form-footer .reveal-button {
        width: 100%;
    }

    .location-field {
        grid-template-columns: minmax(0, 1fr);
    }

    .location-field [data-milos-place-row],
    .location-field [data-milos-place-locate] {
        grid-column: 1;
    }

    .location-field [data-milos-place-locate] {
        width: fit-content;
        justify-self: start;
    }
}

@media (max-width: 430px) {
    .fullscreen-button {
        right: 3.55rem;
        display: inline-flex;
        width: auto;
        min-width: 6.4rem;
        height: 2.75rem;
        padding-inline: 0.72rem;
        align-items: center;
        justify-content: center;
        gap: 0.42rem;
        border-color: rgba(184, 170, 255, 0.52);
        color: #17142b;
        background: linear-gradient(135deg, #c8bfff, #a99ae9);
        font-size: 0.68rem;
        font-weight: 820;
    }

    .fullscreen-label {
        display: inline;
    }

    .controls-toggle-button {
        right: 0.5rem;
        width: 2.75rem;
        padding: 0;
        justify-content: center;
    }

    .controls-toggle-button .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sky-tools {
        top: 3.65rem;
        right: 0.5rem;
    }

    .tools-toggle-button,
    .sky-tools .zoom-controls button {
        width: 2.75rem;
        min-height: 2.75rem;
        height: 2.75rem;
    }

    .sky-settings-panel {
        position: fixed;
        z-index: 41;
        top: auto;
        right: 0.65rem;
        bottom: max(0.65rem, env(safe-area-inset-bottom));
        left: 0.65rem;
        width: auto;
        max-height: min(76dvh, 39rem);
        border: 1px solid rgba(197, 202, 234, 0.24);
        border-radius: 1rem;
    }

    .settings-backdrop {
        position: fixed;
        z-index: 40;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    .sky-settings-panel .settings-header {
        min-height: 3.85rem;
        padding-inline: 0.62rem;
    }

    .settings-root,
    .settings-page {
        padding: 0.58rem;
    }

    .sky-settings-panel .settings-navigation > button,
    .sky-settings-panel .settings-quick-action > button,
    .sky-settings-panel .settings-toggle-grid > button,
    .sky-settings-panel .mouse-pan-setting,
    .sky-settings-panel #settingsDownloadButton {
        min-height: 44px;
    }

    .sky-settings-panel .constellation-package-options,
    .sky-settings-panel .zodiac-system-options {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Compact, progressive planetarium controls. */
.view-direction[hidden],
.auto-time-menu[hidden] {
    display: none !important;
}

.layer-controls .constellation-trigger {
    border-radius: 0.62rem 0 0 0.62rem !important;
}

.layer-controls > #labelsButton {
    min-width: 0;
    border-left: 0;
    border-radius: 0 0.62rem 0.62rem 0;
}

.layer-controls > #labelsButton[aria-pressed="mixed"],
.layer-controls > #labelsButton[aria-pressed="true"] {
    color: #ded8ff;
    background: rgba(96, 82, 166, 0.64);
}

.settings-direct-actions {
    margin-top: 0.5rem;
}

.sky-settings-panel .settings-direct-actions > button,
.sky-settings-panel .settings-toggle-row {
    display: flex;
    width: 100%;
    min-height: 3.65rem;
    padding: 0.62rem 0.7rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border: 1px solid rgba(197, 202, 234, 0.11);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.025);
}

.sky-settings-panel .settings-direct-actions > button {
    border-color: rgba(176, 160, 251, 0.24);
    background: rgba(111, 94, 188, 0.1);
}

.sky-settings-panel .settings-toggle-row[aria-pressed="true"] {
    border-color: rgba(176, 160, 251, 0.3);
    background: rgba(111, 94, 188, 0.12);
}

.sky-settings-panel .settings-direct-actions > button > span,
.sky-settings-panel .settings-toggle-row > span:first-child {
    display: grid;
    min-width: 0;
    gap: 0.11rem;
}

.sky-settings-panel .settings-direct-actions strong,
.sky-settings-panel .settings-toggle-row strong {
    font-size: 0.72rem;
}

.sky-settings-panel .settings-direct-actions small,
.sky-settings-panel .settings-toggle-row small {
    font-size: 0.58rem;
    line-height: 1.35;
}

.settings-shortcuts {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .settings-shortcuts {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        min-height: 3rem;
        padding: 0.58rem 0.7rem;
        align-items: center;
        gap: 0.7rem;
        border: 1px solid rgba(197, 202, 234, 0.1);
        border-radius: 0.72rem;
        color: rgba(205, 209, 237, 0.78);
        background: rgba(255, 255, 255, 0.02);
        font-size: 0.58rem;
    }

    .settings-shortcuts > span {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .settings-shortcuts kbd {
        display: grid;
        width: 1.65rem;
        height: 1.65rem;
        place-items: center;
        border: 1px solid rgba(197, 204, 237, 0.24);
        border-radius: 0.4rem;
        color: #eceeff;
        background: rgba(7, 10, 24, 0.72);
        font: inherit;
        font-weight: 820;
    }
}

.sky-settings-panel .settings-header > span {
    justify-self: stretch;
    text-align: left;
}

.sky-settings-panel .settings-back {
    justify-self: start;
}

.sky-settings-panel .settings-close {
    justify-self: end;
}

.sky-settings-panel .settings-back[hidden] {
    display: grid;
}

.sky-settings-panel .settings-back svg,
.sky-settings-panel .settings-close svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.auto-time-menu[hidden] + #previousHourButton {
    border-left: 1px solid rgba(194, 202, 241, 0.19);
    border-radius: 0.62rem 0 0 0.62rem;
}

.canvas-frame:fullscreen .fullscreen-button,
.canvas-frame:fullscreen .controls-toggle-button,
.canvas-frame:fullscreen .tools-toggle-button,
.canvas-frame:fullscreen .sky-tools .zoom-controls button {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    place-items: center;
    justify-content: center;
    border-radius: 0.72rem;
}

.canvas-frame:fullscreen .fullscreen-button {
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    display: grid;
    color: rgba(241, 242, 255, 0.9);
    background: rgba(7, 10, 24, 0.78);
}

.canvas-frame:fullscreen .controls-toggle-button {
    top: max(0.75rem, env(safe-area-inset-top));
    right: calc(max(0.75rem, env(safe-area-inset-right)) + 3.15rem);
    display: grid;
}

.canvas-frame:fullscreen .fullscreen-label,
.canvas-frame:fullscreen .controls-toggle-button .visually-hidden {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.canvas-frame:fullscreen .sky-tools {
    top: calc(max(0.75rem, env(safe-area-inset-top)) + 3.15rem);
    right: max(0.75rem, env(safe-area-inset-right));
}

@media (max-width: 430px) {
    .sky-settings-panel .settings-direct-actions > button,
    .sky-settings-panel .settings-toggle-row {
        min-height: 44px;
    }

    .time-controls.is-time-lapse-hidden {
        grid-template-columns: auto minmax(6.5rem, 1fr) auto;
    }
}

@media (max-width: 280px) {
    .time-controls.is-time-lapse-hidden {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "previous slider next";
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Named-object quick information */
.object-inspector {
    z-index: 5;
    width: min(22rem, calc(100% - 1.5rem));
    max-width: min(22rem, calc(100% - 1.5rem));
    min-width: 0;
    padding: 0.78rem 3.55rem 0.78rem 0.86rem;
    gap: 0.2rem;
    border-color: rgba(189, 178, 255, 0.34);
    border-radius: 0.9rem;
    background: rgba(9, 12, 27, 0.94);
}

.object-inspector[data-anchor="top-left"] {
    top: 0.72rem;
    right: auto;
    bottom: auto;
    left: 0.72rem;
}

.object-inspector[data-anchor="top-right"] {
    top: 0.72rem;
    right: 0.72rem;
    bottom: auto;
    left: auto;
}

.object-inspector[data-anchor="bottom-left"] {
    top: auto;
    right: auto;
    bottom: 4.35rem;
    left: 0.72rem;
}

.object-inspector[data-anchor="bottom-right"] {
    top: auto;
    right: 0.72rem;
    bottom: 4.35rem;
    left: auto;
}

.object-inspector > strong {
    padding-right: 0.25rem;
    font-size: 0.92rem;
    line-height: 1.25;
}

.object-inspector > p {
    margin: 0.18rem 0 0;
    color: rgba(239, 240, 255, 0.91);
    font-size: 0.7rem;
    line-height: 1.48;
}

.object-inspector > small {
    margin-top: 0.04rem;
    font-size: 0.58rem;
}

.object-inspector-actions {
    display: flex;
    margin-top: 0.35rem;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.object-inspector .object-more {
    display: inline-flex;
    min-height: 2.75rem;
    padding: 0.38rem 0.58rem;
    align-items: center;
    border: 1px solid rgba(195, 184, 255, 0.28);
    border-radius: 0.55rem;
    color: #ddd5ff;
    background: rgba(111, 94, 188, 0.14);
    font-size: 0.62rem;
    font-weight: 760;
    text-decoration: none;
}

.object-inspector .object-more:hover {
    border-color: rgba(209, 201, 255, 0.46);
    background: rgba(111, 94, 188, 0.24);
}

.object-inspector #closeObjectButton {
    top: 0.45rem;
    right: 0.45rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.62rem;
}

.object-inspector .object-focus {
    min-height: 2.75rem;
    margin-top: 0;
}

.canvas-frame.is-controls-hidden .object-inspector:not([hidden]) {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 430px) {
    .object-inspector,
    .object-inspector[data-anchor] {
        position: fixed;
        z-index: 8;
        top: auto;
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(0.65rem, env(safe-area-inset-bottom));
        left: max(1rem, env(safe-area-inset-left));
        width: auto;
        max-width: none;
        padding: 0.78rem 3.55rem 0.78rem 0.86rem;
        border-radius: 0.95rem;
        box-shadow: 0 1.1rem 2.7rem rgba(0, 0, 0, 0.42);
    }

    .object-inspector > p {
        font-size: 0.72rem;
    }

    .object-inspector .object-more,
    .object-inspector .object-focus {
        min-height: 44px;
        padding-inline: 0.7rem;
    }

    .object-inspector #closeObjectButton {
        width: 44px;
        height: 44px;
    }
}

/* Ground-observer choice beside the primary sky action. */
.sky-form-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.visible-sky-choice {
    position: relative;
    display: grid;
    min-height: 44px;
    padding: 0.42rem 0.58rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    border: 1px solid rgba(142, 167, 151, 0.27);
    border-radius: 0.72rem;
    color: rgba(238, 242, 239, 0.9);
    background: rgba(13, 25, 25, 0.58);
    cursor: pointer;
}

.visible-sky-choice:hover,
.visible-sky-choice:focus-within {
    border-color: rgba(162, 191, 170, 0.52);
    background: rgba(18, 34, 32, 0.78);
}

.visible-sky-choice:has(input:checked) {
    border-color: rgba(154, 192, 164, 0.58);
    background: rgba(39, 66, 55, 0.64);
    box-shadow: inset 0 1px rgba(234, 247, 238, 0.06);
}

.visible-sky-choice input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: #83b392;
    cursor: pointer;
}

.visible-sky-choice-copy {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
    line-height: 1.2;
}

.visible-sky-choice-copy strong {
    font-size: 0.67rem;
    font-weight: 780;
    white-space: nowrap;
}

.visible-sky-choice-copy small {
    color: rgba(192, 207, 198, 0.66);
    font-size: 0.52rem;
    font-weight: 650;
}

.visible-sky-help {
    display: grid;
    width: 1.1rem;
    height: 1.1rem;
    place-items: center;
    border: 1px solid rgba(194, 211, 201, 0.28);
    border-radius: 50%;
    color: rgba(223, 232, 226, 0.82);
    font-size: 0.58rem;
    font-weight: 800;
}

.visible-sky-tooltip {
    position: absolute;
    z-index: 30;
    right: 0;
    bottom: calc(100% + 0.5rem);
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.65rem 0.72rem;
    border: 1px solid rgba(184, 202, 191, 0.26);
    border-radius: 0.72rem;
    color: rgba(242, 245, 243, 0.94);
    background: rgba(8, 17, 18, 0.98);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 0, 0, 0.38);
    font-size: 0.67rem;
    font-weight: 620;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.3rem);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    pointer-events: none;
}

.visible-sky-choice:hover .visible-sky-tooltip,
.visible-sky-choice:focus-within .visible-sky-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.canvas-frame.is-ground-observer {
    border-color: rgba(126, 153, 136, 0.34);
    box-shadow:
        inset 0 -1px rgba(139, 164, 145, 0.12),
        0 1rem 3rem rgba(0, 0, 0, 0.2);
}

@media (max-width: 680px) {
    .sky-form-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sky-form-footer .sky-form-actions .reveal-button {
        width: auto;
        min-width: 8.55rem;
        height: auto;
        padding-inline: 0.75rem;
    }

    .visible-sky-choice-copy strong {
        white-space: nowrap;
    }

    .visible-sky-choice-copy small,
    .visible-sky-help {
        display: none;
    }

    .visible-sky-tooltip {
        right: auto;
        left: 0;
        width: calc(200% + 0.55rem);
    }
}

@media (max-width: 320px) {
    .sky-form-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .sky-form-footer .sky-form-actions .reveal-button {
        width: 100%;
    }

    .visible-sky-tooltip {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .visible-sky-tooltip {
        transition: none;
    }
}