.name-maker {
  max-width: 1050px;
  margin: 1.5rem auto 0;
  background: #fff;
  border-radius: 30px;
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  gap: 2rem;
  align-items: center;
  border: 5px solid #dde9d7;
}
.name-maker h3 { font: 900 clamp(1.7rem, 3vw, 2.35rem)/1.1 Georgia, serif; color: var(--forest); margin: .25rem 0 .7rem; }
.name-maker label { display: block; font-weight: 900; color: var(--forest); margin-top: 1rem; }
.name-maker input { width: 100%; margin-top: .35rem; border: 3px solid var(--sage); border-radius: 14px; padding: .8rem 1rem; font: 800 1.25rem/1 "Trebuchet MS", Arial, sans-serif; color: var(--ink); background: #fff; }
.name-maker input:focus { outline: 4px solid rgba(247, 201, 74, .45); border-color: var(--forest); }
.name-maker small { display: block; margin-top: .35rem; color: #51665a; }
.name-error { min-height: 1.5rem; margin: .4rem 0 0; color: #9b302b; font-weight: 800; }
.name-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .8rem; }
.name-actions button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.name-preview-wrap { background: #f3eee2; padding: .8rem; border-radius: 20px; }
.name-preview-wrap canvas { width: 100%; height: auto; display: block; background: #fff; box-shadow: 0 5px 16px rgba(38, 56, 47, .14); }
@media (max-width: 800px) {
  .name-maker { grid-template-columns: 1fr; }
  .name-preview-wrap { padding: .45rem; }
  .name-actions button { width: 100%; }
}