/* Keep the explanation in normal flow, with room for the header and history. */
:root { --gutter: clamp(24px, 3vw, 64px); }
.hero {
  display: grid;
  align-content: center;
  min-height: 100svh;
  height: auto;
  padding: 160px var(--gutter) 120px;
}
.dialogue {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: min(40vw, 600px);
  transform: none;
}
#dialogue-message { display: grid; gap: 16px; outline: none; }
.dialogue-current h1 {
  max-width: none;
  font-size: clamp(21px, 1.65vw, 28px);
  line-height: 1.35;
  font-weight: 450;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.dialogue-current[data-topic=welcome] h1 {
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.16;
  font-weight: 500;
  text-wrap: balance;
}
#dialogue-message p {
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.5;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.dialogue-choices {
  display: flex;
  flex-wrap: wrap;
  max-width: none;
  gap: 12px;
  margin-top: 30px;
  align-items: center;
}
.dialogue-choices .choice {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 18px;
  justify-content: flex-start;
  text-align: left;
  border-radius: 999px;
  font-size: clamp(13px, .9vw, 15px);
  line-height: 1.4;
  text-wrap: pretty;
}
.dialogue-choices .choice-talk { gap: 10px; }
.talk-copy { min-width: 0; }
.talk-title { font-size: clamp(13px, .9vw, 15px); }
.talk-hint { font-size: clamp(10px, .7vw, 12px); }
.dialogue-previous {
  bottom: calc(100% + 26px);
  max-height: 2.7em;
  font-size: 18px;
  line-height: 1.35;
}
.dialogue-navigation { bottom: 32px; }
.question-form { margin-top: 24px; width: 100%; }
.question-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#question-input {
  display: block; width: 100%; min-height: 48px; max-height: 152px;
  padding: 12px 0; border: 0; border-bottom: 1px solid #11141380;
  border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.5; resize: none;
  overflow-y: auto; outline: none;
}
#question-input::placeholder { color: #383d39; opacity: .8; }
#question-input:focus-visible { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.question-footer { display: flex; align-items: flex-start; justify-content: flex-end; gap: 16px; margin-top: 10px; }
#question-feedback { flex: 1; margin: 0; font-size: 12px; line-height: 1.45; color: #343b36; }
#question-feedback:empty { display: none; }
.question-send { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: #fff; color: var(--ink); }
.question-send:hover:not(:disabled) { background: #e9eeea; }
.question-send:disabled { opacity: .45; cursor: default; }
/* The sweep inverts the surface and lettering together, keeping the text legible. */
.dialogue-choices .choice,
.question-send,
.dialogue-navigation button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease;
}
.dialogue-choices .choice::after,
.question-send::after,
.dialogue-navigation button::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transform: translateX(-102%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.question-send svg,
.dialogue-navigation button svg { transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.dialogue-choices .choice:focus-visible,
.question-send:focus-visible,
.dialogue-navigation button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px #11141324;
}
.dialogue-choices .choice:not(.choice-talk):focus-visible,
.question-send:focus-visible { background: #fff; }
.dialogue-choices .choice-talk:focus-visible { background: #1d2422; }
.dialogue-choices .choice:focus-visible::after,
.question-send:focus-visible::after,
.dialogue-navigation button:focus-visible::after { transform: translateX(0); }
@media (hover:hover) and (pointer:fine) {
  .dialogue-choices .choice:hover,
  .question-send:hover:not(:disabled),
  .dialogue-navigation button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px #11141324;
  }
  .dialogue-choices .choice:not(.choice-talk):hover,
  .question-send:hover:not(:disabled) { background: #fff; }
  .dialogue-choices .choice-talk:hover { background: #1d2422; border-color: #1d2422; }
  .dialogue-choices .choice:hover::after,
  .question-send:hover:not(:disabled)::after,
  .dialogue-navigation button:hover::after { transform: translateX(0); }
  .question-send:hover:not(:disabled) svg { transform: translateX(3px); }
  .dialogue-navigation .back-button:hover svg { transform: translateX(-3px); }
  .dialogue-navigation .restart-button:hover svg { transform: rotate(-35deg); }
}
.dialogue-choices .choice:active,
.question-send:active:not(:disabled),
.dialogue-navigation button:active { transform: translateY(0); box-shadow: 0 2px 5px #11141320; }
@media (prefers-reduced-motion:reduce) {
  .dialogue-choices .choice,
  .question-send,
  .dialogue-navigation button,
  .dialogue-choices .choice::after,
  .question-send::after,
  .dialogue-navigation button::after,
  .question-send svg,
  .dialogue-navigation button svg { transition: none; }
}
@media (min-width:761px) and (max-width:1100px) and (min-aspect-ratio:11/10) {
  .dialogue { width: 43vw; }
  .dialogue-choices { gap: 10px; }
  .dialogue-choices .choice { padding: 12px; font-size: 12px; }
}
@media (max-width:760px), (max-width:1100px) and (max-aspect-ratio:11/10) {
  .hero {
    display: block;
    padding: clamp(330px, 44svh, 490px) 0 32px;
  }
  .dialogue { width: auto; max-width: 600px; margin: 0 auto; padding: 0 var(--gutter); }
  #dialogue-message { gap: 14px; }
  .dialogue-current h1 { font-size: 21px; line-height: 1.35; }
  .dialogue-current[data-topic=welcome] h1 { font-size: clamp(27px, 6.5vw, 34px); text-wrap: pretty; }
  #dialogue-message p { font-size: 17px; line-height: 1.5; }
  .dialogue-choices { margin-top: 24px; gap: 10px; }
  .dialogue-choices .choice { padding: 10px 16px; font-size: 12px; }
  .dialogue-choices .choice-talk { gap: 8px; }
  .talk-title { font-size: 12px; }
  .talk-hint { font-size: 10px; }
  .dialogue-previous { left: var(--gutter); width: calc(100% - 2 * var(--gutter)); font-size: 16px; bottom: calc(100% + 20px); }
  .dialogue-navigation { bottom: auto; margin: 28px var(--gutter) 0; }
  /* Preview tools follow the content so they cannot cover the voice action. */
  .intro-preview { position: relative; right: auto; bottom: auto; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 20px; }
}
@media (max-width:480px) {
  .dialogue-choices .choice { padding: 10px 16px; font-size: 13px; }
  .talk-title { font-size: 13px; }
  .talk-hint { font-size: 11px; }
}