:root{
  --bg:#070708;--bg2:#0d0d0f;--panel:#111114;--panel2:#18181c;--panel3:#202026;
  --fg:#f4f1ea;--muted:#a29d95;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.18);
  --accent:#ff3eb5;--violet:#8b5cff;--cyan:#6ee8ff;--good:#6ee7a3;
  --max:1480px;--pad:clamp(16px,4vw,58px);--r:20px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;color:var(--fg);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;background:
  radial-gradient(1100px 650px at 88% -15%,rgba(139,92,255,.11),transparent 58%),
  radial-gradient(900px 500px at -10% 25%,rgba(255,62,181,.07),transparent 62%),
  var(--bg);overflow-x:hidden
}
body.player-open{padding-bottom:108px}
a{color:inherit}button,input{font:inherit}button{color:inherit}img{display:block;max-width:100%}
button,a,input{-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent);color:#fff}
[hidden]{display:none!important}
.shell{width:min(var(--max),100%);margin:auto;padding-inline:var(--pad)}

/* NAV */
.sidebar{display:none!important}
.main{margin-left:0;min-height:100svh}
.mobile-top{
  position:sticky;top:0;z-index:120;height:74px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);background:rgba(7,7,8,.82);backdrop-filter:blur(22px);border-bottom:1px solid var(--line)
}
.mobile-brand{
  text-decoration:none;font-size:17px;font-weight:950;letter-spacing:.18em;white-space:nowrap
}
.mobile-top>div{display:flex!important;align-items:center;gap:8px!important}
.mobile-top .btn{min-height:46px}
.mobile-top [data-open-search]{
  width:48px;min-width:48px;height:48px;padding:0;border-radius:14px;font-size:0;position:relative
}
.mobile-top [data-open-search]::before{
  content:"";width:18px;height:18px;border:2px solid currentColor;border-radius:50%;display:block
}
.mobile-top [data-open-search]::after{
  content:"";position:absolute;width:9px;height:2px;background:currentColor;transform:rotate(45deg);right:11px;bottom:13px;border-radius:2px
}


.top-links{display:flex;align-items:center;gap:22px;margin-left:auto;margin-right:18px}
.top-links a{position:relative;text-decoration:none;color:#a59f97;font-size:10px;font-weight:760}
.top-links a:hover,.top-links a.active{color:#fff}
.top-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--accent))}
.top-actions{display:flex;align-items:center;gap:8px}
@media(max-width:960px){
 .top-links{display:none}
 .top-actions{margin-left:auto}
}

/* HERO / PROFILE */
.hero{
  height:clamp(300px,38vw,520px);min-height:300px;margin-inline:calc(-1*var(--pad));position:relative;overflow:hidden
}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:contrast(1.08) brightness(.67) saturate(.78)}
.hero:after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,7,8,.06),rgba(7,7,8,.16) 42%,rgba(7,7,8,.98)),
  linear-gradient(90deg,rgba(7,7,8,.52),transparent 58%)}
.hero-glow{position:absolute;width:500px;height:500px;right:4%;bottom:-320px;background:radial-gradient(circle,rgba(255,62,181,.18),transparent 68%);filter:blur(10px)}
.profile-wrap{position:relative;margin-top:-94px;z-index:3;padding-bottom:10px}
.profile-top{display:flex;justify-content:space-between;gap:28px;align-items:flex-end}
.profile-main{display:flex;gap:20px;align-items:flex-end;min-width:0}
.avatar{width:158px;height:158px;border-radius:26px;overflow:hidden;border:5px solid var(--bg);background:#111;box-shadow:0 22px 70px rgba(0,0,0,.42);flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.identity{padding-bottom:9px;min-width:0}
.identity h1{font-size:clamp(42px,6vw,78px);line-height:.82;letter-spacing:-.065em;margin:0 0 12px}
.handle{font-size:13px;color:#c0bbb2}
.bio{font-size:12px;line-height:1.6;color:#bab5ad;max-width:700px;margin:12px 0 0}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:999px;padding:7px 10px;font-size:9px;color:#c5c0b8}
.profile-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding-bottom:9px}
.btn{
  min-height:48px;padding:0 17px;border-radius:14px;border:1px solid var(--line2);background:var(--panel2);
  color:#eeeae4;font-size:11px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s
}
.btn:hover{transform:translateY(-1px);background:#232329}
.btn.primary{background:#f2eee6;color:#080809;border-color:#f2eee6}
.btn.gradient{border:0;color:#fff;background:linear-gradient(115deg,var(--violet),var(--accent))}
.btn.icon{width:48px;min-width:48px;padding:0;font-size:18px}

.sync-pill{display:inline-flex;align-items:center;gap:7px;font-size:9px;color:#858078}
.sync-dot{width:7px;height:7px;border-radius:50%;background:#777}.sync-dot.ok{background:var(--good);box-shadow:0 0 10px rgba(110,231,163,.38)}.sync-dot.partial{background:#ffc85c}

/* SECTION NAV */
.profile-tabs{
  position:sticky;top:74px;z-index:90;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);
  background:rgba(7,7,8,.90);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)
}
.tabs-inner{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none}.tabs-inner::-webkit-scrollbar{display:none}
.tabs-inner a{position:relative;padding:17px 0 15px;text-decoration:none;white-space:nowrap;font-size:11px;font-weight:760;color:#89847d}
.tabs-inner a.active,.tabs-inner a:hover{color:#fff}
.tabs-inner a.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--violet),var(--accent));border-radius:3px 3px 0 0}

/* SECTIONS */
.section{padding:34px 0 44px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px}
.section-head h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.04em;margin:0}
.section-head p{font-size:11px;color:var(--muted);margin:6px 0 0}
.section-head a,.section-head button.link{font-size:10px;color:#aaa59d;text-decoration:none;background:none;border:0;cursor:pointer}

/* FEATURED */
.spotlight{
  display:grid;grid-template-columns:minmax(270px,390px) minmax(0,1fr);border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:radial-gradient(600px 340px at 84% 32%,rgba(139,92,255,.14),transparent 68%),linear-gradient(120deg,#16161a,#0f0f12)
}
.spot-art{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer}
.spot-art img{width:100%;height:100%;object-fit:cover}
.spot-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.25),transparent 55%)}
.play-orb{
  position:absolute;right:16px;bottom:16px;z-index:2;width:58px;height:58px;border:0;border-radius:50%;background:#fff;color:#080809;
  font-size:20px;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 38px rgba(0,0,0,.38)
}
.spot-copy{padding:clamp(24px,4vw,52px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.spot-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#918c85}
.spot-copy h3{font-size:clamp(38px,5.7vw,78px);line-height:.86;letter-spacing:-.06em;margin:12px 0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-meta{font-size:11px;color:#aaa59d}.spot-stats{display:flex;gap:18px;margin-top:17px;color:#817c75;font-size:10px}.spot-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}

/* LANES */
.lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lane{min-height:160px;border:1px solid var(--line);border-radius:20px;padding:18px;position:relative;overflow:hidden;text-decoration:none;background:var(--panel);transition:.2s}
.lane:hover{transform:translateY(-2px);background:var(--panel2);border-color:var(--line2)}
.lane:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-45px;bottom:-75px;opacity:.52;filter:blur(4px)}
.lane.street:after{background:radial-gradient(circle,#b9b6ae,transparent 68%)}.lane.soul:after{background:radial-gradient(circle,#cc865f,transparent 68%)}.lane.club:after{background:radial-gradient(circle,var(--violet),transparent 68%)}.lane.latin:after{background:radial-gradient(circle,var(--accent),transparent 68%)}
.lane small,.lane b,.lane span{position:relative;z-index:2}.lane small{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#8e8981}.lane b{display:block;font-size:26px;margin-top:8px}.lane span{position:absolute;left:18px;bottom:16px;font-size:10px;color:#928d85}

/* TOOLS */
.music-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:15px}
.search-wrap{position:relative;flex:1;min-width:250px}
.search-wrap:before{
  content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;border:2px solid #8c8780;border-radius:50%
}
.search-wrap:after{
  content:"";position:absolute;left:29px;top:27px;width:8px;height:2px;background:#8c8780;transform:rotate(45deg);border-radius:2px
}
.search{width:100%;height:50px;border-radius:15px;border:1px solid var(--line);background:#101012;color:#fff;padding:0 15px 0 44px;outline:none;font-size:12px}
.search:focus{border-color:rgba(139,92,255,.55);box-shadow:0 0 0 4px rgba(139,92,255,.08)}
.filter-row{display:flex;gap:7px;flex-wrap:wrap}
.filter{min-height:38px;border:1px solid var(--line);border-radius:999px;background:#101012;color:#958f88;padding:0 13px;font-size:9px;font-weight:760;cursor:pointer}
.filter.active,.filter:hover{background:#f2eee6;color:#080809;border-color:#f2eee6}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.view-toggle button{width:44px;height:44px;border:0;background:#101012;color:#8f8982;font-size:18px;cursor:pointer}
.view-toggle button.active{background:#25252a;color:#fff}
.catalog-health{font-size:9px;color:#77716a;margin-left:auto}

/* TRACKS */
.track-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.track-card{min-width:0}
.track-cover{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#121214;cursor:pointer;border:1px solid rgba(255,255,255,.04)}
.track-cover img{width:100%;height:100%;object-fit:cover;transition:.22s}
.track-card:hover .track-cover img{filter:brightness(.73);transform:scale(1.015)}
.track-cover .play-orb{width:52px;height:52px;right:12px;bottom:12px;opacity:0;transform:translateY(6px);transition:.18s}
.track-card:hover .track-cover .play-orb{opacity:1;transform:none}
.track-title{font-size:13px;line-height:1.2;margin:11px 1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-title a{text-decoration:none}
.track-meta{font-size:9px;color:#8d8780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-stats{display:flex;gap:10px;color:#6f6963;font-size:9px;margin-top:6px}
.badge{position:absolute;left:10px;top:10px;z-index:2;border-radius:999px;padding:6px 8px;background:rgba(8,8,9,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.track-grid.list{display:grid;grid-template-columns:1fr;gap:2px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--line)}
.track-grid.list .track-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:13px;align-items:center;background:#101012;padding:9px 11px}
.track-grid.list .track-card:hover{background:#17171a}
.track-grid.list .track-cover{width:64px;border-radius:10px}.track-grid.list .track-cover .play-orb{width:36px;height:36px;right:14px;bottom:14px;font-size:13px}
.track-grid.list .track-title{margin:0 0 5px}.track-grid.list .track-stats{margin:0}

/* PLAYLIST / STORIES */
.playlist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.playlist-card{text-decoration:none;min-width:0}.playlist-art{aspect-ratio:1.28;border-radius:18px;overflow:hidden;background:#151517;border:1px solid rgba(255,255,255,.04)}
.playlist-art img{width:100%;height:100%;object-fit:cover;transition:.22s}.playlist-card:hover img{transform:scale(1.015);filter:brightness(.82)}
.playlist-card h3{font-size:13px;margin:11px 1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-card span{font-size:9px;color:#8d8780}
.story-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:12px}
.story{min-height:310px;border-radius:22px;overflow:hidden;position:relative;background:#151517;text-decoration:none}
.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.story:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.04) 66%)}
.story-copy{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}.story-copy small{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#d1ccc3}.story-copy b{display:block;font-size:23px;margin-top:7px}

/* PLAYER */
.player{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:180;
  display:none;
  background:rgba(12,12,14,.98);
  border-top:1px solid var(--line2);
  backdrop-filter:blur(20px);
  box-shadow:0 -16px 46px rgba(0,0,0,.28);
  overflow:hidden;
}
.player.show{display:block}

.mobile-progress{display:none}

.player-inner{
  height:88px;
  min-height:88px;
  max-height:88px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:10px var(--pad);
  overflow:hidden;
}
.now{
  flex:1 1 280px;
  min-width:180px;
  display:flex;
  align-items:center;
  gap:11px;
  overflow:hidden;
}
.now img{
  flex:0 0 58px;
  width:58px;
  height:58px;
  min-width:58px;
  max-width:58px;
  min-height:58px;
  max-height:58px;
  border-radius:12px;
  object-fit:cover;
  background:#111;
}
.now-link{min-width:0;text-decoration:none;overflow:hidden}
.now b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now span{display:block;font-size:9px;color:#827c75;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.transport{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:54px;
  min-height:54px;
  max-height:54px;
}
.pbtn{
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  max-width:42px;
  height:42px;
  min-height:42px;
  max-height:42px;
  padding:0;
  margin:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#b6b0aa;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  cursor:pointer;
  overflow:hidden;
}
.pbtn:hover{background:#242429;color:#fff}
.pbtn.main{
  flex-basis:50px;
  width:50px;
  min-width:50px;
  max-width:50px;
  height:50px;
  min-height:50px;
  max-height:50px;
  background:#f2eee6;
  color:#080809;
  font-size:17px;
  font-weight:900;
}
.pbtn.on{background:rgba(139,92,255,.17);color:#c6b2ff}
.player.loading .pbtn.main{opacity:.55}

.player-right{
  flex:1 1 400px;
  min-width:260px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.desktop-seek{
  min-width:180px;
  max-width:340px;
  flex:1 1 240px;
  display:grid;
  grid-template-columns:auto minmax(90px,1fr) auto;
  gap:7px;
  align-items:center;
  color:#77716a;
  font-size:8px;
}
.desktop-seek input{width:100%;accent-color:#fff}
.volume{width:90px;accent-color:#fff}

/* iPhone / mobile: rigid mini-player */
@media(max-width:960px){
  body.player-open{
    padding-bottom:calc(158px + env(safe-area-inset-bottom));
  }

  .player{
    left:8px !important;
    right:8px !important;
    bottom:76px !important;
    top:auto !important;
    width:auto !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    border:1px solid var(--line2);
    border-radius:16px !important;
    contain:layout paint;
    overflow:hidden !important;
  }

  .mobile-progress{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:3px;
    background:rgba(255,255,255,.12);
    z-index:3;
    pointer-events:none;
  }
  .mobile-progress i{
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,var(--violet),var(--accent));
    transition:width .12s linear;
  }

  .player-inner{
    box-sizing:border-box !important;
    width:100% !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    padding:8px 9px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    overflow:hidden !important;
  }

  .now{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    overflow:hidden !important;
  }
  .now img{
    flex:0 0 48px !important;
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    border-radius:10px !important;
  }
  .now-link{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden !important;
  }
  .now b{font-size:11px !important}
  .now span{font-size:8px !important;margin-top:3px !important}

  .transport{
    flex:0 0 96px !important;
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
    overflow:hidden !important;
  }

  .transport .secondary-control{display:none !important}

  .transport .pbtn{
    -webkit-appearance:none !important;
    appearance:none !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    align-self:center !important;
    line-height:1 !important;
    border-radius:999px !important;
    overflow:hidden !important;
  }
  .transport .pbtn.main{
    flex:0 0 46px !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    font-size:15px !important;
    background:#f2eee6 !important;
    color:#080809 !important;
  }
  .transport .next-control{
    display:flex !important;
    background:transparent !important;
    color:#d0cbc4 !important;
    font-size:24px !important;
  }

  .player-right{display:none !important}
  .desktop-seek{display:none !important}
  .volume{display:none !important}
}

@media(max-width:390px){
  .player{
    left:6px !important;
    right:6px !important;
  }
  .transport{
    flex-basis:88px !important;
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;
  }
  .transport .pbtn{
    flex-basis:38px !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
  }
  .transport .pbtn.main{
    flex-basis:44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
  }
}
/* PALETTE */
.palette{position:fixed;inset:0;z-index:230;background:rgba(0,0,0,.70);backdrop-filter:blur(12px);display:grid;place-items:start center;padding-top:min(12vh,105px);opacity:0;pointer-events:none;transition:.16s}
.palette.open{opacity:1;pointer-events:auto}.palette-box{width:min(720px,calc(100% - 24px));background:#111114;border:1px solid var(--line2);border-radius:22px;box-shadow:0 30px 100px rgba(0,0,0,.6);overflow:hidden}
.palette-head{padding:13px;border-bottom:1px solid var(--line)}.palette-head input{width:100%;height:52px;border:1px solid var(--line);border-radius:14px;background:#1a1a1e;color:#fff;padding:0 15px;font-size:13px;outline:none}
.palette-results{max-height:60vh;overflow:auto;padding:8px}.palette-item{display:grid;grid-template-columns:58px 1fr auto;gap:11px;align-items:center;padding:8px;border-radius:12px;cursor:pointer}.palette-item:hover{background:#1b1b20}.palette-item img{width:58px;height:58px;border-radius:10px;object-fit:cover}.palette-item b{display:block;font-size:12px}.palette-item span{display:block;font-size:9px;color:#817b74;margin-top:4px}.palette-item em{font-style:normal;font-size:9px;color:#77716a}

/* PAGES */
.page-head{padding:40px 0 18px}.page-head h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.055em;margin:0}.page-head p{font-size:11px;color:#8e8981;margin:8px 0 0}
.about-card{display:grid;grid-template-columns:1fr 350px;gap:24px;border:1px solid var(--line);background:#101012;border-radius:22px;padding:24px}.about-card h2{font-size:26px;margin:0 0 12px}.about-card p{font-size:12px;line-height:1.7;color:#aaa59d}.about-img{border-radius:17px;overflow:hidden;min-height:240px}.about-img img{width:100%;height:100%;object-fit:cover}
.press-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.press-card{border:1px solid var(--line);background:#101012;border-radius:20px;padding:22px}.press-card h2{font-size:20px;margin:0 0 11px}.press-card p{font-size:11px;line-height:1.75;color:#a7a29a}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gallery img{width:100%;height:360px;object-fit:cover;border-radius:18px}
.radio{display:grid;grid-template-columns:minmax(300px,520px) 1fr;gap:clamp(34px,6vw,90px);align-items:center;padding:38px 0}.radio-art{aspect-ratio:1;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 30px 90px rgba(0,0,0,.38)}.radio-art img{width:100%;height:100%;object-fit:cover}.radio-copy h1{font-size:clamp(44px,7vw,88px);line-height:.84;letter-spacing:-.06em;margin:0 0 14px}.radio-copy p{font-size:11px;color:#8e8981}
.radio-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}.radio-modes button{height:48px;border:1px solid var(--line);border-radius:14px;background:#121214;color:#aaa59d;font-size:10px;cursor:pointer}.radio-modes button:hover{background:#232328;color:#fff}.radio-modes button:last-child{grid-column:1/-1;background:linear-gradient(115deg,rgba(139,92,255,.18),rgba(255,62,181,.18));border-color:rgba(139,92,255,.26)}

.skeleton{background:linear-gradient(90deg,#111114,#1b1b20,#111114);background-size:220% 100%;animation:shimmer 1.25s linear infinite}@keyframes shimmer{to{background-position:-220% 0}}
.skeleton-card .track-cover{border:0}.skeleton-line{height:11px;border-radius:999px;margin-top:10px}.skeleton-line.short{width:58%;height:9px}
.empty{grid-column:1/-1;border:1px solid var(--line);background:#101012;border-radius:18px;padding:28px;color:#8f8982;font-size:11px;line-height:1.6}
.toast{position:fixed;right:18px;bottom:112px;z-index:240;background:#f2eee6;color:#080809;padding:13px 15px;border-radius:12px;font-size:9px;opacity:0;transform:translateY(8px);transition:.18s}.toast.show{opacity:1;transform:none}

/* MOBILE DOCK */
.mobile-dock{display:none}

/* states */
section[id]{scroll-margin-top:145px}
.profile-tabs a{transition:color .15s ease}

/* RESPONSIVE */
@media(max-width:1260px){.track-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:960px){
  .mobile-top{position:fixed;left:0;right:0;top:0;padding-inline:16px}
  .shell{padding-top:74px}
  .hero{margin-inline:-16px}
  .profile-tabs{top:74px}
  .track-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .playlist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lanes{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:1fr 1fr}.story:first-child{grid-column:1/-1}
  .mobile-dock{position:fixed;display:flex;left:8px;right:8px;bottom:8px;height:60px;z-index:170;background:rgba(18,18,21,.96);border:1px solid var(--line2);border-radius:18px;overflow:hidden;backdrop-filter:blur(18px)}
  .mobile-dock a,.mobile-dock button{flex:1;border:0;background:none;color:#b6b0aa;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:.16s}
  .mobile-dock a.active{background:#f2eee6;color:#080809}
  .mobile-dock a.active b,.mobile-dock a.active span{color:#080809}
  .mobile-dock button.shuffle{background:none;color:#b6b0aa;position:relative}
  .mobile-dock button.shuffle::after{content:"";position:absolute;top:8px;width:6px;height:6px;border-radius:50%;background:linear-gradient(115deg,var(--violet),var(--accent))}
  .mobile-dock button.shuffle.pressed{background:#242429;color:#fff;transform:scale(.98)}
  .mobile-dock b{font-size:18px;line-height:1}.mobile-dock span{font-size:8px;font-weight:700}
}
@media(max-width:720px){
  .shell{padding-inline:14px}
  .hero{height:250px;min-height:250px;margin-inline:-14px}.profile-wrap{margin-top:-58px}
  .profile-top{display:block}.profile-main{align-items:end;gap:12px}.avatar{width:106px;height:106px;border-radius:20px}.identity{padding-bottom:0}.identity h1{font-size:34px}.bio{font-size:10px}.chips{display:none}
  .profile-actions{margin-top:15px}.profile-actions .btn{min-height:46px}
  
  .profile-tabs{margin-inline:-14px;padding-inline:14px}.tabs-inner{gap:24px}
  .spotlight{grid-template-columns:126px minmax(0,1fr);border-radius:18px}.spot-copy{padding:16px}.spot-copy h3{font-size:28px}.spot-stats{display:none}.spot-actions .btn:not(.primary){display:none}.spot-art .play-orb{width:44px;height:44px;right:9px;bottom:9px;font-size:15px}
  .track-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.track-cover{border-radius:15px}.track-cover .play-orb{opacity:1;transform:none;width:46px;height:46px;right:9px;bottom:9px;font-size:16px}.track-card:hover .track-cover img{filter:none;transform:none}
  .playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
  .story{min-height:240px}.story:first-child{min-height:280px}
  .about-card{grid-template-columns:1fr}.about-img{min-height:200px}
  .press-grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery img{height:240px}
  .radio{grid-template-columns:1fr;gap:28px}.radio-art{max-width:500px}
  .mobile-top [data-open-search]{width:46px;min-width:46px;height:46px}
}
@media(max-width:430px){
  .mobile-brand{font-size:14px}
  .mobile-top .btn[href*="suno.com"]{padding:0 11px;font-size:9px}
  .profile-main{align-items:end}.avatar{width:92px;height:92px}.identity h1{font-size:29px}
  .profile-actions .btn.icon{display:none}
  .lanes{grid-template-columns:1fr 1fr}.lane{min-height:126px;padding:14px}.lane b{font-size:20px}.lane span{left:14px;bottom:12px;font-size:9px}
  .search{height:50px}.view-toggle{display:none}
}
@media(hover:none),(pointer:coarse){.track-cover .play-orb{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* V15.3 — portada fijada: cara + grafiti */
#heroImg{
  object-fit:cover !important;
  object-position:50% 50% !important;
}
@media(max-width:720px){
  #heroImg{
    object-position:50% 50% !important;
  }
}


/* V16 — CLUB FIRST + SUNO SYNC + STATS */
.club-section .section-head h2{font-size:clamp(30px,5vw,54px)}
.world-hero{
  min-height:170px;margin-bottom:20px;padding:24px 26px;border-radius:22px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;overflow:hidden
}
.club-world{
  background:
   radial-gradient(420px 200px at 90% 45%,rgba(139,92,255,.30),transparent 70%),
   radial-gradient(320px 180px at 72% 110%,rgba(110,232,255,.12),transparent 70%),
   linear-gradient(115deg,#0f0f15,#171224)
}
.latin-world{
  background:
   radial-gradient(420px 200px at 90% 45%,rgba(255,62,181,.26),transparent 70%),
   radial-gradient(320px 180px at 72% 110%,rgba(139,92,255,.14),transparent 70%),
   linear-gradient(115deg,#120e12,#1b1018)
}
.world-hero small{display:block;font-size:8px;letter-spacing:.16em;color:#9d96a2;margin-bottom:9px}
.world-hero strong{display:block;font-size:clamp(32px,6vw,70px);line-height:.85;letter-spacing:-.06em}
.world-hero span{display:block;font-size:10px;color:#9b949d;margin-top:10px}

.heart-btn{
  position:absolute;right:10px;top:10px;z-index:4;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;background:rgba(8,8,10,.74);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:23px;backdrop-filter:blur(10px)
}
.heart-btn:hover{background:#fff;color:#0a0a0b}
.track-cover .badge + .heart-btn{top:10px}

.suno-drawer{
  position:fixed;left:16px;right:16px;bottom:18px;z-index:260;max-width:920px;margin:auto;
  border:1px solid var(--line2);border-radius:20px;background:rgba(13,13,16,.98);backdrop-filter:blur(22px);
  box-shadow:0 30px 100px rgba(0,0,0,.62);transform:translateY(calc(100% + 50px));opacity:0;pointer-events:none;transition:.22s;
  overflow:hidden
}
.suno-drawer.open{transform:none;opacity:1;pointer-events:auto}
.suno-drawer-head{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 9px 18px;border-bottom:1px solid var(--line)}
.suno-drawer-head small{display:block;font-size:7px;letter-spacing:.15em;color:#a58dba}.suno-drawer-head b{display:block;font-size:12px;margin-top:4px}
.suno-drawer-actions{display:flex;gap:7px;align-items:center}
.suno-drawer-actions .btn{min-height:40px;font-size:9px}
.suno-embed-wrap iframe{display:block;width:100%;height:220px;border:0;background:#0b0b0d}
body.suno-drawer-open{padding-bottom:320px}



@media(max-width:620px){
  .world-hero{min-height:140px;padding:18px}.world-hero strong{font-size:32px}
  .world-hero .btn{min-height:44px;padding-inline:12px;font-size:9px}
  .suno-drawer-head{align-items:flex-start}.suno-drawer-actions .btn:not(.icon){padding-inline:9px;font-size:8px}
  .suno-embed-wrap iframe{height:200px}
}




/* V16.3 — cleaner profile telemetry */
.live-strip{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:17px 0 7px;
}
.live-strip #catalogHealth{display:flex;align-items:center}
.visitor-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#858078;
  font-size:9px;
}
.visitor-pill b{color:#d5d0c8;font-size:11px}
.visitor-pill.ready .visitor-eye{color:var(--cyan)}
.visitor-pill.waiting{opacity:.72}
.visitor-eye{font-size:9px;color:#77716a}

/* The first content after profile tabs must be real Club tracks. */
.club-section{padding-top:30px}

/* Prevent the first Club tab being partially clipped after Safari restores horizontal scroll. */
.tabs-inner{
  scroll-padding-inline:14px;
  overscroll-behavior-x:contain;
}
.tabs-inner a:first-child{scroll-margin-left:14px}

/* Fixed mobile dock should never cover the final page content. */
@media(max-width:960px){
  body{padding-bottom:84px}
  body.player-open{padding-bottom:calc(158px + env(safe-area-inset-bottom))}
}


/* ==========================================================
   V17 — DISCOVERY / MOTION / RECENTS
   ========================================================== */

:root{
  --glass:rgba(17,17,20,.72);
  --glow-purple:rgba(139,92,255,.24);
  --glow-pink:rgba(255,62,181,.18);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(700px 380px at 20% 8%,rgba(139,92,255,.055),transparent 70%),
    radial-gradient(650px 340px at 88% 48%,rgba(255,62,181,.04),transparent 72%);
}

.hero img{transform:scale(1.012)}
.hero:before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:38%;
  z-index:1;
  background:linear-gradient(180deg,transparent,rgba(7,7,8,.58));
  pointer-events:none;
}

.v17-ribbon{
  display:grid;
  grid-template-columns:1.35fr repeat(3,1fr);
  gap:9px;
  padding:16px 0 4px;
}
.v17-ribbon button{
  min-height:64px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  color:var(--fg);
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.v17-ribbon button:hover{border-color:var(--line2);background:#151519}
.v17-ribbon b{display:block;font-size:11px}
.v17-ribbon small{display:block;font-size:8px;color:#7e7872;margin-top:4px}
.ribbon-main{
  background:
    radial-gradient(180px 90px at 88% 50%,rgba(139,92,255,.25),transparent 72%),
    linear-gradient(145deg,#121117,#17131f)!important;
}
.pulse-dot{
  position:absolute;right:14px;top:14px;width:8px;height:8px;border-radius:50%;
  background:#a67cff;box-shadow:0 0 0 0 rgba(166,124,255,.5);animation:v17pulse 1.9s infinite
}
@keyframes v17pulse{
  0%{box-shadow:0 0 0 0 rgba(166,124,255,.45)}
  70%{box-shadow:0 0 0 9px rgba(166,124,255,0)}
  100%{box-shadow:0 0 0 0 rgba(166,124,255,0)}
}

.recent-history{padding-top:24px}
.recent-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px,280px);
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:4px;
  scrollbar-width:none;
}
.recent-strip::-webkit-scrollbar{display:none}
.recent-card{
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 38px;
  align-items:center;
  gap:10px;
  min-height:76px;
  padding:9px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#101012;
  cursor:pointer;
}
.recent-card:hover{background:#17171b;border-color:var(--line2)}
.recent-card img{width:58px;height:58px;border-radius:10px;object-fit:cover}
.recent-card div{min-width:0}
.recent-card b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-card span{display:block;font-size:8px;color:#77716a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.recent-card button{
  width:34px;height:34px;border:0;border-radius:50%;background:#f2eee6;color:#09090a;font-size:11px
}

#homeRecent .newest-lead .track-cover{
  box-shadow:0 0 0 1px rgba(166,124,255,.18),0 18px 44px rgba(0,0,0,.28)
}
#homeRecent .newest-lead .track-title:after{
  content:"NEW";
  margin-left:7px;
  padding:3px 5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--accent));
  color:white;font-size:6px;letter-spacing:.08em;vertical-align:2px
}

.page-kicker{
  font-size:8px;
  letter-spacing:.16em;
  color:#7f7972;
  margin-bottom:8px;
}

.v17-hint{
  font-size:8px!important;
  color:#5e5953!important;
  margin-top:14px!important;
}
.v17-hint b{color:#8c8580}

.track-card,.lane,.playlist-card,.story,.world-hero{
  transform:translateZ(0);
}
.track-card:hover,.playlist-card:hover,.lane:hover{
  will-change:transform;
}

@media(max-width:720px){
  .v17-ribbon{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .v17-ribbon button{min-height:58px}
  .v17-ribbon .ribbon-main{grid-column:1/-1}
  .recent-strip{grid-auto-columns:minmax(210px,82vw)}
}

@media(prefers-reduced-motion:reduce){
  .pulse-dot{animation:none}
  .hero img{transform:none}
}


/* ==========================================================
   V18 — NEON EDITORIAL
   ========================================================== */
:root{
  --mx:72%;
  --my:18%;
  --world-glow:rgba(139,92,255,.10);
}
body[data-world="club"]{--world-glow:rgba(139,92,255,.13)}
body[data-world="latin"]{--world-glow:rgba(255,62,181,.12)}
body[data-world="street"]{--world-glow:rgba(205,202,194,.07)}
body[data-world="soul"]{--world-glow:rgba(202,133,95,.11)}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(520px 520px at var(--mx) var(--my),var(--world-glow),transparent 72%);
  transition:background .6s ease;
}

.mobile-top{
  box-shadow:0 12px 44px rgba(0,0,0,.14);
}
.mobile-brand{
  position:relative;
}
.mobile-brand:after{
  content:"";
  position:absolute;
  right:-13px;
  top:50%;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(255,62,181,.7);
}

.lang-toggle{
  width:44px;
  min-width:44px;
  height:44px;
  border:1px solid var(--line2);
  border-radius:13px;
  background:#121216;
  color:#d6d0c8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
}
.lang-toggle:hover{background:#202026;color:white}

.hero{
  border-bottom:1px solid rgba(255,255,255,.04);
}
.hero img{
  filter:contrast(1.12) brightness(.62) saturate(.72);
  transform:scale(1.025);
  transition:transform 7s cubic-bezier(.2,.7,.1,1);
}
body:hover .hero img{transform:scale(1.045)}
.hero-wordmark{
  position:absolute;
  left:clamp(18px,4vw,58px);
  bottom:28px;
  z-index:2;
  font-size:clamp(74px,15vw,230px);
  line-height:.72;
  font-weight:950;
  letter-spacing:-.085em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
  text-shadow:0 0 70px rgba(139,92,255,.08);
  user-select:none;
  pointer-events:none;
}
.hero-badge{
  position:absolute;
  top:26px;
  left:var(--pad);
  z-index:3;
  display:flex;
  gap:7px;
  align-items:center;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(6,6,8,.42);
  backdrop-filter:blur(12px);
  font-size:7px;
  letter-spacing:.16em;
  color:#d6d0c8;
}
.hero-badge span{
  width:6px;height:6px;border-radius:50%;
  background:#7ff0b3;
  box-shadow:0 0 12px rgba(127,240,179,.55)
}
.hero-eq{
  position:absolute;
  right:var(--pad);
  bottom:30px;
  z-index:3;
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:44px;
  opacity:.65;
}
.hero-eq i{
  display:block;
  width:3px;
  min-height:5px;
  border-radius:3px;
  background:linear-gradient(180deg,#f6f0e8,#a67cff);
  animation:eqIdle 2.2s ease-in-out infinite alternate;
  transform-origin:bottom;
}
.hero-eq i:nth-child(3n){animation-delay:-.6s;height:14px}
.hero-eq i:nth-child(4n){animation-delay:-1.1s;height:30px}
.hero-eq i:nth-child(5n){animation-delay:-.3s;height:22px}
@keyframes eqIdle{from{transform:scaleY(.28);opacity:.35}to{transform:scaleY(1);opacity:.9}}
.audio-active .hero-eq i{animation-duration:.42s}
.audio-active .hero-eq{opacity:1}

.profile-wrap{
  background:
    linear-gradient(135deg,rgba(16,16,20,.78),rgba(7,7,8,.34));
  border-radius:26px 26px 0 0;
}
.identity h1{
  background:linear-gradient(180deg,#fff 0%,#d9d4cc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.live-strip{
  position:relative;
}
.sync-pill,.visitor-pill{
  backdrop-filter:blur(10px);
}
.visitor-pill.ready{
  border-color:rgba(110,232,255,.20);
  background:rgba(110,232,255,.035);
}
.visitor-pill.ready b{color:#e8fbff}

.signal-rail{
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
  white-space:nowrap;
  padding:17px 0 2px;
  color:#5f5a54;
  font-size:7px;
  font-weight:850;
  letter-spacing:.18em;
}
.signal-rail i{
  flex:1 1 30px;
  min-width:24px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(166,124,255,.22),rgba(255,255,255,.03))
}

.profile-tabs{
  box-shadow:0 14px 35px rgba(0,0,0,.16);
}
.tabs-inner a.active{
  text-shadow:0 0 22px rgba(255,62,181,.24);
}
.tabs-inner a.active:after{
  height:2px;
  box-shadow:0 0 18px rgba(255,62,181,.65);
}

.v18-deck{
  position:relative;
}
.v18-deck:before{display:none}
.v18-deck button{
  backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.v18-deck button:active{transform:scale(.985)}

.world-hero{
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 20px 60px rgba(0,0,0,.16);
}
.club-world:before,.latin-world:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.05),transparent 68%);
  transform:translateX(-100%);
  animation:worldSweep 8s ease-in-out infinite;
  pointer-events:none;
}
.latin-world:before{animation-delay:-3.2s}
@keyframes worldSweep{
  0%,74%{transform:translateX(-100%);opacity:0}
  82%{opacity:1}
  100%{transform:translateX(100%);opacity:0}
}

.club-section .track-grid{
  align-items:start;
}
@media(min-width:961px){
  .club-section .track-card.club-lead{
    grid-column:span 2;
    grid-row:span 2;
  }
  .club-section .track-card.club-lead .track-title{
    font-size:18px;
    letter-spacing:-.025em;
  }
  .club-section .track-card.club-lead .track-meta{
    font-size:10px;
  }
  .club-section .track-card.club-lead .track-cover{
    border-radius:24px;
    box-shadow:0 24px 80px rgba(0,0,0,.38),0 0 0 1px rgba(166,124,255,.10);
  }
  .club-section .track-card.club-lead .play-orb{
    width:64px;height:64px;font-size:20px;
  }
}

.track-cover{
  box-shadow:0 12px 36px rgba(0,0,0,.16);
}
.track-card:hover .track-cover{
  border-color:rgba(255,255,255,.12);
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.track-card:hover .track-title{color:#fff}
.heart-btn{
  transform:translateY(-2px);
  opacity:.86;
}
.track-card:hover .heart-btn{opacity:1}

.spotlight{
  box-shadow:0 28px 90px rgba(0,0,0,.25);
}
.spotlight:before{
  content:"FEATURED";
  position:absolute;
  right:22px;
  top:18px;
  font-size:7px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.14);
  z-index:2;
}

.lane{
  box-shadow:0 16px 46px rgba(0,0,0,.12);
}
.lane:hover{
  transform:translateY(-4px) scale(1.006);
}

.story:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid rgba(255,255,255,.10);
  border-radius:inherit;
  pointer-events:none;
}
.story img{transition:transform .7s cubic-bezier(.2,.7,.1,1),filter .5s}
.story:hover img{transform:scale(1.035);filter:contrast(1.04)}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.2,1);
}
.reveal.revealed{
  opacity:1;
  transform:none;
}

.suno-drawer{
  border-color:rgba(166,124,255,.22);
  box-shadow:0 30px 110px rgba(0,0,0,.72),0 0 60px rgba(139,92,255,.09);
}
.suno-drawer.open:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--accent),var(--cyan));
  z-index:4;
}

.mobile-dock{
  box-shadow:0 18px 60px rgba(0,0,0,.38);
}
.mobile-dock a.active{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.035);
}

@media(max-width:720px){
  .hero-wordmark{
    left:14px;
    bottom:18px;
    font-size:21vw;
    -webkit-text-stroke:1px rgba(255,255,255,.12);
  }
  .hero-badge{left:14px;top:14px}
  .hero-eq{right:14px;bottom:18px;height:30px}
  .hero-eq i{width:2px}
  .profile-wrap{
    border-radius:20px 20px 0 0;
  }
  .signal-rail{
    gap:8px;
    font-size:6px;
    letter-spacing:.12em;
  }
  .signal-rail span:nth-of-type(4),
  .signal-rail span:nth-of-type(5){display:none}
  .lang-toggle{
    width:42px;min-width:42px;height:42px;
  }
  body:hover .hero img{transform:scale(1.025)}
}

@media(max-width:430px){
  .top-actions{gap:6px}
  .lang-toggle{width:38px;min-width:38px;height:40px;border-radius:12px}
  .mobile-top [data-open-search]{width:42px;min-width:42px;height:42px}
  .mobile-top .btn[href*="suno.com"]{min-height:42px;padding-inline:9px}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-eq i,.club-world:before,.latin-world:before{animation:none!important}
  .hero img,body:hover .hero img{transform:none}
}


/* ==========================================================
   V19 — RELIABILITY / ACCESSIBILITY / PERFORMANCE
   ========================================================== */

:focus-visible{
  outline:2px solid rgba(166,124,255,.95);
  outline-offset:3px;
}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

.cover-hit{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:pointer;
}
.track-cover .badge{z-index:3}
.track-cover .heart-btn{z-index:4}
.track-cover .play-orb{z-index:4}
.track-cover:has(.cover-hit:focus-visible){
  box-shadow:0 0 0 2px rgba(166,124,255,.92),0 18px 48px rgba(0,0,0,.28)
}

.radio-art{position:relative}
.radio-art .cover-hit{z-index:2}

.palette-item:focus-visible{
  background:#1b1b20;
  outline:2px solid rgba(166,124,255,.8);
  outline-offset:-2px;
}

@media(max-width:720px){
  .heart-btn{
    width:44px;
    height:44px;
  }
}

/* Lower-page rendering work is deferred by the browser when supported. */
@supports (content-visibility:auto){
  #todos,#playlists,#sigue,#visual{
    content-visibility:auto;
    contain-intrinsic-size:1px 900px;
  }
}


/* ==========================================================
   V20 — TYPOGRAPHY / EDITORIAL FINAL CUT
   ========================================================== */
:root{
  --font-body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-label:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --text:#f5f2ec;
  --text-soft:#b9b3aa;
  --text-dim:#817a72;
}
body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.45;
  color:var(--text);
}
.mobile-brand,.identity h1,.section-head h2,.spot-copy h3,.world-hero strong,
.page-head h1,.radio-copy h1,.hero-wordmark,.editorial-card h3,.long-note h2,
.notes-cta h2,.about-card h2,.press-card h2,.principles-grid h3{
  font-family:var(--font-display);
  font-weight:850;
}
.eyebrow,.hero-badge,.profile-signal,.spot-label,.badge,.lane small,
.world-hero small,.signal-rail,.note-index,.editorial-card>span,.v18-deck:before{display:none}
.bio{font-size:13px;line-height:1.62;color:var(--text-soft);max-width:720px}
.section-head p{font-size:12px;line-height:1.5;color:var(--text-dim)}
.track-title{font-size:14px;letter-spacing:-.012em}
.track-meta,.track-stats{font-size:10px}
.tabs-inner a{font-size:12px}
.top-links a{font-size:11px}
.btn{font-size:11px}
.chip{font-size:10px}
.sync-pill,.visitor-pill{font-size:10px}
.world-hero span{font-size:11px}
.page-head p{font-size:13px;line-height:1.6;max-width:760px}
.about-card p,.press-card p{font-size:13px;line-height:1.72;color:var(--text-soft)}
.press-card b{color:var(--text)}

.identity h1,.page-head h1,.section-head h2,.long-note h2{
  text-wrap:balance;
}
p{widows:2;orphans:2}

/* Editorial homepage */
.editorial-home{padding-top:48px}
.editorial-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:12px;
}
.editorial-card{
  min-height:220px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  text-decoration:none;
  background:
    radial-gradient(260px 150px at 100% 100%,rgba(139,92,255,.10),transparent 70%),
    #101012;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.editorial-card--lead{grid-row:span 2;min-height:452px;justify-content:flex-end;background:
  linear-gradient(180deg,rgba(7,7,8,.05),rgba(7,7,8,.86)),
  url("/assets/images/street.webp") center/cover no-repeat}
.editorial-card:nth-child(4){grid-column:2/4}
.editorial-card:hover{transform:translateY(-3px);border-color:var(--line2)}
.editorial-card>span{font-size:8px;letter-spacing:.14em;color:#8d8580}
.editorial-card h3{font-size:clamp(22px,3vw,36px);line-height:.96;letter-spacing:-.045em;margin:14px 0 12px}
.editorial-card p{font-size:12px;line-height:1.6;color:#aaa39b;max-width:44ch;margin:0}
.editorial-card--lead p{color:#d0cac1}
.editorial-card em{font-style:normal;font-size:10px;color:#d8d2ca;margin-top:auto;padding-top:22px}

/* Project page */
.editorial-page-head{padding-top:58px;padding-bottom:28px}
.eyebrow{
  display:block;
  font-size:8px;
  letter-spacing:.16em;
  color:#8b847d;
  margin-bottom:12px;
}
.about-card--manifesto{grid-template-columns:minmax(0,1.45fr) minmax(260px,.7fr);padding:30px}
.project-principles{padding-bottom:64px}
.principles-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.principles-grid article{
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  background:#101012;
}
.principles-grid article>span{
  font-family:var(--font-label);
  font-size:8px;
  color:#68615b;
}
.principles-grid h3{font-size:18px;letter-spacing:-.025em;margin:28px 0 8px}
.principles-grid p{font-size:11px;line-height:1.6;color:#918a82;margin:0}

/* Press */
.press-grid--v20{grid-template-columns:1fr 1fr}
.press-card--wide{grid-column:1/-1;background:
  radial-gradient(460px 200px at 88% 40%,rgba(139,92,255,.13),transparent 72%),
  #101012}
.press-card--wide h2{font-size:clamp(28px,4vw,48px);letter-spacing:-.05em;max-width:18ch}

/* Notes */
.notes-head h1{font-size:clamp(50px,8vw,104px);line-height:.82}
.notes-intro{
  max-width:880px;
  padding:20px 0 56px;
}
.notes-lede{
  font-size:clamp(19px,2.5vw,30px);
  line-height:1.32;
  letter-spacing:-.025em;
  color:#d8d2c9;
  margin:0;
}
.long-note{
  display:grid;
  grid-template-columns:100px minmax(0,760px);
  gap:32px;
  padding:64px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:100px;
}
.note-index{
  font-size:12px;
  letter-spacing:.14em;
  color:#625c56;
  padding-top:7px;
}
.note-body h2{
  font-size:clamp(34px,5vw,62px);
  line-height:.92;
  letter-spacing:-.055em;
  margin:0 0 22px;
}
.note-body p{
  font-size:15px;
  line-height:1.76;
  color:#aaa39a;
  max-width:68ch;
}
.note-body .note-lead{
  font-size:20px;
  line-height:1.48;
  color:#ddd7ce;
  letter-spacing:-.018em;
}
.note-body blockquote{
  margin:32px 0 0;
  padding:0 0 0 20px;
  border-left:2px solid rgba(166,124,255,.65);
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.025em;
  color:#f0ebe3;
}
.notes-outro{padding:70px 0}
.notes-cta{
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(24px,5vw,52px);
  background:
    radial-gradient(500px 240px at 85% 50%,rgba(255,62,181,.10),transparent 72%),
    #101012;
}
.notes-cta h2{font-size:clamp(32px,5vw,62px);letter-spacing:-.055em;margin:0 0 22px;max-width:16ch}

/* Cleaner microcopy hierarchy */
.hero-badge{font-size:8px}
.signal-rail{font-size:8px}
.v18-deck b{font-size:12px}
.v18-deck small{font-size:9px}
.lane span{font-size:10px}

/* Cards get calmer typography */
.story-copy b{font-size:21px;line-height:1.05}
.story-copy small{font-size:8px}

/* Mobile */
@media(max-width:900px){
  .editorial-grid{grid-template-columns:1fr 1fr}
  .editorial-card--lead{grid-column:1/-1;grid-row:auto;min-height:360px}
  .editorial-card:nth-child(4){grid-column:auto}
  .principles-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  body{font-size:14px}
  .bio{font-size:12px}
  .section-head p{font-size:11px}
  .editorial-grid{grid-template-columns:1fr}
  .editorial-card,.editorial-card--lead{grid-column:auto;min-height:210px}
  .editorial-card--lead{min-height:320px}
  .about-card--manifesto{grid-template-columns:1fr;padding:20px}
  .principles-grid{grid-template-columns:1fr}
  .long-note{grid-template-columns:1fr;gap:12px;padding:48px 0}
  .note-index{padding-top:0}
  .note-body p{font-size:14px}
  .note-body .note-lead{font-size:18px}
  .note-body blockquote{font-size:21px}
  .press-grid--v20{grid-template-columns:1fr}
  .press-card--wide{grid-column:auto}
}


/* ==========================================================
   V20.1 — V9 COVER FRAME + V20 FINAL CUT OVERLAYS
   Exact V9 portrait source, V20 name/EQ/badge preserved.
   ========================================================== */

/* The V9 photograph was portrait. Using the original portrait source
   gives object-fit enough vertical information to frame person+mural+car
   instead of stretching a pre-cropped panoramic file. */
.hero img#heroImg{
  object-fit:cover;
  object-position:center 31%;
  filter:grayscale(1) contrast(1.14) brightness(.59);
  transform:scale(1.006);
}

/* Keep the V20 editorial treatment, but reduce the left-side veil slightly
   because the V9 framing already has strong black mass from the car. */
.hero:after{
  background:
    linear-gradient(180deg,rgba(7,7,8,.04),rgba(7,7,8,.10) 40%,rgba(7,7,8,.96)),
    linear-gradient(90deg,rgba(7,7,8,.34),transparent 64%);
}

/* Name and EQ remain part of the V20 identity and stay readable above photo. */
.hero-wordmark{
  z-index:3;
  bottom:28px;
  -webkit-text-stroke:1px rgba(255,255,255,.19);
  text-shadow:0 0 72px rgba(139,92,255,.10);
}
.hero-eq{z-index:4}
.hero-badge{z-index:4}

/* The profile overlap must stay below the big outlined wordmark. */
.profile-wrap{z-index:5}

@media(max-width:720px){
  .hero{
    height:clamp(330px,52vw,390px);
    min-height:330px;
  }
  .hero img#heroImg{
    /* On the V20 horizontal mobile banner, 31% recreates the useful
       upper-middle V9 crop: both mural faces + subject + car. */
    object-position:center 31%;
    transform:scale(1.004);
  }
  body:hover .hero img#heroImg{transform:scale(1.004)}
  .hero-wordmark{
    left:14px;
    bottom:19px;
    font-size:20.5vw;
  }
  .hero-eq{
    right:14px;
    bottom:21px;
  }
}

@media(max-width:430px){
  .hero{
    height:350px;
    min-height:350px;
  }
  .hero img#heroImg{object-position:center 31%}
}

@media(prefers-reduced-motion:reduce){
  .hero img#heroImg,
  body:hover .hero img#heroImg{transform:none}
}


/* ==========================================================
   V20.2 — COVER POLISH
   Remove hero badge and raise outlined NØXDANI wordmark.
   ========================================================== */
.hero-badge{display:none!important}

.hero-wordmark{
  bottom:54px;
}

.hero-eq{
  bottom:32px;
}

@media(max-width:720px){
  .hero-wordmark{
    bottom:52px;
  }
  .hero-eq{
    bottom:22px;
  }
}

@media(max-width:430px){
  .hero-wordmark{
    bottom:54px;
  }
}


/* ==========================================================
   V21 — PERFECT FIRST FOLD
   ========================================================== */

html{
  text-rendering:optimizeLegibility;
}
body{
  font-variant-numeric:tabular-nums;
}

/* V9 photo + V20 editorial overlay, now separated cleanly from profile. */
.hero img#heroImg{
  object-position:center 31%;
  transform:scale(1.002);
}

.hero-wordmark{
  bottom:118px;
  opacity:.72;
  -webkit-text-stroke:1px rgba(255,255,255,.145);
  text-shadow:0 0 60px rgba(139,92,255,.075);
}

.hero-eq{
  bottom:104px;
  opacity:.46;
}
.audio-active .hero-eq{opacity:.92}

/* Cleaner overlap: image remains important, profile starts sooner. */
.profile-wrap{
  padding-bottom:4px;
}
.live-strip{
  gap:18px;
  padding:10px 0 2px;
  min-height:29px;
}

/* Sync + visitors use the same editorial language, no lonely empty capsule. */
.sync-pill,.visitor-pill{
  min-height:24px;
  padding:0;
  border:0;
  background:none;
  border-radius:0;
  font-size:10px;
  color:#8d867f;
  backdrop-filter:none;
}
.sync-dot{width:7px;height:7px}
.visitor-pill{gap:7px}
.visitor-pill b{font-size:10px;color:#cfc9c1}
.visitor-pill.ready .visitor-eye{
  color:var(--cyan);
  text-shadow:0 0 10px rgba(110,232,255,.35);
}

/* Less vertical repetition before the catalog. */
.profile-actions{
  margin-top:12px;
}
.profile-tabs a{
  padding-top:14px;
  padding-bottom:13px;
}
.signal-rail{
  padding-top:13px;
}

/* Quick deck is useful on desktop; mobile already has Club + Random in hero. */
@media(max-width:720px){
  .signal-rail,
  .v18-deck{
    display:none!important;
  }
}

/* Giant outline and EQ stay inside the photograph, never on top of profile name. */
@media(max-width:720px){
  .hero{
    height:350px;
    min-height:350px;
  }
  .hero img#heroImg{
    object-position:center 31%;
    transform:scale(1.001);
  }
  body:hover .hero img#heroImg{transform:scale(1.001)}
  .hero-wordmark{
    left:14px;
    bottom:112px;
    font-size:18.8vw;
    opacity:.66;
    -webkit-text-stroke:1px rgba(255,255,255,.14);
  }
  .hero-eq{
    right:14px;
    bottom:92px;
    height:29px;
    opacity:.42;
  }
  .profile-wrap{
    margin-top:-72px;
    padding-bottom:2px;
  }
  .profile-actions{
    margin-top:11px;
    gap:8px;
  }
  .live-strip{
    padding:9px 0 1px;
  }
  .profile-tabs a{
    padding:13px 0 12px;
  }
}

/* Smaller phones: preserve the same visual hierarchy without collisions. */
@media(max-width:430px){
  .hero-wordmark{
    bottom:114px;
    font-size:18.2vw;
  }
  .hero-eq{
    bottom:93px;
  }
  .bio{
    margin-top:10px;
    line-height:1.55;
  }
  .profile-actions .btn{
    min-height:44px;
  }
}

/* Safer fixed UI on iPhone/PWA. */
@media(max-width:960px){
  body{
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
  }
  .mobile-dock{
    bottom:max(8px,env(safe-area-inset-bottom));
  }
  .suno-drawer{
    bottom:calc(76px + env(safe-area-inset-bottom));
  }
  body.suno-drawer-open{
    padding-bottom:calc(340px + env(safe-area-inset-bottom));
  }
}

/* Tabs feel deliberate when swiped horizontally. */
.tabs-inner{
  scroll-snap-type:x proximity;
}
.tabs-inner a{
  scroll-snap-align:start;
}

/* Third visual card is actually Latin. */
.story[href*="world=latin"] .story-copy b{
  color:#f1dbe9;
}

/* Avoid decorative hover GPU hints on touch. */
@media(hover:none),(pointer:coarse){
  .track-card,.lane,.playlist-card,.story,.world-hero{
    transform:none;
    will-change:auto;
  }
}


/* ==========================================================
   V22 — MOBILE SCREENSHOT POLISH
   ========================================================== */

/* Sticky tab bar: fit every label and keep the active one visible. */
.profile-tabs{
  overflow:hidden;
}
.tabs-inner{
  display:flex;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scroll-padding-inline:16px;
}
.tabs-inner::-webkit-scrollbar{display:none}
.tabs-inner a{
  flex:0 0 auto;
  min-width:max-content;
  padding-left:14px;
  padding-right:14px;
  font-size:11px;
  white-space:nowrap;
}

/* Section headings: links never wrap into ugly two-line fragments. */
.section-head{
  align-items:flex-end;
  gap:14px;
}
.section-head>a,
.section-head>button.link{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:10px;
}

/* Homepage vertical rhythm: less black air between major blocks. */
.section{
  padding-top:42px;
  padding-bottom:42px;
}
#visual{
  padding-top:34px;
}
.editorial-home{
  padding-top:34px;
}
.recent-history{
  padding-top:30px;
}

/* Energy cards were strong but surrounded by too much empty space. */
.lanes{
  margin-bottom:0;
}

/* Editorial cards: keep the image lead card cinematic, compact the text-only cards. */
.editorial-card:not(.editorial-card--lead){
  min-height:190px;
  padding:22px;
}
.editorial-card:not(.editorial-card--lead) p{
  margin-bottom:10px;
}
.editorial-card:not(.editorial-card--lead) em{
  padding-top:12px;
}

/* Stronger text readability over photography. */
.editorial-card--lead:after,
.story:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.08) 38%,rgba(0,0,0,.74));
  z-index:1;
}
.editorial-card--lead>*,
.story-copy{
  position:relative;
  z-index:2;
}
.editorial-card--lead h3,
.editorial-card--lead p,
.story-copy b{
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}

/* Playlist titles can use two lines instead of ugly ellipsis. */
.playlist-card .playlist-title,
.playlist-card h3,
.playlist-card b{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.18;
  min-height:2.36em;
}

/* The bottom dock was visually too tall in screenshots. */
@media(max-width:960px){
  .mobile-dock{
    min-height:68px;
    height:68px;
    border-radius:24px;
  }
  .mobile-dock a,
  .mobile-dock button{
    min-height:66px;
    padding-top:7px;
    padding-bottom:6px;
  }
  .mobile-dock b{
    font-size:20px;
    line-height:1;
  }
  .mobile-dock span{
    font-size:9px;
    margin-top:4px;
  }
  body{
    padding-bottom:calc(76px + env(safe-area-inset-bottom));
  }
  .suno-drawer{
    bottom:calc(70px + env(safe-area-inset-bottom));
  }
}

/* Mobile specific refinements. */
@media(max-width:720px){
  .tabs-inner a{
    padding-left:11px;
    padding-right:11px;
    font-size:10.5px;
  }

  .section{
    padding-top:34px;
    padding-bottom:34px;
  }

  .section-head{
    margin-bottom:18px;
  }

  .section-head h2{
    font-size:clamp(29px,8vw,38px);
    line-height:.98;
  }

  .section-head p{
    max-width:72vw;
  }

  /* Notes cards in screenshots were too tall. */
  .editorial-card:not(.editorial-card--lead){
    min-height:0;
    padding:22px 20px;
  }
  .editorial-card:not(.editorial-card--lead) h3{
    margin-top:8px;
    margin-bottom:10px;
    font-size:27px;
  }
  .editorial-card:not(.editorial-card--lead) em{
    margin-top:12px;
    padding-top:0;
  }

  /* Lead editorial image: stronger contrast and tighter copy. */
  .editorial-card--lead{
    min-height:340px;
    padding:24px 20px;
  }
  .editorial-card--lead h3{
    font-size:32px;
    line-height:1;
  }
  .editorial-card--lead p{
    max-width:90%;
    color:#e0dbd3;
  }

  /* Energy blocks: compact enough to show more of the next section. */
  .lanes{
    gap:10px;
  }
  .lane{
    min-height:156px;
    padding:20px;
  }

  /* Archive visual cards */
  .story-copy{
    padding:18px;
  }
  .story-copy b{
    font-size:27px;
  }

  /* Playlist grid readability */
  .playlist-grid{
    gap:18px 14px;
  }

  /* Track cards stay roomy enough for touch but not oversized. */
  .track-grid{
    gap:22px 12px;
  }
}

/* Very narrow iPhones: keep all tabs visible by shaving only a little spacing. */
@media(max-width:390px){
  .tabs-inner a{
    padding-left:9px;
    padding-right:9px;
    font-size:10px;
  }
}

/* Prevent anchor headings from hiding under sticky header + tabs. */
section[id]{
  scroll-margin-top:150px;
}
html{
  scroll-padding-top:150px;
}