.name-generator { margin-top: 34px; }
.name-generator__intro { max-width: 730px; margin-bottom: 27px; }
.name-generator__intro h3 { color: #fff; font: 700 clamp(2.38rem, 4.77vw, 4.32rem)/1.04 var(--display); letter-spacing: .015em; }
.name-generator__intro p { margin-top: 15px; font-size: clamp(1rem, 1.7vw, 1.2rem); }
.name-generator__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.name-generator__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 19px 20px; min-width: 0; border: 1px solid #686868; padding: clamp(16px, 2.3vw, 28px); }
.name-generator__field { min-width: 0; }
.name-generator__field label { display: block; color: var(--paper); font: 700 .78rem/1.35 var(--mono); }
.name-generator__field label > span { display: block; color: var(--red); margin-bottom: 5px; }
.name-generator__field--wide { grid-column: 1 / -1; }
.name-generator input, .name-generator select { display: block; width: 100%; min-width: 0; border: 1px solid #686868; border-radius: 0; background: #000; color: var(--paper); margin-top: 9px; padding: 11px 12px; min-height: 48px; font: 700 1rem/1.25 var(--mono); }
.name-generator input::placeholder { color: #969696; opacity: 1; font-weight: 400; }
.name-generator input[maxlength="1"] { max-width: 96px; font-size: 1.5rem; text-transform: uppercase; text-align: center; }
.name-generator input:focus-visible, .name-generator select:focus-visible { outline: 2px solid var(--orange-red); outline-offset: 3px; }
.name-generator input[aria-invalid="true"] { border-color: var(--red); }
.name-generator__hint { display: block; margin-top: 7px; color: #aaa; font-size: .75rem; line-height: 1.4; }
.name-generator__error { color: #ff7966; font: .73rem/1.4 var(--mono); margin-top: 5px; }
.name-generator__error:empty { display: none; }
.name-generator__submit-row { grid-column: 1 / -1; padding: 4px 6px; }
.name-generator__submit { position: relative; isolation: isolate; display: inline-block; max-width: 100%; padding: 14px 22px; border: 0; color: #000; background: transparent; font: 800 clamp(.875rem, 1.4vw, 1.05rem)/1.25 var(--body); cursor: pointer; }
.name-generator__submit::before { position: absolute; z-index: -1; inset: 0; content: ""; background: var(--orange-red); transform: skewX(-12deg); }
.name-generator__submit:hover::before { background: #ff714a; }
.name-generator__submit:disabled { opacity: .5; cursor: wait; }
.name-generator__load-status { grid-column: 1 / -1; color: #bcbcbc; font: .76rem/1.4 var(--mono); }
.name-generator__load-status:empty { display: none; }
.name-generator__retry { grid-column: 1 / -1; justify-self: start; }
.name-generator__result-wrap { border-block: 2px solid var(--red); padding: 25px 0 20px; min-width: 0; scroll-margin-top: calc(var(--nav-height) + 12px); scroll-margin-bottom: calc(var(--audio-dock-height) + 12px); }
.name-generator__result-label { color: var(--red); font: 700 .68rem/1.3 var(--mono); letter-spacing: .1em; }
.name-generator__result { padding-block: 20px 24px; }
.name-generator__name { display: block; font: 700 clamp(2rem, 4vw, 3.76rem)/1.04 var(--display); overflow-wrap: anywhere; }
.name-generator__result:not(.has-name) .name-generator__name { color: #5b5b5b; }
.name-generator__title { display: block; margin-top: 16px; color: var(--orange-red); font: 700 clamp(1rem, 1.6vw, 1.3rem)/1.15 var(--display); letter-spacing: .02em; }
.name-generator__variants { margin-top: 9px; color: #bcbcbc; font: .8rem/1.5 var(--mono); overflow-wrap: anywhere; }
.name-generator__variants em { color: var(--paper); }
.name-generator__actions { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.name-generator [hidden] { display: none !important; }
.name-generator__text-button { border: 0; padding: 5px 0; background: transparent; color: var(--paper); font: 700 .7rem/1.4 var(--mono); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.name-generator__text-button:hover { color: var(--red); }
.name-generator__copy-status { margin-top: 10px; min-height: 1.4em; color: #aaa; font: .7rem/1.4 var(--mono); }
@media (max-width: 770px) {
  .name-generator__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .name-generator__result-wrap { max-width: 600px; }
  .name-generator__name { font-size: clamp(2.08rem, 8vw, 3.76rem); }
}
@media (max-width: 390px) {
  .name-generator__form { gap: 18px 13px; }
  .name-generator__field label { font-size: .72rem; }
}