[data-player-skin] {
  --ps-bg: #202225;
  --ps-panel: #34373b;
  --ps-panel-2: #202225;
  --ps-button: #4a4d51;
  --ps-button-hover: #62666b;
  --ps-button-active: #7ee42c;
  --ps-button-active-text: #142109;
  --ps-text: #f4f5f6;
  --ps-muted: #b8bdc2;
  --ps-accent: #79e12b;
  --ps-accent-2: #aeb4b8;
  --ps-border: #0b0c0d;
  --ps-focus: #d4ff9f;
  --ps-shadow: 0 4px 14px #000a, inset 0 1px 0 #ffffff38;
  --ps-button-shadow: inset 0 1px 0 #ffffff70, inset 0 -2px 0 #0008, 0 1px 2px #0009;
  --ps-radius: 5px;
  --ps-button-radius: 3px;
  --ps-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ytfp-panel-bg: var(--ps-panel);
  --ytfp-text: var(--ps-text);
  --ytfp-text-dim: var(--ps-muted);
  --ytfp-accent: var(--ps-accent);
}

/* Classic is used by the shop preview only. Runtime removes the skin attribute. */
[data-player-skin="classic"] {
  --ps-bg: #161616;
  --ps-panel: rgba(10, 10, 10, .78);
  --ps-panel-2: #242424;
  --ps-button: transparent;
  --ps-button-hover: rgba(255, 255, 255, .16);
  --ps-button-active: #cc0000;
  --ps-button-active-text: #fff;
  --ps-text: #eee;
  --ps-muted: #aaa;
  --ps-accent: #cc0000;
  --ps-accent-2: #aaa;
  --ps-border: transparent;
  --ps-focus: #eee;
  --ps-shadow: none;
  --ps-button-shadow: none;
  --ps-radius: 10px;
  --ps-button-radius: 6px;
  --ps-font: "Roboto", Arial, sans-serif;
}

[data-player-skin="console"] {
  --ps-bg: #e8dfc9;
  --ps-panel: #f1e9d7;
  --ps-panel-2: #ded2b9;
  --ps-button: #f6efdf;
  --ps-button-hover: #fff9ec;
  --ps-button-active: #70172a;
  --ps-button-active-text: #fff7e8;
  --ps-text: #351d1d;
  --ps-muted: #705f51;
  --ps-accent: #76172b;
  --ps-accent-2: #a8b88a;
  --ps-border: #aa9879;
  --ps-focus: #76172b;
  --ps-shadow: 0 5px 16px #3a281f55, inset 0 2px 0 #fff9;
  --ps-button-shadow: inset 0 1px 0 #fff, 0 2px 3px #604d3240;
  --ps-radius: 14px;
  --ps-button-radius: 10px;
  --ps-font: "Courier New", ui-monospace, monospace;
}

[data-player-skin="kawaii"] {
  --ps-bg: #071326;
  --ps-panel: #0b1d3c;
  --ps-panel-2: #10284f;
  --ps-button: #253d67;
  --ps-button-hover: #385781;
  --ps-button-active: #d8e2ef;
  --ps-button-active-text: #071326;
  --ps-text: #fff;
  --ps-muted: #bdc9d9;
  --ps-accent: #d8e2ef;
  --ps-accent-2: #8ea7c7;
  --ps-border: #8798ae;
  --ps-focus: #fff;
  --ps-shadow: 0 8px 20px #020812b8, inset 0 1px 0 #ffffff33;
  --ps-button-shadow: inset 0 1px 0 #ffffff42, inset 0 -2px 0 #02081299, 0 2px 4px #02081299;
  --ps-radius: 14px;
  --ps-button-radius: 999px;
  --ps-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-player-skin="amber"] {
  --ps-bg: #f9e4b7;
  --ps-panel: #ffedc8;
  --ps-panel-2: #f7c55d;
  --ps-button: #f4a616;
  --ps-button-hover: #ffc344;
  --ps-button-active: #00a9c1;
  --ps-button-active-text: #fff;
  --ps-text: #67310c;
  --ps-muted: #88541f;
  --ps-accent: #08b3c8;
  --ps-accent-2: #f5a814;
  --ps-border: #9d5a0b;
  --ps-focus: #007f98;
  --ps-shadow: 0 6px 0 #9b560f, 0 9px 18px #4b2b153d, inset 0 2px 0 #fff7;
  --ps-button-shadow: inset 0 3px 0 #ffd76e, inset 0 -3px 0 #b76808, 0 2px 3px #834b10aa;
  --ps-radius: 18px;
  --ps-button-radius: 12px;
  --ps-font: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

[data-player-skin].ytfp-page-panel,
[data-player-skin] .ytfp-bottom,
[data-player-skin] .ytfp-title,
[data-player-skin] .ytfp-surface-menu,
[data-player-skin] .ytfp-more-panel,
[data-player-skin] .ytfp-disclosure-content,
[data-player-skin] .ytfp-sleep-panel,
[data-player-skin] .ytfp-history-panel,
[data-player-skin] .ytfp-search-form {
  color: var(--ps-text);
  border: 0;
  outline: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  background: var(--ps-panel);
  box-shadow: var(--ps-shadow);
  font-family: var(--ps-font);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-player-skin="desktop90"].ytfp-page-panel,
[data-player-skin="desktop90"] .ytfp-bottom {
  outline: 2px solid #777b7f;
  background:
    linear-gradient(90deg, #ffffff14 1px, transparent 1px) 0 0 / 5px 5px,
    linear-gradient(#45484c, #2c2e31);
}

[data-player-skin="console"].ytfp-page-panel,
[data-player-skin="console"] .ytfp-bottom {
  background: linear-gradient(#f8f0df, #e2d6bd);
}

[data-player-skin="kawaii"].ytfp-page-panel,
[data-player-skin="kawaii"] .ytfp-bottom {
  outline: 1px solid var(--ps-border);
  background: var(--ps-panel);
}

[data-player-skin="amber"].ytfp-page-panel,
[data-player-skin="amber"] .ytfp-bottom {
  outline: 3px solid var(--ps-accent);
  background: linear-gradient(#fff2d5, #f9d98e);
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-title, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) :is(button, summary),
[data-player-skin] .ytfp-btn {
  color: var(--ps-text);
  border: 0;
  border-radius: var(--ps-button-radius);
  background: var(--ps-button);
  box-shadow: inset 0 0 0 1px var(--ps-border), var(--ps-button-shadow);
  font-family: var(--ps-font);
  font-weight: 700;
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-title, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) :is(button, summary):hover,
[data-player-skin] .ytfp-btn:hover {
  color: var(--ps-text);
  background: var(--ps-button-hover);
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu) :is(button[aria-pressed="true"], .ytfp-preset-row button[aria-pressed="true"]),
[data-player-skin] .ytfp-btn--active,
[data-player-skin] .ytfp-more[open] > summary {
  color: var(--ps-button-active-text);
  background: var(--ps-button-active);
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-title, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) :is(button, summary):active,
[data-player-skin] .ytfp-btn:active {
  translate: 0 1px;
  box-shadow: inset 0 2px 3px #0005;
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) :is(button, summary, input, select):focus-visible,
[data-player-skin] .ytfp-btn:focus-visible,
[data-player-skin] .ytfp-progress:focus-visible {
  outline: 3px solid var(--ps-focus);
  outline-offset: 2px;
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) :is(button, input, select):disabled,
[data-player-skin] .ytfp-btn:disabled {
  filter: saturate(.25);
  opacity: .55;
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) :is(input[type="search"], input[type="number"], select) {
  box-sizing: border-box;
  min-height: 32px;
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
  border-radius: calc(var(--ps-button-radius) * .75);
  background: var(--ps-panel-2);
  font: 700 1em var(--ps-font);
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) input[type="range"] {
  accent-color: var(--ps-accent);
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) input[type="range"]::-webkit-slider-runnable-track {
  border: 1px solid var(--ps-border);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ps-accent) var(--ytfp-fill, 45%), var(--ps-panel-2) var(--ytfp-fill, 45%));
  box-shadow: inset 0 1px 2px #0007;
}

:is([data-player-skin].ytfp-page-panel, [data-player-skin] .ytfp-bottom, [data-player-skin] .ytfp-more-panel, [data-player-skin] .ytfp-surface-menu, [data-player-skin] .ytfp-disclosure-content) input[type="range"]::-webkit-slider-thumb {
  border: 1px solid var(--ps-border);
  background: var(--ps-button-hover);
  box-shadow: var(--ps-button-shadow);
}

[data-player-skin] .ytfp-progress {
  border-radius: 999px;
  background: linear-gradient(to top, var(--ps-panel-2) 7px, transparent 7px);
}

[data-player-skin] .ytfp-progress-fill,
[data-player-skin] .ytfp-ad-progress-fill {
  border-radius: 999px;
  background: var(--ps-accent);
}

[data-player-skin] .ytfp-progress-seg {
  background: color-mix(in srgb, var(--ps-accent-2) 82%, transparent);
}

[data-player-skin] .ytfp-chapter-tick {
  background: color-mix(in srgb, var(--ps-text) 65%, transparent);
}

[data-player-skin] :is(.ytfp-tip, .ytfp-progress-tooltip) {
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-button-radius);
  background: var(--ps-panel-2);
  box-shadow: var(--ps-shadow);
  font-family: var(--ps-font);
}

[data-player-skin] :is(.ytfp-progress-tooltip-time, .ytfp-title-meta, [role="status"]) {
  color: var(--ps-muted);
}

[data-player-skin] .ytfp-tool-row {
  border-color: color-mix(in srgb, var(--ps-border) 55%, transparent);
}

[data-player-skin] .ytfp-preset-row {
  gap: 5px;
}

[data-player-skin] :is(.ytfp-speed, .ytfp-boost, .ytfp-sleep, .ytfp-speed-label) {
  color: var(--ps-text);
}

[data-player-skin="desktop90"] .ytfp-title {
  border-radius: 3px;
  background: linear-gradient(#3f4246, #242629);
}

[data-player-skin="console"] .ytfp-title-text {
  color: #182211;
  border: 1px solid #84936c;
  border-radius: 3px;
  background: #baca9e;
  box-shadow: inset 0 1px 3px #3e4b3155;
  font-variant-numeric: tabular-nums;
}

[data-player-skin="amber"] :is(.ytfp-btn, .ytfp-bottom button, .ytfp-bottom summary, .ytfp-page-panel button, .ytfp-page-panel summary) {
  text-shadow: 0 1px 0 #fff5;
}

[data-player-skin="amber"] :is(.ytfp-speed-label, output) {
  color: var(--ps-text);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

@media (max-width: 560px), (max-height: 360px) {
  [data-player-skin].ytfp-page-panel,
  [data-player-skin] .ytfp-bottom {
    border-radius: max(6px, calc(var(--ps-radius) * .72));
  }

}

@media (prefers-reduced-motion: reduce) {
  [data-player-skin] :is(.ytfp-bottom, .ytfp-title, .ytfp-progress-wrap, .ytfp-more-panel, .ytfp-surface-menu, .ytfp-page-panel),
  [data-player-skin] :is(.ytfp-bottom, .ytfp-title, .ytfp-progress-wrap, .ytfp-more-panel, .ytfp-surface-menu, .ytfp-page-panel) *,
  [data-player-skin] :is(.ytfp-bottom, .ytfp-title, .ytfp-progress-wrap, .ytfp-more-panel, .ytfp-surface-menu, .ytfp-page-panel) *::before,
  [data-player-skin] :is(.ytfp-bottom, .ytfp-title, .ytfp-progress-wrap, .ytfp-more-panel, .ytfp-surface-menu, .ytfp-page-panel) *::after {
    transition-duration: .01ms !important;
  }

  :is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn.ytfp-btn,
  :is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.ytfp-btn.ytfp-fixed-play, .ytfp-btn.ytfp-fixed-seek, .ytfp-btn.pip-preview-steampunk-menu, .ytfp-btn.pip-preview-plush-menu, .ytfp-btn.pip-preview-rendered-v5-menu) {
    translate: -50% -50% !important;
  }
}


/* Cat Cafe has a fixed control hierarchy. The full navigation and sliders
   remain live inside the More menu and are restored when another skin wins. */
.ytfp-cafe-playback,
[data-ytfp-tool="fixedLayout"] {
  display: none;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready {
  position: absolute;
  isolation: isolate;
  width: min(440px, calc(100vw - 16px));
  min-height: 90px;
  padding: 10px 52px 10px 49px;
  border: 2px solid #bd7a8e;
  border-radius: 34px 54px 30px 46px / 30px 42px 34px 48px;
  outline: 4px solid #fff4e7;
  background:
    radial-gradient(circle at 22% 24%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 78% 78%, #d88ba433 0 7px, transparent 8px),
    linear-gradient(145deg, #fff8ed 0 42%, #f6d3d8 100%);
  box-shadow: inset 0 2px 0 #fff, inset 0 -5px 0 #d99dad5c, 0 11px 24px #68394b45;
  overflow: visible;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready::before,
[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -17px;
  width: 48px;
  height: 40px;
  border: 2px solid #bd7a8e;
  border-bottom: 0;
  background: #fff3e5;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready::before {
  left: 34px;
  border-radius: 42px 8px 0 0;
  rotate: -10deg;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready::after {
  right: 30px;
  border-radius: 8px 42px 0 0;
  rotate: 10deg;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav {
  display: grid;
  grid-template-columns: 64px minmax(150px, 1fr) 42px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 6px;
  width: 100%;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav > .ytfp-nav {
  display: none;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-cafe-playback {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-cafe-play {
  width: calc(68px * var(--ytfp-cap-scale, 1));
  height: calc(68px * var(--ytfp-cap-scale, 1));
  min-width: 58px;
  min-height: 58px;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-cafe-play > svg {
  width: 31px;
  height: 31px;
  max-width: 48%;
  max-height: 48%;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-cafe-seek {
  width: calc(38px * var(--ytfp-cap-scale, 1));
  height: calc(30px * var(--ytfp-cap-scale, 1));
  min-width: 34px;
  min-height: 28px;
  font-size: 11px;
  font-weight: 900;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side {
  grid-row: 1 !important;
  min-width: 0;
  padding: 0;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child {
  display: grid;
  grid-template-columns: repeat(2, 28px);
  gap: 2px;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn {
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  padding: 5px;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tray {
  display: none !important;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main {
  position: absolute;
  top: 13px;
  right: 13px;
  display: block;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main > .ytfp-group:first-child,
[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-boost,
[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-speed {
  display: none;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-more > summary {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 5px;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready :is(.ytfp-cafe-seek, .ytfp-nav-side:first-child > .ytfp-btn, .ytfp-more > summary),
[data-player-skin="cat_cafe"] .player-skin-pip .pip-preview-cafe :is(.ytfp-cafe-seek, .pip-preview-cafe-window > .ytfp-btn, .pip-preview-cafe-menu) {
  border: 1px solid #b86f86;
  border-radius: 999px;
  background: linear-gradient(#fff7dc, #efadbd);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #c87d91, 0 2px 3px #75415338;
  color: #633047;
}

[data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready :is(.ytfp-cafe-seek, .ytfp-nav-side:first-child > .ytfp-btn, .ytfp-more > summary)::before,
[data-player-skin="cat_cafe"] .player-skin-pip .pip-preview-cafe :is(.ytfp-cafe-seek, .pip-preview-cafe-window > .ytfp-btn, .pip-preview-cafe-menu)::before,
[data-player-skin="cat_cafe"] .ytfp-more-panel :is(button, summary)::before,
[data-player-skin="cat_cafe"].ytfp-page-panel :is(button, summary)::before {
  content: none !important;
  background: none !important;
}

[data-player-skin="cat_cafe"] .ytfp-more-panel :is(button, summary),
[data-player-skin="cat_cafe"].ytfp-page-panel :is(button, summary) {
  border: 1px solid #c58a9b;
  background: linear-gradient(#fff8ee, #efccd3);
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px #7541532b;
  color: #633047;
}

[data-player-skin="cat_cafe"] [data-ytfp-tool="fixedLayout"] {
  display: grid;
}

[data-player-skin="cat_cafe"] .ytfp-fixed-menu-controls {
  display: grid;
  gap: 10px;
}

[data-player-skin="cat_cafe"] .ytfp-fixed-menu-controls > .ytfp-nav,
[data-player-skin="cat_cafe"] .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) {
  display: flex;
  width: 100%;
  justify-content: center;
}

[data-player-skin="cat_cafe"] [data-ytfp-tool="fixedLayout"] > .ytfp-tool-title {
  display: none;
}

[data-player-skin="cat_cafe"] .ytfp-fixed-menu-controls > .ytfp-nav {
  justify-content: space-between;
  gap: 4px;
}

[data-player-skin="cat_cafe"] .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) {
  gap: 8px;
}

[data-player-skin="cat_cafe"] .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) input[type="range"] {
  flex: 1 1 140px;
  width: 140px;
  min-width: 120px;
  max-width: 170px;
}

[data-player-skin="cat_cafe"] .ytfp-fixed-menu-controls > .ytfp-btn--live,
[data-player-skin="steampunk"] .ytfp-fixed-menu-controls > .ytfp-btn--live,
[data-player-skin="cyber_neon"] .ytfp-fixed-menu-controls > .ytfp-btn--live {
  justify-self: center;
}

/* The page surface is a launcher, so its Cat Cafe body keeps the existing
   launch actions but gives the controlled-window action the main position. */
[data-player-skin="cat_cafe"].ytfp-page-panel {
  border: 2px solid #bd7a8e;
  border-radius: 28px 46px 26px 38px / 24px 34px 30px 40px;
  outline: 3px solid #fff4e7;
  padding: 10px 14px;
  gap: 5px;
  width: min(520px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  justify-content: center;
  background:
    radial-gradient(circle at 78% 18%, #fff 0 3px, transparent 4px),
    linear-gradient(145deg, #fff8ed, #f6d3d8);
}

[data-player-skin="cat_cafe"].ytfp-page-panel > .ytfp-drag { order: 1; }
[data-player-skin="cat_cafe"].ytfp-page-panel > .ytfp-page-pip { order: 3; }
[data-player-skin="cat_cafe"].ytfp-page-panel > .ytfp-page-pip[data-mode="document"] {
  min-width: 62px;
  min-height: 62px;
}
[data-player-skin="cat_cafe"].ytfp-page-panel > :is(.ytfp-speed, .ytfp-volume) { order: 7; }
[data-player-skin="cat_cafe"].ytfp-page-panel > :is(.ytfp-bookmark, .ytfp-more, .ytfp-pinned-tools, [role="status"]) { order: 8; }

/* Static shop preview uses the same silhouette without interactive menu DOM. */
[data-player-skin="cat_cafe"] .player-skin-pip .pip-preview-cafe-shell {
  inset: 11px 8px auto;
  isolation: isolate;
  width: auto;
  min-height: 90px;
  padding: 10px 12px;
  border: 2px solid #bd7a8e;
  border-radius: 34px 54px 30px 46px / 30px 42px 34px 48px;
  outline: 3px solid #fff4e7;
  background:
    radial-gradient(circle at 22% 22%, #fff 0 3px, transparent 4px),
    linear-gradient(145deg, #fff8ed, #f6d3d8);
  box-shadow: inset 0 2px 0 #fff, inset 0 -4px 0 #d99dad5c, 0 8px 18px #68394b45;
  overflow: visible;
}

[data-player-skin="cat_cafe"] .player-skin-pip .pip-preview-cafe-shell::before,
[data-player-skin="cat_cafe"] .player-skin-pip .pip-preview-cafe-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -17px;
  width: 48px;
  height: 40px;
  border: 2px solid #bd7a8e;
  border-bottom: 0;
  background: #fff3e5;
}

[data-player-skin="cat_cafe"] .player-skin-pip .pip-preview-cafe-shell::before {
  left: 34px;
  border-radius: 42px 8px 0 0;
  rotate: -10deg;
}

[data-player-skin="cat_cafe"] .player-skin-pip .pip-preview-cafe-shell::after {
  right: 30px;
  border-radius: 8px 42px 0 0;
  rotate: 10deg;
}

[data-player-skin="cat_cafe"] .pip-preview-cafe {
  display: grid;
  grid-template-columns: 58px minmax(150px, 1fr) 38px;
  align-items: center;
  gap: 6px;
}

[data-player-skin="cat_cafe"] .pip-preview-cafe-window {
  display: grid;
  grid-template-columns: repeat(2, 27px);
  align-items: center;
  gap: 2px;
}

[data-player-skin="cat_cafe"] .pip-preview-cafe-window > .ytfp-btn {
  width: 27px;
  height: 27px;
}

[data-player-skin="cat_cafe"] .pip-preview-cafe-menu {
  width: 34px;
  height: 34px;
}

[data-player-skin="cat_cafe"] .pip-preview-cafe .ytfp-cafe-playback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

[data-player-skin="cat_cafe"] .pip-preview-cafe .ytfp-cafe-play {
  width: 68px;
  height: 68px;
}

[data-player-skin="cat_cafe"] .pip-preview-cafe .ytfp-cafe-seek {
  width: 38px;
  height: 30px;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 400px) {
  [data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready {
    width: calc(100vw - 12px);
    min-height: 84px;
    padding: 8px 45px 8px 43px;
  }

  [data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav {
    grid-template-columns: 58px minmax(136px, 1fr) 36px;
    gap: 3px;
  }

  [data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-cafe-play {
    width: 58px;
    height: 58px;
  }

  [data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-cafe-seek {
    width: 34px;
    height: 28px;
  }

  [data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-more > summary {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready::before,
  [data-player-skin="cat_cafe"] .ytfp-bottom.ytfp-fixed-skin-ready::after {
    rotate: none;
  }
}

/* Steampunk is a pocket chronometer: a raised round mechanism over tapered
   brass wings. Only the central play control keeps the rendered artwork. */
[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready {
  --ytfp-steam-play-size: min(calc(88px * var(--ytfp-cap-scale, 1)), 104px);
  position: absolute;
  isolation: isolate;
  width: min(370px, calc(100vw - 12px));
  min-height: 156px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 50%;
  width: 136px;
  height: 136px;
  box-sizing: border-box;
  transform: translateX(-50%);
  border: 5px solid #a87532;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #f6d990 0 4px, transparent 5px),
    radial-gradient(circle, #31483d 0 48%, transparent 49%),
    conic-gradient(from 18deg, #4d2f18, #d4a24c 12%, #6a431f 28%, #e4bd68 43%, #54351b 61%, #c48e3e 77%, #3a2819);
  box-shadow:
    inset 0 0 0 4px #24180e,
    inset 0 0 0 7px #e0b7658c,
    inset 0 9px 12px #fff1b22b,
    0 5px 0 #17100b,
    0 12px 22px #080604a3;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 38px;
  left: 50%;
  width: calc(100% - 4px);
  height: 104px;
  box-sizing: border-box;
  transform: translateX(-50%);
  border: 3px solid #b9863c;
  border-radius: 52% 34% 46% 42% / 64% 46% 58% 40%;
  background:
    radial-gradient(ellipse at 12% 42%, #d8aa55 0 5%, #785027 6% 18%, transparent 19%),
    radial-gradient(ellipse at 88% 58%, #d8aa55 0 5%, #785027 6% 18%, transparent 19%),
    linear-gradient(180deg, #e1b45c 0 8%, #7c5125 9% 17%, #3e2a19 18% 78%, #1b130d 79% 85%, #a86f2f 86% 94%, #d7a44b);
  filter: drop-shadow(0 5px 0 #120d09) drop-shadow(0 10px 10px #0806048f);
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav > .ytfp-nav {
  display: none;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-playback {
  position: absolute;
  top: 8px;
  left: 50%;
  display: block;
  width: 252px;
  height: 134px;
  transform: translateX(-50%);
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play {
  position: absolute;
  z-index: 2;
  top: calc(65px - var(--ytfp-steam-play-size) / 2);
  left: 50%;
  width: var(--ytfp-steam-play-size);
  height: var(--ytfp-steam-play-size);
  min-width: 78px;
  min-height: 78px;
  justify-content: center;
  padding: 0;
  transform: translateX(-50%);
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play > svg {
  width: 34px;
  height: 34px;
  max-width: 46%;
  max-height: 46%;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek {
  position: absolute;
  top: 92px;
  width: 62px;
  height: 34px;
  min-width: 56px;
  min-height: 32px;
  padding: 4px 12px;
  font: 900 12px/1 Georgia, "Times New Roman", serif;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek--back {
  left: 2px;
  transform: rotate(-5deg);
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek--forward {
  right: -3px;
  top: 98px;
  transform: rotate(6deg);
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side {
  position: absolute;
  top: 52px;
  left: 24px;
  display: grid;
  grid-template-columns: repeat(2, 29px);
  gap: 4px;
  min-width: 0;
  padding: 0;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn {
  width: 29px;
  height: 29px;
  min-width: 29px;
  min-height: 29px;
  padding: 5px;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side--end,
[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tray {
  display: none !important;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main {
  position: absolute;
  top: 52px;
  right: 30px;
  display: block;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main > .ytfp-group:first-child,
[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-boost,
[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-speed {
  display: none;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-more > summary {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 5px;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready :is(.ytfp-fixed-seek, .ytfp-nav-side:first-child > .ytfp-btn, .ytfp-more > summary),
[data-player-skin="steampunk"] .player-skin-pip .pip-preview-steampunk :is(.ytfp-fixed-seek, .pip-preview-steampunk-window > .ytfp-btn, .pip-preview-steampunk-menu) {
  border: 2px solid #d2a04c;
  border-radius: 999px;
  background: linear-gradient(160deg, #d7a750, #6c421f 48%, #2d2016 52%, #98652b);
  box-shadow: inset 0 2px 0 #f6d98b8f, inset 0 -3px 0 #21150d, 0 3px 0 #17100b, 0 6px 8px #0806047a;
  color: #fff2cf;
  text-shadow: 0 1px 1px #1b1008;
}

[data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready :is(.ytfp-fixed-seek, .ytfp-nav-side:first-child > .ytfp-btn, .ytfp-more > summary)::before,
[data-player-skin="steampunk"] .player-skin-pip .pip-preview-steampunk :is(.ytfp-fixed-seek, .pip-preview-steampunk-window > .ytfp-btn, .pip-preview-steampunk-menu)::before,
[data-player-skin="steampunk"] .ytfp-more-panel :is(button, summary)::before,
[data-player-skin="steampunk"].ytfp-page-panel.ytfp-page-panel :is(button, summary)::before {
  content: none !important;
  background: none !important;
}

[data-player-skin="steampunk"] .ytfp-more-panel :is(button, summary),
[data-player-skin="steampunk"].ytfp-page-panel.ytfp-page-panel :is(button, summary) {
  border: 1px solid #b9863c;
  border-radius: 999px;
  background: linear-gradient(160deg, #9a6b31, #332319);
  box-shadow: inset 0 1px 0 #f3cf7d66, 0 2px 0 #17100b;
  color: #fff2cf;
}

[data-player-skin="steampunk"] [data-ytfp-tool="fixedLayout"] {
  display: grid;
}

[data-player-skin="steampunk"] [data-ytfp-tool="fixedLayout"] > .ytfp-tool-title {
  display: none;
}

[data-player-skin="steampunk"] .ytfp-fixed-menu-controls {
  display: grid;
  gap: 10px;
}

[data-player-skin="steampunk"] .ytfp-fixed-menu-controls > .ytfp-nav {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 4px;
}

[data-player-skin="steampunk"] .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 8px;
}

[data-player-skin="steampunk"] .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) input[type="range"] {
  flex: 1 1 140px;
  width: 140px;
  min-width: 120px;
  max-width: 170px;
}

/* The page launcher uses the same round mechanism and winged silhouette while
   keeping every page action directly available. */
[data-player-skin="steampunk"].ytfp-page-panel.ytfp-page-panel {
  isolation: isolate;
  display: grid;
  grid-template-columns: 28px 66px 76px 66px 28px;
  grid-template-rows: 36px 36px auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: min(352px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  min-height: 96px;
  padding: 8px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

[data-player-skin="steampunk"].ytfp-page-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 46px;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border: 4px solid #b9863c;
  border-radius: 50%;
  background: radial-gradient(circle, #31483d 0 52%, #20160f 53% 62%, #c28e40 63% 72%, #4b301a 73%);
  box-shadow: inset 0 0 0 3px #e0b76570, 0 5px 0 #17100b, 0 10px 16px #0806048f;
}

[data-player-skin="steampunk"].ytfp-page-panel::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 46px;
  left: 50%;
  width: 100%;
  height: 82px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 3px solid #b9863c;
  border-radius: 48% 35% 44% 39% / 62% 44% 58% 42%;
  background:
    radial-gradient(ellipse at 12% 42%, #d8aa55 0 4%, #785027 5% 16%, transparent 17%),
    radial-gradient(ellipse at 88% 58%, #d8aa55 0 4%, #785027 5% 16%, transparent 17%),
    linear-gradient(#d2a04b, #49301b 23% 76%, #aa7431 77%);
  filter: drop-shadow(0 5px 0 #17100b) drop-shadow(0 9px 9px #0806048f);
}

[data-player-skin="steampunk"].ytfp-page-panel.ytfp-page-panel:has(> .ytfp-pinned-tools:not([hidden]))::after {
  top: 68px;
  height: 128px;
}

[data-player-skin="steampunk"].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip.ytfp-page-pip[data-mode="document"] {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;
  justify-self: center;
  border: 3px solid #d2a04c;
  border-radius: 50%;
  background: radial-gradient(circle, #426154, #1b2b24 68%);
  box-shadow: inset 0 0 0 3px #1a120c, inset 0 0 0 5px #c28e4075, 0 4px 0 #17100b;
  color: #fff2cf;
  overflow: hidden;
}

[data-player-skin="steampunk"].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip.ytfp-page-pip[data-mode="document"]::before {
  content: "" !important;
  inset: 3px !important;
  border-radius: 50%;
  background: var(--ps-button-art) center / contain no-repeat !important;
  filter: drop-shadow(0 2px 1px #120b0780);
}

[data-player-skin="steampunk"].ytfp-page-panel > .ytfp-drag { grid-column: 1; grid-row: 1 / 3; }
[data-player-skin="steampunk"].ytfp-page-panel > .ytfp-speed-presets { grid-column: 2; grid-row: 1; }
[data-player-skin="steampunk"].ytfp-page-panel > .ytfp-page-pip[data-mode="native"] { grid-column: 2; grid-row: 2; }
[data-player-skin="steampunk"].ytfp-page-panel > .ytfp-bookmark-toggle { grid-column: 4; grid-row: 1; }
[data-player-skin="steampunk"].ytfp-page-panel > .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more) { grid-column: 4; grid-row: 2; }
[data-player-skin="steampunk"].ytfp-page-panel > .ytfp-more { grid-column: 5; grid-row: 1 / 3; }
[data-player-skin="steampunk"].ytfp-page-panel > .ytfp-pinned-tools { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
[data-player-skin="steampunk"].ytfp-page-panel > [role="status"] { grid-column: 1 / -1; grid-row: 4; justify-self: center; }

[data-player-skin="steampunk"].ytfp-page-panel > :is(.ytfp-speed-presets, .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)) {
  width: 62px;
  min-width: 0;
  justify-self: center;
}

[data-player-skin="steampunk"].ytfp-page-panel > :is(.ytfp-speed-presets, .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)) > summary {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 4px;
}

[data-player-skin="steampunk"].ytfp-page-panel > :is(.ytfp-drag, .ytfp-page-pip[data-mode="native"], .ytfp-bookmark-toggle),
[data-player-skin="steampunk"].ytfp-page-panel > .ytfp-more > summary {
  width: 32px;
  height: 32px;
  min-width: 28px;
  min-height: 28px;
  padding: 5px;
}

[data-player-skin="steampunk"].ytfp-page-panel > :is(.ytfp-drag, .ytfp-page-pip[data-mode="native"], .ytfp-bookmark-toggle, .ytfp-more) {
  justify-self: center;
}

/* Static shop preview mirrors the fixed PiP geometry. */
[data-player-skin="steampunk"] .player-skin-pip {
  aspect-ratio: 360 / 166;
}

[data-player-skin="steampunk"] .player-skin-pip .pip-preview-steampunk-shell {
  inset: 8px;
  isolation: isolate;
  width: 344px;
  min-height: 150px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

[data-player-skin="steampunk"] .player-skin-pip .pip-preview-steampunk-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 50%;
  width: 136px;
  height: 136px;
  box-sizing: border-box;
  transform: translateX(-50%);
  border: 5px solid #a87532;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #f6d990 0 4px, transparent 5px),
    radial-gradient(circle, #31483d 0 48%, transparent 49%),
    conic-gradient(from 18deg, #4d2f18, #d4a24c 12%, #6a431f 28%, #e4bd68 43%, #54351b 61%, #c48e3d 77%, #3a2819);
  box-shadow: inset 0 0 0 4px #24180e, inset 0 0 0 7px #e0b7658c, inset 0 9px 12px #fff1b22b, 0 5px 0 #17100b, 0 12px 22px #080604a3;
}

[data-player-skin="steampunk"] .player-skin-pip .pip-preview-steampunk-shell::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 38px;
  left: 50%;
  width: 340px;
  height: 104px;
  box-sizing: border-box;
  transform: translateX(-50%);
  border: 3px solid #b9863c;
  border-radius: 52% 34% 46% 42% / 64% 46% 58% 40%;
  background:
    radial-gradient(ellipse at 12% 42%, #d8aa55 0 5%, #785027 6% 18%, transparent 19%),
    radial-gradient(ellipse at 88% 58%, #d8aa55 0 5%, #785027 6% 18%, transparent 19%),
    linear-gradient(180deg, #e1b45c 0 8%, #7c5125 9% 17%, #3e2a19 18% 78%, #1b130d 79% 85%, #a86f2f 86% 94%, #d7a44b);
  filter: drop-shadow(0 5px 0 #120d09) drop-shadow(0 10px 10px #0806048f);
}

[data-player-skin="steampunk"] .pip-preview-steampunk {
  position: relative;
  width: 100%;
  height: 150px;
}

[data-player-skin="steampunk"] .pip-preview-steampunk-window {
  position: absolute;
  top: 52px;
  left: 24px;
  display: grid;
  grid-template-columns: repeat(2, 29px);
  gap: 4px;
}

[data-player-skin="steampunk"] .pip-preview-steampunk-window > .ytfp-btn {
  width: 29px;
  height: 29px;
}

[data-player-skin="steampunk"] .pip-preview-steampunk .ytfp-btn.pip-preview-steampunk-menu {
  position: absolute;
  top: 52px;
  right: 25px;
  width: 32px;
  height: 32px;
}

[data-player-skin="steampunk"] .pip-preview-steampunk .ytfp-fixed-playback {
  position: absolute;
  top: 8px;
  left: 50%;
  display: block;
  width: 252px;
  height: 134px;
  transform: translateX(-50%);
}

[data-player-skin="steampunk"] .pip-preview-steampunk .ytfp-btn.ytfp-fixed-play {
  position: absolute;
  z-index: 2;
  top: 21px;
  left: 50%;
  width: 88px;
  height: 88px;
  transform: translateX(-50%);
}

[data-player-skin="steampunk"] .pip-preview-steampunk .ytfp-btn.ytfp-fixed-seek {
  position: absolute;
  top: 92px;
  width: 62px;
  height: 34px;
  padding: 4px 12px;
  font: 900 12px/1 Georgia, "Times New Roman", serif;
}

[data-player-skin="steampunk"] .pip-preview-steampunk .ytfp-fixed-seek--back {
  left: 2px;
  transform: rotate(-5deg);
}

[data-player-skin="steampunk"] .pip-preview-steampunk .ytfp-fixed-seek--forward {
  right: -3px;
  top: 98px;
  transform: rotate(6deg);
}

@media (max-width: 400px) {
  [data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready {
    width: calc(100vw - 12px);
    min-height: 150px;
  }

  [data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side {
    left: 17px;
  }

  [data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main {
    right: 18px;
  }

  [data-player-skin="steampunk"].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip.ytfp-page-pip[data-mode="document"] {
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-player-skin="steampunk"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  [data-player-skin="steampunk"] .player-skin-pip .ytfp-fixed-seek {
    transform: none;
  }
}

[data-player-skin="arcade"] {
  --ps-bg: #070b12;
  --ps-panel: #111827;
  --ps-panel-2: #080f1c;
  --ps-button: #1c2940;
  --ps-button-hover: #29425d;
  --ps-button-active: #b9ff3d;
  --ps-button-active-text: #102005;
  --ps-text: #f5f7ff;
  --ps-muted: #b7c5d8;
  --ps-accent: #b9ff3d;
  --ps-accent-2: #2de2e6;
  --ps-border: #2de2e6;
  --ps-focus: #62fff0;
  --ps-shadow: 0 5px 0 #03060b, 0 10px 24px #020812b8, 0 0 16px #2de2e638, inset 0 1px 0 #8ffcff38;
  --ps-button-shadow: inset 0 2px 0 #7afcff30, inset 0 -3px 0 #050a12, 0 2px 0 #02050a;
  --ps-radius: 5px;
  --ps-button-radius: 3px;
  --ps-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

[data-player-skin="arcade"].ytfp-page-panel,
[data-player-skin="arcade"] .ytfp-bottom {
  outline: 1px solid #2de2e6;
  background:
    linear-gradient(90deg, transparent 0 49%, #b9ff3d12 49% 50%, transparent 50%),
    repeating-linear-gradient(0deg, #7afcff08 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #17243a, #0a101c 68%);
}

[data-player-skin="arcade"] .ytfp-title {
  color: #baff36;
  border-radius: 3px;
  background: linear-gradient(90deg, #07101c, #14263a 52%, #07101c);
  box-shadow: inset 0 0 0 1px #2de2e660, inset 0 -2px 5px #000b;
  text-shadow: 0 0 8px #b9ff366b;
}

[data-player-skin="arcade"] .ytfp-progress-fill {
  border-radius: 1px;
  box-shadow: 0 0 8px #b9ff3d73;
}

[data-player-skin="cyber_neon"] {
  --ps-bg: #050711;
  --ps-panel: #0b1022;
  --ps-panel-2: #080b18;
  --ps-button: #161b38;
  --ps-button-hover: #292953;
  --ps-button-active: #20e6f2;
  --ps-button-active-text: #07131c;
  --ps-text: #f8f4ff;
  --ps-muted: #c5c7e8;
  --ps-accent: #20e6f2;
  --ps-accent-2: #ff4fd8;
  --ps-border: #6555bd;
  --ps-focus: #ff79df;
  --ps-shadow: 0 8px 22px #02030dcc, 0 0 17px #20e6f23d, inset 0 1px 0 #ad9cff3d;
  --ps-button-shadow: inset 0 1px 0 #ffffff26, inset 0 -2px 0 #03040c, 0 0 7px #ff4fd826;
  --ps-radius: 9px;
  --ps-button-radius: 5px;
  --ps-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

[data-player-skin="cyber_neon"].ytfp-page-panel,
[data-player-skin="cyber_neon"] .ytfp-bottom {
  outline: 1px solid #20e6f2b3;
  background:
    linear-gradient(115deg, #20e6f214, transparent 32%),
    linear-gradient(295deg, #ff4fd817, transparent 38%),
    repeating-linear-gradient(0deg, #fff0 0 5px, #e6deff08 5px 6px),
    #0b1022;
}

[data-player-skin="cyber_neon"] .ytfp-title {
  background: linear-gradient(90deg, #101633, #1d1640 56%, #0d1831);
  box-shadow: inset 0 -1px 0 #ff4fd882;
  text-shadow: 0 0 7px #20e6f278;
}

[data-player-skin="cyber_neon"] :is(.ytfp-progress-fill, .ytfp-ad-progress-fill) {
  background: linear-gradient(90deg, #20e6f2, #ff4fd8);
  box-shadow: 0 0 9px #20e6f27a;
}

/* Cyber Neon uses a rendered metal console with live controls over its blank wells. */
[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready {
  position: absolute;
  isolation: isolate;
  width: min(380px, calc(100vw - 12px));
  max-width: calc(100vw - 12px);
  height: auto;
  min-height: 0;
  aspect-ratio: 2060 / 763;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: url("/assets/player-skins/rendered-v3/cyber_neon.lossless145.png") center / 100% 100% no-repeat;
  box-shadow: none;
  overflow: visible;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready::before,
[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready::after {
  content: none;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav,
[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-playback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav > .ytfp-nav {
  display: none;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play {
  position: absolute;
  z-index: 3;
  top: 48%;
  left: 78.5%;
  width: 20.5%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek {
  position: absolute;
  z-index: 3;
  top: 52.9%;
  width: 10.5%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  translate: -50% -50%;
  font: 900 clamp(10px, 3.1vw, 13px)/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek--back { left: 42.4%; }
[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek--forward { left: 56.9%; }

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
  padding: 0;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn {
  position: absolute;
  z-index: 3;
  top: 31.3%;
  width: clamp(20px, 6.6%, 25px);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 3px;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn:nth-child(1) { left: 11.9%; }
[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn:nth-child(2) { left: 19%; }

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side--end,
[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tray {
  display: none !important;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main {
  position: absolute;
  inset: 0;
  display: block;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main > .ytfp-group:first-child,
[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-boost,
[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-speed {
  display: none;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more {
  position: absolute;
  z-index: 4;
  top: 31.3%;
  left: 26%;
  width: clamp(20px, 6.6%, 25px);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more > summary {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 1px;
  font-size: 12px;
  line-height: 1;
}

[data-player-skin="cyber_neon"] :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn,
  .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more > summary,
  .player-skin-pip .pip-preview-cyber .ytfp-btn
) {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  outline-offset: 2px;
  background: transparent;
  box-shadow: none;
  color: #eaffff;
  text-shadow: 0 0 4px #20e6f2, 0 1px 2px #02040b;
  transition: background-color .14s ease, filter .14s ease, scale .1s ease;
}

[data-player-skin="cyber_neon"] :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn,
  .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more > summary,
  .player-skin-pip .pip-preview-cyber .ytfp-btn
):hover {
  background: radial-gradient(circle, #b9fbff42, #20e6f20d 62%, transparent 70%);
  filter: drop-shadow(0 0 5px #20e6f2);
}

[data-player-skin="cyber_neon"] :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn,
  .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more > summary
):active {
  scale: .93;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play > svg,
[data-player-skin="cyber_neon"] .player-skin-pip .pip-preview-cyber .ytfp-fixed-play > svg {
  width: 40%;
  height: 40%;
  max-width: none;
  max-height: none;
  color: #ecffff;
  filter: drop-shadow(0 0 5px #20e6f2);
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn > svg,
[data-player-skin="cyber_neon"] .player-skin-pip .pip-preview-cyber-window > .ytfp-btn > svg {
  width: 72%;
  height: 72%;
}

[data-player-skin="cyber_neon"] .ytfp-bottom.ytfp-fixed-skin-ready :is(button, summary):focus-visible,
[data-player-skin="cyber_neon"].ytfp-page-panel :is(button, summary):focus-visible,
[data-player-skin="cyber_neon"] .player-skin-pip :is(button, summary):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  filter: drop-shadow(0 0 5px #20e6f2) drop-shadow(0 0 3px #a65cff);
}

[data-player-skin="cyber_neon"] [data-ytfp-tool="fixedLayout"] {
  display: grid;
}

[data-player-skin="cyber_neon"] [data-ytfp-tool="fixedLayout"] > .ytfp-tool-title {
  display: none;
}

[data-player-skin="cyber_neon"] .ytfp-fixed-menu-controls {
  display: grid;
  gap: 10px;
}

[data-player-skin="cyber_neon"] .ytfp-fixed-menu-controls > .ytfp-nav {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 4px;
}

[data-player-skin="cyber_neon"] .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 8px;
}

[data-player-skin="cyber_neon"] .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) input[type="range"] {
  flex: 1 1 140px;
  width: 140px;
  min-width: 120px;
  max-width: 170px;
}

/* The page launcher reuses the same body and keeps every page action live. */
[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel {
  isolation: isolate;
  display: block;
  width: min(352px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  height: auto;
  min-height: 0;
  aspect-ratio: 2060 / 763;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: url("/assets/player-skins/rendered-v3/cyber_neon.lossless145.png") center / 100% 100% no-repeat;
  box-shadow: none;
  overflow: visible;
}

[data-player-skin="cyber_neon"].ytfp-page-panel::before,
[data-player-skin="cyber_neon"].ytfp-page-panel::after {
  content: none;
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="document"] {
  position: absolute;
  z-index: 3;
  top: 48%;
  left: 78.5%;
  width: 20.5%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-drag,
[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-speed-presets,
[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-more {
  position: absolute;
  z-index: 3;
  top: 31.3%;
  width: clamp(20px, 6.6%, 25px);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-drag { left: 11.9%; }
[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-speed-presets { left: 19%; }
[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-more { left: 26%; }

[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-page-pip[data-mode="native"],
[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more) {
  position: absolute;
  z-index: 3;
  top: 52.9%;
  width: 10.5%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-page-pip[data-mode="native"] { left: 42.4%; }
[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more) { left: 56.9%; }

[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-bookmark-toggle {
  position: absolute;
  z-index: 3;
  top: 76%;
  left: 34%;
  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-pinned-tools {
  position: absolute;
  z-index: 3;
  top: 17%;
  left: 50%;
  display: flex;
  max-width: 31%;
  gap: 2px;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-pinned-tools > :is(button, div) {
  min-width: 22px;
  min-height: 22px;
}

[data-player-skin="cyber_neon"].ytfp-page-panel > [role="status"] {
  position: absolute;
  left: 30%;
  bottom: 4px;
  max-width: 38%;
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > :is(.ytfp-drag, .ytfp-page-pip, .ytfp-bookmark-toggle),
[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > :is(.ytfp-speed-presets, .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)) > summary,
[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-more > summary,
[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  padding: 3px;
  background: transparent;
  box-shadow: none;
  color: #eaffff;
  text-shadow: 0 0 4px #20e6f2;
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > :is(.ytfp-speed-presets, .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)) > summary,
[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-more > summary {
  width: 100%;
  height: 100%;
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools button {
  width: 22px;
  height: 22px;
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[aria-pressed] {
  background: transparent;
  box-shadow: none;
  color: #eaffff;
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > :is(.ytfp-speed-presets, .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)) > summary {
  font-size: clamp(8px, .7em, 11px);
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-more > summary {
  font-size: 12px;
  line-height: 1;
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="document"] > svg {
  width: 40%;
  height: 40%;
  color: #ecffff;
  filter: drop-shadow(0 0 5px #20e6f2);
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="native"] > svg {
  width: 58%;
  height: 58%;
}

[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > :is(.ytfp-drag, .ytfp-page-pip, .ytfp-bookmark-toggle):hover,
[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > :is(.ytfp-speed-presets, .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)) > summary:hover,
[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-more > summary:hover,
[data-player-skin="cyber_neon"].ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools button:hover {
  background: radial-gradient(circle, #b9fbff42, #20e6f20d 62%, transparent 70%);
  filter: drop-shadow(0 0 5px #20e6f2);
}

[data-player-skin="cyber_neon"].ytfp-page-panel > .ytfp-disclosure input[type="range"] {
  width: min(160px, calc(100vw - 48px));
}

/* The shop preview uses the same asset and normalized control coordinates. */
[data-player-skin="cyber_neon"] .player-skin-pip {
  width: min(100%, 380px);
  max-width: 380px;
  margin-inline: auto;
  aspect-ratio: 2060 / 763;
}

[data-player-skin="cyber_neon"] .player-skin-pip .pip-preview-cyber-shell {
  position: absolute;
  inset: 0;
  isolation: isolate;
  width: 100%;
  height: auto;
  zoom: 1;
  min-height: 0;
  aspect-ratio: 2060 / 763;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: url("/assets/player-skins/rendered-v3/cyber_neon.lossless145.png") center / 100% 100% no-repeat;
  box-shadow: none;
  overflow: visible;
}

[data-player-skin="cyber_neon"] .pip-preview-cyber {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

[data-player-skin="cyber_neon"] .pip-preview-cyber-window,
[data-player-skin="cyber_neon"] .pip-preview-cyber .ytfp-fixed-playback {
  position: absolute;
  inset: 0;
}

[data-player-skin="cyber_neon"] .pip-preview-cyber-window > .ytfp-btn {
  position: absolute;
  z-index: 3;
  top: 31.3%;
  width: clamp(20px, 6.6%, 25px);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 3px;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"] .pip-preview-cyber-window > .ytfp-btn:nth-child(1) { left: 11.9%; }
[data-player-skin="cyber_neon"] .pip-preview-cyber-window > .ytfp-btn:nth-child(2) { left: 19%; }

[data-player-skin="cyber_neon"] .pip-preview-cyber .ytfp-fixed-play {
  position: absolute;
  z-index: 3;
  top: 48%;
  left: 78.5%;
  width: 20.5%;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  translate: -50% -50%;
}

[data-player-skin="cyber_neon"] .pip-preview-cyber .ytfp-fixed-seek {
  position: absolute;
  z-index: 3;
  top: 52.9%;
  width: 10.5%;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  translate: -50% -50%;
  font: 900 clamp(10px, 3.1vw, 13px)/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

[data-player-skin="cyber_neon"] .pip-preview-cyber .ytfp-fixed-seek--back { left: 42.4%; }
[data-player-skin="cyber_neon"] .pip-preview-cyber .ytfp-fixed-seek--forward { left: 56.9%; }

[data-player-skin="cyber_neon"] .pip-preview-cyber .pip-preview-cyber-menu {
  position: absolute;
  z-index: 3;
  top: 31.3%;
  left: 26%;
  width: clamp(20px, 6.6%, 25px);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 1px;
  translate: -50% -50%;
  font-size: 12px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-player-skin="cyber_neon"] :is(button, summary) {
    transition: none;
  }
}

[data-player-skin="aurora"] {
  --ps-bg: #06151c;
  --ps-panel: #0c2230;
  --ps-panel-2: #071a25;
  --ps-button: #16394a;
  --ps-button-hover: #20546a;
  --ps-button-active: #70f0bd;
  --ps-button-active-text: #062019;
  --ps-text: #f2fff9;
  --ps-muted: #b9d8d2;
  --ps-accent: #6cf0ba;
  --ps-accent-2: #b895ff;
  --ps-border: #5ca99b;
  --ps-focus: #f6d76b;
  --ps-shadow: 0 9px 25px #020d13c7, 0 0 19px #6cf0ba30, inset 0 1px 0 #b9ffe252;
  --ps-button-shadow: inset 0 1px 0 #ccfff238, inset 0 -2px 0 #041219, 0 2px 5px #020d1480;
  --ps-radius: 16px;
  --ps-button-radius: 10px;
  --ps-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-player-skin="aurora"].ytfp-page-panel,
[data-player-skin="aurora"] .ytfp-bottom {
  outline: 1px solid #70f0bd8f;
  background:
    radial-gradient(ellipse at 18% -25%, #6cf0ba42 0, transparent 43%),
    radial-gradient(ellipse at 82% 125%, #b895ff42 0, transparent 46%),
    linear-gradient(150deg, #123b43, #0b1d32 62%, #171c39);
}

[data-player-skin="aurora"] .ytfp-title {
  background: linear-gradient(105deg, #143b43, #163044 48%, #28234e);
  box-shadow: inset 0 -1px 0 #a6ffd86b;
  text-shadow: 0 0 10px #6cf0ba52;
}

[data-player-skin="aurora"] :is(.ytfp-progress-fill, .ytfp-ad-progress-fill) {
  background: linear-gradient(90deg, #6cf0ba, #82d8eb 58%, #b895ff);
  box-shadow: 0 0 8px #6cf0ba5c;
}

[data-player-skin="cosmic_glass"] {
  --ps-bg: #090b20;
  --ps-panel: #16172f;
  --ps-panel-2: #111329;
  --ps-button: #292b52;
  --ps-button-hover: #3a3c6d;
  --ps-button-active: #9de7ff;
  --ps-button-active-text: #10152a;
  --ps-text: #f7f7ff;
  --ps-muted: #c2c5e6;
  --ps-accent: #a9e8ff;
  --ps-accent-2: #c399ff;
  --ps-border: #7775a8;
  --ps-focus: #fff0a3;
  --ps-shadow: 0 12px 30px #050616b8, 0 0 20px #9ee7ff30, inset 0 1px 0 #ffffff52;
  --ps-button-shadow: inset 0 1px 0 #ffffff4a, inset 0 -2px 0 #090a1d80, 0 3px 8px #05061673;
  --ps-radius: 18px;
  --ps-button-radius: 10px;
  --ps-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-player-skin="cosmic_glass"].ytfp-page-panel,
[data-player-skin="cosmic_glass"] .ytfp-bottom {
  outline: 1px solid #b9caff78;
  background:
    radial-gradient(circle at 10% 8%, #8ee9ff30 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, #fff8 0 1px, transparent 2px),
    radial-gradient(circle at 72% 112%, #bd8cff4d 0, transparent 46%),
    linear-gradient(135deg, #283258cc, #14162ddb 58%, #291d49d9);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

[data-player-skin="cosmic_glass"] .ytfp-title {
  background: linear-gradient(115deg, #46567b78, #1a1d3fad 55%, #543b6b70);
  box-shadow: inset 0 1px 0 #ffffff47, inset 0 -1px 0 #a9e8ff52;
  text-shadow: 0 0 9px #a9e8ff52;
}

[data-player-skin="cosmic_glass"] :is(.ytfp-progress-fill, .ytfp-ad-progress-fill) {
  background: linear-gradient(90deg, #a9e8ff, #c399ff);
  box-shadow: 0 0 9px #a9e8ff5c;
}

[data-player-skin="royal"] {
  --ps-bg: #0e080c;
  --ps-panel: #24131d;
  --ps-panel-2: #160d13;
  --ps-button: #4a2938;
  --ps-button-hover: #634053;
  --ps-button-active: #f0d28a;
  --ps-button-active-text: #24130d;
  --ps-text: #fff8e8;
  --ps-muted: #d5c6af;
  --ps-accent: #e8c879;
  --ps-accent-2: #a86a7b;
  --ps-border: #b89455;
  --ps-focus: #ffe6a2;
  --ps-shadow: 0 9px 24px #090407c7, inset 0 1px 0 #fff1bd30, inset 0 0 0 2px #4a2b38;
  --ps-button-shadow: inset 0 1px 0 #fff1bd29, inset 0 -2px 0 #160a11, 0 2px 4px #0803058f;
  --ps-radius: 12px;
  --ps-button-radius: 8px;
  --ps-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-player-skin="royal"].ytfp-page-panel,
[data-player-skin="royal"] .ytfp-bottom {
  outline: 1px solid #c9a75f;
  background:
    linear-gradient(90deg, transparent 0 10%, #f2d9942b 10% 10.4%, transparent 10.4% 89.6%, #f2d9942b 89.6% 90%, transparent 90%),
    linear-gradient(#ead18a2b, transparent 5px),
    linear-gradient(145deg, #361925, #21111a 55%, #160c12);
  box-shadow: var(--ps-shadow), inset 0 0 0 3px #d5b86b24;
}

[data-player-skin="royal"] .ytfp-title {
  color: #fff4d6;
  outline-color: #8f6f3e;
  background:
    linear-gradient(135deg, transparent 47%, #d7b764 49% 51%, transparent 53%) calc(50% - 9px) 4px / 8px 8px no-repeat,
    linear-gradient(45deg, transparent 47%, #d7b764 49% 51%, transparent 53%) calc(50% + 9px) 4px / 8px 8px no-repeat,
    linear-gradient(105deg, #321521, #481d2c 50%, #2a121d);
  box-shadow: inset 0 1px 0 #ffe6a24a, inset 0 -1px 0 #b894558a;
  text-shadow: 0 1px 1px #090305;
}

[data-player-skin="royal"] :is(.ytfp-progress-fill, .ytfp-ad-progress-fill) {
  background: linear-gradient(90deg, #b98d43, #f4dda0 54%, #c39c54);
  box-shadow: 0 1px 2px #0803058f;
}

[data-player-skin="cat_cafe"] {
  --ps-bg: #fff1e4;
  --ps-panel: #fff4e9;
  --ps-panel-2: #f4dccf;
  --ps-button: #f4b7c7;
  --ps-button-hover: #ffcbd8;
  --ps-button-active: #a93e66;
  --ps-button-active-text: #fffaf5;
  --ps-text: #5b3144;
  --ps-muted: #76556a;
  --ps-accent: #b83f6b;
  --ps-accent-2: #73a68f;
  --ps-border: #bd7a8e;
  --ps-focus: #6c4058;
  --ps-shadow: 0 8px 22px #68394b36, inset 0 2px 0 #ffffffc2, inset 0 -2px 0 #d99dad42;
  --ps-button-shadow: inset 0 2px 0 #ffffffb8, inset 0 -3px 0 #bd71866b, 0 3px 5px #79425236;
  --ps-radius: 20px;
  --ps-button-radius: 12px;
  --ps-font: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

[data-player-skin="steampunk"] {
  --ps-bg: #211711;
  --ps-panel: #33251d;
  --ps-panel-2: #1e1712;
  --ps-button: #856037;
  --ps-button-hover: #a77a42;
  --ps-button-active: #d0a34c;
  --ps-button-active-text: #2a1a0e;
  --ps-text: #fff2cf;
  --ps-muted: #d5c19b;
  --ps-accent: #e0ad4f;
  --ps-accent-2: #78a69b;
  --ps-border: #b9863c;
  --ps-focus: #fff0a6;
  --ps-shadow: 0 9px 0 #17100c, 0 14px 26px #0f0a08ba, inset 0 2px 0 #f7d38d45, inset 0 0 0 3px #17100c8f;
  --ps-button-shadow: inset 0 2px 0 #f5d79170, inset 0 -3px 0 #402813, 0 3px 0 #18100b;
  --ps-radius: 10px;
  --ps-button-radius: 7px;
  --ps-font: Georgia, "Times New Roman", serif;
}

/* Rendered material surfaces. Artwork sits behind live, accessible controls. */
[data-player-skin="cat_cafe"] {
  --ps-button-art: url("/assets/player-skins/rendered-v2/cat_cafe.webp");
  --ps-glyph: #643149;
  --ps-pressed-glow: #d65788;
}
[data-player-skin="steampunk"] {
  --ps-button-art: none;
  --ps-glyph: #fff2cf;
  --ps-pressed-glow: #e9b954;
}
[data-player-skin="cat_cafe"].ytfp-page-panel,
[data-player-skin="cat_cafe"] .ytfp-bottom {
  background: linear-gradient(135deg, #fff4e7, #f9d7d9);
  outline: 1px solid #cb8b99;
  box-shadow: inset 0 2px 1px #fff, inset 0 -3px 0 #d99dad55, 0 8px 18px #68394b36;
}
[data-player-skin="steampunk"].ytfp-page-panel,
[data-player-skin="steampunk"] .ytfp-bottom {
  background: radial-gradient(ellipse at top, #43554b, #172d24 72%);
  outline: 2px solid #b9863c;
  box-shadow: inset 0 0 0 3px #4c351c, inset 0 0 0 4px #c3954d66, 0 5px 0 #241a12, 0 10px 20px #110c0970;
}

:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary) {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: var(--ps-glyph);
  text-shadow: none;
  overflow: visible;
  transition: translate .16s ease, scale .16s ease;
}
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ps-button-art) center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px #24101b50);
  transition: filter .16s ease, scale .16s ease, rotate .25s ease;
}
:is([data-player-skin="cat_cafe"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary) {
  padding-top: 0;
  padding-bottom: 0;
}
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary) > svg {
  max-width: 55%;
  max-height: 55%;
}
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary):hover {
  translate: 0 -1px;
}
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary):hover::before {
  filter: drop-shadow(0 3px 2px #24101b55) brightness(1.06);
}
[data-player-skin="cat_cafe"] :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary):hover::before { rotate: -4deg; }
[data-player-skin="steampunk"] :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary):hover::before { rotate: 12deg; }
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary):active {
  translate: 0 1px;
  scale: .94;
}
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary):active::before {
  filter: drop-shadow(0 0 0 transparent) brightness(.94);
}
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary):is([aria-pressed="true"], .ytfp-btn--active)::before,
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) .ytfp-more[open] > :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary)::before {
  filter: drop-shadow(0 0 2px var(--ps-pressed-glow)) drop-shadow(0 0 2px var(--ps-pressed-glow));
}
@media (prefers-reduced-motion: reduce) {
  :is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary),
:is([data-player-skin="cat_cafe"], [data-player-skin="steampunk"]) :is(.ytfp-btn.ytfp-btn, .ytfp-nav-btn.ytfp-nav-btn, .ytfp-speed-label.ytfp-speed-label, .ytfp-disclosure.ytfp-disclosure > summary)::before {
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Rendered fixed bodies keep six live controls over blank wells. */
[data-player-skin="desktop90"] {
  --ytfp-v3-body: url("/assets/player-skins/rendered-v3/desktop90.lossless145.png");
  --ytfp-v3-aspect: 2021 / 778;
  --ytfp-v3-play-x: 49.8%;
  --ytfp-v3-play-y: 76.4%;
  --ytfp-v3-play-size: 26%;
  --ytfp-v3-play-aspect: 3.35;
  --ytfp-v3-seek-back-x: 23.5%;
  --ytfp-v3-seek-forward-x: 76.8%;
  --ytfp-v3-seek-y: 76.4%;
  --ytfp-v3-seek-width: 21%;
  --ytfp-v3-seek-aspect: 2.55;
  --ytfp-v3-service-one-x: 78.3%;
  --ytfp-v3-service-one-y: 17.9%;
  --ytfp-v3-service-two-x: 78.3%;
  --ytfp-v3-service-two-y: 35.4%;
  --ytfp-v3-service-three-x: 78.3%;
  --ytfp-v3-service-three-y: 53%;
  --ytfp-v3-service-size: 6.2%;
  --ytfp-v3-main-glyph: #fff4df;
  --ytfp-v3-service-glyph: #fff4df;
  --ytfp-v3-glow: #ff9f32;
  --ytfp-v3-pins-x: 50%;
}

[data-player-skin="cat_cafe"][data-player-skin-rendered-v5] {
  --ytfp-v3-body: url("/assets/player-skins/rendered-v5/cat_cafe.lossless145.png");
  --ytfp-v3-aspect: 2020 / 779;
  --ytfp-v3-play-x: 75.5%; --ytfp-v3-play-y: 51%; --ytfp-v3-play-size: 24%; --ytfp-v3-play-aspect: 1;
  --ytfp-v3-seek-back-x: 21.5%; --ytfp-v3-seek-back-y: 69%;
  --ytfp-v3-seek-forward-x: 44.3%; --ytfp-v3-seek-forward-y: 69%;
  --ytfp-v3-seek-width: 20%; --ytfp-v3-seek-aspect: 2.1;
  --ytfp-v3-service-one-x: 80%; --ytfp-v3-service-one-y: 10%;
  --ytfp-v3-service-two-x: 88.2%; --ytfp-v3-service-two-y: 20.3%;
  --ytfp-v3-service-three-x: 94.5%; --ytfp-v3-service-three-y: 41.5%;
  --ytfp-v3-service-size: 7.2%; --ytfp-v3-service-aspect: 1;
  --ytfp-v3-main-glyph: #5b3247; --ytfp-v3-seek-glyph: #5b3b2d; --ytfp-v3-service-glyph: #573526;
  --ytfp-v3-glow: #f1a8b8; --ytfp-v3-pins-x: 50%;
}

[data-player-skin="arcade"][data-player-skin-rendered-v5] {
  --ytfp-v3-body: url("/assets/player-skins/rendered-v5/arcade.lossless145.png");
  --ytfp-v3-aspect: 1983 / 793;
  --ytfp-v3-play-x: 26%; --ytfp-v3-play-y: 47%; --ytfp-v3-play-size: 18%; --ytfp-v3-play-aspect: 1;
  --ytfp-v3-seek-back-x: 66%; --ytfp-v3-seek-back-y: 67%;
  --ytfp-v3-seek-forward-x: 80%; --ytfp-v3-seek-forward-y: 39%;
  --ytfp-v3-seek-width: 12%; --ytfp-v3-seek-aspect: 1;
  --ytfp-v3-service-one-x: 50%; --ytfp-v3-service-one-y: 42%;
  --ytfp-v3-service-two-x: 57.5%; --ytfp-v3-service-two-y: 41%;
  --ytfp-v3-service-three-x: 65%; --ytfp-v3-service-three-y: 39.5%;
  --ytfp-v3-service-size: 7.3%; --ytfp-v3-service-aspect: 1;
  --ytfp-v3-main-glyph: #211b1f; --ytfp-v3-seek-glyph: #211b1f; --ytfp-v3-service-glyph: #fff3c8;
  --ytfp-v3-glow: #ffd91a; --ytfp-v3-pins-x: 50%;
}

[data-player-skin="amber"][data-player-skin-rendered-v5] {
  --ytfp-v3-body: url("/assets/player-skins/rendered-v5/amber.lossless145.png");
  --ytfp-v3-aspect: 1983 / 793;
  --ytfp-v3-play-x: 51.5%; --ytfp-v3-play-y: 46%; --ytfp-v3-play-size: 17%; --ytfp-v3-play-aspect: 1;
  --ytfp-v3-seek-back-x: 29%; --ytfp-v3-seek-back-y: 53%;
  --ytfp-v3-seek-forward-x: 74%; --ytfp-v3-seek-forward-y: 59%;
  --ytfp-v3-seek-width: 12%; --ytfp-v3-seek-aspect: 1;
  --ytfp-v3-service-one-x: 22.5%; --ytfp-v3-service-one-y: 14%;
  --ytfp-v3-service-two-x: 32%; --ytfp-v3-service-two-y: 16%;
  --ytfp-v3-service-three-x: 41%; --ytfp-v3-service-three-y: 20%;
  --ytfp-v3-service-size: 9%; --ytfp-v3-service-aspect: 1.55;
  --ytfp-v3-main-glyph: #57320f; --ytfp-v3-seek-glyph: #173f43; --ytfp-v3-service-glyph: #5a310f;
  --ytfp-v3-glow: #ffd05b; --ytfp-v3-pins-x: 50%;
}

[data-player-skin="royal"][data-player-skin-rendered-v5] {
  --ytfp-v3-body: url("/assets/player-skins/rendered-v5/royal.lossless145.png");
  --ytfp-v3-aspect: 1983 / 793;
  --ytfp-v3-play-x: 50%; --ytfp-v3-play-y: 49%; --ytfp-v3-play-size: 28%; --ytfp-v3-play-aspect: 1.5;
  --ytfp-v3-seek-back-x: 22%; --ytfp-v3-seek-back-y: 57%;
  --ytfp-v3-seek-forward-x: 77%; --ytfp-v3-seek-forward-y: 58%;
  --ytfp-v3-seek-width: 15%; --ytfp-v3-seek-aspect: 1.45;
  --ytfp-v3-service-one-x: 90.5%; --ytfp-v3-service-one-y: 39.5%;
  --ytfp-v3-service-two-x: 91%; --ytfp-v3-service-two-y: 53.5%;
  --ytfp-v3-service-three-x: 90%; --ytfp-v3-service-three-y: 68.5%;
  --ytfp-v3-service-size: 5.4%; --ytfp-v3-service-aspect: 1;
  --ytfp-v3-main-glyph: #fff2cf; --ytfp-v3-seek-glyph: #4a1d20; --ytfp-v3-service-glyph: #4a1d20;
  --ytfp-v3-glow: #e7c36f; --ytfp-v3-pins-x: 50%;
}

[data-player-skin="kawaii"][data-player-skin-rendered-v5] {
  --ytfp-v3-body: url("/assets/player-skins/moonlit-v2/kawaii.lossless145.png");
  --ytfp-v3-aspect: 2020 / 494;
  --ytfp-v3-body-size: 100% auto;
  --ytfp-v3-body-position: center 45.263%;
  --ytfp-v3-play-x: 56.25%; --ytfp-v3-play-y: 62.146%; --ytfp-v3-play-size: 9.2%; --ytfp-v3-play-aspect: 1;
  --ytfp-v3-seek-back-x: 43.75%; --ytfp-v3-seek-back-y: 62.146%;
  --ytfp-v3-seek-forward-x: 68.75%; --ytfp-v3-seek-forward-y: 62.146%;
  --ytfp-v3-seek-width: 9.2%; --ytfp-v3-seek-aspect: 1;
  --ytfp-v3-service-one-x: 18.75%; --ytfp-v3-service-one-y: 62.146%;
  --ytfp-v3-service-two-x: 31.25%; --ytfp-v3-service-two-y: 62.146%;
  --ytfp-v3-service-three-x: 81.25%; --ytfp-v3-service-three-y: 62.146%;
  --ytfp-v3-service-size: 9.2%; --ytfp-v3-service-aspect: 1;
  --ytfp-v3-main-glyph: #fff; --ytfp-v3-seek-glyph: #fff; --ytfp-v3-service-glyph: #fff;
  --ytfp-v3-glow: #d8e2ef; --ytfp-v3-pins-x: 50%;
}

[data-player-skin="steampunk"] {
  --ytfp-v3-body: url("/assets/player-skins/rendered-v3/steampunk.lossless145.png");
  --ytfp-v3-aspect: 2022 / 778;
  --ytfp-v3-play-x: 49.9%;
  --ytfp-v3-play-y: 46.4%;
  --ytfp-v3-play-size: 15%;
  --ytfp-v3-seek-back-x: 28.9%;
  --ytfp-v3-seek-forward-x: 70.9%;
  --ytfp-v3-seek-y: 62.6%;
  --ytfp-v3-seek-width: 10%;
  --ytfp-v3-seek-aspect: 1;
  --ytfp-v3-service-one-x: 15.8%;
  --ytfp-v3-service-one-y: 42.2%;
  --ytfp-v3-service-two-x: 28.1%;
  --ytfp-v3-service-two-y: 31.6%;
  --ytfp-v3-service-three-x: 84.1%;
  --ytfp-v3-service-three-y: 42.3%;
  --ytfp-v3-service-size: 6.2%;
  --ytfp-v3-main-glyph: #fff2cf;
  --ytfp-v3-service-glyph: #3b2112;
  --ytfp-v3-glow: #e0ad4f;
  --ytfp-v3-pins-x: 50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready {
  position: absolute;
  isolation: isolate;
  width: min(380px, calc(100vw - 12px));
  max-width: calc(100vw - 12px);
  height: auto;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-aspect);
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--ytfp-v3-body) var(--ytfp-v3-body-position, center) / var(--ytfp-v3-body-size, 100% 100%) no-repeat;
  box-shadow: none;
  overflow: visible;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready::before,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready::after {
  content: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-playback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--nav > .ytfp-nav {
  display: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play {
  position: absolute;
  z-index: 3;
  top: var(--ytfp-v3-play-y);
  left: var(--ytfp-v3-play-x);
  width: var(--ytfp-v3-play-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-play-aspect, 1);
  padding: 0;
  transform: none;
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek {
  position: absolute;
  z-index: 3;
  width: var(--ytfp-v3-seek-width);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-seek-aspect);
  padding: 0;
  transform: none;
  translate: -50% -50%;
  font: 900 clamp(10px, 3vw, 13px)/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek--back {
  top: var(--ytfp-v3-seek-back-y, var(--ytfp-v3-seek-y));
  left: var(--ytfp-v3-seek-back-x);
}
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek--forward {
  top: var(--ytfp-v3-seek-forward-y, var(--ytfp-v3-seek-y));
  left: var(--ytfp-v3-seek-forward-x);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
  padding: 0;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn {
  position: absolute;
  z-index: 3;
  width: var(--ytfp-v3-service-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-service-aspect, 1);
  padding: 3px;
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn:nth-child(1) { top: var(--ytfp-v3-service-one-y); left: var(--ytfp-v3-service-one-x); }
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn:nth-child(2) { top: var(--ytfp-v3-service-two-y); left: var(--ytfp-v3-service-two-x); }

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side--end,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tray {
  display: none !important;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main {
  position: absolute;
  inset: 0;
  display: block;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main > .ytfp-group:first-child,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-boost,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-speed {
  display: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more {
  position: absolute;
  z-index: 4;
  top: var(--ytfp-v3-service-three-y);
  left: var(--ytfp-v3-service-three-x);
  width: var(--ytfp-v3-service-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-service-aspect, 1);
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more > summary {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 1px;
  font-size: 12px;
  line-height: 1;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn,
  .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more > summary,
  .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-btn
) {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  outline-offset: 2px;
  background: transparent;
  box-shadow: none;
  color: var(--ytfp-v3-main-glyph);
  text-shadow: 0 1px 2px #1b1008a8;
  transition: background-color .14s ease, filter .14s ease, scale .1s ease;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn,
  .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more > summary,
  .player-skin-pip :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn,
  .player-skin-pip :is(.pip-preview-retro-menu, .pip-preview-steampunk-menu, .pip-preview-plush-menu, .pip-preview-rendered-v5-menu)
) {
  color: var(--ytfp-v3-service-glyph);
  text-shadow: 0 1px 1px #fff8;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-playback > .ytfp-fixed-seek,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-btn.ytfp-fixed-seek {
  color: var(--ytfp-v3-seek-glyph, var(--ytfp-v3-main-glyph));
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn,
  .ytfp-bottom.ytfp-fixed-skin-ready > .ytfp-row--main .ytfp-more > summary,
  .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-btn
)::before {
  content: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn,
  .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-btn
):hover {
  translate: -50% -50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ytfp-v3-glow) 28%, transparent), transparent 68%);
  filter: drop-shadow(0 0 4px var(--ytfp-v3-glow));
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn
):active {
  translate: -50% -50%;
  scale: .94;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play > svg,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-fixed-play > svg {
  width: 42%;
  height: 42%;
  max-width: none;
  max-height: none;
  color: inherit;
  filter: drop-shadow(0 1px 2px #0008);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn > svg,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn > svg {
  width: min(68%, 14px);
  height: min(68%, 14px);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(.ytfp-bottom.ytfp-fixed-skin-ready, .ytfp-page-panel, .player-skin-pip) :is(button, summary):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  filter: drop-shadow(0 0 5px var(--ytfp-v3-glow));
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) [data-ytfp-tool="fixedLayout"] {
  display: grid;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) [data-ytfp-tool="fixedLayout"] > .ytfp-tool-title {
  display: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-fixed-menu-controls {
  display: grid;
  gap: 10px;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-fixed-menu-controls > .ytfp-nav {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 4px;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 8px;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-fixed-menu-controls > :is(.ytfp-boost, .ytfp-speed) input[type="range"] {
  flex: 1 1 140px;
  width: 140px;
  min-width: 120px;
  max-width: 170px;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(.ytfp-more-panel, .ytfp-surface-menu, .ytfp-disclosure-content) :is(button, summary) {
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-button-radius);
  background: var(--ps-button);
  box-shadow: var(--ps-button-shadow);
  color: var(--ps-text);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(.ytfp-more-panel, .ytfp-surface-menu, .ytfp-disclosure-content) :is(button, summary)::before {
  content: none;
}

/* Page launchers reuse the body and move the seventh Bookmark action into More. */
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel {
  isolation: isolate;
  display: block;
  width: min(352px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  height: auto;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-aspect);
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--ytfp-v3-body) var(--ytfp-v3-body-position, center) / var(--ytfp-v3-body-size, 100% 100%) no-repeat;
  box-shadow: none;
  overflow: visible;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel::before,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel::after {
  content: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="document"] {
  position: absolute;
  z-index: 3;
  top: var(--ytfp-v3-play-y);
  left: var(--ytfp-v3-play-x);
  width: var(--ytfp-v3-play-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-play-aspect, 1);
  padding: 0;
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(.ytfp-drag, .ytfp-speed-presets, .ytfp-more) {
  position: absolute;
  z-index: 3;
  width: var(--ytfp-v3-service-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-service-aspect, 1);
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > .ytfp-drag { top: var(--ytfp-v3-service-one-y); left: var(--ytfp-v3-service-one-x); }
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > .ytfp-speed-presets { top: var(--ytfp-v3-service-two-y); left: var(--ytfp-v3-service-two-x); }
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > .ytfp-more { top: var(--ytfp-v3-service-three-y); left: var(--ytfp-v3-service-three-x); }

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="native"],
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more) {
  position: absolute;
  z-index: 3;
  width: var(--ytfp-v3-seek-width);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-seek-aspect);
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > .ytfp-page-pip[data-mode="native"] {
  top: var(--ytfp-v3-seek-back-y, var(--ytfp-v3-seek-y));
  left: var(--ytfp-v3-seek-back-x);
}
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more) {
  top: var(--ytfp-v3-seek-forward-y, var(--ytfp-v3-seek-y));
  left: var(--ytfp-v3-seek-forward-x);
}

/* Keep the live page controls inside their matching rendered wells. */
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-drag.ytfp-drag,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-speed-presets.ytfp-speed-presets,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-more.ytfp-more {
  width: var(--ytfp-v3-service-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-service-aspect, 1);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip.ytfp-page-pip[data-mode="native"],
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-disclosure.ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more) {
  width: var(--ytfp-v3-seek-width);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-seek-aspect);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip.ytfp-page-pip[data-mode="document"] {
  width: var(--ytfp-v3-play-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-play-aspect, 1);
  color: var(--ytfp-v3-main-glyph);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > .ytfp-pinned-tools {
  position: absolute;
  z-index: 3;
  top: 15%;
  left: var(--ytfp-v3-pins-x);
  display: flex;
  max-width: 27%;
  gap: 2px;
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > .ytfp-pinned-tools > :is(button, div) {
  min-width: 20px;
  min-height: 20px;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > [role="status"] {
  position: absolute;
  left: 33%;
  bottom: 2px;
  max-width: 34%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(.ytfp-drag, .ytfp-page-pip),
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(.ytfp-speed-presets, .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)) > summary,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-more > summary,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  padding: 3px;
  background: transparent;
  box-shadow: none;
  color: var(--ytfp-v3-main-glyph);
  text-shadow: 0 1px 2px #1b1008a8;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(.ytfp-drag, .ytfp-speed-presets, .ytfp-more) :is(button, summary),
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-drag {
  color: var(--ytfp-v3-service-glyph);
  text-shadow: 0 1px 1px #fff8;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(.ytfp-drag, .ytfp-page-pip, .ytfp-speed-presets, .ytfp-disclosure, .ytfp-more) :is(button, summary)::before,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(.ytfp-drag, .ytfp-page-pip)::before {
  content: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools button {
  width: 20px;
  height: 20px;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[aria-pressed] {
  background: transparent;
  box-shadow: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(.ytfp-speed-presets, .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)) > summary {
  font-size: clamp(8px, .7em, 11px);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-more > summary {
  font-size: 12px;
  line-height: 1;
}

[data-player-skin="steampunk"][data-player-skin="steampunk"].ytfp-page-panel.ytfp-page-panel > .ytfp-speed-presets.ytfp-speed-presets > summary {
  color: var(--ytfp-v3-service-glyph);
  text-shadow: 0 1px 1px #fff8;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="document"] > svg {
  width: 42%;
  height: 42%;
  color: inherit;
  filter: drop-shadow(0 1px 2px #0008);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="native"] > svg {
  width: 55%;
  height: 55%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(
  .ytfp-page-pip[data-mode="native"],
  .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)
) {
  color: var(--ytfp-v3-seek-glyph, var(--ytfp-v3-main-glyph));
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel > .ytfp-disclosure input[type="range"] {
  width: min(160px, calc(100vw - 48px));
}

/* Shop previews use the same rendered body and normalized coordinates. */
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip {
  width: min(100%, 380px);
  max-width: 380px;
  margin-inline: auto;
  aspect-ratio: var(--ytfp-v3-aspect);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro-shell, .pip-preview-steampunk-shell, .pip-preview-plush-shell, .pip-preview-rendered-v5-shell) {
  position: absolute;
  inset: 0;
  isolation: isolate;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-aspect);
  zoom: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--ytfp-v3-body) var(--ytfp-v3-body-position, center) / var(--ytfp-v3-body-size, 100% 100%) no-repeat;
  box-shadow: none;
  overflow: visible;
}

:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro-shell, .pip-preview-steampunk-shell, .pip-preview-plush-shell, .pip-preview-rendered-v5-shell)::before,
:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro-shell, .pip-preview-steampunk-shell, .pip-preview-plush-shell, .pip-preview-rendered-v5-shell)::after {
  content: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5),
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window),
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-fixed-playback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn {
  position: absolute;
  z-index: 3;
  width: var(--ytfp-v3-service-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-service-aspect, 1);
  padding: 3px;
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn:nth-child(1) { top: var(--ytfp-v3-service-one-y); left: var(--ytfp-v3-service-one-x); }
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn:nth-child(2) { top: var(--ytfp-v3-service-two-y); left: var(--ytfp-v3-service-two-x); }

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-fixed-play {
  position: absolute;
  z-index: 3;
  top: var(--ytfp-v3-play-y);
  left: var(--ytfp-v3-play-x);
  width: var(--ytfp-v3-play-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-play-aspect, 1);
  padding: 0;
  transform: none;
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-fixed-seek {
  position: absolute;
  z-index: 3;
  width: var(--ytfp-v3-seek-width);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-seek-aspect);
  padding: 0;
  transform: none;
  translate: -50% -50%;
  font: 900 clamp(10px, 3vw, 13px)/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-fixed-seek--back {
  top: var(--ytfp-v3-seek-back-y, var(--ytfp-v3-seek-y));
  left: var(--ytfp-v3-seek-back-x);
}
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-fixed-seek--forward {
  top: var(--ytfp-v3-seek-forward-y, var(--ytfp-v3-seek-y));
  left: var(--ytfp-v3-seek-forward-x);
}

:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro-menu, .pip-preview-steampunk-menu, .pip-preview-plush-menu, .pip-preview-rendered-v5-menu) {
  position: absolute;
  z-index: 3;
  top: var(--ytfp-v3-service-three-y);
  left: var(--ytfp-v3-service-three-x);
  width: var(--ytfp-v3-service-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-service-aspect, 1);
  padding: 1px;
  translate: -50% -50%;
  font-size: 12px;
  line-height: 1;
}

/* Override the former rendered-v2 preview sizing with the live v3 geometry. */

/* The cassette transport wells are wide keys, while its three utility wells
   stay circular. Keep the real hit areas aligned with those rendered shapes. */
:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn.ytfp-btn {
  position: absolute;
  width: var(--ytfp-v3-service-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-service-aspect, 1);
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn.ytfp-btn:nth-child(1) { top: var(--ytfp-v3-service-one-y); left: var(--ytfp-v3-service-one-x); }
:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn.ytfp-btn:nth-child(2) { top: var(--ytfp-v3-service-two-y); left: var(--ytfp-v3-service-two-x); }

:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-btn.ytfp-fixed-play {
  top: var(--ytfp-v3-play-y);
  left: var(--ytfp-v3-play-x);
  width: var(--ytfp-v3-play-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-play-aspect, 1);
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-btn.ytfp-fixed-seek {
  width: var(--ytfp-v3-seek-width);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-seek-aspect);
  translate: -50% -50%;
}

:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-fixed-seek--back {
  top: var(--ytfp-v3-seek-back-y, var(--ytfp-v3-seek-y));
  left: var(--ytfp-v3-seek-back-x);
}
:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.pip-preview-retro, .pip-preview-steampunk, .pip-preview-plush, .pip-preview-rendered-v5) .ytfp-fixed-seek--forward {
  top: var(--ytfp-v3-seek-forward-y, var(--ytfp-v3-seek-y));
  left: var(--ytfp-v3-seek-forward-x);
}

:is([data-player-skin="desktop90"][data-player-skin="desktop90"], [data-player-skin="steampunk"][data-player-skin="steampunk"], [data-player-skin-rendered-v5][data-player-skin-rendered-v5]) .player-skin-pip.player-skin-pip :is(.ytfp-btn.pip-preview-retro-menu, .ytfp-btn.pip-preview-steampunk-menu, .ytfp-btn.pip-preview-plush-menu, .ytfp-btn.pip-preview-rendered-v5-menu) {
  top: var(--ytfp-v3-service-three-y);
  left: var(--ytfp-v3-service-three-x);
  width: var(--ytfp-v3-service-size);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--ytfp-v3-service-aspect, 1);
  translate: -50% -50%;
}
[data-player-skin="desktop90"] :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-seek,
  .player-skin-pip .pip-preview-retro :is(.ytfp-fixed-play, .ytfp-fixed-seek)
) {
  border-radius: 8px;
}

[data-player-skin="desktop90"] :is(
  .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-play,
  .player-skin-pip .pip-preview-retro .ytfp-fixed-play
),
[data-player-skin="desktop90"].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="document"] {
  color: #24170f;
  text-shadow: 0 1px 1px #ffd98999;
}

[data-player-skin="desktop90"].ytfp-page-panel.ytfp-page-panel > :is(
  .ytfp-page-pip[data-mode="document"],
  .ytfp-page-pip[data-mode="native"],
  .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more)
) {
  border-radius: 8px;
}

:is([data-player-skin="desktop90"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) :is(button, summary) {
    transition: none;
  }

  :is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side:first-child > .ytfp-btn,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-playback > :is(.ytfp-fixed-play, .ytfp-fixed-seek),
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]).ytfp-page-panel.ytfp-page-panel > :is(.ytfp-drag, .ytfp-page-pip),
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.pip-preview-retro-window, .pip-preview-steampunk-window, .pip-preview-plush-window, .pip-preview-rendered-v5-window) > .ytfp-btn,
:is([data-player-skin="desktop90"], [data-player-skin="steampunk"], [data-player-skin-rendered-v5]) .player-skin-pip :is(.ytfp-fixed-play, .ytfp-fixed-seek, .pip-preview-retro-menu, .pip-preview-steampunk-menu, .pip-preview-plush-menu, .pip-preview-rendered-v5-menu) {
    translate: -50% -50% !important;
    scale: none !important;
    rotate: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Royal uses pale seek wells around a dark center, so their live labels need
   the dark ink while the central Play glyph remains ivory. */
[data-player-skin="royal"][data-player-skin-rendered-v5] .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-fixed-playback > .ytfp-fixed-seek,
[data-player-skin="royal"][data-player-skin-rendered-v5] .player-skin-pip.player-skin-pip .ytfp-btn.ytfp-fixed-seek,
[data-player-skin="royal"][data-player-skin-rendered-v5].ytfp-page-panel.ytfp-page-panel > .ytfp-page-pip[data-mode="native"],
[data-player-skin="royal"][data-player-skin-rendered-v5].ytfp-page-panel.ytfp-page-panel > .ytfp-disclosure:not(.ytfp-speed-presets):not(.ytfp-more) {
  color: #4a1d20;
  text-shadow: 0 1px 1px #fff8;
}

/* Simple skins use the standard control layout and flat surfaces. */
:is([data-player-skin="retro_digital"], [data-player-skin="plush_paws"]) {
  --ps-button: transparent;
  --ps-shadow: none;
  --ps-button-shadow: none;
  --ps-radius: 10px;
  --ps-button-radius: 6px;
  --ps-border: transparent;
  --ps-font: "Roboto", Arial, sans-serif;
}
[data-player-skin="retro_digital"] {
  --ps-button: transparent;
  --ps-border: transparent;
  --ps-shadow: none;
  --ps-bg: #111820;
  --ps-panel: #18212a;
  --ps-panel-2: #202c35;
  --ps-button-hover: #2b3b45;
  --ps-button-active: #7ef28c;
  --ps-button-active-text: #102015;
  --ps-text: #f4f7f9;
  --ps-muted: #b8c6ca;
  --ps-accent: #7ef28c;
  --ps-accent-2: #b8c6ca;
  --ps-focus: #a8ffb2;
  --ps-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
[data-player-skin="plush_paws"] {
  --ps-button: transparent;
  --ps-border: transparent;
  --ps-shadow: none;
  --ps-bg: #30252e;
  --ps-panel: #493743;
  --ps-panel-2: #382b35;
  --ps-button-hover: #644959;
  --ps-button-active: #ffc0da;
  --ps-button-active-text: #382331;
  --ps-text: #fff7fb;
  --ps-muted: #e4cbd8;
  --ps-accent: #ffc0da;
  --ps-accent-2: #e4cbd8;
  --ps-focus: #ffe1ee;
}

/* Adaptive accessory docks for every nondefault skin. */
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) {
  --ytfp-dock-face: linear-gradient(var(--ps-panel), var(--ps-panel-2));
  --ytfp-dock-edge: var(--ps-accent);
  --ytfp-dock-button: linear-gradient(var(--ps-button-hover), var(--ps-button));
  --ytfp-dock-ink: var(--ps-text);
  --ytfp-dock-radius: 10px;
}
[data-player-skin="desktop90"] {
  --ytfp-dock-face: linear-gradient(#d6c3a1, #92714c);
  --ytfp-dock-edge: #674421;
  --ytfp-dock-button: linear-gradient(#fff0c8, #d9ae72);
  --ytfp-dock-ink: #352416;
  --ytfp-dock-radius: 5px;
}
[data-player-skin="console"] { --ytfp-dock-radius: 8px; --ytfp-dock-edge: #aa9879; }
[data-player-skin="kawaii"] {
  --ytfp-dock-face: linear-gradient(#152844, #060e20);
  --ytfp-dock-edge: #c9b786;
  --ytfp-dock-button: radial-gradient(circle at 35% 25%, #42618c, #142849);
  --ytfp-dock-ink: #fff4d9;
  --ytfp-dock-radius: 18px;
}
[data-player-skin="amber"] {
  --ytfp-dock-face: linear-gradient(#ffde83, #d58417);
  --ytfp-dock-edge: #9d5a0b;
  --ytfp-dock-button: radial-gradient(circle at 35% 25%, #fff4bf, #f4ad26);
  --ytfp-dock-ink: #67310c;
  --ytfp-dock-radius: 14px;
}
[data-player-skin="cyber_neon"] { --ytfp-dock-face: linear-gradient(#12202b, #060b15); --ytfp-dock-edge: #35e4ff; --ytfp-dock-radius: 4px; }
[data-player-skin="aurora"] { --ytfp-dock-face: linear-gradient(120deg, #204856, #452e67); --ytfp-dock-edge: #8ce8db; --ytfp-dock-radius: 18px; }
[data-player-skin="cosmic_glass"] { --ytfp-dock-face: linear-gradient(135deg, #32375bd9, #131c3fee); --ytfp-dock-edge: #a0b4ff; --ytfp-dock-radius: 16px; }
[data-player-skin="retro_digital"] { --ytfp-dock-face: linear-gradient(#263630, #0e1916); --ytfp-dock-edge: #7ef28c; --ytfp-dock-radius: 4px; }
[data-player-skin="plush_paws"] { --ytfp-dock-face: linear-gradient(#624955, #3c2b38); --ytfp-dock-edge: #e9a5c5; --ytfp-dock-radius: 20px; }
[data-player-skin="cat_cafe"] {
  --ytfp-dock-face: linear-gradient(#ffe9da, #d9ac99);
  --ytfp-dock-edge: #aa7168;
  --ytfp-dock-button: radial-gradient(circle at 35% 25%, #fff8ee, #e8bcba);
  --ytfp-dock-ink: #643149;
  --ytfp-dock-radius: 14px;
}
[data-player-skin="steampunk"] {
  --ytfp-dock-face: repeating-linear-gradient(90deg, #382416 0 12px, #422d1b 12px 14px);
  --ytfp-dock-edge: #b78742;
  --ytfp-dock-button: radial-gradient(circle at 35% 25%, #f4daa0, #a16b31);
  --ytfp-dock-ink: #352112;
  --ytfp-dock-radius: 16px;
}

[data-player-skin="arcade"] {
  --ytfp-dock-face: linear-gradient(#30343b, #10141b);
  --ytfp-dock-edge: #0755ed;
  --ytfp-dock-button: linear-gradient(150deg, #54a4ff, #075bf5 45%, #002f9a);
  --ytfp-dock-ink: #fff;
  --ytfp-dock-radius: 12px;
}
[data-player-skin="royal"] {
  --ytfp-dock-face: radial-gradient(ellipse at top, #8e1535, #390515);
  --ytfp-dock-edge: #d7a343;
  --ytfp-dock-button: radial-gradient(circle at 35% 25%, #fffef7, #f1e2be 65%, #bc903b);
  --ytfp-dock-ink: #531226;
  --ytfp-dock-radius: 22px;
}
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-bottom.ytfp-fixed-skin-ready:has(.ytfp-pinned-tools:not([hidden])) {
  bottom: calc(var(--ytfp-cap-lift) + var(--ytfp-extra-dock-height, 52px));
}
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side--end {
  display: contents !important;
}
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tray {
  display: contents !important;
}
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tray[hidden] {
  display: none !important;
}
[data-player-skin][data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tools,
[data-player-skin][data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])).ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools {
  position: absolute;
  inset: auto;
  top: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  transform: none;
  z-index: 4;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: max-content;
  max-width: min(260px, calc(100% - 24px));
  box-sizing: border-box;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  border: 3px solid var(--ytfp-dock-edge);
  border-radius: var(--ytfp-dock-radius);
  background: var(--ytfp-dock-face);
  box-shadow: inset 0 1px 2px #fff8, inset 0 -3px 3px #0008, 0 3px 5px #0006;
  overflow: visible;
}
[data-player-skin][data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tools[hidden],
[data-player-skin][data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])).ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools[hidden] {
  display: none !important;
}

[data-player-skin][data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tool,
[data-player-skin][data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])).ytfp-page-panel.ytfp-page-panel > .ytfp-pinned-tools .ytfp-pinned-tool {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 2px;
  border: 1px solid var(--ytfp-dock-edge);
  border-radius: var(--ytfp-dock-radius);
  background: var(--ytfp-dock-button);
  box-shadow: inset 0 1px 2px #fffc, inset 0 -2px 2px #0005, 0 1px 2px #000a;
  color: var(--ytfp-dock-ink);
  font: 700 13px/1 Arial, sans-serif;
  letter-spacing: 0;
  text-indent: 0;
  white-space: nowrap;
  text-shadow: none;
}
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-pinned-tool[aria-pressed="true"] {
  outline: 2px solid var(--ytfp-dock-ink);
  outline-offset: 1px;
}
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-pinned-tool:focus-visible {
  outline: 2px solid var(--ytfp-dock-ink);
  outline-offset: 3px;
}

/* Use a bounded glyph box instead of inheriting decorative skin fonts. */
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-pinned-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  max-width: 100%;
  font: 700 12px/1 Arial, sans-serif;
  letter-spacing: 0;
}
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-pinned-tool::before,
[data-player-skin]:not(:is([data-player-skin="classic"], [data-player-skin="aurora"], [data-player-skin="cosmic_glass"], [data-player-skin="retro_digital"], [data-player-skin="plush_paws"], [data-player-skin="console"])) .ytfp-pinned-tool::after { content: none !important; }
/* Raster buttons shrink with the shell, including their text and SVGs. */
[data-player-skin][data-player-skin-fixed] .ytfp-bottom .ytfp-fixed-seek,
[data-player-skin][data-player-skin-fixed].ytfp-page-panel .ytfp-page-playback > .ytfp-btn {
  font-size: clamp(7px, 2.4vw, 12px);
  line-height: 1;
  letter-spacing: 0;
  padding: 0;
}

/* Artwork-aware motion lives inside the actual player shell, not on html. */
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion] { isolation: isolate; }
.ytfp-skin-motion-layer { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.ytfp-skin-motion-layer > span { position:absolute; inset:0; display:none; pointer-events:none; }
.ytfp-skin-motion-layer > svg { position:absolute; inset:0; display:none; width:100%; height:100%; pointer-events:none; }
.ytfp-motion-layered-shell { position:absolute; inset:0; z-index:1; display:none; background-size:100% 100%; background-repeat:no-repeat; pointer-events:none; }
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion] > .ytfp-skin-motion-layer { display:block; }

@keyframes ytfp-motion-glass-sheen {
  from { transform: translateX(-115%) skewX(-18deg); }
  to { transform: translateX(115%) skewX(-18deg); }
}
@keyframes ytfp-motion-amber-pulse {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.12) brightness(1.05); }
}
@keyframes ytfp-motion-arcade-scan {
  from { background-position: 0 0; }
  to { background-position: 0 28px; }
}
@keyframes ytfp-motion-retro-reels {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ytfp-motion-amber-lava {
  0%, 100% { transform: translate(-12%, 16%) scale(.8); opacity:.35; }
  50% { transform: translate(12%, -16%) scale(1.12); opacity:.95; }
}
@keyframes ytfp-motion-amber-bubbles {
  0%, 100% { transform: translateY(8px); opacity:.2; }
  50% { transform: translateY(-14px); opacity:.8; }
}
@keyframes ytfp-motion-cafe-light {
  0%, 100% { opacity:.2; }
  50% { opacity:1; }
}
@keyframes ytfp-motion-cyber-ring {
  to { stroke-dashoffset:-1257; }
}
@keyframes ytfp-motion-cyber-seek {
  to { stroke-dashoffset:-603; }
}
@keyframes ytfp-motion-gear {
  to { transform: rotate(360deg); }
}
@keyframes ytfp-motion-neon-scan {
  from { transform: translateY(-100%); opacity: .05; }
  50% { opacity: .24; }
  to { transform: translateY(100%); opacity: .05; }
}
@keyframes ytfp-motion-button-light {
  0%, 100% { opacity: .2; }
  45% { opacity: .95; }
  65% { opacity: .45; }
}
@keyframes ytfp-motion-steam-run {
  from { stroke-dashoffset: 170; }
  to { stroke-dashoffset: -1450; }
}
@keyframes ytfp-motion-vapor {
  0% { opacity: 0; transform: translateY(20px); }
  25% { opacity: .6; }
  100% { opacity: 0; transform: translateY(-65px); }
}

/* Amber light, clipped to the inner body of the existing raster shell. */
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="amber"] .ytfp-motion-amber-art { display:block; width:100%; height:100%; }
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="amber"] .ytfp-motion-layered-shell.amber-shell { display:block; background-image:url("/assets/player-skins/motion/amber-layered.lossless145.png"); }
.ytfp-motion-amber-art .amber-orb { transform-box:fill-box; transform-origin:50% 50%; animation:ytfp-motion-amber-lava 4.8s ease-in-out infinite; }
.ytfp-motion-amber-art .amber-orb.orb-a { animation-delay:-.8s; }
.ytfp-motion-amber-art .amber-trail { stroke-dasharray:180 1800; animation:ytfp-motion-glass-sheen 5.8s ease-in-out infinite; filter:drop-shadow(0 0 14px #ffbb32); }
.ytfp-motion-amber-art .amber-bubbles { animation:ytfp-motion-amber-bubbles 3.2s ease-in-out infinite; filter:drop-shadow(0 0 8px #ffcf65); }
.ytfp-motion-amber-glass .orb { position:absolute; border-radius:50%; background:radial-gradient(circle, #fff9d9ed 0, #ffdf6885 34%, transparent 72%); filter:blur(5px); animation:ytfp-motion-amber-pulse 3.8s ease-in-out infinite; }
.ytfp-motion-amber-glass .orb-a { width:34%; height:58%; left:13%; top:17%; }
.ytfp-motion-amber-glass .orb-b { width:38%; height:54%; left:58%; top:19%; animation-delay:1.1s; }
.ytfp-motion-amber-glass .trail { position:absolute; left:7%; right:8%; top:54%; height:12%; border-top:3px solid #fff1adcc; border-radius:50%; filter:drop-shadow(0 0 7px #ffbb32); animation:ytfp-motion-glass-sheen 5.8s ease-in-out infinite; }
.ytfp-motion-amber-glass .bubbles { position:absolute; inset:16% 10%; background:radial-gradient(circle at 14% 17%,transparent 0 5px,#fff0b3aa 6px 7px,transparent 8px),radial-gradient(circle at 27% 39%,transparent 0 5px,#fff0b3aa 6px 7px,transparent 8px),radial-gradient(circle at 68% 72%,transparent 0 4px,#fff0b3aa 5px 6px,transparent 7px); opacity:.7; }

:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="arcade"] .ytfp-motion-arcade { display:block; }
.ytfp-motion-arcade .ring { position:absolute; border:3px solid; border-radius:50%; filter:drop-shadow(0 0 9px currentColor); animation:ytfp-motion-amber-pulse 2.4s ease-in-out infinite; }
.ytfp-motion-arcade .ring-a { color:#ff354f; width:25%; height:48%; left:14%; top:28%; }
.ytfp-motion-arcade .ring-b { color:#ffe43e; width:16%; height:30%; left:58%; top:50%; animation-delay:.65s; }
.ytfp-motion-arcade .ring-c { color:#ffe43e; width:16%; height:30%; left:73%; top:21%; animation-delay:1.2s; }
.ytfp-motion-arcade-art .arc-ring { fill:none; stroke-width:13; filter:drop-shadow(0 0 15px currentColor) drop-shadow(0 0 25px currentColor); opacity:.24; }
.ytfp-motion-arcade-art .arc-ring.red { stroke:#ff354f; color:#ff153d; }
.ytfp-motion-arcade-art .arc-ring.yellow { stroke:#ffe43e; color:#ffb200; }
.ytfp-motion-arcade-art .arc-ring.first { animation-delay:.65s; }
.ytfp-motion-arcade-art .arc-ring.second { animation-delay:1.2s; }
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="arcade"] .ytfp-motion-arcade-art { display:block; width:100%; height:100%; }
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="arcade"] .ytfp-motion-arcade { display:none; }
.ytfp-motion-arcade-art .arc-ring { animation:ytfp-motion-button-light 2.4s ease-in-out infinite; }

/* Two real reel layers, each with its own transform origin. */
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="retro"] .ytfp-motion-retro { display:block; }
.ytfp-motion-retro .reel { position:absolute; width:6.0366%; aspect-ratio:1; top:38.3033%; background-size:contain; background-repeat:no-repeat; transform:translate(-50%,-50%); }
.ytfp-motion-retro .reel-a { left:30.3315%; background-image:url("/assets/player-skins/motion/reel0.lossless145.png"); transform-origin:50% 50%; }
.ytfp-motion-retro .reel-b { left:56.5562%; background-image:url("/assets/player-skins/motion/reel1.lossless145.png"); transform-origin:50% 50%; }
.ytfp-motion-retro .reel { animation:ytfp-motion-retro-reels 4s linear infinite; animation-play-state:paused; }
.ytfp-motion-retro .reel-b { animation-delay:-1.7s !important; }

:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="steampunk"] .ytfp-motion-steam { display:block; }
.ytfp-motion-steam .pipe,.ytfp-motion-steam .flow { position:absolute; left:17%; right:17%; top:68%; height:14%; border-bottom:3px solid #ffcf85; border-radius:50%; }
.ytfp-motion-steam .flow { border-bottom:5px solid #ffdf9f; filter:drop-shadow(0 0 8px #ffad43); background:linear-gradient(90deg,transparent 0 45%,#ffe1a9 50%,transparent 55%) 0 100% / 28% 5px no-repeat; animation:ytfp-motion-glass-sheen 4s linear infinite; }
.ytfp-motion-steam .vapor { position:absolute; width:12%; height:34%; top:22%; border:3px solid #e7d6bd88; border-color:#e7d6bd88 transparent transparent; border-radius:50%; filter:blur(2px); animation:ytfp-motion-gear 3.4s ease-out infinite; }
.ytfp-motion-steam .vapor-a { left:10%; }.ytfp-motion-steam .vapor-b { right:10%; animation-delay:1.7s; }
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="steampunk"] .ytfp-motion-steam-art { display:block; width:100%; height:100%; }
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="steampunk"] .ytfp-motion-steam { display:none; }
.ytfp-motion-steam-art .steam-pipe,.ytfp-motion-steam-art .steam-flow,.ytfp-motion-steam-art .steam-vapor { fill:none; stroke-linecap:round; }
.ytfp-motion-steam-art .steam-pipe { stroke:#ffcf85; stroke-width:7; opacity:.25; }
.ytfp-motion-steam-art .steam-flow { stroke:#ffdf9f; stroke-width:14; stroke-dasharray:170 1450; filter:drop-shadow(0 0 14px #ffad43); }
.ytfp-motion-steam-art .steam-vapor { stroke:#e7d6bd; stroke-width:19; filter:blur(7px); opacity:0; }
.ytfp-motion-steam-art .steam-flow { animation:ytfp-motion-steam-run 4s linear infinite; }
.ytfp-motion-steam-art .steam-vapor { animation:ytfp-motion-vapor 3.4s ease-out infinite; }
.ytfp-motion-steam-art .vapor-two { animation-delay:1.7s; }

:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="cat_cafe"] .ytfp-motion-cafe-art { display:block; width:100%; height:100%; }
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="cat_cafe"] .ytfp-motion-layered-shell.cafe-shell { display:block; background-image:url("/assets/player-skins/motion/cafe-layered.lossless145.png"); }
.ytfp-motion-cafe-art .cafe-illumination { animation:ytfp-motion-cafe-light 4s ease-in-out infinite; }
.ytfp-motion-cafe-art .cafe-strip { animation:ytfp-motion-cafe-light 3.4s ease-in-out infinite; filter:drop-shadow(0 0 12px #fff0c0); }
.ytfp-motion-cafe-art .cafe-front-glass { clip-rule:nonzero; }
.ytfp-motion-cafe-art .cafe-glass-sweep { animation:ytfp-motion-glass-sheen 5.2s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 50%; }

:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion="cyber_neon"] .ytfp-motion-cyber-art { display:block; width:100%; height:100%; }
.ytfp-motion-cyber-art .cyber-light-effects { filter:drop-shadow(0 0 8px #75dfff); }
.ytfp-motion-cyber-art .runner { stroke-dasharray:80 1800; animation:ytfp-motion-steam-run 3.6s linear infinite; }
.ytfp-motion-cyber-art .power-ring { stroke-dasharray:75 1182; animation:ytfp-motion-cyber-ring 8.65s linear infinite; }
.ytfp-motion-cyber-art .seek-ring { stroke-dasharray:30 573; animation:ytfp-motion-cyber-seek 8.65s linear infinite; }
.ytfp-motion-cyber-art .violet { animation:ytfp-motion-amber-pulse 3.9s ease-in-out infinite; }

:is(.ytfp-bottom, .ytfp-page-panel)[data-player-motion-reduced] .ytfp-skin-motion-layer * {
  animation: none !important;
}
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion] .ytfp-skin-motion-layer * {
  animation-play-state: paused;
}
:is(.ytfp-bottom, .ytfp-page-panel)[data-player-skin-motion][data-player-motion-playing][data-player-motion-visible] .ytfp-skin-motion-layer * {
  animation-play-state: running;
}

/* Original adaptive skins based on the three owner-selected visual concepts. */
[data-player-skin="retro_lavender"] {
  --ps-bg: #f5e8ce;
  --ps-panel: #f7ecd5;
  --ps-panel-2: #d2c3dd;
  --ps-button: #cbbcd7;
  --ps-button-hover: #e4d8ed;
  --ps-button-active: #ffa58e;
  --ps-button-active-text: #39243f;
  --ps-text: #39243f;
  --ps-muted: #66516c;
  --ps-accent: #dc745f;
  --ps-accent-2: #b7c77e;
  --ps-border: #8a7190;
  --ps-focus: #75408a;
  --ps-shadow: inset 0 2px 0 #fff9ee, inset 0 -3px 0 #c7b49b, 0 4px 10px #29143355;
  --ps-button-shadow: inset 0 2px 0 #ffffffb0, inset 0 -2px 0 #72567d44, 0 2px 0 #735f7a;
  --ps-radius: 16px;
  --ps-button-radius: 9px;
  --ps-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ps-shell: linear-gradient(#fff4df, #ebdcc0);
}
[data-player-skin="cozy_cartoon"] {
  --ps-bg: #ffe5bd;
  --ps-panel: #fff0d4;
  --ps-panel-2: #d4dda3;
  --ps-button: #ffebc9;
  --ps-button-hover: #fff8e8;
  --ps-button-active: #ffb33b;
  --ps-button-active-text: #60300d;
  --ps-text: #70421f;
  --ps-muted: #805b36;
  --ps-accent: #cb700b;
  --ps-accent-2: #a9bd71;
  --ps-border: #ba8b57;
  --ps-focus: #895411;
  --ps-shadow: inset 0 2px 0 #fffdf1, inset 0 -3px 0 #d8ad73, 0 4px 12px #402b174d;
  --ps-button-shadow: inset 0 2px 0 #fffaf0, inset 0 -2px 0 #d5a36477, 0 2px 3px #79552855;
  --ps-radius: 22px;
  --ps-button-radius: 12px;
  --ps-font: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --ps-shell: linear-gradient(#fff5dd, #ffe1b2);
}
[data-player-skin="pixel_cyberpunk"] {
  --ps-bg: #12172e;
  --ps-panel: #1a203c;
  --ps-panel-2: #30315d;
  --ps-button: #242b4c;
  --ps-button-hover: #38416b;
  --ps-button-active: #43edee;
  --ps-button-active-text: #111c32;
  --ps-text: #f2f1ff;
  --ps-muted: #c4c6e8;
  --ps-accent: #43edee;
  --ps-accent-2: #b192ff;
  --ps-border: #8294d5;
  --ps-focus: #a2ffff;
  --ps-shadow: inset 0 2px 0 #43edee88, inset 0 -2px 0 #a47cff88, 0 0 0 2px #12172e, 0 5px 12px #080b2388;
  --ps-button-shadow: inset 0 2px 0 #788acc44, inset 0 -2px 0 #090e29, 0 2px 0 #090e29;
  --ps-radius: 4px;
  --ps-button-radius: 3px;
  --ps-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ps-shell: linear-gradient(135deg, #242c50, #151a32 70%);
  --ytfp-dock-radius: 4px;
}
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]):is(.ytfp-page-panel),
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) :is(.ytfp-bottom, .ytfp-title) {
  background: var(--ps-shell);
  outline: 1px solid var(--ps-border);
  box-shadow: var(--ps-shadow);
}
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) :is(.ytfp-nav-btn--main, .pip-preview-pause),
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]).ytfp-page-panel .ytfp-page-playback > .ytfp-btn:nth-child(2) {
  background: var(--ps-button-active);
  color: var(--ps-button-active-text);
  box-shadow: inset 0 2px 0 #ffffff70, inset 0 -2px 0 #0002, 0 2px 3px #0003;
}
[data-player-skin="retro_lavender"] .ytfp-title-text {
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(#d1e09f, #b7c77e);
  box-shadow: inset 0 1px 3px #33432e70;
  color: #2c3b23;
}
[data-player-skin="cozy_cartoon"] .ytfp-title {
  border-bottom: 3px solid #d4dda3;
}
[data-player-skin="pixel_cyberpunk"] .ytfp-title {
  border-bottom: 2px solid #43edee;
}
[data-player-skin="pixel_cyberpunk"] .ytfp-bottom {
  border-inline: 2px solid #a68bec;
  border-block: 2px solid #43edee;
}
/* New flexible panels use the same separate accessory dock as decorative skins. */
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom .ytfp-nav-side--end,
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom .ytfp-pinned-tray {
  display: contents;
}
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom .ytfp-pinned-tray[hidden] {
  display: none;
}
[data-player-skin][data-player-skin]:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-pinned-tools {
  position: absolute;
  inset: auto;
  top: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  border: 2px solid var(--ps-border);
  border-radius: var(--ps-radius);
  background: var(--ps-shell);
  box-shadow: var(--ps-shadow);
}
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom .ytfp-pinned-tools[hidden] {
  display: none;
}
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom .ytfp-pinned-tool {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  box-sizing: border-box;
  padding: 2px;
  font: 700 13px/1 Arial, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Reserve enough shell width for a single accessory row on normal windows. */
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom {
  width: min(380px, calc(100vw - 32px));
  max-width: 100%;
  box-sizing: border-box;
}

/* Keep equal spacers around transport after its accessory tray moves below. */
[data-player-skin][data-player-skin]:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom.ytfp-fixed-skin-ready .ytfp-nav-side--end {
  display: flex !important;
  min-width: 0;
  padding-left: 0;
}
:is([data-player-skin="retro_lavender"], [data-player-skin="cozy_cartoon"], [data-player-skin="pixel_cyberpunk"]) .ytfp-bottom .ytfp-row--nav > .ytfp-nav-side:first-child {
  flex-basis: 0;
}