/*
 * R02 Focal Plane, on the shared core (round 3 build, Nov 8, 2026).
 *
 * No bar. A full-width seek line with the time at its right end, and below it one centered row: play, speaker,
 * captions, fullscreen. The whole system follows one number per control, its focus (--r2-f, 0 to 1), written by
 * r02-focus.js from the distance between the pointer (or the keyboard focus) and the control: at rest a glyph is
 * 28px, 55% and slightly soft; as the hand comes within 160px it sharpens, brightens and grows to 32px, and the
 * nearest one gains a 1px ring of pale cyan light. The time and the seek are never blurred. Approaches are
 * immediate, departures settle over about 240ms, so exits are quieter than entrances.
 *
 * Every control image is the ChatGPT sheet's own art (round3/builds/sheets/r02-focal-sheet.png), drawn sharp and
 * cut with build/tools/cut_art.py at its native size; the softness is applied live, never baked in. The CSS draws
 * light, rings and the local shades, never a glyph. Without the script the row shows sharp (--r2-f defaults to 1).
 */

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

.sk-root[data-skin="r02"] {
  --media-accent-color: #93f4f6;
  --media-accent-text-color: #0b0d12;
  --media-font-family: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --media-border-radius: 24px;
  --sk-hit: 48px;
  --sk-icon: 32px;
  --sk-pad: 6px;
  --sk-r-outer: 24px;
  --sk-ink: #ffffff;
  --sk-ink-2: #dfe4ea;
  --sk-surface: rgb(11 13 18 / .82);
  --sk-surface-solid: #0b0d12;
  --sk-scrim: none;
  --sk-focus: #ffffff;
  --sk-focus-gap: #0b0d12;
  --sk-cc-on: #93f4f6;
  /* the cue box clears the seek box, whose top is 152px up (Nov 15, 2026: Chrome 157 hangs the cue box below the core's
     line instead of above it, so 180px left it on the seek line; 152px + the cue, about 41px on a 630px player, + a gap.
     Plain px: the core reads it with parseFloat) */
  --sk-cue-clearance: 200px;
  --r2-accent: #93f4f6;
  /* local shades. The concept's 35% left white at 2.5:1 behind the row on the sample's brightest frames;
     measured: 50% gives 3.87:1 (in-focus glyphs need 3:1), and the time's own shade (below) gives 5.81:1 */
  --r2-shade-a: .5;
  --r2-rest: .55;
}

.sk-root[data-skin="r02"] :is(.sk-controls, .sk-center) {
  --r2-inset: 24px;
  --r2-row-bottom: 28px;
  --r2-seek-gap: 44px;
  --r2-gap: clamp(16px, 5cqw, 72px);
  --r2-glyph: 28px;
}
@container sk (max-width: 819px) {
  .sk-root[data-skin="r02"] :is(.sk-controls, .sk-center) {
    --r2-inset: 16px;
  }
}
@container sk (max-width: 519px) {
  .sk-root[data-skin="r02"] :is(.sk-controls, .sk-center) {
    --r2-inset: 10px;
    --r2-row-bottom: 8px;
    --r2-seek-gap: 8px;
    --r2-glyph: 24px;
    --sk-hit: 44px;
  }
}

/* The row never hides: at rest it holds the far focal state (the core's idle fade is overridden) */
.sk-root[data-skin="r02"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) {
  opacity: 1;
}
.sk-root[data-skin="r02"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) > .r2-bar {
  pointer-events: auto;
}

/* ---------- The row ---------- */

.sk-root[data-skin="r02"] .r2-bar {
  position: absolute;
  left: var(--r2-inset);
  right: var(--r2-inset);
  bottom: var(--r2-row-bottom);
  height: var(--sk-hit);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2-gap);
  color: var(--sk-ink);
  font: 500 14px/1 var(--media-font-family);
  --r2-time-room: calc((2 * var(--sk-time-chars) + 2) * 1ch + 20px);
}

/* focus, the one number: size, light and sharpness of every glyph in the field */
.sk-root[data-skin="r02"] :is(.r2-bar .sk-btn, .sk-bigplay) {
  --r2-f: 1;
}
.sk-root[data-skin="r02"] .r2-bar .sk-btn {
  --sk-btn-radius: calc(var(--sk-hit) / 2);
  background: none;
}
.sk-root[data-skin="r02"] .r2-bar .sk-btn .sk-icon {
  width: calc(var(--r2-glyph) + 4px * var(--r2-f));
  height: calc(var(--r2-glyph) + 4px * var(--r2-f));
  opacity: calc(var(--r2-rest) + (1 - var(--r2-rest)) * var(--r2-f));
  filter: blur(calc(.6px * (1 - var(--r2-f))));
}
.sk-root[data-skin="r02"] .r2-bar .sk-cc .sk-icon {
  width: calc((var(--r2-glyph) + 4px * var(--r2-f)) * 1.45);
}
/* the in-focus cue: a 1px ring of light at the hit circle's radius plus 4px */
.sk-root[data-skin="r02"] :is(.r2-bar .sk-btn, .sk-bigplay)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--sk-hit) + 8px);
  height: calc(var(--sk-hit) + 8px);
  translate: -50% -50%;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--r2-accent), 0 0 6px rgb(147 244 246 / .35);
  opacity: 0;
  pointer-events: none;
}
.sk-root[data-skin="r02"] .sk-bigplay::before {
  width: 104px;
  height: 104px;
}
.sk-root[data-skin="r02"] [data-r2-near]::before {
  opacity: var(--r2-f);
}

/* captions: on = a short pale cyan line under the chip (shape and position, not color alone); off = no line and
   the chip at 70% of its focus light; the label always reads the button's current name */
.sk-root[data-skin="r02"] .sk-cc::after {
  bottom: 5px;
  opacity: 0;
}
.sk-root[data-skin="r02"][data-captions] .sk-cc::after {
  opacity: calc(var(--r2-rest) + (1 - var(--r2-rest)) * var(--r2-f));
  scale: 1 1;
}
.sk-root[data-skin="r02"]:not([data-captions]) .r2-bar .sk-cc .sk-icon {
  opacity: calc((var(--r2-rest) + (1 - var(--r2-rest)) * var(--r2-f)) * .7);
}

/* labels replace tooltips: 11px caps under the control, fading in past half focus */
.sk-root[data-skin="r02"] .r2-label {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  translate: -50% 0;
  color: #ffffff;
  font: 500 11px/1 var(--media-font-family);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(0 0 0 / .55);
  opacity: clamp(0, calc((var(--r2-f, 0) - .5) * 2), 1);
  pointer-events: none;
}
/* Nov 15, 2026: only the ringed (nearest) control shows its name; with every label fading in past half focus, two
   neighbours' names showed at once between them and ran into each other */
.sk-root[data-skin="r02"] .r2-label:not([data-r2-near]) {
  opacity: 0;
}
/* the label's own local shade (Nov 15, 2026; the time's technique): the row's shade fades out where the labels sit, which
   left the 11px caps at 2.8:1 on the bright frames */
.sk-root[data-skin="r02"] .r2-label::before {
  content: "";
  position: absolute;
  inset: -3px -8px;
  z-index: -1;
  border-radius: 8px;
  background: rgb(0 0 0 / .6);
  filter: blur(6px);
  pointer-events: none;
}

/* the local shades: a 24px-blurred darkening restricted to the row's own extent, and one along the seek line */
.sk-root[data-skin="r02"] .r2-shade {
  position: absolute;
  z-index: -1;
  border-radius: 24px;
  background: rgb(0 0 0 / var(--r2-shade-a));
  filter: blur(24px);
  pointer-events: none;
}
.sk-root[data-skin="r02"] .r2-shade-row {
  left: var(--r2-row-l, calc(50% - 170px));
  width: var(--r2-row-w, 340px);
  top: -14px;
  bottom: -22px;
}
.sk-root[data-skin="r02"] .r2-shade-seek {
  /* 64px centered on the 32px seek box: a 24px blur spreads a thin strip too far to darken anything */
  left: -12px;
  right: -12px;
  bottom: calc(100% + var(--r2-seek-gap) - 16px);
  height: 64px;
}

/* ---------- Time: at the right end of the seek line, tabular, always sharp ---------- */

.sk-root[data-skin="r02"] .r2-bar > .sk-time {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--r2-seek-gap));
  height: 32px;
  color: #ffffff;
  font: 500 14px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgb(0 0 0 / .45);
}
/* the time's own local shade (restricted to its extent, like the row's), so 14px figures hold 4.5:1 */
.sk-root[data-skin="r02"] .r2-bar > .sk-time::before {
  content: "";
  position: absolute;
  inset: 2px -12px;
  z-index: -1;
  border-radius: 14px;
  background: rgb(0 0 0 / var(--r2-time-a, .6));
  filter: blur(10px);
  pointer-events: none;
}
.sk-root[data-skin="r02"] .r2-bar > .sk-time media-time-separator,
.sk-root[data-skin="r02"] .r2-bar > .sk-time media-time:last-child {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the full-width line, lensing as the hand nears it ---------- */

.sk-root[data-skin="r02"] .r2-bar > .sk-seek {
  --r2-line: 2px;
  --sk-seek-hit: 32px;
  position: absolute;
  left: 0;
  right: var(--r2-time-room);
  bottom: calc(100% + var(--r2-seek-gap));
  height: 32px;
  border-radius: 8px;
}
.sk-root[data-skin="r02"] .r2-bar > .sk-seek:is([data-r2-lens], [data-r2-scrub]) {
  --r2-line: 6px;
}
.sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track {
  height: var(--r2-line);
  border-radius: 0;
  background: none;
  overflow: visible;
  /* departures settle over 240ms; approaches are immediate */
  transition: height 240ms ease;
}
.sk-root[data-skin="r02"] .r2-bar .sk-seek:is([data-r2-lens], [data-r2-scrub]) .sk-track {
  transition-duration: 0ms;
}
.sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track::before,
.sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track > :is(.sk-buffer, .sk-fill),
.sk-root[data-skin="r02"] media-volume-slider .sk-track::before,
.sk-root[data-skin="r02"] 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(--r2-line, 2px) * .4091);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 9 fill;
  border-image-width: 0 calc(var(--r2-line, 2px) * .4091);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
/* unplayed: the sheet's dim gray a step softer until the stream reaches it; buffered at full tone */
.sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track::before {
  opacity: .8;
}
.sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track > .sk-buffer {
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
/* played: the white run, clipped at the fill (or at the skin's own value during a precision scrub) */
.sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track > .sk-fill,
.sk-root[data-skin="r02"] media-volume-slider .sk-track > .sk-fill {
  border-width: 0 calc(var(--r2-line, 2px) * .4286);
  border-image-source: url(art/seek-played.png);
  border-image-width: 0 calc(var(--r2-line, 2px) * .4286);
  clip-path: inset(-6px calc(100% - var(--media-slider-fill, 0%)) -6px 0);
}
.sk-root[data-skin="r02"] .r2-bar .sk-seek[data-r2-scrub] .sk-track > .sk-fill {
  clip-path: inset(-6px calc(100% - var(--r2-fill, 0%)) -6px 0);
}
/* the playhead: the sheet's pale cyan handle, 10px, lensing to 16px. Thumb containment (U16 standard): travel
   clamped to [8px, 100% - 8px], half the largest size, so the handle stays inside the line at every size */
.sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-thumb {
  --sk-thumb: 10px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  left: clamp(8px, var(--media-slider-fill), calc(100% - 8px));
  transition: width 240ms ease, height 240ms ease;
}
.sk-root[data-skin="r02"] .r2-bar .sk-seek:is([data-r2-lens], [data-r2-scrub]) .sk-thumb {
  --sk-thumb: 16px;
  transition-duration: 0ms;
}
.sk-root[data-skin="r02"] .r2-bar .sk-seek[data-r2-scrub] .sk-thumb {
  left: clamp(8px, var(--r2-fill, 0%), calc(100% - 8px));
}
/* hover: the target time in a tag growing from the line (no thumbnail) */
.sk-root[data-skin="r02"] .r2-bar .sk-preview-image {
  display: none;
}
.sk-root[data-skin="r02"] .r2-bar .sk-preview-time {
  padding: 5px 8px;
  border-radius: 6px;
  background: rgb(11 13 18 / .85);
  font: 500 12px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
}
.sk-root[data-skin="r02"] .r2-bar .sk-seek[data-r2-scrub] .sk-preview {
  opacity: 0;
}

/* precision: the ruler (sprite windows onto single ticks of the sheet's ruler strip, placed by the script) and the
   scrub time */
.sk-root[data-skin="r02"] .r2-ruler {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--r2-seek-gap) + 16px);
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.sk-root[data-skin="r02"][data-r2-scrubbing] .r2-ruler {
  opacity: var(--r2-ruler-a, 0);
}
.sk-root[data-skin="r02"] .r2-tick {
  position: absolute;
  top: 0;
  translate: -50% -50%;
  background-image: url(art/ticks.png);
  background-repeat: no-repeat;
}
.sk-root[data-skin="r02"] .r2-scrub-tag {
  position: absolute;
  left: var(--r2-tag-x, 0);
  bottom: calc(100% + var(--r2-seek-gap) + 30px);
  translate: -50% 0;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgb(11 13 18 / .85);
  color: #ffffff;
  font: 500 12px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.sk-root[data-skin="r02"][data-r2-scrubbing] .r2-scrub-tag {
  opacity: 1;
}

/* ---------- Volume: a horizontal line grows from the speaker's center when the hand is within 80px ---------- */

.sk-root[data-skin="r02"] .r2-bar .sk-volume {
  position: relative;
}
.sk-root[data-skin="r02"] media-volume-slider {
  --r2-line: 2px;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  width: 96px;
  height: 32px;
  margin: 0;
  translate: -50% 0;
  transform-origin: 50% 50%;
  scale: 0 1;
  opacity: 0;
  pointer-events: none;
  transition: scale 240ms ease, opacity 240ms ease;
}
.sk-root[data-skin="r02"][data-r2-vol] media-volume-slider {
  scale: 1 1;
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0ms;
}
.sk-root[data-skin="r02"] media-volume-slider:hover {
  --r2-line: 4px;
}
.sk-root[data-skin="r02"] media-volume-slider .sk-track {
  height: var(--r2-line);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.sk-root[data-skin="r02"] media-volume-slider .sk-track::before {
  opacity: .8;
}
/* thumb containment (U16 standard): travel clamped to [half width, 100% - half width]; the volume handle never
   grows, so no extra allowance */
.sk-root[data-skin="r02"] media-volume-slider .sk-thumb {
  --sk-thumb: 10px;
  scale: 1;
  opacity: 1;
  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="r02"] media-volume-slider {
    display: none;
  }
}

/* ---------- Center play: the sheet's play, a member of the field, on its own small shade ---------- */

.sk-root[data-skin="r02"] .sk-bigplay {
  --sk-icon: 64px;
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.sk-root[data-skin="r02"] .sk-bigplay .sk-icon {
  width: calc(56px + 8px * var(--r2-f));
  height: calc(56px + 8px * var(--r2-f));
  opacity: calc(var(--r2-rest) + (1 - var(--r2-rest)) * var(--r2-f));
  filter: blur(calc(.6px * (1 - var(--r2-f))));
}
/* Nov 15, 2026: centered in the whole frame, the play's box ran into the seek box (top 152px up) on 16:9 players under
   416px tall and its glyph lay across the line under about 368px; the area it centers in now ends above the seek box when
   there is no room (56.25cqw = the player's height). Tall players are unchanged. */
.sk-root[data-skin="r02"] .sk-center {
  bottom: max(0px, calc(416px - 56.25cqw));
}
.sk-root[data-skin="r02"] .sk-center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgb(0 0 0 / var(--r2-shade-a));
  filter: blur(24px);
  opacity: 0;
  transition: opacity 160ms linear;
  pointer-events: none;
}
.sk-root[data-skin="r02"][data-paused]:not([data-waiting]):not([data-error]):not([data-empty]) .sk-center::before {
  opacity: 1;
  transition-duration: 180ms;
}

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

.sk-root[data-skin="r02"] .sk-spinner {
  width: 58px;
  height: 58px;
  background: rgb(0 0 0 / .55);
  box-shadow: 0 0 24px 6px rgb(0 0 0 / .35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sk-root[data-skin="r02"] .sk-spinner .sk-icon {
  width: 28px;
  height: 28px;
}
/* the error message sits at the focal plane: sharp, its button ringed in the focus light */
.sk-root[data-skin="r02"] .sk-error {
  gap: 8px;
  padding: 22px 22px 18px;
  border-radius: 24px;
  background: rgb(11 13 18 / .88);
}
.sk-root[data-skin="r02"] .sk-error-title {
  font: 500 18px/1.25 var(--media-font-family);
}
.sk-root[data-skin="r02"] .sk-error-text {
  color: var(--sk-ink-2);
}
.sk-root[data-skin="r02"] .sk-error-close {
  height: 48px;
  margin-top: 8px;
  border-radius: 24px;
  background: #ffffff;
  color: #0b0d12;
  font: 500 15px/1 var(--media-font-family);
  box-shadow: 0 0 0 3px #0b0d12, 0 0 0 4px var(--r2-accent);
}
.sk-root[data-skin="r02"] .sk-empty p {
  padding: 12px 20px;
  border-radius: 999px;
  background: rgb(11 13 18 / .7);
  font: 500 15px/1 var(--media-font-family);
}

/* ---------- Narrow: same row, tighter; labels give way (no room under the row) ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="r02"] .r2-label {
    display: none;
  }
  .sk-root[data-skin="r02"] .r2-bar > .sk-time {
    font-size: 12px;
  }
  .sk-root[data-skin="r02"] .sk-bigplay {
    --sk-icon: 48px;
    width: 68px;
    height: 68px;
  }
  .sk-root[data-skin="r02"] .sk-bigplay .sk-icon {
    width: calc(40px + 8px * var(--r2-f));
    height: calc(40px + 8px * var(--r2-f));
  }
  .sk-root[data-skin="r02"] .sk-bigplay::before {
    width: 80px;
    height: 80px;
  }
  .sk-root[data-skin="r02"] .sk-center {
    bottom: max(0px, calc(276px - 56.25cqw));
  }
  .sk-root[data-skin="r02"][data-started]:not([data-ended]) .sk-bigplay {
    opacity: 0;
    pointer-events: none;
  }
}
@media (pointer: coarse) {
  .sk-root[data-skin="r02"] .r2-bar > .sk-seek {
    height: 44px;
    bottom: calc(100% + var(--r2-seek-gap) - 6px);
  }
}

/* The root can't query its own width, so the caption lift follows the viewport (player ~ viewport - 32px) */
@media (max-width: 551px) {
  .sk-root[data-skin="r02"] {
    --sk-cue-clearance: 116px;
  }
}
/* Fullscreen (Nov 15, 2026): Chrome sizes the cue from the screen while the controls keep their px, so the clearance follows
   vmin (the viewport is the player here; the cue box is about 6.4% of its smaller side; it covered the seek line by 15 to
   53px). Registering the property makes the computed value a px length, which is what the core's parseFloat reads. */
@property --sk-cue-clearance {
  syntax: "<length>";
  inherits: true;
  initial-value: 96px;
}
.sk-root[data-skin="r02"]:fullscreen {
  --sk-cue-clearance: calc(160px + 6.75vmin);
}
@media (max-width: 519px) {
  .sk-root[data-skin="r02"]:fullscreen {
    --sk-cue-clearance: calc(106px + 6.75vmin);
  }
}

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

/* Reduced motion: two discrete states (the script writes 0 or 1); nothing eases */
@media (prefers-reduced-motion: reduce) {
  .sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track,
  .sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-thumb,
  .sk-root[data-skin="r02"] media-volume-slider {
    transition: none;
  }
}

/* Reduced transparency: the shades become solid strips */
@media (prefers-reduced-transparency: reduce) {
  .sk-root[data-skin="r02"] .r2-shade {
    filter: none;
    background: #0b0d12;
  }
  .sk-root[data-skin="r02"] .r2-shade-row {
    top: -6px;
    bottom: -18px;
  }
  .sk-root[data-skin="r02"] .r2-shade-seek {
    height: 32px;
    bottom: calc(100% + var(--r2-seek-gap));
    border-radius: 16px;
  }
  /* Nov 15, 2026: the volume line sat on the blurred shade's upper fringe; with solid shades it was white on the bright
     frames, so it gets its own strip */
  .sk-root[data-skin="r02"] media-volume-slider {
    background: #0b0d12;
    border-radius: 16px;
  }
  .sk-root[data-skin="r02"] .sk-center::before {
    filter: none;
    width: 96px;
    height: 96px;
    background: #0b0d12;
  }
  .sk-root[data-skin="r02"] .sk-error {
    background: #0b0d12;
  }
}

/* More contrast: stronger shades, a brighter rest state, a 3px focus ring */
@media (prefers-contrast: more) {
  .sk-root[data-skin="r02"] {
    --r2-shade-a: .68;
    --r2-rest: .75;
    --sk-focus-w: 3px;
  }
  .sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track::before {
    opacity: 1;
  }
}

/* Forced colors: system colors, no blur, every glyph at full; the white art keeps a CanvasText outline */
@media (forced-colors: active) {
  .sk-root[data-skin="r02"] :is(.r2-bar .sk-btn, .sk-bigplay) .sk-icon {
    opacity: 1;
    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);
  }
  .sk-root[data-skin="r02"] .r2-shade,
  .sk-root[data-skin="r02"] .sk-center::before {
    display: none;
  }
  .sk-root[data-skin="r02"] [data-r2-near]::before {
    box-shadow: 0 0 0 2px Highlight;
  }
  .sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track::before,
  .sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track > .sk-buffer,
  .sk-root[data-skin="r02"] media-volume-slider .sk-track::before {
    border-image: none;
    background: Canvas;
    opacity: 1;
  }
  .sk-root[data-skin="r02"] .r2-bar .sk-seek .sk-track > .sk-fill,
  .sk-root[data-skin="r02"] media-volume-slider .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="r02"] .r2-bar > .sk-time,
  .sk-root[data-skin="r02"] .r2-label {
    color: CanvasText;
    text-shadow: none;
  }
  .sk-root[data-skin="r02"] .r2-bar {
    background: Canvas;
    border-radius: 24px;
    outline: 1px solid CanvasText;
  }
  /* Nov 15, 2026: the seek and volume lines get solid plates too (they floated over the picture, CanvasText on the frame),
     and a 6px line, so the Highlight fill shows inside the 1px border (a 2px track was all border: no played part) */
  .sk-root[data-skin="r02"] .r2-shade-seek {
    display: block;
    filter: none;
    background: Canvas;
    height: 32px;
    bottom: calc(100% + var(--r2-seek-gap));
    border-radius: 16px;
    outline: 1px solid CanvasText;
  }
  .sk-root[data-skin="r02"] media-volume-slider {
    background: Canvas;
    border-radius: 16px;
    outline: 1px solid CanvasText;
  }
  .sk-root[data-skin="r02"] :is(.r2-bar > .sk-seek, media-volume-slider) {
    --r2-line: 6px;
  }
  .sk-root[data-skin="r02"] :is(.r2-bar .sk-seek, media-volume-slider) .sk-thumb {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="r02"] :is(.sk-error, .sk-empty p, .sk-spinner) {
    border: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="r02"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
}