@font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --bg1:#0b0f1a;
  --bg2:#070a12;
  --text:#ffffff;
  --muted:#ffffff;
  --border:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.04);
  --shadow:0 24px 80px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(43,156,255,.22);
  --radius:4px;
  --accent:#8AAED9;
  --maxw:min(1560px,92vw);
  --glow-radius:8px;
  --frame-w:min(100%,calc(72vh * 16 / 9));
  --font:"Clarity City",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  --audioGlowOpacity:0.85;
  --audioGlowBlur:10px;
  --audioGlowSat:1.15;
  --audioGlowRot:0deg;
  --audioAmp:0.12;
  --audioBass:0.12;
  --audioMid:0.08;
  --audioTreble:0.06;
  --audioHue:0deg;
  --audioShear:0deg;
  --audioZoom:1.00;
  --audioJitterX:0px;
  --audioJitterY:0px;
  --audioShift:0px;
  --audioGrain:0.10;
  --audioPulse:0.50;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{
  scroll-behavior:smooth;
  background-color:var(--bg2);
}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:var(--font);
  letter-spacing:-.012em;
  background:transparent;
}
.page-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background-color:var(--bg2);
  background-image:url("../img/player-testcard.png");
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.page-bg-video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
}
.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(7,10,18,.72), rgba(7,10,18,.86));
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* player, extracted from the site stylesheet */
    .player{
      position: relative;
      width:100%;
      aspect-ratio: 16/9;
      border-radius: var(--glow-radius);
      overflow:hidden;
      background: rgba(255,255,255,0.03);
      box-shadow: var(--shadow);
      transform: translateZ(0);
    }
    .player::before{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius: calc(var(--glow-radius) + 6px);
      background: conic-gradient(
        from 0deg,
        #ff2bd6,
        #7c3aed,
        #8AAED9,
        #00f0ff,
        #00ff85,
        #ffe14d,
        #ff7a18,
        #ff2bd6
      );
      filter: blur(10px);
      opacity: 0.95;
      z-index: 0;
      pointer-events:none;
      will-change: transform, opacity, filter;
    }
    .player::after{
      content:"";
      position:absolute;
      inset: 2px;
      border-radius: calc(var(--glow-radius) - 2px);
      background: rgba(8, 10, 18, 0.78);
      z-index: 1;
      pointer-events:none;
    }
    .player .aurora{
      position:absolute;
      inset:-18px;
      border-radius: calc(var(--glow-radius) + 18px);
      z-index: 1;
      pointer-events:none;
      background:
        radial-gradient(60% 55% at 20% 20%,
          rgba(124,58,237,0.22),
          rgba(138,174,217,0.10) 35%,
          transparent 70%),
        radial-gradient(50% 60% at 80% 70%,
          rgba(255,43,214,0.16),
          rgba(0,255,133,0.10) 45%,
          transparent 75%),
        conic-gradient(
          from calc(var(--audioGlowRot) + 20deg),
          rgba(255,43,214,0.00),
          rgba(255,43,214,0.60),
          rgba(124,58,237,0.60),
          rgba(43,156,255,0.55),
          rgba(138,174,217,0.55),
          rgba(0,255,133,0.50),
          rgba(255,225,77,0.45),
          rgba(255,122,24,0.45),
          rgba(255,43,214,0.60),
          rgba(255,43,214,0.00)
        );
      -webkit-mask:
        radial-gradient(closest-side, transparent calc(100% - 36px), #000 calc(100% - 10px));
      mask:
        radial-gradient(closest-side, transparent calc(100% - 36px), #000 calc(100% - 10px));
      filter:
        blur(calc(10px + var(--audioAmp) * 18px))
        saturate(calc(1.05 + var(--audioAmp) * 0.85))
        hue-rotate(var(--audioHue));
      opacity: calc(0.15 + var(--audioPulse) * 0.85);
      transform:
        translate3d(var(--audioJitterX), var(--audioJitterY), 0)
        rotate(calc(var(--audioGlowRot) * 0.9))
        skewX(var(--audioShear))
        scale(var(--audioZoom));
      mix-blend-mode: screen;
      will-change: transform, filter, opacity;
    }
    .player .grain{
      position:absolute;
      inset: 6px;
      border-radius: calc(var(--glow-radius) - 8px);
      z-index: 3;
      pointer-events:none;
      opacity: calc(0.06 + var(--audioGrain) * 0.20);
      mix-blend-mode: overlay;
      background:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.20) 50%, transparent 51%),
        radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.18) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,.16) 50%, transparent 51%),
        radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.18) 50%, transparent 51%),
        radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,.16) 50%, transparent 51%);
      background-size:
        120px 120px,
        140px 140px,
        160px 160px,
        180px 180px,
        200px 200px;
      background-position:
        calc(var(--audioShift) * 1.0) calc(var(--audioShift) * 0.7),
        calc(var(--audioShift) * -0.6) calc(var(--audioShift) * 0.9),
        calc(var(--audioShift) * 0.8) calc(var(--audioShift) * -0.5),
        calc(var(--audioShift) * -0.9) calc(var(--audioShift) * -0.8),
        calc(var(--audioShift) * 0.5) calc(var(--audioShift) * 0.4);
      filter: blur(0.2px);
    }
    .player video{
      position:absolute;
      inset: 8px;
      width: calc(100% - 16px);
      height: calc(100% - 16px);
      border-radius: calc(var(--glow-radius) - 6px);
      z-index: 2;
      background:#000;
      outline:none;
      object-fit: cover;
    }
    .player.audio-mode video{
      object-fit: contain;
      background:
        radial-gradient(500px 260px at 50% 38%, rgba(43,156,255,.10), transparent 60%),
        radial-gradient(420px 220px at 45% 60%, rgba(228,179,185,.08), transparent 62%),
        #000;
    }
    .player.aspect-cover video{ object-fit: cover; }
    .player.aspect-contain video{ object-fit: contain; }
    .player.aspect-stretch video{ object-fit: fill; }
    .player.aspect-ratio-4x3{ aspect-ratio: 4 / 3; }
    .player.aspect-ratio-16x9{ aspect-ratio: 16 / 9; }
    .player.aspect-ratio-185x1{ aspect-ratio: 1.85 / 1; }
    .player.aspect-ratio-4x3 video,
    .player.aspect-ratio-16x9 video,
    .player.aspect-ratio-185x1 video{ object-fit: contain; }
    .player.audio-mode.aspect-cover video,
    .player.audio-mode.aspect-contain video,
    .player.audio-mode.aspect-stretch video,
    .player.audio-mode.aspect-ratio-4x3 video,
    .player.audio-mode.aspect-ratio-16x9 video,
    .player.audio-mode.aspect-ratio-185x1 video{ object-fit: contain; }
    .player .sheen{
      position:absolute;
      inset: 8px;
      border-radius: calc(var(--glow-radius) - 6px);
      background: radial-gradient(800px 240px at 20% 0%, rgba(255,255,255,0.08), transparent 60%);
      pointer-events:none;
      z-index: 3;
      mix-blend-mode: screen;
      opacity: 0.55;
    }
    .custom-media-controls{
      position:absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 7;
      min-height: 52px;
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 4px;
      background:
        radial-gradient(420px 80px at 18% 50%, rgba(138,174,217,.12), transparent 65%),
        radial-gradient(360px 80px at 86% 50%, rgba(228,179,185,.10), transparent 65%),
        linear-gradient(180deg, rgba(8,10,18,.70), rgba(8,10,18,.88));
      backdrop-filter: blur(16px);
      box-shadow: 0 16px 42px rgba(0,0,0,.42);
      opacity: .96;
      transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
    }
    .player:hover .custom-media-controls,
    .custom-media-controls:focus-within{
      opacity: 1;
      border-color: rgba(255,255,255,.18);
    }
    .player.controls-idle .custom-media-controls{
      opacity: 0;
      transform: none;
      pointer-events:auto;
    }
    .player.controls-idle .custom-media-controls:hover,
    .player.controls-idle .custom-media-controls:focus-within,
    .player.is-scrubbing .custom-media-controls{
      opacity:1;
      transform: translateY(0);
      pointer-events:auto;
    }
    .cmc-btn{
      position:relative;
      isolation:isolate;
      overflow:hidden;
      width: 36px;
      height: 36px;
      min-width: 36px;
      border: 1px solid rgba(167,231,255,.18);
      border-radius: 4px;
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.08), transparent 34%),
        radial-gradient(circle at 76% 86%, rgba(138,174,217,.10), transparent 48%),
        linear-gradient(180deg, rgba(11,18,29,.62), rgba(5,8,15,.76));
      color: rgba(244,248,255,.96);
      cursor:pointer;
      display:grid;
      place-items:center;
      font-size: 14px;
      font-weight: 900;
      line-height:1;
      text-shadow: 0 1px 8px rgba(138,174,217,.14);
      box-shadow:
        0 10px 24px rgba(0,0,0,.30),
        inset 0 0 0 1px rgba(255,255,255,.035),
        inset 0 -8px 18px rgba(0,0,0,.18);
      backdrop-filter: blur(10px) saturate(1.05);
      transition:
        transform 140ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
    }
    .cmc-btn::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      z-index:-1;
      background:
        conic-gradient(
          from 210deg,
          rgba(138,174,217,.00),
          rgba(138,174,217,.24),
          rgba(43,156,255,.16),
          rgba(228,179,185,.09),
          rgba(138,174,217,.00)
        );
      opacity:.28;
      filter: blur(.2px) saturate(.9);
      transition: opacity 180ms ease, transform 220ms ease;
    }
    .cmc-btn::after{
      content:"";
      position:absolute;
      inset:2px;
      border-radius:inherit;
      z-index:-1;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.055), transparent 48%),
        rgba(255,255,255,.012);
      pointer-events:none;
      opacity:.85;
    }
    .cmc-btn:hover{
      border-color: rgba(167,231,255,.34);
      filter: saturate(1.04);
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.10), transparent 34%),
        radial-gradient(circle at 76% 86%, rgba(138,174,217,.14), transparent 48%),
        linear-gradient(180deg, rgba(13,22,34,.68), rgba(5,8,15,.80));
      box-shadow:
        0 12px 28px rgba(0,0,0,.34),
        0 0 16px rgba(138,174,217,.08),
        inset 0 0 0 1px rgba(255,255,255,.045),
        inset 0 -8px 18px rgba(0,0,0,.16);
    }
    .cmc-btn:hover::before{
      opacity:.48;
      transform: rotate(14deg) scale(1.03);
    }
    .cmc-btn:active{ transform: translateY(1px) scale(.98); }
    .cmc-btn:focus{ outline:none; box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 0 3px rgba(138,174,217,.18); }
    .cmc-play{
      flex:0 0 36px;
      aspect-ratio:1 / 1;
      padding:0;
      font-size: 13px;
      border-color: rgba(138,174,217,.28);
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.08), transparent 34%),
        radial-gradient(circle at 76% 86%, rgba(138,174,217,.13), transparent 48%),
        linear-gradient(180deg, rgba(8,25,36,.66), rgba(5,8,15,.80));
    }
    .cmc-play-glyph{
      display:block;
      width:0;
      height:0;
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
      border-left:10px solid currentColor;
      transform:translateX(1px);
    }
    .cmc-play.is-playing .cmc-play-glyph{
      width:10px;
      height:13px;
      border:0;
      background:linear-gradient(
        90deg,
        currentColor 0 35%,
        transparent 35% 65%,
        currentColor 65% 100%
      );
      transform:none;
    }
    .cmc-aspect{
      min-width: 58px;
      width: auto;
      padding: 0 12px;
      font-size: 11px;
      letter-spacing:.58px;
      text-transform: uppercase;
      border-color: rgba(228,179,185,.18);
    }
    .cmc-aspect-wrap{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .cmc-aspect-menu{
      position:absolute;
      right:0;
      bottom: calc(100% + 10px);
      display:flex;
      align-items:center;
      gap:6px;
      padding:8px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(240px 80px at 18% 18%, rgba(138,174,217,.12), transparent 65%),
        radial-gradient(220px 90px at 92% 100%, rgba(228,179,185,.08), transparent 62%),
        linear-gradient(180deg, rgba(8,13,24,.92), rgba(5,8,15,.94));
      box-shadow:
        0 18px 44px rgba(0,0,0,.46),
        inset 0 0 0 1px rgba(255,255,255,.035);
      backdrop-filter: blur(14px);
      opacity:0;
      transform: translateY(8px) scale(.985);
      pointer-events:none;
      transition: opacity 180ms ease, transform 180ms ease;
      z-index:30;
      white-space:nowrap;
    }
    .cmc-aspect-wrap.open .cmc-aspect-menu{
      opacity:1;
      transform: translateY(0) scale(1);
      pointer-events:auto;
    }
    .cmc-aspect-option{
      height:32px;
      min-width:46px;
      padding:0 10px;
      border:1px solid rgba(255,255,255,.11);
      border-radius:4px;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
      color: rgba(233,237,247,.84);
      font-size:11px;
      font-weight:800;
      letter-spacing:.46px;
      cursor:pointer;
      transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    }
    .cmc-aspect-option:hover{
      color:#fff;
      border-color: rgba(167,231,255,.28);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 44%),
        linear-gradient(180deg, rgba(138,174,217,.10), rgba(255,255,255,.026));
      box-shadow:0 0 16px rgba(138,174,217,.08);
    }
    .cmc-aspect-option:active{ transform: translateY(1px); }
    .cmc-aspect-option.is-active{
      color:#fff;
      border-color: rgba(138,174,217,.38);
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(135deg, rgba(138,174,217,.24), rgba(43,156,255,.14) 56%, rgba(228,179,185,.08));
      box-shadow:
        0 0 18px rgba(138,174,217,.12),
        inset 0 0 0 1px rgba(255,255,255,.05);
    }
    @media (max-width: 680px){
      .cmc-aspect-menu{
        right:-46px;
        display:grid;
        grid-template-columns: repeat(3, minmax(46px, auto));
      }
    }
    .cmc-volume-wrap{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      z-index:32;
    }
    .cmc-volume-btn{
      border-color: rgba(167,231,255,.22);
      font-size: 14px;
    }
    .cmc-volume-panel{
      position:absolute;
      left:50%;
      bottom: calc(100% + 10px);
      width: 48px;
      height: 176px;
      padding: 12px 9px 14px;
      border-radius: 4px;
      border:1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(90px 120px at 50% 16%, rgba(138,174,217,.15), transparent 64%),
        radial-gradient(90px 90px at 50% 100%, rgba(228,179,185,.09), transparent 66%),
        linear-gradient(180deg, rgba(8,13,24,.94), rgba(5,8,15,.96));
      box-shadow:
        0 18px 44px rgba(0,0,0,.48),
        0 0 24px rgba(138,174,217,.08),
        inset 0 0 0 1px rgba(255,255,255,.035);
      backdrop-filter: blur(14px) saturate(1.05);
      opacity:0;
      transform: translate(-50%, 10px) scale(.96);
      transform-origin: 50% 100%;
      pointer-events:none;
      transition: opacity 170ms ease, transform 170ms ease;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
    }
    .cmc-volume-wrap:hover .cmc-volume-panel,
    .cmc-volume-wrap:focus-within .cmc-volume-panel,
    .cmc-volume-wrap.open .cmc-volume-panel{
      opacity:1;
      transform: translate(-50%, 0) scale(1);
      pointer-events:auto;
    }
    .cmc-volume-readout{
      min-width: 34px;
      padding: 4px 5px;
      border-radius:4px;
      background: rgba(255,255,255,.07);
      color: rgba(233,237,247,.92);
      font-size: 10px;
      font-weight: 900;
      line-height:1;
      text-align:center;
      font-variant-numeric: tabular-nums;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
      user-select:none;
    }
    .cmc-volume-track-wrap{
      --volume-pct: 100%;
      --volume-thumb-color: rgb(255,64,70);
      --volume-fill-top-color: rgb(255,64,70);
      position:relative;
      flex:1 1 auto;
      width: 32px;
      min-height: 120px;
      display:grid;
      place-items:center;
    }
    .cmc-volume-track-wrap::before{
      content:"";
      position:absolute;
      left:50%;
      top:7px;
      bottom:7px;
      width:6px;
      transform:translateX(-50%);
      border-radius:4px;
      background: rgba(255,255,255,.17);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      pointer-events:none;
    }
    .cmc-volume-fill{
      position:absolute;
      left:50%;
      bottom:7px;
      width:6px;
      height: var(--volume-pct, 100%);
      max-height: calc(100% - 14px);
      min-height: 0;
      transform:translateX(-50%);
      border-radius:4px;
      background: linear-gradient(0deg, rgba(138,174,217,.92), rgba(43,156,255,.88), var(--volume-fill-top-color));
      box-shadow: 0 0 16px rgba(138,174,217,.20);
      pointer-events:none;
      z-index:1;
    }
    .cmc-volume-thumb{
      position:absolute;
      left:50%;
      top:0;
      width:18px;
      height:18px;
      transform:translate(-50%, -50%);
      border-radius:4px;
      border:2px solid rgba(246,248,255,.90);
      background: var(--volume-thumb-color);
      box-shadow:
        0 4px 14px rgba(0,0,0,.38),
        0 0 16px color-mix(in srgb, var(--volume-thumb-color), transparent 35%),
        inset 0 0 0 1px rgba(255,255,255,.25);
      pointer-events:none;
    }
    .cmc-volume-track-wrap .cmc-volume-fill .cmc-volume-thumb{
      left:50% !important;
      transform:translate(-50%, -50%) !important;
    }
    .cmc-volume-range{
      position:absolute;
      left:50%;
      top:50%;
      width:120px;
      height:32px;
      margin:0;
      transform: translate(-50%, -50%) rotate(-90deg);
      transform-origin:center;
      appearance:none;
      -webkit-appearance:none;
      background: transparent;
      cursor:pointer;
      z-index:3;
      outline:none;
    }
    .cmc-volume-range::-webkit-slider-runnable-track{
      height: 32px;
      background: transparent;
      border:0;
    }
    .cmc-volume-range::-moz-range-track{
      height: 32px;
      background: transparent;
      border:0;
    }
    .cmc-volume-range::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:32px;
      height:32px;
      border-radius:4px;
      border:0;
      background: transparent;
      box-shadow:none;
      opacity:0;
    }
    .cmc-volume-range::-moz-range-thumb{
      width:32px;
      height:32px;
      border-radius:4px;
      border:0;
      background: transparent;
      box-shadow:none;
      opacity:0;
    }
    .cmc-volume-range:focus-visible{ outline:none; }
    .cmc-volume-track-wrap:has(.cmc-volume-range:focus-visible){ box-shadow: var(--ring); border-radius:4px; }
    .cmc-fullscreen{
      border-color: rgba(167,231,255,.23);
      font-size: 13px;
    }
    .cmc-cc{
      border-color: rgba(138,174,217,.22);
      font-size: 11px;
      letter-spacing:.58px;
      text-transform: uppercase;
    }
    .cmc-cc.is-active{
      color:#fff;
      border-color: rgba(138,174,217,.46);
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(135deg, rgba(138,174,217,.24), rgba(43,156,255,.14) 56%, rgba(228,179,185,.08));
      box-shadow:
        0 0 18px rgba(138,174,217,.12),
        inset 0 0 0 1px rgba(255,255,255,.05);
    }
    .cmc-cast{
      border-color: rgba(167,231,255,.23);
    }
    .cmc-cast svg{
      display:block;
      pointer-events:none;
    }
    .cmc-cast.is-active{
      color:#fff;
      border-color: rgba(138,174,217,.46);
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(135deg, rgba(138,174,217,.24), rgba(43,156,255,.14) 56%, rgba(228,179,185,.08));
      box-shadow:
        0 0 18px rgba(138,174,217,.12),
        inset 0 0 0 1px rgba(255,255,255,.05);
    }
    body.ad-seek-locked .cmc-cast{
      opacity:.35;
      pointer-events:none;
    }
    .cmc-cast-wrap{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      z-index:32;
    }
    .cmc-cast-feedback{
      position:absolute;
      left:50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%);
      width: max-content;
      max-width: 220px;
      padding: 7px 10px;
      border-radius: 4px;
      border:1px solid rgba(255,255,255,.13);
      background: linear-gradient(180deg, rgba(8,13,24,.94), rgba(5,8,15,.96));
      color: rgba(244,248,255,.96);
      font-size: 11px;
      font-weight: 700;
      line-height:1.35;
      text-align:center;
      box-shadow: 0 18px 44px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.035);
      backdrop-filter: blur(14px) saturate(1.05);
      pointer-events:none;
    }
    html[data-theme^="light-"] .cmc-cast-feedback{
      color:var(--text);
      border-color:var(--glass-outline);
      background:linear-gradient(180deg, rgba(255,255,255,.94), var(--glass-strong));
      box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.50);
    }
    .cmc-left,
    .cmc-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex: 0 0 auto;
    }
    .cmc-right{ margin-left: 2px; }
    .cmc-time{
      min-width: 46px;
      color: rgba(233,237,247,.86);
      font-size: 12px;
      font-weight: 700;
      letter-spacing:.35px;
      font-variant-numeric: tabular-nums;
      text-align:center;
      user-select:none;
    }
    .cmc-duration{
      color: rgba(233,237,247,.68);
      cursor:pointer;
      border-radius:4px;
      padding:4px 6px;
      transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }
    .cmc-duration:hover{
      color: rgba(233,237,247,.94);
      background: rgba(255,255,255,.06);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .cmc-duration.is-remaining{ color: rgba(138,174,217,.86); }
    .cmc-duration:focus{ outline:none; box-shadow: var(--ring); }
    .cmc-reaction-meter{
      --like-pct: 50%;
      --dislike-pct: 50%;
      position:relative;
      display:flex;
      align-items:center;
      gap:4px;
      height:36px;
      padding:3px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.14);
      overflow:hidden;
      isolation:isolate;
      background:
        linear-gradient(90deg,
          rgba(0,255,133,.34) 0 var(--like-pct),
          rgba(255,74,91,.34) var(--like-pct) 100%);
      box-shadow: 0 8px 22px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.05);
      backdrop-filter: blur(12px);
      transition: opacity 180ms ease, filter 180ms ease, border-color 180ms ease;
    }
    .cmc-reaction-meter::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:
        radial-gradient(circle at 18% 20%, rgba(0,255,133,.35), transparent 32%),
        radial-gradient(circle at 82% 80%, rgba(255,74,91,.32), transparent 36%),
        rgba(8,10,18,.50);
      opacity:.72;
    }
    .cmc-reaction-meter.no-data{
      background: rgba(255,255,255,.07);
    }
    .cmc-reaction-meter.is-disabled{
      opacity:.48;
      filter:saturate(.75);
    }
    .cmc-reaction-btn{
      position:relative;
      z-index:1;
      height:28px;
      min-width:50px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:4px;
      background: rgba(8,10,18,.34);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:5px;
      cursor:pointer;
      font-size:12px;
      font-weight:900;
      line-height:1;
      font-variant-numeric: tabular-nums;
      transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }
    .cmc-reaction-btn:hover{
      border-color: rgba(255,255,255,.30);
      background: rgba(255,255,255,.12);
    }
    .cmc-reaction-btn:active{ transform: translateY(1px) scale(.98); }
    .cmc-reaction-btn:focus{ outline:none; box-shadow: var(--ring); }
    .cmc-reaction-btn.is-active[data-reaction="like"]{
      background: rgba(0,255,133,.22);
      border-color: rgba(0,255,133,.58);
      box-shadow: 0 0 18px rgba(0,255,133,.18);
    }
    .cmc-reaction-btn.is-active[data-reaction="dislike"]{
      background: rgba(255,74,91,.22);
      border-color: rgba(255,74,91,.58);
      box-shadow: 0 0 18px rgba(255,74,91,.18);
    }
    .cmc-reaction-btn[disabled]{ cursor:not-allowed; opacity:.72; }
    .cmc-reaction-icon{ font-size:13px; }
    .cmc-reaction-count{ min-width: 1ch; }
    .cmc-seek{
      --seek-pct: 0;
      --buffer-pct: 0;
      --seek-inset: 8px;
      position:relative;
      flex: 1 1 auto;
      height: 24px;
      min-width: 120px;
      cursor:pointer;
      touch-action:none;
      border-radius:4px;
      outline:none;
      isolation:isolate;
    }
    .cmc-native-range{
      position:absolute;
      inset:-10px 0;
      width:100%;
      height:44px;
      margin:0;
      padding:0;
      opacity:.001;
      cursor:pointer;
      z-index:10;
      appearance:none;
      -webkit-appearance:none;
      background:transparent;
      touch-action:none;
    }
    .cmc-native-range::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:28px;
      height:44px;
      border:0;
      background:transparent;
      cursor:pointer;
    }
    .cmc-native-range::-moz-range-thumb{
      width:28px;
      height:44px;
      border:0;
      background:transparent;
      cursor:pointer;
    }
    .cmc-seek::before{
      content:"";
      position:absolute;
      left:var(--seek-inset); right:var(--seek-inset);
      top:50%;
      height: 7px;
      transform: translateY(-50%);
      border-radius:4px;
      background: rgba(255,255,255,.17);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .cmc-buffered,
    .cmc-progress{
      position:absolute;
      left:var(--seek-inset);
      top:50%;
      height:7px;
      width:0%;
      transform: translateY(-50%);
      border-radius:4px;
      pointer-events:none;
      max-width: calc(100% - (var(--seek-inset) * 2));
    }
    .cmc-buffered{
      width: calc((100% - (var(--seek-inset) * 2)) * var(--buffer-pct) / 100);
      background: rgba(255,255,255,.18);
    }
    .cmc-progress{
      width: calc((100% - (var(--seek-inset) * 2)) * var(--seek-pct) / 100);
      background: linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,.97));
      box-shadow: 0 0 14px rgba(255,255,255,.16);
    }
    .cmc-handle{
      position:absolute;
      top:50%;
      left: calc(var(--seek-inset) + ((100% - (var(--seek-inset) * 2)) * var(--seek-pct) / 100));
      width: 12px;
      height: 12px;
      border-radius:4px;
      transform: translate(-50%, -50%);
      background: #ffffff;
      border: 2px solid rgba(8,10,18,.72);
      box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 16px rgba(255,255,255,.30);
      pointer-events:none;
    }
    .cmc-seek:focus{ box-shadow: var(--ring); }
    .cmc-select{
      height: 36px;
      min-width: 112px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 4px;
      background: rgba(255,255,255,.07);
      color: var(--text);
      padding: 0 28px 0 12px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing:.28px;
      text-align:center;
      font-variant-numeric: tabular-nums;
      outline:none;
      cursor:pointer;
      backdrop-filter: blur(12px);
    }
    .cmc-select:focus{ box-shadow: var(--ring); }
    .cmc-select option{ color:#111; }
    .custom-media-controls.is-disabled{
      opacity:.58;
      pointer-events:none;
    }
    @media (max-width: 720px){
      .custom-media-controls{
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap:7px;
        padding: 8px;
      }
      .cmc-left,
      .cmc-right{ gap:7px; }
      .cmc-time{ display:none; }
      .cmc-select{ min-width: 96px; max-width: 124px; padding-left:10px; padding-right:22px; }
      .cmc-aspect{ min-width: 44px; padding: 0 8px; font-size: 10px; }
      .cmc-reaction-meter{ height:34px; padding:3px; }
      .cmc-reaction-btn{ min-width:40px; height:26px; font-size:11px; gap:3px; }
    }
    .player.glow-on::before{
      animation:
        spin 6.5s linear infinite,
        pulseSmooth 5.2s cubic-bezier(.45,0,.2,1) infinite;
    }
    .player.glow-stationary::before{ animation: none; opacity: 0.90; }
    .player.glow-off::before{ animation: none; opacity: 0; }
    .player.glow-audio::before{
      animation: none;
      opacity: var(--audioGlowOpacity);
      filter: blur(var(--audioGlowBlur)) saturate(var(--audioGlowSat));
      transform: rotate(var(--audioGlowRot));
    }
    .player .aurora,
    .player .grain{ display:none; }
    .player.glow-audio .aurora,
    .player.glow-audio .grain{ display:block; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulseSmooth{
      0%   { opacity: 0.72; }
      25%  { opacity: 0.86; }
      50%  { opacity: 0.98; }
      75%  { opacity: 0.86; }
      100% { opacity: 0.72; }
    }
    @media (prefers-reduced-motion: reduce) {
      .player.glow-on::before { animation: none; }
      :root{ --audioShear: 0deg; }
    }

.shell{max-width:var(--maxw);margin:0 auto;padding:0 16px}

.masthead{padding-block:26px 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand img{height:clamp(30px,3.2vw,44px);width:auto;display:block}
.brand-word{
  font-size:clamp(20px,2.2vw,28px);font-weight:900;letter-spacing:-.045em;text-transform:lowercase;color:#fff;
  text-shadow:0 0 14px rgba(138,174,217,.30),0 8px 18px rgba(0,0,0,.34);
}
.masthead .tagline{margin:0;color:var(--muted);font-size:clamp(12px,1.1vw,14px);font-weight:500;letter-spacing:.02em;white-space:nowrap}
@media (max-width:620px){.masthead{flex-direction:column;align-items:flex-start;gap:8px;padding-block-end:0}}

.hero{padding-block:20px 8px}
.hero h1{
  margin:0 0 8px;font-size:clamp(26px,4.4vw,52px);font-weight:900;line-height:.98;letter-spacing:-.05em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 16px rgba(138,174,217,.20),0 10px 24px rgba(0,0,0,.40);
}
.hero p.lede{margin:0 0 22px;max-width:62ch;color:var(--muted);font-size:clamp(14px,1.4vw,17px);line-height:1.55}

.stage{position:relative;display:flex;justify-content:center}
.stage .player{width:var(--frame-w)}
@media (max-width:900px){:root{--frame-w:100%}}
.player{container-type:inline-size}
.player-face{
  position:absolute;
  inset:8px;
  z-index:2;
  overflow:hidden;
  border-radius:calc(var(--glow-radius) - 6px);
  background:#000;
}
.player-lockup-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* floating CTAs, sat below the lockup wordmark on the player face */
.player-ctas{
  position:absolute;
  left:calc(50% + 1.63% - 10px);
  bottom:11%;
  transform:translateX(-50%);
  z-index:4;
  width:max-content;
  max-width:88%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(8px,1.6cqw,16px);
  pointer-events:auto;
}
.player-cta{
  appearance:none;
  border:0;
  cursor:pointer;
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(11px,1.55cqw,15px);
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#0b0f1a;
  background:#fff;
  padding:clamp(8px,1.15cqw,13px) clamp(16px,2.3cqw,24px);
  border-radius:999px;
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.player-cta:hover,
.player-cta:focus-visible{
  background:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.4);
  outline:none;
}
.player-cta:active{ transform:translateY(0); }

.player-cta.is-soon{
  position:relative;
  cursor:default;
  opacity:.5;
}
.player-cta.is-soon:hover,
.player-cta.is-soon:focus-visible{
  background:#fff;
  transform:none;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.player-cta.is-soon::after{
  content:"Coming soon";
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:rgba(7,10,18,.94);
  box-shadow:inset 0 0 0 1px rgba(138,174,217,.30);
  color:#fff;
  font-family:var(--font);
  font-weight:600;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:none;
  padding:6px 10px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:5;
}
.player-cta.is-soon:hover::after,
.player-cta.is-soon:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
@media (max-width:560px){
  .player-ctas{
    bottom:6%; gap:8px;
    background:rgba(7,10,18,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:10px 10px 8px;
    border-radius:20px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  .player-cta{ font-size:11px; padding:8px 14px; }
}

@property --glow-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

@keyframes glowSweep{
  to{--glow-angle:360deg}
}

html.glow-smooth .player::before{
  background:conic-gradient(
    from var(--glow-angle),
    #ff2bd6,
    #7c3aed,
    #8AAED9,
    #00f0ff,
    #00ff85,
    #ffe14d,
    #ff7a18,
    #ff2bd6
  );
}

html.glow-smooth .player.glow-on::before{
  transform:none;
  animation:
    glowSweep 6.5s linear infinite,
    pulseSmooth 13s cubic-bezier(.45,0,.2,1) infinite;
}

@media (prefers-reduced-motion:reduce){
  html.glow-smooth .player.glow-on::before{animation:none}
}

.features{padding-block:12px 10px;position:relative;z-index:1}
.features h2{
  margin:0 0 6px;font-size:clamp(18px,2vw,26px);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;color:#fff;
}
.features p.note{margin:3px 0 20px;color:#fff;font-size:14px;text-shadow:0 0 14px rgba(138,174,217,.20),0 6px 16px rgba(0,0,0,.40)}
.features > .countdown,
.features > p.note{text-align:center}
.countdown{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  margin:0 0 8px;
  text-shadow:0 0 18px rgba(138,174,217,.24),0 8px 20px rgba(0,0,0,.42);
}
.cd-dash{opacity:.7;white-space:pre}
.cd-clock{
  font-family:inherit;
  font-weight:900;
  letter-spacing:0;
  color:#fff;
  white-space:nowrap;
}
.cd-digit{display:inline-block;width:.70em;text-align:center}
.cd-mark{display:inline-block;width:.30em;text-align:center;opacity:.9}
.countdown.is-launched .cd-clock{color:var(--accent)}
@media (max-width:560px){
  .countdown{gap:2px 0;font-size:clamp(15px,4.6vw,20px)}
  .cd-dash{display:none}
  .cd-label,.cd-clock{flex:0 0 100%}
}

.feature-panel{
  width:var(--frame-w);
  margin-top:-5px;
  margin-inline:auto;
  padding:14px;
  border-radius:4px;
  border:2px dotted rgba(255,255,255,.085);
  background:rgba(8,10,18,.26);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 10px 24px rgba(0,0,0,.18);
}
.feature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1080px){.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feature-btn{
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  padding:0;
  border:0;
  border-radius:4px;
  overflow:hidden;
  text-align:left;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.22);
  font-family:inherit;
  cursor:pointer;
  transition:transform 140ms ease,box-shadow 160ms ease;
}
.feature-btn:hover,
.feature-btn:focus-visible{
  outline:none;
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(138,174,217,.32),0 14px 28px rgba(0,0,0,.28);
}
.feature-btn:active{transform:translateY(0)}
.feature-btn[aria-expanded="true"]{
  box-shadow:inset 0 0 0 1px rgba(138,174,217,.46),0 14px 28px rgba(0,0,0,.30);
}
.feature-btn::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  z-index:3;
  background:var(--chip,#8AAED9);
}
.feature-grid .feature-btn:nth-child(1){--chip:#C3D94E;--face:#4a5c33}
.feature-grid .feature-btn:nth-child(2){--chip:#14D9D2;--face:#1c5f6b}
.feature-grid .feature-btn:nth-child(3){--chip:#12C94A;--face:#1f5c42}
.feature-grid .feature-btn:nth-child(4){--chip:#A006C4;--face:#4b2a63}
.feature-grid .feature-btn:nth-child(5){--chip:#E01B5D;--face:#5e2340}
.feature-grid .feature-btn:nth-child(6){--chip:#2438E0;--face:#26356e}
.feature-grid .feature-btn:nth-child(7){--chip:#F2E635;--face:#5c5326}
.feature-grid .feature-btn:nth-child(8){--chip:#7A4DE8;--face:#3b2f6b}
.feature-grid .feature-btn:nth-child(9){--chip:#14A0D9;--face:#1f4a6b}
.feature-grid .feature-btn:nth-child(10){--chip:#C0C7CE;--face:#3d4653}
.fb-face{
  --fb-base:12px;
  aspect-ratio:16/9;
  min-height:0;
  padding:5% 6%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:linear-gradient(135deg,var(--face-base,#111b2a),var(--face,#33517a));
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.fb-line{
  display:inline-block;
  white-space:nowrap;
  line-height:1.08;
  font-size:var(--fb-base);
}
.feature-btn:hover .fb-face,
.feature-btn[aria-expanded="true"] .fb-face{color:#fff}
.fb-meta{
  padding:9px 12px 11px;
  background:rgba(8,10,18,.78);
  color:#fff;
  text-align:center;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:720px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fb-face{--fb-base:11px;padding:5% 6%;letter-spacing:.09em}
  .fb-meta{font-size:11px;padding:8px 10px 10px;white-space:normal}
}

.detail{
  margin:14px 0 0;
  border:0;border-radius:4px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.22);
  overflow:hidden;
}
.detail[hidden]{display:none !important}
.detail-inner{padding:22px clamp(16px,2.4vw,28px)}
.detail h3{
  margin:0 0 10px;font-size:clamp(16px,1.8vw,22px);font-weight:900;letter-spacing:-.035em;text-transform:uppercase;color:#fff;
}
.detail p{margin:0 0 12px;max-width:76ch;color:#fff;font-size:15px;line-height:1.62}
.detail p:last-child{margin-bottom:0}
.detail ul{margin:0;padding-left:20px;color:#fff;font-size:15px;line-height:1.62}
.detail li{margin-bottom:6px}
.detail .status{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  padding:5px 10px;border-radius:4px;
  background:rgba(10,12,28,.88);box-shadow:inset 0 0 0 1px rgba(138,174,217,.30);color:var(--text);
  font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.detail-close{
  float:right;width:32px;height:32px;min-width:32px;
  border:0;border-radius:4px;
  background:rgba(10,12,28,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);color:var(--text);
  font-family:inherit;font-size:16px;font-weight:900;line-height:1;cursor:pointer;
}
.detail-close:hover{background:rgba(138,174,217,.20);box-shadow:inset 0 0 0 1px rgba(138,174,217,.38)}
.detail-close:focus-visible{outline:none;box-shadow:var(--ring)}

.foot{
  max-width:var(--maxw);margin:0 auto;padding:38px 16px 46px;
  border-top:1px solid var(--border);margin-top:34px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:#fff;font-size:13px;
}
.foot a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.42);text-underline-offset:3px}
.foot a:hover{text-decoration-color:#fff}
.foot .legal{opacity:1}
.foot .enquiries{display:flex;flex-direction:row;align-items:baseline;justify-content:flex-end;flex-wrap:wrap;gap:0 10px;text-align:right}
.foot .enquiries-gap{opacity:.45}
@media (max-width:900px){
  .foot{flex-direction:column;align-items:flex-start;gap:10px}
  .foot .enquiries{justify-content:flex-start;text-align:left}
}
@media (max-width:560px){
  .foot .enquiries{flex-direction:column;gap:4px}
  .foot .enquiries-gap{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}

@media (max-width:1000px){
  .custom-media-controls .cmc-select{display:none}
}
@media (max-width:820px){
  .custom-media-controls .cmc-aspect-wrap{display:none}
}
@media (max-width:520px){
  .custom-media-controls .cmc-cc{display:none}
  .custom-media-controls{left:10px;right:10px;bottom:10px;gap:6px;padding:7px}
  .custom-media-controls .cmc-seek{min-width:44px}
  .custom-media-controls .cmc-reaction-btn{min-width:36px;gap:3px;font-size:11px}
  .custom-media-controls .cmc-reaction-meter{height:32px;padding:3px}
}

.custom-media-controls{
  color:#1b2430;
  border-color:rgba(95,143,190,.30);
  background:
    radial-gradient(420px 90px at 18% 50%, rgba(95,143,190,.12), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  box-shadow:0 16px 38px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.42);
  backdrop-filter:blur(16px);
}
.player:hover .custom-media-controls,
.custom-media-controls:focus-within{border-color:rgba(95,143,190,.30)}
.custom-media-controls .cmc-btn{
  color:#1b2430;
  border-color:rgba(95,143,190,.30);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.92), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
  text-shadow:none;
  box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.50);
}
.custom-media-controls .cmc-btn::before{
  background:linear-gradient(135deg, transparent, rgba(95,143,190,.24));
  opacity:.42;
}
.custom-media-controls .cmc-btn::after{
  background:linear-gradient(180deg, rgba(255,255,255,.26), transparent);
}
.custom-media-controls .cmc-btn:hover{
  color:#111a24;
  border-color:#5f8fbe;
  background:linear-gradient(180deg, #fff, rgba(95,143,190,.14));
  box-shadow:0 10px 22px rgba(0,0,0,.14), 0 0 0 1px rgba(95,143,190,.28);
}
.custom-media-controls .cmc-btn:focus-visible{
  box-shadow:0 8px 20px rgba(0,0,0,.14), 0 0 0 3px rgba(95,143,190,.24);
}
.custom-media-controls .cmc-cc[aria-pressed="true"]{
  color:#111a24;
  border-color:#5f8fbe;
  background:linear-gradient(135deg, rgba(95,143,190,.16), rgba(255,255,255,.88));
  box-shadow:0 0 0 2px rgba(95,143,190,.22);
}
.custom-media-controls .cmc-time,
.custom-media-controls .cmc-duration{color:#1b2430}
.custom-media-controls .cmc-duration:hover{
  color:#111a24;
  background:rgba(95,143,190,.14);
  box-shadow:inset 0 0 0 1px rgba(95,143,190,.30);
}
.custom-media-controls .cmc-seek::before{
  background:rgba(36,42,54,.22);
  box-shadow:inset 0 0 0 1px rgba(36,42,54,.28);
}
.custom-media-controls .cmc-buffered{background:rgba(36,42,54,.34)}
.custom-media-controls .cmc-progress{
  background:linear-gradient(90deg, #5f8fbe, #9cc1e3);
  box-shadow:0 0 12px rgba(95,143,190,.34);
}
.custom-media-controls .cmc-handle{
  background:#fff;
  border-color:#5f8fbe;
  box-shadow:0 3px 10px rgba(0,0,0,.22), 0 0 12px rgba(95,143,190,.45);
}
.custom-media-controls .cmc-select{
  color:#1b2430;
  border-color:rgba(95,143,190,.30);
  background:rgba(255,255,255,.82);
}
.custom-media-controls .cmc-select option{color:#111}
.custom-media-controls .cmc-aspect-menu,
.custom-media-controls .cmc-volume-panel{
  color:#1b2430;
  border-color:rgba(95,143,190,.30);
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.80));
  box-shadow:0 16px 34px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.45);
}
.custom-media-controls .cmc-aspect-option{
  color:#1b2430;
  border-color:rgba(95,143,190,.30);
  background:rgba(255,255,255,.74);
}
.custom-media-controls .cmc-aspect-option:hover,
.custom-media-controls .cmc-aspect-option.is-active{
  color:#111a24;
  border-color:#5f8fbe;
  background:rgba(95,143,190,.16);
  box-shadow:0 0 0 1px rgba(95,143,190,.26);
}
.custom-media-controls .cmc-volume-readout{
  color:#1b2430;
  background:rgba(95,143,190,.14);
  box-shadow:inset 0 0 0 1px rgba(95,143,190,.30);
}
.custom-media-controls .cmc-volume-track-wrap::before{
  background:rgba(36,42,54,.20);
  box-shadow:inset 0 0 0 1px rgba(36,42,54,.26);
}
.custom-media-controls .cmc-reaction-meter{
  border-color:rgba(95,143,190,.30);
  box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.50);
}
.custom-media-controls .cmc-reaction-meter::before{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,160,90,.15), transparent 34%),
    radial-gradient(circle at 82% 80%, rgba(210,52,70,.14), transparent 38%),
    rgba(255,255,255,.74);
}
.custom-media-controls .cmc-reaction-btn{
  color:#1b2430;
  border-color:rgba(95,143,190,.30);
  background:rgba(255,255,255,.66);
}
.custom-media-controls .cmc-reaction-btn:hover{
  border-color:#5f8fbe;
  background:rgba(255,255,255,.90);
}
.custom-media-controls .cmc-reaction-btn.is-active{
  color:#111a24;
  border-color:#5f8fbe;
  background:rgba(95,143,190,.18);
}