:root{
  --bg:#070203;
  --focus:#ffffff;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--bg);overflow:hidden}
html{-webkit-text-size-adjust:100%}
body{font-family:Arial,sans-serif;color:#fff}
a,button{-webkit-tap-highlight-color:transparent}
button{font:inherit}
img{display:block;user-select:none;-webkit-user-drag:none}
.hero{position:relative;width:100vw;height:100dvh;min-height:100vh;overflow:hidden;background:#070203;isolation:isolate}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* -------- DESKTOP -------- */
.desktop-view{position:absolute;inset:0;display:block;overflow:hidden;background:#070203}
.desktop-artboard{
  position:absolute;
  left:50%;top:50%;
  width:100vw;
  height:56.25vw;
  min-width:177.777778vh;
  min-height:100vh;
  transform:translate(-50%,-50%);
}
.desktop-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.hotspot{position:absolute;z-index:4;display:block;border:0;background:transparent;color:transparent;cursor:pointer;border-radius:12px;outline:0}
.hotspot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,255,255,0);transition:box-shadow .18s ease,background .18s ease}
.hotspot:hover::after,.hotspot:focus-visible::after{box-shadow:0 0 0 2px rgba(255,255,255,.30),0 0 30px rgba(255,50,70,.16);background:rgba(255,255,255,.015)}
.hotspot.is-on::after{box-shadow:0 0 0 2px rgba(255,255,255,.26),0 0 34px rgba(255,55,70,.24)}
.hotspot.is-disabled{pointer-events:none}
.hotspot-bot{left:6.0%;top:42.0%;width:16.9%;height:6.8%}
.hotspot-channel{left:23.6%;top:42.0%;width:10.9%;height:6.8%}
.hotspot-contact{left:2.5%;top:89.0%;width:20.5%;height:7.0%}
.hotspot-music{left:78.3%;top:1.1%;width:17.7%;height:7.5%;padding:0}

/* -------- MOBILE -------- */
.mobile-view{display:none;position:absolute;inset:0;overflow:hidden;background:#070203}
.mobile-artboard{
  position:absolute;left:50%;top:50%;
  width:100vw;
  height:177.777778vw;
  min-width:56.25vh;
  min-height:100vh;
  transform:translate(-50%,-50%);
  overflow:hidden;
}
.mobile-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.mobile-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,1,2,.18) 0%,rgba(4,1,2,0) 35%,rgba(4,1,2,.05) 50%,rgba(4,1,2,.38) 69%,rgba(4,1,2,.92) 100%);pointer-events:none}
.mobile-ui{position:absolute;z-index:3;left:5.5%;right:5.5%;bottom:11.5%;display:flex;flex-direction:column;align-items:flex-start}
.ui-logo{width:min(78%,680px);height:auto;filter:drop-shadow(0 3px 18px rgba(0,0,0,.70))}
.ui-slogan{width:min(91%,770px);height:auto;margin-top:2.1%;filter:drop-shadow(0 2px 12px rgba(0,0,0,.90))}
.mobile-actions{display:flex;gap:2.5%;width:100%;margin-top:4.2%;align-items:center}
.image-button{display:block;overflow:hidden;border-radius:12px;text-decoration:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));transition:transform .16s ease,filter .16s ease}
.image-button:first-child{width:55%}
.image-button:last-child{width:37%}
.image-button img{width:100%;height:auto}
.image-button:hover,.image-button:focus-visible{transform:translateY(-2px);filter:drop-shadow(0 14px 28px rgba(0,0,0,.38)) brightness(1.06)}
.image-button.is-disabled{display:none}
.mobile-contact{position:absolute;z-index:4;left:4%;bottom:2.4%;width:52%;max-width:560px;text-decoration:none;filter:drop-shadow(0 2px 12px rgba(0,0,0,.85))}
.mobile-contact img{width:100%;height:auto}
.mobile-contact.is-disabled{display:none}
.mobile-music{position:absolute;z-index:5;right:3.5%;top:2.3%;width:27%;max-width:310px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 2px 14px rgba(0,0,0,.75));transition:transform .16s ease,filter .16s ease}
.mobile-music img{width:100%;height:auto}
.mobile-music:hover,.mobile-music:focus-visible,.mobile-music.is-on{transform:scale(1.025);filter:drop-shadow(0 0 16px rgba(255,255,255,.16)) drop-shadow(0 0 20px rgba(255,35,55,.15))}
.mobile-music.is-disabled{opacity:.33;pointer-events:none}

.toast{position:fixed;z-index:30;left:50%;bottom:max(24px,calc(18px + env(safe-area-inset-bottom)));transform:translate(-50%,10px);opacity:0;pointer-events:none;padding:9px 14px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(7,3,4,.82);color:#fff;font:600 11px/1.2 Arial,sans-serif;letter-spacing:.06em;backdrop-filter:blur(14px);transition:.2s ease;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.noscript{position:fixed;z-index:50;inset:auto 0 0;background:#111;color:#fff;padding:9px;text-align:center;font:13px/1.3 Arial,sans-serif}

@media (max-width:760px),(max-aspect-ratio:3/4){
  .desktop-view{display:none}
  .mobile-view{display:block}
  .hero{height:100svh;min-height:100svh}
}

@media (max-width:420px){
  .mobile-ui{left:4.2%;right:4.2%;bottom:11.2%}
  .ui-logo{width:82%}
  .ui-slogan{width:96%;margin-top:2.4%}
  .mobile-actions{gap:2%;margin-top:4.8%}
  .image-button:first-child{width:57%}
  .image-button:last-child{width:39%}
  .mobile-contact{left:3%;width:57%}
  .mobile-music{right:2.5%;width:30%}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}