@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(#lunarYearCard, #thirteenCard, #genericLunarCard){overflow: visible}
html body.page-calendars :is(#lunarYearCard, #thirteenCard) > :is(.slider-gap, .progress-track, .segment-labels), html body.page-calendars #zodiacCard > :is(.slider-gap, #zodiacTrack, #zodiacLabels){display: none}
html body.page-calendars #zodiacCard{padding: 22px}
html body.page-calendars .natural-calendar-circle-shell{display: grid;grid-column: 1 / -1;place-items: center;width: 100%;min-height: 480px;margin: 8px auto 16px;padding: 20px;overflow: visible;box-sizing: border-box}
html body.page-calendars .natural-calendar-circle{--natural-circle-size: clamp(350px, 38vw, 430px);--natural-circle-label-radius: calc(var(--natural-circle-size) * .405);--natural-circle-progress: 0deg;--natural-circle-gradient: conic-gradient(from -90deg, #28586d, #3f766f, #30445f, #28586d);position: relative;isolation: isolate;display: block;width: var(--natural-circle-size);height: var(--natural-circle-size);min-height: 0;border: 2px solid rgba(154, 218, 222, .58);border-radius: 50%;background: var(--natural-circle-gradient);box-shadow: 0 0 0 7px rgba(6, 24, 35, .72), 0 20px 38px rgba(0, 0, 0, .34), inset 0 0 34px rgba(0, 0, 0, .3);box-sizing: border-box}
html body.page-calendars #thirteenCircularSlider{--natural-circle-size: clamp(350px, 38vw, 430px);--natural-circle-label-radius: calc(var(--natural-circle-size) * .39);border-color: rgba(118, 170, 169, .64);box-shadow: 0 0 0 7px rgba(13, 30, 44, .78), 0 20px 38px rgba(0, 0, 0, .36), inset 0 0 36px rgba(7, 25, 38, .34)}
html body.page-calendars #thirteenCircularSlider::before{border-color: rgba(106, 157, 158, .46);background: radial-gradient(circle at 38% 30%, rgba(72, 124, 112, .17), transparent 38%), linear-gradient(145deg, #203e50, #101f33);box-shadow: inset 0 0 30px rgba(4, 13, 24, .5)}
html body.page-calendars #thirteenCircularSliderShell{min-height: 500px;padding-top: 48px;padding-bottom: 24px}
html body.page-calendars .natural-calendar-circle::before{content: "";position: absolute;z-index: 1;inset: 25%;border: 1px solid rgba(191, 220, 208, .34);border-radius: 50%;background: radial-gradient(circle at 38% 32%, rgba(76, 116, 110, .2), transparent 35%), linear-gradient(145deg, rgba(16, 42, 46, .98), rgba(7, 23, 36, .99));box-shadow: inset 0 0 30px rgba(0, 0, 0, .38)}
html body.page-calendars .natural-circle-labels{height: 0;overflow: visible}
html body.page-calendars .natural-circle-label{position: absolute;z-index: 4;left: 50%;top: 50%;display: grid;place-items: center;width: 82px;min-height: 36px;transform: translate(-50%, -50%) rotate(var(--circle-label-angle)) translateY(calc(-1 * var(--natural-circle-label-radius))) rotate(calc(-1 * var(--circle-label-angle)));pointer-events: none}
html body.page-calendars #lunarYearCircularSlider .natural-circle-label{--natural-circle-label-radius: calc(var(--natural-circle-size) * .37);width: 92px;min-height: 38px}
html body.page-calendars #lunarYearCircularSliderShell{padding: 50px;min-height: 530px}
html body.page-calendars #lunarYearCircularSlider .lunar-year-month-chinese{display: block;color: #bfe6eb;font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans CJK TC", sans-serif;font-size: 1rem;font-weight: 600;line-height: 1.15;letter-spacing: .06em}
html body.page-calendars #thirteenCircularSlider .natural-circle-label{width: 78px;min-height: 36px}
html body.page-calendars .natural-circle-label > b{display: grid;gap: 2px;place-items: center;min-height: 26px;padding: 4px 6px;border: 1px solid transparent;border-radius: 8px;background: rgba(5, 22, 32, .72);color: #d5f3ed;font-size: clamp(.7rem, 1.02vw, .84rem);font-weight: 650;line-height: 1.05;text-align: center;text-shadow: 0 1px 3px rgba(0, 0, 0, .9);white-space: nowrap;box-sizing: border-box}
html body.page-calendars .natural-circle-label > b > span, html body.page-calendars .natural-circle-label > b > small{display: block;white-space: nowrap}
html body.page-calendars .natural-circle-label > b > small{color: #b7d8dc;font-size: .67rem;font-weight: 450;line-height: 1}
html body.page-calendars .natural-circle-label.is-active > b{border-color: rgba(206, 247, 226, .88);background: linear-gradient(145deg, rgba(69, 151, 127, .98), rgba(25, 101, 105, .98));color: #f4fff9;box-shadow: 0 0 0 3px rgba(91, 188, 162, .18)}
html body.page-calendars #thirteenCircularSlider .natural-circle-label > b{padding: 0;border: 0;border-radius: 0;background: transparent;box-shadow: none;color: #f3f7f8;font-size: .7rem;font-weight: 500}
html body.page-calendars #thirteenCircularSlider .natural-circle-label > b > em{color: #f3f7f8;font-style: normal;font-weight: 550}
html body.page-calendars #thirteenCircularSlider .natural-circle-label > b > small{color: #e1ebee;font-size: .68rem}
html body.page-calendars .natural-circle-center{position: absolute;z-index: 5;left: 50%;top: 50%;display: grid;gap: 7px;place-items: center;width: 38%;min-height: 92px;transform: translate(-50%, -50%);color: #d9f4ec;text-align: center;pointer-events: none}
html body.page-calendars .natural-circle-center > strong{position: relative;z-index: 2;color: #d9f4ec;font: 400 clamp(1.3rem, 2.6vw, 2rem)/1 Georgia, serif}
html body.page-calendars .natural-circle-center > span:not(.natural-circle-center-progress){position: relative;z-index: 2;color: #d8c7aa;font-size: clamp(.82rem, 1.35vw, 1.02rem);line-height: 1.15}
html body.page-calendars .natural-circle-center-progress{--natural-progress-width: 20px;position: absolute;left: 50%;top: 50%;display: block;width: 124%;aspect-ratio: 1;border-radius: 50%;background: conic-gradient(transparent 0 var(--natural-circle-progress), rgba(4, 20, 31, .94) var(--natural-circle-progress) 360deg), linear-gradient(135deg, #3289ff 0%, #58ddff 52%, #5ee0aa 100%);transform: translate(-50%, -50%);overflow: hidden;z-index: 1;-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--natural-progress-width)), #000 calc(100% - var(--natural-progress-width)));mask: radial-gradient(farthest-side, transparent calc(100% - var(--natural-progress-width)), #000 calc(100% - var(--natural-progress-width)))}
html body.page-calendars :is(#genericLunarCircularSlider, #lunarYearCircularSlider) .natural-circle-center{gap: 2px}
html body.page-calendars :is(#genericLunarCircularSlider, #lunarYearCircularSlider) .natural-circle-center > strong{width: max-content;max-width: none;font-size: clamp(1.08rem, 2vw, 1.4rem);white-space: nowrap}
html body.page-calendars :is(#genericLunarCircularSlider, #lunarYearCircularSlider) .natural-circle-center > span:not(.natural-circle-center-progress){width: max-content;max-width: none;font-size: clamp(.78rem, 1.3vw, .9rem);white-space: nowrap}
html body.page-calendars #thirteenCircularSlider .natural-circle-center-progress{--natural-progress-width: 10px;width: calc(var(--natural-circle-size) * .47);height: calc(var(--natural-circle-size) * .47);background: conic-gradient(transparent 0 var(--natural-circle-progress), rgba(11, 30, 44, .96) var(--natural-circle-progress) 360deg), linear-gradient(135deg, #4b817f 0%, #74a49b 52%, #8ca891 100%);filter: none}
html body.page-calendars #thirteenCircularSlider .natural-circle-center > strong{color: #f5f8f9}
html body.page-calendars #thirteenCircularSlider .natural-circle-center > span:not(.natural-circle-center-progress){color: #e3ebed}
html body.page-calendars .natural-circle-center-progress-fill, html body.page-calendars .natural-circle-center-progress-moon{display: none}
html body.page-calendars :is(.generic-lunar-boundary-dates, .lunar-year-boundary-dates, .thirteen-boundary-dates){position: absolute;z-index: 8;inset: 0;pointer-events: none}
html body.page-calendars :is(.generic-lunar-boundary-date, .lunar-year-boundary-date){position: absolute;left: 50%;top: 50%;display: grid;place-items: center;width: 62px;min-height: 20px}
html body.page-calendars .generic-lunar-boundary-date{transform: translate(-50%, -50%) rotate(var(--generic-lunar-date-angle)) translateY(calc(-1 * var(--natural-circle-size) * .49)) rotate(calc(-1 * var(--generic-lunar-date-angle)))}
html body.page-calendars .lunar-year-boundary-date{transform: translate(-50%, -50%) rotate(var(--lunar-year-date-angle)) translateY(calc(-1 * (var(--natural-circle-size) * .5 + 28px))) rotate(calc(-1 * var(--lunar-year-date-angle)))}
@media (max-width: 560px){html body.page-calendars #lunarYearCircularSliderShell.diagram-scroll-canvas{width: 550px;min-width: 550px;max-width: 550px;min-height: 550px;padding: 60px}}
html body.page-calendars :is(.generic-lunar-boundary-date, .lunar-year-boundary-date) > b, html body.page-calendars .thirteen-boundary-date > b{display: inline-flex;align-items: center;justify-content: center;min-height: 20px;padding: 3px 5px;border: 1px solid var(--ui-border);border-radius: 5px;background: var(--ui-raised);color: var(--ui-text);font-size: .66rem;font-weight: 500;line-height: 1;white-space: nowrap}
html body.page-calendars :is(.generic-lunar-boundary-date, .lunar-year-boundary-date).is-year-start > b{border-color: var(--calendar-gold);background: var(--ui-raised);color: var(--calendar-gold)}
html body.page-calendars .thirteen-boundary-date{position: absolute;inset: 0;display: grid;place-items: center}
html body.page-calendars .thirteen-boundary-date > i, html body.page-calendars .thirteen-boundary-date > b{position: absolute;left: 50%;top: 50%}
html body.page-calendars .thirteen-boundary-date > i{width: 7px;height: 7px;border: 1px solid #7ca8a0;border-radius: 50%;background: #9bc1b4;box-shadow: 0 0 0 2px rgba(12, 31, 45, .9);transform: translate(-50%, -50%) rotate(var(--thirteen-date-angle)) translateY(calc(-1 * var(--natural-circle-size) * .492))}
html body.page-calendars .thirteen-boundary-date > b{border-color: #527b83;background: #1a3548;color: #f3f7f8;transform: translate(-50%, -50%) rotate(var(--thirteen-date-angle)) translateY(calc(-1 * var(--natural-circle-size) * .535)) rotate(calc(-1 * var(--thirteen-date-angle)))}
html body.page-calendars .thirteen-boundary-date.is-year-start > b{border-color: #8cae9b;color: #fff}
html body.page-calendars #zodiacCard .zodiac-circle-panel{display: grid;place-items: center;width: 100%;height: auto;aspect-ratio: auto;min-height: 480px;margin: 8px auto 0;border-radius: 0}
html body.page-calendars #zodiacCard .zodiac-wheel{--zodiac-wheel-size: min(86vw, 480px);--zodiac-sign-radius: calc(var(--zodiac-wheel-size) * .385);--zodiac-date-radius: calc(var(--zodiac-wheel-size) * .21);--zodiac-season-radius: calc(var(--zodiac-wheel-size) * .554);position: relative;width: var(--zodiac-wheel-size);height: var(--zodiac-wheel-size);margin: 0;border: 3px solid rgba(115, 216, 233, .9);border-radius: 50%;background: #071827;box-shadow: 0 16px 30px rgba(0, 0, 0, .24);text-align: center;overflow: visible}
html body.page-calendars #zodiacCard .zodiac-inner-progress-fill{stroke: url(#zodiacInnerProgressGradient)}
html body.page-calendars #zodiacCard .zodiac-segment-outlines, html body.page-calendars #zodiacCard .zodiac-inner-progress-ring{position: absolute;inset: 3px;width: calc(100% - 6px);height: calc(100% - 6px);max-width: none;overflow: visible}
html body.page-calendars #zodiacCard .zodiac-wheel-item{position: absolute;left: 50%;top: 50%;display: grid;place-items: center;margin: 0;padding: 0;border: 0;background: transparent;box-shadow: none;text-align: center;z-index: 4}
html body.page-calendars #zodiacCard .zodiac-element-ring, html body.page-calendars #zodiacCard .zodiac-wheel-spoke{display: none}
html body.page-calendars #zodiacCard .zodiac-sign-ring{width: 86px;min-width: 68px;color: var(--ui-text);transform: translate(-50%, -50%) rotate(var(--segment-angle)) translateY(calc(-1 * var(--zodiac-sign-radius))) rotate(calc(-1 * var(--segment-angle)))}
html body.page-calendars #zodiacCard .zodiac-sign-ring b{display: grid;place-items: center;font-size: clamp(.76rem, 1.55vw, .94rem);line-height: 1.05;text-shadow: 0 1px 2px rgba(0, 0, 0, .8)}
html body.page-calendars #zodiacCard .zodiac-date-ring{width: 56px;color: #bcecf5;transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(calc(-1 * var(--zodiac-date-radius))) rotate(calc(var(--i) * -30deg))}
html body.page-calendars #zodiacCard .zodiac-date-ring em{color: #90e8f7;font-size: .82rem;font-style: normal;font-weight: 500;text-shadow: 0 1px 4px rgba(0, 0, 0, .74)}
html body.page-calendars #zodiacCard .zodiac-season-marker{position: absolute;left: 50%;top: 50%;z-index: 9;display: grid;justify-items: center;gap: 2px;min-width: 118px;padding: 5px 9px;border: 1px solid var(--zodiac-season-border, rgba(239, 219, 156, .42));border-radius: 8px;background: var(--zodiac-season-surface, rgba(5, 16, 27, .88));color: #ffe7a6;transform: translate(-50%, -50%) rotate(var(--season-angle)) translateY(calc(-1 * var(--zodiac-season-radius))) rotate(calc(-1 * var(--season-angle)));box-shadow: 0 10px 22px rgba(0, 0, 0, .25), 0 0 12px color-mix(in srgb, var(--zodiac-season-accent, #ffe2a0) 16%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .045);text-align: center}
html body.page-calendars #zodiacCard :is(.zodiac-season-summer, .zodiac-season-winter){--zodiac-season-radius: calc(var(--zodiac-wheel-size) * .646)}
html body.page-calendars #zodiacCard .zodiac-season-marker b{color: var(--zodiac-season-accent, #ffe2a0);font-size: .82rem;font-weight: 600;line-height: 1.05}
html body.page-calendars #zodiacCard .zodiac-season-marker small{color: var(--zodiac-season-detail, #8eeaff);font-size: .68rem;font-weight: 500;line-height: 1}
html body.page-calendars #zodiacCard .zodiac-season-spring{--zodiac-season-accent: #91edb1;--zodiac-season-detail: #baf5ce;--zodiac-season-border: #64c98b;--zodiac-season-surface: rgba(13, 55, 40, .94)}
html body.page-calendars #zodiacCard .zodiac-season-summer{--zodiac-season-accent: #ffe08a;--zodiac-season-detail: #ffedb7;--zodiac-season-border: #d9ad4c;--zodiac-season-surface: rgba(69, 52, 18, .95)}
html body.page-calendars #zodiacCard .zodiac-season-fall{--zodiac-season-accent: #f3ad7c;--zodiac-season-detail: #ffd0ae;--zodiac-season-border: #cf794e;--zodiac-season-surface: rgba(67, 38, 27, .95)}
html body.page-calendars #zodiacCard .zodiac-season-winter{--zodiac-season-accent: #9edcff;--zodiac-season-detail: #c5eaff;--zodiac-season-border: #609ec8;--zodiac-season-surface: rgba(16, 45, 67, .95)}
html body.page-calendars #zodiacCard .zodiac-season-marker.zodiac-season-winter{--zodiac-season-radius: calc(var(--zodiac-wheel-size) * .39);min-width: 0;width: 94px;padding: 0;border: 0;border-radius: 0;background: transparent;box-shadow: none}
html body.page-calendars #zodiacCard .zodiac-season-winter b{font-size: .78rem;line-height: 1.08;text-shadow: 0 1px 4px #071827}
html body.page-calendars #zodiacCard .zodiac-wheel-core{position: absolute;left: 50%;top: 50%;z-index: 2;display: grid;place-content: center;gap: 4px;width: 30%;height: 30%;border: 2px solid rgba(122, 215, 232, .76);border-radius: 50%;background: radial-gradient(circle at 40% 32%, #24566f, #071827 74%);box-shadow: inset 0 0 18px rgba(0, 0, 0, .34);transform: translate(-50%, -50%)}
html body.page-calendars #zodiacCard .zodiac-center-line{display: flex;align-items: baseline;justify-content: center;gap: 4px;color: #c1e9f5;font-size: clamp(.72rem, 1.55vw, .94rem);font-weight: 500;line-height: 1.15;white-space: nowrap}
html body.page-calendars #zodiacCard .zodiac-center-line b{color: #c1e9f5;font-weight: 600}
html body.page-calendars #zodiacCard .zodiac-center-line strong{color: var(--ui-text);font-weight: 700;font-variant-numeric: tabular-nums}
html body.page-calendars #zodiacCard .zodiac-center-sign strong{font-size: clamp(1.2rem, 2.2vw, 1.55rem);font-weight: 650}
html body.page-calendars #zodiacCard .zodiac-center-sign{flex-direction: column;align-items: center;gap: 6px}
html body.page-calendars #zodiacCard .zodiac-center-progress{color: #9fe5e8;font-size: clamp(.84rem, 1.45vw, .98rem);font-weight: 650;font-variant-numeric: tabular-nums}
@media (max-width: 720px){html body.page-calendars #thirteenCircularSliderShell{min-height: 500px;padding-top: 64px;padding-bottom: 24px}
html body.page-calendars .natural-calendar-circle-shell{min-height: 410px;padding: 18px 4px}
html body.page-calendars .natural-calendar-circle, html body.page-calendars #thirteenCircularSlider{--natural-circle-size: 430px;--natural-circle-label-radius: calc(var(--natural-circle-size) * .405)}
html body.page-calendars #thirteenCircularSlider{--natural-circle-size: 430px;--natural-circle-label-radius: calc(var(--natural-circle-size) * .39)}
html body.page-calendars .natural-circle-label, html body.page-calendars #thirteenCircularSlider .natural-circle-label{width: 82px}
html body.page-calendars #thirteenCircularSlider .natural-circle-label{width: 78px}
html body.page-calendars .natural-circle-label > b, html body.page-calendars #thirteenCircularSlider .natural-circle-label > b{padding: 4px 6px;font-size: .76rem}
html body.page-calendars :is(.generic-lunar-boundary-date, .lunar-year-boundary-date){width: 48px}
html body.page-calendars :is(.generic-lunar-boundary-date, .lunar-year-boundary-date) > b, html body.page-calendars .thirteen-boundary-date > b{padding-inline: 3px;font-size: .55rem}
html body.page-calendars #zodiacCard .zodiac-wheel{--zodiac-wheel-size: 440px}
html body.page-calendars #zodiacCard .zodiac-circle-panel{min-height: 660px}
html body.page-calendars #zodiacCard .zodiac-season-marker{min-width: 118px;padding: 5px 9px}
html body.page-calendars #zodiacCard .zodiac-season-marker b{font-size: .82rem}
html body.page-calendars #zodiacCard .zodiac-season-marker small{font-size: .68rem}}}