@layer foundation-layout, foundation-weather, foundation-page, foundation-design, foundation-default, components-default, components-design, components-page, components-weather, components-layout;
@layer foundation-default{.diagram-scroll-viewport{display: contents}
body.page-phases #phaseOrderDayNightPhases .diagram-scroll-viewport:has(.daylight-phase-block), body.page-phases #seasonalSunPositionClockIcon > .diagram-scroll-viewport, body.page-phases #seasonalSunDayNightCard .diagram-scroll-viewport:has(#seasonalDayLengthGraphSection), body.page-phases #seasonalSunriseSunsetPositionChart .diagram-scroll-viewport:has(.seasonal-horizon-graph){box-sizing: border-box;display: block;width: 100%;min-width: 0;max-width: 100%;margin-inline: auto;padding: 0 0 10px;overflow-x: auto;overflow-y: hidden;overscroll-behavior-inline: contain;scrollbar-width: thin;scrollbar-color: var(--ui-accent) var(--ui-raised);touch-action: pan-x pan-y;-webkit-overflow-scrolling: touch}
body.page-phases #phaseOrderDayNightPhases .diagram-scroll-canvas, body.page-phases #seasonalSunPositionClockIcon .diagram-scroll-canvas{margin-inline: auto}
.diagram-scroll-actions{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 10px;margin: 10px auto;color: var(--ui-muted);font-size: .78rem}
.diagram-scroll-actions[hidden], .diagram-scroll-actions button[hidden]{display: none}
.diagram-text-alternative{min-width: 0;max-width: 100%}
.diagram-text-alternative > summary{cursor: pointer;padding: 7px 10px;border: 1px solid var(--ui-border);border-radius: 8px;color: var(--ui-muted)}
.diagram-text-alternative[open]{flex-basis: 100%}
.diagram-text-alternative > p{max-width: 70ch;margin: 10px auto;color: var(--ui-text);font: .82rem/1.6 var(--ui-font);overflow-wrap: anywhere}
.diagram-text-alternative > summary:focus-visible{outline: 2px solid var(--ui-accent);outline-offset: 3px}
body.page-phases #moonCycleCard, body.page-phases #moonCycleCard .diagram-scroll-viewport, body.page-phases #moonCycleCard .moon-year-cycle-table-wrap{overflow-anchor: none}
@media (max-width: 560px){.diagram-scroll-viewport{display: block;width: 100%;max-width: 100%;margin-inline: auto;padding: 0 0 10px;overflow-x: auto;overflow-y: hidden;overscroll-behavior-inline: contain;scroll-behavior: smooth;scrollbar-color: color-mix(in srgb, var(--ui-accent, #83c5f4) 72%, #5d7186 28%) color-mix(in srgb, var(--ui-raised, #1e2d41) 88%, transparent);scrollbar-width: thin;touch-action: pan-x pan-y;-webkit-overflow-scrolling: touch}
.diagram-scroll-viewport::-webkit-scrollbar{height: 8px}
.diagram-scroll-viewport::-webkit-scrollbar-track{border-radius: 999px;background: color-mix(in srgb, var(--ui-raised, #1e2d41) 88%, transparent)}
.diagram-scroll-viewport::-webkit-scrollbar-thumb{border: 2px solid color-mix(in srgb, var(--ui-raised, #1e2d41) 88%, transparent);border-radius: 999px;background: color-mix(in srgb, var(--ui-accent, #83c5f4) 72%, #5d7186 28%)}
.diagram-scroll-viewport:focus-visible{border-radius: 10px;outline: 2px solid var(--ui-accent, #83c5f4);outline-offset: 3px}
.diagram-scroll-canvas{box-sizing: border-box;margin-inline: auto;flex: 0 0 auto}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.calendar-circle-stage{width: 460px;min-width: 460px;max-width: 460px;min-height: 430px}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.natural-calendar-circle-shell{width: 500px;min-width: 500px;max-width: 500px;min-height: 500px;padding-inline: 30px}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.natural-calendar-circle-shell .natural-calendar-circle{--natural-circle-size: 430px;--natural-circle-label-radius: calc(var(--natural-circle-size) * .405)}
body.page-calendars .diagram-scroll-canvas.natural-calendar-circle-shell .natural-circle-label{width: 82px}
body.page-calendars .diagram-scroll-canvas.natural-thirteen-circle-shell .natural-circle-label{width: 102px}
body.page-calendars .diagram-scroll-canvas.natural-calendar-circle-shell .natural-circle-label > b{padding: 4px 6px;font-size: .76rem}
body.page-calendars .diagram-scroll-canvas.natural-calendar-circle-shell :is( .generic-lunar-boundary-date, .lunar-year-boundary-date ){width: 64px}
body.page-calendars .diagram-scroll-canvas.natural-calendar-circle-shell :is( .generic-lunar-boundary-date, .lunar-year-boundary-date, .thirteen-boundary-date ) > b{padding-inline: 5px;font-size: .67rem}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.natural-thirteen-circle-shell{width: 570px;min-width: 570px;max-width: 570px;min-height: 620px}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.natural-thirteen-circle-shell #thirteenCircularSlider{--natural-circle-size: 500px;--natural-circle-label-radius: calc(var(--natural-circle-size) * .39)}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.zodiac-circle-panel{width: 580px;min-width: 580px;max-width: 580px;min-height: 660px}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.zodiac-circle-panel .zodiac-wheel{--zodiac-wheel-size: 440px;left: auto;width: var(--zodiac-wheel-size);height: var(--zodiac-wheel-size)}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.moon-cycle-orbit-stage{width: 540px;min-width: 540px;max-width: 540px}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.moon-phase-circle-stage{width: 390px;min-width: 390px;max-width: 390px}
body:is(.page-phases, .page-calendars) .diagram-scroll-canvas.hemisphere-season-wheel{width: 460px;min-width: 460px;max-width: 460px}
body.page-phases .diagram-scroll-canvas.meso-dual-ring{width: 520px;min-width: 520px;max-width: 520px}}}
@layer components-default{body.page-phases #seasonalSunPositionClockIcon > .diagram-scroll-viewport{/**/ padding: 24px 36px 28px}
@media (max-width: 760px){html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-stage.moon-cycle-orbit-stage{width: 460px;min-width: 460px;max-width: 460px;height: 460px;min-height: 460px;max-height: 460px;aspect-ratio: 1 / 1;flex: 0 0 460px}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-stage.moon-cycle-orbit-stage > .moon-cycle-circle-svg.moon-cycle-circle-svg{inset: 0;width: 100%;height: 100%;max-width: none}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-label.moon-cycle-orbit-label{width: 122px;font-size: .91rem}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-label.moon-cycle-orbit-label b{font-size: .91rem}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-label.moon-cycle-orbit-label small{font-size: .78rem}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-icon.moon-cycle-orbit-icon{width: 42px;height: 42px;min-width: 42px}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-current-icon.moon-cycle-current-icon{width: 48px;height: 48px;min-width: 48px}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-center-copy.moon-cycle-center-copy{width: 150px;padding: 15px 14px}}
@media (max-width: 560px){html body.page-phases.page-phases #moonCycleCard:is(*,#_) .diagram-scroll-viewport:has(.moon-cycle-orbit-stage){box-sizing: border-box;padding-block: 44px}
body.page-phases{--natural-shared-circle-size: 460px}
body.page-phases #lunarMonthCard .moon-current-phase-circle{width: 100%;min-width: 0;max-width: 100%;height: auto}
html body.page-phases.page-phases.page-phases.page-phases #lunarMonthCard:is(*,#_#_#_) .moon-phase-circle-stage.moon-phase-circle-stage.diagram-scroll-canvas{width: 460px;min-width: 460px;max-width: 460px;height: 460px;min-height: 460px;max-height: 460px;aspect-ratio: 1 / 1;flex: 0 0 460px}
html body.page-phases.page-phases.page-phases.page-phases #lunarMonthCard:is(*,#_#_#_) .moon-phase-circle-stage.moon-phase-circle-stage > .moon-phase-circle-svg.moon-phase-circle-svg{inset: 0;width: 100%;height: 100%;max-width: none}
html body.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases #lunarMonthCard:is(*,#_#_#_) .moon-phase-circle-center.moon-phase-circle-center{gap: 6px;width: 120px;min-height: 120px;padding: 16px 12px}
html body.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases #lunarMonthCard:is(*,#_#_#_) .moon-phase-circle-center.moon-phase-circle-center b{max-width: 94px;font-size: .88rem}
html body.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases.page-phases #lunarMonthCard:is(*,#_#_#_) .moon-phase-circle-center.moon-phase-circle-center small{font-size: .8rem}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-circle-slider.moon-cycle-circle-slider{box-sizing: border-box;width: 100%;min-width: 0;max-width: 100%;height: auto}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-stage.moon-cycle-orbit-stage.diagram-scroll-canvas{width: 460px;min-width: 460px;max-width: 460px;height: 460px;min-height: 460px;max-height: 460px;aspect-ratio: 1 / 1;flex: 0 0 460px}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-stage.moon-cycle-orbit-stage > .moon-cycle-circle-svg.moon-cycle-circle-svg{inset: 0;width: 100%;height: 100%;max-width: none}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-label.moon-cycle-orbit-label{width: 122px;font-size: .91rem}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-label.moon-cycle-orbit-label b{font-size: .91rem}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-label.moon-cycle-orbit-label small{font-size: .78rem}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-orbit-icon.moon-cycle-orbit-icon{width: 42px;height: 42px;min-width: 42px}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-current-icon.moon-cycle-current-icon{width: 48px;height: 48px;min-width: 48px}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-center-copy.moon-cycle-center-copy{width: 150px;padding: 15px 14px}
html body.page-phases.page-phases.page-phases.page-phases #moonCycleCard:is(*,#_#_#_) .moon-cycle-circle-slider.moon-cycle-circle-slider .moon-circle-footer.moon-circle-footer{box-sizing: border-box;width: 100%;max-width: 100%;gap: 8px;padding-inline: 4px;font-size: .78rem}
body.page-phases .diagram-scroll-canvas.cycle-slider-label-container, body.page-phases .diagram-scroll-canvas.day-night-phases-scale-mount{width: 520px;min-width: 520px;max-width: 520px}
body.page-phases .diagram-scroll-canvas.yearly-sun-side-merged-graph{width: 720px;min-width: 720px;max-width: 720px;min-height: 560px}
body.page-phases .diagram-scroll-canvas.seasonal-day-length-graph-card{width: 900px;min-width: 900px;max-width: 900px;min-height: 320px}
body.page-phases .diagram-scroll-canvas.yearly-sun-side-merged-graph .yearly-sun-side-view-graph{min-height: 560px}
body.page-phases .diagram-scroll-canvas.seasonal-day-length-graph-card .seasonal-day-length-graph{min-height: 320px}
body.page-phases .diagram-scroll-canvas.natural-week-circle-shell .week-wheel{--week-wheel-size: 470px}
body.page-phases .diagram-scroll-canvas.cycle-slider-label-container :is( .period-circle-scale, .sun-cycle-scale, .moon-cycle-scale, .day-mini-scale ), body.page-phases .diagram-scroll-canvas.day-night-phases-scale-mount :is( .day-night-circle-stage, .day-night-phase-circular-scale ){max-width: none}
body.page-calendars #egyptianCalendarCard .diagram-scroll-canvas.egyptian-calendar-wheel{width: 720px;min-width: 720px;max-width: 720px;height: 720px;min-height: 720px;max-height: 720px;flex: 0 0 720px}
body.page-calendars .diagram-scroll-canvas.meso-dual-ring{width: 720px;min-width: 720px;max-width: 720px;height: 720px;min-height: 720px;max-height: 720px;flex: 0 0 720px}}}