@layer foundation-layout, foundation-weather, foundation-page, foundation-design, foundation-default, components-default, components-design, components-page, components-weather, components-layout;
@layer foundation-default{html body.page-calendars :is(#phaseOrderMayaCalendar, #phaseOrderAztecCalendar) .meso-calendar-card{--meso-accent: #69d9c8;--meso-accent-soft: rgba(105, 217, 200, .22);--meso-outer: #dfb963;--meso-inner: #53d6c4;--meso-panel: rgba(11, 31, 39, .72)}
html body.page-calendars #phaseOrderAztecCalendar .meso-calendar-card{--meso-accent: #d2a267;--meso-accent-soft: rgba(210, 162, 103, .22);--meso-outer: #ce765d;--meso-inner: #62c9bd;--meso-panel: rgba(35, 29, 28, .74)}
html body.page-calendars .meso-dual-ring-wrap{display: grid;justify-items: center;gap: 14px;width: 100%;min-width: 0;margin: 2px auto 0}
html body.page-calendars .meso-dual-ring{position: relative;box-sizing: border-box;width: 720px;min-width: 720px;max-width: 720px;height: 720px;flex: 0 0 720px;border-radius: 50%;background: radial-gradient(circle, rgba(6, 23, 24, .97) 0 42%, rgba(13, 42, 40, .92) 43% 55%, rgba(17, 36, 37, .88) 56% 74%, rgba(5, 18, 21, .96) 75% 100%);box-shadow: inset 0 0 0 1px rgba(192, 226, 210, .2), inset 0 0 48px rgba(0, 0, 0, .38), 0 18px 38px rgba(0, 0, 0, .29)}
html body.page-calendars .meso-aztec-calendar .meso-dual-ring{background: radial-gradient(circle, rgba(24, 21, 20, .98) 0 42%, rgba(48, 39, 32, .92) 43% 55%, rgba(31, 44, 43, .89) 56% 74%, rgba(15, 19, 21, .97) 75% 100%)}
html body.page-calendars .meso-ring-svg{display: block;width: 100%;height: 100%;max-width: none;overflow: visible}
html body.page-calendars :is(.meso-ring-track, .meso-ring-progress){fill: none;transform: rotate(-90deg);transform-origin: 130px 130px;vector-effect: non-scaling-stroke}
html body.page-calendars .meso-outer-track{stroke: rgba(209, 180, 110, .2);stroke-width: 36px}
html body.page-calendars .meso-inner-track{stroke: rgba(103, 202, 185, .18);stroke-width: 32px}
html body.page-calendars .meso-outer-progress{stroke: var(--meso-outer);stroke-width: 36px;stroke-linecap: butt;opacity: .7}
html body.page-calendars .meso-inner-progress{stroke: var(--meso-inner);stroke-width: 32px;stroke-linecap: butt;opacity: .68}
html body.page-calendars .meso-ring-border{fill: none;stroke-width: 1.45px;vector-effect: non-scaling-stroke}
html body.page-calendars .meso-outer-border{stroke: color-mix(in srgb, var(--meso-outer) 52%, #d9e9e5)}
html body.page-calendars .meso-inner-border{stroke: color-mix(in srgb, var(--meso-inner) 48%, #d9e9e5)}
html body.page-calendars .meso-ring-tick{stroke: rgba(229, 233, 206, .48);stroke-width: 1.15px;vector-effect: non-scaling-stroke}
html body.page-calendars .meso-inner-tick{stroke: rgba(152, 229, 211, .46)}
html body.page-calendars .meso-ring-tick.is-active{stroke: #fff0b9;stroke-width: 2.8px}
html body.page-calendars :is(.meso-month-labels, .meso-month-glyphs, .meso-day-sign-labels){pointer-events: none}
html body.page-calendars .meso-month-label{fill: #dce9e2;stroke: rgba(5, 18, 21, .92);stroke-width: 1.15px;paint-order: stroke fill;font-family: Inter, ui-sans-serif, system-ui, sans-serif;font-size: 5.55px;font-weight: 720;letter-spacing: -.08px}
html body.page-calendars .meso-month-label.is-active{fill: #fff5c9;stroke: rgba(25, 17, 8, .96);font-weight: 850;filter: drop-shadow(0 0 2px rgba(255, 227, 142, .88))}
html body.page-calendars .meso-month-glyph{fill: color-mix(in srgb, var(--meso-accent) 78%, #fff4bd);stroke: rgba(5, 18, 21, .92);stroke-width: 1px;paint-order: stroke fill;font-family: Georgia, "Segoe UI Symbol", serif;font-size: 6.7px;font-weight: 800}
html body.page-calendars .meso-month-glyph.is-active{fill: #fff1ad}
html body.page-calendars .meso-aztec-calendar .meso-month-glyph{stroke: rgba(23, 16, 13, .94)}
html body.page-calendars .meso-aztec-calendar .meso-month-label{fill: #f3dfc1;stroke: rgba(23, 16, 13, .92)}
html body.page-calendars .meso-aztec-calendar .meso-month-label.is-active{fill: #fff0b6}
html body.page-calendars .meso-day-sign-label{fill: #d8f4eb;stroke: rgba(4, 18, 20, .94);stroke-width: 1.05px;paint-order: stroke fill;font-family: Inter, ui-sans-serif, system-ui, sans-serif;font-size: 4.5px;font-weight: 710;letter-spacing: -.08px}
html body.page-calendars .meso-day-sign-label.is-active{fill: #effff9;stroke: rgba(4, 22, 24, .98);font-weight: 850;filter: drop-shadow(0 0 2px rgba(108, 242, 216, .9))}
html body.page-calendars .meso-aztec-calendar .meso-day-sign-label{fill: #dcf3ec;stroke: rgba(22, 15, 13, .94)}
html body.page-calendars .meso-aztec-calendar .meso-day-sign-label.is-active{fill: #fff2c8}
html body.page-calendars .meso-ring-marker{vector-effect: non-scaling-stroke}
html body.page-calendars .meso-outer-marker{fill: #fff0b5;stroke: color-mix(in srgb, var(--meso-outer) 70%, #201b14);stroke-width: 3px;filter: drop-shadow(0 0 5px rgba(255, 221, 128, .85))}
html body.page-calendars .meso-inner-marker{fill: #d9fff2;stroke: color-mix(in srgb, var(--meso-inner) 66%, #092927);stroke-width: 2.6px;filter: drop-shadow(0 0 5px rgba(100, 237, 211, .88))}
html body.page-calendars .meso-ring-center{position: absolute;inset: 50% auto auto 50%;display: grid;width: 34%;aspect-ratio: 1;place-items: center;align-content: center;gap: 4px;box-sizing: border-box;padding: 9px;transform: translate(-50%, -50%);border: 1px solid color-mix(in srgb, var(--meso-accent) 30%, transparent);border-radius: 50%;background: radial-gradient(circle, rgba(39, 81, 68, .8), rgba(4, 20, 23, .97) 72%);box-shadow: inset 0 0 22px rgba(0, 0, 0, .3), 0 0 0 7px rgba(13, 52, 48, .23);text-align: center}
html body.page-calendars .meso-aztec-calendar .meso-ring-center{background: radial-gradient(circle, rgba(91, 60, 38, .72), rgba(24, 18, 18, .98) 72%);box-shadow: inset 0 0 22px rgba(0, 0, 0, .34), 0 0 0 7px rgba(91, 53, 37, .2)}
html body.page-calendars .meso-ring-center > span{color: #f0cb78;font-family: Georgia, "Times New Roman", serif;font-size: 4.35rem;line-height: .88}
html body.page-calendars .meso-ring-center > b{color: #d7f1e8;font-size: 1rem;line-height: 1.1}
html body.page-calendars .meso-ring-center > small{color: #9fc3ba;font-size: .75rem;line-height: 1.15}
html body.page-calendars .meso-ring-key{display: flex;flex-wrap: wrap;justify-content: center;gap: 9px 18px;color: var(--ui-muted, #b6cbc5);font-size: .85rem}
html body.page-calendars .meso-ring-key > span{display: inline-flex;align-items: center;gap: 7px}
html body.page-calendars .meso-ring-key i{display: inline-block;width: 22px;height: 5px;border-radius: 99px}
html body.page-calendars .meso-outer-key i{background: var(--meso-outer)}
html body.page-calendars .meso-inner-key i{background: var(--meso-inner)}
html body.page-calendars .meso-glyph-band{display: flex;align-items: stretch;justify-content: center;gap: 8px;width: min(100%, 760px);margin: -1px auto 0}
html body.page-calendars .meso-glyph-chip{display: grid;flex: 1 1 0;min-width: 0;min-height: 66px;place-content: center;justify-items: center;gap: 3px;padding: 7px 5px;border: 1px solid rgba(143, 184, 171, .19);border-radius: 9px;background: rgba(4, 22, 24, .46);opacity: .62}
html body.page-calendars .meso-glyph-chip i{color: #b7cbbf;font-family: Georgia, "Times New Roman", serif;font-size: 1.3rem;font-style: normal;line-height: 1}
html body.page-calendars .meso-glyph-chip small{max-width: 100%;color: var(--ui-muted);font-size: .76rem;line-height: 1.3;overflow-wrap: anywhere;white-space: normal;text-align: center}
html body.page-calendars .meso-glyph-chip.is-current{border-color: color-mix(in srgb, var(--meso-accent) 65%, transparent);background: linear-gradient(145deg, var(--meso-accent-soft), rgba(10, 33, 34, .78));box-shadow: 0 0 16px var(--meso-accent-soft);opacity: 1;transform: translateY(-3px)}
html body.page-calendars .meso-glyph-chip.is-current i{color: #ffe5a4}
html body.page-calendars .meso-glyph-chip.is-current small{color: #d4ede5}
@media (max-width: 820px){html body.page-calendars :is( .meso-dual-ring-wrap, #egyptianCalendarCard .egyptian-calendar-wheel-wrap ) > .diagram-scroll-viewport{display: block;box-sizing: border-box;width: 100%;max-width: 100%;margin-inline: auto;padding: 8px 0 13px;overflow-x: auto;overflow-y: hidden;overscroll-behavior-inline: contain;scrollbar-width: auto;scrollbar-color: color-mix(in srgb, var(--ui-accent, #83c5f4) 72%, #5d7186 28%) color-mix(in srgb, var(--ui-raised, #1e2d41) 88%, transparent);touch-action: pan-x pan-y;-webkit-overflow-scrolling: touch}
html body.page-calendars :is( .meso-dual-ring-wrap, #egyptianCalendarCard .egyptian-calendar-wheel-wrap ) > .diagram-scroll-viewport::-webkit-scrollbar{height: 10px}
html body.page-calendars :is( .meso-dual-ring-wrap, #egyptianCalendarCard .egyptian-calendar-wheel-wrap ) > .diagram-scroll-viewport::-webkit-scrollbar-track{border-radius: 999px;background: color-mix(in srgb, var(--ui-raised, #1e2d41) 88%, transparent)}
html body.page-calendars :is( .meso-dual-ring-wrap, #egyptianCalendarCard .egyptian-calendar-wheel-wrap ) > .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%)}
html body.page-calendars .meso-ring-center > span{font-size: 4.35rem}
html body.page-calendars #egyptianCalendarCard .egyptian-center-sun{font-size: 4.7rem}
html body.page-calendars #egyptianCalendarCard .egyptian-wheel-center b{font-size: 1.15rem}
html body.page-calendars #egyptianCalendarCard .egyptian-wheel-center strong{font-size: .95rem}
html body.page-calendars #egyptianCalendarCard .egyptian-wheel-center small{font-size: .75rem}}
@media (max-width: 560px){html body.page-calendars .meso-ring-key{padding-inline: 10px}
html body.page-calendars .meso-glyph-band{flex-wrap: wrap}
html body.page-calendars .meso-glyph-chip{box-sizing: border-box;flex: 0 1 calc((100% - 16px) / 3)}}}