.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:32px;--sp-icon-size:24px;--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-plate:#0000007a;--sp-plate-hover:#8080807a;--sp-transport-shadow:#0000008c;--sp-transport-size:clamp(68px, 15cqw, 104px);--sp-progress-height:4px;--sp-brand:var(--sp-accent);--sp-poster:none}.sp,.sp *,.sp :before,.sp :after{box-sizing:border-box}.sp{--sp-frame-pad:clamp(6px, 1.9cqw, 14px);--sp-clock-height:clamp(28px, 4.4cqw, 38px);--sp-corner-size:var(--sp-control-size);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-frame-pad) + var(--sp-corner-size) + var(--sp-progress-height) + 16px) 0;pointer-events:none;transition:bottom var(--sp-duration) var(--sp-ease);position:absolute}@media (pointer:coarse){.sp .vjs-text-track-display{bottom:calc(var(--sp-frame-pad) + var(--sp-progress-height) + var(--sp-clock-height) + 8px)}}.sp.vjs-user-inactive.vjs-playing .vjs-text-track-display,.sp:not(.vjs-has-started):not(:hover):not(:focus-within) .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{padding:var(--sp-frame-pad);pointer-events:none;transition:opacity var(--sp-duration) var(--sp-ease), transform var(--sp-duration) var(--sp-ease);align-items:flex-end;gap:clamp(4px,1.2cqw,10px);display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.sp.vjs-user-inactive.vjs-playing .sp-controlbar,.sp:not(.vjs-has-started):not(:hover):not(:focus-within) .sp-controlbar{opacity:0;transform:translateY(6px)}.sp.vjs-user-inactive.vjs-playing .sp-controlbar__group,.sp:not(.vjs-has-started):not(:hover):not(:focus-within) .sp-controlbar__group{pointer-events:none}.sp.vjs-user-inactive.vjs-playing{cursor:none}.video-js.sp .sp-controlbar__group{pointer-events:auto;align-items:center;gap:4px;display:flex}.video-js.sp .sp-controlbar__group--right{margin-left:auto}@media not all and (pointer:coarse){@container (width<=560px){.video-js.sp .sp-controlbar .sp-btn--pip{display:none}}@container (width<=440px){.video-js.sp .sp-controlbar .sp-seek{display:none}}@container (width<=340px){.video-js.sp .sp-time__separator,.video-js.sp .sp-time__duration{display:none}}}@media (pointer:coarse){.video-js.sp .sp-controlbar{padding-bottom:calc(var(--sp-frame-pad) + var(--sp-progress-height));grid-template:"top top""mid mid"1fr"time end"/1fr auto;gap:clamp(6px,1.6cqw,12px);display:grid}.video-js.sp .sp-controlbar__group--left{grid-area:mid;place-self:center;gap:clamp(8px,3cqw,28px)}.video-js.sp .sp-controlbar__group--center{grid-area:time;place-self:end start;min-width:0}.video-js.sp .sp-controlbar__group--right{grid-area:top;place-self:start end;margin-left:0}.video-js.sp .sp-controlbar__group--end{grid-area:end;place-self:end}.sp:not(.vjs-has-started) .sp-controlbar__group--left{display:none}}.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){.sp{--sp-corner-size:max(var(--sp-control-size), 44px);--sp-icon-size:32px}.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{height:var(--sp-corner-size);background:var(--sp-plate);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:0 .9em;font-size:.86em;font-weight:600;display:inline-flex}.video-js.sp .sp-time__separator,.video-js.sp .sp-time__duration{font-weight:400}@media (pointer:coarse){.video-js.sp .sp-time{height:var(--sp-clock-height);font-size:clamp(12px,2.6cqw,17px)}}.video-js.sp .sp-progress{width:auto;left:0;right:0;bottom:calc(var(--sp-frame-pad) + var(--sp-corner-size) + 8px);cursor:pointer;height:16px;transition:transform var(--sp-duration) var(--sp-ease);align-items:flex-end;display:flex;position:absolute}.sp.vjs-user-inactive.vjs-playing .sp-progress,.sp:not(.vjs-has-started):not(:hover):not(:focus-within) .sp-progress{transform:translateY(calc(var(--sp-frame-pad) + var(--sp-corner-size) + 8px));pointer-events:none}@media (pointer:coarse){.video-js.sp .sp-progress{height:clamp(18px,4.5cqw,26px);bottom:0}.sp.vjs-user-inactive.vjs-playing .sp-progress,.sp:not(.vjs-has-started):not(:hover):not(:focus-within) .sp-progress{transform:none}}.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{z-index:1}.video-js.sp .sp-progress .vjs-play-progress .vjs-time-tooltip{display:none}.video-js.sp .sp-progress .vjs-mouse-display{width:0;height:var(--sp-progress-height);opacity:0;transition:opacity var(--sp-duration) var(--sp-ease);position:absolute;bottom:0}.video-js.sp .sp-progress .vjs-mouse-display:before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:0}.video-js.sp .sp-progress .vjs-mouse-display .vjs-time-tooltip{z-index:3;background:var(--sp-surface-strong);box-shadow:var(--sp-shadow);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--sp-duration) var(--sp-ease);border-radius:999px;padding:.3em .62em;font-size:clamp(11px,2.2cqw,14px);font-weight:600;line-height:1.4;position:absolute;bottom:calc(100% + 8px)}.video-js.sp .sp-progress:hover .vjs-mouse-display,.video-js.sp .sp-progress:focus-within .vjs-mouse-display,.video-js.sp .sp-progress:hover .vjs-mouse-display .vjs-time-tooltip,.video-js.sp .sp-progress:focus-within .vjs-mouse-display .vjs-time-tooltip{visibility:visible;opacity:1}.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}@media (pointer:coarse){.video-js.sp .sp-menu .vjs-menu{top:calc(100% + 8px);bottom:auto}}.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{z-index:4;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{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;top:clamp(10px,2.4cqw,22px);bottom:auto;left:clamp(10px,2.4cqw,22px);right:auto}.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{z-index:0}.video-js.sp .sp-overlay--loading .sp-spinner{margin:0}@keyframes sp-spin{to{transform:rotate(360deg)}}.video-js.sp .sp-controlbar .sp-btn{background:var(--sp-plate);border-radius:999px}.video-js.sp .sp-seek{background:var(--sp-plate);border-radius:999px;align-items:center;gap:0;display:inline-flex}.video-js.sp .sp-controlbar .sp-seek .sp-btn{background:0 0}@media not all and (pointer:coarse){.video-js.sp .sp-controlbar .sp-btn--play .sp-btn__icon{width:94%;height:94%}}@media (hover:hover) and (pointer:fine){.video-js.sp .sp-controlbar .sp-seek:hover{background:var(--sp-plate-hover)}.video-js.sp .sp-controlbar .sp-seek .sp-btn:hover{background:0 0}.video-js.sp .sp-controlbar .sp-btn:hover .sp-btn__icon{filter:drop-shadow(0 1px 2px var(--sp-transport-shadow)) drop-shadow(0 0 6px var(--sp-transport-shadow))}}@media (pointer:coarse){.video-js.sp .sp-seek{display:none}.video-js.sp .sp-controlbar__group--left .sp-btn--seek-back{order:-1}.video-js.sp .sp-controlbar__group--left .sp-btn{width:max(44px, calc(var(--sp-transport-size) * .54));height:max(44px, calc(var(--sp-transport-size) * .54));filter:drop-shadow(0 2px 10px var(--sp-transport-shadow));background:0 0}.video-js.sp .sp-controlbar__group--left .sp-btn:active{background:0 0;transform:scale(.94)}.video-js.sp .sp-controlbar__group--left .sp-btn--play{width:var(--sp-transport-size);height:var(--sp-transport-size)}.video-js.sp .sp-controlbar__group--left .sp-btn__icon{width:78%;height:78%}.video-js.sp .sp-controlbar__group--left .sp-btn--play .sp-btn__icon{width:100%;height:100%}.video-js.sp .sp-volume{display:none}}.video-js.sp .sp-controlbar__group--right .sp-btn:not(.sp-btn--menu){width:var(--sp-corner-size);height:var(--sp-corner-size);padding:0}.video-js.sp .sp-settings{position:static}.video-js.sp .sp-settings__panel{bottom:calc(var(--sp-frame-pad) + var(--sp-corner-size) + 8px);right:var(--sp-frame-pad);max-height:calc(100% - var(--sp-frame-pad) * 2 - var(--sp-corner-size) - 16px);border-radius:var(--sp-radius);overscroll-behavior:contain;min-width:min(224px,62cqw);padding:6px;position:absolute;overflow-y:auto}@media (pointer:coarse){.video-js.sp .sp-settings__panel{top:calc(var(--sp-frame-pad) + var(--sp-corner-size) + 8px);bottom:auto}}.video-js.sp .sp-settings__view:not([hidden]){flex-direction:column;display:flex}.video-js.sp .sp-settings__row,.video-js.sp .sp-settings__option,.video-js.sp .sp-settings__back{-webkit-appearance:none;appearance:none;font:inherit;text-align:left;cursor:pointer;border-radius:calc(var(--sp-radius) * .66);white-space:nowrap;background:0 0;border:0;align-items:center;gap:10px;min-height:40px;padding:8px 10px;display:flex}.sp .sp-settings__row,.sp .sp-settings__option,.sp .sp-settings__back{color:inherit}.video-js.sp .sp-settings__row:focus-visible{box-shadow:var(--sp-focus-ring);outline:none}.video-js.sp .sp-settings__option:focus-visible{box-shadow:var(--sp-focus-ring);outline:none}.video-js.sp .sp-settings__back:focus-visible{box-shadow:var(--sp-focus-ring);outline:none}.video-js.sp .sp-settings__label{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.video-js.sp .sp-settings__row .sp-btn__icon,.video-js.sp .sp-settings__option .sp-btn__icon,.video-js.sp .sp-settings__back .sp-btn__icon{fill:currentColor;flex:none;width:16px;height:16px}.video-js.sp .sp-settings__back .sp-btn__icon{margin-left:-2px}.video-js.sp .sp-settings__back .sp-settings__label{font-weight:600}.sp.sp--modal .sp-controlbar,.sp.sp--modal .sp-progress,.sp.sp--modal .sp-bigplay,.sp.sp--modal .sp-brand{display:none}.video-js.sp .sp-live-badge,.video-js.sp .sp-controlbar__group--center .sp-btn{height:var(--sp-corner-size)}@media (pointer:coarse){.video-js.sp .sp-live-badge,.video-js.sp .sp-controlbar__group--center .sp-btn{height:var(--sp-clock-height)}}.video-js.sp .sp-live-badge{letter-spacing:.04em;border-radius:999px;align-items:center;gap:6px;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-controlbar .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}.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-settings__row:focus-visible{outline-offset:2px;outline:3px solid highlight}.video-js.sp .sp-settings__option:focus-visible{outline-offset:2px;outline:3px solid highlight}.video-js.sp .sp-settings__back: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,.sp.sp--live:not(.sp--live-live) .sp-bigplay,.sp.sp--live:not(.sp--live-live) .sp-controlbar,.sp.sp--live:not(.sp--live-live) .sp-progress{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-plate:#000;--sp-plate-hover:#1a1a1a}.sp .sp-settings__panel,.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);
  /*
   * The bubbles carry the brand rather than a neutral black. A tint lightens the plate, so the
   * alpha pays for it — and the alpha is also what makes the tint read at all, since below about
   * 0.6 the frame behind still dominates the composite. Raising the accent share is what keeps
   * the hue reading through the transparency.
   *
   * One weight for every bubble, glyph and clock alike. Measured on the hardest frame there is,
   * a white one: 55% terracotta at 0.62 holds a white glyph at 3.50:1, past the 3:1 WCAG asks of a
   * non-text UI component, and holds the clock's numerals at the same 3.50:1 against the 4.5:1 it
   * asks of text — a deliberate trade for a row that reads as one thing.
   */
  /* One ink, so that "hover is the plate, lightened" is what the source says. Lightening costs
     contrast and there was none spare: the glyph goes from 3.5:1 at rest to 1.7:1 on hover,
     well under the 3:1 a non-text UI component asks, which is why it carries a shadow through
     the hover. Deepening instead is one value — swap #ffffff for #000000 below. */
  --sp-plate-ink: color-mix(in srgb, var(--sp-accent) 55%, #000000);
  --sp-plate: color-mix(in srgb, var(--sp-plate-ink) 62%, transparent);
  --sp-plate-hover: color-mix(in srgb, color-mix(in srgb, var(--sp-plate-ink) 50%, #ffffff) 62%, transparent);
  background: var(--sp-bg);
}

/* Control bar ------------------------------------------------------------
   No surface of its own: the chrome is a layer over the whole frame and each control brings its
   own plate, so a gradient here would tint the picture. */
/*
 * One answer for every bubble, and it lightens. Behind a hover query because that is also the
 * layout query: the bar is the fine-pointer layout, and in the frame layout the transport is a
 * bare glyph that a sticky touch hover would put a plate back under.
 */
@media (hover: hover) and (pointer: fine) {
  .video-js.sp-skin--sept .sp-controlbar .sp-btn:hover {
    background: var(--sp-plate-hover);
  }
}
.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);
}
/* Both halves at full strength. The duration used to be --sp-text-muted, which cost 0.7 of a
   contrast ratio for a hierarchy that weight can carry instead — see .sp-time__duration in
   structure.css. On one uniform plate the clock needs every bit of it. */
.video-js.sp-skin--sept .sp-time {
  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);
}
/* Where a press would land, drawn in the accent that already means "played" but at half
   strength: the same colour reads as the same axis, and the paleness is what says "not yet".
   Distinct from the buffered bar above, which is neutral — hue separates the two meanings. */
.video-js.sp-skin--sept .sp-progress .vjs-mouse-display::before {
  background: color-mix(in srgb, var(--sp-accent-on-dark) 45%, 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 ------------------------------------------------------------------- */
/* The plate text sits on, not a lighter one of its own: white on 0.45 black measured 3.18:1
   over a white frame, and "ЭФИР" is 11px bold — text, and not large text. */
.video-js.sp-skin--sept .sp-live-badge {
  background: var(--sp-plate);
  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);
}

/* Settings panel ---------------------------------------------------------
   The gear's panel is a menu by another name and takes the menu's surface. */
.video-js.sp-skin--sept .sp-settings__panel {
  background: var(--sp-surface-strong);
  backdrop-filter: blur(12px);
  box-shadow: var(--sp-shadow);
}
.video-js.sp-skin--sept .sp-settings__row:hover,
.video-js.sp-skin--sept .sp-settings__option:hover,
.video-js.sp-skin--sept .sp-settings__back:hover {
  background: color-mix(in srgb, var(--sp-text) 10%, transparent);
}
.video-js.sp-skin--sept .sp-settings__value {
  color: var(--sp-text-muted);
}
.video-js.sp-skin--sept .sp-settings__option--selected {
  color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--sept .sp-settings__option .sp-btn__icon {
  opacity: 0;
}
.video-js.sp-skin--sept .sp-settings__option--selected .sp-btn__icon {
  opacity: 1;
}
/* The one hairline in the panel: it separates going back from choosing. */
.video-js.sp-skin--sept .sp-settings__back {
  border-bottom: 1px solid color-mix(in srgb, var(--sp-text) 14%, transparent);
  border-radius: 0;
  margin-bottom: 4px;
}

/*
 * Стили плеера поверх @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;
}