/* Shared quiz styles. calc(var(--q) * 1) = 100 design pixels, set by the script on the quiz box. */
::-webkit-scrollbar { display: none; }
#article-top-desc #app{
  margin: auto;
  max-width: 1080px;
}
#article-top-desc {
  --q: 16px;
  --teal: #103d51;
  --red: #a51c24;
  --sans: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'PingFang HK', 'Noto Sans SC', 'Noto Sans TC',
    'Microsoft YaHei', 'Microsoft JhengHei', sans-serif;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

#article-top-desc *,
#article-top-desc *::before,
#article-top-desc *::after{
  box-sizing: border-box;
}

#article-top-desc .baz-quiz{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #103d51;
  color: #fff !important;
  font-family: var(--sans);
  font-size: calc(var(--q) * 0.24);
  line-height: 1.3;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* The host site styles h2/p in dark grey. Keep quiz type white. */
#article-top-desc .baz-quiz h1,
#article-top-desc .baz-quiz h2,
#article-top-desc .baz-quiz h3,
#article-top-desc .baz-quiz p,
#article-top-desc .baz-quiz button,
#article-top-desc .baz-quiz div,
#article-top-desc .baz-quiz span,
#article-top-desc .baz-quiz small,
#article-top-desc .baz-quiz i{
  font-family: var(--sans) !important;
}

#article-top-desc .baz-quiz h1,
#article-top-desc .baz-quiz h2,
#article-top-desc .baz-quiz h3,
#article-top-desc .baz-quiz .intro__title,
#article-top-desc .baz-quiz .quiz__prompt,
#article-top-desc .baz-quiz .quiz__title,
#article-top-desc .baz-quiz .result__name,
#article-top-desc .baz-quiz .half__name,
#article-top-desc .baz-quiz .mixing__text{
  color: #fff !important;
}

#article-top-desc .baz-quiz .intro__text,
#article-top-desc .baz-quiz .half__line,
#article-top-desc .baz-quiz .rhyme{
  color: #f5efe2 !important;
}

#article-top-desc .baz-quiz .answer__bubble--dark,
#article-top-desc .baz-quiz .answer__bubble--dark .answer__label{
  color: #0b2c3b !important;
}

#article-top-desc .baz-quiz .answer__bubble--light,
#article-top-desc .baz-quiz .answer__bubble--light .answer__label,
#article-top-desc .baz-quiz .intro__mark{
  color: #fff !important;
}

#article-top-desc button{
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

#article-top-desc img{
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

#article-top-desc p,
#article-top-desc h1,
#article-top-desc h2{
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

#article-top-desc small{
  font-size: inherit;
}

#article-top-desc .baz-quiz .viewport{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  overflow: hidden;
}

#article-top-desc .backdrop{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #103d51;
  background-image:
    linear-gradient(
      to bottom,
      rgba(9, 34, 47, 0.62) 0%,
      rgba(9, 34, 47, 0.4) 35%,
      rgba(9, 34, 47, 0.3) 60%,
      rgba(9, 34, 47, 0.55) 100%
    ),
    url('https://media.lanecrawford.com/feature/baz-bg.png');
  background-position: center center;
  background-size: cover;
}

#article-top-desc .stage{
  position: absolute;
}

#article-top-desc .panel{
  position: absolute;
  top: calc(var(--q) * 0.22);
  left: calc(var(--q) * 0.22);
  right: calc(var(--q) * 0.22);
  max-height: calc(100% - calc(var(--q) * 0.44));
  overflow: auto;
  padding: calc(var(--q) * 0.34) calc(var(--q) * 0.34) calc(var(--q) * 0.3);
  border: calc(var(--q) * 0.02) solid rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--q) * 0.32);
  background-color: rgba(11, 40, 54, 0.97);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='540' viewBox='0 0 540 540'%3E%3Cg fill='%23879EA8' fill-opacity='0.42'%3E%3Cpath d='M60 48Q60 70 82 70Q60 70 60 92Q60 70 38 70Q60 70 60 48ZM300 26Q300 40 314 40Q300 40 300 54Q300 40 286 40Q300 40 300 26ZM470 124Q470 150 496 150Q470 150 470 176Q470 150 444 150Q470 150 470 124ZM180 214Q180 230 196 230Q180 230 180 246Q180 230 164 230Q180 230 180 214ZM380 310Q380 330 400 330Q380 330 380 350Q380 330 360 330Q380 330 380 310ZM90 386Q90 410 114 410Q90 410 90 434Q90 410 66 410Q90 410 90 386ZM250 466Q250 480 264 480Q250 480 250 494Q250 480 236 480Q250 480 250 466ZM480 442Q480 460 498 460Q480 460 480 478Q480 460 462 460Q480 460 480 442Z'/%3E%3Ccircle cx='150' cy='110' r='6'/%3E%3Ccircle cx='410' cy='80' r='5'/%3E%3Ccircle cx='260' cy='170' r='7'/%3E%3Ccircle cx='40' cy='250' r='5'/%3E%3Ccircle cx='500' cy='290' r='6'/%3E%3Ccircle cx='310' cy='410' r='5'/%3E%3Ccircle cx='160' cy='520' r='6'/%3E%3Ccircle cx='420' cy='520' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: calc(var(--q) * 5.4) calc(var(--q) * 5.4);
  box-shadow:
    0 calc(var(--q) * 0.12) calc(var(--q) * 0.5) rgba(0, 0, 0, 0.45),
    inset 0 0 calc(var(--q) * 0.5) rgba(255, 255, 255, 0.07);
  animation: slide-up 0.3s ease-out both;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(calc(var(--q) * 0.4));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#article-top-desc .bubble{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: calc(var(--q) * 0.015) solid rgba(255, 255, 255, 0.28);
  background: radial-gradient(
    circle at 32% 26%,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 34%,
    rgba(255, 255, 255, 0.02) 62%,
    rgba(255, 255, 255, 0.1) 100%
  );
  box-shadow:
    0 calc(var(--q) * 0.04) calc(var(--q) * 0.2) rgba(0, 0, 0, 0.2),
    0 calc(var(--q) * 0.08) calc(var(--q) * 0.32) rgba(0, 0, 0, 0.1),
    inset 0 0 calc(var(--q) * 0.3) rgba(255, 255, 255, 0.3),
    inset calc(var(--q) * 0.08) calc(var(--q) * -0.08) calc(var(--q) * 0.26) rgba(255, 160, 215, 0.16),
    inset calc(var(--q) * -0.08) calc(var(--q) * 0.08) calc(var(--q) * 0.26) rgba(130, 220, 255, 0.2);
}

#article-top-desc .bubble__shine{
  position: absolute;
  top: 7%;
  left: 17%;
  width: 30%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
  transform: rotate(-30deg);
  z-index: 4;
  pointer-events: none;
}

@keyframes float-a {
  0%,
  100% {
    transform: translate(0, 0) rotate(-1.5deg);
  }
  25% {
    transform: translate(calc(var(--q) * 0.05), calc(var(--q) * -0.09)) rotate(-0.3deg);
  }
  50% {
    transform: translate(0, calc(var(--q) * -0.18)) rotate(1.5deg);
  }
  75% {
    transform: translate(calc(var(--q) * -0.05), calc(var(--q) * -0.09)) rotate(0.3deg);
  }
}

@keyframes float-b {
  0%,
  100% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  25% {
    transform: translate(calc(var(--q) * -0.05), calc(var(--q) * -0.09)) rotate(0.3deg);
  }
  50% {
    transform: translate(0, calc(var(--q) * -0.18)) rotate(-1.5deg);
  }
  75% {
    transform: translate(calc(var(--q) * 0.05), calc(var(--q) * -0.09)) rotate(-0.3deg);
  }
}

#article-top-desc .pill{
  height: calc(var(--q) * 0.8);
  padding: 0 calc(var(--q) * 0.38);
  border: calc(var(--q) * 0.02) solid rgba(255, 255, 255, 0.45);
  border-radius: calc(var(--q) * 0.12);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    0 calc(var(--q) * 0.04) calc(var(--q) * 0.14) rgba(0, 0, 0, 0.25),
    inset 0 calc(var(--q) * 0.02) 0 rgba(255, 255, 255, 0.3);
  font-size: calc(var(--q) * 0.24);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    transform 0.1s ease-out,
    box-shadow 0.1s ease-out;
}

#article-top-desc .pill:active{
  transform: translateY(calc(var(--q) * 0.03));
  box-shadow:
    0 calc(var(--q) * 0.01) calc(var(--q) * 0.05) rgba(0, 0, 0, 0.25),
    inset 0 calc(var(--q) * 0.02) 0 rgba(255, 255, 255, 0.2);
}

#article-top-desc .quiz__start,
#article-top-desc .pill--primary{
  border-color: transparent;
  border-radius: calc(var(--q) * 0.14);
  background: linear-gradient(to bottom, #c3323b 0%, #a51c24 52%, #87131b 100%);
  box-shadow:
    0 calc(var(--q) * 0.06) 0 #5f0d14,
    0 calc(var(--q) * 0.1) calc(var(--q) * 0.24) rgba(0, 0, 0, 0.35),
    inset 0 calc(var(--q) * 0.025) 0 rgba(255, 255, 255, 0.35),
    inset 0 calc(var(--q) * -0.03) calc(var(--q) * 0.06) rgba(0, 0, 0, 0.18);
  transition:
    transform 0.1s ease-out,
    box-shadow 0.1s ease-out;
}

#article-top-desc .quiz__start:active,
#article-top-desc .pill--primary:active{
  transform: translateY(calc(var(--q) * 0.05));
  box-shadow:
    0 calc(var(--q) * 0.01) 0 #5f0d14,
    0 calc(var(--q) * 0.03) calc(var(--q) * 0.08) rgba(0, 0, 0, 0.3),
    inset 0 calc(var(--q) * 0.025) 0 rgba(255, 255, 255, 0.25),
    inset 0 calc(var(--q) * -0.03) calc(var(--q) * 0.06) rgba(0, 0, 0, 0.18);
}

#article-top-desc .quiz__start{
  position: relative;
  overflow: hidden;
}

#article-top-desc .quiz__start::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.26) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-160%) skewX(-18deg);
  animation: shimmer 4.5s ease-in-out 1s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    transform: translateX(-160%) skewX(-18deg);
  }
  28% {
    transform: translateX(360%) skewX(-18deg);
  }
  100% {
    transform: translateX(360%) skewX(-18deg);
  }
}

#article-top-desc .close{
  position: absolute;
  top: calc(var(--q) * 0.2);
  right: calc(var(--q) * 0.2);
  z-index: 5;
  width: calc(var(--q) * 0.76);
  height: calc(var(--q) * 0.76);
  border: calc(var(--q) * 0.015) solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 calc(var(--q) * 0.03) calc(var(--q) * 0.12) rgba(0, 0, 0, 0.25),
    inset 0 0 calc(var(--q) * 0.12) rgba(255, 255, 255, 0.2);
  animation: close-in 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) 0.12s backwards;
  transition:
    transform 0.22s ease-out,
    background-color 0.22s ease-out;
}

#article-top-desc .close:active{
  transform: rotate(90deg) scale(0.88);
  background-color: rgba(255, 255, 255, 0.24);
}

#article-top-desc .close__icon{
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--q) * 0.32);
  height: calc(var(--q) * 0.32);
  margin: calc(var(--q) * -0.16) 0 0 calc(var(--q) * -0.16);
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

@keyframes close-in {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

#article-top-desc .rhyme{
  font-size: calc(var(--q) * 0.23);
  font-weight: 700;
  line-height: 1.42;
}

#article-top-desc .rhyme__line{
  display: block;
}

#article-top-desc .rhyme em{
  font-style: italic;
}

#article-top-desc .products{
  flex: none;
}

#article-top-desc .products__title{
  margin-bottom: calc(var(--q) * 0.1);
  font-size: calc(var(--q) * 0.18);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-align: center;
  text-transform: uppercase;
  color: #b9c8ce;
}

#article-top-desc .products__carousel{
  position: relative;
}

#article-top-desc .products__viewport{
  overflow: hidden;
}

#article-top-desc .products__track{
  display: flex;
  transition: transform 0.6s ease;
}

#article-top-desc .products__row{
  display: flex;
  justify-content: center;
}

#article-top-desc .products__carousel .products__row{
  flex: none;
  width: 100%;
}

#article-top-desc .arrow{
  position: absolute;
  top: calc(var(--q) * 1.39);
  z-index: 2;
  width: calc(var(--q) * 0.6);
  height: calc(var(--q) * 0.6);
  margin-top: calc(var(--q) * -0.3);
  border: calc(var(--q) * 0.015) solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(16, 61, 81, 0.92);
  box-shadow:
    0 calc(var(--q) * 0.03) calc(var(--q) * 0.12) rgba(0, 0, 0, 0.3),
    inset 0 0 calc(var(--q) * 0.12) rgba(255, 255, 255, 0.2);
}

#article-top-desc .arrow--prev{
  left: calc(var(--q) * -0.24);
}

#article-top-desc .arrow--next{
  right: calc(var(--q) * -0.24);
}

#article-top-desc .arrow__icon{
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--q) * 0.28);
  height: calc(var(--q) * 0.28);
  margin: calc(var(--q) * -0.14) 0 0 calc(var(--q) * -0.14);
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#article-top-desc .products__dots{
  margin-top: calc(var(--q) * 0.1);
  font-size: 0;
  line-height: 0;
  text-align: center;
}

#article-top-desc .products__dot{
  display: inline-block;
  width: calc(var(--q) * 0.09);
  height: calc(var(--q) * 0.09);
  margin: 0 calc(var(--q) * 0.05);
  border-radius: 50%;
  background: #fff;
  opacity: 0.3;
}

#article-top-desc .products__dot--on{
  opacity: 1;
}

#article-top-desc .product{
  flex: none;
  width: calc(var(--q) * 2.06);
  margin: 0 calc(var(--q) * 0.07);
  padding: calc(var(--q) * 0.08) calc(var(--q) * 0.08) calc(var(--q) * 0.1);
  border: calc(var(--q) * 0.015) solid rgba(255, 255, 255, 0.18);
  border-radius: calc(var(--q) * 0.14);
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

#article-top-desc a.product{
  display: block;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer;
}

#article-top-desc .product__photo{
  position: relative;
  width: calc(var(--q) * 1.9);
  height: calc(var(--q) * 2.6125);
  border-radius: calc(var(--q) * 0.1);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

#article-top-desc .product__photo img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#article-top-desc .product__placeholder{
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--q) * 0.5);
  height: calc(var(--q) * 0.5);
  margin: calc(var(--q) * -0.25) 0 0 calc(var(--q) * -0.25);
  fill: #879ea8;
  opacity: 0.6;
}

#article-top-desc .product__name{
  height: calc(var(--q) * 0.42);
  margin-top: calc(var(--q) * 0.08);
  overflow: hidden;
  font-size: calc(var(--q) * 0.155);
  font-weight: 700;
  line-height: calc(var(--q) * 0.21);
}

#article-top-desc a.product .product__name{
  height: calc(var(--q) * 0.63);
}

@keyframes halo {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(1.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.34);
  }
}

@keyframes beat {
  0%,
  50% {
    opacity: 0.6;
    transform: scale(1.22);
  }
  8%,
  58% {
    opacity: 1;
    transform: scale(1.38);
  }
  30%,
  80% {
    opacity: 0.75;
    transform: scale(1.28);
  }
}

#article-top-desc .char-light{
  display: block;
  pointer-events: none;
  transform: scale(1.28);
  will-change: opacity, transform;
}

#article-top-desc .char-light--halo{
  background: radial-gradient(
    circle at 50% 58%,
    rgba(255, 250, 232, 0.95) 0%,
    rgba(255, 238, 195, 0.6) 34%,
    rgba(255, 236, 190, 0) 68%
  );
  animation: halo 3.6s ease-in-out infinite;
}

#article-top-desc .char-light--stage{
  background: radial-gradient(
    circle at 50% 58%,
    rgba(210, 140, 255, 0.95) 0%,
    rgba(160, 80, 240, 0.6) 34%,
    rgba(140, 60, 230, 0) 68%
  );
  animation: beat 1.7s ease-out infinite;
}

/* --- Questions ----------------------------------------------------------- */

#article-top-desc .quiz__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--q) * 0.8);
}

#article-top-desc .quiz__title{
  font-size: calc(var(--q) * 0.32);
  font-weight: 900;
}

#article-top-desc .quiz__progress{
  min-width: calc(var(--q) * 2.2);
  text-align: right;
}

#article-top-desc .quiz__dots{
  display: block;
}

#article-top-desc .quiz__dots i{
  display: inline-block;
  width: calc(var(--q) * 0.2);
  height: calc(var(--q) * 0.2);
  margin-left: calc(var(--q) * 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

#article-top-desc .quiz__dots i.is-done{
  background: #fff;
}

#article-top-desc .quiz__dots i.is-now{
  background: var(--red);
}

#article-top-desc .quiz__count{
  display: block;
  margin-top: calc(var(--q) * 0.08);
  font-size: calc(var(--q) * 0.15);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b9c8ce;
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--q) * 0.4));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#article-top-desc .quiz__body{
  animation: step-in 0.28s ease-out both;
}

#article-top-desc .quiz__prompt{
  margin: calc(var(--q) * 0.4) calc(var(--q) * 0.2) calc(var(--q) * 0.32);
  font-size: calc(var(--q) * 0.5);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

#article-top-desc .quiz__answers{
  display: flex;
  justify-content: center;
  padding-bottom: calc(var(--q) * 0.26);
}

#article-top-desc .answer{
  width: calc(var(--q) * 3.9);
  height: calc(var(--q) * 3.9);
  margin: 0 calc(var(--q) * 0.22);
  border-radius: 50%;
  animation: float-a 4.6s ease-in-out infinite;
  will-change: transform;
}

#article-top-desc .answer--b{
  animation-name: float-b;
  animation-delay: -2.3s;
}

#article-top-desc .answer__bubble--light{
  color: #fff;
}

#article-top-desc .answer__bubble--dark{
  color: #0b2c3b;
}

#article-top-desc .answer__label{
  position: absolute;
  top: 50%;
  left: 9%;
  right: 9%;
  z-index: 3;
  display: block;
  font-size: calc(var(--q) * 0.34);
  font-weight: 800;
  line-height: 1.32;
  text-align: center;
  white-space: pre-line;
  transform: translateY(-50%);
}

#article-top-desc .quiz--intro{
  text-align: center;
}

#article-top-desc .intro__crew{
  position: relative;
  width: calc(var(--q) * 8.6);
  height: calc(var(--q) * 2.5);
  margin: calc(var(--q) * 0.1) auto 0;
}

#article-top-desc .intro__bubble{
  position: absolute;
  display: block;
  width: calc(var(--q) * 1.5);
  height: calc(var(--q) * 1.5);
  animation: float-a 4.4s ease-in-out infinite;
  will-change: transform;
}

#article-top-desc .intro__bubble--0{
  left: 0;
  top: calc(var(--q) * 0.7);
}

#article-top-desc .intro__bubble--1{
  left: calc(var(--q) * 1.65);
  top: calc(var(--q) * 0.2);
  animation-name: float-b;
  animation-delay: -1.1s;
}

#article-top-desc .intro__bubble--mystery{
  left: calc(var(--q) * 3.15);
  top: 0;
  width: calc(var(--q) * 2.3);
  height: calc(var(--q) * 2.3);
  animation-delay: -2.2s;
}

#article-top-desc .intro__bubble--3{
  right: calc(var(--q) * 1.65);
  top: calc(var(--q) * 0.2);
  animation-name: float-b;
  animation-delay: -3.3s;
}

#article-top-desc .intro__bubble--4{
  right: 0;
  top: calc(var(--q) * 0.7);
  animation-delay: -0.5s;
}

#article-top-desc .intro__char{
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
}

#article-top-desc .intro__mark{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 3;
  margin-top: calc(var(--q) * -0.6);
  font-size: calc(var(--q) * 1.1);
  font-weight: 900;
  line-height: calc(var(--q) * 1.2);
  color: #fff;
  text-shadow: 0 calc(var(--q) * 0.03) calc(var(--q) * 0.12) rgba(4, 22, 30, 0.45);
}

#article-top-desc .intro__title{
  margin-top: calc(var(--q) * 0.3);
  font-size: calc(var(--q) * 0.56);
  font-weight: 900;
}

#article-top-desc .intro__text{
  max-width: calc(var(--q) * 7.6);
  margin: calc(var(--q) * 0.16) auto 0;
  font-size: calc(var(--q) * 0.28);
  font-weight: 700;
  line-height: 1.4;
  color: #f5efe2;
}

#article-top-desc .quiz__start{
  width: calc(var(--q) * 4.4);
  height: calc(var(--q) * 0.96);
  margin: calc(var(--q) * 0.34) auto calc(var(--q) * 0.16);
  font-size: calc(var(--q) * 0.36);
  font-weight: 900;
  text-align: center;
}

/* --- Result -------------------------------------------------------------- */

@keyframes mix {
  from {
    opacity: 0.7;
    transform: translateY(0) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(calc(var(--q) * -0.3)) scale(1.1);
  }
}

#article-top-desc .mixing{
  padding: calc(var(--q) * 0.7) 0 calc(var(--q) * 0.8);
  text-align: center;
}

#article-top-desc .mixing__bubble{
  display: inline-block;
  width: calc(var(--q) * 0.9);
  height: calc(var(--q) * 0.9);
  margin: 0 calc(var(--q) * 0.12);
  animation: mix 0.6s ease-in-out infinite alternate;
}

#article-top-desc .mixing__bubble:nth-child(2){
  animation-delay: 0.15s;
}

#article-top-desc .mixing__bubble:nth-child(3){
  animation-delay: 0.3s;
}

#article-top-desc .mixing__bubble:nth-child(4){
  animation-delay: 0.45s;
}

#article-top-desc .mixing__text{
  margin-top: calc(var(--q) * 0.5);
  font-size: calc(var(--q) * 0.4);
  font-weight: 900;
}

#article-top-desc .result{
  position: relative;
}

#article-top-desc .result__top{
  display: flex;
  align-items: center;
  padding-right: calc(var(--q) * 0.7);
}

#article-top-desc .result__bubble{
  flex: none;
  width: calc(var(--q) * 3.6);
  height: calc(var(--q) * 3.6);
  animation: float-a 5s ease-in-out infinite;
  will-change: transform;
}

#article-top-desc.is-portrait .result__bubble {
  width: calc(var(--q) * 4.2);
  height: calc(var(--q) * 4.2);
}

#article-top-desc .result__char{
  position: absolute;
  top: 9%;
  left: 11%;
  width: 78%;
  height: 78%;
}

#article-top-desc .result__info{
  flex: 1 1 0;
  min-width: 0;
  margin-left: calc(var(--q) * 0.4);
}

#article-top-desc .result__kicker{
  font-size: calc(var(--q) * 0.2);
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #b9c8ce;
}

#article-top-desc .result__name{
  margin: calc(var(--q) * 0.04) 0 calc(var(--q) * 0.14);
  font-size: calc(var(--q) * 0.62);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

#article-top-desc .result__name small{
  font-size: calc(var(--q) * 0.3);
}

#article-top-desc .result__info .rhyme{
  font-size: calc(var(--q) * 0.24);
}

#article-top-desc .result__actions{
  display: flex;
  margin-top: calc(var(--q) * 0.24);
}

#article-top-desc .result__actions .pill{
  margin-right: calc(var(--q) * 0.16);
}

@media (max-width: 767px) {
  #article-top-desc .result__actions {
    margin-top: calc(var(--q) * 0.14);
  }

  #article-top-desc .result__actions .pill {
    height: calc(var(--q) * 0.64);
    margin-right: calc(var(--q) * 0.1);
    padding: 0 calc(var(--q) * 0.2);
    font-size: calc(var(--q) * 0.2);
    letter-spacing: 0.03em;
  }
}

#article-top-desc.is-portrait .result__actions {
  margin-top: calc(var(--q) * 0.14);
}

#article-top-desc.is-portrait .result__actions .pill {
  height: calc(var(--q) * 0.64);
  margin-right: calc(var(--q) * 0.1);
  padding: 0 calc(var(--q) * 0.2);
  font-size: calc(var(--q) * 0.2);
  letter-spacing: 0.03em;
}

#article-top-desc .panel {
  max-height: calc(100% - calc(var(--q) * 1.55));
}

#article-top-desc a.meet-friends {
  position: absolute;
  z-index: 6;
  left: 50%;
  display: inline-block;
  height: calc(var(--q) * 0.8);
  padding: 0 calc(var(--q) * 0.38);
  border: calc(var(--q) * 0.02) solid rgba(255, 255, 255, 0.45);
  border-radius: calc(var(--q) * 0.12);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    0 calc(var(--q) * 0.04) calc(var(--q) * 0.14) rgba(0, 0, 0, 0.25),
    inset 0 calc(var(--q) * 0.02) 0 rgba(255, 255, 255, 0.3);
  color: #fff !important;
  font-family: var(--sans);
  font-size: calc(var(--q) * 0.24);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: calc(var(--q) * 0.76);
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  transition:
    transform 0.1s ease-out,
    box-shadow 0.1s ease-out;
}

#article-top-desc a.meet-friends:active {
  transform: translateX(-50%) translateY(calc(var(--q) * 0.03));
  box-shadow:
    0 calc(var(--q) * 0.01) calc(var(--q) * 0.05) rgba(0, 0, 0, 0.25),
    inset 0 calc(var(--q) * 0.02) 0 rgba(255, 255, 255, 0.2);
}

#article-top-desc .half{
  display: flex;
  align-items: center;
  margin-top: calc(var(--q) * 0.28);
  padding: calc(var(--q) * 0.1) calc(var(--q) * 0.24) calc(var(--q) * 0.1) calc(var(--q) * 0.12);
  border: calc(var(--q) * 0.015) solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--q) * 0.24);
  background: rgba(255, 255, 255, 0.07);
}

#article-top-desc .half__bubble{
  flex: none;
  width: calc(var(--q) * 1.25);
  height: calc(var(--q) * 1.25);
}

#article-top-desc .half__char{
  position: absolute;
  top: 8%;
  left: 10%;
  width: 80%;
  height: 80%;
}

#article-top-desc .half__text{
  flex: 1 1 0;
  min-width: 0;
  margin-left: calc(var(--q) * 0.22);
}

#article-top-desc .half__kicker{
  font-size: calc(var(--q) * 0.16);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #b9c8ce;
}

#article-top-desc .half__name{
  margin-top: calc(var(--q) * 0.04);
  font-size: calc(var(--q) * 0.36);
  font-weight: 900;
  text-transform: uppercase;
}

#article-top-desc .half__name small{
  font-size: calc(var(--q) * 0.2);
}

#article-top-desc .half__line{
  margin-top: calc(var(--q) * 0.06);
  font-size: calc(var(--q) * 0.21);
  color: #f5efe2;
}

#article-top-desc .result .products{
  margin-top: calc(var(--q) * 0.26);
}

#article-top-desc.lite .intro__bubble,
#article-top-desc.lite .answer,
#article-top-desc.lite .result__bubble,
#article-top-desc.lite .quiz__start::after,
#article-top-desc.lite .mixing__bubble,
#article-top-desc.lite .char-light {
  animation: none !important;
}