*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#0b0d12;color:#e8eaf0;font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.viewer{display:flex;flex-direction:column;height:100vh;height:100dvh}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem max(1rem,env(safe-area-inset-right)) .5rem max(1rem,env(safe-area-inset-left));
  background:#141824;border-bottom:1px solid #232a3b}
.bar h1{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:.02em}
.btn{background:#2b3550;color:#fff;border:0;border-radius:8px;padding:.45rem .8rem;font:inherit;font-size:.9rem;cursor:pointer}
.btn:hover,.btn:focus-visible{background:#3a4770}
.stage{flex:1;min-height:0;position:relative;background:#000}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stage:fullscreen,.stage:-webkit-full-screen{width:100%;height:100%}
.hint{padding:.5rem max(1rem,env(safe-area-inset-left)) calc(.5rem + env(safe-area-inset-bottom));
  font-size:.85rem;color:#a7afc2;background:#141824;border-top:1px solid #232a3b;text-align:center}
.hint p{margin:0}
@media (max-height:480px) and (orientation:landscape){.hint{display:none}.bar{padding-top:.25rem;padding-bottom:.25rem}}
.go{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.go-box{max-width:34rem;width:100%;text-align:center}
.go-box h1{margin:0 0 1.5rem}
.big-btn{display:block;padding:1.6rem 1rem;border-radius:16px;background:#e5484d;color:#fff;
  font-size:1.6rem;font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(229,72,77,.35)}
.big-btn:hover,.big-btn:focus-visible{background:#f2555a}
.steps{text-align:left;margin:1.75rem auto 0;color:#c4cad8;line-height:1.7}