/* 十二个锚点每隔30度；文字中心半径38%，圆点与圆环半径49%。 */
.calendar-visual { position: absolute; top: 5%; right: 5%; z-index: 1; width: clamp(400px, 43vw, 590px); }
.season-wheel { --label-radius: 38%; --marker-radius: 49%; --wheel-color: #456582; position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; container-type: inline-size; border-radius: 50%; background: rgba(251, 253, 255, .42); }
.wheel-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--wheel-color); stroke-width: .16; }
/* 冷色沿用细外环、48根短刻度和虚线内环；所有装饰共享锚点圆心。 */
.wheel-marker-ring { stroke-opacity: .22; }
.wheel-cool-ticks { stroke: #205b9d; stroke-opacity: .55; stroke-width: .1; }
.wheel-cool-inner { stroke: #205b9d; stroke-opacity: .22; stroke-dasharray: .5 .45; }
.wheel-warm-rings { display: none; }
:root[data-theme="cool"] .season-wheel { background: transparent; }
:root[data-theme="cool"] .wheel-marker-ring { stroke: rgba(34, 82, 137, .12); stroke-opacity: 1; stroke-width: 1px; vector-effect: non-scaling-stroke; }
:root[data-theme="cool"] .wheel-cool-inner { stroke: rgba(32, 91, 157, .22); stroke-opacity: 1; stroke-width: 1px; stroke-dasharray: 3px 3px; vector-effect: non-scaling-stroke; }
:root[data-theme="cool"] .wheel-cool-ticks { display: none; }
:root[data-theme="cool"] .season-wheel::before { position: absolute; inset: 1%; border-radius: 50%; background: repeating-conic-gradient(from -1deg, rgba(32, 91, 157, .55) 0deg .2deg, transparent .2deg 7.5deg); mask: radial-gradient(circle, transparent 69.5%, #000 70% 71%, transparent 71.5%); content: ""; }
/* 暖色按原稿比例恢复红蓝虚实同心环，四方以细径向线强调，不放大主标记。 */
:root[data-theme="warm"] .wheel-marker-ring { stroke: #ff7968; stroke-opacity: .26; stroke-dasharray: .7 .35 .12 .35; }
:root[data-theme="warm"] .wheel-cool-rings { display: none; }
:root[data-theme="warm"] .wheel-warm-rings { display: inline; }
.wheel-warm-red { stroke: #ff7867; stroke-opacity: .55; }
.wheel-warm-fine { stroke-width: .1; stroke-opacity: .38; }
.wheel-warm-blue { stroke: #397eab; stroke-opacity: .42; stroke-width: .12; }
.wheel-warm-inner { stroke-dasharray: .85 .4 .12 .4; stroke-opacity: .3; }
.wheel-warm-ticks { stroke-width: .13; stroke-dasharray: .4 1.15; stroke-linecap: round; }
.wheel-warm-dots { stroke: none; fill: currentColor; fill-opacity: .65; }
.wheel-warm-red-tick { color: #ff7867; stroke: #ff7867; }
.wheel-warm-blue-tick { color: #397eab; stroke: #397eab; }
.wheel-warm-cardinal { stroke: #ff7867; stroke-opacity: .6; stroke-width: .15; }
.wheel-anchor { display: contents; }
.wheel-label, .wheel-marker { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
/* 固定框允许三行长词；框的中心与字体均不随语言或主题变化。 */
.wheel-label { left: calc(50% + sin(var(--angle)) * var(--label-radius)); top: calc(50% - cos(var(--angle)) * var(--label-radius)); display: grid; place-items: center; width: 19%; height: 14%; color: var(--wheel-color); font: 400 clamp(10px, 2.8cqi, 15px)/1.15 var(--font-family-base); text-align: center; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
.wheel-marker { left: calc(50% + sin(var(--angle)) * var(--marker-radius)); top: calc(50% - cos(var(--angle)) * var(--marker-radius)); width: 4px; height: 4px; border-radius: 50%; background: var(--wheel-color); }
.pillar-table { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 44%; padding: 14px 0; transform: translate(-50%, -50%); border: 1px solid rgba(45, 86, 128, .23); background: rgba(251, 253, 255, .75); box-shadow: 0 9px 30px rgba(39, 73, 109, .07); text-align: center; }
.pillar-column { display: grid; grid-template-rows: minmax(28px, auto) auto auto minmax(28px, auto); align-items: center; justify-items: center; gap: 5px; min-width: 0; padding: 0 3px; border-right: 1px solid rgba(45, 86, 128, .15); }
.pillar-column:last-child { border: 0; }
.pillar-column small { color: #576b80; font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.pillar-column b { color: var(--home-ink); font-family: var(--font-family-display); font-size: clamp(27px, 3vw, 44px); font-weight: 500; line-height: 1.18; }
.pillar-column:nth-child(2) b:first-of-type, .pillar-column:nth-child(3) b:last-of-type { color: #d74e46; }
.pillar-column em { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; color: #667b8d; font-size: 9px; line-height: 1.3; font-style: normal; overflow-wrap: anywhere; }
.pillar-column em span { max-width: 100%; }
.wheel-center-copy { display: none; }
.visual-side-note { position: relative; width: 80%; margin: 12px auto 0; color: #435b72; font: 13px/1.6 var(--font-family-display); text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
/* 舞台保留原暖色山水；图盘只取原图中心半径200px的风景，不含烘焙圈点。 */
:root[data-theme="warm"] .home-stage { background-size: 210% auto; background-position: left bottom; }
:root[data-theme="warm"] .season-wheel { --wheel-color: #b95145; background: rgba(255, 250, 243, .6); }
:root[data-theme="warm"] .season-wheel::before { position: absolute; inset: 16%; z-index: -1; border-radius: 50%; background: url("/static/img/homepage-a-landscape.png?v=20260929-1") 78.609% 33.173% / 384% 256% no-repeat; mask: radial-gradient(circle closest-side, #000 80%, transparent 100%); content: ""; }
:root[data-theme="warm"] .pillar-table { display: none; }
:root[data-theme="warm"] .wheel-center-copy { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; gap: 7px; width: 46%; transform: translate(-50%, -50%); color: #244c70; text-align: center; line-height: 1.5; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 1px 8px rgba(255, 255, 255, .9); }
:root[data-theme="warm"] .wheel-center-copy strong { font-family: var(--font-family-display); font-size: clamp(15px, 1.5vw, 21px); font-weight: 600; }
:root[data-theme="warm"] .wheel-center-copy span { font-size: 12px; }
:root[data-theme="warm"] .wheel-center-copy small { color: #56748b; font-size: 10px; }
:root[data-theme="warm"] .visual-side-note { color: #a3514a; }
@media (min-width: 701px) and (max-width: 1000px) {
    .calendar-visual { top: 2%; right: 2%; width: 48vw; }
}
@media (max-width: 700px) {
    .calendar-visual { position: relative; inset: auto; width: min(86vw, 410px); max-width: 100%; margin: 0 auto; flex: none; }
    .pillar-table { padding: 7px 0; }
    .pillar-column { grid-template-rows: minmax(26px, auto) auto auto minmax(26px, auto); gap: 3px; }
    .pillar-column b { font-size: clamp(22px, 7vw, 31px); }
    .pillar-column small, .pillar-column em { font-size: 8px; }
    .visual-side-note { font-size: 11px; }
    :root[data-theme="warm"] .home-stage { background-size: auto 100%; }
    :root[data-theme="warm"] .wheel-center-copy { gap: 4px; }
    :root[data-theme="warm"] .wheel-center-copy span { font-size: 10px; }
    :root[data-theme="warm"] .wheel-center-copy small { font-size: 9px; }
}