/* Videokr player skin system */
.sf-player {
  /* the chrome is dark by design; auto dark mode must not repaint it */
  color-scheme: dark;
  --sf-accent: #ff6106;
  --sf-bg: #0b0d12;
  --sf-radius: 12px;
  /* The chrome is sized against the player's own width, not the window's: the
     editor preview, a small embed and the sticky mini player are all narrow
     inside a wide page, and desktop metrics look enormous in them. */
  container-type: inline-size;
  position: relative;
  width: 100%;
  background: var(--sf-bg);
  border-radius: var(--sf-radius);
  overflow: hidden;
  outline: none;
  font-family: var(--sf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: #fff;
}
.sf-fill { width: 100%; }
.sf-player.sf-locked {
  display: grid; place-items: center; min-height: 320px; padding: 10px;
  grid-template-rows: minmax(0, 1fr);
}

.sf-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.sf-media, .sf-media iframe, .sf-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.sf-media video { object-fit: contain; background: #000; }

/* Third-party frames are sealed behind a shield and given a frame far taller than the
   picture they carry. A linked source letterboxes its 16:9 picture inside whatever box
   it is given and anchors its own title, channel, watermark, suggestion grid and control
   bar to the top and bottom edges of that box — so a frame 240% of its width tall, pulled
   up by 38.28125% of its own height, lands the picture exactly in our 16:9 stage at full
   size while every one of those strips sits outside the crop. No scaling, so nothing is
   cut off the picture and nothing is blown up. */
.sf-media-yt { overflow: hidden; }
.sf-yt-crop {
  position: absolute; inset: 0; overflow: hidden;
}
.sf-yt-frame {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  padding-bottom: 240%; transform: translateY(-38.28125%);
}
.sf-yt-frame > div, .sf-yt-frame iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block;
}
.sf-yt-shield { position: absolute; inset: 0; z-index: 2; background: transparent; }
.sf-yt-cover {
  position: absolute; inset: 0; z-index: 1; display: none;
  background: #000 center / cover no-repeat;
}
.sf-media-yt.sf-yt-blank .sf-yt-cover { display: block; }

/* --sf-ui is the scale every piece of chrome is drawn at. It lives on the
   overlay rather than the player because a container query can style the
   container's descendants but never the container itself. */
.sf-overlay {
  position: absolute; inset: 0; display: block; z-index: 3; isolation: isolate;
  --sf-ui: 1;
  /* clicking the chrome must never leave the title or a timestamp selected */
  user-select: none; -webkit-user-select: none;
}
@container (max-width: 700px) { .sf-overlay { --sf-ui: .84; } }
@container (max-width: 520px) { .sf-overlay { --sf-ui: .72; } }
@container (max-width: 380px) { .sf-overlay { --sf-ui: .62; } }

.sf-titlebar {
  position: absolute; top: 0; left: 0; right: auto; box-sizing: border-box;
  width: calc(100% / var(--sf-ui, 1));
  transform: scale(var(--sf-ui, 1)); transform-origin: 0 0; padding: 12px 16px 28px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.sf-player.sf-active .sf-titlebar, .sf-player:not(.sf-playing) .sf-titlebar { opacity: 1; }
/* A card parked top-right shares the top edge with the title, so the title
   yields: it keeps only the room left of the card, and once the player is too
   narrow for both it steps out of the way entirely. The title is repeated on
   the page around the player; a timed offer is not. */
.sf-player.sf-cta-top-right .sf-titlebar {
  padding-right: calc(28px + 56px * var(--sf-ui, 1) + 320px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@container (max-width: 900px) {
  .sf-player.sf-cta-top-right.sf-active .sf-titlebar,
  .sf-player.sf-cta-top-right:not(.sf-playing) .sf-titlebar { opacity: 0; }
}
/* Branding has priority over a repeated title when both share the top edge. */
.sf-player.sf-logo-top-right .sf-titlebar {
  padding-right: 150px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@container (max-width: 520px) {
  .sf-player.sf-logo-top-right.sf-active .sf-titlebar,
  .sf-player.sf-logo-top-right:not(.sf-playing) .sf-titlebar { opacity: 0; }
}

.sf-logo { position: absolute; z-index: 4; opacity: .9; transform: scale(var(--sf-ui, 1)); }
.sf-pos-top-right { transform-origin: 100% 0; }
.sf-pos-top-left { transform-origin: 0 0; }
.sf-pos-bottom-right { transform-origin: 100% 100%; }
.sf-pos-bottom-left { transform-origin: 0 100%; }
.sf-logo img { max-height: 34px; max-width: 130px; display: block; }
.sf-pos-top-right { top: 12px; right: 12px; }
.sf-pos-top-left { top: 12px; left: 12px; }
.sf-pos-bottom-right { bottom: 64px; right: 12px; }
.sf-pos-bottom-left { bottom: 64px; left: 12px; }
/* Attribution rides at the end of the control bar, the way the reference player
   parks its own logo there. */
.sf-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 6px;
  border-radius: 3px; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; line-height: 1; opacity: .85; transition: opacity .3s ease, background .3s ease;
}
.sf-badge img { width: 14px; height: 14px; display: block; }
.sf-badge:hover { opacity: 1; background: var(--sf-accent); color: var(--sf-on-accent, #fff); }

/* Control layer. Metrics, colours and motion follow the reference player the product
   is measured against: 10px control spacing, 18px icons, 3px control radius, 5px range
   track with a 13px thumb, translucent-white menus and tooltips. */
.sf-bigplay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--sf-ui, 1));
  border: 0; border-radius: 100%; cursor: pointer; z-index: 3; padding: 15px;
  background: var(--sf-accent); color: var(--sf-on-accent, #fff); opacity: .9; transition: .3s;
  display: grid; place-items: center;
}
.sf-bigplay svg { width: 18px; height: 18px; fill: currentColor; display: block; position: relative; left: 2px; }
.sf-bigplay:hover, .sf-bigplay:focus { opacity: 1; }
.sf-player.sf-playing .sf-bigplay { opacity: 0; visibility: hidden; }

.sf-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; text-align: center;
  padding: 5px; padding-top: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
  color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease-in-out, transform .4s ease-in-out;
  /* Scaled rather than re-measured, so a skin's proportions hold at any size.
     The bar is widened by the same factor first so it still spans the picture,
     less the inset a floating-slab skin holds off the picture edges. */
  box-sizing: border-box;
  right: auto;
  --sf-inset: 0px;

  width: calc((100% - 2 * var(--sf-inset)) / var(--sf-ui, 1));
  margin: var(--sf-inset);
  transform-origin: 0 100%;
  transform: translateY(100%) scale(var(--sf-ui, 1));
}
@container (min-width: 480px) {
  .sf-controls { padding: 10px; padding-top: 35px; }
}
.sf-player.sf-active .sf-controls, .sf-player:not(.sf-playing) .sf-controls {
  opacity: 1; transform: scale(var(--sf-ui, 1)); pointer-events: auto;
}
.sf-controls > * { margin-left: 2.5px; flex-shrink: 0; }
.sf-controls > :first-child { margin-left: 0; }

.sf-btn {
  background: transparent; border: 0; border-radius: 3px; color: inherit; cursor: pointer;
  flex-shrink: 0; overflow: visible; padding: 7px; position: relative; transition: all .3s ease;
  display: block; line-height: 0;
}
.sf-btn svg { fill: currentColor; display: block; height: 18px; width: 18px; pointer-events: none; }
.sf-btn:hover, .sf-btn:focus-visible, .sf-btn[aria-expanded="true"] {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff); outline: 0;
}
.sf-btn.sf-off svg { fill-opacity: .5; }

/* Hover labels, white on dark like the reference player. The player clips its own
   overflow, so a label that would hang past an edge is nudged back inside by
   --sf-tip-dx, which the script measures per button. */
.sf-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; margin-bottom: 10px;
  padding: 5px 7.5px; border-radius: 3px; background: rgba(255,255,255,.9); color: #4a5464;
  font-size: 13px; line-height: 1.3; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.15);
  opacity: 0; pointer-events: none;
  transform: translate(calc(-50% + var(--sf-tip-dx, 0px)), 10px) scale(.8);
  transform-origin: 50% 100%; transition: transform .2s ease .1s, opacity .2s ease .1s; z-index: 3;
}
.sf-btn[data-tip]:hover::after, .sf-btn[data-tip]:focus-visible::after {
  opacity: 1; transform: translate(calc(-50% + var(--sf-tip-dx, 0px)), 0) scale(1);
}
.sf-btn[aria-expanded="true"][data-tip]::after { display: none; }

.sf-progress-wrap { position: relative; flex: 1 1 auto; min-width: 60px; padding-left: 2.5px; }
.sf-progress {
  position: relative; height: 19px; display: flex; align-items: center; cursor: pointer;
  color: var(--sf-accent);
}
.sf-progress-rail {
  position: relative; width: 100%; height: 5px; border-radius: 2.5px;
  background: rgba(255,255,255,.25); overflow: visible;
}
.sf-buffer { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,.25); border-radius: 2.5px; }
.sf-played { position: absolute; inset: 0 auto 0 0; width: 0; background: currentColor; border-radius: 2.5px; }
.sf-handle {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 100%;
  background: #fff; transform: translate(-50%, -50%);
  box-shadow: 0 1px 1px rgba(35,40,47,.15), 0 0 0 1px rgba(35,40,47,.2);
  transition: box-shadow .2s ease;
}
.sf-progress:active .sf-handle { box-shadow: 0 1px 1px rgba(35,40,47,.15), 0 0 0 1px rgba(35,40,47,.2), 0 0 0 3px rgba(255,255,255,.5); }
.sf-markers { position: absolute; inset: 0; pointer-events: none; }
.sf-marker { position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; color: #fff; opacity: .8; }
.sf-tooltip {
  position: absolute; bottom: 100%; margin-bottom: 10px; transform: translate(-50%, 10px) scale(.8);
  transform-origin: 50% 100%; padding: 5px 7.5px; border-radius: 3px;
  background: rgba(255,255,255,.9); color: #4a5464; box-shadow: 0 1px 2px rgba(0,0,0,.15);
  font-size: 13px; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: transform .2s ease .1s, opacity .2s ease .1s; z-index: 3;
}
.sf-tooltip::before {
  content: ""; position: absolute; left: calc(50% + var(--sf-arrow-dx, 0px)); bottom: -4px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,.9);
}
.sf-tooltip.sf-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

.sf-time { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 5px; }
.sf-time + .sf-time { padding-left: 0; }
.sf-time + .sf-time::before { content: "⁄"; margin-right: 5px; }

.sf-volume { display: flex; align-items: center; position: relative; width: 20%; min-width: 80px; max-width: 110px; }
.sf-volume input[type="range"] {
  -webkit-appearance: none; appearance: none; background: transparent; border: 0;
  display: block; width: 100%; height: 19px; margin: 0 5px; padding: 0;
  color: var(--sf-accent); accent-color: var(--sf-accent); position: relative; z-index: 2;
}
.sf-volume input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border: 0; border-radius: 2.5px; background: rgba(255,255,255,.25);
}
.sf-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -4px;
  border: 0; border-radius: 100%; background: #fff;
  box-shadow: 0 1px 1px rgba(35,40,47,.15), 0 0 0 1px rgba(35,40,47,.2);
}
.sf-volume input[type="range"]::-moz-range-track { height: 5px; border: 0; border-radius: 2.5px; background: rgba(255,255,255,.25); }
.sf-volume input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 100%; background: #fff;
  box-shadow: 0 1px 1px rgba(35,40,47,.15), 0 0 0 1px rgba(35,40,47,.2);
}

/* Narrow embeds: drop the least essential controls before things collide. Declared
   after the base rules so the equal-specificity overrides below actually win. */
@container (max-width: 420px) {
  .sf-time { font-size: 11px; padding: 0 2px; }
  .sf-volume { min-width: 0; width: auto; max-width: none; }
  .sf-volume input[type="range"] { display: none; }
  .sf-pip, .sf-rewind, .sf-controls > .sf-forward { display: none; }
  .sf-badge span { display: none; }
}

.sf-menu { display: flex; position: relative; }
.sf-menu .sf-btn svg { transition: transform .3s ease; }
.sf-menu.sf-open .sf-btn svg { transform: rotate(90deg); }
.sf-menu-list {
  position: absolute; bottom: 100%; right: -3px; margin-bottom: 10px; display: none;
  min-width: 160px; max-height: 260px; overflow: auto;
  background: rgba(255,255,255,.9); color: #4a5464; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15); padding: 7px; text-align: left;
  white-space: nowrap; z-index: 3; animation: sf-popup .2s ease;
}
/* the pointer hangs off .sf-menu, not the scrollable list, so it adds no scroll height */
.sf-menu.sf-open::after {
  content: ""; position: absolute; bottom: calc(100% + 2px); right: 11px; width: 0; height: 0;
  border: 4px solid transparent; border-top-color: rgba(255,255,255,.9);
}
.sf-menu.sf-open .sf-menu-list { display: block; }
@keyframes sf-popup {
  from { opacity: .5; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.sf-menu-item {
  display: flex; align-items: center; width: 100%; text-align: left; background: transparent;
  border: 0; border-radius: 3px; color: #4a5464; cursor: pointer; user-select: none;
  padding: 4.66667px 10.5px; font-size: 13px; margin-top: 2px; position: relative;
}
.sf-menu-item:first-child { margin-top: 0; }
.sf-menu-item:hover { background: var(--sf-accent); color: var(--sf-on-accent, #fff); }
/* radio rows, forward rows and the back row of the settings panel */
.sf-menu-item.sf-radio { padding-left: 7px; }
.sf-menu-item.sf-radio::before {
  content: ""; display: block; flex-shrink: 0; width: 16px; height: 16px; border-radius: 100%;
  background: rgba(0,0,0,.1); margin-right: 10px; transition: all .3s ease;
}
.sf-menu-item.sf-radio[aria-checked="true"]::before { background: var(--sf-accent); }
.sf-menu-item.sf-radio::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; border-radius: 100%;
  background: #fff; opacity: 0; transform: translateY(-50%) scale(0);
  transition: transform .3s ease, opacity .3s ease;
}
.sf-menu-item.sf-radio[aria-checked="true"]::after { opacity: 1; transform: translateY(-50%) scale(1); }
.sf-menu-item.sf-forward { padding-right: 28px; }
.sf-menu-item.sf-forward::after {
  content: ""; position: absolute; right: 6.5px; top: 50%; transform: translateY(-50%);
  border: 4px solid transparent; border-left-color: #728197;
}
.sf-menu-item.sf-forward:hover::after { border-left-color: currentColor; }
.sf-menu-item.sf-back {
  padding-left: 28px; margin: 7px 7px 3.5px; width: calc(100% - 14px); position: relative;
}
.sf-menu-item.sf-back::after {
  content: ""; position: absolute; left: 6.5px; top: 50%; transform: translateY(-50%);
  border: 4px solid transparent; border-right-color: #728197;
}
.sf-menu-item.sf-back:hover::after { border-right-color: currentColor; }
.sf-menu-item.sf-back::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1px; margin-top: 3.5px;
  background: #dcdfe5; box-shadow: 0 1px 0 #fff;
}
.sf-menu-value { display: flex; align-items: center; margin-left: auto; padding-left: 24.5px; overflow: hidden; pointer-events: none; }

/* CTAs */
.sf-cta-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.sf-cta {
  position: absolute; pointer-events: auto; max-width: 320px; padding: 14px 34px 14px 14px;
  background: rgba(10,12,18,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  backdrop-filter: blur(6px); box-shadow: 0 12px 32px rgba(0,0,0,.45); box-sizing: border-box;
}
/* The corner rail (captions, pip, share) lives in the top-right, so a card parked
   there is inset past it: a timed offer must not take the controls with it. */
.sf-cta.sf-pos-top-right {
  right: calc(12px + 56px * var(--sf-ui, 1));
  max-width: min(320px, calc(100% - 24px - 56px * var(--sf-ui, 1)));
}
.sf-cta.sf-cta-banner {
  top: auto; left: 0; right: 0; bottom: 56px; height: auto;
  max-width: none; border-radius: 0; text-align: center;
}
.sf-cta-headline { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.sf-cta-body { font-size: 13px; opacity: .85; margin-bottom: 10px; }
.sf-cta-btn {
  display: inline-block; background: var(--sf-accent); color: var(--sf-on-accent, #fff); text-decoration: none;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  pointer-events: auto; box-sizing: border-box;
}
.sf-cta-btn.sf-btnstyle-solid { background: var(--sf-accent); color: var(--sf-on-accent, #fff); border-radius: 8px; }
.sf-cta-btn.sf-btnstyle-pill { background: var(--sf-accent); color: var(--sf-on-accent, #fff); border-radius: 999px; padding: 10px 22px; font-weight: 700; }
.sf-cta-btn.sf-btnstyle-chunky {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff); border-radius: 999px; padding: 13px 28px;
  font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.sf-cta-btn.sf-btnstyle-raised {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff); border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0,0,0,.38);
}
.sf-cta-btn.sf-btnstyle-raised:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.38); }
.sf-cta-btn.sf-btnstyle-framed {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff); border-radius: 14px; padding: 10px 20px;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--sf-accent);
}
.sf-cta-btn.sf-btnstyle-arrow {
  display: inline-flex; align-items: center; gap: 8px; background: var(--sf-accent); color: var(--sf-on-accent, #fff); border-radius: 8px;
}
.sf-btn-arrow { display: inline-block; line-height: 1; }
.sf-cta-btn.sf-btnstyle-gradient {
  background: linear-gradient(135deg, var(--sf-accent), #7c3aed); color: var(--sf-on-accent, #fff);
  border-radius: 999px; font-weight: 700;
}
.sf-cta-btn.sf-btnstyle-glow {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff); border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sf-accent) 45%, transparent);
}
.sf-cta-btn.sf-btnstyle-ghost {
  background: transparent; border: 2px solid var(--sf-accent); color: #fff;
}
.sf-cta-btn.sf-btnstyle-ghost:hover,
.sf-cta-btn.sf-btnstyle-ghost:focus-visible {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff);
}
.sf-cta-btn.sf-btnstyle-white {
  background: #fff; color: #111827; border-radius: 999px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--sf-accent);
}
.sf-cta-close {
  position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; opacity: .6;
}
.sf-cta-close:hover { opacity: 1; }

.sf-unmute {
  position: absolute; top: 50%; left: 50%; z-index: 2; display: none;
  transform: translate(-50%, -50%); flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px;
  background: rgba(18,16,14,.62); backdrop-filter: blur(10px); color: #fff;
  cursor: pointer; font: inherit; text-align: center; white-space: nowrap; pointer-events: auto;
}
.sf-unmute.sf-visible { display: flex; }
.sf-unmute:hover, .sf-unmute:focus-visible { background: rgba(18,16,14,.76); outline: 0; }
.sf-player.sf-short .sf-unmute { top: auto; bottom: 28px; }
.sf-unmute-bars {
  display: flex; gap: 5px; align-items: flex-end; height: 22px;
}
.sf-unmute-bars i {
  display: block; width: 8px; height: 9px; background: var(--sf-accent); border-radius: 2px;
  animation: sf-eq .9s ease-in-out infinite alternate;
}
.sf-unmute-bars i:nth-child(2) { height: 15px; animation-delay: -.35s; }
.sf-unmute-bars i:nth-child(3) { height: 22px; animation-delay: -.15s; }
.sf-unmute-bars i:nth-child(4) { height: 12px; animation-delay: -.55s; }
@keyframes sf-eq {
  from { height: 7px; }
  to { height: 22px; }
}
.sf-unmute-kicker {
  color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .14em; line-height: 1;
  text-transform: uppercase;
}
.sf-unmute-label { font-size: 24px; font-weight: 800; line-height: 1; text-transform: uppercase; }

.sf-cta.sf-cta-style-solid {
  background: var(--sf-accent); border: 0; color: var(--sf-on-accent, #fff); border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.sf-cta-style-solid .sf-cta-btn {
  background: var(--sf-on-accent, #fff); color: var(--sf-accent);
}
.sf-cta-style-solid .sf-cta-close { color: var(--sf-on-accent, #fff); }

.sf-cta.sf-cta-style-minimal {
  background: transparent; border: 0; box-shadow: none; padding: 0; color: #fff;
}
.sf-cta-style-minimal .sf-cta-headline,
.sf-cta-style-minimal .sf-cta-body { text-shadow: 0 1px 5px rgba(0,0,0,.8); }
.sf-cta-style-minimal .sf-cta-btn { margin-top: 8px; }

.sf-cta.sf-cta-style-outline {
  background: transparent; border: 2px solid var(--sf-accent); color: #fff;
}
.sf-cta-style-outline .sf-cta-btn {
  background: transparent; border: 1px solid var(--sf-accent); color: #fff;
}
.sf-cta-style-outline .sf-cta-btn:hover { background: var(--sf-accent); color: var(--sf-on-accent, #fff); }

.sf-cta.sf-cta-style-glass {
  background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.06); color: #111827;
  backdrop-filter: blur(10px);
}
.sf-cta-style-glass .sf-cta-body { color: #4b5563; opacity: 1; }
.sf-cta-style-glass .sf-cta-btn { background: var(--sf-accent); color: var(--sf-on-accent, #fff); }
.sf-cta-style-glass .sf-cta-btn.sf-btnstyle-ghost {
  background: transparent; color: #111827;
}
.sf-cta-style-glass .sf-cta-btn.sf-btnstyle-ghost:hover,
.sf-cta-style-glass .sf-cta-btn.sf-btnstyle-ghost:focus-visible {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff);
}
.sf-cta-style-glass .sf-cta-close { color: #111827; }

.sf-cta.sf-cta-style-bar {
  left: 0; right: 0; top: auto; bottom: 56px; max-width: none; border-radius: 0; border: 0;
  border-top: 1px solid var(--sf-accent); display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: rgba(10,12,18,.92); text-align: left;
}
.sf-cta-style-bar .sf-cta-headline { margin: 0; flex: 0 1 auto; }
.sf-cta-style-bar .sf-cta-body { margin: 0; flex: 1 1 auto; min-width: 0; }
.sf-cta-style-bar .sf-cta-btn { flex: 0 0 auto; margin-left: auto; }

.sf-cta.sf-cta-style-ribbon {
  top: 0; left: 0; right: 0; bottom: auto; max-width: none; border-radius: 0; border: 0;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--sf-accent);

  background: color-mix(in srgb, var(--sf-accent) 22%, #11131a);
}
.sf-cta-style-ribbon .sf-cta-headline {
  min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-cta-style-ribbon .sf-cta-body { display: none; }
.sf-cta-style-ribbon .sf-cta-btn { margin-left: auto; padding: 5px 10px; white-space: nowrap; }

.sf-cta.sf-cta-style-toast {
  max-width: min(320px, calc(100% - 24px)); border: 0; border-left: 4px solid var(--sf-accent);
  border-radius: 10px; background: rgba(17,19,26,.95); box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 11px 32px 11px 12px;
}

.sf-cta.sf-cta-style-spotlight {
  top: auto; left: 50%; right: auto; bottom: 56px; max-width: min(380px, calc(100% - 24px));
  transform: translateX(-50%); padding: 20px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(20,22,32,.96), rgba(10,12,18,.96));
  box-shadow: 0 0 0 1px var(--sf-accent), 0 18px 50px rgba(0,0,0,.55);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sf-accent) 45%, transparent), 0 18px 50px rgba(0,0,0,.55);
}
.sf-cta-style-spotlight .sf-cta-headline { font-size: 16px; }

.sf-cta.sf-cta-style-gradient {
  max-width: min(320px, calc(100% - 24px)); border: 0; border-radius: 999px;
  padding: 9px 32px 9px 14px; background: var(--sf-accent);

  background: linear-gradient(90deg, var(--sf-accent), color-mix(in srgb, var(--sf-accent) 55%, #fff));
  color: var(--sf-on-accent, #fff);
}
.sf-cta-style-gradient .sf-cta-body { margin-bottom: 6px; }
.sf-cta-style-gradient .sf-cta-btn {
  background: #fff; color: #111827; border-radius: 999px; padding: 7px 13px;
}
.sf-cta-style-gradient .sf-cta-close { color: var(--sf-on-accent, #fff); }

/* Short players cannot spare the title-bar clearance used by full-size overlays. */
.sf-player.sf-short .sf-cta {
  bottom: 52px;
  max-width: min(240px, calc(100% - 24px));
  max-height: calc(100% - 52px);
  padding: 10px 28px 10px 12px;
}
.sf-player.sf-short .sf-cta.sf-pos-top-right,
.sf-player.sf-short .sf-cta.sf-pos-top-left { bottom: auto; }
.sf-player.sf-short .sf-cta-headline { margin-bottom: 3px; font-size: 13px; }
.sf-player.sf-short .sf-cta-body { margin-bottom: 6px; font-size: 11px; }
.sf-player.sf-short .sf-cta-btn { min-height: 28px; padding: 6px 10px; font-size: 11px; }
.sf-player.sf-short .sf-cta.sf-cta-banner,
.sf-player.sf-short .sf-cta.sf-cta-style-bar {
  bottom: 56px;
  max-width: none;
  max-height: none;
}
.sf-player.sf-short .sf-cta.sf-cta-banner { padding: 14px 34px; }
.sf-player.sf-short .sf-cta.sf-cta-style-bar { padding: 10px 14px; }
.sf-player.sf-short .sf-cta.sf-cta-style-ribbon {
  top: 0;
  bottom: auto;
  max-width: none;
  max-height: none;
  padding: 8px 12px;
}
.sf-player.sf-short .sf-cta.sf-cta-style-spotlight {
  bottom: 56px;
  max-width: min(380px, calc(100% - 24px));
  max-height: none;
  padding: 20px;
}
@container (max-width: 380px) {
  .sf-player.sf-short .sf-cta.sf-cta-style-card {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .sf-player.sf-short .sf-cta.sf-cta-style-card .sf-cta-body { margin-bottom: 4px; }
}

@container (max-width: 420px) {
  .sf-cta-btn.sf-btnstyle-chunky { font-size: 14px; padding: 10px 18px; }
  .sf-unmute { padding: 12px 20px; border-radius: 14px; gap: 5px; }
  .sf-unmute-label { font-size: 18px; }
  .sf-unmute-kicker { font-size: 11px; }
  .sf-unmute-bars { gap: 4px; height: 18px; }
  .sf-unmute-bars i { width: 6px; }
  .sf-unmute-bars i:nth-child(3) { height: 18px; }
}

@container (max-width: 480px) {
  .sf-cta.sf-cta-style-bar { flex-wrap: wrap; gap: 6px 10px; }
  .sf-cta-style-bar .sf-cta-headline,
  .sf-cta-style-bar .sf-cta-body { flex: 1 1 100%; }
  .sf-cta-style-bar .sf-cta-btn { margin-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes sf-cta-toast-in {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .sf-cta-style-toast { animation: sf-cta-toast-in .35s ease-out both; }

  @keyframes sf-cta-gradient-pulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.24); }
    50% { box-shadow: 0 10px 28px color-mix(in srgb, var(--sf-accent) 42%, transparent); }
  }
  .sf-cta-style-gradient { animation: sf-cta-gradient-pulse 2.4s ease-in-out infinite; }
  @keyframes sf-btn-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sf-accent) 45%, transparent); }
  }
  .sf-btnstyle-glow { animation: sf-btn-glow-pulse 2.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-unmute-bars i {
    animation: none;
    height: 20px;
  }
}

.sf-gate, .sf-endscreen {
  position: absolute; inset: 0; pointer-events: auto; z-index: 7;
  display: grid; place-items: center; background: rgba(6,8,12,.88); backdrop-filter: blur(4px);
  /* A fixed row, otherwise the track grows to the card and max-height on it means nothing. */
  padding: 10px; grid-template-rows: minmax(0, 1fr);
}
/* The end screen and the related grid are suggestions, not gates: they sit under
   the control bar so a viewer can scrub back out of them with the mouse. */
.sf-end-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* Cards taller than a short player would lose their bottom row — the email field or
   the submit button — to the player's own clipping, so they scroll inside it. */
.sf-gate-card, .sf-endscreen-card, .sf-lock-card {
  width: min(420px, 88%); max-height: 100%; overflow: auto; overscroll-behavior: contain;
  box-sizing: border-box;
  background: #12141c; border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 22px; text-align: center;
}
.sf-gate-card h3, .sf-endscreen-card h3, .sf-lock-card h3 { margin: 0 0 6px; font-size: 18px; }
.sf-gate-card p, .sf-endscreen-card p, .sf-lock-card p { margin: 0 0 14px; font-size: 13px; opacity: .8; }
.sf-gate-form, .sf-lock-card form { display: grid; gap: 8px; }
.sf-gate-form input, .sf-lock-card input {
  width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff; font-size: 14px; box-sizing: border-box;
}
.sf-gate-submit, .sf-lock-card button[type="submit"] {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff); border: 0; padding: 11px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.sf-gate-skip, .sf-endscreen-replay {
  margin-top: 10px; background: transparent; border: 0; color: #9fb0d0; font-size: 12px;
  cursor: pointer; text-decoration: underline;
}
.sf-gate-error { color: #ff8a8a; font-size: 12px; min-height: 16px; }

/* Form and end-screen surfaces share the stored CTA style field, but use their
   own vocabulary so a presentation style never changes the gate's layout. */
.sf-gate.sf-gate-style-light,
.sf-endscreen.sf-endscreen-style-light { background: rgba(6,8,12,.72); }
.sf-gate-style-light .sf-gate-card,
.sf-endscreen-style-light .sf-endscreen-card {
  background: #fff; border-color: #e5e7eb; color: #0f172a;
}
.sf-gate-style-light .sf-gate-card p,
.sf-endscreen-style-light .sf-endscreen-card p { color: #475569; opacity: 1; }
.sf-gate-style-light .sf-gate-form input,
.sf-endscreen-style-light .sf-gate-form input {
  border-color: #d1d5db; background: #f8fafc; color: #0f172a;
}
.sf-gate-style-light .sf-gate-skip,
.sf-endscreen-style-light .sf-endscreen-replay { color: #64748b; }
.sf-gate-style-light .sf-gate-submit.sf-btnstyle-ghost,
.sf-endscreen-style-light .sf-gate-submit.sf-btnstyle-ghost {
  background: transparent; border-color: #111827; color: #111827;
}

.sf-gate-style-solid .sf-gate-card,
.sf-endscreen-style-solid .sf-endscreen-card {
  background: var(--sf-accent); border-color: transparent; color: var(--sf-on-accent, #fff);
}
.sf-gate-style-solid .sf-gate-card p,
.sf-endscreen-style-solid .sf-endscreen-card p { color: var(--sf-on-accent, #fff); opacity: .9; }
.sf-gate-style-solid .sf-gate-form input,
.sf-endscreen-style-solid .sf-gate-form input {
  border-color: #d1d5db; background: #fff; color: #111827;
}
.sf-gate-style-solid .sf-gate-form input::placeholder,
.sf-endscreen-style-solid .sf-gate-form input::placeholder { color: #475569; }
.sf-gate-style-solid .sf-gate-submit,
.sf-endscreen-style-solid .sf-gate-submit { background: #fff; color: #111827; }
.sf-endscreen-style-solid .sf-cta-btn { background: #fff; color: #111827; }
.sf-gate-style-solid .sf-gate-skip,
.sf-endscreen-style-solid .sf-endscreen-replay { color: var(--sf-on-accent, #fff); }

.sf-gate-style-outline .sf-gate-card,
.sf-endscreen-style-outline .sf-endscreen-card {
  background: transparent; border: 2px solid var(--sf-accent); color: #fff;
}
.sf-gate-style-outline .sf-gate-form input,
.sf-endscreen-style-outline .sf-gate-form input {
  border-color: var(--sf-accent); background: transparent; color: #fff;
}
.sf-gate-style-outline .sf-gate-form input::placeholder { color: rgba(255,255,255,.72); }
.sf-gate-style-outline .sf-gate-submit,
.sf-endscreen-style-outline .sf-gate-submit {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff);
}
.sf-endscreen-style-outline .sf-cta-btn { background: transparent; border: 1px solid var(--sf-accent); color: var(--sf-accent); }

.sf-gate-style-glass .sf-gate-card,
.sf-endscreen-style-glass .sf-endscreen-card {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(16px); color: #fff;
}
.sf-gate-style-glass .sf-gate-form input,
.sf-endscreen-style-glass .sf-gate-form input {
  border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff;
}
.sf-gate-style-glass .sf-gate-form input::placeholder { color: rgba(255,255,255,.75); }

.sf-gate.sf-gate-style-sheet { align-items: end; }
.sf-gate-style-sheet .sf-gate-card,
.sf-endscreen-style-sheet .sf-endscreen-card {
  width: 100%; max-width: none; border-radius: 16px 16px 0 0;
  background: #12141c; text-align: left; align-self: end;
}
.sf-gate-style-sheet .sf-gate-card h3,
.sf-endscreen-style-sheet .sf-endscreen-card h3 { text-align: left; }

.sf-gate-style-spotlight .sf-gate-card,
.sf-endscreen-style-spotlight .sf-endscreen-card {
  background: #1a1d2a; color: #fff;

  background: linear-gradient(150deg, #1a1d2a, #0a0c12);
  box-shadow: 0 0 0 1px var(--sf-accent), 0 20px 60px rgba(0,0,0,.6);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sf-accent) 45%, transparent), 0 20px 60px rgba(0,0,0,.6);
}
.sf-gate-style-spotlight .sf-gate-card h3,
.sf-endscreen-style-spotlight .sf-endscreen-card h3 { font-size: 20px; }

.sf-gate.sf-gate-style-fullbleed { background: rgba(0,0,0,.62); place-items: center; }
.sf-gate-style-fullbleed .sf-gate-card,
.sf-endscreen-style-fullbleed .sf-endscreen-card {
  background: transparent; border: 0; box-shadow: none; color: #fff;
  width: min(460px, 92%); padding: 0; text-align: center;
}
.sf-gate-style-fullbleed .sf-gate-card h3,
.sf-endscreen-style-fullbleed .sf-endscreen-card h3 {
  max-width: 20ch; margin-left: auto; margin-right: auto; color: #fff;
  font-size: 20px; font-weight: 600; line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.sf-gate-style-fullbleed .sf-gate-form,
.sf-endscreen-style-fullbleed .sf-gate-form { display: flex; gap: 0; align-items: stretch; }
.sf-gate-style-fullbleed .sf-gate-form input,
.sf-endscreen-style-fullbleed .sf-gate-form input {
  height: 40px; min-width: 0; flex: 1 1 auto; border-radius: 6px 0 0 6px;
  background: #fff; color: #111827; border: 0;
}
.sf-gate-style-fullbleed .sf-gate-submit,
.sf-endscreen-style-fullbleed .sf-gate-submit {
  height: 40px; border-radius: 0 6px 6px 0; flex: 0 0 auto;
}
.sf-gate-style-fullbleed .sf-gate-skip { display: block; margin: 12px auto 0; color: #fff; }
.sf-gate-style-fullbleed .sf-gate-error,
.sf-endscreen-style-fullbleed .sf-gate-error { color: #ffb4b4; }

.sf-gate-style-split .sf-gate-card,
.sf-endscreen-style-split .sf-endscreen-card {
  background: #12141c; border-left: 6px solid var(--sf-accent);
  border-radius: 4px 14px 14px 4px; color: #fff; text-align: left;
}

.sf-gate-style-gradient .sf-gate-card,
.sf-endscreen-style-gradient .sf-endscreen-card {
  background: #10131b; color: #fff;

  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sf-accent) 26%, #10131b),
    #0b0e14
  );
}
.sf-gate-style-gradient .sf-gate-form input,
.sf-endscreen-style-gradient .sf-gate-form input {
  border-radius: 999px; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff;
}
.sf-gate-style-gradient .sf-gate-form input::placeholder,
.sf-endscreen-style-gradient .sf-gate-form input::placeholder { color: rgba(255,255,255,.72); }
.sf-gate-style-gradient .sf-gate-submit,
.sf-endscreen-style-gradient .sf-gate-submit { border-radius: 999px; }
.sf-endscreen-style-gradient .sf-cta-btn { border-radius: 999px; }
/* A small embed is barely taller than these cards, so they are tightened to fit
   rather than left scrolling for their own submit button. */
@container (max-width: 420px) {
  .sf-gate-card, .sf-endscreen-card, .sf-lock-card { padding: 12px; }
  .sf-gate-card h3, .sf-endscreen-card h3, .sf-lock-card h3 { font-size: 15px; }
  .sf-gate-card p, .sf-endscreen-card p, .sf-lock-card p { font-size: 12px; margin-bottom: 8px; }
  /* The field and its button share a row here: stacked, they push the button out of
     a 211px-tall embed, and the empty error line no longer holds space either. */
  .sf-gate-form, .sf-lock-card form { gap: 6px; grid-template-columns: minmax(0, 1fr) auto; }
  .sf-gate-error { min-height: 0; }
  .sf-gate-form input, .sf-lock-card input { padding: 8px 10px; font-size: 13px; }
  .sf-gate-submit, .sf-lock-card button[type="submit"] { padding: 9px 12px; font-size: 13px; }
  .sf-gate-skip, .sf-endscreen-replay { margin-top: 6px; }
  .sf-gate-style-fullbleed .sf-gate-form,
  .sf-endscreen-style-fullbleed .sf-gate-form { flex-direction: column; }
  .sf-gate-style-fullbleed .sf-gate-form input,
  .sf-endscreen-style-fullbleed .sf-gate-form input,
  .sf-gate-style-fullbleed .sf-gate-submit,
  .sf-endscreen-style-fullbleed .sf-gate-submit { width: 100%; border-radius: 6px; }
}

/* Height cannot be asked about here (the container is inline-size), so the player
   reports a short picture as a class: the card then keeps clear of the control bar
   and drops its description rather than hiding its own last control behind the bar. */
.sf-player.sf-short .sf-gate,
.sf-player.sf-short .sf-endscreen { padding-bottom: 50px; }
.sf-player.sf-short .sf-share-sheet { padding: 6px; }
.sf-player.sf-short .sf-share-card { padding: 10px 10px 8px; }
.sf-player.sf-short .sf-share-row {
  flex-wrap: nowrap; overflow-x: auto; gap: 5px; margin-bottom: 6px;
}
.sf-player.sf-short .sf-share-target { flex: 0 0 auto; }
.sf-player.sf-short .sf-gate-card p,
.sf-player.sf-short .sf-endscreen-card p { display: none; }
.sf-player.sf-short .sf-share-card h4 { font-size: 13px; margin-bottom: 6px; }
.sf-player.sf-short .sf-share-target { padding: 4px 7px; font-size: 10px; }
.sf-player.sf-short .sf-share-copy {
  display: inline-block; width: calc(50% - 3px); margin-top: 4px; padding: 6px 9px; font-size: 11px;
}

/* share sheet */
.sf-share-sheet {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center;
  background: rgba(6,8,12,.86); backdrop-filter: blur(4px);
  padding: 10px; grid-template-rows: minmax(0, 1fr);
}
/* A short player is shorter than the card, and the player clips its overflow, so the
   card is kept inside it and scrolls rather than losing its bottom button. */
.sf-share-card {
  position: relative; width: min(420px, 88%); max-height: 100%; overflow: auto; box-sizing: border-box;
  background: #12141c; overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px; text-align: center;
}
.sf-share-card h4 { margin: 0 0 12px; font-size: 15px; }
.sf-share-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.sf-share-target {
  padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  color: #fff; text-decoration: none; font-size: 12px;
}
.sf-share-target:hover { background: rgba(255,255,255,.1); }
.sf-share-copy {
  display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff;
  font-size: 13px; cursor: pointer;
}
/* A small embed has barely more height than the card needs, so it is tightened
   rather than left to scroll for its last button. */
@container (max-width: 420px) {
  .sf-share-card { padding: 12px; }
  .sf-share-card h4 { margin-bottom: 8px; }
  .sf-share-row { gap: 6px; margin-bottom: 8px; }
  .sf-share-target { padding: 5px 9px; font-size: 11px; }
  .sf-share-copy { margin-top: 6px; padding: 8px 10px; font-size: 12px; }
}
.sf-share-close {
  position: absolute; top: 6px; right: 10px; background: transparent; border: 0;
  color: #9fb0d0; font-size: 20px; line-height: 1; cursor: pointer;
}

/* end-of-playback suggestions from the owner's own library */
.sf-related {
  position: absolute; inset: 0; pointer-events: auto; z-index: 7; overflow: auto;
  background: rgba(6,8,12,.9); backdrop-filter: blur(4px); padding: 18px; text-align: center;
}
.sf-related-head { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 12px; }
.sf-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sf-related-item { color: #fff; text-decoration: none; font-size: 12px; display: block; }
.sf-related-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; }
.sf-related-title { display: block; margin-top: 6px; line-height: 1.3; }
.sf-related-replay {
  margin-top: 14px; background: transparent; border: 0; color: #9fb0d0; font-size: 12px;
  cursor: pointer; text-decoration: underline;
}
@container (max-width: 520px) {
  .sf-related-grid { grid-template-columns: repeat(2, 1fr); }
}
.sf-error { padding: 24px; font-size: 14px; text-align: center; }

/* sticky mini player on scroll */
.sf-player.sf-sticky {
  position: fixed; right: 20px; bottom: 20px; width: min(360px, 80vw); z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------- skins ---
   Five shipped presets. Each one only restyles the single control bar the
   player already builds, so every skin keeps every feature — a customer
   switching skins never loses captions, chapters, quality or analytics. */

/* "videokr" — the default: a square orange transport button on the left, a
   thick pill progress bar, a stacked rail of square buttons on the right and
   the wordmark parked at the end of the bar. */
.sf-skin-videokr { --sf-accent: #ff6106; }
/* The bar is a floating slab rather than a gradient, so the picture keeps its
   full contrast right up to the chrome. */
.sf-skin-videokr .sf-controls {
  --sf-inset: 12px;

  padding: 8px 12px; gap: 10px;
  background: rgba(18,20,22,.74); backdrop-filter: blur(6px); border-radius: 12px;
}
.sf-skin-videokr .sf-controls > * { margin-left: 0; }
/* Scoped to the bar's own children: the settings menu reuses .sf-forward for its rows. */
.sf-skin-videokr .sf-rewind,
.sf-skin-videokr .sf-controls > .sf-forward,
.sf-skin-videokr .sf-time { display: none; }
.sf-skin-videokr .sf-play {
  width: 60px; height: 46px; padding: 0; display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.08); border-radius: 10px; color: var(--sf-accent);
}
.sf-skin-videokr .sf-play:hover, .sf-skin-videokr .sf-play:focus-visible { background: rgba(255,255,255,.16); }
.sf-skin-videokr .sf-play svg { width: 22px; height: 22px; fill: var(--sf-accent); }
.sf-skin-videokr .sf-progress-wrap { margin: 0; padding: 0 2px; }
.sf-skin-videokr .sf-progress { height: 22px; }
.sf-skin-videokr .sf-progress-rail {
  height: 16px; border-radius: 8px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.45); box-sizing: border-box;
}
.sf-skin-videokr .sf-buffer, .sf-skin-videokr .sf-played { border-radius: 7px; }
.sf-skin-videokr .sf-buffer { background: rgba(255,236,230,.85); }
.sf-skin-videokr .sf-handle { display: none; }
.sf-skin-videokr .sf-marker { width: 2px; background: rgba(11,9,8,.45); }
/* Volume collapses to its speaker glyph; the slider still appears on hover of
   the group for pointer users through the shared .sf-volume rules. */
.sf-skin-videokr .sf-volume { width: auto; min-width: 0; max-width: none; }
.sf-skin-videokr .sf-volume input[type="range"] { display: none; }
.sf-skin-videokr .sf-mute svg { fill: var(--sf-accent); }
.sf-skin-videokr .sf-mute:hover svg { fill: #fff; }
.sf-skin-videokr .sf-badge { font-weight: 700; opacity: 1; letter-spacing: .01em; }
/* Title plate: the video name in the accent, the owner line beneath it. */
.sf-skin-videokr .sf-titlebar {
  /* A plate, not a full-width gradient, so it sizes to its text — kept clear of
     the corner rail on its right. */
  width: max-content; max-width: calc((100% - 96px) / var(--sf-ui, 1));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  right: auto; top: 14px; left: 14px; padding: 8px 14px;
  background: rgba(8,10,12,.72); border-radius: 6px;
  color: var(--sf-accent); font-size: 19px; font-weight: 700;
}
/* Nothing here re-measures the bar for small players any more: --sf-ui scales
   the whole slab, so the skin keeps its proportions all the way down. */
.sf-skin-videokr .sf-logo.sf-pos-top-left { top: 14px; left: 14px; }
.sf-skin-videokr .sf-logo img { max-height: 56px; border-radius: 8px; }
/* Corner rail: captions, picture-in-picture and share as square plates down the
   right edge. It fades with the rest of the chrome, so an idle picture is clean. */
.sf-rail {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  transform: scale(var(--sf-ui, 1)); transform-origin: 100% 0;
}
.sf-rail .sf-btn {
  width: 44px; height: 44px; padding: 0; margin: 0; display: grid; place-items: center;
  background: rgba(18,20,22,.74); backdrop-filter: blur(6px);
  border-radius: 10px; color: var(--sf-accent);
}
.sf-rail .sf-btn svg { width: 20px; height: 20px; }
.sf-rail .sf-btn:hover, .sf-rail .sf-btn:focus-visible {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff);
}
/* The rail sits in the corner, so a label above the top plate would be clipped by
   the player and the ones below would cover the plate above. They read leftwards. */
.sf-rail .sf-btn[data-tip]::after {
  bottom: auto; top: 50%; left: auto; right: 100%; margin: 0 10px 0 0;
  transform: translate(calc(10px + var(--sf-tip-dx, 0px)), -50%) scale(.8); transform-origin: 100% 50%;
}
.sf-rail .sf-btn[data-tip]:hover::after, .sf-rail .sf-btn[data-tip]:focus-visible::after {
  transform: translate(var(--sf-tip-dx, 0px), -50%) scale(1);
}
.sf-rail { opacity: 0; pointer-events: none; transition: opacity .4s ease-in-out; }
.sf-player.sf-active .sf-rail, .sf-player:not(.sf-playing) .sf-rail { opacity: 1; pointer-events: auto; }
@container (max-width: 380px) {
  .sf-rail .sf-pip { display: none; }
}

/* "frame" — a solid dark bar with the progress on its own full-width row. */
.sf-skin-frame .sf-controls {
  flex-wrap: wrap; padding: 6px 10px 8px; padding-top: 30px;
  background: linear-gradient(transparent, rgba(0,0,0,.92) 45%);
}
.sf-skin-frame .sf-progress-wrap { order: -1; flex: 0 0 100%; width: 100%; margin: 0 0 4px; padding: 0; }
.sf-skin-frame .sf-progress { height: 12px; }
.sf-skin-frame .sf-progress-rail { height: 4px; border-radius: 2px; background: rgba(255,255,255,.85); }
.sf-skin-frame .sf-buffer { background: rgba(255,255,255,.5); }
.sf-skin-frame .sf-handle { width: 11px; height: 11px; }
.sf-skin-frame .sf-time { font-size: 12px; }
.sf-skin-frame .sf-btn:hover, .sf-skin-frame .sf-btn:focus-visible { background: rgba(255,255,255,.18); }
.sf-skin-frame .sf-titlebar { font-size: 13px; }

/* "pop" — one solid rounded pill inset from the picture, oversized icons. */
.sf-skin-pop { --sf-accent: #2f7d5b; }
.sf-skin-pop .sf-controls {
  --sf-inset: 10px;

  padding: 8px 12px; padding-top: 8px;
  background: var(--sf-accent); border-radius: 12px; color: var(--sf-on-accent, #fff);
}
.sf-skin-pop .sf-rewind, .sf-skin-pop .sf-controls > .sf-forward, .sf-skin-pop .sf-pip { display: none; }
.sf-skin-pop .sf-btn svg { width: 22px; height: 22px; }
.sf-skin-pop .sf-btn:hover, .sf-skin-pop .sf-btn:focus-visible { background: rgba(255,255,255,.2); }
.sf-skin-pop .sf-progress-rail { height: 6px; border-radius: 3px; background: rgba(255,255,255,.35); }
.sf-skin-pop .sf-buffer { background: rgba(255,255,255,.2); }
.sf-skin-pop .sf-played { background: #fff; }
.sf-skin-pop .sf-handle { width: 16px; height: 16px; }
.sf-skin-pop .sf-time { font-size: 14px; font-weight: 600; }
.sf-skin-pop .sf-volume { width: auto; min-width: 0; max-width: none; }
.sf-skin-pop .sf-volume input[type="range"] { display: none; }
/* Elapsed time reads before the bar and the duration after it, so the row is
   play · volume · 0:00 —— 0:39 · captions · fullscreen. */
.sf-skin-pop .sf-play { order: 1; }
.sf-skin-pop .sf-volume { order: 2; }
.sf-skin-pop .sf-time-current { order: 3; }
.sf-skin-pop .sf-progress-wrap { order: 4; }
/* The bar itself separates the two timecodes here, so drop the slash. */
.sf-skin-pop .sf-time-duration { order: 5; }
.sf-skin-pop .sf-time-duration::before { content: none; }
.sf-skin-pop .sf-cc { order: 6; }
.sf-skin-pop .sf-settings { order: 7; }
.sf-skin-pop .sf-share { order: 8; }
.sf-skin-pop .sf-fs { order: 9; }
.sf-skin-pop .sf-badge { order: 10; }
.sf-skin-pop .sf-bigplay { border-radius: 100%; padding: 20px; }

/* "studio" — a light, quiet bar with mono timecodes and a hairline progress. */
.sf-skin-studio .sf-controls {
  flex-wrap: wrap; padding: 8px 12px 10px; padding-top: 30px;
  background: linear-gradient(transparent, rgba(12,14,18,.86) 45%);
}
.sf-skin-studio .sf-progress-wrap { order: -1; flex: 0 0 100%; width: 100%; margin: 0 0 6px; padding: 0; }
.sf-skin-studio .sf-progress { height: 12px; }
.sf-skin-studio .sf-progress-rail { height: 3px; border-radius: 1.5px; background: rgba(255,255,255,.35); }
.sf-skin-studio .sf-buffer { background: rgba(255,255,255,.25); }
.sf-skin-studio .sf-played { background: #fff; }
.sf-skin-studio .sf-handle { width: 12px; height: 12px; }
.sf-skin-studio .sf-btn svg { width: 20px; height: 20px; }
.sf-skin-studio .sf-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sf-skin-studio .sf-titlebar { display: none; }
.sf-skin-studio .sf-btn:hover, .sf-skin-studio .sf-btn:focus-visible { background: rgba(255,255,255,.16); }

/* "wave" — a flat, full-width dark bar with a decorative wave silhouette above
   the transport row. The shape is a visual seek rail, not an audio waveform. */
.sf-skin-wave { --sf-accent: #1b7459; }
.sf-skin-wave .sf-controls {
  --sf-inset: 0px;

  flex-wrap: wrap; gap: 2px; padding: 6px 10px 7px; padding-top: 28px;
  background: linear-gradient(transparent, rgba(0,0,0,.82) 56%);
  border-radius: 0;
}
.sf-skin-wave .sf-controls > * { margin-left: 0; }
.sf-skin-wave .sf-progress-wrap {
  order: -1; flex: 0 0 100%; width: 100%; min-width: 0; margin: 0 0 2px; padding: 0;
}
.sf-skin-wave .sf-progress { height: 20px; }
.sf-skin-wave .sf-progress-rail {
  height: 20px; border-radius: 0; background: rgba(255,255,255,.28);
  overflow: hidden; mask-type: luminance;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 12C8 4 16 18 25 10S42 2 51 11s17 8 25 0 16-5 24 2v7H0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 12C8 4 16 18 25 10S42 2 51 11s17 8 25 0 16-5 24 2v7H0z'/%3E%3C/svg%3E");
  mask-size: 100% 100%; mask-position: center; mask-repeat: no-repeat;
}
.sf-skin-wave .sf-buffer { background: rgba(255,255,255,.46); border-radius: 0; }
.sf-skin-wave .sf-played { background: var(--sf-accent); border-radius: 0; }
.sf-skin-wave .sf-handle { width: 10px; height: 10px; }
.sf-skin-wave .sf-play { order: 1; }
.sf-skin-wave .sf-badge { order: 1; }
.sf-skin-wave .sf-time-current { order: 2; margin-left: auto; }
.sf-skin-wave .sf-time-duration { display: none; }
.sf-skin-wave .sf-volume { order: 3; width: 92px; min-width: 92px; max-width: 92px; }
.sf-skin-wave .sf-cc { order: 4; }
.sf-skin-wave .sf-share { order: 5; }
.sf-skin-wave .sf-rewind { order: 6; }
.sf-skin-wave .sf-controls > .sf-forward { order: 7; }
.sf-skin-wave .sf-settings { order: 8; }
.sf-skin-wave .sf-pip { order: 9; }
.sf-skin-wave .sf-fs { order: 10; }
.sf-skin-wave .sf-btn {
  padding: 6px; border-radius: 0; color: #fff;
}
.sf-skin-wave .sf-btn svg { width: 18px; height: 18px; }
.sf-skin-wave .sf-btn:hover,
.sf-skin-wave .sf-btn:focus-visible,
.sf-skin-wave .sf-btn[aria-expanded="true"] {
  background: transparent; color: var(--sf-accent); outline: 0;
}
.sf-skin-wave .sf-play svg,
.sf-skin-wave .sf-mute svg { fill: #fff; }
.sf-skin-wave .sf-play:hover svg,
.sf-skin-wave .sf-play:focus-visible svg,
.sf-skin-wave .sf-mute:hover svg,
.sf-skin-wave .sf-mute:focus-visible svg { fill: var(--sf-accent); }
.sf-skin-wave .sf-titlebar { display: none; }
@container (max-width: 420px) {
  .sf-skin-wave .sf-controls { gap: 0; padding: 4px; }
  .sf-skin-wave .sf-btn { padding: 3px; }
  .sf-skin-wave .sf-volume { width: 44px; min-width: 44px; max-width: 44px; }
  .sf-skin-wave .sf-volume input[type="range"] { display: none; }
  .sf-skin-wave .sf-pip,
  .sf-skin-wave .sf-rewind,
  .sf-skin-wave .sf-controls > .sf-forward { display: block; }
}

/* "neon" — a violet floating pill with circular transport controls and a glowing rail. */
.sf-skin-neon { --sf-accent: #7c3aed; }
.sf-skin-neon .sf-controls {
  --sf-inset: 10px;

  gap: 6px; padding: 7px 10px;
  background: rgba(10,8,20,.72); backdrop-filter: blur(8px); border-radius: 999px;
}
.sf-skin-neon .sf-controls > * { margin-left: 0; }
.sf-skin-neon .sf-btn {
  width: 30px; height: 30px; padding: 6px; border-radius: 100%; color: #fff;
}
.sf-skin-neon .sf-btn svg { width: 18px; height: 18px; }
.sf-skin-neon .sf-btn:hover, .sf-skin-neon .sf-btn:focus-visible {
  background: var(--sf-accent); color: var(--sf-on-accent, #fff);
}
.sf-skin-neon .sf-progress-wrap { padding: 0 2px; }
.sf-skin-neon .sf-progress { height: 18px; }
.sf-skin-neon .sf-progress-rail { height: 4px; border-radius: 2px; background: rgba(255,255,255,.24); }
.sf-skin-neon .sf-buffer { background: rgba(255,255,255,.22); border-radius: 2px; }
.sf-skin-neon .sf-played { border-radius: 2px; box-shadow: 0 0 10px var(--sf-accent); }
.sf-skin-neon .sf-handle { width: 10px; height: 10px; }
.sf-skin-neon .sf-titlebar { color: #c4b5fd; }

/* "cinema" — sparse gold controls and a full-bleed bottom timecode line. */
.sf-skin-cinema { --sf-accent: #e5b45b; }
.sf-skin-cinema .sf-controls {
  --sf-inset: 0px;

  flex-wrap: wrap; gap: 2px; padding: 5px 8px 0;
  background: transparent; border-radius: 0;
}
.sf-skin-cinema .sf-controls > * { margin-left: 0; }
.sf-skin-cinema .sf-btn { padding: 5px; border-radius: 0; }
.sf-skin-cinema .sf-btn svg { width: 16px; height: 16px; }
.sf-skin-cinema .sf-progress-wrap {
  order: 99; flex: 0 0 100%; width: 100%; min-width: 0; margin: 2px 0 0; padding: 0;
}
.sf-skin-cinema .sf-progress { height: 2px; }
.sf-skin-cinema .sf-progress-rail { height: 2px; border-radius: 0; background: rgba(229,180,91,.28); }
.sf-skin-cinema .sf-buffer { background: rgba(255,255,255,.3); border-radius: 0; }
.sf-skin-cinema .sf-played { background: var(--sf-accent); border-radius: 0; }
.sf-skin-cinema .sf-handle { width: 7px; height: 7px; }
.sf-skin-cinema .sf-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.sf-skin-cinema .sf-titlebar { display: none; }

/* "aurora" — cyan glass chrome with a violet-to-cyan progress treatment. */
.sf-skin-aurora { --sf-accent: #22d3ee; }
.sf-skin-aurora .sf-controls {
  --sf-inset: 10px;

  gap: 5px; padding: 8px 11px;
  background: rgba(255,255,255,.10); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
}
.sf-skin-aurora .sf-controls > * { margin-left: 0; }
.sf-skin-aurora .sf-btn { border-radius: 8px; color: #e0faff; }
.sf-skin-aurora .sf-btn:hover, .sf-skin-aurora .sf-btn:focus-visible { background: rgba(255,255,255,.18); }
.sf-skin-aurora .sf-progress-wrap { padding: 0 2px; }
.sf-skin-aurora .sf-progress { height: 18px; }
.sf-skin-aurora .sf-progress-rail { height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.sf-skin-aurora .sf-buffer { background: rgba(255,255,255,.25); border-radius: 2px; }
.sf-skin-aurora .sf-played {
  background: var(--sf-accent);

  background: linear-gradient(90deg, var(--sf-accent), #a78bfa);
  border-radius: 2px;
}
.sf-skin-aurora .sf-handle { width: 10px; height: 10px; }
.sf-skin-aurora .sf-titlebar { color: #a5f3fc; }

/* "slate" — a genuinely light, solid control bar with dark ink and blue progress. */
.sf-skin-slate { --sf-accent: #2563eb; }
.sf-skin-slate .sf-controls {
  --sf-inset: 0px;

  gap: 3px; padding: 7px 9px;
  background: #f4f5f7; border-radius: 10px; color: #1f2937;
}
.sf-skin-slate .sf-controls > * { margin-left: 0; }
.sf-skin-slate .sf-btn { color: #1f2937; border-radius: 6px; }
.sf-skin-slate .sf-btn:hover, .sf-skin-slate .sf-btn:focus-visible,
.sf-skin-slate .sf-btn[aria-expanded="true"] { background: rgba(15,23,42,.08); color: #1f2937; }
.sf-skin-slate .sf-progress-wrap { padding: 0 2px; }
.sf-skin-slate .sf-progress { height: 18px; }
.sf-skin-slate .sf-progress-rail { height: 4px; border-radius: 2px; background: #d3d7de; }
.sf-skin-slate .sf-buffer { background: #b8bec9; border-radius: 2px; }
.sf-skin-slate .sf-played { background: var(--sf-accent); border-radius: 2px; }
.sf-skin-slate .sf-handle { width: 10px; height: 10px; background: #fff; }
.sf-skin-slate .sf-time { color: #475569; }
.sf-skin-slate .sf-badge { color: #1f2937; }
.sf-skin-slate .sf-badge:hover { background: rgba(15,23,42,.08); }
.sf-skin-slate .sf-titlebar { color: #1f2937; background: rgba(244,245,247,.9); }

/* Round-two reference treatments for the still-unreleased skins. */
.sf-skin-ghost { --sf-accent: #22c1b3; }
.sf-skin-ghost .sf-controls {
  --sf-inset: 0px;

  flex-wrap: wrap; gap: 2px; padding: 7px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35) 55%, transparent);
  border-radius: 0; color: #fff;
}
.sf-skin-ghost .sf-controls > * { margin-left: 0; }
.sf-skin-ghost .sf-progress-wrap {
  order: -1; flex: 0 0 100%; width: 100%; min-width: 0; margin: 0 0 3px; padding: 0;
}
.sf-skin-ghost .sf-progress { height: 14px; }
.sf-skin-ghost .sf-progress-rail { height: 4px; border-radius: 0; background: rgba(255,255,255,.35); }
.sf-skin-ghost .sf-buffer { background: rgba(255,255,255,.22); border-radius: 0; }
.sf-skin-ghost .sf-played { background: var(--sf-accent); border-radius: 0; }
.sf-skin-ghost .sf-handle { width: 10px; height: 10px; background: var(--sf-accent); opacity: 0; }
.sf-skin-ghost .sf-progress:hover .sf-handle { opacity: 1; }
.sf-skin-ghost .sf-btn { color: #fff; padding: 6px; background: transparent; }
.sf-skin-ghost .sf-btn svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
.sf-skin-ghost .sf-btn:hover, .sf-skin-ghost .sf-btn:focus-visible { background: transparent; color: #fff; opacity: 1; }
.sf-skin-ghost .sf-rewind { order: 1; }
.sf-skin-ghost .sf-play { order: 2; }
.sf-skin-ghost .sf-controls > .sf-forward { order: 3; }
.sf-skin-ghost .sf-time { display: block; order: 4; color: #fff; font-size: 12px; }
.sf-skin-ghost .sf-volume { order: 5; width: 104px; min-width: 104px; max-width: 104px; }
.sf-skin-ghost .sf-volume input[type="range"] { display: block; width: 70px; }
.sf-skin-ghost .sf-settings { order: 6; }
.sf-skin-ghost .sf-share { order: 7; }
.sf-skin-ghost .sf-fs { order: 8; }
.sf-skin-ghost .sf-cc, .sf-skin-ghost .sf-pip, .sf-skin-ghost .sf-badge { display: none; }
.sf-skin-ghost .sf-titlebar { display: none; }

/* Frame, studio and ghost put the progress on its own row; split the transport
   row so the trailing icons sit at the right edge like every other skin. */
.sf-skin-frame .sf-volume,
.sf-skin-studio .sf-volume,
.sf-skin-ghost .sf-volume { margin-right: auto; }

.sf-skin-cinema .sf-controls {
  position: absolute; inset: 0;
  --sf-inset: 0px;

  width: auto; margin: 0; padding: 0;
  background: transparent; border-radius: 0; transform: none !important; opacity: 1; pointer-events: none;
}
.sf-skin-cinema .sf-controls > * { margin: 0; }
.sf-skin-cinema .sf-rewind,
.sf-skin-cinema .sf-play,
.sf-skin-cinema .sf-controls > .sf-forward {
  position: absolute; top: 50%; z-index: 6; pointer-events: auto; transform: translateY(-50%);
  display: grid; place-items: center; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.22); backdrop-filter: blur(6px); color: #fff;
}
.sf-skin-cinema .sf-rewind { left: calc(50% - 98px); width: 44px; height: 44px; }
.sf-skin-cinema .sf-play { left: calc(50% - 32px); width: 64px; height: 64px; }
.sf-skin-cinema .sf-controls > .sf-forward { left: calc(50% + 54px); width: 44px; height: 44px; }
.sf-skin-cinema .sf-btn svg { width: 18px; height: 18px; fill: #fff; }
.sf-skin-cinema .sf-btn:hover, .sf-skin-cinema .sf-btn:focus-visible { background: rgba(255,255,255,.3); color: #fff; }
.sf-skin-cinema .sf-progress-wrap {
  position: absolute; left: 0; bottom: 0; z-index: 7; width: 100%; min-width: 0; margin: 0; padding: 0;
  pointer-events: auto;
}
.sf-skin-cinema .sf-progress { height: 3px; }
.sf-skin-cinema .sf-progress-rail { height: 3px; border-radius: 0; background: rgba(255,255,255,.32); }
.sf-skin-cinema .sf-buffer { background: rgba(255,255,255,.22); border-radius: 0; }
.sf-skin-cinema .sf-played { background: #fff; border-radius: 0; }
.sf-skin-cinema .sf-handle { display: none; }
.sf-skin-cinema .sf-time-current {
  position: absolute; right: 14px; bottom: 10px; z-index: 6; color: #fff; font-size: 13px; pointer-events: none;
}
.sf-skin-cinema .sf-time-duration { display: none; }
.sf-skin-cinema .sf-titlebar {
  display: block; top: auto; bottom: 10px; left: 14px; right: auto; z-index: 6; width: auto;
  padding: 0; background: none; color: #fff; font-size: 15px; font-weight: 600; opacity: 1;
}
.sf-skin-cinema .sf-volume, .sf-skin-cinema .sf-cc, .sf-skin-cinema .sf-pip,
.sf-skin-cinema .sf-settings, .sf-skin-cinema .sf-share, .sf-skin-cinema .sf-fs,
.sf-skin-cinema .sf-badge { display: none; }
.sf-skin-cinema .sf-tooltip {
  padding: 6px 9px; border-radius: 6px; background: #fff; color: #111827; font-weight: 600;
}

/* "pill" — translucent transport capsules with a full-width progress row. */
.sf-skin-pill .sf-controls {
  --sf-inset: 14px;

  background: none; backdrop-filter: none; padding: 12px 14px; gap: 10px;
  align-items: center; flex-wrap: wrap;
}
.sf-skin-pill .sf-controls > * { margin-left: 0; }
.sf-skin-pill .sf-progress-wrap {
  order: -1; flex: 0 0 100%; width: 100%; min-width: 0;
  margin: 0 0 10px; padding: 0 4px;
}
.sf-skin-pill .sf-progress { height: 18px; }
.sf-skin-pill .sf-progress-rail {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,.5);
}
.sf-skin-pill .sf-buffer { background: rgba(255,255,255,.3); border-radius: 999px; }
.sf-skin-pill .sf-played { background: var(--sf-accent); border-radius: 999px; }
.sf-skin-pill .sf-handle {
  display: block; width: 20px; height: 20px; background: var(--sf-accent);
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.sf-skin-pill .sf-play,
.sf-skin-pill .sf-volume button {
  width: 56px; height: 56px; padding: 0; flex: none;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(122,113,105,.62); backdrop-filter: blur(8px); color: #fff;
}
.sf-skin-pill .sf-play:hover, .sf-skin-pill .sf-play:focus-visible,
.sf-skin-pill .sf-volume button:hover, .sf-skin-pill .sf-volume button:focus-visible {
  background: rgba(122,113,105,.8);
}
.sf-skin-pill .sf-play svg,
.sf-skin-pill .sf-volume button svg { width: 22px; height: 22px; }
.sf-skin-pill .sf-rewind,
.sf-skin-pill .sf-controls > .sf-forward { display: none; }
.sf-skin-pill .sf-volume {
  order: 1;
  width: auto; min-width: 0; max-width: none;
}
.sf-skin-pill .sf-volume input[type="range"] { display: none; }
.sf-skin-pill .sf-time-current {
  order: 2;
  height: 56px; padding: 0 18px; border-radius: 999px;
  background: rgba(122,113,105,.62); backdrop-filter: blur(8px);
  display: flex; align-items: center; font-weight: 600; color: #fff;
}
.sf-skin-pill .sf-time-duration { display: none; }
.sf-skin-pill .sf-pill-group {
  order: 3;
  margin-left: auto; display: flex; align-items: center; gap: 2px; height: 56px;
  padding: 0 8px; border-radius: 999px; background: rgba(122,113,105,.62);
  backdrop-filter: blur(8px); overflow: visible;
}
.sf-skin-pill .sf-pill-group > * { background: none; color: #fff; }
.sf-skin-pill .sf-pill-group .sf-btn:hover,
.sf-skin-pill .sf-pill-group .sf-btn:focus-visible,
.sf-skin-pill .sf-pill-group .sf-btn[aria-expanded="true"] {
  background: rgba(122,113,105,.8); color: #fff;
}

@container (max-width: 520px) {
  .sf-skin-pill .sf-controls { gap: 6px; padding: 10px; }
  .sf-skin-pill .sf-progress-wrap { margin-bottom: 6px; }
  .sf-skin-pill .sf-play,
  .sf-skin-pill .sf-volume button { width: 40px; height: 40px; }
  .sf-skin-pill .sf-play svg,
  .sf-skin-pill .sf-volume button svg { width: 18px; height: 18px; }
  .sf-skin-pill .sf-time-current { height: 40px; padding: 0 13px; font-size: 12px; }
  .sf-skin-pill .sf-pill-group { height: 40px; padding: 0 5px; gap: 0; }
  .sf-skin-pill .sf-handle { width: 16px; height: 16px; }
  .sf-skin-pill .sf-pill-group .sf-btn { padding: 5px; }
  .sf-skin-pill .sf-pill-group .sf-btn svg { width: 16px; height: 16px; }
}
@container (max-width: 380px) {
  .sf-skin-pill .sf-play,
  .sf-skin-pill .sf-volume button { width: 36px; height: 36px; }
  .sf-skin-pill .sf-play svg,
  .sf-skin-pill .sf-volume button svg { width: 16px; height: 16px; }
  .sf-skin-pill .sf-time-current { height: 36px; padding: 0 10px; font-size: 11px; }
  .sf-skin-pill .sf-pill-group { height: 36px; }
  .sf-skin-pill .sf-handle { width: 14px; height: 14px; }
}