:root{
  --fol-bg:#020202;
  --fol-text:#fff;
  --fol-muted:#a8a8a8;
  --fol-line:#585858;
  --fol-played:#f0f0f0;
  --fol-accent:#1d4b35;
  --fol-radius:0px;
  --fol-player-h:106px;
}

*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#111;color:white}
.demo-page{min-height:100vh;padding:40px}
.demo-page p{color:#aaa}

.fol-player{
  position:fixed;
  left:0;right:0;bottom:0;
  min-height:var(--fol-player-h);
  background:var(--fol-bg);
  color:var(--fol-text);
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(520px,780px) minmax(220px,1fr);
  align-items:center;
  gap:24px;
  padding:13px 20px 12px;
  z-index:9999;
  border-radius:var(--fol-radius);
  box-shadow:0 -12px 30px rgba(0,0,0,.18);
}

.fol-player__accent{
  position:absolute;inset:0 0 auto 0;height:4px;background:var(--fol-accent)
}

.fol-player__left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.fol-player__artwork{
  width:54px;height:54px;flex:0 0 54px;
  object-fit:cover;
  border-radius:7px;
  background:#222;
}
.fol-player__meta{min-width:0}
.fol-player__title{
  font-weight:700;font-size:14px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fol-player__show{
  margin-top:6px;
  color:#9a9a9a;font-size:11px;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.fol-player__center{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.fol-player__transport{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:36px;
}
.fol-btn{
  border:0;background:transparent;color:#cfcfcf;
  width:30px;height:30px;padding:5px;
  display:grid;place-items:center;
  border-radius:999px;
  cursor:pointer;
  transition:color .15s ease,background .15s ease,transform .15s ease,opacity .15s ease;
}
.fol-btn svg{width:18px;height:18px;display:block}
.fol-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.fol-btn:active{transform:scale(.96)}
.fol-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

.fol-btn--speed{
  width:auto;min-width:35px;padding:0 4px;
  font-size:14px;font-weight:500;color:#d7d7d7;
  border-radius:4px;
}
.fol-btn--play{
  width:38px;height:38px;
  background:#fff;color:#050505;
  padding:8px;
}
.fol-btn--play:hover{background:#f3f3f3;color:#050505}
.fol-icon-pause{display:none}
.fol-player.is-playing .fol-icon-play{display:none}
.fol-player.is-playing .fol-icon-pause{display:block}

.fol-player__timeline{
  width:100%;
  display:grid;
  grid-template-columns:44px minmax(120px,1fr) 44px;
  align-items:center;
  gap:10px;
}
.fol-player__time{
  font-size:10px;
  line-height:1;
  color:#aaa;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.fol-player__time--duration{text-align:left;color:#cfcfcf}

.fol-player__range{
  width:100%;height:16px;margin:0;padding:0;
  appearance:none;-webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.fol-player__range::-webkit-slider-runnable-track{
  height:3px;border-radius:999px;
  background:linear-gradient(to right,var(--fol-played) 0 var(--progress,0%),var(--fol-line) var(--progress,0%) 100%);
}
.fol-player__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;height:12px;
  border-radius:50%;
  background:#fff;
  margin-top:-4.5px;
  opacity:0;
  transition:opacity .15s ease,transform .15s ease;
}
.fol-player__range:hover::-webkit-slider-thumb,
.fol-player__range:focus-visible::-webkit-slider-thumb{opacity:1}
.fol-player__range::-moz-range-track{
  height:3px;border-radius:999px;background:var(--fol-line)
}
.fol-player__range::-moz-range-progress{
  height:3px;border-radius:999px;background:var(--fol-played)
}
.fol-player__range::-moz-range-thumb{
  width:12px;height:12px;border:none;border-radius:50%;background:#fff;opacity:0
}
.fol-player__range:hover::-moz-range-thumb,
.fol-player__range:focus-visible::-moz-range-thumb{opacity:1}

.fol-player__right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
}
.fol-btn--utility{width:28px;height:28px;color:#d0d0d0}

.fol-speed-menu{
  position:absolute;
  left:50%;bottom:96px;
  transform:translateX(-145px);
  display:none;
  min-width:108px;
  padding:6px;
  background:#141414;
  border:1px solid #2b2b2b;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.fol-speed-menu.is-open{display:grid}
.fol-speed-menu button{
  border:0;background:transparent;color:white;text-align:left;
  padding:8px 10px;border-radius:5px;cursor:pointer;font:inherit;font-size:13px
}
.fol-speed-menu button:hover{background:#262626}

@media (max-width: 1024px){
  .fol-player{
    grid-template-columns:minmax(190px,.75fr) minmax(420px,1.5fr) auto;
    gap:12px;padding-inline:14px
  }
  .fol-player__right .fol-btn:nth-child(-n+2){display:none}
}

@media (max-width: 760px){
  :root{--fol-player-h:92px}
  .fol-player{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "left right"
      "center center";
    gap:6px 8px;
    padding:10px 12px 9px;
  }
  .fol-player__left{grid-area:left}
  .fol-player__right{grid-area:right}
  .fol-player__center{grid-area:center;gap:5px}
  .fol-player__artwork{width:40px;height:40px;flex-basis:40px}
  .fol-player__title{font-size:12px}
  .fol-player__show{font-size:10px;margin-top:4px}
  .fol-player__transport{gap:10px}
  .fol-btn{width:27px;height:27px}
  .fol-btn--play{width:34px;height:34px}
  .fol-btn--speed{display:none}
  #prevBtn,#nextBtn{display:none}
  .fol-player__timeline{grid-template-columns:36px minmax(80px,1fr) 36px;gap:7px}
  .fol-player__time{font-size:9px}
  .fol-player__right .fol-btn{display:none}
  .fol-player__right #muteBtn{display:grid}
  .fol-speed-menu{left:12px;transform:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}