/* The one window frame for every composed Gina screen: a browser frame on desktop, a phone frame on phones. Markup: components/ux.njk. */
.ux-win { position: relative; margin: 0; border: 1px solid var(--v-hair, var(--line)); border-radius: 18px; overflow: hidden; background: var(--v-ground, var(--bg)); box-shadow: 0 30px 60px -30px rgba(11, 22, 40, .35); }
.ux-win__bar { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--v-hair, var(--line)); background: var(--v-mist, var(--bg-sunk)); }
.ux-win__dots { display: flex; gap: 7px; }
.ux-win__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--v-hair, var(--line)); }
.ux-win__url { justify-self: center; padding: 4px 14px; border-radius: 999px; background: var(--v-ground, var(--bg)); border: 1px solid var(--v-hair, var(--line)); font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-mut); }
.ux-win iframe { display: block; width: 100%; height: 560px; border: 0; background: transparent; }
.ux-win__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: the app as it looks on a phone, in a phone frame. */
@media (max-width: 899px) {
  .ux-win { max-width: 360px; margin-inline: auto; padding: 10px; border: 0; border-radius: 44px; background: #0B1628; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 24px 48px -24px rgba(11, 22, 40, .5); }
  .ux-win::before { content: ""; position: absolute; z-index: 1; top: 18px; left: 50%; width: 92px; height: 22px; margin-left: -46px; border-radius: 12px; background: #0B1628; }
  .ux-win__bar { display: none; }
  .ux-win iframe { border-radius: 34px; height: 640px; }
}