/*
 * R01 Negative Space, on the shared core (round 3 build, Nov 8, 2026).
 *
 * No bar, no panel, no gradient. One short cluster (play, time, volume, captions, more, fullscreen) sits in
 * one of six slots of a full-player grid, chosen by r01-negative.js from the frame at the moment the controls
 * wake; a full-width seek line runs 16px above the bottom edge; captions render in the quieter third. The ink
 * is white over dark regions and near-black over bright ones. Everything is glyph and line; the only surface
 * is a soft local knockout that appears when the region under a group is busy.
 *
 * Ink: every control image is the Gemini sheet's white art (round3/builds/sheets/r01-negative-sheet.jpg,
 * cut with build/tools/cut_art.py), painted in one exact ink by filter: brightness(0) invert(k): k = 1 is
 * white, k = .07 is #121212. The amber playhead is the one image never filtered.
 *
 * The script writes the decisions as attributes on .sk-root (data-r1-slot, data-r1-ink, data-r1-knock, ...);
 * this file only maps them. With no script the cluster sits bottom-left in white ink.
 */

.sk-root[data-skin="r01"] {
  --media-accent-color: #be842e;
  --media-accent-text-color: #121212;
  --media-border-radius: 28px;
  --sk-hit: 44px;
  --sk-icon: 20px;
  --sk-pad: 6px;
  --sk-r-outer: 28px;
  --sk-ink: #ffffff;
  --sk-ink-2: #e8e8ea;
  --sk-surface: rgb(14 14 16 / .78);
  --sk-surface-solid: #0e0e10;
  --sk-scrim: none;
  /* used only when the skin's caption band falls back to the browser's own cues */
  --sk-cue-clearance: 96px;
  /* optical centering: the triangle shifts right by a sixteenth of its width */
  --sk-nudge-play: 1.25px;
  --sk-nudge-replay-x: 1.25px;
}

/* Geometry, per container width (container queries reach descendants only, so the tokens live there) */
.sk-root[data-skin="r01"] :is(.sk-controls, .r1-band, .sk-center, .sk-error) {
  --r1-inset: 20px;
  --r1-row-bottom: 34px;
  /* the concept's 18 to 22px on desktop players; under about 430px the floor drops (to 15px on a 328px phone
     player) so a caption stays within two lines instead of covering the middle of a 184px-tall frame */
  --r1-band-size: clamp(14px, 1.55cqw + 10px, 22px);
  --r1-band-room: calc(var(--r1-band-size) * 2.6 + 12px + 10px);
}
@container sk (max-width: 819px) {
  .sk-root[data-skin="r01"] :is(.sk-controls, .r1-band, .sk-center, .sk-error) {
    --r1-inset: 14px;
  }
}
@container sk (max-width: 519px) {
  .sk-root[data-skin="r01"] :is(.sk-controls, .r1-band, .sk-center, .sk-error) {
    --r1-inset: 10px;
  }
}
@media (pointer: coarse) {
  .sk-root[data-skin="r01"] :is(.sk-controls, .r1-band, .sk-center, .sk-error) {
    --r1-row-bottom: 40px;
    --sk-hit: 48px;
  }
}

/* ---------- Ink scopes: white by default, near-black where the script says the region is bright ---------- */

.sk-root[data-skin="r01"] :is(.r1-row, .r1-a, .r1-b, .sk-seek, .r1-band, .sk-center, .sk-loading, .sk-error, .sk-empty) {
  --r1-ink: #ffffff;
  --r1-inv: 1;
  --r1-opp: 14 14 16;
  --r1-plate-a: .40;
  --sk-focus: var(--r1-ink);
  --sk-focus-gap: rgb(var(--r1-opp));
}
.sk-root[data-r1-ink="dark"] :is(.r1-row, .r1-a),
.sk-root[data-r1-ink-b="dark"] .r1-b,
.sk-root[data-r1-seek-ink="dark"] .sk-seek,
.sk-root[data-r1-band-ink="dark"] .r1-band,
.sk-root[data-r1-center-ink="dark"] :is(.sk-center, .sk-loading),
.sk-root[data-r1-error-ink="dark"] :is(.sk-error, .sk-empty) {
  --r1-ink: #121212;
  --r1-inv: .07;
  --r1-opp: 244 244 242;
}
/* the frame could not be read: the plates go to 55% so white ink holds over any picture */
.sk-root[data-r1-fallback] :is(.r1-row, .r1-a, .r1-b, .sk-seek, .r1-band, .sk-center, .sk-loading) {
  --r1-plate-a: .55;
}

/* every control image takes the ink (the amber playhead is a background on the thumb, not an .sk-icon) */
.sk-root[data-skin="r01"] :is(.r1-a, .r1-b, .sk-center, .sk-loading, .sk-error) .sk-icon {
  filter: brightness(0) invert(var(--r1-inv));
}

/* ---------- The slot grid ---------- */

.sk-root[data-skin="r01"] .r1-stage {
  position: absolute;
  inset: var(--r1-inset) var(--r1-inset) var(--r1-row-bottom) var(--r1-inset);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "tl . tr" ". . ." ". rc ." "bl bc br";
  pointer-events: none;
  /* Nov 15, 2026: above the seek line, whose 48px hit box (88px on touch) comes later in the page and took the bottom
     6px (21px on touch) of every button in a bottom slot. The stage lets the pointer through, so only the buttons on
     screen win; everywhere else, and whenever the cluster is hidden, the seek keeps its whole box. */
  z-index: 1;
}
.sk-root[data-skin="r01"] .r1-row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  grid-area: bl;
  justify-self: start;
  align-self: end;
}
.sk-root[data-r1-slot="bc"] .r1-row { grid-area: bc; justify-self: center; }
.sk-root[data-r1-slot="br"] .r1-row { grid-area: br; justify-self: end; }
.sk-root[data-r1-slot="tl"] .r1-row { grid-area: tl; justify-self: start; align-self: start; }
.sk-root[data-r1-slot="tr"] .r1-row { grid-area: tr; justify-self: end; align-self: start; }
.sk-root[data-r1-slot="rc"] .r1-row { grid-area: rc; justify-self: center; margin-bottom: var(--r1-band-room); }

.sk-root[data-skin="r01"] :is(.r1-a, .r1-b) {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--r1-ink);
}

/* The controls layer stays (the seek line is never hidden); only the cluster comes and goes. It is held
   invisible until the script has placed it for this wake, so a relocation is never seen. */
.sk-root[data-skin="r01"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) {
  opacity: 1;
}
.sk-root[data-skin="r01"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) > .sk-seek {
  pointer-events: auto;
}
.sk-root[data-skin="r01"] :is(.r1-a, .r1-b) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear;
}
.sk-root[data-skin="r01"][data-r1-placed] .sk-controls:is([data-visible], :has(:focus-visible)) :is(.r1-a, .r1-b) {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 100ms;
}

/* ---------- Knockouts: a 24px-blurred darkening or lightening at 40%, hugging the group ---------- */

.sk-root[data-skin="r01"] .r1-knock {
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 42px;
  background: rgb(var(--r1-opp) / var(--r1-plate-a));
  filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear;
}
.sk-root[data-skin="r01"] :is(.r1-a, .r1-b) > .r1-knock {
  display: none;
}
.sk-root[data-skin="r01"][data-r1-placed][data-r1-knock="on"] .sk-controls:is([data-visible], :has(:focus-visible)) .r1-row > .r1-knock {
  opacity: 1;
}

/* ---------- Buttons ---------- */

.sk-root[data-skin="r01"] :is(.r1-a, .r1-b) .sk-btn {
  --sk-btn-radius: calc(var(--sk-hit) / 2);
  transition: background-color var(--sk-exit) linear;
}
.sk-root[data-skin="r01"] :is(.r1-a, .r1-b) .sk-btn:hover {
  background-color: rgb(var(--r1-opp) / .22);
  transition-duration: var(--sk-enter);
}
.sk-root[data-skin="r01"] .sk-cc::after {
  content: none;
}
/* captions off: the chip filled at 50% (its letters stay see-through holes) */
.sk-root[data-skin="r01"]:not([data-captions]) .sk-cc .sk-icon {
  opacity: .5;
}
.sk-root[data-skin="r01"] .sk-cc .sk-icon {
  width: 26px;
}
.sk-root[data-skin="r01"] .r1-more-btn .sk-icon {
  width: 18px;
}

/* ---------- Time: inside the cluster, tabular, its slot reserved for remaining time's minus sign ---------- */

.sk-root[data-skin="r01"] .r1-a .sk-time {
  min-height: var(--sk-hit);
  padding: 0 8px;
  color: var(--r1-ink);
  font: 500 13px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
@container sk (min-width: 820px) {
  .sk-root[data-skin="r01"] .r1-a .sk-time {
    font-size: 14px;
  }
}
.sk-root[data-skin="r01"] .r1-a .sk-time media-time:first-child {
  min-width: calc((var(--sk-time-chars) + 1) * 1ch);
  text-align: right;
  cursor: pointer;
  border-radius: 6px;
}
.sk-root[data-skin="r01"] .r1-a .sk-time media-time-separator {
  color: inherit;
  opacity: .72;
}

/* ---------- Volume: a 120px vertical ink slider grows from the speaker's center ---------- */

.sk-root[data-skin="r01"] .r1-a .sk-volume {
  position: relative;
}
.sk-root[data-skin="r01"] media-volume-slider {
  --sk-thumb: 12px;
  --r1-vol-h: 120px; /* the slider and the upright line inside it; shorter on phone-size players (see the narrow layout) */
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  width: var(--sk-hit);
  height: var(--r1-vol-h);
  margin: 0;
  translate: -50% 0;
  display: block;
  border-radius: calc(var(--sk-hit) / 2);
  transform-origin: 50% 100%;
  scale: 1 0;
  opacity: 0;
  pointer-events: none;
  transition: scale 120ms var(--sk-ease), opacity 120ms linear;
}
/* its own soft plate, always on while it shows */
.sk-root[data-skin="r01"] media-volume-slider::before {
  content: "";
  position: absolute;
  inset: -10px 2px;
  z-index: -1;
  border-radius: calc(var(--sk-hit) / 2);
  background: rgb(var(--r1-opp) / var(--r1-plate-a));
  filter: blur(10px);
}
.sk-root[data-r1-slot^="t"] media-volume-slider {
  top: calc(100% - 2px);
  bottom: auto;
  transform-origin: 50% 0;
}
.sk-root[data-skin="r01"] .sk-volume:is(:hover, :focus-within) media-volume-slider,
.sk-root[data-skin="r01"] media-volume-slider[data-interactive],
.sk-root[data-skin="r01"][data-r1-vol-open] media-volume-slider {
  scale: 1 1;
  opacity: 1;
  pointer-events: auto;
  transition-duration: 180ms;
}
@media (pointer: coarse) {
  .sk-root[data-skin="r01"] .sk-volume:is(:hover, :focus-within):not(:has(:focus-visible)) media-volume-slider {
    scale: 1 0;
    opacity: 0;
    pointer-events: none;
  }
  .sk-root[data-skin="r01"][data-r1-vol-open] media-volume-slider {
    scale: 1 1;
    opacity: 1;
    pointer-events: auto;
  }
}
.sk-root[data-skin="r01"] media-volume-slider .sk-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  height: auto;
  translate: -50% 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
/* the sheet's seek strips, turned upright (the element is laid out horizontally and rotated, so the art is
   never redrawn; the left end becomes the bottom) */
.sk-root[data-skin="r01"] media-volume-slider .sk-track::before,
.sk-root[data-skin="r01"] media-volume-slider .sk-track > .sk-fill {
  content: "";
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--r1-vol-h);
  height: 4px;
  translate: -50% -50%;
  rotate: -90deg;
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(4px * .4583);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 22 fill;
  border-image-width: 0 calc(4px * .4583);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  filter: brightness(0) invert(var(--r1-inv));
}
.sk-root[data-skin="r01"] media-volume-slider .sk-track::before {
  opacity: .40;
}
.sk-root[data-skin="r01"] media-volume-slider .sk-track > .sk-fill {
  opacity: .85;
  border-width: 0 calc(4px * .449);
  border-image-source: url(art/seek-played.png);
  border-image-width: 0 calc(4px * .449);
  clip-path: inset(-2px calc(100% - var(--media-slider-fill, 0%)) -2px 0);
}
/* thumb containment (U16 standard), vertical: travel clamped to [half thumb, 100% - half thumb]; the
   volume thumb never grows, so no extra allowance */
.sk-root[data-skin="r01"] media-volume-slider .sk-thumb {
  --sk-thumb: 12px;
  left: 50%;
  top: auto;
  bottom: 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));
  translate: -50% 50%;
  scale: 1;
  opacity: 1;
  background: url(art/knob-ink.png) center / contain no-repeat;
  filter: brightness(0) invert(var(--r1-inv));
}
/* fallback if the slider did not take the vertical orientation: a horizontal run growing from the speaker */
.sk-root[data-r1-vol-horizontal] media-volume-slider {
  left: 50%;
  bottom: calc(100% - 2px);
  width: 112px;
  height: var(--sk-hit);
  transform-origin: 50% 100%;
}
.sk-root[data-r1-vol-horizontal] media-volume-slider .sk-track {
  inset: 50% 12px auto 12px;
  width: auto;
  height: 4px;
  translate: 0 -50%;
}
.sk-root[data-r1-vol-horizontal] media-volume-slider .sk-track::before,
.sk-root[data-r1-vol-horizontal] media-volume-slider .sk-track > .sk-fill {
  left: 0;
  top: 0;
  width: 100%;
  translate: none;
  rotate: none;
}
.sk-root[data-r1-vol-horizontal] media-volume-slider .sk-thumb {
  top: 50%;
  bottom: auto;
  left: clamp(calc(12px + var(--sk-thumb) / 2), var(--media-slider-fill), calc(100% - 12px - var(--sk-thumb) / 2));
  translate: -50% -50%;
}

/* ---------- The seek line: full width, 16px above the bottom edge, always visible ---------- */

.sk-root[data-skin="r01"] .sk-seek {
  --r1-line: 2px;
  position: absolute;
  left: var(--r1-inset);
  right: var(--r1-inset);
  /* a 48px hit box centered on the line: 24px above it, the rest under the frame's edge */
  bottom: -8px;
  height: 48px;
  border-radius: 0;
}
@media (pointer: coarse) {
  .sk-root[data-skin="r01"] .sk-seek {
    bottom: -28px;
    height: 88px;
  }
}
.sk-root[data-skin="r01"] .sk-seek:is(:hover, [data-pointing], [data-dragging]) {
  --r1-line: 6px;
}
.sk-root[data-skin="r01"] .sk-seek .sk-track {
  height: var(--r1-line);
  border-radius: 0;
  background: none;
  overflow: visible;
  /* the line crosses the whole frame, so one ink can meet both bright and dark ground along it: a 1px edge of
     the opposite ink keeps it a visible line everywhere, never a ghost */
  filter: drop-shadow(0 0 1px rgb(var(--r1-opp) / .75));
  transition: height 120ms var(--sk-ease);
}
.sk-root[data-skin="r01"] .sk-seek .sk-track::before,
.sk-root[data-skin="r01"] .sk-seek .sk-track > :is(.sk-buffer, .sk-fill) {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--r1-line) * .4583);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 22 fill;
  border-image-width: 0 calc(var(--r1-line) * .4583);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  filter: brightness(0) invert(var(--r1-inv));
  /* the seek's ink may change during idle playback: a quiet crossfade */
  transition: filter 240ms linear;
}
/* unplayed: the ink at 40% (a visible line, never a ghost) */
.sk-root[data-skin="r01"] .sk-seek .sk-track::before {
  opacity: .40;
}
/* buffered: a third tone the state never depends on */
.sk-root[data-skin="r01"] .sk-seek .sk-track > .sk-buffer {
  opacity: .55;
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
/* played: the ink at 85% */
.sk-root[data-skin="r01"] .sk-seek .sk-track > .sk-fill {
  opacity: .85;
  border-width: 0 calc(var(--r1-line) * .449);
  border-image-source: url(art/seek-played.png);
  border-image-width: 0 calc(var(--r1-line) * .449);
  clip-path: inset(-2px calc(100% - var(--media-slider-fill, 0%)) -2px 0);
}
/* chapters, when a chapters track exists: 1px gaps cut into the line (the mask is built by the script) */
.sk-root[data-skin="r01"][data-r1-chapters] .sk-seek .sk-track {
  -webkit-mask-image: var(--r1-chapter-mask);
  mask-image: var(--r1-chapter-mask);
}
/* the frame could not be read: light ink with a dark edge so the line reads on anything */
.sk-root[data-r1-fallback] .sk-seek .sk-track {
  filter: drop-shadow(0 0 1px rgb(0 0 0 / .8));
}
/* the playhead: the sheet's lone amber dot, the one warm accent, never inked */
.sk-root[data-skin="r01"] .sk-seek .sk-thumb {
  --sk-thumb: 12px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  /* thumb containment (U16 standard): the dot does not grow (the line thickens instead), so travel is
     clamped to [half width, 100% - half width] with no extra allowance */
  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));
}
/* hover: a tabular time tag at the pointer (no thumbnail) on a small plate of the opposite ink */
.sk-root[data-skin="r01"] .sk-seek .sk-preview {
  bottom: calc(50% + 14px);
  z-index: 2; /* above the cluster's stage (z-index 1), as before it was raised */
}
.sk-root[data-skin="r01"] .sk-seek .sk-preview-image {
  display: none;
}
.sk-root[data-skin="r01"] .sk-seek .sk-preview-time {
  padding: 5px 8px;
  border-radius: 6px;
  background: rgb(var(--r1-opp) / .80);
  color: var(--r1-ink);
  font: 500 12px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
}

/* ---------- Center play: the sheet's play at 72px, in the ink and with the knockout of the center ---------- */

.sk-root[data-skin="r01"] .sk-bigplay {
  --sk-icon: 72px;
  --sk-nudge-play: 4.5px;
  --sk-nudge-replay-x: 4.5px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.sk-root[data-skin="r01"] .sk-bigplay::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 50%;
  background: rgb(var(--r1-opp) / var(--r1-plate-a));
  filter: blur(24px);
  opacity: 0;
  transition: opacity 160ms linear;
}
.sk-root[data-r1-center-knock="on"] .sk-bigplay::before {
  opacity: 1;
}

/* ---------- Caption band: the real track's active cues, in the quieter third, in the ink that reads ---------- */

/* centered by auto margins inside the full width (a left: 50% anchor would cap its shrink-to-fit width at half
   the player and wrap every caption early) */
.sk-root[data-skin="r01"] .r1-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--r1-row-bottom);
  z-index: 2;
  display: none;
  width: fit-content;
  max-width: 80%;
  margin-inline: auto;
  pointer-events: none;
  text-align: center;
}
@container sk (max-width: 519px) {
  .sk-root[data-skin="r01"] .r1-band {
    max-width: 92%;
  }
}
.sk-root:is([data-r1-band="top"], [data-r1-band="bottom"]) .r1-band {
  display: block;
}
.sk-root[data-r1-band="top"] .r1-band {
  top: var(--r1-inset);
  bottom: auto;
}
/* when the cluster is pinned to bottom-left (reduced motion, or a frame that cannot be read), the band sits
   just above the cluster's row so the two never overlap and neither ever moves */
.sk-root[data-r1-band-raised][data-r1-band="bottom"] .r1-band {
  bottom: calc(var(--r1-row-bottom) + var(--sk-hit) + 10px);
}
.sk-root[data-skin="r01"] .r1-band-text {
  position: relative;
  margin: 0;
  padding: 6px 14px;
  color: var(--r1-ink);
  font: 500 var(--r1-band-size)/1.3 var(--media-font-family);
  white-space: pre-line;
  text-wrap: balance;
}
.sk-root[data-skin="r01"] .r1-band-knock {
  position: absolute;
  inset: -8px -14px;
  border-radius: 14px;
  background: rgb(var(--r1-opp) / var(--r1-plate-a));
  filter: blur(24px);
  opacity: 0;
  transition: opacity 160ms linear;
}
.sk-root[data-r1-band-knock="on"] .r1-band-knock {
  opacity: 1;
}
/* the media element's own cues stay hidden by the script; if that ever fails, keep them above the line */

/* ---------- More menu: grows from its glyph; Speed and Picture in picture ---------- */

.sk-root[data-skin="r01"] .r1-more {
  position: relative;
  display: inline-flex;
}
.sk-root[data-skin="r01"] .r1-more[hidden] {
  display: none;
}
.sk-root[data-skin="r01"] .r1-menu {
  position: absolute;
  right: -6px;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: grid;
  gap: 2px;
  width: 216px;
  padding: 6px;
  border-radius: 14px;
  background: rgb(var(--r1-opp) / .88);
  color: var(--r1-ink);
  font: 500 14px/1 var(--media-font-family);
  transform-origin: calc(100% - 28px) 100%;
}
.sk-root[data-skin="r01"] .r1-menu[hidden] {
  display: none;
}
.sk-root[data-r1-slot^="t"] .r1-menu {
  top: calc(100% + 10px);
  bottom: auto;
  transform-origin: calc(100% - 28px) 0;
}
/* narrow players (a phone is 184px tall): no room below the top-right group, so the menu opens over that group
   itself, its top edge just above it (the Z07 phone pattern); focus is inside the menu while it is open */
@container sk (max-width: 519px) {
  .sk-root[data-skin="r01"] .r1-menu {
    top: -4px;
    bottom: auto;
    transform-origin: calc(100% - 28px) 22px;
  }
  .sk-root[data-skin="r01"] .r1-menu-head {
    margin: 3px 8px 4px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="r01"] .r1-menu:not([hidden]) {
    animation: r1-grow 180ms var(--sk-ease);
  }
}
@keyframes r1-grow {
  from { opacity: 0; scale: .92; }
}
.sk-root[data-skin="r01"] .r1-menu-head {
  margin: 4px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
}
.sk-root[data-skin="r01"] .r1-rates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.sk-root[data-skin="r01"] .r1-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.sk-root[data-skin="r01"] .r1-item-wide {
  justify-content: flex-start;
  margin-top: 4px;
}
.sk-root[data-skin="r01"] .r1-item:hover {
  background: color-mix(in srgb, var(--r1-ink) 12%, transparent);
}
.sk-root[data-skin="r01"] .r1-item[aria-checked="true"] {
  background: color-mix(in srgb, var(--r1-ink) 18%, transparent);
  font-weight: 600;
}
.sk-root[data-skin="r01"] .r1-item:focus-visible {
  outline: 2px solid var(--r1-ink);
  outline-offset: -2px;
}

/* ---------- Designed states ---------- */

.sk-root[data-skin="r01"] .sk-spinner {
  width: 56px;
  height: 56px;
  background: rgb(var(--r1-opp) / .45);
  box-shadow: 0 0 24px 8px rgb(var(--r1-opp) / .35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sk-root[data-skin="r01"] .sk-spinner .sk-icon {
  width: 26px;
  height: 26px;
}

/* Error: the same slot and ink logic, a short message and the sheet's retry glyph, at the bottom-left slot */
.sk-root[data-skin="r01"] .sk-error {
  left: var(--r1-inset);
  top: auto;
  bottom: var(--r1-row-bottom);
  translate: none;
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  gap: 4px 12px;
  width: min(360px, calc(100% - 2 * var(--r1-inset)));
  padding: 14px 14px 14px 16px;
  border-radius: 28px;
  background: rgb(var(--r1-opp) / .86);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--r1-ink);
  text-align: left;
}
.sk-root[data-skin="r01"] .sk-error .r1-retry {
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
}
.sk-root[data-skin="r01"] .sk-error-title {
  grid-column: 2;
  font: 600 15px/1.25 var(--media-font-family);
}
.sk-root[data-skin="r01"] .sk-error-text {
  grid-column: 2;
  color: var(--r1-ink);
  opacity: .82;
  font-size: 13px;
}
.sk-root[data-skin="r01"] .sk-error-close {
  grid-column: 1 / -1;
  justify-self: stretch;
  height: 44px;
  margin-top: 8px;
  border-radius: 22px;
  background: var(--r1-ink);
  color: rgb(var(--r1-opp));
  /* Video.js writes its own "OK" into this button; the button retries here, so its visible word is "Retry",
     matching the accessible name the script sets (label in name) */
  font-size: 0;
}
.sk-root[data-skin="r01"] .sk-error-close::after {
  content: "Retry";
  font: 600 14px/1 var(--media-font-family);
}
.sk-root[data-skin="r01"] .sk-empty p {
  padding: 12px 20px;
  border-radius: 999px;
  background: rgb(var(--r1-opp) / .6);
  color: var(--r1-ink);
}

/* ---------- Narrow: captions, more and fullscreen take the top-right slot; play, time, volume stay quiet ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="r01"] .r1-row {
    display: contents;
  }
  .sk-root[data-skin="r01"] .r1-row > .r1-knock {
    display: none;
  }
  .sk-root[data-skin="r01"] :is(.r1-a, .r1-b) > .r1-knock {
    display: block;
  }
  .sk-root[data-skin="r01"][data-r1-placed][data-r1-knock="on"] .sk-controls:is([data-visible], :has(:focus-visible)) .r1-a > .r1-knock,
  .sk-root[data-skin="r01"][data-r1-placed][data-r1-knock-b="on"] .sk-controls:is([data-visible], :has(:focus-visible)) .r1-b > .r1-knock {
    opacity: 1;
  }
  .sk-root[data-skin="r01"] .r1-a { grid-area: bl; justify-self: start; align-self: end; }
  .sk-root[data-r1-slot="bc"] .r1-a { grid-area: bc; justify-self: center; }
  .sk-root[data-r1-slot="br"] .r1-a { grid-area: br; justify-self: end; }
  .sk-root[data-r1-slot="tl"] .r1-a { grid-area: tl; justify-self: start; align-self: start; }
  .sk-root[data-r1-slot="rc"] .r1-a { grid-area: rc; justify-self: center; margin-bottom: var(--r1-band-room); }
  .sk-root[data-skin="r01"] .r1-b { grid-area: tr; justify-self: end; align-self: start; }
  .sk-root[data-skin="r01"] .r1-a .sk-time {
    padding: 0 4px;
    font-size: 12px;
  }
  .sk-root[data-skin="r01"] .sk-bigplay {
    --sk-icon: 56px;
    --sk-nudge-play: 3.5px;
    --sk-nudge-replay-x: 3.5px;
    width: 76px;
    height: 76px;
  }
  /* a 184px-tall phone frame has one center line: after the first play, and whenever the cluster is raised over
     a caption band, the center play gives way (the cluster's own play is the accessible one) */
  .sk-root[data-skin="r01"][data-started]:not([data-ended]) .sk-bigplay,
  .sk-root[data-r1-slot="rc"] .sk-bigplay {
    opacity: 0;
    pointer-events: none;
  }
  /* Nov 15, 2026: a phone player is about 200px tall, so the 120px volume slider ran off the top (60px over the raised
     slot, 5px over a bottom slot). It takes the room above a bottom-slot row (56.25cqw is the 16:9 player's height), and
     over the raised slot, which has no room above it, it opens downward into the room below the row. */
  .sk-root[data-skin="r01"] media-volume-slider {
    --r1-vol-h: min(120px, calc(56.25cqw - var(--r1-row-bottom) - var(--sk-hit) - 10px));
  }
  .sk-root[data-r1-slot="rc"]:not([data-r1-vol-horizontal]) media-volume-slider {
    --r1-vol-h: min(120px, calc(56.25cqw - var(--r1-inset) - 2 * var(--sk-hit) - 6px), calc(var(--r1-row-bottom) + var(--r1-band-room) - 6px));
    top: calc(100% - 2px);
    bottom: auto;
    transform-origin: 50% 0;
  }
}

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

/* Reduced motion: the script pins the cluster bottom-left; here nothing scales or thickens */
@media (prefers-reduced-motion: reduce) {
  .sk-root[data-skin="r01"] .sk-seek .sk-track,
  .sk-root[data-skin="r01"] .sk-seek .sk-track::before,
  .sk-root[data-skin="r01"] .sk-seek .sk-track > :is(.sk-buffer, .sk-fill) {
    transition: none;
  }
  .sk-root[data-skin="r01"] media-volume-slider {
    transition: opacity 80ms linear;
  }
}

/* Reduced transparency: every knockout becomes a solid plate, always on while its group shows */
@media (prefers-reduced-transparency: reduce) {
  .sk-root[data-skin="r01"] .r1-knock,
  .sk-root[data-skin="r01"] .r1-band-knock,
  .sk-root[data-skin="r01"] .sk-bigplay::before {
    filter: none;
  }
  .sk-root[data-skin="r01"] .r1-knock {
    inset: -6px;
    border-radius: 34px;
    background: rgb(var(--r1-opp));
  }
  .sk-root[data-skin="r01"][data-r1-placed] .sk-controls:is([data-visible], :has(:focus-visible)) .r1-row > .r1-knock,
  .sk-root[data-skin="r01"] .r1-band-knock,
  .sk-root[data-skin="r01"] .sk-bigplay::before {
    opacity: 1;
    background: rgb(var(--r1-opp));
  }
  .sk-root[data-skin="r01"] .r1-band-knock {
    inset: -2px -6px;
    border-radius: 12px;
  }
  .sk-root[data-skin="r01"] media-volume-slider::before {
    filter: none;
    background: rgb(var(--r1-opp));
  }
  .sk-root[data-skin="r01"] .r1-menu,
  .sk-root[data-skin="r01"] .sk-error {
    background: rgb(var(--r1-opp));
  }
}
@media (prefers-reduced-transparency: reduce) {
  @container sk (max-width: 519px) {
    .sk-root[data-skin="r01"][data-r1-placed] .sk-controls:is([data-visible], :has(:focus-visible)) :is(.r1-a, .r1-b) > .r1-knock {
      opacity: 1;
      background: rgb(var(--r1-opp));
    }
  }
}

/* More contrast: knockouts always on at 60%, the unplayed run at 60%, a 3px focus ring */
@media (prefers-contrast: more) {
  .sk-root[data-skin="r01"] :is(.r1-row, .r1-a, .r1-b, .sk-seek, .r1-band, .sk-center, .sk-loading) {
    --r1-plate-a: .60;
    --sk-focus-w: 3px;
  }
  .sk-root[data-skin="r01"][data-r1-placed] .sk-controls:is([data-visible], :has(:focus-visible)) .r1-row > .r1-knock,
  .sk-root[data-skin="r01"] .r1-band-knock,
  .sk-root[data-skin="r01"] .sk-bigplay::before {
    opacity: 1;
  }
  .sk-root[data-skin="r01"] .sk-seek .sk-track::before {
    opacity: .60;
  }
  /* Nov 15, 2026: narrow players use the groups' own knockouts (the row's is not shown there) */
  @container sk (max-width: 519px) {
    .sk-root[data-skin="r01"][data-r1-placed] .sk-controls:is([data-visible], :has(:focus-visible)) :is(.r1-a, .r1-b) > .r1-knock {
      opacity: 1;
    }
  }
}

/* Forced colors: system colors on solid backplates; the glyph ink follows the forced theme's background */
@media (forced-colors: active) {
  .sk-root[data-skin="r01"] :is(.r1-row, .r1-a, .r1-b, .sk-seek, .r1-band, .sk-center, .sk-loading, .sk-error) {
    --r1-inv: 0;
  }
  .sk-root[data-skin="r01"] :is(.r1-a, .r1-b, .sk-center, .sk-loading, .sk-error) .sk-icon {
    filter: brightness(0) invert(var(--r1-inv)) drop-shadow(1px 0 0 Canvas) drop-shadow(-1px 0 0 Canvas) drop-shadow(0 1px 0 Canvas) drop-shadow(0 -1px 0 Canvas);
  }
  .sk-root[data-skin="r01"] :is(.r1-knock, .r1-band-knock) {
    inset: -4px;
    border: 1px solid CanvasText;
    border-radius: 30px;
    background: Canvas;
    filter: none;
    opacity: 1 !important;
  }
  /* Nov 15, 2026: the row's plate is a sibling of the groups, not inside them, so it must leave with the cluster
     (it stayed on the picture as an empty bordered plate while the controls were hidden) */
  .sk-root[data-skin="r01"]:not([data-r1-placed]) .r1-row > .r1-knock,
  .sk-root[data-skin="r01"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) .r1-row > .r1-knock {
    opacity: 0 !important;
  }
  .sk-root[data-skin="r01"] :is(.r1-a, .r1-b) .sk-time,
  .sk-root[data-skin="r01"] .r1-band-text {
    color: CanvasText;
  }
  .sk-root[data-skin="r01"] .sk-seek .sk-track {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="r01"] .sk-seek .sk-track::before,
  .sk-root[data-skin="r01"] .sk-seek .sk-track > .sk-buffer {
    border-image: none;
    background: Canvas;
    filter: none;
    opacity: 1;
  }
  .sk-root[data-skin="r01"] .sk-seek .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    filter: none;
    opacity: 1;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="r01"] .sk-bigplay::before {
    border: 1px solid CanvasText;
    background: Canvas;
    filter: none;
    opacity: 1;
  }
  .sk-root[data-skin="r01"] :is(.r1-menu, .sk-error, .sk-empty p, .sk-spinner) {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .sk-root[data-skin="r01"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .sk-root[data-skin="r01"] media-volume-slider::before {
    border: 1px solid CanvasText;
    background: Canvas;
    filter: none;
  }
}
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .sk-root[data-skin="r01"] :is(.r1-row, .r1-a, .r1-b, .sk-seek, .r1-band, .sk-center, .sk-loading, .sk-error) {
    --r1-inv: 1;
  }
}