:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#080b0c;color:#f5f2e9}*{box-sizing:border-box}body{margin:0}header{position:fixed;z-index:3;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:26px 4%;background:linear-gradient(#080b0cf0,transparent)}header a{font-size:21px;font-weight:600;letter-spacing:-1px;color:inherit;text-decoration:none}header span,.label{font-size:12px;letter-spacing:.14em}header span{color:#c0c4c0}.sequence{height:420vh;height:420svh}.stage{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.intro{position:absolute;z-index:2;top:15%;left:7%;pointer-events:none;opacity:var(--title-opacity,1)}.label{color:#d9fc50}h1{font-size:clamp(48px,7vw,106px);line-height:1;letter-spacing:-.07em;font-weight:500;margin:18px 0}.image-wrap{width:100%;display:flex;justify-content:center;align-items:center}#piano{display:block;width:min(100%,1250px);height:auto;max-height:77svh;object-fit:contain}.bottom{position:absolute;bottom:40px;left:4%;right:4%;display:flex;align-items:end;justify-content:space-between;gap:24px;font-size:14px;color:#d3d6d2}.bottom p{margin:0}.scrubber{display:flex;flex-direction:column;gap:9px;font-size:12px;color:#a9b0ac}input{width:180px;accent-color:#d9fc50;cursor:pointer}#counter{font-variant-numeric:tabular-nums;letter-spacing:.1em;font-size:12px}.progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#ffffff12}.progress span{display:block;background:#d9fc50;height:100%;width:0}a:focus-visible,input:focus-visible{outline:2px solid #d9fc50;outline-offset:6px}@media(max-width:600px){header{padding:22px 6%}header a{font-size:18px}header span{font-size:10px}.intro{top:20%;left:6%}.bottom{left:6%;right:6%;bottom:30px;flex-wrap:wrap}.bottom p{width:100%}.scrubber input{width:170px}}

.image-wrap{position:absolute;inset:0}#piano,#opening{position:absolute;display:block;width:100%;height:auto;max-height:none;object-fit:contain}#opening{opacity:var(--opening-opacity,1);pointer-events:none}.bottom{z-index:2;text-shadow:0 1px 8px #000}.intro{filter:drop-shadow(0 2px 18px #000)}
#loop-blend{position:absolute;display:block;width:100%;height:auto;max-height:none;object-fit:contain;opacity:0;pointer-events:none}#opening{will-change:transform,opacity;transform-origin:48% 70%}#counter{min-width:90px;text-align:right}