/* One living tree repeats its seasons; the text shares a single reading edge. */
#cycle{padding-block:clamp(42px,5vw,72px)}
#cycle .season-world{margin-top:0;min-height:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto auto;border-top:0}
#cycle .season-world>.section-heading{grid-column:1;grid-row:1;display:block;align-self:center;margin:0;padding:28px 20px 32px 0;position:relative;z-index:1}
#cycle .season-world .section-heading .heading-aside{margin:28px 0 0;max-width:31em;font-size:var(--reading-size)}
#cycle .season-canvas{grid-column:2;grid-row:1;height:460px;width:100%}
#cycle .season-fallback{width:55%;height:460px;max-height:100%;right:0;top:0}
#cycle .season-score{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #a7a792}
#cycle .season-score button{border-bottom:0;padding:20px 24px;grid-template-columns:54px 1fr;border-right:1px solid #a7a792}
#cycle .season-score button:first-child{padding-left:0}
#cycle .season-score button:last-child{border-right:0}
#cycle .season-score strong{font-size:46px}
#cycle .season-caption{right:14px;top:418px;bottom:auto}
#cycle .season-controls{grid-row:3;margin:10px 0 18px}
#cycle .cycle-notes{display:grid;gap:12px;margin:24px 0 32px}
#cycle .cycle-notes>p{width:auto;max-width:none;margin:0;text-wrap:pretty}
#cycle .cycle-caption{font-size:19px;line-height:1.8}
@media(max-width:760px){
 #cycle{padding-block:40px}
 #cycle .season-world{display:grid;grid-template-columns:minmax(0,1fr)}
 #cycle .season-world>.section-heading{grid-column:1;grid-row:1;padding:0;margin:0}
 #cycle .season-world .section-heading .heading-aside{margin-top:22px}
 #cycle .season-canvas{grid-column:1;grid-row:2;height:320px;margin-top:-8px}
 #cycle .season-fallback{top:240px;width:100%;height:320px}
 #cycle .season-score{grid-column:1;grid-row:3}
 #cycle .season-score button{display:flex;flex-direction:column;gap:4px;padding:14px 8px;border-top:0}
 #cycle .season-score strong{font-size:38px}
 #cycle .season-score small{font-size:14px}
 #cycle .season-caption{position:static;grid-column:1;grid-row:3;align-self:start;justify-self:end;transform:translateY(-26px);font-size:14px}
 #cycle .season-controls{grid-row:4;grid-column:1;margin:8px 0 14px}
 #cycle .cycle-notes{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){#cycle .season-score button{transition:none}}

/* One continuous time line, with a clearly marked current phase. */
#cycle .season-score{position:relative;border:0;padding-top:12px}
#cycle .season-score button{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 12px;padding:14px 20px 5px 0;min-height:68px;border:0;background:transparent;color:#68705d;text-align:left}
#cycle .season-score button:first-child{padding-left:0}
#cycle .season-score button:last-child{padding-right:0;border:0}
#cycle .season-score button::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#a0a38c}
#cycle .season-score button::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:#a0a38c}
#cycle .season-score button[aria-pressed="true"]{background:transparent;color:#263b28}
#cycle .season-score button[aria-pressed="true"]::before{height:3px;background:#56663d}
#cycle .season-score button[aria-pressed="true"]::after{width:11px;height:11px;top:-4px;background:#56663d;box-shadow:0 0 0 3px #dbd4c4}
#cycle .season-score button:hover{background:transparent;color:#263b28}
#cycle .season-score strong{grid-column:1;grid-row:1/3;font-size:27px;line-height:1.4;font-weight:500}
#cycle .season-score span{grid-column:2;grid-row:1;align-self:auto;font-size:14px;line-height:1.5;letter-spacing:0}
#cycle .season-score small{grid-column:2;grid-row:2;font-size:16px;line-height:1.6}
#cycle .season-score button[aria-pressed="true"] small::after{content:" · 目前階段";color:#35482b;font-size:14px;white-space:nowrap}
#cycle .season-score button:focus-visible{outline:2px solid #56663d;outline-offset:4px}
@media(max-width:760px){
 #cycle .season-score button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 8px 4px 0;min-height:0}
 #cycle .season-score strong{font-size:24px}
 #cycle .season-score span{font-size:14px;line-height:1.5}
 #cycle .season-score small{font-size:14px;line-height:1.6}
 #cycle .season-score button[aria-pressed="true"] small::after{display:block;content:"目前階段";margin-top:3px}
}

#cycle .season-score button>.season-date{font-family:var(--sans);font-size:16px;font-variant-numeric:tabular-nums}
#cycle .season-score .season-date-range{display:inline-block;white-space:nowrap;font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:0}
@media(max-width:760px){#cycle .season-score button>.season-date{font-size:14px}}

#cycle .season-score button[aria-pressed="true"] small::after{display:none;content:none}
#cycle .season-score button[aria-pressed="true"] strong::after{content:"目前階段";position:absolute;left:16px;top:-23px;font-family:var(--sans);font-size:14px;line-height:20px;letter-spacing:0;color:#35482b}
@media(max-width:760px){
 #cycle .season-score button{padding-right:4px}
 #cycle .season-caption{position:relative;z-index:1;grid-row:2;align-self:end;transform:none;margin:0 0 12px}
}

@media(max-width:760px){#cycle .season-caption{top:auto;right:auto;bottom:auto}}