/* The film player. Every class is prefixed dsp-. It takes the page's tokens when the page defines them. */
.dsp {
  --dsf-paper: var(--ds-paper, #faf8f3); --dsf-ink: var(--ds-ink, #1d1d1b); --dsf-body: var(--ds-body, #2a2926);
  --dsf-soft: var(--ds-soft, #3c3a36); --dsf-hair: var(--ds-hair, #8a8a8a);
  --dsf-rule: color-mix(in srgb, var(--dsf-ink) 16%, var(--dsf-paper));
  --dsf-c: var(--ds-cyan, #009fe3);
  --dsf-text: var(--ds-text, "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --dsf-mono: var(--ds-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  margin: 0; color: var(--dsf-body); font-family: var(--dsf-text); font-weight: 420; line-height: 1.42; box-sizing: border-box; position: relative;
}
@media screen and (prefers-color-scheme: dark) {
  .dsp { --dsf-paper: var(--ds-paper, #141413); --dsf-ink: var(--ds-ink, #faf8f3); --dsf-body: var(--ds-body, #e9e6df); --dsf-soft: var(--ds-soft, #c9c5bc); }
}
.dsp *, .dsp *::before, .dsp *::after { box-sizing: border-box; }
.dsp-label { margin: 0; font: 700 .72rem/1.3 var(--dsf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dsf-soft); }
.dsp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dsp-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1rem, 2.6vw, 2rem); align-items: start; }
.dsp.dsp-one .dsp-grid { grid-template-columns: minmax(0, 1fr); }
.dsp-stage, .dsp-panel { min-width: 0; }
.dsp-film { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.dsp-clock { border: 1px solid var(--dsf-rule); padding: .8rem; }
.dsp-shots { display: flex; gap: 2px; margin: .7rem 0 .6rem; height: 2.2rem; }
.dsp-shots span { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: .55rem .35rem 0;
  font: 700 .62rem/1 var(--dsf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dsf-soft);
  background: color-mix(in srgb, var(--dsf-ink) 7%, var(--dsf-paper)); border-bottom: 3px solid transparent; }
.dsp-shots span.is-on { color: var(--dsf-ink); border-bottom-color: var(--dsf-ink); }
.dsp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.dsp-time { display: flex; gap: .5rem; align-items: baseline; font: 700 .66rem/1.3 var(--dsf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dsf-ink); }
.dsp-time output { font: 400 .9rem/1.2 var(--dsf-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-transform: none; }
.dsp-range { display: block; width: 100%; margin: .5rem 0 0; accent-color: var(--dsf-ink); min-height: 28px; }
.dsp-play, .dsp-run { font: 700 .7rem/1 var(--dsf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dsf-ink);
  background: transparent; border: 1px solid var(--dsf-ink); padding: .6rem .85rem; cursor: pointer; min-height: 36px; }
.dsp-play:hover:not(:disabled), .dsp-run:hover:not(:disabled):not([aria-disabled]) { background: var(--dsf-ink); color: var(--dsf-paper); }
.dsp-play:disabled, .dsp-run:disabled, .dsp-run[aria-disabled] { color: var(--dsf-soft); border-color: var(--dsf-rule); border-style: dashed; cursor: default; }
.dsp-play:focus-visible, .dsp-run:focus-visible, .dsp-range:focus-visible { outline: 2px solid var(--dsf-ink); outline-offset: 2px; }
.dsp-panel { border-top: 1px solid var(--dsf-ink); padding-top: .7rem; display: flex; flex-direction: column; gap: .55rem; }
.dsp-say, .dsp-do { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
/* the button row sits at the foot of the readout, so it never moves while the film plays and nothing gapes under it */
.dsp-do { flex: 1 1 auto; }
.dsp-hand { margin-top: auto; }
/* under the page's own film (data-film-for): the readout only, as wide as the film; two columns when there is room */
.dsp.dsp-under { margin-top: 1rem; }
.dsp-title { margin-bottom: .55rem; }
.dsp-under .dsp-grid { grid-template-columns: minmax(0, 1fr); }
.dsp-under:not(.dsp-one) .dsp-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem clamp(1rem, 2.6vw, 2rem); }
.dsp-claim { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 560; color: var(--dsf-ink); min-height: 2.7em; }
.dsp-fig { margin: 0; font: 700 .66rem/1.3 var(--dsf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dsf-ink); }
.dsp-state { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--dsf-body); min-height: 4.2em; font-variant-numeric: tabular-nums; }
.dsp-hand { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding-top: .2rem; }
.dsp-note { margin: 0; flex: 1 1 10rem; font-size: .8rem; color: var(--dsf-soft); }
.dsp-figure { margin-top: 1.4rem; padding-top: .8rem; border-top: 1px solid var(--dsf-rule); }
.dsp-figure > .dsp-label { margin-bottom: .8rem; color: var(--dsf-ink); }
@media (pointer: coarse) { .dsp-play, .dsp-run { min-height: 44px; } .dsp-range { min-height: 40px; } }
@media print {
  .dsp { --dsf-paper: #ffffff; --dsf-ink: #1d1d1b; --dsf-body: #2a2926; --dsf-soft: #3c3a36; }
  .dsp-hand, .dsp-row, .dsp-range { display: none; }
  .dsp-grid { break-inside: avoid; }
  .dsp.dsp-under { display: none; }   /* the page's film is not printed, so neither is its readout */
}
@media (forced-colors: active) {
  .dsp { --dsf-paper: Canvas; --dsf-ink: CanvasText; --dsf-body: CanvasText; --dsf-soft: CanvasText; --dsf-hair: GrayText; --dsf-rule: GrayText; }
  .dsp-shots span { background: Canvas; border: 1px solid GrayText; }
  .dsp-shots span.is-on { border: 2px solid Highlight; }
  .dsp-play:disabled, .dsp-run:disabled, .dsp-run[aria-disabled] { color: GrayText; border-color: GrayText; }
  /* the hover fill: system colours kept as given, or Canvas text on the text's Canvas backplate would vanish */
  .dsp-play:hover:not(:disabled), .dsp-run:hover:not(:disabled):not([aria-disabled]) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}