/* MyProject global: no focus rings or tap highlights on anything, ever.
   Buttons stay focusable (keyboard nav works); only the visual ring dies. */
*:focus,
*:focus-visible,
*:focus-within { outline: 0 !important; }
button::-moz-focus-inner,
[role="button"]::-moz-focus-inner { border: 0 !important; }
* { -webkit-tap-highlight-color: transparent !important; }

/* ===== Player styles ===== */
:root {
      --bg: #262626;
      --glass-bg: rgba(18, 18, 18, 0.32);
      --glass-border: rgba(165, 129, 65, 0.28);
      --gold: #A58141;
      --gap: 24px;
    }

    html,
    body {
      position: relative !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      min-height: 100dvh !important;
      overflow: hidden !important;
      background: var(--bg) !important;
      touch-action: manipulation !important;
      overscroll-behavior: none !important;
    }

    * {
      box-sizing: border-box !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    #playerViewport {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      min-height: 100dvh !important;
      overflow: hidden !important;
      background: var(--bg) !important;
    }

    #presentationScaler {
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      width: 1996px !important;
      height: 1123px !important;
      transform-origin: left top !important;
      background: var(--bg) !important;
      overflow: hidden !important;
      opacity: 0 !important;
    }

    body.presentation-visible #presentationScaler {
      opacity: 0.95 !important;
    }

    #presentationFrame {
      width: 1996px !important;
      height: 1123px !important;
      border: 0 !important;
      outline: 0 !important;
      display: block !important;
      background: var(--bg) !important;
    }

    #startOverlay {
      position: absolute !important;
      inset: 0 !important;
      z-index: 80 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: var(--bg) !important;
      pointer-events: auto !important;
    }

    body.presentation-visible #startOverlay {
      display: none !important;
    }

    #startBox {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: clamp(56px, 9vh, 118px) !important;
      max-width: calc(100% - 32px) !important;
      max-height: calc(100% - 32px) !important;
      transform: translateY(-2vh) !important;
    }

    #loadingText {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 7px !important;
      text-align: center !important;
      color: var(--gold) !important;
      letter-spacing: 0.06em !important;
    }

    .loading-tr {
      display: block !important;
      font: 700 15px/1.1 Arial, sans-serif !important;
    }

    .loading-en {
      display: block !important;
      font: 500 11px/1.1 Arial, sans-serif !important;
      letter-spacing: 0.09em !important;
      opacity: 0.72 !important;
    }

    #startLogo {
      position: static !important;
      display: block !important;
      width: min(240px, 38vw) !important;
      max-width: 240px !important;
      height: auto !important;
      margin: 0 !important;
      object-fit: contain !important;
      transform: none !important;
      pointer-events: none !important;
      user-select: none !important;
      flex: 0 0 auto !important;
    }

    @media (max-width: 768px) {
      #startBox {
        gap: clamp(48px, 8vh, 88px) !important;
        max-height: calc(100% - 28px) !important;
        transform: translateY(-1vh) !important;
      }

      #startLogo {
        width: min(190px, 52vw) !important;
        max-width: 190px !important;
        margin: 0 !important;
        transform: none !important;
      }
    }

    #startButton {
      width: 82px !important;
      height: 82px !important;
      min-width: 82px !important;
      min-height: 82px !important;
      aspect-ratio: 1 / 1 !important;
      flex: 0 0 auto !important;
      border: 1px solid var(--glass-border) !important;
      border-radius: 50% !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        var(--glass-bg) !important;
      color: var(--gold) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      box-shadow: 0 6px 16px rgba(0,0,0,0.24) !important;
      padding: 0 !important;
    }

    #startButton svg {
      width: 38px !important;
      height: 38px !important;
      fill: currentColor !important;
      display: block !important;
      margin: 0 !important;
    }

    #loadingText {
      display: none !important;
      color: var(--gold) !important;
      font: 500 13px/1.4 Arial, sans-serif !important;
      opacity: 0.85 !important;
    }

    body.loading-presentation #loadingText {
      display: block !important;
    }

    #controlBar {
      position: absolute !important;
      left: 50% !important;
      top: calc(56.25vw + var(--gap)) !important;
      bottom: auto !important;
      transform: translateX(-50%) !important;
      z-index: 50 !important;
      max-width: calc(100% - 24px) !important;
      display: flex !important;
      align-items: center !important;
      gap: 7px !important;
      padding: 2px 8px !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      box-shadow: 0 6px 16px rgba(0,0,0,0.24) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      opacity: 0 !important;
      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }

    body.player-activated #controlBar {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    #presentationProgress {
      position: absolute !important;
      left: var(--progress-left, 0px) !important;
      top: var(--progress-top, 0px) !important;
      width: var(--progress-width, 0px) !important;
      height: 5px !important;
      z-index: 49 !important;
      overflow: visible !important;
      border-radius: 999px !important;
      background: rgba(165, 129, 65, 0.38) !important;
      opacity: 0 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: none !important;
      --progress-hover-pct: 0%;
      box-shadow:
        0 1px 4px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    }

    body.player-activated #presentationProgress {
      opacity: 1 !important;
    }

    #presentationProgressFill {
      width: 0%;
      min-width: 10px !important;
      height: 100% !important;
      border-radius: inherit !important;
      background: var(--gold) !important;
      transform-origin: left center !important;
      transition: width 180ms ease !important;
      box-shadow: 0 0 12px rgba(165, 129, 65, 0.55) !important;
    }

    #presentationProgressThumb {
      position: absolute !important;
      left: var(--progress-hover-pct, 0%) !important;
      top: 50% !important;
      width: 12px !important;
      height: 12px !important;
      border-radius: 50% !important;
      background: var(--gold) !important;
      border: 2px solid var(--bg) !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.34) !important;
      transform: translate(-50%, -50%) scale(0.72) !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 120ms ease, transform 120ms ease !important;
      z-index: 3 !important;
    }

    #presentationProgressPreview {
      position: absolute !important;
      left: var(--progress-hover-pct, 0%) !important;
      bottom: calc(100% + 12px) !important;
      width: 128px !important;
      padding: 6px !important;
      border-radius: 8px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018)),
        rgba(18,18,18,0.88) !important;
      border: 1px solid rgba(165,129,65,0.32) !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
      color: var(--gold) !important;
      font: 600 11px/1 Arial, sans-serif !important;
      text-align: center !important;
      transform: translateX(-50%) translateY(4px) !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 120ms ease, transform 120ms ease !important;
      z-index: 4 !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    #presentationProgressPreview img {
      width: 116px !important;
      aspect-ratio: 16 / 9 !important;
      height: auto !important;
      display: none !important;
      object-fit: cover !important;
      border-radius: 5px !important;
      margin: 0 0 5px !important;
      background: rgba(0,0,0,0.24) !important;
    }

    #presentationProgressPreview img.loaded {
      display: block !important;
    }

    #presentationProgressPreview span {
      display: block !important;
      white-space: nowrap !important;
    }

    #presentationProgress.is-hovering #presentationProgressThumb,
    #presentationProgress.is-dragging #presentationProgressThumb,
    #presentationProgress.is-hovering #presentationProgressPreview,
    #presentationProgress.is-dragging #presentationProgressPreview {
      opacity: 1 !important;
    }

    #presentationProgress.is-hovering #presentationProgressThumb,
    #presentationProgress.is-dragging #presentationProgressThumb {
      transform: translate(-50%, -50%) scale(1) !important;
    }

    #presentationProgress.is-hovering #presentationProgressPreview,
    #presentationProgress.is-dragging #presentationProgressPreview {
      transform: translateX(-50%) translateY(0) !important;
    }

    body.fullscreen-active #presentationProgress {
      position: absolute !important;
      top: var(--progress-top, 0px) !important;
      bottom: auto !important;
      z-index: 999997 !important;
      opacity: 1 !important;
      transition: none !important;
    }

    body.fullscreen-active.controls-visible #presentationProgress {
      opacity: 1 !important;
    }

.slide-number {
      min-width: 58px !important;
      text-align: center !important;
      color: var(--gold) !important;
      font: 500 13px/1 Arial, sans-serif !important;
      white-space: nowrap !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
    }

    .slide-current-button {
      appearance: none !important;
      -webkit-appearance: none !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      outline: 0 !important;
      margin: 0 1px 0 0 !important;
      padding: 3px 7px !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      color: inherit !important;
      font: inherit !important;
      line-height: 1 !important;
      cursor: default !important;
      min-width: 24px !important;
      text-align: center !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }

    .slide-current-button:hover {
      border-color: rgba(165, 129, 65, 0.58) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)),
        rgba(165, 129, 65, 0.18) !important;
    }

    .slide-total {
      display: inline-flex !important;
      align-items: center !important;
      line-height: 1 !important;
    }

    .slide-slash {
      display: inline-block !important;
      margin: 0 6px 0 8px !important;
      font-weight: 800 !important;
      font-size: 15px !important;
      line-height: 1 !important;
      color: var(--gold) !important;
    }

    .slide-total-value {
      display: inline-block !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      opacity: 0.86 !important;
    }

    #slideNumber.is-last:not(.editing) .slide-total-value {
      font-weight: 500 !important;
      opacity: 0.86 !important;
    }

    .slide-jump-input {
      display: none !important;
      width: 38px !important;
      height: 24px !important;
      min-width: 38px !important;
      margin: 0 !important;
      padding: 0 2px !important;
      border: 1px solid rgba(165, 129, 65, 0.58) !important;
      border-radius: 999px !important;
      outline: 0 !important;
      background: rgba(0, 0, 0, 0.34) !important;
      color: var(--gold) !important;
      font: 500 13px/1 Arial, sans-serif !important;
      text-align: center !important;
    }

    .slide-jump-input::-webkit-outer-spin-button,
    .slide-jump-input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0 !important;
    }

    .slide-jump-input[type=number] {
      -moz-appearance: textfield !important;
    }

    #slideNumber.editing .slide-current-button {
      display: inline-flex !important;
    }

    #slideNumber.editing .slide-jump-input {
      display: none !important;
    }

    #thumbPanelBackdrop {
      display: none !important;
    }

    #thumbPanel {
      position: absolute !important;
      left: var(--thumb-panel-left, 0px) !important;
      top: var(--thumb-panel-top, 0px) !important;
      bottom: auto !important;
      height: var(--thumb-panel-height, 100%) !important;
      max-height: 100% !important;
      width: var(--thumb-panel-width, min(340px, 86vw)) !important;
      z-index: 1000000 !important;
      display: flex !important;
      flex-direction: column !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
        rgba(18,18,18,0.78) !important;
      border-right: 1px solid rgba(165,129,65,0.30) !important;
      box-shadow: none !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      border-radius: var(--thumb-panel-radius, 0px) !important;
      overflow: hidden !important;
      transform: translateX(var(--thumb-panel-closed-x, calc(-100% - 24px))) !important;
      transition: transform 220ms ease !important;
      color: var(--gold) !important;
      pointer-events: auto !important;
    }

    body.fullscreen-active #thumbPanel {
      position: fixed !important;
      left: var(--thumb-panel-left, 0px) !important;
      top: var(--thumb-panel-top, 0px) !important;
      bottom: auto !important;
      height: var(--thumb-panel-height, 100%) !important;
      max-height: 100% !important;
      width: var(--thumb-panel-width, min(310px, 88vw)) !important;
      border-radius: var(--thumb-panel-radius, 0px) !important;
      transform: translateX(var(--thumb-panel-closed-x, calc(-100% - 24px))) !important;
    }

    body.thumbs-open #thumbPanel {
      transform: translateX(0) !important;
    }

    #thumbPanelHeader {
      flex: 0 0 auto !important;
      height: 58px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 0 14px 0 16px !important;
      border-bottom: 1px solid rgba(165,129,65,0.24) !important;
      background: rgba(0,0,0,0.16) !important;
    }

    #thumbPanelTitle {
      font: 600 14px/1 Arial, sans-serif !important;
      letter-spacing: 0.02em !important;
    }

    #btnCloseThumbs {
      width: 36px !important;
      height: 36px !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: transparent !important;
      color: var(--gold) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      cursor: pointer !important;
    }

    #btnCloseThumbs svg {
      width: 18px !important;
      height: 18px !important;
      fill: currentColor !important;
      display: block !important;
    }

    #thumbList {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      padding: 10px 10px 16px 6px !important;
      scrollbar-width: thin !important;
      scrollbar-color: rgba(165,129,65,0.48) rgba(0,0,0,0.18) !important;
      --thumb-preview-width: 92px;
      --thumb-number-gap: 12px;
      --thumb-number-inset: 18px;
      --thumb-item-pad-y: 6px;
      --thumb-item-pad-left: 6px;
    }

    .thumb-item {
      width: 100% !important;
      border: 1px solid rgba(165,129,65,0.20) !important;
      border-radius: 13px !important;
      background: rgba(255,255,255,0.025) !important;
      padding:
        var(--thumb-item-pad-y, 6px)
        var(--thumb-number-inset, 18px)
        var(--thumb-item-pad-y, 6px)
        var(--thumb-item-pad-left, 6px) !important;
      margin: 0 0 9px !important;
      display: grid !important;
      grid-template-columns: var(--thumb-preview-width, 92px) minmax(0, 1fr) !important;
      column-gap: var(--thumb-number-gap, 12px) !important;
      row-gap: 0 !important;
      align-items: center !important;
      color: var(--gold) !important;
      cursor: pointer !important;
      text-align: left !important;
    }

    .thumb-item:hover,
    .thumb-item.current {
      border-color: rgba(165,129,65,0.58) !important;
      background: rgba(165,129,65,0.10) !important;
    }

    .thumb-preview {
      position: relative !important;
      width: var(--thumb-preview-width, 92px) !important;
      aspect-ratio: 16 / 9 !important;
      border-radius: 8px !important;
      overflow: hidden !important;
      background: rgba(0,0,0,0.32) !important;
      border: 1px solid rgba(165,129,65,0.16) !important;
    }

    .thumb-preview img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
      opacity: 0 !important;
      transition: opacity 180ms ease !important;
    }

    .thumb-preview img.loaded {
      opacity: 1 !important;
    }

    .thumb-placeholder {
      position: absolute !important;
      inset: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: transparent !important;
      font: 600 18px/1 Arial, sans-serif !important;
      letter-spacing: 0.02em !important;
      background:
        radial-gradient(circle at 35% 20%, rgba(165,129,65,0.18), transparent 42%),
        rgba(0,0,0,0.26) !important;
    }

    .thumb-meta {
      width: 100% !important;
      min-width: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: center !important;
      gap: 5px !important;
      text-align: right !important;
      justify-self: stretch !important;
    }

    .thumb-number {
      width: 100% !important;
      min-width: 0 !important;
      font: 600 13px/1.1 Arial, sans-serif !important;
      color: var(--gold) !important;
      text-align: right !important;
      justify-self: stretch !important;
      white-space: nowrap !important;
    }

    .thumb-hint {
      font: 500 11px/1.25 Arial, sans-serif !important;
      color: rgba(165,129,65,0.56) !important;
    }

    @media (max-width: 768px) {
      #thumbPanel {
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        width: min(230px, 62vw) !important;
        border-radius: 0 !important;
        transform: translateX(var(--thumb-panel-closed-x, -104%)) !important;
      }

      #thumbList {
        --thumb-preview-width: 86px;
        --thumb-number-gap: 6px;
        --thumb-number-inset: 12px;
        --thumb-item-pad-left: 6px;
      }

      .thumb-item {
        grid-template-columns: var(--thumb-preview-width, 86px) minmax(0, 1fr) !important;
        column-gap: var(--thumb-number-gap, 8px) !important;
        padding-right: var(--thumb-number-inset, 14px) !important;
      }

      .thumb-number {
        width: 100% !important;
        min-width: 0 !important;
        text-align: right !important;
        justify-self: stretch !important;
        white-space: nowrap !important;
      }

      .thumb-preview {
        width: var(--thumb-preview-width, 86px) !important;
      }
    }
.ctrl-btn {
      width: 36px !important;
      height: 36px !important;
      min-width: 36px !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: transparent !important;
      color: var(--gold) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      padding: 0 !important;
      touch-action: manipulation !important;
    }

    .ctrl-btn:disabled {
      opacity: 0.32 !important;
      cursor: default !important;
    }

    .ctrl-btn svg {
      width: 22px !important;
      height: 22px !important;
      fill: currentColor !important;
      display: block !important;
    }

    #iconFullscreenEnter,
    #iconFullscreenEnter path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 2.8 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    #btnThumbs svg,
    #btnThumbs svg * {
      stroke: currentColor !important;
    }

    #btnPrev svg rect,
    #btnNext svg rect {
      fill: currentColor !important;
      stroke: none !important;
    }

    #btnPrev svg path,
    #btnNext svg path {
      fill: none !important;
      stroke: var(--bg) !important;
    }

    .player-icon-hidden,
    .ctrl-btn svg.player-icon-hidden {
      display: none !important;
    }

    #slideNumber {
      min-width: 58px !important;
      text-align: center !important;
      color: var(--gold) !important;
      font: 500 13px/1 Arial, sans-serif !important;
      white-space: nowrap !important;
    }

    #btnPrev {
      margin-right: -4px !important;
    }

    #slideNumber {
      margin-left: -4px !important;
      margin-right: -4px !important;
    }

    #btnNext {
      margin-left: -4px !important;
    }

    #btnReset svg {
      transform: scaleX(-1) !important;
      transform-origin: center center !important;
    }

    .separator {
      width: 1px !important;
      height: 20px !important;
      background: rgba(165, 129, 65, 0.30) !important;
      flex: 0 0 auto !important;
    }

    #volumeWrap {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      width: 36px !important;
      min-width: 36px !important;
      height: 138px !important;
      min-height: 138px !important;
      overflow: visible !important;
      padding: 4px 0 0 !important;
      transition: none !important;
    }

    #volumePanel {
      width: 36px !important;
      min-width: 36px !important;
      height: 74px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
      transition: none !important;
      order: 1 !important;
    }

    #volumeSlider {
      width: 74px !important;
      height: 18px !important;
      margin: 0 !important;
      transform: rotate(-90deg) !important;
      transform-origin: center center !important;
      accent-color: var(--gold) !important;
      pointer-events: auto !important;
    }

    #volumeWrap > .ctrl-btn {
      order: 2 !important;
      margin-top: 6px !important;
      flex: 0 0 auto !important;
    }

    #volumeWrap #volumePanel {
      order: 1 !important;
      flex: 0 0 auto !important;
    }

    /*
      Fullscreen mode also uses the same grid layout:
      slide area above, control bar in its own bottom row.
    */
    body.fullscreen-active #controlBar {
      z-index: 999999 !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      transition: none !important;
    }

#fullscreenHotspot {
      display: none !important;
      pointer-events: none !important;
    }

    /* v2.0.5: fullscreen right-edge reveal corridor */
    @media (hover: hover) and (pointer: fine) {
      body.fullscreen-active.side-controls-ui.side-controls-overlay #fullscreenHotspot {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 132px !important;
        height: 100dvh !important;
        display: block !important;
        pointer-events: auto !important;
        background: transparent !important;
        z-index: 999996 !important;
      }
    }

    @media (max-width: 768px) {
      :root {
        --gap: 22px;
      }

      #controlBar {
        gap: 5px !important;
        padding: 6px 7px !important;
        max-width: calc(100% - 14px) !important;
      }

      .ctrl-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
      }

      .ctrl-btn svg {
        width: 20px !important;
        height: 20px !important;
      }

      #slideNumber {
        min-width: 50px !important;
        font-size: 12px !important;
      }

      .slide-current-button {
        pointer-events: none !important;
        cursor: default !important;
        text-decoration: none !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 14px !important;
      }

      #slideNumber.editing .slide-current-button {
        display: inline-block !important;
      }

      #slideNumber.editing .slide-jump-input {
        display: none !important;
      }

      .separator {
        height: 22px !important;
      }

      #startButton {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        aspect-ratio: 1 / 1 !important;
      }

      #startButton svg {
        width: 34px !important;
        height: 34px !important;
      }
    }

    @media (max-width: 420px) {
      #controlBar {
        gap: 3px !important;
        padding: 5px 6px !important;
      }

      .ctrl-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
      }

      .ctrl-btn svg {
        width: 22px !important;
        height: 22px !important;
      }

      #slideNumber {
        min-width: 44px !important;
      }
    }

    /* Interaction-capability styling is scoped by LAYOUT, never by raw
       (pointer: coarse)/(hover: none) alone: a 1440x900 touchscreen laptop
       reports a coarse primary pointer and used to lose the fullscreen
       button, progress seek and volume slider while keeping the desktop
       layout. The JS sets mobile-portrait-ui / mobile-landscape-ui from
       layout space exactly when the layout IS mobile/tablet; the
       (max-width: 768px) clause covers the first paint before the JS runs. */
    @media (max-width: 768px) {
      #presentationProgress {
        pointer-events: none !important;
        cursor: default !important;
        touch-action: auto !important;
      }

      #presentationProgressThumb,
      #presentationProgressPreview {
        display: none !important;
      }

      #btnFullscreen,
      #fullscreenSeparator {
        display: none !important;
      }

      #volumeWrap {
        width: 36px !important;
        min-width: 36px !important;
        overflow: hidden !important;
      }

      #volumePanel,
      #volumeSlider {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }
    }

    body.mobile-portrait-ui #presentationProgress,
    body.mobile-landscape-ui #presentationProgress {
      pointer-events: none !important;
      cursor: default !important;
      touch-action: auto !important;
    }

    body.mobile-portrait-ui #presentationProgressThumb,
    body.mobile-portrait-ui #presentationProgressPreview,
    body.mobile-landscape-ui #presentationProgressThumb,
    body.mobile-landscape-ui #presentationProgressPreview {
      display: none !important;
    }

    body.mobile-portrait-ui #btnFullscreen,
    body.mobile-portrait-ui #fullscreenSeparator,
    body.mobile-landscape-ui #btnFullscreen,
    body.mobile-landscape-ui #fullscreenSeparator {
      display: none !important;
    }

    body.mobile-portrait-ui #volumeWrap,
    body.mobile-landscape-ui #volumeWrap {
      width: 36px !important;
      min-width: 36px !important;
      overflow: hidden !important;
    }

    body.mobile-portrait-ui #volumePanel,
    body.mobile-portrait-ui #volumeSlider,
    body.mobile-landscape-ui #volumePanel,
    body.mobile-landscape-ui #volumeSlider {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    @media (orientation: landscape) and (max-height: 560px) and (hover: none),
           (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
      #startOverlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 14px !important;
      }

      #startBox {
        gap: clamp(24px, 7vh, 44px) !important;
        max-width: calc(100% - 28px) !important;
        max-height: calc(100% - 20px) !important;
        transform: none !important;
      }

      #startLogo {
        width: min(168px, 30vw, 38vh) !important;
        max-width: 168px !important;
        height: auto !important;
        flex: 0 0 auto !important;
      }

      #startButton {
        width: clamp(54px, 14vh, 68px) !important;
        height: clamp(54px, 14vh, 68px) !important;
        min-width: clamp(54px, 14vh, 68px) !important;
        min-height: clamp(54px, 14vh, 68px) !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 auto !important;
        border-radius: 50% !important;
      }

      #startButton svg {
        width: clamp(26px, 7vh, 34px) !important;
        height: clamp(26px, 7vh, 34px) !important;
        flex: 0 0 auto !important;
      }
    }

    /* v87: v86 baseline + consistent right padding/alignment for slide-list numbers across all layouts. */
    body.mobile-landscape-ui #controlBar {
      flex-direction: column !important;
      align-items: center !important;
      justify-content: space-evenly !important;
      gap: 2px !important;
      padding: 5px 4px !important;
      max-width: none !important;
      width: var(--side-controls-width, 48px) !important;
      height: var(--side-controls-height, auto) !important;
      min-height: var(--side-controls-height, auto) !important;
      border-radius: 999px !important;
      overflow: visible !important;
    }

    body.mobile-landscape-ui .ctrl-btn {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
    }

    body.mobile-landscape-ui .ctrl-btn svg {
      width: 22px !important;
      height: 22px !important;
    }

    body.mobile-landscape-ui #slideNumber {
      position: static !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 18px !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
      margin: -1px 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: var(--gold) !important;
      font-size: 10px !important;
      line-height: 1 !important;
      letter-spacing: -0.03em !important;
      white-space: nowrap !important;
      overflow: visible !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body.mobile-landscape-ui .slide-current-button {
      min-width: 12px !important;
      max-width: 18px !important;
      padding: 0 !important;
      margin: 0 !important;
      pointer-events: none !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      line-height: 1 !important;
      font-size: 10px !important;
      letter-spacing: -0.03em !important;
      overflow: visible !important;
    }

    body.mobile-landscape-ui .slide-slash {
      margin: 0 2px !important;
      font-size: 10px !important;
      line-height: 1 !important;
      letter-spacing: -0.04em !important;
    }

    body.mobile-landscape-ui .slide-total {
      display: inline-flex !important;
      line-height: 1 !important;
      flex: 0 0 auto !important;
    }

    body.mobile-landscape-ui .slide-total-value {
      font-size: 10px !important;
      letter-spacing: -0.03em !important;
    }

    body.mobile-landscape-ui .separator {
      width: 24px !important;
      height: 1px !important;
      margin: 1px 0 !important;
    }

    body.mobile-landscape-ui #volumeWrap {
      width: 36px !important;
      min-width: 36px !important;
      height: 36px !important;
    }

    body.mobile-landscape-ui #presentationProgress {
      width: 4px !important;
      height: var(--progress-height, 0px) !important;
      border-radius: 999px !important;
    }

    body.mobile-landscape-ui #presentationProgressFill {
      width: 100% !important;
      min-width: 0 !important;
      height: var(--progress-percent, 0%) !important;
      min-height: 10px !important;
      border-radius: inherit !important;
      transition: height 180ms ease !important;
    }

    body.mobile-landscape-ui #presentationProgress {
      pointer-events: none !important;
      cursor: default !important;
      touch-action: auto !important;
    }

    body.mobile-landscape-ui #presentationProgressThumb,
    body.mobile-landscape-ui #presentationProgressPreview {
      display: none !important;
    }

    body.mobile-landscape-ui #thumbPanel {
      left: var(--thumb-panel-left, 0px) !important;
      top: var(--thumb-panel-top, 0px) !important;
      height: var(--thumb-panel-height, 100%) !important;
      max-height: var(--thumb-panel-height, 100%) !important;
      width: var(--thumb-panel-width, 152px) !important;
      max-width: var(--thumb-panel-width, 152px) !important;
      border-radius: var(--thumb-panel-radius, 8px) !important;
      border-right: 1px solid rgba(165,129,65,0.30) !important;
      box-shadow: 8px 0 24px rgba(0,0,0,0.22) !important;
    }

    body.mobile-landscape-ui #thumbPanelHeader {
      height: 42px !important;
      padding: 0 8px 0 8px !important;
    }

    body.mobile-landscape-ui #thumbPanelTitle {
      font-size: 12px !important;
    }

    body.mobile-landscape-ui #btnCloseThumbs {
      width: 30px !important;
      height: 30px !important;
      min-width: 30px !important;
    }

    body.mobile-landscape-ui #thumbList {
      padding: 6px 6px 10px !important;
      --thumb-preview-width: 92px;
      --thumb-number-gap: 0;
      --thumb-number-inset: 8px;
      --thumb-item-pad-y: 4px;
      --thumb-item-pad-left: 4px;
    }

    body.mobile-landscape-ui .thumb-item {
      grid-template-columns: var(--thumb-preview-width, 92px) minmax(0, 1fr) !important;
      column-gap: var(--thumb-number-gap, 6px) !important;
      padding: 4px var(--thumb-number-inset, 8px) 4px 4px !important;
      margin: 0 0 6px !important;
    }

    body.mobile-landscape-ui .thumb-preview {
      width: var(--thumb-preview-width, 92px) !important;
    }

    body.mobile-landscape-ui .thumb-number {
      width: 100% !important;
      min-width: 0 !important;
      font-size: 12px !important;
      text-align: right !important;
      justify-self: stretch !important;
      white-space: nowrap !important;
    }



    /* v91 sync + thumbnail alignment fixes */
    #slideNumber.slide-number {
      min-width: 64px !important;
      height: 25px !important;
      padding: 3px 9px !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
      color: var(--gold) !important;
      white-space: nowrap !important;
      overflow: visible !important;
    }

    #slideNumber .slide-current-button {
      appearance: none !important;
      -webkit-appearance: none !important;
      border: 0 !important;
      outline: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      min-width: auto !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: inherit !important;
      font: inherit !important;
      line-height: 1 !important;
      pointer-events: none !important;
      cursor: default !important;
    }

    #slideNumber .slide-current-button:hover {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    #slideNumber .slide-slash {
      margin: 0 5px !important;
    }

    #slideNumber .slide-total-value {
      min-width: 16px !important;
      text-align: left !important;
    }

    .thumb-item {
      grid-template-columns: var(--thumb-preview-width, 92px) max-content !important;
      justify-content: space-between !important;
    }

    .thumb-meta {
      align-items: flex-end !important;
      justify-self: end !important;
      text-align: right !important;
      min-width: 20px !important;
      width: auto !important;
    }

    .thumb-number {
      width: auto !important;
      min-width: 18px !important;
      text-align: right !important;
      justify-self: end !important;
      padding-right: 0 !important;
    }

    @media (max-width: 1180px) {
      #thumbList {
        --thumb-preview-width: 92px;
        --thumb-number-gap: 5px;
        --thumb-number-inset: 10px;
        --thumb-item-pad-left: 5px;
      }

      .thumb-item {
        column-gap: var(--thumb-number-gap, 5px) !important;
        padding:
          var(--thumb-item-pad-y, 6px)
          var(--thumb-number-inset, 10px)
          var(--thumb-item-pad-y, 6px)
          var(--thumb-item-pad-left, 5px) !important;
      }
    }

    @media (max-width: 768px) {
      #thumbPanel {
        width: var(--thumb-panel-width, min(168px, 58vw)) !important;
      }

      #thumbList {
        --thumb-preview-width: 92px;
        --thumb-number-gap: 0;
        --thumb-number-inset: 9px;
        --thumb-item-pad-left: 5px;
      }

      .thumb-preview {
        width: var(--thumb-preview-width, 92px) !important;
      }

      #slideNumber.slide-number {
        min-width: 58px !important;
        height: 24px !important;
        padding: 2px 7px !important;
        font-size: 11px !important;
      }
    }

    body.mobile-landscape-ui #thumbPanel {
      width: var(--thumb-panel-width, 152px) !important;
      max-width: var(--thumb-panel-width, 152px) !important;
    }

    body.mobile-landscape-ui #thumbList {
      --thumb-preview-width: 92px;
      --thumb-number-gap: 0;
      --thumb-number-inset: 8px;
      --thumb-item-pad-left: 4px;
    }

    body.mobile-landscape-ui #slideNumber.slide-number {
      width: 52px !important;
      min-width: 52px !important;
      max-width: 52px !important;
      height: 22px !important;
      padding: 2px 5px !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      font-size: 10px !important;
      letter-spacing: -0.04em !important;
    }



    /* Native HTML hotspots for links that iSpring mobile export does not activate reliably. */
    #presentationScaler .slide-hotspot {
      position: absolute !important;
      display: none !important;
      z-index: 20 !important;
      pointer-events: auto !important;
      background: rgba(255, 255, 255, 0) !important;
      border: 0 !important;
      outline: 0 !important;
      text-decoration: none !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: rgba(165, 129, 65, 0.18) !important;
      touch-action: manipulation !important;
    }

    #presentationScaler .slide-hotspot.is-active {
      display: block !important;
    }


    /* FINAL APPROVED PLAYER — compact side controls and refined slide list. */
    body.side-controls-ui #controlBar {
      width: var(--side-controls-width, 36px) !important;
      padding: 5px 0 !important;
      gap: 2px !important;
      overflow: visible !important;
    }

    /* Icons retain their approved dimensions while only the glass panel becomes narrower. */
    body.side-controls-ui .ctrl-btn {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
    }

    body.side-controls-ui .ctrl-btn svg {
      width: 22px !important;
      height: 22px !important;
    }

    /* Compact diagonal fraction: current at upper-left, total at lower-right. */
    body.side-controls-ui #slideNumber {
      position: relative !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 43px !important;
      margin: -2px 0 !important;
      padding: 0 !important;
      display: block !important;
      overflow: visible !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }

    body.side-controls-ui .slide-current-button {
      position: absolute !important;
      left: 1px !important;
      top: 2px !important;
      min-width: 0 !important;
      width: auto !important;
      max-width: 22px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-size: 11px !important;
      line-height: 1 !important;
      pointer-events: none !important;
    }

    body.side-controls-ui .slide-slash {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      margin: 0 !important;
      transform: translate(-50%, -50%) scaleX(0.78) !important;
      transform-origin: center !important;
      font-size: 39px !important;
      font-weight: 300 !important;
      line-height: 0.8 !important;
    }

    body.side-controls-ui .slide-total {
      position: absolute !important;
      right: 1px !important;
      bottom: 2px !important;
      display: inline-flex !important;
      line-height: 1 !important;
    }

    body.side-controls-ui .slide-total-value {
      font-size: 11px !important;
      line-height: 1 !important;
      letter-spacing: -0.02em !important;
    }

    /* Hover-capable devices: the vertical progress rail is hidden until the cursor enters its 28px proximity zone. */
    @media (hover: hover) and (pointer: fine) {
      body.side-controls-ui #presentationProgress {
        opacity: 0 !important;
        transition: opacity 160ms ease !important;
      }

      body.side-controls-ui #presentationProgress::before {
        content: "" !important;
        position: absolute !important;
        left: -12px !important;
        right: -12px !important;
        top: 0 !important;
        bottom: 0 !important;
        background: transparent !important;
      }

      body.side-controls-ui #presentationProgress:hover,
      body.side-controls-ui #presentationProgress.is-hovering,
      body.side-controls-ui #presentationProgress.is-dragging,
      body.side-controls-ui #presentationProgress:focus-within {
        opacity: 1 !important;
      }
    }

    /* Touch landscape has no mouse hover, so the progress rail remains visible and usable as before. */
    @media (hover: none), (pointer: coarse) {
      body.side-controls-ui #presentationProgress {
        opacity: 1 !important;
      }
    }

    /* Thumbnails are 80% of the approved V2 size. */
    #thumbList {
      --thumb-preview-width: 74px !important;
      --thumb-number-gap: 0 !important;
    }

    .thumb-item {
      grid-template-columns: 74px 34px !important;
      column-gap: 0 !important;
    }

    .thumb-preview {
      width: 74px !important;
    }

    .thumb-meta,
    .thumb-number {
      width: 100% !important;
      min-width: 34px !important;
      text-align: right !important;
      justify-self: stretch !important;
    }

    /* Exact 15px separation from the thumbnail, with every number sharing the same right edge. */
    .thumb-number {
      padding: 0 !important;
      margin: 0 !important;
      white-space: nowrap !important;
    }

    body.mobile-landscape-ui #thumbList {
      --thumb-preview-width: 74px !important;
      --thumb-number-gap: 0 !important;
    }

    body.mobile-landscape-ui .thumb-item {
      grid-template-columns: 74px 30px !important;
      column-gap: 0 !important;
    }

    body.mobile-landscape-ui .thumb-preview { width: 74px !important; }

    @media (max-width: 768px) {
      #thumbList {
        --thumb-preview-width: 69px !important;
        --thumb-number-gap: 0 !important;
      }
      .thumb-item {
        grid-template-columns: 69px 30px !important;
        column-gap: 0 !important;
      }
      .thumb-preview { width: 69px !important; }
    }



    /* Core V2 side-layout rules shared by desktop and every landscape touch viewport. */
    body.side-controls-ui #controlBar {
      flex-direction: column !important;
      align-items: center !important;
      justify-content: space-evenly !important;
      height: var(--side-controls-height, auto) !important;
      min-height: var(--side-controls-height, auto) !important;
      max-width: none !important;
      border-radius: 999px !important;
    }

    body.side-controls-ui .separator {
      width: 22px !important;
      height: 1px !important;
      margin: 1px 0 !important;
    }

    body.side-controls-ui #volumeWrap {
      width: 36px !important;
      min-width: 36px !important;
      height: 36px !important;
    }

    body.side-controls-ui #volumePanel,
    body.side-controls-ui #volumeSlider {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    body.side-controls-ui #presentationProgress {
      width: 4px !important;
      height: var(--progress-height, 0px) !important;
      border-radius: 999px !important;
    }

    body.side-controls-ui #presentationProgressFill {
      width: 100% !important;
      min-width: 0 !important;
      height: var(--progress-percent, 0%) !important;
      min-height: 10px !important;
      border-radius: inherit !important;
      transition: height 180ms ease !important;
    }

    body.side-controls-ui #presentationProgressThumb,
    body.side-controls-ui #presentationProgressPreview {
      display: none !important;
    }


    /* FINAL REVISION — stacked fraction and enlarged previous/next controls. */
    body.side-controls-ui #slideNumber {
      position: relative !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 48px !important;
      margin: -1px 0 !important;
      padding: 0 !important;
      display: block !important;
      overflow: visible !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }

    /* Keep the slide-number layout at 36px, but inset only its glass background by 3px on both sides. */
    body.side-controls-ui #slideNumber {
      border-color: transparent !important;
      background: transparent !important;
      box-shadow: none !important;
      isolation: isolate !important;
    }

    body.side-controls-ui #slideNumber::before {
      content: "" !important;
      position: absolute !important;
      left: 3px !important;
      right: 3px !important;
      top: 0 !important;
      bottom: 0 !important;
      z-index: -1 !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      pointer-events: none !important;
    }

    /* Numerator: current slide. */
    body.side-controls-ui #slideNumber .slide-current-button {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: 3px !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 16px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--gold) !important;
      font-size: 11px !important;
      line-height: 1 !important;
      text-align: center !important;
      pointer-events: none !important;
    }

    /* Let the slash and denominator use #slideNumber as their positioning box. */
    body.side-controls-ui #slideNumber .slide-total {
      position: static !important;
      display: contents !important;
    }

    /* Horizontal fraction bar, matching the previous slash color and visual weight. */
    body.side-controls-ui #slideNumber .slide-slash {
      position: absolute !important;
      left: 7px !important;
      right: 7px !important;
      top: 50% !important;
      width: auto !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: var(--gold) !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      transform: translateY(-50%) !important;
      opacity: 1 !important;
    }

    /* Denominator: total number of slides. */
    body.side-controls-ui #slideNumber .slide-total-value {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 3px !important;
      width: 100% !important;
      min-width: 0 !important;
      height: 16px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: var(--gold) !important;
      font-size: 11px !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      text-align: center !important;
      opacity: 0.86 !important;
    }

    /* Previous and next are visually about 1.5× larger; all other controls stay unchanged. */
    body.side-controls-ui #btnPrev,
    body.side-controls-ui #btnNext {
      position: relative !important;
      z-index: 2 !important;
      transform: scale(1.48) !important;
      transform-origin: center center !important;
    }

    body.side-controls-ui #btnPrev svg,
    body.side-controls-ui #btnNext svg {
      width: 22px !important;
      height: 22px !important;
    }

    /* FINAL THUMB NUMBER GEOMETRY — 4px gap, 13px right-aligned number column, 4px right inset. */
    .thumb-item {
      width: max-content !important;
      max-width: 100% !important;
      grid-template-columns: 74px 13px !important;
      column-gap: 4px !important;
      justify-content: start !important;
      padding-right: 4px !important;
    }

    .thumb-meta,
    .thumb-number {
      width: 13px !important;
      min-width: 13px !important;
      max-width: 13px !important;
      justify-self: start !important;
      text-align: right !important;
      font-variant-numeric: tabular-nums !important;
    }

    body.mobile-landscape-ui .thumb-item {
      width: max-content !important;
      max-width: 100% !important;
      grid-template-columns: 74px 13px !important;
      column-gap: 4px !important;
      justify-content: start !important;
      padding-right: 4px !important;
    }

    @media (max-width: 768px) {
      .thumb-item {
        width: max-content !important;
        max-width: 100% !important;
        grid-template-columns: 69px 13px !important;
        column-gap: 4px !important;
        justify-content: start !important;
        padding-right: 4px !important;
      }
    }
    /* END FINAL THUMB NUMBER GEOMETRY */


    /* EXACT SIDE THUMB PANEL GEOMETRY
       6 + 1 + 4 + 74 + 4 + 18 + 6 + 1 + 0 + 6 + 1 = 121px
       list-left + card-left-border + card-left-padding + thumbnail + gap +
       number-column + card-right-padding + card-right-border + free-space +
       list-right-padding + panel-right-border
    */
    body.side-controls-ui #thumbPanel {
      width: 121px !important;
      max-width: 121px !important;
    }

    body.side-controls-ui #thumbList {
      padding-left: 6px !important;
      padding-right: 6px !important;
      --thumb-preview-width: 74px !important;
      --thumb-number-gap: 4px !important;
      --thumb-item-pad-left: 4px !important;
      --thumb-number-inset: 6px !important;
    }

    body.side-controls-ui .thumb-item {
      width: max-content !important;
      max-width: 100% !important;
      grid-template-columns: 74px 18px !important;
      column-gap: 4px !important;
      justify-content: start !important;
      padding-left: 4px !important;
      padding-right: 6px !important;
    }

    body.side-controls-ui .thumb-preview {
      width: 74px !important;
    }

    body.side-controls-ui .thumb-meta,
    body.side-controls-ui .thumb-number {
      width: 18px !important;
      min-width: 18px !important;
      max-width: 18px !important;
      justify-self: start !important;
      text-align: right !important;
      padding: 0 !important;
      margin: 0 !important;
      font-variant-numeric: tabular-nums !important;
    }

    /* ZOOM/DPI LOCK — preserve the approved 121px panel geometry on every display.
       The card outer width is exactly:
       1 + 4 + 74 + 4 + 18 + 6 + 1 = 108px.
       Hiding only the scrollbar track prevents OS/browser scrollbar width from
       stealing horizontal space and pushing the number column outside the card. */
    body.side-controls-ui #thumbList {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    body.side-controls-ui #thumbList::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      display: none !important;
    }

    body.side-controls-ui .thumb-item {
      box-sizing: border-box !important;
      width: 108px !important;
      min-width: 108px !important;
      max-width: 108px !important;
      grid-template-columns: 74px 18px !important;
      column-gap: 4px !important;
      justify-content: start !important;
      padding-left: 4px !important;
      padding-right: 6px !important;
      overflow: hidden !important;
    }

    body.side-controls-ui .thumb-preview {
      width: 74px !important;
      min-width: 74px !important;
      max-width: 74px !important;
    }

    body.side-controls-ui .thumb-meta,
    body.side-controls-ui .thumb-number {
      box-sizing: border-box !important;
      width: 18px !important;
      min-width: 18px !important;
      max-width: 18px !important;
      justify-self: stretch !important;
      overflow: hidden !important;
      text-align: right !important;
      white-space: nowrap !important;
    }



    /* MOBILE LANDSCAPE FRACTION LOCK
       Keep the approved stacked fraction at its exact size; never let the
       vertical flex control bar compress it on short or zoomed viewports. */
    body.mobile-landscape-ui.side-controls-ui #slideNumber {
      flex: 0 0 48px !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      align-self: center !important;
      margin: -1px 0 !important;
      transform: none !important;
    }

    body.mobile-landscape-ui.side-controls-ui #slideNumber::before {
      left: 3px !important;
      right: 3px !important;
      top: 0 !important;
      bottom: 0 !important;
    }

    body.mobile-landscape-ui.side-controls-ui #slideNumber .slide-current-button {
      top: 3px !important;
      height: 16px !important;
    }

    body.mobile-landscape-ui.side-controls-ui #slideNumber .slide-slash {
      top: 24px !important;
      transform: translateY(-50%) !important;
    }

    body.mobile-landscape-ui.side-controls-ui #slideNumber .slide-total-value {
      bottom: 3px !important;
      height: 16px !important;
    }


    /* FINAL FIX — fixed vertical volume slider above the speaker icon. */
    body.side-controls-ui #volumeWrap {
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 4px !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 120px !important;
      min-height: 120px !important;
      max-height: 120px !important;
      flex: 0 0 120px !important;
      padding: 0 !important;
      overflow: visible !important;
      transition: none !important;
    }

    body.side-controls-ui #volumePanel {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      order: 1 !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 74px !important;
      min-height: 74px !important;
      max-height: 74px !important;
      flex: 0 0 74px !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      pointer-events: auto !important;
      overflow: visible !important;
      transition: none !important;
    }

    body.side-controls-ui #volumeSlider {
      display: block !important;
      width: 74px !important;
      min-width: 74px !important;
      max-width: 74px !important;
      height: 18px !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      accent-color: var(--gold) !important;
      transform: rotate(-90deg) !important;
      transform-origin: center center !important;
      touch-action: none !important;
    }

    body.side-controls-ui #volumeWrap > #btnMute {
      order: 2 !important;
      flex: 0 0 38px !important;
      margin: 4px 0 0 !important;
    }

    /* Layout-space scoping, same reason as the progress block above: touch
       capability alone must not restyle a desktop-sized viewport. */
    body.mobile-portrait-ui.side-controls-ui #volumeWrap,
    body.mobile-landscape-ui.side-controls-ui #volumeWrap {
      display: inline-flex !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui.side-controls-ui #volumePanel,
    body.mobile-portrait-ui.side-controls-ui #volumeSlider,
    body.mobile-landscape-ui.side-controls-ui #volumePanel,
    body.mobile-landscape-ui.side-controls-ui #volumeSlider {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    body.mobile-portrait-ui.side-controls-ui #volumeSlider,
    body.mobile-landscape-ui.side-controls-ui #volumeSlider {
      display: block !important;
    }

    @media (max-width: 768px) {
      body.side-controls-ui #volumeWrap {
        display: inline-flex !important;
        overflow: visible !important;
      }

      body.side-controls-ui #volumePanel,
      body.side-controls-ui #volumeSlider {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
      }

      body.side-controls-ui #volumeSlider {
        display: block !important;
      }
    }



    /* ================================================================
       RIGHT-EDGE AUTO-HIDE OVERLAY CONTROLS — DESKTOP FINE POINTER
       - The slide uses the full viewport; no width is reserved for controls.
       - Controls live above the slide near its right edge.
       - Moving near the right edge reveals the cluster; moving away hides it.
       - Touch/mobile behavior remains unchanged.
       ================================================================ */
    @media (hover: hover) and (pointer: fine) {
      body.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(calc(-50% + 26px)) !important;
        transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1) !important;
        will-change: opacity, transform !important;
      }

      body.side-controls-ui.side-controls-overlay #presentationProgress,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #presentationProgress {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(18px) scaleX(.86) !important;
        transform-origin: right center !important;
        transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1) !important;
        will-change: opacity, transform !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(-50%) !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) scaleX(1) !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar:focus-within,
      body.side-controls-ui.side-controls-overlay #controlBar:hover {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(-50%) !important;
      }
    }


    /* ================================================================
       DESKTOP OVERLAY CONTROLS — NO SHARED PANEL BACKGROUND
       The long glass capsule is removed. Each control keeps a compact
       YouTube-like translucent button so icons remain visible on any slide.
       ================================================================ */
    @media (hover: hover) and (pointer: fine) {
      body.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn {
        background: rgba(18, 18, 18, 0.46) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:hover,
      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:focus-visible,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:hover,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:focus-visible {
        background: rgba(18, 18, 18, 0.68) !important;
        border-color: rgba(255, 255, 255, 0.24) !important;
      }

      body.side-controls-ui.side-controls-overlay #slideNumber,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
        background: rgba(18, 18, 18, 0.46) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
      }

      body.side-controls-ui.side-controls-overlay .separator,
      body.fullscreen-active.side-controls-ui.side-controls-overlay .separator {
        background: rgba(255, 255, 255, 0.34) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30) !important;
      }

      body.side-controls-ui.side-controls-overlay .ctrl-btn svg,
      body.fullscreen-active.side-controls-ui.side-controls-overlay .ctrl-btn svg,
      body.side-controls-ui.side-controls-overlay #slideNumber,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.62)) !important;
      }
    }


    /* v2.0.7: unified pointer tracking across parent + presentation iframe */
    @media (hover: hover) and (pointer: fine) {
      body.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar {
        padding: 0 !important;
        gap: 10px !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn,
      body.side-controls-ui.side-controls-overlay #slideNumber,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      body.side-controls-ui.side-controls-overlay #slideNumber,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
      }

      body.side-controls-ui.side-controls-overlay #btnPrev svg rect,
      body.side-controls-ui.side-controls-overlay #btnNext svg rect,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #btnPrev svg rect,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #btnNext svg rect {
        fill: none !important;
        stroke: none !important;
      }

      body.side-controls-ui.side-controls-overlay #btnPrev svg path,
      body.side-controls-ui.side-controls-overlay #btnNext svg path,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #btnPrev svg path,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #btnNext svg path {
        stroke: currentColor !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:hover,
      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:focus-visible,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:hover,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:focus-visible {
        background: transparent !important;
        border-color: transparent !important;
      }

      body.side-controls-ui.side-controls-overlay .separator,
      body.fullscreen-active.side-controls-ui.side-controls-overlay .separator {
        opacity: 0.7 !important;
      }
    }


    /* ================================================================
       v2.0.7 — STRICT GROUP VISIBILITY
       Control bar and progress are one visual group. No delay, no timer,
       no independent :hover visibility. Both follow the same body class.
       ================================================================ */
    @media (hover: hover) and (pointer: fine) {
      body.player-activated.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #controlBar,
      body.player-activated.side-controls-ui.side-controls-overlay #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #presentationProgress {
        transition: none !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar,
      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar:hover,
      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar:focus-within,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar:hover,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar:focus-within {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-50%) !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress,
      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress:hover,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress:hover {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: none !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar,
      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress {
        opacity: 1 !important;
        pointer-events: auto !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar {
        transform: translateX(-50%) !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress {
        transform: none !important;
      }
    }


    /* v2.0.9 — compact family group: Geri / slide number / İleri / Reset */
    .nav-control-group {
      display: contents !important;
    }

    body.side-controls-ui .nav-control-group {
      display: flex !important;
      flex: 0 0 auto !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      width: 38px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    body.side-controls-ui .nav-control-group #btnPrev,
    body.side-controls-ui .nav-control-group #slideNumber,
    body.side-controls-ui .nav-control-group #btnNext,
    body.side-controls-ui .nav-control-group #btnReset {
      flex: 0 0 auto !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }


    /* v2.0.10 — equal navigation family geometry + reference arrow icons */
    body.side-controls-ui .nav-control-group {
      display: grid !important;
      grid-template-columns: 40px !important;
      grid-template-rows: repeat(4, 48px) !important;
      row-gap: 8px !important;
      align-items: center !important;
      justify-items: center !important;
      justify-content: center !important;
      width: 40px !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    body.side-controls-ui .nav-control-group > #btnPrev,
    body.side-controls-ui .nav-control-group > #slideNumber,
    body.side-controls-ui .nav-control-group > #btnNext,
    body.side-controls-ui .nav-control-group > #btnReset {
      grid-column: 1 !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      transform-origin: center center !important;
      align-self: center !important;
      justify-self: center !important;
    }

    body.side-controls-ui .nav-control-group > #btnPrev,
    body.side-controls-ui .nav-control-group > #btnNext,
    body.side-controls-ui .nav-control-group > #btnReset {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    body.side-controls-ui .nav-control-group > #slideNumber {
      position: relative !important;
      display: block !important;
    }

    body.side-controls-ui .nav-control-group #btnPrev svg,
    body.side-controls-ui .nav-control-group #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      fill: none !important;
      color: var(--gold) !important;
    }

    body.side-controls-ui .nav-control-group #btnPrev svg path,
    body.side-controls-ui .nav-control-group #btnNext svg path,
    body.fullscreen-active.side-controls-ui .nav-control-group #btnPrev svg path,
    body.fullscreen-active.side-controls-ui .nav-control-group #btnNext svg path {
      fill: none !important;
      stroke: var(--gold) !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }


    /* FULLSCREEN PARITY — keep slide number identical to normal mode */
    body.side-controls-ui.side-controls-overlay #slideNumber,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
      position: relative !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: block !important;
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      filter: none !important;
      isolation: isolate !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber::before,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber::before {
      content: "" !important;
      position: absolute !important;
      left: 3px !important;
      right: 3px !important;
      top: 0 !important;
      bottom: 0 !important;
      z-index: 0 !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      pointer-events: none !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber .slide-current-button,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber .slide-current-button {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: 3px !important;
      z-index: 2 !important;
      width: 100% !important;
      height: 16px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      color: var(--gold) !important;
      font-size: 11px !important;
      line-height: 1 !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber .slide-total,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber .slide-total {
      position: static !important;
      display: contents !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber .slide-slash,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber .slide-slash {
      position: absolute !important;
      left: 7px !important;
      right: 7px !important;
      top: 50% !important;
      z-index: 2 !important;
      display: block !important;
      width: auto !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: var(--gold) !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      transform: translateY(-50%) !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber .slide-total-value,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber .slide-total-value {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 3px !important;
      z-index: 2 !important;
      width: 100% !important;
      height: 16px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      color: var(--gold) !important;
      font-size: 11px !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      text-align: center !important;
      opacity: 0.86 !important;
      visibility: visible !important;
    }


    /* ALWAYS VISIBLE CONTROLS — control bar + progress remain fixed */
    @media (hover: hover) and (pointer: fine) {
      body.player-activated #controlBar,
      body.fullscreen-active.player-activated #controlBar,
      body.player-activated #presentationProgress,
      body.fullscreen-active.player-activated #presentationProgress {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: none !important;
        animation: none !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #controlBar {
        transform: translateX(-50%) !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #presentationProgress {
        transform: none !important;
      }
    }


    /* PERMANENT VISIBLE CONTROLS — final override */
    body.player-activated #controlBar,
    body.player-activated #presentationProgress,
    body.fullscreen-active.player-activated #controlBar,
    body.fullscreen-active.player-activated #presentationProgress,
    body.player-activated.side-controls-ui.side-controls-overlay #controlBar,
    body.player-activated.side-controls-ui.side-controls-overlay #presentationProgress,
    body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #controlBar,
    body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #presentationProgress,
    body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar,
    body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress,
    body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar,
    body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transition: none !important;
      animation: none !important;
    }


    /* Current slide numerator: illuminated and visually distinct from denominator */
    #slideCurrentButton,
    body.side-controls-ui #slideCurrentButton,
    body.fullscreen-active #slideCurrentButton,
    body.fullscreen-active.side-controls-ui #slideCurrentButton {
      color: #f3cf7a !important;
      font-weight: 800 !important;
      opacity: 1 !important;
      text-shadow:
        0 0 3px rgba(255, 232, 168, 0.95),
        0 0 7px rgba(165, 129, 65, 0.95),
        0 0 13px rgba(165, 129, 65, 0.72) !important;
      filter: drop-shadow(0 0 4px rgba(165, 129, 65, 0.82)) !important;
    }

    #slideNumber .slide-total-value,
    body.side-controls-ui #slideNumber .slide-total-value,
    body.fullscreen-active #slideNumber .slide-total-value,
    body.fullscreen-active.side-controls-ui #slideNumber .slide-total-value {
      color: var(--gold) !important;
      font-weight: 500 !important;
      opacity: 0.48 !important;
      text-shadow: none !important;
      filter: none !important;
    }

    #slideNumber .slide-slash,
    body.side-controls-ui #slideNumber .slide-slash,
    body.fullscreen-active #slideNumber .slide-slash,
    body.fullscreen-active.side-controls-ui #slideNumber .slide-slash {
      color: var(--gold) !important;
      opacity: 0.72 !important;
      text-shadow: none !important;
      filter: none !important;
    }


    /* Current slide numerator: high-contrast illuminated indicator */
    #slideCurrentButton,
    body.side-controls-ui #slideCurrentButton,
    body.fullscreen-active #slideCurrentButton,
    body.fullscreen-active.side-controls-ui #slideCurrentButton {
      color: #171717 !important;
      background:
        linear-gradient(180deg, #f0d38b 0%, #c99d43 100%) !important;
      border: 1px solid rgba(255, 232, 168, 0.92) !important;
      font-weight: 900 !important;
      opacity: 1 !important;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36) !important;
      filter: none !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 0 0 1px rgba(165, 129, 65, 0.36),
        0 0 7px rgba(232, 190, 92, 0.88),
        0 0 14px rgba(165, 129, 65, 0.55) !important;
    }


    /* ================================================================
       DESKTOP UNIFIED UI — identical on monitors and touchscreen laptops
       Custom vertical volume rail avoids browser-native horizontal variants.
       ================================================================ */
    body.desktop-unified-ui #volumeWrap,
    body.fullscreen-active.desktop-unified-ui #volumeWrap {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 120px !important;
      min-height: 120px !important;
      max-height: 120px !important;
      flex: 0 0 120px !important;
      gap: 4px !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    body.desktop-unified-ui #volumePanel,
    body.fullscreen-active.desktop-unified-ui #volumePanel {
      --volume-pct: 100%;
      position: relative !important;
      display: block !important;
      order: 1 !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 74px !important;
      min-height: 74px !important;
      max-height: 74px !important;
      flex: 0 0 74px !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: none !important;
      overflow: visible !important;
    }

    body.desktop-unified-ui #volumePanel::before,
    body.fullscreen-active.desktop-unified-ui #volumePanel::before {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      bottom: 0 !important;
      width: 4px !important;
      height: 74px !important;
      transform: translateX(-50%) !important;
      border-radius: 999px !important;
      background: linear-gradient(
        to top,
        var(--gold) 0,
        var(--gold) var(--volume-pct),
        rgba(165, 129, 65, 0.32) var(--volume-pct),
        rgba(165, 129, 65, 0.32) 100%
      ) !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.28) !important;
      pointer-events: none !important;
    }

    body.desktop-unified-ui #volumePanel::after,
    body.fullscreen-active.desktop-unified-ui #volumePanel::after {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      bottom: clamp(-6px, calc(var(--volume-pct) - 6px), 68px) !important;
      width: 12px !important;
      height: 12px !important;
      transform: translateX(-50%) !important;
      border-radius: 50% !important;
      background: var(--gold) !important;
      border: 2px solid var(--bg) !important;
      box-shadow: 0 2px 7px rgba(0,0,0,0.38) !important;
      pointer-events: none !important;
    }

    body.desktop-unified-ui #volumeSlider,
    body.fullscreen-active.desktop-unified-ui #volumeSlider {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 74px !important;
      min-height: 74px !important;
      max-height: 74px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      opacity: 0 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: none !important;
      z-index: 3 !important;
    }

    body.desktop-unified-ui #volumeWrap > #btnMute,
    body.fullscreen-active.desktop-unified-ui #volumeWrap > #btnMute {
      order: 2 !important;
      flex: 0 0 38px !important;
      margin: 4px 0 0 !important;
    }


    /* MOBILE LANDSCAPE — desktop layout, without volume slider and progress rail */
    body.mobile-landscape-ui.side-controls-ui #presentationProgress,
    body.mobile-landscape-ui.side-controls-ui #presentationProgressFill,
    body.mobile-landscape-ui.side-controls-ui #presentationProgressThumb,
    body.mobile-landscape-ui.side-controls-ui #presentationProgressPreview {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-landscape-ui.side-controls-ui #controlBar {
      width: var(--side-controls-width, 36px) !important;
      padding: 5px 0 !important;
      gap: 2px !important;
      max-width: none !important;
      overflow: visible !important;
    }

    body.mobile-landscape-ui.side-controls-ui #volumeWrap {
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 38px !important;
      min-height: 38px !important;
      max-height: 38px !important;
      flex: 0 0 38px !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    body.mobile-landscape-ui.side-controls-ui #volumePanel,
    body.mobile-landscape-ui.side-controls-ui #volumeSlider {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-landscape-ui.side-controls-ui #volumeWrap > #btnMute {
      order: 1 !important;
      margin: 0 !important;
      flex: 0 0 38px !important;
    }


    /* Desktop: keep current slide number compact and readable. The gold capsule
       is identical windowed and fullscreen, so the widget does not change shape
       when the user toggles fullscreen. Dropping fullscreen-active from the first
       two selectors is what extends it to the windowed case; the fullscreen
       variants stay listed so this still outranks the plain overlay rule above
       once that class is present. */
    body.desktop-unified-ui.side-controls-ui #slideNumber .slide-current-button,
    body.desktop-unified-ui.side-controls-ui.side-controls-overlay #slideNumber .slide-current-button,
    body.fullscreen-active.desktop-unified-ui.side-controls-ui #slideNumber .slide-current-button,
    body.fullscreen-active.desktop-unified-ui.side-controls-ui.side-controls-overlay #slideNumber .slide-current-button {
      left: 6px !important;
      right: auto !important;
      top: 3px !important;
      width: 28px !important;
      min-width: 28px !important;
      max-width: 28px !important;
      height: 16px !important;
      min-height: 16px !important;
      max-height: 16px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 10px !important;
      line-height: 16px !important;
      letter-spacing: 0 !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      color: #171717 !important;
      background: linear-gradient(180deg, #f0d38b 0%, #c99d43 100%) !important;
      border: 1px solid rgba(255, 232, 168, 0.90) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        0 0 5px rgba(232, 190, 92, 0.70) !important;
      text-shadow: none !important;
      filter: none !important;
    }


    /* Mobile landscape: use exactly the same Geri / İleri icon styling as desktop */
    body.mobile-landscape-ui.side-controls-ui #btnPrev,
    body.mobile-landscape-ui.side-controls-ui #btnNext {
      color: var(--gold) !important;
    }

    body.mobile-landscape-ui.side-controls-ui #btnPrev svg,
    body.mobile-landscape-ui.side-controls-ui #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      fill: none !important;
      color: var(--gold) !important;
    }

    body.mobile-landscape-ui.side-controls-ui #btnPrev svg rect,
    body.mobile-landscape-ui.side-controls-ui #btnNext svg rect {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 4 !important;
    }

    body.mobile-landscape-ui.side-controls-ui #btnPrev svg path,
    body.mobile-landscape-ui.side-controls-ui #btnNext svg path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }


    /* MOBILE PORTRAIT — desktop/landscape tools in one horizontal row below slide */
    body.mobile-portrait-ui #presentationProgress,
    body.fullscreen-active.mobile-portrait-ui #presentationProgress {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-portrait-ui #controlBar,
    body.fullscreen-active.mobile-portrait-ui #controlBar {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      width: min(356px, calc(100vw - 8px)) !important;
      min-width: 0 !important;
      max-width: calc(100vw - 8px) !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      gap: 3px !important;
      padding: 0 3px !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui #controlBar .ctrl-btn,
    body.fullscreen-active.mobile-portrait-ui #controlBar .ctrl-btn {
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      margin: 0 !important;
      padding: 0 !important;
      flex: 0 0 36px !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    body.mobile-portrait-ui #controlBar .ctrl-btn svg,
    body.fullscreen-active.mobile-portrait-ui #controlBar .ctrl-btn svg {
      width: 22px !important;
      height: 22px !important;
    }

    body.mobile-portrait-ui .nav-control-group,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group {
      display: grid !important;
      grid-template-columns: repeat(4, 38px) !important;
      grid-template-rows: 40px !important;
      column-gap: 2px !important;
      align-items: center !important;
      justify-items: center !important;
      width: 158px !important;
      height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
      flex: 0 0 158px !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui .nav-control-group > #btnPrev,
    body.mobile-portrait-ui .nav-control-group > #slideNumber,
    body.mobile-portrait-ui .nav-control-group > #btnNext,
    body.mobile-portrait-ui .nav-control-group > #btnReset,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnPrev,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #slideNumber,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnNext,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnReset {
      position: relative !important;
      width: 38px !important;
      min-width: 38px !important;
      max-width: 38px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      align-self: center !important;
      justify-self: center !important;
    }

    body.mobile-portrait-ui .nav-control-group > #btnPrev,
    body.mobile-portrait-ui .nav-control-group > #btnNext,
    body.mobile-portrait-ui .nav-control-group > #btnReset,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnPrev,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnNext,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnReset {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    body.mobile-portrait-ui #btnPrev svg,
    body.mobile-portrait-ui #btnNext svg,
    body.fullscreen-active.mobile-portrait-ui #btnPrev svg,
    body.fullscreen-active.mobile-portrait-ui #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      color: var(--gold) !important;
    }

    body.mobile-portrait-ui #btnPrev svg rect,
    body.mobile-portrait-ui #btnNext svg rect,
    body.fullscreen-active.mobile-portrait-ui #btnPrev svg rect,
    body.fullscreen-active.mobile-portrait-ui #btnNext svg rect {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 4 !important;
    }

    body.mobile-portrait-ui #btnPrev svg path,
    body.mobile-portrait-ui #btnNext svg path,
    body.fullscreen-active.mobile-portrait-ui #btnPrev svg path,
    body.fullscreen-active.mobile-portrait-ui #btnNext svg path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    body.mobile-portrait-ui #slideNumber,
    body.fullscreen-active.mobile-portrait-ui #slideNumber {
      position: relative !important;
      display: block !important;
      width: 38px !important;
      min-width: 38px !important;
      max-width: 38px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.mobile-portrait-ui #slideNumber::before,
    body.fullscreen-active.mobile-portrait-ui #slideNumber::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 3px !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background: rgba(165, 129, 65, 0.10) !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }

    body.mobile-portrait-ui #slideCurrentButton,
    body.fullscreen-active.mobile-portrait-ui #slideCurrentButton {
      position: absolute !important;
      left: 5px !important;
      right: 5px !important;
      top: 3px !important;
      width: auto !important;
      min-width: 0 !important;
      height: 14px !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 10px !important;
      line-height: 1 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-total,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total {
      display: contents !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-slash,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-slash {
      position: absolute !important;
      left: 7px !important;
      right: 7px !important;
      top: 50% !important;
      width: auto !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      background: var(--gold) !important;
      transform: translateY(-50%) !important;
      opacity: 0.72 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-total-value,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total-value {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 3px !important;
      width: 100% !important;
      height: 14px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      font-size: 10px !important;
      line-height: 1 !important;
      opacity: 0.55 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #volumeWrap,
    body.fullscreen-active.mobile-portrait-ui #volumeWrap {
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 36px !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui #volumePanel,
    body.mobile-portrait-ui #volumeSlider,
    body.fullscreen-active.mobile-portrait-ui #volumePanel,
    body.fullscreen-active.mobile-portrait-ui #volumeSlider {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-portrait-ui .separator,
    body.fullscreen-active.mobile-portrait-ui .separator {
      width: 1px !important;
      height: 20px !important;
      margin: 0 1px !important;
      flex: 0 0 1px !important;
    }


    /* ================================================================
       UNIFIED NAV ICONS — use mobile-landscape design in every mode
       ================================================================ */
    html body #controlBar #btnPrev,
    html body #controlBar #btnNext {
      color: var(--gold) !important;
    }

    html body #controlBar #btnPrev svg,
    html body #controlBar #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      fill: none !important;
      color: var(--gold) !important;
      filter: none !important;
    }

    html body #controlBar #btnPrev svg rect,
    html body #controlBar #btnNext svg rect {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 4 !important;
    }

    html body #controlBar #btnPrev svg path,
    html body #controlBar #btnNext svg path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    /* ================================================================
       MOBILE PORTRAIT — horizontal slide fraction: 1 / 15
       ================================================================ */
    body.mobile-portrait-ui .nav-control-group,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group {
      grid-template-columns: 38px 58px 38px 38px !important;
      width: 178px !important;
      flex-basis: 178px !important;
    }

    body.mobile-portrait-ui .nav-control-group > #slideNumber,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #slideNumber {
      width: 58px !important;
      min-width: 58px !important;
      max-width: 58px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      padding: 0 5px !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui #slideNumber::before,
    body.fullscreen-active.mobile-portrait-ui #slideNumber::before {
      inset: 3px 0 !important;
      border-radius: 999px !important;
    }

    body.mobile-portrait-ui #slideCurrentButton,
    body.fullscreen-active.mobile-portrait-ui #slideCurrentButton {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      width: auto !important;
      min-width: 12px !important;
      height: 22px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-total,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      width: auto !important;
      height: 22px !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-slash,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-slash {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      width: auto !important;
      height: auto !important;
      display: inline !important;
      margin: 0 !important;
      padding: 0 !important;
      color: var(--gold) !important;
      background: transparent !important;
      font-size: 11px !important;
      line-height: 1 !important;
      transform: none !important;
      opacity: 0.72 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-total-value,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total-value {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      width: auto !important;
      min-width: 12px !important;
      height: 22px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      opacity: 0.62 !important;
      z-index: 2 !important;
    }


    /* MOBILE — tiny live pinch-zoom percentage inside control panel */
    #mobileZoomIndicator {
      display: none !important;
      color: var(--gold) !important;
      font: 600 8px/1 Arial, sans-serif !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      text-align: center !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      pointer-events: none !important;
      opacity: 0.82 !important;
    }

    body.mobile-landscape-ui #mobileZoomIndicator,
    body.fullscreen-active.mobile-landscape-ui #mobileZoomIndicator {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 32px !important;
      min-width: 32px !important;
      max-width: 32px !important;
      height: 16px !important;
      min-height: 16px !important;
      max-height: 16px !important;
      flex: 0 0 16px !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.mobile-portrait-ui #mobileZoomIndicator,
    body.fullscreen-active.mobile-portrait-ui #mobileZoomIndicator {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 28px !important;
      min-width: 28px !important;
      max-width: 28px !important;
      height: 18px !important;
      min-height: 18px !important;
      max-height: 18px !important;
      flex: 0 0 28px !important;
      margin: 0 1px !important;
      padding: 0 !important;
    }

  

    /* ================================================================
       MYPROJECT UNIVERSAL PLAYER v2.0.11 — FINAL PRODUCTION OVERRIDES
       Release: 2026-07-13 16:31:34 Europe/Istanbul (UTC+03:00)
       ================================================================ */

    #mobileZoomIndicator { display: none !important; }

    html body #controlBar,
    html body.fullscreen-active #controlBar,
    html body.mobile-landscape-ui #controlBar,
    html body.mobile-portrait-ui #controlBar {
      background: transparent !important;
      background-image: none !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* Current slide number: bold text only; no gold capsule in any mode. */
    html body #slideCurrentButton,
    html body.side-controls-ui #slideCurrentButton,
    html body.fullscreen-active #slideCurrentButton,
    html body.fullscreen-active.side-controls-ui #slideCurrentButton,
    html body.desktop-unified-ui #slideCurrentButton,
    html body.fullscreen-active.desktop-unified-ui.side-controls-ui #slideCurrentButton,
    html body.fullscreen-active.desktop-unified-ui.side-controls-ui.side-controls-overlay #slideCurrentButton,
    html body.mobile-landscape-ui #slideCurrentButton,
    html body.mobile-portrait-ui #slideCurrentButton,
    html body.fullscreen-active.mobile-landscape-ui #slideCurrentButton,
    html body.fullscreen-active.mobile-portrait-ui #slideCurrentButton {
      color: var(--gold) !important;
      background: transparent !important;
      background-image: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      text-shadow: none !important;
      filter: none !important;
      font-weight: 700 !important;
      opacity: 1 !important;
    }

    /* Approved filled Geri / İleri icons in theme gold. */
    html body #controlBar #btnPrev,
    html body #controlBar #btnNext { color: var(--gold) !important; }

    html body #controlBar #btnPrev svg,
    html body #controlBar #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      color: var(--gold) !important;
      fill: currentColor !important;
      stroke: none !important;
      filter: none !important;
    }

    html body #controlBar #btnPrev svg path,
    html body #controlBar #btnNext svg path {
      fill: currentColor !important;
      stroke: none !important;
      stroke-width: 0 !important;
    }

    /* Mobile landscape vertical progress rail remains visible. */
    html body.mobile-landscape-ui.side-controls-ui #presentationProgress,
    html body.fullscreen-active.mobile-landscape-ui.side-controls-ui #presentationProgress {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
    }
    html body.mobile-landscape-ui.side-controls-ui #presentationProgressFill,
    html body.fullscreen-active.mobile-landscape-ui.side-controls-ui #presentationProgressFill {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    html body.mobile-landscape-ui.side-controls-ui #presentationProgressThumb,
    html body.mobile-landscape-ui.side-controls-ui #presentationProgressPreview,
    html body.fullscreen-active.mobile-landscape-ui.side-controls-ui #presentationProgressThumb,
    html body.fullscreen-active.mobile-landscape-ui.side-controls-ui #presentationProgressPreview {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* Mobile portrait fraction is centered on one horizontal line. */
    html body.mobile-portrait-ui #slideNumber,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      padding: 0 5px !important;
    }
    html body.mobile-portrait-ui #slideNumber #slideCurrentButton,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber #slideCurrentButton {
      position: relative !important;
      left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      width: auto !important; min-width: 12px !important; max-width: none !important;
      height: 22px !important; min-height: 22px !important; max-height: 22px !important;
      flex: 0 0 auto !important;
      display: inline-flex !important;
      align-items: center !important; justify-content: center !important; align-self: center !important;
      margin: 0 !important; padding: 0 !important;
      font-size: 11px !important; line-height: 22px !important; vertical-align: middle !important;
    }
    html body.mobile-portrait-ui #slideNumber .slide-total,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important; justify-content: center !important; align-self: center !important;
      gap: 4px !important; width: auto !important;
      height: 22px !important; min-height: 22px !important; max-height: 22px !important;
      flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important;
      line-height: 22px !important; vertical-align: middle !important;
    }
    html body.mobile-portrait-ui #slideNumber .slide-slash,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-slash,
    html body.mobile-portrait-ui #slideNumber .slide-total-value,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total-value {
      position: relative !important;
      left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      width: auto !important; min-width: 0 !important;
      height: 22px !important; min-height: 22px !important; max-height: 22px !important;
      display: inline-flex !important;
      align-items: center !important; justify-content: center !important; align-self: center !important;
      margin: 0 !important; padding: 0 !important;
      font-size: 11px !important; line-height: 22px !important;
      vertical-align: middle !important; transform: none !important;
    }
    html body.mobile-portrait-ui #slideNumber .slide-slash,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-slash {
      color: var(--gold) !important;
      background: transparent !important;
      opacity: 0.72 !important;
    }

    /* Mobile portrait thumbnail panel compact exact width. */
    html body.mobile-portrait-ui #thumbPanel,
    html body.fullscreen-active.mobile-portrait-ui #thumbPanel {
      width: 114px !important; min-width: 114px !important; max-width: 114px !important;
    }
    html body.mobile-portrait-ui #thumbList,
    html body.fullscreen-active.mobile-portrait-ui #thumbList {
      box-sizing: border-box !important;
      width: 100% !important; min-width: 0 !important; max-width: 100% !important;
      padding-left: 6px !important; padding-right: 10px !important;
      overflow-x: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important;
    }
    html body.mobile-portrait-ui #thumbList::-webkit-scrollbar,
    html body.fullscreen-active.mobile-portrait-ui #thumbList::-webkit-scrollbar {
      width: 0 !important; height: 0 !important; display: none !important;
    }
    html body.mobile-portrait-ui .thumb-item,
    html body.fullscreen-active.mobile-portrait-ui .thumb-item {
      box-sizing: border-box !important;
      width: 97px !important; min-width: 97px !important; max-width: 97px !important;
      grid-template-columns: 69px 13px !important; column-gap: 4px !important;
      justify-content: start !important;
      padding-left: 5px !important; padding-right: 4px !important; overflow: hidden !important;
    }
    html body.mobile-portrait-ui .thumb-preview,
    html body.fullscreen-active.mobile-portrait-ui .thumb-preview {
      width: 69px !important; min-width: 69px !important; max-width: 69px !important;
    }
    html body.mobile-portrait-ui .thumb-meta,
    html body.mobile-portrait-ui .thumb-number,
    html body.fullscreen-active.mobile-portrait-ui .thumb-meta,
    html body.fullscreen-active.mobile-portrait-ui .thumb-number {
      box-sizing: border-box !important;
      width: 13px !important; min-width: 13px !important; max-width: 13px !important;
      justify-self: stretch !important; overflow: hidden !important;
      text-align: right !important; white-space: nowrap !important;
    }

    /* Persistent mobile portrait rotate hint: no card, no scene blur. */
    #rotateDeviceHint {
      position: fixed !important;
      left: 50% !important;
      top: var(--rotate-hint-top, 68%) !important;
      bottom: auto !important;
      z-index: 2147483646 !important;
      width: clamp(76px, 20vw, 94px) !important;
      height: clamp(76px, 20vw, 94px) !important;
      display: none !important;
      align-items: center !important; justify-content: center !important;
      margin: 0 !important; padding: 0 !important;
      transform: translateX(-50%) !important;
      background: transparent !important;
      border: 0 !important; border-radius: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      pointer-events: none !important;
      color: var(--gold) !important;
      opacity: 1 !important;
    }
    body.show-rotate-device-hint #rotateDeviceHint { display: flex !important; }
    #rotateDeviceHintGlyph {
      width: 100% !important; height: 100% !important;
      display: block !important; overflow: visible !important;
      color: var(--gold) !important; fill: currentColor !important;
      filter: none !important;
      transform-box: fill-box !important; transform-origin: center center !important;
    }
    #rotateDeviceHintGlyph path:not(.rotate-stroke) {
      fill: currentColor !important; stroke: none !important; filter: none !important;
    }
    #rotateDeviceHintGlyph path.rotate-stroke {
      fill: none !important; stroke: currentColor !important;
      stroke-linecap: round !important; stroke-linejoin: round !important;
      stroke-width: 8 !important; filter: none !important;
    }
    body.show-rotate-device-hint #rotateDeviceHintGlyph {
      animation: rotateDeviceHintQuarter 2s ease-in-out infinite !important;
    }
    @keyframes rotateDeviceHintQuarter {
      0%, 14% { transform: rotate(0deg); }
      72%, 100% { transform: rotate(-90deg); }
    }

    /* Current slide number: the gold capsule, in every mode.
       Specificity is the whole point of this block. Two rules have to be beaten:
       the "no gold capsule in any mode" reset (html body #slideCurrentButton,
       weight 1-1-2) and the side-controls overlay rule (body.side-controls-ui
       .side-controls-overlay #slideNumber .slide-current-button, weight 1-3-1),
       which is what was still winning in the mobile modes. Naming both ids —
       #slideNumber #slideCurrentButton — puts this at 2-x-2, so it outranks
       every earlier rule regardless of how many classes they stack.
       Only paint is set here. Geometry stays with the per-mode rules above, so
       each viewport keeps the size and position it was tuned for. */
    html body #slideNumber #slideCurrentButton,
    html body.desktop-unified-ui #slideNumber #slideCurrentButton,
    html body.mobile-landscape-ui #slideNumber #slideCurrentButton,
    html body.mobile-portrait-ui #slideNumber #slideCurrentButton,
    html body.fullscreen-active #slideNumber #slideCurrentButton,
    html body.fullscreen-active.desktop-unified-ui #slideNumber #slideCurrentButton,
    html body.fullscreen-active.mobile-landscape-ui #slideNumber #slideCurrentButton,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber #slideCurrentButton {
      border-radius: 999px !important;
      color: #171717 !important;
      background: linear-gradient(180deg, #f0d38b 0%, #c99d43 100%) !important;
      background-image: linear-gradient(180deg, #f0d38b 0%, #c99d43 100%) !important;
      border: 1px solid rgba(255, 232, 168, 0.90) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        0 0 5px rgba(232, 190, 92, 0.70) !important;
      text-shadow: none !important;
      filter: none !important;
      font-weight: 700 !important;
      opacity: 1 !important;
    }

    /* The narrow modes size the number to the glyph, which leaves the capsule
       too tight to read as a pill. A little inline padding and a floor on the
       width fix that without touching the tuned vertical placement. */
    html body.mobile-landscape-ui #slideNumber #slideCurrentButton,
    html body.fullscreen-active.mobile-landscape-ui #slideNumber #slideCurrentButton {
      left: 3px !important;
      right: 3px !important;
      width: auto !important;
      min-width: 22px !important;
      max-width: none !important;
      padding: 0 4px !important;
    }

    html body.mobile-portrait-ui #slideNumber #slideCurrentButton,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber #slideCurrentButton {
      width: auto !important;
      min-width: 22px !important;
      max-width: none !important;
      padding: 0 4px !important;
    }

    /* ================================================================
       APPROVED MOBILE-LANDSCAPE CONTROL COLUMN
       Design source: presenter-mobile-lanscape.svg (844 x 390 artboard).

       Reference-space system:
         --mls = one Illustrator unit in CSS px.
       The unit is PUBLISHED BY JS (fitPresentation) as a pixel custom
       property derived from getViewportSize().vh — the smallest of the
       Player container, layout and visual viewport heights, i.e. the
       actually visible Player box. It is NOT derived from 100vh here:
       on real mobile browsers 100vh tracks the largest viewport rather
       than the visible one, and a CSS-side scale diverges from the
       JS-side rail/bar scale (stack overflow, Fullscreen off-screen).
       fitPresentation re-publishes --mls on resize, orientationchange
       and visualViewport resize.

       Buttons keep a 38u x 38u hit box (u = reference unit) centered on
       the icon; the VISIBLE icon ink sizes follow the SVG artwork:
         thumbs      ink 25.286u tall
         separator   1.3u, center 64.194
         prev        ink 27.19u tall, center 103.125
         slide no.   47.567u tall, top 146.343 (27.273u wide)
         next        ink 27.183u tall, center 237.124
         reset       ink 23.86u tall, center 287.331
         separator   1.3u, center 324.597
         volume      ink 26.495u tall, center 363.180 — bottom-most
                     control; ink bottom 376.428 = 390 - 13.572
       Vertical tops come from the deterministic distribution documented at
       the per-item rules below; svg element heights compensate each icon's
       internal viewBox padding so the rendered ink equals the SVG sizes.
       svg element heights compensate each icon's internal viewBox
       padding so the rendered ink equals the SVG sizes above.

       Scope: body.mobile-landscape-ui only (the class survives
       fullscreen, so no separate fullscreen selectors are needed).
       Portrait / tablet / desktop rules are untouched.
       ================================================================ */

    /* Bar box: a right-anchored positioning strip spanning the viewport
       height (left/top/height come from fitPresentation). */
    html body.mobile-landscape-ui.side-controls-ui #controlBar {
      display: block !important;
      width: calc(var(--mls) * 56) !important;
      padding: 0 !important;
      gap: 0 !important;
      border-radius: 0 !important;
      overflow: visible !important;
    }

    /* The nav subgroup must not add its own grid; its children are placed
       directly on the reference grid of the bar. */
    html body.mobile-landscape-ui.side-controls-ui .nav-control-group {
      display: contents !important;
    }

    /* Common item placement: centered on the column axis, top from the
       reference space. The nav-group variant carries #controlBar so it
       outranks the ID-level position:relative rules on #btnPrev/#btnNext/
       #btnReset/#slideNumber. */
    html body.mobile-landscape-ui.side-controls-ui #controlBar > *,
    html body.mobile-landscape-ui.side-controls-ui #controlBar .nav-control-group > * {
      position: absolute !important;
      left: 50% !important;
      top: 0 !important;
      transform: translateX(-50%) !important;
      margin: 0 !important;
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar .ctrl-btn {
      width: calc(var(--mls) * 38) !important;
      min-width: 0 !important;
      max-width: none !important;
      height: calc(var(--mls) * 38) !important;
      min-height: 0 !important;
      max-height: none !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: visible !important;
    }

    /* Vertical reference positions (units) — DETERMINISTIC DISTRIBUTION.
       The final approved design has eight items (fullscreen and the
       separator below volume removed); the stack fills the visible height
       with balanced breathing, Volume/Mute being the bottom-most control:
         insets      13.572u top and bottom (the SVG's own breathing value)
         item sum    180.181u (icon inks + 47.567u slide number + 2 x 1.3u)
         free space  390 - 2*13.572 - 180.181 = 182.675u over 7 gaps
         gap weights x1 standard, x1.2 around the slide-number component
                     (preserves the reference design's rhythm)
         unit gap    182.675 / 7.4 = 24.686u; sn-adjacent 29.623u
       Everything stays in reference units, so the published --mls scale
       redistributes the stack proportionally at every visible height and
       rebalances on every fit (resize / orientationchange / vv resize). */
    html body.mobile-landscape-ui.side-controls-ui #controlBar #btnThumbs {
      top: calc(var(--mls) * 7.215) !important;   /* ink top 13.572 = inset */
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar > .separator {
      display: block !important; /* beats the legacy mobile display:none on #fullscreenSeparator */
      width: calc(var(--mls) * 26.5) !important;
      height: calc(var(--mls) * 1.3) !important;
      border-radius: 999px !important;
      background: rgba(165, 129, 65, 0.62) !important;
      box-shadow: none !important;
      margin: 0 !important;
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar > span.separator:nth-of-type(1) {
      top: calc(var(--mls) * 63.544) !important;  /* center 64.194 */
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar #btnPrev {
      top: calc(var(--mls) * 84.125) !important;  /* ink center 103.125 */
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar #btnNext {
      top: calc(var(--mls) * 218.124) !important; /* ink center 237.124 */
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar #btnReset {
      top: calc(var(--mls) * 268.331) !important; /* ink center 287.331 */
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar #volumeSeparator {
      top: calc(var(--mls) * 323.947) !important; /* center 324.597 */
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar #volumeWrap {
      top: calc(var(--mls) * 344.18) !important;  /* ink center 363.180; ink bottom 376.428 = 390 - inset */
      width: calc(var(--mls) * 38) !important;
      min-width: 0 !important;
      max-width: none !important;
      height: calc(var(--mls) * 38) !important;
      min-height: 0 !important;
      max-height: none !important;
      flex: 0 0 auto !important;
      display: block !important;
      padding: 0 !important;
      background: transparent !important;
    }

    html body.mobile-landscape-ui.side-controls-ui #volumeWrap > #btnMute {
      position: static !important;
      order: 0 !important;
      margin: 0 !important;
      flex: none !important;
      width: 100% !important;
      height: 100% !important;
    }

    /* FINAL approved design: mobile landscape exposes NO fullscreen control
       (the BUTTON is removed) and NO separator below Volume/Mute —
       Volume is the bottom-most control of the stack. Desktop and every
       other classification keep the fullscreen control and separator. */
    html body.mobile-landscape-ui.side-controls-ui #controlBar #btnFullscreen,
    html body.mobile-landscape-ui.side-controls-ui #controlBar #fullscreenSeparator {
      display: none !important;
    }

    /* ---- Icon visible sizes (element heights compensate viewBox padding) ---- */
    html body.mobile-landscape-ui.side-controls-ui #btnThumbs svg {
      width: auto !important;
      height: calc(var(--mls) * 33.715) !important; /* ink 25.286u of 16-unit box (12/16) */
    }

    html body.mobile-landscape-ui.side-controls-ui #controlBar #btnPrev svg,
    html body.mobile-landscape-ui.side-controls-ui #controlBar #btnNext svg {
      width: auto !important;
      height: calc(var(--mls) * 31.074) !important; /* ink 27.19u of 800-unit box (700/800 ink) */
    }

    html body.mobile-landscape-ui.side-controls-ui #btnReset svg {
      width: auto !important;
      height: calc(var(--mls) * 40.9) !important;   /* ink 23.86u of 24-unit box (14/24) */
    }

    html body.mobile-landscape-ui.side-controls-ui #btnMute svg {
      width: auto !important;
      height: calc(var(--mls) * 37.4) !important;   /* ink 26.495u of 24-unit box (17/24) */
    }

    /* ---- Slide-number component (27.273 x 47.567u gray pill) ---- */
    html body.mobile-landscape-ui.side-controls-ui.side-controls-overlay #slideNumber {
      top: calc(var(--mls) * 146.343) !important;
      width: calc(var(--mls) * 27.273) !important;
      min-width: 0 !important;
      max-width: none !important;
      height: calc(var(--mls) * 47.567) !important;
      min-height: 0 !important;
      max-height: none !important;
      flex: 0 0 auto !important;
      display: block !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      isolation: isolate !important;
    }

    html body.mobile-landscape-ui.side-controls-ui.side-controls-overlay #slideNumber::before {
      left: 0 !important;
      right: 0 !important;
      top: 0 !important;
      bottom: 0 !important;
      z-index: -1 !important;
      border: 0 !important;
      border-radius: 999px !important;
      /* Approved SVG: outer slide-number container fill #4d4d4d at 0.65. */
      background: rgba(77, 77, 77, 0.65) !important;
      box-shadow: none !important;
    }

    /* Gold current-slide capsule: 25.682 x 11.205u, 9.723u below the box top. */
    html body.mobile-landscape-ui.side-controls-ui #slideNumber #slideCurrentButton {
      left: calc(var(--mls) * 0.795) !important;
      right: calc(var(--mls) * 0.795) !important;
      top: calc(var(--mls) * 9.723) !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: calc(var(--mls) * 11.205) !important;
      min-height: 0 !important;
      max-height: none !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: calc(var(--mls) * 9.5) !important;
      line-height: 1 !important;
      border-radius: 999px !important;
    }

    /* Divider hairline at 24.079u below the box top. */
    html body.mobile-landscape-ui.side-controls-ui #slideNumber .slide-slash {
      left: calc(var(--mls) * 3.5) !important;
      right: calc(var(--mls) * 3.5) !important;
      top: calc(var(--mls) * 24.079) !important;
      width: auto !important;
      height: calc(var(--mls) * 1.1) !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, 0.55) !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      transform: translateY(-50%) !important;
    }

    /* Total below the divider, centered at 35.823u from the box top.
       Approved SVG: same gold as the Player icons (#A58141). */
    html body.mobile-landscape-ui.side-controls-ui #slideNumber .slide-total-value {
      bottom: calc(var(--mls) * 3.744) !important;
      left: 0 !important;
      right: 0 !important;
      width: auto !important;
      min-width: 0 !important;
      height: calc(var(--mls) * 16) !important;
      min-height: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #A58141 !important;
      font-size: calc(var(--mls) * 10.75) !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
    }

    /* ---- Progress rail: live touch seeking on the approved geometry ----
       The ELEMENT is a 28u-wide invisible touch/pointer zone centered on
       the rail (fitPresentation supplies left/width/top/height); the VISIBLE
       8.89u rail is painted by ::before at the exact SVG offsets. touch
       -action none keeps the vertical drag from scrolling; pointer-events
       auto re-enables the existing seek handlers (see
       isProgressSeekingEnabled) for this layout. The hit zone's inner edge
       (23.025u from the right) stops ~2u short of the icon column's 38u
       button boxes (25.06u), so icon taps are never stolen. */
    html body.mobile-landscape-ui.side-controls-ui #presentationProgress {
      pointer-events: auto !important;
      touch-action: none !important;
      cursor: pointer !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    html body.mobile-landscape-ui.side-controls-ui #presentationProgress::before {
      content: "" !important;
      position: absolute !important;
      left: calc(var(--mls) * 9.555) !important;
      top: 0 !important;
      bottom: 0 !important;
      width: calc(var(--mls) * 8.89) !important;
      border-radius: 999px !important;
      background: rgba(165, 129, 65, 0.38) !important;
      pointer-events: none !important;
    }

    html body.mobile-landscape-ui.side-controls-ui #presentationProgressFill {
      position: absolute !important;
      left: calc(var(--mls) * 9.555) !important;
      width: calc(var(--mls) * 8.89) !important;
      top: 0 !important;
      height: var(--progress-percent, 0%) !important;
      min-height: 10px !important;
      border-radius: 999px !important;
    }