@font-face{font-family:Scene;src:local('Arial')}*{box-sizing:border-box}html{background:#030403;color:#eee;scroll-behavior:auto;color-scheme:dark}body{margin:0;font-family:Scene,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #b79045;outline-offset:6px}button{background:none;border:0}header{position:fixed;z-index:10;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:25px 4vw;background:linear-gradient(#030403d9,transparent)}.brand img{display:block;width:65px;height:auto}nav{display:flex;gap:42px}nav a{padding:14px 0;font-size:13px}nav span{font-size:9px;color:#8c8f8b;margin-left:9px}#motion{font-size:11px;color:#a5a8a2;min-height:44px;border-bottom:1px solid #45483f}.skip{position:fixed;top:-80px;z-index:30;background:#111;padding:16px}.skip:focus{top:8px}#scene{height:800svh}.stage{height:100svh;position:sticky;top:0;overflow:hidden}.visual{position:absolute;left:20%;right:20%;top:15%;bottom:9%;display:flex;align-items:center;justify-content:center}canvas,#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#poster img{width:100%;height:100%;object-fit:contain}canvas{opacity:0}.intro{position:absolute;left:6%;top:42%;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.2em;color:#aaa99b}.intro p{font-weight:400;font-size:clamp(18px,2vw,29px);line-height:1.4;letter-spacing:-.04em;margin-top:18px}.clip{position:absolute;width:21%;max-width:300px;top:38%;opacity:0;visibility:hidden}.clip.left{left:4%}.clip.right{right:4%}.clip-button{padding:0;text-align:left;display:block;width:100%}.thumbnail{position:relative;display:block;overflow:hidden;background:#141613;aspect-ratio:16/9}.thumbnail img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .2s}.clip-button:hover img{opacity:1}.play{position:absolute;left:14px;bottom:14px;display:grid;place-items:center;border:1px solid #ffffff90;border-radius:50%;width:38px;height:38px;font-size:12px;background:#080a0860}.clip-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;color:#b0b1a6;margin:15px 0 9px}.clip-title{font-size:clamp(15px,1.4vw,21px);font-weight:400;line-height:1.3;margin:0;border-bottom:1px solid #ffffff25;padding-bottom:17px}.platform-group{position:absolute;top:38%;width:19%;opacity:0;visibility:hidden}.platform-group.left{left:5%}.platform-group.right{right:5%;top:47%}.platform-group h2{font-size:10px;letter-spacing:.18em;font-weight:400;color:#a2a396;margin:0 0 22px}.platform{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-bottom:1px solid #ffffff30;gap:20px;font-size:clamp(16px,1.7vw,25px)}.platform span{font-size:19px;color:#ad925a}.platform:hover{color:#c8b27f}.scene-footer{position:absolute;bottom:33px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.12em;color:#989b93}#hint{letter-spacing:.03em;font-size:11px}#hint b{margin-left:20px;color:#d1ba85;font-size:20px;font-weight:400}.progress{position:absolute;bottom:0;height:2px;left:0;right:0;background:#ffffff10}.progress i{display:block;background:#a58443;height:100%;width:0}.library{padding:80px max(6vw,24px);max-width:1100px;margin:auto}.animated .library{position:relative;height:0;overflow:hidden;padding:0;opacity:0}.animated .library:focus-within,.animated .library:target{height:auto;padding:80px 6vw;opacity:1}.library h1{font-size:14px;font-weight:400;letter-spacing:.2em}.library h2{font-size:28px;font-weight:400;margin-top:55px}.library h2 span{font-size:12px;color:#92968a}.library .clip{position:static;visibility:visible;opacity:1;max-width:none;width:100%}#clip-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}#platform-list{max-width:550px}.static #scene{height:75svh}.static .stage{height:75svh;position:relative}.static .visual{inset:125px 15% 10px}.static .intro,.static #floating-clips,.static #floating-music,.static .scene-footer,.static .progress{display:none}.static .library{padding-top:10px}dialog{width:min(960px,94vw);padding:24px;background:#0b0d0b;border:1px solid #44483b;color:#eee}dialog::backdrop{background:#000d}.dialog-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.dialog-top h2{font-weight:400;font-size:18px;margin:0}#close{min-width:80px;min-height:44px;font-size:12px}#player{aspect-ratio:16/9;background:#030403}iframe{border:0;width:100%;height:100%}#youtube-link{display:inline-block;padding:20px 0 0;font-size:13px;text-decoration:underline}
@media(min-width:1500px){.clip{width:20%}.intro{left:7%}}
@media(max-width:700px){header{padding:16px 6%}.brand img{width:46px}nav{gap:22px}nav a{font-size:12px}nav span{display:none}#motion{font-size:10px}.visual{left:0;right:0;top:19%;bottom:38%}.intro{top:auto;bottom:23%;left:8%}.intro p{font-size:27px}.clip,.clip.left,.clip.right{width:auto;max-width:none;left:7%;right:7%;top:auto;bottom:13%}.clip-button{display:grid;grid-template-columns:43% 1fr;gap:0 18px;align-items:center}.thumbnail{grid-row:1/3}.clip-meta{margin:0;align-self:end;font-size:8px}.clip-title{align-self:start;font-size:17px;margin-top:10px;padding-bottom:12px}.play{width:30px;height:30px;left:9px;bottom:9px}.platform-group,.platform-group.left,.platform-group.right{top:auto;bottom:12%;width:40%;left:7%;right:auto}.platform-group.right{left:auto;right:7%;bottom:12%}.platform-group h2{font-size:9px;margin-bottom:8px}.platform{font-size:16px;min-height:42px}.scene-footer{bottom:24px;left:7%;right:7%;font-size:8px}#percent{display:none}#hint{font-size:10px}#hint b{margin-left:8px}.static #scene,.static .stage{height:57svh}.static .visual{inset:110px 0 0}#clip-list{display:grid;grid-template-columns:1fr;gap:32px}.library .clip-button{display:block}.library .clip-meta{margin:15px 0 8px}.library .clip-title{margin-top:0}dialog{padding:16px}.dialog-top h2{font-size:14px}}
@media(max-height:500px) and (min-width:701px){header{padding:10px 4%}.brand img{width:40px}.clip{top:28%;width:20%}.clip-title{font-size:14px}.visual{top:17%}.scene-footer{bottom:15px}.platform-group{top:25%}.platform-group.right{top:32%}.platform{min-height:36px;font-size:17px}}
/* Blue original logo and spacious portrait composition. */
:root{--accent:#0078ff}html{background:#000}header{background:linear-gradient(#000c,transparent)}.brand img{width:125px;height:auto}a:focus-visible,button:focus-visible{outline-color:var(--accent)}.progress i{background:var(--accent)}.platform span,#hint b{color:#77aef0}.platform:hover{color:#77aef0}.visual{left:12%;right:12%;top:14%;bottom:7%}.intro{top:43%}.spotify-inline{display:block;font-size:11px;color:#a6bcae;padding:15px 0;min-height:44px}.spotify-inline:hover{color:#fff}.spotify-card{width:16%;top:32%}.spotify-card.left{left:5%}.spotify-card.right{right:5%}.cover{width:100%;aspect-ratio:1;object-fit:cover;display:block;margin-bottom:15px}.spotify-card .clip-title{font-size:17px}.static .visual{inset:115px 12% 0}.static .brand img{width:125px}
@media(max-width:700px){.brand img,.static .brand img{width:84px}.visual{left:0;right:0;top:15%;bottom:39%}.spotify-card{display:none}.clip,.clip.left,.clip.right{bottom:10%}.spotify-inline{padding:9px 0;min-height:36px;font-size:10px}.intro{top:auto;bottom:23%}.static .visual{inset:110px 5% 0}}
.visual{mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
#clips,#music,#library{scroll-margin-top:130px}
.platform-dock{position:fixed;z-index:12;right:4vw;top:108px;display:flex;gap:8px;background:#000d;border:1px solid #ffffff20;border-radius:6px;padding:4px 8px}.platform-dock a{display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;font-size:10px}.platform-dock svg{width:23px;height:23px;fill:currentColor}.platform-dock a:hover{color:#77aef0}
@media(max-width:700px){.platform-dock{top:98px;left:7%;right:7%;justify-content:space-between;padding:2px 10px}.platform-dock a{font-size:10px}.platform-dock svg{width:21px;height:21px}.visual{top:20%;bottom:35%}.platform-group.left{width:86%;bottom:10%}}
@media(max-height:500px) and (min-width:701px){.platform-dock{top:67px}.platform-dock span{display:none}}
/* Full viewport, complete source frame: no crop or edge mask. */
.animated .visual{inset:0;mask-image:none}
.platform-dock span{color:inherit;margin:0;font-size:10px}
.platform>svg{width:26px;height:26px;flex:0 0 26px;fill:currentColor}.platform .platform-name{font:inherit;color:inherit;flex:1}.platform{gap:12px}
.animated #hint b{display:inline-block;animation:scroll-cue 1.6s ease-in-out infinite}
@keyframes scroll-cue{0%,100%{transform:translateY(-3px);opacity:.65}50%{transform:translateY(5px);opacity:1}}
@media(prefers-reduced-motion:reduce){.animated #hint b{animation:none}}
.member-note{margin:0;min-height:180px;padding:8%;font-size:18px;line-height:1.7;color:#ccc}
.release-details{display:inline-block;font-size:10px;color:#a5b9d1;padding:7px 0;min-height:32px}.release-details:hover{text-decoration:underline}.library .clip>a>img{width:100%;height:auto}

/* Geometry-based controls render identically on iOS and Android, without emoji fonts. */
:is(.ui-icon,.icon-external,.icon-play,.icon-down){display:inline-block;position:relative;width:1em;height:1em;vertical-align:-.12em;flex:none;font-style:normal;color:inherit}
.icon-external:before{content:"";position:absolute;left:20%;top:14%;width:62%;height:62%;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.icon-external:after{content:"";position:absolute;left:8%;top:49%;width:92%;height:1.5px;background:currentColor;transform:rotate(-45deg)}
.icon-play:before{content:"";position:absolute;left:25%;top:10%;border-left:.72em solid currentColor;border-top:.42em solid transparent;border-bottom:.42em solid transparent}
.icon-down:before{content:"";position:absolute;left:48%;top:0;height:90%;width:1.5px;background:currentColor}
.icon-down:after{content:"";position:absolute;left:25%;bottom:8%;width:48%;height:48%;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
@media(max-width:700px){
 .animated .visual{inset:0}
 #poster img{object-fit:cover;object-position:center}
 .static .visual{inset:0;mask-image:none}
 .static #scene,.static .stage{height:100svh}
 .animated .clip{padding:14px;background:linear-gradient(135deg,#000e,#000b);border:1px solid #ffffff1c;border-radius:6px}
 .animated .platform-group{padding:16px;background:#000c;border-radius:6px}
}

@media(max-width:700px){
 .platform-dock{top:auto;bottom:max(12px,env(safe-area-inset-bottom));background:#000e}
 .scene-footer{bottom:78px}
 .animated .clip,.animated .clip.left,.animated .clip.right{bottom:20%}
 .animated .platform-group.left{bottom:20%}
}