.lesson-player {
  --player-ink: var(--scene-player-ink, var(--scene-logo, #fff));
  --player-accent: var(--scene-player-accent, var(--scene-gear, #fff));
  --player-track: color-mix(in srgb, var(--player-ink) 22%, transparent);
  position: fixed;
  z-index: 7;
  top: var(--scene-header-center);
  transform: translateY(-50%);
  left: calc(clamp(20px, 4vw, 64px) + 220px);
  right: calc(clamp(20px, 4vw, 64px) + 64px);
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--player-ink);
}
.lesson-player audio { display: none; }
.lesson-player button {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.lesson-player button:hover { background: color-mix(in srgb, var(--player-ink) 10%, transparent); }
.lesson-player :is(button, a, input, select):focus-visible { outline: 2px solid var(--player-accent); outline-offset: 3px; }
.lesson-player .player-play { color: var(--player-accent); }
.lesson-player .player-play { background: color-mix(in srgb, var(--player-ink) 8%, transparent); }
.lesson-player svg { width: 22px; height: 22px; }
.lesson-player svg path:not([fill]) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.player-content { flex: 1; min-width: 0; display: grid; gap: 0; }
.player-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.player-heading strong { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-time { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.lesson-player input[type=range] { --progress: 100%; appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.lesson-player .player-seek { margin-block: -6px; }
.lesson-player input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--player-accent) var(--progress), var(--player-track) var(--progress)); }
.lesson-player input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3px; border-radius: 50%; border: 0; background: var(--player-accent); }
.lesson-player input[type=range]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--player-track); }
.lesson-player input[type=range]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--player-accent); }
.lesson-player input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--player-accent); }
.lesson-player input:disabled { opacity: .4; cursor: default; }
.player-options {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 14px 10px;
  padding: 16px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--player-ink);
}
.player-options .player-volume { padding-inline: max(0px, calc(100% / 12 - 5px)); }
.player-speed-control { min-width: 0; }
.player-options .player-speed { width: 100%; padding-inline: max(0px, calc(100% / 12 - 5px)); }
.player-speed-labels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.player-options .player-speed-mark { width: 100%; height: 44px; min-width: 0; padding: 0; border-radius: 8px; font-size: 14px; white-space: nowrap; color: var(--player-ink); opacity: .75; }
.player-options .player-speed-mark[aria-pressed=true] { color: var(--player-accent); opacity: 1; }
.player-download { display: grid; place-items: center; width: 40px; height: 40px; color: inherit; text-decoration: none; border-radius: 50%; }
.player-download:hover { background: color-mix(in srgb, var(--player-ink) 10%, transparent); color: var(--player-accent); }
.player-status:empty { display: none; }
.player-status { position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 12px; border-radius: 18px; background: var(--card); color: var(--foreground); font-size: 14px; }
@media (max-width: 1000px) {
  .player-open .topbar { display: none; }
  .lesson-player { left: clamp(18px, 4vw, 64px); right: calc(clamp(20px, 4vw, 64px) + 56px); max-width: none; }
}
@media (max-width: 520px) {
  .lesson-player { left: 12px; right: 68px; gap: 3px; padding: 6px; }
  .lesson-player button { padding: 8px; }
  .player-options { right: -56px; width: calc(100vw - 24px); }
  .player-heading { display: block; }
  .player-heading strong { display: none; }
  .player-time { font-size: 14px; }
  .player-content { gap: 0; }
}