.nickname-style-page .intro, .name-studio, .ns-back {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.nickname-style-page .lead, .name-studio h2, .name-studio .hint { text-wrap: pretty; }
.name-studio .field { margin: 0 0 1.25rem; }
.name-studio .field input { width: 100%; min-width: 0; font-size: 1.15rem; }
.ns-styles { margin: 0; padding: 0; border: 0; min-width: 0; }
.ns-styles legend { margin-bottom: .5rem; font-weight: 650; }
.ns-styles > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.ns-styles label { position: relative; cursor: pointer; }
.ns-styles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ns-styles span, #ns-results button {
  display: inline-grid; place-items: center; min-height: 44px; min-width: 52px;
  padding: .4rem .9rem; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600;
}
.ns-styles input:checked + span { color: var(--accent-ink); background: var(--accent-fg); border-color: var(--accent-fg); }
.ns-styles input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
#ns-symbols, #ns-symbols > div { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
#ns-symbols { margin: .8rem 0 0; }
#ns-symbols > span { color: var(--muted); font-size: .87rem; margin-right: .2rem; }
#ns-symbols > div[hidden] { display: none; }
#ns-symbols button { min-width: 44px; min-height: 44px; padding: .2rem .4rem; cursor: pointer;
  font: inherit; font-size: 1.16rem; color: var(--accent-fg); border: 1px solid var(--line);
  border-radius: var(--r-ctl); background: var(--surface); }
#ns-symbols button.ns-copied { border-color: var(--accent-fg); background: var(--accent-soft); }
.name-studio h2 { margin: 1.5rem 0 .65rem; font-size: 1.06rem; line-height: 1.5; }
#ns-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
#ns-results li { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem; border: 1px solid var(--line); border-radius: var(--r-ctl); }
#ns-results li[hidden], .name-studio [hidden] { display: none; }
#ns-results li > div { min-width: 0; }
#ns-results bdi { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.19rem; font-weight: 650; }
#ns-results small { display: block; margin-top: .15rem; color: var(--muted); font-size: .78rem; }
#ns-results button { flex: none; cursor: pointer; color: var(--accent-fg); }
#ns-results button:hover { background: var(--accent-soft); }
#ns-status { margin: .4rem 0 0; min-height: 1.5em; overflow-wrap: anywhere; color: var(--accent-fg); }
.name-studio .hint { margin: .1rem 0 0; }
.ns-back { margin: 1.25rem 0; }
.nickname-style-page .ad-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 8px;
  margin: 32px 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .8rem;
}
/* One standard creative fits a 320px screen even after the viewport shrinks. */
.ns-display-ad { display: inline-block; width: 300px; height: 250px; }
@media (max-width: 319px) {
  .nickname-style-page .ad-result, .ns-display-ad { display: none; }
}
@media (forced-colors: active) { .ns-styles input:checked + span { outline: 2px solid Highlight; } }