:root { color-scheme: dark; --black: #050505; --white: #dedede; --nav-height: 56px; }
* { box-sizing: border-box; }
html, body { background: var(--black); height: 100%; margin: 0; overflow: hidden; }
body { color: var(--white); font-family: Arial, Helvetica, sans-serif; }
button { font: inherit; }
@media (pointer: fine) { body, button { cursor: none; } }
#deck { align-items: center; background: var(--black); display: flex; height: calc(100svh - var(--nav-height)); justify-content: center; overflow: hidden; position: relative; width: 100%; }
.slide { aspect-ratio: 16 / 9; display: none; max-height: 100%; max-width: 100%; position: relative; width: min(100vw, calc((100svh - var(--nav-height)) * 16 / 9)); }
.slide.is-active { display: block; }
.slide img { display: block; height: 100%; user-select: none; width: 100%; }
.video-hotspot { background: transparent; border: 0; cursor: pointer; overflow: hidden; padding: 0; position: absolute; }
@media (pointer: fine) { .video-hotspot { cursor: none; } }
.video-hotspot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; z-index: 3; }
.video-hotspot video { height: 100%; object-fit: cover; opacity: 0; transition: opacity .14s ease; width: 100%; }
.video-hotspot.is-playing video { opacity: 1; }
/* Bodega's open-gate clip is 3:2 inside a wider 16:9-style tile. Preserve the full frame. */
.bodega-open-gate video { background: var(--black); object-fit: contain; }
body > .mobile-playback-video { height: 1px; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; width: 1px; }
/* Measured against the 1920 × 1080 Canva export so playback aligns with its original tile. */
.ralph-hero { left: 4.17%; top: 39.26%; width: 50.26%; height: 47.13%; }
.ralph-editorial { left: 56.15%; top: 26.57%; width: 19.01%; height: 59.91%; }
.ralph-day { left: 77.29%; top: 26.57%; width: 19.01%; height: 59.91%; }
.bmw-hero { left: 5.63%; top: 37.41%; width: 49.22%; height: 45.19%; }
.bmw-app { left: 57.55%; top: 31.30%; width: 16.35%; height: 51.48%; }
.bmw-ipa { left: 77.40%; top: 31.30%; width: 16.41%; height: 51.48%; }
.deck-nav { align-items: center; background: #17181d; border-top: 1px solid rgba(255,255,255,.12); bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; height: var(--nav-height); left: 0; padding: 0 clamp(.85rem,2.2vw,2.5rem); position: fixed; right: 0; z-index: 10; }
.brand, .nav-button { background: none; border: 0; color: var(--white); cursor: pointer; }
.brand { font-size: .66rem; font-weight: 800; justify-self: start; letter-spacing: -.06em; padding: .5rem 0; }
.slide-title, .slide-count { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .67rem; margin: 0; }
.slide-title { color: rgba(255,255,255,.72); text-align: center; }
.controls { align-items: center; display: flex; gap: .75rem; justify-content: end; }
.present-button { background: none; border: 1px solid rgba(255,255,255,.45); color: var(--white); cursor: pointer; display: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .58rem; letter-spacing: .08em; padding: .55rem .65rem; }
.nav-button { font-size: 1rem; padding: .65rem .35rem; }
.brand:focus-visible, .nav-button:focus-visible, .present-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.viewfinder-cursor { display: none; }
.mobile-entry { display: none; }
.mobile-entry.is-active { background: var(--black); display: block; inset: 0; position: fixed; z-index: 120; }
.mobile-entry iframe, .mobile-entry video { border: 0; height: 100%; inset: 0; position: absolute; width: 100%; }
.mobile-entry .rotate-instruction { display: none; }
.mobile-entry .morse-intro { display: block; }
.mobile-entry .mobile-present-button { background: var(--black); border: 1px solid rgba(255,255,255,.55); bottom: max(2.25rem, env(safe-area-inset-bottom)); color: var(--white); cursor: pointer; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; left: 50%; letter-spacing: .16em; padding: .7rem 1rem; position: absolute; transform: translateX(-50%); z-index: 2; }
.mobile-entry-complete .mobile-entry { display: none; }
.install-invite[hidden] { display: none; }
.install-invite { align-items: center; background: rgba(0,0,0,.72); display: flex; inset: 0; justify-content: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); position: fixed; z-index: 140; }
.install-invite-card { background: #111217; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 18px 70px rgba(0,0,0,.58); color: var(--white); max-height: min(90dvh, 620px); max-width: 31rem; overflow: auto; padding: clamp(1.3rem, 5vw, 2.35rem); position: relative; width: 100%; }
.install-invite-kicker { color: rgba(255,255,255,.58); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .58rem; letter-spacing: .18em; margin-bottom: 1rem; }
.install-invite h1 { font-size: clamp(1.65rem, 7vw, 2.7rem); font-weight: 700; letter-spacing: -.055em; line-height: .96; margin: 0 2rem .95rem 0; max-width: 12ch; }
.install-invite p { color: rgba(255,255,255,.76); font-size: clamp(.86rem, 2.8vw, 1rem); line-height: 1.5; margin: 0; max-width: 46ch; }
.install-invite-close { align-items: center; background: none; border: 0; color: rgba(255,255,255,.82); cursor: pointer; display: flex; font-size: 1.8rem; height: 2.2rem; justify-content: center; line-height: 1; padding: 0; position: absolute; right: .8rem; top: .75rem; width: 2.2rem; }
.install-invite-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.35rem; }
.install-invite-primary, .install-invite-secondary { cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; letter-spacing: .1em; padding: .7rem .85rem; }
.install-invite-primary { background: var(--white); border: 1px solid var(--white); color: #111217; }
.install-invite-secondary { background: none; border: 1px solid rgba(255,255,255,.34); color: var(--white); }
.install-invite-guide { border-top: 1px solid rgba(255,255,255,.16); margin-top: 1.35rem; padding-top: 1.15rem; }
.install-invite-guide-lead { color: var(--white) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem !important; letter-spacing: .1em; text-transform: uppercase; }
.install-invite-guide ol { color: rgba(255,255,255,.8); font-size: .87rem; line-height: 1.45; margin: .65rem 0 1rem; padding-left: 1.35rem; }
.install-invite-guide li { padding-left: .2rem; }
.install-invite-note { border-left: 2px solid rgba(255,255,255,.45); font-size: .77rem !important; padding-left: .7rem; }
.install-invite-guide > .install-invite-secondary { margin-top: 1rem; }
.install-invite button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.install-invite-open > *:not(.install-invite) { pointer-events: none; }
@media (pointer: fine) {
  .viewfinder-cursor { display: block; height: 34px; left: 0; pointer-events: none; position: fixed; top: 0; transform: translate3d(-100px,-100px,0); width: 34px; will-change: height, transform, width; z-index: 99; }
  .viewfinder-cursor i { height: 10px; position: absolute; width: 10px; }
  .viewfinder-cursor i:nth-child(1) { border-left: 1.5px solid #fff; border-top: 1.5px solid #fff; left: 0; top: 0; }
  .viewfinder-cursor i:nth-child(2) { border-right: 1.5px solid #fff; border-top: 1.5px solid #fff; right: 0; top: 0; }
  .viewfinder-cursor i:nth-child(3) { border-bottom: 1.5px solid #fff; border-right: 1.5px solid #fff; bottom: 0; right: 0; }
  .viewfinder-cursor i:nth-child(4) { border-bottom: 1.5px solid #fff; border-left: 1.5px solid #fff; bottom: 0; left: 0; }
  .viewfinder-cursor span { align-items: center; color: #fff; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(18px,1.5vw,26px); font-weight: 500; inset: 0; justify-content: center; letter-spacing: 0; line-height: 1; opacity: 0; position: absolute; text-transform: none; transition: opacity .18s ease; white-space: nowrap; }
  .viewfinder-cursor.has-label span { opacity: 1; }
}
@media (max-width: 520px) { :root { --nav-height: 52px; } .deck-nav { grid-template-columns: 1fr auto 1fr; } .slide-title { display: none; } .controls { gap: .6rem; } .slide-count { font-size: .63rem; } }
@media (hover: none) {
  .mobile-entry .rotate-instruction { object-fit: contain; }
  .mobile-entry .morse-intro { display: none; }
  .mobile-entry .mobile-present-button { display: none; }
  .mobile-entry[data-mode="rotate"] .rotate-instruction { display: block; }
  .mobile-entry[data-mode="intro"] .rotate-instruction { display: none; }
  .mobile-entry[data-mode="intro"] .morse-intro, .mobile-entry[data-mode="intro"] .mobile-present-button { display: block; }
  .present-button { display: inline-flex; }
  body.is-presenting #deck { height: 100dvh; }
  body.is-presenting .slide { width: min(100vw, calc(100dvh * 16 / 9)); }
  body.is-presenting .deck-nav { background: transparent; border: 0; bottom: 0; display: block; height: 100dvh; left: 0; padding: 0; pointer-events: none; right: 0; top: 0; transform: none; width: 100vw; }
  body.is-presenting .brand, body.is-presenting .slide-title, body.is-presenting .present-button { display: none; }
  body.is-presenting .controls { display: contents; }
  body.is-presenting .slide-count { bottom: max(.85rem, env(safe-area-inset-bottom)); color: rgba(255,255,255,.78); font-size: .58rem; left: 50%; position: absolute; transform: translateX(-50%); }
  body.is-presenting .nav-button { font-size: 1rem; height: 2.75rem; line-height: 1; padding: 0; pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; }
  body.is-presenting .nav-button:disabled { opacity: 0; pointer-events: none; }
  body.is-presenting .nav-button[data-action="previous"] { left: max(.4rem, env(safe-area-inset-left)); }
  body.is-presenting .nav-button[data-action="next"] { right: max(.4rem, env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) { .video-hotspot video { transition: none; } }
@media (max-width: 430px) {
  .install-invite-card { padding: 1.2rem 1rem 1.15rem; }
  .install-invite h1 { font-size: 1.7rem; }
  .install-invite-actions { align-items: stretch; flex-direction: column; }
  .install-invite-primary, .install-invite-secondary { width: 100%; }
}