/* The page stays painted while its successor fades in. */
main{justify-content:flex-start}
.view-stage{position:relative;width:100%;isolation:isolate}
.view-panel{width:100%;opacity:0;transform:translateY(7px);transition:opacity 1.2s ease-in-out,transform 1.2s var(--ease)}
.view-panel.is-active{position:relative;z-index:2;opacity:1;transform:translateY(0)}
.view-panel.is-leaving{position:absolute;top:0;left:0;z-index:1;opacity:0;transform:translateY(-7px);pointer-events:none}
.history-panel{animation:none;padding-top:0}
.sky-scene .scene-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out,filter 1.6s ease-in-out;will-change:opacity}
.sky-scene .scene-layer:first-child{opacity:1}
.history-window{position:relative;isolation:isolate;margin:0 0 29px}
.history-window .sky-scene img{object-position:center 55%}
.history-scene-caption{position:absolute;top:12%;left:5.5%;z-index:10;max-width:58%;color:#fffef2;pointer-events:none;isolation:isolate;padding:12px 16px 15px;text-shadow:0 1px 6px #16392c99}
.history-scene-caption::before{content:'';position:absolute;z-index:-1;inset:-6px -24px -9px -6px;pointer-events:none;border-radius:20px;filter:blur(12px);background:linear-gradient(100deg,#173b39c9,#21483fb3 45%,#315b4a59 76%,#315b4a00)}
.history-scene-caption h3{font:clamp(40px,5vw,65px)/1 var(--serif);font-weight:400;letter-spacing:-.5px;margin:12px 0 14px}
.history-scene-caption p{font-size:11px;letter-spacing:.3px;line-height:1.6;margin:0 0 6px}
.history-scene-caption>span:last-child{font-size:10px;letter-spacing:.2px;line-height:1.6}
.history-girl{position:absolute;right:-5%;bottom:-16px;width:42%;height:91%;object-fit:contain;object-position:right bottom;z-index:20;pointer-events:none;opacity:0;transform:translate(15px,8px);filter:drop-shadow(-7px 5px 6px #29362b40);-webkit-mask-image:linear-gradient(#000 0 97%,transparent);mask-image:linear-gradient(#000 0 97%,transparent);transition:opacity 1.8s ease-in-out,transform 1.8s var(--ease),filter 1.6s ease-in-out}
.history-panel.is-active .history-girl{opacity:1;transform:translate(0,0);transition-delay:.12s,.12s,0s}
.history-panel.is-leaving .history-girl{transition-delay:0s}
.history-window[data-band=high] .history-girl{filter:brightness(.93) drop-shadow(-7px 5px 6px #29362b40)}
.history-window[data-band=very-high] .history-girl{filter:brightness(.86) drop-shadow(-7px 5px 6px #29362b40)}
.history-hour-control{position:relative;width:min(650px,90%);margin:36px auto 30px;color:#71634f}
.history-hour-control label{display:block;font-size:10px;letter-spacing:.6px;text-align:center;margin-bottom:9px}
.history-hour-control input{display:block;width:100%;height:28px;accent-color:#617b5d;cursor:ew-resize;touch-action:pan-y;margin:0}
.history-hour-control input:disabled{opacity:.45;cursor:wait}
.history-hour-control input:focus-visible{outline:2px solid #406b66;outline-offset:4px}
.history-hour-ticks{display:flex;justify-content:space-between;gap:8px;font-size:9px;line-height:1.6}
.history-hour-ticks>span:nth-child(2){font-size:8px;letter-spacing:.3px}
.history-heading{margin-bottom:24px}
.history-card{background:linear-gradient(140deg,#fff9edb3,#fff9ed4d);box-shadow:0 5px 22px #78582a08}
.history-chart .chart-selection{stroke:#55785b;stroke-width:1.5;stroke-dasharray:4 5;opacity:.75}
@media(max-width:900px) and (min-width:701px){.history-cards{grid-template-columns:1fr}.history-card-heading{display:flex}.history-card-heading>span{margin:0}.history-chart{max-width:650px}}
@media(max-width:700px){.history-heading{margin-bottom:21px}.history-heading h2{font-size:31px}.history-scene-caption{top:8%;left:5%;max-width:79%;padding:10px 12px}.history-scene-caption h3{font-size:42px;margin:10px 0 12px}.history-scene-caption p{font-size:9px}.history-scene-caption>span:last-child{font-size:8px}.history-scene-caption::before{inset:-2px -12px -8px 0;filter:blur(8px)}.history-girl{right:-5.5%;bottom:-14px;width:62%;height:73%}.history-hour-control{width:100%;margin:32px auto 25px}.history-hour-ticks{font-size:8px}.history-hour-ticks>span:nth-child(2){font-size:7px}.history-window .sky-scene img{object-position:50% center}}
@media(max-width:380px){.history-scene-caption h3{font-size:37px}.history-girl{width:65%;height:72%}}
@media(prefers-reduced-motion:reduce){.view-panel,.sky-scene .scene-layer,.history-girl{transition:none!important;transform:none!important}.scene-layer{will-change:auto}}

.view-stage{touch-action:pan-y}