html:has(body.hello-page) { scrollbar-gutter: stable; scroll-behavior: auto; }
/* Original copy remains available to screen readers; dialogue uses a compact shared stage. */
.hello-caption-copy { position: relative; }
.hello-app .hello-caption-source { opacity: 0 !important; animation: none !important; pointer-events: none; }
.hello-app .hello-caption-line {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  pointer-events: none;
}
body.hello-page .hello-caption-word,
body.hello-page .hello-static-word {
  display: inline;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}
.hello-caption-word { opacity: 0; visibility: hidden; transition: opacity .09s linear; }
.hello-caption-word.is-visible { opacity: 1; visibility: visible; }
@keyframes hello-word-in { from { opacity: 0; } to { opacity: 1; } }
.hello-static-word { animation: hello-word-in .16s ease var(--hello-word-delay,0ms) both; }
@media (prefers-reduced-motion:reduce) {
  .hello-caption-word { transform: none; transition: none !important; }
  .hello-static-word { animation: none !important; }
}

/* The mentor introduction is intentionally static, with its original description. */
.hello-app .hello-step-static .hello-title,
.hello-app .hello-step-static .hello-description { animation: none !important; }

/* One speaking composition; after the track ends the sphere settles smaller
   while the sentence keeps its position and the controls move up smoothly. */
.hello-app {
  --hello-dialogue-orb: 280px;
  --hello-dialogue-top: clamp(24px, calc(20svh - 100px), 88px);
  --hello-dialogue-caption-height: 104px;
}
.hello-app:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .hello-main {
  min-height: 0;
  padding: var(--hello-dialogue-top) 0 32px;
  place-items: start center;
}
.hello-app:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .hello-scene { width: min(100%,640px); }
.hello-app .hello-step-dialogue .hello-title { max-width: 600px; font-size: 26px; line-height: 1.4; }
.hello-step-dialogue .hello-caption-copy {
  display: block;
  width: min(100%,600px);
  height: var(--hello-dialogue-caption-height);
  margin: 0 auto;
}
.hello-step-dialogue .hello-caption-copy .hello-caption-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hello-step-dialogue .hello-caption-copy .hello-final-story { display: contents; }
.hello-app .hello-step-dialogue .hello-caption-line {
  inset: 50% 0 auto !important;
  width: 100% !important;
  transform: translateY(-50%);
}
.hello-app .hello-caption-measure {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none !important;
}
.hello-step-dialogue { --hello-dialogue-orb-size: var(--hello-dialogue-orb); }
.hello-step-dialogue[data-voice-state="ended"] { --hello-dialogue-orb-size: calc(var(--hello-dialogue-orb) * .6); }
.hello-app .hello-step-dialogue [data-hello-voice-slot] {
  display: grid;
  place-items: center;
  height: var(--hello-dialogue-orb-size);
  margin: 28px auto 0;
}
body.hello-page .hello-app .hello-step-dialogue .hello-voice-orb {
  width: var(--hello-dialogue-orb-size);
  height: var(--hello-dialogue-orb-size);
  max-width: 100%;
  margin: 0;
  animation: none;
  transition: none;
}
.hello-app .hello-step-dialogue[data-voice-state="ended"] [data-hello-voice-slot] {
  transition: height .56s cubic-bezier(.22,.7,.3,1);
}
body.hello-page .hello-app .hello-step-dialogue[data-voice-state="ended"] .hello-voice-orb {
  transition: width .56s cubic-bezier(.22,.7,.3,1), height .56s cubic-bezier(.22,.7,.3,1);
}
.hello-step-dialogue .hello-voice-orb canvas { transform: scale(1.5); transform-origin: center; }
@media (prefers-reduced-motion:reduce) {
  .hello-app .hello-step-dialogue [data-hello-voice-slot],
  body.hello-page .hello-app .hello-step-dialogue .hello-voice-orb { transition: none !important; }
}
.hello-app .hello-step-dialogue .hello-voice-status { min-height: 20px; margin: 4px auto 0; line-height: 20px; }
.hello-app[data-voice-allowed="0"] .hello-step-dialogue:not(.hello-step-voice) [data-hello-voice-slot] { height: 0; margin: 0; }
.hello-app[data-voice-allowed="0"] .hello-step-dialogue:not(.hello-step-voice) .hello-voice-status:empty { min-height: 16px; }
.hello-step-dialogue .hello-interest-options { width: min(100%,600px); margin-top: 16px; }
.hello-step-dialogue .hello-actions { margin-top: 20px; }
@media (min-width:701px) {
  .hello-step-dialogue:not(.hello-step-level) .hello-interest-options { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .hello-step-dialogue .hello-interest-card { min-height: 140px; padding: 24px 12px 18px; gap: 12px; border-radius: 20px; }
  .hello-step-level .hello-interest-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hello-app .hello-step-level .hello-level-card { min-height: 184px; flex-direction: column; justify-content: flex-start; gap: 12px; padding: 24px 16px 18px; text-align: center; }
  .hello-app .hello-step-level .hello-level-description { font-size: 12px; line-height: 1.5; }
}
@media (max-width:700px) {
  .hello-app { --hello-dialogue-orb: min(260px, calc(66.666vw - 8px)); --hello-dialogue-top: 24px; }
  .hello-app .hello-step-dialogue .hello-title { font-size: 22px; line-height: 1.4; }
  .hello-app:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .hello-main { padding-bottom: 24px; }
  .hello-step-dialogue .hello-interest-card { min-height: 104px; padding: 20px 12px 16px; gap: 10px; }
  .hello-app .hello-step-level .hello-level-card { min-height: 88px; gap: 13px; padding: 12px 34px 12px 14px; }
  .hello-step-dialogue .hello-interest-options { margin-top: 12px; }
  .hello-step-dialogue .hello-actions { margin-top: 16px; }
}
@media (max-width:700px) and (max-height:700px) {
  .hello-app { --hello-dialogue-orb: min(240px, calc(66.666vw - 8px)); --hello-dialogue-top: 16px; }
  .hello-app .hello-step-dialogue .hello-title { font-size: 20px; }
}