@layer components{.page-preview{margin-block:var(--line,1.75rem);margin-inline:calc(var(--prose-bleed,0rem) * -1)}[data-page-preview]{--page-preview-width:max(1280px, 100cqw);--preview-height:var(--preview-height-desktop);&:has([data-size=tablet]:checked){--page-preview-width:768px;--preview-height:var(--preview-height-tablet)}&:has([data-size=phone]:checked){--page-preview-width:390px;--preview-height:var(--preview-height-phone)}@media (pointer:coarse){--preview-height:var(--preview-height-touch-desktop);&:has([data-size=tablet]:checked){--preview-height:var(--preview-height-touch-tablet)}&:has([data-size=phone]:checked){--preview-height:var(--preview-height-touch-phone)}}& .preview-body{padding:var(--ui-space-sm);overflow:hidden;container-type:inline-size;@media (width>=48rem){padding:var(--ui-space-md)}}& .preview-viewport{--page-preview-scale:min(1, tan(atan2(100cqw, var(--page-preview-width))));height:calc(var(--preview-height) * var(--page-preview-scale))}& .preview-viewport>iframe{width:var(--page-preview-width);max-width:none;margin-inline:calc((100% - var(--page-preview-width)) / 2);transform:scale(var(--page-preview-scale));transform-origin:top}&[data-preview-guard=idle] .preview-viewport:before{z-index:1}}}