* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; }
body { font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
.page { width: 100vw; height: 100svh; min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; background: #fff; }
.loop-video { display: block; background: #fff; }
.button { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10; display: inline-flex; align-items: center; justify-content: center; min-width: 104px; height: 42px; padding: 0 28px; border: 1.5px solid #000; border-radius: 999px; background: rgba(255,255,255,.82); color: #000; text-decoration: none; font-size: 15px; line-height: 1; letter-spacing: .02em; }
@media (orientation: landscape) {
  .page { background: #000; }
  .loop-video { width: 100vw; height: 100svh; min-height: 100vh; object-fit: cover; }
}
@media (orientation: portrait) {
  body { overflow: hidden; }
  .page { padding: max(18px, env(safe-area-inset-top)) 18px calc(76px + env(safe-area-inset-bottom)); }
  .loop-video { width: min(92vw, 760px); height: auto; max-height: calc(100svh - 118px - env(safe-area-inset-bottom)); object-fit: contain; }
}