*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--dim:rgba(255,255,255,0.5);--border:rgba(255,255,255,0.11);--safe-bottom:max(20px, env(safe-area-inset-bottom));--safe-top:max(20px, env(safe-area-inset-top));--custom-cursor:auto}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:"DM Sans",sans-serif;color:#fff}
html.has-custom-cursor,html.has-custom-cursor body,html.has-custom-cursor button,html.has-custom-cursor a,html.has-custom-cursor .ctrl-btn,html.has-custom-cursor .spotify-link,html.has-custom-cursor #intro,html.has-custom-cursor .progress-wrap{cursor:none!important}
#bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(0.68)}
.bg-fallback{position:fixed;inset:0;background:#000;z-index:0}
.bg-fallback.has-image{background-position:center;background-repeat:no-repeat;background-size:cover;filter:brightness(.72)}
.custom-cursor{position:fixed;left:0;top:0;width:var(--cursor-size,22px);height:var(--cursor-size,22px);background-image:var(--cursor-image);background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s ease}
.custom-cursor.visible{opacity:1}
.custom-cursor.is-pointer{width:var(--pointer-cursor-size,26px);height:var(--pointer-cursor-size,26px);background-image:var(--pointer-cursor-image,var(--cursor-image))}
.particles{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.88);backdrop-filter:blur(14px);cursor:pointer;transition:opacity .9s ease,visibility .9s ease}
#intro.hidden{opacity:0;visibility:hidden;pointer-events:none}
.panel-promo{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140px);z-index:60;width:min(260px,calc(100vw - 28px));padding:16px 18px 14px;border-radius:26px;background:rgba(10,12,18,.86);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(0,0,0,.34);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.panel-promo.is-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.panel-promo-close{position:absolute;top:8px;right:10px;width:34px;height:34px;border:none;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:5;pointer-events:auto}
.panel-promo-link{display:flex;align-items:center;justify-content:center;text-decoration:none;position:relative;z-index:1;padding-top:8px}
.panel-promo-logo{width:170px;height:82px;object-fit:cover;object-position:center;display:block;transform:scale(1.48);filter:drop-shadow(0 8px 18px rgba(0,0,0,.32))}
.intro-label{font-family:"Syne",sans-serif;font-size:clamp(.95rem,2.8vw,1.4rem);font-weight:600;letter-spacing:.38em;text-transform:uppercase;animation:pulse 2s ease-in-out infinite}
.intro-dot{width:5px;height:5px;border-radius:50%;background:#fff;margin:14px auto 0;animation:pulse 2s ease-in-out infinite .6s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
#scene{position:relative;z-index:10;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px calc(var(--safe-bottom) + 110px);opacity:0;transform:translateY(55px);transition:opacity .9s ease .1s,transform .9s cubic-bezier(.22,1,.36,1) .1s}
#scene.visible{opacity:1;transform:translateY(0)}
.view-count{position:fixed;left:44px;top:50%;transform:translateY(-50%);z-index:40;display:none;align-items:center;gap:7px;font-size:.83rem;color:var(--dim);padding:10px 14px;border:none;border-radius:999px;background:transparent;backdrop-filter:none}
.eye-wrap{display:flex;align-items:center;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.profile-center{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px;width:min(100%,420px);padding:28px 22px;border:none;border-radius:28px;background:transparent;backdrop-filter:none;box-shadow:none}
.staged-item{opacity:0;transform:translateY(18px) scale(.985);filter:blur(8px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1),filter .7s ease}
.staged-item.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.staged-text{transition-duration:.85s}
.player-bar.staged-item{transform:translateX(-50%) translateY(18px) scale(.985)}
.player-bar.staged-item.is-visible{transform:translateX(-50%) translateY(0) scale(1)}
.avatar-ring{position:relative;width:126px;height:126px;border-radius:50%;border:2px solid rgba(255,255,255,.2);padding:3px}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;opacity:1;transform:scale(1);transition:opacity .55s ease,transform .55s ease}
.avatar-img.is-fading{opacity:.2;transform:scale(1.04)}
.username{font-family:"Syne",sans-serif;font-size:clamp(1.5rem,4vw,2rem);font-weight:700;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.8);min-height:1.25em}
.cursor{display:inline-block;width:2px;height:.85em;background:#fff;margin-left:2px;vertical-align:middle;animation:blink .8s step-start infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.tagline{font-size:.87rem;color:var(--dim);font-weight:300;letter-spacing:.05em}
.spotify-link{display:flex;align-items:center;justify-content:center;margin:6px auto 0;cursor:pointer;transition:opacity .2s,transform .2s;text-decoration:none}
.spotify-link:hover{opacity:.75}
.spotify-link:hover,.social-link:hover{box-shadow:none}
.spotify-link img{width:88px;height:auto;object-fit:contain;display:block;filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,1)) drop-shadow(0 0 22px rgba(255,255,255,.7)) drop-shadow(0 0 38px rgba(255,255,255,.34))}
.more-toggle{display:flex;align-items:center;gap:8px;margin-top:4px;background:none;border:none;color:#fff;font-family:"Syne",sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;opacity:.78;transition:opacity .2s ease,transform .2s ease}
.more-toggle:hover{opacity:1;transform:translateY(1px)}
.more-toggle-arrow{font-size:.9rem;line-height:1;transition:transform .25s ease}
.more-links{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .28s ease,opacity .28s ease,margin-top .28s ease}
.more-links.open{max-height:80px;opacity:1;pointer-events:auto}
.more-toggle.open .more-toggle-arrow{transform:rotate(180deg)}
.social-link{display:flex;align-items:center;justify-content:center;width:42px;height:42px;opacity:.82;transition:transform .2s ease,opacity .2s ease}
.social-link:hover{opacity:1;transform:translateY(-2px)}
.social-link img{max-width:100%;max-height:100%;object-fit:contain;display:block;background:transparent;filter:none}
.social-link:hover img{filter:drop-shadow(0 0 10px rgba(255,255,255,.92)) drop-shadow(0 0 20px rgba(255,255,255,.42))}
.player-bar{position:fixed;bottom:var(--safe-bottom);left:50%;transform:translateX(-50%);z-index:20;width:min(480px,calc(100vw - 24px));background:transparent;backdrop-filter:none;border:none;border-radius:20px;padding:12px 15px;display:flex;align-items:center;gap:13px;box-shadow:none}
.thumb-wrap{width:58px;height:58px;flex-shrink:0}
.thumb-img{width:58px;height:58px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.12);display:block}
.player-info{flex:1;min-width:0}
.player-name{font-family:"Syne",sans-serif;font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-track{display:flex;align-items:center;gap:8px;margin-top:7px}
.time-label{font-size:.66rem;color:var(--dim);flex-shrink:0;font-variant-numeric:tabular-nums}
.progress-wrap{flex:1;height:3px;background:rgba(255,255,255,.16);border-radius:99px;cursor:pointer;transition:height .15s}
.progress-wrap:hover{height:5px}
.progress-fill{width:0%;height:100%;background:#fff;border-radius:99px;pointer-events:none}
.player-controls{display:flex;align-items:center;gap:7px;flex-shrink:0}
.ctrl-btn{background:none;border:none;color:var(--dim);cursor:pointer;padding:3px;display:flex;align-items:center;transition:color .15s}
.ctrl-btn:hover,.ctrl-btn.play-pause{color:#fff}
.ctrl-btn svg{display:block}
.bottom-bar{position:fixed;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.06);z-index:30}
.bottom-fill{height:100%;width:0%;background:rgba(255,255,255,.28);border-radius:99px;transition:width .3s linear}
@media (max-width:768px){
  #intro{padding:24px}
  .intro-label{letter-spacing:.24em;text-align:center}
  #scene{justify-content:flex-start;padding:calc(var(--safe-top) + 34px) 14px calc(var(--safe-bottom) + 36px)}
  .view-count{top:calc(var(--safe-top) + 12px);left:50%;right:auto;transform:translateX(-50%);font-size:.78rem;display:flex;min-width:58px;justify-content:center}
  .profile-center{margin-top:auto;margin-bottom:16px;width:100%;max-width:420px;padding:24px 18px 20px;border-radius:24px;gap:11px}
  .avatar-ring{width:110px;height:110px}
  .panel-promo{bottom:12px;width:min(220px,calc(100vw - 22px));padding:14px 14px 12px}
  .panel-promo-logo{width:142px;height:68px;transform:scale(1.38)}
  .username{font-size:clamp(1.35rem,7.6vw,2rem);text-align:center}
  .tagline{font-size:.8rem;text-align:center}
  .spotify-link img{width:80px}
  .more-toggle{font-size:.72rem}
  .social-link{width:38px;height:38px}
  .player-bar{position:relative;left:auto;bottom:auto;margin-top:14px;width:100%;max-width:420px;padding:14px;border-radius:22px;gap:12px;transform:none}
  .player-bar.staged-item{transform:translateY(18px) scale(.985)}
  .player-bar.staged-item.is-visible{transform:translateY(0) scale(1)}
  .thumb-wrap,.thumb-img{width:62px;height:62px}
  .player-info{display:flex;flex-direction:column;gap:7px}
  .player-name{font-size:.82rem}
  .player-track{margin-top:0}
  .player-controls{gap:5px}
  .ctrl-btn{padding:6px}
}
@media (max-width:420px){
  #scene{padding-left:12px;padding-right:12px}
  .profile-center{padding:22px 16px 18px}
  .player-bar{display:grid;grid-template-columns:62px 1fr auto;align-items:center}
  .player-track{gap:6px}
  .time-label{font-size:.62rem}
}