.solar-page {
    overflow: hidden;
    min-height: 100svh;
    background: #05070b;
}
.solar-page .site-header { position: absolute; inset: 0 0 auto; }
.solar-page .page { width: 100%; padding: 0; }
.solar-page .site-footer { display: none; }
.solar-page .observatory {
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at 55% 56%, #0c111b, #05070b 76%);
}
.solar-page .observatory__scene { height: 100%; }
.solar-page .observatory__scene[data-dragging] { cursor: grabbing; }
.solar-page .observatory__scene[data-dragging="pan"] { cursor: move; }
.solar-heading {
    position: absolute;
    top: clamp(106px, 16vh, 158px);
    left: var(--gutter);
    pointer-events: none;
}
.solar-heading h1 { font-size: clamp(2.4rem, 4.5vw, 4.6rem); letter-spacing: -.055em; }
.solar-heading p { margin-top: 10px; color: #b8c9df; font-size: .88rem; }
.object-dock {
    position: absolute;
    right: var(--gutter);
    top: clamp(106px, 16vh, 158px);
    display: grid;
    grid-template-columns: minmax(0, 244px) minmax(94px, 134px);
    gap: 8px;
    width: min(386px, calc(100% - 2 * var(--gutter)));
    pointer-events: none;
}
.object-dock > * { pointer-events: auto; }
.object-panel {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 9px;
    max-height: max(88px, calc(100dvh - 255px));
    overflow: auto;
    scrollbar-width: none;
}
.object-panel::-webkit-scrollbar { display: none; }
.object-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 7px;
    border-radius: 8px;
    color: #eef4ff;
    font-size: .84rem;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}
.object-panel summary::-webkit-details-marker, .solar-date summary::-webkit-details-marker { display: none; }
.object-panel summary::after {
    width: 7px;
    height: 7px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    transform: rotate(45deg);
    content: "";
}
.object-panel[open] summary::after { transform: translateY(3px) rotate(225deg); }
.object-panel[open] .object-list { margin-top: 7px; }
.object-detail {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    align-content: space-between;
    gap: 7px;
    contain: size;
    overflow: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #6d7d9659 transparent;
}
.object-panel:not([open]) + .object-detail { display: none; }
.object-close {
    position: absolute;
    inset: 7px 7px auto auto;
    width: 29px;
    min-height: 29px;
}
.object-detail > div { padding-right: 28px; }
.object-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 7px; }
.object-facts div:last-child { grid-column: 1 / -1; }
.object-facts dt, .object-facts dd { line-height: 1.25; }
.object-detail__note { color: #bec9d9; font-size: .75rem; line-height: 1.5; }
.object-detail__source { justify-self: start; font-size: .7rem; }
.solar-page .scene-caption {
    position: absolute;
    left: var(--gutter);
    bottom: 25px;
    max-width: 23ch;
    pointer-events: auto;
}
.scene-caption .quiet-link { display: inline-block; margin-top: 5px; }
.scene-caption__mouse { margin-top: 4px; }
@media (pointer: coarse) {
    .scene-caption__mouse { display: none; }
}
.solar-page .camera-controls { position: absolute; inset: auto var(--gutter) 23px auto; }
.solar-events {
    position: absolute;
    z-index: 2;
    right: var(--gutter);
    bottom: 84px;
}
.solar-events > summary { list-style: none; }
.solar-events > summary::-webkit-details-marker { display: none; }
.solar-events > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    margin: 2px 0 0 2px;
    border: solid currentColor;
    border-width: 1px 0 0 1px;
    transform: translateY(1px) rotate(45deg);
}
.solar-events[open] > summary::after { transform: translateY(-2px) rotate(225deg); }
.solar-events__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    width: min(340px, calc(100vw - 2 * var(--gutter)));
    max-height: min(490px, calc(100dvh - 241px));
    overflow: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: 11px;
    padding: 12px;
    border-radius: 10px;
    color: #c7d5ea;
    font-size: .75rem;
    line-height: 1.45;
}
.solar-events__list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.solar-event {
    width: 100%;
    min-height: 34px;
    justify-content: flex-start;
    padding: 6px 10px;
    border-radius: 8px;
    text-align: left;
    font-size: inherit;
}
.solar-event[aria-pressed="true"] {
    border-color: #a3e6f959;
    color: #e6f9ff;
    background: #4485a74c;
}
.solar-events__selection {
    display: grid;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}
.solar-events__selection time { color: #e9f1ff; }
.solar-events__selection a, #solar-view-event { justify-self: start; }
#solar-view-event { min-height: 34px; }
.scene-event-active {
    position: absolute;
    left: 50%;
    bottom: 79px;
    transform: translateX(-50%);
    max-width: min(410px, calc(100% - 32px));
    padding: 6px 12px;
    border-radius: 7px;
    color: #d2e6fa;
    text-align: center;
    font-size: .72rem;
    pointer-events: none;
}
.solar-page .time-controls {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 23px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 20px);
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
}
.time-transport { display: flex; gap: 3px; }
.time-transport svg, .solar-date summary svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.time-transport [data-play] { fill: currentColor; }
.time-direction svg { fill: currentColor; stroke: none; }
.time-direction[aria-pressed="true"] {
    border-color: #a3e6f959;
    color: #c6f6ff;
    background: #4485a74c;
}
.solar-date { position: relative; }
.solar-date summary { list-style: none; }
.solar-date form {
    position: absolute;
    right: 0;
    bottom: calc(100% + 13px);
    display: grid;
    gap: 9px;
    min-width: 241px;
    padding: 13px;
    border-radius: 10px;
    font-size: .8rem;
}
.solar-date input {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--glass-edge);
    border-radius: 8px;
    background: #0d1929;
}
.solar-page .scene-time { min-width: 147px; padding-inline: 5px; }
@media (max-width: 900px) {
    .solar-heading__break { display: none; }
    .object-dock { top: clamp(167px, 25vh, 211px); }
    .solar-page .scene-caption { bottom: 81px; }
    .solar-page .camera-controls { bottom: 78px; }
    .solar-events { bottom: 133px; }
    .solar-events__panel { max-height: min(490px, calc(100dvh - 263px)); }
    .scene-event-active { bottom: 133px; }
}
@media (max-width: 720px) {
    .solar-heading { top: 91px; right: var(--gutter); }
    .solar-heading h1 { font-size: clamp(1.6rem, 6.9vw, 3rem); }
    .solar-heading p { margin-top: 4px; font-size: .73rem; }
    .object-dock { top: 151px; grid-template-columns: minmax(0, 244px) minmax(94px, 112px); }
    .object-panel { padding: 6px; max-height: max(88px, min(310px, 41dvh, calc(100dvh - 274px))); }
    .object-button { min-height: 28px; padding-inline: 5px; gap: 5px; }
    .object-detail h2 { font-size: 1.26rem; }
    .object-facts dt { font-size: .66rem; }
    .object-facts dd { font-size: .76rem; }
    .solar-page .scene-caption { bottom: 77px; max-width: 19ch; }
    .solar-page .camera-controls { bottom: 74px; }
    .solar-events { bottom: 127px; }
    .solar-events__panel { max-height: min(490px, calc(100dvh - 257px)); }
    .scene-event-active { bottom: 184px; width: max-content; }
    .solar-page .time-controls { bottom: 14px; gap: 3px; }
    .solar-page .scene-time { min-width: 0; padding-inline: 4px; }
    .solar-page .scene-time time { font-size: .68rem; }
    .solar-page .scene-time__status { font-size: .59rem; }
    .solar-date form { right: -55px; bottom: calc(100% + 23px); }
}
@media (max-height: 520px) and (orientation: landscape) {
    .object-dock { top: 76px; }
    .object-panel { max-height: max(70px, calc(100dvh - 265px)); }
}
@media (max-width: 390px) {
    .solar-page .time-controls .icon-button { width: 29px; }
    .solar-page #solar-now { padding-inline: 7px; font-size: .67rem; }
    .solar-page .speed-select { max-width: 67px; }
}
@media (max-width: 430px) {
    .solar-page .time-controls { display: grid; grid-template-columns: repeat(4, auto); }
    .solar-page .scene-time { grid-column: 1 / -1; grid-row: 1; justify-items: center; }
    .solar-page .camera-controls, .solar-page .scene-caption { bottom: 88px; }
    .solar-events { bottom: 141px; }
    .solar-events__panel { max-height: min(490px, calc(100dvh - 271px)); }
    .scene-event-active { bottom: 198px; }
}