/*
 * R04 Hunch, on the shared core (round 3 build, Nov 8, 2026).
 *
 * A standard quiet row: the seek line full width on top, below it play, then the Hunch pill (only when a hunch exists),
 * then on the right the speaker, captions, fullscreen and the time. One amber pill offers the one action you are about
 * to want, says why in a few words, and goes away if you ignore it. It grows out of the play button and sits in the free
 * space beside it, so it never moves another control. Legibility comes from the core's scrim, which comes and goes with
 * the controls, plus soft glyph shadows; the seek line, which never hides, carries its own edge.
 *
 * Every control image is the ChatGPT sheet's own art (round3/builds/sheets/r04-hunch-sheet.png), cut at native size with
 * build/tools/cut_art.py: white glyphs, the line split at its baked handle, the lone handle, and the pill glyphs (back
 * 10, replay, loop, next, replay with captions, the flag, the close X). Inside the amber pill the same white glyphs are
 * darkened by a filter to the render's pill ink; elsewhere they stay white. The pill surface is CSS, like every entry's
 * bar. Type: Fira Sans 500. r04-hunch.js holds the rule table, the one-at-a-time arbitration and the actions.
 */

@font-face {
  font-family: "Fira Sans";
  src: url(fonts/FiraSans-500.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.sk-root[data-skin="r04"] {
  --media-accent-color: #f3b654;
  --media-accent-text-color: #1c1307;
  --media-font-family: "Fira Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --media-border-radius: 14px;
  --sk-hit: 44px;
  --sk-icon: 24px;
  --sk-pad: 4px;
  --sk-r-outer: 14px;
  --sk-ink: #ffffff;
  --sk-ink-2: rgb(255 255 255 / .8);
  --sk-surface: rgb(14 14 16 / .9);
  --sk-surface-solid: #0e0e10;
  --sk-focus: #ffffff;
  --sk-focus-gap: #0e0e10;
  --sk-cc-on: #ffffff;
  /* the core's backdrop scrim, measured over the bright frame (BUILD-LOG). The dense stop sits at 76px (12% of the
     wide player) so a short phone player keeps it behind the row; it fades out by 40% of the height, at least 112px */
  --sk-scrim: linear-gradient(to top, rgb(8 8 12 / .66), rgb(8 8 12 / .5) 76px, transparent max(40%, 112px));
  /* cues clear the row, the line and the flag's time tag above it (plain px: the core reads it with parseFloat). The
     core asks for the cue's bottom edge at this height (lineAlign end); Chrome ignores lineAlign and puts the cue's top
     edge there, so the value also carries one cue box (about 5.7% of the player's height: 36px on a 630px player).
     Measured Nov 13, 2026 (Hunch lone revision, responsive pass) */
  --sk-cue-clearance: 150px;
  --r4-inset: 24px;
  /* narrow players only: the top band behind captions and fullscreen (measured like the bottom scrim) */
  --r4-scrim-top: linear-gradient(to bottom, rgb(8 8 12 / .62), rgb(8 8 12 / .5) 52px, transparent 96px);
  --r4-amber: rgb(243 182 84 / .9);
  --r4-ink: #1c1307;
  --r4-glyph-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .45));
  --r4-line-shadow: drop-shadow(0 0 1px rgb(0 0 0 / .7)) drop-shadow(0 1px 2px rgb(0 0 0 / .35));
}
@container sk (max-width: 819px) {
  .sk-root[data-skin="r04"] :is(.sk-controls, .sk-center, media-error-dialog) {
    --r4-inset: 14px;
  }
}
@container sk (max-width: 519px) {
  .sk-root[data-skin="r04"] :is(.sk-controls, .sk-center, media-error-dialog) {
    --r4-inset: 8px;
  }
}

/* ---------- The player's size on the page ---------- */

/* the whole player always fits the viewport's height, centered in the page column: on a landscape phone (844 x 390)
   the 16:9 frame would otherwise be taller than the screen and its controls would sit below the fold */
.pg-stage .sk-root[data-skin="r04"]:not([data-fullscreen]) {
  width: min(100%, calc((100svh - 16px) * 16 / 9));
  margin-inline: auto;
}

/* ---------- The row: the line on top, the controls below it ---------- */

/* "aux" is a public slot right before the speaker: a page script may place one extra control there with grid-area aux.
   Empty, its column takes no space and the row is exactly the skin's own. */
.sk-root[data-skin="r04"] .r4-bar {
  --r4-line: 4px;
  position: absolute;
  inset: var(--r4-inset) var(--r4-inset) 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto auto auto auto;
  grid-template-rows: 1fr 32px 44px;
  grid-template-areas:
    ". . . . . . . . . ."
    "seek seek seek seek seek seek seek seek seek seek"
    "play hunch back fwd aux vol speed pip fs time";
  align-items: center;
  pointer-events: none;
  color: var(--sk-ink);
}
.sk-root[data-skin="r04"] .r4-bar:has(> .sk-seek:is([data-pointing], [data-dragging])) {
  --r4-line: 6px;
}
.sk-root[data-skin="r04"] .r4-bar > .sk-play { grid-area: play; }
.sk-root[data-skin="r04"] .r4-bar > .r4-hunch { grid-area: hunch; }
.sk-root[data-skin="r04"] .r4-bar > .sk-seek { grid-area: seek; }
.sk-root[data-skin="r04"] .r4-bar > .r4-marks { grid-area: seek; }
.sk-root[data-skin="r04"] .r4-bar > .sk-volume { grid-area: vol; }
.sk-root[data-skin="r04"] .r4-bar > .r4-back { grid-area: back; }
.sk-root[data-skin="r04"] .r4-bar > .r4-fwd { grid-area: fwd; }
.sk-root[data-skin="r04"] .r4-bar > .r4-speed { grid-area: speed; }
.sk-root[data-skin="r04"] .r4-bar > .r4-pip { grid-area: pip; }
.sk-root[data-skin="r04"] .r4-bar > .sk-fs { grid-area: fs; }
.sk-root[data-skin="r04"] .r4-bar > .sk-time { grid-area: time; justify-self: end; }

/* the line never hides; everything else comes and goes with the controls */
.sk-root[data-skin="r04"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) {
  opacity: 1;
}
.sk-root[data-skin="r04"] .r4-bar > :not(.sk-seek, .r4-marks) {
  opacity: 0;
  transition: opacity var(--sk-hide) linear;
}
.sk-root[data-skin="r04"] .r4-bar > :not(.sk-seek, .r4-marks, .r4-hunch) {
  pointer-events: none;
}
.sk-root[data-skin="r04"] .sk-controls:is([data-visible], :has(:focus-visible)) .r4-bar > :not(.sk-seek, .r4-marks) {
  opacity: 1;
  transition-duration: var(--sk-show);
}
.sk-root[data-skin="r04"] .sk-controls:is([data-visible], :has(:focus-visible)) .r4-bar > :not(.sk-seek, .r4-marks, .r4-hunch) {
  pointer-events: auto;
}
.sk-root[data-skin="r04"] .r4-bar > .sk-seek {
  pointer-events: auto;
}

/* buttons: white glyphs with a soft shadow, a quiet round tint on hover */
.sk-root[data-skin="r04"] .r4-bar .sk-btn {
  --sk-btn-radius: 22px;
  transition: background-color var(--sk-exit) linear;
}
.sk-root[data-skin="r04"] .r4-bar .sk-btn:hover {
  background-color: rgb(255 255 255 / .12);
  transition-duration: var(--sk-enter);
}
.sk-root[data-skin="r04"] .r4-bar .sk-icon {
  width: auto;
  height: 22px;
  filter: var(--r4-glyph-shadow);
}

/* ---------- Time: Fira Sans 500, tabular ---------- */

.sk-root[data-skin="r04"] .r4-bar > .sk-time {
  gap: .3em;
  padding: 0 4px 0 10px;
  font: 500 14px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgb(0 0 0 / .45);
}
.sk-root[data-skin="r04"] .r4-bar > .sk-time :is(media-time-separator, media-time[data-type="duration"]) {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the thin line from the sheet's two runs, the white handle ---------- */

.sk-root[data-skin="r04"] .r4-bar > .sk-seek {
  --sk-seek-hit: 32px;
  height: 32px;
  border-radius: 8px;
}
.sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track {
  height: var(--r4-line);
  border-radius: 0;
  background: none;
  overflow: visible;
  filter: var(--r4-line-shadow);
  transition: height var(--sk-exit) var(--sk-ease);
}
.sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track::before,
.sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track > :is(.sk-buffer, .sk-fill),
.sk-root[data-skin="r04"] media-volume-slider .sk-track::before,
.sk-root[data-skin="r04"] media-volume-slider .sk-track > .sk-fill {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--r4-line, 4px) * .4091);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 9 fill;
  border-image-width: 0 calc(var(--r4-line, 4px) * .4091);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
/* unplayed: the light gray a step softer until the stream reaches it; buffered at full tone */
.sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track::before {
  opacity: .75;
}
.sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track > .sk-buffer {
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
.sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track > .sk-fill,
.sk-root[data-skin="r04"] media-volume-slider .sk-track > .sk-fill {
  border-image-source: url(art/seek-played.png);
  clip-path: inset(-4px calc(100% - var(--media-slider-fill, 0%)) -4px 0);
}
/* the handle: the sheet's lone white handle. Thumb containment (U16 standard): travel clamped to
   [half width + 1.5px, 100% - half width - 1.5px]; the 1.5px covers the 1.15 drag grow (14px -> 16.1px) */
.sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-thumb {
  --sk-thumb: 14px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5));
  left: clamp(calc(var(--sk-thumb-w, var(--sk-thumb)) / 2 + 1.5px), var(--media-slider-fill), calc(100% - var(--sk-thumb-w, var(--sk-thumb)) / 2 - 1.5px));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-thumb {
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="r04"] .r4-bar .sk-seek[data-dragging] .sk-thumb {
    scale: 1.15;
    transition-duration: var(--sk-enter);
  }
}
.sk-root[data-skin="r04"] .sk-preview-time {
  font-weight: 500;
}

/* marks on the line: the loop span, the attention flag and its time tag */
.sk-root[data-skin="r04"] .r4-marks {
  position: relative;
  height: 32px;
  pointer-events: none;
}
.sk-root[data-skin="r04"] .r4-span {
  position: absolute;
  top: 50%;
  left: var(--r4-span-a, 0%);
  width: calc(var(--r4-span-b, 0%) - var(--r4-span-a, 0%));
  height: calc(var(--r4-line) + 2px);
  translate: 0 -50%;
  border-radius: 3px;
  background: rgb(255 255 255 / .9);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .25);
  opacity: 0;
  transition: opacity 160ms linear;
}
.sk-root[data-skin="r04"] .r4-marks[data-span] .r4-span {
  opacity: 1;
}
.sk-root[data-skin="r04"] .r4-flag {
  position: absolute;
  bottom: calc(50% + 2px);
  left: var(--r4-mark, 0%);
  width: auto;
  height: 16px;
  /* the pole's foot (10.56% across the cut) stands on the marked time */
  translate: -10.56% 0;
  filter: var(--r4-glyph-shadow);
  opacity: 0;
  transition: opacity 160ms linear;
}
.sk-root[data-skin="r04"] .r4-flag-time {
  position: absolute;
  bottom: calc(50% + 20px);
  left: clamp(22px, var(--r4-mark, 0%), calc(100% - 22px));
  translate: -50% 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgb(14 14 16 / .9);
  color: #ffffff;
  font: 500 12px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms linear;
}
.sk-root[data-skin="r04"] .r4-marks[data-mark]:not([data-flag]) .r4-flag-time {
  bottom: calc(50% + 9px);
}
.sk-root[data-skin="r04"] .r4-marks[data-mark][data-flag] .r4-flag,
.sk-root[data-skin="r04"] .r4-marks[data-mark] .r4-flag-time {
  opacity: 1;
}

/* ---------- Volume: the speaker and a short run of the same line ---------- */

.sk-root[data-skin="r04"] .r4-bar .sk-volume {
  gap: 0;
}
.sk-root[data-skin="r04"] media-volume-slider {
  --r4-line: 4px;
  width: 72px;
  margin-inline: 0 6px;
}
.sk-root[data-skin="r04"] media-volume-slider .sk-track {
  height: var(--r4-line);
  border-radius: 0;
  background: none;
  overflow: visible;
  filter: var(--r4-line-shadow);
}
/* thumb containment (U16 standard): travel clamped to [half width, 100% - half width]; no grow */
.sk-root[data-skin="r04"] media-volume-slider .sk-thumb {
  --sk-thumb: 12px;
  background: url(art/knob.png) center / contain no-repeat;
  left: clamp(calc(var(--sk-thumb-w, var(--sk-thumb)) / 2 + 0px), var(--media-slider-fill), calc(100% - var(--sk-thumb-w, var(--sk-thumb)) / 2 - 0px));
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="r04"] media-volume-slider {
    display: none;
  }
}

/* ---------- The Hunch pill ---------- */

/* the free space right of play: the pill lives here, absolutely positioned, so it never moves another control */
.sk-root[data-skin="r04"] .r4-bar > .r4-hunch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 4px;
  pointer-events: none;
}
.sk-root[data-skin="r04"] .r4-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 6px;
  border: 0;
  /* the hit area's radius, concentric with the amber surface inside it (18px + 4px) */
  border-radius: 22px;
  background: none;
  color: var(--r4-ink);
  font: 500 11px/1 var(--media-font-family);
  white-space: nowrap;
  cursor: pointer;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 140ms linear;
}
.sk-root[data-skin="r04"] .r4-pill[hidden] {
  display: none;
}
/* the amber surface: 36px tall, fully round (radius 18px = the glyph circle's 12px plus 6px padding) */
.sk-root[data-skin="r04"] .r4-pill::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  border-radius: 18px;
  background: var(--r4-amber);
  box-shadow: 0 1px 3px rgb(0 0 0 / .28);
}
.sk-root[data-skin="r04"] .r4-pill-glyph {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  object-fit: contain;
  /* the white glyph darkened to the render's pill ink (about #1d160a over the amber) */
  filter: brightness(0);
  opacity: .88;
  pointer-events: none;
}
.sk-root[data-skin="r04"] .r4-pill-label {
  pointer-events: none;
}
.sk-root[data-skin="r04"] .r4-hunch[data-shown] :is(.r4-pill, .r4-dismiss) {
  pointer-events: auto;
}
.sk-root[data-skin="r04"] .r4-hunch[data-shown] .r4-pill {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  /* entrance: grows from the play button (origin at play's center, 26px left of the pill); exit: opacity only */
  .sk-root[data-skin="r04"] .r4-pill {
    transform-origin: -26px 50%;
    scale: .5;
    translate: -28px 0;
    transition: opacity 140ms linear, scale 0s linear 140ms, translate 0s linear 140ms;
  }
  .sk-root[data-skin="r04"] .r4-hunch[data-shown] .r4-pill {
    scale: 1;
    translate: 0 0;
    transition: opacity 200ms cubic-bezier(.2, .8, .2, 1), scale 200ms cubic-bezier(.2, .8, .2, 1), translate 200ms cubic-bezier(.2, .8, .2, 1);
  }
}
.sk-root[data-skin="r04"] .r4-bar .r4-dismiss {
  opacity: 0;
  transition: opacity var(--sk-exit) linear;
}
.sk-root[data-skin="r04"] .r4-bar .r4-dismiss .sk-icon {
  width: 12px;
  height: 12px;
}
.sk-root[data-skin="r04"] .r4-hunch[data-shown]:is(:hover, :focus-within) .r4-dismiss {
  opacity: 1;
  transition-duration: var(--sk-enter);
}
.sk-root[data-skin="r04"] .r4-hint {
  position: absolute;
  left: 4px;
  bottom: calc(50% + 26px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgb(14 14 16 / .9);
  color: #ffffff;
  font: 500 11px/1 var(--media-font-family);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sk-exit) linear;
}
.sk-root[data-skin="r04"] .r4-hunch[data-shown]:is(:hover, :focus-within) .r4-hint {
  opacity: 1;
  transition-duration: var(--sk-enter);
}
@media (pointer: coarse) {
  .sk-root[data-skin="r04"] .r4-pill {
    height: 48px;
    padding: 0 16px 0 6px;
    border-radius: 26px;
  }
  .sk-root[data-skin="r04"] .r4-pill::before {
    inset: 2px 0;
    border-radius: 22px;
  }
  .sk-root[data-skin="r04"] .r4-pill-glyph {
    width: 32px;
    height: 32px;
  }
  /* the swipe replaces the X on touch */
  .sk-root[data-skin="r04"] .r4-bar .r4-dismiss {
    display: none;
  }
}

/* ---------- Help card (?) ---------- */

.sk-root[data-skin="r04"] .r4-help {
  position: absolute;
  left: var(--r4-inset);
  bottom: 92px;
  z-index: 4;
  max-width: min(360px, calc(100% - 2 * var(--r4-inset)));
  max-height: calc(100% - 104px);
  overflow: auto;
  padding: 12px 16px 14px;
  border-radius: 14px;
  background: rgb(14 14 16 / .9);
  color: #ffffff;
  font: 500 13px/1.5 var(--media-font-family);
  pointer-events: auto;
}
.sk-root[data-skin="r04"] .r4-help[hidden] {
  display: none;
}
.sk-root[data-skin="r04"] .r4-help-title {
  margin: 0 0 4px;
  color: rgb(255 255 255 / .72);
}
.sk-root[data-skin="r04"] .r4-help ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-root[data-skin="r04"] .r4-help kbd {
  font: inherit;
  color: #f3b654;
}

/* ---------- Center play, spinner, the error pill ---------- */

/* the sheet's own play glyph, no disc (direction 1.2): an 88px hit area that draws nothing behind the glyph */
.sk-root[data-skin="r04"] .sk-bigplay {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
/* the center sits over the bright frame, away from the scrim: the glyph shadow plus a wider soft one of its own */
.sk-root[data-skin="r04"] .sk-bigplay .sk-icon {
  width: auto;
  height: 52px;
  filter: var(--r4-glyph-shadow) drop-shadow(0 2px 8px rgb(0 0 0 / .4));
}

/* the error pill: Video.js's alertdialog, where the pill sits, amber, radius 22px */
.sk-root[data-skin="r04"] .sk-error-backdrop {
  background: rgb(0 0 0 / .2);
}
.sk-root[data-skin="r04"] .sk-error {
  left: calc(var(--r4-inset) + 48px);
  top: auto;
  bottom: 8px;
  align-items: center;
  justify-items: start;
  gap: 6px;
  width: auto;
  height: 44px;
  padding: 0 16px 0 10px;
  border-radius: 22px;
  background: var(--r4-amber);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 3px rgb(0 0 0 / .28);
  color: var(--r4-ink);
  text-align: left;
  translate: none;
}
/* only while open: the core hides the closed dialog with display none, which this must not outrank */
.sk-root[data-skin="r04"] .sk-error[data-open] {
  display: inline-flex;
}
.sk-root[data-skin="r04"] .sk-error .r4-err-glyph {
  width: 24px;
  height: 24px;
  filter: brightness(0);
  opacity: .88;
}
.sk-root[data-skin="r04"] .sk-error .r4-err-label {
  font: 500 11px/1 var(--media-font-family);
  white-space: nowrap;
}
/* the title and description stay the dialog's name and description, visually hidden */
.sk-root[data-skin="r04"] :is(.sk-error-title, .sk-error-text) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* the close button is the whole pill: its hit area, with the focus ring at the pill's radius */
.sk-root[data-skin="r04"] .sk-error-close {
  position: absolute;
  inset: 0;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 22px;
  background: transparent;
  color: transparent;
  font-size: 0;
}
.sk-root[data-skin="r04"] .sk-error-close:focus-visible {
  outline: var(--sk-focus-w) solid var(--sk-focus);
  outline-offset: var(--sk-focus-off);
  box-shadow: 0 0 0 var(--sk-focus-off) var(--sk-focus-gap);
}

/* ---------- StayPlay pass (Nov 13, 2026): frosted bar, amber fill, eye glow, the new controls, waiting ---------- */

/* the bar's backdrop becomes a dark frosted-glass strip docked to the bottom of the player; it comes and goes
   with the controls like the scrim did, so standby still shows the bare film and the line */
.sk-root[data-skin="r04"] .sk-backdrop {
  inset: auto calc(var(--r4-inset) - 8px) 0 calc(var(--r4-inset) - 8px);
  height: 108px;
  border-radius: 16px 16px 0 0;
  background: rgb(9 12 17 / .55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 1px 0 0 rgb(255 255 255 / .05), inset -1px 0 0 rgb(255 255 255 / .05);
}

/* the played run of the line takes the accent amber (#f3b654, the end card's dash); the unplayed run and the
   buffered run keep the sheet's art, and the volume line is untouched */
.sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track > .sk-fill {
  border-image-source: none;
  border-image-width: 0;
  border-radius: 2px;
  background: #f3b654;
}

/* tracking live: the eye glows green. Color and shadow ONLY: the Nov 13 standby rule stands, no opacity here,
   so the eye still fades to 0 with the other controls when the bar hides */
.sk-root[data-skin="r04"] .r4-bar > .r4l-eye[aria-pressed="true"] {
  filter: drop-shadow(0 0 5px rgb(74 222 128 / .85)) drop-shadow(0 0 14px rgb(74 222 128 / .4));
}

/* skip buttons: the sheet's back-10 glyph, and a forward variant drawn from it (arrow flipped, "10" upright) */

/* speed and picture-in-picture: text labels in the bar's own type */
.sk-root[data-skin="r04"] .r4-speed-label,
.sk-root[data-skin="r04"] .r4-pip-label {
  font: 600 13px/1 var(--media-font-family);
  letter-spacing: .02em;
  color: var(--sk-ink);
  text-shadow: 0 1px 2px rgb(0 0 0 / .45);
}
.sk-root[data-skin="r04"] .r4-speed {
  position: relative;
  display: grid;
  place-items: center;
}
.sk-root[data-skin="r04"] .r4-speed-menu {
  position: absolute;
  right: -6px;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 108px;
  padding: 6px;
  border-radius: 12px;
  background: rgb(10 13 18 / .85);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), 0 12px 32px rgb(0 0 0 / .35);
}
.sk-root[data-skin="r04"] .r4-speed-menu[hidden] {
  display: none;
}
.sk-root[data-skin="r04"] .r4-speed-menu button {
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--sk-ink);
  font: 500 14px/1 var(--media-font-family);
  text-align: left;
  padding: 10px;
  min-height: 36px;
  cursor: pointer;
}
.sk-root[data-skin="r04"] .r4-speed-menu button:hover {
  background: rgb(255 255 255 / .12);
}
.sk-root[data-skin="r04"] .r4-speed-menu button[aria-pressed="true"] {
  color: #f3b654;
  font-weight: 600;
}

/* "Waiting for you": shown only while a look-away pause by the live layer is in effect (the skin sets .r4-on
   from the layer's own offer/withdraw/state events); never intercepts a click.
   U14: the block is anchored to the upper part of the picture, not centered. Centered, the glyph and
   words sat inside the big play button's box (audit measurement: glyph 54x35 inside the 88x88 button).
   Top padding is a share of the player's WIDTH, which is a steady proxy here because the picture is
   16:9: 6% of width is about 11% of height, so the words end well above the centered button at
   desktop sizes; the narrow rule below shrinks the block for phone heights. */
.sk-root[data-skin="r04"] .r4-waiting {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6%;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(ellipse 55% 45% at 50% 24%, rgb(6 8 12 / .28), transparent 70%);
}
.sk-root[data-skin="r04"] .r4-waiting.r4-on {
  opacity: 1;
}
.sk-root[data-skin="r04"] .r4-waiting img {
  width: 54px;
  height: auto;
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / .5));
}
.sk-root[data-skin="r04"] .r4-waiting span {
  font: 500 20px/1.2 var(--media-font-family);
  color: #fff;
  letter-spacing: .01em;
  text-shadow: 0 1px 8px rgb(0 0 0 / .65);
}
@media (prefers-reduced-motion: reduce) {
  .sk-root[data-skin="r04"] .r4-waiting {
    transition: none;
  }
}

/* narrow players keep the tight field: the four added controls are wide-bar only */
@container sk (max-width: 519px) {
  .sk-root[data-skin="r04"] .r4-bar > :is(.r4-back, .r4-fwd, .r4-speed, .r4-pip) {
    display: none;
  }
  /* the narrow layout keeps its two-band scrim (top row lives outside the bottom strip) */
  .sk-root[data-skin="r04"] .sk-backdrop {
    inset: 0;
    height: auto;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* U14: on short phone pictures the waiting block shrinks and hugs the top, so it still clears
     the 68px big play button at the center */
  .sk-root[data-skin="r04"] .r4-waiting {
    padding-top: 4%;
    gap: 5px;
  }
  .sk-root[data-skin="r04"] .r4-waiting img {
    width: 34px;
  }
  .sk-root[data-skin="r04"] .r4-waiting span {
    font-size: 14px;
  }
}

/* ---------- Page hero (Nov 13, 2026): the designed title block over the ad and the player ---------- */

.pg-head {
  margin-bottom: 26px;
}
/* the display title is the StayPlay logo lockup (Nov 13, 2026); the h1 keeps the
   text name for semantics and is visually hidden */
.pg-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pg-title::before {
  display: none;
}
.r4-hero-logo {
  display: block;
  width: min(430px, 80%);
  height: auto;
  margin: 14px 0 2px;
}
.r4-hero-tag {
  margin: 16px 0 0;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--pg-ink);
}
.r4-hero-line {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--pg-ink-2);
}
.r4-sec-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pg-ink-2);
}
.r4-ad {
  margin: 34px 0 10px;
}
.r4-ad-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 16px 44px rgb(16 24 40 / .2);
}
.r4-try {
  margin: 30px 0 14px;
}
.r4-try .r4-sec-title {
  margin-bottom: 8px;
  font-size: 20px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--pg-ink);
}
.r4-try-line {
  margin: 0;
  font-size: 16px;
  color: var(--pg-ink-2);
}

/* ---------- Narrow: the time to the top left, captions and fullscreen to the top right; the pill beside play ---------- */

/* Responsive pass (Nov 13, 2026): the pill used to sit above the line on narrow players, where the lifted captions also
   sit (a 358 x 201 phone player has no room for both). It now grows out of play in the bottom row, as on the wide
   player, and the time moves up beside fullscreen to make that room (the aux slot keeps its place before
   the speaker). */
@container sk (max-width: 519px) {
  .sk-root[data-skin="r04"] .r4-bar {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-rows: 44px 1fr 32px 44px;
    grid-template-areas:
      "time time time . . fs"
      ". . . . . ."
      "seek seek seek seek seek seek"
      "play hunch hunch hunch aux vol";
  }
  .sk-root[data-skin="r04"] .r4-bar > .sk-time {
    justify-self: start;
    padding: 0 4px 0 12px;
  }
  /* the flag's time tag a size smaller, so it stays clear of the lifted caption on a phone-sized player */
  .sk-root[data-skin="r04"] .r4-flag-time {
    padding: 2px 6px;
    font-size: 11px;
  }
  /* the time, captions and fullscreen sit at the top, outside the bottom scrim: the scrim gains a top band behind them */
  .sk-root[data-skin="r04"] .sk-backdrop {
    background: var(--r4-scrim-top), var(--sk-scrim);
  }
  .sk-root[data-skin="r04"] .sk-error {
    left: calc(var(--r4-inset) + 48px);
  }
  .sk-root[data-skin="r04"] .sk-bigplay {
    width: 68px;
    height: 68px;
  }
  .sk-root[data-skin="r04"] .sk-bigplay .sk-icon {
    height: 40px;
  }
  .sk-root[data-skin="r04"][data-started]:not([data-ended]) .sk-bigplay {
    opacity: 0;
    pointer-events: none;
  }
}
/* touch: the pill's hit area is 48px tall, so the bottom row is too (the 44px buttons sit centered in it) */
@media (pointer: coarse) {
  .sk-root[data-skin="r04"] .r4-bar {
    grid-template-rows: 1fr 32px 48px;
  }
  @container sk (max-width: 519px) {
    .sk-root[data-skin="r04"] .r4-bar {
      grid-template-rows: 44px 1fr 32px 48px;
    }
  }
}
/* phones: a shorter player, so a smaller cue box to carry (see the root's --sk-cue-clearance). Landscape phones size the
   player by the screen's height (374px tall at 844 x 390): the cue sits lower there, clear of the paused center play */
@media (max-width: 551px) {
  .sk-root[data-skin="r04"] {
    --sk-cue-clearance: 134px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .sk-root[data-skin="r04"] {
    --sk-cue-clearance: 140px;
  }
}

/* ---------- Preference fallbacks ---------- */

@media (prefers-reduced-motion: reduce) {
  .sk-root[data-skin="r04"] .r4-pill {
    transition: opacity 80ms linear;
  }
  .sk-root[data-skin="r04"] :is(.r4-span, .r4-flag, .r4-flag-time) {
    transition: opacity 80ms linear;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="r04"] {
    --r4-amber: #f3b654;
    /* a solid strip behind the row while the controls show, instead of the gradient (and behind the top tools on narrow) */
    --sk-scrim: linear-gradient(to top, #08080c 0, #08080c 96px, transparent 96px);
    --r4-scrim-top: linear-gradient(to bottom, #08080c 0, #08080c 56px, transparent 56px);
  }
  .sk-root[data-skin="r04"] :is(.r4-help, .r4-hint, .r4-flag-time) {
    background: #0e0e10;
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="r04"] {
    --sk-ink-2: #ffffff;
    --sk-focus-w: 3px;
  }
}
@media (forced-colors: active) {
  .sk-root[data-skin="r04"] {
    --sk-scrim: none;
    --r4-scrim-top: none;
  }
  .sk-root[data-skin="r04"] .r4-bar .sk-icon,
  .sk-root[data-skin="r04"] .sk-bigplay .sk-icon,
  .sk-root[data-skin="r04"] .r4-flag {
    filter: drop-shadow(1px 0 0 CanvasText) drop-shadow(-1px 0 0 CanvasText) drop-shadow(0 1px 0 CanvasText) drop-shadow(0 -1px 0 CanvasText);
  }
  /* the pill becomes a system highlight button; its glyph stays white (no darkening) */
  .sk-root[data-skin="r04"] .r4-pill::before,
  .sk-root[data-skin="r04"] .sk-error {
    forced-color-adjust: none;
    border: 1px solid HighlightText;
    background: Highlight;
  }
  .sk-root[data-skin="r04"] :is(.r4-pill, .sk-error) {
    forced-color-adjust: none;
    color: HighlightText;
  }
  .sk-root[data-skin="r04"] :is(.r4-pill-glyph, .sk-error .r4-err-glyph) {
    filter: none;
    opacity: 1;
  }
  .sk-root[data-skin="r04"] .r4-span {
    forced-color-adjust: none;
    background: none;
    box-shadow: none;
    outline: 2px solid Highlight;
  }
  .sk-root[data-skin="r04"] :is(.r4-help, .r4-hint, .r4-flag-time) {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .sk-root[data-skin="r04"] .r4-help kbd {
    color: CanvasText;
  }
  .sk-root[data-skin="r04"] .r4-bar > .sk-time {
    color: CanvasText;
    text-shadow: none;
  }
  .sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track,
  .sk-root[data-skin="r04"] media-volume-slider .sk-track {
    border: 1px solid CanvasText;
    background: Canvas;
    filter: none;
  }
  .sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track::before,
  .sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track > .sk-buffer,
  .sk-root[data-skin="r04"] media-volume-slider .sk-track::before {
    border-image: none;
    background: Canvas;
    opacity: 1;
  }
  .sk-root[data-skin="r04"] .r4-bar .sk-seek .sk-track > .sk-fill,
  .sk-root[data-skin="r04"] media-volume-slider .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="r04"] :is(.sk-empty p, .sk-spinner) {
    border: 2px solid CanvasText;
    background: Canvas;
  }
}