.screen-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.screen-editor-fields { min-width: 0; }
.screen-editor > :first-child:not(.screen-editor-fields) { grid-column: 1 / -1; }
.screen-editor-preview { position: sticky; top: 2rem; min-width: 0; }
.screen-preview { --slide-tone: var(--ink); position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin-top: .75rem; padding: 8%; display: flex; flex-direction: column; justify-content: center; background: var(--bg); border: 1px solid var(--edge); }
.screen-preview[data-emphasis="accent"] { --slide-tone: var(--accent); }
.screen-preview[data-emphasis="warm"] { --slide-tone: var(--warm); }
.screen-preview-stripe { position: absolute; right: -10%; bottom: -50%; width: 28%; height: 150%; transform: rotate(25deg); border-inline: 1px solid var(--slide-tone); opacity: .12; }
.screen-preview-eyebrow { font: 600 clamp(9px, 1vw, 13px) var(--font-display); text-transform: uppercase; letter-spacing: .2em; color: var(--ink-faint); }
.screen-preview h2 { font: 700 clamp(20px, 3vw, 42px)/1.1 var(--font-display); color: var(--slide-tone); margin-top: .5em; overflow-wrap: anywhere; }
.screen-preview-body { font-size: clamp(11px, 1.3vw, 18px); color: var(--ink-muted); margin-top: 1em; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 850px) {
  .screen-editor { grid-template-columns: 1fr; gap: 2rem; }
  .screen-editor-preview { position: static; }
  .screen-preview h2 { font-size: clamp(24px, 6vw, 42px); }
  .screen-preview-body { font-size: 15px; }
}