.player{gap:10px;max-width:calc(100vw - 16px);max-width:calc(100dvw - 16px)}
.player .now{min-width:0}
.player .skip,.player .play{flex:none}
.player .player-grip{
  display:grid;place-items:center;flex:none;width:22px;align-self:stretch;padding:0;
  border:0;background:transparent;box-shadow:none;cursor:grab;touch-action:none;color:#796752;
}
.player-grip span{
  width:4px;height:4px;border-radius:50%;background:currentColor;
  box-shadow:6px 0 currentColor,0 -6px currentColor,6px -6px currentColor,0 6px currentColor,6px 6px currentColor;
  transform:translateX(-3px) scale(.72);
}
.player[data-dragging] .player-grip{cursor:grabbing}
.player .record{
  position:relative;isolation:isolate;display:grid;place-items:center;width:60px;height:60px;
  padding:0;overflow:hidden;flex:none;animation:none;transform:none;
  border:1px solid #131313;border-radius:50%;background:#101010;
  box-shadow:0 1px 0 #4b4844,0 3px 1px #171716,0 6px 11px #2a21164f;
}
.player .record::after{
  z-index:2;inset:0;pointer-events:none;
  background:conic-gradient(from 14deg,transparent 0 7%,#fff2 13%,transparent 23% 54%,#fff2 63%,transparent 75%);
  box-shadow:inset 0 0 0 1px #fff3,inset 0 0 6px #000b;
}
.vinyl{
  position:absolute;inset:1px;border-radius:50%;overflow:hidden;
  background:
    repeating-radial-gradient(circle,#1a1a1b 0 1px,#393939 1.3px,#151516 1.65px,#202020 2.35px),
    #161616;
  animation:vinyl-turn 7s linear infinite paused;
}
.record.playing .vinyl{animation-play-state:running}
.vinyl::before,.vinyl::after,#recordCover{position:absolute;border-radius:50%}
.vinyl::before{
  content:"";inset:28%;background:radial-gradient(circle at 34% 27%,#3d3c3a,#161616 72%);
  box-shadow:0 0 0 1px #080808,0 0 0 2px #85817a55;
}
#recordCover{inset:28%;width:44%;height:44%;object-fit:cover;box-shadow:inset 0 0 0 1px #151515,0 0 0 1px #151515}
.vinyl::after{
  content:"";width:5px;height:5px;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#121212;border:1px solid #d4d0c291;box-shadow:0 0 2px #000;
}
@keyframes vinyl-turn{to{transform:rotate(1turn)}}
@media(max-width:430px){.player{gap:6px}.player .record{width:49px;height:49px}.player .player-grip{width:19px}.player .now small{letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){.vinyl{animation:none}}
.player .record.has-turntable{
  width:114px;height:82px;overflow:visible;background:none;border:0;border-radius:4px;box-shadow:none;
}
.record.has-turntable::after,.record.has-turntable .vinyl{opacity:0}
#turntable:not([hidden]){position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 3px #33261748);pointer-events:none}
#recordCover{inset:1px;width:calc(100% - 2px);height:calc(100% - 2px)}
.lyric-shortcut{flex:none;border:1px solid #a58e6e80;padding:.2rem .38rem;color:#504436}
.listening-tools{display:grid;gap:.75rem;border-top:1px solid #a58e6e66;padding-top:.65rem;margin-top:.85rem}
.listening-tools label{grid-template-columns:auto minmax(0,1fr);align-items:center}

#lyricLines{max-height:13rem;overflow:auto;list-style:none;margin:.5rem 0;padding:.25rem;text-align:center;overscroll-behavior:contain}
#lyricLines:empty{display:none}
#lyricLines li{padding:.2rem .4rem;color:#665b4c;line-height:1.65}

@media(max-width:430px){.player .record.has-turntable{width:88px;height:65px}.lyric-shortcut{padding:.1rem .25rem}}
.page-lyrics:not([hidden]){
  position:fixed;z-index:7;left:50%;bottom:calc(7.6rem + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);width:min(var(--lyric-width,36rem),calc(100vw - 16px));
  display:flex;flex-direction:column;height:var(--lyric-height,auto);max-height:calc(100dvh - 16px);
  padding:.25rem 1rem .7rem;
  background:url("/lyric-wash.svg") center/100% 100% no-repeat;
}
.page-lyrics[data-positioned]:not([hidden]){transform:none}
.page-lyrics header{display:flex;align-items:center;justify-content:space-between}
.page-lyrics header button{min-width:2rem;min-height:2rem;color:#594c3f}
.page-lyrics .lyric-grip{display:grid;place-items:center;cursor:grab;touch-action:none}
.page-lyrics[data-dragging] .lyric-grip{cursor:grabbing}
.lyric-grip span{
  width:16px;height:6px;border-radius:55% 38% 47% 40%;
  background:linear-gradient(164deg,transparent 3%,#766858a8 22%,#655749 48%,transparent 80%);
  transform:rotate(-8deg);
}
.page-lyrics #closeLyrics{font-size:1.2rem}
.page-lyrics #lyricLines{
  flex:1;min-height:0;max-height:var(--lyric-height,min(9rem,24vh));margin:.15rem 0 0;font-size:clamp(1.05rem,2.3vw,1.35rem);
  scrollbar-width:thin;scrollbar-color:#796c5555 transparent;
}
.page-lyrics #lyricLines li{
  color:#5b5145;text-shadow:0 0 5px #fff9e7,0 1px 2px #fff9e7;
}
.page-lyrics #lyricLines li[aria-current=true]{
  color:#766353;
  background:none;
}
.page-lyrics #lyricStatus{text-align:center;margin:.5rem 0;color:#594c3f;text-shadow:0 0 5px #fff9e7}
.page-lyrics #lyricStatus:empty{display:none}
.lyric-shortcut[aria-expanded=true]{background:#eadcc3;color:#4f3024}
@media(max-width:430px){.page-lyrics:not([hidden]){bottom:calc(6.35rem + env(safe-area-inset-bottom,0px))}}

.ink-filter{position:absolute;pointer-events:none}
.page-lyrics .lyric-edge{
  position:absolute;z-index:1;top:22%;bottom:12%;width:13px;padding:0;
  border:0;background:transparent;box-shadow:none;cursor:ew-resize;touch-action:none;
}
.lyric-edge[data-side=left]{left:0}
.lyric-edge[data-side=right]{right:0}
.lyric-edge::before{
  content:"";position:absolute;left:5px;top:25%;bottom:25%;width:2px;border-radius:50%;
  background:linear-gradient(transparent,#63564888 48%,transparent);
}
.lyric-edge:hover::before,.lyric-edge:focus-visible::before,.page-lyrics[data-resizing] .lyric-edge::before{
  background:linear-gradient(transparent,#42392e 48%,transparent);
}
.lyric-word{position:relative;display:inline-block;--ink:0%}
#lyricLines li[aria-current=true] .lyric-word::after{
  content:attr(data-ink);position:absolute;inset:0;pointer-events:none;
  color:#211b16;text-shadow:0 0 1px #2c1d13;
  mask-image:linear-gradient(90deg,#000 calc(var(--ink) - 7%),transparent var(--ink));
}
#lyricLines li[aria-current=true] .lyric-word[data-wetting]::after{
  filter:url(#lyric-ink-bleed) drop-shadow(0 0 1.4px #6f412580);
}
#lyricLines li[aria-current=true] .lyric-word[data-wetting]::before{
  content:"";position:absolute;pointer-events:none;inset:12% -12% 4%;
  background:radial-gradient(ellipse 26% 47% at var(--ink) 52%,#72503a32,transparent 97%);
  filter:url(#lyric-ink-bleed);
}

.page-lyrics .lyric-edge:is([data-side=top],[data-side=bottom]){
  top:auto;bottom:auto;left:24%;right:24%;width:auto;height:13px;cursor:ns-resize;
}
.page-lyrics .lyric-edge[data-side=top]{top:0}
.page-lyrics .lyric-edge[data-side=bottom]{bottom:0}
.page-lyrics .lyric-edge:is([data-side=top],[data-side=bottom])::before{
  left:28%;right:28%;top:5px;bottom:auto;width:auto;height:2px;
  background:linear-gradient(90deg,transparent,#63564888 48%,transparent);
}
.page-lyrics .lyric-edge:is([data-side=top],[data-side=bottom]):is(:hover,:focus-visible)::before{
  background:linear-gradient(90deg,transparent,#42392e 48%,transparent);
}