/* WInterface-only standalone shell
   Purpose: remove the surrounding page and open the preserved WInterface console directly in widescreen mode.
   No WInterface content, cards, media behavior, labels, or theme logic are changed here. */

html.winterface-standalone,
body.winterface-standalone {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050816;
}

body.winterface-standalone {
  display: block;
}

body.winterface-standalone::before,
body.winterface-standalone::after {
  content: none !important;
}

body.winterface-standalone #main-content {
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

body.winterface-standalone .parallax-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.winterface-standalone .winterface-standalone-audio {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.winterface-standalone .site-audio {
  position: static;
}

body.winterface-standalone .site-audio .sound-toggle,
body.winterface-standalone .site-audio #sound-status {
  display: none !important;
}

@media (min-width: 900px) {
  html.winterface-standalone,
  body.winterface-standalone,
  html.winterface-standalone.winterface-maximized,
  body.winterface-standalone.winterface-maximized {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface,
  body.winterface-standalone .interface-section.is-winterface-maximized {
    position: fixed;
    inset: 0;
    z-index: 10000;
    max-width: none;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: clamp(0.55rem, 1vw, 0.9rem);
    overflow: hidden;
  }
}

@media (max-width: 899px) {
  body.winterface-standalone {
    overflow: auto;
  }

  body.winterface-standalone #main-content {
    min-height: auto;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface {
    margin-block: 0;
  }
}


/* =========================
   WInterface-only locked fullscreen shell + universal sound orb
   This standalone override prevents the original site restore cycle and keeps the console in its full-window layout.
========================= */

html.winterface-standalone,
html.winterface-standalone.winterface-maximized,
body.winterface-standalone,
body.winterface-standalone.winterface-maximized {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.winterface-standalone #main-content {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body.winterface-standalone .interface-section.winterface-standalone-interface {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000;
  display: block;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(0.55rem, 1vw, 0.9rem) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.22), transparent 36%),
    radial-gradient(circle at 84% 24%, rgba(139, 92, 246, 0.24), transparent 40%),
    radial-gradient(circle at 52% 92%, rgba(236, 72, 153, 0.16), transparent 42%),
    rgba(5, 8, 22, 0.96);
}

body.winterface-standalone .interface-section.winterface-standalone-interface::before {
  content: none !important;
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-header {
  display: none !important;
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-shell {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(0.75rem, 1.05vw, 1.05rem) !important;
  border-radius: clamp(20px, 2vw, 30px);
  overflow: hidden !important;
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-status-bar {
  flex: 0 0 auto;
  margin-bottom: clamp(0.62rem, 0.9vw, 0.9rem);
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-grid {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
  align-items: stretch;
  grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1.58fr) minmax(250px, 0.82fr);
  gap: clamp(0.65rem, 0.85vw, 0.95rem);
  overflow: hidden !important;
}

body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-grid {
  grid-template-columns: minmax(210px, 0.48fr) minmax(0, 2fr);
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-rail,
body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core,
body.winterface-standalone .interface-section.winterface-standalone-interface .interface-side-panel {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-rail {
  grid-template-rows: auto minmax(0, 1fr);
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-path-list {
  min-height: 0 !important;
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core {
  justify-content: flex-start;
  overflow: hidden !important;
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-response[data-interface-response] {
  min-height: 0 !important;
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-side-panel {
  grid-template-rows: minmax(7.25rem, auto) minmax(0, 1fr) minmax(4.5rem, auto);
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-panel:not([hidden]) {
  min-height: 0 !important;
  overflow: visible;
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-showcase-frame,
body.winterface-standalone .interface-section.winterface-standalone-interface .interface-video-frame {
  max-height: min(56vh, 620px);
}

body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-actions {
  transform: translateY(-6px);
}

body.winterface-standalone .interface-maximize-button.winterface-standalone-sound-toggle {
  display: inline-grid;
  place-items: center;
  color: #bae6fd;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.65),
    0 0 22px rgba(56, 189, 248, 0.32),
    inset 0 0 16px rgba(56, 189, 248, 0.18);
}

body.winterface-standalone .interface-maximize-button.winterface-standalone-sound-toggle:hover,
body.winterface-standalone .interface-maximize-button.winterface-standalone-sound-toggle:focus-visible,
body.winterface-standalone .interface-maximize-button.winterface-standalone-sound-toggle.is-sound-on {
  transform: translateY(-1px) scale(1.03);
  color: #e0f2fe;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.85),
    0 0 28px rgba(56, 189, 248, 0.44),
    inset 0 0 22px rgba(56, 189, 248, 0.24);
}

body.winterface-standalone .winterface-standalone-sound-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.winterface-standalone .winterface-standalone-sound-icon .winterface-standalone-wave,
body.winterface-standalone .winterface-standalone-sound-icon .winterface-standalone-slash {
  fill: none;
}

body.winterface-standalone .interface-maximize-button.winterface-standalone-sound-toggle.is-sound-on .winterface-standalone-slash {
  opacity: 0;
}

body.winterface-standalone .interface-maximize-button.winterface-standalone-sound-toggle:not(.is-sound-on) .winterface-standalone-wave {
  opacity: 0.28;
}

body.winterface-standalone .interface-maximize-button.winterface-standalone-sound-toggle:not(.is-sound-on) .winterface-standalone-slash {
  opacity: 1;
}

/* =========================
   Standalone mobile forced-landscape canvas
   Purpose: keep the standalone WInterface in its widescreen layout on phones/tablets while allowing scroll when the viewport is physically too small.
========================= */

@media (max-width: 899px) {
  html.winterface-standalone,
  html.winterface-standalone.winterface-maximized,
  body.winterface-standalone,
  body.winterface-standalone.winterface-maximized {
    width: auto !important;
    height: auto !important;
    min-width: 1280px !important;
    min-height: 720px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }

  body.winterface-standalone #main-content {
    width: max(100vw, 1280px) !important;
    height: max(100dvh, 720px) !important;
    min-width: 1280px !important;
    min-height: 720px !important;
    overflow: visible !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface,
  body.winterface-standalone .interface-section.winterface-standalone-interface.is-winterface-maximized {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    width: max(100vw, 1280px) !important;
    height: max(100dvh, 720px) !important;
    min-width: 1280px !important;
    min-height: 720px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.65rem !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-shell {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-status-bar {
    flex: 0 0 auto;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-grid {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1.58fr) minmax(250px, 0.82fr) !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-grid {
    grid-template-columns: minmax(210px, 0.48fr) minmax(0, 2fr) !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-rail,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-side-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-showcase-frame,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-video-frame {
    max-height: min(52vh, 430px) !important;
  }
}

/* =========================
   Standalone phone viewport lock v2
   Purpose: prevent the original mobile responsive stack from activating on phone Chrome.
   The standalone build keeps the desktop/WF canvas intact and allows panning when the device is smaller.
========================= */

@media (max-width: 1180px) and (pointer: coarse) {
  html.winterface-standalone,
  html.winterface-standalone.winterface-maximized,
  body.winterface-standalone,
  body.winterface-standalone.winterface-maximized {
    width: 1440px !important;
    height: 820px !important;
    min-width: 1440px !important;
    min-height: 820px !important;
    max-width: none !important;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-x pan-y !important;
  }

  body.winterface-standalone #main-content {
    width: 1440px !important;
    height: 820px !important;
    min-width: 1440px !important;
    min-height: 820px !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface,
  body.winterface-standalone .interface-section.winterface-standalone-interface.is-winterface-maximized {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    width: 1440px !important;
    height: 820px !important;
    min-width: 1440px !important;
    min-height: 820px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.72rem !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0.92rem !important;
    border-radius: 30px !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-status-bar {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.92fr) minmax(190px, 0.56fr) minmax(220px, 0.62fr) minmax(290px, 0.9fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0.74rem !important;
    flex: 0 0 auto !important;
    min-height: 4.35rem !important;
    margin-bottom: 0.82rem !important;
    padding: 0.82rem 1rem !important;
    overflow: visible !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-status-bar > *,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-status-bar > span,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-system-toggle,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-theme-selector,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-theme-toggle {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-theme-selector {
    order: initial !important;
    display: inline-flex !important;
    justify-self: stretch !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-theme-toggle,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-system-toggle,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-status-item {
    justify-content: center !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-theme-menu {
    right: 0 !important;
    left: auto !important;
    width: 22rem !important;
    transform-origin: top right !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-grid {
    display: grid !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.58fr) minmax(270px, 0.82fr) !important;
    gap: 0.9rem !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-grid {
    grid-template-columns: minmax(220px, 0.48fr) minmax(0, 2fr) !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-core {
    grid-column: auto !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-side-panel {
    display: none !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-rail,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-side-panel {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-rail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0.64rem !important;
    padding: 0.85rem !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-rail-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    min-height: 2.25rem !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-set-controls {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.36rem !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-path-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-path {
    min-height: 0 !important;
    height: auto !important;
    padding: 0.58rem 0.68rem !important;
    gap: 0.72rem !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-path span {
    width: 1.62rem !important;
    height: 1.62rem !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding: clamp(1.25rem, 2vw, 2.1rem) !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-command {
    flex: 0 0 auto !important;
    width: min(100%, 42rem) !important;
    margin-inline: auto !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-response[data-interface-response] {
    min-height: 0 !important;
    flex: 0 1 auto !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-panel:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-video-frame,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-showcase-frame {
    max-height: 430px !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.72rem !important;
    transform: translateY(-6px) !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-playback-status,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-toggle {
    width: auto !important;
    min-height: 2.18rem !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-side-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(7.25rem, auto) minmax(0, 1fr) minmax(4.5rem, auto) !important;
    gap: 0.9rem !important;
    min-height: 0 !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-output-card,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-output-card-soft,
  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-jump-link {
    min-height: 0 !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-maximize-button.winterface-standalone-sound-toggle {
    display: inline-grid !important;
  }
}

/* =========================
   Standalone phone scaled-canvas adjustment v3
   Purpose: use the preserved desktop/WF WInterface canvas on phone browsers, then scale that canvas to the mobile viewport instead of letting the original phone stack or an oversized adjustmented canvas clip the UI.
========================= */

@media (max-width: 1180px) and (pointer: coarse) {
  html.winterface-standalone,
  html.winterface-standalone.winterface-maximized,
  body.winterface-standalone,
  body.winterface-standalone.winterface-maximized {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-x pan-y !important;
    background: #050816 !important;
  }

  body.winterface-standalone #main-content {
    position: relative !important;
    width: var(--wi-standalone-scaled-w, 738px) !important;
    height: var(--wi-standalone-scaled-h, 415px) !important;
    min-width: var(--wi-standalone-scaled-w, 738px) !important;
    min-height: var(--wi-standalone-scaled-h, 415px) !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface,
  body.winterface-standalone .interface-section.winterface-standalone-interface.is-winterface-maximized {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--wi-standalone-canvas-w, 1366px) !important;
    height: var(--wi-standalone-canvas-h, 768px) !important;
    min-width: var(--wi-standalone-canvas-w, 1366px) !important;
    min-height: var(--wi-standalone-canvas-h, 768px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.65rem !important;
    overflow: hidden !important;
    transform: scale(var(--wi-standalone-phone-scale, 0.54)) !important;
    transform-origin: top left !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface .interface-shell {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
  }
}

/* =========================
   Standalone phone control alignment adjustment v4
   Scope: phone Chrome only. Preserve the scaled WInterface canvas while restoring the expected control alignment.
========================= */

@media (max-width: 1180px) and (pointer: coarse) {
  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-status-bar {
    grid-template-columns: minmax(250px, 0.92fr) minmax(190px, 0.56fr) minmax(180px, 0.42fr) minmax(290px, 0.9fr) !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-theme-selector {
    justify-self: end !important;
    justify-content: flex-end !important;
    width: max-content !important;
    min-width: max-content !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-status-count {
    justify-self: start !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-media-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.72rem !important;
    transform: translateY(-6px) !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-playback-status {
    justify-self: start !important;
    width: min(100%, 22rem) !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-media-mute {
    justify-self: center !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-media-toggle {
    justify-self: end !important;
    width: min(100%, 22rem) !important;
  }
}

/* =========================
   Standalone phone top status right alignment adjustment v5
   Scope: phone Chrome only. Keep the preserved desktop/WF canvas and align the Style Matrix + connected-status pills to the right edge.
========================= */

@media (max-width: 1180px) and (pointer: coarse) {
  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-status-bar {
    grid-template-columns: minmax(250px, 0.92fr) minmax(190px, 0.56fr) minmax(0, 1fr) max-content !important;
    column-gap: 0.72rem !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-theme-selector {
    justify-self: end !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-status-count {
    justify-self: end !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================
   Standalone phone status pill compact adjustment v6
   Scope: phone Chrome only. Tighten the first two top status pills without changing desktop or WInterface content.
========================= */

@media (max-width: 1180px) and (pointer: coarse) {
  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-status-bar {
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content !important;
    column-gap: 0.72rem !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-system-toggle,
  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-status-mode {
    justify-self: start !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: max-content !important;
    padding-left: 0.78rem !important;
    padding-right: 0.78rem !important;
    gap: 0.42rem !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-system-toggle span,
  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-status-mode span {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  body.winterface-standalone.winterface-standalone-phone-canvas .interface-section.winterface-standalone-interface .interface-status-mode .interface-status-orb {
    flex: 0 0 auto !important;
  }
}
/* WInterface standalone media controls: stable capsule and volume styling. */
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle {
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  background:
    linear-gradient(145deg, rgba(30, 36, 58, 0.72), rgba(10, 12, 26, 0.52)),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.085), transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(var(--style-matrix-orb-left-rgb), 0.075), transparent 50%),
    rgba(255, 255, 255, 0.032) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb), 0.038),
    0 14px 30px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(var(--style-matrix-orb-left-rgb), 0.075),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 0 26px rgba(255, 255, 255, 0.030) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-shadow: none !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked span[data-interface-media-status-text],
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked span[data-interface-media-status-text],
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle span {
  color: var(--text) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: clamp(0.62rem, 0.78vw, 0.72rem) !important;
  font-weight: 650 !important;
  letter-spacing: clamp(0.045em, 0.14vw, 0.075em) !important;
  line-height: 1 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::before,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::before,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle::before {
  background: linear-gradient(90deg, transparent, rgba(var(--style-matrix-orb-left-rgb), 0.18), rgba(var(--style-matrix-orb-right-rgb), 0.12), transparent) !important;
  opacity: 0.44 !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::after,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::after,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle::after {
  border-color: rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(var(--style-matrix-orb-left-rgb), 0.035) !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked:hover,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked:focus-visible,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked:hover,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked:focus-visible,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle:hover,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(var(--style-matrix-orb-left-rgb), 0.36) !important;
  background:
    linear-gradient(145deg, rgba(30, 36, 58, 0.72), rgba(10, 12, 26, 0.52)),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.090), transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(var(--style-matrix-orb-left-rgb), 0.105), transparent 50%),
    rgba(255, 255, 255, 0.032) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb), 0.050),
    0 16px 36px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(var(--style-matrix-orb-left-rgb), 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.062),
    inset 0 0 28px rgba(255, 255, 255, 0.035) !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status .interface-playback-dot {
  width: 0.50rem !important;
  height: 0.50rem !important;
  background: #fb7185 !important;
  box-shadow:
    0 0 14px rgba(251, 113, 133, 0.78),
    0 0 24px rgba(244, 63, 94, 0.30) !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked.interface-playback-is-playing .interface-playback-dot {
  background: #ef4444 !important;
  transform: scale(1.08) !important;
  box-shadow:
    0 0 12px rgba(239, 68, 68, 0.92),
    0 0 28px rgba(239, 68, 68, 0.46),
    0 0 42px rgba(236, 72, 153, 0.22) !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked[aria-pressed="true"]:not(.interface-playback-is-playing) .interface-playback-dot,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked[aria-pressed="true"] .interface-playback-dot {
  background: #4ade80 !important;
  box-shadow:
    0 0 16px rgba(74, 222, 128, 0.82),
    0 0 30px rgba(34, 197, 94, 0.34) !important;
}

/* WInterface standalone volume control: theme-synced orb. */
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-mute::before {
  background: radial-gradient(ellipse at center, rgba(var(--style-matrix-orb-left-rgb), 0.38), rgba(var(--style-matrix-orb-right-rgb), 0.20) 42%, transparent 72%) !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-mute-stick {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.20), transparent 22%),
    linear-gradient(180deg, rgba(var(--style-matrix-orb-left-rgb), 0.74), rgba(var(--style-matrix-orb-right-rgb), 0.36)) !important;
  border-color: rgba(var(--style-matrix-orb-left-rgb), 0.38) !important;
  box-shadow:
    inset 0 0 9px rgba(248, 250, 252, 0.08),
    0 0 17px rgba(var(--style-matrix-orb-left-rgb), 0.28) !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-mute-orb {
  border-color: rgba(var(--style-matrix-orb-left-rgb), 0.68) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.32), transparent 20%),
    radial-gradient(circle at 46% 46%, rgba(var(--style-matrix-orb-left-rgb), 0.84), rgba(var(--style-matrix-orb-right-rgb), 0.54) 48%, rgba(8, 10, 22, 0.98) 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.11),
    inset 0 -10px 18px rgba(8, 10, 22, 0.58),
    0 0 18px rgba(var(--style-matrix-orb-left-rgb), 0.46),
    0 0 36px rgba(var(--style-matrix-orb-right-rgb), 0.24) !important;
}

html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-mute:hover .interface-media-mute-orb,
html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--style-matrix-orb-right-rgb), 0.86) !important;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.13),
    inset 0 -10px 18px rgba(8, 10, 22, 0.52),
    0 0 24px rgba(var(--style-matrix-orb-left-rgb), 0.56),
    0 0 46px rgba(var(--style-matrix-orb-right-rgb), 0.28) !important;
}

@media (max-width: 1100px) and (min-width: 900px) {
  html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status span[data-interface-media-status-text],
  html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle {
    font-size: clamp(0.58rem, 0.88vw, 0.68rem) !important;
    letter-spacing: 0.035em !important;
  }
}

@media (max-width: 720px) {
  html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-playback-status span[data-interface-media-status-text],
  html body.winterface-standalone .interface-section.winterface-standalone-interface .interface-core .interface-media-actions .interface-media-toggle {
    font-size: clamp(0.62rem, 2.65vw, 0.76rem) !important;
    letter-spacing: 0.07em !important;
  }
}
/* WInterface DEV media controls: persistent theme override. */
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle {
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  background:
    linear-gradient(145deg, rgba(30, 36, 58, 0.72), rgba(10, 12, 26, 0.52)),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.085), transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(var(--style-matrix-orb-left-rgb), 0.075), transparent 50%),
    rgba(255, 255, 255, 0.032) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb), 0.038),
    0 14px 30px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(var(--style-matrix-orb-left-rgb), 0.075),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 0 26px rgba(255, 255, 255, 0.030) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-shadow: none !important;
}

html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked span[data-interface-media-status-text],
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked span[data-interface-media-status-text],
html body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle span {
  color: var(--text) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: clamp(0.62rem, 0.78vw, 0.72rem) !important;
  font-weight: 650 !important;
  letter-spacing: clamp(0.045em, 0.14vw, 0.075em) !important;
  line-height: 1 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::before,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::before,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle::before {
  background: linear-gradient(90deg, transparent, rgba(var(--style-matrix-orb-left-rgb), 0.18), rgba(var(--style-matrix-orb-right-rgb), 0.12), transparent) !important;
  opacity: 0.44 !important;
}

html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::after,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::after,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle::after {
  border-color: rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(var(--style-matrix-orb-left-rgb), 0.035) !important;
}

html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked:hover,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked:focus-visible,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked:hover,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked:focus-visible,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:hover,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(var(--style-matrix-orb-left-rgb), 0.36) !important;
  background:
    linear-gradient(145deg, rgba(30, 36, 58, 0.72), rgba(10, 12, 26, 0.52)),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.090), transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(var(--style-matrix-orb-left-rgb), 0.105), transparent 50%),
    rgba(255, 255, 255, 0.032) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb), 0.050),
    0 16px 36px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(var(--style-matrix-orb-left-rgb), 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.062),
    inset 0 0 28px rgba(255, 255, 255, 0.035) !important;
}

html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status .interface-playback-dot {
  width: 0.50rem !important;
  height: 0.50rem !important;
  background: #fb7185 !important;
  box-shadow:
    0 0 14px rgba(251, 113, 133, 0.78),
    0 0 24px rgba(244, 63, 94, 0.30) !important;
}

html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked.interface-playback-is-playing .interface-playback-dot {
  background: #ef4444 !important;
  transform: scale(1.08) !important;
  box-shadow:
    0 0 12px rgba(239, 68, 68, 0.92),
    0 0 28px rgba(239, 68, 68, 0.46),
    0 0 42px rgba(236, 72, 153, 0.22) !important;
}

html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked[aria-pressed="true"]:not(.interface-playback-is-playing) .interface-playback-dot,
html body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked[aria-pressed="true"] .interface-playback-dot {
  background: #4ade80 !important;
  box-shadow:
    0 0 16px rgba(74, 222, 128, 0.82),
    0 0 30px rgba(34, 197, 94, 0.34) !important;
}

/* WInterface DEV volume control: persistent theme override. */
html body #winterface.interface-section .interface-media-mute::before {
  background: radial-gradient(ellipse at center, rgba(var(--style-matrix-orb-left-rgb), 0.38), rgba(var(--style-matrix-orb-right-rgb), 0.20) 42%, transparent 72%) !important;
}

html body #winterface.interface-section .interface-media-mute-stick {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.20), transparent 22%),
    linear-gradient(180deg, rgba(var(--style-matrix-orb-left-rgb), 0.74), rgba(var(--style-matrix-orb-right-rgb), 0.36)) !important;
  border-color: rgba(var(--style-matrix-orb-left-rgb), 0.38) !important;
  box-shadow:
    inset 0 0 9px rgba(248, 250, 252, 0.08),
    0 0 17px rgba(var(--style-matrix-orb-left-rgb), 0.28) !important;
}

html body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--style-matrix-orb-left-rgb), 0.68) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.32), transparent 20%),
    radial-gradient(circle at 46% 46%, rgba(var(--style-matrix-orb-left-rgb), 0.84), rgba(var(--style-matrix-orb-right-rgb), 0.54) 48%, rgba(8, 10, 22, 0.98) 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.11),
    inset 0 -10px 18px rgba(8, 10, 22, 0.58),
    0 0 18px rgba(var(--style-matrix-orb-left-rgb), 0.46),
    0 0 36px rgba(var(--style-matrix-orb-right-rgb), 0.24) !important;
}

html body #winterface.interface-section .interface-media-mute:hover .interface-media-mute-orb,
html body #winterface.interface-section .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--style-matrix-orb-right-rgb), 0.86) !important;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.13),
    inset 0 -10px 18px rgba(8, 10, 22, 0.52),
    0 0 24px rgba(var(--style-matrix-orb-left-rgb), 0.56),
    0 0 46px rgba(var(--style-matrix-orb-right-rgb), 0.28) !important;
}


/* WInterface recorder orb: experimental screen-recording launcher. */
html body #winterface.interface-section .interface-recorder-toggle {
  --interface-recorder-accent: var(--wfo-active-bay-accent, var(--style-matrix-orb-left, #dc1e3a));
  --interface-recorder-accent-rgb: var(--wfo-active-bay-accent-rgb, var(--style-matrix-orb-left-rgb, 220, 30, 58));
  --interface-recorder-accent-soft-rgb: var(--style-matrix-orb-right-rgb, var(--interface-recorder-accent-rgb));
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.54rem;
  height: 1.54rem;
  margin-right: 0.36rem;
  padding: 0;
  border: 1px solid rgba(var(--interface-recorder-accent-rgb), 0.68);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.18), transparent 30%),
    rgba(8, 10, 22, 0.86);
  box-shadow:
    inset 0 0 9px rgba(255, 255, 255, 0.08),
    0 0 10px rgba(var(--interface-recorder-accent-rgb), 0.32);
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

html body #winterface.interface-section .interface-recorder-toggle:hover,
html body #winterface.interface-section .interface-recorder-toggle:focus-visible {
  transform: translateY(-1px) scale(1.08);
  border-color: rgba(var(--interface-recorder-accent-soft-rgb), 0.88);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.12),
    0 0 16px rgba(var(--interface-recorder-accent-rgb), 0.54),
    0 0 30px rgba(var(--interface-recorder-accent-soft-rgb), 0.22);
}

html body #winterface.interface-section .interface-recorder-toggle.is-recording {
  animation: interfaceRecorderPulse 1.08s ease-in-out infinite;
  border-color: rgba(var(--interface-recorder-accent-soft-rgb), 0.96);
}

html body #winterface.interface-section .interface-recorder-orb {
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 999px;
  background: var(--interface-recorder-accent);
  box-shadow: 0 0 7px rgba(var(--interface-recorder-accent-rgb), 0.70);
}

html body #winterface.interface-section .interface-recorder-toggle.is-recording .interface-recorder-orb {
  background: var(--interface-recorder-accent);
  box-shadow:
    0 0 8px rgba(var(--interface-recorder-accent-rgb), 0.95),
    0 0 18px rgba(var(--interface-recorder-accent-soft-rgb), 0.72);
}


/* Recorder orb theme accents: keep the center dot visible in muted visual skins. */
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-recorder-toggle {
  --interface-recorder-accent: #64748b;
  --interface-recorder-accent-rgb: 100, 116, 139;
  --interface-recorder-accent-soft-rgb: 203, 213, 225;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle {
  --interface-recorder-accent: #38bdf8;
  --interface-recorder-accent-rgb: 56, 189, 248;
  --interface-recorder-accent-soft-rgb: 125, 211, 252;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle .interface-recorder-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle.is-recording .interface-recorder-orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), transparent 18%),
    radial-gradient(circle at 48% 50%, rgba(125, 211, 252, 0.96), rgba(56, 189, 248, 0.90) 48%, rgba(14, 116, 144, 0.92) 78%) !important;
  border-color: rgba(186, 230, 253, 0.82) !important;
  box-shadow:
    0 0 10px rgba(125, 211, 252, 0.86),
    0 0 24px rgba(56, 189, 248, 0.48),
    0 0 40px rgba(var(--wfo-active-bay-accent-rgb), 0.18) !important;
}

@keyframes interfaceRecorderPulse {
  0%, 100% {
    box-shadow:
      inset 0 0 10px rgba(255, 255, 255, 0.12),
      0 0 16px rgba(var(--interface-recorder-accent-rgb), 0.58),
      0 0 24px rgba(var(--interface-recorder-accent-soft-rgb), 0.32);
  }
  50% {
    box-shadow:
      inset 0 0 13px rgba(255, 255, 255, 0.18),
      0 0 30px rgba(var(--interface-recorder-accent-rgb), 0.95),
      0 0 46px rgba(var(--interface-recorder-accent-soft-rgb), 0.52);
  }
}

/* WInterface recorder panel: isolated browser capture controls. */
.interface-recorder-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 5.7rem 1.35rem 1.35rem;
  background: rgba(3, 7, 18, 0.36);
  backdrop-filter: blur(8px);
}

.interface-recorder-panel-card {
  width: min(23rem, calc(100vw - 2rem));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(8, 13, 27, 0.96), rgba(13, 18, 34, 0.92));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), inset 0 0 22px rgba(255, 255, 255, 0.04);
  color: rgba(248, 250, 252, 0.94);
  padding: 1rem;
}

.interface-recorder-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.interface-recorder-panel-header strong {
  font-family: var(--display-font);
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.interface-recorder-panel p {
  margin: 0 0 0.82rem;
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.82rem;
  line-height: 1.45;
}

.interface-recorder-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.9rem;
}

.interface-recorder-tabs button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.90);
  cursor: pointer;
  padding: 0.5rem 0.62rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interface-recorder-tabs button.is-active {
  border-color: rgba(255, 84, 104, 0.58);
  background: rgba(160, 18, 38, 0.54);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(255, 45, 80, 0.20);
}

.interface-recorder-tabs button:hover,
.interface-recorder-tabs button:focus-visible {
  border-color: rgba(255, 150, 164, 0.82);
  box-shadow: 0 0 18px rgba(255, 45, 80, 0.26);
  outline: none;
}

.interface-recorder-panel label {
  display: flex;
  align-items: center;
  gap: 0.52rem;
  margin: 0.52rem 0;
  color: rgba(226, 232, 240, 0.90);
  font-size: 0.82rem;
}

.interface-recorder-panel input[type="checkbox"] {
  accent-color: #ef334f;
}

.interface-recorder-close,
.interface-recorder-actions button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.94);
  cursor: pointer;
}

.interface-recorder-close {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.1rem;
  line-height: 1;
}

.interface-recorder-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.interface-recorder-actions button {
  padding: 0.48rem 0.78rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interface-recorder-actions button[data-interface-recorder-start] {
  border-color: rgba(255, 84, 104, 0.46);
  background: rgba(160, 18, 38, 0.52);
}

.interface-recorder-close:hover,
.interface-recorder-close:focus-visible,
.interface-recorder-actions button:hover,
.interface-recorder-actions button:focus-visible {
  border-color: rgba(255, 150, 164, 0.82);
  box-shadow: 0 0 18px rgba(255, 45, 80, 0.26);
}

/* Muted WInterface state: desaturate orb color without changing behavior. */
body.winterface-offline #winterface.interface-section .interface-status-orb,
body.winterface-offline #winterface.interface-section .interface-recorder-toggle,
body.winterface-offline #winterface.interface-section .interface-set-button::before,
body.winterface-offline #winterface.interface-section .interface-playback-dot,
body.winterface-offline #winterface.interface-section .interface-media-mute-orb,
body.winterface-offline #winterface.interface-section .interface-theme-toggle::before,
body.winterface-offline #winterface.interface-section .interface-theme-toggle::after {
  filter: grayscale(1) saturate(0.14) brightness(0.82) !important;
  opacity: 0.70 !important;
}


/* WInterface Solo v4.0 expanded/snap left-rail alignment adjustment.
   Scope: standalone Expanded/Snap media view only.
   Nudges the adjustmented left rail controls and media cards left so the seventh bay orb does not crowd the right rail edge. */
@media (min-width: 900px) {
  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-rail {
    overflow-x: hidden !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-rail-header,
  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-path-list {
    transform: translateX(-0.52rem) !important;
    width: calc(100% - 0.52rem) !important;
    max-width: calc(100% - 0.52rem) !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded .interface-path {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* WInterface Solo v4.0 expanded/snap compact bay label.
   Scope: standalone Expanded/Snap media view only when the seven-orb stack is active. */
@media (min-width: 900px) {
  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header > div:first-child {
    flex: 0 0 2.85rem !important;
    width: 2.85rem !important;
    max-width: 2.85rem !important;
    min-width: 2.85rem !important;
    text-align: left !important;
    transform: translateX(0.34rem) !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-label,
  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-subtitle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    line-height: 1.05 !important;
    text-transform: none !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-label {
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: var(--interface-accent-text, var(--interface-accent, var(--cyan))) !important;
    text-shadow:
      0 0 9px rgba(var(--interface-accent-rgb, 56, 189, 248), 0.62),
      0 0 24px rgba(var(--interface-accent-rgb, 56, 189, 248), 0.22) !important;
  }

  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-subtitle {
    margin-top: 0.15rem !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: rgba(199, 210, 254, 0.76) !important;
    text-shadow: none !important;
  }
}

/* WInterface Solo v4.0 expanded/snap seven-orb header containment.
   Scope: only the compact expanded bay-label state used by the seven-orb stack. */
@media (min-width: 900px) {
  body.winterface-standalone .interface-section.winterface-standalone-interface.interface-system-media-expanded.interface-system-compact-bay-label .interface-set-controls {
    transform: translateX(-0.66rem) !important;
  }
}

/* WInterface Solo v4.0 command cursor + DW preadjustment theme-color sync.
   Keeps the blinking command-interface oval and DW:// preadjustment tied to the active Style Matrix theme color. */
html body #winterface.interface-section .interface-command-line .interface-cursor,
html body #winterface.interface-section[class*="interface-system-set-"] .interface-command-line .interface-cursor {
  background: var(--style-matrix-orb-left, var(--interface-accent, var(--cyan))) !important;
  box-shadow:
    0 0 12px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.94),
    0 0 26px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.46),
    0 0 44px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.22) !important;
}

html body #winterface.interface-section .interface-command-line .interface-command-prefix,
html body #winterface.interface-section[class*="interface-system-set-"] .interface-command-line .interface-command-prefix {
  color: var(--style-matrix-orb-left, var(--interface-accent, var(--cyan))) !important;
  text-shadow:
    0 0 10px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.82),
    0 0 22px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.34) !important;
}

/* WInterface Solo v4.0 muted status accent tone-down.
   Scope: muted WInterface only. Keeps active theme hue, reduces brightness/glow for right-panel status accents. */
body.winterface-offline #winterface.interface-section .interface-side-panel .interface-output-label,
body.winterface-offline #winterface.interface-section[class*="interface-system-set-"] .interface-side-panel .interface-output-label {
  color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.50) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 0 8px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.22) !important;
}

body.winterface-offline #winterface.interface-section .interface-side-panel .interface-system-list li::before,
body.winterface-offline #winterface.interface-section[class*="interface-system-set-"] .interface-side-panel .interface-system-list li::before {
  background: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.50) !important;
  box-shadow:
    0 0 7px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.28),
    0 0 14px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.12) !important;
}

/* === WInterface Solo v4.0 DEV Expanded Orb Row Clean Targeted Adjustment ===
   Scope: DEV page only, Expanded/Snap media view only.
   Keeps the root Solo page unchanged and shifts only the adjustmented seven-orb stack left. */
@media (min-width: 900px) {
  body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label:not(.is-winterface-maximized) .interface-rail-header .interface-set-controls {
    transform: translateX(-1.35rem) !important;
  }
}
/* === WInterface Solo v4.0 DEV Expanded Orb Row Clean Targeted Adjustment === */


/* === WInterface Solo v4.0 DEV WF Fullscreen Expanded Header Match ===
   Scope: DEV page only, WF fullscreen + Expanded/Snap media view only.
   Matches the regular Solo expanded header: BAY # on one line, subtitle below, and contained seven-orb row. */
@media (min-width: 900px) {
  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-rail-header > div:first-child {
    flex: 0 0 3.95rem !important;
    width: 3.95rem !important;
    min-width: 3.95rem !important;
    max-width: 3.95rem !important;
    transform: none !important;
  }

  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-rail-label,
  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-rail-subtitle {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-rail-label {
    font-size: 0.60rem !important;
    line-height: 1.05 !important;
  }

  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-rail-subtitle {
    margin-top: 0.16rem !important;
    font-size: 0.66rem !important;
    line-height: 1.08 !important;
  }

  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-rail-header .interface-set-controls {
    position: relative !important;
    left: -2.30rem !important;
    transform: none !important;
  }
}
/* === WInterface Solo v4.0 DEV WF Fullscreen Expanded Header Match === */

/* === WInterface Solo v4.0 DEV WF Fullscreen Expanded Menu Containment Adjustment ===
   Scope: DEV page only, WF fullscreen + Expanded/Snap media view only.
   Keeps the menu cards inside the DEV fullscreen rail without changing the root Solo page. */
@media (min-width: 900px) {
  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-path-list {
    transform: translateX(-0.70rem) !important;
    width: calc(100% - 1.72rem) !important;
    max-width: calc(100% - 1.72rem) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-path {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-path:hover,
  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-path:focus-visible,
  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-path.is-active {
    transform: translateX(0) !important;
  }
}
/* === WInterface Solo v4.0 DEV WF Fullscreen Expanded Menu Containment Adjustment === */

/* === WInterface v4.0 Right Panel Live Systems Flex Dock ===
   Scope: right-side Live Systems card only.
   Keeps the heading/list top-aligned and lets the Bay / Back / Next controller
   settle at the bottom of the same card when extra vertical space exists.
   Includes standalone live and DEV page scopes. */
body.winterface-standalone #winterface .interface-side-panel .interface-output-card-soft,
body.winterface-dev-build #winterface .interface-side-panel .interface-output-card-soft {
  display: flex !important;
  flex-direction: column !important;
}

body.winterface-standalone #winterface .interface-side-panel .interface-output-card-soft .interface-output-label,
body.winterface-standalone #winterface .interface-side-panel .interface-output-card-soft .interface-system-list,
body.winterface-dev-build #winterface .interface-side-panel .interface-output-card-soft .interface-output-label,
body.winterface-dev-build #winterface .interface-side-panel .interface-output-card-soft .interface-system-list {
  flex: 0 0 auto !important;
}

body.winterface-standalone #winterface .interface-side-panel .interface-output-card-soft .interface-signal-pulse,
body.winterface-dev-build #winterface .interface-side-panel .interface-output-card-soft .interface-signal-pulse {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}
/* === WInterface v4.0 Right Panel Live Systems Flex Dock === */

/* === WInterface v4.0 Tablet Fullscreen Expanded Card Nav Centering ===
   Scope: tablet/fullscreen-sized Expanded/Snap WInterface only.
   Shifts only the left rail card navigation stack slightly right so the cards sit
   more centered in the rail without resizing or touching orb/header controls. */
@media (min-width: 900px) and (max-width: 1700px) and (min-height: 760px) {
  body.winterface-standalone #winterface.interface-section.winterface-standalone-interface.interface-system-media-expanded.is-winterface-maximized .interface-path-list {
    transform: translateX(0.18rem) !important;
  }

  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-path-list {
    transform: translateX(0.18rem) !important;
  }
}
/* === WInterface v4.0 Tablet Fullscreen Expanded Card Nav Centering === */

/* === WInterface v4.0 Command Bar Hide Toggle ===
   Scope: top-left WInterface status pill and command-row collapse only.
   Keeps the existing visual-style orb as its own button, adds a matching
   command-bar orb inside the right side of the same WInterface status oval,
   and hides/restores the command bar without disabling command logic. */
body.winterface-standalone #winterface .interface-system-status-pill,
body.winterface-dev-build #winterface .interface-system-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.56rem !important;
  padding: 0.50rem 0.88rem !important;
  cursor: default !important;
  overflow: hidden !important;
}

body.winterface-standalone #winterface .interface-system-status-pill > [data-interface-system-status-text],
body.winterface-dev-build #winterface .interface-system-status-pill > [data-interface-system-status-text] {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

body.winterface-standalone #winterface .interface-system-orb-toggle,
body.winterface-dev-build #winterface .interface-system-orb-toggle,
body.winterface-standalone #winterface .interface-commandbar-toggle,
body.winterface-dev-build #winterface .interface-commandbar-toggle {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 1.35rem !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  min-width: 1.35rem !important;
  min-height: 1.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body.winterface-standalone #winterface .interface-system-orb-toggle i,
body.winterface-dev-build #winterface .interface-system-orb-toggle i,
body.winterface-standalone #winterface .interface-commandbar-toggle i,
body.winterface-dev-build #winterface .interface-commandbar-toggle i {
  position: relative !important;
  display: block !important;
  width: 0.62rem !important;
  height: 0.62rem !important;
  border-radius: 50% !important;
}

body.winterface-standalone #winterface .interface-commandbar-toggle i,
body.winterface-dev-build #winterface .interface-commandbar-toggle i {
  background: var(--style-matrix-orb-left, var(--interface-accent, var(--cyan))) !important;
  box-shadow:
    0 0 10px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.90),
    0 0 24px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.48),
    0 0 42px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.22) !important;
}

body.winterface-standalone #winterface .interface-commandbar-toggle i::after,
body.winterface-dev-build #winterface .interface-commandbar-toggle i::after {
  background: radial-gradient(circle, rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.30), rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.12) 38%, transparent 70%) !important;
}

body.winterface-standalone #winterface .interface-system-orb-toggle:hover,
body.winterface-standalone #winterface .interface-system-orb-toggle:focus-visible,
body.winterface-standalone #winterface .interface-commandbar-toggle:hover,
body.winterface-standalone #winterface .interface-commandbar-toggle:focus-visible,
body.winterface-dev-build #winterface .interface-system-orb-toggle:hover,
body.winterface-dev-build #winterface .interface-system-orb-toggle:focus-visible,
body.winterface-dev-build #winterface .interface-commandbar-toggle:hover,
body.winterface-dev-build #winterface .interface-commandbar-toggle:focus-visible {
  outline: none !important;
  transform: translateY(-1px) !important;
}

body.winterface-commandbar-hidden #winterface .interface-commandbar-toggle i {
  background: #ef4444 !important;
  box-shadow:
    0 0 10px rgba(239, 68, 68, 0.88),
    0 0 22px rgba(239, 68, 68, 0.46),
    0 0 38px rgba(239, 68, 68, 0.22) !important;
}

body.winterface-commandbar-hidden #winterface .interface-commandbar-toggle i::after {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.28), rgba(239, 68, 68, 0.10) 38%, transparent 70%) !important;
}

body.winterface-commandbar-hidden #winterface .interface-command-line {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.winterface-commandbar-hidden #winterface.interface-system-is-media .interface-media-frame-shell,
body.winterface-commandbar-hidden #winterface.interface-system-media-expanded .interface-media-frame-shell {
  aspect-ratio: 16 / 9 !important;
  overflow: visible !important;
}

body.winterface-commandbar-hidden #winterface.interface-system-is-media .interface-showcase-frame:not([hidden]),
body.winterface-commandbar-hidden #winterface.interface-system-is-media .interface-video-frame:not([hidden]),
body.winterface-commandbar-hidden #winterface.interface-system-media-expanded .interface-showcase-frame:not([hidden]),
body.winterface-commandbar-hidden #winterface.interface-system-media-expanded .interface-video-frame:not([hidden]) {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: calc(100% + clamp(2.15rem, 2.6vw, 3.05rem)) !important;
  aspect-ratio: auto !important;
  max-height: none !important;
}

@media (min-width: 900px) {
  body.winterface-commandbar-hidden #winterface.interface-system-media-expanded.is-winterface-maximized .interface-media-frame-shell {
    aspect-ratio: 16 / 9 !important;
    max-height: min(56vh, 620px) !important;
    overflow: visible !important;
  }

  body.winterface-commandbar-hidden #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]) {
    height: calc(100% + clamp(3.45rem, 3.8vw, 4.45rem)) !important;
    max-height: none !important;
  }
}
/* === WInterface v4.0 Command Bar Hide Toggle === */
/* === WInterface v4.0 Command Bar Hidden Expanded Width Fill ===
   Scope: command bar hidden + Expanded/Snap fullscreen only.
   Keeps the player left/bottom anchored and extends only its width to the right
   so the hidden-command-bar expanded view fills the center container cleanly. */
@media (min-width: 900px) {
  body.winterface-commandbar-hidden #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]) {
    inset: auto auto 0 0 !important;
    width: calc(100% + clamp(12rem, 22vw, 24rem)) !important;
    max-width: none !important;
  }
}
/* === WInterface v4.0 Command Bar Hidden Expanded Width Fill === */


/* === WInterface v4.0 F11 Hidden Command-Bar Media Containment ===
   Scope: desktop Chrome/F11-sized WInterface with command bar hidden.
   Keeps the existing upward player-growth logic, but prevents the media frame
   from extending past the middle container horizontally. */
@media (min-width: 1200px) and (min-height: 700px) {
  body.winterface-commandbar-hidden #winterface.is-winterface-maximized.interface-system-is-media .interface-media-frame-shell,
  body.winterface-commandbar-hidden #winterface.is-winterface-maximized.interface-system-media-expanded .interface-media-frame-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.winterface-commandbar-hidden #winterface.is-winterface-maximized.interface-system-is-media .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden #winterface.is-winterface-maximized.interface-system-is-media .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden #winterface.is-winterface-maximized.interface-system-media-expanded .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden #winterface.is-winterface-maximized.interface-system-media-expanded .interface-video-frame:not([hidden]) {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface v4.0 F11 Hidden Command-Bar Media Containment === */

/* === WInterface v4.0 F11 Expanded Card Nav Micro Shift ===
   Scope: desktop Chrome/F11-sized Expanded/Snap WInterface only.
   Shifts only the 01-06 card stack a little further left inside the existing left rail
   to prevent right-edge overflow without changing the rail, orb row, or media layout. */
@media (min-width: 1200px) and (min-height: 700px) {
  body.winterface-standalone #winterface.interface-section.winterface-standalone-interface.interface-system-media-expanded.is-winterface-maximized .interface-path-list,
  body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label.is-winterface-maximized .interface-path-list {
    transform: translateX(-0.52rem) !important;
  }
}
/* === WInterface v4.0 F11 Expanded Card Nav Micro Shift === */

/* === WInterface v4.0 Solid Black Page Background ===
   Scope: standalone WInterface page shell only.
   Sets the non-WInterface background behind the player to solid black while
   leaving WInterface panels, media controls, themes, content, and layout untouched. */
html,
body.winterface-standalone,
body.winterface-dev-build {
  background: #000 !important;
  background-color: #000 !important;
}

body.winterface-standalone::before,
body.winterface-dev-build::before,
body.winterface-standalone .parallax-background,
body.winterface-dev-build .parallax-background {
  display: none !important;
}
/* === WInterface v4.0 Solid Black Page Background === */

/* === WInterface v4.0 Solid Black Page Background Blue Chrome Slot Sync ===
   Reinforces the page-shell-only black background after Style Matrix theme swaps,
   including the Blue Chrome slot mapped to theme3. Does not change WInterface
   panels, media layout, cards, controls, or content. */
html.winterface-standalone,
html.winterface-maximized,
html[data-winterface-theme="code-green"],
html[data-winterface-theme="blue-chrome"],
html[data-winterface-theme="crimson-red"],
html[data-winterface-theme="default"],
html[data-winterface-theme="code-green"] body.winterface-standalone,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone,
html[data-winterface-theme="crimson-red"] body.winterface-standalone,
html[data-winterface-theme="default"] body.winterface-standalone,
body.winterface-standalone,
body.winterface-dev-build,
body.winterface-standalone #main-content,
body.winterface-dev-build #main-content {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
}

html[data-winterface-theme="code-green"] body.winterface-standalone::before,
html[data-winterface-theme="code-green"] body.winterface-standalone::after,
html[data-winterface-theme="code-green"] body.winterface-dev-build::before,
html[data-winterface-theme="code-green"] body.winterface-dev-build::after,
html[data-winterface-theme="code-green"] body.winterface-standalone .parallax-background,
html[data-winterface-theme="code-green"] body.winterface-dev-build .parallax-background,
body.winterface-standalone::before,
body.winterface-standalone::after,
body.winterface-dev-build::before,
body.winterface-dev-build::after,
body.winterface-standalone .parallax-background,
body.winterface-dev-build .parallax-background,
body.winterface-standalone .parallax-layer,
body.winterface-dev-build .parallax-layer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
}
/* === WInterface v4.0 Solid Black Page Background Code Green Sync === */

/* === WInterface v4.0 Main Index Code Green Edge Background Adjustment ===
   Scope: main standalone index page shell only.
   Removes the themed blue/purple edge wash around the WInterface shell in Code Green
   by forcing the adjustmented outer WInterface section background to solid black. */
body.winterface-standalone .interface-section.winterface-standalone-interface {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
}
/* === WInterface v4.0 Main Index Code Green Edge Background Adjustment === */

/* === WInterface v4.0 Tablet Hide Controls Experiment ===
   Scope: standalone tablet/large-widescreen standard view only.
   Adds a small glass control below the media row that can collapse the middle
   media controls and let the video frame stretch downward into the open gap.
   Expanded/Snap view automatically restores the normal control layout in JS. */
body.winterface-standalone #winterface .interface-media-controls-toggle,
body.winterface-dev-build #winterface .interface-media-controls-toggle {
  display: none;
  justify-self: center;
  align-items: center;
  justify-content: center;
  min-width: clamp(7.8rem, 12vw, 10.5rem);
  min-height: clamp(1.55rem, 2.1vw, 1.9rem);
  padding: 0.34rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(30, 36, 58, 0.66), rgba(10, 12, 26, 0.50)),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.075), transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(var(--style-matrix-orb-left-rgb), 0.075), transparent 50%),
    rgba(255, 255, 255, 0.030);
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb), 0.036),
    0 12px 26px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(var(--style-matrix-orb-left-rgb), 0.075),
    inset 0 0 0 1px rgba(255, 255, 255, 0.052),
    inset 0 0 22px rgba(255, 255, 255, 0.028);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.56rem, 0.72vw, 0.66rem);
  font-weight: 650;
  letter-spacing: clamp(0.045em, 0.13vw, 0.075em);
  line-height: 1;
  text-transform: none;
  text-shadow: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-0.1rem) scale(0.985);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.winterface-standalone #winterface .interface-media-controls-toggle:hover,
body.winterface-standalone #winterface .interface-media-controls-toggle:focus-visible,
body.winterface-dev-build #winterface .interface-media-controls-toggle:hover,
body.winterface-dev-build #winterface .interface-media-controls-toggle:focus-visible {
  border-color: rgba(var(--style-matrix-orb-left-rgb), 0.36);
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb), 0.070),
    0 14px 28px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(var(--style-matrix-orb-left-rgb), 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 24px rgba(255, 255, 255, 0.034);
  transform: translateY(-1.08rem) scale(1);
}

body.winterface-standalone #winterface .interface-media-actions,
body.winterface-dev-build #winterface .interface-media-actions,
body.winterface-standalone #winterface .interface-media-frame-shell,
body.winterface-dev-build #winterface .interface-media-frame-shell,
body.winterface-standalone #winterface .interface-showcase-frame,
body.winterface-dev-build #winterface .interface-showcase-frame,
body.winterface-standalone #winterface .interface-video-frame,
body.winterface-dev-build #winterface .interface-video-frame {
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    max-height 0.30s ease,
    height 0.30s ease,
    aspect-ratio 0.30s ease;
}

@media (min-width: 900px) and (min-height: 660px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    display: inline-flex;
    opacity: 1;
    transform: translateY(-0.98rem) scale(1);
  }

  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions,
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions {
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-0.38rem) scale(0.985) !important;
  }

  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    aspect-ratio: auto !important;
    height: min(57vh, calc(100dvh - clamp(16rem, 27vh, 22rem))) !important;
    max-height: min(57vh, 35rem) !important;
    min-height: clamp(22rem, 41vh, 29rem) !important;
  }
}

@media (max-width: 899px), (max-height: 659px) {
  body.winterface-media-controls-hidden.winterface-standalone,
  body.winterface-media-controls-hidden.winterface-dev-build {
    /* State may remain briefly during resize, but the feature stays visually inert. */
  }
}
/* === WInterface v4.0 Tablet Hide Controls Experiment === */
/* === WInterface v4.0 Tablet Hide Controls + Hidden Command Bar Correction ===
   Scope: intentionally left inert after rollback.
   The command-bar-hidden player rule should remain dominant when Hide Controls
   is also active, so the media frame keeps its bottom anchor and grows upward
   exactly like normal command-bar-hidden standard view. */
/* === WInterface v4.0 Tablet Hide Controls + Hidden Command Bar Correction === */


/* === WInterface v4.0 Tablet Hide Controls + Hidden Command Bar Upfill Match ===
   Scope: tablet/large-widescreen standard media view only.
   When Hide Controls is active and the command bar is hidden, preserve the good
   lower edge from normal Hide Controls view while extending the media frame upward
   into the space released by the hidden command bar. */
@media (min-width: 900px) and (min-height: 660px) {
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell {
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: auto !important;
    height: calc(min(57vh, calc(100dvh - clamp(16rem, 27vh, 22rem))) + clamp(3.15rem, 4vw, 4.1rem)) !important;
    max-height: none !important;
    min-height: calc(clamp(22rem, 41vh, 29rem) + clamp(3.15rem, 4vw, 4.1rem)) !important;
    transform: translateY(calc(-1 * clamp(3.15rem, 4vw, 4.1rem))) !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface v4.0 Tablet Hide Controls + Hidden Command Bar Upfill Match === */

/* === WInterface v4.0 Tablet Hide Controls + Command Bar Button Visibility Adjustment ===
   Scope: tablet/large-widescreen standard media view only.
   Preserves the upfill-match2 media geometry while keeping the Show Controls
   button visible and accessible when the command bar and media controls are both hidden. */
@media (min-width: 900px) and (min-height: 660px) {
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell {
    position: relative !important;
    z-index: 1 !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 20 !important;
    transform: translateY(-0.98rem) scale(1) !important;
  }
}
/* === WInterface v4.0 Tablet Hide Controls + Command Bar Button Visibility Adjustment === */

/* === WInterface v4.0 Tablet Hide Controls + Command Bar Button Clearance Adjustment ===
   Scope: tablet/large-widescreen standard media view only.
   Keeps the command-bar-hidden + Hide Controls upfill geometry while preventing
   the enlarged media frame from consuming the Show Controls button row. */
@media (min-width: 900px) and (min-height: 660px) {
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    margin-bottom: calc(-1 * clamp(3.15rem, 4vw, 4.1rem)) !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    margin-top: clamp(0.42rem, 0.8vw, 0.72rem) !important;
  }
}
/* === WInterface v4.0 Tablet Hide Controls + Command Bar Button Clearance Adjustment === */

/* === WInterface v4.0 Tablet Hide Controls Button Position Lock ===
   Keeps the Hide Controls / Show Controls oval in the same visual slot across
   eligible large-screen standard-view states. This preserves the accepted media
   frame geometry and only normalizes the button row positioning. */
@media (min-width: 900px) and (min-height: 660px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 20 !important;
    transform: translateY(-0.98rem) scale(1) !important;
  }

  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible {
    transform: translateY(-0.98rem) scale(1) !important;
  }
}
/* === WInterface v4.0 Tablet Hide Controls Button Position Lock === */

/* === WInterface v4.0 Tablet Hide Controls Command-Bar Hidden No-Bounce Adjustment ===
   Scope: tablet/large-widescreen standard media view only.
   Preserves the accepted Hide Controls / Show Controls visual slot while removing
   the frame height/transform interpolation that made the oval bounce when the
   command bar was already hidden. */
@media (min-width: 900px) and (min-height: 660px) {
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    position: relative !important;
    z-index: 24 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(-0.98rem) scale(1) !important;
    transition:
      opacity 0.14s ease,
      border-color 0.14s ease,
      box-shadow 0.14s ease,
      background 0.14s ease !important;
    transform-origin: center center !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: translateY(-0.98rem) scale(1) !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    transition: opacity 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  }
}
/* === WInterface v4.0 Tablet Hide Controls Command-Bar Hidden No-Bounce Adjustment === */

/* === WInterface v4.0 Tablet Hide Controls Command-Bar Show No-Bounce Adjustment ===
   Scope: tablet/large-widescreen standard media view only.
   When the command bar is hidden and Show Controls is clicked, temporarily
   suppress media-frame interpolation so the player does not bounce upward. */
@media (min-width: 900px) and (min-height: 660px) {
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    transition: none !important;
  }
}
/* === WInterface v4.0 Tablet Hide Controls Command-Bar Show No-Bounce Adjustment === */


/* === WInterface v4.0 Global Container-Safe Hide Controls Support ===
   Extends the accepted Hide Controls / Show Controls behavior beyond the original
   tablet/large-widescreen media query. The feature remains standard-view-only and
   is constrained to the middle media column so the media frame, controls, and
   toggle cannot escape their container on smaller or shorter screens. */
@media (max-width: 899px), (max-height: 659px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-panel:not([hidden]),
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-panel:not([hidden]) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    display: inline-flex !important;
    opacity: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    max-width: min(92%, 10.5rem) !important;
    min-width: min(7.8rem, 86%) !important;
    min-height: clamp(1.45rem, 3.2vw, 1.82rem) !important;
    padding-inline: clamp(0.72rem, 2.6vw, 1.05rem) !important;
    transform: translateY(-0.72rem) scale(1) !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 24 !important;
  }

  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: translateY(-0.72rem) scale(1) !important;
  }

  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions,
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions {
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-0.28rem) scale(0.99) !important;
  }

  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(12rem, 48dvh, 31rem) !important;
    max-height: calc(100dvh - clamp(11rem, 30dvh, 18rem)) !important;
    min-height: min(clamp(11.5rem, 34dvh, 22rem), calc(100dvh - 12rem)) !important;
    box-sizing: border-box !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell {
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: auto !important;
    height: min(calc(clamp(12rem, 48dvh, 31rem) + clamp(2.05rem, 5.2vw, 3.35rem)), calc(100dvh - clamp(8.8rem, 24dvh, 15.5rem))) !important;
    max-height: calc(100dvh - clamp(8.8rem, 24dvh, 15.5rem)) !important;
    min-height: min(calc(clamp(11.5rem, 34dvh, 22rem) + clamp(2.05rem, 5.2vw, 3.35rem)), calc(100dvh - 10rem)) !important;
    transform: translateY(calc(-1 * clamp(2.05rem, 5.2vw, 3.35rem))) !important;
    margin-bottom: calc(-1 * clamp(2.05rem, 5.2vw, 3.35rem)) !important;
    box-sizing: border-box !important;
  }

  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    transform: translateY(-0.72rem) scale(1) !important;
    transition:
      opacity 0.14s ease,
      border-color 0.14s ease,
      box-shadow 0.14s ease,
      background 0.14s ease !important;
    transform-origin: center center !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-transition-lock.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    transition: none !important;
  }
}
/* === WInterface v4.0 Global Container-Safe Hide Controls Support === */


/* === WInterface v4.0 Global Hide Controls Screen-Fit Adjustment ===
   Adjustmentes two standard-view edge cases introduced by the global Hide Controls rule:
   1) On 1080p-style heights, the Hide Controls / Show Controls oval is clamped
      slightly upward so it cannot clip against the middle container bottom.
   2) On ultrawide layouts, hiding controls keeps the video from shrinking by
      lifting the restrictive 35rem cap and allowing the frame to downfill. */
@media (min-width: 900px) and (min-height: 660px) and (max-height: 920px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    transform: translateY(-1.34rem) scale(1) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: translateY(-1.34rem) scale(1) !important;
  }
}

@media (min-width: 1600px) and (min-height: 800px) and (min-aspect-ratio: 19/10) {
  body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    aspect-ratio: auto !important;
    height: min(61dvh, calc(100dvh - clamp(15.5rem, 24vh, 21rem))) !important;
    max-height: min(61dvh, calc(100dvh - clamp(15.5rem, 24vh, 21rem))) !important;
    min-height: min(57dvh, calc(100dvh - clamp(17rem, 28vh, 23rem))) !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface v4.0 Global Hide Controls Screen-Fit Adjustment === */

/* === WInterface v4.0 Hide Controls Screen-Fit Refinement ===
   Scope: standard media view only.
   1) Gives the Hide/Show Controls oval a slightly stronger upward clamp on
      shorter desktop-height layouts so it cannot clip the middle container.
   2) On ultrawide layouts with the command bar hidden but media controls still
      visible, preserves the large player feel while reserving clearance for the
      media-control row so the player cannot cover it. */
@media (min-width: 900px) and (min-height: 660px) and (max-height: 920px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    transform: translateY(-1.58rem) scale(1) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: translateY(-1.58rem) scale(1) !important;
  }
}

@media (min-width: 1600px) and (min-height: 800px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    bottom: clamp(2.85rem, 3.55vw, 3.55rem) !important;
    height: calc(100% + clamp(3.45rem, 4.2vw, 4.35rem) - clamp(2.85rem, 3.55vw, 3.55rem)) !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface v4.0 Hide Controls Screen-Fit Refinement === */

/* === WInterface v4.0 Hide Controls Screen-Fit Refinement 2 ===
   Targeted follow-up for the global Hide Controls support:
   1) Remove all hover/active vertical bounce from the Hide/Show Controls oval
      so the accepted adjustmented slot cannot clip on 1080p-height displays.
   2) On ultrawide command-bar-hidden standard view with media controls visible,
      preserve the prior player sizing and lift the controls/button into the
      available safe area instead of resizing the media frame. */
@media (min-width: 900px) and (min-height: 660px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    transition:
      opacity 0.14s ease,
      border-color 0.14s ease,
      box-shadow 0.14s ease,
      background 0.14s ease !important;
    transform-origin: center center !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: translateY(-0.98rem) scale(1) !important;
  }
}

@media (min-width: 900px) and (min-height: 660px) and (max-height: 920px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: translateY(-1.58rem) scale(1) !important;
  }
}

@media (max-width: 899px), (max-height: 659px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: translateY(-0.72rem) scale(1) !important;
  }
}

@media (min-width: 1600px) and (min-height: 800px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions {
    position: relative !important;
    z-index: 32 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(calc(-1 * clamp(1.55rem, 1.85vw, 2.25rem))) !important;
  }

  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    position: relative !important;
    z-index: 33 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(calc(-1 * clamp(1.65rem, 1.95vw, 2.35rem))) scale(1) !important;
  }

  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: translateY(calc(-1 * clamp(1.65rem, 1.95vw, 2.35rem))) scale(1) !important;
  }
}
/* === WInterface v4.0 Hide Controls Screen-Fit Refinement 2 === */

/* === WInterface v4.0 Hide Controls All-State No-Bounce Lock ===
   Removes vertical hover/active/focus bounce from the Hide Controls / Show Controls
   oval in every standard-view configuration while preserving each mode's accepted
   adjustmented visual slot. */
body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
  --winterface-media-controls-toggle-transform: translateY(-0.98rem) scale(1);
  transform: var(--winterface-media-controls-toggle-transform) !important;
  transition:
    opacity 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease !important;
}

body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
  --winterface-media-controls-toggle-transform: translateY(-0.72rem) scale(1);
}

@media (min-width: 900px) and (min-height: 660px) and (max-height: 920px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    --winterface-media-controls-toggle-transform: translateY(-1.58rem) scale(1);
  }
}

@media (max-width: 899px), (max-height: 659px) {
  body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    --winterface-media-controls-toggle-transform: translateY(-0.72rem) scale(1);
  }
}

@media (min-width: 1600px) and (min-height: 800px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    --winterface-media-controls-toggle-transform: translateY(calc(-1 * clamp(1.65rem, 1.95vw, 2.35rem))) scale(1);
  }
}

body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
  transform: var(--winterface-media-controls-toggle-transform) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* === WInterface v4.0 Hide Controls All-State No-Bounce Lock === */

/* === WInterface v4.0 Hide Controls Command-Bar Hidden Slot Lock ===
   Keeps the Hide Controls / Show Controls oval in the lower, safer command-bar-hidden
   slot by making the resting position match the preferred hover position. This removes
   the remaining visual jump without changing media geometry or normal command-bar-visible placement. */
body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
  --winterface-media-controls-toggle-transform: translateY(-0.72rem) scale(1);
  transform: var(--winterface-media-controls-toggle-transform) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
  transform: var(--winterface-media-controls-toggle-transform) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* === WInterface v4.0 Hide Controls Command-Bar Hidden Slot Lock === */

/* === WInterface v4.0 Hide Controls Visible-State Slot Match ===
   Aligns the Hide Controls / Show Controls oval in the normal command-bar-visible,
   controls-visible standard media state with the accepted lower slot used when
   both the command bar and controls are hidden. This only changes the button slot. */
body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
  --winterface-media-controls-toggle-transform: translateY(-0.72rem) scale(1);
  transform: var(--winterface-media-controls-toggle-transform) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
  transform: var(--winterface-media-controls-toggle-transform) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* === WInterface v4.0 Hide Controls Visible-State Slot Match === */

/* === WInterface v4.0 Hide Controls Show-State Slot Match ===
   Aligns the Show Controls oval in the command-bar-visible, controls-hidden
   standard media state with the accepted lower Show Controls slot used when
   both the command bar and controls are hidden. Hide Controls resting state
   remains governed by the visible-state slot rule above. */
body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
  --winterface-media-controls-toggle-transform: translateY(-0.72rem) scale(1);
  transform: var(--winterface-media-controls-toggle-transform) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
  transform: var(--winterface-media-controls-toggle-transform) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* === WInterface v4.0 Hide Controls Show-State Slot Match === */


/* === WInterface v4.0 Command Bar Toggle No-Glitch Lock ===
   Scope: Hide/Show Command Bar rapid toggles only.
   Keeps the accepted media/control geometry intact while suppressing layout
   interpolation during repeated command-bar clicks. */
body.winterface-commandbar-toggle-lock #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-command-line,
body.winterface-commandbar-toggle-lock #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
body.winterface-commandbar-toggle-lock #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
body.winterface-commandbar-toggle-lock #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
body.winterface-commandbar-toggle-lock #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions,
body.winterface-commandbar-toggle-lock #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-commandbar-toggle-lock #winterface.interface-system-media-expanded .interface-command-line,
body.winterface-commandbar-toggle-lock #winterface.interface-system-media-expanded .interface-media-frame-shell,
body.winterface-commandbar-toggle-lock #winterface.interface-system-media-expanded .interface-showcase-frame:not([hidden]),
body.winterface-commandbar-toggle-lock #winterface.interface-system-media-expanded .interface-video-frame:not([hidden]),
body.winterface-commandbar-toggle-lock #winterface.interface-system-media-expanded .interface-media-actions,
body.winterface-commandbar-toggle-lock #winterface.interface-system-media-expanded .interface-media-controls-toggle {
  transition: none !important;
}
/* === WInterface v4.0 Command Bar Toggle No-Glitch Lock === */

/* === WInterface v4.0 Ultrawide Command-Bar-Hidden Controls Lift ===
   Targeted adjustment for ultrawide/larger-wide standard view when the command bar is
   hidden and media controls remain visible. Preserves the accepted video frame
   size/position and lifts only the media controls plus Hide Controls oval into
   the middle container so they do not clip at the bottom edge. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions {
    position: relative !important;
    z-index: 34 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(calc(-1 * clamp(3.05rem, 2.55vw, 4.05rem))) !important;
  }

  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    position: relative !important;
    z-index: 35 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    --winterface-media-controls-toggle-transform: translateY(calc(-1 * clamp(3.15rem, 2.65vw, 4.15rem))) scale(1);
    transform: var(--winterface-media-controls-toggle-transform) !important;
    transition:
      opacity 0.14s ease,
      border-color 0.14s ease,
      box-shadow 0.14s ease,
      background 0.14s ease !important;
  }

  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: var(--winterface-media-controls-toggle-transform) !important;
  }
}
/* === WInterface v4.0 Ultrawide Command-Bar-Hidden Controls Lift === */

/* === WInterface v4.0 Ultrawide Command-Bar-Hidden Controls-Hidden Downfill Match ===
   Targeted adjustment for ultrawide/larger-wide standard view when the command bar and
   media controls are both hidden. Matches the accepted video player height and
   bottom position from the command-bar-hidden + controls-visible state while
   preserving the Show Controls button slot and keeping the frame contained in
   the middle media container. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell {
    position: relative !important;
    z-index: 1 !important;
    aspect-ratio: 16 / 9 !important;
    overflow: visible !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: calc(100% + clamp(2.15rem, 2.6vw, 3.05rem)) !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    position: relative !important;
    z-index: 35 !important;
  }
}
/* === WInterface v4.0 Ultrawide Command-Bar-Hidden Controls-Hidden Downfill Match === */

/* === WInterface v4.0 Ultrawide Controls-Hidden Bottom Clearance Adjustment ===
   Targeted follow-up for ultrawide/larger-wide standard view when the command
   bar and media controls are both hidden. Keeps the accepted upper frame
   geometry from the prior #2 state, but reserves a visible lower clearance so
   the Show Controls button is not clipped by the middle media container. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    inset: auto 0 clamp(2.15rem, 1.75vw, 2.75rem) 0 !important;
    height: calc(100% + clamp(0.55rem, 0.85vw, 0.95rem)) !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    --winterface-media-controls-toggle-transform: translateY(calc(-1 * clamp(1.95rem, 1.35vw, 2.25rem))) scale(1);
    transform: var(--winterface-media-controls-toggle-transform) !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: var(--winterface-media-controls-toggle-transform) !important;
  }
}
/* === WInterface v4.0 Ultrawide Controls-Hidden Bottom Clearance Adjustment === */

/* === WInterface v4.0 Ultrawide Controls-Hidden Button Centering Follow-up ===
   Targeted follow-up for ultrawide/larger-wide standard view when the command
   bar and media controls are both hidden. Leaves the video frame height and
   position untouched, and lifts only the Show Controls button into the center
   of the safe gap under the media frame. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    --winterface-media-controls-toggle-transform: translateY(calc(-1 * clamp(2.85rem, 2.05vw, 3.35rem))) scale(1);
    transform: var(--winterface-media-controls-toggle-transform) !important;
  }

  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-commandbar-hidden.winterface-media-controls-hidden.winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: var(--winterface-media-controls-toggle-transform) !important;
  }
}
/* === WInterface v4.0 Ultrawide Controls-Hidden Button Centering Follow-up === */

/* === WInterface v4.0 Ultrawide Item 3 Exact Bottom-Lane Match ===
   Targeted #3 adjustment for ultrawide/larger-wide standard view when the command bar
   and media controls are both visible. This copies the accepted #1 bottom-lane
   relationship, then applies a top-edge repair so the frame stays inside its
   intended background container without changing the accepted lower lane. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    --winterface-item3-frame-top-repair: clamp(0.75rem, 0.65vw, 1.05rem);
    position: relative !important;
    bottom: clamp(2.85rem, 3.55vw, 3.55rem) !important;
    height: calc(100% + clamp(3.45rem, 4.2vw, 4.35rem) - clamp(2.85rem, 3.55vw, 3.55rem) - var(--winterface-item3-frame-top-repair)) !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: translateY(var(--winterface-item3-frame-top-repair)) !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }

  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions,
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions {
    position: relative !important;
    z-index: 34 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(calc(-1 * clamp(3.05rem, 2.55vw, 4.05rem))) !important;
  }

  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle,
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle {
    position: relative !important;
    z-index: 35 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    --winterface-media-controls-toggle-transform: translateY(calc(-1 * clamp(3.15rem, 2.65vw, 4.15rem))) scale(1);
    transform: var(--winterface-media-controls-toggle-transform) !important;
  }

  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
    transform: var(--winterface-media-controls-toggle-transform) !important;
  }
}
/* === WInterface v4.0 Ultrawide Item 3 Exact Bottom-Lane Match === */

/* === WInterface v4.0 Ultrawide Item 3 Top Gap Final Tune ===
   Targeted follow-up for #3 only: command bar visible + controls visible on
   ultrawide/larger widescreen standard view. Keeps the accepted control-button
   lane and lower player/button relationship intact, then lowers only the player
   frame top so it clears the command bar cleanly. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-standalone:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-dev-build:not(.winterface-commandbar-hidden):not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    --winterface-item3-frame-top-repair: clamp(3.45rem, 2.15vw, 3.95rem);
    --winterface-item3-frame-bottom-clearance: clamp(3.15rem, 3.65vw, 3.85rem);
    position: relative !important;
    bottom: var(--winterface-item3-frame-bottom-clearance) !important;
    height: calc(100% + clamp(3.05rem, 3.75vw, 3.85rem) - var(--winterface-item3-frame-bottom-clearance) - var(--winterface-item3-frame-top-repair)) !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: translateY(var(--winterface-item3-frame-top-repair)) !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }
}
/* === WInterface v4.0 Ultrawide Item 3 Top Gap Final Tune === */


/* === WInterface v4.0 Ultrawide Item 4 Controls-Hidden Bottom Match ===
   Targeted #4 adjustment for ultrawide/larger-wide standard view when the command bar
   remains visible and media controls are hidden. The command bar, player top,
   player width, and Show Controls button slot remain unchanged. Only the lower
   player frame is allowed to downfill. This follow-up increases only the lower
   endpoint slightly farther so the Show Controls button sits more evenly
   between the player bottom and the WInterface container border. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-standalone #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]),
  body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-showcase-frame:not([hidden]),
  body.winterface-media-controls-hidden:not(.winterface-commandbar-hidden).winterface-dev-build #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-video-frame:not([hidden]) {
    --winterface-item4-bottom-downfill: clamp(4.70rem, 3.20vw, 5.60rem);
    aspect-ratio: auto !important;
    height: calc(min(61dvh, calc(100dvh - clamp(15.5rem, 24vh, 21rem))) + var(--winterface-item4-bottom-downfill)) !important;
    max-height: calc(min(61dvh, calc(100dvh - clamp(15.5rem, 24vh, 21rem))) + var(--winterface-item4-bottom-downfill)) !important;
    min-height: calc(min(57dvh, calc(100dvh - clamp(17rem, 28vh, 23rem))) + var(--winterface-item4-bottom-downfill)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface v4.0 Ultrawide Item 4 Controls-Hidden Bottom Match === */

/* === WInterface v4.0 Ultrawide Item 5 Expanded Visible-Nav Downfill ===
   Targeted #5 adjustment for ultrawide/larger-wide Expanded/Snap view with the
   navigation/command bar visible. Buttons, top navigation/status area, player
   top, and player width remain unchanged. Only the player frame bottom is
   extended downward toward the adjustmented media-control lane. This pass adds one final small downfill step while preserving the button lane. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-standalone:not(.winterface-commandbar-hidden) #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-standalone:not(.winterface-commandbar-hidden) #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]),
  body.winterface-dev-build:not(.winterface-commandbar-hidden) #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-dev-build:not(.winterface-commandbar-hidden) #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]) {
    aspect-ratio: auto !important;
    height: calc(min(56vh, 620px) + clamp(7.35rem, 5.95vw, 8.65rem)) !important;
    max-height: calc(min(56vh, 620px) + clamp(7.35rem, 5.95vw, 8.65rem)) !important;
    min-height: calc(min(56vh, 620px) + clamp(7.35rem, 5.95vw, 8.65rem)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface v4.0 Ultrawide Item 5 Expanded Visible-Nav Downfill === */

/* === WInterface v4.0 Ultrawide Item 6 Expanded Hidden-Nav Command Slot Fill ===
   Targeted #6 adjustment for ultrawide/larger-wide Expanded/Snap view with the
   navigation/command bar hidden. Preserves the accepted #5 bottom player/control
   lane exactly. Instead of moving or resizing the real player frame, this turns
   the already-reserved hidden command-line slot into a blank player-matched
   visual fill so the top edge occupies the prior command-bar area cleanly. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-command-line,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-command-line {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    color: transparent !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.020)),
      radial-gradient(circle at top left, rgba(56,189,248,0.13), transparent 44%),
      rgba(5, 8, 22, 0.72) !important;
    border-color: rgba(56,189,248,0.24) !important;
    box-shadow:
      0 18px 42px rgba(0,0,0,0.26),
      0 0 28px rgba(56,189,248,0.09),
      inset 0 0 28px rgba(255,255,255,0.022) !important;
  }

  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-command-line .interface-command-prefix,
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-command-line .interface-command-input,
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-command-line .interface-cursor,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-command-line .interface-command-prefix,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-command-line .interface-command-input,
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-command-line .interface-cursor {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]) {
    margin-top: 0 !important;
    transform: none !important;
  }
}
/* === WInterface v4.0 Ultrawide Item 6 Expanded Hidden-Nav Command Slot Fill === */

/* === WInterface v4.0 Ultrawide Item 6 Hidden-Nav Micro Bottom Downfill ===
   Targeted #6 retry from the command-slot-fill build. Keeps the accepted top
   command-slot visual fill and preserves the media-control/button lane. This
   adds only a small bottom-edge extension to the active player frame so the
   player grows downward without shifting its top or moving the controls. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]) {
    --winterface-item6-bottom-micro: clamp(0.28rem, 0.32vw, 0.46rem);
    inset: auto 0 calc(-1 * var(--winterface-item6-bottom-micro)) 0 !important;
    height: calc(100% + clamp(3.45rem, 3.8vw, 4.45rem) + var(--winterface-item6-bottom-micro)) !important;
    max-height: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface v4.0 Ultrawide Item 6 Hidden-Nav Micro Bottom Downfill === */

/* === WInterface v4.0 Ultrawide Item 6 Hidden-Nav Bottom Gap + Lane Downshift ===
   Targeted follow-up for #6 only. Preserves the accepted hidden-nav top fill.
   In Expanded/Snap on ultrawide/larger screens, tightens the player-to-button gap
   another small step and moves the lower player/control lane farther downward
   toward the WInterface edge. This pass adds one more small gap increase and
   a larger downward lane shift from downshift5 while preserving the accepted player-to-button gap. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]),
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-showcase-frame:not([hidden]),
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-video-frame:not([hidden]) {
    --winterface-item6-bottom-micro: clamp(7.35rem, 5.90vw, 8.25rem);
    inset: auto 0 calc(-1 * var(--winterface-item6-bottom-micro)) 0 !important;
    height: calc(100% + clamp(3.45rem, 3.8vw, 4.45rem) + var(--winterface-item6-bottom-micro)) !important;
    max-height: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-media-actions,
  body.winterface-commandbar-hidden:not(.winterface-media-controls-hidden).winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-media-actions {
    position: relative !important;
    z-index: 34 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(clamp(6.58rem, 5.57vw, 7.45rem)) !important;
  }
}
/* === WInterface v4.0 Ultrawide Item 6 Hidden-Nav Bottom Gap + Lane Downshift === */

/* === WInterface v4.0 Ultrawide Large Text Readability ===
   Targeted typography-only enhancement for ultrawide/larger screens.
   Increases the text size in the left bay rail and right signal/system panels
   without changing panel dimensions, button sizes, spacing, media layout, or
   the accepted ultrawide player/control geometry. */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 19/10) {
  body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail-label,
  body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail-label {
    font-size: clamp(0.90rem, 0.62vw, 1.08rem) !important;
    line-height: 1.08 !important;
  }

  body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail-subtitle,
  body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail-subtitle {
    font-size: clamp(0.96rem, 0.66vw, 1.16rem) !important;
    line-height: 1.12 !important;
  }

  body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-path strong,
  body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-path strong {
    font-size: clamp(1.14rem, 0.82vw, 1.38rem) !important;
    line-height: 1.10 !important;
  }

  body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-path span,
  body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-path span {
    font-size: clamp(0.82rem, 0.58vw, 0.98rem) !important;
  }

  body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-output-label,
  body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-output-label {
    font-size: clamp(1.08rem, 0.82vw, 1.28rem) !important;
    line-height: 1.06 !important;
  }

  body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-output-card strong,
  body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-output-card strong {
    font-size: clamp(1.46rem, 1.10vw, 1.82rem) !important;
    line-height: 1.10 !important;
  }

  body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-system-list li,
  body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-system-list li {
    font-size: clamp(1.16rem, 0.86vw, 1.40rem) !important;
    line-height: 1.24 !important;
  }
}
/* === WInterface v4.0 Ultrawide Large Text Readability === */

/* === WInterface v4.0 Ultrawide Large Text Readability Stronger Pass ===
   Stronger typography-only pass for ultrawide/larger screens.
   Uses a viewport-height-tolerant ultrawide query plus higher-specificity selectors
   so the left rail and right panel text visibly increases without changing panel,
   button, card, media, or control geometry. */
@media (min-width: 1600px) and (min-aspect-ratio: 19/10) {
  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail .interface-rail-label,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail .interface-rail-label {
    font-size: clamp(1.08rem, 0.78vw, 1.34rem) !important;
    line-height: 1.04 !important;
  }

  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail .interface-rail-subtitle,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail .interface-rail-subtitle {
    font-size: clamp(1.08rem, 0.78vw, 1.34rem) !important;
    line-height: 1.10 !important;
  }

  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail .interface-path strong,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail .interface-path strong {
    font-size: clamp(1.34rem, 1.02vw, 1.72rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
  }

  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail .interface-path span,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-rail .interface-path span {
    font-size: clamp(0.94rem, 0.70vw, 1.14rem) !important;
    line-height: 1 !important;
  }

  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-output-card .interface-output-label,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-output-card .interface-output-label {
    font-size: clamp(1.22rem, 0.94vw, 1.54rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.17em !important;
  }

  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-output-card strong,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-output-card strong {
    font-size: clamp(1.78rem, 1.34vw, 2.26rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.018em !important;
  }

  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-system-list li,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-system-list li {
    font-size: clamp(1.36rem, 1.02vw, 1.72rem) !important;
    line-height: 1.22 !important;
  }
}
/* === WInterface v4.0 Ultrawide Large Text Readability Stronger Pass === */

/* === WInterface v4.0 Ultrawide Right-Nav Controller Text Scale ===
   Targeted typography-only enhancement for ultrawide/larger screens.
   Increases the right-nav Bay / Back / Next controller text, controller readout,
   and lower launch/media button text to visually match the larger left/right panel
   typography. Does not change panel dimensions, media geometry, button positions,
   or accepted ultrawide player/control states. */
@media (min-width: 1600px) and (min-aspect-ratio: 19/10) {
  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-signal-pulse-chip,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-signal-pulse-chip {
    font-size: clamp(0.94rem, 0.70vw, 1.16rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.08em !important;
  }

  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-signal-pulse-readout,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-signal-pulse-readout {
    font-size: clamp(0.98rem, 0.72vw, 1.18rem) !important;
    line-height: 1.10 !important;
    letter-spacing: 0.08em !important;
  }

  html body.winterface-standalone #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-jump-link,
  html body.winterface-dev-build #winterface.interface-section:not(.interface-system-media-expanded) .interface-side-panel .interface-jump-link {
    font-size: clamp(1.26rem, 0.96vw, 1.58rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.01em !important;
  }
}
/* === WInterface v4.0 Ultrawide Right-Nav Controller Text Scale === */

/* === WInterface v4.0 Ultrawide Expanded/Snap Left-Nav Text Scale ===
   Typography-only enhancement for ultrawide/larger screens in Expanded/Snap view.
   Scales the left rail Bay heading/subtitle and card label text to match the
   accepted large-screen readability treatment from standard view. Does not
   change card/button dimensions, spacing, media geometry, or control states. */
@media (min-width: 1600px) and (min-aspect-ratio: 19/10) {
  html body.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-rail .interface-rail-label,
  html body.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-rail .interface-rail-label {
    font-size: clamp(1.10rem, 0.82vw, 1.42rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0.06em !important;
  }

  html body.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-rail .interface-rail-subtitle,
  html body.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-rail .interface-rail-subtitle {
    font-size: clamp(1.16rem, 0.86vw, 1.48rem) !important;
    line-height: 1.08 !important;
  }

  html body.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-rail .interface-path strong,
  html body.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-rail .interface-path strong {
    font-size: clamp(1.38rem, 1.04vw, 1.78rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
  }

  html body.winterface-standalone #winterface.interface-system-media-expanded.is-winterface-maximized .interface-rail .interface-path span,
  html body.winterface-dev-build #winterface.interface-system-media-expanded.is-winterface-maximized .interface-rail .interface-path span {
    font-size: clamp(0.98rem, 0.72vw, 1.18rem) !important;
    line-height: 1 !important;
  }
}
/* === WInterface v4.0 Ultrawide Expanded/Snap Left-Nav Text Scale === */

/* === WInterface v4.0 Global Left Menu Centering Baseline ===
   Global containment rule for the left rail card stack.
   Centers each card within its rail and adds a small internal gutter so the
   cards do not sit flush against the rail edge across laptop, desktop,
   ultrawide, root, and DEV contexts. Existing specialized mode transforms can
   still offset the overall stack when those states intentionally require it. */
html body.winterface-standalone #winterface .interface-rail .interface-path-list,
html body.winterface-dev-build #winterface .interface-rail .interface-path-list {
  justify-items: center !important;
  box-sizing: border-box !important;
}

html body.winterface-standalone #winterface .interface-rail .interface-path,
html body.winterface-dev-build #winterface .interface-rail .interface-path {
  width: calc(100% - clamp(0.95rem, 1.25vw, 1.45rem)) !important;
  max-width: calc(100% - clamp(0.95rem, 1.25vw, 1.45rem)) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* === WInterface v4.0 Global Left Menu Centering Baseline === */

/* === WInterface v4.0 Expanded Left Rail Full Centering ===
   Scope: Expanded/Snap left rail containment across root and DEV.
   Centers the bay heading, orb row, and media card stack inside the rail so
   normal laptop Expanded/Snap view does not overflow left or right. Keeps
   player geometry, command bar behavior, and ultrawide media states unchanged. */
@media (min-width: 900px) {
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail {
    justify-items: center !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, auto) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    gap: clamp(0.44rem, 0.72vw, 0.72rem) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header > div:first-child,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header > div:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: clamp(3.75rem, 31%, 5.25rem) !important;
    justify-self: center !important;
    transform: none !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header .interface-set-controls,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header .interface-set-controls {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    justify-self: center !important;
    gap: clamp(0.20rem, 0.42vw, 0.34rem) !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header .interface-set-button,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header .interface-set-button {
    flex: 0 0 auto !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-path-list,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-path-list {
    width: 100% !important;
    max-width: 100% !important;
    justify-items: center !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
  }
}
/* === WInterface v4.0 Expanded Left Rail Full Centering === */

/* === WInterface v4.0 Issue 3 Standard Desktop Hide Controls Clearance ===
   Clean standard-view clearance pass from the approved Issue #2 checkpoint.
   The Hide/Show Controls button keeps its existing size and visual styling.
   This only tightens the standard media stack spacing while controls are
   visible, so the Hide Controls button has enough vertical room at Chrome 100%.
   The Show Controls state is intentionally excluded to preserve its prior slot.
   Expanded/Snap and ultrawide/larger-wide states remain governed by their
   existing accepted rules. */
@media (min-width: 900px) and (max-width: 2199px) and (min-height: 620px) and (max-height: 1200px) {
  body.winterface-standalone:not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-panel:not([hidden]),
  body.winterface-dev-build:not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-panel:not([hidden]) {
    gap: clamp(0.34rem, 0.48vw, 0.54rem) !important;
  }

  body.winterface-standalone:not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell,
  body.winterface-dev-build:not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-frame-shell {
    margin-bottom: -0.18rem !important;
  }

  body.winterface-standalone:not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions,
  body.winterface-dev-build:not(.winterface-media-controls-hidden) #winterface.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-actions {
    margin-bottom: -0.28rem !important;
  }
}
/* === WInterface v4.0 Issue 3 Standard Desktop Hide Controls Clearance === */

/* === WInterface v4.0 Issue #4 Expanded/Snap Center Volume Orb Laptop Containment v3 ===
   Balanced laptop/desktop containment pass for the center volume/mute orb in Expanded/Snap view. Slightly larger than v2 while preserving bottom glow containment.
   Uses viewport width/height targeting instead of aspect-ratio targeting because some Chrome 100% laptop
   windows report wider effective CSS ratios. Normal standard view and ultrawide/larger-screen rules remain untouched. */
@media (min-width: 900px) and (max-width: 2199px) and (min-height: 620px) and (max-height: 1200px) {
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions {
    overflow: visible !important;
    align-items: center !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute {
    width: 3.08rem !important;
    height: 3.08rem !important;
    transform: translateY(-0.14rem) scale(0.98) !important;
    transform-origin: center center !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute::before,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute::before,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute::before,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute::before {
    bottom: -0.03rem !important;
    width: 2.16rem !important;
    height: 0.40rem !important;
    filter: blur(1.45px) !important;
    opacity: 0.58 !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-stick,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-stick,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-stick,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-stick {
    bottom: 0.16rem !important;
    width: 0.34rem !important;
    height: 0.88rem !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb {
    width: 2.20rem !important;
    height: 2.20rem !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb::before,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb::before,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb::before,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb::before {
    inset: -0.30rem !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb::after,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb::after,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb::after,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-orb::after {
    inset: 0.24rem !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-icon,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-icon,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-icon,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute-icon {
    width: 0.98rem !important;
    height: 0.98rem !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:hover,
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:focus-visible,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:hover,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:focus-visible,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:hover,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:focus-visible,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:hover,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:focus-visible {
    transform: translateY(-0.16rem) scale(1.0) !important;
  }
}
/* === WInterface v4.0 Issue #4 Expanded/Snap Center Volume Orb Laptop Containment v3 === */

/* === WInterface v4.0 Issue #5 Expanded/Snap Side Media Button Downshift ===
   Scope: Expanded/Snap view only on standard laptop/desktop screen ranges.
   Moves only the left Live Media/Auto-Play pill and right Expand/Collapse pill
   slightly downward. The center volume/mute orb remains governed by the accepted
   Issue #4 containment rules. Standard view and ultrawide/larger-screen geometry
   remain untouched. */
@media (min-width: 900px) and (max-width: 2199px) and (min-height: 620px) and (max-height: 1200px) {
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions .interface-playback-status.is-autoplay-linked,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions .interface-playback-status.is-autoplay-linked,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions .interface-playback-status.is-autoplay-linked,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions .interface-playback-status.is-autoplay-linked,
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions .interface-media-toggle,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions .interface-media-toggle,
  html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions .interface-media-toggle,
  html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-actions .interface-media-toggle {
    position: relative !important;
    top: 0.14rem !important;
  }
}
/* === WInterface v4.0 Issue #5 Expanded/Snap Side Media Button Downshift === */

/* === WInterface v4.0 Right Nav Controller Theme Border Sync ===
   Scope: right-nav Live Systems Back / Bay / Next controller frame only.
   Syncs the outer controller container border/glow to the active Style Matrix
   theme color while preserving existing controller layout, buttons, readout,
   bay-specific button colors, and desktop display adjustmentes. */
body.winterface-standalone #winterface .interface-side-panel .interface-signal-pulse,
body.winterface-dev-build #winterface .interface-side-panel .interface-signal-pulse {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.16),
    0 14px 30px rgba(0, 0, 0, 0.17),
    0 0 24px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.18),
    0 0 44px rgba(var(--style-matrix-orb-right-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.10),
    inset 0 0 20px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.045) !important;
}

body.winterface-standalone #winterface .interface-side-panel .interface-signal-pulse::before,
body.winterface-dev-build #winterface .interface-side-panel .interface-signal-pulse::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.20),
    rgba(var(--style-matrix-orb-right-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.12),
    transparent
  ) !important;
  opacity: 0.46 !important;
}
/* === WInterface v4.0 Right Nav Controller Theme Border Sync === */

/* === WInterface v4.0 Right Nav Launch Button Theme Border Sync ===
   Scope: bottom-right launch/media action button in the right-nav side panel.
   Syncs only the button border/glow to the active Style Matrix theme color,
   preserving existing button size, text, layout, hover behavior, and controller logic. */
body.winterface-standalone #winterface .interface-side-panel .interface-jump-link,
body.winterface-dev-build #winterface .interface-side-panel .interface-jump-link {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.14),
    0 12px 24px rgba(0, 0, 0, 0.18),
    0 0 20px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.16),
    0 0 34px rgba(var(--style-matrix-orb-right-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.09),
    inset 0 0 18px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.045) !important;
}

body.winterface-standalone #winterface .interface-side-panel .interface-jump-link::before,
body.winterface-dev-build #winterface .interface-side-panel .interface-jump-link::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.24),
    rgba(var(--style-matrix-orb-right-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.14),
    transparent
  ) !important;
  opacity: 0.50 !important;
}
/* === WInterface v4.0 Right Nav Launch Button Theme Border Sync === */

/* === WInterface v4.0 Media Control Button Theme Border Sync ===
   Scope: Live Media / Auto-Play, Hide/Show Controls, and Expand/Collapse
   WInterface buttons only. Syncs border color to the active Style Matrix
   theme color while preserving existing sizing, placement, backgrounds,
   shadows, typography, media behavior, and desktop adjustmentes. */
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle,
body.winterface-standalone #winterface .interface-media-controls-toggle,
body.winterface-dev-build #winterface .interface-media-controls-toggle {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.72) !important;
}

body.winterface-standalone #winterface .interface-media-actions .interface-playback-status:hover,
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status:focus-visible,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status:hover,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status:focus-visible,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle:hover,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle:focus-visible,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle:hover,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle:focus-visible,
body.winterface-standalone #winterface .interface-media-controls-toggle:hover,
body.winterface-standalone #winterface .interface-media-controls-toggle:focus-visible,
body.winterface-dev-build #winterface .interface-media-controls-toggle:hover,
body.winterface-dev-build #winterface .interface-media-controls-toggle:focus-visible {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.86) !important;
}
/* === WInterface v4.0 Media Control Button Theme Border Sync === */

/* === WInterface v4.0 Media Control Button Theme Border Sync v2 ===
   Strengthens the theme-border treatment for Live Media / Auto-Play and
   Expand / Collapse WInterface by syncing their visible overlay border layer
   in addition to the base button border. No layout, sizing, or behavior changes. */
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status,
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status.is-autoplay-linked,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status.is-autoplay-linked,
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status.is-slideshow-linked,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status.is-slideshow-linked,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle,
body.winterface-standalone #winterface .interface-media-controls-toggle,
body.winterface-dev-build #winterface .interface-media-controls-toggle {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.72) !important;
}

body.winterface-standalone #winterface .interface-media-actions .interface-playback-status::after,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status::after,
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status.is-autoplay-linked::after,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status.is-autoplay-linked::after,
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status.is-slideshow-linked::after,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status.is-slideshow-linked::after,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle::after,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle::after {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.16),
    inset 0 -1px 0 rgba(var(--style-matrix-orb-right-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.09) !important;
}

body.winterface-standalone #winterface .interface-media-actions .interface-playback-status:hover,
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status:focus-visible,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status:hover,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status:focus-visible,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle:hover,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle:focus-visible,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle:hover,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle:focus-visible,
body.winterface-standalone #winterface .interface-media-controls-toggle:hover,
body.winterface-standalone #winterface .interface-media-controls-toggle:focus-visible,
body.winterface-dev-build #winterface .interface-media-controls-toggle:hover,
body.winterface-dev-build #winterface .interface-media-controls-toggle:focus-visible {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.86) !important;
}

body.winterface-standalone #winterface .interface-media-actions .interface-playback-status:hover::after,
body.winterface-standalone #winterface .interface-media-actions .interface-playback-status:focus-visible::after,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status:hover::after,
body.winterface-dev-build #winterface .interface-media-actions .interface-playback-status:focus-visible::after,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle:hover::after,
body.winterface-standalone #winterface .interface-media-actions .interface-media-toggle:focus-visible::after,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle:hover::after,
body.winterface-dev-build #winterface .interface-media-actions .interface-media-toggle:focus-visible::after {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.22),
    inset 0 -1px 0 rgba(var(--style-matrix-orb-right-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.12) !important;
}
/* === WInterface v4.0 Media Control Button Theme Border Sync v2 === */

/* === WInterface v4.0 Media Control Button Theme Border Sync v3 ===
   Adjustmentes the resting-state border for Live Media / Auto-Play and
   Expand / Collapse WInterface. Prior pass only became obvious on hover
   because a higher-specificity stable capsule rule in style.css kept the
   non-hover base/overlay borders neutral. Border/color only; no layout,
   sizing, spacing, transform, or behavior changes. */
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-controls-toggle,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-controls-toggle {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.16),
    0 14px 30px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.12),
    inset 0 0 0 1px rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.10),
    inset 0 0 26px rgba(255, 255, 255, 0.030) !important;
}

html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::after,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::after,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::after,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::after,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle::after,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle::after {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.18),
    inset 0 -1px 0 rgba(var(--style-matrix-orb-right-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.12) !important;
}

html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked:hover,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked:focus-visible,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked:hover,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked:focus-visible,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked:hover,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked:focus-visible,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked:hover,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked:focus-visible,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:hover,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:focus-visible,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:hover,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:focus-visible,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-controls-toggle:hover,
html body.winterface-standalone #winterface.interface-section .interface-core .interface-media-controls-toggle:focus-visible,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-controls-toggle:hover,
html body.winterface-dev-build #winterface.interface-section .interface-core .interface-media-controls-toggle:focus-visible {
  border-color: rgba(var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248)), 0.86) !important;
}
/* === WInterface v4.0 Media Control Button Theme Border Sync v3 === */

/* Solo v4.0 standard-view center mute orb containment.
   Scope: normal/standard media controls only. Keeps Expanded/Snap sizing governed by the accepted issue #4 rules. */
html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute {
  width: 3.52rem !important;
  height: 3.52rem !important;
  transform: translateY(0.04rem) !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute::before,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute::before {
  bottom: -0.22rem !important;
  width: 2.58rem !important;
  height: 0.56rem !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-stick,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-stick {
  bottom: 0.16rem !important;
  width: 0.42rem !important;
  height: 1.03rem !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-orb,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-orb {
  width: 2.42rem !important;
  height: 2.42rem !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-orb::before,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-orb::before {
  inset: -0.36rem !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-orb::after,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-orb::after {
  inset: 0.28rem !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-icon,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute-icon {
  width: 1.06rem !important;
  height: 1.06rem !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:hover,
html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:focus-visible,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:hover,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:focus-visible {
  transform: translateY(-0.04rem) scale(1.03) !important;
}

/* === WInterface Solo v4.0 Ultrawide Expanded Bay Header Alignment ===
   Scope: danieldev.ink Expanded/Snap view only on ultrawide/larger-wide screens.
   Left-aligns the Bay title/subtitle block and right-aligns the seven-orb bay selector
   inside the rail header, matching the normal-view left/right header distribution.
   Applies generically to every bay; no card, media, right-panel, or JS changes. */
@media (min-width: 1600px) and (min-aspect-ratio: 19/10) {
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: center !important;
    gap: clamp(0.55rem, 0.74vw, 0.95rem) !important;
    padding-left: clamp(0.48rem, 0.64vw, 0.85rem) !important;
    padding-right: clamp(0.58rem, 0.78vw, 1.05rem) !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header > div:first-child,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header > div:first-child {
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    transform: none !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-label,
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-subtitle,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-label,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-subtitle {
    text-align: left !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header .interface-set-controls,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-rail-header .interface-set-controls {
    justify-self: end !important;
    align-self: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    padding-right: clamp(0.16rem, 0.32vw, 0.44rem) !important;
    max-width: 100% !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface Solo v4.0 Ultrawide Expanded Bay Header Alignment === */

/* === WInterface Solo v4.0 Ultrawide Standard Bay Header Alignment ===
   Scope: danieldev.ink normal/unexpanded view only on ultrawide/larger-wide screens.
   Mirrors the accepted Expanded/Snap Bay header treatment so the Bay title/subtitle
   block stays left-aligned and the seven-orb bay selector sits right-aligned with
   a small containment gutter. Does not affect Expanded/Snap, laptop, card, media,
   right-panel, or JS behavior. */
@media (min-width: 1600px) and (min-aspect-ratio: 19/10) {
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-header,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-header {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: center !important;
    gap: clamp(0.55rem, 0.74vw, 0.95rem) !important;
    padding-left: clamp(0.48rem, 0.64vw, 0.85rem) !important;
    padding-right: clamp(0.58rem, 0.78vw, 1.05rem) !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-header > div:first-child,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-header > div:first-child {
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    transform: none !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-label,
  html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-subtitle,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-label,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-subtitle {
    text-align: left !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-header .interface-set-controls,
  html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-header .interface-set-controls {
    justify-self: end !important;
    align-self: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    padding-right: clamp(0.16rem, 0.32vw, 0.44rem) !important;
    max-width: 100% !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}
/* === WInterface Solo v4.0 Ultrawide Standard Bay Header Alignment === */



/* =========================
   WInterface Solo Iron Steel Media Parity
   Clean conversion from the accepted danieldev.us Iron Steel media skin.
   Scope: Iron Steel/default theme only. Preserves Solo 7-bay behavior, media routing,
   recorder, content, and all non-Iron-Steel themes.
========================= */
html[data-winterface-theme="default"] {
  --matrix-slot-default-left: #d6b46d !important;
  --matrix-slot-default-right: #74eaff !important;
  --matrix-slot-default-left-rgb: 214, 180, 109 !important;
  --matrix-slot-default-right-rgb: 116, 234, 255 !important;
  --matrix-slot-default-preview: linear-gradient(90deg, #030506 0%, #1a222b 28%, #d6b46d 64%, #74eaff 100%) !important;
  --style-matrix-orb-left: #d6b46d !important;
  --style-matrix-orb-right: #74eaff !important;
  --style-matrix-orb-left-rgb: 214, 180, 109 !important;
  --style-matrix-orb-right-rgb: 116, 234, 255 !important;
  --iron-steel-gold: #d6b46d !important;
  --iron-steel-gold-rgb: 214, 180, 109 !important;
  --iron-steel-arc: #74eaff !important;
  --iron-steel-arc-rgb: 116, 234, 255 !important;
  --iron-steel-chrome: #d1d1ce !important;
  --iron-steel-chrome-rgb: 209, 209, 206 !important;
}

html[data-winterface-theme="default"] body.winterface-standalone,
html[data-winterface-theme="default"] body.winterface-dev-build {
  background:
    radial-gradient(circle at 48% 12%, rgba(116, 234, 255, 0.095), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(214, 180, 109, 0.080), transparent 36%),
    radial-gradient(circle at 16% 80%, rgba(168, 50, 50, 0.045), transparent 32%),
    linear-gradient(135deg, #020304 0%, #06090d 38%, #0e1319 68%, #030506 100%) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section {
  --wmedia-skin-primary: #d6b46d;
  --wmedia-skin-secondary: #74eaff;
  --wmedia-skin-primary-rgb: 214, 180, 109;
  --wmedia-skin-secondary-rgb: 116, 234, 255;
  --wmedia-skin-chrome: #d1d1ce;
  --wmedia-skin-chrome-rgb: 209, 209, 206;
  --wmedia-skin-panel-rgb: 8, 12, 19;
  --wmedia-skin-soft-rgb: 14, 18, 26;
  --wmedia-mute-primary: #74eaff;
  --wmedia-mute-primary-rgb: 116, 234, 255;
  --media-active-bay-accent: var(--wfo-active-bay-accent, #3b82f6);
  --media-active-bay-accent-rgb: var(--wfo-active-bay-accent-rgb, 59, 130, 246);
  --winterface-command-border: var(--wmedia-skin-chrome);
  --winterface-control-border: var(--wmedia-skin-chrome);
  --interface-accent: var(--wmedia-skin-primary) !important;
  --interface-accent-rgb: var(--wmedia-skin-primary-rgb) !important;
  --interface-accent-text: #f1cd84 !important;
  --interface-accent-soft: rgba(214, 180, 109, 0.10) !important;
  --interface-accent-border: rgba(214, 180, 109, 0.42) !important;
  --interface-accent-border-strong: rgba(116, 234, 255, 0.64) !important;
  --interface-accent-glow: rgba(116, 234, 255, 0.22) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-shell,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-bar,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-core,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-output-card,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-output-card-soft,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-response,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse-readout {
  border-color: rgba(var(--wmedia-skin-primary-rgb), 0.34) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(var(--wmedia-skin-primary-rgb), 0.075), transparent 42%),
    linear-gradient(145deg, rgba(var(--wmedia-skin-panel-rgb), 0.88), rgba(var(--wmedia-skin-soft-rgb), 0.54)) !important;
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, 0.025),
    0 18px 52px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(var(--wmedia-skin-primary-rgb), 0.095) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-shell {
  border-color: rgba(var(--iron-steel-arc-rgb), 0.26) !important;
  background:
    linear-gradient(145deg, rgba(28, 34, 40, 0.92), rgba(5, 8, 12, 0.98) 44%, rgba(22, 18, 11, 0.82) 100%),
    rgba(5, 8, 12, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(244, 247, 248, 0.030),
    inset 0 0 64px rgba(var(--iron-steel-arc-rgb), 0.030),
    0 26px 80px rgba(0, 0, 0, 0.62),
    0 0 42px rgba(var(--iron-steel-gold-rgb), 0.070) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-system-status-pill,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-mode,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-theme-toggle,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-count {
  background:
    linear-gradient(145deg, rgba(var(--wmedia-skin-panel-rgb), 0.90), rgba(var(--wmedia-skin-soft-rgb), 0.62)) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-system-status-pill,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-count {
  border-color: rgba(var(--iron-steel-chrome-rgb), 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(var(--iron-steel-chrome-rgb), 0.18),
    0 12px 28px rgba(0, 0, 0, 0.30),
    0 0 20px rgba(var(--iron-steel-chrome-rgb), 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.065),
    inset 0 0 24px rgba(var(--iron-steel-chrome-rgb), 0.045) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-mode,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-theme-toggle {
  border-color: rgba(var(--iron-steel-gold-rgb), 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(var(--iron-steel-gold-rgb), 0.14),
    0 12px 28px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(var(--iron-steel-gold-rgb), 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 0 18px rgba(var(--iron-steel-gold-rgb), 0.045) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-mode .interface-status-orb,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-count .interface-status-orb,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-maximize-button .interface-status-orb,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-system-orb-toggle i,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-mute-orb {
  background:
    radial-gradient(circle at 34% 26%, rgba(244, 247, 248, 0.72), transparent 22%),
    radial-gradient(circle, rgba(var(--iron-steel-arc-rgb), 0.64), rgba(var(--iron-steel-gold-rgb), 0.24) 58%, rgba(5, 8, 12, 0.98) 100%) !important;
  border-color: rgba(var(--iron-steel-arc-rgb), 0.56) !important;
  box-shadow:
    inset 0 0 14px rgba(244, 247, 248, 0.10),
    0 0 14px rgba(var(--iron-steel-arc-rgb), 0.30),
    0 0 28px rgba(var(--iron-steel-gold-rgb), 0.10) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-theme-toggle::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-theme-toggle::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-theme-option[data-interface-theme-option="default"]::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-theme-option[data-interface-theme-option="default"]::after,
.interface-theme-option[data-interface-theme-option="default"]::before,
.interface-theme-option[data-interface-theme-option="default"]::after {
  background: var(--matrix-slot-default-left, #d6b46d) !important;
  border-color: rgba(var(--matrix-slot-default-right-rgb, 116, 234, 255), 0.72) !important;
  box-shadow:
    0 0 14px rgba(var(--matrix-slot-default-left-rgb, 214, 180, 109), 0.50),
    0 0 28px rgba(var(--matrix-slot-default-right-rgb, 116, 234, 255), 0.18) !important;
}

.interface-theme-option[data-interface-theme-option="default"],
body.winterface-dev-build .interface-theme-option[data-interface-theme-option="default"] {
  --theme-preview: var(--matrix-slot-default-preview) !important;
  --theme-option-orb: var(--matrix-slot-default-left) !important;
  --theme-option-orb-2: var(--matrix-slot-default-right) !important;
  --theme-option-orb-rgb: var(--matrix-slot-default-left-rgb) !important;
  --theme-option-orb-2-rgb: var(--matrix-slot-default-right-rgb) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail-label,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-output-label,
html[data-winterface-theme="default"] body #winterface.interface-section .panel-label,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-chip span,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse-label {
  color: var(--wmedia-skin-primary) !important;
  text-shadow: 0 0 12px rgba(var(--wmedia-skin-primary-rgb), 0.38) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-command-prefix,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-command-line .interface-cursor,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-system-list li::before {
  color: var(--wmedia-skin-secondary) !important;
  background: var(--wmedia-skin-secondary) !important;
  text-shadow: 0 0 12px rgba(var(--wmedia-skin-secondary-rgb), 0.44) !important;
  box-shadow:
    0 0 10px rgba(var(--wmedia-skin-secondary-rgb), 0.86),
    0 0 22px rgba(var(--wmedia-skin-secondary-rgb), 0.40) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-command-prefix {
  background: none !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-command-line {
  border-color: rgba(var(--iron-steel-chrome-rgb), 0.78) !important;
  background:
    linear-gradient(145deg, rgba(var(--wmedia-skin-primary-rgb), 0.10), rgba(var(--wmedia-skin-secondary-rgb), 0.040)),
    rgba(var(--wmedia-skin-panel-rgb), 0.76) !important;
  box-shadow:
    0 0 0 1px rgba(var(--iron-steel-chrome-rgb), 0.18),
    0 0 26px rgba(var(--wmedia-skin-secondary-rgb), 0.14),
    inset 0 0 22px rgba(var(--wmedia-skin-secondary-rgb), 0.045) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-path,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-chip,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse-chip {
  border-color: rgba(var(--wmedia-skin-primary-rgb), 0.28) !important;
  background:
    linear-gradient(145deg, rgba(var(--wmedia-skin-panel-rgb), 0.76), rgba(var(--wmedia-skin-soft-rgb), 0.42)) !important;
  box-shadow:
    inset 0 0 18px rgba(var(--wmedia-skin-primary-rgb), 0.035),
    0 10px 26px rgba(0, 0, 0, 0.28) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-path:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-path:focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-path.is-active {
  border-color: rgba(var(--media-active-bay-accent-rgb), 0.68) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--media-active-bay-accent-rgb), 0.12), transparent 42%),
    linear-gradient(145deg, rgba(var(--wmedia-skin-panel-rgb), 0.82), rgba(var(--wmedia-skin-soft-rgb), 0.54)) !important;
  box-shadow:
    inset 0 0 22px rgba(var(--media-active-bay-accent-rgb), 0.060),
    0 0 0 1px rgba(var(--media-active-bay-accent-rgb), 0.12),
    0 18px 38px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(var(--media-active-bay-accent-rgb), 0.18) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-path span {
  border-color: rgba(var(--media-active-bay-accent-rgb), 0.26) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.13), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(var(--media-active-bay-accent-rgb), 0.20), rgba(var(--media-active-bay-accent-rgb), 0.11) 54%, rgba(10, 12, 22, 0.88) 100%) !important;
  box-shadow:
    inset 0 0 7px rgba(var(--media-active-bay-accent-rgb), 0.055),
    0 0 7px rgba(var(--media-active-bay-accent-rgb), 0.14),
    0 0 14px rgba(var(--media-active-bay-accent-rgb), 0.060) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-path.is-active span {
  border-color: rgba(var(--media-active-bay-accent-rgb), 0.38) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.16), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(var(--media-active-bay-accent-rgb), 0.28), rgba(var(--media-active-bay-accent-rgb), 0.15) 54%, rgba(10, 12, 22, 0.86) 100%) !important;
  box-shadow:
    inset 0 0 8px rgba(var(--media-active-bay-accent-rgb), 0.07),
    0 0 8px rgba(var(--media-active-bay-accent-rgb), 0.18),
    0 0 16px rgba(var(--media-active-bay-accent-rgb), 0.08) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button="primary"] {
  --media-set-orb: #3b82f6;
  --media-set-orb-rgb: 59, 130, 246;
}
html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button="operations"] {
  --media-set-orb: #8b5cf6;
  --media-set-orb-rgb: 139, 92, 246;
}
html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button="media"] {
  --media-set-orb: #ec4899;
  --media-set-orb-rgb: 236, 72, 153;
}
html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button="music"] {
  --media-set-orb: #22c55e;
  --media-set-orb-rgb: 34, 197, 94;
}
html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button="vibes"] {
  --media-set-orb: #fcd612;
  --media-set-orb-rgb: 252, 214, 18;
}
html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button="price"] {
  --media-set-orb: #38bdf8;
  --media-set-orb-rgb: 56, 189, 248;
}
html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button="sites"] {
  --media-set-orb: #f97316;
  --media-set-orb-rgb: 249, 115, 22;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button] {
  border-color: rgba(var(--media-set-orb-rgb), 0.34) !important;
  background: rgba(var(--wmedia-skin-panel-rgb), 0.70) !important;
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.032),
    0 0 12px rgba(var(--media-set-orb-rgb), 0.10) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button] span {
  border-color: rgba(var(--media-set-orb-rgb), 0.34) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.32), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(var(--media-set-orb-rgb), 0.64) 0 34%, rgba(var(--media-set-orb-rgb), 0.28) 54%, rgba(8, 12, 22, 0.68) 100%) !important;
  box-shadow:
    inset 0 0 7px rgba(255, 255, 255, 0.06),
    0 0 9px rgba(var(--media-set-orb-rgb), 0.24),
    0 0 18px rgba(var(--media-set-orb-rgb), 0.10) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-set-button[data-interface-set-button].is-active span {
  border-color: rgba(var(--media-set-orb-rgb), 0.58) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.42), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(var(--media-set-orb-rgb), 0.82) 0 34%, rgba(var(--media-set-orb-rgb), 0.38) 54%, rgba(8, 12, 22, 0.68) 100%) !important;
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(var(--media-set-orb-rgb), 0.42),
    0 0 24px rgba(var(--media-set-orb-rgb), 0.18) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-playback-status,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-toggle,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-controls-toggle,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-jump-link,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-primary-action {
  border-color: rgba(var(--iron-steel-chrome-rgb), 0.68) !important;
  background:
    linear-gradient(145deg, rgba(var(--wmedia-skin-primary-rgb), 0.11), rgba(var(--wmedia-skin-secondary-rgb), 0.060)),
    rgba(var(--wmedia-skin-panel-rgb), 0.68) !important;
  color: rgba(248, 250, 252, 0.94) !important;
  box-shadow:
    0 0 0 1px rgba(var(--iron-steel-chrome-rgb), 0.13),
    0 0 22px rgba(var(--wmedia-skin-secondary-rgb), 0.13),
    inset 0 0 18px rgba(var(--wmedia-skin-secondary-rgb), 0.045) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-jump-link,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-controls-toggle {
  color: var(--iron-steel-gold) !important;
  text-shadow: 0 0 12px rgba(var(--iron-steel-gold-rgb), 0.42) !important;
  border-color: rgba(var(--iron-steel-chrome-rgb), 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(var(--iron-steel-chrome-rgb), 0.16),
    0 14px 30px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(var(--iron-steel-chrome-rgb), 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 26px rgba(var(--iron-steel-chrome-rgb), 0.04) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse {
  border-color: rgba(var(--iron-steel-arc-rgb), 0.78) !important;
  background:
    radial-gradient(circle at 20% 14%, rgba(var(--iron-steel-arc-rgb), 0.12), transparent 42%),
    linear-gradient(145deg, rgba(8, 12, 19, 0.92), rgba(14, 18, 26, 0.64)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--iron-steel-arc-rgb), 0.18),
    0 14px 30px rgba(0, 0, 0, 0.18),
    0 0 24px rgba(var(--iron-steel-arc-rgb), 0.22),
    0 0 44px rgba(var(--iron-steel-arc-rgb), 0.12),
    inset 0 0 20px rgba(var(--iron-steel-arc-rgb), 0.06) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse::before {
  background: linear-gradient(90deg, transparent, rgba(var(--iron-steel-arc-rgb), 0.24), rgba(var(--iron-steel-arc-rgb), 0.14), transparent) !important;
  opacity: 0.52 !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:not(:hover):not(:focus-visible):not(.is-active) {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(32, 37, 48, 0.78), rgba(12, 16, 25, 0.91) 56%, rgba(5, 8, 16, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(226, 232, 240, 0.12), transparent 64%),
    rgba(255, 255, 255, 0.028) !important;
  box-shadow:
    0 0 0 1px rgba(248, 250, 252, 0.032),
    0 0 14px rgba(15, 23, 42, 0.36),
    inset 0 1px 0 rgba(248, 250, 252, 0.13),
    inset 0 0 18px rgba(226, 232, 240, 0.035),
    inset 0 -9px 16px rgba(0, 0, 0, 0.28) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82),
    0 0 9px rgba(148, 163, 184, 0.18) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:not(:hover):not(:focus-visible):not(.is-active)::after {
  background: rgba(148, 163, 184, 0.42) !important;
  box-shadow:
    0 0 8px rgba(148, 163, 184, 0.22),
    0 0 14px rgba(15, 23, 42, 0.28) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(1):hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(1):focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(1).is-active {
  border-color: rgba(34, 197, 94, 0.58) !important;
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.22), rgba(5, 15, 12, 0.86)) !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.22), inset 0 0 20px rgba(34, 197, 94, 0.08) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(2):hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(2):focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(2).is-active {
  border-color: rgba(139, 92, 246, 0.58) !important;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.22), rgba(14, 10, 28, 0.86)) !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.22), inset 0 0 20px rgba(139, 92, 246, 0.08) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(3):hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(3):focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:nth-child(3).is-active {
  border-color: rgba(236, 72, 153, 0.58) !important;
  background: linear-gradient(145deg, rgba(236, 72, 153, 0.22), rgba(28, 10, 20, 0.86)) !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.22), inset 0 0 20px rgba(236, 72, 153, 0.08) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-mute {
  border-color: rgba(var(--wmedia-mute-primary-rgb), 0.48) !important;
  background:
    linear-gradient(145deg, rgba(18, 24, 34, 0.78), rgba(6, 9, 18, 0.82)),
    rgba(255, 255, 255, 0.030) !important;
  box-shadow:
    0 0 0 1px rgba(var(--wmedia-mute-primary-rgb), 0.10),
    0 0 22px rgba(var(--wmedia-mute-primary-rgb), 0.16) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-mute::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-mute-stick {
  background: linear-gradient(180deg, rgba(var(--wmedia-mute-primary-rgb), 0.58), rgba(var(--wmedia-mute-primary-rgb), 0.18)) !important;
  box-shadow: 0 0 14px rgba(var(--wmedia-mute-primary-rgb), 0.22) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-mute-icon path {
  stroke: rgba(248, 250, 252, 0.90) !important;
  fill: none !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-mute-icon .interface-media-mute-speaker {
  fill: rgba(248, 250, 252, 0.92) !important;
  stroke: none !important;
}
/* =========================
   WInterface Solo Iron Steel Media Parity
========================= */

/* === WInterface Solo v4.0 Document Player Frame ===
   Lets Bay 7 PDF/DOCX/ePub cards use the same WInterface Media Player frame
   pattern as website cards without changing existing video, website, recorder,
   desktop, tablet, or ultrawide behavior. */
.interface-system .interface-video-frame.is-interface-file-frame {
  background:
    radial-gradient(circle at 18% 0%, rgba(68, 200, 255, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(8, 17, 29, 0.98), rgba(11, 20, 32, 0.94));
  border-color: rgba(174, 184, 197, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 28px rgba(68, 200, 255, 0.16),
    0 0 42px rgba(174, 184, 197, 0.10);
}

.interface-system .interface-video-frame.is-interface-file-frame iframe[data-interface-media-frame] {
  width: 100%;
  height: 100%;
  border: 0;
  background: #050a10;
}
/* === WInterface Solo v4.0 Document Player Frame === */
/* === WInterface Solo DEV badge === */
.dev-environment-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 9999;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(104, 232, 255, .48);
  border-radius: 999px;
  background: rgba(8, 13, 18, .78);
  color: rgba(232, 245, 255, .94);
  font-family: Inter, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(104, 232, 255, .18);
  backdrop-filter: blur(16px);
}
.dev-environment-banner span {
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: var(--theme-accent, #68e8ff);
  box-shadow: 0 0 14px rgba(104, 232, 255, .9);
}
/* === WInterface Solo DEV badge === */

/* === WInterface v4.0 Iron Steel Right-Nav Controller Cyan Border Section ===
   Scope: default/Iron Steel theme only. Restores the right-nav Bay / Back / Next
   controller frame to the arc-reactor cyan treatment while preserving all layout,
   button logic, media behavior, and other theme styling. */
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel .interface-signal-pulse,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel .interface-signal-pulse {
  border-color: rgba(116, 234, 255, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(116, 234, 255, 0.18),
    0 14px 30px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(116, 234, 255, 0.18),
    0 0 44px rgba(91, 190, 255, 0.10),
    inset 0 0 22px rgba(116, 234, 255, 0.055) !important;
}

html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel .interface-signal-pulse::before,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel .interface-signal-pulse::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(116, 234, 255, 0.24),
    rgba(91, 190, 255, 0.14),
    transparent
  ) !important;
  opacity: 0.50 !important;
}
/* === WInterface v4.0 Iron Steel Right-Nav Controller Cyan Border Section === */


/* === WInterface Solo v4.0 Global Hide Controls Slot Authority ===
   Single adjustable placement authority for the Hide Controls oval in standard view.
   Scope: controls visible only, not Expanded/Snap view, command bar visible or hidden.
   This intentionally does not target the Show Controls state. Adjust only this variable
   to move the Hide Controls button in both normal standard-view command-bar states. */
:root {
  --winterface-standard-hide-controls-y: 0.15rem;
}

body.winterface-standalone:not(.winterface-media-controls-hidden) #winterface.interface-section.interface-system-is-media:not(.interface-media-controls-hidden):not(.interface-system-media-expanded) .interface-media-controls-toggle,
body.winterface-dev-build:not(.winterface-media-controls-hidden) #winterface.interface-section.interface-system-is-media:not(.interface-media-controls-hidden):not(.interface-system-media-expanded) .interface-media-controls-toggle {
  --winterface-media-controls-toggle-transform: translateY(var(--winterface-standard-hide-controls-y)) scale(1);
  transform: translateY(var(--winterface-standard-hide-controls-y)) scale(1) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 35 !important;
}

body.winterface-standalone:not(.winterface-media-controls-hidden) #winterface.interface-section.interface-system-is-media:not(.interface-media-controls-hidden):not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-standalone:not(.winterface-media-controls-hidden) #winterface.interface-section.interface-system-is-media:not(.interface-media-controls-hidden):not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-standalone:not(.winterface-media-controls-hidden) #winterface.interface-section.interface-system-is-media:not(.interface-media-controls-hidden):not(.interface-system-media-expanded) .interface-media-controls-toggle:active,
body.winterface-dev-build:not(.winterface-media-controls-hidden) #winterface.interface-section.interface-system-is-media:not(.interface-media-controls-hidden):not(.interface-system-media-expanded) .interface-media-controls-toggle:hover,
body.winterface-dev-build:not(.winterface-media-controls-hidden) #winterface.interface-section.interface-system-is-media:not(.interface-media-controls-hidden):not(.interface-system-media-expanded) .interface-media-controls-toggle:focus-visible,
body.winterface-dev-build:not(.winterface-media-controls-hidden) #winterface.interface-section.interface-system-is-media:not(.interface-media-controls-hidden):not(.interface-system-media-expanded) .interface-media-controls-toggle:active {
  transform: translateY(var(--winterface-standard-hide-controls-y)) scale(1) !important;
}
/* === WInterface Solo v4.0 Global Hide Controls Slot Authority === */

/* === WInterface Solo v4.0 Global Media Mute Orb Y Authority ===
   Single adjustable vertical nudge for the Mute / Unmute Media audio orb.
   Scope: WInterface media mode in standard and Expanded/Snap view, command bar visible or hidden.
   Adjust only --winterface-media-mute-y-nudge to move the orb consistently in both media views. */
:root {
  --winterface-media-mute-y-nudge: 0.42rem;
  --winterface-standard-media-mute-base-y: 0.04rem;
  --winterface-expanded-media-mute-base-y: -0.14rem;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute,
html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute,
html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute {
  transform: translateY(calc(var(--winterface-standard-media-mute-base-y) + var(--winterface-media-mute-y-nudge))) !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:hover,
html body.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:focus-visible,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:hover,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:focus-visible,
html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:hover,
html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:focus-visible,
html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:hover,
html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-media-mute:focus-visible {
  transform: translateY(calc(var(--winterface-standard-media-mute-base-y) + var(--winterface-media-mute-y-nudge) - 0.08rem)) scale(1.03) !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute,
html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute,
html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute {
  transform: translateY(calc(var(--winterface-expanded-media-mute-base-y) + var(--winterface-media-mute-y-nudge))) scale(0.98) !important;
}

html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:hover,
html body.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:focus-visible,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:hover,
html body.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:focus-visible,
html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:hover,
html body.winterface-commandbar-hidden.winterface-standalone #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:focus-visible,
html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:hover,
html body.winterface-commandbar-hidden.winterface-dev-build #winterface.interface-section.interface-system-is-media.interface-system-media-expanded .interface-media-mute:focus-visible {
  transform: translateY(calc(var(--winterface-expanded-media-mute-base-y) + var(--winterface-media-mute-y-nudge) - 0.08rem)) scale(1.03) !important;
}
/* === WInterface Solo v4.0 Global Media Mute Orb Y Authority === */


/* === F11 Fullscreen Bay Header Layout ===
   Scope: browser fullscreen media header only. Keeps the Bay label/subtitle
   contained and aligns the bay-selector orb stack within the header. */
html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-header {
  display: grid !important;
  grid-template-columns: 2.82rem minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  column-gap: 0.28rem !important;
  padding-left: 0.68rem !important;
  padding-right: 0.34rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-header > div:first-child {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 2.82rem !important;
  min-width: 2.82rem !important;
  max-width: 2.82rem !important;
  text-align: left !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-label,
html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-subtitle {
  display: block !important;
  width: auto !important;
  max-width: 2.82rem !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform: none !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-label {
  font-size: 0.50rem !important;
  line-height: 0.88 !important;
  letter-spacing: 0.020em !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-subtitle {
  margin-top: 0.08rem !important;
  font-size: 0.52rem !important;
  line-height: 0.90 !important;
  letter-spacing: 0.002em !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-header .interface-set-controls {
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 2 !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-header .interface-set-button {
  width: 1.03rem !important;
  min-width: 1.03rem !important;
  max-width: 1.03rem !important;
  height: 1.03rem !important;
  min-height: 1.03rem !important;
  max-height: 1.03rem !important;
  flex: 0 0 1.03rem !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media .interface-rail-header .interface-set-button span {
  inset: 0.28rem !important;
  border-radius: 50% !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-header .interface-set-controls {
  gap: 0.18rem !important;
  min-width: 0 !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header {
  grid-template-columns: 4.15rem minmax(0, 1fr) !important;
  column-gap: 0.20rem !important;
  padding-left: 0.62rem !important;
  padding-right: 0.22rem !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header > div:first-child {
  width: 4.15rem !important;
  min-width: 4.15rem !important;
  max-width: 4.15rem !important;
  justify-self: start !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-label,
html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-subtitle {
  max-width: 4.15rem !important;
  text-align: left !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-label {
  font-size: 0.74rem !important;
  line-height: 0.94 !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-subtitle {
  margin-top: 0.08rem !important;
  font-size: 0.82rem !important;
  line-height: 0.96 !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header .interface-set-controls {
  justify-self: center !important;
  justify-content: center !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header .interface-set-button {
  width: 1.08rem !important;
  min-width: 1.08rem !important;
  max-width: 1.08rem !important;
  height: 1.08rem !important;
  min-height: 1.08rem !important;
  max-height: 1.08rem !important;
  flex-basis: 1.08rem !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header .interface-set-button span {
  inset: 0.29rem !important;
}
/* === F11 Fullscreen Bay Header Layout === */

/* === F11 Normal Bay Header Type Scale ===
   Scope: browser fullscreen normal media header only. Keeps the Bay label
   and subtitle scaled inside the title column without changing the orb stack. */
html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-header > div:first-child {
  width: 3.10rem !important;
  min-width: 3.10rem !important;
  max-width: 3.10rem !important;
  justify-self: start !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-label,
html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-subtitle {
  max-width: 3.10rem !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform: none !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-label {
  font-size: 0.76rem !important;
  line-height: 0.90 !important;
  letter-spacing: 0.008em !important;
}

html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-is-media:not(.interface-system-media-expanded) .interface-rail-subtitle {
  margin-top: 0.06rem !important;
  font-size: 0.74rem !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
}
/* === F11 Normal Bay Header Type Scale === */


/* Blue Chrome visual layer. */
/* =========================
   WINTERFACE XAVIER BLUE CHROME THEME
   WInterface-only scope. No page-background theme wash.
   Palette reference: Xavier Blue #0C2340, Running Man Blue #0033A0,
   Cura Blue #6CACE4, Xavier Grey #9EA2A2, D'artagnan Grey #D1D1CE.
   Gold/yellow intentionally excluded.
========================= */

html[data-winterface-theme="blue-chrome"] #winterface.interface-section {
  --xu-blue: #0c2340;
  --xu-blue-dark: #061426;
  --xu-blue-deep: #020812;
  --xu-running-blue: #0033a0;
  --xu-running-blue-soft: rgba(0, 51, 160, 0.22);
  --xu-running-blue-glow: rgba(0, 51, 160, 0.44);
  --xu-cura-blue: #6cace4;
  --xu-cura-blue-soft: rgba(108, 172, 228, 0.20);
  --xu-cura-blue-glow: rgba(108, 172, 228, 0.48);
  --xu-grey: #9ea2a2;
  --xu-grey-soft: rgba(158, 162, 162, 0.22);
  --xu-dartagnan-grey: #d1d1ce;
  --xu-dartagnan-soft: rgba(209, 209, 206, 0.16);
  --xu-white-blue: #f3f8fc;
  --xu-text: #f6f9fc;
  --xu-muted: #c8d7e6;
  --xu-dim: #8fa1b5;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(12, 35, 64, 0.72),
    rgba(0, 51, 160, 0.62),
    rgba(108, 172, 228, 0.44),
    rgba(158, 162, 162, 0.26),
    transparent
  );
  box-shadow:
    0 0 20px rgba(0, 51, 160, 0.22),
    0 0 38px rgba(108, 172, 228, 0.16);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-shell {
  isolation: isolate;
  border-color: rgba(108, 172, 228, 0.34);
  background:
    radial-gradient(circle at 10% 12%, rgba(0, 51, 160, 0.32), transparent 36%),
    radial-gradient(circle at 88% 16%, rgba(108, 172, 228, 0.20), transparent 38%),
    radial-gradient(circle at 48% 94%, rgba(158, 162, 162, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(243, 248, 252, 0.070), rgba(243, 248, 252, 0.020)),
    linear-gradient(145deg, #07172c, #020812 74%);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(108, 172, 228, 0.10),
    0 0 76px rgba(0, 51, 160, 0.26),
    0 0 94px rgba(108, 172, 228, 0.12),
    inset 0 0 74px rgba(243, 248, 252, 0.035);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-shell::before {
  border-color: rgba(108, 172, 228, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(209, 209, 206, 0.08),
    inset 0 0 46px rgba(0, 51, 160, 0.07);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-shell::after {
  background-image:
    linear-gradient(rgba(108, 172, 228, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 51, 160, 0.070) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(209, 209, 206, 0.052) 48%, transparent 50% 100%),
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(108, 172, 228, 0.18), transparent 30%);
  background-size: 42px 42px, 42px 42px, 170px 170px, auto;
  opacity: 0.74;
  mask-image: radial-gradient(circle at center, #000, transparent 86%);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-ambient {
  opacity: 0.94;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-orbit {
  border-color: rgba(108, 172, 228, 0.21);
  box-shadow:
    inset 0 0 30px rgba(0, 51, 160, 0.09),
    0 0 38px rgba(0, 51, 160, 0.14),
    0 0 62px rgba(108, 172, 228, 0.10);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-orbit-one {
  border-top-color: rgba(108, 172, 228, 0.72);
  border-right-color: rgba(0, 51, 160, 0.58);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-orbit-two {
  border-bottom-color: rgba(209, 209, 206, 0.42);
  border-left-color: rgba(108, 172, 228, 0.46);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-scan {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 51, 160, 0.16),
    rgba(108, 172, 228, 0.12),
    rgba(209, 209, 206, 0.055),
    transparent
  );
  filter: blur(1.5px);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-status-bar,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-core,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-side-panel {
  background:
    linear-gradient(145deg, rgba(7, 23, 44, 0.93), rgba(2, 8, 18, 0.80)),
    rgba(6, 20, 38, 0.86);
  border-color: rgba(108, 172, 228, 0.23);
  box-shadow:
    inset 0 0 34px rgba(243, 248, 252, 0.026),
    0 0 0 1px rgba(209, 209, 206, 0.020),
    0 18px 48px rgba(0, 0, 0, 0.34);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-core::before {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 51, 160, 0.25), transparent 40%),
    radial-gradient(circle at 86% 70%, rgba(108, 172, 228, 0.11), transparent 42%),
    linear-gradient(135deg, rgba(243, 248, 252, 0.034), transparent 50%);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-status-bar {
  color: var(--xu-white-blue);
  text-shadow: 0 0 12px rgba(108, 172, 228, 0.28);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-status-bar > span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-status-bar > .interface-system-toggle {
  border-color: rgba(108, 172, 228, 0.24);
  background:
    linear-gradient(145deg, rgba(0, 51, 160, 0.115), rgba(108, 172, 228, 0.050)),
    rgba(243, 248, 252, 0.026);
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.035),
    0 0 18px rgba(0, 51, 160, 0.110),
    inset 0 0 16px rgba(108, 172, 228, 0.022);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-system-toggle i,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-status-bar > span:nth-child(1) i {
  background: var(--xu-cura-blue);
  box-shadow:
    0 0 10px rgba(108, 172, 228, 0.98),
    0 0 24px rgba(108, 172, 228, 0.58),
    0 0 44px rgba(0, 51, 160, 0.28);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-system-toggle i::after,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-status-bar > span:nth-child(1) i::after {
  background: radial-gradient(circle, rgba(108, 172, 228, 0.42), rgba(0, 51, 160, 0.14) 38%, transparent 70%);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-status-bar > span:nth-child(3) i {
  background: var(--xu-dartagnan-grey);
  box-shadow:
    0 0 10px rgba(209, 209, 206, 0.76),
    0 0 22px rgba(108, 172, 228, 0.34);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail-label,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-output-label,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-response .panel-label {
  color: var(--xu-cura-blue) !important;
  text-shadow:
    0 0 10px rgba(108, 172, 228, 0.58),
    0 0 22px rgba(108, 172, 228, 0.20);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail-subtitle,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-response p:not(.panel-label),
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-system-list li,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-showcase-caption p,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip strong {
  color: var(--xu-muted) !important;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-response h3,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-output-card strong,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-jump-link,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path strong,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-showcase-caption strong {
  color: var(--xu-text);
}

/* Contextual bay colors: Active Pathways = Xavier Blue, Operational = Running Man Blue, Showcase = Cura Blue/Grey. */
html[data-winterface-theme="blue-chrome"] #winterface.interface-section.interface-system-set-primary,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-shell {
  --interface-accent: var(--xu-cura-blue);
  --interface-accent-rgb: 108, 172, 228;
  --interface-accent-text: #b8dcf7;
  --interface-accent-soft: rgba(108, 172, 228, 0.125);
  --interface-accent-border: rgba(108, 172, 228, 0.60);
  --interface-accent-border-strong: rgba(184, 220, 247, 0.76);
  --interface-accent-glow: rgba(108, 172, 228, 0.28);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section.interface-system-set-operations {
  --interface-accent: var(--xu-running-blue);
  --interface-accent-rgb: 0, 51, 160;
  --interface-accent-text: #8fb4ff;
  --interface-accent-soft: rgba(0, 51, 160, 0.140);
  --interface-accent-border: rgba(0, 51, 160, 0.64);
  --interface-accent-border-strong: rgba(143, 180, 255, 0.78);
  --interface-accent-glow: rgba(0, 51, 160, 0.32);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section.interface-system-set-media {
  --interface-accent: var(--xu-grey);
  --interface-accent-rgb: 158, 162, 162;
  --interface-accent-text: #d1d1ce;
  --interface-accent-soft: rgba(158, 162, 162, 0.120);
  --interface-accent-border: rgba(158, 162, 162, 0.55);
  --interface-accent-border-strong: rgba(209, 209, 206, 0.78);
  --interface-accent-glow: rgba(158, 162, 162, 0.22);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path {
  border-color: rgba(var(--interface-accent-rgb), 0.24);
  background:
    linear-gradient(145deg, rgba(var(--interface-accent-rgb), 0.070), rgba(243, 248, 252, 0.028)),
    rgba(243, 248, 252, 0.026);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path:hover,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path:focus-visible,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path.is-active {
  color: var(--xu-text);
  border-color: var(--interface-accent-border);
  background:
    linear-gradient(145deg, var(--interface-accent-soft), rgba(243, 248, 252, 0.045)),
    rgba(var(--interface-accent-rgb), 0.070);
  box-shadow:
    0 0 0 1px rgba(var(--interface-accent-rgb), 0.060),
    0 0 24px var(--interface-accent-glow),
    inset 0 0 24px rgba(var(--interface-accent-rgb), 0.040);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path span {
  color: var(--interface-accent-text);
  background:
    radial-gradient(circle at 36% 28%, rgba(243, 248, 252, 0.26), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(var(--interface-accent-rgb), 0.25), rgba(var(--interface-accent-rgb), 0.075) 58%, rgba(12, 35, 64, 0.26) 100%);
  border-color: rgba(var(--interface-accent-rgb), 0.38);
  box-shadow:
    inset 0 0 14px rgba(var(--interface-accent-rgb), 0.10),
    0 0 18px rgba(var(--interface-accent-rgb), 0.14);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.68),
    0 0 10px rgba(var(--interface-accent-rgb), 0.54);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path:hover span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path:focus-visible span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-path.is-active span {
  color: #ffffff;
  border-color: var(--interface-accent-border-strong);
  background:
    radial-gradient(circle at 36% 28%, rgba(243, 248, 252, 0.34), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(var(--interface-accent-rgb), 0.34), rgba(var(--interface-accent-rgb), 0.13) 58%, rgba(12, 35, 64, 0.18) 100%);
  box-shadow:
    inset 0 0 16px rgba(var(--interface-accent-rgb), 0.18),
    0 0 22px rgba(var(--interface-accent-rgb), 0.28),
    0 0 40px rgba(var(--interface-accent-rgb), 0.14);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-output-card,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-video-frame,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-showcase-frame,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-command-line,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-playback-status,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-media-toggle,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-jump-link {
  border-color: rgba(108, 172, 228, 0.28);
  background:
    linear-gradient(145deg, rgba(108, 172, 228, 0.100), rgba(12, 35, 64, 0.20)),
    rgba(243, 248, 252, 0.040);
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.040),
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(108, 172, 228, 0.10),
    inset 0 0 24px rgba(108, 172, 228, 0.040);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-command-line {
  border-color: rgba(108, 172, 228, 0.48) !important;
  background:
    linear-gradient(145deg, rgba(243, 248, 252, 0.080), rgba(243, 248, 252, 0.032)),
    radial-gradient(circle at left center, rgba(108, 172, 228, 0.13), transparent 42%),
    rgba(12, 35, 64, 0.56) !important;
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.090),
    0 0 26px rgba(108, 172, 228, 0.17),
    inset 0 0 28px rgba(108, 172, 228, 0.066) !important;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-command-line::before,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-playback-status::before,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-media-toggle::before,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-jump-link::before {
  background: linear-gradient(90deg, transparent, rgba(108, 172, 228, 0.25), rgba(0, 51, 160, 0.15), rgba(209, 209, 206, 0.08), transparent) !important;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-command-prefix,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-cursor,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-showcase-caption span {
  color: var(--xu-cura-blue) !important;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-cursor {
  background: var(--xu-cura-blue) !important;
  box-shadow: 0 0 18px rgba(108, 172, 228, 0.72) !important;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-system-list li::before {
  background: var(--xu-cura-blue) !important;
  box-shadow:
    0 0 10px rgba(108, 172, 228, 0.96),
    0 0 22px rgba(108, 172, 228, 0.56),
    0 0 38px rgba(0, 51, 160, 0.26) !important;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-showcase-caption span {
  background:
    linear-gradient(145deg, rgba(12, 35, 64, 0.84), rgba(6, 20, 38, 0.62)),
    radial-gradient(circle at 12% 50%, rgba(108, 172, 228, 0.22), transparent 62%);
  border-color: rgba(108, 172, 228, 0.38);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(108, 172, 228, 0.13),
    inset 0 0 18px rgba(108, 172, 228, 0.050);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-media-frame-shell::before {
  background: linear-gradient(135deg, rgba(108, 172, 228, 0.32), rgba(0, 51, 160, 0.22), rgba(158, 162, 162, 0.12));
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-showcase-frame::after {
  background:
    linear-gradient(180deg, transparent 48%, rgba(12, 35, 64, 0.84)),
    linear-gradient(90deg, rgba(108, 172, 228, 0.16), transparent 28%, transparent 72%, rgba(158, 162, 162, 0.12));
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(1) {
  border-color: rgba(108, 172, 228, 0.36);
  background:
    linear-gradient(145deg, rgba(108, 172, 228, 0.105), rgba(12, 35, 64, 0.070)),
    radial-gradient(circle at 50% 16%, rgba(108, 172, 228, 0.19), transparent 45%),
    rgba(243, 248, 252, 0.034);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(2) {
  border-color: rgba(0, 51, 160, 0.42);
  background:
    linear-gradient(145deg, rgba(0, 51, 160, 0.145), rgba(108, 172, 228, 0.055)),
    radial-gradient(circle at 50% 16%, rgba(0, 51, 160, 0.22), transparent 45%),
    rgba(243, 248, 252, 0.034);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(3) {
  border-color: rgba(158, 162, 162, 0.40);
  background:
    linear-gradient(145deg, rgba(158, 162, 162, 0.115), rgba(108, 172, 228, 0.055)),
    radial-gradient(circle at 50% 16%, rgba(209, 209, 206, 0.16), transparent 45%),
    rgba(243, 248, 252, 0.034);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(1)::after {
  background:
    radial-gradient(circle at 34% 28%, rgba(243, 248, 252, 0.42), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(108, 172, 228, 0.56), rgba(108, 172, 228, 0.20) 43%, rgba(12, 35, 64, 0.68) 69%);
  border-color: rgba(184, 220, 247, 0.62);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(2)::after {
  background:
    radial-gradient(circle at 34% 28%, rgba(243, 248, 252, 0.40), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(0, 51, 160, 0.62), rgba(0, 51, 160, 0.25) 43%, rgba(12, 35, 64, 0.70) 69%);
  border-color: rgba(143, 180, 255, 0.64);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(3)::after {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.46), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(209, 209, 206, 0.54), rgba(158, 162, 162, 0.22) 43%, rgba(12, 35, 64, 0.68) 69%);
  border-color: rgba(209, 209, 206, 0.66);
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(1) span {
  color: #b8dcf7;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(2) span {
  color: #8fb4ff;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-signal-chip:nth-child(3) span {
  color: #d1d1ce;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-jump-link,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-media-toggle,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-playback-status {
  color: var(--xu-text) !important;
  border-color: rgba(108, 172, 228, 0.42) !important;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-jump-link:hover,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-jump-link:focus-visible,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-media-toggle:hover,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-media-toggle:focus-visible {
  color: #ffffff !important;
  border-color: rgba(108, 172, 228, 0.70) !important;
  background:
    linear-gradient(145deg, rgba(108, 172, 228, 0.22), rgba(0, 51, 160, 0.16)),
    radial-gradient(circle at 18% 18%, rgba(108, 172, 228, 0.16), transparent 44%),
    rgba(243, 248, 252, 0.058) !important;
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.095),
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 36px rgba(108, 172, 228, 0.24),
    0 0 54px rgba(0, 51, 160, 0.16),
    inset 0 0 30px rgba(108, 172, 228, 0.070) !important;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-playback-dot {
  background: var(--xu-cura-blue);
  box-shadow:
    0 0 12px rgba(108, 172, 228, 0.92),
    0 0 28px rgba(108, 172, 228, 0.46),
    0 0 42px rgba(0, 51, 160, 0.24);
}

html[data-winterface-theme="blue-chrome"] body.winterface-offline #winterface.interface-section .interface-system-toggle i {
  background: var(--xu-grey);
  box-shadow:
    0 0 10px rgba(158, 162, 162, 0.78),
    0 0 22px rgba(158, 162, 162, 0.38);
}

html[data-winterface-theme="blue-chrome"] body.winterface-offline #winterface.interface-section .interface-system-toggle i::after {
  background: radial-gradient(circle, rgba(158, 162, 162, 0.28), rgba(108, 172, 228, 0.10) 38%, transparent 70%);
}

/* Fullscreen keeps the same clean Xavier system shell without affecting the page behind it. */
html[data-winterface-theme="blue-chrome"] #winterface.interface-section.is-winterface-maximized .interface-shell {
  background:
    radial-gradient(circle at 9% 11%, rgba(0, 51, 160, 0.34), transparent 38%),
    radial-gradient(circle at 91% 13%, rgba(108, 172, 228, 0.22), transparent 38%),
    radial-gradient(circle at 48% 95%, rgba(158, 162, 162, 0.14), transparent 44%),
    linear-gradient(145deg, rgba(243, 248, 252, 0.072), rgba(243, 248, 252, 0.022)),
    linear-gradient(145deg, #07172c, #020812 74%);
}

@media (max-width: 768px) {
  html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-shell {
    border-color: rgba(108, 172, 228, 0.30);
  }

  html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-status-bar,
  html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail,
  html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-core,
  html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-side-panel {
    border-color: rgba(108, 172, 228, 0.20);
  }
}


/* Blue Chrome slot 03 skin layer. */
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section {
  --interface-accent: #6cace4 !important;
  --interface-accent-rgb: 108, 172, 228 !important;
  --interface-accent-text: #b8dcf7 !important;
  --interface-accent-soft: rgba(108, 172, 228, 0.14) !important;
  --interface-accent-border: rgba(108, 172, 228, 0.58) !important;
  --interface-accent-border-strong: rgba(184, 220, 247, 0.78) !important;
  --interface-accent-glow: rgba(108, 172, 228, 0.30) !important;
  --winterface-accent: #6cace4 !important;
  --winterface-accent-rgb: 108, 172, 228 !important;
  --winterface-accent-text: #b8dcf7 !important;
  --winterface-accent-soft: rgba(108, 172, 228, 0.14) !important;
  --winterface-accent-border: rgba(108, 172, 228, 0.58) !important;
  --winterface-accent-glow: rgba(108, 172, 228, 0.30) !important;
  color-scheme: dark !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section::before {
  background: linear-gradient(90deg, transparent, rgba(12, 35, 64, 0.72), rgba(0, 51, 160, 0.50), rgba(108, 172, 228, 0.36), transparent) !important;
  box-shadow: 0 0 28px rgba(108, 172, 228, 0.20), 0 0 52px rgba(0, 51, 160, 0.14) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-shell,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section.is-winterface-maximized .interface-shell {
  border-color: rgba(108, 172, 228, 0.36) !important;
  background:
    radial-gradient(circle at 9% 11%, rgba(0, 51, 160, 0.34), transparent 38%),
    radial-gradient(circle at 91% 13%, rgba(108, 172, 228, 0.22), transparent 38%),
    radial-gradient(circle at 48% 95%, rgba(158, 162, 162, 0.14), transparent 44%),
    linear-gradient(145deg, rgba(243, 248, 252, 0.072), rgba(243, 248, 252, 0.022)),
    linear-gradient(145deg, #07172c, #020812 74%) !important;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(108, 172, 228, 0.12),
    0 0 76px rgba(0, 51, 160, 0.25),
    0 0 94px rgba(108, 172, 228, 0.13),
    inset 0 0 74px rgba(243, 248, 252, 0.035) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-shell::before {
  border-color: rgba(108, 172, 228, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(209, 209, 206, 0.08), inset 0 0 46px rgba(0, 51, 160, 0.07) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-shell::after {
  background-image:
    linear-gradient(rgba(108, 172, 228, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 51, 160, 0.070) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(209, 209, 206, 0.052) 48%, transparent 50% 100%),
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(108, 172, 228, 0.18), transparent 30%) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-core,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-side-panel,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-output-card,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-output-card-soft,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-response,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse-readout {
  border-color: rgba(108, 172, 228, 0.24) !important;
  background:
    linear-gradient(145deg, rgba(7, 23, 44, 0.93), rgba(2, 8, 18, 0.80)),
    rgba(6, 20, 38, 0.86) !important;
  box-shadow:
    inset 0 0 34px rgba(243, 248, 252, 0.026),
    0 0 0 1px rgba(209, 209, 206, 0.020),
    0 18px 48px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(108, 172, 228, 0.075) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > .interface-system-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-theme-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-recorder-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-path,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-set-button,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-playback-status,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-controls-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-jump-link,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse-chip {
  border-color: rgba(108, 172, 228, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(108, 172, 228, 0.095), rgba(12, 35, 64, 0.20)),
    rgba(243, 248, 252, 0.034) !important;
  color: #f6f9fc !important;
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.045),
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(108, 172, 228, 0.10),
    inset 0 0 24px rgba(108, 172, 228, 0.040) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > span:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > .interface-system-toggle:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-theme-toggle:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-recorder-toggle:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-path:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-path:focus-visible,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-path.is-active,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-set-button:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-set-button:focus-visible,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-set-button.is-active,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-playback-status:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-playback-status:focus-visible,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-toggle:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-toggle:focus-visible,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-controls-toggle:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-controls-toggle:focus-visible,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-jump-link:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-jump-link:focus-visible,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse-chip:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse-chip:focus-visible,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse-chip.is-active {
  border-color: rgba(108, 172, 228, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(108, 172, 228, 0.22), rgba(0, 51, 160, 0.16)),
    radial-gradient(circle at 18% 18%, rgba(108, 172, 228, 0.16), transparent 44%),
    rgba(243, 248, 252, 0.058) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.10),
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 36px rgba(108, 172, 228, 0.24),
    0 0 54px rgba(0, 51, 160, 0.16),
    inset 0 0 30px rgba(108, 172, 228, 0.070) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-command-line,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-showcase-frame,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-video-frame {
  border-color: rgba(108, 172, 228, 0.48) !important;
  background:
    linear-gradient(145deg, rgba(243, 248, 252, 0.080), rgba(243, 248, 252, 0.032)),
    radial-gradient(circle at left center, rgba(108, 172, 228, 0.13), transparent 42%),
    rgba(12, 35, 64, 0.56) !important;
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.090),
    0 0 26px rgba(108, 172, 228, 0.17),
    inset 0 0 28px rgba(108, 172, 228, 0.066) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-path span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-set-button span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-system-toggle i,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > span i,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-playback-dot,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-system-list li::before,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-recorder-orb {
  background: #6cace4 !important;
  border-color: rgba(184, 220, 247, 0.76) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 10px rgba(108, 172, 228, 0.98),
    0 0 24px rgba(108, 172, 228, 0.58),
    0 0 44px rgba(0, 51, 160, 0.28) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-set-button:not(.is-active) span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > span:nth-child(3) i {
  background: #9ea2a2 !important;
  box-shadow: 0 0 10px rgba(209, 209, 206, 0.64), 0 0 22px rgba(108, 172, 228, 0.24) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail-label,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-output-label,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-response .panel-label,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-command-prefix,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-showcase-caption span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-chip span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse-label {
  color: #6cace4 !important;
  text-shadow: 0 0 10px rgba(108, 172, 228, 0.58), 0 0 22px rgba(108, 172, 228, 0.20) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-path strong,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-output-card strong,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-response h3,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-chip strong,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse-readout,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-jump-link {
  color: #f6f9fc !important;
  text-shadow: 0 0 12px rgba(108, 172, 228, 0.20) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail-subtitle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-response p:not(.panel-label),
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-system-list li,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-showcase-caption p {
  color: #c8d7e6 !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-chip {
  border-color: rgba(108, 172, 228, 0.30) !important;
  background:
    linear-gradient(145deg, rgba(108, 172, 228, 0.095), rgba(12, 35, 64, 0.13)),
    rgba(243, 248, 252, 0.034) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-chip::after {
  background:
    radial-gradient(circle at 34% 28%, rgba(243, 248, 252, 0.42), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(108, 172, 228, 0.56), rgba(108, 172, 228, 0.20) 43%, rgba(12, 35, 64, 0.68) 69%) !important;
  border-color: rgba(184, 220, 247, 0.62) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-playback-status.interface-playback-is-playing .interface-playback-dot,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-recorder-toggle.is-recording .interface-recorder-orb {
  background: #d1d1ce !important;
  box-shadow: 0 0 10px rgba(209, 209, 206, 0.88), 0 0 26px rgba(108, 172, 228, 0.42) !important;
}
/* === WInterface Solo Blue Chrome Slot 03 Final Skin Lock === */

/* === WInterface Solo Theme Consistency Lock ===
   Final visual-only overrides for Blue Chrome and Crimson Red. Keeps the
   selected-bay orb sync global while preventing alternate theme color bleed. */
html[data-winterface-theme="blue-chrome"] #winterface.interface-section {
  --winterface-theme-accent: #6cace4;
  --winterface-theme-accent-rgb: 108, 172, 228;
  --winterface-theme-accent-2: #d1d1ce;
  --winterface-theme-accent-2-rgb: 209, 209, 206;
  --winterface-theme-panel: rgba(7, 23, 44, 0.88);
  --winterface-theme-panel-soft: rgba(12, 35, 64, 0.68);
  --winterface-theme-border: rgba(108, 172, 228, 0.36);
  --winterface-theme-border-strong: rgba(209, 209, 206, 0.62);
}

html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --winterface-theme-accent: #ff2a2a;
  --winterface-theme-accent-rgb: 255, 42, 42;
  --winterface-theme-accent-2: #ff7a52;
  --winterface-theme-accent-2-rgb: 255, 122, 82;
  --winterface-theme-panel: rgba(8, 8, 9, 0.94);
  --winterface-theme-panel-soft: rgba(14, 10, 11, 0.88);
  --winterface-theme-border: rgba(255, 42, 42, 0.44);
  --winterface-theme-border-strong: rgba(255, 92, 68, 0.76);
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > .interface-system-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-theme-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-recorder-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-bar > span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-bar > .interface-system-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-theme-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle {
  border-color: var(--winterface-theme-border) !important;
  background:
    linear-gradient(145deg, rgba(var(--winterface-theme-accent-rgb), 0.095), rgba(var(--winterface-theme-accent-2-rgb), 0.045)),
    var(--winterface-theme-panel) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-theme-accent-rgb), 0.050),
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(var(--winterface-theme-accent-rgb), 0.10),
    inset 0 0 24px rgba(var(--winterface-theme-accent-2-rgb), 0.035) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-mode .interface-status-orb,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-count .interface-maximize-button .interface-status-orb,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-set-button.is-active span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-mode .interface-status-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-count .interface-maximize-button .interface-status-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-set-button.is-active span {
  background: var(--wfo-active-bay-accent) !important;
  border-color: rgba(var(--wfo-active-bay-accent-rgb), 0.62) !important;
  box-shadow:
    0 0 14px rgba(var(--wfo-active-bay-accent-rgb), 0.82),
    0 0 30px rgba(var(--wfo-active-bay-accent-rgb), 0.34),
    0 0 46px rgba(var(--wfo-active-bay-accent-rgb), 0.16) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-mode,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-mode {
  border-color: rgba(var(--wfo-active-bay-accent-rgb), 0.34) !important;
  background:
    linear-gradient(145deg, rgba(var(--wfo-active-bay-accent-rgb), 0.080), rgba(var(--winterface-theme-accent-rgb), 0.040)),
    var(--winterface-theme-panel) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-mode::before,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-mode::before {
  border-color: rgba(var(--wfo-active-bay-accent-rgb), 0.36) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-set-button.is-active,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-set-button.is-active {
  border-color: rgba(var(--wfo-active-bay-accent-rgb), 0.62) !important;
  background: rgba(var(--wfo-active-bay-accent-rgb), 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(var(--wfo-active-bay-accent-rgb), 0.070),
    0 0 22px rgba(var(--wfo-active-bay-accent-rgb), 0.24),
    inset 0 0 18px rgba(var(--wfo-active-bay-accent-rgb), 0.050) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-signal-pulse,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-jump-link {
  border-color: var(--winterface-theme-border-strong) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-theme-accent-2-rgb), 0.12),
    0 0 30px rgba(var(--winterface-theme-accent-rgb), 0.22),
    inset 0 0 28px rgba(var(--winterface-theme-accent-2-rgb), 0.070) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-jump-link:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-jump-link:focus-visible {
  border-color: rgba(var(--winterface-theme-accent-2-rgb), 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-theme-accent-2-rgb), 0.16),
    0 0 34px rgba(var(--winterface-theme-accent-rgb), 0.30),
    inset 0 0 30px rgba(var(--winterface-theme-accent-2-rgb), 0.090) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-shell,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section.is-winterface-maximized .interface-shell,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-bar,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-core,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-side-panel,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-output-card,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-output-card-soft,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-response,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse-readout {
  border-color: var(--winterface-theme-border) !important;
  background:
    linear-gradient(145deg, rgba(var(--winterface-theme-accent-rgb), 0.070), rgba(var(--winterface-theme-accent-2-rgb), 0.042)),
    radial-gradient(circle at 16% 12%, rgba(var(--winterface-theme-accent-rgb), 0.090), transparent 42%),
    var(--winterface-theme-panel-soft) !important;
  box-shadow:
    inset 0 0 34px rgba(248, 250, 252, 0.024),
    0 0 0 1px rgba(var(--winterface-theme-accent-rgb), 0.030),
    0 18px 48px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(var(--winterface-theme-accent-rgb), 0.090) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail-label,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-output-label,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-response .panel-label,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-command-prefix,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-showcase-caption span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-chip span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse-label {
  color: var(--winterface-theme-accent) !important;
  text-shadow: 0 0 10px rgba(var(--winterface-theme-accent-rgb), 0.48), 0 0 22px rgba(var(--winterface-theme-accent-rgb), 0.18) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-recorder-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle {
  border-color: rgba(var(--wfo-active-bay-accent-rgb), 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(var(--wfo-active-bay-accent-rgb), 0.080),
    0 0 24px rgba(var(--wfo-active-bay-accent-rgb), 0.22),
    inset 0 0 18px rgba(var(--winterface-theme-accent-rgb), 0.060) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-recorder-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-orb {
  background: var(--winterface-theme-accent) !important;
  border-color: rgba(var(--winterface-theme-accent-2-rgb), 0.66) !important;
  box-shadow:
    0 0 11px rgba(var(--winterface-theme-accent-rgb), 0.92),
    0 0 26px rgba(var(--winterface-theme-accent-rgb), 0.42),
    0 0 42px rgba(var(--wfo-active-bay-accent-rgb), 0.18) !important;
}
/* === WInterface Solo Theme Consistency Lock === */
/* === WInterface Solo Theme Detail Lock ===
   Targeted color consistency for Blue Chrome and Crimson Red. */
html[data-winterface-theme="blue-chrome"] #winterface.interface-section {
  --winterface-blue-chrome-navy-border: rgba(12, 35, 64, 0.88);
  --winterface-blue-chrome-navy-border-soft: rgba(12, 35, 64, 0.66);
  --winterface-blue-chrome-silver-border: rgba(209, 209, 206, 0.76);
  --winterface-blue-chrome-silver-border-soft: rgba(209, 209, 206, 0.56);
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-system-status-pill,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-count {
  border-color: var(--winterface-blue-chrome-silver-border) !important;
  box-shadow:
    0 0 0 1px rgba(209, 209, 206, 0.16),
    0 14px 34px rgba(0, 0, 0, 0.25),
    0 0 26px rgba(209, 209, 206, 0.18),
    inset 0 0 24px rgba(209, 209, 206, 0.060) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-mode,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-theme-toggle {
  border-color: var(--winterface-blue-chrome-navy-border) !important;
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.07),
    0 14px 34px rgba(0, 0, 0, 0.25),
    0 0 22px rgba(12, 35, 64, 0.42),
    inset 0 0 22px rgba(12, 35, 64, 0.16) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-mode::before,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-theme-toggle::before {
  border-color: var(--winterface-blue-chrome-navy-border-soft) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-command-line {
  border-color: var(--winterface-blue-chrome-silver-border) !important;
  box-shadow:
    0 0 0 1px rgba(209, 209, 206, 0.12),
    0 0 24px rgba(209, 209, 206, 0.18),
    0 0 32px rgba(108, 172, 228, 0.14),
    inset 0 0 24px rgba(209, 209, 206, 0.075) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), transparent 18%),
    radial-gradient(circle at 48% 50%, rgba(125, 211, 252, 0.96), rgba(56, 189, 248, 0.90) 48%, rgba(14, 116, 144, 0.92) 78%) !important;
  border-color: rgba(186, 230, 253, 0.82) !important;
  box-shadow:
    0 0 10px rgba(125, 211, 252, 0.86),
    0 0 24px rgba(56, 189, 248, 0.48),
    0 0 40px rgba(var(--wfo-active-bay-accent-rgb), 0.18) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle {
  border-color: rgba(var(--wfo-active-bay-accent-rgb), 0.66) !important;
  box-shadow:
    0 0 0 1px rgba(var(--wfo-active-bay-accent-rgb), 0.10),
    0 0 24px rgba(var(--wfo-active-bay-accent-rgb), 0.24),
    inset 0 0 18px rgba(226, 232, 240, 0.060) !important;
}
/* === WInterface Solo Theme Detail Lock === */


/* Crimson Red recorder orb color. */
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle {
  --interface-recorder-accent: #38bdf8 !important;
  --interface-recorder-accent-rgb: 56, 189, 248 !important;
  --interface-recorder-accent-soft-rgb: 125, 211, 252 !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle .interface-recorder-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle.is-recording .interface-recorder-orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), transparent 18%),
    radial-gradient(circle at 48% 50%, rgba(125, 211, 252, 0.96), rgba(56, 189, 248, 0.90) 48%, rgba(14, 116, 144, 0.92) 78%) !important;
  border-color: rgba(186, 230, 253, 0.82) !important;
  box-shadow:
    0 0 10px rgba(125, 211, 252, 0.86),
    0 0 24px rgba(56, 189, 248, 0.48),
    0 0 40px rgba(var(--wfo-active-bay-accent-rgb), 0.18) !important;
}

/* === WInterface Solo v4.0 Theme Border Detail Adjustment ===
   Scope: Code Green and Iron Steel visual border cleanup only.
   Keeps layout, content, recorder behavior, media routing, and JS logic unchanged. */
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-command-line,
html[data-winterface-theme="code-green"] #winterface.interface-section .interface-command-line {
  border-color: rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.14),
    0 14px 30px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.14),
    inset 0 0 0 1px rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.08),
    inset 0 0 24px rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.04) !important;
}

html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-status-bar > span,
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-status-bar > .interface-system-toggle,
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-status-bar .interface-status-mode,
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-theme-toggle,
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-status-bar .interface-status-count,
html[data-winterface-theme="code-green"] #winterface.interface-section .interface-status-bar > span,
html[data-winterface-theme="code-green"] #winterface.interface-section .interface-status-bar > .interface-system-toggle,
html[data-winterface-theme="code-green"] #winterface.interface-section .interface-status-bar .interface-status-mode,
html[data-winterface-theme="code-green"] #winterface.interface-section .interface-theme-toggle,
html[data-winterface-theme="code-green"] #winterface.interface-section .interface-status-bar .interface-status-count {
  border-color: rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.13),
    0 0 16px rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.14),
    inset 0 0 0 1px rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.055) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-command-line,
html[data-winterface-theme="default"] #winterface.interface-section .interface-command-line {
  border-color: rgba(var(--iron-steel-chrome-rgb, 185, 199, 207), 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(var(--iron-steel-chrome-rgb, 185, 199, 207), 0.16),
    0 14px 30px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(var(--iron-steel-chrome-rgb, 185, 199, 207), 0.13),
    inset 0 0 0 1px rgba(var(--iron-steel-chrome-rgb, 185, 199, 207), 0.09),
    inset 0 0 24px rgba(var(--iron-steel-chrome-rgb, 185, 199, 207), 0.04) !important;
}
/* === WInterface Solo v4.0 Theme Border Detail Adjustment === */

/* === WInterface Solo v4.0 Theme Slot Detail Tokens ===
   Centralized theme-slot border treatment for the four Style Matrix slots.
   This section intentionally mirrors the Iron Steel top-oval selector pattern
   so replaced themes can be updated through variables instead of scattered one-off selectors. */
html[data-winterface-theme="default"] #winterface.interface-section {
  --winterface-slot-top-primary-border: rgba(var(--iron-steel-chrome-rgb, 185, 199, 207), 0.82);
  --winterface-slot-top-secondary-border: rgba(var(--matrix-slot-default-left-rgb, 214, 180, 109), 0.86);
  --winterface-slot-command-border: rgba(var(--iron-steel-chrome-rgb, 185, 199, 207), 0.82);
  --winterface-slot-controls-border: rgba(var(--iron-steel-chrome-rgb, 185, 199, 207), 0.82);
  --winterface-slot-border-glow-rgb: var(--iron-steel-chrome-rgb, 185, 199, 207);
  --winterface-slot-media-action-border-rgb: var(--iron-steel-arc-rgb, 116, 234, 255);
  --winterface-slot-media-action-border-alpha: 0.86;
  --winterface-slot-media-action-hover-alpha: 0.96;
}

html[data-winterface-theme="code-green"] #winterface.interface-section {
  --winterface-slot-top-primary-border: rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.78);
  --winterface-slot-top-secondary-border: rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.78);
  --winterface-slot-command-border: rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.82);
  --winterface-slot-controls-border: rgba(var(--style-matrix-orb-left-rgb, 0, 255, 102), 0.76);
  --winterface-slot-border-glow-rgb: var(--style-matrix-orb-left-rgb, 0, 255, 102);
  --winterface-slot-media-action-border-rgb: var(--style-matrix-orb-left-rgb, 0, 255, 102);
  --winterface-slot-media-action-border-alpha: 0.72;
  --winterface-slot-media-action-hover-alpha: 0.84;
}

html[data-winterface-theme="blue-chrome"] #winterface.interface-section {
  --winterface-slot-chrome-rgb: 209, 209, 206;
  --winterface-slot-navy-rgb: 12, 35, 64;
  --winterface-slot-top-primary-border: rgba(var(--winterface-slot-chrome-rgb), 0.88);
  --winterface-slot-top-secondary-border: rgba(var(--winterface-slot-navy-rgb), 0.88);
  --winterface-slot-command-border: rgba(var(--winterface-slot-chrome-rgb), 0.82);
  --winterface-slot-controls-border: rgba(var(--winterface-slot-chrome-rgb), 0.88);
  --winterface-slot-border-glow-rgb: var(--winterface-slot-chrome-rgb);
  --winterface-slot-media-action-border-rgb: var(--matrix-slot-03-left-rgb, 108, 172, 228);
  --winterface-slot-media-action-border-alpha: 0.74;
  --winterface-slot-media-action-hover-alpha: 0.88;
}

html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --winterface-slot-top-primary-border: rgba(148, 163, 184, 0.74);
  --winterface-slot-top-secondary-border: rgba(56, 189, 248, 0.70);
  --winterface-slot-command-border: rgba(148, 163, 184, 0.64);
  --winterface-slot-controls-border: rgba(56, 189, 248, 0.62);
  --winterface-slot-border-glow-rgb: 56, 189, 248;
  --winterface-slot-media-action-border-rgb: 148, 163, 184;
  --winterface-slot-media-action-border-alpha: 0.72;
  --winterface-slot-media-action-hover-alpha: 0.84;
}

/* Primary top ovals: WInterface status and connected count. */
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count,
html[data-winterface-theme="code-green"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill,
html[data-winterface-theme="code-green"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count,
html[data-winterface-theme="code-green"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill,
html[data-winterface-theme="code-green"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count,
html[data-winterface-theme="crimson-red"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill,
html[data-winterface-theme="crimson-red"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count,
html[data-winterface-theme="crimson-red"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill,
html[data-winterface-theme="crimson-red"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count {
  border: 1px solid var(--winterface-slot-top-primary-border) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-slot-border-glow-rgb), 0.16),
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(var(--winterface-slot-border-glow-rgb), 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 24px rgba(var(--winterface-slot-border-glow-rgb), 0.05) !important;
}

html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill::before,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill::after,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count::before,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count::after,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill::before,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill::after,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count::before,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count::after,
html[data-winterface-theme="code-green"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill::before,
html[data-winterface-theme="code-green"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill::after,
html[data-winterface-theme="code-green"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count::before,
html[data-winterface-theme="code-green"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count::after,
html[data-winterface-theme="code-green"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill::before,
html[data-winterface-theme="code-green"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill::after,
html[data-winterface-theme="code-green"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count::before,
html[data-winterface-theme="code-green"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count::after,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill::before,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill::after,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count::before,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count::after,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill::before,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill::after,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count::before,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count::after,
html[data-winterface-theme="crimson-red"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill::before,
html[data-winterface-theme="crimson-red"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-system-status-pill::after,
html[data-winterface-theme="crimson-red"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count::before,
html[data-winterface-theme="crimson-red"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-status-count::after,
html[data-winterface-theme="crimson-red"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill::before,
html[data-winterface-theme="crimson-red"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-system-status-pill::after,
html[data-winterface-theme="crimson-red"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count::before,
html[data-winterface-theme="crimson-red"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-status-count::after {
  border-color: var(--winterface-slot-top-primary-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(var(--winterface-slot-border-glow-rgb), 0.10) !important;
}

/* Secondary top ovals: Bay Active and Style Matrix. */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-bar .interface-status-mode,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-bar .interface-theme-toggle,
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-status-bar .interface-status-mode,
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-status-bar .interface-theme-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar .interface-status-mode,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar .interface-theme-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-bar .interface-status-mode,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-bar .interface-theme-toggle {
  border: 1px solid var(--winterface-slot-top-secondary-border) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-command-line,
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-command-line,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-command-line,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-command-line {
  border: 1px solid var(--winterface-slot-command-border) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-slot-border-glow-rgb), 0.14),
    0 0 22px rgba(var(--winterface-slot-border-glow-rgb), 0.14),
    inset 0 0 0 1px rgba(var(--winterface-slot-border-glow-rgb), 0.06) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-controls-toggle,
html[data-winterface-theme="default"] body #winterface.interface-section.interface-system-is-media .interface-media-controls-toggle,
html[data-winterface-theme="code-green"] body #winterface.interface-section .interface-media-controls-toggle,
html[data-winterface-theme="code-green"] body #winterface.interface-section.interface-system-is-media .interface-media-controls-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-controls-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section.interface-system-is-media .interface-media-controls-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-controls-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section.interface-system-is-media .interface-media-controls-toggle {
  border: 1px solid var(--winterface-slot-controls-border) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-slot-border-glow-rgb), 0.14),
    0 0 20px rgba(var(--winterface-slot-border-glow-rgb), 0.18),
    inset 0 0 18px rgba(var(--winterface-slot-border-glow-rgb), 0.07) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-controls-toggle:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-media-controls-toggle:focus-visible {
  border-color: rgba(232, 232, 228, 0.94) !important;
}

/* WInterface Style Matrix Slot Tokens
   The four Style Matrix slots are stable. Theme files and visible names can change,
   while the matrix colors and active theme accents stay tied to slots 01-04. */
:root {
  --matrix-slot-01-left: #d6b46d;
  --matrix-slot-01-right: #74eaff;
  --matrix-slot-01-left-rgb: 214, 180, 109;
  --matrix-slot-01-right-rgb: 116, 234, 255;
  --matrix-slot-01-preview: linear-gradient(90deg, #030506 0%, #1a222b 28%, #d6b46d 64%, #74eaff 100%);

  --matrix-slot-02-left: #00ff66;
  --matrix-slot-02-right: #9cffb8;
  --matrix-slot-02-left-rgb: 0, 255, 102;
  --matrix-slot-02-right-rgb: 156, 255, 184;
  --matrix-slot-02-preview: linear-gradient(90deg, #020603 0%, #00ff66 58%, #9cffb8 100%);

  --matrix-slot-03-left: #d8d8d2;
  --matrix-slot-03-right: #e01212;
  --matrix-slot-03-left-rgb: 216, 216, 210;
  --matrix-slot-03-right-rgb: 224, 18, 18;
  --matrix-slot-03-preview: linear-gradient(90deg, #050505 0%, #2a2a2a 24%, #d8d8d2 48%, #f6f6f0 64%, #e01212 84%, #050505 100%);

  --matrix-slot-04-left: #ff2a2a;
  --matrix-slot-04-right: #ff6a4a;
  --matrix-slot-04-left-rgb: 255, 42, 42;
  --matrix-slot-04-right-rgb: 255, 106, 74;
  --matrix-slot-04-preview: linear-gradient(90deg, #050506 0%, #111318 24%, #4a0707 48%, #b80f12 72%, #ff3b2f 100%);

  --matrix-slot-default-left: var(--matrix-slot-01-left);
  --matrix-slot-default-right: var(--matrix-slot-01-right);
  --matrix-slot-default-left-rgb: var(--matrix-slot-01-left-rgb);
  --matrix-slot-default-right-rgb: var(--matrix-slot-01-right-rgb);
  --matrix-slot-default-preview: var(--matrix-slot-01-preview);
  --matrix-slot-code-green-left: var(--matrix-slot-02-left);
  --matrix-slot-code-green-right: var(--matrix-slot-02-right);
  --matrix-slot-code-green-left-rgb: var(--matrix-slot-02-left-rgb);
  --matrix-slot-code-green-right-rgb: var(--matrix-slot-02-right-rgb);
  --matrix-slot-code-green-preview: var(--matrix-slot-02-preview);
  --matrix-slot-blue-chrome-left: var(--matrix-slot-03-left);
  --matrix-slot-blue-chrome-right: var(--matrix-slot-03-right);
  --matrix-slot-blue-chrome-left-rgb: var(--matrix-slot-03-left-rgb);
  --matrix-slot-blue-chrome-right-rgb: var(--matrix-slot-03-right-rgb);
  --matrix-slot-blue-chrome-preview: var(--matrix-slot-03-preview);
  --matrix-slot-terminator-chrome-left: var(--matrix-slot-03-left);
  --matrix-slot-terminator-chrome-right: var(--matrix-slot-03-right);
  --matrix-slot-terminator-chrome-left-rgb: var(--matrix-slot-03-left-rgb);
  --matrix-slot-terminator-chrome-right-rgb: var(--matrix-slot-03-right-rgb);
  --matrix-slot-terminator-chrome-preview: var(--matrix-slot-03-preview);
  --matrix-slot-crimson-red-left: var(--matrix-slot-04-left);
  --matrix-slot-crimson-red-right: var(--matrix-slot-04-right);
  --matrix-slot-crimson-red-left-rgb: var(--matrix-slot-04-left-rgb);
  --matrix-slot-crimson-red-right-rgb: var(--matrix-slot-04-right-rgb);
  --matrix-slot-crimson-red-preview: var(--matrix-slot-04-preview);
}

.interface-theme-option[data-interface-theme-index="01"] {
  --theme-preview: var(--matrix-slot-01-preview) !important;
  --theme-option-orb: var(--matrix-slot-01-left) !important;
  --theme-option-orb-2: var(--matrix-slot-01-right) !important;
  --theme-option-orb-rgb: var(--matrix-slot-01-left-rgb) !important;
  --theme-option-orb-2-rgb: var(--matrix-slot-01-right-rgb) !important;
}

.interface-theme-option[data-interface-theme-index="02"] {
  --theme-preview: var(--matrix-slot-02-preview) !important;
  --theme-option-orb: var(--matrix-slot-02-left) !important;
  --theme-option-orb-2: var(--matrix-slot-02-right) !important;
  --theme-option-orb-rgb: var(--matrix-slot-02-left-rgb) !important;
  --theme-option-orb-2-rgb: var(--matrix-slot-02-right-rgb) !important;
}

.interface-theme-option[data-interface-theme-index="03"] {
  --theme-preview: var(--matrix-slot-03-preview) !important;
  --theme-option-orb: var(--matrix-slot-03-left) !important;
  --theme-option-orb-2: var(--matrix-slot-03-right) !important;
  --theme-option-orb-rgb: var(--matrix-slot-03-left-rgb) !important;
  --theme-option-orb-2-rgb: var(--matrix-slot-03-right-rgb) !important;
}

.interface-theme-option[data-interface-theme-index="04"] {
  --theme-preview: var(--matrix-slot-04-preview) !important;
  --theme-option-orb: var(--matrix-slot-04-left) !important;
  --theme-option-orb-2: var(--matrix-slot-04-right) !important;
  --theme-option-orb-rgb: var(--matrix-slot-04-left-rgb) !important;
  --theme-option-orb-2-rgb: var(--matrix-slot-04-right-rgb) !important;
}

html[data-winterface-theme-slot="01"] {
  --style-matrix-orb-left: var(--matrix-slot-01-left) !important;
  --style-matrix-orb-right: var(--matrix-slot-01-right) !important;
  --style-matrix-orb-left-rgb: var(--matrix-slot-01-left-rgb) !important;
  --style-matrix-orb-right-rgb: var(--matrix-slot-01-right-rgb) !important;
}

html[data-winterface-theme-slot="02"] {
  --style-matrix-orb-left: var(--matrix-slot-02-left) !important;
  --style-matrix-orb-right: var(--matrix-slot-02-right) !important;
  --style-matrix-orb-left-rgb: var(--matrix-slot-02-left-rgb) !important;
  --style-matrix-orb-right-rgb: var(--matrix-slot-02-right-rgb) !important;
}

html[data-winterface-theme-slot="03"] {
  --style-matrix-orb-left: var(--matrix-slot-03-left) !important;
  --style-matrix-orb-right: var(--matrix-slot-03-right) !important;
  --style-matrix-orb-left-rgb: var(--matrix-slot-03-left-rgb) !important;
  --style-matrix-orb-right-rgb: var(--matrix-slot-03-right-rgb) !important;
}

html[data-winterface-theme-slot="04"] {
  --style-matrix-orb-left: var(--matrix-slot-04-left) !important;
  --style-matrix-orb-right: var(--matrix-slot-04-right) !important;
  --style-matrix-orb-left-rgb: var(--matrix-slot-04-left-rgb) !important;
  --style-matrix-orb-right-rgb: var(--matrix-slot-04-right-rgb) !important;
}


/* =========================
   Solo Iron Steel targeted polish
   Scope: Iron Steel/default theme only.
========================= */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-status-mode .interface-status-orb {
  background:
    radial-gradient(circle at 34% 26%, rgba(244, 247, 248, 0.66), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(var(--wfo-active-bay-accent-rgb, 116, 234, 255), 0.82) 0 34%, rgba(var(--wfo-active-bay-accent-rgb, 116, 234, 255), 0.34) 58%, rgba(5, 8, 12, 0.98) 100%) !important;
  border-color: rgba(var(--wfo-active-bay-accent-rgb, 116, 234, 255), 0.66) !important;
  box-shadow:
    inset 0 0 14px rgba(244, 247, 248, 0.10),
    0 0 14px rgba(var(--wfo-active-bay-accent-rgb, 116, 234, 255), 0.40),
    0 0 30px rgba(var(--wfo-active-bay-accent-rgb, 116, 234, 255), 0.16) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-playback-status,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-media-toggle {
  border-color: rgba(var(--iron-steel-arc-rgb), 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(var(--iron-steel-arc-rgb), 0.16),
    0 0 22px rgba(var(--iron-steel-arc-rgb), 0.20),
    inset 0 0 18px rgba(var(--iron-steel-arc-rgb), 0.055) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-theme-toggle::before {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.74), transparent 22%),
    radial-gradient(circle, rgba(var(--iron-steel-chrome-rgb), 0.88), rgba(var(--iron-steel-chrome-rgb), 0.42) 58%, rgba(5, 8, 12, 0.96) 100%) !important;
  border-color: rgba(var(--iron-steel-chrome-rgb), 0.82) !important;
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.12),
    0 0 14px rgba(var(--iron-steel-chrome-rgb), 0.36),
    0 0 28px rgba(var(--iron-steel-chrome-rgb), 0.16) !important;
}

/* =========================
   Solo media action button token authority
   Scope: all four Style Matrix themes.
   Keeps Live Media and Expand/Collapse borders tied to the active theme slot
   through one shared selector path instead of per-theme one-off overrides.
========================= */
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle {
  border-color: rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), var(--winterface-slot-media-action-border-alpha, 0.74)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.16),
    0 14px 30px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.18),
    inset 0 0 0 1px rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.10),
    inset 0 0 24px rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.045) !important;
}

html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status::before,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::before,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::before,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle::before,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status::before,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::before,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::before,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle::before {
  background: linear-gradient(90deg, transparent, rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.18), rgba(var(--style-matrix-orb-right-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.12), transparent) !important;
}

html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status::after,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::after,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::after,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle::after,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status::after,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-autoplay-linked::after,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status.is-slideshow-linked::after,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle::after {
  border-color: rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.14),
    inset 0 -1px 0 rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.08) !important;
}

html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status:hover,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status:focus-visible,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:hover,
html[data-winterface-theme] body #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:focus-visible,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status:hover,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-playback-status:focus-visible,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:hover,
html[data-winterface-theme] #winterface.interface-section .interface-core .interface-media-actions .interface-media-toggle:focus-visible {
  border-color: rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), var(--winterface-slot-media-action-hover-alpha, 0.86)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.20),
    0 16px 34px rgba(0, 0, 0, 0.32),
    0 0 26px rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.24),
    inset 0 0 0 1px rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.14),
    inset 0 0 28px rgba(var(--winterface-slot-media-action-border-rgb, var(--winterface-slot-border-glow-rgb, 56, 189, 248)), 0.060) !important;
}

/* =========================
   Solo Iron Steel Card Orb Chrome Borders
   Scope: Iron Steel/default theme only.
   Adds a consistent chrome/silver edge to the numbered bay menu orbs
   without changing the active bay fill, Solo layout, or other themes.
========================= */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail .interface-path span,
html[data-winterface-theme="default"] #winterface.interface-section .interface-rail .interface-path span {
  border-color: rgba(218, 226, 235, 0.82) !important;
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.10),
    inset 0 0 14px rgba(var(--media-active-bay-accent-rgb, 116, 234, 255), 0.08),
    0 0 0 1px rgba(115, 126, 140, 0.34),
    0 0 10px rgba(218, 226, 235, 0.16),
    0 0 18px rgba(var(--media-active-bay-accent-rgb, 116, 234, 255), 0.10) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail .interface-path.is-active span,
html[data-winterface-theme="default"] #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="default"] #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="default"] #winterface.interface-section .interface-rail .interface-path.is-active span {
  border-color: rgba(232, 238, 244, 0.92) !important;
  box-shadow:
    inset 0 0 9px rgba(255, 255, 255, 0.14),
    inset 0 0 16px rgba(var(--media-active-bay-accent-rgb, 116, 234, 255), 0.10),
    0 0 0 1px rgba(154, 166, 178, 0.42),
    0 0 12px rgba(232, 238, 244, 0.20),
    0 0 22px rgba(var(--media-active-bay-accent-rgb, 116, 234, 255), 0.14) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail .interface-path span::before,
html[data-winterface-theme="default"] #winterface.interface-section .interface-rail .interface-path span::before {
  border-color: rgba(199, 210, 222, 0.32) !important;
  box-shadow: 0 0 12px rgba(218, 226, 235, 0.10) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail .interface-path span::after,
html[data-winterface-theme="default"] #winterface.interface-section .interface-rail .interface-path span::after {
  border-color: rgba(255, 255, 255, 0.20) !important;
}

/* =========================
   Solo Update 15: Blue Chrome Chrome Orb + Hover Polish
   Scope: targeted follow-up to update 14.
   - Blue Chrome numbered bay/card orbs use chrome/silver text and edge.
   - Blue Chrome right-nav Back/Bay/Next hover uses chrome/silver only on hover.
   - Non-Iron Steel themes tone down the Style Matrix slot 01 orb for readability.
========================= */

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path span {
  color: rgba(232, 238, 244, 0.96) !important;
  border-color: rgba(218, 226, 235, 0.82) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 0 8px rgba(218, 226, 235, 0.28) !important;
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.10),
    inset 0 0 14px rgba(var(--interface-accent-rgb, 108, 172, 228), 0.08),
    0 0 0 1px rgba(115, 126, 140, 0.34),
    0 0 10px rgba(218, 226, 235, 0.16),
    0 0 18px rgba(var(--interface-accent-rgb, 108, 172, 228), 0.10) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path.is-active span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path.is-active span {
  color: rgba(248, 250, 252, 0.98) !important;
  border-color: rgba(232, 238, 244, 0.92) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.76),
    0 0 10px rgba(232, 238, 244, 0.34) !important;
  box-shadow:
    inset 0 0 9px rgba(255, 255, 255, 0.14),
    inset 0 0 16px rgba(var(--interface-accent-rgb, 108, 172, 228), 0.10),
    0 0 0 1px rgba(154, 166, 178, 0.42),
    0 0 12px rgba(232, 238, 244, 0.20),
    0 0 22px rgba(var(--interface-accent-rgb, 108, 172, 228), 0.14) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path span::before,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path span::before {
  border-color: rgba(199, 210, 222, 0.32) !important;
  box-shadow: 0 0 12px rgba(218, 226, 235, 0.10) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path span::after,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path span::after {
  border-color: rgba(255, 255, 255, 0.20) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:hover,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:focus-visible,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:hover,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:focus-visible {
  border-color: rgba(232, 238, 244, 0.88) !important;
  color: rgba(248, 250, 252, 0.98) !important;
  background:
    linear-gradient(145deg, rgba(232, 238, 244, 0.16), rgba(108, 172, 228, 0.095)),
    radial-gradient(circle at 20% 18%, rgba(232, 238, 244, 0.13), transparent 44%),
    rgba(12, 35, 64, 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(154, 166, 178, 0.20),
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 26px rgba(232, 238, 244, 0.20),
    0 0 40px rgba(108, 172, 228, 0.12),
    inset 0 0 28px rgba(232, 238, 244, 0.060) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip.is-active:not(:hover):not(:focus-visible),
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip.is-active:not(:hover):not(:focus-visible) {
  border-color: rgba(108, 172, 228, 0.34) !important;
}

html:not([data-winterface-theme="default"]) body #winterface.interface-section .interface-theme-option[data-interface-theme-index="01"]::before,
html:not([data-winterface-theme="default"]) #winterface.interface-section .interface-theme-option[data-interface-theme-index="01"]::before {
  color: rgba(248, 250, 252, 0.96) !important;
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.36), transparent 23%),
    radial-gradient(circle, rgba(180, 140, 70, 0.58), rgba(92, 68, 38, 0.46) 58%, rgba(6, 8, 12, 0.92) 100%) !important;
  border-color: rgba(218, 226, 235, 0.72) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.88),
    0 0 7px rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 0 9px rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(115, 126, 140, 0.28),
    0 0 10px rgba(214, 180, 109, 0.18),
    0 0 16px rgba(218, 226, 235, 0.10) !important;
}

html:not([data-winterface-theme="default"]) body #winterface.interface-section .interface-theme-option[data-interface-theme-index="01"]:hover::before,
html:not([data-winterface-theme="default"]) body #winterface.interface-section .interface-theme-option[data-interface-theme-index="01"]:focus-visible::before,
html:not([data-winterface-theme="default"]) #winterface.interface-section .interface-theme-option[data-interface-theme-index="01"]:hover::before,
html:not([data-winterface-theme="default"]) #winterface.interface-section .interface-theme-option[data-interface-theme-index="01"]:focus-visible::before {
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.42), transparent 23%),
    radial-gradient(circle, rgba(190, 154, 84, 0.64), rgba(96, 72, 42, 0.50) 58%, rgba(6, 8, 12, 0.92) 100%) !important;
  border-color: rgba(232, 238, 244, 0.82) !important;
}

/* === WInterface Solo v4.0 Blue Chrome Right-Nav Hover Accent Bars ===
   Scope: Blue Chrome only. Sets the small lower accent bars on the
   Back / Bay / Next right-nav controller buttons to chrome/silver on hover
   and keyboard focus while preserving the button body hover treatment. */
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:hover::after,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:focus-visible::after,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:hover::after,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:focus-visible::after {
  background: linear-gradient(90deg, transparent, rgba(232, 238, 244, 0.92), rgba(154, 166, 178, 0.76), rgba(232, 238, 244, 0.92), transparent) !important;
  box-shadow:
    0 0 8px rgba(232, 238, 244, 0.34),
    0 0 14px rgba(154, 166, 178, 0.22) !important;
  opacity: 1 !important;
}
/* === WInterface Solo v4.0 Blue Chrome Right-Nav Hover Accent Bars === */

/* === WInterface Solo v4.0 Iron Steel Right-Nav Hover Accent Bars ===
   Scope: Iron Steel only. Sets the small lower accent bars on the
   Back / Bay / Next right-nav controller buttons to chrome/silver on hover
   and keyboard focus while preserving the accepted Iron Steel button body treatment. */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:focus-visible::after,
html[data-winterface-theme="default"] #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:hover::after,
html[data-winterface-theme="default"] #winterface.interface-section .interface-side-panel .interface-signal-pulse-chip:focus-visible::after {
  background: linear-gradient(90deg, transparent, rgba(232, 238, 244, 0.92), rgba(154, 166, 178, 0.76), rgba(232, 238, 244, 0.92), transparent) !important;
  box-shadow:
    0 0 8px rgba(232, 238, 244, 0.34),
    0 0 14px rgba(154, 166, 178, 0.22) !important;
  opacity: 1 !important;
}
/* === WInterface Solo v4.0 Iron Steel Right-Nav Hover Accent Bars === */

/* =========================
   Solo theme selection token layer
   Keeps text-selection highlights tied to the active non-Iron Style Matrix theme token.
   Future theme swaps in slots 02-04 should update --style-matrix-orb-left / rgb only.
========================= */

html[data-winterface-theme]:not([data-winterface-theme="default"]) {
  --winterface-selection-bg-rgb: var(--style-matrix-orb-left-rgb, var(--interface-accent-rgb, 56, 189, 248));
  --winterface-selection-bg: color-mix(in srgb, var(--style-matrix-orb-left, var(--interface-accent, #38bdf8)) 74%, #ffffff 26%);
  --winterface-selection-text: #031018;
}

html[data-winterface-theme]:not([data-winterface-theme="default"]) ::selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) *::selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) input::selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) textarea::selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) #winterface.interface-section ::selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) #winterface.interface-section *::selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) #winterface.interface-section .interface-command-input::selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) #interface-command-input::selection {
  background: rgba(var(--winterface-selection-bg-rgb), 0.68) !important;
  background: var(--winterface-selection-bg) !important;
  color: var(--winterface-selection-text) !important;
  text-shadow: none !important;
}

html[data-winterface-theme]:not([data-winterface-theme="default"]) ::-moz-selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) *::-moz-selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) input::-moz-selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) textarea::-moz-selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) #winterface.interface-section ::-moz-selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) #winterface.interface-section *::-moz-selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) #winterface.interface-section .interface-command-input::-moz-selection,
html[data-winterface-theme]:not([data-winterface-theme="default"]) #interface-command-input::-moz-selection {
  background: rgba(var(--winterface-selection-bg-rgb), 0.68) !important;
  color: var(--winterface-selection-text) !important;
  text-shadow: none !important;
}


/* =========================
   Solo Crimson Red slot 04 theme authority
   Scope: replaces the former slot 04 theme with a clean black/red metallic system.
========================= */
:root {
  --matrix-slot-04-left: #ff2a2a;
  --matrix-slot-04-right: #ff7a52;
  --matrix-slot-04-left-rgb: 255, 42, 42;
  --matrix-slot-04-right-rgb: 255, 122, 82;
  --matrix-slot-04-preview: linear-gradient(90deg, #030303 0%, #14161a 24%, #3a0506 48%, #b80f12 72%, #ff2a2a 100%);

  --matrix-slot-crimson-red-left: var(--matrix-slot-04-left);
  --matrix-slot-crimson-red-right: var(--matrix-slot-04-right);
  --matrix-slot-crimson-red-left-rgb: var(--matrix-slot-04-left-rgb);
  --matrix-slot-crimson-red-right-rgb: var(--matrix-slot-04-right-rgb);
  --matrix-slot-crimson-red-preview: var(--matrix-slot-04-preview);
}

.interface-theme-option[data-interface-theme-index="04"],
.interface-theme-option[data-interface-theme-option="crimson-red"] {
  --theme-preview: var(--matrix-slot-04-preview) !important;
  --theme-option-orb: var(--matrix-slot-04-left) !important;
  --theme-option-orb-2: var(--matrix-slot-04-right) !important;
  --theme-option-orb-rgb: var(--matrix-slot-04-left-rgb) !important;
  --theme-option-orb-2-rgb: var(--matrix-slot-04-right-rgb) !important;
}

html[data-winterface-theme="crimson-red"] {
  --style-matrix-orb-left: var(--matrix-slot-04-left) !important;
  --style-matrix-orb-right: var(--matrix-slot-04-right) !important;
  --style-matrix-orb-left-rgb: var(--matrix-slot-04-left-rgb) !important;
  --style-matrix-orb-right-rgb: var(--matrix-slot-04-right-rgb) !important;
}

html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --winterface-theme-accent: #ff2a2a;
  --winterface-theme-accent-rgb: 255, 42, 42;
  --winterface-theme-accent-2: #ff7a52;
  --winterface-theme-accent-2-rgb: 255, 122, 82;
  --winterface-theme-chrome: #d6dde3;
  --winterface-theme-chrome-rgb: 214, 221, 227;
  --winterface-theme-panel: rgba(8, 8, 9, 0.94);
  --winterface-theme-panel-soft: rgba(14, 10, 11, 0.88);
  --winterface-theme-border: rgba(255, 42, 42, 0.44);
  --winterface-theme-border-strong: rgba(255, 92, 68, 0.76);
  --winterface-slot-top-primary-border: rgba(214, 221, 227, 0.74);
  --winterface-slot-top-secondary-border: rgba(255, 42, 42, 0.72);
  --winterface-slot-command-border: rgba(255, 42, 42, 0.72);
  --winterface-slot-controls-border: rgba(255, 42, 42, 0.68);
  --winterface-slot-border-glow-rgb: 255, 42, 42;
  --winterface-slot-media-action-border-rgb: 255, 42, 42;
  --winterface-slot-media-action-border-alpha: 0.78;
  --winterface-slot-media-action-hover-alpha: 0.92;
  --winterface-selection-bg-rgb: 255, 42, 42;
  --winterface-selection-bg: color-mix(in srgb, #ff2a2a 72%, #ffffff 28%);
  --winterface-selection-text: #090101;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-shell,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section.is-winterface-maximized .interface-shell {
  border-color: rgba(255, 42, 42, 0.48) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 42, 42, 0.16), transparent 36%),
    radial-gradient(circle at 85% 16%, rgba(214, 221, 227, 0.06), transparent 30%),
    linear-gradient(145deg, rgba(18, 18, 20, 0.96), rgba(5, 5, 6, 0.98)) !important;
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(214, 221, 227, 0.08),
    0 0 48px rgba(255, 42, 42, 0.16),
    inset 0 0 52px rgba(255, 42, 42, 0.045) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-bar,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-core,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-side-panel,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-output-card,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-output-card-soft,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-response,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse-readout {
  border-color: rgba(255, 42, 42, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(255, 42, 42, 0.075), rgba(214, 221, 227, 0.030)),
    radial-gradient(circle at 14% 10%, rgba(255, 42, 42, 0.10), transparent 38%),
    rgba(7, 7, 8, 0.88) !important;
  box-shadow:
    inset 0 0 34px rgba(214, 221, 227, 0.018),
    0 0 0 1px rgba(255, 42, 42, 0.035),
    0 18px 48px rgba(0, 0, 0, 0.36),
    0 0 26px rgba(255, 42, 42, 0.095) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-bar > span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-bar > .interface-system-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-theme-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle {
  border-color: rgba(214, 221, 227, 0.52) !important;
  background:
    linear-gradient(145deg, rgba(214, 221, 227, 0.075), rgba(255, 42, 42, 0.050)),
    rgba(8, 8, 9, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255, 42, 42, 0.060),
    0 14px 34px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(255, 42, 42, 0.13),
    inset 0 0 24px rgba(214, 221, 227, 0.035) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-theme-toggle {
  border-color: rgba(255, 42, 42, 0.72) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-theme-toggle::before,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-theme-toggle::after,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-mode .interface-status-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-status-count .interface-maximize-button .interface-status-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-set-button.is-active span {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.72), transparent 21%),
    radial-gradient(circle at 50% 52%, rgba(255, 42, 42, 0.88), rgba(176, 12, 16, 0.78) 60%, rgba(5, 5, 6, 0.96) 100%) !important;
  border-color: rgba(255, 122, 82, 0.76) !important;
  box-shadow:
    inset 0 0 14px rgba(214, 221, 227, 0.09),
    0 0 14px rgba(255, 42, 42, 0.44),
    0 0 30px rgba(255, 42, 42, 0.18) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail-label,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-output-label,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-response .panel-label,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-command-prefix,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-showcase-caption span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-chip span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse-label {
  color: #ff6a4a !important;
  text-shadow: 0 0 10px rgba(255, 42, 42, 0.48), 0 0 22px rgba(255, 42, 42, 0.18) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-command-line,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-controls-toggle {
  border-color: rgba(255, 42, 42, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(255, 42, 42, 0.095), rgba(214, 221, 227, 0.035)),
    rgba(6, 6, 7, 0.90) !important;
  box-shadow:
    0 0 0 1px rgba(255, 42, 42, 0.12),
    0 0 24px rgba(255, 42, 42, 0.20),
    inset 0 0 24px rgba(255, 42, 42, 0.065) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-path {
  border-color: rgba(214, 221, 227, 0.22) !important;
  background:
    linear-gradient(145deg, rgba(255, 42, 42, 0.040), rgba(214, 221, 227, 0.018)),
    rgba(5, 5, 6, 0.82) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-path:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-path:focus-visible,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-path.is-active {
  border-color: rgba(255, 42, 42, 0.70) !important;
  background:
    linear-gradient(145deg, rgba(255, 42, 42, 0.13), rgba(214, 221, 227, 0.035)),
    rgba(8, 6, 6, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255, 42, 42, 0.08),
    0 0 24px rgba(255, 42, 42, 0.18),
    inset 0 0 18px rgba(255, 42, 42, 0.040) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-path span {
  color: #f2f5f7 !important;
  border-color: rgba(214, 221, 227, 0.58) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.42), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(255, 42, 42, 0.30), rgba(116, 8, 10, 0.38) 60%, rgba(5, 5, 6, 0.96) 100%) !important;
  box-shadow:
    inset 0 0 12px rgba(214, 221, 227, 0.070),
    0 0 12px rgba(255, 42, 42, 0.18),
    0 0 22px rgba(214, 221, 227, 0.08) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-path:hover span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-path:focus-visible span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-path.is-active span {
  border-color: rgba(255, 122, 82, 0.78) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.56), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(255, 42, 42, 0.72), rgba(176, 12, 16, 0.62) 62%, rgba(5, 5, 6, 0.98) 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(214, 221, 227, 0.090),
    0 0 16px rgba(255, 42, 42, 0.38),
    0 0 30px rgba(255, 42, 42, 0.18) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-playback-status,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-jump-link,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse-chip {
  border-color: rgba(255, 42, 42, 0.62) !important;
  color: #f2f5f7 !important;
  background:
    linear-gradient(145deg, rgba(255, 42, 42, 0.11), rgba(214, 221, 227, 0.028)),
    rgba(6, 6, 7, 0.90) !important;
  box-shadow:
    0 0 0 1px rgba(255, 42, 42, 0.10),
    0 0 22px rgba(255, 42, 42, 0.16),
    inset 0 0 22px rgba(255, 42, 42, 0.048) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-playback-status:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-playback-status:focus-visible,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-toggle:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-toggle:focus-visible,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-jump-link:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-jump-link:focus-visible,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse-chip:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse-chip:focus-visible,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse-chip.is-active {
  border-color: rgba(214, 221, 227, 0.78) !important;
  background:
    linear-gradient(145deg, rgba(255, 42, 42, 0.18), rgba(214, 221, 227, 0.055)),
    rgba(12, 8, 8, 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(214, 221, 227, 0.13),
    0 0 26px rgba(255, 42, 42, 0.24),
    inset 0 0 26px rgba(255, 42, 42, 0.068) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-system-list li::before,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-playback-dot,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-orb {
  background: #ff2a2a !important;
  border-color: rgba(255, 122, 82, 0.76) !important;
  box-shadow:
    0 0 12px rgba(255, 42, 42, 0.78),
    0 0 28px rgba(255, 42, 42, 0.34) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(255, 42, 42, 0.74) !important;
  box-shadow:
    0 0 0 1px rgba(255, 42, 42, 0.12),
    0 0 22px rgba(255, 42, 42, 0.18),
    inset 0 0 18px rgba(255, 42, 42, 0.060) !important;
}

/* === WInterface Solo Blue Chrome Number Chrome Text Outline ===
   Scope: Blue Chrome only. Adds a chrome/silver edge to the 01-06
   numbered bay/card orb text while preserving the existing orb fills,
   borders, hover states, and bay selection behavior. */
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path span {
  -webkit-text-stroke: 0.38px rgba(232, 238, 244, 0.92) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82),
    0 0 2px rgba(232, 238, 244, 0.72),
    0 0 7px rgba(218, 226, 235, 0.30),
    0 0 12px rgba(108, 172, 228, 0.18) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path.is-active span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path.is-active span {
  -webkit-text-stroke: 0.42px rgba(248, 250, 252, 0.96) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.86),
    0 0 2px rgba(248, 250, 252, 0.82),
    0 0 8px rgba(232, 238, 244, 0.38),
    0 0 14px rgba(108, 172, 228, 0.22) !important;
}
/* === WInterface Solo Blue Chrome Number Chrome Text Outline === */

/* =========================
   Blue Chrome numbered orb brightness trim
   Lowers only the 01-06 bay/card orb fill intensity so the chrome/silver
   number edge reads more clearly against the Blue Chrome skin.
========================= */
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path span {
  background:
    radial-gradient(circle at 34% 24%, rgba(243, 248, 252, 0.20), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(76, 137, 194, 0.72), rgba(28, 74, 126, 0.62) 54%, rgba(5, 18, 34, 0.94) 100%) !important;
  border-color: rgba(218, 226, 235, 0.78) !important;
  box-shadow:
    inset 0 0 10px rgba(243, 248, 252, 0.060),
    inset 0 0 18px rgba(5, 18, 34, 0.30),
    0 0 0 1px rgba(154, 166, 178, 0.34),
    0 0 11px rgba(108, 172, 228, 0.18),
    0 0 18px rgba(0, 51, 160, 0.14) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-rail .interface-path.is-active span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="blue-chrome"] #winterface.interface-section .interface-rail .interface-path.is-active span {
  background:
    radial-gradient(circle at 34% 24%, rgba(243, 248, 252, 0.26), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(88, 151, 206, 0.80), rgba(34, 84, 138, 0.68) 54%, rgba(5, 18, 34, 0.96) 100%) !important;
  border-color: rgba(232, 238, 244, 0.88) !important;
  box-shadow:
    inset 0 0 12px rgba(243, 248, 252, 0.075),
    inset 0 0 20px rgba(5, 18, 34, 0.26),
    0 0 0 1px rgba(154, 166, 178, 0.42),
    0 0 13px rgba(232, 238, 244, 0.18),
    0 0 22px rgba(108, 172, 228, 0.18) !important;
}

/* Iron Steel media player frame border.
   Scope: default theme only; keeps the embedded player frame aligned with the theme cyan. */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-video-frame {
  border-color: rgba(116, 234, 255, 0.72) !important;
}

/* =========================
   Crimson Red chrome control polish
   Scope: Crimson Red only. Converts selected orb centers and right-side
   control/container borders to chrome/silver while preserving layout and behavior.
========================= */
html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --crimson-chrome: #d6dde3;
  --crimson-chrome-rgb: 214, 221, 227;
  --crimson-chrome-bright: #f3f6f8;
  --crimson-red-live: #ff2a2a;
  --crimson-red-live-rgb: 255, 42, 42;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail .interface-path span,
html[data-winterface-theme="crimson-red"] #winterface.interface-section .interface-rail .interface-path span {
  color: #f7fafc !important;
  border-color: rgba(var(--crimson-chrome-rgb), 0.74) !important;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.54), transparent 22%),
    radial-gradient(circle at 50% 53%, rgba(243, 246, 248, 0.82), rgba(174, 184, 193, 0.58) 54%, rgba(20, 22, 25, 0.96) 100%) !important;
  box-shadow:
    inset 0 0 12px rgba(var(--crimson-chrome-rgb), 0.12),
    inset 0 0 20px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.20),
    0 0 13px rgba(var(--crimson-red-live-rgb), 0.22),
    0 0 22px rgba(var(--crimson-chrome-rgb), 0.10) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail .interface-path.is-active span,
html[data-winterface-theme="crimson-red"] #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="crimson-red"] #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="crimson-red"] #winterface.interface-section .interface-rail .interface-path.is-active span {
  border-color: rgba(var(--crimson-chrome-rgb), 0.90) !important;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.66), transparent 22%),
    radial-gradient(circle at 50% 53%, rgba(255, 255, 255, 0.90), rgba(192, 202, 211, 0.66) 54%, rgba(18, 20, 23, 0.98) 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(var(--crimson-chrome-rgb), 0.16),
    inset 0 0 22px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.28),
    0 0 16px rgba(var(--crimson-red-live-rgb), 0.30),
    0 0 30px rgba(var(--crimson-chrome-rgb), 0.14) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle .interface-recorder-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-recorder-toggle.is-recording .interface-recorder-orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.78), transparent 18%),
    radial-gradient(circle at 50% 52%, rgba(243, 246, 248, 0.92), rgba(178, 188, 197, 0.74) 52%, rgba(28, 31, 35, 0.96) 100%) !important;
  border-color: rgba(var(--crimson-chrome-rgb), 0.86) !important;
  box-shadow:
    0 0 10px rgba(var(--crimson-chrome-rgb), 0.62),
    0 0 20px rgba(var(--crimson-red-live-rgb), 0.30),
    0 0 34px rgba(var(--crimson-chrome-rgb), 0.12) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-chrome-rgb), 0.84) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.58), transparent 21%),
    radial-gradient(circle at 48% 50%, rgba(243, 246, 248, 0.78), rgba(176, 186, 195, 0.58) 50%, rgba(16, 18, 21, 0.98) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.14),
    0 0 20px rgba(var(--crimson-chrome-rgb), 0.18),
    0 0 28px rgba(var(--crimson-red-live-rgb), 0.12),
    inset 0 0 18px rgba(var(--crimson-chrome-rgb), 0.07) !important;
}

html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  filter: none !important;
  opacity: 1 !important;
  border-color: rgba(var(--crimson-red-live-rgb), 0.86) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.44), transparent 21%),
    radial-gradient(circle at 48% 50%, rgba(255, 42, 42, 0.90), rgba(160, 8, 12, 0.74) 52%, rgba(12, 6, 7, 0.98) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-red-live-rgb), 0.18),
    0 0 20px rgba(var(--crimson-red-live-rgb), 0.42),
    0 0 36px rgba(var(--crimson-red-live-rgb), 0.20),
    inset 0 0 20px rgba(var(--crimson-red-live-rgb), 0.10) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-controls-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section.interface-system-is-media .interface-media-controls-toggle,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-signal-pulse,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-jump-link,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-playback-status,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-output-card,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-output-card-soft {
  border-color: rgba(var(--crimson-chrome-rgb), 0.74) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.12),
    0 14px 30px rgba(0, 0, 0, 0.20),
    0 0 20px rgba(var(--crimson-chrome-rgb), 0.12),
    0 0 28px rgba(var(--crimson-red-live-rgb), 0.12),
    inset 0 0 20px rgba(var(--crimson-chrome-rgb), 0.04) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-controls-toggle:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-controls-toggle:focus-visible,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section.interface-system-is-media .interface-media-controls-toggle:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section.interface-system-is-media .interface-media-controls-toggle:focus-visible,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-jump-link:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-jump-link:focus-visible,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-playback-status:hover,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-playback-status:focus-visible {
  border-color: rgba(var(--crimson-chrome-rgb), 0.90) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.18),
    0 16px 34px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(var(--crimson-chrome-rgb), 0.18),
    0 0 36px rgba(var(--crimson-red-live-rgb), 0.16),
    inset 0 0 22px rgba(var(--crimson-chrome-rgb), 0.055) !important;
}
/* === Crimson Red chrome control polish === */

/* =========================
   Crimson Red orb/state correction
   Scope: Crimson Red only. Restores numbered card orbs to red, gives bay set
   controls chrome idle centers with red active state, and adds red/chrome audio mute styling.
========================= */
html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --crimson-chrome: #d6dde3;
  --crimson-chrome-rgb: 214, 221, 227;
  --crimson-chrome-bright: #f3f6f8;
  --crimson-red-live: #ff2a2a;
  --crimson-red-live-rgb: 255, 42, 42;
  --crimson-red-deep: #8f0508;
  --crimson-red-deep-rgb: 143, 5, 8;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail .interface-path span,
html[data-winterface-theme="crimson-red"] #winterface.interface-section .interface-rail .interface-path span {
  color: #f2f5f7 !important;
  border-color: rgba(var(--crimson-chrome-rgb), 0.58) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.42), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(var(--crimson-red-live-rgb), 0.30), rgba(var(--crimson-red-deep-rgb), 0.38) 60%, rgba(5, 5, 6, 0.96) 100%) !important;
  box-shadow:
    inset 0 0 12px rgba(var(--crimson-chrome-rgb), 0.070),
    0 0 12px rgba(var(--crimson-red-live-rgb), 0.18),
    0 0 22px rgba(var(--crimson-chrome-rgb), 0.08) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail .interface-path.is-active span,
html[data-winterface-theme="crimson-red"] #winterface.interface-section .interface-rail .interface-path:hover span,
html[data-winterface-theme="crimson-red"] #winterface.interface-section .interface-rail .interface-path:focus-visible span,
html[data-winterface-theme="crimson-red"] #winterface.interface-section .interface-rail .interface-path.is-active span {
  border-color: rgba(255, 122, 82, 0.78) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.56), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(var(--crimson-red-live-rgb), 0.72), rgba(176, 12, 16, 0.62) 62%, rgba(5, 5, 6, 0.98) 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(var(--crimson-chrome-rgb), 0.090),
    0 0 16px rgba(var(--crimson-red-live-rgb), 0.38),
    0 0 30px rgba(var(--crimson-red-live-rgb), 0.18) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-set-button[data-interface-set-button] span {
  border-color: rgba(var(--crimson-chrome-rgb), 0.74) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.64), transparent 20%),
    radial-gradient(circle at 50% 52%, rgba(var(--crimson-chrome-rgb), 0.84), rgba(174, 184, 193, 0.58) 54%, rgba(18, 20, 23, 0.96) 100%) !important;
  box-shadow:
    inset 0 0 10px rgba(var(--crimson-chrome-rgb), 0.10),
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.18),
    0 0 12px rgba(var(--crimson-chrome-rgb), 0.18),
    0 0 18px rgba(var(--crimson-red-live-rgb), 0.12) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-set-button[data-interface-set-button].is-active span {
  border-color: rgba(255, 122, 82, 0.86) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.70), transparent 20%),
    radial-gradient(circle at 50% 52%, rgba(var(--crimson-red-live-rgb), 0.90), rgba(176, 12, 16, 0.76) 58%, rgba(5, 5, 6, 0.98) 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(var(--crimson-chrome-rgb), 0.10),
    0 0 0 1px rgba(255, 122, 82, 0.22),
    0 0 16px rgba(var(--crimson-red-live-rgb), 0.48),
    0 0 30px rgba(var(--crimson-red-live-rgb), 0.22) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-system-orb-toggle i,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-commandbar-toggle i {
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.76), transparent 24%),
    radial-gradient(circle at 50% 52%, rgba(var(--crimson-chrome-rgb), 0.92), rgba(178, 188, 197, 0.70) 56%, rgba(20, 22, 25, 0.98) 100%) !important;
  box-shadow:
    0 0 10px rgba(var(--crimson-chrome-rgb), 0.56),
    0 0 22px rgba(var(--crimson-chrome-rgb), 0.22),
    0 0 34px rgba(var(--crimson-red-live-rgb), 0.12) !important;
}

html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-system-orb-toggle i,
html[data-winterface-theme="crimson-red"] body.winterface-commandbar-hidden #winterface.interface-section .interface-commandbar-toggle i {
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.54), transparent 24%),
    radial-gradient(circle at 50% 52%, rgba(var(--crimson-red-live-rgb), 0.92), rgba(176, 12, 16, 0.78) 58%, rgba(12, 4, 5, 0.98) 100%) !important;
  box-shadow:
    0 0 10px rgba(var(--crimson-red-live-rgb), 0.74),
    0 0 24px rgba(var(--crimson-red-live-rgb), 0.42),
    0 0 42px rgba(var(--crimson-red-live-rgb), 0.22) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-chrome-rgb), 0.86) !important;
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.72), transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(var(--crimson-red-live-rgb), 0.78), rgba(176, 12, 16, 0.58) 44%, rgba(var(--crimson-chrome-rgb), 0.42) 66%, rgba(14, 16, 19, 0.98) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.18),
    0 0 20px rgba(var(--crimson-red-live-rgb), 0.34),
    0 0 32px rgba(var(--crimson-chrome-rgb), 0.14),
    inset 0 0 18px rgba(var(--crimson-red-live-rgb), 0.10),
    inset 0 0 12px rgba(var(--crimson-chrome-rgb), 0.10) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute[aria-pressed="true"] .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(255, 122, 82, 0.90) !important;
  background:
    radial-gradient(circle at 31% 23%, rgba(255, 255, 255, 0.58), transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(var(--crimson-red-live-rgb), 0.96), rgba(var(--crimson-red-deep-rgb), 0.82) 52%, rgba(10, 4, 5, 0.98) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 122, 82, 0.22),
    0 0 22px rgba(var(--crimson-red-live-rgb), 0.58),
    0 0 40px rgba(var(--crimson-red-live-rgb), 0.26),
    inset 0 0 18px rgba(var(--crimson-red-live-rgb), 0.12),
    inset 0 0 10px rgba(var(--crimson-chrome-rgb), 0.08) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-icon path {
  stroke: rgba(var(--crimson-chrome-rgb), 0.94) !important;
  fill: rgba(var(--crimson-chrome-rgb), 0.88) !important;
}

/* =========================
   Crimson Red media mute shifter polish
   Scope: Crimson Red only. Refines the audio mute control into a cleaner
   red/chrome shifter-style control and locks the right-nav controller frame
   to chrome without changing layout or behavior.
========================= */
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute::before {
  background:
    radial-gradient(ellipse at center, rgba(var(--crimson-chrome-rgb), 0.24), rgba(var(--crimson-red-live-rgb), 0.20) 42%, transparent 74%) !important;
  filter: blur(0.5px) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-stick {
  background:
    linear-gradient(90deg, rgba(246, 249, 251, 0.28), rgba(var(--crimson-chrome-rgb), 0.88) 24%, rgba(var(--crimson-red-live-rgb), 0.68) 50%, rgba(var(--crimson-chrome-rgb), 0.72) 76%, rgba(21, 23, 26, 0.92)),
    linear-gradient(180deg, rgba(var(--crimson-red-live-rgb), 0.82), rgba(var(--crimson-red-deep-rgb), 0.74)) !important;
  border-color: rgba(var(--crimson-chrome-rgb), 0.72) !important;
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.16),
    0 0 12px rgba(var(--crimson-chrome-rgb), 0.22),
    0 0 18px rgba(var(--crimson-red-live-rgb), 0.32) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-chrome-rgb), 0.94) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.78), transparent 18%),
    radial-gradient(circle at 50% 46%, rgba(var(--crimson-chrome-rgb), 0.34), transparent 28%),
    conic-gradient(from 230deg, rgba(246, 249, 251, 0.96), rgba(123, 132, 141, 0.82), rgba(28, 31, 35, 0.96), rgba(var(--crimson-red-live-rgb), 0.84), rgba(78, 5, 7, 0.96), rgba(210, 218, 226, 0.88), rgba(246, 249, 251, 0.96)),
    radial-gradient(circle at 50% 53%, rgba(28, 30, 34, 0.98), rgba(8, 8, 10, 0.98) 68%, rgba(4, 4, 5, 1) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -14px 22px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.20),
    0 0 18px rgba(var(--crimson-chrome-rgb), 0.24),
    0 0 28px rgba(var(--crimson-red-live-rgb), 0.28) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::before {
  inset: -0.34rem !important;
  border: 1px solid rgba(var(--crimson-chrome-rgb), 0.34) !important;
  background: radial-gradient(circle, rgba(var(--crimson-chrome-rgb), 0.06), transparent 68%) !important;
  box-shadow:
    0 0 18px rgba(var(--crimson-chrome-rgb), 0.18),
    0 0 30px rgba(var(--crimson-red-live-rgb), 0.12),
    inset 0 0 14px rgba(var(--crimson-chrome-rgb), 0.10) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::after {
  inset: 0.42rem 0.34rem !important;
  border: 1px solid rgba(var(--crimson-chrome-rgb), 0.22) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(var(--crimson-chrome-rgb), 0.42) 34% 42%, transparent 42% 58%, rgba(var(--crimson-chrome-rgb), 0.42) 58% 66%, transparent 66% 100%),
    linear-gradient(180deg, transparent 0 43%, rgba(var(--crimson-red-live-rgb), 0.52) 43% 57%, transparent 57% 100%) !important;
  opacity: 0.74 !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.36) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:hover .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--crimson-chrome-rgb), 1) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    inset 0 -14px 22px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.24),
    0 0 22px rgba(var(--crimson-chrome-rgb), 0.30),
    0 0 34px rgba(var(--crimson-red-live-rgb), 0.36) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute[aria-pressed="true"] .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-chrome-rgb), 0.94) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.58), transparent 18%),
    radial-gradient(circle at 50% 46%, rgba(var(--crimson-red-live-rgb), 0.90), rgba(var(--crimson-red-deep-rgb), 0.72) 46%, rgba(10, 4, 5, 0.98) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.18),
    inset 0 -14px 22px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.18),
    0 0 20px rgba(var(--crimson-chrome-rgb), 0.22),
    0 0 38px rgba(var(--crimson-red-live-rgb), 0.42) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-icon path {
  stroke: rgba(248, 250, 252, 0.96) !important;
  fill: rgba(248, 250, 252, 0.92) !important;
  filter: drop-shadow(0 0 4px rgba(var(--crimson-red-live-rgb), 0.52)) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-icon .interface-media-mute-slash {
  stroke: rgba(var(--crimson-red-live-rgb), 0.96) !important;
  fill: none !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse {
  border-color: rgba(var(--crimson-chrome-rgb), 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.16),
    0 14px 30px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(var(--crimson-chrome-rgb), 0.16),
    0 0 34px rgba(var(--crimson-red-live-rgb), 0.12),
    inset 0 0 20px rgba(var(--crimson-chrome-rgb), 0.045) !important;
}

/* Crimson Red media mute clean finish.
   Scope: Crimson Red only. Gives the media audio control a translucent red surface with restrained chrome highlights. */
html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --crimson-mute-chrome: #e8edf2;
  --crimson-mute-chrome-rgb: 232, 237, 242;
  --crimson-mute-red: #ef1f2a;
  --crimson-mute-red-rgb: 239, 31, 42;
  --crimson-mute-red-deep: #65070b;
  --crimson-mute-red-deep-rgb: 101, 7, 11;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute::before {
  background:
    radial-gradient(ellipse at center, rgba(var(--crimson-mute-chrome-rgb), 0.16), rgba(var(--crimson-mute-red-rgb), 0.16) 42%, transparent 74%) !important;
  filter: blur(0.35px) !important;
  opacity: 0.78 !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-stick {
  border-color: rgba(var(--crimson-mute-chrome-rgb), 0.54) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(var(--crimson-mute-chrome-rgb), 0.58) 18%, rgba(82, 88, 96, 0.62) 34%, rgba(var(--crimson-mute-red-rgb), 0.42) 50%, rgba(82, 88, 96, 0.58) 66%, rgba(var(--crimson-mute-chrome-rgb), 0.48) 82%, rgba(9, 10, 12, 0.82)),
    linear-gradient(180deg, rgba(var(--crimson-mute-red-rgb), 0.44), rgba(var(--crimson-mute-red-deep-rgb), 0.62)) !important;
  box-shadow:
    inset 0 0 7px rgba(255, 255, 255, 0.10),
    inset 0 -7px 10px rgba(0, 0, 0, 0.34),
    0 0 10px rgba(var(--crimson-mute-chrome-rgb), 0.14),
    0 0 18px rgba(var(--crimson-mute-red-rgb), 0.20) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-chrome-rgb), 0.74) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.62), transparent 18%),
    radial-gradient(circle at 58% 72%, rgba(255, 255, 255, 0.10), transparent 28%),
    linear-gradient(135deg, rgba(var(--crimson-mute-chrome-rgb), 0.22), transparent 26%, rgba(var(--crimson-mute-red-rgb), 0.30) 48%, transparent 72%, rgba(var(--crimson-mute-chrome-rgb), 0.18)),
    radial-gradient(circle at 50% 48%, rgba(var(--crimson-mute-red-rgb), 0.70), rgba(151, 12, 18, 0.64) 48%, rgba(var(--crimson-mute-red-deep-rgb), 0.78) 72%, rgba(8, 8, 10, 0.96) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -13px 20px rgba(0, 0, 0, 0.38),
    inset 0 10px 18px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(var(--crimson-mute-chrome-rgb), 0.18),
    0 0 14px rgba(var(--crimson-mute-chrome-rgb), 0.16),
    0 0 28px rgba(var(--crimson-mute-red-rgb), 0.26) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::before {
  inset: -0.28rem !important;
  border: 1px solid rgba(var(--crimson-mute-chrome-rgb), 0.28) !important;
  background:
    radial-gradient(circle at center, rgba(var(--crimson-mute-chrome-rgb), 0.08), transparent 68%) !important;
  box-shadow:
    0 0 14px rgba(var(--crimson-mute-chrome-rgb), 0.14),
    0 0 28px rgba(var(--crimson-mute-red-rgb), 0.12),
    inset 0 0 12px rgba(255, 255, 255, 0.06) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::after {
  inset: 0.44rem !important;
  border: 1px solid rgba(var(--crimson-mute-chrome-rgb), 0.24) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(var(--crimson-mute-chrome-rgb), 0.34), transparent 34%, rgba(255, 255, 255, 0.10) 50%, transparent 68%),
    radial-gradient(circle at center, rgba(8, 8, 10, 0.22), transparent 66%) !important;
  opacity: 0.62 !important;
  box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.30) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:hover .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-chrome-rgb), 0.86) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.70), transparent 18%),
    radial-gradient(circle at 58% 72%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(var(--crimson-mute-chrome-rgb), 0.26), transparent 26%, rgba(255, 52, 61, 0.36) 48%, transparent 72%, rgba(var(--crimson-mute-chrome-rgb), 0.22)),
    radial-gradient(circle at 50% 48%, rgba(255, 48, 58, 0.78), rgba(171, 15, 22, 0.68) 48%, rgba(var(--crimson-mute-red-deep-rgb), 0.80) 72%, rgba(8, 8, 10, 0.96) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -13px 20px rgba(0, 0, 0, 0.34),
    inset 0 10px 18px rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(var(--crimson-mute-chrome-rgb), 0.22),
    0 0 18px rgba(var(--crimson-mute-chrome-rgb), 0.20),
    0 0 34px rgba(var(--crimson-mute-red-rgb), 0.34) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute[aria-pressed="true"] .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-chrome-rgb), 0.72) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.48), transparent 18%),
    linear-gradient(135deg, rgba(var(--crimson-mute-chrome-rgb), 0.18), transparent 30%, rgba(var(--crimson-mute-red-rgb), 0.28) 52%, transparent 74%),
    radial-gradient(circle at 50% 48%, rgba(var(--crimson-mute-red-rgb), 0.76), rgba(126, 9, 14, 0.72) 52%, rgba(8, 4, 5, 0.96) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--crimson-mute-chrome-rgb), 0.14),
    inset 0 -13px 20px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(var(--crimson-mute-chrome-rgb), 0.16),
    0 0 16px rgba(var(--crimson-mute-chrome-rgb), 0.16),
    0 0 34px rgba(var(--crimson-mute-red-rgb), 0.34) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-icon path {
  stroke: rgba(255, 255, 255, 0.96) !important;
  fill: rgba(255, 255, 255, 0.90) !important;
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 3px rgba(var(--crimson-mute-red-rgb), 0.36)) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-icon .interface-media-mute-slash {
  stroke: rgba(var(--crimson-mute-chrome-rgb), 0.88) !important;
  fill: none !important;
}

/* Crimson Red media player chrome frame.
   Scope: Crimson Red only. Replaces the media/player blue frame with a clean chrome/silver edge. */
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-frame-shell::before {
  background: linear-gradient(135deg, rgba(232, 237, 242, 0.56), rgba(158, 168, 178, 0.32) 42%, rgba(255, 42, 42, 0.10) 68%, rgba(232, 237, 242, 0.42)) !important;
  opacity: 0.68 !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-video-frame {
  border-color: rgba(232, 237, 242, 0.72) !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(232, 237, 242, 0.14),
    0 0 26px rgba(232, 237, 242, 0.13),
    0 0 34px rgba(255, 42, 42, 0.08),
    inset 0 0 32px rgba(255, 255, 255, 0.030) !important;
}

/* Crimson Red transparent media mute finish.
   Scope: Crimson Red only. Adds a glass-like red surface with subtle chrome reflection while preserving control geometry and behavior. */
html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --crimson-mute-glass-red: 239, 31, 42;
  --crimson-mute-glass-deep: 82, 5, 9;
  --crimson-mute-glass-chrome: 232, 237, 242;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute::before {
  background:
    radial-gradient(ellipse at center, rgba(var(--crimson-mute-glass-chrome), 0.14), rgba(var(--crimson-mute-glass-red), 0.13) 42%, transparent 76%) !important;
  opacity: 0.66 !important;
  filter: blur(0.45px) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-stick {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.46) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(var(--crimson-mute-glass-chrome), 0.42) 20%, rgba(67, 72, 80, 0.46) 38%, rgba(var(--crimson-mute-glass-red), 0.28) 50%, rgba(67, 72, 80, 0.42) 62%, rgba(var(--crimson-mute-glass-chrome), 0.34) 80%, rgba(8, 9, 11, 0.72)),
    linear-gradient(180deg, rgba(var(--crimson-mute-glass-red), 0.30), rgba(var(--crimson-mute-glass-deep), 0.46)) !important;
  box-shadow:
    inset 0 0 7px rgba(255, 255, 255, 0.08),
    inset 0 -7px 10px rgba(0, 0, 0, 0.30),
    0 0 10px rgba(var(--crimson-mute-glass-chrome), 0.10),
    0 0 18px rgba(var(--crimson-mute-glass-red), 0.16) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.66) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.58), transparent 18%),
    radial-gradient(circle at 68% 78%, rgba(255, 255, 255, 0.09), transparent 30%),
    linear-gradient(135deg, rgba(var(--crimson-mute-glass-chrome), 0.20), transparent 28%, rgba(var(--crimson-mute-glass-red), 0.22) 50%, transparent 72%, rgba(var(--crimson-mute-glass-chrome), 0.14)),
    radial-gradient(circle at 50% 48%, rgba(var(--crimson-mute-glass-red), 0.46), rgba(151, 12, 18, 0.42) 48%, rgba(var(--crimson-mute-glass-deep), 0.56) 72%, rgba(8, 8, 10, 0.88) 100%) !important;
  backdrop-filter: blur(5px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -13px 20px rgba(0, 0, 0, 0.30),
    inset 0 10px 18px rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.14),
    0 0 14px rgba(var(--crimson-mute-glass-chrome), 0.12),
    0 0 28px rgba(var(--crimson-mute-glass-red), 0.20) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::before {
  inset: -0.30rem !important;
  border: 1px solid rgba(var(--crimson-mute-glass-chrome), 0.22) !important;
  background:
    radial-gradient(circle at center, rgba(var(--crimson-mute-glass-chrome), 0.055), transparent 70%) !important;
  box-shadow:
    0 0 12px rgba(var(--crimson-mute-glass-chrome), 0.10),
    0 0 26px rgba(var(--crimson-mute-glass-red), 0.10),
    inset 0 0 12px rgba(255, 255, 255, 0.05) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::after {
  inset: 0.42rem !important;
  border: 1px solid rgba(var(--crimson-mute-glass-chrome), 0.20) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(var(--crimson-mute-glass-chrome), 0.30), transparent 34%, rgba(255, 255, 255, 0.08) 50%, transparent 68%),
    radial-gradient(circle at center, rgba(8, 8, 10, 0.16), transparent 66%) !important;
  opacity: 0.54 !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.26) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:hover .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.78) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.66), transparent 18%),
    radial-gradient(circle at 68% 78%, rgba(255, 255, 255, 0.10), transparent 30%),
    linear-gradient(135deg, rgba(var(--crimson-mute-glass-chrome), 0.24), transparent 28%, rgba(255, 52, 61, 0.28) 50%, transparent 72%, rgba(var(--crimson-mute-glass-chrome), 0.18)),
    radial-gradient(circle at 50% 48%, rgba(255, 48, 58, 0.54), rgba(171, 15, 22, 0.48) 48%, rgba(var(--crimson-mute-glass-deep), 0.58) 72%, rgba(8, 8, 10, 0.88) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    inset 0 -13px 20px rgba(0, 0, 0, 0.28),
    inset 0 10px 18px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.18),
    0 0 18px rgba(var(--crimson-mute-glass-chrome), 0.16),
    0 0 34px rgba(var(--crimson-mute-glass-red), 0.28) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute[aria-pressed="true"] .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.68) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.48), transparent 18%),
    linear-gradient(135deg, rgba(var(--crimson-mute-glass-chrome), 0.18), transparent 30%, rgba(var(--crimson-mute-glass-red), 0.24) 52%, transparent 74%),
    radial-gradient(circle at 50% 48%, rgba(var(--crimson-mute-glass-red), 0.58), rgba(126, 9, 14, 0.58) 52%, rgba(8, 4, 5, 0.88) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.14),
    inset 0 -13px 20px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.14),
    0 0 16px rgba(var(--crimson-mute-glass-chrome), 0.13),
    0 0 34px rgba(var(--crimson-mute-glass-red), 0.30) !important;
}

/* Crimson Red media mute black-glass finish.
   Scope: Crimson Red only. Uses a smooth red and black translucent surface with restrained chrome edging. */
html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --crimson-mute-glass-red: 239, 31, 42;
  --crimson-mute-glass-deep: 72, 4, 8;
  --crimson-mute-black: 5, 6, 9;
  --crimson-mute-black-soft: 20, 22, 28;
  --crimson-mute-glass-chrome: 232, 237, 242;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute::before {
  background:
    radial-gradient(ellipse at center, rgba(var(--crimson-mute-glass-red), 0.16), rgba(var(--crimson-mute-black), 0.24) 58%, transparent 78%) !important;
  opacity: 0.66 !important;
  filter: blur(0.35px) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-stick {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.42) !important;
  background:
    linear-gradient(90deg, rgba(var(--crimson-mute-glass-chrome), 0.34), rgba(var(--crimson-mute-black-soft), 0.74) 24%, rgba(var(--crimson-mute-glass-red), 0.28) 50%, rgba(var(--crimson-mute-black-soft), 0.74) 76%, rgba(var(--crimson-mute-glass-chrome), 0.28)),
    linear-gradient(180deg, rgba(var(--crimson-mute-glass-red), 0.22), rgba(var(--crimson-mute-black), 0.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -7px 10px rgba(0, 0, 0, 0.42),
    0 0 10px rgba(var(--crimson-mute-glass-red), 0.16) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.62) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.50), transparent 17%),
    radial-gradient(circle at 67% 78%, rgba(var(--crimson-mute-glass-red), 0.20), transparent 30%),
    linear-gradient(145deg, rgba(var(--crimson-mute-glass-red), 0.46) 0%, rgba(111, 8, 13, 0.42) 34%, rgba(var(--crimson-mute-black-soft), 0.72) 64%, rgba(var(--crimson-mute-black), 0.88) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.32)) !important;
  backdrop-filter: blur(6px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 12px 18px rgba(255, 255, 255, 0.08),
    inset 0 -16px 24px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.12),
    0 0 24px rgba(var(--crimson-mute-glass-red), 0.20) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::before {
  inset: -0.31rem !important;
  border: 1px solid rgba(var(--crimson-mute-glass-chrome), 0.22) !important;
  background:
    radial-gradient(circle at center, rgba(var(--crimson-mute-glass-red), 0.10), rgba(var(--crimson-mute-black), 0.12) 62%, transparent 72%) !important;
  box-shadow:
    0 0 16px rgba(var(--crimson-mute-glass-red), 0.14),
    inset 0 0 12px rgba(255, 255, 255, 0.04) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::after {
  inset: 0.39rem !important;
  border: 1px solid rgba(var(--crimson-mute-glass-chrome), 0.20) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(var(--crimson-mute-glass-red), 0.12) 38%, rgba(var(--crimson-mute-black), 0.34) 100%) !important;
  opacity: 0.58 !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.32) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:hover .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.74) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.58), transparent 17%),
    radial-gradient(circle at 67% 78%, rgba(255, 42, 50, 0.26), transparent 30%),
    linear-gradient(145deg, rgba(255, 42, 50, 0.54) 0%, rgba(126, 10, 15, 0.46) 34%, rgba(var(--crimson-mute-black-soft), 0.72) 64%, rgba(var(--crimson-mute-black), 0.88) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.30)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 12px 18px rgba(255, 255, 255, 0.10),
    inset 0 -16px 24px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.16),
    0 0 30px rgba(var(--crimson-mute-glass-red), 0.28) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute[aria-pressed="true"] .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.58) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.42), transparent 17%),
    radial-gradient(circle at 67% 78%, rgba(var(--crimson-mute-glass-red), 0.18), transparent 30%),
    linear-gradient(145deg, rgba(var(--crimson-mute-glass-red), 0.42) 0%, rgba(92, 6, 10, 0.48) 38%, rgba(var(--crimson-mute-black-soft), 0.76) 66%, rgba(var(--crimson-mute-black), 0.90) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.11),
    inset 0 -16px 24px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.12),
    0 0 28px rgba(var(--crimson-mute-glass-red), 0.25) !important;
}
/* Crimson Red media mute translucent black-glass polish.
   Scope: Crimson Red only. Adds more transparency to the red/black mute control while keeping a smooth, non-swirled finish. */
html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --crimson-mute-glass-red: 239, 31, 42;
  --crimson-mute-glass-deep: 72, 4, 8;
  --crimson-mute-black: 5, 6, 9;
  --crimson-mute-black-soft: 20, 22, 28;
  --crimson-mute-glass-chrome: 232, 237, 242;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute::before {
  background:
    radial-gradient(ellipse at center, rgba(var(--crimson-mute-glass-red), 0.12), rgba(var(--crimson-mute-black), 0.18) 58%, transparent 80%) !important;
  opacity: 0.54 !important;
  filter: blur(0.45px) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-stick {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.36) !important;
  background:
    linear-gradient(90deg, rgba(var(--crimson-mute-glass-chrome), 0.24), rgba(var(--crimson-mute-black-soft), 0.56) 24%, rgba(var(--crimson-mute-glass-red), 0.22) 50%, rgba(var(--crimson-mute-black-soft), 0.56) 76%, rgba(var(--crimson-mute-glass-chrome), 0.20)),
    linear-gradient(180deg, rgba(var(--crimson-mute-glass-red), 0.14), rgba(var(--crimson-mute-black), 0.52)) !important;
  backdrop-filter: blur(4px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -7px 10px rgba(0, 0, 0, 0.34),
    0 0 10px rgba(var(--crimson-mute-glass-red), 0.12) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.56) !important;
  background:
    radial-gradient(circle at 29% 19%, rgba(255, 255, 255, 0.44), transparent 17%),
    radial-gradient(circle at 66% 77%, rgba(var(--crimson-mute-glass-red), 0.16), transparent 30%),
    linear-gradient(145deg, rgba(var(--crimson-mute-glass-red), 0.34) 0%, rgba(105, 7, 12, 0.30) 34%, rgba(var(--crimson-mute-black-soft), 0.50) 64%, rgba(var(--crimson-mute-black), 0.68) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(0, 0, 0, 0.24)) !important;
  backdrop-filter: blur(9px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 12px 18px rgba(255, 255, 255, 0.075),
    inset 0 -16px 24px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.10),
    0 0 20px rgba(var(--crimson-mute-glass-red), 0.16) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::before {
  inset: -0.31rem !important;
  border: 1px solid rgba(var(--crimson-mute-glass-chrome), 0.18) !important;
  background:
    radial-gradient(circle at center, rgba(var(--crimson-mute-glass-red), 0.075), rgba(var(--crimson-mute-black), 0.095) 62%, transparent 72%) !important;
  box-shadow:
    0 0 14px rgba(var(--crimson-mute-glass-red), 0.11),
    inset 0 0 12px rgba(255, 255, 255, 0.035) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::after {
  inset: 0.39rem !important;
  border: 1px solid rgba(var(--crimson-mute-glass-chrome), 0.16) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(var(--crimson-mute-glass-red), 0.075) 38%, rgba(var(--crimson-mute-black), 0.22) 100%) !important;
  opacity: 0.48 !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.24) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:hover .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.68) !important;
  background:
    radial-gradient(circle at 29% 19%, rgba(255, 255, 255, 0.52), transparent 17%),
    radial-gradient(circle at 66% 77%, rgba(255, 42, 50, 0.21), transparent 30%),
    linear-gradient(145deg, rgba(255, 42, 50, 0.42) 0%, rgba(126, 10, 15, 0.34) 34%, rgba(var(--crimson-mute-black-soft), 0.50) 64%, rgba(var(--crimson-mute-black), 0.68) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(0, 0, 0, 0.22)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 12px 18px rgba(255, 255, 255, 0.09),
    inset 0 -16px 24px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.14),
    0 0 26px rgba(var(--crimson-mute-glass-red), 0.24) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute[aria-pressed="true"] .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-mute-glass-chrome), 0.52) !important;
  background:
    radial-gradient(circle at 29% 19%, rgba(255, 255, 255, 0.36), transparent 17%),
    radial-gradient(circle at 66% 77%, rgba(var(--crimson-mute-glass-red), 0.15), transparent 30%),
    linear-gradient(145deg, rgba(var(--crimson-mute-glass-red), 0.32) 0%, rgba(92, 6, 10, 0.34) 38%, rgba(var(--crimson-mute-black-soft), 0.54) 66%, rgba(var(--crimson-mute-black), 0.70) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.095),
    inset 0 -16px 24px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(var(--crimson-mute-glass-chrome), 0.10),
    0 0 24px rgba(var(--crimson-mute-glass-red), 0.21) !important;
}


/* Crimson Red media mute red-Iron glass finish.
   Scope: Crimson Red only. Ports the polished Iron Steel mute control treatment into a red glass surface. */
html[data-winterface-theme="crimson-red"] #winterface.interface-section {
  --crimson-iron-mute-red: 239, 31, 42;
  --crimson-iron-mute-red-hot: 255, 62, 74;
  --crimson-iron-mute-red-deep: 102, 6, 12;
  --crimson-iron-mute-black: 5, 7, 10;
  --crimson-iron-mute-chrome: 232, 237, 242;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute {
  border-color: rgba(var(--crimson-iron-mute-red), 0.50) !important;
  background:
    linear-gradient(145deg, rgba(var(--crimson-iron-mute-red-deep), 0.24), rgba(var(--crimson-iron-mute-black), 0.66) 58%, rgba(12, 14, 18, 0.74)),
    rgba(255, 255, 255, 0.028) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-iron-mute-chrome), 0.08),
    0 0 22px rgba(var(--crimson-iron-mute-red), 0.17),
    inset 0 0 18px rgba(var(--crimson-iron-mute-red), 0.045) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute::before,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-stick {
  border-color: rgba(var(--crimson-iron-mute-chrome), 0.26) !important;
  background:
    linear-gradient(180deg, rgba(var(--crimson-iron-mute-red-hot), 0.46), rgba(var(--crimson-iron-mute-red), 0.20) 48%, rgba(var(--crimson-iron-mute-black), 0.48)) !important;
  box-shadow:
    0 0 12px rgba(var(--crimson-iron-mute-red), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-iron-mute-red), 0.58) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(244, 247, 248, 0.64), transparent 22%),
    radial-gradient(circle, rgba(var(--crimson-iron-mute-red-hot), 0.62), rgba(var(--crimson-iron-mute-red-deep), 0.36) 58%, rgba(var(--crimson-iron-mute-black), 0.88) 100%) !important;
  backdrop-filter: blur(8px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.18) !important;
  box-shadow:
    inset 0 0 14px rgba(244, 247, 248, 0.11),
    inset 0 -14px 20px rgba(0, 0, 0, 0.30),
    0 0 14px rgba(var(--crimson-iron-mute-red), 0.32),
    0 0 28px rgba(var(--crimson-iron-mute-red), 0.13) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::before {
  inset: -0.31rem !important;
  border: 1px solid rgba(var(--crimson-iron-mute-red), 0.22) !important;
  background:
    radial-gradient(circle at center, rgba(var(--crimson-iron-mute-red), 0.13), rgba(var(--crimson-iron-mute-black), 0.10) 62%, transparent 73%) !important;
  box-shadow:
    0 0 15px rgba(var(--crimson-iron-mute-red), 0.16),
    inset 0 0 12px rgba(255, 255, 255, 0.035) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::after {
  inset: 0.39rem !important;
  border: 1px solid rgba(var(--crimson-iron-mute-chrome), 0.17) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(var(--crimson-iron-mute-red), 0.10) 42%, rgba(var(--crimson-iron-mute-black), 0.20) 100%) !important;
  opacity: 0.48 !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.22) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:hover .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--crimson-iron-mute-red-hot), 0.70) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(244, 247, 248, 0.74), transparent 22%),
    radial-gradient(circle, rgba(var(--crimson-iron-mute-red-hot), 0.72), rgba(var(--crimson-iron-mute-red-deep), 0.44) 58%, rgba(var(--crimson-iron-mute-black), 0.86) 100%) !important;
  box-shadow:
    inset 0 0 16px rgba(244, 247, 248, 0.13),
    inset 0 -14px 20px rgba(0, 0, 0, 0.27),
    0 0 18px rgba(var(--crimson-iron-mute-red), 0.40),
    0 0 34px rgba(var(--crimson-iron-mute-red), 0.18) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute[aria-pressed="true"] .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-iron-mute-red), 0.50) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(244, 247, 248, 0.52), transparent 22%),
    radial-gradient(circle, rgba(var(--crimson-iron-mute-red), 0.50), rgba(var(--crimson-iron-mute-red-deep), 0.34) 58%, rgba(var(--crimson-iron-mute-black), 0.90) 100%) !important;
  box-shadow:
    inset 0 0 13px rgba(244, 247, 248, 0.09),
    inset 0 -14px 20px rgba(0, 0, 0, 0.34),
    0 0 14px rgba(var(--crimson-iron-mute-red), 0.26),
    0 0 28px rgba(var(--crimson-iron-mute-red), 0.12) !important;
}

/* Crimson Red media mute chrome-ring glass polish.
   Scope: Crimson Red only. Adds a cleaner chrome lower-ring glow and a clearer glass edge around the mute control. */
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute {
  border-color: rgba(var(--crimson-iron-mute-chrome), 0.24) !important;
  background:
    linear-gradient(145deg, rgba(var(--crimson-iron-mute-red-deep), 0.20), rgba(var(--crimson-iron-mute-black), 0.58) 58%, rgba(12, 14, 18, 0.70)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-iron-mute-chrome), 0.12),
    0 8px 18px rgba(var(--crimson-iron-mute-chrome), 0.10),
    0 0 24px rgba(var(--crimson-iron-mute-red), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 20px rgba(var(--crimson-iron-mute-red), 0.050) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute::before {
  border-color: rgba(var(--crimson-iron-mute-chrome), 0.28) !important;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(var(--crimson-iron-mute-chrome), 0.22), rgba(var(--crimson-iron-mute-red), 0.11) 36%, transparent 70%),
    radial-gradient(ellipse at center, rgba(var(--crimson-iron-mute-red), 0.13), rgba(var(--crimson-iron-mute-black), 0.16) 58%, transparent 80%) !important;
  opacity: 0.72 !important;
  filter: blur(0.35px) !important;
  box-shadow:
    0 9px 18px rgba(var(--crimson-iron-mute-chrome), 0.13),
    0 0 22px rgba(var(--crimson-iron-mute-red), 0.16),
    inset 0 -5px 10px rgba(var(--crimson-iron-mute-chrome), 0.08) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-stick {
  border-color: rgba(var(--crimson-iron-mute-chrome), 0.36) !important;
  background:
    linear-gradient(90deg, rgba(var(--crimson-iron-mute-chrome), 0.34), rgba(var(--crimson-iron-mute-black), 0.52) 30%, rgba(var(--crimson-iron-mute-red), 0.24) 50%, rgba(var(--crimson-iron-mute-black), 0.52) 70%, rgba(var(--crimson-iron-mute-chrome), 0.30)),
    linear-gradient(180deg, rgba(var(--crimson-iron-mute-red-hot), 0.36), rgba(var(--crimson-iron-mute-red), 0.18) 48%, rgba(var(--crimson-iron-mute-black), 0.52)) !important;
  box-shadow:
    0 0 12px rgba(var(--crimson-iron-mute-chrome), 0.10),
    0 0 16px rgba(var(--crimson-iron-mute-red), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -7px 10px rgba(0, 0, 0, 0.32) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-iron-mute-chrome), 0.70) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.70), transparent 21%),
    radial-gradient(ellipse at 50% 86%, rgba(var(--crimson-iron-mute-chrome), 0.24), transparent 36%),
    radial-gradient(circle at 50% 48%, rgba(var(--crimson-iron-mute-red-hot), 0.56), rgba(var(--crimson-iron-mute-red-deep), 0.34) 56%, rgba(var(--crimson-iron-mute-black), 0.84) 100%) !important;
  backdrop-filter: blur(10px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 12px 18px rgba(255, 255, 255, 0.105),
    inset 0 -16px 22px rgba(0, 0, 0, 0.34),
    inset 0 -3px 8px rgba(var(--crimson-iron-mute-chrome), 0.14),
    0 0 0 1px rgba(var(--crimson-iron-mute-chrome), 0.18),
    0 8px 18px rgba(var(--crimson-iron-mute-chrome), 0.15),
    0 0 22px rgba(var(--crimson-iron-mute-red), 0.28),
    0 0 36px rgba(var(--crimson-iron-mute-red), 0.14) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::before {
  inset: -0.33rem !important;
  border: 1px solid rgba(var(--crimson-iron-mute-chrome), 0.36) !important;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(var(--crimson-iron-mute-chrome), 0.20), transparent 42%),
    radial-gradient(circle at center, rgba(var(--crimson-iron-mute-red), 0.095), rgba(var(--crimson-iron-mute-black), 0.10) 62%, transparent 73%) !important;
  box-shadow:
    0 7px 18px rgba(var(--crimson-iron-mute-chrome), 0.16),
    0 0 18px rgba(var(--crimson-iron-mute-chrome), 0.10),
    0 0 24px rgba(var(--crimson-iron-mute-red), 0.16),
    inset 0 -5px 10px rgba(var(--crimson-iron-mute-chrome), 0.08),
    inset 0 0 12px rgba(255, 255, 255, 0.045) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute-orb::after {
  inset: 0.38rem !important;
  border: 1px solid rgba(var(--crimson-iron-mute-chrome), 0.34) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(var(--crimson-iron-mute-red), 0.10) 42%, rgba(var(--crimson-iron-mute-black), 0.22) 100%) !important;
  opacity: 0.62 !important;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.24),
    0 0 8px rgba(var(--crimson-iron-mute-chrome), 0.10) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:hover .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(var(--crimson-iron-mute-chrome), 0.82) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.78), transparent 21%),
    radial-gradient(ellipse at 50% 86%, rgba(var(--crimson-iron-mute-chrome), 0.30), transparent 36%),
    radial-gradient(circle at 50% 48%, rgba(var(--crimson-iron-mute-red-hot), 0.66), rgba(var(--crimson-iron-mute-red-deep), 0.42) 56%, rgba(var(--crimson-iron-mute-black), 0.84) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    inset 0 12px 18px rgba(255, 255, 255, 0.13),
    inset 0 -16px 22px rgba(0, 0, 0, 0.30),
    inset 0 -3px 8px rgba(var(--crimson-iron-mute-chrome), 0.18),
    0 0 0 1px rgba(var(--crimson-iron-mute-chrome), 0.24),
    0 9px 20px rgba(var(--crimson-iron-mute-chrome), 0.18),
    0 0 26px rgba(var(--crimson-iron-mute-red), 0.36),
    0 0 42px rgba(var(--crimson-iron-mute-red), 0.18) !important;
}

html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-media-mute[aria-pressed="true"] .interface-media-mute-orb,
html[data-winterface-theme="crimson-red"] body.winterface-offline #winterface.interface-section .interface-media-mute-orb {
  border-color: rgba(var(--crimson-iron-mute-chrome), 0.64) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.58), transparent 21%),
    radial-gradient(ellipse at 50% 86%, rgba(var(--crimson-iron-mute-chrome), 0.18), transparent 38%),
    radial-gradient(circle at 50% 48%, rgba(var(--crimson-iron-mute-red), 0.48), rgba(var(--crimson-iron-mute-red-deep), 0.32) 58%, rgba(var(--crimson-iron-mute-black), 0.90) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 -16px 22px rgba(0, 0, 0, 0.36),
    inset 0 -3px 8px rgba(var(--crimson-iron-mute-chrome), 0.10),
    0 0 0 1px rgba(var(--crimson-iron-mute-chrome), 0.16),
    0 7px 18px rgba(var(--crimson-iron-mute-chrome), 0.12),
    0 0 24px rgba(var(--crimson-iron-mute-red), 0.24) !important;
}

/* WInterface recorder trim panel: simple start/end trim controls. */
.interface-recorder-trim-panel {
  align-items: center;
  justify-content: center;
  padding: 1.35rem;
}

.interface-recorder-trim-card {
  width: min(46rem, calc(100vw - 2rem));
}

.interface-recorder-trim-card video {
  display: block;
  width: 100%;
  max-height: min(52vh, 27rem);
  margin: 0.75rem 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.8rem;
  background: #000;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.05), 0 18px 42px rgba(0, 0, 0, 0.36);
}

.interface-recorder-trim-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.55rem 0 0.7rem;
}

.interface-recorder-trim-fields label {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interface-recorder-trim-fields input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.65rem;
  background: rgba(2, 6, 16, 0.62);
  color: rgba(248, 250, 252, 0.96);
  padding: 0.55rem 0.62rem;
  font: inherit;
  outline: none;
}

.interface-recorder-trim-fields input:focus-visible {
  border-color: rgba(255, 150, 164, 0.82);
  box-shadow: 0 0 18px rgba(255, 45, 80, 0.22);
}

.interface-recorder-trim-status {
  min-height: 1.25rem;
  color: rgba(203, 213, 225, 0.86);
  font-size: 0.78rem;
  line-height: 1.35;
}

.interface-recorder-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

@media (max-width: 640px) {
  .interface-recorder-trim-fields {
    grid-template-columns: 1fr;
  }

  .interface-recorder-trim-card {
    max-height: calc(100vh - 2rem);
    overflow: auto;
  }
}

/* Crimson Red status-orb chrome authority.
   Scope: Crimson Red only. Keeps active Mute Visual Style and Hide Command Bar
   status orbs metallic chrome while preserving the red muted/hidden states. */
html[data-winterface-theme="crimson-red"] body:not(.winterface-offline) #winterface.interface-section .interface-system-orb-toggle i,
html[data-winterface-theme="crimson-red"] body:not(.winterface-commandbar-hidden) #winterface.interface-section .interface-commandbar-toggle i {
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.82), transparent 24%),
    radial-gradient(circle at 50% 52%, rgba(var(--crimson-chrome-rgb), 0.96), rgba(184, 196, 207, 0.76) 56%, rgba(20, 22, 25, 0.98) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(var(--crimson-chrome-rgb), 0.22),
    0 0 11px rgba(var(--crimson-chrome-rgb), 0.62),
    0 0 24px rgba(var(--crimson-chrome-rgb), 0.26),
    0 0 34px rgba(var(--crimson-red-live-rgb), 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 6px rgba(0, 0, 0, 0.24) !important;
}

html[data-winterface-theme="crimson-red"] body:not(.winterface-offline) #winterface.interface-section .interface-system-orb-toggle i::after,
html[data-winterface-theme="crimson-red"] body:not(.winterface-commandbar-hidden) #winterface.interface-section .interface-commandbar-toggle i::after {
  background:
    radial-gradient(circle, rgba(var(--crimson-chrome-rgb), 0.26), rgba(var(--crimson-chrome-rgb), 0.10) 40%, transparent 72%) !important;
}

/* === WInterface Solo Iron Steel Navigation Button Authority ===
   Scope: Iron Steel only. Back, Bay, and Next stay color-coded at rest.
   Hover/focus shifts the edge and lower light bar to subdued chrome with a darker inset. */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1) {
  --iron-nav-chip-rgb: 45, 184, 161;
  --iron-nav-chip-core-rgb: 1, 16, 15;
  --iron-nav-chip-glow-rgb: 45, 184, 161;
  --iron-nav-chip-chrome-rgb: 196, 204, 214;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2) {
  --iron-nav-chip-rgb: 132, 105, 211;
  --iron-nav-chip-core-rgb: 8, 6, 22;
  --iron-nav-chip-glow-rgb: 132, 105, 211;
  --iron-nav-chip-chrome-rgb: 196, 204, 214;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3) {
  --iron-nav-chip-rgb: 222, 78, 94;
  --iron-nav-chip-core-rgb: 22, 5, 9;
  --iron-nav-chip-glow-rgb: 222, 78, 94;
  --iron-nav-chip-chrome-rgb: 196, 204, 214;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active {
  border: 2px solid rgba(var(--iron-nav-chip-rgb), 0.78) !important;
  outline: 1px solid rgba(var(--iron-nav-chip-rgb), 0.28) !important;
  outline-offset: -3px !important;
  background:
    radial-gradient(ellipse at 50% -28%, rgba(232, 238, 244, 0.040), transparent 58%),
    radial-gradient(ellipse at 50% 112%, rgba(var(--iron-nav-chip-rgb), 0.040), transparent 68%),
    linear-gradient(180deg, rgba(13, 17, 25, 0.98), rgba(4, 7, 13, 1) 70%, rgba(0, 1, 5, 1)) !important;
  color: rgba(236, 241, 247, 0.94) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.94),
    0 0 5px rgba(232, 238, 244, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.20),
    0 7px 18px rgba(0, 0, 0, 0.46),
    0 0 13px rgba(var(--iron-nav-chip-glow-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -15px 24px rgba(0, 0, 0, 0.50),
    inset 0 0 22px rgba(0, 0, 0, 0.38) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active::before {
  opacity: 0.28 !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.050), transparent 42%),
    linear-gradient(90deg, transparent, rgba(var(--iron-nav-chip-rgb), 0.070), transparent) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active::after {
  height: 2px !important;
  opacity: 0.96 !important;
  background: rgba(var(--iron-nav-chip-rgb), 0.86) !important;
  box-shadow:
    0 0 8px rgba(var(--iron-nav-chip-glow-rgb), 0.48),
    0 0 16px rgba(var(--iron-nav-chip-glow-rgb), 0.18) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active:focus-visible {
  border-color: rgba(var(--iron-nav-chip-chrome-rgb), 0.78) !important;
  outline-color: rgba(var(--iron-nav-chip-chrome-rgb), 0.18) !important;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(var(--iron-nav-chip-rgb), 0.020), transparent 66%),
    radial-gradient(ellipse at 50% -22%, rgba(var(--iron-nav-chip-rgb), 0.018), transparent 60%),
    linear-gradient(180deg, rgba(6, 8, 13, 1), rgba(1, 2, 6, 1) 46%, rgba(0, 0, 3, 1) 100%) !important;
  color: rgba(248, 250, 252, 0.96) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 4px rgba(232, 238, 244, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.78),
    0 0 0 2px rgba(var(--iron-nav-chip-chrome-rgb), 0.13),
    0 10px 24px rgba(0, 0, 0, 0.56),
    0 0 8px rgba(var(--iron-nav-chip-glow-rgb), 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.028),
    inset 0 15px 24px rgba(0, 0, 0, 0.58),
    inset 0 -24px 38px rgba(0, 0, 0, 0.88),
    inset 0 0 40px rgba(0, 0, 0, 0.86) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:hover::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus-visible::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active:hover::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active:focus-visible::before {
  opacity: 0.18 !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.035), transparent 42%),
    linear-gradient(90deg, transparent, rgba(var(--iron-nav-chip-chrome-rgb), 0.060), transparent) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus-visible::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active:focus-visible::after {
  opacity: 0.84 !important;
  background: rgba(var(--iron-nav-chip-chrome-rgb), 0.76) !important;
  box-shadow:
    0 0 8px rgba(var(--iron-nav-chip-chrome-rgb), 0.30),
    0 0 14px rgba(var(--iron-nav-chip-chrome-rgb), 0.12) !important;
}


/* === WInterface Solo Iron Steel Back / Bay / Next Button Refinement ===
   Scope: Iron Steel only. Initial state matches the dark danieldev.us-style
   colored-edge treatment. Hover and post-interaction active states use a darker
   colored glass fill with a chrome lower light bar. */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip="0"] {
  --iron-nav-chip-rgb: 45, 184, 161;
  --iron-nav-chip-core-rgb: 1, 14, 13;
  --iron-nav-chip-glow-rgb: 45, 184, 161;
  --iron-nav-chip-chrome-rgb: 200, 207, 216;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip="1"] {
  --iron-nav-chip-rgb: 132, 105, 211;
  --iron-nav-chip-core-rgb: 8, 6, 22;
  --iron-nav-chip-glow-rgb: 132, 105, 211;
  --iron-nav-chip-chrome-rgb: 200, 207, 216;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip="2"] {
  --iron-nav-chip-rgb: 222, 78, 94;
  --iron-nav-chip-core-rgb: 22, 5, 9;
  --iron-nav-chip-glow-rgb: 222, 78, 94;
  --iron-nav-chip-chrome-rgb: 200, 207, 216;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip] {
  border: 1px solid rgba(var(--iron-nav-chip-rgb), 0.74) !important;
  outline: 1px solid rgba(var(--iron-nav-chip-rgb), 0.20) !important;
  outline-offset: -2px !important;
  background:
    radial-gradient(ellipse at 50% -34%, rgba(226, 232, 240, 0.080), transparent 62%),
    radial-gradient(ellipse at 50% 116%, rgba(var(--iron-nav-chip-rgb), 0.070), transparent 70%),
    linear-gradient(180deg, rgba(15, 20, 29, 0.99), rgba(6, 9, 16, 1) 64%, rgba(0, 1, 5, 1)) !important;
  color: rgba(236, 241, 247, 0.95) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.94),
    0 0 5px rgba(232, 238, 244, 0.12) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.78),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.18),
    0 8px 18px rgba(0, 0, 0, 0.46),
    0 0 13px rgba(var(--iron-nav-chip-glow-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.040),
    inset 0 -15px 24px rgba(0, 0, 0, 0.50),
    inset 0 0 22px rgba(0, 0, 0, 0.38) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip]::before {
  opacity: 0.25 !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.052), transparent 44%),
    linear-gradient(90deg, transparent, rgba(var(--iron-nav-chip-rgb), 0.070), transparent) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip]::after {
  height: 1px !important;
  opacity: 0.92 !important;
  background: rgba(var(--iron-nav-chip-rgb), 0.72) !important;
  box-shadow:
    0 0 7px rgba(var(--iron-nav-chip-glow-rgb), 0.38),
    0 0 13px rgba(var(--iron-nav-chip-glow-rgb), 0.16) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip]:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse.has-user-pulse-interaction .interface-signal-pulse-chip[data-interface-pulse-chip].is-active {
  border-color: rgba(var(--iron-nav-chip-rgb), 0.90) !important;
  outline-color: rgba(var(--iron-nav-chip-rgb), 0.28) !important;
  background:
    radial-gradient(ellipse at 50% -26%, rgba(238, 242, 247, 0.20), transparent 58%),
    radial-gradient(ellipse at 50% 112%, rgba(var(--iron-nav-chip-rgb), 0.22), transparent 70%),
    linear-gradient(180deg, rgba(var(--iron-nav-chip-rgb), 0.42), rgba(var(--iron-nav-chip-core-rgb), 0.94) 54%, rgba(0, 1, 5, 1) 100%) !important;
  color: rgba(248, 250, 252, 0.98) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.24),
    0 10px 24px rgba(0, 0, 0, 0.52),
    0 0 20px rgba(var(--iron-nav-chip-glow-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 14px 20px rgba(255, 255, 255, 0.035),
    inset 0 -24px 36px rgba(0, 0, 0, 0.66),
    inset 0 0 30px rgba(0, 0, 0, 0.50) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip]:hover::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse.has-user-pulse-interaction .interface-signal-pulse-chip[data-interface-pulse-chip].is-active::before {
  opacity: 0.34 !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.13), transparent 43%),
    linear-gradient(90deg, transparent, rgba(var(--iron-nav-chip-rgb), 0.15), transparent) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip]:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse-chips > .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse.has-user-pulse-interaction .interface-signal-pulse-chip[data-interface-pulse-chip].is-active::after {
  height: 1px !important;
  opacity: 0.96 !important;
  background: linear-gradient(90deg, transparent, rgba(var(--iron-nav-chip-chrome-rgb), 0.92), rgba(246, 248, 251, 0.96), rgba(var(--iron-nav-chip-chrome-rgb), 0.82), transparent) !important;
  box-shadow:
    0 0 8px rgba(var(--iron-nav-chip-chrome-rgb), 0.34),
    0 0 14px rgba(var(--iron-nav-chip-chrome-rgb), 0.16) !important;
}

/* === WInterface Solo Iron Steel Navigation Button Final Hover Authority ===
   Scope: Iron Steel only. Resting state mirrors the clean danieldev.us dark glass look.
   Hover/focus switches to the richer colored glass treatment with a chrome lower rail. */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip.is-active,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active {
  --iron-nav-rest-core-rgb: 3, 7, 13;
  --iron-nav-chrome-rgb: 198, 204, 214;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgba(var(--iron-nav-chip-rgb), 0.82) !important;
  outline: 0 !important;
  background:
    linear-gradient(180deg, rgba(21, 26, 37, 0.76), rgba(5, 9, 16, 0.98) 58%, rgba(0, 2, 7, 1) 100%) !important;
  color: rgba(238, 243, 248, 0.94) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.96),
    0 0 5px rgba(238, 243, 248, 0.11) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.86),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.30),
    0 8px 18px rgba(0, 0, 0, 0.58),
    0 0 12px rgba(var(--iron-nav-chip-rgb), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.040),
    inset 0 -16px 26px rgba(0, 0, 0, 0.58),
    inset 0 0 28px rgba(0, 0, 0, 0.48) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip.is-active::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active::before {
  opacity: 0.24 !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.055), transparent 44%),
    linear-gradient(90deg, transparent, rgba(var(--iron-nav-chip-rgb), 0.055), transparent) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip.is-active::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip.is-active::after {
  height: 2px !important;
  opacity: 0.92 !important;
  background: rgba(var(--iron-nav-chip-rgb), 0.70) !important;
  box-shadow:
    0 0 7px rgba(var(--iron-nav-chip-rgb), 0.34),
    0 0 13px rgba(var(--iron-nav-chip-rgb), 0.12) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:focus,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus-visible {
  border-color: rgba(var(--iron-nav-chip-rgb), 0.94) !important;
  background:
    radial-gradient(ellipse at 50% -28%, rgba(var(--iron-nav-chip-rgb), 0.46), transparent 62%),
    linear-gradient(180deg, rgba(var(--iron-nav-chip-rgb), 0.36), rgba(var(--iron-nav-chip-core-rgb), 0.86) 48%, rgba(1, 2, 7, 1) 100%) !important;
  color: rgba(249, 251, 253, 0.98) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 7px rgba(248, 250, 252, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.88),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.46),
    0 11px 24px rgba(0, 0, 0, 0.64),
    0 0 20px rgba(var(--iron-nav-chip-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 16px 24px rgba(255, 255, 255, 0.035),
    inset 0 -24px 40px rgba(0, 0, 0, 0.66),
    inset 0 0 36px rgba(0, 0, 0, 0.54) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:hover::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:focus::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:focus-visible::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:hover::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus-visible::before {
  opacity: 0.42 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 48%),
    linear-gradient(90deg, transparent, rgba(var(--iron-nav-chip-rgb), 0.18), transparent) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:focus::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip:focus-visible::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip:focus-visible::after {
  opacity: 0.88 !important;
  background: rgba(var(--iron-nav-chrome-rgb), 0.72) !important;
  box-shadow:
    0 0 8px rgba(var(--iron-nav-chrome-rgb), 0.30),
    0 0 14px rgba(var(--iron-nav-chrome-rgb), 0.12) !important;
}

/* === WInterface Solo Iron Steel Navigation Button Color Balance ===
   Scope: Iron Steel only. Final authority for the Back / Bay / Next controller.
   Rest keeps each button's colored edge visible at a lower intensity. Hover and
   keyboard focus add a stronger colored glass fill while retaining the chrome lower rail. */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip="0"] {
  --iron-nav-chip-rgb: 45, 184, 161;
  --iron-nav-chip-core-rgb: 2, 18, 17;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip="1"] {
  --iron-nav-chip-rgb: 132, 105, 211;
  --iron-nav-chip-core-rgb: 9, 7, 25;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip="2"] {
  --iron-nav-chip-rgb: 222, 78, 94;
  --iron-nav-chip-core-rgb: 24, 6, 10;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip],
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip] {
  --iron-nav-chrome-rgb: 198, 204, 214;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgba(var(--iron-nav-chip-rgb), 0.68) !important;
  outline: 1px solid rgba(var(--iron-nav-chip-rgb), 0.18) !important;
  outline-offset: -3px !important;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(238, 243, 248, 0.075), transparent 60%),
    radial-gradient(ellipse at 50% 116%, rgba(var(--iron-nav-chip-rgb), 0.080), transparent 70%),
    linear-gradient(180deg, rgba(16, 21, 31, 0.88), rgba(5, 9, 16, 0.99) 58%, rgba(0, 2, 7, 1) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.84),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.20),
    0 8px 18px rgba(0, 0, 0, 0.56),
    0 0 12px rgba(var(--iron-nav-chip-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.040),
    inset 0 -16px 26px rgba(0, 0, 0, 0.56),
    inset 0 0 28px rgba(0, 0, 0, 0.46) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]::after {
  height: 2px !important;
  opacity: 0.86 !important;
  background: rgba(var(--iron-nav-chip-rgb), 0.56) !important;
  box-shadow:
    0 0 7px rgba(var(--iron-nav-chip-rgb), 0.26),
    0 0 13px rgba(var(--iron-nav-chip-rgb), 0.10) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible {
  border-color: rgba(var(--iron-nav-chip-rgb), 0.94) !important;
  outline-color: rgba(var(--iron-nav-chip-rgb), 0.32) !important;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(var(--iron-nav-chip-rgb), 0.58), transparent 62%),
    radial-gradient(ellipse at 50% 112%, rgba(var(--iron-nav-chip-rgb), 0.30), transparent 70%),
    linear-gradient(180deg, rgba(var(--iron-nav-chip-rgb), 0.50), rgba(var(--iron-nav-chip-core-rgb), 0.84) 50%, rgba(2, 4, 10, 1) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.82),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.48),
    0 11px 24px rgba(0, 0, 0, 0.60),
    0 0 22px rgba(var(--iron-nav-chip-rgb), 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.085),
    inset 0 14px 22px rgba(255, 255, 255, 0.045),
    inset 0 -21px 34px rgba(0, 0, 0, 0.58),
    inset 0 0 32px rgba(0, 0, 0, 0.42) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::after {
  opacity: 0.92 !important;
  background: rgba(var(--iron-nav-chrome-rgb), 0.76) !important;
  box-shadow:
    0 0 8px rgba(var(--iron-nav-chrome-rgb), 0.34),
    0 0 14px rgba(var(--iron-nav-chrome-rgb), 0.14) !important;
}

/* Iron Steel Back/Bay/Next glass-color tuning. */
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip] {
  border-color: rgba(var(--iron-nav-chip-rgb), 0.72) !important;
  outline-color: rgba(var(--iron-nav-chip-rgb), 0.20) !important;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(238, 243, 248, 0.082), transparent 60%),
    radial-gradient(ellipse at 50% 116%, rgba(var(--iron-nav-chip-rgb), 0.092), transparent 70%),
    linear-gradient(180deg, rgba(18, 23, 33, 0.88), rgba(7, 11, 19, 0.98) 58%, rgba(0, 2, 7, 1) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.82),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.22),
    0 8px 18px rgba(0, 0, 0, 0.54),
    0 0 13px rgba(var(--iron-nav-chip-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -15px 25px rgba(0, 0, 0, 0.52),
    inset 0 0 26px rgba(0, 0, 0, 0.42) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]::after {
  background: rgba(var(--iron-nav-chip-rgb), 0.60) !important;
  box-shadow:
    0 0 7px rgba(var(--iron-nav-chip-rgb), 0.28),
    0 0 13px rgba(var(--iron-nav-chip-rgb), 0.11) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse.has-user-pulse-interaction .interface-signal-pulse-chip[data-interface-pulse-chip].is-active,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible {
  border-color: rgba(var(--iron-nav-chip-rgb), 0.94) !important;
  outline-color: rgba(var(--iron-nav-chip-rgb), 0.34) !important;
  background:
    radial-gradient(ellipse at 50% -34%, rgba(255, 255, 255, 0.18), transparent 52%),
    radial-gradient(ellipse at 50% -12%, rgba(var(--iron-nav-chip-rgb), 0.62), transparent 62%),
    radial-gradient(ellipse at 50% 112%, rgba(var(--iron-nav-chip-rgb), 0.36), transparent 72%),
    linear-gradient(180deg, rgba(var(--iron-nav-chip-rgb), 0.58), rgba(var(--iron-nav-chip-core-rgb), 0.74) 48%, rgba(5, 7, 14, 0.92) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.76),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.50),
    0 11px 24px rgba(0, 0, 0, 0.56),
    0 0 24px rgba(var(--iron-nav-chip-rgb), 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 16px 22px rgba(255, 255, 255, 0.055),
    inset 0 -19px 32px rgba(0, 0, 0, 0.46),
    inset 0 0 30px rgba(var(--iron-nav-chip-rgb), 0.10) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse.has-user-pulse-interaction .interface-signal-pulse-chip[data-interface-pulse-chip].is-active::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus::before,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::before {
  opacity: 0.48 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 46%),
    linear-gradient(90deg, transparent, rgba(var(--iron-nav-chip-rgb), 0.20), transparent) !important;
}

html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel .interface-signal-pulse.has-user-pulse-interaction .interface-signal-pulse-chip[data-interface-pulse-chip].is-active::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:hover::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-signal-pulse .interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::after {
  opacity: 0.94 !important;
  background: rgba(var(--iron-nav-chrome-rgb), 0.78) !important;
  box-shadow:
    0 0 8px rgba(var(--iron-nav-chrome-rgb), 0.36),
    0 0 14px rgba(var(--iron-nav-chrome-rgb), 0.15) !important;
}

/* === WInterface Solo Iron Steel Navigation Button Persistent Color Border ===
   Scope: Iron Steel only. Keeps Back / Bay / Next color borders visible at rest,
   with a stronger colored-glass fill on hover and chrome lower rail on interaction. */
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="0"],
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="0"],
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="0"] {
  --iron-nav-chip-rgb: 45, 184, 161;
  --iron-nav-chip-core-rgb: 2, 18, 17;
  --iron-nav-chrome-rgb: 198, 204, 214;
}

html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="1"],
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="1"],
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="1"] {
  --iron-nav-chip-rgb: 132, 105, 211;
  --iron-nav-chip-core-rgb: 9, 7, 25;
  --iron-nav-chrome-rgb: 198, 204, 214;
}

html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="2"],
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="2"],
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip="2"] {
  --iron-nav-chip-rgb: 222, 78, 94;
  --iron-nav-chip-core-rgb: 24, 6, 10;
  --iron-nav-chrome-rgb: 198, 204, 214;
}

html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip],
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip],
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip],
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip].is-active:not(:hover):not(:focus):not(:focus-visible) {
  border: 2px solid rgba(var(--iron-nav-chip-rgb), 0.70) !important;
  outline: 1px solid rgba(var(--iron-nav-chip-rgb), 0.18) !important;
  outline-offset: -4px !important;
  background:
    radial-gradient(ellipse at 50% -32%, rgba(248, 250, 252, 0.18), transparent 58%),
    radial-gradient(ellipse at 50% 112%, rgba(var(--iron-nav-chip-rgb), 0.14), transparent 70%),
    linear-gradient(180deg, rgba(var(--iron-nav-chip-rgb), 0.12), rgba(30, 36, 48, 0.84) 48%, rgba(14, 18, 28, 0.92) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.64),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.24),
    0 8px 18px rgba(0, 0, 0, 0.44),
    0 0 14px rgba(var(--iron-nav-chip-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 12px 18px rgba(255, 255, 255, 0.045),
    inset 0 -12px 22px rgba(0, 0, 0, 0.34),
    inset 0 0 26px rgba(var(--iron-nav-chip-rgb), 0.055) !important;
}

html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]::after,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]::after {
  height: 2px !important;
  opacity: 0.86 !important;
  background: rgba(var(--iron-nav-chip-rgb), 0.58) !important;
  box-shadow:
    0 0 7px rgba(var(--iron-nav-chip-rgb), 0.28),
    0 0 13px rgba(var(--iron-nav-chip-rgb), 0.11) !important;
}

html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:hover,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:focus,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:hover,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:focus,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel [data-interface-pulse].has-user-pulse-interaction .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip].is-active {
  border-color: rgba(var(--iron-nav-chip-rgb), 0.94) !important;
  outline-color: rgba(var(--iron-nav-chip-rgb), 0.34) !important;
  background:
    radial-gradient(ellipse at 50% -34%, rgba(255, 255, 255, 0.18), transparent 52%),
    radial-gradient(ellipse at 50% -12%, rgba(var(--iron-nav-chip-rgb), 0.62), transparent 62%),
    radial-gradient(ellipse at 50% 112%, rgba(var(--iron-nav-chip-rgb), 0.36), transparent 72%),
    linear-gradient(180deg, rgba(var(--iron-nav-chip-rgb), 0.58), rgba(var(--iron-nav-chip-core-rgb), 0.74) 48%, rgba(5, 7, 14, 0.92) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.76),
    0 0 0 2px rgba(var(--iron-nav-chip-rgb), 0.50),
    0 11px 24px rgba(0, 0, 0, 0.56),
    0 0 24px rgba(var(--iron-nav-chip-rgb), 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 16px 22px rgba(255, 255, 255, 0.055),
    inset 0 -19px 32px rgba(0, 0, 0, 0.46),
    inset 0 0 30px rgba(var(--iron-nav-chip-rgb), 0.10) !important;
}

html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:hover::after,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:focus::after,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::after,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:hover::after,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:focus::after,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel [data-interface-pulse] .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip]:focus-visible::after,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel [data-interface-pulse].has-user-pulse-interaction .interface-signal-pulse-chips > button.interface-signal-pulse-chip[data-interface-pulse-chip].is-active::after {
  opacity: 0.94 !important;
  background: rgba(var(--iron-nav-chrome-rgb), 0.78) !important;
  box-shadow:
    0 0 8px rgba(var(--iron-nav-chrome-rgb), 0.36),
    0 0 14px rgba(var(--iron-nav-chrome-rgb), 0.15) !important;
}
/* === WInterface Solo Iron Steel Navigation Button Persistent Color Border === */


/* === WInterface Solo Blue Chrome Oval Border Sync ===
   Scope: Blue Chrome only. Aligns the Bay Active and Style Matrix oval borders
   with the Live Media button blue while preserving existing layout and behavior. */
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-mode,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-theme-toggle {
  border-color: rgba(108, 172, 228, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(108, 172, 228, 0.16),
    0 14px 34px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(108, 172, 228, 0.16),
    0 0 34px rgba(209, 209, 206, 0.09),
    inset 0 0 18px rgba(108, 172, 228, 0.045) !important;
}

html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-mode::before,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-theme-toggle::before {
  border-color: rgba(108, 172, 228, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(108, 172, 228, 0.16),
    inset 0 -1px 0 rgba(209, 209, 206, 0.09) !important;
}

/* === WInterface Solo Blue Chrome Top Oval Blue Border Authority ===
   Scope: Blue Chrome only. Uses the same blue accent family as the Live Media button
   for the Bay Active and Style Matrix oval borders, including their overlay layers. */
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle {
  border: 1px solid rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.18),
    0 14px 34px rgba(0, 0, 0, 0.25),
    0 0 22px rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.24),
    0 0 34px rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.12),
    inset 0 0 0 1px rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.10),
    inset 0 0 22px rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.07) !important;
}

html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode::before,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode::before,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode::after,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode::after,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle::before,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle::before,
html[data-winterface-theme="blue-chrome"] body.winterface-standalone #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle::after,
html[data-winterface-theme="blue-chrome"] body.winterface-dev-build #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle::after,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode::before,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar > .interface-status-item.interface-status-mode::after,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle::before,
html[data-winterface-theme="blue-chrome"] body #winterface.interface-section .interface-status-bar .interface-theme-selector > .interface-theme-toggle::after {
  border-color: rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.18),
    inset 0 -1px 0 rgba(var(--winterface-slot-media-action-border-rgb, 108, 172, 228), 0.12) !important;
}
/* === WInterface Solo Blue Chrome Top Oval Blue Border Authority === */

/* === WInterface Solo Expanded Bay Orb Rail Separation Authority ===
   Scope: desktop Expanded/Snap compact bay header only. Gives the Bay label/subtitle
   enough room while keeping the seven-orb rail contained inside the header. */
@media (min-width: 900px) {
  html body.winterface-standalone #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header,
  html body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header,
  html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header {
    display: grid !important;
    grid-template-columns: 2.28rem minmax(0, 1fr) !important;
    column-gap: 0.10rem !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: center !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header > div:first-child,
  html body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header > div:first-child,
  html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header > div:first-child {
    width: 2.28rem !important;
    min-width: 2.28rem !important;
    max-width: 2.28rem !important;
    justify-self: start !important;
    text-align: left !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-label,
  html body.winterface-standalone #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-subtitle,
  html body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-label,
  html body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-subtitle,
  html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-label,
  html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-subtitle {
    max-width: 2.28rem !important;
    text-align: left !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body.winterface-standalone #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header .interface-set-controls,
  html body.winterface-dev-build #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header .interface-set-controls,
  html body.winterface-browser-fullscreen #winterface.interface-section.interface-system-media-expanded.interface-system-compact-bay-label .interface-rail-header .interface-set-controls {
    justify-self: start !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
    max-width: 100% !important;
  }
}
/* === WInterface Solo Expanded Bay Orb Rail Separation Authority === */

/* Crimson Red: chrome authority for both navigation side containers.
   Keeps the accepted right-side chrome treatment and applies the same metal edge to the left menu rail. */
html[data-winterface-theme="crimson-red"] body.winterface-standalone #winterface.interface-section .interface-rail,
html[data-winterface-theme="crimson-red"] body.winterface-dev-build #winterface.interface-section .interface-rail,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-rail,
html[data-winterface-theme="crimson-red"] body.winterface-standalone #winterface.interface-section .interface-side-panel,
html[data-winterface-theme="crimson-red"] body.winterface-dev-build #winterface.interface-section .interface-side-panel,
html[data-winterface-theme="crimson-red"] body #winterface.interface-section .interface-side-panel {
  border-color: rgba(214, 221, 227, 0.78) !important;
  box-shadow:
    inset 0 0 34px rgba(214, 221, 227, 0.038),
    0 0 0 1px rgba(255, 255, 255, 0.065),
    0 18px 48px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(214, 221, 227, 0.12) !important;
}

/* Iron Steel: chrome authority for main navigation containers only.
   Scope: Style Matrix 01. Applies metallic silver to the left menu rail and the larger right side panel without changing Primary Signal or Live Systems card borders. */
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-rail,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-rail,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-rail,
html[data-winterface-theme="default"] body.winterface-standalone #winterface.interface-section .interface-side-panel,
html[data-winterface-theme="default"] body.winterface-dev-build #winterface.interface-section .interface-side-panel,
html[data-winterface-theme="default"] body #winterface.interface-section .interface-side-panel {
  border-color: rgba(var(--iron-steel-chrome-rgb, 209, 209, 206), 0.82) !important;
  box-shadow:
    inset 0 0 34px rgba(var(--iron-steel-chrome-rgb, 209, 209, 206), 0.040),
    0 0 0 1px rgba(255, 255, 255, 0.070),
    0 18px 48px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(var(--iron-steel-chrome-rgb, 209, 209, 206), 0.13) !important;
}

/* Mute Visual Style: pause motion on animated interface controls only. */
body.winterface-offline #winterface .interface-jump-link,
body.winterface-offline #winterface .interface-jump-link::before,
body.winterface-offline #winterface .interface-jump-link::after,
body.winterface-offline #winterface .interface-signal-pulse,
body.winterface-offline #winterface .interface-signal-pulse::before,
body.winterface-offline #winterface .interface-signal-pulse::after,
body.winterface-offline #winterface .interface-signal-pulse *,
body.winterface-offline #winterface .interface-signal-pulse *::before,
body.winterface-offline #winterface .interface-signal-pulse *::after,
body.winterface-offline #winterface .interface-path-list,
body.winterface-offline #winterface .interface-path-list::before,
body.winterface-offline #winterface .interface-path-list::after,
body.winterface-offline #winterface .interface-path,
body.winterface-offline #winterface .interface-path::before,
body.winterface-offline #winterface .interface-path::after,
body.winterface-offline #winterface .interface-path *,
body.winterface-offline #winterface .interface-path *::before,
body.winterface-offline #winterface .interface-path *::after,
body.winterface-offline #winterface .interface-command-line,
body.winterface-offline #winterface .interface-command-line::before,
body.winterface-offline #winterface .interface-command-line::after,
body.winterface-offline #winterface .interface-command-line *,
body.winterface-offline #winterface .interface-command-line *::before,
body.winterface-offline #winterface .interface-command-line *::after,
body.winterface-offline #winterface .interface-media-actions .interface-playback-status,
body.winterface-offline #winterface .interface-media-actions .interface-playback-status::before,
body.winterface-offline #winterface .interface-media-actions .interface-playback-status::after,
body.winterface-offline #winterface .interface-media-actions .interface-playback-status *,
body.winterface-offline #winterface .interface-media-actions .interface-playback-status *::before,
body.winterface-offline #winterface .interface-media-actions .interface-playback-status *::after,
body.winterface-offline #winterface .interface-media-actions .interface-media-toggle,
body.winterface-offline #winterface .interface-media-actions .interface-media-toggle::before,
body.winterface-offline #winterface .interface-media-actions .interface-media-toggle::after,
body.winterface-offline #winterface .interface-media-actions .interface-media-toggle *,
body.winterface-offline #winterface .interface-media-actions .interface-media-toggle *::before,
body.winterface-offline #winterface .interface-media-actions .interface-media-toggle *::after {
  animation: none !important;
}