@media (min-width: 768px) {
  .character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .summary-grid, .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #preview-canvas { width: min(100%, 420px); }
  .hero { padding-top: 48px; }
}

@media (min-width: 1024px) {
  .preview-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 24px;
    align-items: start;
  }
  #preview-canvas { width: 420px; }
}

@media (max-width: 374px) {
  .hero h1 { font-size: 1.55rem; }
  .dropzone { padding: 20px 12px; }
  .character-card img { width: 72px; height: 72px; }
}