*{box-sizing:border-box;margin:0;padding:0}:root{--max-scene-progress: 3;font-family:Noto Sans JP,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{@property --background-color{syntax: "<color>"; inherits: false; initial-value: #f0f0f0;}background:var(--background-color);overflow-y:scroll;scrollbar-width:0px;-ms-overflow-style:none}body::-webkit-scrollbar{display:none}#app{position:fixed;inset:0;width:100%;height:100vh;overflow:hidden}.container{width:100%;height:100%}.transform-wrapper{width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"layer";translate:0 calc(clamp(0,(var(--scene-progress, 0) - 3.5) / .5,1)*-15%)}.layer{grid-area:layer;width:100%;height:100%;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #fff;will-change:transform;transform-origin:center center}.layer:nth-child(2n){mix-blend-mode:var(--layer-blend-mode-1)}.layer:nth-child(odd){mix-blend-mode:var(--layer-blend-mode-2)}@keyframes scroll-hint-bounce{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% + 10px))}}.scroll-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:10px;color:#01245b;pointer-events:none;will-change:opacity;font-size:1rem;font-weight:400;letter-spacing:.2em;opacity:clamp(0,1 - (var(--scene-progress, 0) / .2),.75);top:calc(50% - 1000px * var(--scene-progress, 0));animation:scroll-hint-bounce 1.5s infinite}.end{position:fixed;inset:0;z-index:1000;font-size:30vw;opacity:clamp(0,(var(--scene-progress, 0) - 3.8) / .2,1);color:#e8deb9;mix-blend-mode:difference}.end span{position:absolute;bottom:0;line-height:.9;font-weight:500}.end span[data-letter=E]{left:0;transform:translateY(calc(100% - (clamp(0,(var(--scene-progress, 0) - 3.5) / .5,1)*100%)))}.end span[data-letter=N]{left:50%;transform:translate(-50%,calc(100% - (clamp(0,(var(--scene-progress, 0) - 3.7) / .3,1)*100%)))}.end span[data-letter=D]{right:0;transform:translateY(calc(100% - (clamp(0,(var(--scene-progress, 0) - 3.9) / .1,1)*100%)))}.seekbar-wrapper{position:fixed;right:20px;bottom:50%;height:40vh;cursor:pointer;z-index:1000;transform-origin:bottom right}.seekbar{width:100%;height:100%;background:transparent;outline:none;cursor:pointer;position:relative;writing-mode:vertical-lr}.seekbar::-webkit-slider-runnable-track,.seekbar::-moz-range-track{width:100%;height:100%;background:#ffffff1a}.seekbar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#081237;border-radius:0%;cursor:grab;transition:transform .2s ease,box-shadow .2s ease}.seekbar::-webkit-slider-thumb:hover{transform:scale(1.2)}.seekbar::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}.seekbar::-moz-range-thumb{width:16px;height:16px;background:#081237;border:none;cursor:grab}.seekbar::-moz-range-thumb:hover{transform:scale(1.2)}.seekbar::-moz-range-thumb:active{cursor:grabbing;transform:scale(1.1)}