/* The film: the site as one continuous piece, like a video. These rules sit on top of main.css. */

/* no buttons or tap prompts anywhere: it plays by itself */
.hud__sound, .taphint, .resume, .up__ctrl { display: none !important; }

/* while the film plays and the mouse is still, the pointer hides too, as in a video player */
.stage.is-idle { cursor: none; }

/* the 25 reasons are end credits on black (the old deck's warm background is gone) */
.scene--reasons { background: #000; color: #f4f0f7; }

/* ---------------------------------------------------------------- the player
   One floating bar at the bottom, like a video player's: play, back and forward 10 s, the time, a scrubber
   across the whole film (with a mark where each part begins), the part's name, mute and fullscreen. */
.fp { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 40;
  display: flex; align-items: center; gap: 4px; width: min(94vw, 1040px); box-sizing: border-box; padding: 6px 14px 6px 6px;
  background: rgba(10, 10, 18, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; color: #ece8f4;
  font: 13px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; transition: opacity .45s ease, translate .45s ease; }
.fp[hidden] { display: none; }
.fp.is-idle { opacity: 0; translate: -50% 8px; pointer-events: none; }
.fp__btn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.fp__btn:hover, .fp__btn:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.fp__btn svg { width: 20px; height: 20px; fill: currentColor; }
.fp__play svg, .fp [data-act='mute'] svg, .fp [data-act='fs'] svg { display: none; }
.fp[data-state='paused'] .i-play, .fp[data-state='playing'] .i-pause, .fp[data-state='ended'] .i-again { display: block; }
.fp:not(.is-muted) .i-sound, .fp.is-muted .i-muted, .fp:not(.is-fs) .i-fs, .fp.is-fs .i-fs-exit { display: block; }
.fp__time { flex: none; margin: 0 8px 0 4px; font-variant-numeric: tabular-nums; opacity: .85; white-space: nowrap; }
.fp__sep { margin: 0 5px; opacity: .5; }
.fp__track { position: relative; flex: 1 1 auto; min-width: 80px; height: 28px; display: flex; align-items: center; }
.fp__seek { width: 100%; margin: 0; background: transparent; accent-color: #cfcaff; cursor: pointer; position: relative; z-index: 1; }
.fp__marks { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; z-index: 2; }
.fp__marks i { position: absolute; top: -6px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, .55); }
@media (max-width: 640px) {
  .fp { gap: 2px; padding-right: 8px; }
  .fp [data-act='back'], .fp [data-act='fwd'] { display: none; }
  .fp__time { margin: 0 4px; font-size: 12px; }
}

/* Uptown's Approved-by page: the O of "Obi." is set as tall as the b, so it reads as a capital */
.ua__capo { font-size: 1.17em; line-height: 0; }