.previewpage { background: var(--sand); min-height: 100dvh; }

.previewpage-header {
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 10;
}
.previewpage-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  padding: 1em 0;
}
.previewpage-brand { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.previewpage-controls { display: flex; gap: .8em; flex-wrap: wrap; }

.previewpage-stage {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 4rem) 1.5rem;
  min-height: calc(100dvh - 74px);
}

/* ---------- Device frame ---------- */
.device-frame {
  background: var(--ink);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  display: flex;
  flex-direction: column;
  transition: width .3s ease, height .3s ease, border-radius .3s ease, padding .3s ease;
}
.device-frame__chrome {
  display: none;
  align-items: center;
  gap: .5em;
  padding: .55em .9em;
  background: var(--sand-2);
  border-radius: 10px 10px 0 0;
}
.device-frame__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.device-frame__url {
  flex: 1;
  margin-left: .5em;
  background: var(--paper);
  border-radius: 999px;
  padding: .25em .9em;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--body-2);
  text-align: center;
}
.device-frame__screen {
  flex: 1;
  background: var(--paper);
  overflow: hidden;
  border-radius: 20px;
}
.device-frame__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--cream);
}

/* Mobile: slim bezel + home-indicator bar */
.device-frame--mobile {
  width: 375px;
  height: min(720px, 72dvh);
  padding: 16px 10px;
}
.device-frame--mobile::after {
  content: '';
  display: block;
  width: 90px;
  height: 4px;
  border-radius: 999px;
  background: var(--sand-2);
  margin: 10px auto 0;
}

/* Tablet: thicker bezel + home button dot */
.device-frame--tablet {
  width: min(620px, 90vw);
  height: min(780px, 78dvh);
  border-radius: 26px;
}
.device-frame--tablet::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--sand-2);
  margin: 10px auto 0;
}

/* Desktop: browser-chrome frame */
.device-frame--desktop {
  width: min(980px, 92vw);
  height: min(640px, 74dvh);
  border-radius: 14px;
}
.device-frame--desktop .device-frame__chrome { display: flex; }
.device-frame--desktop .device-frame__screen { border-radius: 0 0 8px 8px; }