.season-demo{display:flex;align-items:center;gap:1.5rem;margin-top:1.5rem}.season-frame{--frame-px:1px;position:relative;flex:none;box-sizing:content-box;width:calc(120 * var(--frame-px));height:calc(150 * var(--frame-px));overflow:hidden;isolation:isolate;border:1px solid rgb(var(--color-line));border-radius:var(--radius-lg)}@media (min-width:640px){.season-frame{--frame-px:2px}}.season-frame img{position:absolute;bottom:0;left:calc(-84 * var(--frame-px));width:calc(288 * var(--frame-px));max-width:none;height:calc(120 * var(--frame-px));image-rendering:pixelated}.season-frame .season-demo-sky{height:calc(192 * var(--frame-px))}.season-frame .season-demo-hills{z-index:1}.season-frame .season-demo-hills:is(.season-demo-winter,.season-demo-spring,.season-demo-autumn){z-index:2}.season-frame .season-demo-monument{z-index:3}.season-frame .season-demo-monument:is(.season-demo-winter,.season-demo-spring,.season-demo-autumn){z-index:4}.season-frame .season-demo-ground{z-index:5}.season-frame .season-demo-ground:is(.season-demo-winter,.season-demo-spring,.season-demo-autumn){z-index:6}.season-frame svg{position:absolute;bottom:calc(5 * var(--frame-px));left:calc(30 * var(--frame-px));z-index:7;width:calc(60 * var(--frame-px));height:calc(80 * var(--frame-px))}.season-demo:has(input:checked:not([value=autumn],[value=date])) .season-demo-autumn,.season-demo:has(input:checked:not([value=autumn],[value=date])) svg .scene-autumn,.season-demo:has(input:checked:not([value=spring],[value=date])) .season-demo-spring,.season-demo:has(input:checked:not([value=spring],[value=date])) svg .scene-spring,.season-demo:has(input:checked:not([value=winter],[value=date])) .season-demo-winter,.season-demo:has(input:checked:not([value=winter],[value=date])) svg .scene-winter,:root:not([data-season=autumn]) .season-demo:has(input[value=date]:checked) .season-demo-autumn,:root:not([data-season=spring]) .season-demo:has(input[value=date]:checked) .season-demo-spring,:root:not([data-season=winter]) .season-demo:has(input[value=date]:checked) .season-demo-winter{display:none}.season-demo:has(input[value=autumn]:checked) svg .scene-autumn,.season-demo:has(input[value=spring]:checked) svg .scene-spring,.season-demo:has(input[value=winter]:checked) svg .scene-winter{display:inline}:root[data-costume=ninja] .season-demo:has(input[value=winter]:checked) .ninja-gear{--ninja-gear-day:url(/scene/ninja-winter-day.png);--ninja-gear-night:url(/scene/ninja-winter-night.png)}:root[data-costume=ninja] .season-demo:has(input[value=spring]:checked) .ninja-gear{--ninja-gear-day:url(/scene/ninja-spring-day.png);--ninja-gear-night:url(/scene/ninja-spring-night.png)}:root[data-costume=ninja] .season-demo:has(input[value=summer]:checked) .ninja-gear{--ninja-gear-day:url(/scene/ninja-summer-day.png);--ninja-gear-night:url(/scene/ninja-summer-night.png)}:root[data-costume=ninja] .season-demo:has(input[value=autumn]:checked) .ninja-gear{--ninja-gear-day:url(/scene/ninja-autumn-day.png);--ninja-gear-night:url(/scene/ninja-autumn-night.png)}@supports not selector(:has(*)){.season-demo{display:none}}.season-demo fieldset{min-width:0}.season-demo legend{margin-bottom:.25rem}.season-demo label{display:flex;align-items:center;gap:.5rem;min-height:2rem;cursor:pointer}.season-demo input{flex:none;width:1.25rem;height:1.25rem;margin:0;accent-color:rgb(var(--color-accent));cursor:pointer}.season-demo input:focus-visible{outline:2px solid rgb(var(--color-accent));outline-offset:2px}