.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{-o-object-fit:contain;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;-moz-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{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;-moz-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}.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-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){backdrop-filter:none}.sp .sp-overlay--error:before,.sp .sp-overlay--live:before{filter:none}}
/*$vite$:1*/
/*
 * The `video` skin: the player dressed as another block of video.1sept.ru's "учительская с
 * большим экраном". Values and rules come from that site's design system (../video/DESIGN.md),
 * not from taste: one azure accent, flat surfaces, tone-and-hairline instead of shadow, and
 * PT Sans throughout.
 * Contrast measurements: docs/superpowers/design/2026-09-07-video-skin-direction.md
 */

.video-js.sp-skin--video {
  --sp-accent: #0376b4; /* azure — the single brand colour */
  --sp-accent-contrast: #ffffff;
  --sp-accent-deep: #036499; /* azure-deep — hover on a primary fill */
  /*
   * azure-sky. The system's rule of contrast on graphite: azure reaches only ~3:1 on #212529,
   * so anything accent-coloured over video takes this instead. Measured 5.2:1 on the menu
   * surface, 3.0:1 on the control bar.
   */
  --sp-accent-on-dark: #68add2;
  /* 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);
  /* progress-cyan. In this system blue means "progress" and nothing else, which is exactly
     what a seek bar is; the covers use the same black-track/cyan-fill pair. */
  --sp-progress: #0dcaf0;
  --sp-bg: #000000; /* "постер на чёрном" */
  --sp-radius: 6px; /* --bs-border-radius */
  --sp-radius-lg: 16px; /* --bs-border-radius-xl: covers, panels, media blocks */
  /* Bootstrap's own focus ring, so a focused control matches the rest of the site. */
  --sp-focus-ring: 0 0 0 0.25rem rgba(3, 118, 180, 0.5);
  /* The system is flat: depth is tone and hairlines. Shadows survive only on floating
     layers, which is why the menu below still has one. */
  --sp-shadow: none;
  /*
   * 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% azure at 0.62 holds a white glyph at 3.56:1, past the 3:1 WCAG asks of a
   * non-text UI component, and holds the clock's numerals at the same 3.56: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, which suits a system that has no decorative gradients anyway. */
/*
 * 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--video .sp-controlbar .sp-btn:hover {
    background: var(--sp-plate-hover);
  }
}
.video-js.sp-skin--video .sp-btn:hover {
  background: color-mix(in srgb, var(--sp-text) 12%, transparent);
}
.video-js.sp-skin--video .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--video .sp-time {
  color: var(--sp-text);
}

/* Seek bar -----------------------------------------------------------------
   The catalogue covers draw watched progress as a cyan fill on a black track; the seek
   bar is the same object, so it uses the same pair. Fill against track measures 6.9:1. */
.video-js.sp-skin--video .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--video .sp-progress .vjs-load-progress {
  background: rgba(255, 255, 255, 0.28);
}
.video-js.sp-skin--video .sp-progress .vjs-play-progress {
  background: var(--sp-progress);
}
/* Where a press would land, in the same cyan that means progress in this system but at half
   strength: 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--video .sp-progress .vjs-mouse-display::before {
  background: color-mix(in srgb, var(--sp-progress) 45%, transparent);
}
.video-js.sp-skin--video .sp-volume__slider {
  accent-color: var(--sp-accent-on-dark);
}

/* Menus --------------------------------------------------------------------
   A dropdown is a floating layer, the one place this system still allows a shadow. */
.video-js.sp-skin--video .sp-menu__list {
  background: var(--sp-surface-strong);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.video-js.sp-skin--video .sp-menu__item:hover {
  background: color-mix(in srgb, var(--sp-text) 10%, transparent);
}
.video-js.sp-skin--video .sp-menu__item--selected {
  color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--video .sp-menu__item .sp-btn__icon {
  opacity: 0;
  width: 16px;
  height: 16px;
}
.video-js.sp-skin--video .sp-menu__item--selected .sp-btn__icon {
  opacity: 1;
}
.video-js.sp-skin--video .sp-menu__label {
  color: var(--sp-text-muted);
}

/* Overlay panels -----------------------------------------------------------
   Flat at rest: no glass, no shadow. The block is separated by tone plus a hairline at
   30% of the accent, which is how this system draws its own panels. */
.video-js.sp-skin--video .sp-overlay--error::after,
.video-js.sp-skin--video .sp-overlay--help {
  background: rgba(6, 8, 14, 0.62);
}
.video-js.sp-skin--video .sp-card {
  background: rgba(6, 8, 14, 0.42);
  color: var(--sp-text);
  border: 1px solid color-mix(in srgb, var(--sp-accent) 30%, transparent);
}
.video-js.sp-skin--video .sp-card__title {
  font-weight: 700;
}
/* 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--video .sp-card__icon {
  color: var(--sp-text);
}
.video-js.sp-skin--video .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--video .sp-card__icon svg {
  width: 100%;
  height: 100%;
}
.video-js.sp-skin--video .sp-card__body {
  color: var(--sp-text-muted);
}
/* The one filled call to action on the surface, at the site's large-button radius. */
.video-js.sp-skin--video .sp-btn--retry {
  width: auto;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--sp-accent);
  color: var(--sp-accent-contrast);
  font-weight: 500;
}
.video-js.sp-skin--video .sp-btn--retry:hover {
  background: var(--sp-accent-deep);
}

/* Big play, indicator, spinner, help -------------------------------------
   The glyph alone, in the brand colour. With no disc behind it the shadow does the
   separating, and hover takes the system's own azure-deep. */
.video-js.sp-skin--video .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--video .sp-bigplay:hover {
    color: var(--sp-accent-deep);
    transform: translate(-50%, -50%) scale(1.06);
  }
}
.video-js.sp-skin--video .sp-bigplay:active {
  transform: translate(-50%, -50%) scale(0.96);
  transition-duration: 120ms;
}
.video-js.sp-skin--video .sp-bigplay:focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
}
@media (prefers-contrast: more) {
  .video-js.sp-skin--video .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--video .sp-brand {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
@media (prefers-contrast: more) {
  .video-js.sp-skin--video .sp-brand {
    color: #ffffff;
    filter: drop-shadow(0 0 2px #000000) drop-shadow(0 0 4px #000000);
  }
}
.video-js.sp-skin--video .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--video .sp-indicator:not(.sp-indicator--bare) {
  background: rgba(0, 0, 0, 0.62);
  font-weight: 700;
  font-size: 1.1em;
  color: var(--sp-text);
}
.video-js.sp-skin--video .sp-spinner {
  border-top-color: var(--sp-accent-on-dark);
  border-right-color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--video .sp-help__key {
  background: color-mix(in srgb, var(--sp-text) 16%, transparent);
  color: var(--sp-text);
}
.video-js.sp-skin--video .sp-help__desc {
  color: var(--sp-text-muted);
}
.video-js.sp-skin--video .sp-btn--close {
  color: var(--sp-text-muted);
}

/* Live ---------------------------------------------------------------------
   The badge is the catalogue's corner stamp: red means "в эфире" and nothing else. */
/* 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 the badge is 11px bold — text, and not large text. */
.video-js.sp-skin--video .sp-live-badge {
  background: var(--sp-plate);
  color: var(--sp-text);
  text-transform: uppercase;
}
.video-js.sp-skin--video .sp-live-badge::before {
  background: var(--sp-text-muted);
}
.video-js.sp-skin--video .sp-live-badge--edge {
  background: #dc3545;
  color: #ffffff;
}
.video-js.sp-skin--video .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--video .sp-unmute {
  background: var(--sp-accent);
  color: var(--sp-accent-contrast);
  font-weight: 500;
}
.video-js.sp-skin--video .sp-unmute:hover {
  background: var(--sp-accent-deep);
}
.video-js.sp-skin--video .sp-overlay--live::after {
  background: rgba(6, 8, 14, 0.62);
}
.video-js.sp-skin--video .sp-countdown__value {
  color: var(--sp-text);
}
.video-js.sp-skin--video .sp-countdown__when {
  color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--video .sp-countdown__unit,
.video-js.sp-skin--video .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 — flat, hairline,
   no glass, like every other panel in this system. */
.video-js.sp-skin--video .sp-settings__panel {
  background: var(--sp-surface-strong);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.video-js.sp-skin--video .sp-settings__row:hover,
.video-js.sp-skin--video .sp-settings__option:hover,
.video-js.sp-skin--video .sp-settings__back:hover {
  background: color-mix(in srgb, var(--sp-text) 10%, transparent);
}
.video-js.sp-skin--video .sp-settings__value {
  color: var(--sp-text-muted);
}
.video-js.sp-skin--video .sp-settings__option--selected {
  color: var(--sp-accent-on-dark);
}
.video-js.sp-skin--video .sp-settings__option .sp-btn__icon {
  opacity: 0;
}
.video-js.sp-skin--video .sp-settings__option--selected .sp-btn__icon {
  opacity: 1;
}
/* Tone and a hairline, the way this system separates anything. */
.video-js.sp-skin--video .sp-settings__back {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  margin-bottom: 4px;
}

/**
 * Swiper 14.4.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 30, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: "";
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */

/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }

  ::slotted(svg),
  svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  ::slotted(.swiper-navigation-icon),
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    ::slotted(.swiper-navigation-icon),
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}