:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#faf7f0;background:#08090e;--gold:#d9c6a2}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit}button:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button{color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}[hidden]{display:none!important}
.experience{position:relative;width:100%;height:100svh;height:100dvh;min-height:240px;overflow:hidden;isolation:isolate;background:#08090e}
#welcome{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#08090e}
#welcome::cue{color:#fff;background:rgba(8,9,14,.62);font-size:1.15rem}
.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 18%,transparent 76%,rgba(0,0,0,.38))}
#aura{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.brand{position:absolute;top:max(32px,env(safe-area-inset-top));left:max(36px,env(safe-area-inset-left));display:flex;gap:12px;align-items:center;user-select:none;text-shadow:0 2px 16px #000;font-size:17px;letter-spacing:.26em;font-weight:500}
.brand-ai{font-size:11px;letter-spacing:.08em;border:1px solid #ffffff55;padding:5px 6px;border-radius:5px;background:#08090e44}
.toolbar{position:absolute;bottom:max(30px,calc(env(safe-area-inset-bottom) + 16px));left:max(36px,env(safe-area-inset-left));right:max(36px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:16px}
.film-label{font-size:11px;letter-spacing:.22em;color:#ffffffb0;text-shadow:0 2px 8px #000}
.controls{display:flex;align-items:center;background:rgba(8,9,14,.65);border:1px solid #ffffff29;border-radius:50px;padding:4px;box-shadow:0 5px 24px #0002;backdrop-filter:blur(12px)}
.controls button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:0;background:none;border-radius:30px;padding:0 16px;font-size:13px;transition:background .2s,color .2s}
.controls button:hover{background:#ffffff14;color:var(--gold)}.controls #playback,.controls #fullscreen{width:46px;padding:0}.sound-icon{font-size:20px;color:var(--gold)}.divider{height:18px;width:1px;background:#ffffff25}.controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff12}#progress-fill{height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s linear;opacity:.65}
.fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#08090e66;text-align:center;padding:32px;cursor:pointer}.fallback p{font-size:clamp(20px,4vw,32px);font-weight:400;letter-spacing:-.02em}.fallback button{background:#f6f1e8;color:#15151b;border:0;border-radius:40px;padding:16px 24px;min-height:48px}.fallback button span{margin-left:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{position:absolute;bottom:90px;left:24px;right:24px;text-align:center;font-size:14px}.no-script a{color:var(--gold)}
@media(max-width:600px){.brand{top:max(24px,env(safe-area-inset-top));left:22px;font-size:15px}.toolbar{left:18px;right:18px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px))}.film-label{display:none}.controls{margin-left:auto}.controls button{font-size:13px}}
/* The closing card contains baked-in text. Preserve it on portrait screens. */
@media(max-aspect-ratio:4/5){.closing #welcome{object-fit:contain}}
@media(prefers-reduced-motion:reduce){#aura{display:none}*{transition:none!important}}

/* A portrait phone receives a full-viewport landscape stage, even without orientation-lock support. */
@media (max-width:767px) and (orientation:portrait), (pointer:coarse) and (orientation:portrait){
  .experience{position:fixed;left:50%;top:50%;width:100svh;width:100dvh;height:100vw;min-height:0;transform:translate(-50%,-50%) rotate(90deg)}
  .brand{top:18px;left:max(24px,env(safe-area-inset-top))}
  .toolbar{bottom:16px;left:24px;right:max(24px,env(safe-area-inset-bottom))}
  .fallback{padding:16px}.fallback p{font-size:22px;margin:0 0 16px}
  .closing #welcome{object-fit:contain}
  #aura{display:none}
}
@media (pointer:coarse) and (orientation:landscape){
  .brand{top:16px}.toolbar{bottom:14px}.film-label{display:none}
  .closing #welcome{object-fit:contain}
}