.lsn-bay{margin:10px 0 -8px;padding:8px 0;background:var(--near)}
.lsn{display:block;padding:6px;border:var(--bw) solid var(--h-e,var(--a-e));
  border-radius:999px;background:var(--h-t,var(--a-t))}

.lsn-bay{top:calc(var(--bar-h,60px) + var(--now-h,0px));z-index:2}
.lsn-bay[data-live]{position:sticky}
.bar.bar-away~.ssc .lsn-bay{top:var(--now-h,0px)}
.lsn-bay[data-stuck] .lsn{box-shadow:0 10px 18px -12px var(--ink-40)}

html:has(.lsn-bay[data-live]){scroll-padding-top:calc(var(--bar-h,60px) + var(--now-h,0px) + var(--lsn-h,74px) + 8px)}

@media (width < 47.5rem){
  .lsn-bay{top:calc(var(--bar-h,60px) + var(--now-h,37px))}
  .bar.bar-away~.ssc .lsn-bay{top:var(--now-h,37px)}
  html:has(.lsn-bay[data-live]){scroll-padding-top:calc(var(--bar-h,60px) + var(--now-h,37px) + var(--lsn-h,74px) + 8px)}
}

html:has(#lsn :focus){scroll-padding-top:0}
@media (prefers-reduced-motion:no-preference){
  .lsn-bay{transition:top .2s ease-out}
}
.lsn-a{display:block;width:100%}
.lsn-ui{display:flex;align-items:center;gap:10px}
.lsn-ui[hidden]{display:none}
.lsn-play{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;border:0;border-radius:50%;background:var(--h,var(--a));color:var(--h-f,var(--near));cursor:pointer;
  box-shadow:0 2px 0 -1px var(--h-d,var(--a-d))}
.lsn-play:active{transform:translate3d(0,1px,0);box-shadow:none}
.lsn-play svg{width:16px;height:16px;fill:currentColor}
.lsn-play .lsn-i-play{margin-left:2px}
.lsn-play .lsn-i-pause{display:none}
.lsn-play[data-on] .lsn-i-play{display:none}
.lsn-play[data-on] .lsn-i-pause{display:block}
.lsn-seek{flex:1 1 auto;min-width:48px;height:44px;margin:0;accent-color:var(--h-d,var(--a-d));cursor:pointer}
.lsn-t{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:.8125rem;color:var(--ink2);white-space:nowrap}
.lsn-sp{flex:0 0 auto;display:inline-flex}

.lsn-rate{-webkit-appearance:none;appearance:none;min-width:44px;min-height:44px;margin:0;padding:0 10px;
  border:var(--bw) solid var(--h-e,var(--a-e));border-radius:999px;background:var(--near);
  color:var(--h-d,var(--a-d));font:inherit;font-size:.875rem;font-weight:750;text-align:center;
  text-align-last:center;cursor:pointer}

.lsn-rate option{background:var(--near);color:var(--ink);font-weight:600}
.lsn-rate option:checked{background:var(--h,var(--a));color:var(--h-f,var(--near))}
@supports (appearance:base-select){
  .lsn-rate,.lsn-rate::picker(select){appearance:base-select}
  .lsn-rate{display:inline-flex;align-items:center;justify-content:center}
  .lsn-rate::picker-icon{display:none}
  .lsn-rate::picker(select){margin-block:6px;padding:4px;min-width:anchor-size(width);
    border:var(--bw) solid var(--h-e,var(--a-e));border-radius:var(--r-s);background:var(--near);
    box-shadow:var(--drop)}
  .lsn-rate option{display:flex;align-items:center;justify-content:center;min-height:44px;
    padding:0 14px;border-radius:var(--r-x);font-variant-numeric:tabular-nums;cursor:pointer}
  .lsn-rate option::checkmark{display:none}
  .lsn-rate option:hover,.lsn-rate option:focus-visible{background:var(--h-t,var(--a-t));outline:0}
  .lsn-rate option:checked,.lsn-rate option:checked:hover,.lsn-rate option:checked:focus-visible{
    background:var(--h,var(--a));color:var(--h-f,var(--near))}
  .lsn-rate option:focus-visible{box-shadow:inset 0 0 0 2px var(--h-d,var(--ink))}
}
.lsn-play:focus-visible,.lsn-seek:focus-visible,.lsn-rate:focus-visible{outline:3px solid var(--h-d,var(--ink));
  outline-offset:2px}

.lsn{position:relative}
.lsn:has(.lsn-note:not(:empty)){border-radius:var(--r) var(--r) 0 0;
  border-bottom-color:var(--h-t,var(--a-t));box-shadow:none}
.lsn-note{position:absolute;top:100%;left:calc(-1 * var(--bw));right:calc(-1 * var(--bw));margin:0;
  padding:4px 12px 12px calc(14px + var(--rail,4px));background:var(--h-t,var(--a-t));
  border:var(--bw) solid var(--h-e,var(--a-e));border-top:0;border-radius:0 0 var(--r) var(--r);
  font-size:.9375rem;line-height:1.45;color:var(--ink)}

.lsn-note::after{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--bw));right:calc(-1 * var(--bw));
  top:calc(100% - var(--r));bottom:calc(-8px - var(--bw));background:var(--near)}
.lsn-note::before{content:"";position:absolute;left:10px;top:6px;bottom:14px;width:var(--rail,4px);
  border-radius:var(--rail,4px);background:var(--h-d,var(--a-d))}
.lsn-note:empty{display:none}

.ssc .reveal.lsn-wait>summary{border-color:var(--h-d,var(--ink));
  box-shadow:inset 0 0 0 calc(3px - var(--bw)) var(--h-d,var(--ink)),0 var(--o1) 0 -1px var(--edge)}
.ssc .reveal.lsn-wait>summary:active{
  box-shadow:inset 0 0 0 calc(3px - var(--bw)) var(--h-d,var(--ink)),0 2px 0 -1px var(--edge)}

@media (max-width:360px){
  .lsn-t .lsn-of{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lsn-play:active{transform:none}
}