.sp{--sp-accent:#0376b4;--sp-accent-contrast:#fff;--sp-accent-on-dark:var(--sp-accent);--sp-accent-deep:var(--sp-accent);--sp-bg:#212529;--sp-surface:#212529c7;--sp-surface-strong:#212529f0;--sp-card-bg:#fff;--sp-card-text:#212529;--sp-card-text-muted:#6c757d;--sp-text:#f8f9fa;--sp-text-muted:#f8f9fac7;--sp-radius:6px;--sp-radius-lg:12px;--sp-control-size:40px;--sp-icon-size:22px;--sp-font:"PT Sans", Arial, sans-serif;--sp-font-size:14px;--sp-ease:cubic-bezier(.2, .8, .2, 1);--sp-duration:.16s;--sp-duration-slow:.32s;--sp-overlay-blur:18px;--sp-shadow:0 12px 40px #00000073;--sp-focus-ring:0 0 0 3px color-mix(in srgb, var(--sp-accent) 60%, transparent);--sp-progress-height:4px;--sp-brand:var(--sp-accent);--sp-poster:none}.sp,.sp *,.sp :before,.sp :after{box-sizing:border-box}.sp{font-family:var(--sp-font);font-size:var(--sp-font-size);color:var(--sp-text);position:relative;overflow:hidden;container-type:inline-size}.sp .vjs-tech{width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.sp .vjs-control-text{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sp .vjs-hidden{display:none!important}.sp .vjs-poster{background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.sp .vjs-poster img{object-fit:contain;width:100%;height:100%}.sp.vjs-has-started .vjs-poster,.sp.vjs-using-native-controls .vjs-poster{display:none}.sp.vjs-pip-container.vjs-has-started .vjs-poster{display:block}.sp .vjs-text-track-display{inset:0 0 calc(var(--sp-control-size) + var(--sp-progress-height) + 12px) 0;pointer-events:none;transition:bottom var(--sp-duration) var(--sp-ease);position:absolute}.sp.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:12px}.sp .vjs-modal-dialog{position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto}.sp-hidden{display:none!important}.video-js.sp .sp-controlbar{min-height:var(--sp-control-size);transition:opacity var(--sp-duration) var(--sp-ease), transform var(--sp-duration) var(--sp-ease);align-items:center;gap:4px;padding:8px 12px;display:flex;position:absolute;top:auto;bottom:0;left:0;right:0}.sp.vjs-user-inactive.vjs-playing .sp-controlbar{opacity:0;pointer-events:none;transform:translateY(6px)}.sp.vjs-user-inactive.vjs-playing .sp-progress{height:var(--sp-progress-height);pointer-events:none;bottom:0}.sp.vjs-user-inactive.vjs-playing{cursor:none}.video-js.sp .sp-controlbar__group{align-items:center;gap:4px;display:flex}.video-js.sp .sp-controlbar__group--center{flex:1;min-width:0}.video-js.sp .sp-controlbar__group--right{margin-left:auto}.video-js.sp .sp-btn{-webkit-appearance:none;appearance:none;width:var(--sp-control-size);height:var(--sp-control-size);cursor:pointer;border-radius:var(--sp-radius);color:inherit;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.video-js.sp .sp-btn:focus-visible{box-shadow:var(--sp-focus-ring);outline:none}.video-js.sp .sp-btn__icon{width:var(--sp-icon-size);height:var(--sp-icon-size);fill:currentColor;display:block}.video-js.sp .sp-btn--menu{gap:6px;width:auto;padding:0 10px}@media (pointer:coarse){.video-js.sp .sp-btn{min-width:44px;min-height:44px}}.video-js.sp .sp-volume{align-items:center;display:inline-flex}.video-js.sp .sp-volume__slider{opacity:0;width:0;transition:width var(--sp-duration) var(--sp-ease), opacity var(--sp-duration)}.sp-volume:hover .sp-volume__slider,.video-js.sp .sp-volume:focus-within .sp-volume__slider{opacity:1;width:80px}.video-js.sp .sp-time{font-variant-numeric:tabular-nums;white-space:nowrap;gap:4px;padding:0 8px;display:inline-flex}.video-js.sp .sp-progress{width:auto;left:0;right:0;bottom:calc(var(--sp-control-size) + 10px);cursor:pointer;height:16px;transition:opacity var(--sp-duration) var(--sp-ease), transform var(--sp-duration) var(--sp-ease), bottom var(--sp-duration) var(--sp-ease), height var(--sp-duration) var(--sp-ease);align-items:center;display:flex;position:absolute}.video-js.sp .sp-progress .vjs-progress-holder{height:var(--sp-progress-height);border-radius:0;flex:1;margin:0;position:relative;overflow:visible}.sp-progress .vjs-load-progress,.video-js.sp .sp-progress .vjs-play-progress{border-radius:inherit;height:100%;position:absolute;top:0;bottom:0;left:0;right:auto}.video-js.sp .sp-progress .vjs-play-progress:before{content:"";width:14px;height:14px;transition:transform var(--sp-duration) var(--sp-ease);border-radius:50%;position:absolute;top:50%;right:-7px;transform:translateY(-50%)scale(0)}.video-js.sp .sp-progress:hover .vjs-play-progress:before,.video-js.sp .sp-progress:focus-within .vjs-play-progress:before{transform:translateY(-50%)scale(1)}.sp-progress .vjs-mouse-display,.video-js.sp .sp-progress .vjs-time-tooltip{position:absolute}.video-js.sp .sp-menu{flex:none;width:auto;position:relative}.video-js.sp .sp-menu__label{white-space:nowrap;line-height:1}.video-js.sp .sp-menu .vjs-menu{display:none;position:absolute;bottom:calc(100% + 8px);right:0}.video-js.sp .sp-menu .vjs-menu-content{margin:0;padding:0;list-style:none}.sp-menu.vjs-hover .vjs-menu,.sp-menu:focus-within .vjs-menu,.video-js.sp .sp-menu .vjs-menu.vjs-lock-showing{display:block}.video-js.sp .sp-menu__list{border-radius:var(--sp-radius);min-width:160px;margin:0;padding:6px;list-style:none}.video-js.sp .sp-menu__item{border-radius:calc(var(--sp-radius) * .66);cursor:pointer;white-space:nowrap;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;display:flex}.video-js.sp .sp-overlay{justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.video-js.sp .sp-overlay--error:before{content:"";z-index:0;background:var(--sp-poster) center / cover no-repeat;filter:blur(var(--sp-overlay-blur));position:absolute;top:0;bottom:0;left:0;right:0;transform:scale(1.1)}.video-js.sp-skin--minimal .sp-overlay--error:before,.video-js.sp-skin--minimal .sp-overlay--live:before{transform:none}.video-js.sp .sp-overlay--error:after{content:"";z-index:0;position:absolute;top:0;bottom:0;left:0;right:0}.video-js.sp .sp-card{z-index:1;border-radius:var(--sp-radius-lg);text-align:center;width:100%;max-width:420px;padding:28px;position:relative}.video-js.sp .sp-card__icon{width:64px;height:64px;margin:0 auto 16px}.video-js.sp .sp-card__title{margin:0 0 8px;font-size:1.25em;font-weight:600}.video-js.sp .sp-card__body{margin:0 0 20px}.video-js.sp .sp-card__actions{justify-content:center;gap:8px;display:flex}.video-js.sp .sp-brand{bottom:calc(var(--sp-control-size) + clamp(20px, 3.4cqw, 36px));aspect-ratio:132.2/283;width:clamp(13px,2.4cqw,32px);height:auto;color:var(--sp-brand);pointer-events:none;transition:opacity var(--sp-duration-slow) var(--sp-ease);position:absolute;right:clamp(10px,2.4cqw,26px)}.video-js.sp .sp-brand__icon{fill:currentColor;width:100%;height:100%;display:block}.sp.vjs-has-started .sp-brand{opacity:0}.video-js.sp .sp-bigplay{aspect-ratio:1;cursor:pointer;width:clamp(72px,14%,140px);height:auto;transition:transform var(--sp-duration) var(--sp-ease), opacity var(--sp-duration), visibility 0s linear var(--sp-duration);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.video-js.sp .sp-bigplay .sp-btn__icon{width:100%;height:100%;transform:translate(4%)}.sp.vjs-playing .sp-bigplay,.sp.vjs-has-started .sp-bigplay{opacity:0;visibility:hidden;pointer-events:none}@media (prefers-reduced-motion:reduce){.video-js.sp .sp-bigplay:hover,.video-js.sp .sp-bigplay:active{transform:translate(-50%,-50%)}}.video-js.sp .sp-indicator{opacity:0;pointer-events:none;width:96px;height:96px;transition:opacity .36s var(--sp-ease), transform .36s var(--sp-ease);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)scale(.8)}.video-js.sp .sp-indicator--left{left:12%}.video-js.sp .sp-indicator--right{right:12%}.video-js.sp .sp-indicator--center{left:50%;transform:translate(-50%,-50%)scale(.8)}.video-js.sp .sp-indicator--visible{opacity:1;transition-duration:.12s;transform:translateY(-50%)scale(1)}.video-js.sp .sp-indicator--bare{-webkit-backdrop-filter:none;backdrop-filter:none;width:clamp(56px,14cqw,132px);height:clamp(56px,14cqw,132px);box-shadow:none;background:0 0;border-radius:0}.video-js.sp .sp-indicator--bare .sp-btn__icon{width:100%;height:100%}.video-js.sp .sp-indicator--center.sp-indicator--visible{transform:translate(-50%,-50%)scale(1)}.video-js.sp .sp-overlay--help .sp-card{overscroll-behavior:contain;max-height:calc(100% - 24px);overflow-y:auto}.video-js.sp .sp-help__grid{text-align:left;grid-template-columns:auto 1fr;gap:6px 16px;display:grid}.video-js.sp .sp-help__key{border-radius:6px;justify-self:start;padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.video-js.sp .sp-indicators{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.video-js .sp .sp-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.video-js.sp .sp-spinner{border:3px solid #0000;border-radius:50%;width:48px;height:48px;margin:0 auto 16px;animation:.8s linear infinite sp-spin}.video-js.sp .sp-overlay--loading .sp-spinner{margin:0}@keyframes sp-spin{to{transform:rotate(360deg)}}.video-js.sp .sp-live-badge{letter-spacing:.04em;border-radius:999px;align-items:center;gap:6px;height:26px;padding:0 10px;font-size:.8em;font-weight:700;display:inline-flex}.video-js.sp .sp-live-badge:before{content:"";border-radius:50%;width:8px;height:8px}.video-js.sp .sp-btn--golive{gap:6px;width:auto;padding:0 10px;font-weight:600}.sp--live:not(.sp--dvr) .sp-btn--golive,.sp--live:not(.sp--dvr) .sp-btn--seek-back,.sp--live:not(.sp--dvr) .sp-btn--seek-forward,.sp--live:not(.sp--dvr) .sp-progress,.sp--live .sp-menu--rate,.sp--live .sp-time__separator,.sp--live .sp-time__duration{display:none}.video-js.sp .sp-unmute{cursor:pointer;font:inherit;border:0;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;display:inline-flex;position:absolute;top:16px;left:16px}.video-js.sp .sp-overlay--live .sp-card,.video-js.sp .sp-overlay--error .sp-card{width:auto;max-width:min(560px,86%);padding:clamp(16px,4cqw,32px)}.video-js.sp .sp-overlay--countdown .sp-card{text-align:center;width:80%;max-width:none}.video-js.sp .sp-countdown{justify-content:center;gap:clamp(10px,4cqw,40px);display:flex}.video-js.sp .sp-countdown__seg{flex-direction:column;flex:0 auto;align-items:center;min-width:0;display:flex}.video-js.sp .sp-countdown__value{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(28px,13cqw,116px);font-weight:700;line-height:1}.video-js.sp .sp-countdown__unit{text-transform:lowercase;margin-top:clamp(4px,1cqw,10px);font-size:clamp(11px,2cqw,18px)}.video-js.sp .sp-countdown__when{font-size:clamp(14px,2.6cqw,26px);font-weight:600}.video-js.sp .sp-countdown__title{margin:clamp(4px,1.4cqw,14px) 0 clamp(6px,1.6cqw,16px);font-size:clamp(12px,2cqw,18px)}.video-js.sp .sp-overlay--live:before{content:"";z-index:0;background:var(--sp-poster) center / cover no-repeat;filter:blur(var(--sp-overlay-blur));position:absolute;top:0;bottom:0;left:0;right:0;transform:scale(1.1)}.video-js.sp .sp-overlay--live .sp-card,.video-js.sp .sp-overlay--error .sp-card{z-index:1}.video-js.sp .sp-overlay--live:after{content:"";z-index:0;position:absolute;top:0;bottom:0;left:0;right:0}@container (width<=480px){.sp-time__duration,.sp-time__separator,.video-js.sp .sp-btn--pip,.video-js.sp .sp-volume__slider{display:none}}.sp.vjs-error .sp-bigplay,.sp.vjs-error .sp-brand,.sp.vjs-error .sp-controlbar,.sp.vjs-error .sp-progress,.sp.vjs-error .vjs-text-track-display{display:none}@media (forced-colors:active){.video-js.sp .sp-btn:focus-visible{outline-offset:2px;outline:3px solid highlight}.video-js.sp .sp-bigplay:focus-visible{outline-offset:2px;outline:3px solid highlight}}body.vjs-full-window{height:100%;margin:0;padding:0;overflow-y:auto}.vjs-full-window .video-js.sp.vjs-fullscreen{z-index:1000;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.video-js.sp.vjs-fullscreen:not(.vjs-ios-native-fs){width:100%!important;height:100%!important;padding-top:0!important}.sp.sp--live:not(.sp--live-live) .sp-live-badge,.sp.sp--live:not(.sp--live-live) .sp-btn--golive{display:none}@media (prefers-reduced-motion:reduce){.sp *,.sp :before,.sp :after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.sp .sp-spinner{animation-duration:2s!important;animation-iteration-count:infinite!important}}@media (prefers-reduced-transparency:reduce){.sp .sp-controlbar,.sp .sp-menu__list,.sp .sp-card,.sp .sp-indicator:not(.sp-indicator--bare){-webkit-backdrop-filter:none;backdrop-filter:none}.sp .sp-overlay--error:before,.sp .sp-overlay--live:before{filter:none}}
/*$vite$:1*/
/* The `sept` skin: colour, surface and decoration over the shared structure, matching the
   parent site 1sept.ru (Bootstrap primary #cc4c29, system font stack, radii 6/8px).
   Decisions and contrast measurements: docs/superpowers/design/2026-09-08-sept-skin-direction.md */

.video-js.sp-skin--sept {
  --sp-accent: #cc4c29; /* 1sept.ru --bs-primary */
  --sp-accent-contrast: #ffffff;
  --sp-accent-deep: #ad4023; /* the brand colour shaded 15%, as primary buttons here hover */
  --sp-radius: 6px; /* --bs-border-radius */
  --sp-radius-lg: 8px; /* --bs-border-radius-lg */
  --sp-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /*
   * Terracotta is far weaker than the site's blue against a dark scrim: #cc4c29 measures
   * 1.66:1 there, and even mixed with white it stays under the 3:1 WCAG asks of a non-text
   * UI component. #e0947f is the site's own accent for dark surfaces (its dark-mode link
   * colour) and measures 3.11:1, so it carries the accent over video while the full-strength
   * brand colour is kept for the light cards, where white on it measures 4.53:1.
   */
  --sp-accent-on-dark: #e0947f; /* --bs-link-color, dark theme */
  /* The mark sits on the poster, not on chrome, so it takes the on-dark accent for the
     same contrast reason every other accent over video does. */
  --sp-brand: var(--sp-accent-on-dark);
  background: var(--sp-bg);
}

/* Control bar ------------------------------------------------------------ */
.video-js.sp-skin--sept .sp-controlbar {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}
.video-js.sp-skin--sept .sp-btn:hover {
  background: color-mix(in srgb, var(--sp-text) 12%, transparent);
}
.video-js.sp-skin--sept .sp-btn:active {
  transform: scale(0.94);
}
.video-js.sp-skin--sept .sp-time {
  color: var(--sp-text-muted);
}
.video-js.sp-skin--sept .sp-time__current {
  color: var(--sp-text);
}

/* Seek bar --------------------------------------------------------------- */
.video-js.sp-skin--sept .sp-progress .vjs-progress-holder {
  /* No hover growth: animating height thrashes layout, and the handle scaling in already
     says the bar is scrubbable.

     Opaque, not translucent. The rail sits above the control bar, on raw video, so a
     see-through track composites with whatever frame is behind it: against a white frame the
     old rgba track measured 1.7:1 against the fill, and 1.1:1 in the sept skin. A solid ground
     holds the fill at a constant 10.7:1 whatever is playing. */
  background: #000000;
}
.video-js.sp-skin--sept .sp-progress .vjs-load-progress {
  background: color-mix(in srgb, var(--sp-text) 32%, transparent);
}
.video-js.sp-skin--sept .sp-progress .vjs-play-progress {
  background: var(--sp-accent-on-dark);
}
.video-js.sp-skin--sept .sp-progress .vjs-play-progress::before {
  background: #ffffff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent-on-dark) 55%, transparent);
}
.video-js.sp-skin--sept .sp-volume__slider {
  accent-color: var(--sp-accent-on-dark);
}

/* Menus ------------------------------------------------------------------ */
.video-js.sp-skin--sept .sp-menu__list {
  background: var(--sp-surface-strong);
  backdrop-filter: blur(12px);
  box-shadow: var(--sp-shadow);
}
.video-js.sp-skin--sept .sp-menu__item:hover {
  background: color-mix(in srgb, var(--sp-text) 10%, transparent);
}
.video-js.sp-skin--sept .sp-menu__item--selected {
  color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--sept .sp-menu__item .sp-btn__icon {
  opacity: 0;
  width: 16px;
  height: 16px;
}
.video-js.sp-skin--sept .sp-menu__item--selected .sp-btn__icon {
  opacity: 1;
}
.video-js.sp-skin--sept .sp-menu__label {
  color: var(--sp-text-muted);
}

/* Overlay cards ---------------------------------------------------------- */
.video-js.sp-skin--sept .sp-overlay--error::after,
.video-js.sp-skin--sept .sp-overlay--help {
  background: rgba(20, 8, 4, 0.62);
}
/* Cards over video are a translucent panel on a dimmed frame, not a white sheet. */
.video-js.sp-skin--sept .sp-card {
  background: rgba(20, 8, 4, 0.42);
  color: var(--sp-text);
  box-shadow: var(--sp-shadow);
  backdrop-filter: blur(10px) saturate(120%);
}
/* Every error icon is white. The accent means "you can press this", and on this card that
   is the retry button alone — a coloured icon would compete with it while doing nothing. */
.video-js.sp-skin--sept .sp-card__icon {
  color: var(--sp-text);
}
.video-js.sp-skin--sept .sp-overlay--not-found .sp-card__icon svg path:first-child {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.video-js.sp-skin--sept .sp-card__icon svg {
  width: 100%;
  height: 100%;
}
.video-js.sp-skin--sept .sp-card__body {
  color: var(--sp-text-muted);
}
.video-js.sp-skin--sept .sp-btn--retry {
  width: auto;
  padding: 0 18px;
  background: var(--sp-accent);
  color: var(--sp-accent-contrast);
  font-weight: 600;
}
.video-js.sp-skin--sept .sp-btn--retry:hover {
  background: color-mix(in srgb, var(--sp-accent) 88%, black);
}

/* Big play, indicator, spinner, help ------------------------------------- */
/* The glyph alone, in the brand colour; the shadow separates it from the frame and hover
   shades it 15%, as this system's primary buttons do. */
.video-js.sp-skin--sept .sp-bigplay {
  color: var(--sp-accent);
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.6));
  transition:
    transform 140ms var(--sp-ease),
    color 140ms var(--sp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .video-js.sp-skin--sept .sp-bigplay:hover {
    color: var(--sp-accent-deep);
    transform: translate(-50%, -50%) scale(1.06);
  }
}
.video-js.sp-skin--sept .sp-bigplay:active {
  transform: translate(-50%, -50%) scale(0.96);
  transition-duration: 120ms;
}
.video-js.sp-skin--sept .sp-bigplay:focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
}
@media (prefers-contrast: more) {
  .video-js.sp-skin--sept .sp-bigplay {
    color: #ffffff;
    filter: drop-shadow(0 0 3px #000000) drop-shadow(0 0 6px #000000);
  }
}
/* The poster is whatever the publisher uploaded: on a mid-tone frame the mark measures 1.6:1
   and disappears, so like every other glyph over video it carries its own separation. */
.video-js.sp-skin--sept .sp-brand {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
@media (prefers-contrast: more) {
  .video-js.sp-skin--sept .sp-brand {
    color: #ffffff;
    filter: drop-shadow(0 0 2px #000000) drop-shadow(0 0 4px #000000);
  }
}
.video-js.sp-skin--sept .sp-indicator--bare {
  color: var(--sp-text);
  /* Unplated, the glyph needs its own separation from a bright frame. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}
/* The plate belongs to the value readouts; a bare flash is the glyph alone. */
.video-js.sp-skin--sept .sp-indicator:not(.sp-indicator--bare) {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  font-weight: 700;
  font-size: 1.1em;
  color: var(--sp-text);
}
.video-js.sp-skin--sept .sp-spinner {
  border-top-color: var(--sp-accent-on-dark);
  border-right-color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--sept .sp-help__key {
  background: color-mix(in srgb, var(--sp-text) 16%, transparent);
  color: var(--sp-text);
}
.video-js.sp-skin--sept .sp-help__desc {
  color: var(--sp-text-muted);
}
.video-js.sp-skin--sept .sp-btn--close {
  color: var(--sp-text-muted);
}

/* Live ------------------------------------------------------------------- */
.video-js.sp-skin--sept .sp-live-badge {
  background: rgba(0, 0, 0, 0.45);
  color: var(--sp-text);
}
.video-js.sp-skin--sept .sp-live-badge::before {
  background: var(--sp-text-muted);
}
/* The brand colour is already a red, so the live badge is on-brand rather than a second red. */
.video-js.sp-skin--sept .sp-live-badge--edge {
  background: var(--sp-accent);
  color: var(--sp-accent-contrast);
}
.video-js.sp-skin--sept .sp-live-badge--edge::before {
  background: #ffffff;
  animation: sp-pulse 1.4s ease-in-out infinite;
}
@keyframes sp-pulse {
  50% {
    opacity: 0.35;
  }
}
.video-js.sp-skin--sept .sp-btn--golive.sp-btn--active {
  color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--sept .sp-unmute {
  background: var(--sp-card-bg);
  color: var(--sp-card-text);
  box-shadow: var(--sp-shadow);
}
.video-js.sp-skin--sept .sp-overlay--live::after {
  background: rgba(20, 8, 4, 0.62);
}

.video-js.sp-skin--sept .sp-countdown__value {
  color: var(--sp-text);
}
.video-js.sp-skin--sept .sp-countdown__when {
  color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--sept .sp-countdown__unit,
.video-js.sp-skin--sept .sp-countdown__title {
  color: var(--sp-text-muted);
}

/*
 * Стили плеера поверх @1sept/player: только размеры кадра.
 * Цвет, поверхности и типографика — в скине пакета (skins/sept.css),
 * перекрывать .sp-* здесь нельзя, для этого есть токены --sp-*.
 */

/*
 * Соотношение сторон. video.js на каждый плеер пишет в <head> отдельный
 * \3c style> с шириной и высотой в пикселях (по умолчанию 300x150), а .sp
 * растягивает <video> внутри себя абсолютным позиционированием — без этой
 * рамки кадр остался бы размером с открытку. !important: тот \3c style>
 * вставляется первым в <head>, но специфичность у него такая же.
 *
 * Класс держится и на самом <video> до инициализации, и на обёртке после
 * (video.js переносит на неё атрибуты тега), поэтому страница не прыгает,
 * пока плеер не поднялся.
 */
.jsVideoPlayer {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  background-color: #000;
}