.ap-preview { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 1.25rem; align-items: center; margin: 1.25rem 0; padding: 1rem; background: var(--ap-surface-2, #f3f2ef); border-radius: 4px; }
.ap-preview__stage { aspect-ratio: 1 / 1; display: flex; align-items: flex-end; justify-content: center; padding: 6%; background: linear-gradient(#ebe9e4, #e2dfd9); }
.ap-preview__paper { box-sizing: border-box; width: 30%; aspect-ratio: 2 / 3; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.08); transition: width .25s ease, padding .25s ease; }
.ap-preview__image { width: 100%; height: 100%; background: #d6d3cd no-repeat center / cover; }
.ap-preview:not(.is-active) .ap-preview__image { opacity: .35; }
.ap-preview__dims { margin: 0 0 .35rem; font-variant-numeric: tabular-nums; }
.ap-preview__legend { margin: 0; font-size: .85em; opacity: .75; }
.ap-unframed-note { margin: .5rem 0 1rem; font-size: .95em; }
.ap-size-helper { margin: 3rem 0; }
.ap-size-helper__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; align-items: end; }
.ap-size-helper__sheet { background: #fff; outline: 1px solid rgba(0,0,0,.15); box-shadow: 0 4px 10px rgba(0,0,0,.06); margin: 0 auto .6rem; }
.ap-size-helper figcaption { font-size: .85em; line-height: 1.45; text-align: center; }
.ap-size-helper__note { font-size: .9em; max-width: 60ch; }
@media (max-width: 640px) {
	.ap-preview { grid-template-columns: 120px 1fr; }
	.ap-size-helper__row { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ap-preview__paper { transition: none; } }