@layer overscan {
ov-player {
  --ov-pl-glow: calc(var(--ov-bloom, .2) * 14px);
  display: grid;
  gap: 6px;
  min-inline-size: 0;
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-1, 10px);
  color: var(--ov-ink);
  outline: none;
}
ov-player:focus-visible { outline: var(--ov-rule, 1px) dashed var(--ov-accent); outline-offset: 4px; }
ov-player { container-type: inline-size; }
ov-player [hidden] { display: none !important; }
.ov-player__head {
  display: flex;
  align-items: baseline;
  gap: 1.5ch;
  padding-block-end: 4px;
  border-block-end: var(--ov-rule, 1px) solid var(--ov-line);
}
.ov-player__label {
  flex: 1 1 auto;
  font-size: var(--ov-size-2, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ov-player__live {
  padding: 2px 6px;
  letter-spacing: .14em;
  white-space: nowrap;
  border: var(--ov-rule, 1px) dashed var(--ov-faint);
  color: var(--ov-faint);
}
.ov-player__live:empty { display: none; }
ov-player[data-ov-live-claim] .ov-player__live {
  border: var(--ov-rule, 1px) solid var(--ov-accent);
  background: var(--ov-accent);
  color: var(--ov-field);
}
.ov-player__state {
  padding: 2px 6px;
  border: var(--ov-rule, 1px) solid var(--ov-accent);
  color: var(--ov-accent);
  letter-spacing: .14em;
  white-space: nowrap;
}
ov-player:not([data-ov-media="playing"]) .ov-player__state { border-style: dashed; color: var(--ov-dim, var(--ov-ink)); border-color: var(--ov-line); }
ov-player:is([data-ov-media="buffering"], [data-ov-media="stalled"], [data-ov-media="frozen"],
  [data-ov-media="picture-frozen"], [data-ov-media="blocked"], [data-ov-media="error"]) .ov-player__state {
  border: 3px double var(--ov-alarm);
  color: var(--ov-alarm);
}
.ov-player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-inline-size: 100%;
  background: #000;
  border: var(--ov-rule, 1px) solid var(--ov-line);
  overflow: hidden;
}
.ov-player__frame > :is(video, audio) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.ov-player__veil {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  padding: 6px 10px;
  letter-spacing: .16em;
  text-align: center;
  color: var(--ov-alarm);
  background: color-mix(in srgb, var(--ov-field) 80%, transparent);
  border-block-end: 2px dashed var(--ov-alarm);
}
.ov-player__veil:empty { display: none; }
ov-player:not([data-ov-media="playing"]) .ov-player__frame > video { filter: saturate(.3) brightness(.7); }
ov-player:is([data-ov-media="paused"], [data-ov-media="ended"], [data-ov-media="seeking"]) .ov-player__veil {
  color: var(--ov-faint);
  border-block-end-color: var(--ov-faint);
}
.ov-player__bar { position: relative; min-block-size: 18px; }
ov-player[data-ov-audio] .ov-player__bar:has(.ov-player__wave:not([hidden])) { min-block-size: 64px; }
.ov-player__track {
  position: absolute;
  inset: 5px 0;
  border: var(--ov-rule, 1px) solid var(--ov-line);
  background: color-mix(in srgb, var(--ov-field) 85%, #000);
}
.ov-player__track :is(.ov-player__bufs, .ov-player__played) { position: absolute; inset: 0; }
.ov-player__track i { position: absolute; inset-block: 0; display: block; }
.ov-player__buf {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ov-ink) 38%, transparent) 0 2px, transparent 2px 5px);
}
.ov-player__seg {
  background: var(--ov-accent);
  box-shadow: 0 0 var(--ov-pl-glow) var(--ov-accent);
}
.ov-player__track:has(.ov-player__wave:not([hidden])) .ov-player__buf { inset-block: auto 0; block-size: 5px; }
.ov-player__track:has(.ov-player__wave:not([hidden])) .ov-player__seg {
  background: color-mix(in srgb, var(--ov-accent) 30%, transparent);
  box-shadow: inset 0 -3px 0 var(--ov-accent);
}
.ov-player__wave {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.ov-player__wave path { fill: color-mix(in srgb, var(--ov-ink) 55%, transparent); stroke: none; }
.ov-player__edge {
  position: absolute;
  inset-block: -4px;
  border-block: 2px solid var(--ov-accent);
  border-inline-end: 2px solid var(--ov-accent);
  opacity: .7;
}
.ov-player__head-mark {
  position: absolute;
  inset-block: -5px;
  inline-size: 0;
  border-inline-start: 2px solid var(--ov-ink);
  translate: -1px 0;
}
.ov-player__head-mark[data-ov-moving="no"] { border-inline-start: 2px dashed var(--ov-alarm); }
.ov-player__seek {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ov-player__tip {
  position: absolute;
  inset-block-end: calc(100% + 4px);
  translate: -50% 0;
  padding: 2px 6px;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .08em;
  background: var(--ov-field);
  border: var(--ov-rule, 1px) solid var(--ov-line);
  color: var(--ov-ink);
}
.ov-player__tip[data-ov-where="not-buffered"] { border-style: dashed; color: var(--ov-alarm); }
.ov-player__bar[data-ov-refusal]::after {
  content: attr(data-ov-refusal);
  display: block;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ov-alarm);
}
.ov-player__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.ov-player__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ov-player__group--end { justify-content: flex-end; }
.ov-player__controls button { font-size: var(--ov-size-1, 10px); }
.ov-player__play[data-ov-pending="yes"] { border-style: dashed; }
.ov-player__time { color: var(--ov-dim, var(--ov-ink)); font-variant-numeric: tabular-nums; letter-spacing: .06em; padding-inline-start: 6px; white-space: nowrap; }
.ov-player__nocc { color: var(--ov-faint); letter-spacing: .08em; padding-inline: 4px; }
.ov-player__vol { inline-size: 72px; }
.ov-player__counts {
  justify-self: end;
  color: var(--ov-faint);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.ov-player__counts:empty { display: none; }
ov-player[data-ov-dropping] .ov-player__counts { color: var(--ov-ink); }
.ov-player__why { color: var(--ov-alarm); letter-spacing: .1em; line-height: 1.4; }
.ov-player__why:empty { display: none; }
.ov-player__demo {
  padding: 2px 6px;
  font-size: 9px;
  border: var(--ov-rule, 1px) dashed var(--ov-line);
  color: var(--ov-faint);
  letter-spacing: .16em;
  text-align: center;
}
.ov-player__demo:empty { display: none; }
.ov-player__say {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ov-player__icon {
  display: none;
  inline-size: var(--ov-pl-size, 16px);
  block-size: var(--ov-pl-size, 16px);
  line-height: 1;
  background-color: var(--ov-pl-ink, currentColor);
  -webkit-mask: var(--ov-pl-mask, none) center / contain no-repeat;
  mask: var(--ov-pl-mask, none) center / contain no-repeat;
}
.ov-player__icon::before { content: var(--ov-pl-glyph, none); white-space: nowrap; letter-spacing: 0; text-transform: none; }
ov-player .ov-player__icon:not([data-ov-icon]) { display: none !important; }
.ov-player__controls button { display: inline-flex; align-items: center; justify-content: center; gap: .6ch; }
ov-player:not([data-ov-controls="words"]) :is(.ov-player__controls, .ov-player__frame) .ov-player__icon { display: inline-block; }
ov-player:not([data-ov-controls="words"]) :is(.ov-player__controls button:not(.ov-player__rate, .ov-player__golive), .ov-player__nocc) .ov-player__word {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
ov-player:not([data-ov-controls="words"]) .ov-player__controls button {
  min-block-size: 28px;
  padding: 4px calc(6px + var(--ov-ctl-corner) + var(--ov-ctl-chamfer))
           4px calc(6px + var(--ov-ctl-edge) + var(--ov-ctl-chamfer));
}
ov-player:not([data-ov-controls="words"]) .ov-player__play .ov-player__icon { --ov-pl-size-play: 18px; }
ov-player:not([data-ov-controls="words"]) .ov-player__play[data-ov-pending="yes"] { color: var(--ov-alarm); }
ov-player:not([data-ov-controls="words"]) .ov-player__rate { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
ov-player:not([data-ov-controls="words"]) .ov-player__nocc { display: inline-flex; align-items: center; color: var(--ov-faint); padding-inline: 8px; }
ov-player:not([data-ov-controls="words"]) .ov-player__nocc[hidden] { display: none; }
ov-player:not([data-ov-controls="words"]) .ov-player__group { gap: 2px; }
ov-player:not([data-ov-controls="words"]) .ov-player__vol { inline-size: 64px; margin-inline-end: 4px; }
.ov-player__big {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 40px;
  padding: 8px calc(12px + var(--ov-ctl-corner) + var(--ov-ctl-chamfer))
           8px calc(12px + var(--ov-ctl-edge) + var(--ov-ctl-chamfer));
  font-size: var(--ov-size-5, 16px);
}
.ov-player__big .ov-player__icon { inline-size: calc(var(--ov-pl-size, 16px) * 1.4); block-size: calc(var(--ov-pl-size, 16px) * 1.4); }
.ov-player__big[hidden] { display: none; }
ov-player[data-ov-controls="words"] .ov-player__big { display: none; }
ov-player[data-ov-controls="words"] .ov-player__icon { display: none !important; }
.ov-player__big,
ov-player[data-ov-controls="overlay"] .ov-player__controls button:not([aria-pressed="true"]) {
  background-color: color-mix(in srgb, var(--ov-field) 80%, transparent);
}
.ov-player__big:hover,
ov-player[data-ov-controls="overlay"] .ov-player__controls button:not([aria-pressed="true"]):hover {
  background-color: var(--ov-raised);
}
ov-player[data-ov-controls="overlay"] { grid-template-columns: minmax(0, 1fr); }
ov-player[data-ov-controls="overlay"] .ov-player__head { grid-row: 1; }
ov-player[data-ov-controls="overlay"] .ov-player__frame { grid-row: 2 / 5; grid-column: 1; }
ov-player[data-ov-controls="overlay"] .ov-player__frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  block-size: 42%;
  background: linear-gradient(transparent, color-mix(in srgb, #000 78%, transparent));
  pointer-events: none;
}
ov-player[data-ov-controls="overlay"] .ov-player__bar { grid-row: 3; grid-column: 1; z-index: 1; align-self: end; margin-inline: 12px; }
ov-player[data-ov-controls="overlay"] .ov-player__controls { grid-row: 4; grid-column: 1; z-index: 1; align-self: end; padding: 0 8px 6px; }
ov-player[data-ov-controls="overlay"] .ov-player__track { background: color-mix(in srgb, #000 55%, transparent); }
ov-player[data-ov-controls="overlay"] .ov-player__time { color: #f2f2f2; }
ov-player[data-ov-controls="overlay"] .ov-player__veil {
  inset: 0 0 auto;
  z-index: 1;
}
@container (max-width: 560px) {
  ov-player:not([data-ov-controls="words"]) .ov-player__controls { flex-wrap: wrap; gap: 4px 6px; }
  ov-player:not([data-ov-controls="words"]) .ov-player__group { gap: 1px; }
  ov-player:not([data-ov-controls="words"]) .ov-player__controls button { min-block-size: 26px; }
  ov-player:not([data-ov-controls="words"]) .ov-player__time { padding-inline-start: 4px; letter-spacing: 0; }
  ov-player:not([data-ov-controls="words"]) .ov-player__group { flex-wrap: nowrap; }
  ov-player:not([data-ov-controls="words"]) .ov-player__vol { display: none; }
  ov-player:not([data-ov-controls="words"]) .ov-player__controls button {
    padding-inline: calc(3px + var(--ov-ctl-edge) + var(--ov-ctl-chamfer)) calc(3px + var(--ov-ctl-corner) + var(--ov-ctl-chamfer));
  }
  ov-player:not([data-ov-controls="words"]) .ov-player__nocc { padding-inline: 4px; }
}
ov-player:fullscreen {
  box-sizing: border-box;
  padding: 16px;
  background: var(--ov-field);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
}
ov-player:fullscreen .ov-player__frame { aspect-ratio: auto; }
}