@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{
  font-family:'DM Sans',Arial,sans-serif;
  color:#fff;
  background:#000;
  font-synthesis:none
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  min-width:320px
}
button,input{
  font:inherit
}
button{
  cursor:pointer
}
button:focus-visible,input:focus-visible{
  outline:2px solid #1ed760;
  outline-offset:2px
}
[hidden]{
  display:none!important
}
svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.icon-library{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.panel{
  background:#121212;
  border-radius:8px
}
.app-shell{
  height:calc(100vh - 88px);
  padding:8px;
  display:grid;
  grid-template-columns:278px minmax(0,1fr) 280px;
  gap:8px;
  overflow:hidden
}
.left-column{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0
}
.nav-panel{
  padding:23px 12px 14px
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  margin-bottom:18px;
  text-decoration:none;
  color:white;
  font-size:22px;
  letter-spacing:-1.1px
}
.brand strong{
  font-weight:800
}
.brand small{
  font-size:7px;
  letter-spacing:1px;
  border:1px solid #777;
  border-radius:3px;
  padding:2px 3px;
  margin-left:-4px;
  align-self:start;
  margin-top:5px
}
.brand-mark{
  width:29px;
  height:29px;
  border-radius:50%;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  transform:rotate(13deg);
  flex:none
}
.brand-mark span{
  width:19px;
  height:2px;
  background:#111;
  border-radius:50%
}
.brand-mark span:nth-child(2){
  width:17px
}
.brand-mark span:nth-child(3){
  width:13px
}
.primary-nav{
  display:grid;
  gap:4px
}
.nav-link{
  display:flex;
  align-items:center;
  gap:17px;
  border:0;
  background:transparent;
  color:#a7a7a7;
  font-weight:800;
  font-size:14px;
  text-align:left;
  height:42px;
  width:100%;
  padding:0 12px
}
.nav-link:hover,.nav-link.active{
  color:#fff
}
.nav-link svg{
  width:23px;
  height:23px;
  stroke-width:2.4
}
.library-panel{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:12px 8px 10px
}
.library-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 7px 9px 4px
}
.library-title{
  width:auto;
  height:37px
}
.plus-button{
  border:0;
  background:none;
  color:#a7a7a7;
  font-size:30px;
  line-height:1;
  padding:0 6px
}
.plus-button:hover{
  color:#fff
}
.library-filters{
  display:flex;
  gap:7px;
  padding:0 10px 13px
}
.library-chip{
  border:0;
  background:#232323;
  color:#fff;
  font-size:12px;
  border-radius:20px;
  padding:7px 13px
}
.library-chip:hover,.library-chip.active{
  background:#333
}
.library-search-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#a7a7a7;
  padding:4px 13px 12px;
  font-size:11px
}
.library-search-line svg{
  width:17px;
  height:17px
}
.playlist-nav{
  display:grid;
  gap:2px;
  overflow-y:auto;
  align-content:start
}
.playlist-item{
  background:transparent;
  border:0;
  border-radius:4px;
  color:#fff;
  width:100%;
  padding:7px;
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  min-width:0
}
.playlist-item:hover,.playlist-item.selected{
  background:#232323
}
.playlist-item>span:last-child{
  min-width:0
}
.playlist-item strong,.playlist-item small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.playlist-item strong{
  font-size:13px;
  font-weight:700
}
.playlist-item small{
  font-size:11px;
  color:#a7a7a7;
  margin-top:4px
}
.playlist-cover,.quick-cover{
  width:48px;
  height:48px;
  border-radius:4px;
  display:grid;
  place-items:center;
  flex:none;
  font-size:28px;
  font-weight:700;
  overflow:hidden;
  box-shadow:0 2px 7px #0005
}
.liked-cover{
  background:linear-gradient(135deg,#44269d,#9189c8);
  color:#fff
}
.liked-cover svg{
  fill:currentColor;
  stroke:currentColor;
  width:22px;
  height:22px
}
.local-cover{
  background:#333;
  color:#b3b3b3
}
.library-help{
  margin:auto 7px 0;
  padding:15px 12px;
  background:#242424;
  border-radius:8px
}
.library-help p{
  font-size:12px;
  font-weight:700;
  margin:0 0 12px
}
.library-help button{
  border:0;
  background:#fff;
  color:#111;
  border-radius:20px;
  padding:7px 12px;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:7px
}
.library-help button:hover{
  transform:scale(1.03)
}
.library-help button svg{
  width:13px;
  height:13px
}
.main-content{
  min-width:0;
  overflow:hidden;
  background:linear-gradient(#304b3b 0,#242d27 210px,#1a1a1a 390px,#121212 530px);
  display:flex;
  flex-direction:column
}
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  flex:none;
  gap:12px
}
.history-buttons{
  display:flex;
  gap:8px
}
.history-buttons button,.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  display:grid;
  place-items:center;
  background:#0009;
  color:#fff
}
.history-buttons button:nth-child(2) svg{
  transform:rotate(180deg)
}
.history-buttons button:disabled{
  cursor:not-allowed;
  opacity:.35
}
.history-buttons svg{
  width:16px;
  height:16px
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:12px
}
.top-search{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:25px;
  background:#242b26;
  color:#b3b3b3;
  padding:8px 14px;
  font-size:11px;
  min-width:180px;
  text-align:left
}
.top-search:hover{
  background:#303a33;
  color:#fff
}
.top-search svg{
  width:15px;
  height:15px
}
.app-badge{
  background:#0b0d0b;
  color:#ddd;
  border:1px solid #ffffff19;
  border-radius:16px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  padding:8px 11px;
  white-space:nowrap
}
.avatar{
  background:#c46e42;
  color:#1b100a;
  font-size:13px;
  font-weight:800;
  border:5px solid #080808;
  width:39px;
  height:39px
}
.main-scroll{
  overflow:auto;
  padding:0 24px 26px;
  scrollbar-color:#555 transparent;
  scrollbar-width:thin
}
.home-top{
  padding-top:7px
}
.welcome-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}
.welcome-line h1{
  font-size:29px;
  letter-spacing:-.7px;
  margin:4px 0 21px;
  font-weight:800
}
.welcome-line span{
  font-size:11px;
  color:#ddd
}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:35px
}
.quick-tile{
  height:64px;
  border:0;
  border-radius:4px;
  background:#ffffff26;
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
  position:relative;
  text-align:left;
  padding:0;
  transition:background .16s
}
.quick-tile:hover{
  background:#ffffff45
}
.quick-tile strong{
  font-size:12px;
  line-height:1.2;
  padding-right:8px
}
.quick-cover{
  width:64px;
  height:64px;
  border-radius:0;
  font-size:33px;
  box-shadow:4px 0 15px #0004
}
.quick-play,.card-play{
  background:#1ed760;
  color:#000;
  border-radius:50%;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  position:absolute;
  right:10px;
  bottom:12px;
  box-shadow:0 8px 16px #0008;
  opacity:0;
  transform:translateY(6px);
  transition:.18s
}
.quick-tile:hover .quick-play,.featured-card:hover .card-play{
  opacity:1;
  transform:none
}
.quick-play svg,.card-play svg{
  fill:currentColor;
  width:18px;
  height:18px;
  margin-left:2px
}
.section-block{
  margin-bottom:33px
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin-bottom:13px
}
.section-heading h2{
  font-size:21px;
  letter-spacing:-.4px;
  margin:0;
  font-weight:800
}
.section-heading p{
  font-size:11px;
  color:#b3b3b3;
  margin:5px 0 0
}
.show-all{
  border:0;
  background:none;
  color:#b3b3b3;
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}
.show-all:hover{
  text-decoration:underline;
  color:#fff
}
.featured-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}
.featured-card{
  border:0;
  border-radius:6px;
  background:#181818;
  color:#fff;
  text-align:left;
  padding:12px;
  min-width:0;
  transition:background .2s
}
.featured-card:hover{
  background:#282828
}
.card-art{
  width:100%;
  aspect-ratio:1;
  border-radius:4px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 7px 17px #0006
}
.card-art:before,.now-art:before{
  content:'';
  width:90%;
  height:90%;
  border:2px solid #ffffff35;
  border-radius:50%;
  position:absolute;
  left:5%;
  top:5%;
  box-shadow:0 0 0 17px #ffffff12,0 0 0 36px #ffffff12
}
.card-art:after,.now-art:after{
  content:'';
  width:60%;
  height:60%;
  border:1px solid #ffffff28;
  border-radius:50%;
  position:absolute;
  left:20%;
  top:20%
}
.card-shape{
  font-size:clamp(44px,5vw,90px);
  line-height:1;
  filter:drop-shadow(6px 8px 5px #0005);
  z-index:1;
  transform:rotate(-13deg)
}
.card-play{
  right:8px;
  bottom:8px;
  width:40px;
  height:40px;
  z-index:2
}
.featured-card strong,.featured-card small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.featured-card strong{
  font-size:13px;
  margin:12px 0 5px
}
.featured-card small{
  font-size:11px;
  color:#a7a7a7
}
.art-purple{
  background:linear-gradient(135deg,#40378f,#8c51b5 55%,#d19bdb);
  color:#e6c1ff
}
.art-orange{
  background:linear-gradient(135deg,#8a311f,#df6636 52%,#ffc169);
  color:#ffe2ac
}
.art-blue{
  background:linear-gradient(135deg,#12476a,#267daf 54%,#a2dded);
  color:#d5f5ff
}
.art-pink{
  background:linear-gradient(135deg,#6c254c,#bc537e 54%,#f5adb7);
  color:#fbd4dc
}
.art-green{
  background:linear-gradient(135deg,#164b47,#529e6f 60%,#c5d983);
  color:#e4ffd5
}
.art-gold{
  background:linear-gradient(135deg,#74502d,#bd8542 55%,#eec882);
  color:#fff2c9
}
.tracks-section{
  padding-top:4px
}
.section-kicker{
  display:block;
  font-size:10px;
  letter-spacing:1px;
  color:#b3b3b3;
  font-weight:800;
  margin-bottom:5px
}
.accent-period{
  color:#1ed760
}
.table-wrap{
  max-width:100%
}
.track-head,.track-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 105px 46px 29px;
  align-items:center;
  gap:12px
}
.track-head{
  height:33px;
  color:#a7a7a7;
  font-size:11px;
  border-bottom:1px solid #ffffff2a;
  padding:0 12px
}
.track-row{
  width:100%;
  height:58px;
  padding:0 12px;
  border:0;
  border-radius:4px;
  background:none;
  text-align:left;
  color:#fff
}
.track-row:hover,.track-row.is-playing{
  background:#ffffff19
}
.track-number,.genre,.track-time{
  color:#a7a7a7;
  font-size:12px
}
.track-row.is-playing .track-number,.track-row.is-playing .row-meta strong{
  color:#1ed760
}
.track-title-cell{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0
}
.row-art{
  width:40px;
  height:40px;
  border-radius:3px;
  display:grid;
  place-items:center;
  font-size:24px;
  flex:none
}
.row-meta{
  min-width:0
}
.row-meta strong,.row-meta span{
  display:block;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}
.row-meta strong{
  font-size:12px
}
.row-meta span{
  font-size:11px;
  color:#a7a7a7;
  margin-top:3px
}
.row-like{
  border:0;
  background:none;
  color:#a7a7a7;
  padding:5px;
  display:grid;
  place-items:center
}
.row-like svg{
  width:17px;
  height:17px
}
.liked,.row-like:hover,.like-button:hover{
  color:#1ed760!important
}
.liked svg{
  fill:#1ed760
}
.page-footer{
  border-top:1px solid #ffffff20;
  margin-top:38px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#a7a7a7;
  font-size:10px
}
.now-panel{
  padding:17px;
  overflow-y:auto;
  scrollbar-color:#555 transparent;
  scrollbar-width:thin
}
.now-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  font-size:13px
}
.now-heading button,.queue-heading button{
  border:0;
  color:#a7a7a7;
  background:none;
  display:grid;
  place-items:center
}
.now-heading button:hover,.queue-heading button:hover{
  color:#fff
}
.now-heading svg{
  width:17px;
  height:17px
}
.now-art{
  width:100%;
  aspect-ratio:1;
  border-radius:5px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 6px 20px #0005
}
.art-shape{
  font-size:100px;
  z-index:1;
  filter:drop-shadow(8px 10px 5px #0005)
}
.art-code{
  position:absolute;
  left:13px;
  bottom:12px;
  color:#fff;
  font-size:8px;
  letter-spacing:1.4px;
  z-index:2
}
.now-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:16px 0 23px
}
.now-info h2{
  font-size:19px;
  margin:0 0 3px;
  letter-spacing:-.4px
}
.now-info p{
  margin:0;
  color:#b3b3b3;
  font-size:12px
}
.icon-button{
  border:0;
  background:none;
  color:#a7a7a7;
  display:grid;
  place-items:center
}
.artist-card{
  background:linear-gradient(145deg,#3a4c42,#1b281f);
  border-radius:6px;
  padding:15px;
  min-height:135px
}
.artist-card>span{
  font-size:13px;
  font-weight:800
}
.track-description{
  font-size:11px;
  line-height:1.5;
  color:#d1d8d2;
  margin:15px 0 12px
}
.artist-card small{
  font-size:10px;
  color:#afc2b3
}
.next-up{
  margin-top:22px
}
.next-up>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}
.next-up strong{
  font-size:13px
}
.next-up button{
  border:0;
  background:none;
  color:#a7a7a7;
  font-size:10px;
  font-weight:800
}
.next-up button:hover{
  text-decoration:underline;
  color:#fff
}
.next-up p{
  font-size:11px;
  color:#b3b3b3
}
.player{
  height:88px;
  background:#000;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  padding:9px 16px;
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(290px,1.2fr) minmax(175px,1fr);
  align-items:center;
  gap:20px
}
.player-track{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0
}
.player-art{
  width:56px;
  height:56px;
  border-radius:4px;
  display:grid;
  place-items:center;
  font-size:30px;
  flex:none
}
.player-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px
}
.player-meta strong,.player-meta span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.player-meta strong{
  font-size:12px
}
.player-meta span{
  font-size:10px;
  color:#b3b3b3
}
.player-track .like-button{
  margin-left:8px
}
.player-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px
}
.player-buttons{
  display:flex;
  align-items:center;
  gap:19px
}
.control-small,.control-play{
  border:0;
  background:none;
  color:#a7a7a7;
  padding:3px;
  display:grid;
  place-items:center
}
.control-small:hover,.control-small.active{
  color:#1ed760
}
.control-small.active:after{
  content:'';
  width:4px;
  height:4px;
  background:#1ed760;
  border-radius:50%;
  position:absolute;
  transform:translateY(13px)
}
.control-small svg{
  width:17px;
  height:17px
}
.control-play{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  color:#000
}
.control-play:hover{
  transform:scale(1.07)
}
.control-play svg{
  width:17px;
  height:17px;
  fill:currentColor
}
.timeline{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  color:#a7a7a7;
  font-size:10px
}
.timeline input{
  flex:1
}
.player-extras{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px
}
.player-extras .volume-icon{
  width:18px;
  color:#a7a7a7
}
.player-extras input{
  width:90px
}
input[type=range]{
  appearance:none;
  height:4px;
  background:#535353;
  border-radius:5px;
  cursor:pointer;
  accent-color:#1ed760
}
input[type=range]:hover{
  background:#1ed760
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#fff
}
.empty-state{
  text-align:center;
  padding:50px 10px;
  font-size:12px;
  color:#b3b3b3
}
.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  background:#242424;
  border-radius:25px;
  padding:0 16px;
  max-width:420px;
  margin-bottom:20px
}
.search-box svg{
  color:#fff;
  width:18px
}
.search-box input{
  border:0;
  background:transparent;
  color:#fff;
  outline:0;
  width:100%;
  height:43px;
  font-size:12px
}
.search-box input::placeholder{
  color:#a7a7a7
}
.queue-drawer{
  position:fixed;
  right:8px;
  bottom:96px;
  width:290px;
  max-height:min(500px,70vh);
  overflow:auto;
  z-index:19;
  box-shadow:0 10px 50px #000b;
  padding:17px
}
.queue-heading{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.queue-heading h2{
  font-size:17px;
  margin:0
}
.queue-drawer>p{
  color:#b3b3b3;
  font-size:11px;
  margin:20px 0 8px
}
.queue-item{
  border:0;
  background:transparent;
  width:100%;
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:7px 3px;
  border-radius:4px
}
.queue-item:hover{
  background:#242424
}
.queue-item .row-art{
  width:39px;
  height:39px
}
.queue-item strong,.queue-item small{
  display:block
}
.queue-item strong{
  font-size:12px
}
.queue-item small{
  color:#aaa;
  font-size:10px;
  margin-top:3px
}
@media(max-width:1170px){
  .app-shell{
    grid-template-columns:250px minmax(0,1fr)
  }
  .now-panel{
    display:none
  }
  .app-shell.show-now{
    grid-template-columns:250px minmax(0,1fr) 250px
  }
  .app-shell.show-now .now-panel{
    display:block
  }
  .featured-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .featured-card:nth-child(4){
    display:none
  }
}
@media(max-width:820px){
  .app-shell{
    grid-template-columns:72px minmax(0,1fr)
  }
  .left-column{
    gap:8px
  }
  .nav-panel{
    padding:16px 6px
  }
  .brand{
    justify-content:center;
    padding:0;
    margin:0 0 18px
  }
  .brand strong,.brand small,.nav-link span,.library-heading .plus-button,.library-filters,.library-search-line,.playlist-item>span:last-child,.library-help{
    display:none
  }
  .nav-link{
    justify-content:center;
    padding:0
  }
  .library-panel{
    padding:10px 6px
  }
  .library-title{
    margin:0 auto
  }
  .playlist-item{
    justify-content:center
  }
  .app-shell.show-now{
    grid-template-columns:72px minmax(0,1fr)
  }
  .app-shell.show-now .now-panel{
    display:none
  }
  .quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .top-search{
    min-width:0
  }
  .top-search span,.app-badge{
    display:none
  }
  .featured-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .player{
    grid-template-columns:minmax(120px,1fr) minmax(230px,1.2fr) 70px
  }
  .player-extras .volume-icon,.player-extras input{
    display:none
  }
}
@media(max-width:560px){
  .app-shell{
    display:block;
    height:calc(100vh - 138px);
    padding:0
  }
  .left-column{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:54px;
    z-index:22;
    background:#000;
    display:block
  }
  .nav-panel{
    height:54px;
    padding:3px 5px;
    background:#000
  }
  .brand,.library-panel{
    display:none
  }
  .primary-nav{
    display:flex;
    justify-content:space-around;
    height:100%
  }
  .primary-nav .nav-link{
    display:flex;
    flex-direction:column;
    gap:1px;
    width:50%;
    height:48px;
    font-size:10px
  }
  .nav-link span{
    display:block
  }
  .primary-nav .nav-link svg{
    width:20px;
    height:20px
  }
  .main-content{
    height:calc(100vh - 138px);
    border-radius:0
  }
  .topbar{
    height:54px;
    padding:0 15px
  }
  .main-scroll{
    padding:0 15px 70px
  }
  .welcome-line h1{
    font-size:23px;
    margin-bottom:15px
  }
  .quick-grid{
    gap:7px;
    margin-bottom:27px
  }
  .quick-tile{
    height:54px;
    gap:7px
  }
  .quick-cover{
    width:54px;
    height:54px;
    font-size:27px
  }
  .quick-tile strong{
    font-size:10px
  }
  .quick-play{
    display:none
  }
  .featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .featured-card:nth-child(4){
    display:block
  }
  .featured-card{
    padding:8px
  }
  .featured-card strong{
    font-size:11px
  }
  .featured-card small{
    font-size:9px
  }
  .card-shape{
    font-size:55px
  }
  .track-head,.track-row{
    grid-template-columns:25px minmax(0,1fr) 40px 24px;
    gap:6px
  }
  .track-head span:nth-child(3),.genre{
    display:none
  }
  .track-row{
    padding:0 4px
  }
  .track-head{
    padding:0 4px
  }
  .page-footer{
    display:block;
    line-height:1.8
  }
  .page-footer span{
    display:block
  }
  .player{
    height:84px;
    bottom:54px;
    border-radius:7px;
    margin:0 6px;
    padding:6px 10px;
    grid-template-columns:minmax(0,1fr) auto;
    background:#243629;
    gap:6px
  }
  .player-art{
    width:43px;
    height:43px;
    font-size:25px
  }
  .player-meta strong{
    font-size:11px
  }
  .player-track .like-button{
    display:none
  }
  .player-center{
    width:auto
  }
  .player-buttons{
    gap:6px
  }
  .player-buttons .control-small:not(#next){
    display:none
  }
  .player-buttons #next{
    color:#fff
  }
  .player-buttons #next svg{
    width:21px;
    height:21px
  }
  .control-play{
    background:none;
    color:#fff;
    width:28px
  }
  .control-play svg{
    width:21px;
    height:21px
  }
  .timeline,.player-extras{
    display:none
  }
  .queue-drawer{
    right:6px;
    bottom:145px;
    max-width:calc(100vw - 12px)
  }
  .section-heading h2{
    font-size:19px
  }
}
/* Small controls and layout states used by the plain-JavaScript interactions. */
.mobile-library-link,#mobile-upload{
  display:none
}
.app-shell.now-hidden{
  grid-template-columns:278px minmax(0,1fr)
}
@media(max-width:1170px){
  .app-shell.now-hidden{
    grid-template-columns:250px minmax(0,1fr)
  }
}
@media(max-width:820px){
  .app-shell.now-hidden{
    grid-template-columns:72px minmax(0,1fr)
  }
}
@media(max-width:560px){
  .mobile-library-link{
    display:flex
  }
  .primary-nav .nav-link{
    width:33.333%
  }
  #mobile-upload{
    display:grid;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:#242424;
    color:#fff;
    place-items:center
  }
  #mobile-upload svg{
    width:16px;
    height:16px
  }
  .app-shell.now-hidden{
    display:block
  }
}
.page-footer a,.artist-card a{
  color:#d3e1d4;
  text-decoration:underline;
  text-underline-offset:2px
}
.artist-card a{
  display:inline-block;
  font-size:10px;
  line-height:1.4
}
.credits-page{
  min-height:100vh;
  padding:28px;
  background:#0c0c0c
}
.credits-card{
  max-width:650px;
  margin:0 auto;
  padding:28px;
  background:#181818;
  border-radius:10px
}
.credits-card h1{
  margin:24px 0 12px;
  font-size:32px
}
.credits-card p,.credits-card li{
  color:#c5c5c5;
  font-size:14px;
  line-height:1.7
}
.credits-card ul{
  padding-left:20px
}
.credits-card li{
  padding:3px 0
}
.credits-card a{
  color:#1ed760;
  text-underline-offset:3px
}
.credits-back{
  font-size:13px;
  font-weight:800
}
.artist-embed-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px
}
.artist-embed-card{
  min-width:0;
  padding:14px;
  border-radius:10px;
  background:#202020
}
.artist-embed-card h3{
  margin:0 0 12px;
  font-size:16px
}
.artist-embed-card a{
  display:inline-block;
  margin-top:12px;
  color:#1ed760;
  font-size:12px;
  font-weight:700;
  text-underline-offset:3px
}
.artist-link-card{
  min-height:118px;
  display:flex;
  align-items:center;
  gap:16px;
  color:#fff;
  text-decoration:none;
  transition:transform .18s,filter .18s
}
.artist-link-card:hover{
  transform:translateY(-3px);
  filter:brightness(1.12)
}
.artist-link-card h3{
  margin:0 0 7px
}
.artist-link-card small{
  color:#fff;
  font-size:11px;
  opacity:.85
}
.artist-monogram{
  width:68px;
  height:68px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0005;
  border:1px solid #ffffff40;
  font-size:23px;
  font-weight:800;
  box-shadow:0 8px 20px #0005
}
@media(max-width:760px){
  .artist-embed-grid{
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}