:root {
    color-scheme: dark;
    --bg: #050b15;
    --bg-raised: #081322;
    --panel: #0a1628;
    --panel-strong: #0d1b30;
    --line: #1d3f60;
    --line-soft: #152b44;
    --text: #eef6ff;
    --muted: #9fb0c7;
    --cyan: #4cc9ff;
    --blue: #6d8cff;
    --gold: #f6c344;
    --orange: #fb923c;
    --green: #7dd56f;
    --moon: #dce9ff;
    --danger: #fda4af;
    --radius: 8px;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

* { box-sizing: border-box; }

html {
    background: var(--bg);
    scroll-behavior: smooth;
}

body {
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

button,
input { font: inherit; }

a { color: inherit; }

svg { display: block; }

.astro-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.65rem 0.9rem;
    border-radius: 6px;
    background: #fff;
    color: #07111f;
    transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.astro-shell {
    width: min(1500px, calc(100% - 2rem));
    margin-inline: auto;
}

.astro-site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(5, 11, 21, 0.96);
    backdrop-filter: blur(14px);
}

.astro-header-inner {
    min-height: 86px;
    display: grid;
    grid-template-columns: minmax(9rem, 0.7fr) minmax(18rem, 1.6fr) minmax(12rem, 0.8fr);
    align-items: center;
    gap: 1rem;
}

.back-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: #c7d9ed;
    text-decoration: none;
    font-weight: 700;
}

.back-link svg,
.location-chip svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.back-link:hover,
.back-link:focus-visible {
    border-color: var(--cyan);
    color: #fff;
    outline: 3px solid rgba(76, 201, 255, 0.14);
}

.astro-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    text-align: left;
}

.astro-brand-mark {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    display: grid;
    place-items: center;
    color: var(--cyan);
    border: 1px solid var(--line);
    border-radius: 50%;
}

.astro-brand-mark svg {
    width: 2.25rem;
    height: 2.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.astro-brand p,
.section-heading p,
.eyebrow {
    margin: 0;
    color: var(--cyan);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.astro-brand strong {
    display: block;
    margin-top: 0.08rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.18rem;
    letter-spacing: 0;
}

.location-chip {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.location-chip svg { color: var(--cyan); }

.page-intro {
    padding: clamp(2rem, 5vw, 4.5rem) 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
}

.page-intro h1 {
    max-width: 19ch;
    margin: 0.25rem 0 0.55rem;
    color: #ffe39a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: 0;
}

.intro-copy {
    max-width: 76ch;
    margin: 0;
    color: var(--muted);
}

.date-control {
    min-width: min(100%, 19rem);
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-raised);
}

.date-control label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.date-control > div { display: flex; gap: 0.45rem; }

.date-control input,
.date-control button {
    min-width: 0;
    height: 2.55rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #050e1c;
    color: var(--text);
}

.date-control input { flex: 1 1 auto; padding: 0.35rem 0.55rem; }
.date-control button { flex: 0 0 auto; padding: 0.35rem 0.7rem; cursor: pointer; }

.date-control input:focus-visible,
.date-control button:focus-visible {
    border-color: var(--cyan);
    outline: 3px solid rgba(76, 201, 255, 0.14);
}

.current-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid var(--line);
    background: #07111f;
}

.current-strip > div {
    min-width: 0;
    padding: 1rem 1.15rem;
    border-right: 1px solid var(--line-soft);
}

.current-strip > div:last-child { border-right: 0; }
.current-strip span,
.metric span,
.comparison-grid span,
.edge-event span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.current-strip strong {
    display: block;
    margin-top: 0.18rem;
    font-size: 1.22rem;
}

.current-strip small,
.metric small,
.comparison-grid small {
    display: block;
    color: #7f94ad;
    font-size: 0.75rem;
}

.status-message {
    margin: 1rem 0 0;
    padding: 0.65rem 0.8rem;
    border-left: 3px solid var(--cyan);
    color: var(--muted);
    background: #07111f;
    font-size: 0.85rem;
}

.status-message.ready { border-color: var(--green); color: #b9e9b2; }
.status-message.error { border-color: var(--danger); color: #fecdd3; }

.astro-section {
    margin-top: clamp(2.6rem, 6vw, 5.5rem);
    padding: 0 0 clamp(2.6rem, 5vw, 4.5rem);
    border-bottom: 1px solid var(--line);
}

.sun-section { padding-bottom: 1.25rem; }
.sun-section + .moon-section { margin-top: clamp(1.6rem, 3vw, 2.6rem); }

.section-heading {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.section-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.section-icon svg {
    width: 2.15rem;
    height: 2.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sun-icon { color: var(--gold); }
.moon-icon { color: var(--moon); }

.section-heading h2 {
    margin: 0.08rem 0 0;
    font-size: 1.78rem;
    line-height: 1.2;
}

.section-heading time {
    color: var(--muted);
    font-size: 0.78rem;
}

.metric-grid {
    display: grid;
    gap: 0.65rem;
}

.sun-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 1rem;
}

.metric {
    position: relative;
    min-width: 0;
    min-height: 7.1rem;
    padding: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-top-color: var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.metric::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: currentColor;
    opacity: 0.42;
}

.sun-metric { color: var(--gold); }
.moon-metric { color: #a9cfff; }

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

.metric-heading svg {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.metric-heading span {
    min-width: 0;
    color: currentColor;
    overflow-wrap: anywhere;
}

.metric strong {
    display: block;
    margin: 0.45rem 0 0.22rem;
    color: #fff;
    font-size: 1.55rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.metric small { line-height: 1.4; }

.analysis-band {
    margin-top: 0.8rem;
    padding: clamp(0.9rem, 2vw, 1.25rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(13, 27, 48, 0.98), rgba(6, 17, 31, 0.98));
    box-shadow: var(--shadow);
}

.band-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.band-title span {
    color: #cce5ff;
    font-weight: 850;
    text-transform: uppercase;
}

.band-title strong { color: var(--gold); }

.progress-track {
    position: relative;
    height: 0.9rem;
    overflow: visible;
    border: 1px solid #34506b;
    border-radius: 999px;
    background: #030913;
}

.progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--gold);
    transition: width 500ms ease;
}

.progress-track.green span { background: var(--green); }

.progress-track i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(246, 195, 68, 0.7);
}

.progress-track.green i { background: var(--green); box-shadow: 0 0 10px rgba(125, 213, 111, 0.6); }

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.comparison-grid > div {
    min-width: 0;
    padding: 0.75rem;
    border-left: 2px solid var(--gold);
    background: #07111f;
}

.comparison-grid strong {
    display: block;
    margin: 0.25rem 0;
    font-size: 1rem;
}

.solar-progress-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) 7rem;
    align-items: center;
    gap: 0.8rem;
}

.edge-event:last-child { text-align: right; }
.edge-event strong { display: block; color: #fff; font-size: 1rem; }
.solar-progress-band > p { margin: 0.8rem 0 0; color: var(--muted); }

.annual-chart,
.moon-trajectory {
    width: 100%;
    height: auto;
    overflow: visible;
    border-bottom: 1px solid var(--line-soft);
}

#annual-grid line,
#moon-trajectory-grid line { stroke: #18324e; stroke-width: 1; }
#annual-area { fill: rgba(246, 195, 68, 0.08); }
#annual-line { fill: none; stroke: var(--gold); stroke-width: 4; }
#annual-current-marker line { stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 6 5; }
#annual-current-marker circle { fill: var(--cyan); stroke: #fff; stroke-width: 2; }
#season-markers line { stroke: #66809c; stroke-width: 1; stroke-dasharray: 4 5; }
#season-markers text,
#annual-grid text,
#moon-trajectory-grid text,
#moon-trajectory-markers text { fill: #91a7c0; font-size: 20px; }

.annual-marker-summary,
.day-moment-summary {
    min-width: 0;
    margin-bottom: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(76, 201, 255, 0.45);
    border-left: 3px solid var(--cyan);
    background: #061221;
    box-shadow: inset 0 0 20px rgba(76, 201, 255, 0.04), 0 0 18px rgba(76, 201, 255, 0.08);
}

.annual-marker-summary strong,
.annual-marker-summary span,
.annual-marker-summary small,
.day-moment-summary strong,
.day-moment-summary span { display: block; }
.annual-marker-summary strong,
.day-moment-summary strong { color: #7ddcff; font-size: 1rem; }
.annual-marker-summary span,
.day-moment-summary span { margin-top: 0.15rem; color: #d9ebff; font-size: 0.82rem; }
.annual-marker-summary small { margin-top: 0.18rem; color: var(--muted); font-size: 0.76rem; }

.season-events {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.season-events div {
    min-width: 0;
    padding: 0.65rem;
    border-top: 2px solid var(--cyan);
    background: #07111f;
}

.season-event-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.season-event-heading svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.season-events div[data-season="mar"] { color: var(--green); }
.season-events div[data-season="jun"] { color: var(--gold); }
.season-events div[data-season="sep"] { color: var(--orange); }
.season-events div[data-season="dec"] { color: #9ed9ff; }

.season-events span,
.season-events strong { display: block; }
.season-events span { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
.season-events strong { margin-top: 0.2rem; font-size: 0.9rem; }

.day-axis {
    position: relative;
    min-height: 12.8rem;
    margin-top: 0.3rem;
    border-block: 1px solid var(--line-soft);
    background: #050d19;
}

.day-phase-bands {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.day-phase-band {
    position: absolute;
    inset-block: 0;
    left: var(--phase-start);
    width: var(--phase-width);
    border-inline: 1px solid rgba(255, 255, 255, 0.025);
    background: var(--phase-color, rgba(76, 201, 255, 0.04));
}

.day-phase-band[data-phase="day"] { --phase-color: rgba(246, 195, 68, 0.1); }
.day-phase-band[data-phase="civil"] { --phase-color: rgba(251, 146, 60, 0.07); }
.day-phase-band[data-phase="nautical"] { --phase-color: rgba(76, 201, 255, 0.055); }
.day-phase-band[data-phase="astronomical"] { --phase-color: rgba(109, 140, 255, 0.04); }
.day-phase-band[data-phase="night"] { --phase-color: rgba(4, 8, 18, 0.52); }

.day-axis::before {
    content: "";
    position: absolute;
    bottom: 0.9rem;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: #3b536e;
}

.axis-event {
    position: absolute;
    z-index: 2;
    top: var(--event-top, 0.55rem);
    left: var(--event-x);
    width: min(7.2rem, 14vw);
    min-width: 4.5rem;
    text-align: center;
    transform: translateX(-50%);
}

.axis-event::after {
    content: "";
    position: absolute;
    left: 50%;
    top: var(--event-dot-top, 9.65rem);
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
}
.axis-event span,
.axis-event strong { display: block; }
.axis-event span { color: var(--muted); font-size: 0.65rem; }
.axis-event strong { font-size: 0.82rem; }
.axis-now-marker {
    position: absolute;
    z-index: 1;
    top: 0.35rem;
    bottom: 0.55rem;
    width: 2px;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(76, 201, 255, 0.8);
    transform: translateX(-50%);
    pointer-events: none;
}
.axis-now-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--cyan);
    transform: translateX(-50%);
}
.axis-note { margin: 0.65rem 0 0; color: #7f94ad; font-size: 0.75rem; }

.day-events-table {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.day-events-table div {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.5rem 0.65rem;
    border-left: 2px solid #476b8d;
    background: #050d19;
}
.day-events-table span { color: var(--muted); font-size: 0.72rem; }
.day-events-table strong { color: #fff; font-size: 0.78rem; white-space: nowrap; }

.explanation-panel {
    margin-top: 0.8rem;
    border-block: 1px solid var(--line);
    background: #07111f;
}

.explanation-panel summary {
    padding: 0.9rem 0.25rem;
    color: #d8eaff;
    font-weight: 850;
    cursor: pointer;
}

.explanation-panel summary:focus-visible { outline: 3px solid rgba(76, 201, 255, 0.14); }
.explanation-panel:not([open]) { padding: 0; }
.explanation-panel:not([open]) .explanation-grid { display: none; }
.explanation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 0.25rem 1rem;
}
.explanation-grid article { padding-left: 0.8rem; border-left: 2px solid var(--cyan); }
.explanation-grid .dynamic-explanation { grid-column: 1 / -1; border-left-color: var(--gold); background: rgba(246, 195, 68, 0.035); padding-block: 0.65rem; padding-right: 0.65rem; }
.explanation-grid h3 { margin: 0; font-size: 0.92rem; }
.explanation-grid p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.85rem; }

.moon-overview {
    display: grid;
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 2.28fr);
    gap: 0.8rem;
    margin-top: 1rem;
}

.moon-visual-card {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-strong);
}

#moon-phase-svg { width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(160, 198, 240, 0.2)); }
.moon-disc-shadow { fill: url(#moon-shadow-gradient); }
.moon-disc-light { fill: url(#moon-light-gradient); }
.moon-disc-outline { fill: none; stroke: #8eb7e5; stroke-width: 2; }
.moon-craters { fill: rgba(68, 88, 112, 0.24); mix-blend-mode: multiply; pointer-events: none; }
.moon-visual-card figcaption strong,
.moon-visual-card figcaption span,
.moon-visual-card figcaption small { display: block; }
.moon-visual-card figcaption strong { font-size: 1.2rem; }
.moon-visual-card figcaption span { margin-top: 0.2rem; color: #bdd7f4; }
.moon-visual-card figcaption small { margin-top: 0.55rem; color: #7f94ad; font-size: 0.7rem; }

.moon-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.moon-distance-metric { min-height: 9.2rem; }
.metric strong.metric-secondary { margin-top: 0.5rem; font-size: 1rem; color: #bcd6f3; }

.moon-trajectory-frame {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1000 / 300;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: #050d19;
}

.moon-trajectory {
    position: relative;
    z-index: 1;
    height: 100%;
    background: transparent;
}

.trajectory-status {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1rem;
    color: #bcd6f3;
    background: rgba(5, 13, 25, 0.94);
    text-align: center;
}

.trajectory-status[data-state="ready"] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.trajectory-status[data-state="error"] {
    flex-direction: column;
    color: #ffd3da;
}

.trajectory-status button {
    min-height: 2.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--cyan);
    border-radius: 6px;
    background: #071729;
    color: #eaf7ff;
    cursor: pointer;
}

.trajectory-status button:focus-visible {
    outline: 3px solid rgba(76, 201, 255, 0.22);
    outline-offset: 2px;
}

#moon-trajectory-area { fill: rgba(76, 201, 255, 0.08); }
#moon-trajectory-grid .horizon-line { stroke: #78cfff; stroke-width: 2; opacity: 0.78; }
#moon-trajectory-line-above { fill: none; stroke: #8fe4ff; stroke-width: 4; }
#moon-trajectory-line-below { fill: none; stroke: #4d6b89; stroke-width: 3; stroke-dasharray: 9 8; opacity: 0.58; }
#moon-trajectory-markers circle { fill: var(--cyan); stroke: #fff; stroke-width: 2; }
#moon-trajectory-directions text { fill: #6f89a5; font-size: 15px; font-weight: 800; }
#moon-current-marker circle { fill: #07111f; stroke: #fff; stroke-width: 3; }
#moon-current-marker .marker-halo { fill: rgba(76, 201, 255, 0.18); stroke: var(--cyan); stroke-width: 2; }
#moon-current-marker .moon-tooltip rect { fill: #061626; stroke: var(--cyan); stroke-width: 1.5; rx: 6; }
#moon-current-marker text { fill: #eaf7ff; font-size: 17px; font-weight: 750; }
#moon-current-marker .marker-title { fill: #74dcff; font-size: 19px; font-weight: 900; }

.moon-marker-summary {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.moon-marker-summary > div,
.moon-cycle-summary article,
.moon-visibility-events article {
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: #07111f;
}

.moon-marker-summary span,
.moon-cycle-summary span,
.moon-visibility-events span {
    display: block;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.moon-marker-summary strong,
.moon-cycle-summary strong,
.moon-visibility-events strong {
    display: block;
    margin-top: 0.15rem;
    color: #fff;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.chart-summary {
    margin: 0.65rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.moon-visibility-track {
    position: relative;
    height: 1.25rem;
    overflow: hidden;
    border: 1px solid #34506b;
    border-radius: 999px;
    background: #030913;
}

.moon-visibility-segments { position: absolute; inset: 0; }
.moon-visibility-segments span {
    position: absolute;
    inset-block: 0;
    left: var(--visibility-start);
    width: var(--visibility-width);
    background: linear-gradient(90deg, rgba(105, 174, 255, 0.55), rgba(220, 233, 255, 0.88), rgba(105, 174, 255, 0.55));
}

#moon-visibility-marker {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--cyan);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(76, 201, 255, 0.72);
}

.moon-visibility-events {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.7rem;
}

.moon-visibility-events span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.moon-visibility-events span svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--cyan);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.moon-cycle-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.6rem 0 0.8rem;
}

.moon-cycle-summary small {
    display: block;
    margin-top: 0.18rem;
    color: #7f94ad;
    font-size: 0.7rem;
}

.subsection-title {
    margin: 1rem 0 0.55rem;
    color: #cce5ff;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.phase-cycle-track {
    position: relative;
    height: 5.8rem;
    margin: 0.5rem 0 0.8rem;
    border-top: 3px solid #324b67;
}

.phase-cycle-track::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 50%;
    height: 3px;
    background: var(--moon);
}

.phase-label {
    position: absolute;
    top: 0.8rem;
    width: 9rem;
    color: var(--muted);
    font-size: 0.72rem;
    text-align: center;
    transform: translateX(-50%);
}
.phase-label::before {
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto 0.3rem;
    border: 1px solid #9bbce0;
    border-radius: 50%;
    background: #dce9ff;
}
.phase-label.p0 { left: 0; transform: none; text-align: left; }
.phase-label.p0::before { margin-left: 0; background: #101722; }
.phase-label.p25 { left: 25%; }
.phase-label.p25::before { background: #101722; box-shadow: inset -0.56rem 0 #dce9ff; }
.phase-label.p50 { left: 50%; }
.phase-label.p75 { left: 75%; }
.phase-label.p75::before { background: #101722; box-shadow: inset 0.56rem 0 #dce9ff; }
#moon-cycle-marker {
    position: absolute;
    top: -0.58rem;
    left: 0;
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--cyan);
    transform: translateX(-50%);
}

.moon-events {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}
.moon-events article {
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: #07111f;
}
.moon-events span,
.moon-events strong,
.moon-events small { display: block; }
.moon-events span { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; }
.moon-events strong { margin-top: 0.2rem; font-size: 0.9rem; }
.moon-events small { color: #7f94ad; font-size: 0.7rem; }

.observing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.observing-grid p {
    min-width: 0;
    margin: 0;
    padding: 0.75rem;
    border-left: 2px solid var(--cyan);
    background: #07111f;
    color: var(--muted);
}

.astro-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--line);
    background: #030812;
}
.astro-footer .astro-shell {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 1rem;
    padding-block: 1.5rem;
}
.astro-footer p { min-width: 0; margin: 0; color: var(--muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.astro-footer strong { color: #dbeafe; }

@media (max-width: 1180px) {
    .sun-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .moon-overview { grid-template-columns: 1fr; }
    .moon-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .day-axis { min-height: 4.6rem; overflow: hidden; }
    .day-axis::before { bottom: 0.85rem; }
    .axis-event {
        top: 0.45rem;
        width: 1rem;
        min-width: 1rem;
    }
    .axis-event span,
    .axis-event strong { display: none; }
    .axis-event::after { top: 2.55rem; }
}

@media (max-width: 900px) {
    .astro-header-inner { grid-template-columns: auto minmax(0, 1fr); }
    .location-chip { display: none; }
    .astro-brand { justify-content: flex-end; }
    .page-intro { grid-template-columns: 1fr; align-items: start; }
    .date-control { width: 100%; }
    .current-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .current-strip > div:nth-child(2) { border-right: 0; }
    .current-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
    .comparison-grid,
    .season-events,
    .moon-events,
    .day-events-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .moon-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .moon-cycle-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .astro-footer .astro-shell { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .astro-shell { width: min(100% - 1rem, 1500px); }
    .astro-site-header { position: relative; }
    .astro-header-inner { min-height: 76px; gap: 0.5rem; }
    .back-link { padding: 0.5rem; }
    .back-link span { display: none; }
    .astro-brand-mark { width: 2.6rem; height: 2.6rem; flex-basis: 2.6rem; }
    .astro-brand-mark svg { width: 1.9rem; height: 1.9rem; }
    .astro-brand p { font-size: 0.63rem; letter-spacing: 0.09em; }
    .astro-brand strong { font-size: 0.92rem; }
    .page-intro { padding-top: 1.6rem; gap: 1.2rem; }
    .page-intro h1 { font-size: 2.5rem; }
    .date-control > div { flex-wrap: wrap; }
    .date-control input { flex-basis: 12rem; }
    .current-strip { grid-template-columns: 1fr; }
    .current-strip > div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .current-strip > div:last-child { border-bottom: 0; }
    .section-heading { grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0.65rem; }
    .section-icon { width: 2.7rem; height: 2.7rem; }
    .section-icon svg { width: 1.8rem; height: 1.8rem; }
    .section-heading time { grid-column: 2; }
    .sun-metrics,
    .moon-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric { min-height: 6.2rem; padding: 0.7rem; }
    .metric strong { font-size: 1.3rem; }
    .band-title { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
    .comparison-grid,
    .season-events,
    .moon-events,
    .observing-grid,
    .explanation-grid { grid-template-columns: 1fr; }
    .moon-marker-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .moon-visibility-events { grid-template-columns: 1fr; }
    .moon-trajectory-frame { aspect-ratio: 1000 / 420; }
    #moon-trajectory-grid text,
    #moon-trajectory-markers text,
    #moon-trajectory-directions text { font-size: 34px; }
    #moon-current-marker .moon-tooltip { display: none; }
    .solar-progress-row { grid-template-columns: 4.4rem minmax(0, 1fr) 4.4rem; gap: 0.45rem; }
    .edge-event span { font-size: 0.62rem; }
    .axis-event { width: 1rem; min-width: 1rem; }
    .moon-visual-card { grid-template-columns: 8.5rem minmax(0, 1fr); }
    .phase-label { width: 5.6rem; font-size: 0.58rem; }
    .phase-label.p50 { left: 52%; }
    .phase-label.p75 { left: 78%; }
    .annual-chart,
    .moon-trajectory { overflow: hidden; }
    .day-events-table { grid-template-columns: 1fr; }
    .day-axis { min-height: 4.6rem; }
    .annual-marker-summary strong,
    .day-moment-summary strong { font-size: 0.9rem; overflow-wrap: anywhere; }
}

@media (max-width: 370px) {
    .sun-metrics,
    .moon-metrics { grid-template-columns: 1fr; }
    .moon-visual-card { grid-template-columns: 1fr; text-align: center; }
    #moon-phase-svg { width: min(10rem, 100%); margin-inline: auto; }
    .solar-progress-row { grid-template-columns: 1fr; }
    .moon-cycle-summary { grid-template-columns: 1fr; }
    .edge-event:last-child { text-align: left; }
    .progress-track { width: 100%; }
}

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

/* NATURAL LANDSCAPES + PHYSICALLY TIMED ECLIPSE PRESENTATION */
.sky-visual {
    --sky-moon-render-x: var(--sky-moon-x);
    --sky-moon-render-y: var(--sky-moon-y);
    --solar-eclipse-strength: 0;
    --lunar-eclipse-strength: 0;
}

.sky-body {
    width: clamp(0.98rem, 1.6vw, 1.55rem);
    height: clamp(0.98rem, 1.6vw, 1.55rem);
}

.sky-body-sun {
    box-shadow: 0 0 9px #ffe17e, 0 0 24px rgba(255, 189, 65, 0.76), 0 0 46px rgba(255, 159, 57, 0.26);
}

.sky-body-sun > i {
    position: absolute;
    inset: -48%;
    border: 1px solid rgba(255, 246, 214, 0.9);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 0.7rem rgba(255,255,244,0.95), 0 0 1.8rem rgba(255,231,164,0.65);
    transition: opacity 220ms ease;
}

.sky-body-moon {
    left: var(--sky-moon-render-x);
    top: var(--sky-moon-render-y);
}

.sky-separation-guide {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.sky-separation-guide[hidden] { display: none; }
.sky-separation-guide line {
    stroke: rgba(224, 239, 249, 0.58);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
}
.sky-separation-guide circle {
    fill: #dceaff;
    stroke: rgba(4, 12, 22, 0.9);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.sky-eclipse-veil {
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: calc(var(--solar-eclipse-strength) * 0.72);
    background:
        radial-gradient(circle at var(--sky-sun-x) var(--sky-sun-y), transparent 0 4%, rgba(7, 12, 24, 0.2) 16%, rgba(2, 6, 14, 0.88) 78%),
        linear-gradient(rgba(4, 8, 17, 0.72), rgba(6, 11, 20, 0.82));
    pointer-events: none;
    transition: opacity 240ms linear;
}

.sky-eclipse-chip {
    position: absolute;
    z-index: 15;
    left: 0.75rem;
    top: 0.72rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.42rem 0.62rem;
    border: 1px solid rgba(245, 219, 150, 0.72);
    border-radius: 999px;
    background: rgba(3, 8, 17, 0.82);
    color: #fff2c9;
    box-shadow: 0 0 1.3rem rgba(231, 184, 88, 0.2);
    font-size: clamp(0.58rem, 1.3vw, 0.72rem);
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.sky-eclipse-chip[hidden] { display: none; }

.sky-visual[data-solar-eclipse="partial"] .sky-body-sun > i,
.sky-visual[data-solar-eclipse="total"] .sky-body-sun > i { opacity: calc(0.35 + var(--solar-eclipse-strength) * 0.65); }
.sky-visual[data-solar-eclipse="partial"] .sky-body-moon,
.sky-visual[data-solar-eclipse="total"] .sky-body-moon {
    z-index: 8;
    background: radial-gradient(circle at 36% 34%, #29303a, #080b10 64%, #010204 100%);
    box-shadow: 0 0 0 1px rgba(255,244,205,0.34), 0 0 1rem rgba(255,227,159,0.4);
}
.sky-visual[data-solar-eclipse="total"] .sky-body-sun {
    box-shadow: 0 0 0.8rem #fffef0, 0 0 2rem rgba(255,245,202,0.98), 0 0 4rem rgba(204,218,255,0.62);
}

.sky-visual[data-lunar-eclipse="penumbral"] .sky-body-moon {
    filter: sepia(calc(var(--lunar-eclipse-strength) * 0.45)) brightness(calc(1 - var(--lunar-eclipse-strength) * 0.22));
}
.sky-visual[data-lunar-eclipse="partial"] .sky-body-moon,
.sky-visual[data-lunar-eclipse="total"] .sky-body-moon {
    background:
        radial-gradient(circle at 34% 30%, rgba(255,207,151,0.55), transparent 16%),
        radial-gradient(circle at 60% 65%, rgba(74,20,13,0.44), transparent 38%),
        linear-gradient(145deg, #b45a35, #6b2319 68%, #210b0b);
    box-shadow: 0 0 0 1px rgba(242,151,103,0.42), 0 0 1.4rem rgba(206,77,44,0.46);
    filter: brightness(calc(1 - var(--lunar-eclipse-strength) * 0.32)) saturate(calc(1 + var(--lunar-eclipse-strength) * 0.7));
}
.sky-visual[data-lunar-eclipse="total"] .sky-body-moon {
    box-shadow: 0 0 0 1px rgba(255,171,119,0.48), 0 0 1.8rem rgba(210,73,39,0.58), 0 0 3.2rem rgba(116,33,25,0.38);
}

.sky-landscape-art {
    position: absolute;
    z-index: 10;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease, filter 600ms ease;
}
.sky-visual[data-art-ready="true"] .sky-landscape-art { opacity: 1; }
.sky-visual[data-art-ready="true"] .sky-horizon,
.sky-visual[data-art-ready="true"] .sky-meadow,
.sky-visual[data-art-ready="true"] .sky-orchard { opacity: 0; }
.sky-visual[data-light="golden"] .sky-landscape-art { filter: brightness(0.88) saturate(0.92) sepia(0.08); }
.sky-visual[data-light="civil"] .sky-landscape-art { filter: brightness(0.68) saturate(0.78) hue-rotate(-4deg); }
.sky-visual[data-light="nautical"] .sky-landscape-art { filter: brightness(0.48) saturate(0.68) hue-rotate(5deg); }
.sky-visual[data-light="astronomical"] .sky-landscape-art,
.sky-visual[data-light="night"] .sky-landscape-art { filter: brightness(0.30) saturate(0.56) hue-rotate(8deg); }
.sky-visual[data-solar-eclipse="partial"] .sky-landscape-art,
.sky-visual[data-solar-eclipse="total"] .sky-landscape-art {
    filter: brightness(calc(1 - var(--solar-eclipse-strength) * 0.58)) saturate(calc(1 - var(--solar-eclipse-strength) * 0.38));
}

.astro-landscape-part.winter,
.thermal-seasons-wheel article[data-thermal-season="winter"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-winter-v20260814c-new-panorama.webp'); }
.thermal-seasons-wheel article[data-thermal-season="pre-spring"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-pre-spring-v20260814c-new-panorama.webp'); }
.astro-landscape-part.spring,
.thermal-seasons-wheel article[data-thermal-season="spring"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-spring-v20260814c-new-panorama.webp'); }
.astro-landscape-part.summer,
.thermal-seasons-wheel article[data-thermal-season="summer"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-summer-v20260814c-new-panorama.webp'); }
.astro-landscape-part.autumn,
.thermal-seasons-wheel article[data-thermal-season="autumn"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-autumn-v20260814c-new-panorama.webp'); }
.thermal-seasons-wheel article[data-thermal-season="pre-winter"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-pre-winter-v20260814c-new-panorama.webp'); }

.astro-landscape-part::after {
    inset: 0;
    bottom: 0;
    width: auto;
    height: auto;
    opacity: 0.96;
    background: var(--season-art) center bottom / cover no-repeat;
    filter: saturate(0.96) contrast(1.03);
}
.astro-nature-scene { opacity: 0; }

.thermal-seasons-wheel article::after {
    inset: 0;
    opacity: 0.95;
    background: var(--season-art) center bottom / cover no-repeat;
    filter: saturate(0.94) contrast(1.03);
}
.thermal-seasons-wheel .nature-scene { opacity: 0; }
.thermal-seasons-wheel article > span,
.thermal-seasons-wheel article > strong,
.thermal-seasons-wheel article > small { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.92); }

@media (max-width: 640px) {
    .sky-body { width: 0.98rem; height: 0.98rem; }
    .sky-eclipse-chip { top: 0.5rem; left: 0.5rem; max-width: calc(100% - 1rem); }
    .astro-landscape-part::after,
    .thermal-seasons-wheel article::after { background-size: auto 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sky-landscape-art,
    .sky-eclipse-veil,
    .sky-body-sun > i { transition: none !important; }
}

/* BUILD v20260812b — ABSOLUTE FINAL OVERRIDES */
.sky-visual { min-height: clamp(31rem, 54vw, 46rem) !important; overflow: hidden; }
.sky-visual .sky-landscape-art {
    position: absolute !important;
    z-index: 3 !important;
    inset: auto 0 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
}
.sky-visual .sky-sun-trajectory { z-index: 5 !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.sky-visual .sky-eclipse-veil { z-index: 6 !important; }
.sky-visual .sky-separation-guide { z-index: 7 !important; }
.sky-visual .sky-body { z-index: 8 !important; }
.sky-visual .sky-eclipse-chip { z-index: 14 !important; }
.sky-visual .sky-cloud-veil { z-index: 4 !important; }
.sky-visual .sky-compass-real { z-index: 12 !important; display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.sky-visual .sky-compass-real span { position: static !important; transform: none !important; text-align: center !important; }
.sky-visual .sky-compass-real span:first-child { text-align: left !important; }
.sky-visual .sky-compass-real span:last-child { text-align: right !important; }
.sky-visual .sky-horizon-line { display: none !important; }
@media (max-width: 640px) {
    .sky-visual { min-height: 29rem !important; }
}

/* DEFINITIVE REAL-PANORAMA LAYER ORDER — keep this final in the cascade. */
.sky-visual {
    min-height: clamp(31rem, 54vw, 46rem);
    overflow: hidden;
}
.sky-landscape-art {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
}
.sky-sun-trajectory { z-index: 5; inset: 0; width: 100%; height: 100%; }
.sky-eclipse-veil { z-index: 6; }
.sky-separation-guide { z-index: 7; }
.sky-body { z-index: 8; }
.sky-eclipse-chip { z-index: 14; }
.sky-cloud-veil { z-index: 4; }
.sky-compass-real {
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.sky-compass-real span { position: static; transform: none; text-align: center; }
.sky-compass-real span:first-child { text-align: left; }
.sky-compass-real span:last-child { text-align: right; }
.sky-horizon-line { display: none; }
@media (max-width: 640px) {
    .sky-visual { min-height: 29rem; }
    .sky-landscape-art { width: 100%; height: auto; object-fit: contain; }
}

/* REAL MICHALCZOWA PANORAMA — calibrated NE (45°) to NW (315°). */
.sky-visual { min-height: clamp(31rem, 54vw, 46rem); }
.sky-sun-trajectory { inset: 0; width: 100%; height: 100%; z-index: 4; }
.sky-landscape-art {
    z-index: 3;
    inset: auto 0 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
}
.sky-compass-real { grid-template-columns: repeat(7, 1fr); }
.sky-horizon-line { display: none; }
@media (max-width: 640px) {
    .sky-visual { min-height: 29rem; }
    .sky-compass-real { font-size: 0.58rem; letter-spacing: 0.02em; }
}

/* ASTRONOMICAL OBSERVATORY REBUILD — isolated visual and calendar layer. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sky-observatory {
    margin-top: clamp(1rem, 2vw, 1.6rem);
    padding: clamp(0.85rem, 2vw, 1.25rem);
    overflow: hidden;
    border: 1px solid #244e72;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(9, 25, 44, 0.98), rgba(4, 12, 24, 0.99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.025);
}

.sky-observatory-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.sky-observatory-heading h2 {
    margin: 0.12rem 0 0;
    color: #f6fbff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 3.1vw, 2.65rem);
    font-weight: 600;
    line-height: 1.08;
}

.sky-live-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(76, 201, 255, 0.38);
    border-radius: 999px;
    background: rgba(4, 14, 27, 0.72);
    color: #dff6ff;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.05em;
}

.sky-live-chip i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(76, 201, 255, 0.86);
}

.sky-visual {
    --sky-sun-x: 50%;
    --sky-sun-y: 42%;
    --sky-moon-x: 72%;
    --sky-moon-y: 30%;
    --sky-star-opacity: 1;
    --sky-cloud-opacity: 0;
    --hill-back-top: #5e9b6f;
    --hill-back-bottom: #2d6444;
    --hill-front-top: #397d4b;
    --hill-front-bottom: #153b2b;
    --meadow-top: #235e38;
    --meadow-bottom: #071d16;
    --tree-trunk: #30271e;
    --tree-leaf: #2f7f3d;
    --tree-leaf-light: #6ab961;
    --tree-leaf-dark: #174d2a;
    --nature-accent: rgba(255, 220, 106, 0.78);
    position: relative;
    min-height: clamp(20rem, 38vw, 34rem);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(151, 202, 239, 0.22);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 125%, rgba(86, 109, 152, 0.22), transparent 44%),
        linear-gradient(180deg, #020713 0%, #071226 48%, #172d46 100%);
    transition: background 600ms ease;
}

.sky-visual[data-visual-season="spring"] {
    --hill-back-top: #83b982;
    --hill-back-bottom: #467853;
    --hill-front-top: #6aa75b;
    --hill-front-bottom: #2f5c3c;
    --meadow-top: #62a84e;
    --meadow-bottom: #173a27;
    --tree-leaf: #82b969;
    --tree-leaf-light: #f0d5e3;
    --tree-leaf-dark: #4d8d4a;
    --nature-accent: rgba(255, 219, 235, 0.92);
}

.sky-visual[data-visual-season="autumn"] {
    --hill-back-top: #a87942;
    --hill-back-bottom: #67492c;
    --hill-front-top: #8b552f;
    --hill-front-bottom: #422c22;
    --meadow-top: #755024;
    --meadow-bottom: #271b15;
    --tree-leaf: #a55b24;
    --tree-leaf-light: #d49b38;
    --tree-leaf-dark: #71331f;
    --nature-accent: rgba(202, 67, 37, 0.88);
}

.sky-visual[data-visual-season="winter"] {
    --hill-back-top: #dce8eb;
    --hill-back-bottom: #90a8b5;
    --hill-front-top: #c8d9dc;
    --hill-front-bottom: #778e98;
    --meadow-top: #edf4f4;
    --meadow-bottom: #8fa2aa;
    --tree-trunk: #4a4038;
    --tree-leaf: transparent;
    --tree-leaf-light: rgba(247, 252, 252, 0.95);
    --tree-leaf-dark: transparent;
    --nature-accent: rgba(224, 241, 247, 0.9);
}

.sky-visual[data-visual-season="pre-spring"] {
    --hill-back-top: #9dab91;
    --hill-back-bottom: #65715a;
    --hill-front-top: #7c8e6f;
    --hill-front-bottom: #465341;
    --meadow-top: #72815b;
    --meadow-bottom: #303a2e;
    --tree-leaf: #69795e;
    --tree-leaf-light: #dbe6d1;
    --tree-leaf-dark: #495746;
    --nature-accent: rgba(230, 242, 218, 0.82);
}

.sky-visual[data-visual-season="pre-winter"] {
    --hill-back-top: #7b8578;
    --hill-back-bottom: #525b50;
    --hill-front-top: #626d5d;
    --hill-front-bottom: #353e35;
    --meadow-top: #505c45;
    --meadow-bottom: #242c25;
    --tree-trunk: #3d3933;
    --tree-leaf: #5b5e45;
    --tree-leaf-light: #96967a;
    --tree-leaf-dark: #3f4438;
    --nature-accent: rgba(222, 234, 228, 0.7);
}

.sky-visual[data-light="day"] {
    --sky-star-opacity: 0;
    background:
        radial-gradient(circle at var(--sky-sun-x) var(--sky-sun-y), rgba(255, 245, 193, 0.72), transparent 13%),
        linear-gradient(180deg, #3379b9 0%, #6cb9e7 55%, #d8ebf2 100%);
}

.sky-visual[data-light="golden"] {
    --sky-star-opacity: 0.06;
    background:
        radial-gradient(circle at var(--sky-sun-x) var(--sky-sun-y), rgba(255, 225, 139, 0.82), transparent 15%),
        linear-gradient(180deg, #174d7d 0%, #e18b56 64%, #f8c879 100%);
}

.sky-visual[data-light="civil"] {
    --sky-star-opacity: 0.25;
    background:
        radial-gradient(circle at var(--sky-sun-x) 93%, rgba(255, 157, 88, 0.68), transparent 23%),
        linear-gradient(180deg, #111a3e 0%, #4c568a 54%, #d27264 100%);
}

.sky-visual[data-light="nautical"] {
    --sky-star-opacity: 0.68;
    background:
        radial-gradient(circle at var(--sky-sun-x) 105%, rgba(173, 97, 105, 0.35), transparent 23%),
        linear-gradient(180deg, #04081a 0%, #111c42 58%, #4b3956 100%);
}

.sky-visual[data-light="astronomical"],
.sky-visual[data-light="night"] {
    --sky-star-opacity: 1;
    background:
        radial-gradient(circle at 68% 15%, rgba(91, 127, 186, 0.13), transparent 24%),
        linear-gradient(180deg, #01040c 0%, #061023 62%, #152a3c 100%);
}

.sky-stars {
    position: absolute;
    inset: 0 0 22%;
    z-index: 1;
    opacity: var(--sky-star-opacity);
    transition: opacity 500ms ease;
}

.sky-stars i {
    position: absolute;
    left: var(--star-x);
    top: var(--star-y);
    width: var(--star-size);
    height: var(--star-size);
    border-radius: 50%;
    background: #fff;
    opacity: var(--star-alpha);
    box-shadow: 0 0 calc(var(--star-size) * 3) rgba(188, 220, 255, 0.72);
}

.sky-sun-trajectory {
    position: absolute;
    inset: 3% 0 20%;
    z-index: 2;
    width: 100%;
    height: 77%;
    overflow: visible;
}

#sky-sun-path {
    fill: none;
    stroke: rgba(255, 229, 145, 0.62);
    stroke-width: 2.2;
    stroke-dasharray: 8 9;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(246, 195, 68, 0.35));
}

.sky-body {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 50%;
    width: clamp(1.45rem, 2.8vw, 2.65rem);
    height: clamp(1.45rem, 2.8vw, 2.65rem);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: left 350ms ease, top 350ms ease, opacity 300ms ease;
}

.sky-body-sun {
    left: var(--sky-sun-x);
    top: var(--sky-sun-y);
    background: radial-gradient(circle at 36% 34%, #fffce9 0 12%, #ffe27b 38%, #f59e0b 72%, #c66a08 100%);
    box-shadow: 0 0 12px #ffe17e, 0 0 34px rgba(255, 189, 65, 0.82), 0 0 72px rgba(255, 159, 57, 0.34);
}

.sky-body-sun[data-below="true"] { opacity: 0.18; }

.sky-body-moon {
    left: var(--sky-moon-x);
    top: var(--sky-moon-y);
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 30%, rgba(255,255,255,0.95), transparent 15%),
        radial-gradient(circle at 65% 60%, rgba(79, 91, 109, 0.35), transparent 14%),
        radial-gradient(circle at 40% 72%, rgba(87, 99, 116, 0.32), transparent 9%),
        linear-gradient(145deg, #f4f7f6, #aebccb 70%, #637587);
    box-shadow: 0 0 14px rgba(196, 222, 255, 0.46), 0 0 42px rgba(125, 179, 237, 0.2);
}

.sky-body-moon[data-below="true"] { opacity: 0.16; }
.sky-body-moon > i {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: #050a14;
    transform: translateX(var(--moon-shadow-shift, 0%));
    opacity: var(--moon-shadow-opacity, 0.5);
    box-shadow: 0 0 9px rgba(3, 7, 14, 0.9);
}

.sky-cloud-veil {
    position: absolute;
    inset: 0 0 20%;
    z-index: 5;
    opacity: var(--sky-cloud-opacity);
    pointer-events: none;
    transition: opacity 600ms ease;
}

.sky-cloud-veil i {
    position: absolute;
    width: 27%;
    height: 9%;
    border-radius: 999px;
    background: rgba(225, 237, 244, 0.42);
    filter: blur(12px);
}
.sky-cloud-veil i:nth-child(1) { left: 8%; top: 22%; }
.sky-cloud-veil i:nth-child(2) { left: 52%; top: 35%; width: 36%; }
.sky-cloud-veil i:nth-child(3) { left: 28%; top: 54%; width: 22%; }

.sky-horizon {
    position: absolute;
    inset: auto -2% 0;
    transform-origin: bottom;
    pointer-events: none;
    transition: filter 600ms ease, background 600ms ease;
}

.sky-horizon-back {
    z-index: 7;
    height: 36%;
    background: linear-gradient(to top, var(--hill-back-bottom) 0 42%, transparent 43%);
}

.sky-horizon-front {
    z-index: 8;
    height: 28%;
    background: linear-gradient(to top, var(--hill-front-bottom) 0 45%, transparent 46%);
}

.sky-horizon::before,
.sky-horizon::after {
    content: "";
    position: absolute;
    bottom: 12%;
    display: block;
    border-radius: 52% 48% 0 0 / 88% 86% 0 0;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

.sky-horizon-back::before {
    left: -9%;
    width: 66%;
    height: 63%;
    background: linear-gradient(152deg, var(--hill-back-top), var(--hill-back-bottom) 72%);
    transform: rotate(-2.2deg);
}

.sky-horizon-back::after {
    right: -8%;
    width: 67%;
    height: 77%;
    background: linear-gradient(208deg, var(--hill-back-top), var(--hill-back-bottom) 74%);
    transform: rotate(2.1deg);
}

.sky-horizon-front::before {
    left: -6%;
    width: 61%;
    height: 62%;
    background: linear-gradient(158deg, var(--hill-front-top), var(--hill-front-bottom) 78%);
    transform: rotate(1.7deg);
}

.sky-horizon-front::after {
    right: -9%;
    width: 68%;
    height: 70%;
    background: linear-gradient(204deg, var(--hill-front-top), var(--hill-front-bottom) 76%);
    transform: rotate(-1.6deg);
}

.sky-meadow {
    position: absolute;
    z-index: 9;
    inset: auto 0 0;
    height: 14%;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 42%, var(--nature-accent) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 66%, var(--nature-accent) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 48%, var(--nature-accent) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 70%, var(--nature-accent) 0 1px, transparent 2px),
        linear-gradient(180deg, var(--meadow-top), var(--meadow-bottom));
    background-size: 7rem 3rem, 9rem 3.4rem, 8rem 3rem, 10rem 3.8rem, auto;
    box-shadow: inset 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: filter 600ms ease, background 600ms ease;
}

.sky-visual[data-visual-season="winter"] .sky-meadow {
    background:
        radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.72), transparent 18%),
        radial-gradient(ellipse at 72% 0%, rgba(255,255,255,0.56), transparent 23%),
        linear-gradient(180deg, var(--meadow-top), var(--meadow-bottom));
}

.sky-visual[data-visual-season="pre-spring"] .sky-meadow {
    background:
        radial-gradient(ellipse at 22% 12%, rgba(230,238,236,0.68), transparent 12%),
        radial-gradient(ellipse at 74% 18%, rgba(221,232,228,0.48), transparent 11%),
        linear-gradient(180deg, var(--meadow-top), var(--meadow-bottom));
}

.sky-orchard {
    position: absolute;
    z-index: 10;
    inset: auto 3% 3.8% 3%;
    height: 17%;
    display: flex;
    align-items: end;
    justify-content: space-around;
    opacity: 0.9;
    pointer-events: none;
    transition: filter 600ms ease;
}

.sky-orchard i {
    position: relative;
    width: clamp(2px, 0.24vw, 4px);
    height: 48%;
    border-radius: 60% 60% 0 0;
    background: linear-gradient(90deg, #18130f, var(--tree-trunk) 55%, #100c09);
    transform-origin: bottom;
}
.sky-orchard i::before,
.sky-orchard i::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 39%;
    width: clamp(1.65rem, 4vw, 4rem);
    height: clamp(1.05rem, 2.6vw, 2.55rem);
    border-radius: 48% 52% 46% 54% / 58% 56% 44% 42%;
    background:
        radial-gradient(circle at 27% 34%, var(--tree-leaf-light) 0 16%, transparent 17%),
        radial-gradient(circle at 72% 62%, var(--nature-accent) 0 5%, transparent 7%),
        linear-gradient(145deg, var(--tree-leaf-light), var(--tree-leaf) 54%, var(--tree-leaf-dark));
    transform: translateX(-50%);
    box-shadow: inset -0.4rem -0.45rem 0.9rem rgba(0,0,0,0.18), 0 0.3rem 0.5rem rgba(0,0,0,0.16);
}
.sky-orchard i::after { bottom: 58%; width: 72%; height: 52%; transform: translateX(-50%) rotate(-4deg); }
.sky-orchard i:nth-child(2) { height: 60%; transform: rotate(-1deg); }
.sky-orchard i:nth-child(3) { height: 42%; transform: rotate(1.5deg); }
.sky-orchard i:nth-child(4) { height: 67%; transform: rotate(-0.8deg); }
.sky-orchard i:nth-child(5) { height: 51%; transform: rotate(1.2deg); }
.sky-orchard i:nth-child(6) { height: 61%; transform: rotate(-1.4deg); }
.sky-orchard i:nth-child(7) { height: 45%; transform: rotate(0.9deg); }

.sky-visual[data-visual-season="winter"] .sky-orchard i::before,
.sky-visual[data-visual-season="winter"] .sky-orchard i::after,
.sky-visual[data-visual-season="pre-winter"] .sky-orchard i::before,
.sky-visual[data-visual-season="pre-winter"] .sky-orchard i::after {
    left: 50%;
    bottom: 48%;
    width: 2px;
    height: 72%;
    border-radius: 999px;
    background: var(--tree-trunk);
    box-shadow: 0.55rem 0.08rem 0 -0.25px var(--tree-trunk), -0.5rem 0.15rem 0 -0.25px var(--tree-trunk);
    transform: rotate(48deg);
}
.sky-visual[data-visual-season="winter"] .sky-orchard i::after,
.sky-visual[data-visual-season="pre-winter"] .sky-orchard i::after { transform: rotate(-50deg); }

.sky-visual[data-visual-season="pre-spring"] .sky-orchard i::before,
.sky-visual[data-visual-season="pre-spring"] .sky-orchard i::after {
    width: clamp(1rem, 2.1vw, 2rem);
    height: clamp(0.65rem, 1.3vw, 1.2rem);
    background:
        radial-gradient(circle at 25% 34%, #e1ead3 0 6%, transparent 8%),
        radial-gradient(circle at 70% 61%, #e1ead3 0 6%, transparent 8%),
        var(--tree-leaf);
}

.sky-visual[data-light="night"] .sky-horizon,
.sky-visual[data-light="night"] .sky-meadow,
.sky-visual[data-light="night"] .sky-orchard,
.sky-visual[data-light="astronomical"] .sky-horizon,
.sky-visual[data-light="astronomical"] .sky-meadow,
.sky-visual[data-light="astronomical"] .sky-orchard { filter: brightness(0.42) saturate(0.74); }
.sky-visual[data-light="nautical"] .sky-horizon,
.sky-visual[data-light="nautical"] .sky-meadow,
.sky-visual[data-light="nautical"] .sky-orchard { filter: brightness(0.58) saturate(0.82); }
.sky-visual[data-light="civil"] .sky-horizon,
.sky-visual[data-light="civil"] .sky-meadow,
.sky-visual[data-light="civil"] .sky-orchard { filter: brightness(0.76) saturate(0.9); }

.sky-compass {
    position: absolute;
    z-index: 12;
    left: 2%;
    right: 2%;
    bottom: 1.1rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    color: rgba(207, 230, 242, 0.78);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
}
.sky-compass span:first-child { text-align: left; }
.sky-compass span:last-child { text-align: right; }
.sky-horizon-line { position: absolute; z-index: 11; left: 2%; right: 2%; bottom: 2.3rem; height: 1px; background: rgba(177, 213, 229, 0.35); }

.sky-time-control {
    display: grid;
    grid-template-columns: auto minmax(10rem, 16rem) minmax(12rem, 1fr);
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.75rem;
    padding: 0.7rem;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: #06111e;
}
.sky-time-control button {
    min-height: 2.5rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--cyan);
    border-radius: 6px;
    background: rgba(76, 201, 255, 0.08);
    color: #e8f8ff;
    font-weight: 800;
    cursor: pointer;
}
.sky-time-control label { color: var(--muted); font-size: 0.78rem; font-weight: 750; }
.sky-time-control label strong { display: block; color: #fff; font-size: 1rem; }
.sky-time-control input { width: 100%; accent-color: var(--gold); }

.sky-story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.75rem;
}
.sky-story-grid article {
    min-width: 0;
    padding: 0.8rem;
    border-left: 2px solid var(--cyan);
    background: #06111e;
}
.sky-story-grid article:nth-child(2) { border-left-color: var(--gold); }
.sky-story-grid article:nth-child(3) { border-left-color: #a8cfff; }
.sky-story-grid span { color: #86a0ba; font-size: 0.69rem; font-weight: 850; text-transform: uppercase; }
.sky-story-grid strong { display: block; margin-top: 0.15rem; color: #fff; font-size: 1.02rem; }
.sky-story-grid p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.82rem; }

.astronomical-seasons-landscape {
    position: relative;
    height: 9rem;
    margin-top: 0.8rem;
    overflow: hidden;
    border: 1px solid #294966;
    border-radius: 8px;
    background: #07111f;
    box-shadow: inset 0 0 34px rgba(0,0,0,0.2);
}
.astro-landscape-part {
    --season-sky: linear-gradient(180deg, #4f96c4, #c3e2e7 70%);
    --season-sun: rgba(255, 235, 155, 0.86);
    --season-hill-far: #5c9562;
    --season-hill-near: #326b43;
    --season-ground: #1d4b31;
    --season-trunk: #382b22;
    --season-leaf: #438247;
    --season-leaf-light: #82b86b;
    position: absolute;
    inset-block: 0;
    left: var(--season-start, 0%);
    width: var(--season-width, 20%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.65rem 0.25rem;
    overflow: hidden;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.astro-landscape-part::before,
.astro-landscape-part::after { content: ""; position: absolute; pointer-events: none; }
.astro-landscape-part::before { inset: 0; background: var(--season-sky); }
.astro-landscape-part::after {
    z-index: 1;
    left: -12%;
    right: -12%;
    bottom: 0;
    height: 58%;
    background:
        radial-gradient(ellipse at 4% 92%, var(--season-hill-far) 0 38%, transparent 39%),
        radial-gradient(ellipse at 47% 105%, var(--season-hill-far) 0 48%, transparent 49%),
        radial-gradient(ellipse at 93% 92%, var(--season-hill-near) 0 44%, transparent 45%),
        linear-gradient(to top, var(--season-ground) 0 27%, transparent 28%);
}
.astro-landscape-part span {
    position: relative;
    z-index: 5;
    padding: 0.22rem 0.45rem;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    background: rgba(3, 12, 16, 0.54);
    text-shadow: 0 1px 5px #000;
    backdrop-filter: blur(3px);
}
.astro-landscape-part.winter {
    --season-sky: linear-gradient(180deg, #18334f, #8da8b8 66%, #dce7ea);
    --season-sun: rgba(237, 244, 241, 0.74);
    --season-hill-far: #cbdcdf;
    --season-hill-near: #9db1b8;
    --season-ground: #dfe9ea;
    --season-trunk: #4d433c;
    --season-leaf: rgba(241,247,247,0.9);
    --season-leaf-light: rgba(255,255,255,0.94);
}
.astro-landscape-part.spring {
    --season-sky: linear-gradient(180deg, #4d96c8, #bfe2df 67%, #e9dfe5);
    --season-sun: rgba(255, 239, 169, 0.86);
    --season-hill-far: #78aa6c;
    --season-hill-near: #4d8a4d;
    --season-ground: #39703f;
    --season-leaf: #79aa62;
    --season-leaf-light: #f0d4e2;
}
.astro-landscape-part.summer {
    --season-sky: linear-gradient(180deg, #3180b9, #82cee1 67%, #d7ece7);
    --season-sun: rgba(255, 221, 100, 0.96);
    --season-hill-far: #5c9c5d;
    --season-hill-near: #337747;
    --season-ground: #1f5d35;
    --season-leaf: #2e7d3d;
    --season-leaf-light: #73b85e;
}
.astro-landscape-part.autumn {
    --season-sky: linear-gradient(180deg, #536f87, #d8a06c 66%, #f0c88a);
    --season-sun: rgba(255, 196, 91, 0.88);
    --season-hill-far: #a16d37;
    --season-hill-near: #7c4429;
    --season-ground: #51301e;
    --season-leaf: #9f5228;
    --season-leaf-light: #d49a35;
}
.astro-nature-scene { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.astro-nature-scene::before {
    content: "";
    position: absolute;
    top: 13%;
    left: 68%;
    width: clamp(0.8rem, 1.5vw, 1.35rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--season-sun);
    box-shadow: 0 0 1rem var(--season-sun);
}
.astro-nature-scene::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: -12%;
    right: -12%;
    bottom: -18%;
    height: 45%;
    border-radius: 50% 46% 0 0 / 80% 74% 0 0;
    background:
        radial-gradient(circle at 18% 30%, var(--season-leaf-light) 0 1px, transparent 2px),
        linear-gradient(155deg, var(--season-hill-near), var(--season-ground));
    background-size: 2.5rem 2rem, auto;
}
.astro-nature-scene i {
    position: absolute;
    z-index: 3;
    bottom: 18%;
    left: 17%;
    width: 2px;
    height: 29%;
    border-radius: 999px 999px 0 0;
    background: var(--season-trunk);
}
.astro-nature-scene i::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 51%;
    width: clamp(1.1rem, 2.3vw, 2.15rem);
    height: clamp(0.7rem, 1.5vw, 1.35rem);
    border-radius: 52% 48% 46% 54% / 57% 60% 40% 43%;
    background:
        radial-gradient(circle at 26% 34%, var(--season-leaf-light) 0 16%, transparent 17%),
        linear-gradient(145deg, var(--season-leaf-light), var(--season-leaf));
    transform: translateX(-50%);
    box-shadow: inset -0.25rem -0.3rem 0.5rem rgba(0,0,0,0.16);
}
.astro-nature-scene i:nth-child(2) { left: 39%; height: 37%; }
.astro-nature-scene i:nth-child(3) { left: 65%; height: 31%; }
.astro-nature-scene i:nth-child(4) { left: 86%; height: 41%; }
.astro-landscape-part.winter .astro-nature-scene i::before {
    width: 2px;
    height: 72%;
    border-radius: 999px;
    background: var(--season-trunk);
    box-shadow: 0.35rem 0.1rem 0 -0.25px var(--season-trunk), -0.35rem 0.08rem 0 -0.25px var(--season-trunk);
    transform: rotate(46deg);
}
.astro-landscape-part.winter .astro-nature-scene i::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 51%;
    width: 2px;
    height: 70%;
    border-radius: 999px;
    background: var(--season-trunk);
    transform: rotate(-48deg);
}
#astronomical-season-now {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 10px var(--cyan), 0 0 24px rgba(76, 201, 255, 0.8);
}
#astronomical-season-now::after { content: ""; position: absolute; left: 50%; top: 1.45rem; width: 0.85rem; height: 0.85rem; border: 2px solid #fff; border-radius: 50%; background: var(--cyan); transform: translateX(-50%); }
#astronomical-season-now b {
    position: absolute;
    top: 0.35rem;
    left: 0;
    max-width: 11rem;
    padding: 0.25rem 0.42rem;
    border-radius: 4px;
    background: rgba(3, 11, 20, 0.88);
    color: #dff8ff;
    font-size: 0.6rem;
    line-height: 1.25;
    white-space: nowrap;
    transform: translateX(var(--marker-label-shift, -50%));
}

.season-events { position: relative; min-height: 7.4rem; display: block; margin-top: 0.65rem; }
.season-events div {
    position: absolute;
    top: var(--season-card-row, 0);
    left: var(--season-card-x, 0%);
    width: min(13.5rem, 23%);
    min-height: 3.15rem;
    transform: translateX(var(--season-card-shift, -50%));
}

.nature-icon { color: #9ee28c; }
.thermal-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-soft);
    border-left: 3px solid #82d875;
    background: #07111f;
}
.thermal-intro p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.thermal-intro strong { color: #c8f2bf; font-size: 0.78rem; text-align: right; }
.thermal-seasons-wheel {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin-top: 0.8rem;
    overflow: hidden;
    border: 1px solid #2b4a61;
    border-radius: 10px;
}
.thermal-seasons-wheel article {
    --nature-sky: linear-gradient(180deg, #4c90bd, #bddfe1 62%, #e6ecdf);
    --nature-sun: rgba(255, 231, 141, 0.85);
    --nature-hill-far: #6d9d66;
    --nature-hill-near: #3e7449;
    --nature-ground: #245435;
    --nature-trunk: #3b2d23;
    --nature-leaf: #4d874d;
    --nature-leaf-light: #87b66f;
    --nature-detail: rgba(255,255,255,0.8);
    position: relative;
    min-width: 0;
    min-height: 17rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.8rem;
    overflow: hidden;
    border-right: 1px solid rgba(213, 235, 246, 0.13);
    background: #0a1724;
    isolation: isolate;
    transition: filter 250ms ease, transform 250ms ease;
    box-shadow: inset 0 -7rem 5rem -4.5rem rgba(0,0,0,0.8);
}
.thermal-seasons-wheel article:last-child { border-right: 0; }
.thermal-seasons-wheel article::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        radial-gradient(circle at 76% 16%, var(--nature-sun) 0 5%, transparent 5.8%),
        var(--nature-sky);
}
.thermal-seasons-wheel article::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 38% -22% 0;
    background:
        radial-gradient(ellipse at 5% 76%, var(--nature-hill-far) 0 36%, transparent 37%),
        radial-gradient(ellipse at 55% 87%, var(--nature-hill-far) 0 48%, transparent 49%),
        radial-gradient(ellipse at 100% 72%, var(--nature-hill-near) 0 42%, transparent 43%),
        linear-gradient(to top, var(--nature-ground) 0 33%, transparent 34%);
}
.thermal-seasons-wheel article[data-thermal-season="winter"] {
    --nature-sky: linear-gradient(180deg, #15304d, #8da8b8 62%, #dde8ea);
    --nature-sun: rgba(239,245,244,0.72);
    --nature-hill-far: #cbdadd;
    --nature-hill-near: #9eb2b8;
    --nature-ground: #e2ebec;
    --nature-trunk: #4a4039;
    --nature-leaf: transparent;
    --nature-leaf-light: #eef5f5;
    --nature-detail: rgba(241,249,252,0.9);
}
.thermal-seasons-wheel article[data-thermal-season="pre-spring"] {
    --nature-sky: linear-gradient(180deg, #496880, #aabdb9 61%, #d6ddd0);
    --nature-sun: rgba(232,226,180,0.7);
    --nature-hill-far: #8c987d;
    --nature-hill-near: #69745f;
    --nature-ground: #526047;
    --nature-trunk: #4a3a30;
    --nature-leaf: #6e7a63;
    --nature-leaf-light: #dbe7cf;
    --nature-detail: #86bdd0;
}
.thermal-seasons-wheel article[data-thermal-season="spring"] {
    --nature-sky: linear-gradient(180deg, #4c96c7, #b9dfd9 61%, #eadddf);
    --nature-sun: rgba(255,236,164,0.86);
    --nature-hill-far: #83ad71;
    --nature-hill-near: #5b944f;
    --nature-ground: #3f7b43;
    --nature-trunk: #493428;
    --nature-leaf: #76a961;
    --nature-leaf-light: #f1d2e1;
    --nature-detail: #ffe0ed;
}
.thermal-seasons-wheel article[data-thermal-season="summer"] {
    --nature-sky: linear-gradient(180deg, #2e7fb8, #7fcde0 61%, #d6ece4);
    --nature-sun: rgba(255,220,94,0.96);
    --nature-hill-far: #63a05f;
    --nature-hill-near: #367b46;
    --nature-ground: #205f36;
    --nature-trunk: #38291f;
    --nature-leaf: #2f7d3e;
    --nature-leaf-light: #73b65d;
    --nature-detail: #f0d46c;
}
.thermal-seasons-wheel article[data-thermal-season="autumn"] {
    --nature-sky: linear-gradient(180deg, #5c7181, #d19a68 61%, #eac17f);
    --nature-sun: rgba(255,191,81,0.86);
    --nature-hill-far: #a1703d;
    --nature-hill-near: #7f492c;
    --nature-ground: #56321f;
    --nature-trunk: #3b271d;
    --nature-leaf: #9f5229;
    --nature-leaf-light: #d59a36;
    --nature-detail: #d1492e;
}
.thermal-seasons-wheel article[data-thermal-season="pre-winter"] {
    --nature-sky: linear-gradient(180deg, #263b50, #7d8d90 61%, #aeb5ac);
    --nature-sun: rgba(222,228,218,0.5);
    --nature-hill-far: #737c68;
    --nature-hill-near: #565f52;
    --nature-ground: #3d483c;
    --nature-trunk: #3d3731;
    --nature-leaf: #555841;
    --nature-leaf-light: #8d8d70;
    --nature-detail: rgba(226,235,232,0.68);
}
.thermal-seasons-wheel article.is-current { z-index: 2; outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 42px rgba(255,255,255,0.1), 0 0 26px rgba(125, 213, 111, 0.35); }
.thermal-seasons-wheel article.is-current .nature-scene::after { content: "TERAZ"; position: absolute; top: 0.55rem; left: 50%; padding: 0.24rem 0.45rem; border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; background: rgba(4,12,18,0.78); color: #fff; font-size: 0.6rem; font-weight: 900; transform: translateX(-50%); }
.thermal-seasons-wheel span,
.thermal-seasons-wheel strong,
.thermal-seasons-wheel small { position: relative; z-index: 2; display: block; text-shadow: 0 2px 7px rgba(0,0,0,0.88); }
.thermal-seasons-wheel span { color: #dceaf2; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.thermal-seasons-wheel strong { margin-top: 0.18rem; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.thermal-seasons-wheel small { margin-top: 0.2rem; color: #d4e1e6; font-size: 0.7rem; line-height: 1.35; }
.nature-scene { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.nature-scene::before {
    content: "";
    position: absolute;
    left: -16%;
    right: -16%;
    bottom: -15%;
    height: 43%;
    border-radius: 52% 48% 0 0 / 78% 72% 0 0;
    background:
        radial-gradient(circle at 16% 26%, var(--nature-detail) 0 1px, transparent 2px),
        linear-gradient(150deg, var(--nature-hill-near), var(--nature-ground));
    background-size: 2.8rem 2.2rem, auto;
    box-shadow: inset 0 0.35rem 0.8rem rgba(255,255,255,0.07);
}
.nature-scene i {
    position: absolute;
    bottom: 27%;
    left: 20%;
    width: 2px;
    height: 27%;
    border-radius: 999px 999px 0 0;
    background: var(--nature-trunk);
}
.nature-scene i::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 55%;
    width: clamp(1.55rem, 3.4vw, 2.8rem);
    height: clamp(1rem, 2.25vw, 1.9rem);
    border-radius: 48% 52% 46% 54% / 58% 56% 44% 42%;
    background:
        radial-gradient(circle at 27% 31%, var(--nature-leaf-light) 0 16%, transparent 17%),
        radial-gradient(circle at 72% 61%, var(--nature-detail) 0 5%, transparent 7%),
        linear-gradient(145deg, var(--nature-leaf-light), var(--nature-leaf));
    transform: translateX(-50%);
    box-shadow: inset -0.3rem -0.35rem 0.7rem rgba(0,0,0,0.17), 0 0.25rem 0.45rem rgba(0,0,0,0.18);
}
.nature-scene i:nth-child(2) { left: 51%; height: 34%; }
.nature-scene i:nth-child(3) { left: 82%; height: 24%; }
[data-thermal-season="winter"] .nature-scene i::before,
[data-thermal-season="pre-winter"] .nature-scene i::before {
    width: 2px;
    height: 75%;
    border-radius: 999px;
    background: var(--nature-trunk);
    box-shadow: 0.4rem 0.12rem 0 -0.25px var(--nature-trunk), -0.4rem 0.08rem 0 -0.25px var(--nature-trunk);
    transform: rotate(47deg);
}
[data-thermal-season="winter"] .nature-scene i::after,
[data-thermal-season="pre-winter"] .nature-scene i::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 55%;
    width: 2px;
    height: 72%;
    border-radius: 999px;
    background: var(--nature-trunk);
    transform: rotate(-49deg);
}
[data-thermal-season="pre-spring"] .nature-scene i::before {
    width: clamp(1rem, 2.2vw, 1.7rem);
    height: clamp(0.7rem, 1.4vw, 1.05rem);
    background:
        radial-gradient(circle at 24% 34%, #e2ecd6 0 7%, transparent 9%),
        radial-gradient(circle at 72% 61%, #e2ecd6 0 7%, transparent 9%),
        var(--nature-leaf);
}
.nature-scene b { position: absolute; z-index: 4; display: block; pointer-events: none; }
[data-thermal-season="winter"] .nature-scene b {
    inset: 0;
    opacity: 0.74;
    background-image: radial-gradient(circle, #f3fbff 0 1px, transparent 1.6px);
    background-size: 1.4rem 1.7rem;
    transform: rotate(4deg) scale(1.08);
}
[data-thermal-season="pre-spring"] .nature-scene b {
    left: 12%;
    right: 8%;
    bottom: 21%;
    height: 8%;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(120,164,179,0.18), #8fc3d2 45%, rgba(118,163,177,0.2));
    box-shadow: 0 0 0.65rem rgba(144,197,212,0.28);
    transform: rotate(-5deg);
}
[data-thermal-season="spring"] .nature-scene b {
    left: 4%;
    right: 4%;
    bottom: 19%;
    height: 18%;
    opacity: 0.9;
    background-image:
        radial-gradient(circle at 15% 42%, #fff1f6 0 1px, transparent 2px),
        radial-gradient(circle at 48% 66%, #ffd7e8 0 1px, transparent 2px),
        radial-gradient(circle at 82% 31%, #fff1f6 0 1px, transparent 2px);
    background-size: 2rem 1.8rem, 2.4rem 2rem, 2.2rem 1.7rem;
}
[data-thermal-season="summer"] .nature-scene b {
    top: 9%;
    right: 12%;
    width: clamp(1.1rem, 2.4vw, 1.8rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffda62;
    box-shadow: 0 0 1.2rem rgba(255,217,92,0.75);
}
[data-thermal-season="autumn"] .nature-scene b {
    inset: 14% 4% 22%;
    opacity: 0.75;
    background-image: radial-gradient(ellipse, #c4482b 0 2px, transparent 2.6px);
    background-size: 2.5rem 2.8rem;
    transform: rotate(-8deg);
}
[data-thermal-season="pre-winter"] .nature-scene b {
    inset: 20% -12% 17%;
    background: repeating-linear-gradient(180deg, transparent 0 18%, rgba(224,235,232,0.14) 22% 28%, transparent 32% 45%);
    filter: blur(3px);
}
.thermal-now-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}
.thermal-now-panel > div { min-width: 0; padding: 0.75rem; border: 1px solid var(--line-soft); border-left: 2px solid #82d875; border-radius: 6px; background: #07111f; }
.thermal-now-panel span { color: var(--muted); font-size: 0.68rem; font-weight: 850; text-transform: uppercase; }
.thermal-now-panel strong { display: block; margin-top: 0.2rem; color: #fff; font-size: 1.05rem; }
.thermal-now-panel small { display: block; margin-top: 0.16rem; color: #8297ac; font-size: 0.69rem; }
.thermal-disclaimer { margin: 0.65rem 0 0; color: #8196aa; font-size: 0.76rem; }

.moon-visual-card { position: relative; overflow: hidden; background: radial-gradient(circle at 25% 25%, rgba(119, 163, 216, 0.13), transparent 36%), linear-gradient(145deg, #0c1c31, #07101d); }
.moon-visual-card::before { content: ""; position: absolute; inset: 0; opacity: 0.32; background-image: radial-gradient(circle, #dce9ff 0 1px, transparent 1.5px); background-size: 31px 31px; background-position: 8px 13px; pointer-events: none; }
.moon-visual-card > * { position: relative; z-index: 1; }
.moon-visual-card figcaption p { margin: 0.75rem 0 0; padding-top: 0.65rem; border-top: 1px solid rgba(164, 201, 240, 0.23); color: #c1d6eb; font-size: 0.82rem; line-height: 1.5; }

.observing-factors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.65rem;
}
.observing-factors article { min-width: 0; padding: 0.7rem; border: 1px solid var(--line-soft); border-radius: 6px; background: #06111e; }
.observing-factors span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 850; text-transform: uppercase; }
.observing-factors strong { display: block; margin-top: 0.18rem; color: #fff; font-size: 0.98rem; overflow-wrap: anywhere; }
.observing-factors small { display: block; margin-top: 0.16rem; color: #8196aa; font-size: 0.68rem; }

.calendar-icon { color: #d7c5ff; }
.calendar-toolbar {
    display: grid;
    grid-template-columns: auto minmax(13rem, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
    padding: 0.65rem;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: #07111f;
}
.calendar-toolbar button,
.calendar-filters button {
    min-height: 2.45rem;
    border: 1px solid #315473;
    border-radius: 6px;
    background: #071727;
    color: #dfefff;
    font-weight: 800;
    cursor: pointer;
}
.calendar-toolbar > button:first-child,
.calendar-toolbar > button:nth-child(3) { width: 2.7rem; font-size: 1.2rem; }
.calendar-toolbar > div { min-width: 0; text-align: center; }
.calendar-toolbar span { display: block; color: var(--muted); font-size: 0.65rem; font-weight: 850; text-transform: uppercase; }
.calendar-toolbar strong { display: block; color: #fff; font-size: 1.15rem; }
.calendar-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.65rem; }
.calendar-filters button { display: inline-flex; align-items: center; gap: 0.38rem; min-height: 2.25rem; padding: 0.38rem 0.65rem; color: #9bb0c5; font-size: 0.73rem; }
.calendar-filters button i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #7389a1; }
.calendar-filters button[aria-pressed="true"] { border-color: var(--cyan); background: rgba(76, 201, 255, 0.09); color: #e8f8ff; }
.calendar-filters [data-filter="moon"] i { background: #b8dcff; }
.calendar-filters [data-filter="planet"] i { background: #73dfff; }
.calendar-filters [data-filter="meteor"] i { background: #ffb45f; }
.calendar-filters [data-filter="season"] i { background: #82d875; }
.calendar-filters [data-filter="eclipse"] i { background: #e38cff; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 0.75fr); gap: 0.75rem; margin-top: 0.75rem; }
.calendar-board,
.calendar-events-panel,
.calendar-selected-details { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, #0a1829, #06101d); }
.calendar-board { padding: 0.65rem; }
.calendar-weekdays,
.astronomy-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays span { padding: 0.4rem; color: #8ea3b9; font-size: 0.65rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.calendar-day {
    position: relative;
    min-width: 0;
    min-height: 7rem;
    padding: 0.45rem;
    border: 0;
    border-top: 1px solid #1b354e;
    border-left: 1px solid #1b354e;
    background: rgba(4, 13, 24, 0.38);
    color: #eef6ff;
    text-align: left;
    cursor: pointer;
}
.calendar-day:nth-child(7n) { border-right: 1px solid #1b354e; }
.calendar-day:nth-last-child(-n+7) { border-bottom: 1px solid #1b354e; }
.calendar-day.is-outside { color: #536a80; background: rgba(3, 8, 15, 0.3); }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--cyan); }
.calendar-day.is-selected { background: rgba(76, 201, 255, 0.1); box-shadow: inset 0 0 0 2px #fff; }
.calendar-day:hover,
.calendar-day:focus-visible { z-index: 2; background: rgba(76, 201, 255, 0.12); outline: 2px solid var(--cyan); outline-offset: -2px; }
.calendar-day-number { display: block; font-size: 0.82rem; font-weight: 900; }
.calendar-day-events { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; }
.calendar-event-chip { display: block; padding: 0.2rem 0.3rem; overflow: hidden; border-left: 2px solid currentColor; background: rgba(255,255,255,0.04); color: #b8dcff; font-size: 0.58rem; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-chip[data-type="planet"] { color: #73dfff; }
.calendar-event-chip[data-type="meteor"] { color: #ffb45f; }
.calendar-event-chip[data-type="season"] { color: #82d875; }
.calendar-event-chip[data-type="eclipse"] { color: #e6a2ff; }
.calendar-more { display: block; margin-top: 0.2rem; color: #8196aa; font-size: 0.58rem; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.55rem; color: #8296ab; font-size: 0.64rem; }
.calendar-legend span::before { content: ""; display: inline-block; width: 0.48rem; height: 0.48rem; margin-right: 0.3rem; border-radius: 50%; background: #b8dcff; }
.calendar-legend [data-type="planet"]::before { background: #73dfff; }
.calendar-legend [data-type="meteor"]::before { background: #ffb45f; }
.calendar-legend [data-type="season"]::before { background: #82d875; }
.calendar-legend [data-type="eclipse"]::before { background: #e6a2ff; }
.calendar-events-panel { padding: 0.8rem; }
.calendar-events-panel h3 { margin: 0; color: #dcecff; font-size: 0.82rem; text-transform: uppercase; }
.calendar-events-list { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.65rem; }
.calendar-event-card { width: 100%; padding: 0.6rem; border: 1px solid var(--line-soft); border-left: 3px solid #b8dcff; border-radius: 5px; background: #06111e; color: inherit; text-align: left; cursor: pointer; }
.calendar-event-card[data-type="planet"] { border-left-color: #73dfff; }
.calendar-event-card[data-type="meteor"] { border-left-color: #ffb45f; }
.calendar-event-card[data-type="season"] { border-left-color: #82d875; }
.calendar-event-card[data-type="eclipse"] { border-left-color: #e6a2ff; }
.calendar-event-card span,
.calendar-event-card strong,
.calendar-event-card small { display: block; }
.calendar-event-card span { color: #8da4bb; font-size: 0.62rem; font-weight: 850; text-transform: uppercase; }
.calendar-event-card strong { margin-top: 0.12rem; color: #fff; font-size: 0.82rem; }
.calendar-event-card small { margin-top: 0.12rem; color: #8095aa; font-size: 0.66rem; }
.calendar-events-empty { margin: 0; padding: 1rem 0.5rem; color: #8196aa; font-size: 0.78rem; text-align: center; }
.calendar-selected-details { margin-top: 0.75rem; padding: 0.85rem; }
.calendar-selected-details > div:first-child span { display: block; color: #8ca2b9; font-size: 0.65rem; font-weight: 850; text-transform: uppercase; }
.calendar-selected-details > div:first-child strong { display: block; margin-top: 0.12rem; color: #fff; font-size: 1.1rem; }
.calendar-selected-details > p { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.84rem; }
.calendar-planet-visibility { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.7rem; }
.calendar-planet-visibility article { min-width: 0; padding: 0.55rem; border: 1px solid var(--line-soft); border-radius: 5px; background: #06111e; }
.calendar-planet-visibility span,
.calendar-planet-visibility strong,
.calendar-planet-visibility small { display: block; }
.calendar-planet-visibility span { color: #82a2bd; font-size: 0.62rem; font-weight: 850; text-transform: uppercase; }
.calendar-planet-visibility strong { margin-top: 0.12rem; color: #fff; font-size: 0.8rem; }
.calendar-planet-visibility small { margin-top: 0.1rem; color: #7e93a8; font-size: 0.64rem; }
.calendar-method-note { margin: 0.65rem 0 0; color: #7e93a8; font-size: 0.74rem; }

@media (max-width: 1180px) {
    .thermal-seasons-wheel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .thermal-seasons-wheel article { min-height: 14rem; border-bottom: 1px solid rgba(213, 235, 246, 0.13); }
    .calendar-layout { grid-template-columns: 1fr; }
    .calendar-events-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .sky-story-grid { grid-template-columns: 1fr; }
    .thermal-intro { grid-template-columns: 1fr; }
    .thermal-intro strong { text-align: left; }
    .thermal-now-panel,
    .observing-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-planet-visibility { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calendar-day { min-height: 5.7rem; }
    .calendar-event-chip { max-width: 100%; }
}

@media (max-width: 640px) {
    .sky-observatory { padding: 0.65rem; }
    .sky-observatory-heading { align-items: flex-start; flex-direction: column; }
    .sky-live-chip { max-width: 100%; white-space: normal; }
    .sky-visual { min-height: 19rem; }
    .sky-time-control { grid-template-columns: auto minmax(0, 1fr); }
    .sky-time-control input { grid-column: 1 / -1; }
    .astronomical-seasons-landscape { height: 7.8rem; }
    #astronomical-season-now b { display: none; }
    .season-events { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
    .season-events div { position: static; width: auto; min-height: 0; transform: none; }
    .thermal-seasons-wheel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thermal-seasons-wheel article { min-height: 13rem; }
    .thermal-now-panel,
    .observing-factors { grid-template-columns: 1fr; }
    .calendar-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; }
    .calendar-toolbar #calendar-current { grid-column: 1 / -1; }
    .calendar-filters { display: grid; grid-template-columns: 1fr 1fr; }
    .calendar-day { min-height: 4.5rem; padding: 0.28rem; }
    .calendar-day-events { flex-direction: row; flex-wrap: wrap; gap: 0.18rem; }
    .calendar-event-chip { width: 0.5rem; height: 0.5rem; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: currentColor; color: #b8dcff; text-indent: -999px; }
    .calendar-more { display: none; }
    .calendar-weekdays span { padding: 0.35rem 0.1rem; font-size: 0.58rem; }
    .calendar-events-list { grid-template-columns: 1fr; }
    .calendar-planet-visibility { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
    .thermal-seasons-wheel { grid-template-columns: 1fr; }
    .thermal-seasons-wheel article { min-height: 11rem; }
    .calendar-filters { grid-template-columns: 1fr; }
    .calendar-planet-visibility { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .sky-visual,
    .sky-body,
    .sky-stars,
    .sky-cloud-veil,
    .thermal-seasons-wheel article {
        transition: none !important;
        animation: none !important;
    }
}

/* FINAL CASCADE: NATURAL LANDSCAPES + PHYSICALLY TIMED ECLIPSES */
.sky-visual {
    --sky-moon-render-x: var(--sky-moon-x);
    --sky-moon-render-y: var(--sky-moon-y);
    --solar-eclipse-strength: 0;
    --solar-eclipse-veil-opacity: 0;
    --solar-eclipse-corona-opacity: 0;
    --solar-eclipse-landscape-brightness: 1;
    --solar-eclipse-landscape-saturation: 1;
    --lunar-eclipse-strength: 0;
    --lunar-eclipse-sepia: 0;
    --lunar-eclipse-brightness: 1;
    --lunar-eclipse-saturation: 1;
}
.sky-body { width: clamp(0.98rem, 1.6vw, 1.55rem); height: clamp(0.98rem, 1.6vw, 1.55rem); }
.sky-body-sun { box-shadow: 0 0 9px #ffe17e, 0 0 24px rgba(255, 189, 65, 0.76), 0 0 46px rgba(255, 159, 57, 0.26); }
.sky-body-sun > i {
    position: absolute;
    inset: -48%;
    border: 1px solid rgba(255, 246, 214, 0.9);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 0.7rem rgba(255,255,244,0.95), 0 0 1.8rem rgba(255,231,164,0.65);
    transition: opacity 220ms ease;
}
.sky-body-moon { left: var(--sky-moon-render-x); top: var(--sky-moon-render-y); }
.sky-separation-guide {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.sky-separation-guide[hidden] { display: none; }
.sky-separation-guide line { stroke: rgba(224, 239, 249, 0.58); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.sky-separation-guide circle { fill: #dceaff; stroke: rgba(4, 12, 22, 0.9); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sky-eclipse-veil {
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: var(--solar-eclipse-veil-opacity);
    background:
        radial-gradient(circle at var(--sky-sun-x) var(--sky-sun-y), transparent 0 4%, rgba(7, 12, 24, 0.2) 16%, rgba(2, 6, 14, 0.88) 78%),
        linear-gradient(rgba(4, 8, 17, 0.72), rgba(6, 11, 20, 0.82));
    pointer-events: none;
    transition: opacity 240ms linear;
}
.sky-eclipse-chip {
    position: absolute;
    z-index: 15;
    left: 0.75rem;
    top: 0.72rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.42rem 0.62rem;
    border: 1px solid rgba(245, 219, 150, 0.72);
    border-radius: 999px;
    background: rgba(3, 8, 17, 0.82);
    color: #fff2c9;
    box-shadow: 0 0 1.3rem rgba(231, 184, 88, 0.2);
    font-size: clamp(0.58rem, 1.3vw, 0.72rem);
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.sky-eclipse-chip[hidden] { display: none; }
.sky-visual[data-solar-eclipse="partial"] .sky-body-sun > i,
.sky-visual[data-solar-eclipse="total"] .sky-body-sun > i { opacity: var(--solar-eclipse-corona-opacity); }
.sky-visual[data-solar-eclipse="partial"] .sky-body-moon,
.sky-visual[data-solar-eclipse="total"] .sky-body-moon {
    z-index: 8;
    background: radial-gradient(circle at 36% 34%, #29303a, #080b10 64%, #010204 100%);
    box-shadow: 0 0 0 1px rgba(255,244,205,0.34), 0 0 1rem rgba(255,227,159,0.4);
}
.sky-visual[data-solar-eclipse="total"] .sky-body-sun { box-shadow: 0 0 0.8rem #fffef0, 0 0 2rem rgba(255,245,202,0.98), 0 0 4rem rgba(204,218,255,0.62); }
.sky-visual[data-lunar-eclipse="penumbral"] .sky-body-moon { filter: sepia(var(--lunar-eclipse-sepia)) brightness(var(--lunar-eclipse-brightness)); }
.sky-visual[data-lunar-eclipse="partial"] .sky-body-moon,
.sky-visual[data-lunar-eclipse="total"] .sky-body-moon {
    background:
        radial-gradient(circle at 34% 30%, rgba(255,207,151,0.55), transparent 16%),
        radial-gradient(circle at 60% 65%, rgba(74,20,13,0.44), transparent 38%),
        linear-gradient(145deg, #b45a35, #6b2319 68%, #210b0b);
    box-shadow: 0 0 0 1px rgba(242,151,103,0.42), 0 0 1.4rem rgba(206,77,44,0.46);
    filter: brightness(var(--lunar-eclipse-brightness)) saturate(var(--lunar-eclipse-saturation));
}
.sky-visual[data-lunar-eclipse="total"] .sky-body-moon { box-shadow: 0 0 0 1px rgba(255,171,119,0.48), 0 0 1.8rem rgba(210,73,39,0.58), 0 0 3.2rem rgba(116,33,25,0.38); }
.sky-landscape-art {
    position: absolute;
    z-index: 10;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease, filter 600ms ease;
}
.sky-visual[data-art-ready="true"] .sky-landscape-art { opacity: 1; }
.sky-visual[data-art-ready="true"] .sky-horizon,
.sky-visual[data-art-ready="true"] .sky-meadow,
.sky-visual[data-art-ready="true"] .sky-orchard { opacity: 0; }
.sky-visual[data-light="golden"] .sky-landscape-art { filter: brightness(0.88) saturate(0.92) sepia(0.08); }
.sky-visual[data-light="civil"] .sky-landscape-art { filter: brightness(0.68) saturate(0.78) hue-rotate(-4deg); }
.sky-visual[data-light="nautical"] .sky-landscape-art { filter: brightness(0.48) saturate(0.68) hue-rotate(5deg); }
.sky-visual[data-light="astronomical"] .sky-landscape-art,
.sky-visual[data-light="night"] .sky-landscape-art { filter: brightness(0.30) saturate(0.56) hue-rotate(8deg); }
.sky-visual[data-solar-eclipse="partial"] .sky-landscape-art,
.sky-visual[data-solar-eclipse="total"] .sky-landscape-art { filter: brightness(var(--solar-eclipse-landscape-brightness)) saturate(var(--solar-eclipse-landscape-saturation)); }
.astro-landscape-part.winter,
.thermal-seasons-wheel article[data-thermal-season="winter"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-winter-v20260814c-new-panorama.webp'); }
.thermal-seasons-wheel article[data-thermal-season="pre-spring"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-pre-spring-v20260814c-new-panorama.webp'); }
.astro-landscape-part.spring,
.thermal-seasons-wheel article[data-thermal-season="spring"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-spring-v20260814c-new-panorama.webp'); }
.astro-landscape-part.summer,
.thermal-seasons-wheel article[data-thermal-season="summer"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-summer-v20260814c-new-panorama.webp'); }
.astro-landscape-part.autumn,
.thermal-seasons-wheel article[data-thermal-season="autumn"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-autumn-v20260814c-new-panorama.webp'); }
.thermal-seasons-wheel article[data-thermal-season="pre-winter"] { --season-art: url('/assets/img/astronomia/michalczowa/michalczowa-pre-winter-v20260814c-new-panorama.webp'); }
.astro-landscape-part::after {
    inset: 0;
    bottom: 0;
    width: auto;
    height: auto;
    opacity: 0.96;
    background: var(--season-art) center bottom / cover no-repeat;
    filter: saturate(0.96) contrast(1.03);
}
.astro-nature-scene { opacity: 0; }
.thermal-seasons-wheel article::after {
    inset: 0;
    opacity: 0.95;
    background: var(--season-art) center bottom / cover no-repeat;
    filter: saturate(0.94) contrast(1.03);
}

/* Display the complete vertical panorama in every thermal-season card.  The
   approved assets place the terrain edge around mid-height, producing a clear
   50/50 sky-to-landscape composition instead of a thin strip at the bottom. */
.thermal-seasons-wheel article::after {
    background-image: var(--season-art);
    background-position: center bottom;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.thermal-seasons-wheel .nature-scene { opacity: 0; }
.thermal-seasons-wheel article > span,
.thermal-seasons-wheel article > strong,
.thermal-seasons-wheel article > small { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.92); }
@media (max-width: 640px) {
    .sky-body { width: 0.98rem; height: 0.98rem; }
    .sky-eclipse-chip { top: 0.5rem; left: 0.5rem; max-width: calc(100% - 1rem); }
    .astro-landscape-part::after,
    .thermal-seasons-wheel article::after { background-size: auto 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sky-landscape-art,
    .sky-eclipse-veil,
    .sky-body-sun > i { transition: none !important; }
}