/* A full before/after pair must remain visible at every card size. */
body[data-studio="design"] .template-diagram.feature-preview{
  display:flex;flex-direction:column;gap:0;padding:0;margin:0;
  width:100%;height:auto;min-height:0;max-height:none;
  background:#e5e2dc;border-radius:8px;overflow:hidden;
}
body[data-studio="design"] .feature-preview-image{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden}
body[data-studio="design"] .feature-preview-image>img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;transform:none;transition:none}
body[data-studio="design"] .dock-template-card:hover .feature-preview-image>img{transform:none}
body[data-studio="design"] .feature-preview-kind{position:absolute;top:6px;right:6px;padding:2px 5px;border-radius:3px;background:#f4f2ef;color:#4a504f;font-size:11px;line-height:1.4;font-weight:400}
body[data-studio="design"] .feature-preview-labels{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);align-items:center;gap:2px;min-height:29px;padding:4px 6px;background:#f1efeb;color:#35444b;font-size:11px;line-height:1.5;text-align:center}
body[data-studio="design"] .feature-preview-labels>span{min-width:0;overflow-wrap:anywhere}
body[data-studio="design"] .feature-preview-arrow{display:grid;place-items:center}
body[data-studio="design"] .feature-preview-arrow svg{width:14px;height:14px}
body[data-studio="design"] .feature-preview-prompt{position:absolute;left:4%;top:32%;width:27%;color:#384944;font-size:clamp(11px,1.1vw,15px);line-height:1.8;text-align:left;white-space:pre-line;font-weight:500}
body[data-studio="design"] .template-card>.feature-preview{flex:0 0 auto;height:auto;min-height:0;max-height:none}
body[data-studio="design"] .template-editor-preview>.feature-preview{max-width:620px;margin-inline:auto}
body[data-studio="design"] .template-editor-preview .feature-preview-labels{font-size:13px;min-height:36px}
body[data-studio="design"] .template-editor-preview .feature-preview-prompt{font-size:18px}
body[data-studio="design"] .template-dock-note{margin:12px 0 0;font-size:11px;line-height:1.6;color:var(--muted,#c1cdd8)}
body[data-studio="design"] .template-surface .template-dock:has(.feature-preview){max-height:min(55dvh,600px)}
@media(max-width:600px){
  body[data-studio="design"] .dock-template-card:has(.feature-preview){flex-basis:206px}
  body[data-studio="design"] .template-surface .template-dock:has(.feature-preview){max-height:min(60dvh,390px)}
  body[data-studio="design"] .template-editor-preview .feature-preview-prompt{font-size:14px}
}