:root {
  font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #203d4c;
}
* { box-sizing: border-box; }
body { margin: 0; background: #e5eef2; }
header { display: flex; align-items: center; gap: 24px; padding: 20px 32px; border-bottom: 1px solid #cedde5; background: #f8fbfc; }
.preview-brand { color: #168c80; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.4px; word-spacing: .1em; text-decoration: none; flex-shrink: 0; }
.preview-brand span:last-child { color: #d46e67; }
header p { font-size: 14px; color: #526f80; line-height: 1.5; margin: 0; }
.desktop-link { margin-left: auto; color: #426a7d; text-decoration: none; font-size: 13px; line-height: 1.5; padding: 12px 0; }
a:focus-visible { outline: 3px solid #72bfb8; outline-offset: 4px; }
main { display: grid; justify-content: center; padding: 32px 16px; }
.phone-frame { padding: 10px; background: #15394b; border-radius: 32px; border: 1px solid #325568; box-shadow: 0 16px 48px #294d6518; }
iframe { display: block; border: 0; border-radius: 23px; width: 390px; height: 844px; background: #eef4f7; }
.caption { text-align: center; font-size: 13px; line-height: 1.6; color: #526f80; margin: 24px 0; }
@media (max-width: 760px) {
  header { padding: 16px 24px; gap: 16px; flex-wrap: wrap; }
  .desktop-link { margin-left: 0; flex-basis: 100%; padding: 0; }
}
@media (max-width: 450px) {
  header { padding: 16px; gap: 8px 16px; }
  .preview-brand { font-size: 24px; }
  header p { font-size: 12px; flex: 1; }
  .desktop-link { font-size: 12px; }
  main { padding: 0; }
  .phone-frame { padding: 0; border: 0; box-shadow: none; border-radius: 0; }
  iframe { width: 100vw; height: calc(100dvh - 108px); border-radius: 0; }
  .caption { display: none; }
}

html[data-theme="light"]{color-scheme:light}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:0;border:1px solid #d0dfe6;border-radius:6px;background:#fff;color:#203d4c;cursor:pointer}.theme-toggle svg{display:block;width:20px;height:20px}.theme-toggle:focus-visible{outline:3px solid #72bfb8;outline-offset:3px}