/* Ported from apps/web/src/components/Phone.module.css (CSS Module `.fooBar` -> `.phone__foo-bar`). */
.phone__frame {
  max-width: 100%;
  border-radius: 9.5% / 4.4%;
  overflow: hidden;
  border: 6px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 22px 45px -22px #00000050;
}
.phone__frame img {
  width: 100%;
  height: auto;
}
/* Fixed frame widths replace the inline style="width" so CSP can drop 'unsafe-inline'. */
.phone__frame--hero {
  width: 270px;
}
.phone__frame--showcase {
  width: 280px;
}
.phone__dark {
  display: none;
}
html[data-theme='dark'] .phone__light {
  display: none;
}
html[data-theme='dark'] .phone__dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .phone__light {
    display: none;
  }
  html:not([data-theme='light']) .phone__dark {
    display: block;
  }
}