/*
 * Z09 Frost Line, on the shared core (build 3, Nov 8, 2026).
 *
 * At rest the chrome condenses to ONE frosted hairline floating low: the lit seek line inside frosted
 * glass, a small play glyph, the time in tabular figures. On hover, keyboard focus or touch it blooms
 * into the full control set, and the controls grow FROM the hairline: the line thickens in place and a
 * frosted tray (volume, captions, fullscreen) rises out of its right end, scaled up from that corner.
 * The hairline's horizontal geometry never changes, so the seek never moves under the pointer. The
 * video tints the glass.
 *
 * Every control image is the Gemini sheet's own art (round3/sheets/z09-frost-sheet.jpg), cut with
 * build/tools/cut_art.py: the fine white glyphs, the CC frame, the lit line split at its baked handle,
 * the lone white handle, the milky center disc. The CSS draws glass and light, never a glyph.
 *
 * Motion: one registered number, --z9-b, runs from 0 (hairline) to 1 (bloom) and drives every size,
 * so the morph is a plain CSS transition: interruptible at any point (reverse the pointer mid-bloom and
 * it turns back from where it is), 260ms in on a soft ease-out, 160ms out on a quieter ease-in.
 * Reduced motion makes the change instant; reduced transparency and forced colors make the glass solid.
 *
 * Off states, this entry's own: captions off dims the CC glyph inside the bloomed bar; muted shows the
 * sheet's mute glyph, painted by the Video.js mute component itself.
 */

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

@property --z9-b {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.sk-root[data-skin="z09"] {
  --media-accent-color: #ffffff;
  --media-accent-text-color: #16202e;
  --media-border-radius: 18px;

  /* glass: a slate tint the picture shows through, blurred and saturated so the video colors it.
     .64 is measured: over the sample's brightest cream frame the glass reads #686c70, so white glyphs
     and the time sit near 5:1 (at .5 it measured 3.5:1, too low for the small time) */
  --z9-glass: 22 32 46;
  --z9-glass-a: .64;
  --z9-blur: 18px;
  --z9-steel: #a7bbd0;

  /* line geometry: the line's round end is .4762 (played) / .4651 (unplayed) of the strip height */
  --z9-slice-p: 20;
  --z9-slice-u: 20;
  --z9-cap-p: .4762;
  --z9-cap-u: .4651;

  /* hairline and bloom */
  --z9-inset: 24px;
  --z9-bottom: 18px;
  --z9-rest-h: 30px;
  --z9-bloom-h: 38px;
  --z9-tray-h: 52px;
  --z9-tray-gap: 6px;

  --sk-hit: 44px;
  --sk-icon: 22px;
  --sk-pad: 6px;
  --sk-r-outer: var(--media-border-radius);
  --sk-ink: #ffffff;
  /* secondary ink (duration, slash, error text): #d7e1ec read 4.0:1 over the sample's bright frames on this glass; this clears
     4.5:1 (release run, Nov 15, 2026) */
  --sk-ink-2: #ebf1f7;
  --sk-surface: rgb(var(--z9-glass) / .72);
  --sk-surface-solid: rgb(var(--z9-glass));
  --sk-blur: var(--z9-blur);
  --sk-hairline: rgb(255 255 255 / .28);
  --sk-shadow: 0 2px 6px rgb(0 0 0 / .14), 0 10px 28px rgb(0 0 0 / .22);
  --sk-focus: #ffffff;
  --sk-focus-gap: #16202e;
  --sk-error-accent: #ffffff;
  --sk-scrim: none;
  /* Chromium hangs the cue box from the core's line, so the line sits a caption-height above the
     bloomed tray: 18 + 38 + 6 + 52 = 114, plus a line (38px on a 630px player) and a 4px gap (148 left the
     longest cue 2px under the tray: release run, Nov 15, 2026). Registered as a length below, so the core
     reads px with parseFloat even from the fullscreen calc() */
  --sk-cue-clearance: 156px;
}

/* The core fades the whole control layer out when idle; Frost Line keeps its hairline instead (the seek
   is always visible), so the layer stays and only the bloom comes and goes */
.sk-root[data-skin="z09"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) {
  opacity: 1;
}
.sk-root[data-skin="z09"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) > .z9-bar {
  pointer-events: auto;
}

/* ---------- The hairline, and the bloom ---------- */

.z9-bar {
  --z9-b: 0;
  position: absolute;
  left: var(--z9-inset);
  right: var(--z9-inset);
  bottom: var(--z9-bottom);
  display: flex;
  align-items: center;
  gap: 0;
  height: calc(var(--z9-rest-h) + (var(--z9-bloom-h) - var(--z9-rest-h)) * var(--z9-b));
  padding: 0 6px 0 0;
  border-radius: calc(var(--z9-rest-h) / 2 + (var(--z9-bloom-h) - var(--z9-rest-h)) / 2 * var(--z9-b));
  isolation: isolate;
  color: var(--sk-ink);
  /* exit: quieter and shorter than the entrance */
  transition: --z9-b 160ms cubic-bezier(.4, 0, 1, 1);
}
/* the hairline's glass lives on its own layer: a backdrop-filter on the bar itself would make the bar a
   backdrop root, and the tray (its child, drawn outside its box) could no longer blur the picture */
.z9-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(var(--z9-glass) / var(--z9-glass-a));
  -webkit-backdrop-filter: blur(var(--z9-blur)) saturate(1.6);
  backdrop-filter: blur(var(--z9-blur)) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px var(--sk-hairline),
    inset 0 1px 0 rgb(255 255 255 / .2),
    0 6px 22px rgb(0 0 0 / calc(.12 + .1 * var(--z9-b)));
  pointer-events: none;
}
/* bloom: pointer over the player while it is active, keyboard focus anywhere in the bar, or a drag
   in progress (so a scrub never collapses under the finger) */
.sk-root[data-skin="z09"]:hover .sk-controls[data-visible] > .z9-bar,
.sk-root[data-skin="z09"] .z9-bar:has(:focus-visible),
.sk-root[data-skin="z09"] .z9-bar:has([data-dragging]) {
  --z9-b: 1;
  transition: --z9-b 260ms cubic-bezier(.2, .8, .2, 1);
}
/* touch: no hover, so a tap (the core's toggleControls gesture) blooms it */
@media (hover: none) {
  .sk-root[data-skin="z09"] .sk-controls[data-visible] > .z9-bar {
    --z9-b: 1;
    transition: --z9-b 260ms cubic-bezier(.2, .8, .2, 1);
  }
}

/* The tray: volume, captions and fullscreen live in a frosted pane that rises out of the hairline's
   right end, scaled up from that corner (trigger-origin growth). At rest it is transparent and takes no
   pointer, but it is NOT visibility hidden: its controls stay in the tab order and the accessibility
   tree, and focusing one blooms the bar at once, like a skip link. (A visibility toggle broke Tab: in
   the instant between one control's focusout and the next one's focusin nothing in the bar has focus,
   the bloom drops, and Chrome abandons the move as "hidden".) */
.z9-tray {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--z9-tray-gap));
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--z9-tray-h);
  padding: 0 4px;
  border-radius: 16px;
  background: rgb(var(--z9-glass) / var(--z9-glass-a));
  -webkit-backdrop-filter: blur(var(--z9-blur)) saturate(1.6);
  backdrop-filter: blur(var(--z9-blur)) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--sk-hairline), inset 0 1px 0 rgb(255 255 255 / .2), 0 6px 22px rgb(0 0 0 / .2);
  opacity: var(--z9-b);
  scale: calc(.6 + .4 * var(--z9-b));
  translate: 0 calc(12px * (1 - var(--z9-b)));
  transform-origin: 100% 100%;
  pointer-events: none;
}
.sk-root[data-skin="z09"]:hover .sk-controls[data-visible] > .z9-bar > .z9-tray,
.sk-root[data-skin="z09"] .z9-bar:has(:focus-visible) > .z9-tray,
.sk-root[data-skin="z09"] .z9-bar:has([data-dragging]) > .z9-tray {
  pointer-events: auto;
}
@media (hover: none) {
  .sk-root[data-skin="z09"] .sk-controls[data-visible] > .z9-bar > .z9-tray {
    pointer-events: auto;
  }
}

/* Buttons: hover lights a quiet frosted tile (the tray's 16px corners minus its 4px pad = 12px); the play
   glyph grows with the bloom inside its fixed 44px target */
.sk-root[data-skin="z09"] .z9-bar .sk-btn {
  --sk-btn-radius: 12px;
  transition: background-color var(--sk-exit) linear;
}
.sk-root[data-skin="z09"] .z9-bar .sk-btn:hover {
  background-color: rgb(255 255 255 / .14);
  transition-duration: var(--sk-enter);
}
.z9-bar .sk-play .sk-icon {
  width: calc(15px + 7px * var(--z9-b));
  height: calc(15px + 7px * var(--z9-b));
}
.z9-bar .sk-icon {
  filter: drop-shadow(0 1px 2px rgb(10 16 26 / .35));
}
.z9-bar .sk-cc .sk-icon {
  width: 30px;
}

/* captions: no extra bar; off dims the CC glyph inside the bloomed bar */
.sk-root[data-skin="z09"] .sk-cc::after {
  content: none;
}
.sk-root[data-skin="z09"]:not([data-captions]) .z9-bar .sk-cc .sk-icon {
  opacity: .38;
}
.sk-root[data-skin="z09"]:not([data-captions]) .z9-bar .sk-cc:hover .sk-icon {
  opacity: .6;
}

/* ---------- Time: tabular figures (one size in both states, so the line never changes length) ---------- */

.z9-bar .sk-time {
  padding: 0 4px 0 6px;
  gap: .3em;
  font: 500 14px/1 "Jost", var(--media-font-family);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgb(10 16 26 / .35);
}
.z9-bar .sk-time media-time-separator,
.z9-bar .sk-time media-time[data-type="duration"] {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the lit line inside the glass ---------- */

.z9-bar .sk-seek {
  --sk-seek-hit: 34px;
  --sk-seek-radius: 12px;
  --z9-line-h: calc(3px + 2px * var(--z9-b));
  margin-inline: 4px 2px;
}
.sk-root[data-skin="z09"] .sk-track,
.sk-root[data-skin="z09"] .sk-seek[data-interactive] .sk-track {
  height: var(--z9-line-h);
  border-radius: calc(var(--z9-line-h) / 2);
  background: none;
  overflow: visible;
}
.sk-root[data-skin="z09"] .sk-seek[data-interactive] {
  --z9-line-h: 6px;
}
/* unplayed: the steel blue line, a step softer until the stream reaches it */
.sk-root[data-skin="z09"] .sk-track::before,
.sk-root[data-skin="z09"] .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(--z9-line-h) * var(--z9-cap-u));
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 var(--z9-slice-u) fill;
  border-image-width: 0 calc(var(--z9-line-h) * var(--z9-cap-u));
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
.sk-root[data-skin="z09"] .sk-track::before {
  opacity: .72;
}
/* buffered: the steel line at its full tone */
.sk-root[data-skin="z09"] .sk-track > .sk-buffer {
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
/* played: the white line, lit (a soft glow), clipped at the fill */
.sk-root[data-skin="z09"] .sk-track > .sk-fill {
  border-width: 0 calc(var(--z9-line-h) * var(--z9-cap-p));
  border-image-source: url(art/seek-played.png);
  border-image-slice: 0 var(--z9-slice-p) fill;
  border-image-width: 0 calc(var(--z9-line-h) * var(--z9-cap-p));
  clip-path: inset(-6px calc(100% - var(--media-slider-fill, 0%)) -6px 0);
  filter: drop-shadow(0 0 3px rgb(255 255 255 / .75));
}

/* the handle: the sheet's lone white handle, tiny at rest */
.sk-root[data-skin="z09"] .sk-seek .sk-thumb {
  --sk-thumb: calc(10px + 4px * var(--z9-b));
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgb(255 255 255 / .55)) drop-shadow(0 1px 2px rgb(10 16 26 / .4));
  /* thumb containment (U16 standard): the core centers the thumb on the fill percentage, so
     unclamped it spills half its width past the line at 0% and 100%. Travel is clamped to
     [half width + 2px, 100% - half width - 2px]: the 2px covers the 1.2 drag grow (14px -> 16.8px),
     so the handle stays fully inside its line at both ends, at rest and in bloom, at every width. */
  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="z09"] .sk-seek .sk-thumb {
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="z09"] .sk-seek[data-interactive] .sk-thumb {
    scale: 1.2;
    transition-duration: var(--sk-enter);
  }
}

/* ---------- Volume (in the tray): the speaker glyph and a short run of the same line ---------- */

.z9-tray .sk-volume {
  gap: 0;
}
.sk-root[data-skin="z09"] .sk-volume-slider {
  --sk-vol-w: 64px;
  --z9-line-h: 3px;
  margin-inline: 4px 6px;
}
.sk-root[data-skin="z09"] .sk-volume-slider .sk-thumb {
  --sk-thumb: 12px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(10 16 26 / .4));
  /* thumb containment (U16 standard): travel clamped to [half width, 100% - half width]; the
     volume handle never grows (the core reveals it by scale 0 -> 1 only), so 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));
}

/* Preview: the storyboard frame in a frost hairline, the time on a glass chip */
.z9-bar .sk-preview {
  bottom: calc(100% + 14px);
  /* above the tray: the tray (a later sibling in the bar's stacking context) covered the preview's time chip
     and the frame's lower edge over the last fifth of the line (release run, Nov 15, 2026) */
  z-index: 4;
}
.z9-bar .sk-preview-image {
  --sk-preview-radius: 10px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .4), var(--sk-shadow);
}
.z9-bar .sk-preview-time {
  padding: 5px 9px;
  border-radius: 8px;
  background: rgb(var(--z9-glass) / .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--sk-hairline);
  font: 500 14px/1 "Jost", var(--media-font-family);
  font-variant-numeric: tabular-nums;
}

/* ---------- Center play: the sheet's milky disc, frosted by the picture behind it ---------- */

.sk-root[data-skin="z09"] .sk-center {
  padding-bottom: calc(var(--z9-bottom) + var(--z9-rest-h));
}
.sk-root[data-skin="z09"] .sk-bigplay {
  --sk-icon: 96px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--sk-icon);
  height: var(--sk-icon);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
/* a blur of the picture behind the disc, so the milk reads as frosted glass the video tints */
.sk-root[data-skin="z09"] .sk-bigplay::before {
  content: "";
  position: absolute;
  inset: 3%;
  z-index: -1;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 8px 26px rgb(10 16 26 / .3);
}
.sk-root[data-skin="z09"] .sk-bigplay .sk-icon {
  opacity: .84;
  transition: opacity var(--sk-exit) linear;
}
.sk-root[data-skin="z09"] .sk-bigplay:hover .sk-icon {
  opacity: .96;
  transition-duration: var(--sk-enter);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="z09"] .sk-bigplay .sk-icon {
    transition: opacity var(--sk-exit) linear, scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="z09"] .sk-bigplay:hover .sk-icon {
    scale: 1.04;
    transition-duration: var(--sk-enter);
  }
  .sk-root[data-skin="z09"] .sk-bigplay:active .sk-icon {
    scale: .97;
    transition-duration: 60ms;
  }
}

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

/* Loading: the sheet's white gear turns on a frosted disc */
.sk-root[data-skin="z09"] .sk-spinner {
  width: 58px;
  height: 58px;
  background: rgb(var(--z9-glass) / .55);
  -webkit-backdrop-filter: blur(var(--z9-blur)) saturate(1.6);
  backdrop-filter: blur(var(--z9-blur)) saturate(1.6);
}
.sk-root[data-skin="z09"] .sk-spinner .sk-icon {
  width: 28px;
  height: 28px;
}

/* Error: a frosted card; the white pill's 10px corners plus the 8px pad make the card's 18px */
.sk-root[data-skin="z09"] .sk-error {
  gap: 8px;
  padding: 22px 8px 8px;
  border-radius: 18px;
  background: rgb(var(--z9-glass) / .72);
}
.sk-root[data-skin="z09"] .sk-error-title {
  padding-inline: 14px;
  font: 500 21px/1.2 "Jost", var(--media-font-family);
}
.sk-root[data-skin="z09"] .sk-error-text {
  padding-inline: 14px;
  color: var(--sk-ink-2);
}
.sk-root[data-skin="z09"] .sk-error-close {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;
  color: #16202e;
  font: 500 16px/1 "Jost", var(--media-font-family);
}
.sk-root[data-skin="z09"] .sk-empty p {
  padding: 12px 20px;
  border-radius: 999px;
  background: rgb(var(--z9-glass) / .6);
  -webkit-backdrop-filter: blur(var(--z9-blur));
  backdrop-filter: blur(var(--z9-blur));
  font: 500 16px/1 "Jost", var(--media-font-family);
}

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

@container sk (max-width: 819px) {
  .sk-root[data-skin="z09"] :is(.sk-controls, .sk-center) {
    --z9-inset: 12px;
    --z9-bottom: 12px;
  }
  .sk-root[data-skin="z09"] .sk-bigplay {
    --sk-icon: 80px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="z09"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: the same hairline and tray, tighter ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="z09"] :is(.sk-controls, .sk-center) {
    --z9-inset: 8px;
    --z9-bottom: 8px;
  }
  .z9-bar .sk-time {
    padding: 0 2px 0 4px;
    font-size: 12px;
  }
  .sk-root[data-skin="z09"] .sk-bigplay {
    --sk-icon: 64px;
  }
  /* before the first play and at the end only, so a paused caption keeps the little room there is */
  .sk-root[data-skin="z09"][data-started]:not([data-ended]) .sk-bigplay {
    opacity: 0;
    pointer-events: none;
  }
  /* touch blooms the bar while paused, and the tray stands 104px up (8 + 38 + 6 + 52): on players under ~284px tall the
     centered 64px disc ran into it (9 to 25px on phones, and the tray took taps on the disc). Center the disc in the room
     above the tray there, 6px clear (release run, Nov 15, 2026) */
  .sk-root[data-skin="z09"] .sk-center {
    padding-bottom: max(calc(var(--z9-bottom) + var(--z9-rest-h)), calc(284px - 56.25cqw));
  }
}
@media (pointer: coarse) {
  .sk-root[data-skin="z09"] .z9-bar .sk-seek {
    height: max(var(--sk-seek-hit, 32px), 44px);
  }
}

/* The root can't query its own width, so the caption lift follows the viewport (player ~ viewport - 32px) */
@media (max-width: 851px) {
  .sk-root[data-skin="z09"] {
    --sk-cue-clearance: 140px; /* 12 + 38 + 6 + 52 = 108, plus a line */
  }
}
@media (max-width: 551px) {
  .sk-root[data-skin="z09"] {
    --sk-cue-clearance: 128px; /* 8 + 38 + 6 + 52 = 104, plus a smaller line */
  }
}
/* Fullscreen: Chrome sizes the cue from the screen (about 6% of its height) while the tray stays 114px up, so the fixed
   clearance put cues 5 to 40px into the tray's height on 720 to 1440px screens. In fullscreen the viewport is the player, so
   the clearance follows vmin: the tray top (114px) + a 6px gap + one cue line (6.75vmin, the run's measured allowance).
   Registered as a length so the core reads it in px (release run, Nov 15, 2026; the C02 pattern) */
@property --sk-cue-clearance {
  syntax: "<length>";
  inherits: true;
  initial-value: 156px;
}
.sk-root[data-skin="z09"]:fullscreen {
  --sk-cue-clearance: calc(120px + 6.75vmin);
}

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

/* Reduced motion: the hairline and the bloom swap at once; nothing scales or slides */
@media (prefers-reduced-motion: reduce) {
  .z9-bar,
  .sk-root[data-skin="z09"]:hover .sk-controls[data-visible] > .z9-bar,
  .sk-root[data-skin="z09"] .z9-bar:has(:focus-visible),
  .sk-root[data-skin="z09"] .z9-bar:has([data-dragging]) {
    transition: none;
  }
  .z9-tray {
    scale: 1;
    translate: none;
  }
}
@media (prefers-reduced-motion: reduce) and (hover: none) {
  .sk-root[data-skin="z09"] .sk-controls[data-visible] > .z9-bar {
    transition: none;
  }
}

/* Reduced transparency and more contrast: solid slate glass, no blur, an opaque disc */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="z09"] {
    --z9-glass-a: 1;
    --z9-blur: 0px;
    --sk-hairline: rgb(255 255 255 / .4);
  }
  .sk-root[data-skin="z09"] .sk-bigplay::before {
    display: none;
  }
  .sk-root[data-skin="z09"] .sk-bigplay .sk-icon {
    opacity: 1;
  }
  .sk-root[data-skin="z09"] .sk-error {
    background: rgb(var(--z9-glass));
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="z09"] {
    --sk-focus-w: 3px;
  }
  .sk-root[data-skin="z09"] .sk-track::before {
    opacity: 1;
  }
  .sk-root[data-skin="z09"]:not([data-captions]) .z9-bar .sk-cc .sk-icon {
    opacity: .55;
  }
}

/* Forced colors: the glass becomes a solid system surface with a border; the white glyph art keeps a
   CanvasText outline so it reads on a light or dark Canvas (images are never recolored) */
@media (forced-colors: active) {
  .z9-bar::before,
  .z9-tray {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .sk-root[data-skin="z09"] :is(.z9-bar .sk-btn, .sk-bigplay, .sk-spinner) .sk-icon {
    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="z09"] .sk-bigplay::before {
    display: none;
  }
  /* the center disc has no plate behind it: in a dark theme CanvasText is white and the milky disc lost its edge over bright
     frames, so its outline is a literal near-black in both themes (release run, Nov 15, 2026) */
  .sk-root[data-skin="z09"] .sk-center .sk-bigplay .sk-icon {
    forced-color-adjust: none;
    filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
  }
  .sk-root[data-skin="z09"] .sk-track {
    border: 1px solid CanvasText;
  }
  .sk-root[data-skin="z09"] .sk-track::before {
    border-image: none;
    background: Canvas;
    opacity: 1;
  }
  .sk-root[data-skin="z09"] .sk-track > .sk-buffer {
    border-image: none;
    background: repeating-linear-gradient(90deg, CanvasText 0 1px, Canvas 1px 4px);
    forced-color-adjust: none;
  }
  .sk-root[data-skin="z09"] .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    filter: none;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="z09"] :is(.sk-error, .sk-empty p, .sk-spinner) {
    border: 2px solid CanvasText;
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .sk-root[data-skin="z09"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}