.responsive-preview-page { min-width:280px; }
.preview-heading { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:20px 24px; border-bottom:1px solid var(--pv-border); background:var(--pv-surface); }
.preview-heading h1 { font-size:20px; line-height:28px; }
.preview-heading p { color:var(--pv-secondary); margin-top:4px; }
.preview-heading > .button { margin-left:auto; }
.preview-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding:20px 24px; background:var(--pv-surface); }
.preview-controls .field { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:0; width:160px; }
.preview-controls .field:first-child,.preview-controls .field:nth-child(2) { width:210px; }
.preview-controls .field:nth-child(3),.preview-controls .field:nth-child(4) { width:88px; }
.preview-controls input,.preview-controls select { min-width:0; max-width:100%; width:100%; min-height:44px; }
.preview-controls select { overflow:hidden; text-overflow:ellipsis; appearance:none; padding-right:40px; background-image:var(--pv-select-chevron); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
.preview-caption { display:flex; flex-wrap:wrap; gap:8px 24px; padding:12px 24px; border-block:1px solid var(--pv-border); color:var(--pv-secondary); font-size:12px; line-height:18px; }
#preview-size { flex:none; font-weight:600; color:var(--pv-heading); }
.preview-caption > p:last-child { flex:1 1 320px; }
.preview-stage { padding:24px; min-height:320px; overflow:auto; background:var(--pv-muted); }
#preview-frame-space { position:relative; margin:auto; background:var(--pv-surface); box-shadow:0 4px 24px #0002; outline:1px solid var(--pv-control); }
#preview-frame { display:block; position:absolute; inset:0; border:0; max-width:none; transform-origin:top left; background:var(--pv-surface); }
@media(max-width:640px) {
 .preview-heading,.preview-controls { padding:16px; }
 .preview-heading > .button { margin-left:0; }
 .preview-controls .field,.preview-controls .field:first-child,.preview-controls .field:nth-child(2) { flex:1 1 130px; width:auto; }
 .preview-controls .field:nth-child(3),.preview-controls .field:nth-child(4) { flex:1 1 88px; width:auto; }
 .preview-controls select,.preview-controls input { font-size:16px; }
 .preview-stage { padding:12px; }
 .preview-caption { padding:12px 16px; }
}