* { box-sizing: border-box; }
:root { color-scheme: dark; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: #0a0a0c; color: #f4f1e8; font-family: var(--font-display, "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif); -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #ff4b31; outline-offset: 3px; }
.film, .stage, .stage canvas, .graphic, .reference { position: absolute; inset: 0; width: 100%; height: 100%; }
.film { isolation: isolate; background: #0a0a0c; }
.stage { z-index: 0; }
.stage canvas { display: block; }
.graphic { z-index: 1; pointer-events: none; }
.reference { z-index: 7; display: none; object-fit: contain; background: #09090b; }
.film.is-comparing .stage, .film.is-comparing .graphic { inset-inline-end: 50%; width: 50%; }
.film.is-comparing .reference { display: block; inset-inline-start: 50%; width: 50%; }
.topbar { position: absolute; z-index: 8; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(18px, env(safe-area-inset-top)) clamp(16px, 3vw, 46px) 10px; color: rgba(245,242,233,.75); mix-blend-mode: difference; }
.brand { width: max-content; color: inherit; text-decoration: none; font-size: 12px; font-weight: 680; }
.topbar p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 8px; font-weight: 720; letter-spacing: .19em; }
.topbar i { width: 3px; height: 3px; border-radius: 50%; background: #ff4b31; }
.topbar > button { justify-self: end; }
.transport { position: absolute; z-index: 9; right: clamp(12px, 3.2vw, 48px); bottom: max(14px, env(safe-area-inset-bottom)); left: clamp(12px, 3.2vw, 48px); display: grid; grid-template-columns: 44px minmax(130px, 1fr) 62px 38px 38px; gap: 9px; align-items: center; padding: 9px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(12,12,15,.68); color: #f7f4ec; backdrop-filter: blur(20px) saturate(1.25); }
.play, .utility, select { border: 1px solid rgba(255,255,255,.16); color: inherit; background: rgba(255,255,255,.09); cursor: pointer; }
.play { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f5f1e7; color: #111; }
.utility, select { min-height: 36px; border-radius: 999px; font-size: 11px; }
.icon-button { width: 36px; padding: 0; }
.utility[aria-pressed="true"] { color: #111; background: #f5f1e7; }
.compare { padding: 0 13px; }
.timeline { min-width: 0; }
.timeline > input { width: 100%; margin: 0; accent-color: #ff4b31; }
.time { display: grid; grid-template-columns: 44px 1fr 44px; color: rgba(255,255,255,.5); font-size: 8px; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.time span:nth-child(2) { color: rgba(255,255,255,.84); text-align: center; }
.time span:last-child { text-align: right; }
.disclosure { position: absolute; z-index: 6; right: clamp(18px, 4vw, 60px); bottom: 88px; max-width: 300px; text-align: right; color: rgba(245,242,233,.58); mix-blend-mode: difference; }
.disclosure strong { display: block; margin-bottom: 5px; color: #ff6b53; font-size: 8px; letter-spacing: .17em; }
.disclosure span { font-size: 9px; line-height: 1.45; }
.fallback { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; background: #0a0a0c; }
.fallback[hidden] { display: none; }
@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr auto; padding-inline: 16px; }
  .topbar p { display: none; }
  .disclosure { right: 16px; bottom: 84px; max-width: 230px; }
  .disclosure span { display: none; }
  .transport { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; grid-template-columns: 40px minmax(0,1fr) 54px 34px 34px; gap: 5px; padding: 8px; }
  .play { width: 38px; height: 38px; }
  .time { grid-template-columns: 36px 1fr 36px; letter-spacing: .02em; }
  .film.is-comparing .stage, .film.is-comparing .graphic { inset: 0 0 50%; width: 100%; height: 50%; }
  .film.is-comparing .reference { inset: 50% 0 0; width: 100%; height: 50%; }
}