@font-face { font-family:"Beautiful Helvetica"; src:url("/assets/fonts/HelveticaNeue-Medium.otf") format("opentype"); font-style:normal; font-weight:500; font-display:swap; }
:root { color-scheme:light; font-family:"Beautiful Helvetica","Helvetica Neue",Helvetica,Arial,sans-serif; background:#fff; font-weight:500; --safe-top:0px; --safe-bottom:0px; }
* { box-sizing:border-box; } body { margin:0; overflow:hidden; overscroll-behavior:none; } button,input { font:inherit; } button,a,input { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } [hidden] { display:none!important; }
#stage { position:absolute; width:402px; height:874px; overflow:hidden; background:white; isolation:isolate; transform-origin:top left; }
#artwork { position:absolute; inset:0; clip-path:inset(0 49.8756%); transition:clip-path .24s linear; }
#cover { width:100%; height:100%; object-fit:cover; display:block; }
#cover:not([src]) { visibility:hidden; }
#blur { position:absolute; inset:0; opacity:0; transition:opacity 1.6s cubic-bezier(.45,0,.55,1); pointer-events:none; }
#blur i { position:absolute; inset:0; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); transition:backdrop-filter 1.6s cubic-bezier(.45,0,.55,1),-webkit-backdrop-filter 1.6s cubic-bezier(.45,0,.55,1); }
#stage.paused #blur i,#stage.seeking #blur i { backdrop-filter:blur(var(--radius)); -webkit-backdrop-filter:blur(var(--radius)); }
#blur:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,.14)); }
#stage.paused #blur,#stage.seeking #blur { opacity:1; }
.brand p { position:absolute; margin:0; color:white; font-size:9.9358px; letter-spacing:-.5961px; line-height:12px; white-space:nowrap; }
.brand-ring { position:absolute; left:184px; top:27px; width:33px; height:33px; mix-blend-mode:exclusion; }
.brand-vector { position:absolute; left:188.4595px; top:32.3514px; width:24.0811px; height:22.2973px; mix-blend-mode:exclusion; }
.brand-name { left:155px; top:64px; mix-blend-mode:difference; }
.brand-credit { left:201.5px; top:73px; transform:translateX(-50%); mix-blend-mode:exclusion; }
.track-label { position:absolute; left:50%; transform:translateX(-50%) translateY(5px); mix-blend-mode:exclusion; opacity:0; transition:opacity .3s ease-out,transform .3s ease-out; }
.title { top:437px; height:31px; }.artist { top:407px; height:26px; }
.track-label.visible { opacity:1; transform:translateX(-50%) translateY(0); }
.transport { display:contents; }.progress-bg { position:absolute; left:10px; top:736px; width:381px; height:18px; background:#b3bebf; opacity:.8; mix-blend-mode:exclusion; transition:height .3s ease-out,top .3s ease-out; }
.remaining { position:absolute; left:55px; top:740px; width:332px; height:10px; background:linear-gradient(#fff,#e6e6e6); transition:height .3s ease-out,top .3s ease-out; }
#time { position:absolute; left:14px; top:734px; height:20px; font-size:16px; line-height:20px; letter-spacing:-.96px; background:linear-gradient(#fff,#e6e6e6); color:transparent; background-clip:text; -webkit-background-clip:text; pointer-events:none; transition:top .3s ease-out; }
#seek { position:absolute; margin:0; left:10px; top:719px; width:381px; height:41px; opacity:0; cursor:ew-resize; touch-action:none; }
.seeking .progress-bg { top:718px; height:36px; }.seeking .remaining { top:722px; height:28px; }.seeking #time { top:716px; }
.controls { display:contents; }.controls img,.controls svg { position:absolute; display:block; pointer-events:none; }
.controls-frame { left:10px; top:760px; width:381px; height:100px; mix-blend-mode:exclusion; }
.controls-fill { left:14px; top:764px; width:373px; height:92px; }
.icon { top:797px; height:26px; mix-blend-mode:exclusion; opacity:.8; transition:opacity .2s,transform .2s; }
.play-icon { left:60px; width:23px; }.previous-icon { left:154px; width:25px; }.next-icon { left:223px; width:25px; }.heart-icon { left:315px; width:30px; }
#heart.liked { opacity:1; mix-blend-mode:normal; filter:none; transform:scale(1.12); }
.hit { position:absolute; top:760px; height:100px; padding:0; border:0; background:transparent; }
.play-hit { left:10px; width:121px; }.previous-hit { left:131px; width:70px; }.next-hit { left:201px; width:69px; }.like-hit { left:270px; width:121px; }
.hit:active { background:rgba(179,190,191,.16); }.hit:focus-visible,.brand-hit:focus-visible { outline:2px solid #111; outline-offset:-6px; }
#splash { position:absolute; inset:0; background:white; transition:opacity .3s ease-out; }
#splash.leaving { opacity:0; pointer-events:none; }.splash-vector { position:absolute; left:28.4326px; top:564.919px; width:175.135px; height:162.162px; mix-blend-mode:exclusion; animation:logo-turn 2.4s ease-in-out both; }
.splash-ring { position:absolute; left:-4px; top:526px; width:240px; height:240px; mix-blend-mode:exclusion; }
#splash p { position:absolute; margin:0; color:white; font-size:26.3886px; line-height:32px; letter-spacing:-1.5833px; white-space:nowrap; }.splash-name { left:18px; top:744.269px; mix-blend-mode:difference; }.splash-credit { left:44.559px; top:768.172px; mix-blend-mode:exclusion; }
#ticker { position:absolute; left:353px; top:-924px; width:12px; animation:ticker 2.6s linear both; } #ticker span { display:block; height:70px; width:12px; font-size:9.9358px; letter-spacing:-.5961px; white-space:nowrap; writing-mode:vertical-rl; transform:rotate(180deg); color:#000; }
@keyframes logo-turn { to { transform:rotate(360deg); } } @keyframes ticker { to { transform:translateY(900px); } }
#telegram-gate { position:absolute; left:24px; right:24px; top:35%; padding:22px 16px; background:rgba(255,255,255,.93); backdrop-filter:blur(16px); border:1px solid #b3bebf; max-height:55%; overflow:auto; }
#bot-link { border:0; background:#222; color:white; padding:10px 12px; font-size:14px; text-decoration:none; }
#telegram-gate { text-align:center; }#telegram-gate>p:first-child { font-size:25px; letter-spacing:-1px; }#bot-link { display:inline-block; }.gate-note { font-size:14px; line-height:1.4; color:#555; }
#notice { position:absolute; left:22px; right:22px; bottom:157px; background:rgba(255,255,255,.95); color:#111; padding:12px; text-align:center; font-size:14px; border:1px solid #b3bebf; }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
/* Keep the Figma geometry at 402×874, anchor transport to the real viewport. */
.title { top:calc(437px + var(--dy,0px)/2); }.artist { top:calc(407px + var(--dy,0px)/2); }
.progress-bg { top:calc(736px + var(--dy,0px)); }.remaining { top:calc(740px + var(--dy,0px)); }#time { top:calc(734px + var(--dy,0px)); }#seek { top:calc(719px + var(--dy,0px)); }
.seeking .progress-bg { top:calc(718px + var(--dy,0px)); }.seeking .remaining { top:calc(722px + var(--dy,0px)); }.seeking #time { top:calc(716px + var(--dy,0px)); }
.controls-frame,.hit { top:calc(760px + var(--dy,0px)); }.controls-fill { top:calc(764px + var(--dy,0px)); }.icon { top:calc(797px + var(--dy,0px)); }
.splash-vector { top:calc(564.919px + var(--dy,0px)); }.splash-ring { top:calc(526px + var(--dy,0px)); }#splash .splash-name { top:calc(744.269px + var(--dy,0px)); }#splash .splash-credit { top:calc(768.172px + var(--dy,0px)); }


/* Center the timer inside both progress-bar heights. */
#time { left:12px; top:calc(736px + var(--dy,0px)); width:39px; height:18px; display:flex; align-items:center; }
#time canvas { display:block; }
.seeking #time { top:calc(718px + var(--dy,0px)); }