/* Emulator: the phone. On anything wide, a phone's screen under the app bar; on a phone itself, the whole screen, no bar. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #E9ECEE; overscroll-behavior: none; font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.emu { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.emu-room { display: grid; place-items: center; min-height: 0; height: 100%; padding: 16px; }
.emu-screen { position: relative; overflow: hidden; height: min(100%, 844px); aspect-ratio: 390 / 844; border-radius: 34px; background: #0A2E29; box-shadow: 0 0 0 9px #14181c, 0 24px 60px -18px #0f172a80; }
/* A phone in its frame has the front camera; a phone itself has its own. */
@media (min-width: 601px) {
  .emu-screen::before { content: ""; position: absolute; z-index: 6; top: 11px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #2b3a52 0 18%, #07090c 42%); box-shadow: 0 0 0 1.5px #000; pointer-events: none; }
}
@media (max-width: 600px) {
  body { background: #000; }
  .emu > header { display: none; }
  .emu-room { padding: 0; display: block; }
  .emu-screen { position: fixed; inset: 0 0 auto 0; width: 100%; height: var(--wl-viewport, 100dvh); aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}