.stage {
  --u: min(100vw / 1920, 100vh / 1080);
  --frame-w: calc(1486 * var(--u));
  --frame-h: calc(680 * var(--u));
  --frame-gap: calc(70 * var(--u));
  --frame-r: calc(80 * var(--u));
  --hole-w: calc(46.5 * var(--u));
  --hole-h: calc(73 * var(--u));
  --holes-per-frame: 16;
  --hole-pitch: calc((var(--frame-w) + var(--frame-gap)) / var(--holes-per-frame));
  --hole-gap: calc(var(--hole-pitch) - var(--hole-w));
  --hole-r: calc(13.5 * var(--u));
  --band-pad: calc(30 * var(--u));
  --band-gap: calc(47 * var(--u));
  --pad-y: calc(50 * var(--u));
  --pad-x: calc(100 * var(--u));
  --line: max(2px, calc(4 * var(--u)));
  --fs-heading: max(14px, calc(36 * var(--u)));
  --fs-option: max(11px, calc(22 * var(--u)));
  --fs-label: max(10px, calc(18 * var(--u)));
  --fs-input: max(15px, calc(40 * var(--u)));
  --fs-credit: max(8px, calc(15 * var(--u)));
  --fs-credit-sm: max(6px, calc(10 * var(--u)));
  --fs-arch-xl: max(32px, calc(84 * var(--u)));
  --fs-arch-sm: max(13px, calc(32 * var(--u)));
  --fs-pct-xl: max(24px, calc(56 * var(--u)));
  --icon-xl: calc(200 * var(--u));
  --icon-sm: calc(100 * var(--u));
  --nav-size: max(44px, calc(128 * var(--u)));
}
@supports (height: 100dvh) {
  .stage { --u: min(100vw / 1920, 100dvh / 1080); }
}
*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html,
body {
  margin: 0;
  height: 100%;
  background: var(--blue);
}
body {
  font-family: var(--bluecaster-font);
  color: var(--yellow);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body {
  cursor: url("/resources/cursor.png") 0 0, auto !important;
}
body:active, a, button, input {
  cursor: url("/resources/click.png") 0 0, pointer !important;
  outline: none !important;
}
button,
input { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip;
  background: var(--blue);
}
.track {
  --slide-offset: 2;
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  height: 100%;
  padding-block: calc(var(--band-pad) + var(--hole-h) + var(--band-gap));
  transform: translateX(calc(var(--frame-w) / -2 - (var(--i) + var(--slide-offset)) * (var(--frame-w) + var(--frame-gap))));
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.track.is-instant,
.track.is-instant .frame__inner { transition: none !important; }
.holes {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  gap: var(--hole-gap);
  height: var(--hole-h);
  padding-left: calc(var(--frame-w) / 2 + var(--hole-pitch) / 2 - var(--hole-w) / 2);
  overflow: hidden;
}
.holes--top { top: var(--band-pad); }
.holes--bottom { bottom: var(--band-pad); }
.holes span {
  flex: 0 0 var(--hole-w);
  height: 100%;
  border-radius: var(--hole-r);
  background: var(--purple);
}
.frames {
  display: flex;
  gap: var(--frame-gap);
  height: 100%;
}
.frame {
  position: relative;
  flex: 0 0 var(--frame-w);
  width: var(--frame-w);
  height: 100%;
  border-radius: var(--frame-r);
  background: linear-gradient(158deg, var(--purple) 0%, var(--blue-gradient) 40%, var(--dark-blue-gradient) 82%);
  overflow: hidden;
}
.frame__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad-y) var(--pad-x);
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  scrollbar-width: none;
}
.frame__inner::-webkit-scrollbar { display: none; }
.frame.is-active .frame__inner {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease 0.55s, visibility 0s linear 0s;
}
.frame__content {
  margin-block: auto;
  width: 100%;
  text-align: center;
}
.brand {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--blue);
  opacity: 1;
  transition: opacity 0.5s ease 0.4s;
}
.brand img {
  display: block;
  height: auto;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.brand img:hover {
  transform: translateX(2px) translateY(-2px);
  filter: brightness(2) drop-shadow(-2px 2px 0px var(--red));
}
.stage[data-view="landing"] .brand--logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.brand--bca,
.brand--beep {
  animation: fade-in 0.8s ease 0.3s backwards;
}
.brand--beep { animation-delay: 0.45s; }
.brand--logo {
  top: 0;
  left: calc(50% - 2 * var(--hole-pitch));
  width: calc(4 * var(--hole-pitch));
  height: calc(var(--band-pad) * 2 + var(--hole-h));
}
.brand--logo img { width: calc(300 * var(--u)); }
.brand--bca,
.brand--beep {
  bottom: 0;
  width: calc(2 * var(--hole-pitch));
  height: calc(var(--band-pad) * 2 + var(--hole-h));
}
.brand--bca { left: calc(50% - 8 * var(--hole-pitch)); }
.brand--bca img { width: calc(150 * var(--u)); }
.brand--beep { left: calc(50% + 6 * var(--hole-pitch)); }
.brand--beep img { width: calc(100 * var(--u)); }
.nav {
  position: absolute;
  z-index: 3;
  top: calc(50% - var(--nav-size) / 2);
  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;
  display: grid;
  place-items: center;
  border: var(--line) solid var(--yellow);
  border-radius: 50%;
  background: linear-gradient(160deg, var(--green) 12%, var(--purple) 88%);
  box-shadow: calc(-6 * var(--u)) calc(6 * var(--u)) 0 var(--red);
  cursor: pointer;
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease;
}
.nav--prev { left: calc(50% - 847 * var(--u)); }
.nav--next { left: calc(50% + 718 * var(--u)); }
.nav svg {
  width: 46%;
  height: 46%;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgb(0 40 90 / 0.25));
}
.nav path {
  fill: var(--yellow);
  stroke: var(--yellow);
  stroke-width: 12;
  stroke-linejoin: round;
}
.nav:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 0 0 var(--red);
}
.nav:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: 0 0 0 var(--red);
}
.nav:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.nav:disabled {
  opacity: 0;
  cursor: not-allowed;
  filter: saturate(0.6);
}
.nav.is-busy {
  opacity: 1;
  animation: nav-pulse 1s ease-in-out infinite;
}
@keyframes nav-pulse {
  50% { transform: scale(0.96); 
        box-shadow: 0 0 0 var(--red); }
}
.landing__logo {
  display: block;
  width: calc(668 * var(--u));
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.landing__form {
  position: relative;
  margin: calc(60 * var(--u)) auto 0;
  width: calc(824 * var(--u));
  max-width: 100%;
}
.email-field {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  padding-bottom: calc(6 * var(--u));
  border-bottom: calc(var(--line) * 1.25) solid var(--yellow);
  font-size: var(--fs-input);
  font-weight: 600;
  text-transform: uppercase;
  cursor: text;
}
.email-field__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--yellow);
  font-weight: 600;
  text-transform: uppercase;
  caret-color: var(--yellow);
}
.email-field__input::placeholder {
  color: #9cc9b8;
  opacity: 1;
}
.email-field:focus-within {
  border-bottom-color: #fff9b5;
}
.email-field__domain {
  flex: none;
  color: var(--yellow);
}
.btn-start {
  display: block;
  margin: calc(26 * var(--u)) auto 0;
  min-width: calc(200 * var(--u));
  height: max(40px, calc(82 * var(--u)));
  padding: 0 calc(50 * var(--u));
  border: var(--line) solid var(--yellow);
  border-radius: calc(16 * var(--u));
  background: linear-gradient(180deg, var(--green) 0%, var(--purple) 100%);
  color: var(--yellow);
  font-size: var(--fs-input);
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: 0 calc(2 * var(--u)) calc(25 * var(--u)) var(--blue);
  cursor: pointer;
  box-shadow: -3px 4px 0px var(--red);
  transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.2s ease;
}
.btn-start:hover:not(:disabled) {
  transform: translateX(-3px) translateY(3px);
  box-shadow: 0 0 0 var(--red);
}
.btn-start:active:not(:disabled) { transform: translateY(1px); }
.btn-start:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.btn-start:disabled {
  cursor: progress;
  animation: nav-pulse 1s ease-in-out infinite;
}
.landing__message {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: calc(8 * var(--u)) 0 0;
  min-height: 1.3em;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--green);
}
.landing__message.is-error { color: var(--red); }
.credits {
  margin-top: calc(50 * var(--u));
  font-size: var(--fs-credit);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
.credits p { margin: 0; }
.credits small {
  font-size: var(--fs-credit-sm);
  font-weight: 600;
  margin-inline: 0.35em;
}
.question__title {
  max-width: calc(1290 * var(--u));
  margin: 0 auto calc(34 * var(--u));
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.options {
  display: grid;
  gap: calc(16 * var(--u));
  max-width: calc(1272 * var(--u));
  margin: 0 auto;
}
.option {
  min-height: calc(76 * var(--u));
  padding: calc(10 * var(--u)) calc(30 * var(--u));
  border: var(--line) solid var(--yellow);
  border-radius: calc(28 * var(--u));
  background: transparent;
  color: var(--yellow);
  font-size: var(--fs-option);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.option:hover {
  background-color: rgba(181, 229, 17, .15);
}
.option:active { transform: scale(0.99); }
.option:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.option.is-selected {
  background: linear-gradient(90deg, var(--green) 0%, var(--purple) 100%);
  color: var(--blue);
}
.question__status {
  min-height: 1.3em;
  margin: calc(14 * var(--u)) 0 0;
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
}
.question__status:empty { display: none; }
.result__lead {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1.25;
}
.result__icon {
  display: block;
  width: auto;
  height: var(--icon-xl);
  max-width: 100%;
  margin: calc(26 * var(--u)) auto 0;
}
.result__title {
  margin: calc(24 * var(--u)) 0 0;
  font-family: var(--archetype-font);
  font-size: var(--fs-arch-xl);
  font-weight: normal;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: -2.5px 2.5px 0 var(--red);
}
.result__strength {
  margin-top: calc(24 * var(--u));
}
.label {
  display: block;
  color: var(--green);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}
.result__strength p,
.detail p {
  margin: calc(2 * var(--u)) 0 0;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
}
.result__details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(44 * var(--u));
  max-width: calc(1340 * var(--u));
  margin: calc(40 * var(--u)) auto 0;
  text-align: left;
}
.score__lead {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 600;
}
.score__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: calc(30 * var(--u));
  margin-top: calc(70 * var(--u));
}
.score__item {
  justify-self: center;
  width: max-content;
  padding-top: calc(50 * var(--u));
  font-family: var(--archetype-font);
}
.score__item img {
  display: block;
  width: auto;
  height: var(--icon-sm);
  margin: 0 auto;
}
.score__name {
  display: block;
  margin-top: calc(16 * var(--u));
  font-size: var(--fs-arch-sm);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: -2.5px 2.5px 0 var(--red);
}
.score__pct {
  display: block;
  margin-top: calc(6 * var(--u));
  color: var(--green);
  font-size: var(--fs-arch-sm);
  line-height: 1;
}
.score__item--top {
  padding-top: 0;
  margin-inline: calc(10 * var(--u));
}
.score__item--top img { height: var(--icon-xl); }
.score__item--top .score__name {
  margin-top: calc(32 * var(--u));
  font-size: var(--fs-arch-xl);
}
.score__item--top .score__pct {
  margin-top: calc(14 * var(--u));
  font-size: var(--fs-pct-xl);
}
.score__time {
  margin: calc(70 * var(--u)) 0 0;
  font-size: max(11px, calc(22 * var(--u)));
  font-weight: 500;
}
@media (orientation: landscape) and (max-height: 540px) {
  .stage {
    --fs-heading: max(12px, calc(36 * var(--u)));
    --fs-option: max(10px, calc(22 * var(--u)));
    --fs-label: max(9px, calc(18 * var(--u)));
    --fs-input: max(13px, calc(40 * var(--u)));
    --fs-credit: max(7px, calc(15 * var(--u)));
    --fs-credit-sm: max(5.5px, calc(10 * var(--u)));
    --fs-arch-sm: max(10px, calc(32 * var(--u)));
    --nav-size: max(40px, calc(128 * var(--u)));
  }
}
@media (orientation: portrait) {
  .stage {
    --frame-w: 86vw;
    --frame-gap: 3.5vw;
    --frame-r: 7vw;
    --hole-w: 3.9vw;
    --hole-h: 6vw;
    --holes-per-frame: 11;
    --hole-r: 1.125vw;
    --band-pad: 2.25vw;
    --band-gap: 4.5vw;
    --band: calc(var(--band-pad) + var(--hole-h) + var(--band-gap));
    --pad-y: 7vw;
    --pad-x: 6vw;
    --line: 2px;
    --fs-heading: clamp(16px, 4.6vw, 26px);
    --fs-option: clamp(12.5px, 3.5vw, 18px);
    --fs-label: clamp(11px, 3.1vw, 15px);
    --fs-input: clamp(15px, 4.6vw, 26px);
    --fs-credit: clamp(8.5px, 2.4vw, 13px);
    --fs-credit-sm: clamp(6.5px, 1.75vw, 9.5px);
    --fs-arch-xl: clamp(34px, 11vw, 64px);
    --fs-arch-sm: clamp(15px, 4.6vw, 26px);
    --fs-pct-xl: clamp(26px, 8vw, 44px);
    --icon-xl: clamp(110px, 32vw, 190px);
    --icon-sm: clamp(52px, 15vw, 90px);
    --nav-size: clamp(44px, 11.5vw, 60px);
  }
  .track {
    top: 0;
    height: 100%;
    padding-block: var(--band) calc(var(--band) + env(safe-area-inset-bottom, 0px));
  }
  .holes--bottom { bottom: calc(var(--band-pad) + env(safe-area-inset-bottom, 0px)); }
  .brand--logo img { width: 25vw; }
  .brand--bca,
  .brand--beep { bottom: env(safe-area-inset-bottom, 0px); }
  .brand--bca,
  .brand--beep { width: calc(3 * var(--hole-pitch)); }
  .brand--bca { left: calc(50% - 6 * var(--hole-pitch)); }
  .brand--bca img { width: 12vw; }
  .brand--beep { left: calc(50% + 3 * var(--hole-pitch)); }
  .brand--beep img { width: 8vw; }
  .nav {
    top: auto;
    bottom: max(calc(0.5vw + env(safe-area-inset-bottom, 0px)), calc((var(--band-pad) + var(--hole-h) / 2 - var(--nav-size) / 2 + env(safe-area-inset-bottom, 0px))));
    box-shadow: 0 3px 10px rgb(0 30 70 / 0.35);
  }
  .nav--prev { left: calc(50% - var(--nav-size) - 2.5vw); }
  .nav--next { left: calc(50% + 2.5vw); }
  .nav--prev[hidden] + .nav--next,
  .nav--prev:has(+ .nav--next[hidden]) { left: calc(50% - var(--nav-size) / 2); }
  .landing__logo { width: 70vw; }
  .landing__form { margin-top: 9vw; width: 100%; }
  .email-field { gap: 2vw; padding-bottom: 1.5vw; border-bottom-width: 3px; }
  .btn-start {
    margin-top: 5vw;
    min-width: 34vw;
    height: 12vw;
    max-height: 60px;
    padding-inline: 6vw;
    border-radius: 3vw;
  }
  .landing__message { margin-top: 2vw; }
  .credits { margin-top: 15vw; }
  .question__title { margin-bottom: 5vw; }
  .options { gap: 2.4vw; }
  .option {
    min-height: 0;
    padding: 2.6vw 4vw;
    border-radius: 4.5vw;
  }
  .question__status { margin-top: 3vw; }
  .result__icon { margin-top: 5vw; }
  .result__title { margin-top: 5vw; }
  .result__strength { margin-top: 5vw; }
  .result__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5vw 5vw;
    margin-top: 7vw;
  }
  .score__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6vw 4vw;
    margin-top: 6vw;
  }
  .score__item {
    flex: 0 0 calc(50% - 2vw);
    width: auto;
    min-width: 0;
    padding-top: 0;
  }
  .score__item--top {
    order: -1;
    flex-basis: 100%;
    margin-inline: 0;
  }
  .score__name { margin-top: 2vw; }
  .score__pct { margin-top: 1vw; }
  .score__item--top .score__name { margin-top: 4vw; }
  .score__item--top .score__pct { margin-top: 2vw; }
  .score__time { margin-top: 7vw; font-size: var(--fs-label); }
}
.stage {
  --enter-delay: 0.6s;
  --enter-step: 70ms;
}
.stage:not(.has-moved) { --enter-delay: 0.15s; }
.frame.is-active .anim {
  animation: rise-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--enter-delay) + var(--stagger, 0) * var(--enter-step));
}
.frame.is-active .btn-start.anim:disabled {
  animation: nav-pulse 1s ease-in-out infinite;
}
.credits.is-typed {
  --type-start: 0.5s;
  --type-step: 14ms;
}
.frame.is-active .type-char {
  animation: type-in 0.5s linear backwards;
  animation-delay: calc(var(--enter-delay) + var(--type-start) + var(--c, 0) * var(--type-step));
}
@keyframes type-in {
  from {opacity: 0}
}
.frame.is-active .anim--pop {
  animation-name: pop-out;
  animation-duration: 0.75s;
  animation-timing-function: ease-out;
}
.frame.is-active .anim--fade {
  animation-name: fade-in;
  animation-duration: 0.7s;
  animation-timing-function: ease;
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes pop-out {
  0% { opacity: 0; transform: scale(0.4); }
  55% { opacity: 1; transform: scale(1.14); }
  75% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
}
.nav { animation: fade-in 0.45s ease 0.2s backwards; }
.frame.is-active .score__item img {
  transform-origin: 50% 85%;
  animation: wiggle var(--wiggle-dur, 3s) ease-in-out var(--wiggle-delay, 1.5s) infinite;
}
@keyframes wiggle {
  0%, 18%, 100% { transform: rotate(0deg); }
  3% { transform: rotate(-8deg); }
  6.5% { transform: rotate(7deg); }
  10% { transform: rotate(-5deg); }
  13.5% { transform: rotate(3deg); }
  16% { transform: rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .track { transition-duration: 0.01s; }
  .frame__inner,
  .frame.is-active .frame__inner { transition-delay: 0s; }
  .nav.is-busy,
  .btn-start:disabled { animation: none; }
  .brand--bca,
  .brand--beep,
  .nav,
  .frame.is-active .btn-start.anim:disabled,
  .frame.is-active .anim,
  .frame.is-active .type-char,
  .frame.is-active .score__item img { animation: none; }
}