/* Visual layers only: the existing calendar buttons remain the source of truth. */
.consistency{padding:clamp(22px,3vw,42px);border:1px solid #395a37;border-radius:24px;background:radial-gradient(ellipse at 78% 10%,#466b3440,transparent 48%),linear-gradient(145deg,#10241e,#14251a 60%,#0e1c18);box-shadow:0 18px 56px #1731211a;color:#f0f9e9}
.consistency h2{color:#f2faeb}
.consistency .eyebrow{color:#b5e68e}
.consistency .story-copy,.consistency .fine,.consistency .heat-legend,.consistency .heat-month h3{color:#c4d5bf}
.consistency .heat-legend i:first-of-type{background:#293d31}
.consistency .heat-legend i:nth-of-type(2){background:#698b55}
.consistency .heat-legend i:nth-of-type(3){background:#cbf396}
.consistency #heatmap{position:relative;isolation:isolate;overflow:visible}
.consistency #heatmap .heat-month{position:relative;min-width:0}
.consistency #heatmap .day{background:#293d31}
.consistency #heatmap .day.level1{background:#698b55}
.consistency #heatmap .day.level3{background:#a5d873;box-shadow:0 0 0 1px #e0fbb840,0 0 9px #bbed6a55;transition:box-shadow .25s ease,filter .25s ease}
.consistency #heatmap .day.level3.glow-current{background:#efffd2;box-shadow:0 0 0 2px #e3ffc1,0 0 22px 7px #b9f67acc;filter:brightness(1.2)}
.consistency #heatmap .day.outside{background:transparent}
.consistency #heatmap .day.level3:hover,.consistency #heatmap .day.level3:focus-visible{box-shadow:0 0 0 2px #e3ffc1,0 0 18px 5px #b9f67aa8;filter:brightness(1.12);z-index:4}
.consistency #heatmap .day:hover:after,.consistency #heatmap .day:focus-visible:after{z-index:5}
.consistency #heatmap .movement-glow-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;max-width:100%;display:block}
.consistency .heat-legend i:nth-of-type(3){box-shadow:0 0 9px #bbed6a77}

/* The age number and labels sit above the optical layer and never animate. */
#whoop-age .age-orbit{isolation:isolate;overflow:hidden}
#whoop-age .whoop-glow-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;border-radius:50%}
#whoop-age .orbit-ring,#whoop-age .orbit-particles{z-index:1}
#whoop-age .orbit-value{position:relative;z-index:2}
#whoop-age .orbit-value strong{color:#f4fce9;text-shadow:0 0 20px #baf28b4d}
#whoop-age .orbit-value .eyebrow,#whoop-age .orbit-value>span:last-child{color:#bdf096}
#whoop-age .age-orbit-card,#whoop-age .native-age-chart{background:radial-gradient(circle at 50% 48%,#314a2a,#15231a 72%);border-color:#48613d;color:#edf7e6}
#whoop-age .age-orbit-card>.fine,#whoop-age .native-age-chart>.fine,#whoop-age .age-average span,#whoop-age .age-chart-legend,#whoop-age .age-pace{color:#c5d5bc}
#whoop-age .age-pace{border-color:#48613d}
#whoop-age .age-pace strong{color:#c5f49b}
#whoop-age .native-age-chart .eyebrow{color:#b5e68e}
#whoop-age #age-history-chart text{fill:#c5d5bc}
#whoop-age #age-history-chart .age-end-label{fill:#cdf7a8}
#whoop-age .age-grid{stroke:#48613d}
#whoop-age .chronological-line{stroke:#b7c2af}
#whoop-age .whoop-trend-line{stroke:#add77f;filter:drop-shadow(0 0 5px #bdf490a0)}
#whoop-age .whoop-trace-line{fill:none;stroke:#e8ffcb;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.12 .88;filter:drop-shadow(0 0 5px #cbffa9) drop-shadow(0 0 12px #a9ed73);pointer-events:none;animation:whoop-trace 8s linear infinite}
@keyframes whoop-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
#whoop-age .age-endpoint{filter:drop-shadow(0 0 6px #bdf490);animation:whoop-end-breathe 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes whoop-end-breathe{50%{filter:drop-shadow(0 0 12px #c9ffa9);transform:scale(1.13)}}
#whoop-age .whoop-trend-line{animation:whoop-trend-light 10s ease-in-out infinite}
@keyframes whoop-trend-light{0%,100%{filter:drop-shadow(0 0 3px #bdf49070);opacity:.9}50%{filter:drop-shadow(0 0 9px #bdf490bb);opacity:1}}
#whoop-age.glow-paused .orbit-ring,#whoop-age.glow-paused .orbit-particles,#whoop-age.glow-paused .orbit-particles i,#whoop-age.glow-paused .whoop-trend-line,#whoop-age.glow-paused .whoop-trace-line,#whoop-age.glow-paused .age-endpoint{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  #whoop-age .whoop-trend-line,#whoop-age .whoop-trace-line,#whoop-age .age-endpoint{animation:none}
  #whoop-age .whoop-trace-line{display:none}
  .consistency #heatmap .day.level3{transition:none}
}
@media(max-width:650px){.consistency{padding:22px 17px;border-radius:20px}.consistency .heat-legend{flex-wrap:wrap;justify-content:flex-start}}