@font-face { font-family: Poppins; src: url('/fonts/poppins/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url('/fonts/poppins/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
:root { color-scheme: dark; font-family: Poppins, sans-serif; color: #e0e0e0; background: #111; }
* { box-sizing: border-box; }
body { margin: 0; }
.app-preview-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px max(24px, calc((100vw - 1440px) / 2)); background: #1e1e1e; border-bottom: 1px solid #333; }
h1 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.app-preview-bar p { margin: 4px 0 0; font-size: .75rem; color: #aaa; }
.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 20px; border-radius: 10px; font-size: .875rem; font-weight: 600; text-decoration: none; }
.pd-btn--primary { flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #007bff, #0056b3); box-shadow: 0 4px 16px #007bff26; }
.pd-btn:hover { background: #0056b3; }
.pd-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
main { max-width: 1488px; margin: 24px auto; padding: 0 24px; }
picture { display: block; overflow: hidden; border: 1px solid #333; border-radius: 16px; }
img { display: block; width: 100%; height: auto; }
.app-preview-note { color: #aaa; text-align: center; font-size: .75rem; line-height: 1.6; }
@media (max-width: 767px) {
  .app-preview-bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  h1 { font-size: 1rem; }
  main { max-width: 422px; padding: 0 12px; margin-top: 16px; }
}