.preview-panel { display: flex; min-width: 0; flex-direction: column; }
.preview-status { color: var(--color-text-muted); font-size: 0.75rem; text-align: right; }
.dynamic-preview-stage { margin-top: 12px; overflow: hidden; }
.preview-stage { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.preview-frame { position: relative; width: 100%; min-width: 0; overflow: auto; padding: 24px; background: var(--color-surface-muted); scrollbar-width: thin; scrollbar-color: #c5c9cf transparent; }
.preview-frame.preview-frame--grid { padding: 32px 24px 24px 44px; }
.preview-canvas { display: grid; width: max-content; min-width: 100%; place-items: center; }
.preview-container { position: relative; box-sizing: border-box; flex: none; border: 1px solid var(--color-line-strong); background: var(--color-surface); padding: 16px; }
.preview-container--flex { align-content: center; }
.preview-container--flex .preview-item { width: 72px; min-height: 56px; height: auto; flex: 0 1 auto; }
.preview-container--grid .preview-item { width: auto; min-width: 0; min-height: 56px; height: auto; }
.preview-container .preview-item { overflow-wrap: anywhere; padding: 8px; white-space: pre-line; }
.preview-item { display: grid; width: 56px; height: 56px; place-items: center; flex: 0 0 56px; color: var(--color-text); font-size: 1rem; font-weight: 500; text-align: center; }
.preview-item--measured { font-size: 0.75rem; line-height: 1.5; }
.preview-item--one { background: var(--color-item-one); color: var(--color-item-one-ink); }
.preview-item--two { background: var(--color-item-two); color: var(--color-item-two-ink); }
.preview-item--three { background: var(--color-item-three); color: var(--color-item-three-ink); }
.preview-item--four { background: var(--color-item-four); color: var(--color-item-four-ink); }
.preview-guides { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.axis-label { color: var(--color-text-muted); font-size: 0.75rem; }
.preview-scroll-hint { color: var(--color-text-muted); font-size: 0.75rem; }
.grid-overlay { position: absolute; inset: 16px; pointer-events: none; }
.grid-line-label { position: absolute; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-text-muted); font-size: 0.6875rem; font-weight: 500; }
.grid-line-label--column { top: -10px; transform: translateX(-50%); }
.grid-line-label--row { left: -10px; transform: translateY(-50%); }
.grid-track-size { position: absolute; z-index: 1; color: var(--color-text-muted); font-size: 0.6875rem; font-weight: 500; white-space: nowrap; }
.grid-track-size--column { top: -28px; transform: translateX(-50%); }
.grid-track-size--row { left: -44px; transform: translateY(-50%); }
.preview-items { display: flex; align-items: center; justify-content: center; gap: 12px; width: min(100%, 360px); min-height: 112px; border: 1px dashed var(--color-line-strong); background: var(--color-surface); padding: 24px; }
@media (max-width: 820px) { .preview-frame { padding: 18px; } }
@media (max-width: 560px) { .preview-status { max-width: 150px; } }