/*
 * E05 Sewn Felt, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * Wool felt for a bedtime story channel. Every control is the felt Gemini generated for this design
 * (sheets2/e05-felt-sheet.jpg): blanket-stitched rust felt rounds with cream applique glyphs for volume,
 * mute, captions (the applique letters) and fullscreen, the layered sage, cream and rust rounds for play
 * and pause, the mustard felt strip with its stitched sage run as the seek, and the bone sewing button
 * (its holes keyed through) as the playhead. A plain dark scrim (not felt) under the row keeps the time
 * readable over any frame.
 *
 * Seek: a stretched middle would smear the running stitches, so each strip is its two felt ends plus a
 * tile of whole stitch periods, repeated with background-repeat: round. The sage run (played) is
 * clipped at the fill and to its own rows over the mustard strip; the button covers the join.
 *
 * Signature: the focus ring is a stitched outline that draws itself. When a control takes keyboard
 * focus, a dark strip with cream running stitches is sewn around it clockwise from the top in 520ms (a
 * conic mask sweeping a registered angle, @property --fl-sweep). This ring is focus chrome, not part of
 * the generated art. Under reduced motion, and where @property is missing, the ring is simply whole.
 */

@font-face {
  font-family: "Varela Round";
  src: url(fonts/VarelaRound-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@property --fl-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

.sk-root[data-skin="e05"] {
  --media-accent-color: #365c4d;
  --media-accent-text-color: #fbf1dc;
  --media-border-radius: 22px;
  --media-font-family: "Varela Round", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fl-cream: #fbf1dc;
  --fl-rail: #2a1208;
  --fl-rust: #8e3a23;

  /* the strip: 110px tall in the art; its felt ends are 22px of that; the sage run is 23% to 79% */
  --fl-strip-h: 34px;
  --fl-sage-top: 21%;
  --fl-sage-bottom: 19%;

  --sk-pad: 10px;
  --sk-hit: 56px;
  --sk-icon: 56px;
  --sk-btn-radius: 50%;
  --sk-ink: #fff8ea;
  --sk-ink-2: #f9eed8;
  --sk-surface: #5a2615;
  --sk-surface-solid: #5a2615;
  --sk-blur: 0px;
  --sk-hairline: transparent;
  --sk-shadow: 0 3px 6px rgb(0 0 0 / .25), 0 12px 26px rgb(0 0 0 / .28);
  --sk-cc-on: var(--fl-cream);
  --sk-focus: var(--fl-cream);
  --sk-focus-gap: var(--fl-rail);
  --sk-error-accent: var(--fl-cream);
  /* a plain dark scrim (not felt) under the row */
  --fl-scrim-a: .86;
  --sk-scrim: linear-gradient(to top, rgb(30 12 6 / var(--fl-scrim-a)) 0, rgb(30 12 6 / calc(var(--fl-scrim-a) * .72)) 70px, rgb(30 12 6 / 0) 156px);
  /* captions (Nov 15, 2026): the 56px rounds' tops (72px up) + the 9px stitched focus ring + a one-line cue + a gap; see
     the clearance block after the narrow layout */
  --sk-cue-clearance: 124px;

  --fl-bar-pad: 16px;
  --fl-bar-h: calc(var(--sk-hit) + var(--fl-bar-pad) * 2);
}

.sk-root[data-skin="e05"] > mux-video {
  font-family: "Inter", system-ui, sans-serif;
}

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

.fl-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--fl-bar-h);
  padding: var(--fl-bar-pad) calc(20px + var(--sk-hit) + 10px) var(--fl-bar-pad) 20px;
  color: var(--sk-ink);
}

/* Felt rounds: the art is the whole button */
.sk-root[data-skin="e05"] :is(.fl-row .sk-btn, .sk-fs) {
  transition: none;
}
.sk-root[data-skin="e05"] :is(.fl-row .sk-btn, .sk-fs) .sk-icon {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35));
  transition: filter var(--sk-exit) linear, scale var(--sk-exit) var(--sk-ease);
}
.sk-root[data-skin="e05"] :is(.fl-row .sk-btn, .sk-fs):hover .sk-icon {
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / .38)) brightness(1.07);
  transition-duration: var(--sk-enter);
}
.sk-root[data-skin="e05"] :is(.fl-row .sk-btn, .sk-fs):active .sk-icon {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)) brightness(.9);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e05"] :is(.fl-row .sk-btn, .sk-fs):active .sk-icon {
    scale: .97;
  }
}

/* ---------- Signature: the stitched focus ring sews itself on ---------- */

.sk-root[data-skin="e05"] :is(.sk-btn, .sk-error-close):focus-visible {
  outline: none;
  box-shadow: none;
}
.sk-root[data-skin="e05"] :is(.sk-seek, .sk-volume-slider):has(media-slider-thumb:focus-visible) {
  outline: none;
  box-shadow: none;
}
.sk-root[data-skin="e05"] :is(.sk-btn, .sk-error-close):focus-visible::before,
.sk-root[data-skin="e05"] :is(.sk-seek, .sk-volume-slider):has(media-slider-thumb:focus-visible)::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 2;
  /* a 7px dark strip with cream stitches running down its middle */
  border: 7px solid var(--fl-rail);
  border-radius: calc(var(--fl-ring-r, var(--sk-btn-radius)) + 9px);
  outline: 2.5px dashed var(--fl-cream);
  outline-offset: -4.75px;
  -webkit-mask: conic-gradient(from 0deg, #000 var(--fl-sweep), transparent 0);
  mask: conic-gradient(from 0deg, #000 var(--fl-sweep), transparent 0);
  pointer-events: none;
}
.sk-root[data-skin="e05"] .sk-btn:focus-visible::before {
  border-radius: 50%;
}
.sk-root[data-skin="e05"] :is(.sk-seek, .sk-volume-slider) {
  --fl-ring-r: 22px;
}
.sk-root[data-skin="e05"] .sk-error-close {
  --fl-ring-r: 10px;
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e05"] :is(.sk-btn, .sk-error-close):focus-visible::before,
  .sk-root[data-skin="e05"] :is(.sk-seek, .sk-volume-slider):has(media-slider-thumb:focus-visible)::before {
    animation: fl-sew 520ms cubic-bezier(.35, .55, .3, 1) both;
  }
}
@keyframes fl-sew {
  from { --fl-sweep: 0deg; }
  to { --fl-sweep: 360deg; }
}

/* Captions: on = a cream bar under the round; off = ONE signal only, in the entry's
   own sewing language (Gus's direction, Nov 7, superseded 9:14 PM the same night):
   NO buttons on the patch. The off mark is a BOLD, HEAVY stitch line running
   DIAGONAL across the medallion, corner to corner: one thick cream thread drawn
   as long heavy dashes, the felt strip's stitch read but bolder, readable at
   normal size. No dimming; the mute round carries the same stitch line. (The
   earlier sewn-buttons row, straight then diagonal, is retired at Gus's word;
   the darker-brown knob thumbs from that pass stay.) */
.sk-root[data-skin="e05"] .sk-cc::after {
  z-index: 1;
  bottom: -8px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--fl-rail);
}
.sk-root[data-skin="e05"] .sk-sewn-off {
  display: none;
}
.sk-root[data-skin="e05"]:not([data-captions]) .sk-cc .sk-sewn-off,
.sk-root[data-skin="e05"][data-muted] .sk-mute .sk-sewn-off {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  /* Nov 15, 2026: every length is sized from the round, so on the 56px desktop round it is exactly Gus's U29 line
     (48 x 12, 11px stitches, 5px gaps, a 5px thread on a 10px bed) and on the 48px mid and 44px phone rounds it shrinks
     with them (a fixed 48px line ran about 1px and 3px past their rims) */
  --fl-u: calc(var(--sk-icon) / 56);
  width: calc(var(--fl-u) * 48);
  height: calc(var(--fl-u) * 12);
  translate: -50% -50%;
  rotate: -24deg;
  background-image:
    repeating-linear-gradient(90deg, #fbf1dc 0 calc(var(--fl-u) * 11), transparent calc(var(--fl-u) * 11) calc(var(--fl-u) * 16)),
    repeating-linear-gradient(90deg, #251207 0 calc(var(--fl-u) * 11), transparent calc(var(--fl-u) * 11) calc(var(--fl-u) * 16));
  /* the stitch images end on the third stitch (43 of 48, where the old 100%-wide image already showed a gap), so a
     fractional size can't paint a sliver of a fourth stitch at the line's end */
  background-size: calc(var(--fl-u) * 43) calc(var(--fl-u) * 5), calc(var(--fl-u) * 43) calc(var(--fl-u) * 10);
  background-position: left center, left center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1.5px 1px rgb(0 0 0 / .45));
  pointer-events: none;
}
/* the row is a real child span (.sk-sewn-off, in the entry markup): both pseudo
   slots are taken in this entry, ::before by the stitched focus ring (whose
   animation fill can paint it as a full ring) and ::after by the captions on-bar */
/* mute keeps its plain speaker face when muted: the core's speaker-with-X
   variant is never shown in this entry, the sewn buttons are the only signal */
/* Muted face (Gus's consistency rule, Nov 7): the Video.js v10 component
   swaps icon VISIBILITY itself when muted; CSS display rules, ours and the
   core's, never governed it (verified the hard way: computed display read
   none on buttons that were visibly painting). The one skin-side trap is
   hiding every icon on the muted root flag, which kills the component's
   own mute face too; the restore below, with !important, keeps exactly the
   mute face (the .sk-mute-face icon, the entry's own mute art) painting
   under the entry's mark, so muted matches captions-off exactly. */
.sk-root[data-skin="e05"][data-muted] .sk-mute .sk-icon { display: none !important; }
.sk-root[data-skin="e05"][data-muted] .sk-mute .sk-mute-face { display: block !important; }

/* Fullscreen: the row's last round on desktop; top-right when narrow */
.sk-root[data-skin="e05"] .sk-controls > .sk-fs {
  position: absolute;
  right: 20px;
  bottom: var(--fl-bar-pad);
}

/* ---------- Time ---------- */

.fl-row .sk-time {
  padding: 0 6px;
  font: 400 20px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgb(20 6 2 / .85), 0 0 10px rgb(20 6 2 / .5);
}
.fl-row .sk-time media-time-separator,
.fl-row .sk-time media-time[data-type="duration"] {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the felt strip ---------- */

.fl-row .sk-seek {
  --sk-seek-hit: 48px;
  --sk-seek-radius: 22px;
  margin-inline: 6px;
}
.sk-root[data-skin="e05"] .sk-track,
.sk-root[data-skin="e05"] .sk-seek[data-interactive] .sk-track {
  height: var(--fl-strip-h);
  border-radius: 0;
  background: none;
  overflow: visible;
  transition: none;
}
.sk-root[data-skin="e05"] .sk-track::before,
.sk-root[data-skin="e05"] .sk-track > :is(.sk-buffer, .sk-fill) {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  padding: 0 calc(var(--fl-strip-h) * 22 / 110);
  border-radius: 0;
  background:
    url(art/seek-unplayed-capl.png) left center / auto 100% no-repeat,
    url(art/seek-unplayed-capr.png) right center / auto 100% no-repeat,
    url(art/seek-unplayed-tile.png) 0 0 / auto 100% round;
  background-origin: border-box, border-box, content-box;
  background-clip: border-box, border-box, content-box;
}
.sk-root[data-skin="e05"] .sk-track::before {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35)) brightness(.86);
}
.sk-root[data-skin="e05"] .sk-track > .sk-buffer {
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
.sk-root[data-skin="e05"] .sk-track > .sk-fill {
  background:
    url(art/seek-played-capl.png) left center / auto 100% no-repeat,
    url(art/seek-played-capr.png) right center / auto 100% no-repeat,
    url(art/seek-played-tile.png) 0 0 / auto 100% round;
  background-origin: border-box, border-box, content-box;
  background-clip: border-box, border-box, content-box;
  clip-path: inset(var(--fl-sage-top) calc(100% - var(--media-slider-fill, 0%)) var(--fl-sage-bottom) 0);
}
/* the playhead: the sewing button, darkened with the same brown filter the
   volume thumb carries (Gus, Nov 7 9:04 PM: the button family goes darker
   brown; the knob art itself already carries its holes and thread cross) */
.sk-root[data-skin="e05"] .fl-row .sk-seek .sk-thumb {
  --sk-thumb: 36px;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)) brightness(.62) sepia(.45) saturate(1.25);
  /* thumb containment (Gus's rule, Nov 7): the core centers the thumb on the fill
     percentage, so unclamped it spills half its width past the track at 0% and 100%.
     Travel is clamped to [half width + 2px, 100% - half width - 2px] so the thumb
     stays fully inside its track at both ends, mid-drag grow included.
     Nov 15, 2026: moved out of the no-preference query below, where it had landed, so it
     also holds with reduced motion (the button hung 18px off both ends of the strip there). */
  left: clamp(calc(var(--sk-thumb-w, var(--sk-thumb)) / 2 + 2px), var(--media-slider-fill), calc(100% - var(--sk-thumb-w, var(--sk-thumb)) / 2 - 2px));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e05"] .fl-row .sk-seek .sk-thumb {
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="e05"] .fl-row .sk-seek[data-interactive] .sk-thumb {
    scale: 1.1;
    transition-duration: var(--sk-enter);
  }
}

/* Volume: a short felt strip beside the speaker round */
.fl-row .sk-volume {
  gap: 0;
}
.sk-root[data-skin="e05"] .sk-volume-slider {
  --sk-vol-w: 100px;
  --fl-strip-h: 22px;
  margin-inline: 8px 2px;
}
.sk-root[data-skin="e05"] .sk-volume-slider .sk-track {
  height: var(--fl-strip-h);
}
.sk-root[data-skin="e05"] .sk-volume-slider .sk-thumb {
  /* thumb containment (Gus's rule, Nov 7): the core centers the thumb on the fill
     percentage, so unclamped it spills half its width past the track at 0% and 100%.
     Travel is clamped to [half width + 0px, 100% - half width - 0px] so the thumb
     stays fully inside its track at both ends, mid-drag grow included. */
  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));
  --sk-thumb: 24px;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45)) brightness(.62) sepia(.45) saturate(1.25);
}

/* Preview: the frame on a cream felt mat, the time on a rust tag */
.fl-row .sk-preview {
  bottom: calc(100% + 14px);
}
.fl-row .sk-preview-image {
  --sk-preview-radius: 10px;
  border: 4px solid var(--fl-cream);
  box-shadow: var(--sk-shadow);
}
.fl-row .sk-preview-time {
  padding: 6px 10px 5px;
  border-radius: 999px;
  background: var(--fl-rust);
  font: 400 14px/1 var(--media-font-family);
}

/* ---------- Center play: the layered felt rounds (decorative; the row's Play is the real one) ---------- */

.sk-root[data-skin="e05"] .sk-center {
  padding-bottom: var(--fl-bar-h);
}
.sk-root[data-skin="e05"] .fl-disc {
  --sk-icon: 132px;
  display: grid;
  place-items: center;
  width: var(--sk-icon);
  height: var(--sk-icon);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.sk-root[data-skin="e05"] .fl-disc .sk-icon {
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / .35));
  transition: filter var(--sk-exit) linear, scale var(--sk-exit) var(--sk-ease);
}
.sk-root[data-skin="e05"] .fl-disc:hover .sk-icon {
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / .35)) brightness(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e05"] .fl-disc:active .sk-icon {
    scale: .97;
  }
}

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

.sk-root[data-skin="e05"] .sk-spinner {
  width: 70px;
  height: 70px;
  background: none;
  box-shadow: none;
}
.sk-root[data-skin="e05"] .sk-spinner .sk-icon {
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / .4));
}
.sk-root[data-skin="e05"] .sk-error {
  gap: 8px;
  padding: 22px 10px 10px;
  border-radius: 22px;
  background: var(--fl-rust);
  box-shadow: var(--sk-shadow);
}
.sk-root[data-skin="e05"] .sk-error-title {
  padding-inline: 14px;
  font: 400 21px/1.2 var(--media-font-family);
}
.sk-root[data-skin="e05"] .sk-error-text {
  padding-inline: 14px;
  color: #fdf2e2;
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="e05"] .sk-error-close {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border-radius: 12px;
  background: var(--fl-cream);
  color: var(--fl-rail);
  font: 400 18px/1 var(--media-font-family);
}
.sk-root[data-skin="e05"] .sk-empty p {
  padding: 12px 20px;
  background: var(--fl-rust);
  font: 400 17px/1 var(--media-font-family);
}

/* ---------- Mid widths ---------- */

@container sk (max-width: 819px) {
  .sk-root[data-skin="e05"] :is(.sk-controls, .sk-center) {
    --sk-hit: 48px;
    --sk-icon: 48px;
    --fl-bar-pad: 12px;
    --fl-strip-h: 30px;
    --fl-bar-h: calc(var(--sk-hit) + var(--fl-bar-pad) * 2);
  }
  .fl-row {
    gap: 8px;
    padding-inline: 16px calc(16px + var(--sk-hit) + 8px);
  }
  .sk-root[data-skin="e05"] .sk-controls > .sk-fs {
    right: 16px;
  }
  .sk-root[data-skin="e05"] .fl-disc {
    --sk-icon: 110px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="e05"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: two rows (the strip on top); fullscreen at the top-right ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="e05"] :is(.sk-controls, .sk-center) {
    --sk-hit: 44px;
    --sk-icon: 44px;
    --fl-strip-h: 24px;
    --fl-bar-pad: 8px;
    --fl-bar-h: calc(var(--fl-bar-pad) * 2 + 30px + 4px + var(--sk-hit));
  }
  .fl-row {
    display: grid;
    grid-template-columns: var(--sk-hit) var(--sk-hit) auto 1fr var(--sk-hit);
    grid-template-rows: 30px var(--sk-hit);
    gap: 4px 8px;
    padding: var(--fl-bar-pad) 12px;
  }
  .fl-row .sk-seek {
    grid-column: 1 / -1;
    grid-row: 1;
    --sk-seek-hit: 30px;
    margin-inline: 4px;
  }
  .fl-row .sk-play { grid-column: 1; grid-row: 2; }
  .fl-row .sk-volume { grid-column: 2; grid-row: 2; }
  .fl-row .sk-time { grid-column: 3; grid-row: 2; font-size: 17px; }
  .fl-row .sk-cc { grid-column: 5; grid-row: 2; }
  .sk-root[data-skin="e05"] .fl-row .sk-seek .sk-thumb {
    --sk-thumb: 28px;
  }
  .sk-root[data-skin="e05"] .sk-controls > .sk-fs {
    top: 12px;
    right: 12px;
    bottom: auto;
  }
  .sk-root[data-skin="e05"] .fl-disc {
    --sk-icon: 76px;
  }
  .sk-root[data-skin="e05"][data-started]:not([data-ended]) .fl-disc {
    opacity: 0;
    pointer-events: none;
  }
  /* touch (Nov 15, 2026): the core's 44px seek hit box reached 3px into the rounds below; 38px fills the 30px row and
     its 4px gaps */
  @media (pointer: coarse) {
    .fl-row .sk-seek {
      height: 38px;
    }
  }
  /* the hover preview fits above the strip on phone-size players (Nov 15, 2026); the core thumbnail sizes itself from
     max-width, and its 96px min-width would not fit a 328px player */
  .fl-row .sk-preview-image {
    min-width: 56px;
    max-width: min(158px, 100cqw - 270px);
  }
}

/* ---------- Caption clearance (Nov 15, 2026) ----------
   Chrome 157 has no VTTCue.lineAlign, so a cue hangs one cue-height below the core's line. Each value is the top of
   the highest control + the 9px stitched focus ring + a one-line cue + a gap: one row of 56px rounds 72px up (124, at the
   top of this file), the mid row of 48px rounds 60px up (108, the old value, which already cleared there), the narrow
   layout's strip 86px up (120). The root can't query its own width, so these follow the viewport (player = viewport -
   32px): the mid layout (players 520 to 819px) is viewports 552 to 851px; a classic scrollbar can only move a mid player
   into the one-row value, which just lifts the cue higher. */
@media (max-width: 851px) {
  .sk-root[data-skin="e05"] {
    --sk-cue-clearance: 108px;
  }
}
@media (max-width: 551px) {
  .sk-root[data-skin="e05"] {
    --sk-cue-clearance: 120px;
  }
}
/* Fullscreen: Chrome sizes the cue from the player's smaller side (a one-line box is about 6% of it) while the bar
   keeps its size, so the clearance follows vmin (the viewport is the player here). 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: 108px;
}
.sk-root[data-skin="e05"]:fullscreen {
  --sk-cue-clearance: calc(84px + 6.75vmin);
}
@media (max-width: 519px) {
  .sk-root[data-skin="e05"]:fullscreen {
    --sk-cue-clearance: calc(98px + 6.75vmin);
  }
}

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

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="e05"] {
    --sk-scrim: linear-gradient(to top, rgb(30 12 6) 0, rgb(30 12 6) calc(var(--fl-bar-h) + 6px), rgb(30 12 6 / 0) calc(var(--fl-bar-h) + 6px));
  }
}
@media (prefers-contrast: more) {
  .fl-row .sk-time {
    text-shadow: none;
  }
}
@media (forced-colors: active) {
  .fl-row {
    border-top: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="e05"] .fl-row .sk-track {
    outline: 1px solid CanvasText;
  }
  .sk-root[data-skin="e05"] .sk-track > .sk-buffer {
    background: repeating-linear-gradient(90deg, CanvasText 0 1px, Canvas 1px 4px);
    forced-color-adjust: none;
  }
  .sk-root[data-skin="e05"] .sk-track > .sk-fill {
    background: Highlight;
    forced-color-adjust: none;
  }
  /* focus: the system outline, drawn whole */
  .sk-root[data-skin="e05"] :is(.sk-btn, .sk-error-close):focus-visible,
  .sk-root[data-skin="e05"] :is(.sk-seek, .sk-volume-slider):has(media-slider-thumb:focus-visible) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .sk-root[data-skin="e05"] :is(.sk-btn, .sk-error-close):focus-visible::before,
  .sk-root[data-skin="e05"] :is(.sk-seek, .sk-volume-slider):has(media-slider-thumb:focus-visible)::before {
    display: none;
  }
  .sk-root[data-skin="e05"] :is(.sk-error, .sk-empty p) {
    border: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="e05"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}