/* Source: assets/css/shared/_vars.scss */
:root {
  --color-white: #fff;
  --color-gray-light: #CDDCE0;
  --color-black: #152E35;
  --font-heading: "Mona Sans", sans-serif;
  --font-body: "Mona Sans", sans-serif;
  --font-comic: "ccmeanwhile", sans-serif;
  --font-pixel: "vt323", sans-serif;
}


/* Source: assets/css/shared/_reset.scss */
* {
  outline: none !important;
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  -webkit-font-smoothing: antialiased;
}




/* Source: assets/css/chat/_shared.scss */
/* Shared panel styles */
.is-panel {
  transition: 0.2s all ease-in-out;
  visibility: visible;
  padding: 10px;
  border-radius: 8px;
  margin: 0 auto;
  width: 700px;
  background: #e0eeee;
  border: 5px solid #e0eeee;
  border-radius: 15px;
  padding: 20px 35px;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15);
}
@media (max-width: 899px) {
  .is-panel {
    padding: 15px 30px;
  }
}
.is-panel:before {
  content: "";
  display: block;
  position: absolute;
  left: 5px;
  top: -5px;
  bottom: -5px;
  height: auto;
  width: 30px;
  /* Image assets not present in /assets/images root upload:
     background: url(/assets/images/studio/consultation/dialog-af-corner-tl.png), url(/assets/images/studio/consultation/dialog-af-corner-tr.png), url(/assets/images/studio/consultation/dialog-af-corner-br.png), url(/assets/images/studio/consultation/dialog-af-corner-bl.png), linear-gradient(0deg, #f2fdfd, var(--color-white));
     background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
     background-position: top left, top right, bottom right, bottom left;
  */
  background: linear-gradient(0deg, #f2fdfd, var(--color-white));
  border: 5px solid #e0eeee;
  border-radius: 15px;
  right: 5px;
  width: auto;
}

/* Unused in current quiz.js chat interface:
#consultation strong {
  font-weight: 600;
}
*/


/* Source: assets/css/chat/_dialog.scss */
#dialog-container {
  height: 770px;
  position: relative;
  transition: 0.2s all ease-in-out;
}
@media (max-width: 899px) {
  #dialog-container {
    padding-top: 0;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
  }
}
#dialog-container.is-hidden {
  padding-top: 1000px;
}

/* Main element */
.dialog {
  transform: scale(1);
  opacity: 1;
  min-height: 120px;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}
@media (max-width: 899px) {
  .dialog {
    width: 360px;
    min-height: 200px;
  }
}

/* Dialog text */
.dialog p {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0;
  font-stretch: 97%;
  font-variation-settings: "slnt" 0;
  color: #2C3745;
  margin: 5px 0;
}
@media (max-width: 899px) {
  .dialog p {
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
  }
}
.dialog p .is-new {
  font-weight: 500;
}

/* Position text ove the background bit */
.dialog p,
.dialog-speaker,
.dialog-action {
  position: relative;
}

/* Dialog speaker box */
.dialog-speaker {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-stretch: 93%;
  font-variation-settings: "slnt" 0;
  color: var(--color-white);
  border: 2px solid #feffff;
  margin-bottom: 25px;
  background: #e0eeee;
  display: inline-block;
  border-radius: 15px;
  padding: 4px 20px 5px;
  position: absolute;
  top: -30px;
  left: 28px;
}
.dialog-speaker.is-changing {
  animation: speaker-change 150ms ease-out;
}

@keyframes speaker-change {
  0% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}
:focus {
  outline: none;
}

.dialog:has(.dialog-speaker[name="Mr. Edutainment"]) .dialog-speaker {
  background-color: #ff7b3e;
}

.dialog:has(.dialog-speaker[name=Catlike]) .dialog-speaker {
  background-color: #8986be;
}

/* Dialog action container */
.dialog-action {
  display: inline-block;
  padding: 0;
}
@media (min-width: 900px) {
  .dialog-action {
    border-radius: 30px;
    transition: 0.2s all ease-in-out;
    transform: scale(1);
    background: #c9e8e8;
    position: absolute;
    right: -30px;
    bottom: 88%;
  }
}
.dialog-action.has-options {
  padding: 5px 0 0 0px;
}
@media (min-width: 900px) {
  .dialog-action.has-options {
    padding: 20px;
  }
}
.dialog-action.has-shrunk {
  transform: scale(1.1);
  opacity: 0;
}

/* Dialog buttons */
.dialog-button {
  transition: all 0.05s ease-in-out;
  color: #2a6464;
  letter-spacing: -0.3px;
  border-radius: 10px;
  text-decoration: none;
  padding: 8px;
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  font-stretch: 97%;
  font-variation-settings: "slnt" 0;
}
@media (max-width: 899px) {
  .dialog-button {
    font-size: 16px;
    line-height: 14px;
    margin: 0px 5px 5px 0;
    background: #c9edef;
    padding: 10px;
    margin: 5px 15px 5px 0;
    display: inline-block;
  }
}
@media (min-width: 900px) {
  .dialog-button {
    font-size: 18px;
    line-height: 16px;
    margin: 0px 8px 0px 0;
  }
}
@media (min-width: 900px) {
  .dialog-button:hover {
    transform: scale(1.05) translateX(4px);
    background: #eefeff;
  }
  .dialog-action:not(:hover) .dialog-button.is-focused, .dialog-action:not(:hover) .dialog-button:focus, .dialog-action:not(:hover) .dialog-button:focus-visible {
    transform: scale(1.05) translateX(4px);
    background: #eefeff;
  }
}
.dialog-button:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* Bring out the text one character at a time */
.typing-effect {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s, transform 0.15s;
}

.zoom-in {
  animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* Unused in current quiz.js chat interface:
   .chooser-backdrop
   @keyframes chooser-backdrop-animation
   .chooser + all .chooser-* variants
   @keyframes bounce (chooser animation)
   .chooser-button + states
*/


/* Source: assets/css/chat/_modifier.scss */
/* Modifier section location */
#modifier-container {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
}

/* Bring the modifier in and out of the scene */
.slide-up-animation {
  animation: slideUp 0.5s ease-in-out;
}

@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
.slide-down-animation {
  animation: slideDown 0.5s ease-in-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* Source: assets/css/chat.scss (original content below imports) */
@keyframes pose-change-squash {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.01, 0.99) translateY(1px);
  }
  60% {
    transform: scale(0.98, 1.02);
  }
  90% {
    transform: scale(1.01, 0.99) translateY(1px);
  }
  95% {
    transform: scale(0.995, 1.005);
  }
  100% {
    transform: scale(1);
  }
}
.character.is-posing {
  animation: pose-change-squash 0.25s forwards;
}

.character1 {
  width: 520px;
  height: 520px;
  position: absolute;
  top: 285px;
  left: 550px;
  right: 0;
  margin: 0 auto;
}
.character1 .pose-noice, .character1 .pose-celebrate, .character1 .pose-lookleft, .character1 .pose-smileleft,
.character1 .pose-comic, .character1 .pose-pointleft, .character1 .pose-heheh, .character1 .pose-computer, .character1 .pose-gesture {
  width: 100%;
  height: 100%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}
.character1 .pose-noice {
  background-image: url("/assets/images/character-mre-pose1.webp");
}
.character1 .pose-celebrate {
  background-image: url("/assets/images/character-mre-pose2.webp");
}
.character1 .pose-lookleft {
  background-image: url("/assets/images/character-mre-pose3.webp");
}
.character1 .pose-smileleft {
  background-image: url("/assets/images/character-mre-pose4.webp");
}
.character1 .pose-comic {
  background-image: url("/assets/images/character-mre-pose5.webp");
}
.character1 .pose-pointleft {
  background-image: url("/assets/images/character-mre-pose6.webp");
}
.character1 .pose-heheh {
  background-image: url("/assets/images/character-mre-pose7.webp");
}
.character1 .pose-gesture {
  background-image: url("/assets/images/character-mre-pose9.webp");
}
.character1 .pose-computer {
  background-image: url("/assets/images/character-mre-pose8.webp");
  width: 505px;
  top: 15px;
  left: -64px;
}
.character1.has-pose-noice .pose-noice, .character1.has-pose-celebrate .pose-celebrate, .character1.has-pose-lookleft .pose-lookleft, .character1.has-pose-smileleft .pose-smileleft, .character1.has-pose-comic .pose-comic, .character1.has-pose-pointleft .pose-pointleft, .character1.has-pose-heheh .pose-heheh, .character1.has-pose-computer .pose-computer, .character1.has-pose-gesture .pose-gesture {
  opacity: 1;
}
.character1 .mouth {
  width: 90px;
  height: 60px;
  transform: translate(250px, 170px);
  display: none;
}
.character1.is-talking .mouth, .character1.has-pose-noice.is-talking .mouth {
  display: block;
  background: url("/assets/images/character-mre-mouth2.webp") no-repeat;
  background-size: 66px auto;
  transform: translate(275px, 162px);
}
.character1.has-pose-celebrate.is-talking .mouth {
  transform: translate(280px, 182px);
}
.character1.has-pose-lookleft.is-talking .mouth {
  background-image: url("/assets/images/character-mre-mouth1.webp");
  transform: translate(268px, 174px);
}
.character1.has-pose-smileleft.is-talking .mouth {
  transform: translate(268px, 171px);
}
.character1.has-pose-comic.is-talking .mouth {
  transform: translate(279px, 176px);
}
.character1.has-pose-pointleft.is-talking .mouth {
  transform: translate(269px, 183px);
}
.character1.has-pose-heheh.is-talking .mouth {
  transform: translate(279px, 156px);
}
.character1.has-pose-gesture.is-talking .mouth {
  transform: translate(280px, 170px);
}
.character1.has-pose-computer.is-talking .mouth {
  display: none;
}

.character2 {
  width: 228px;
  height: 520px;
  position: absolute;
  top: 285px;
  left: -690px;
  right: 0;
  margin: 0 auto;
}
.character2 .pose-noice, .character2 .pose-leer, .character2 .pose-lookright, .character2 .pose-write,
.character2 .pose-lookback, .character2 .pose-hips {
  width: 100%;
  height: 100%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}
.character2 .pose-noice {
  background-image: url("/assets/images/character-cat-pose1.webp");
}
.character2 .pose-leer {
  background-image: url("/assets/images/character-cat-pose2.webp");
}
.character2 .pose-lookright {
  background-image: url("/assets/images/character-cat-pose4.webp");
}
.character2 .pose-write {
  background-image: url("/assets/images/character-cat-pose3.webp");
}
.character2.has-pose-write.is-talking .pose-write {
  background-image: url("/assets/images/character-cat-pose3b.webp");
}
.character2 .pose-lookback {
  background-image: url("/assets/images/character-cat-pose5.webp");
}
.character2 .pose-hips {
  background-image: url("/assets/images/character-cat-pose6.webp");
}
.character2.has-pose-noice .pose-noice, .character2.has-pose-leer .pose-leer, .character2.has-pose-lookright .pose-lookright, .character2.has-pose-write .pose-write, .character2.has-pose-lookback .pose-lookback, .character2.has-pose-hips .pose-hips {
  opacity: 1;
}
.character2 .mouth {
  width: 67px;
  height: 45px;
  transform: translate(250px, 170px);
  display: none;
}
.character2.is-talking .mouth, .character2.has-pose-noice.is-talking .mouth {
  display: block;
  background: url("/assets/images/character-cat-mouth2.webp") no-repeat;
  background-size: 39px auto;
  transform: translate(106px, 216px);
}
.character2.has-pose-leer.is-talking .mouth {
  background-image: url("/assets/images/character-cat-mouth1.webp") no-repeat;
  transform: translate(105px, 230px);
}
.character2.has-pose-lookright.is-talking .mouth {
  background-image: url("/assets/images/character-cat-mouth1.webp") no-repeat;
  transform: translate(108px, 229px);
}
.character2.has-pose-hips.is-talking .mouth {
  background-image: url("/assets/images/character-cat-mouth1.webp") no-repeat;
  transform: translate(109px, 219px);
}
.character2.has-pose-write.is-talking .mouth,
.character2.has-pose-lookback.is-talking .mouth {
  display: none;
}

@keyframes flicker-on {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.8;
  }
  60% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
.screen {
  width: 470px;
  height: 320px;
  position: absolute;
  top: 105px;
  left: 0;
  right: 0;
  margin: 0 0 0 470px;
  opacity: 1;
  pointer-events: none;
}

.screen-0a {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen0a.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_minicomic_7) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_1) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_2) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_3) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_4) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_5) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_6) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_7) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_8) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_9) .screen-0a, body:has(.dialog#dialog_minicomic_quiz_10) .screen-0a, body:has(.dialog#dialog_minicomic_review_1) .screen-0a, body:has(.dialog#dialog_minicomic_review_1b) .screen-0a, body:has(.dialog#dialog_review_attention) .screen-0a, body:has(.dialog#dialog_review_deplatforming) .screen-0a, body:has(.dialog#dialog_review_nurture) .screen-0a, body:has(.dialog#dialog_review_postsale) .screen-0a, body:has(.dialog#dialog_review_system) .screen-0a, body:has(.dialog#dialog_minicomic_review_4) .screen-0a, body:has(.dialog#dialog_review_fit) .screen-0a, body:has(.dialog#dialog_pitch_1) .screen-0a, body:has(.dialog#dialog_pitch_2) .screen-0a, body:has(.dialog#dialog_pitch_2b) .screen-0a, body:has(.dialog#dialog_pitch_3) .screen-0a, body:has(.dialog#dialog_pitch_4) .screen-0a, body:has(.dialog#dialog_pitch_5) .screen-0a, body:has(.dialog#dialog_pitch_5b) .screen-0a, body:has(.dialog#dialog_pitch_5c) .screen-0a, body:has(.dialog#dialog_pitch_5d) .screen-0a, body:has(.dialog#dialog_pitch_5e) .screen-0a, body:has(.dialog#dialog_pitch_6) .screen-0a, body:has(.dialog#dialog_pitch_6b) .screen-0a, body:has(.dialog#dialog_pitch_6c) .screen-0a, body:has(.dialog#dialog_pitch_6d) .screen-0a, body:has(.dialog#dialog_pitch_6e) .screen-0a, body:has(.dialog#dialog_pitch_7) .screen-0a, body:has(.dialog#dialog_pitch_7b) .screen-0a, body:has(.dialog#dialog_pitch_7c) .screen-0a, body:has(.dialog#dialog_pitch_7d) .screen-0a, body:has(.dialog#dialog_pitch_8) .screen-0a, body:has(.dialog#dialog_pitch_8b) .screen-0a, body:has(.dialog#dialog_pitch_8c) .screen-0a, body:has(.dialog#dialog_pitch_8d) .screen-0a, body:has(.dialog#dialog_pitch_8e) .screen-0a, body:has(.dialog#dialog_pitch_8f) .screen-0a, body:has(.dialog#dialog_pitch_8g) .screen-0a, body:has(.dialog#dialog_pitch_9) .screen-0a, body:has(.dialog#dialog_pitch_9b) .screen-0a, body:has(.dialog#dialog_pitch_10) .screen-0a, body:has(.dialog#dialog_interest_1) .screen-0a, body:has(.dialog#dialog_interest_2) .screen-0a, body:has(.dialog#dialog_interest_2b) .screen-0a, body:has(.dialog#dialog_interest_2c) .screen-0a, body:has(.dialog#dialog_interest_2d) .screen-0a, body:has(.dialog#dialog_interest_3) .screen-0a, body:has(.dialog#dialog_interest_4) .screen-0a, body:has(.dialog#dialog_interest_5) .screen-0a, body:has(.dialog#dialog_interest_6) .screen-0a, body:has(.dialog#dialog_interest_7) .screen-0a, body:has(.dialog#dialog_interest_8) .screen-0a, body:has(.dialog#dialog_interest_8b) .screen-0a, body:has(.dialog#dialog_interest_8c) .screen-0a, body:has(.dialog#dialog_interest_9) .screen-0a, body:has(.dialog#dialog_interest_9d) .screen-0a, body:has(.dialog#dialog_interest_9b) .screen-0a, body:has(.dialog#dialog_interest_9g) .screen-0a, body:has(.dialog#dialog_interest_9b) .screen-0a, body:has(.dialog#dialog_interest_9c) .screen-0a, body:has(.dialog#dialog_interest_9f) .screen-0a, body:has(.dialog#dialog_interest_9e) .screen-0a, body:has(.dialog#dialog_interest_10) .screen-0a, body:has(.dialog#dialog_interest_15) .screen-0a, body:has(.dialog#dialog_interest_15b) .screen-0a, body:has(.dialog#dialog_interest_16) .screen-0a, body:has(.dialog#dialog_interest_11) .screen-0a, body:has(.dialog#dialog_interest_12) .screen-0a, body:has(.dialog#dialog_interest_13) .screen-0a, body:has(.dialog#dialog_interest_14) .screen-0a, body:has(.dialog#dialog_interest_15) .screen-0a, body:has(.dialog#dialog_interest_16) .screen-0a, body:has(.dialog#dialog_call_1) .screen-0a, body:has(.dialog#dialog_sale_1) .screen-0a, body:has(.dialog#dialog_sale_2) .screen-0a, body:has(.dialog#dialog_sale_3) .screen-0a {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-1a {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen1a.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_minicomic_7) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_1) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_2) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_3) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_4) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_5) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_6) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_7) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_8) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_9) .screen-1a, body:has(.dialog#dialog_minicomic_quiz_10) .screen-1a, body:has(.dialog#dialog_minicomic_review_1) .screen-1a, body:has(.dialog#dialog_minicomic_review_1b) .screen-1a {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-1b {
  width: 24px;
  height: 34px;
  background: url("/assets/images/screen1b.png") center no-repeat;
  background-size: contain;
  transform: translate(96px, 110px);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_minicomic_quiz_1) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
  transform: translate(96px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_2) .screen-1b {
  opacity: 1;
  transform: translate(96px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_3) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
  transform: translate(116px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_4) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
  transform: translate(134px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_5) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
  transform: translate(172px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_6) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
  transform: translate(193px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_7) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
  transform: translate(274px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_8) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
  transform: translate(313px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_9) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
  transform: translate(350px, 110px);
}
body:has(.dialog#dialog_minicomic_quiz_10) .screen-1b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 0;
  transform: translate(350px, 105px);
}

.screen-1c {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen1c.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_minicomic_quiz_10) .screen-1c, body:has(.dialog#dialog_minicomic_review_1) .screen-1c, body:has(.dialog#dialog_minicomic_review_1b) .screen-1c {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-1d {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen1d.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_catlike_joke) .screen-1d {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-2a {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen2a.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_review_attention) .screen-2a, body:has(.dialog#dialog_review_deplatforming) .screen-2a, body:has(.dialog#dialog_review_nurture) .screen-2a, body:has(.dialog#dialog_review_postsale) .screen-2a, body:has(.dialog#dialog_review_system) .screen-2a, body:has(.dialog#dialog_minicomic_review_4) .screen-2a {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-2b {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen2b.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_review_deplatforming) .screen-2b, body:has(.dialog#dialog_review_nurture) .screen-2b, body:has(.dialog#dialog_review_postsale) .screen-2b, body:has(.dialog#dialog_review_system) .screen-2b, body:has(.dialog#dialog_minicomic_review_4) .screen-2b {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-2c {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen2c.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_review_nurture) .screen-2c, body:has(.dialog#dialog_review_postsale) .screen-2c, body:has(.dialog#dialog_review_system) .screen-2c, body:has(.dialog#dialog_minicomic_review_4) .screen-2c {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-2d {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen2d.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_review_postsale) .screen-2d, body:has(.dialog#dialog_review_system) .screen-2d, body:has(.dialog#dialog_minicomic_review_4) .screen-2d {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-2e {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen2e.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_review_system) .screen-2e, body:has(.dialog#dialog_minicomic_review_4) .screen-2e {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-3a {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen3a.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_review_fit) .screen-3a, body:has(.dialog#dialog_pitch_1) .screen-3a, body:has(.dialog#dialog_pitch_2) .screen-3a, body:has(.dialog#dialog_pitch_2b) .screen-3a, body:has(.dialog#dialog_pitch_3) .screen-3a, body:has(.dialog#dialog_pitch_4) .screen-3a, body:has(.dialog#dialog_pitch_5) .screen-3a, body:has(.dialog#dialog_pitch_5b) .screen-3a, body:has(.dialog#dialog_pitch_5c) .screen-3a, body:has(.dialog#dialog_pitch_5d) .screen-3a, body:has(.dialog#dialog_pitch_5e) .screen-3a, body:has(.dialog#dialog_pitch_6) .screen-3a, body:has(.dialog#dialog_pitch_6b) .screen-3a, body:has(.dialog#dialog_pitch_6c) .screen-3a, body:has(.dialog#dialog_pitch_6d) .screen-3a, body:has(.dialog#dialog_pitch_6e) .screen-3a, body:has(.dialog#dialog_pitch_7) .screen-3a, body:has(.dialog#dialog_pitch_7b) .screen-3a, body:has(.dialog#dialog_pitch_7c) .screen-3a, body:has(.dialog#dialog_pitch_7d) .screen-3a, body:has(.dialog#dialog_pitch_8) .screen-3a, body:has(.dialog#dialog_pitch_8b) .screen-3a, body:has(.dialog#dialog_pitch_8c) .screen-3a, body:has(.dialog#dialog_pitch_8d) .screen-3a, body:has(.dialog#dialog_pitch_8e) .screen-3a, body:has(.dialog#dialog_pitch_8f) .screen-3a, body:has(.dialog#dialog_pitch_8g) .screen-3a, body:has(.dialog#dialog_pitch_9) .screen-3a, body:has(.dialog#dialog_pitch_9b) .screen-3a, body:has(.dialog#dialog_interest_1) .screen-3a, body:has(.dialog#dialog_interest_2) .screen-3a, body:has(.dialog#dialog_interest_2b) .screen-3a, body:has(.dialog#dialog_interest_2c) .screen-3a, body:has(.dialog#dialog_interest_2d) .screen-3a, body:has(.dialog#dialog_interest_3) .screen-3a, body:has(.dialog#dialog_interest_4) .screen-3a, body:has(.dialog#dialog_interest_5) .screen-3a, body:has(.dialog#dialog_interest_6) .screen-3a, body:has(.dialog#dialog_interest_7) .screen-3a, body:has(.dialog#dialog_interest_8) .screen-3a, body:has(.dialog#dialog_interest_8b) .screen-3a, body:has(.dialog#dialog_interest_8c) .screen-3a, body:has(.dialog#dialog_interest_9) .screen-3a, body:has(.dialog#dialog_interest_9d) .screen-3a, body:has(.dialog#dialog_interest_9b) .screen-3a, body:has(.dialog#dialog_interest_9g) .screen-3a, body:has(.dialog#dialog_interest_9b) .screen-3a, body:has(.dialog#dialog_interest_9c) .screen-3a, body:has(.dialog#dialog_interest_9f) .screen-3a, body:has(.dialog#dialog_interest_9e) .screen-3a, body:has(.dialog#dialog_interest_10) .screen-3a, body:has(.dialog#dialog_interest_15) .screen-3a, body:has(.dialog#dialog_interest_15b) .screen-3a {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-4a {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen4a.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_pitch_10) .screen-4a, body:has(.dialog#dialog_interest_16) .screen-4a, body:has(.dialog#dialog_interest_11) .screen-4a, body:has(.dialog#dialog_interest_12) .screen-4a, body:has(.dialog#dialog_interest_13) .screen-4a, body:has(.dialog#dialog_interest_14) .screen-4a, body:has(.dialog#dialog_interest_15) .screen-4a, body:has(.dialog#dialog_interest_16) .screen-4a, body:has(.dialog#dialog_call_1) .screen-4a {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

.screen-5a {
  width: 470px;
  height: 320px;
  background: url("/assets/images/screen4a.png") center no-repeat;
  background-size: contain;
  transform: translate(0, 0);
  position: absolute;
  opacity: 0;
}
body:has(.dialog#dialog_sale_1) .screen-5a, body:has(.dialog#dialog_sale_2) .screen-5a, body:has(.dialog#dialog_sale_3) .screen-5a {
  animation: flicker-on 0.5s ease-in-out;
  opacity: 1;
}

body {
  background: #2C3547;
  padding-top: 25px;
}

#chat {
  max-width: 1400px;
  height: 800px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
}
@media (max-width: 899px) {
  #chat {
    height: 610px;
    width: 360px;
  }
}

.consultation-camshake {
  transform: scale(1) translateY(0);
  transition: transform 0.2s 4;
}

#background-container {
  overflow: hidden;
  max-width: 1400px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media (max-width: 899px) {
  #background-container {
    width: 1000px;
    top: -160px;
    transform: scale(0.6);
    left: -430px;
  }
}

#background-container > div {
  width: 3774px;
  height: 800px;
  transition: 2s all ease-in-out;
  position: relative;
}
@media (min-width: 900px) and (max-width: 1099px) {
  #background-container > div {
    left: -230px;
  }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  #background-container > div {
    left: -120px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  #background-container > div {
    left: -60px;
  }
}

#background-container .background-sky {
  width: 3173px;
  height: 844px;
  background: url("/assets/images/quiz-bg-sky.png") center repeat-x;
  background-size: 3173px 844px;
  position: absolute;
  animation: driftSky 100s linear infinite;
}

@keyframes driftSky {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -3173px 0;
  }
}
#background-container .background-fg {
  width: 1420px;
  height: 820px;
  background: url("/assets/images/quiz-bg-fg.png") center repeat-x;
  background-size: auto 820px;
  position: relative;
}

@keyframes pose-change-squash {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.01, 0.99) translateY(1px);
  }
  60% {
    transform: scale(0.98, 1.02);
  }
  90% {
    transform: scale(1.01, 0.99) translateY(1px);
  }
  95% {
    transform: scale(0.995, 1.005);
  }
  100% {
    transform: scale(1);
  }
}
.review-form {
  background: #f2f2f2;
  padding: 30px;
  border-radius: 10px;
  width: 450px;
  text-align: center;
  margin: 200px auto 0;
  background: linear-gradient(0deg, #f2fdfd, var(--color-white));
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15);
  font-family: var(--font-body);
  color: #2C3745;
  font-size: 18px;
  letter-spacing: -0.3px;
  line-height: 1.4;
}
@media (max-width: 899px) {
  .review-form {
    width: 320px;
    margin: 120px auto 0;
  }
}
.review-form .dialog-button {
  width: 100%;
  opacity: 1;
  transition: 0.2s all ease-in-out;
  max-height: 100px;
  overflow: hidden;
  margin-bottom: 0;
  background: #a9e2e2;
  transform: scale(1);
}
.review-form .dialog-button:hover {
  transform: scale(1);
}
.review-form .dialog-button:not(.is-visible) {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
  margin-top: -10px;
}
.review-form {
  /* Floaty forms where when you type into the box, the label looks like
     the placeholder, then shuffles up into the top of the field when
     the input field has content in it */
}
.review-form .floating-placeholder--input {
  border: 1px solid #bfc8c8;
  height: 44px;
  padding: 0;
  width: 100%;
  border-radius: 10px;
  padding: 5px 10px 5px;
  font-size: 15px;
  margin-bottom: 10px;
}
.review-form .floating-placeholder--input:not(:placeholder-shown) {
  padding: 17px 10px 5px;
}
.review-form .floating-placeholder--label {
  color: #2C3745;
  position: absolute;
  margin: -48px 0 0 11px;
  pointer-events: all;
  font-size: 15px;
  display: block;
  opacity: 0;
  visibility: hidden;
}
.review-form .floating-placeholder--input:not(:placeholder-shown) + .floating-placeholder--label {
  font-size: 12px;
  transition: 0.1s all ease-in-out;
  color: #2C3745;
  visibility: visible;
  opacity: 0.75;
}