.video-controls {
  position: absolute;
  z-index: 4;
  left: 4.5%;
  right: calc(4.5% + 115px);
  bottom: 74px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px 3px 5px;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  background: #10231970;
  backdrop-filter: blur(8px);
  color: var(--cream);
}
.video-controls[hidden], .video-gesture-hint[hidden], .video-moment[hidden] { display: none; }
.video-play { flex: 0 0 36px; height: 40px; padding: 0; background: transparent; font-size: 21px; border-radius: 50%; }
.video-play:hover { background: #ffffff15; }
.video-time { flex: 0 0 76px; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .3px; white-space: nowrap; text-align: right; }
.video-rail { position: relative; flex: 1; min-width: 0; height: 28px; }
.has-moments .video-rail { height: 28px; }
.video-moments { position: absolute; left: 0; right: 0; bottom: calc(100% + 18px); height: 60px; pointer-events: none; }
.video-moment { position: absolute; top: 0; width: 96px; height: 60px; transform: translateX(-50%); padding: 0; border: 1px solid #ffffff65; border-radius: 8px; overflow: hidden; background: #15231c; box-shadow: 0 8px 24px #0007, 0 2px 5px #0005; pointer-events: auto; transition: border-color .2s, box-shadow .2s, translate .2s; }
.video-moment img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .8; transition: opacity .2s; }
.video-moment span { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px; background: linear-gradient(transparent, #000c); font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.video-moment:focus-visible { border-color: var(--lime); box-shadow: 0 0 0 2px #deff9b30, 0 12px 28px #0008; }
@media (hover: hover) {
  .video-moment:hover { border-color: var(--lime); box-shadow: 0 0 0 2px #deff9b30, 0 12px 28px #0008; translate: 0 -5px; }
}
.video-moment:hover img, .video-moment:focus-visible img { opacity: 1; }
.video-gesture-hint { position: absolute; left: 4.5%; bottom: 90px; pointer-events: none; font-size: 9px; letter-spacing: 1.4px; color: var(--lime); }
.video-timeline {
  --progress: 0%;
  position: absolute;
  bottom: -3px;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  accent-color: var(--lime);
}
.video-timeline::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--lime) var(--progress), #ffffff40 var(--progress)); }
.video-timeline::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; background: var(--lime); border-radius: 50%; border: 0; }
.video-timeline::-moz-range-track { height: 2px; border-radius: 2px; background: #ffffff40; }
.video-timeline::-moz-range-progress { height: 2px; background: var(--lime); }
.video-timeline::-moz-range-thumb { width: 10px; height: 10px; background: var(--lime); border-radius: 50%; border: 0; }
.video-timeline:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 5px; }
.party-interactive { cursor: grab; touch-action: pan-y pinch-zoom; }
.party-interactive .party-content { user-select: none; -webkit-user-select: none; }
.party-interactive.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.party-interactive.is-dragging .party-content { opacity: .25; }
.party-content { transition: opacity .25s; }
.copy-toggle { display: none; }
@media (max-width: 800px) {
  .video-controls { left: 6%; right: 6%; bottom: 78px; gap: 8px; padding: 3px 8px 1px 3px; border-radius: 8px; background: #10231955; }
  .video-play { flex-basis: 32px; height: 40px; font-size: 19px; }
  .video-time { flex-basis: 62px; font-size: 9px; letter-spacing: 0; }
  .has-moments .video-rail { height: 28px; }
  .video-moments { height: 44px; bottom: calc(100% + 20px); }
  .video-moment { width: 64px; height: 44px; border-radius: 6px; }
  .video-moment span { font-size: 9px; padding: 3px; }
  .video-gesture-hint { left: 6%; bottom: 98px; font-size: 8px; letter-spacing: 1px; }
  body[data-active-chapter="pool"] .motion-toggle,
  body[data-active-chapter="dance"] .motion-toggle { bottom: 194px; }
  .has-video-controls .chapter-copy { top: 45%; }
  .intro-content h1 { font-size: clamp(40px, 10vw, 58px); letter-spacing: -2.5px; margin: 22px 0; }
  .intro-content .intro-caption { font-size: 10px; }
  .party-content h2, .chapter-copy h2 { font-size: clamp(40px, 10vw, 60px); letter-spacing: -2px; line-height: 1.08; margin: 18px 0; }
  .party-content h2 em, .chapter-copy h2 em { letter-spacing: -2px; }
  .chapter-copy > p { font-size: 12px; line-height: 1.7; margin-top: 18px; }
  .party-content, .chapter-copy { max-width: 82%; transition: opacity .55s, visibility .55s; }
  .mobile-copy-hidden .party-content, .mobile-copy-hidden .chapter-copy { opacity: 0; visibility: hidden; pointer-events: none; }
  .mobile-copy-hidden .shade { background: linear-gradient(0deg, #09140f80, transparent 35%, transparent 78%, #09140f40); }
  .copy-toggle { display: block; position: absolute; top: 82px; right: 6%; z-index: 5; min-height: 36px; padding: 8px 12px; border-radius: 20px; border: 1px solid #ffffff25; background: #10231960; color: var(--cream); backdrop-filter: blur(8px); font-size: 8px; letter-spacing: 1px; }
  .copy-toggle[hidden] { display: none; }
}
@media (max-width: 360px) {
  .video-controls { gap: 5px; }
  .video-time { flex-basis: 52px; font-size: 8px; }
  .video-moment { width: 52px; height: 40px; }
}