:root{
  --bg-deep:#020d24;
  --bg:#041735;
  --bg-bright:#082958;
  --panel:rgba(5,24,58,.72);
  --panel-strong:rgba(6,29,67,.90);
  --panel-soft:rgba(5,20,47,.68);
  --line:rgba(194,255,95,.16);
  --line-blue:rgba(91,188,255,.14);
  --text:#f5f7fb;
  --muted:#aab8ca;
  --accent:#d8ff56;
  --accent-strong:#e8ff7a;
  --cyan:#3ddcff;
  --blue:#2a78ff;
  --shadow:0 28px 80px rgba(0,0,0,.34);
  --radius-xl:26px;
  --radius-lg:18px;
  --radius-md:15px;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg-deep);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:"Manrope",Inter,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 85%,rgba(205,255,78,.08),transparent 24%),
    radial-gradient(circle at 87% 15%,rgba(42,120,255,.22),transparent 32%),
    radial-gradient(circle at 72% 72%,rgba(61,220,255,.07),transparent 30%),
    linear-gradient(145deg,var(--bg-deep) 0%,var(--bg) 50%,var(--bg-bright) 100%);
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.background-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-2}
.ambient{position:absolute;border-radius:50%;filter:blur(72px)}
.ambient--one{width:520px;height:520px;left:-240px;bottom:-220px;background:rgba(201,255,77,.12)}
.ambient--two{width:720px;height:720px;right:-250px;top:-290px;background:rgba(24,112,255,.21)}
.ambient--three{width:460px;height:460px;right:12%;bottom:-180px;background:rgba(40,205,255,.08)}
.vinyl-ring{position:absolute;border-radius:50%;border:1px solid rgba(107,180,255,.055)}
.vinyl-ring--one{width:760px;height:760px;right:-330px;top:60px;box-shadow:0 0 0 80px rgba(81,158,255,.018),0 0 0 160px rgba(81,158,255,.012)}
.vinyl-ring--two{width:540px;height:540px;left:-300px;top:38%;border-color:rgba(220,255,108,.04);box-shadow:0 0 0 70px rgba(220,255,108,.01)}
.wave-line{position:absolute;width:64vw;height:340px;border-radius:50%;border-top:1px solid rgba(106,193,255,.04);transform:rotate(-12deg)}
.wave-line--one{left:8%;top:32%}.wave-line--two{right:-12%;bottom:4%;transform:rotate(16deg);border-top-color:rgba(219,255,95,.035)}

.site-header{
  min-height:166px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:26px;
  animation:fadeIn .55s ease both;
}

.menu-button{
  position:absolute;
  top:28px;
  left:30px;
  width:49px;
  height:49px;
  border-radius:50%;
  border:1px solid rgba(186,255,122,.18);
  background:rgba(3,17,41,.48);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  display:grid;
  place-content:center;
  gap:4.5px;
  cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
  z-index:30;
}
.menu-button:hover{transform:translateY(-1px);border-color:rgba(216,255,86,.36);background:rgba(4,24,55,.68);box-shadow:0 16px 36px rgba(0,0,0,.22),0 0 24px rgba(190,255,82,.055)}
.menu-button span{width:18px;height:1.5px;background:#dbe5f1;border-radius:99px;display:block;transition:transform .22s ease,opacity .22s ease}
.menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-button[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-button:focus-visible,.button:focus-visible,.site-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.brand{position:relative;width:122px;height:122px;display:flex;justify-content:center;align-items:center;text-decoration:none;color:white}
.brand-glow{position:absolute;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(54,153,255,.18),transparent 68%);filter:blur(18px);opacity:.75}
.brand img{width:118px;height:118px;object-fit:contain;display:block;position:relative;z-index:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.24))}
.brand-fallback{display:none;position:relative;z-index:1;text-align:center;font-size:18px;font-weight:800;line-height:1.05;letter-spacing:.04em;text-shadow:0 8px 24px rgba(0,0,0,.32)}
.brand.is-fallback img{display:none}.brand.is-fallback .brand-fallback{display:block}

.site-menu{
  position:fixed;
  top:90px;
  left:30px;
  z-index:25;
  width:250px;
  padding:10px;
  border:1px solid rgba(175,239,255,.11);
  border-radius:18px;
  background:rgba(3,17,40,.78);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  box-shadow:0 26px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.025);
  transform-origin:top left;
  animation:menuIn .22s ease both;
}
.site-menu[hidden]{display:none}
.site-menu a{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:12px;color:var(--text);text-decoration:none;font-size:14px;font-weight:650;transition:background .18s ease,color .18s ease,transform .18s ease}
.site-menu a:hover{background:rgba(255,255,255,.055);color:var(--accent);transform:translateX(2px)}
.menu-link__icon{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(89,178,255,.08);font-size:10px;color:var(--accent)}

.page-shell{width:min(900px,calc(100% - 52px));margin:58px auto 0;padding-bottom:60px;animation:pageIn .65s .06s ease both}

.now-card{
  min-height:248px;
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(125deg,rgba(5,23,55,.88) 0%,rgba(6,35,78,.84) 50%,rgba(20,71,143,.72) 100%);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
  box-shadow:var(--shadow),0 0 50px rgba(29,120,255,.08),inset 0 1px 0 rgba(255,255,255,.035);
  display:grid;
  grid-template-columns:138px minmax(0,1fr) 170px;
  align-items:center;
  gap:28px;
  padding:34px 36px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.now-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 42%);pointer-events:none;z-index:-1}
.now-card__glow{position:absolute;width:300px;height:300px;right:90px;top:-150px;border-radius:50%;background:rgba(52,170,255,.12);filter:blur(64px);z-index:-1}
.now-card__decor{position:absolute;width:360px;height:360px;right:-120px;top:-58px;opacity:.6;z-index:-1}
.disc-ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(140,211,255,.12)}
.disc-ring--two{inset:44px;border-color:rgba(147,218,255,.09)}
.disc-ring--three{inset:88px;border-color:rgba(218,255,92,.075);box-shadow:0 0 40px rgba(69,190,255,.035)}

.cover{position:relative;overflow:hidden;background:linear-gradient(145deg,#0b2d60,#164a93);flex:0 0 auto;display:grid;place-items:center}
.cover--large{width:138px;height:138px;border-radius:18px;box-shadow:0 20px 42px rgba(0,0,0,.36),0 0 28px rgba(60,177,255,.06);transition:transform .28s ease,box-shadow .28s ease;z-index:2}
.now-card:hover .cover--large{transform:translateY(-2px) rotateX(1deg) rotateY(-2deg);box-shadow:0 24px 48px rgba(0,0,0,.4),0 0 34px rgba(60,177,255,.08)}
.cover img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.cover__fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8px;font-size:13px;line-height:1.04;font-weight:800;letter-spacing:.03em;color:#f7fbff;background:linear-gradient(145deg,#09275a,#15519a)}
.cover.has-image .cover__fallback{display:none}
.cover--broken img{display:none}
.cover--broken .cover__fallback{display:grid}

.now-card__content{position:relative;z-index:2;min-width:0}
.now-card__badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eyebrow,.section-label{margin:0;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.15em}
.live-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.11em;color:rgba(245,249,255,.70)}
.live-dot,.section-heading__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(216,255,86,.34);animation:pulse 2.1s infinite}
.track-title{margin:9px 0 4px;font-size:clamp(29px,3.2vw,34px);line-height:1.08;font-weight:750;letter-spacing:-.035em;max-width:470px}
.track-artist{margin:0;font-size:19px;line-height:1.35;color:rgba(244,247,251,.76);font-weight:500;max-width:470px}
.listeners{margin:13px 0 19px;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px}
.listeners svg{width:15px;height:15px;fill:currentColor}
.player-actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.button{min-height:47px;padding:0 22px;border-radius:999px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
.button:hover{transform:translateY(-2px)}
.button--primary{background:linear-gradient(180deg,#e3ff68 0%,#cfff47 100%);color:#071329;border-color:rgba(237,255,155,.7);box-shadow:0 10px 28px rgba(199,255,57,.14),inset 0 1px 0 rgba(255,255,255,.45)}
.button--primary:hover{background:linear-gradient(180deg,#ecff84 0%,#dcff57 100%);box-shadow:0 14px 32px rgba(199,255,57,.19)}
.button--primary.is-playing{box-shadow:0 12px 34px rgba(199,255,57,.22),0 0 0 4px rgba(216,255,86,.04)}
.button--secondary{background:rgba(2,19,43,.18);color:#f5f8fb;border-color:rgba(216,255,86,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.button--secondary:hover{background:rgba(216,255,86,.055);border-color:rgba(216,255,86,.72);box-shadow:inset 0 0 24px rgba(216,255,86,.035)}
.button__icon{width:15px;height:15px;fill:currentColor}.button__icon--pause{display:none}.button--primary.is-playing .button__icon--play{display:none}.button--primary.is-playing .button__icon--pause{display:block}

.visualizer{height:92px;display:flex;align-items:center;justify-content:flex-end;gap:5px;opacity:.55;z-index:2;mask-image:linear-gradient(90deg,transparent,#000 18%,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000)}
.visualizer span{width:3px;height:22px;border-radius:999px;background:linear-gradient(180deg,rgba(216,255,86,.78),rgba(61,220,255,.48));transform-origin:center;animation:waveIdle 2.7s ease-in-out infinite;animation-play-state:paused}
.visualizer.is-playing span{animation-play-state:running}
.visualizer span:nth-child(2){height:34px;animation-delay:-.45s}.visualizer span:nth-child(3){height:48px;animation-delay:-1.2s}.visualizer span:nth-child(4){height:30px;animation-delay:-.8s}.visualizer span:nth-child(5){height:58px;animation-delay:-1.7s}.visualizer span:nth-child(6){height:41px;animation-delay:-.2s}.visualizer span:nth-child(7){height:66px;animation-delay:-1s}.visualizer span:nth-child(8){height:37px;animation-delay:-1.55s}.visualizer span:nth-child(9){height:52px;animation-delay:-.65s}.visualizer span:nth-child(10){height:31px;animation-delay:-1.35s}.visualizer span:nth-child(11){height:45px;animation-delay:-.1s}.visualizer span:nth-child(12){height:24px;animation-delay:-.95s}

.history{margin-top:28px}
.section-heading{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.section-heading__dot{width:6px;height:6px}
.section-heading__line{height:1px;flex:1;background:linear-gradient(90deg,rgba(216,255,86,.14),transparent 70%)}
.history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.history-card{min-height:82px;padding:11px;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:11px;border-radius:var(--radius-md);border:1px solid rgba(116,195,255,.095);background:rgba(4,20,47,.63);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.018);transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.history-card:hover{transform:translateY(-2px);background:rgba(7,30,67,.76);border-color:rgba(142,216,255,.18);box-shadow:0 16px 34px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.025)}
.history-card .cover{width:56px;height:56px;border-radius:11px;transition:transform .2s ease}.history-card:hover .cover{transform:scale(1.025)}
.history-card .cover__fallback{font-size:8px}
.history-card__meta{min-width:0}
.history-card__title{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15.5px;line-height:1.15;font-weight:700;color:#f6f8fb}
.history-card__artist{margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:#9fb0c4}
.history-card__time{align-self:start;padding-top:3px;color:var(--accent);font-size:10.5px;font-weight:800;letter-spacing:.02em}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(216,255,86,.28)}65%{box-shadow:0 0 0 7px rgba(216,255,86,0)}100%{box-shadow:0 0 0 0 rgba(216,255,86,0)}}
@keyframes waveIdle{0%,100%{transform:scaleY(.54);opacity:.54}50%{transform:scaleY(1.03);opacity:.95}}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media (max-width:820px){
  .page-shell{width:min(720px,calc(100% - 34px));margin-top:46px}
  .now-card{grid-template-columns:120px minmax(0,1fr);padding:30px;gap:24px}
  .cover--large{width:120px;height:120px}
  .visualizer{position:absolute;right:28px;bottom:30px;width:145px;height:60px;opacity:.26}
  .history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
  .site-header{min-height:120px;padding-top:18px}
  .menu-button{top:20px;left:18px;width:46px;height:46px}
  .site-menu{top:76px;left:16px;width:235px}
  .brand,.brand img{width:98px;height:98px}.brand-glow{width:110px;height:110px}
  .page-shell{width:calc(100% - 20px);margin-top:28px;padding-bottom:34px}
  .now-card{min-height:0;grid-template-columns:92px minmax(0,1fr);align-items:start;gap:17px;padding:22px 18px 20px;border-radius:22px}
  .cover--large{width:92px;height:92px;border-radius:15px}
  .now-card__badges{gap:9px}.eyebrow{font-size:9.5px}.live-badge{font-size:9px}
  .track-title{font-size:25px;margin-top:7px}.track-artist{font-size:15.5px}
  .listeners{grid-column:1/-1;margin:12px 0 0}.player-actions{grid-column:1/-1;width:100%;margin-top:2px}
  .now-card__content{display:contents}
  .now-card__content .now-card__badges,.now-card__content .track-title,.now-card__content .track-artist{grid-column:2;min-width:0}
  .button{flex:1 1 100%;min-height:48px}.visualizer{display:none}
  .now-card__decor{width:250px;height:250px;right:-115px;top:18px;opacity:.34}
  .history{margin-top:24px}.history-grid{grid-template-columns:1fr;gap:10px}
  .history-card{min-height:78px}.history-card__title{font-size:15.5px}
}