* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: #090919;
  color: var(--text, #f8f3ff);
  font-family: var(--font, Arial, Helvetica, sans-serif);
  display: grid;
  place-items: center;
  background-image: radial-gradient(ellipse at center, #292141, #090919 70%);
}
[hidden] {
  display: none !important;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
button:disabled {
  cursor: default;
}
#cabinet {
  position: relative;
  isolation: isolate;
  aspect-ratio: 480/854;
  height: 100dvh;
  max-width: 100vw;
  max-height: 177.9167vw;
  overflow: hidden;
  container-type: inline-size;
  background: var(--background, #141127);
  box-shadow: 0 0 100px #7452b922;
  --accent: #79f6dc;
  --negative: #ffa2c8;
  --muted: #c4b8d9;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.cabinet-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-inline: 2px solid #9a71ce;
  box-shadow:
    inset 5px 0 #171432,
    inset -5px 0 #171432,
    inset 7px 0 #51367d,
    inset -7px 0 #51367d;
}
.cabinet-frame:after {
  content: "";
  position: absolute;
  inset: 13% 5px 8%;
  border-inline: 1px solid #75e3e26b;
}
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4cqw;
  padding: 5.5cqw 6cqw 4cqw;
  background: linear-gradient(#11102bf2, #14113000);
  z-index: 5;
}
.time-group {
  flex: 1;
}
.micro {
  font-size: 2cqw;
  font-weight: 700;
  letter-spacing: 0.13em;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #d4cfe6;
}
.micro b {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.time-track {
  height: 1.4cqw;
  background: #ffffff1c;
  border-radius: 20px;
  margin-top: 2cqw;
  overflow: hidden;
}
#time-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 20px;
  box-shadow: 0 0 10px var(--accent);
}
#score {
  display: block;
  font-size: 5cqw;
  margin-top: 0.8cqw;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.icon-button {
  background: #ffffff0b;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  width: 9cqw;
  height: 9cqw;
  font-size: 3cqw;
}
#stage-label {
  position: absolute;
  top: 21cqw;
  left: 7cqw;
  pointer-events: none;
  z-index: 4;
}
#stage-counter {
  display: block;
  font-size: 2cqw;
  letter-spacing: 0.14em;
  color: var(--muted);
}
#stage-name {
  display: block;
  font-size: 5.6cqw;
  letter-spacing: -0.04em;
  margin-top: 1.5cqw;
}
.touch-glow {
  position: absolute;
  inset-block: 0;
  width: 22%;
  pointer-events: none;
  opacity: 0;
}
.touch-glow.left {
  left: 0;
  background: linear-gradient(90deg, #68f8dc25, transparent);
}
.touch-glow.right {
  right: 0;
  background: linear-gradient(-90deg, #68f8dc25, transparent);
}
#play-footer {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  min-height: 11cqw;
  padding: 3.5cqw 6cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #101027eb;
  border-top: 1px solid #b29fea25;
  z-index: 5;
}
#play-footer > span {
  font-size: 1.9cqw;
  letter-spacing: 0.13em;
  color: #c4b9d9;
}
.chapter-dots {
  display: flex;
  gap: 1.5cqw;
}
.chapter-dots i {
  height: 1.4cqw;
  width: 1.4cqw;
  background: #ffffff29;
  border-radius: 50%;
}
.chapter-dots i.active {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: radial-gradient(ellipse at 60% 25%, #45316be6, #141128f5 85%);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8cqw;
}
.screen-content {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #7c669b transparent;
  padding: 1cqw;
}
.eyebrow {
  display: block;
  font-size: 2cqw;
  font-weight: 700;
  letter-spacing: 0.19em;
  line-height: 1.5;
  color: var(--accent);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h2 {
  font-size: 8cqw;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.06;
  margin: 3cqw 0 4cqw;
}
p {
  font-size: 3.2cqw;
  line-height: 1.55;
  color: var(--muted);
}
.lead {
  margin-bottom: 5cqw;
}
.primary {
  display: block;
  width: 100%;
  min-height: 12cqw;
  padding: 3cqw 5cqw;
  border: 0;
  border-bottom: 4px solid #223c4599;
  border-radius: 3cqw;
  background: var(--accent);
  color: #142735;
  font-size: 2.9cqw;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 0 7cqw #79f6dc10;
  transition: filter 0.15s;
}
.primary:hover {
  filter: brightness(1.06);
}
.primary:active {
  filter: brightness(0.87);
}
.secondary {
  display: block;
  width: 100%;
  min-height: 10cqw;
  margin-top: 3cqw;
  background: #ffffff08;
  border: 1px solid #c9b1e340;
  border-radius: 3cqw;
  font-size: 2.7cqw;
}
.text-button {
  display: block;
  margin: 2cqw auto 0;
  padding: 2.5cqw 5cqw;
  background: none;
  border: 0;
  font-size: 2.1cqw;
  letter-spacing: 0.09em;
  color: #b7a6cf;
}
.title-content {
  text-align: center;
}
.title-screen {
  padding: 7cqw 9cqw;
}
.title-screen h1 {
  font-size: 18cqw;
  line-height: 0.9;
  font-style: italic;
  letter-spacing: -0.075em;
  transform: rotate(-4deg);
  margin: 5.5cqw 0 0;
  text-shadow:
    0 1cqw 0 #634893,
    0 1.5cqw 0 #25173d;
}
.title-screen h1 span {
  display: block;
}
.title-screen h1 small {
  display: block;
  font-size: 8cqw;
  letter-spacing: -0.04em;
  color: #c29bf8;
  margin-top: 2.8cqw;
}
.brand-image {
  max-width: 100%;
  max-height: 30cqw;
  object-fit: contain;
  margin-top: 5cqw;
}
.hero-art {
  position: relative;
  height: 46cqw;
  margin: 3cqw 0 1cqw;
}
.sprite-display {
  background-repeat: no-repeat;
  image-rendering: auto;
  filter: drop-shadow(0 2cqw 2cqw #0b07194d);
}
.hero-person {
  position: absolute;
  width: 19.2cqw;
  height: 24cqw;
  left: calc(50% - 9.6cqw);
  top: 8cqw;
}
.hero-platform {
  position: absolute;
  width: 44cqw;
  height: 6.6cqw;
  left: calc(50% - 22cqw);
  top: 33cqw;
}
.orbit {
  position: absolute;
  inset: 6cqw 12% 2cqw;
  border: 1px solid #b38aea3b;
  border-radius: 50%;
  transform: rotate(-20deg);
}
.orbit.two {
  inset: 0 24% -1cqw;
  transform: rotate(35deg);
}
.hero-icon {
  position: absolute;
  width: 7.5cqw;
  filter: drop-shadow(0 0 3cqw #a2d4df35);
}
.hero-icon.shield {
  left: 9%;
  top: 10cqw;
  transform: rotate(-14deg);
}
.hero-icon.diamond {
  right: 11%;
  top: 29cqw;
  transform: rotate(12deg);
}
.spark {
  position: absolute;
  right: 20%;
  top: 4cqw;
  color: #efc87c;
  font-size: 5cqw;
}
.title-screen h2 {
  font-size: 6.6cqw;
  margin-bottom: 3cqw;
}
.title-screen p {
  font-size: 3cqw;
  margin-bottom: 5cqw;
}
.title-meta {
  display: block;
  font-size: 2cqw;
  letter-spacing: 0.1em;
  margin-top: 4cqw;
  color: #b6a8cc;
}
.framework-list {
  margin-bottom: 5cqw;
  display: grid;
  gap: 2cqw;
}
.framework-item {
  display: grid;
  grid-template-columns: 9cqw 1fr;
  gap: 3cqw;
  align-items: center;
  padding: 3cqw;
  background: #ffffff06;
  border: 1px solid #c9b5e420;
  border-radius: 3cqw;
}
.framework-item img {
  width: 8cqw;
  height: 8cqw;
}
.framework-item h3 {
  font-size: 3.3cqw;
  letter-spacing: -0.02em;
  margin-bottom: 1cqw;
}
.framework-item h3 span {
  color: var(--accent);
  margin-right: 1cqw;
}
.framework-item p {
  font-size: 2.6cqw;
  line-height: 1.35;
}
.pickup-legend {
  display: flex;
  justify-content: space-between;
  gap: 3cqw;
  font-size: 2.3cqw;
  margin: 3cqw 0 5cqw;
  color: var(--accent);
}
.pickup-legend span:last-child {
  color: var(--negative);
}
.control-demo {
  height: 29cqw;
  position: relative;
  overflow: hidden;
  border: 1px solid #b3a0d535;
  border-radius: 4cqw;
  margin: 5cqw 0;
}
.demo-half {
  position: absolute;
  inset-block: 0;
  width: 50%;
}
.left-half {
  left: 0;
  background: linear-gradient(90deg, #79f6dc12, transparent);
  border-right: 1px dashed #ac91d73b;
}
.right-half {
  right: 0;
  background: linear-gradient(-90deg, #79f6dc12, transparent);
}
.demo-person {
  position: absolute;
  left: calc(50% - 6.4cqw);
  top: 2cqw;
  width: 12.8cqw;
  height: 16cqw;
}
.control-demo > img {
  position: absolute;
  width: 26cqw;
  left: calc(50% - 13cqw);
  bottom: 5cqw;
}
.instruction {
  display: grid;
  grid-template-columns: 5cqw 1fr;
  gap: 2.5cqw;
  margin: 4cqw 0;
}
.instruction > span {
  font-size: 2.3cqw;
  color: var(--accent);
  padding-top: 1cqw;
}
.instruction h3 {
  font-size: 3.4cqw;
  margin-bottom: 1.3cqw;
  letter-spacing: -0.025em;
}
.instruction p {
  font-size: 2.9cqw;
}
#instruction-list {
  margin-bottom: 6cqw;
}
.intro-content {
  text-align: center;
}
.age-medallion {
  height: 52cqw;
  width: 52cqw;
  border: 1px solid #c7a8f034;
  border-radius: 50%;
  margin: 7cqw auto;
  position: relative;
  background: radial-gradient(#a789de20, transparent 68%);
}
.intro-person {
  position: absolute;
  width: 28cqw;
  height: 35cqw;
  left: 12cqw;
  top: 4cqw;
}
.age-medallion > span {
  position: absolute;
  bottom: 6cqw;
  left: 0;
  right: 0;
  font-size: 2.2cqw;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #dfd4ef;
}
.intro-content h2 {
  font-size: 11cqw;
}
.intro-content p {
  font-size: 3.4cqw;
  margin: 4cqw 0;
}
.duration-pill {
  display: inline-block;
  border: 1px solid #c6abd53d;
  border-radius: 30px;
  font-size: 2.3cqw;
  letter-spacing: 0.12em;
  padding: 2.5cqw 4cqw;
  margin: 1cqw 0 7cqw;
}
.countdown-screen {
  background: #14112755;
  backdrop-filter: blur(2px);
  pointer-events: none;
}
#countdown-number {
  font-size: 36cqw;
  font-weight: 800;
  letter-spacing: -0.08em;
  color: var(--accent);
  text-shadow: 0 0 50px #85f6e244;
}
.quiz-screen {
  background: #10112cd9;
}
.quiz-card {
  background: linear-gradient(150deg, #302752, #171b41);
  border: 1px solid #b3a4de55;
  border-radius: 5cqw;
  padding: 6cqw;
  box-shadow: 0 5cqw 20cqw #08061488;
}
.quiz-card h2 {
  font-size: 7cqw;
}
.quiz-stage {
  display: block;
  font-size: 2cqw;
  color: #b3a4d0;
  letter-spacing: 0.12em;
  margin-bottom: 5cqw;
}
#quiz-question {
  font-size: 4.2cqw;
  line-height: 1.38;
  color: #eee7f6;
  margin: 0 0 5cqw;
}
.answer {
  display: grid;
  grid-template-columns: 6cqw 1fr;
  gap: 3cqw;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 4cqw 3cqw;
  background: #ffffff08;
  border: 1px solid #c6b3de40;
  border-radius: 3cqw;
  margin: 3cqw 0;
  min-height: 15cqw;
  font-size: 3.2cqw;
  line-height: 1.45;
}
.answer .answer-letter {
  display: grid;
  place-items: center;
  border: 1px solid #ffffff38;
  border-radius: 50%;
  width: 6cqw;
  height: 6cqw;
  color: #ccbde2;
  font-size: 2.5cqw;
}
.answer:hover:not(:disabled) {
  background: #ffffff14;
}
.answer.correct {
  border-color: var(--accent);
  background: #75e2c917;
}
.answer.correct .answer-letter {
  background: var(--accent);
  color: #163c37;
  border: 0;
}
.answer.incorrect {
  border-color: var(--negative);
  background: #f491b412;
}
.answer.incorrect .answer-letter {
  background: var(--negative);
  color: #511e37;
  border: 0;
}
.answer-badge {
  display: block;
  font-size: 2cqw;
  color: var(--accent);
  margin-top: 1.5cqw;
  font-weight: 700;
}
.incorrect .answer-badge {
  color: var(--negative);
}
.quiz-help {
  font-size: 2.4cqw;
  text-align: center;
  margin-top: 5cqw;
}
#quiz-bonus {
  display: block;
  font-size: 2.3cqw;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 5cqw 0 3cqw;
}
.rocket-screen {
  overflow: hidden;
  text-align: center;
  background: radial-gradient(ellipse at 50% 55%, #4d337b, #151229 80%);
}
.rocket-screen > .eyebrow {
  z-index: 1;
  margin-top: 1cqw;
}
.rocket-screen h2 {
  font-size: 10cqw;
  z-index: 1;
}
.rocket-screen #rocket {
  width: 36cqw;
  height: 60cqw;
  object-fit: contain;
  margin: 10cqw 0;
  z-index: 1;
  will-change: transform;
}
.rocket-screen p {
  max-width: 75%;
  font-size: 3cqw;
  z-index: 1;
}
.rocket-trails {
  position: absolute;
  inset: -100% 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 15%,
    #b989ef17 15.1% 15.3%,
    transparent 15.5% 26%
  );
  opacity: 0.6;
}
.pause-card {
  text-align: center;
  background: #29203fed;
  border: 1px solid #b9a0d540;
  border-radius: 5cqw;
  padding: 8cqw;
}
.pause-symbol {
  display: block;
  font-size: 8cqw;
  color: var(--accent);
  margin-bottom: 5cqw;
}
.pause-card p {
  margin-bottom: 7cqw;
}
.results-content {
  text-align: center;
}
.results-content h2 {
  font-size: 8cqw;
}
.score-caption {
  display: block;
  margin-top: 5cqw;
  font-size: 2.1cqw;
  letter-spacing: 0.14em;
  color: #b6a8cb;
}
#final-score {
  font-size: 20cqw;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1.15;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.result-ages {
  display: flex;
  justify-content: center;
  gap: 6cqw;
  margin: 2cqw 0 4cqw;
}
.result-ages > div {
  width: 10cqw;
  height: 12.5cqw;
}
.round-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5cqw 0;
  border-bottom: 1px solid #d0b5e321;
  font-size: 2.8cqw;
  text-align: left;
}
.round-result strong {
  font-variant-numeric: tabular-nums;
}
.round-result span small {
  font-size: 1.9cqw;
  color: #b6a7cc;
  display: block;
  letter-spacing: 0.06em;
  margin-bottom: 0.5cqw;
}
.score-breakdown {
  display: flex;
  justify-content: space-between;
  gap: 3cqw;
  padding: 4cqw 0;
  font-size: 2.1cqw;
  color: #b8a8cc;
}
.score-breakdown b {
  display: block;
  margin-top: 1cqw;
  font-size: 3.1cqw;
  color: #eee7f6;
}
.result-message {
  font-size: 2.8cqw;
  margin: 1cqw 0 5cqw;
}
.fine-print {
  font-size: 1.9cqw;
  margin-top: 3cqw;
  color: #998aad;
}
.loading-mark {
  font-size: 12cqw;
  color: var(--accent);
  margin-bottom: 5cqw;
}
#loading-screen p {
  font-size: 3cqw;
}
#error-list {
  font-size: 2.6cqw;
  line-height: 1.6;
  padding-left: 4cqw;
  margin: 4cqw 0;
  max-height: 80cqw;
  overflow: auto;
  color: #ffb5ca;
  overflow-wrap: anywhere;
}
#asset-warning {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  bottom: 2cqw;
  z-index: 30;
  padding: 2cqw 3cqw;
  background: #3a2b45;
  border: 1px solid #e3bc7a66;
  border-radius: 2cqw;
  font-size: 2.2cqw;
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
    transition: none !important;
  }
}
.missing-sprite {
  background: var(--accent);
  border-radius: 45% 45% 20% 20%;
  clip-path: polygon(
    20% 0,
    80% 0,
    90% 35%,
    70% 48%,
    85% 100%,
    55% 100%,
    50% 65%,
    45% 100%,
    15% 100%,
    30% 48%,
    10% 35%
  );
}