/* Dedicated, right-to-left course player, its mini bar and saved learning progress. */
.course-player-open { overflow: hidden; }
.course-player, .course-mini {
  --cp-navy: #13163a;
  --cp-ink: #ffffff;
  --cp-muted: #aeb4cc;
  --cp-line: rgb(255 255 255 / 10%);
  --cp-yellow: #ffda3e;
  --cp-ease: cubic-bezier(.22, 1, .36, 1);
  --cp-spring: cubic-bezier(.34, 1.56, .64, 1);
}
.course-player {
  width: min(940px, calc(100% - 48px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 26px;
  background:
    radial-gradient(70% 50% at 100% 0%, rgb(255 218 62 / 9%), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgb(118 128 255 / 12%), transparent 60%),
    var(--cp-navy);
  color: var(--cp-ink);
  font-family: var(--font, Estedad, Tahoma, sans-serif);
  box-shadow: 0 40px 120px -20px rgb(4 5 25 / 75%);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(255 255 255 / 25%) transparent;
}
.course-player:not([open]) { display: none; }
.course-player::backdrop { background: rgb(8 9 30 / 74%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
div.course-player[open] { position: fixed; inset: 0; z-index: 200; height: max-content; box-shadow: 0 0 0 100vmax rgb(8 9 30 / 74%); }
.course-player :is(button, input, select, a):focus-visible { outline: 3px solid var(--cp-yellow); outline-offset: 3px; }
.course-player button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.course-player button:disabled { cursor: default; opacity: .35; }

.cp { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cp-head-text { min-width: 0; }
.cp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--cp-yellow); font-size: 12px; font-weight: 700; }
.cp-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgb(255 218 62 / 18%); }
.cp.is-playing .cp-eyebrow::before { animation: cp-dot 1.6s ease-in-out infinite; }
@keyframes cp-dot { 50% { box-shadow: 0 0 0 7px rgb(255 218 62 / 0); } }
body.premium-site .course-player .cp-head h2, .course-player .cp-head h2 { margin: 0; color: var(--cp-ink); font-size: 20px; font-weight: 800; line-height: 1.8; overflow-wrap: anywhere; }
.cp-meta { margin: 2px 0 0; color: var(--cp-muted); font-size: 12px; }
.cp-meta:empty { display: none; }
.cp-head-actions { display: flex; gap: 8px; flex: none; }
.cp-icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .25s ease, scale .3s var(--cp-spring), color .25s ease;
}
.cp-icon-button svg { width: 24px; height: 24px; }
.cp-icon-button:hover:not(:disabled) { background: rgb(255 255 255 / 10%); }
.cp-icon-button:active:not(:disabled) { scale: .9; }
.cp-icon-button.is-active { color: var(--cp-yellow); background: rgb(255 218 62 / 12%); }
.cp-head-actions .cp-icon-button { width: 42px; height: 42px; border-radius: 13px; background: rgb(255 255 255 / 8%); }
.cp-head-actions .cp-icon-button svg { width: 20px; height: 20px; }

/* ---- Stage ---- */
.cp-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; background: #05061a; box-shadow: 0 0 0 1px rgb(255 255 255 / 6%) inset; }
.cp-stage video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 58dvh; object-fit: contain; background: #000; }
.cp-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 300px;
  padding: 34px 24px 28px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  background:
    radial-gradient(55% 60% at 50% 40%, rgb(255 218 62 / 14%), transparent 70%),
    linear-gradient(160deg, #262b63, #11143a);
}
.cp-art[hidden] { display: none; }
.cp-art-disc::before, .cp-art-disc::after { content: ''; position: absolute; inset: -26px; border: 1px solid rgb(255 218 62 / 28%); border-radius: 50%; pointer-events: none; }
.cp-art-disc::after { inset: -58px; border-color: rgb(255 255 255 / 9%); }
.cp-art.is-playing .cp-art-disc::before, .cp-art.is-playing .cp-art-disc::after { animation: cp-ring 2.8s ease-out infinite; }
.cp-art.is-playing .cp-art-disc::after { animation-delay: 1.4s; }
@keyframes cp-ring { from { scale: .8; opacity: .9; } to { scale: 1.35; opacity: 0; } }
.cp-art-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--cp-yellow);
  color: #171943;
  box-shadow: 0 20px 40px -14px rgb(255 218 62 / 60%), 0 0 0 10px rgb(255 218 62 / 8%);
  transition: scale .6s var(--cp-spring);
}
.cp-art-disc svg { width: 40px; height: 40px; }
.cp-art.is-playing .cp-art-disc { animation: cp-breathe 3.2s ease-in-out infinite; }
@keyframes cp-breathe { 50% { scale: 1.06; } }
.cp-art strong { max-width: 32ch; color: #ffffff; font-size: 18px; font-weight: 800; line-height: 1.8; }
.cp-art-course { color: var(--cp-muted); font-size: 12px; }
.cp-art-course:empty { display: none; }
.cp-wave { display: flex; align-items: center; gap: 4px; height: 26px; margin-top: 12px; color: var(--cp-yellow); }
.cp-wave i { width: 3px; height: 100%; border-radius: 3px; background: currentColor; scale: 1 .25; transition: scale .4s ease; }
.cp-art.is-playing .cp-wave i { animation: cp-wave .9s ease-in-out infinite alternate; }
.cp-wave i:nth-child(2n) { animation-duration: .7s !important; animation-delay: -.3s !important; }
.cp-wave i:nth-child(3n) { animation-duration: 1.1s !important; animation-delay: -.6s !important; }
@keyframes cp-wave { from { scale: 1 .2; } to { scale: 1 1; } }

.cp-big-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(19 22 58 / 62%);
  color: #ffffff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 18%) inset;
  transition: opacity .3s ease, scale .35s var(--cp-spring), background-color .25s ease;
}
.cp-big-play svg { grid-area: 1 / 1; width: 34px; height: 34px; }
.cp-big-play:hover:not(:disabled) { background: var(--cp-yellow); color: #171943; }
.cp[data-kind="audio"] .cp-big-play,
.cp.is-playing.is-idle .cp-big-play,
.cp:is(.is-loading, .is-buffering) .cp-big-play { opacity: 0; scale: .8; pointer-events: none; }
.cp-big-play:disabled { opacity: 0 !important; pointer-events: none; }
.cp-icon-play, .cp-icon-pause { transition: opacity .2s ease, scale .3s var(--cp-spring); }
.cp-icon-pause, .cp.is-playing .cp-icon-play, .course-mini.is-playing .cp-icon-play { opacity: 0; scale: .5; }
.cp.is-playing .cp-icon-pause, .course-mini.is-playing .cp-icon-pause { opacity: 1; scale: 1; }
.cp-play svg, .cp-big-play svg { grid-area: 1 / 1; }
.cp-icon-play { translate: 2px 0; }

.cp-loader {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 3px solid rgb(255 255 255 / 15%);
  border-top-color: var(--cp-yellow);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.cp:is(.is-loading, .is-buffering) .cp-loader { opacity: 1; animation: cp-spin .8s linear infinite; }
.cp[data-kind="audio"] .cp-loader { top: auto; bottom: 18px; width: 30px; height: 30px; margin: 0 0 0 -15px; }
@keyframes cp-spin { to { rotate: 1turn; } }
.cp-bubble {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 50%;
  translate: -50% -8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgb(19 22 58 / 80%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .2s ease, translate .3s var(--cp-ease);
}
.cp-bubble.is-visible { opacity: 1; translate: -50% 0; }
.cp-stage::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset-block: 0;
  width: 42%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.cp-stage[data-flash="left"]::after { left: 0; opacity: 1; background: radial-gradient(120% 90% at 0% 50%, rgb(255 255 255 / 18%), transparent 70%); }
.cp-stage[data-flash="right"]::after { right: 0; opacity: 1; background: radial-gradient(120% 90% at 100% 50%, rgb(255 255 255 / 18%), transparent 70%); }

/* Panels over the stage: resume, up next and file errors. */
.cp-panel {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  overflow: auto;
  text-align: center;
  background: rgb(10 11 35 / 84%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: cp-panel-in .4s var(--cp-ease) both;
}
.cp-panel[hidden] { display: none; }
@keyframes cp-panel-in { from { opacity: 0; } }
.cp-panel-label { color: var(--cp-yellow); font-size: 12px; font-weight: 700; }
.cp-panel p, .cp-panel strong { max-width: 46ch; margin: 0; color: #ffffff; font-size: 15px; line-height: 2; }
.cp-panel strong { font-size: 18px; font-weight: 800; }
.cp-panel > svg { width: 34px; height: 34px; color: #ff9d9d; }
.cp-panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.cp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, scale .3s var(--cp-spring);
}
.cp-pill svg { width: 18px; height: 18px; }
.cp-pill:hover { background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 45%); }
.cp-pill:active { scale: .96; }
.cp-pill-primary { border-color: var(--cp-yellow); background: var(--cp-yellow); color: #171943; }
.cp-pill-primary:hover { background: #ffe36c; border-color: #ffe36c; }
.cp-pill-quiet { border-color: transparent; background: transparent; color: var(--cp-muted); }
.cp-countdown { width: 46px; height: 46px; margin: 4px 0; }
.cp-countdown svg { width: 100%; height: 100%; rotate: -90deg; }
.cp-countdown circle { fill: none; stroke: rgb(255 255 255 / 15%); stroke-width: 3; }
.cp-countdown .cp-countdown-value { stroke: var(--cp-yellow); stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 0; }
.cp-upnext.is-counting .cp-countdown-value { animation: cp-countdown 6s linear forwards; }
.cp-upnext:not(.is-counting) .cp-countdown { display: none; }
@keyframes cp-countdown { to { stroke-dashoffset: 100.53; } }

/* ---- Timeline and controls ---- */
.cp-controls { --played: 0; --buffered: 0; }
.cp-timeline { position: relative; }
.cp-track {
  position: absolute;
  top: 11px;
  inset-inline: 0;
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: rgb(255 255 255 / 12%);
  pointer-events: none;
  transition: height .2s ease, top .2s ease;
}
.cp-buffered, .cp-played { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; }
.cp-buffered { width: calc(var(--buffered) * 100%); background: rgb(255 255 255 / 22%); }
.cp-played { width: calc(var(--played) * 100%); background: linear-gradient(to left, #ffe36c, var(--cp-yellow)); }
.cp-timeline:hover .cp-track { top: 10px; height: 8px; }
body.premium-site .course-player input.cp-seek[type="range"], .course-player input.cp-seek[type="range"] {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cp-seek:disabled { cursor: default; }
.cp-seek::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.cp-seek::-moz-range-track { height: 6px; background: transparent; }
.cp-seek::-moz-range-progress { background: transparent; }
.cp-seek::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: 6px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgb(255 218 62 / 45%), 0 2px 8px rgb(0 0 0 / 40%);
  transition: scale .25s var(--cp-spring);
  -webkit-appearance: none;
  appearance: none;
}
.cp-seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 4px rgb(255 218 62 / 45%); }
.cp-seek:is(:hover, :active, :focus-visible):not(:disabled)::-webkit-slider-thumb { scale: 1.25; }
.cp-seek:disabled::-webkit-slider-thumb { scale: 0; }
.cp-seek:disabled::-moz-range-thumb { opacity: 0; }
.cp-tip {
  position: absolute;
  bottom: calc(100% - 2px);
  left: var(--x, 50%);
  translate: -50% 4px;
  padding: 3px 9px;
  border-radius: 8px;
  background: #ffffff;
  color: #171943;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, translate .2s var(--cp-ease);
}
.cp-tip.is-visible { opacity: 1; translate: -50% 0; }
.cp-time { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; color: var(--cp-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cp-time-toggle { min-height: 24px; padding: 0 4px; border: 0; border-radius: 6px; background: none; color: inherit; font-size: inherit; cursor: pointer; }
.cp-time-toggle:hover { color: #ffffff; text-decoration: underline dotted; text-underline-offset: 4px; }

.cp-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 8px; }
.cp-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp-tools-start { justify-self: start; }
.cp-tools-end { justify-self: end; }
.cp-transport { display: flex; align-items: center; gap: 6px; }
.cp-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 62px;
  height: 62px;
  margin-inline: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cp-yellow);
  color: #171943;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgb(255 218 62 / 70%);
  transition: scale .3s var(--cp-spring), background-color .25s ease, box-shadow .4s var(--cp-ease);
}
.cp-play svg { width: 28px; height: 28px; }
.cp-play:hover:not(:disabled) { background: #ffe36c; }
.cp-play:active:not(:disabled) { scale: .92; }
.cp.is-playing .cp-play { box-shadow: 0 0 0 6px rgb(255 218 62 / 14%), 0 14px 30px -12px rgb(255 218 62 / 70%); }
.cp-skip svg { width: 27px; height: 27px; }
.cp-skip > span { position: absolute; padding-top: 2px; font-size: 9px; font-weight: 800; line-height: 1; }
.cp-skip:active:not(:disabled) { rotate: -20deg; }
.cp-skip[data-player-back]:active:not(:disabled) { rotate: 20deg; }
.cp-step svg { width: 22px; height: 22px; }
body.premium-site .course-player .cp-bar .cp-rate select, .cp-rate select {
  min-width: 64px;
  height: 36px;
  min-height: 0;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
body.premium-site .course-player .cp-bar .cp-rate select:hover, .cp-rate select:hover { border-color: var(--cp-yellow); background: rgb(255 255 255 / 6%); }
.cp-rate option { color: #171943; background: #ffffff; }
.cp-list-toggle { width: auto; min-width: 44px; padding-inline: 10px; border-radius: 999px; gap: 6px; display: inline-flex; }
.cp-list-count { font-size: 12px; font-weight: 700; }
.cp-list-count:empty { display: none; }
.cp-volume { display: flex; align-items: center; gap: 2px; }
.cp-volume .cp-icon-muted, .cp-volume .is-muted .cp-icon-volume { display: none; }
.cp-volume .is-muted .cp-icon-muted { display: block; }
.cp-volume .cp-icon-button svg { grid-area: 1 / 1; }
body.premium-site .course-player .cp-volume input[type="range"], .course-player .cp-volume input[type="range"] {
  --level: 1;
  width: 84px;
  height: 24px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cp-volume input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to left, #ffffff calc(var(--level) * 100%), rgb(255 255 255 / 18%) 0); }
.cp-volume input::-moz-range-track { height: 4px; border-radius: 4px; background: rgb(255 255 255 / 18%); }
.cp-volume input::-moz-range-progress { height: 4px; border-radius: 4px; background: #ffffff; }
.cp-volume input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: #ffffff; -webkit-appearance: none; appearance: none; }
.cp-volume input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #ffffff; }
.cp-icon-exit, .is-active > .cp-icon-enter { display: none; }
.is-active > .cp-icon-exit { display: block; }

/* ---- Lesson list ---- */
.cp-list { position: relative; max-height: 320px; margin-top: -4px; padding: 6px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--cp-line); border-radius: 18px; background: rgb(255 255 255 / 3%); animation: cp-panel-in .35s var(--cp-ease); }
.cp-list[hidden] { display: none; }
body.premium-site .course-player .cp-list-chapter, .course-player .cp-list-chapter { position: sticky; top: -6px; z-index: 1; margin: 0; padding: 10px 10px 6px; background: #181b44; color: var(--cp-yellow); font-size: 12px; font-weight: 700; line-height: 1.8; }
.cp-lesson {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  text-align: start;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.cp-lesson:hover { background: rgb(255 255 255 / 6%); }
.cp-lesson[aria-current="true"] { border-color: rgb(255 218 62 / 45%); background: rgb(255 218 62 / 10%); cursor: default; }
.cp-lesson-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / 8%); color: var(--cp-muted); font-size: 12px; font-weight: 700; }
.cp-lesson.is-done .cp-lesson-number { background: rgb(255 218 62 / 16%); color: var(--cp-yellow); }
.cp-lesson-number svg { width: 16px; height: 16px; }
.cp-lesson-text { display: grid; min-width: 0; }
.cp-lesson-text strong { overflow: hidden; color: #ffffff; font-size: 14px; font-weight: 700; line-height: 1.8; white-space: nowrap; text-overflow: ellipsis; }
.cp-lesson-text small { overflow: hidden; color: var(--cp-muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.cp-lesson-now { display: flex; align-items: flex-end; gap: 2px; height: 14px; color: var(--cp-yellow); }
.cp-lesson-now i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; scale: 1 .4; transform-origin: bottom; }
.cp.is-playing .cp-lesson-now i { animation: cp-wave .8s ease-in-out infinite alternate; }
.cp.is-playing .cp-lesson-now i:nth-child(2) { animation-delay: -.3s; }
.cp.is-playing .cp-lesson-now i:nth-child(3) { animation-delay: -.55s; }

/* ---- Footer status ---- */
.cp-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--cp-line); }
.cp-foot > p { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; margin: 0; color: var(--cp-muted); font-size: 12px; line-height: 1.9; }
.cp-foot > p::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7fd8a0; box-shadow: 0 0 0 3px rgb(127 216 160 / 18%); }
.cp-foot > p[data-tone="busy"]::before { background: var(--cp-yellow); box-shadow: 0 0 0 3px rgb(255 218 62 / 18%); animation: cp-dot 1.4s ease-in-out infinite; }
.cp-foot > p[data-tone="error"] { color: #ffc2c2; }
.cp-foot > p[data-tone="error"]::before { background: #ff8a8a; box-shadow: 0 0 0 3px rgb(255 138 138 / 18%); }
.cp-link { min-height: 36px; padding: 0; border: 0; background: none; color: var(--cp-yellow); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---- Full screen: picture fills the screen, controls float and rest when idle ---- */
.cp:fullscreen { display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; background: #000; }
.cp:fullscreen .cp-stage { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
.cp:fullscreen .cp-stage video { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.cp:fullscreen :is(.cp-head, .cp-controls) { position: absolute; z-index: 6; inset-inline: 0; padding: 22px max(28px, env(safe-area-inset-right)) 22px max(28px, env(safe-area-inset-left)); transition: opacity .4s ease, translate .4s var(--cp-ease); }
.cp:fullscreen .cp-head { top: 0; background: linear-gradient(rgb(0 0 0 / 70%), transparent); }
.cp:fullscreen .cp-controls { bottom: 0; padding-top: 60px; background: linear-gradient(transparent, rgb(0 0 0 / 80%)); }
.cp:fullscreen :is(.cp-list, .cp-foot), .cp:fullscreen [data-player-minimize] { display: none; }
.cp:fullscreen.is-idle { cursor: none; }
.cp:fullscreen.is-idle .cp-head { opacity: 0; translate: 0 -12px; pointer-events: none; }
.cp:fullscreen.is-idle .cp-controls { opacity: 0; translate: 0 12px; pointer-events: none; }

/* ---- Mini player ---- */
.course-mini {
  --played: 0;
  position: fixed;
  z-index: 86;
  bottom: 20px;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(560px, calc(100% - 32px));
  margin-inline: auto;
  padding: 8px 10px 8px 8px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 20px;
  background: rgb(19 22 58 / 97%);
  color: #ffffff;
  box-shadow: 0 24px 50px -18px rgb(8 9 30 / 70%);
  animation: cp-mini-in .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.course-mini[hidden] { display: none; }
@keyframes cp-mini-in { from { opacity: 0; translate: 0 24px; scale: .96; } }
.course-mini button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.course-mini :is(button):focus-visible { outline: 3px solid #ffda3e; outline-offset: 2px; }
.course-mini__progress { position: absolute; inset: 0 0 auto; height: 3px; background: rgb(255 255 255 / 10%); }
.course-mini__progress i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--played) * 100%); background: #ffda3e; }
.course-mini__expand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 48px; padding: 0; border: 0; background: none; text-align: start; cursor: pointer; }
.course-mini__art { display: grid; place-items: center; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 12px; background: #ffda3e; color: #171943; }
.course-mini__art img { width: 100%; height: 100%; object-fit: cover; }
.course-mini__art svg { width: 22px; height: 22px; }
.course-mini.is-playing .course-mini__art { animation: cp-breathe 3.2s ease-in-out infinite; }
.course-mini__text { display: grid; min-width: 0; }
.course-mini__text strong { overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.7; white-space: nowrap; text-overflow: ellipsis; }
.course-mini__text small { color: #aeb4cc; font-size: 11px; font-variant-numeric: tabular-nums; }
.course-mini__chevron { display: grid; flex: none; color: #aeb4cc; }
.course-mini__chevron svg { width: 18px; height: 18px; }
.course-mini .course-mini__play { width: 46px; height: 46px; margin: 0; box-shadow: none; }
.course-mini .course-mini__play svg { width: 22px; height: 22px; }
.course-mini__close { width: 38px; height: 38px; color: #aeb4cc; }
.course-mini__close svg { width: 18px; height: 18px; }
body.course-mini-open { padding-bottom: 96px; }
body.course-mini-open .course-player-sync-status { bottom: 96px; }
body.course-mini-open .m-top { bottom: 100px; }

/* The lesson that is playing is marked on the course page too. */
.learning-lesson-row.is-now-playing { margin-inline: -12px; padding-inline: 12px; border-radius: 14px; background: linear-gradient(270deg, rgb(255 218 62 / 18%), rgb(255 218 62 / 4%)); box-shadow: inset -3px 0 0 #ffda3e; }
.learning-lesson-row.is-now-playing .learning-lesson-icon { color: #b88a00; }
body.premium-site .learning-lesson-row.is-now-playing .learning-lesson-open { background: #171943; color: #ffda3e; }
.learning-lesson-row.is-now-playing:not(.is-paused) .learning-lesson-icon { animation: cp-breathe 1.6s ease-in-out infinite; }
.learning-lesson-row[id^="lesson-file-"] { scroll-margin-top: 120px; }

.course-player-sync-status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 16px; position: fixed; z-index: 90; bottom: 20px; inset-inline: 20px; width: max-content; max-width: calc(100% - 40px); margin: auto; padding: 12px 18px; border: 1px solid #e5c4b4; border-radius: 13px; background: #fff8f3; box-shadow: 0 10px 35px #102f2926; color: #98422d; font-size: 12px; }
.course-player-sync-status .text-link { color: #98422d; font-size: 12px; text-decoration: underline; }

@media (hover: none) {
  body.premium-site .course-player .cp-volume input[type="range"], .course-player .cp-volume input[type="range"] { display: none; }
}
@media (max-width: 760px) {
  .cp-bar { grid-template-columns: 1fr 1fr; grid-template-areas: "transport transport" "start end"; row-gap: 10px; }
  .cp-transport { grid-area: transport; justify-self: center; }
  .cp-tools-start { grid-area: start; }
  .cp-tools-end { grid-area: end; }
}
/* Phones: the player becomes a full-screen "now playing" view. */
@media (max-width: 600px) {
  .course-player { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .cp { gap: 14px; min-height: 100%; padding: max(14px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
  body.premium-site .course-player .cp-head h2, .course-player .cp-head h2 { font-size: 17px; }
  .cp-head-actions .cp-icon-button { width: 40px; height: 40px; }
  .cp-stage { border-radius: 16px; }
  .cp-stage video { max-height: none; }
  .cp-art { min-height: min(62vw, 300px); padding: 28px 18px 22px; }
  .cp-art-disc { width: 80px; height: 80px; }
  .cp-art-disc svg { width: 34px; height: 34px; }
  .cp-art strong { font-size: 16px; }
  .cp-big-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .cp-big-play svg { width: 28px; height: 28px; }
  .cp-panel { gap: 6px; padding: 14px; }
  .cp-panel p { font-size: 13px; }
  .cp-panel strong { font-size: 15px; }
  .cp-pill { min-height: 40px; padding: 6px 14px; font-size: 13px; }
  .cp[data-kind="video"] .cp-countdown { display: none; }
  .cp-transport { gap: 4px; }
  .cp-play { width: 66px; height: 66px; }
  .cp-list { max-height: none; }
  .course-mini { bottom: calc(74px + env(safe-area-inset-bottom)); width: calc(100% - 20px); border-radius: 18px; }
  body.course-mini-open { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.course-mini-open .course-player-sync-status { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .course-player-sync-status { bottom: 87px; inset-inline: 10px; max-width: calc(100% - 20px); font-size: 11px; padding: 11px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .course-player *, .course-mini, .course-mini * { animation: none !important; transition: none !important; }
  .cp:is(.is-loading, .is-buffering) .cp-loader { animation: cp-spin 1.6s linear infinite !important; }
}