/* Shared base for the demo apps. Each demo is a 402×874 iPhone screen (iPhone 17 Pro points).
   Embedded in the phone on the home page through an iframe; opened directly it fills a phone-sized column. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --top: 54px;      /* status bar + Dynamic Island */
  --bottom: 34px;   /* home indicator */
}
html, body { height: 100%; }
body { font-family: var(--sf); -webkit-font-smoothing: antialiased; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid #0A84FF; outline-offset: 2px; border-radius: 8px; }
.screen { position: relative; width: 402px; height: 874px; overflow: hidden; margin: 0 auto; }
/* opened on its own (not inside the phone): centre the screen and let small phones scale it */
html:not(.embedded) body { background: #000; display: grid; place-items: start center; overflow: auto; }
html:not(.embedded) .screen { border-radius: 0; }
@media (max-width: 401px) { html:not(.embedded) .screen { zoom: calc(100vw / 402px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }