:root{
  --bg:#06110d;
  --bg2:#0a2218;
  --panel:rgba(7,24,18,.72);
  --panel2:rgba(10,37,27,.78);
  --line:rgba(173,255,194,.12);
  --green:#7de08d;
  --green2:#b6ef76;
  --mint:#8fe7cf;
  --text:#f5fff8;
  --muted:#c8d7cd;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 82% 12%,rgba(104,210,138,.18),transparent 24%),
    radial-gradient(circle at 20% 50%,rgba(42,156,116,.14),transparent 28%),
    linear-gradient(135deg,#040b08 0%,#071b13 38%,#0a2f22 72%,#06110d 100%);
  background-attachment:fixed;
}

/* HERO */
header{
  position:relative!important;
  min-height:360px!important;
  overflow:hidden!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  border-bottom:1px solid var(--line)!important;
  background:
    linear-gradient(90deg,rgba(3,12,9,.98) 0%,rgba(5,24,17,.94) 46%,rgba(6,30,22,.48) 72%,rgba(4,15,11,.28) 100%)!important;
}

header:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 30%,rgba(104,224,150,.14),transparent 24%),
    radial-gradient(circle at 35% 80%,rgba(39,177,131,.10),transparent 32%);
  pointer-events:none;
}

.music-hero-title{
  position:relative!important;
  z-index:4!important;
  width:58%!important;
  padding:54px 40px 44px 7%!important;
  text-align:left!important;
  color:white!important;
  font-size:clamp(56px,7vw,96px)!important;
  line-height:.88!important;
  font-weight:300!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  text-shadow:0 8px 32px rgba(0,0,0,.35)!important;
}

.music-hero-title span{
  display:block!important;
  margin-top:20px!important;
  color:var(--green)!important;
  font-size:.34em!important;
  line-height:1.1!important;
  font-weight:700!important;
  letter-spacing:.16em!important;
}

.kicker{
  position:absolute!important;
  left:7%!important;
  bottom:42px!important;
  z-index:5!important;
  color:rgba(245,255,248,.78)!important;
  font-size:13px!important;
  letter-spacing:.22em!important;
  font-weight:700!important;
}

/* REAL PHOTO - UNALTERED FILE */
.mark-hero-photo{
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:40%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 18%!important;
  border-radius:0!important;
  border:0!important;
  box-shadow:none!important;
  z-index:2!important;
}

header:after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:48%;
  height:100%;
  z-index:3;
  background:
    linear-gradient(90deg,rgba(4,14,10,1) 0%,rgba(4,14,10,.72) 18%,rgba(4,14,10,.12) 58%,rgba(4,14,10,.05) 100%);
  pointer-events:none;
}

/* TOP CONTROLS */
.top-controls{
  max-width:none!important;
  margin:0!important;
  padding:18px 20px!important;
  display:flex!important;
  justify-content:center!important;
  gap:12px!important;
  background:#08120f!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
}

.master-btn,
.play-one,
.category-actions button{
  border:1px solid rgba(190,255,190,.16)!important;
  background:linear-gradient(180deg,#9be66d,#68bd61)!important;
  color:#07160d!important;
  border-radius:999px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;
  box-shadow:0 8px 22px rgba(0,0,0,.16)!important;
  transition:.16s ease!important;
}

.master-btn:hover,
.play-one:hover,
.category-actions button:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.04)!important;
}

/* NOW PLAYING */
#nowPlaying{
  max-width:1040px!important;
  margin:24px auto 26px!important;
  padding:15px 20px!important;
  color:#eefaf2!important;
  background:rgba(8,25,18,.72)!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  box-shadow:0 16px 40px rgba(0,0,0,.14)!important;
}

/* CATEGORIES */
.category{
  max-width:1040px!important;
  margin:10px auto!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:rgba(5,20,15,.64)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.10)!important;
}

.category-toggle{
  width:100%!important;
  padding:18px 22px!important;
  border:0!important;
  border-radius:0!important;
  background:
    linear-gradient(90deg,rgba(13,49,35,.96),rgba(9,33,24,.90))!important;
  color:#f4fff7!important;
  text-align:left!important;
  font-size:18px!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  box-shadow:none!important;
}

.category-toggle:hover{
  background:
    linear-gradient(90deg,rgba(17,60,43,.98),rgba(10,38,27,.92))!important;
}

.category-toggle .arrow{
  float:right!important;
  color:var(--green2)!important;
  font-size:22px!important;
}

.category-body{
  background:rgba(3,14,10,.46)!important;
}

.category-actions{
  padding:14px 18px!important;
  background:rgba(255,255,255,.01)!important;
  border-top:1px solid rgba(255,255,255,.03)!important;
}

/* TRACKS */
.track{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  padding:11px 18px!important;
  border-top:1px solid rgba(185,255,198,.07)!important;
  background:transparent!important;
}

.track:hover{
  background:rgba(125,224,141,.045)!important;
}

.track-title{
  flex:1!important;
  color:#f3fff6!important;
  font-size:15px!important;
  font-weight:500!important;
}

.play-one{
  min-width:76px!important;
  padding:8px 14px!important;
  font-size:13px!important;
}

/* FOOTER */
footer{
  margin-top:34px!important;
  color:rgba(235,255,239,.58)!important;
  border-top:1px solid rgba(190,255,205,.08)!important;
  background:#050d0a!important;
}

/* MOBILE */
@media(max-width:900px){
  header{
    min-height:430px!important;
    align-items:flex-end!important;
  }

  .mark-hero-photo{
    width:100%!important;
    height:100%!important;
    opacity:.46!important;
  }

  header:after{
    width:100%!important;
    background:
      linear-gradient(180deg,rgba(4,14,10,.18) 0%,rgba(4,14,10,.64) 48%,rgba(4,14,10,.96) 100%)!important;
  }

  .music-hero-title{
    width:100%!important;
    padding:40px 24px 88px!important;
    font-size:clamp(48px,12vw,72px)!important;
  }

  .kicker{
    left:24px!important;
    bottom:38px!important;
  }
}

@media(max-width:700px){
  .category{margin:10px!important}
  .track{padding:10px 12px!important}
}