/* A single usable screen for each step. Circle geometry lives in circle-78.css. */
html {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  scroll-padding: 0;
}
body[data-flow-screen] {
  --flow-header-height: 56px;
  --flow-dock-reserve: var(--flow-dock-height, 104px);
  --flow-ring-size: calc(var(--flow-viewport-height, 100dvh) - 304px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--flow-viewport-height, 100dvh);
  min-height: 0;
  max-height: var(--flow-viewport-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-flow-screen] .app-header {
  flex: 0 0 calc(var(--flow-header-height) + env(safe-area-inset-top));
  height: calc(var(--flow-header-height) + env(safe-area-inset-top));
  width: calc(100% - 32px);
  max-width: 900px;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top);
  gap: 12px;
}
body[data-flow-screen] .brand { gap: 7px; }
body[data-flow-screen] .brand > svg { width: 28px; height: 28px; }
body[data-flow-screen] .brand > span { font-size: 25px; }
body[data-flow-screen] .brand small { margin-top: 5px; font-size: 5px; letter-spacing: 1.2px; }
body[data-flow-screen] .live-presence { padding: 4px 9px 4px 4px; gap: 7px; }
body[data-flow-screen] .live-avatar { width: 30px; height: 30px; }
body[data-flow-screen] .live-copy strong { font-size: 8px; }
body[data-flow-screen] .live-copy small { font-size: 6px; }
body[data-flow-screen] .live-arrow { font-size: 12px; }
body[data-flow-screen] .invitation,
body[data-flow-screen] .personal-reading,
body[data-flow-screen] .app-footer { display: none; }
body[data-flow-screen] .experience {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0;
  width: calc(100% - 32px);
  max-width: 680px;
  min-height: 0;
  margin: 0 auto;
  padding: 0 0 var(--flow-dock-reserve);
  overflow: hidden;
}
body[data-flow-screen] .reading-workspace {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.flow-toolbar {
  position: relative;
  display: flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
#flow-progress.journey-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  font-size: 9px;
  line-height: 1.3;
}
#flow-progress > span { gap: 5px; opacity: .6; white-space: nowrap; }
#flow-progress > span b { width: 18px; height: 18px; font-size: 8px; }
#flow-progress > i { display: none; }
body[data-flow-screen="video"] #flow-progress [data-flow-step="video"],
body[data-flow-screen="cards"] #flow-progress [data-flow-step="cards"],
body[data-flow-screen="question"] #flow-progress [data-flow-step="question"] {
  color: #f2d7a7;
  opacity: 1;
}
body[data-flow-screen="video"] #flow-progress [data-flow-step="video"] b,
body[data-flow-screen="cards"] #flow-progress [data-flow-step="cards"] b,
body[data-flow-screen="question"] #flow-progress [data-flow-step="question"] b {
  border-color: #e7c18599;
  background: #d5b77b20;
  box-shadow: 0 0 14px #d5b77b1c;
}
#flow-back {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  min-height: 32px;
  padding: 5px 0;
  color: #b7c9e3;
  background: transparent;
  font-size: 9px;
}
body[data-flow-screen="question"] #flow-progress { margin-left: 42px; gap: 11px; }
body[data-flow-screen] #vsl-section,
body[data-flow-screen] #cards-step,
body[data-flow-screen] #question-step {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  animation: none;
}
body[data-flow-screen] #vsl-section:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0 10px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
body[data-flow-screen] .vsl-heading { flex: 0 0 auto; }
body[data-flow-screen] .vsl-heading .section-kicker { display: none; }
body[data-flow-screen] .vsl-heading h2 { margin: 0; font-size: 27px; line-height: 1.05; }
body[data-flow-screen] .vsl-frame {
  position: relative;
  flex: 1 1 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 9 / 16;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}
body[data-flow-screen] #vsl-video { width: 100%; height: 100%; object-fit: contain; }
body[data-flow-screen] .vsl-caption { flex: 0 0 auto; margin: 0; font-size: 9px; line-height: 1.4; }
body[data-flow-screen] #vsl-start { display: none; }
.vsl-sound,
.vsl-fallback-play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: min(90%, 290px);
  min-height: 64px;
  padding: 12px 13px;
  border: 1px solid #fae0acac;
  border-radius: 16px;
  background: #0b192de8;
  box-shadow: 0 0 0 5px #e3c68c14, 0 10px 32px #0008;
  color: #fff1d5;
  backdrop-filter: blur(12px);
  text-align: left;
}
.vsl-sound .sound-icon {
  display: grid;
  place-items: center;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  border: 1px solid #f1cc8a77;
  border-radius: 50%;
  color: #f1cc8a;
  animation: sound-invite 1.8s ease-out infinite;
}
.vsl-sound .sound-icon svg { width: 24px; height: 24px; }
.vsl-sound .sound-label { display: block; }
.vsl-sound .sound-label strong { display: block; font-size: 11px; line-height: 1.5; }
.vsl-sound .sound-label small { display: block; margin-top: 3px; color: #bbcde3; font-size: 8px; line-height: 1.5; }
.vsl-fallback-play { top: 58%; min-height: 40px; font-size: 10px; }
@keyframes sound-invite {
  0% { transform: rotate(0deg); box-shadow: 0 0 0 0 #eed09570; }
  10% { transform: rotate(-8deg); }
  20% { transform: rotate(8deg); }
  30% { transform: rotate(-6deg); }
  40% { transform: rotate(6deg); }
  50% { transform: rotate(0deg); }
  75%, 100% { transform: rotate(0deg); box-shadow: 0 0 0 12px #eed09500; }
}
body[data-flow-screen] #cards-step:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 3px 0 7px;
}
body[data-flow-screen] .step-heading { flex: 0 0 auto; min-height: 27px; gap: 8px; margin: 0 0 5px; }
body[data-flow-screen] .step-heading h2 { margin: 0; font-size: 28px; line-height: 1.05; }
body[data-flow-screen] .step-number { font-size: 8px; }
body[data-flow-screen] #cards-step .deck-summary,
body[data-flow-screen] #cards-step .drawing-instruction { display: none; }
body[data-flow-screen][data-deck-layout="circle"] .card-table {
  flex: 0 0 auto;
  gap: 5px;
  width: 100%;
  height: auto;
  margin: 0;
}
body[data-flow-screen][data-deck-layout="circle"] .selection-zone { padding: 5px 0 2px; }
body[data-flow-screen][data-deck-layout="circle"] .selection { gap: 19px; }
body[data-flow-screen][data-deck-layout="circle"] .selection-slot { width: 43px; height: 65px; }
body[data-flow-screen][data-deck-layout="circle"] .selection-note { display: none; }
body[data-flow-screen][data-deck-layout="circle"] .deck-zone {
  align-self: center;
  width: min(100%, 520px, var(--flow-ring-size));
  max-width: 100%;
  margin: 0 auto;
}
body[data-flow-screen] .deck-layout-note {
  flex: 0 0 auto;
  max-width: 390px;
  margin: 5px auto 0;
  font-size: 8px;
  line-height: 1.5;
}
body[data-flow-screen] .deck-controls { flex: 0 0 auto; gap: 8px; margin: 2px 0 0; }
body[data-flow-screen] .deck-controls > button { min-height: 30px; padding: 4px 0; font-size: 8px; }
body[data-flow-screen] .deck-controls > span { font-size: 11px; }
body[data-flow-screen] #question-step:not([hidden]) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 10px 0 16px;
}
#question-selection {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 65px;
  margin: 0 0 7px;
}
#question-selection .question-summary-card { position: relative; display: block; line-height: 1; }
#question-selection .question-summary-card > span { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); display: grid; place-items: center; min-width: 18px; height: 18px; border: 1px solid #d4b98299; border-radius: 50%; background: #10213a; color: #f0d7a4; font: 10px/1 var(--serif); }
#question-selection img { width: 38px; height: 58px; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px #d4b98277, 0 3px 14px #0005; }
#question-selection > :nth-child(1) { transform: rotate(-8deg); }
#question-selection > :nth-child(3) { transform: rotate(8deg); }
body[data-flow-screen] #question-step .question-block { padding: 18px 18px 13px; flex: 0 1 auto; min-height: 0; }
body[data-flow-screen] #question-step .question-top label { font-size: 18px; line-height: 1.35; }
body[data-flow-screen] #question-step #question { height: clamp(90px, 20dvh, 180px); max-height: 30dvh; padding-top: 14px; font-size: 16px; line-height: 1.55; }
body[data-flow-screen] #question-step .question-bottom { font-size: 8px; }
body[data-flow-screen] #question-step .question-examples { flex: 0 0 auto; gap: 6px; margin: 0; flex-wrap: wrap; }
body[data-flow-screen] #question-step .question-examples > button { min-height: 32px; padding: 6px 9px; font-size: 8px; }
body[data-flow-screen] #question-step .question-next { flex: 0 0 auto; margin: 0 auto; font-size: 9px; line-height: 1.5; }
body[data-flow-screen] .question-error { flex: 0 0 auto; margin: 0; font-size: 10px; min-height: 0; }
body[data-flow-screen] .reveal-area,
body[data-flow-screen].keyboard-open .reveal-area {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 680px;
  margin: 0;
  padding: 8px 16px calc(9px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid #b9cdec30;
  border-radius: 18px 18px 0 0;
  background: #0b172cf7;
  box-shadow: 0 -5px 28px #0004;
  transition: none;
}
body[data-flow-screen] .action-hint { min-height: 14px; margin: 0 0 5px; font-size: 9px; line-height: 1.4; }
body[data-flow-screen] .telegram-cta,
body[data-flow-screen].keyboard-open .telegram-cta { min-height: 47px; padding: 11px 14px; font-size: 12px; }
body[data-flow-screen] .reading-details { margin: 5px 0 0; font-size: 7px; line-height: 1.4; }
body[data-flow-screen] .reveal-links { margin: 0; gap: 0; }
body[data-flow-screen] #copy-question { padding: 2px 0 0; margin: 0; font-size: 7px; }
body[data-flow-screen="video"] .channel-icon,
body[data-flow-screen="cards"] .channel-icon { display: none; }
body[data-flow-screen].keyboard-open .flow-toolbar { flex-basis: 26px; }
body[data-flow-screen].keyboard-open #question-step { justify-content: flex-start; gap: 5px; padding: 3px 0 6px; }
body[data-flow-screen].keyboard-open #question-step .step-heading,
body[data-flow-screen].keyboard-open #question-selection,
body[data-flow-screen].keyboard-open #question-step .question-examples,
body[data-flow-screen].keyboard-open #question-step .question-next { display: none; }
body[data-flow-screen].keyboard-open #question-step .question-block { padding: 10px 13px 8px; }
body[data-flow-screen].keyboard-open #question-step .question-top label { font-size: 13px; }
body[data-flow-screen].keyboard-open #question-step #question { height: clamp(48px, calc(var(--flow-viewport-height, 100dvh) - 224px), 130px); max-height: none; padding-top: 7px; }
body[data-flow-screen].keyboard-open .question-bottom { font-size: 6px; }
body[data-flow-screen].keyboard-open .action-hint { font-size: 8px; margin-bottom: 4px; }
@media (min-width: 851px) {
  body[data-flow-screen] { --flow-header-height: 64px; }
  body[data-flow-screen] .vsl-heading h2 { font-size: 30px; }
  body[data-flow-screen] .vsl-frame { max-width: 390px; }
  body[data-flow-screen] .reveal-area { border-radius: 17px 17px 0 0; }
}
@media (max-width: 370px) {
  body[data-flow-screen] { --flow-header-height: 50px; }
  body[data-flow-screen] .app-header { width: calc(100% - 24px); gap: 6px; }
  body[data-flow-screen] .experience { width: calc(100% - 24px); }
  body[data-flow-screen] .brand > span { font-size: 22px; }
  body[data-flow-screen] .brand > svg { width: 24px; height: 24px; }
  body[data-flow-screen] .live-avatar { width: 27px; height: 27px; }
  body[data-flow-screen] .live-copy strong { font-size: 7px; }
  body[data-flow-screen] .live-copy small { font-size: 5.5px; }
  body[data-flow-screen] .live-arrow { display: none; }
  #flow-progress.journey-steps { gap: 10px; font-size: 8px; }
  body[data-flow-screen="question"] #flow-progress { gap: 7px; margin-left: 45px; }
  body[data-flow-screen] .step-heading h2 { font-size: 24px; }
  body[data-flow-screen] .vsl-heading h2 { font-size: 24px; }
  .vsl-sound { gap: 8px; padding: 10px; }
  .vsl-sound .sound-icon { flex-basis: 31px; width: 31px; height: 31px; }
  .vsl-sound .sound-label strong { font-size: 9px; }
  .vsl-sound .sound-label small { font-size: 7px; }
  body[data-flow-screen] .telegram-cta { font-size: 11px; }
  body[data-flow-screen] #question-step .question-top label { font-size: 16px; }
}
@media (max-height: 650px) {
  body[data-flow-screen] { --flow-header-height: 50px; }
  .flow-toolbar { flex-basis: 28px; }
  body[data-flow-screen] #cards-step { padding-top: 0; padding-bottom: 2px; }
  body[data-flow-screen] .step-heading { min-height: 24px; margin-bottom: 3px; }
  body[data-flow-screen] .step-heading h2 { font-size: 23px; }
  body[data-flow-screen][data-deck-layout="circle"] .selection-slot { width: 35px; height: 53px; }
  body[data-flow-screen][data-deck-layout="circle"] .selection-zone { padding: 4px 0 1px; }
  body[data-flow-screen][data-deck-layout="circle"] .card-table { gap: 3px; }
  body[data-flow-screen] .deck-layout-note { display: none; }
  body[data-flow-screen] .deck-controls { margin: 0; }
  body[data-flow-screen] .deck-controls > button { min-height: 28px; }
  body[data-flow-screen] #vsl-section:not([hidden]) { gap: 6px; padding: 5px 0 7px; }
  body[data-flow-screen] .vsl-heading h2 { font-size: 23px; }
  body[data-flow-screen] .vsl-caption { font-size: 8px; }
  body[data-flow-screen] #question-step:not([hidden]) { gap: 7px; padding: 4px 0 9px; }
  #question-selection { min-height: 47px; margin-bottom: 2px; }
  #question-selection img { width: 27px; height: 41px; }
  body[data-flow-screen] #question-step .question-block { padding: 12px 14px 9px; }
  body[data-flow-screen] #question-step #question { height: 95px; max-height: 22dvh; padding-top: 10px; }
  body[data-flow-screen] #question-step .question-examples > button { min-height: 29px; font-size: 7px; padding: 4px 7px; }
  body[data-flow-screen] .action-hint { font-size: 8px; }
  body[data-flow-screen] .telegram-cta { min-height: 45px; padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .vsl-sound .sound-icon { animation: none; }
}