@font-face{font-family:Plex;src:url(assets/plex.woff2);font-display:swap}*{box-sizing:border-box}html{background:#050505}body{margin:0;color:#f5f4f8;font:16px/1.5 Plex,monospace;--vk-display:Plex,monospace;--vk-text:Plex,monospace}h1,h2,p{margin:0}h1,h2{font-weight:400;letter-spacing:-.055em;line-height:1.03;font-size:clamp(3rem,6vw,7rem)}h1{view-transition-name:vk-title}.scene{height:1000svh}.stage{height:100svh;position:sticky;top:0;overflow:hidden;background:#070609}#render{position:absolute;inset:0}#render canvas{width:100%;height:100%;display:block}.top{position:absolute;top:2rem;left:4vw;right:4vw;display:flex;justify-content:space-between;color:#aaa;font-size:.8rem}.beat{position:absolute;left:5vw;top:22%;max-width:52rem;opacity:0;pointer-events:none}.beat p{max-width:32rem;margin-top:1.5rem;font-size:clamp(1rem,1.4vw,1.3rem);text-shadow:0 2px 14px #000}.beat:nth-of-type(even){left:auto;right:5vw;top:18%}.beat.b0{opacity:1}.beat.b0>p:first-child{color:#c4a0ff;font-size:.8rem;margin:0 0 2rem}.beat.b8{pointer-events:auto}.hero-key{position:absolute;right:24%;top:39%;width:clamp(120px,16vw,240px);aspect-ratio:1;border:2px solid #9e65ff;border-radius:14%;background:#19151f;box-shadow:0 0 80px #7b35ff75,inset 0 0 30px #9c59ff50;transform:rotate(-17deg);display:grid;place-items:center;color:#bd95ff;font-size:3rem}.controls{display:flex;gap:.5rem;margin-top:2rem}.controls button{font:inherit;color:white;background:#17131d;border:1px solid #aaa;padding:.8rem;cursor:pointer;min-height:44px}.controls button[aria-pressed=true]{border-color:#c7a3ff}.sr{position:absolute;clip-path:inset(50%)}button:focus-visible{outline:3px solid #fff}@media(max-width:700px){.beat,.beat:nth-of-type(even){left:1.5rem;right:1.5rem;top:14%}h1,h2{font-size:clamp(2.7rem,11vw,4rem)}.hero-key{right:14%;top:57%}.top{left:1.5rem;right:1.5rem}.controls{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.scene{height:1000svh}}noscript .beat{position:relative;opacity:1;padding:2rem}html:not(.vk-js) .scene{height:auto}html:not(.vk-js) .stage{position:relative;height:auto}html:not(.vk-js) .beat{position:relative;opacity:1;top:auto;left:auto;right:auto;padding:4rem 1.5rem}
@media(max-width:700px){#render{top:23%}.beat p{text-shadow:0 2px 5px #000,0 0 18px #000}}
@media(prefers-reduced-motion:reduce){.scene{height:auto}.stage{position:relative;height:auto}.beat,.beat:nth-of-type(even){position:relative;top:auto;left:auto;right:auto;opacity:1!important;padding:4rem 1.5rem}.hero-key{display:none}#render{position:sticky;top:0;height:100svh;margin-bottom:-100svh;opacity:.3!important}.beat.b8{padding-bottom:6rem}}

.callouts{position:absolute;right:4vw;top:24%;width:min(25vw,300px);opacity:0;pointer-events:none;font-size:.7rem;color:#d7bfff}.callouts div{position:relative;margin:1.8rem 0;border-top:1px solid #b59bd1;padding-top:.5rem}.callouts div:before{content:"";position:absolute;width:5vw;right:100%;top:-1px;border-top:1px solid #b59bd1;transform:rotate(-12deg);transform-origin:right}.callouts span{display:block;color:#ccc;margin-top:.3rem}.beat{top:12%;max-width:38rem}.beat:nth-of-type(even){top:12%}@media(max-width:700px){.callouts{top:49%;right:1rem;width:35%;font-size:.55rem}.callouts div{margin:.7rem 0}.beat,.beat:nth-of-type(even){top:10%}#render{top:12%}}

.beat.b7{left:4vw;right:auto;max-width:30vw}.callouts{top:18%;right:3vw;width:24vw}.beat.b8{max-width:32vw}.beat.b8 p{font-size:clamp(.85rem,1vw,1rem)}@media(max-width:700px){.beat.b7{max-width:85vw}.callouts{top:43%;right:1rem;width:34%;font-size:.62rem}.beat.b8{max-width:85vw}.beat.b8 p{font-size:.8rem;line-height:1.35}#render{top:20%}}

@media(max-width:700px){.callouts{top:34%;right:1rem;width:38%;font-size:.68rem;text-shadow:0 1px 5px #000}.callouts div{margin:.8rem 0}}
.stage,html{background:#000;color:#fff}.beat{color:#fff;text-shadow:0 2px 8px #000;max-width:32vw}.beat p{color:#fff}.top{color:#fff}.callouts{color:#fff}.callouts span{color:#fff}@media(max-width:700px){.beat,.beat:nth-of-type(even),.beat.b7,.beat.b8{max-width:none;top:9%}#render{top:27%;height:55%}.callouts{top:auto;bottom:3%;left:1.5rem;right:1.5rem;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:.3rem 1rem;background:#000;font-size:.68rem}.callouts div{margin:.2rem 0}.callouts div:before{display:none}}
@media(min-width:701px){#render{top:35%;height:65%}.beat,.beat:nth-of-type(even){top:8%}.callouts{top:10%}}

.room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}#render{touch-action:pan-y}
@media(max-width:700px){.callouts{bottom:5.5rem}.room{opacity:.22}}

.controls-link{display:inline-flex;align-items:center;min-height:44px;margin-top:1.5rem;color:#fff;pointer-events:auto}.controls-link:focus-visible{outline:3px solid #fff;outline-offset:3px}