* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { display: grid; grid-template-rows: 58px minmax(0, 1fr); min-height: 100vh; background: #e8ebe7; color: var(--op-text); font-family: var(--op-font-sans); -webkit-font-smoothing: antialiased; }
.mobile-preview-header { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--op-border); background: color-mix(in srgb, var(--op-surface) 94%, transparent); backdrop-filter: blur(12px); }
.mobile-preview-header a { color: var(--op-text-secondary); font-size: 12px; font-weight: 650; text-decoration: none; }
.mobile-preview-header a:last-child { justify-self: end; }
.mobile-preview-header a:hover { color: var(--op-text); }
.mobile-preview-header strong { font: 700 13px/1 var(--op-font-display); }
.mobile-preview-stage { display: grid; min-height: 0; place-items: center; padding: 32px; overflow: auto; }
.mobile-device { width: 390px; height: min(844px, calc(100vh - 96px)); min-height: 620px; overflow: hidden; border: 7px solid #26302a; border-radius: 35px; background: var(--op-surface); box-shadow: 0 30px 80px rgba(33, 44, 37, .2), 0 3px 12px rgba(33, 44, 37, .14); }
.mobile-device iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--op-bg); }
@media (max-width: 520px) {
  body { display: block; min-height: 100dvh; background: var(--op-bg); }
  .mobile-preview-header { display: none; }
  .mobile-preview-stage { display: block; min-height: 100dvh; padding: 0; }
  .mobile-device { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
}