*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:var(--font-family);
  font-size:15px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color var(--t-med) var(--ease),color var(--t-med) var(--ease);
}
img,picture,svg,video,canvas{display:block;max-width:100%}
img{height:auto}

svg.i{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.15em;flex:0 0 auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;overflow-wrap:break-word}
p{overflow-wrap:break-word}
[hidden]{display:none !important}
iframe{border:0}

.muted{color:var(--dim)}
.section-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 12px;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.section-title .muted{font-size:14px;font-weight:500}

::selection{background:var(--accent);color:var(--accent-contrast)}

:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.skip-link{
  position:fixed;
  top:-48px;
  left:12px;
  z-index:3000;
  padding:10px 16px;
  background:var(--accent);
  color:var(--accent-contrast);
  font-weight:700;
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus-visible{top:12px}

*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:var(--r-pill);
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:padding-box;border:2px solid transparent}
*::-webkit-scrollbar-corner{background:transparent}

#pills-bar,.group-track,#rail,#play-next-list,#recent-list{
  scrollbar-width:thin;
}
#pills-bar::-webkit-scrollbar,.group-track::-webkit-scrollbar{height:6px}

@keyframes fade-up{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
@keyframes ring-rotate{
  to{transform:rotate(360deg)}
}

@keyframes burst{
  0%{opacity:1;transform:rotate(var(--a,0deg)) translate(0,0) scale(1)}
  100%{opacity:0;transform:rotate(var(--a,0deg)) translate(26px,0) scale(.2)}
}
@keyframes shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}