:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070a10;
  color: #f6f7fb;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(circle at 50% 20%, #1a2335 0, #090d15 42%, #05070b 100%);
}

.viewer-shell, #viewer { width: 100%; height: 100%; border: 0; }
.viewer-shell { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
#viewer { position: absolute; inset: 0; display: block; background: #070a10; opacity: 0; transition: opacity .35s ease; }
#viewer.ready { opacity: 1; }

.loading {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 14px;
  text-align: center; color: #cbd4e5; font-size: 14px; letter-spacing: .02em;
}

.loading.hidden { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.spinner { width: 34px; height: 34px; margin: auto; border: 3px solid #28334a; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.fullscreen {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 3; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  color: white; background: rgba(8,12,19,.7); backdrop-filter: blur(12px); font-size: 23px; cursor: pointer;
}
.fullscreen:hover { background: rgba(25,32,46,.9); }

.setup-card {
  width: min(520px, calc(100% - 40px)); margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: grid; align-content: center;
  justify-items: center; text-align: center; padding: 32px;
}
.setup-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #e8ecf7; color: #111827; font-size: 28px; font-weight: 800; }
h1 { margin: 24px 0 8px; font-size: clamp(26px, 5vw, 38px); }
p { margin: 0; max-width: 430px; color: #aeb9cc; line-height: 1.65; }
code { color: #e8ecf7; }

@media (max-width: 480px) {
  .setup-card { width: 100%; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
  .fullscreen { width: 42px; height: 42px; border-radius: 11px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .setup-card { padding: 18px 28px; }
  .setup-mark { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; }
  h1 { margin-top: 14px; font-size: 24px; }
  p { font-size: 13px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}