/*
 * E01 Stained Glass, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * Every control is the leaded-glass artwork Gemini generated for this design (sheets2/e01-glass-sheet2.jpg),
 * cut out with its own lead and glass, and the center play is the amber rose window from the winning
 * ChatGPT render (crop/glass-chatgpt.png). Nothing here draws glass: the CSS only places the art, lights
 * it, and lays a plain dark scrim under the controls so the serif time reads over any frame.
 *
 * Signature, the glass catches the light: a medallion brightens in 60ms when the pointer crosses it
 * and lets the light go over 1100ms (easing in, so the glow lingers); along the seek a light follows
 * the pointer through the glass with a slower second glow trailing behind it; on the rose window a band
 * of light sweeps once around the ring panes. All of it is light laid over the PNGs (blend modes and
 * filters), never a redrawn pane.
 *
 * Seek: seek-unplayed.png and seek-played.png are the sheet bar split at its jewel (see art-manifest.md).
 * Each strip is sliced with fixed lead ends and a stretched glass run; the played strip is clipped at
 * the fill, and the amber jewel (knob.png) covers the seam.
 */

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

.sk-root[data-skin="e01"] {
  --media-accent-color: #f2b33d;
  --media-accent-text-color: #1b120a;
  --media-border-radius: 14px;
  --media-font-family: "Spectral", Georgia, "Times New Roman", serif;

  --sg-lead: #17110d;
  --sg-gold: #f4c44f;
  --sg-amber: #e39a1f;
  --sg-cobalt-hi: #2c51b8;
  --sg-cobalt: #1c378f;
  --sg-cobalt-lo: #13286c;

  /* light timing: on fast, off slow (the afterglow) */
  --sg-light-on: 60ms;
  --sg-light-off: 1100ms;
  --sg-light-curve: cubic-bezier(.55, 0, .8, .35);

  /* seek strip geometry: the lead end cap is .5963 of the strip height (art.json) */
  --sg-strip-h: 30px;
  --sg-strip-slice: 57;

  --sk-pad: 8px;
  --sk-hit: 56px;
  --sk-icon: 56px;
  --sk-btn-radius: 50%;
  --sk-ink: #ffffff;
  --sk-ink-2: #e1e8ff;
  --sk-surface: var(--sg-cobalt);
  --sk-surface-solid: var(--sg-cobalt-lo);
  --sk-blur: 0px;
  --sk-hairline: transparent;
  --sk-shadow: 0 2px 6px rgb(0 0 0 / .25), 0 10px 24px rgb(0 0 0 / .3);
  --sk-cc-on: var(--sg-gold);
  --sk-focus: #ffd060;
  --sk-focus-gap: var(--sg-lead);
  --sk-error-accent: var(--sg-gold);
  /* a plain dark scrim under the controls (not glass): the time reads over the brightest frame */
  --sg-scrim-a: .86;
  --sk-scrim: linear-gradient(to top, rgb(8 10 26 / var(--sg-scrim-a)) 0, rgb(8 10 26 / calc(var(--sg-scrim-a) * .8)) 64px, rgb(8 10 26 / 0) 150px);
  --sk-cue-clearance: 100px;

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

/* Captions stay in the core's plain face; the serif is for the controls */
.sk-root[data-skin="e01"] > mux-video {
  font-family: "Inter", system-ui, sans-serif;
}

/* ---------- The bar: medallions and the jewel seek on the scrim ---------- */

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

/* Medallions: the art is the whole button; the drop shadow lifts it off the picture */
.sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs) {
  transition: none;
}
.sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs) .sk-icon {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .55));
  transition: filter var(--sg-light-off) var(--sg-light-curve);
}

/* Signature: the medallion catches the light, fast on, slow off */
.sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs)::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  border-radius: 50%;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0) 40%, rgb(255 250 235 / .5) 50%, rgb(255 255 255 / 0) 60%) 160% 0 / 260% 100% no-repeat,
    radial-gradient(circle at 50% 38%, rgb(255 244 214 / .55), rgb(255 244 214 / 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sg-light-off) var(--sg-light-curve);
}
.sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs):hover::before {
  opacity: 1;
  background-position: -60% 0, 0 0;
  transition: opacity var(--sg-light-on) linear, background-position 700ms cubic-bezier(.2, .7, .3, 1);
}
.sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs):hover .sk-icon {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .55)) brightness(1.16) saturate(1.12);
  transition-duration: var(--sg-light-on);
}
/* pressed: the light warms to amber and the medallion settles */
.sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs):active::before {
  background-image: none, radial-gradient(circle at 50% 38%, rgb(255 200 110 / .6), rgb(255 200 110 / 0) 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs):active .sk-icon {
    scale: .96;
  }
}

/* Focus: the core's double ring, gold outside a lead gap, round with the medallion */
.sk-root[data-skin="e01"] :is(.sk-btn, .sk-error-close):focus-visible {
  box-shadow: 0 0 0 var(--sk-focus-off) var(--sk-focus-gap);
}

/* Captions: on = a gold bar under the medallion (shape and position) and the glass at full color;
   off = the same medallion, its glass dimmed (a filter on the PNG, never a redrawn glyph) */
.sk-root[data-skin="e01"] .sk-cc::after {
  z-index: 2;
  bottom: -9px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--sg-lead);
}
.sk-root[data-skin="e01"] .sk-cc:not([data-active]) .sk-icon {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .55)) saturate(.35) brightness(.78);
}

/* Fullscreen sits at the bar's end on desktop; it moves to the top-right when narrow */
.sk-root[data-skin="e01"] .sk-controls > .sk-fs {
  position: absolute;
  right: 18px;
  bottom: var(--sg-bar-pad);
}

/* ---------- Time: serif tabular numerals on the scrim ---------- */

.sg-bar .sk-time {
  padding: 0 6px;
  gap: .3em;
  font: 600 21px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 1px 2px rgb(4 6 18 / .9), 0 0 10px rgb(4 6 18 / .6);
}
.sg-bar .sk-time media-time-separator,
.sg-bar .sk-time media-time[data-type="duration"] {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the glass bar from the sheet, ruby played, opal ahead ---------- */

.sg-bar .sk-seek {
  --sk-seek-hit: 52px;
  --sk-seek-radius: 16px;
  margin-inline: 6px;
}
.sk-root[data-skin="e01"] .sk-track {
  height: var(--sg-strip-h);
  border-radius: calc(var(--sg-strip-h) / 2);
  background: none;
  overflow: hidden;
}
.sk-root[data-skin="e01"] .sk-seek[data-interactive] .sk-track {
  height: var(--sg-strip-h);
}
/* the unplayed glass: the strip under everything */
.sk-root[data-skin="e01"] .sk-track::before,
.sk-root[data-skin="e01"] .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(--sg-strip-h) * .5963);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 var(--sg-strip-slice) fill;
  border-image-width: 0 calc(var(--sg-strip-h) * .5963);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
/* buffered: the same opal glass, lit from behind */
.sk-root[data-skin="e01"] .sk-track > .sk-buffer {
  filter: brightness(1.18) saturate(1.1);
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
/* played: the ruby strip, clipped at the fill */
.sk-root[data-skin="e01"] .sk-track > .sk-fill {
  border-image-source: url(art/seek-played.png);
  clip-path: inset(0 calc(100% - var(--media-slider-fill, 0%)) 0 0);
}
/* Signature on the seek: a light follows the pointer through the glass; a second, slower glow trails
   behind it and fades over the afterglow time */
.sk-root[data-skin="e01"] .sk-track::after,
.sk-root[data-skin="e01"] .sk-seek::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--media-slider-pointer, 50%);
  width: 104px;
  height: var(--sg-strip-h);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 244 214 / .62), rgb(255 230 180 / .26) 55%, rgb(255 230 180 / 0));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sg-light-off) var(--sg-light-curve);
}
.sk-root[data-skin="e01"] .sk-track::after {
  z-index: 2;
}
.sk-root[data-skin="e01"] .sk-seek::before {
  z-index: 0;
  width: 150px;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(255 214 140 / .4), rgb(255 214 140 / 0));
  clip-path: inset(0 round calc(var(--sg-strip-h) / 2));
}
.sk-root[data-skin="e01"] .sk-seek[data-pointing] .sk-track::after {
  opacity: 1;
  transition: opacity var(--sg-light-on) linear;
}
.sk-root[data-skin="e01"] .sk-seek[data-pointing]::before {
  opacity: 1;
  transition: opacity var(--sg-light-on) linear, left 700ms cubic-bezier(.2, .7, .3, 1);
}
.sk-root[data-skin="e01"] .sk-seek:not([data-pointing])::before {
  transition: opacity var(--sg-light-off) var(--sg-light-curve), left 700ms cubic-bezier(.2, .7, .3, 1);
}

/* the thumb: the amber jewel from the sheet */
.sk-root[data-skin="e01"] .sk-seek .sk-thumb {
  --sk-thumb: 40px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .55));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e01"] .sk-seek .sk-thumb {
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="e01"] .sk-seek[data-interactive] .sk-thumb {
    scale: 1.1;
    transition-duration: var(--sk-enter);
  }
}

/* Volume: a short run of the same glass beside the speaker medallion, the jewel as its thumb */
.sg-bar .sk-volume {
  gap: 0;
}
.sk-root[data-skin="e01"] .sk-volume-slider {
  --sk-vol-w: 96px;
  --sg-strip-h: 18px;
  margin-inline: 10px 6px;
}
.sk-root[data-skin="e01"] .sk-volume-slider .sk-track {
  height: var(--sg-strip-h);
}
.sk-root[data-skin="e01"] .sk-volume-slider .sk-thumb {
  --sk-thumb: 26px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .55));
}

/* Preview: the storyboard frame in a lead border with an amber line, the time on a cobalt chip */
.sg-bar .sk-preview {
  bottom: calc(100% + 14px);
}
.sg-bar .sk-preview-image {
  --sk-preview-radius: 6px;
  border: 4px solid var(--sg-lead);
  box-shadow: 0 0 0 2px var(--sg-amber), 0 10px 24px rgb(0 0 0 / .4);
}
.sg-bar .sk-preview-time {
  padding: 5px 10px 4px;
  border: 3px solid var(--sg-lead);
  border-radius: 6px;
  background: linear-gradient(168deg, var(--sg-cobalt-hi), var(--sg-cobalt-lo));
  font: 600 16px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Center play: the rose window from the render (decorative; the bar's Play is the real one) ---------- */

.sk-root[data-skin="e01"] .sk-center {
  padding-bottom: var(--sg-bar-h);
}
.sk-root[data-skin="e01"] .sg-rose {
  --sk-icon: 148px;
  position: relative;
  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="e01"] .sg-rose .sk-icon {
  filter: drop-shadow(0 5px 10px rgb(0 0 0 / .32));
  transition: filter var(--sg-light-off) var(--sg-light-curve);
}
.sk-root[data-skin="e01"] .sg-rose:hover .sk-icon {
  filter: drop-shadow(0 5px 10px rgb(0 0 0 / .32)) brightness(1.12) saturate(1.08);
  transition-duration: var(--sg-light-on);
}
/* a band of light sweeps once around the ring panes, masked to the window's own glass */
@property --sg-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: -40deg;
}
.sg-rose-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from var(--sg-sweep), rgb(255 248 225 / 0) 0deg, rgb(255 248 225 / .75) 22deg, rgb(255 248 225 / 0) 44deg, rgb(255 248 225 / 0) 360deg);
  -webkit-mask: url(art/bigplay.png) center / contain no-repeat;
  mask: url(art/bigplay.png) center / contain no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sg-light-off) var(--sg-light-curve);
}
.sg-rose:hover .sg-rose-light {
  opacity: 1;
  transition: opacity var(--sg-light-on) linear;
}
@media (prefers-reduced-motion: no-preference) {
  .sg-rose:hover .sg-rose-light {
    animation: sg-sweep 1200ms cubic-bezier(.3, .1, .3, 1) both;
  }
  .sk-root[data-skin="e01"] .sg-rose:active .sk-icon {
    scale: .97;
  }
}
@keyframes sg-sweep {
  from { --sg-sweep: -40deg; }
  to { --sg-sweep: 320deg; }
}

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

/* Loading: the stained-glass gear from the sheet turns */
.sk-root[data-skin="e01"] .sk-spinner {
  width: 72px;
  height: 72px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.sk-root[data-skin="e01"] .sk-spinner .sk-icon {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .5));
}

/* Error: a cobalt card with an amber line; the full-width amber button's 6px corners plus the 8px pad
   make the card's 14px */
.sk-root[data-skin="e01"] .sk-error {
  gap: 8px;
  padding: 24px 8px 8px;
  border: 4px solid var(--sg-lead);
  border-radius: 14px;
  background: linear-gradient(168deg, var(--sg-cobalt-hi), var(--sg-cobalt) 55%, var(--sg-cobalt-lo));
  box-shadow: inset 0 0 0 2px rgb(227 154 31 / .7), var(--sk-shadow);
}
.sk-root[data-skin="e01"] .sk-error-title {
  padding-inline: 14px;
  font: 600 21px/1.2 var(--media-font-family);
}
.sk-root[data-skin="e01"] .sk-error-text {
  padding-inline: 14px;
  color: #e3e9ff;
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="e01"] .sk-error-close {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  border: 3px solid var(--sg-lead);
  border-radius: 6px;
  background: linear-gradient(var(--sg-gold), var(--sg-amber));
  color: #1b120a;
  font: 600 18px/1 var(--media-font-family);
}
.sk-root[data-skin="e01"] .sk-empty p {
  padding: 12px 20px 11px;
  border: 3px solid var(--sg-lead);
  border-radius: 6px;
  background: linear-gradient(168deg, var(--sg-cobalt-hi), var(--sg-cobalt-lo));
  box-shadow: inset 0 0 0 2px rgb(227 154 31 / .7);
  font: 600 18px/1 var(--media-font-family);
}

/* ---------- Mid widths: smaller medallions; the seek keeps its room, volume is mute plus hotkeys ---------- */

@container sk (max-width: 819px) {
  .sk-root[data-skin="e01"] :is(.sk-controls, .sk-center) {
    --sk-hit: 48px;
    --sk-icon: 48px;
    --sg-bar-pad: 12px;
    --sg-bar-h: calc(var(--sk-hit) + var(--sg-bar-pad) * 2);
  }
  .sg-bar {
    gap: 8px;
    padding-inline: 14px calc(14px + var(--sk-hit) + 8px);
  }
  .sk-root[data-skin="e01"] .sk-controls > .sk-fs {
    right: 14px;
  }
  .sg-bar .sk-time {
    font-size: 19px;
  }
  .sk-root[data-skin="e01"] .sg-rose {
    --sk-icon: 120px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="e01"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: two rows (the seek on top); fullscreen becomes a medallion at the top-right ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="e01"] :is(.sk-controls, .sk-center) {
    --sk-hit: 44px;
    --sk-icon: 44px;
    --sg-strip-h: 24px;
    --sg-bar-pad: 8px;
    --sg-bar-h: calc(var(--sg-bar-pad) * 2 + 30px + 4px + var(--sk-hit));
  }
  .sg-bar {
    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(--sg-bar-pad) 12px;
  }
  .sg-bar .sk-seek {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    --sk-seek-hit: 30px;
    margin-inline: 10px;
  }
  .sg-bar .sk-play { grid-column: 1; grid-row: 2; }
  .sg-bar .sk-volume { grid-column: 2; grid-row: 2; }
  .sg-bar .sk-time { grid-column: 3; grid-row: 2; font-size: 17px; }
  .sg-bar .sk-cc { grid-column: 5; grid-row: 2; }
  .sk-root[data-skin="e01"] .sk-cc::after {
    bottom: -5px;
  }
  .sk-root[data-skin="e01"] .sk-seek .sk-thumb {
    --sk-thumb: 32px;
  }
  .sk-root[data-skin="e01"] .sk-controls > .sk-fs {
    top: 10px;
    right: 10px;
    bottom: auto;
  }
  .sk-root[data-skin="e01"] .sg-rose {
    --sk-icon: 76px;
  }
  /* before the first play and at the end only, so a paused caption keeps the little room there is */
  .sk-root[data-skin="e01"][data-started]:not([data-ended]) .sg-rose {
    opacity: 0;
    pointer-events: none;
  }
}

/* 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="e01"] {
    --sk-cue-clearance: 112px;
  }
}

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

/* Reduced motion: no sweeps, no trailing glow, no growth; the light changes in under 100ms */
@media (prefers-reduced-motion: reduce) {
  .sk-root[data-skin="e01"] {
    --sg-light-on: 0ms;
    --sg-light-off: 90ms;
  }
  .sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs)::before {
    background-image: none, radial-gradient(circle at 50% 38%, rgb(255 244 214 / .55), rgb(255 244 214 / 0) 70%);
  }
  .sk-root[data-skin="e01"] .sk-seek::before {
    display: none;
  }
}

/* Reduced transparency and more contrast: the scrim becomes a solid band */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="e01"] {
    --sk-scrim: linear-gradient(to top, rgb(8 10 26) 0, rgb(8 10 26) calc(var(--sg-bar-h) + 6px), rgb(8 10 26 / 0) calc(var(--sg-bar-h) + 6px));
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="e01"] {
    --sk-focus-w: 3px;
  }
  .sg-bar .sk-time {
    text-shadow: none;
  }
}

/* Forced colors: the art stays (images are not recolored); the chrome uses system colors */
@media (forced-colors: active) {
  .sk-root[data-skin="e01"] :is(.sg-bar .sk-btn, .sk-fs)::before,
  .sk-root[data-skin="e01"] .sk-track::after,
  .sk-root[data-skin="e01"] .sk-seek::before,
  .sg-rose-light {
    display: none;
  }
  .sg-bar {
    border-top: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="e01"] .sk-track {
    border: 1px solid CanvasText;
  }
  .sk-root[data-skin="e01"] .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="e01"] .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="e01"] :is(.sk-error, .sk-empty p) {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }
  .sk-root[data-skin="e01"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}