* {
  box-sizing: border-box;
}
html,
body,
#demo {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: white;
}
#demo {
  position: relative;
  container-type: inline-size;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:hover {
  outline: none;
  background: transparent;
}
button:focus-visible,
input:focus-visible {
  outline: 2px solid #eee;
  outline-offset: -2px;
}
.native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.motion {
  position: absolute;
  background: #202020;
  overflow: hidden;
}
.motion svg {
  width: 100%;
  height: 100%;
  display: block;
}
.motion .track {
  transform-origin: center;
}
.motion.mirror .track {
  transform: scaleX(-1);
}
.media-player {
  left: 3.57%;
  top: 14.4%;
  width: 92.86%;
  height: 76%;
}
.media-record {
  left: 0;
  top: 9.1%;
  width: 100%;
  height: 81.8%;
}
.media-compare {
  left: 4.1%;
  top: 25.25%;
  width: 91.8%;
  height: 42.15%;
  display: flex;
  border: 1px solid #ffffff16;
}
.media-compare .motion {
  position: relative;
  width: 50%;
  height: 100%;
}
.media-compare .motion + .motion {
  border-left: 1px solid #ffffff40;
}
.media-compare:after {
  content: "";
  position: absolute;
  left: calc(50% - 0.35cqw);
  top: 45.5%;
  height: 9%;
  width: 0.7cqw;
  background: #ddd;
  border-radius: 1cqw;
}
.island {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hit {
  position: absolute;
  z-index: 5;
  border-radius: 1cqw;
}
.hit.central {
  left: 40%;
  top: 48.3%;
  width: 20%;
  height: 8.2%;
  border-radius: 50%;
}
.pause {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 1.1cqw;
  border-radius: 50%;
  background: #101010;
}
.pause:before,
.pause:after {
  content: "";
  display: block;
  width: 1.5cqw;
  height: 5.5cqw;
  border-radius: 0.3cqw;
  background: white;
}
.playing .central .pause {
  display: flex;
}
.slider {
  position: absolute;
  z-index: 5;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 5cqw;
  padding: 0;
  margin: 0;
  touch-action: none;
  cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 1cqw;
  border-radius: 2cqw;
  background: #303030;
}
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 3.6cqw;
  height: 3.6cqw;
  background: #e06a3c;
  border: 0.7cqw solid white;
  border-radius: 50%;
  margin-top: -1.3cqw;
}
.slider::-moz-range-track {
  height: 1cqw;
  background: #303030;
}
.slider::-moz-range-thumb {
  width: 3cqw;
  height: 3cqw;
  background: #e06a3c;
  border: 2px solid white;
  border-radius: 50%;
}
.timeline-player {
  left: 5.6%;
  top: 83.8%;
  width: 88.8%;
}
.timeline-compare {
  left: 4.1%;
  top: 81.25%;
  width: 91.8%;
}
.dynamic-time {
  position: absolute;
  background: #202020;
  z-index: 4;
  font-size: 3.4cqw;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.elapsed {
  left: 5.5%;
  top: 87.3%;
  width: 17%;
}
.remaining {
  right: 5.5%;
  top: 87.3%;
  width: 20%;
  text-align: right;
}
.compare .elapsed {
  top: 86.1%;
  left: 4%;
  background: #0d0d0d;
}
.compare .remaining {
  top: 86.1%;
  right: 4%;
  background: #0d0d0d;
}
.compare .central {
  top: 84.9%;
  left: 44.5%;
  width: 11%;
  height: 4.3%;
  border-radius: 0;
}
.compare .pause {
  border-radius: 0;
  background: #0d0d0d;
}
.ab-label {
  position: absolute;
  background: #101010;
  top: 84.3%;
  font-size: 3.55cqw;
  font-weight: 650;
  line-height: 1.8;
  z-index: 4;
}
.ab-a {
  left: 7%;
  width: 16%;
}
.ab-b {
  left: 26.5%;
  width: 15%;
}
.ab-rail {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 88.35%;
  height: 2.05%;
  z-index: 5;
  pointer-events: none;
  background: #494949;
}
.ab-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #e06a3c55;
  border-left: 2px solid #e06a3c;
  border-right: 2px solid #e06a3c;
  pointer-events: none;
}
.ab-handle {
  pointer-events: auto;
  position: absolute;
  width: 8cqw;
  height: 10cqw;
  top: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: ew-resize;
}
.ab-handle:before {
  content: "";
  width: 1cqw;
  height: 4.2cqw;
  display: block;
  margin: auto;
  background: #e06a3c;
  border-radius: 0.5cqw;
}
.ab .timeline-player {
  top: 88.3%;
  left: 4%;
  width: 92%;
  opacity: 0.001;
  pointer-events: auto;
  z-index: 4;
}
.record-button {
  left: 40%;
  top: 86.6%;
  width: 20%;
  height: 8.4%;
  border-radius: 50%;
}
.record-time {
  position: absolute;
  top: 3%;
  left: 40%;
  width: 20%;
  background: #000;
  color: #ff6868;
  font-size: 3.5cqw;
  line-height: 1.6;
  text-align: center;
  z-index: 4;
  font-variant-numeric: tabular-nums;
}
.record-info {
  position: absolute;
  bottom: 3%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 2.6cqw;
  color: #aaa;
  background: #000;
  z-index: 4;
  pointer-events: none;
}
.static img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.record-label {
  position: absolute;
  left: 5%;
  top: 94%;
  font-size: 2.6cqw;
  color: #aaa;
}
.hint {
  position: absolute;
  z-index: 7;
  bottom: 8%;
  left: 12%;
  right: 12%;
  padding: 2.5cqw;
  background: #292929;
  border-radius: 2cqw;
  font-size: 3.1cqw;
  text-align: center;
  pointer-events: none;
}
.media-player > .motion,
.media-record > .motion {
  inset: 0;
}
.record .media-record {
  background: #202020;
}
.media-compare {
  position: absolute;
}
/* Native recording capsule sits above the media layer, below the Dynamic Island. */
.record-time {
  top: 7.03%;
  left: 41.3%;
  width: 17.4%;
  height: 3.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff3b30;
  color: #fff;
  border-radius: 1.55cqw;
  font-size: 4cqw;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  z-index: 7;
}
.timeline-clean {
  position: absolute;
  z-index: 4;
  left: 2.6%;
  right: 2.6%;
  top: 80.9%;
  height: 3%;
  background: #0d0d0d;
  pointer-events: none;
}
/* Transport follows the native player's three-second auto-hide behavior. */
.surface-toggle {
  left: 3.57%;
  top: 14.4%;
  width: 92.86%;
  height: 69%;
  z-index: 3;
}
.playback-chrome,
.central {
  transition: opacity 0.2s ease;
}
.chrome-hidden .playback-chrome,
.chrome-hidden .central {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.expanded .media-player {
  left: 0;
  top: 12.65%;
  width: 100%;
  height: 82.05%;
}
.expanded .surface-toggle {
  left: 0;
  top: 12.65%;
  width: 100%;
  height: 82.05%;
}
.expanded .central {
  top: 49.45%;
}
.expanded .ab-label {
  top: 88.4%;
  font-size: 4cqw;
  line-height: 2;
  background: #101010;
}
.expanded .ab-a {
  left: 7%;
  width: 16%;
}
.expanded .ab-b {
  left: 26.5%;
  width: 15%;
}
.expanded .ab-rail {
  top: 92.55%;
  left: 0;
  right: 0;
  height: 2.05%;
}
.expanded .timeline-player {
  top: 92.5%;
  left: 0;
  width: 100%;
}
.expanded.chrome-hidden .ab-label,
.expanded.chrome-hidden .ab-rail,
.expanded.chrome-hidden .timeline-player {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .playback-chrome,
  .central {
    transition: none;
  }
}

/* Library rows retain native chrome while names and dates remain localizable. */
.library-added { position:absolute; inset:0; pointer-events:none; }
.library-cover { position:absolute; left:8.95%; top:37.75%; width:17.9%; height:6.2%; border-radius:1.7cqw; overflow:hidden; background:#202020; }
.library-cover > img { width:100%; height:100%; object-fit:cover; display:block; }
.library-cover > .motion { inset:0; }
.library-row-text { position:absolute; left:29.8%; top:38.5%; width:49%; height:4.7%; background:#171717; display:flex; flex-direction:column; justify-content:center; gap:0.7cqw; }
.library-row-text strong { font-size:3.4cqw; font-weight:600; line-height:1.25; white-space:nowrap; }
.library-row-text > span { color:#737373; font-size:2.85cqw; line-height:1.25; white-space:nowrap; }
.library-row-no-segments { position:absolute; left:83%; top:39.1%; width:9%; height:3%; background:#171717; }
.native-text { position:absolute; z-index:8; display:flex; align-items:center; background:#000; pointer-events:none; white-space:nowrap; }
.player-title { left:20%; top:9.5%; width:60%; height:3%; justify-content:center; font-size:4.7cqw; font-weight:650; }
.library-heading { background:#0d0d0d; font-size:4.6cqw; font-weight:650; }
.library-recent-title { background:#171717; font-size:3.4cqw; font-weight:600; }
.library-recent-range { left:23.8%; top:24.8%; width:36%; height:1.8%; background:#171717; font-size:2.9cqw; color:#999; display:block; font-weight:550; }
.library-recent-range b { color:#e66b33; }
.library-tab, .compare-tab { justify-content:center; background:#060606; color:#777; font-size:3cqw; }
.library-tab.selected { color:#e66b33; }
.player-loop-label { left:6%; top:92.7%; width:14%; height:2.3%; justify-content:center; background:#101010; color:#aaa; font-size:3cqw; font-weight:600; }

/* The camera window shows a second animation, without requesting camera access. */
.camera-demo {
  position: absolute;
  left: 62.1%;
  top: 6.95%;
  width: 33.4%;
  height: 20.65%;
  border-radius: 2cqw;
  overflow: hidden;
  pointer-events: none;
}
.camera-demo > .motion {
  inset: 0;
}

/* Context photographs are stills; interactive demonstrations use the motion scene. */
.poster-image {
  position: absolute;
  overflow: hidden;
  background: #202020;
  pointer-events: none;
}
.poster-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.poster-image.media-compare {
  display: block;
}
.poster-image.media-compare:after {
  display: none;
}

/* Match the native comparison rate slot to the actual demo clock. */
.demo-speed {
  position: absolute; z-index: 7; left: 70.7%; top: 85.7%;
  width: 10.5%; height: 2.5%; display: flex; align-items: center;
  justify-content: center; background: #0d0d0d; color: #fff;
  font-size: 3.3cqw; line-height: 1; font-weight: 600;
  font-variant-numeric: tabular-nums; pointer-events: none;
}

.ab .demo-speed {
  left: 61%; top: 92.4%; width: 17%; height: 3.1%;
  background: #000; font-size: 4cqw; font-weight: 500;
}

/* Preserve the real landscape footage framing within the native player. */
.poster-image > img[src$="poster-hero-skate-photo.jpg"] {
  object-fit: contain; background: #161616;
  filter: brightness(0.72) saturate(0.65);
}

.poster-image > img[src$="poster-hero-skate-portrait.jpg"] {
  object-fit: cover; object-position: 35% center;
  filter: brightness(0.74) saturate(0.68);
}

.poster-image > img[src$="poster-hero-skate-extended.jpg"] {
  object-fit: cover; object-position: center;
  filter: brightness(0.74) saturate(0.68);
}

.poster-image > img[src$="poster-record-studio-photo.jpg"] {
  object-fit: cover; object-position: 50% center;
  filter: brightness(0.72) saturate(0.65);
}
.poster-image.media-compare.real-comparison {display: flex;}
.real-comparison > img {width: 50%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.72) saturate(0.65);}
.real-comparison > img + img {border-left: 1px solid #555;}

/* Give the full dance posture breathing room around the reference inset. */
.poster-image.dance-room {display: flex; align-items: center; justify-content: center; background: #202020;}
.poster-image.dance-room > img {height: 100%; width: 100%; object-fit: cover; object-position: 50% center; filter: brightness(0.84) saturate(0.75);}
.poster-image > img[src$="poster-record-dance-room-photo.jpg"] {object-fit: cover; object-position: 50% center; background: #202020; filter: brightness(0.84) saturate(0.75);}

.poster-image.choreography > img,
.poster-image > img[src$="poster-choreo-7969809.jpg"] {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(0.80) saturate(0.72);
}

.poster-image.original-dancer > img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(0.88) saturate(0.85);
}

/* Keep native recording close chrome above the full-bleed scene. */
.record-close-chrome {z-index: 6;}

/* Crossfade the scene without moving or scaling the native App chrome. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

.ab .elapsed, .ab .remaining { top:88.45%; background:#292929; font-weight:600; font-size:3.4cqw; }
.ab .elapsed { left:4%; }
.ab .remaining { right:4%; }
.ab.expanded .elapsed, .ab.expanded .remaining { top:93%; }