body[data-page="baby-name"] { background: #edf0ee; color: #142640; }
body[data-page="baby-name"] .app-shell { background: #fff; padding-bottom: 0; }
body[data-page="baby-name"] .site-footer, body[data-page="baby-name"] .bottom-nav, body[data-page="baby-name"] [data-pwa-banner] { display: none; }
.bn-page { --bn-sage: #77877c; --bn-border: #dbe1dc; --bn-soft: #f2f4f1; font-size: 15px; line-height: 1.7; padding: 0 0 max(24px,env(safe-area-inset-bottom)); overflow-wrap: anywhere; }
.bn-page *, .bn-dialog * { box-sizing: border-box; letter-spacing: 0; }
.bn-page [hidden] { display: none !important; }
.bn-page h1, .bn-page h2, .bn-page p, .bn-page figure { margin: 0; }
.bn-page button, .bn-page input, .bn-page select, .bn-page textarea, .bn-dialog button { font: inherit; }
.bn-page button { cursor: pointer; }
.bn-page button:disabled { opacity: .45; cursor: default; }
.bn-page button:focus-visible, .bn-page input:focus-visible, .bn-page select:focus-visible, .bn-page textarea:focus-visible, .bn-dialog button:focus-visible { outline: 3px solid #b69a64; outline-offset: 3px; }
.bn-intro-visual { position: relative; isolation: isolate; }
.bn-intro-title { position: absolute; inset: 6% 12px auto; text-align: center; color: #ffead5; text-shadow: 0 2px 12px #07132680; }
.bn-intro-title .bn-kicker { color: #f9e6d2; font-size: 12px; letter-spacing: .28em; }
.bn-kicker { color: #667b6d; font-size: 12px; font-weight: 600; }
.bn-page h1 { font-size: 23px; line-height: 1.5; font-weight: 700; }
.bn-page h1[tabindex="-1"]:focus { outline: none; }
.bn-intro-title h1 { font-family: var(--font-body,serif); font-size: clamp(32px,9.5vw,43px); margin: 5px 0; line-height: 1.6; }
.bn-intro-title > p:last-child { font-size: 14px; color: #ffead5; }
.bn-art { position: relative; aspect-ratio: 5/3; overflow: hidden; background: #172538; }
.bn-art img { position: absolute; display: block; width: 100%; height: auto; max-width: none; left: 0; top: -60%; }
.bn-intro-art { aspect-ratio: 2/3; }
.bn-intro-art img { position: static; width: 100%; height: 100%; object-fit: contain; }
.bn-intro-actions { padding: 18px 22px 0; }
.bn-free-label { display: inline-block; color: #506758; background: #eef3ed; border-radius: 4px; padding: 4px 12px; font-size: 12px; font-weight: 600; margin: 17px 0; }
.bn-primary, .bn-secondary { min-height: 48px; border-radius: 7px; padding: 12px 15px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700 !important; line-height: 1.5; }
.bn-primary { color: #fff; background: #152d50; border: 1px solid #152d50; width: 100%; }
.bn-secondary { color: #152d50; background: #fff; border: 1px solid #152d50; }
.bn-page .icon { width: 20px; height: 20px; flex: none; }
.bn-text-button { border: 0; background: transparent; color: #4f6558; padding: 9px 4px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px !important; line-height: 1.5; }
.bn-small { color: #65716f; font-size: 12px; line-height: 1.85; }
.bn-offer-note { font-size: 12px; color: #606d72; margin: 15px 0 11px !important; }
.bn-question-panel { padding: 20px 22px 24px; }
.bn-progress { display: flex; gap: 15px; align-items: center; font-size: 12px; margin-bottom: 22px; }
.bn-progress span { flex: none; min-width: 35px; }
.bn-progress progress { width: 100%; height: 5px; border: 0; border-radius: 2px; appearance: none; accent-color: #243d57; }
.bn-progress progress::-webkit-progress-bar { background: #e3e8e5; }
.bn-progress progress::-webkit-progress-value { background: #243d57; }
.bn-question-help { font-size: 13px; color: #6a7377; margin: 7px 0 20px !important; }
.bn-page fieldset { margin: 0; border: 0; padding: 0; min-width: 0; }
.bn-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 9px; }
.bn-options label { position: relative; display: flex; cursor: pointer; min-width: 0; }
.bn-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bn-options label > span { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border: 1px solid #d7dfd9; border-radius: 7px; background: #fff; width: 100%; font-size: 14px; text-align: center; }
.bn-options input:checked + span { border: 2px solid #213b58; padding: 11px 7px; background: #edf2ef; font-weight: 700; }
.bn-options input:checked + span::after { content: '\2713'; position: absolute; right: 5px; top: 1px; font-size: 11px; }
.bn-options input:focus-visible + span { outline: 3px solid #b69a64; outline-offset: 3px; }
.bn-options-stack { grid-template-columns: minmax(0,1fr); }
.bn-field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 13px; color: #253f4c; margin: 17px 0; }
.bn-field > span { font-size: 11px; color: #75817e; }
.bn-field input, .bn-field select, .bn-field textarea { display: block; width: 100%; min-width: 0; min-height: 46px; border: 1px solid #d6dfd7; border-radius: 6px; color: #142640; background: #fff; padding: 10px 12px; font-size: 16px; }
.bn-field textarea { resize: vertical; }
.bn-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bn-soft-note { padding: 17px 0; color: #5b6e61; border-block: 1px solid #dce5dd; font-size: 14px; }
.bn-reaction { min-height: 23px; color: #526c58; font-size: 12px; margin: 13px 0 !important; }
.bn-question-actions { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; margin-top: 15px; }
.bn-icon-button { border: 1px solid #d6dfd7; background: #fff; border-radius: 6px; color: #17314f; display: grid; place-items: center; width: 44px; height: 46px; padding: 0; flex: none; }
[data-naming-back] .icon, [data-naming-prev] .icon, [data-naming-review-back] .icon { transform: rotate(180deg); }
.bn-summary { margin: 18px 0; border-top: 1px solid var(--bn-border); }
.bn-summary-row { display: grid; grid-template-columns: 82px minmax(0,1fr) 32px; align-items: center; gap: 7px; padding: 10px 0; border-bottom: 1px solid var(--bn-border); font-size: 12px; }
.bn-summary-row > strong { font-weight: 500; white-space: pre-wrap; }
.bn-review { padding: 26px 22px; }
.bn-review > h1 { margin: 7px 0 10px; }
.bn-handling { border-block: 1px solid #e1e5df; padding: 12px 0; font-size: 12px; color: #5b6a60; margin: 12px 0; }
.bn-handling summary { cursor: pointer; color: #263f50; font-weight: 600; }
.bn-handling p { margin: 10px 0 0 !important; }
.bn-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.8; margin: 17px 0; }
.bn-consent input { flex: none; margin-top: 4px; width: 17px; height: 17px; accent-color: #203c57; }
.bn-error { color: #a83f49; font-size: 13px; margin: 8px 0 !important; }
.bn-loading { text-align: center; padding-top: 27px; }
.bn-loading > .bn-kicker { margin-bottom: 15px; }
.bn-loading h1 { font-size: 21px; padding: 25px 22px 7px; }
.bn-loading > p:not(.bn-kicker) { font-size: 13px; padding: 0 22px; color: #687679; }
.bn-loading .bn-art img { animation: bn-breathe 3s ease-in-out infinite; }
.bn-loading-dots { display: flex; justify-content: center; gap: 9px; padding: 26px; }
.bn-loading-dots i { width: 8px; height: 8px; border-radius: 50%; background: #aab8b0; animation: bn-dot 1.4s ease-in-out infinite; }
.bn-loading-dots i:nth-child(2) { animation-delay: .2s; }.bn-loading-dots i:nth-child(3) { animation-delay: .4s; }
.bn-results, .bn-compare, .bn-saved { padding: 26px 22px; }
.bn-result-heading { text-align: center; }.bn-result-heading h1 { font-size: 24px; margin-top: 7px; }
.bn-result-nav { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 14px; font-size: 12px; }
.bn-name-card { min-height: 225px; border: 1px solid #839587; outline: 1px solid #c4cfc5; outline-offset: -6px; text-align: center; padding: 26px 19px; background: #f8faf6; border-radius: 4px; }
.bn-card-number { color: #708072; font-size: 11px; }.bn-page .bn-name { font-size: 43px; line-height: 1.45; margin: 13px 0 18px; font-weight: 700; }
.bn-name-feel { font-size: 14px; line-height: 1.8; }
.bn-detail-row { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid #e0e5e0; }
.bn-detail-row h2 { font-size: 12px; font-weight: 600; color: #526b58; }.bn-detail-row p { font-size: 13px; line-height: 1.9; }
.bn-adviser { display: flex; gap: 11px; align-items: center; padding: 18px 0; font-size: 12px; color: #56686b; }
.bn-adviser img { width: 48px; height: 48px; object-fit: cover; object-position: 50% 45%; border-radius: 50%; flex: none; }
.bn-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.bn-result-actions button { font-size: 13px; }
.bn-compare-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-bottom: 1px solid #dbe2dd; padding: 18px 0; background: #fff; color: #233c4c; font-size: 14px; margin-bottom: 17px; }
.bn-compare-toggle > span { color: #72857a; font-size: 12px; }
.bn-footer-actions { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 17px; border-top: 1px solid #e2e6e3; margin-top: 20px; padding-top: 10px; }
.bn-compare-item, .bn-saved-item { padding: 22px 0; border-bottom: 1px solid #d7e1d9; }
.bn-compare h1, .bn-saved h1 { margin-bottom: 10px; }.bn-compare-item > h2, .bn-saved-item > h2 { font-size: 25px; }
.bn-saved-item > p { font-size: 13px; margin: 10px 0; }.bn-saved > .bn-primary, .bn-compare > .bn-primary { margin-top: 24px; }
.bn-empty { padding: 40px 0; font-size: 14px; color: #65766a; }
.bn-status { position: fixed; z-index: 100; left: 50%; bottom: max(16px,env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(390px,calc(100% - 32px)); padding: 12px 16px; border: 1px solid #cbd9ce; background: #f4f8f3; color: #223f2d; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 20px #172d4214; }
.bn-no-script { padding: 20px; background: #f5ece9; }
.bn-dialog { color: #19334c; border: 1px solid #d4dfd6; border-radius: 8px; max-width: 410px; width: calc(100% - 36px); padding: 22px; max-height: calc(100dvh - 40px); overflow: auto; }
.bn-dialog::backdrop { background: #12284270; }.bn-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.bn-dialog h2 { font-size: 18px; margin: 0; }.bn-dialog p { font-size: 13px; line-height: 1.9; }
@keyframes bn-breathe { 50% { transform: scale(1.015); } } @keyframes bn-dot { 50% { background: #233e5a; } }
@media (max-height:700px) { .bn-question-art { aspect-ratio: 2/1; }.bn-question-art img { top: -72%; } }
@media (prefers-reduced-motion:reduce) { .bn-page *, .bn-page *::before, .bn-page *::after { animation: none !important; transition: none !important; } }

/* Scene chrome shares the daily-fortune header and the existing naming artwork. */
body[data-page="baby-name"] {
  --bn-head-height: calc(64px + env(safe-area-inset-top));
  --bn-actions-height: calc(76px + env(safe-area-inset-bottom));
  background: #0b1526;
}
body[data-page="baby-name"] .app-shell { position: relative; isolation: isolate; background: transparent; }
.bn-page { min-height: 100dvh; padding-bottom: 24px; }
.bn-backdrop { position: fixed; z-index: -1; inset: 0 auto; left: 50%; width: min(100%,450px); height: 100vh; height: 100dvh; transform: translateX(-50%); pointer-events: none; overflow: hidden; background: #0b1526; }
.bn-backdrop img { display: block; width: 100%; height: 106%; object-fit: cover; object-position: 50% 36%; transform: translateY(-6%); }
.bn-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#07132230,transparent 35%,#07132250); }
.bn-scene-header { position: fixed; z-index: 40; top: var(--bn-visual-top,0px); left: 50%; transform: translateX(-50%); width: min(100%,450px); height: var(--bn-head-height); padding: calc(8px + env(safe-area-inset-top)) 22px 8px; background: linear-gradient(#071524a6,transparent); }
.bn-scene-header .fortune-box-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.bn-scene-header .fortune-box-brand { display: flex; align-items: center; min-height: 44px; max-width: calc(100% - 60px); }
.bn-scene-header .fortune-box-brand img { display: block; width: 131px; height: 35px; object-fit: contain; filter: brightness(0) invert(1); opacity: .97; }
.bn-scene-header .fortune-box-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; background: #091627b3; border: 0; border-radius: 4px; color: #ffecd6; }
.bn-scene-header .fortune-box-icon .icon { width: 27px; height: 27px; }
.bn-scene-header a:focus-visible, .bn-scene-header button:focus-visible { outline: 2px solid #ffcf80; outline-offset: 3px; }
.bn-intro { padding-top: var(--bn-head-height); }
.bn-intro-actions .bn-primary { border-color: #e8d4b859; }
html:has(.bn-page:is([data-view="questions"],[data-view="review"])) { height: 100%; overflow: hidden; overscroll-behavior: none; scrollbar-gutter: auto; }
body:has(.bn-page:is([data-view="questions"],[data-view="review"])) { height: 100dvh; overflow: hidden; }
.bn-page > :is([data-naming-view="questions"],[data-naming-view="review"]) {
  position: fixed;
  top: var(--bn-visual-top,0px);
  left: max(0px,calc((100vw - 450px)/2));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(100%,450px);
  height: var(--bn-visual-height,100dvh);
  padding: calc(var(--bn-head-height) + 12px) 16px calc(var(--bn-actions-height) + 16px);
  overflow: hidden;
}
.bn-question-panel, .bn-review-panel {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  padding: 22px 20px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-padding-block: 16px;
  border: 1px solid #fff9;
  border-radius: 24px;
  background: linear-gradient(#fffdf3e6,#f5f1e5d6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 36px #03101e30,inset 0 1px 0 #ffffffbf;
}
.bn-question-panel .bn-progress { margin-bottom: 16px; }
.bn-question-panel .bn-question-help { margin-bottom: 16px !important; }
.bn-question-panel h1 { word-break: keep-all; text-wrap: balance; }
.bn-question-panel .bn-reaction:empty { display: none; }
.bn-question-panel .bn-options label > span { background: #ffffff85; border-color: #83978d80; }
.bn-question-panel .bn-options input:checked + span { background: #ffffffde; border-color: #203b58; }
.bn-question-panel :is(input,select,textarea) { scroll-margin-block: 16px; }
.bn-question-panel .bn-field :is(input,select,textarea) { background: #ffffffe0; }
.bn-review-panel > h1 { margin: 7px 0 10px; }
.bn-review-panel .bn-summary-row { border-color: #607b6d33; }
.bn-question-actions.bn-scene-actions {
  position: fixed;
  z-index: 35;
  left: max(0px,calc((100vw - 450px)/2));
  bottom: var(--bn-keyboard-inset,0px);
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 10px;
  width: min(100%,450px);
  margin: 0;
  padding: 12px 18px max(12px,env(safe-area-inset-bottom));
  border-top: 1px solid #f0dfc72b;
  background: linear-gradient(#0a192ade,#081424f5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bn-scene-actions .bn-icon-button { width: 100%; height: auto; min-height: 50px; border-color: #f7e3ca70; background: #ffffff17; color: #fff1dc; }
.bn-scene-actions .bn-primary { min-height: 50px; border-color: #f7e3ca70; box-shadow: inset 0 1px 0 #ffffff0d; }
.bn-page:is([data-view="questions"],[data-view="review"]) .bn-status { bottom: calc(var(--bn-keyboard-inset,0px) + var(--bn-actions-height) + 10px); }
.bn-page > :is(.bn-results,.bn-compare,.bn-saved,.bn-loading) { width: calc(100% - 32px); margin: calc(var(--bn-head-height) + 12px) 16px 24px; padding: 24px 20px; border: 1px solid #ffffffa6; border-radius: 24px; background: #fffdf2ed; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bn-page > .bn-loading { padding-inline: 0; overflow: hidden; }
.bn-results .bn-compare-toggle { background: transparent; }
@media (max-width:370px) {
  .bn-scene-header { padding-inline: 18px; }
  .bn-page > :is([data-naming-view="questions"],[data-naming-view="review"]) { padding-inline: 12px; }
  .bn-question-panel,.bn-review-panel { padding-inline: 16px; }
  .bn-question-actions.bn-scene-actions { padding-inline: 14px; }
}
@media (max-height:600px) {
  .bn-page > :is([data-naming-view="questions"],[data-naming-view="review"]) { padding-top: calc(var(--bn-head-height) + 8px); padding-bottom: calc(var(--bn-actions-height) + 10px); }
  .bn-question-panel,.bn-review-panel { padding-top: 16px; border-radius: 18px; }
}