* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: Zain, sans-serif; background: #161414; color: #fff5ed; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
main { position: relative; }
#scene { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
button { font: inherit; font-size: 19px; border: 0; cursor: pointer; }
button:focus-visible { outline: 3px solid #fff5ed; outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .45; }
.positions { position: absolute; bottom: max(56px, calc(env(safe-area-inset-bottom) + 40px)); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 9px; background: #181615df; white-space: nowrap; }
.positions button { padding: 8px 18px; border-radius: 5px; color: #fff5ed; background: transparent; }
.positions button[aria-pressed="true"] { background: #B8775D; color: #191311; }
.positions button:hover:not(:disabled) { background: #B8775Daa; }
.hint { position: absolute; bottom: max(8px, env(safe-area-inset-bottom)); width: 100%; text-align: center; margin: 0 0 10px; color: #fff5edb0; font-size: 15px; pointer-events: none; }
/* Match the app intro's ink background, letterboxing, and fade timing. */
#intro { position: absolute; inset: 0; z-index: 2; background: #11151c; opacity: 1; transition: opacity 350ms ease; }
#intro-video { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 150ms ease; }
#intro-video.is-playing { opacity: 1; }
#intro.is-finished { opacity: 0; }
#intro[hidden], #status[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#status.demo-error { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; background: #11151c; font-size: 24px; padding: 32px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  #intro, #intro-video { transition: none; }
}
@media (max-width: 500px) {
  .positions button { padding: 9px 12px; font-size: 18px; }
  .hint { font-size: 13px; padding: 0 12px; }
}

/* Compact controls inside a live device preview. Native camera gestures stay active. */
.embedded .hint { display: none; }
.embedded .positions { bottom: 17px; padding: 4px; }
.embedded .positions button { padding: 7px 11px; font-size: 16px; }
.phone-preview .positions { bottom: 20px; gap: 1px; }
.phone-preview .positions button { font-size: 14px; padding: 9px 7px; }
@media (max-width: 400px) {
  .positions { gap: 1px; max-width: calc(100% - 12px); padding: 3px; }
  .positions button, .embedded .positions button { padding: 8px 8px; font-size: 15px; }
}

.phone-preview .positions { width: calc(100% - 14px); max-width: 280px; justify-content: center; }
.phone-preview .positions button { flex: 1; font-size: 14px; padding: 9px 5px; min-height: 40px; }

.embedded.full-view-preview .hint { display: block; }
.embedded.full-view-preview .positions { bottom: max(56px, calc(env(safe-area-inset-bottom) + 40px)); width: auto; }
.embedded.full-view-preview .positions button { font-size: 19px; padding: 8px 18px; }
@media (max-width: 400px) {
  .embedded.full-view-preview .positions button { font-size: 15px; padding: 8px; }
}