:root {
  --page-night: #0b0a0e;
  --scene-night: #151318;
  --text: #e8e3db;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  color-scheme: dark;
  font-family: "Noto Serif TC", serif;
}

* { box-sizing: border-box; }

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--page-night);
  touch-action: pan-y;
}

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
}

.debug-panel {
  position: fixed;
  z-index: 100;
  left: 14px;
  top: 14px;
  display: none;
  width: 86px;
  padding: 9px;
  border: 1px solid rgba(232,227,219,.18);
  border-radius: 10px;
  background: rgba(11,10,14,.88);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}

body.is-debug .debug-panel { display: grid; gap: 5px; }
.debug-panel.is-collapsed { width: auto; padding: 6px; }
.debug-panel.is-collapsed > :not(.debug-panel__toggle) { display: none; }
.debug-panel strong { margin-bottom: 3px; color: rgba(232,227,219,.55); font: 600 10px/1.2 system-ui,sans-serif; letter-spacing: .12em; text-align: center; }
.debug-panel .debug-panel__result-label { margin-top: 5px; padding-top: 8px; border-top: 1px solid rgba(232,227,219,.14); }
.debug-panel button { border: 1px solid rgba(232,227,219,.14); border-radius: 6px; padding: 5px 4px; background: rgba(232,227,219,.06); color: #e8e3db; font: 500 11px/1 system-ui,sans-serif; cursor: pointer; }
.debug-panel button:hover { background: rgba(231,201,160,.18); }
.debug-panel button.is-active { border-color: rgba(231,201,160,.55); background: rgba(231,201,160,.22); color: #f2dcc0; }
.debug-panel .debug-panel__toggle { border-color: rgba(231,201,160,.25); color: rgba(242,220,192,.82); font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
.intro-stage.is-debug-jump .q4-flood,
.intro-stage.is-debug-jump .q5-light-fill,
.intro-stage.is-debug-jump .q6-light-fill,
.intro-stage.is-debug-direct .q4-flood,
.intro-stage.is-debug-direct .q5-light-fill,
.intro-stage.is-debug-direct .q6-light-fill,
.intro-stage.is-debug-direct .q7-light-fill,
.intro-stage.is-debug-direct .q8-light-fill { display: none !important; }
.intro-stage.is-debug-q6 .q5-light-fill,
.intro-stage.is-q7 .q5-light-fill { display: none !important; }

.intro-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  container-type: size;
  overflow: hidden;
  background: var(--page-night);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

@media (min-width: 700px) {
  .intro-stage {
    width: calc(100dvh * 9 / 16);
    height: 100dvh;
    aspect-ratio: 9 / 16;
  }
}

.intro-stage__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.8);
  pointer-events: none;
}

.intro-stage__night {
  position: absolute;
  inset: 0;
  background: var(--scene-night);
  mix-blend-mode: multiply;
  opacity: 0.8;
  transition: opacity 2s var(--ease);
  pointer-events: none;
}

.intro-stage__line {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 82%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--text);
  font-size: clamp(15px,4.36cqw,27px);
  font-weight: 300;
  letter-spacing: 0.15em;
  line-height: 2.1;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: fade-in 2s var(--ease) both;
  transition: opacity 1.6s var(--ease);
  pointer-events: none;
}

.intro-stage__invitation {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 1;
  pointer-events: none;
}

.intro-stage__invitation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(231, 201, 160, 0.6) 0%,
    rgba(231, 201, 160, 0.18) 45%,
    transparent 70%
  );
  animation: invitation-pulse-strong 4s ease-in-out 0s infinite;
}

.intro-stage__hint {
  position: absolute;
  left: 50%;
  top: 70%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--text);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.3em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  opacity: 0;
  animation: fade-in 1.2s var(--ease) 2.4s both;
  pointer-events: none;
}

.intro-stage.is-q1 .intro-stage__night { opacity: 0.5; }

.intro-stage.is-q1 .intro-stage__line {
  opacity: 0;
  animation: none;
}

.intro-stage.is-q1 .intro-stage__invitation {
  animation: invitation-disperse 0.7s var(--ease) both;
}

.intro-stage.is-q1 .intro-stage__hint {
  opacity: 0;
  animation: none;
}

.q1-question {
  position: absolute;
  left: 50%;
  top: 11%;
  width: 88%;
  margin: 0;
  transform: translate(-50%, 0);
  color: var(--text);
  font-size: clamp(16px,4.87cqw,30px);
  font-weight: 300;
  letter-spacing: 0.15em;
  line-height: 2;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.intro-stage.is-q1 .q1-question {
  animation: fade-in 1s var(--ease) 2.1s both;
}

.intro-stage.is-focus .q1-question {
  opacity: 0;
  animation: none;
}

.q1-glow {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.6s var(--ease) 0.3s,
    filter 0.6s var(--ease) 0.3s,
    transform 0.6s var(--ease) 0.3s;
}

.q1-glow i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.q1-glow--phone {
  left: 23%;
  top: 84%;
  width: 90px;
  height: 90px;
}

.q1-glow--phone .q1-glow__halo {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(205, 220, 255, 0.18) 0%, rgba(180, 200, 245, 0.06) 42%, transparent 70%);
}

.q1-glow--phone .q1-glow__face {
  left: 50%;
  top: 30%;
  width: 26px;
  height: 36px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(200, 214, 248, 0.1) 0%, transparent 70%);
  filter: blur(3px);
}

.q1-glow--phone .q1-glow__core {
  left: 50%;
  top: 56%;
  width: 8px;
  height: 12px;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  background: rgba(228, 238, 255, 0.55);
  box-shadow: 0 0 10px 4px rgba(190, 210, 255, 0.3), 0 0 24px 10px rgba(170, 195, 250, 0.13);
}

.q1-glow--store {
  left: 17%;
  top: 79%;
  width: 150px;
  height: 150px;
}

.q1-glow--store .q1-glow__halo {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 201, 160, 0.28) 0%, rgba(231, 201, 160, 0.1) 45%, transparent 72%);
}

.q1-glow--store .q1-glow__sign {
  left: 50%;
  top: 33%;
  width: 42px;
  height: 11px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: rgba(238, 208, 166, 0.75);
  filter: blur(0.5px);
  box-shadow: 0 0 18px 8px rgba(231, 201, 160, 0.35);
}

.q1-glow--store .q1-glow__room {
  left: 50%;
  top: 52%;
  width: 28px;
  height: 32px;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(231, 201, 160, 0.24) 0%, transparent 75%);
  filter: blur(2px);
}

.q1-glow--store .q1-glow__ground {
  left: 50%;
  top: 78%;
  width: 98px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(231, 201, 160, 0.28) 0%, transparent 70%);
  filter: blur(3px);
}

.q1-glow--window {
  left: 72%;
  top: 55%;
  width: 110px;
  height: 110px;
}

.q1-glow--window .q1-glow__halo {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 213, 150, 0.26) 0%, rgba(255, 213, 150, 0.08) 45%, transparent 68%);
}

.q1-glow--window .q1-glow__core {
  left: 50%;
  top: 50%;
  width: 15px;
  height: 19px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: rgba(255, 216, 158, 0.85);
  box-shadow: 0 0 18px 7px rgba(255, 205, 140, 0.4), 0 0 40px 18px rgba(255, 200, 130, 0.14);
}

.q1-glow--reflection {
  left: 45%;
  top: 82%;
  width: 120px;
  height: 120px;
}

.q1-glow--reflection .q1-glow__halo {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 155, 176, 0.26) 0%, rgba(140, 155, 176, 0.08) 45%, transparent 65%);
}

.q1-glow--reflection .q1-glow__streak {
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(30deg);
}

.q1-glow--reflection .q1-glow__streak--wide {
  width: 78px;
  height: 22px;
  background: radial-gradient(ellipse, rgba(170, 186, 208, 0.38) 0%, rgba(140, 155, 176, 0.14) 55%, transparent 80%);
  filter: blur(4px);
}

.q1-glow--reflection .q1-glow__streak--thin {
  width: 52px;
  height: 8px;
  background: rgba(190, 204, 224, 0.32);
  filter: blur(3px);
}

.intro-stage.is-q1 .q1-glow--phone {
  animation: glow-bloom 1.8s var(--ease) both, glow-breathe 4.5s var(--ease) 2s infinite;
}

.intro-stage.is-q1 .q1-glow--store {
  animation: glow-bloom 1.8s var(--ease) both, glow-breathe 4.5s var(--ease) 3s infinite;
}

.intro-stage.is-q1 .q1-glow--window {
  animation: glow-bloom 1.8s var(--ease) both, glow-breathe 4.5s var(--ease) 4s infinite;
}

.intro-stage.is-q1 .q1-glow--reflection {
  animation: glow-bloom 1.8s var(--ease) both, glow-breathe 4.5s var(--ease) 5s infinite;
}

.intro-stage.is-focus {
  cursor: default;
  pointer-events: none;
}

.intro-stage.is-focus .intro-stage__background {
  filter: saturate(0.75) brightness(0.45) blur(6px);
  transition: filter 0.9s var(--ease) 0.3s;
}

.intro-stage.is-focus .q1-glow {
  opacity: 0.3;
  filter: blur(5px) brightness(0.5);
  animation: none;
}

.intro-stage.is-focus .q1-glow.is-selected {
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1.3);
  animation: glow-pulse 0.3s var(--ease) both;
}

.q1-expansion {
  position: absolute;
  left: var(--exp-x, 50%);
  top: var(--exp-y, 50%);
  width: 1700px;
  height: 1700px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
}

.intro-stage.is-focus .q1-expansion {
  opacity: 1;
  animation: expand-fill 1.2s var(--ease) 1.2s both;
}

.q2-scene {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.intro-stage.is-q2 .intro-stage__background,
.intro-stage.is-q2 .intro-stage__night,
.intro-stage.is-q2 .q1-question,
.intro-stage.is-q2 .q1-glow,
.intro-stage.is-q2 .q1-expansion {
  display: none;
}

.intro-stage.is-q2 .q2-scene {
  display: block;
  opacity: 1;
  animation: q2-fade-in 1.1s var(--ease) 0.1s both;
  pointer-events: auto;
}

.intro-stage.is-q2-focus .q2-scene { pointer-events: none; }

.q2-scene__background {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #151318 0%, #211d26 58%, #17141b 100%);
}

.q2-scene__tint {
  position: absolute;
  inset: 0;
  background: var(--q2-tint, transparent);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}

.intro-stage.is-q2-focus .q2-scene__tint { opacity: 1; }

.q2-scene__title {
  position: absolute;
  left: 50%;
  top: 15%;
  z-index: 2;
  width: 84%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--text);
  font-size: clamp(16px,4.62cqw,29px);
  font-weight: 300;
  letter-spacing: 0.15em;
  line-height: 2.1;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.intro-stage.is-q2 .q2-scene__title {
  animation: fade-in 0.9s var(--ease) 1.2s both;
}

.intro-stage.is-q2-focus .q2-scene__title {
  opacity: 0;
  animation: none;
  transition: opacity 0.6s var(--ease);
}

.q2-temp {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  mix-blend-mode: screen;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.q2-temp:focus-visible {
  outline: 1px solid rgba(232, 227, 219, 0.45);
  outline-offset: -20px;
}

.q2-temp i {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.q2-temp__outer { inset: 0; }

.q2-temp__inner {
  left: 50%;
  top: 50%;
  width: 26%;
  height: 26%;
  transform: translate(-50%, -50%);
  filter: blur(4px);
}

.q2-temp--a { left: 27%; top: 35%; }
.q2-temp--b { left: 73%; top: 51%; }
.q2-temp--c { left: 27%; top: 67%; }
.q2-temp--d { left: 73%; top: 83%; }

.q2-temp--a .q2-temp__outer { background: radial-gradient(circle, rgba(231, 201, 160, 0.4) 0%, rgba(231, 201, 160, 0.14) 42%, transparent 70%); }
.q2-temp--a .q2-temp__inner { background: radial-gradient(circle, rgba(240, 214, 178, 0.55) 0%, rgba(231, 201, 160, 0.2) 60%, transparent 100%); }
.q2-temp--b .q2-temp__outer { background: radial-gradient(circle, rgba(140, 155, 176, 0.4) 0%, rgba(140, 155, 176, 0.14) 42%, transparent 70%); }
.q2-temp--b .q2-temp__inner { background: radial-gradient(circle, rgba(168, 182, 202, 0.55) 0%, rgba(140, 155, 176, 0.2) 60%, transparent 100%); }
.q2-temp--c .q2-temp__outer { background: radial-gradient(circle, rgba(197, 152, 102, 0.42) 0%, rgba(185, 142, 95, 0.15) 42%, transparent 70%); }
.q2-temp--c .q2-temp__inner { background: radial-gradient(circle, rgba(214, 170, 120, 0.6) 0%, rgba(197, 152, 102, 0.22) 60%, transparent 100%); }
.q2-temp--d .q2-temp__outer { background: radial-gradient(circle, rgba(207, 201, 190, 0.4) 0%, rgba(207, 201, 190, 0.14) 42%, transparent 70%); }
.q2-temp--d .q2-temp__inner { background: radial-gradient(circle, rgba(222, 216, 206, 0.55) 0%, rgba(207, 201, 190, 0.2) 60%, transparent 100%); }

.q2-temp--a .q2-temp__wave { animation: temp-wave 7.2s var(--ease) 0s infinite; }
.q2-temp--b .q2-temp__wave { animation: temp-wave 7.2s var(--ease) -1.8s infinite; }
.q2-temp--c .q2-temp__wave { animation: temp-wave 7.2s var(--ease) -3.6s infinite; }
.q2-temp--d .q2-temp__wave { animation: temp-wave 7.2s var(--ease) -5.4s infinite, light-flicker 6.8s var(--ease) infinite; }

.intro-stage.is-q2-focus .q2-temp:not(.is-selected) {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 16px));
}

.intro-stage.is-q2-focus .q2-temp.is-selected {
  opacity: 1;
  animation: glow-pulse 0.6s var(--ease) both;
}

.q3-scene {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  background: linear-gradient(180deg, #151318 0%, #211d26 58%, #17141b 100%);
  opacity: 0;
  pointer-events: none;
}

.intro-stage.is-q3 .q2-scene { display: none; }

.intro-stage.is-q3 .q3-scene {
  display: block;
  opacity: 1;
  animation: fade-in 0.9s var(--ease) both;
  pointer-events: auto;
}

.intro-stage.is-q3-send .q3-scene { pointer-events: none; }

.q3-scene__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(6px) saturate(0.8) brightness(0.75);
  pointer-events: none;
}

.q3-scene__night {
  position: absolute;
  inset: 0;
  background: #151318;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}

.q3-scene__glow {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(6px);
  pointer-events: none;
}

.q3-scene__glow--warm { left: 18%; top: 13%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(231,201,160,.05), transparent 65%); }
.q3-scene__glow--cool { left: 86%; top: 34%; width: 150px; height: 150px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(140,155,176,.05), transparent 65%); }
.q3-scene__glow--pale { left: 8%; top: 90%; width: 160px; height: 160px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(207,201,190,.04), transparent 65%); filter: blur(7px); }

.q3-scene__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .05; pointer-events: none; }

.q3-phone {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 82%;
  height: 64%;
  border-radius: 40px;
  transform: translate(-50%,-50%) rotate(-2.5deg);
  background: #1a1820;
  box-shadow: inset 0 0 0 1px rgba(232,227,219,.08), 0 18px 60px rgba(0,0,0,.5);
  opacity: 0;
}

.intro-stage.is-q3 .q3-phone { animation: fade-in .7s var(--ease) .8s both; }
.intro-stage.is-q3-send .q3-phone { opacity: 1; animation: fade-out .5s var(--ease) 3.3s both; }

.q3-phone__bezel { position: absolute; inset: 10px; overflow: hidden; border-radius: 32px; background: #141218; }
.q3-phone__screen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.intro-stage.is-q3 .q3-phone__screen { animation: fade-in .4s var(--ease) 2s both; }
.intro-stage.is-q3-send .q3-phone__screen { opacity: 1; }

.q3-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 6px; color: rgba(232,227,219,.25); font-size: 11px; letter-spacing: .1em; }
.q3-signal { display: flex; gap: 3px; align-items: flex-end; }
.q3-signal i { width: 3px; border-radius: 1px; background: rgba(232,227,219,.25); }
.q3-signal i:nth-child(1) { height: 4px; }
.q3-signal i:nth-child(2) { height: 6px; }
.q3-signal i:nth-child(3) { height: 8px; }

.q3-chat { flex: 1; min-height: 100px; padding: 10px 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.q3-message { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; opacity: 0; }
.intro-stage.is-q3 .q3-message { animation: slide-down-in .4s var(--ease) 2.4s both; }
.intro-stage.is-q3-send .q3-message { opacity: 1; }
.q3-message__avatar { width: 28px; height: 28px; border-radius: 50%; background: #2a2530; }
.q3-message p, .q3-own-message { margin: 0; max-width: 78%; padding: 9px 14px; color: #e8e3db; font-size: 14px; font-weight: 300; letter-spacing: .1em; line-height: 1.8; }
.q3-message p { border-radius: 4px 16px 16px; background: #2a2530; }
.q3-own-message { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: rgba(231,201,160,.15); opacity: 0; }
.intro-stage.is-q3-send .q3-own-message { animation: send-up .4s var(--ease) .7s both; }

.q3-keyboard { max-height: 300px; padding: 0 8px; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease) .7s; }
.intro-stage.is-q3 .q3-keyboard { animation: keyboard-up .4s var(--ease) 3.1s both; }
.intro-stage.is-q3-send .q3-keyboard { opacity: 1; max-height: 0; animation: keyboard-down .4s var(--ease) .7s both; }
.q3-candidates { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 6px 2px; }
.q3-candidates button { border: 0; border-radius: 13px; padding: 4px 11px; background: #1f1c25; color: #e8e3db; font: 300 12px "Noto Serif TC", serif; letter-spacing: .1em; white-space: nowrap; cursor: pointer; animation: candidate-breathe 5.2s var(--ease) infinite; }
.q3-candidates button:nth-child(2) { animation-delay: -1.3s; }
.q3-candidates button:nth-child(3) { animation-delay: -2.6s; }
.q3-candidates button:nth-child(4) { animation-delay: -3.9s; }
.intro-stage.is-q3-urge .q3-candidates button { animation-name: candidate-breathe-strong; animation-duration: 3.4s; }
.intro-stage.is-q3-send .q3-candidates button.is-selected { opacity: 0; }

.q3-input { display: flex; align-items: center; gap: 2px; min-height: 26px; margin: 3px 2px 6px; padding: 3px 12px; border-radius: 13px; background: #1c1922; }
.q3-input span { color: #e8e3db; font-size: 13px; letter-spacing: .1em; opacity: 0; }
.intro-stage.is-q3-send .q3-input span { animation: fade-in .3s var(--ease) both, fade-out .25s var(--ease) .7s both; }
.q3-input i { width: 1.5px; height: 16px; background: rgba(232,227,219,.6); opacity: 0; }
.intro-stage.is-q3 .q3-input i { animation: caret-blink .8s var(--ease) 3.6s infinite both; }

.q3-keys { display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; }
.q3-keys div { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; height: 22px; }
.q3-keys i { display: grid; min-width: 0; place-items: center; overflow: hidden; border-radius: 4px; background: #232028; color: rgba(232,227,219,.2); font: normal 9px/1 system-ui, sans-serif; white-space: nowrap; }
.q3-phone__dim { position: absolute; inset: 0; background: #141218; opacity: 0; pointer-events: none; }
.intro-stage.is-q3-send .q3-phone__dim { animation: fade-in .7s var(--ease) 2.3s both; }

.q4-scene {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.intro-stage.is-q4 .q3-scene { display: none; }
.intro-stage.is-q4 .q4-scene {
  display: block;
  opacity: 1;
  animation: q4-rise 1.2s var(--ease) both;
  pointer-events: auto;
}
.intro-stage.is-q4-focus .q4-scene { pointer-events: none; }

.q4-scene__base { position: absolute; inset: 0; background: #211d26; }
.q4-scene__background { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); filter: saturate(.85) brightness(.8); pointer-events: none; }
.q4-scene__top { position: absolute; left: 0; right: 0; top: 0; height: 24%; background: linear-gradient(180deg,#211d26 0%,#384061 100%); }
.q4-scene__bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(0deg,#211d26 0%,#5f5d7a 100%); }
.q4-scene__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .06; pointer-events: none; }
.q4-scene__night { position: absolute; inset: 0; background: #151318; mix-blend-mode: multiply; opacity: .5; }
.q4-scene__fog { position: absolute; inset: 0; background: rgba(232,227,219,.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; -webkit-mask: radial-gradient(circle at 50% 62%,#000 0%,#000 100%); mask: radial-gradient(circle at 50% 62%,#000 0%,#000 100%); transition: -webkit-mask .9s var(--ease), mask .9s var(--ease); }
.intro-stage.is-q4 .q4-scene__fog { animation: fog-drift 9s var(--ease) infinite; }
.intro-stage.is-q4-focus .q4-scene__fog { -webkit-mask: radial-gradient(ellipse 34% 12% at 50% 50%,transparent 0%,transparent 55%,#000 100%); mask: radial-gradient(ellipse 34% 12% at 50% 50%,transparent 0%,transparent 55%,#000 100%); }

.q4-heading { position: absolute; left: 50%; top: 13%; width: 84%; transform: translateX(-50%); text-align: center; pointer-events: none; transition: opacity .6s var(--ease); }
.q4-heading__context { margin: 0; color: rgba(232,227,219,.7); font-size: clamp(11.5px,3.2cqw,19px); letter-spacing: .12em; line-height: 1.9; opacity: 0; }
.q4-heading h2 { margin: 12px 0 0; color: #e8e3db; font-size: clamp(15px,4.36cqw,27px); font-weight: 300; letter-spacing: .15em; line-height: 2; opacity: 0; transition: opacity .6s var(--ease),transform .6s var(--ease); }
.intro-stage.is-q4 .q4-heading__context { animation: fade-in .9s var(--ease) .6s both; }
.intro-stage.is-q4 .q4-heading h2 { animation: fade-in .9s var(--ease) 2.3s both; }
.intro-stage.is-q4-settled .q4-heading__context { opacity: .5; animation: none; }
.intro-stage.is-q4-settled .q4-heading h2 { opacity: .55; transform: scale(.92); animation: none; }
.intro-stage.is-q4-focus .q4-heading { opacity: 0; }

.q4-sweep { position: absolute; left: 0; right: 0; top: 43%; height: 72px; mix-blend-mode: screen; background: radial-gradient(ellipse 65% 60% at 50% 50%,rgba(231,201,160,.22),transparent 72%); filter: blur(7px); pointer-events: none; }
.intro-stage.is-q4 .q4-sweep { animation: sweep-light 7s var(--ease) infinite; }
.intro-stage.is-q4-focus .q4-sweep { opacity: 0; animation: none; }

.q4-options { opacity: 0; }
.intro-stage.is-q4 .q4-options { animation: fade-in .9s var(--ease) 4s both; }
.q4-options button { position: absolute; left: 50%; width: 92%; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 11px; transform: translate(-50%,-50%); background: transparent; color: #e8e3db; cursor: pointer; opacity: .85; transition: opacity .6s var(--ease),transform .9s var(--ease); animation: text-breathe 4.5s var(--ease) infinite; }
.q4-options button:nth-child(1) { top: 47%; }
.q4-options button:nth-child(2) { top: 59%; animation-delay: -1.1s; }
.q4-options button:nth-child(3) { top: 71%; animation-delay: -2.2s; }
.q4-options button:nth-child(4) { top: 83%; animation-delay: -3.3s; }
.q4-options button i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle,#e7c9a0 0%,rgba(231,201,160,.5) 55%,transparent 100%); box-shadow: 0 0 6px 1px rgba(231,201,160,.6); animation: dot-breathe 4.5s var(--ease) infinite; }
.q4-options button:nth-child(2) i { animation-delay: -1.1s; }
.q4-options button:nth-child(3) i { animation-delay: -2.2s; }
.q4-options button:nth-child(4) i { animation-delay: -3.3s; }
.q4-options button span { font: 300 20px "Noto Serif TC",serif; letter-spacing: .24em; text-shadow: 0 0 12px rgba(232,227,219,.28); }
.intro-stage.is-q4-focus .q4-options button { opacity: 0; animation: none; transform: translate(-50%,calc(-50% + 10px)); }
.intro-stage.is-q4-focus .q4-options button.is-selected { transform: translate(-50%,-50%) scale(1.04); }

.q4-selected-text { position: absolute; left: 50%; top: 50%; width: 80%; margin: 0; transform: translate(-50%,-50%); color: rgba(232,227,219,.82); font-size: 19px; letter-spacing: .2em; line-height: 1.95; text-align: center; filter: blur(.6px); text-shadow: 0 0 12px rgba(232,227,219,.5); opacity: 0; pointer-events: none; }
.intro-stage.is-q4-focus:not(.is-q4-flood) .q4-selected-text { opacity: 1; animation: write-drift .9s var(--ease); }

.q4-flood { position: absolute; inset: 0; z-index: 20; display: none; background: rgba(232,227,219,.55); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); -webkit-mask: radial-gradient(circle at 50% 55%,rgba(0,0,0,.62) 18%,#000 78%); mask: radial-gradient(circle at 50% 55%,rgba(0,0,0,.62) 18%,#000 78%); opacity: 0; pointer-events: none; }
.intro-stage.is-q4-flood .q4-flood { display: block; animation: fog-fill 1.2s var(--ease) forwards; }
.intro-stage.is-q5 .q4-flood { display: block; animation: fog-sink 1.4s var(--ease) forwards; }

.q5-scene { position: absolute; inset: 0; display: none; overflow: hidden; opacity: 0; pointer-events: none; }
.intro-stage.is-q5 .q4-scene { display: none; }
.intro-stage.is-q5 .q5-scene { display: block; opacity: 1; pointer-events: auto; }
.intro-stage.is-q5-focus .q5-scene { pointer-events: none; }
.q5-world { position: absolute; inset: 0; transition: transform .9s var(--ease); }
.q5-world__base { position: absolute; inset: 0; background: #211d26; }
.q5-world__background { position: absolute; left: 50%; bottom: 12%; width: 100%; transform: translateX(-50%); filter: saturate(.85) brightness(.8); pointer-events: none; }
.q5-world__top { position: absolute; left: 0; right: 0; top: 0; height: max(34%,calc(90% - 100cqw)); background: linear-gradient(180deg,#211d26 0%,#5d688b 100%); }
.q5-world__bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(0deg,#211d26 0%,#263c66 100%); }
.q5-world__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .06; pointer-events: none; }
.q5-world__night { position: absolute; inset: 0; background: #151318; mix-blend-mode: multiply; opacity: .5; }
.q5-dim { position: absolute; inset: 0; background: #0b0a0e; opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }

.q5-puddle { position: absolute; left: 50%; top: 82%; transform: translate(-50%,-50%); mix-blend-mode: screen; pointer-events: none; transition: transform .9s var(--ease); }
.q5-puddle__dry { position: relative; width: 238px; height: 134px; animation: puddle-dry 60s var(--ease) both; }
.q5-puddle i { position: absolute; display: block; }
.q5-puddle__blob { inset: 0; border-radius: 50% 50% 48% 52% / 55% 52% 48% 45%; filter: blur(6px); background: radial-gradient(ellipse 60% 55% at 46% 52%,rgba(232,227,219,.42) 0%,rgba(140,155,176,.22) 45%,transparent 74%); animation: puddle-morph 60s var(--ease) both; }
.q5-puddle__shimmer { left: 28%; top: 46%; width: 62%; height: 30%; border-radius: 50%; filter: blur(5px); background: linear-gradient(100deg,transparent 0%,rgba(232,227,219,.4) 50%,transparent 100%); animation: puddle-shimmer 8s var(--ease) infinite; }
.q5-puddle__ripple { left: 50%; top: 52%; width: 52px; height: 30px; border: 1.5px solid rgba(232,227,219,.5); border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; }

.q5-title { position: absolute; left: 50%; top: 12%; width: 86%; margin: 0; transform: translateX(-50%); color: #e8e3db; font-size: clamp(14px,3.97cqw,25px); font-weight: 300; letter-spacing: .14em; line-height: 2; text-align: center; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease),transform .6s var(--ease); }
.intro-stage.is-q5 .q5-title { animation: fade-in .9s var(--ease) 1.2s both; }
.intro-stage.is-q5-settled .q5-title { opacity: .45; transform: translateX(-50%) scale(.92); animation: none; }
.intro-stage.is-q5-focus .q5-title { opacity: 0; animation: none; }

.q5-options { opacity: 0; }
.intro-stage.is-q5 .q5-options { animation: fade-in .9s var(--ease) 2.9s both; }
.q5-option { position: absolute; border: 0; padding: 0; display: flex; align-items: center; gap: 9px; transform: translate(-50%,-50%); background: transparent; color: #e8e3db; white-space: nowrap; cursor: pointer; transition: opacity .6s var(--ease),transform .9s var(--ease),filter .2s ease; animation-duration: 4.5s; animation-timing-function: var(--ease); animation-iteration-count: infinite; }
.q5-option:hover { filter: brightness(1.3); }
.q5-option i { width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle,#e7c9a0 0%,rgba(231,201,160,.5) 55%,transparent 100%); box-shadow: 0 0 6px 1px rgba(231,201,160,.6); animation: dot-breathe 4.5s var(--ease) infinite; }
.q5-option span { font-family: "Noto Serif TC",serif; font-weight: 300; letter-spacing: .16em; text-shadow: 0 0 12px rgba(232,227,219,.28); }
.q5-option--4 { left: 42%; top: 33%; opacity: .68; animation-name: breathe-far; animation-delay: -3.3s; }
.q5-option--4 span { font-size: 15px; }
.q5-option--1 { left: 50%; top: 45%; opacity: .78; animation-name: breathe-mid; }
.q5-option--1 span { font-size: 16px; }
.q5-option--2 { left: 58%; top: 57%; opacity: .88; animation-name: breathe-near; animation-delay: -1.1s; }
.q5-option--2 span { font-size: 17px; }
.q5-option--2 span { animation: arc-drift 7s var(--ease) infinite; }
.q5-option--3 { left: 50%; top: 67%; opacity: 1; animation-name: text-breathe; animation-delay: -2.2s; }
.q5-option--3 span { font-size: 18px; }
.q5-option--1 i { animation-delay: 0s; }
.q5-option--2 i { animation-delay: -1.1s; }
.q5-option--3 i { animation-delay: -2.2s; }
.q5-option--4 i { animation-delay: -3.3s; }
.intro-stage.is-q5-focus .q5-option { opacity: 0; animation: none; transform: translate(-50%,calc(-50% + 10px)); }
.intro-stage.is-q5-focus .q5-option.is-selected { opacity: 1; transform: translate(-50%,-50%) scale(1.02); }

.q5-trail { position: absolute; left: var(--trail-x,50%); top: var(--trail-top,45%); width: 2px; height: var(--trail-height,0%); transform: translateX(-50%); background: linear-gradient(180deg,rgba(232,227,219,.2),transparent); filter: blur(2px); mix-blend-mode: screen; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.q5-trail.is-visible { opacity: 1; }

.intro-stage.is-q5-choice-1 .q5-puddle__blob { animation: puddle-bright .9s var(--ease) both,puddle-morph 60s var(--ease) both; }
.intro-stage.is-q5-choice-2 .q5-world { transform: translateX(-6%); }
.intro-stage.is-q5-choice-2 .q5-puddle { transform: translate(-50%,-50%) translateX(70%); }
.intro-stage.is-q5-choice-3 .q5-puddle__blob { animation: puddle-scatter .9s var(--ease) both,puddle-morph 60s var(--ease) both; }
.intro-stage.is-q5-choice-3 .q5-puddle__ripple { animation: ripple-expand .9s var(--ease) both; }
.intro-stage.is-q5-choice-4 .q5-dim { opacity: .6; }

.q5-light-fill { position: absolute; inset: 0; z-index: 21; display: none; background: radial-gradient(circle at 40% 80%,#cdd6e2 0%,#aab6c9 40%,#8c9bb0 100%); opacity: 0; pointer-events: none; }
.intro-stage.is-q5-flood .q5-light-fill { display: block; animation: light-fill 1.2s var(--ease) forwards; }
.intro-stage.is-q6 .q5-light-fill { display: block; animation: light-converge 1.4s var(--ease) forwards; }

.q6-scene { position: absolute; inset: 0; display: none; overflow: hidden; opacity: 0; pointer-events: none; }
.intro-stage.is-q6 .q5-scene { display: none; }
.intro-stage.is-q6 .q6-scene { display: block; opacity: 1; pointer-events: auto; }
.intro-stage.is-q6-focus .q6-scene { pointer-events: none; }
.q6-world { position: absolute; inset: 0; transform-origin: 25% 47%; }
.intro-stage.is-q6 .q6-world { animation: gaze-zoom 8s var(--ease) both; }
.q6-world__base { position: absolute; inset: 0; background: #211d26; }
.q6-world__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8); pointer-events: none; }
.q6-world__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .05; pointer-events: none; }
.q6-world__night { position: absolute; inset: 0; background: #151318; mix-blend-mode: multiply; opacity: .5; }
.q6-window-light { position: absolute; left: 25%; top: 47%; width: 168px; height: 168px; transform: translate(-50%,-50%); mix-blend-mode: screen; pointer-events: none; animation: window-breathe 4.5s var(--ease) infinite; }
.q6-window-light i { position: absolute; display: block; border-radius: 50%; }
.q6-window-light i:nth-child(1) { inset: 0; filter: blur(7px); background: radial-gradient(ellipse 42% 50% at 50% 48%,rgba(231,201,160,.55) 0%,rgba(231,201,160,.26) 42%,transparent 72%); }
.q6-window-light i:nth-child(2) { left: 44%; top: 46%; width: 58%; height: 64%; transform: translate(-50%,-50%); filter: blur(10px); background: radial-gradient(ellipse,rgba(233,226,214,.42),transparent 68%); }
.q6-window-light i:nth-child(3) { left: 58%; top: 60%; width: 40%; height: 40%; transform: translate(-50%,-50%); filter: blur(8px); background: radial-gradient(ellipse,rgba(231,201,160,.3),transparent 70%); }
.intro-stage.is-q6-focus .q6-window-light i:nth-child(-n+2) { animation: glow-flash .9s var(--ease) both; }

.q6-heading { pointer-events: none; transition: opacity .6s var(--ease); }
.q6-heading p,.q6-heading h2 { position: absolute; left: 50%; width: 86%; margin: 0; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .6s var(--ease),transform .6s var(--ease); }
.q6-heading p { top: 9%; color: rgba(232,227,219,.7); font-size: clamp(11.5px,3.2cqw,19px); letter-spacing: .12em; line-height: 1.9; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.q6-heading h2 { top: 17%; color: #e8e3db; font-size: clamp(14.5px,4.1cqw,26px); font-weight: 300; letter-spacing: .14em; line-height: 2; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.intro-stage.is-q6 .q6-heading p { animation: fade-in .9s var(--ease) .6s both; }
.intro-stage.is-q6 .q6-heading h2 { animation: fade-in .9s var(--ease) 2.3s both; }
.intro-stage.is-q6-settled .q6-heading p { opacity: .5; animation: none; }
.intro-stage.is-q6-settled .q6-heading h2 { opacity: .55; transform: translateX(-50%) scale(.92); animation: none; }
.intro-stage.is-q6-focus .q6-heading { opacity: 0; }

.q6-options { opacity: 0; }
.intro-stage.is-q6 .q6-options { animation: fade-in .9s var(--ease) 4s both; }
.q6-option { position: absolute; border: 0; padding: 0; display: flex; align-items: center; gap: 9px; transform: translateY(-50%); background: transparent; color: #e8e3db; opacity: .85; white-space: nowrap; cursor: pointer; transition: opacity .9s var(--ease),transform .9s var(--ease),filter .2s ease; animation: text-breathe 4.5s var(--ease) infinite; }
.q6-option:hover { filter: brightness(1.3); }
.q6-option i { width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle,#e7c9a0 0%,rgba(231,201,160,.5) 55%,transparent 100%); box-shadow: 0 0 6px 1px rgba(231,201,160,.6); animation: dot-breathe 4.5s var(--ease) infinite; }
.q6-option span { font: 300 17px "Noto Serif TC",serif; letter-spacing: .16em; text-shadow: 0 1px 12px rgba(0,0,0,.5),0 0 12px rgba(232,227,219,.24); }
.q6-option--1 { left: 20%; top: 58%; }
.q6-option--2 { left: 8%; top: 66%; animation-delay: -1.1s; }
.q6-option--3 { left: 28%; top: 76%; animation-delay: -2.2s; }
.q6-option--4 { left: 14%; top: 85%; animation-delay: -3.3s; }
.q6-option--2 i { animation-delay: -1.1s; }
.q6-option--3 i { animation-delay: -2.2s; }
.q6-option--4 i { animation-delay: -3.3s; }
.intro-stage.is-q6-focus .q6-option { opacity: 0; animation: none; }
.intro-stage.is-q6-focus .q6-option--1:not(.is-selected) { transform: translate(-14px,-8px); transition-duration: 1s; }
.intro-stage.is-q6-focus .q6-option--2:not(.is-selected) { transform: translate(11px,12px); transition-duration: .85s; }
.intro-stage.is-q6-focus .q6-option--3:not(.is-selected) { transform: translate(-9px,14px); transition-duration: 1.15s; }
.intro-stage.is-q6-focus .q6-option--4:not(.is-selected) { transform: translate(13px,-10px); transition-duration: 1.2s; }
.intro-stage.is-q6-focus .q6-option.is-selected { opacity: 1; transform: translateY(-50%) scale(1.02); transition-duration: .3s; }
.intro-stage.is-q6-flood .q6-option.is-selected { opacity: 0; transform: translateY(-50%) scale(1.08); transition-duration: .9s; }

.q6-light-fill { position: absolute; inset: 0; z-index: 22; background: radial-gradient(circle at 25% 47%,rgba(231,201,160,.55) 0%,rgba(40,34,28,.94) 52%,#151318 100%); opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease); }
.intro-stage.is-q6-flood .q6-light-fill { opacity: 1; }

.q7-scene { position: absolute; inset: 0; display: none; overflow: hidden; isolation: isolate; opacity: 0; pointer-events: none; }
.intro-stage.is-q7 .q6-scene { display: none; }
.intro-stage.is-q7 .q7-scene { display: block; opacity: 1; pointer-events: auto; }
.intro-stage.is-q7-focus .q7-scene { pointer-events: none; }
.q7-scene__base { position: absolute; inset: 0; background: #1f1a1c; }
.q7-scene__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.82); pointer-events: none; }
.q7-scene__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .05; pointer-events: none; }
.q7-scene__night { position: absolute; inset: 0; background: #1f1a1c; mix-blend-mode: multiply; opacity: .45; }
.q7-scene__warmth { position: absolute; inset: 0; background: linear-gradient(160deg,rgba(231,201,160,.2),rgba(214,150,92,.14) 55%,rgba(150,100,70,.12)); }
.q7-scene__key-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%,rgba(231,201,160,.5),transparent 60%); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.intro-stage.is-q7 .q7-scene__key-flash { animation: key-flicker 1s var(--ease) .1s both; }

.q7-heading { pointer-events: none; transition: opacity .6s var(--ease); }
.q7-heading p,.q7-heading h2 { position: absolute; left: 50%; width: 86%; margin: 0; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .6s var(--ease),transform .6s var(--ease); }
.q7-heading p { top: 9%; width: 88%; color: rgba(232,227,219,.7); font-size: clamp(11.5px,3.2cqw,19px); letter-spacing: .12em; line-height: 1.9; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.q7-heading h2 { top: 16%; color: #e8e3db; font-size: clamp(14.5px,4.1cqw,26px); font-weight: 300; letter-spacing: .14em; line-height: 2; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.intro-stage.is-q7 .q7-heading p { animation: fade-in .9s var(--ease) .6s both; }
.intro-stage.is-q7 .q7-heading h2 { animation: fade-in .9s var(--ease) 2.3s both; }
.intro-stage.is-q7-settled .q7-heading p { opacity: .5; animation: none; }
.intro-stage.is-q7-settled .q7-heading h2 { opacity: .55; transform: translateX(-50%) scale(.92); animation: none; }
.intro-stage.is-q7-focus .q7-heading { opacity: 0; }

.q7-options { opacity: 0; }
.intro-stage.is-q7 .q7-options { animation: fade-in .9s var(--ease) 4s both; }
.q7-option { position: absolute; width: 150px; min-height: 64px; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; transform: translate(-50%,-50%); background: transparent; color: #e8e3db; cursor: pointer; opacity: 1; transition: opacity .6s var(--ease); }
.q7-option i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%,-50%) scale(1); mix-blend-mode: screen; background: radial-gradient(circle,rgba(231,201,160,.55),rgba(231,201,160,.2) 45%,transparent 72%); transition: transform .9s var(--ease); animation: glow-breathe 4.5s var(--ease) infinite; }
.q7-option span { position: relative; z-index: 1; color: #e8e3db; font: 300 13px/1.6 "Noto Serif TC",serif; letter-spacing: .1em; text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.q7-option--1 { left: 47%; top: 80%; }
.q7-option--2 { left: 66%; top: 37%; }
.q7-option--3 { left: 46%; top: 53%; }
.q7-option--4 { left: 34%; top: 67%; width: 140px; }
.q7-option--2 i { animation-delay: -1.1s; }
.q7-option--3 i { animation-delay: -2.2s; }
.q7-option--4 i { animation-delay: -3.3s; }
.intro-stage.is-q7-focus .q7-option:not(.is-selected) { opacity: 0; }
.intro-stage.is-q7-focus .q7-option.is-selected i { transform: translate(-50%,-50%) scale(1.9); }

.q7-light-fill { position: absolute; inset: 0; z-index: 23; background: radial-gradient(circle at var(--q7-flood-x,50%) var(--q7-flood-y,60%),rgba(231,201,160,.55),rgba(40,34,28,.94) 52%,#151318 100%); opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease); }
.intro-stage.is-q7-flood .q7-light-fill { opacity: 1; }

.q8-scene { position: absolute; inset: 0; display: none; overflow: hidden; isolation: isolate; opacity: 0; pointer-events: none; }
.intro-stage.is-q8 .q7-scene { display: none; }
.intro-stage.is-q8 .q8-scene { display: block; opacity: 1; pointer-events: auto; }
.intro-stage.is-q8-focus .q8-scene { pointer-events: none; }
.q8-scene__base { position: absolute; inset: 0; background: #1d1a22; }
.q8-scene__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) brightness(.85); pointer-events: none; }
.q8-scene__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .05; pointer-events: none; }
.q8-scene__night { position: absolute; inset: 0; background: #1d1a22; mix-blend-mode: multiply; opacity: .48; }
.q8-window-glow { position: absolute; left: 20%; top: 34%; width: 240px; height: 340px; transform: translate(-50%,-50%); mix-blend-mode: screen; background: radial-gradient(ellipse 40% 50% at 50% 50%,rgba(244,235,216,.62),rgba(231,208,168,.28) 46%,transparent 74%); filter: blur(10px); opacity: .6; pointer-events: none; }
.q8-room-glow { position: absolute; left: 42%; top: 48%; width: 90%; height: 70%; transform: translate(-50%,-50%); mix-blend-mode: screen; background: radial-gradient(ellipse 50% 50% at 40% 42%,rgba(231,208,170,.24),rgba(214,190,150,.1) 40%,transparent 70%); filter: blur(24px); opacity: .6; pointer-events: none; }
.intro-stage.is-q8 .q8-window-glow,.intro-stage.is-q8 .q8-room-glow { animation: window-dawn-rise 25s var(--ease) both; }
.q8-dawn { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.q8-dawn--radial { background: radial-gradient(120% 110% at 16% 30%,rgba(238,214,176,.5),rgba(231,201,160,.22) 30%,rgba(214,190,158,.06) 55%,transparent 78%); }
.q8-dawn--soft { background: linear-gradient(108deg,#f0e2c6,transparent 58%); mix-blend-mode: soft-light; }
.intro-stage.is-q8 .q8-dawn { animation: dawn-rise 25s var(--ease) both; }
.intro-stage.is-q8-focus .q8-dawn { animation: dawn-rise 25s var(--ease) both,dawn-accelerate 2s var(--ease) both; }

.q8-heading { pointer-events: none; transition: opacity .6s var(--ease); }
.q8-heading p,.q8-heading h2 { position: absolute; left: 50%; width: 86%; margin: 0; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .6s var(--ease),transform .6s var(--ease); }
.q8-heading p { top: 8%; width: 88%; color: rgba(232,227,219,.7); font-size: clamp(11.5px,3.2cqw,19px); letter-spacing: .1em; line-height: 1.85; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.q8-heading h2 { top: 18%; color: #e8e3db; font-size: clamp(14.5px,4.1cqw,26px); font-weight: 300; letter-spacing: .14em; line-height: 2; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.intro-stage.is-q8 .q8-heading p { animation: fade-in .9s var(--ease) .6s both; }
.intro-stage.is-q8 .q8-heading h2 { animation: fade-in .9s var(--ease) 2.3s both; }
.intro-stage.is-q8-settled .q8-heading p { opacity: .5; animation: none; }
.intro-stage.is-q8-settled .q8-heading h2 { opacity: .55; transform: translateX(-50%) scale(.92); animation: none; }
.intro-stage.is-q8-focus .q8-heading { opacity: 0; }

.q8-options { opacity: 0; }
.intro-stage.is-q8 .q8-options { animation: fade-in .9s var(--ease) 4s both; }
.q8-option { position: absolute; left: 50%; width: 300px; border: 0; padding: 0; display: flex; align-items: center; gap: 9px; transform: translate(-50%,-50%); background: transparent; color: #e8e3db; opacity: .85; cursor: pointer; transition: opacity .9s var(--ease),transform .9s var(--ease),filter .2s ease; animation: text-breathe 4.5s var(--ease) infinite; }
.q8-option:hover { filter: brightness(1.3); }
.q8-option i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle,#e7c9a0,rgba(231,201,160,.5) 55%,transparent); box-shadow: 0 0 6px 1px rgba(231,201,160,.6); animation: dot-breathe 4.5s var(--ease) infinite; }
.q8-option span { font: 300 15px/1.7 "Noto Serif TC",serif; letter-spacing: .1em; text-align: left; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.q8-option--1 { top: 46%; }
.q8-option--1 span { color: #f4e9d6; text-shadow: 0 1px 12px rgba(0,0,0,.5),0 0 14px rgba(231,201,160,.4); animation: dawn-warm 25s var(--ease) both; }
.q8-option--4 { top: 60%; animation-delay: -3.3s; }
.q8-option--3 { top: 73%; animation-delay: -2.2s; }
.q8-option--3 i { background: radial-gradient(circle,#c3ccdb,rgba(195,204,219,.5) 55%,transparent); }
.q8-option--2 { top: 87%; animation-delay: -1.1s; }
.q8-option--2 i { background: radial-gradient(circle,#9aa6bd,rgba(154,166,189,.5) 55%,transparent); }
.q8-option--2 span { color: rgba(174,183,202,.82); }
.q8-option--3 span { color: rgba(203,209,222,.9); }
.intro-stage.is-q8-focus .q8-option { opacity: 0; animation: none; }
.intro-stage.is-q8-focus .q8-option--1:not(.is-selected) { transform: translate(calc(-50% - 13px),calc(-50% - 8px)); transition-duration: 1s; }
.intro-stage.is-q8-focus .q8-option--2:not(.is-selected) { transform: translate(calc(-50% + 12px),calc(-50% + 11px)); transition-duration: .85s; }
.intro-stage.is-q8-focus .q8-option--3:not(.is-selected) { transform: translate(calc(-50% - 9px),calc(-50% + 13px)); transition-duration: 1.15s; }
.intro-stage.is-q8-focus .q8-option--4:not(.is-selected) { transform: translate(calc(-50% + 11px),calc(-50% - 10px)); transition-duration: 1.2s; }
.intro-stage.is-q8-focus .q8-option.is-selected { opacity: 1; transform: translate(-50%,-50%) scale(1.02); transition-duration: .3s; }
.intro-stage.is-q8-fill .q8-option.is-selected { opacity: 0; transform: translate(-50%,-50%) scale(1.06); transition-duration: .9s; }

.q8-light-fill { position: absolute; inset: 0; z-index: 24; background: radial-gradient(circle at 22% 35%,#f4ecdd,#e8d8bd 45%,#cdb891 100%); opacity: 0; pointer-events: none; transition: opacity 1.5s var(--ease); }
.intro-stage.is-q8-fill .q8-light-fill { opacity: 1; }

.settle-scene { position: absolute; inset: 0; display: none; overflow: hidden; background: #211d26; opacity: 0; pointer-events: none; }
.intro-stage.is-settle .q8-scene { display: none; }
.intro-stage.is-settle .settle-scene { display: block; opacity: 1; pointer-events: auto; }
.settle-scene__dawn { position: absolute; inset: 0; background: radial-gradient(120% 90% at 82% 18%,rgba(231,201,160,.16),transparent 55%); }
.settle-scene__bright { position: absolute; inset: 0; background: linear-gradient(165deg,#ece5d8 0%,#e9ddc9 55%,#e3d3ba 100%); opacity: 0; transition: opacity 1s var(--ease); }
.intro-stage.is-settle-step-3 .settle-scene__bright { opacity: 1; }
.settle-scene__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .06; pointer-events: none; }

.settle-nickname { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 32px; text-align: center; transition: opacity .45s var(--ease); }
.intro-stage.is-settle-running .settle-nickname { opacity: 0; pointer-events: none; }
.settle-nickname p { margin: 0 0 14px; color: rgba(232,227,219,.5); font-size: 14px; letter-spacing: .18em; }
.settle-nickname h2 { margin: 0 0 8px; color: #e8e3db; font-size: 21px; font-weight: 300; letter-spacing: .1em; line-height: 1.9; }
.settle-nickname small { margin-bottom: 34px; color: rgba(232,227,219,.35); font-size: 11.5px; letter-spacing: .14em; }
.settle-nickname input { width: 100%; max-width: 230px; border: 0; border-bottom: 1px solid rgba(232,227,219,.25); padding: 10px 4px; outline: none; background: transparent; color: #e8e3db; font: 300 17px "Noto Serif TC",serif; letter-spacing: .12em; text-align: center; }
.settle-nickname input::placeholder { color: rgba(232,227,219,.25); }
.settle-nickname__submit { margin-top: 44px; border: 1px solid rgba(231,201,160,.45); border-radius: 999px; padding: 13px 46px; background: rgba(231,201,160,.08); color: #f0e6d2; font: 300 14px "Noto Serif TC",serif; letter-spacing: .24em; text-indent: .24em; cursor: pointer; }

.settle-orbs i { position: absolute; left: 50%; top: 50%; width: var(--size); height: var(--size); border-radius: 50%; transform: translate(-50%,-50%) translate(var(--x),var(--y)) scale(1); background: radial-gradient(circle,var(--orb),color-mix(in srgb,var(--orb) 53%,transparent) 42%,transparent 72%); filter: blur(9px); mix-blend-mode: screen; opacity: 0; transition: transform 1.3s var(--ease),opacity .7s var(--ease); }
.intro-stage.is-settle-step-1 .settle-orbs i { opacity: 1; }
.intro-stage.is-settle-step-3 .settle-orbs i { transform: translate(-50%,-50%) translate(0,0) scale(1); }
.intro-stage.is-settle-step-4 .settle-orbs i { transform: translate(-50%,-50%) translate(0,0) scale(.35); opacity: 0; }
.settle-fused { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle,#e7c9a0,rgba(231,201,160,.5) 44%,transparent 74%); filter: blur(6px); mix-blend-mode: multiply; opacity: 0; transition: opacity .7s var(--ease); }
.intro-stage.is-settle-step-4 .settle-fused { opacity: 1; animation: glow-breathe 2.6s var(--ease) .3s infinite; }
.settle-text { position: absolute; left: 50%; top: 50%; width: 84%; margin: 0; transform: translate(-50%,-50%); text-align: center; opacity: 0; transition: opacity .7s var(--ease); pointer-events: none; }
.settle-text--first { color: #e8e3db; font-size: 17px; letter-spacing: .18em; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.intro-stage.is-settle-step-2:not(.is-settle-step-4) .settle-text--first { opacity: .95; }
.settle-text--last { color: #3a3540; font-size: 21px; font-weight: 400; letter-spacing: .2em; }
.intro-stage.is-settle-step-5 .settle-text--last { opacity: 1; }

.result-scene { position: absolute; inset: 0; z-index: 30; display: none; overflow-y: auto; background: #131117; opacity: 0; pointer-events: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.result-scene::-webkit-scrollbar { display: none; }
.intro-stage.is-result .settle-scene { display: none; }
.intro-stage.is-result .result-scene { display: block; opacity: 1; pointer-events: auto; animation: fade-in 1.2s var(--ease) both; }
.result-card { position: relative; width: 100%; height: 100%; min-height: 100%; overflow: hidden; }
.result-card__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); pointer-events: none; }
.result-card__shade { position: absolute; inset: 0; pointer-events: none; }
.result-card__shade--side { background: radial-gradient(ellipse 72% 28% at 90% 15%,rgba(9,11,17,.48),rgba(9,11,17,.2) 48%,transparent 76%),linear-gradient(90deg,rgba(20,18,26,.5),rgba(20,18,26,.12) 42%,transparent 68%); }
.result-card__shade--bottom { background: linear-gradient(0deg,rgba(20,18,26,.62),rgba(20,18,26,.12) 34%,transparent 55%); }
.result-card__glow { position: absolute; left: 74%; top: 30%; width: 150px; height: 150px; border-radius: 50%; transform: translate(-50%,-50%); mix-blend-mode: screen; filter: blur(8px); opacity: .6; animation: glow-breathe 7s var(--ease) infinite; pointer-events: none; }
.result-card__header { position: absolute; right: 8%; top: 9%; display: flex; align-items: center; gap: 10px; color: rgba(232,227,219,.75); font-size: clamp(10px,3.08cqw,12px); letter-spacing: .3em; text-shadow: 0 1px 3px rgba(4,6,10,.95),0 2px 12px rgba(4,6,10,.9); opacity: 0; animation: fade-in .4s var(--ease) 2.1s both; }
.result-card__header i { width: 9px; height: 9px; border-radius: 50%; background: var(--result-color); box-shadow: 0 0 10px 2px var(--result-color); animation: fade-in .4s var(--ease) 1.7s both; }
.result-card__name { position: absolute; right: 8%; top: 13.5%; max-width: 84%; margin: 0; color: #e8e3db; font-size: clamp(18px,6.15cqw,24px); font-weight: 400; letter-spacing: .1em; line-height: 1.4; text-align: right; text-shadow: 0 1px 4px rgba(4,6,10,.98),0 3px 18px rgba(4,6,10,.92),0 0 30px rgba(4,6,10,.55); opacity: 0; animation: blur-reveal .9s var(--ease) 2.5s both; }
.result-card__quote { position: absolute; left: 3.5%; top: 21%; height: min(var(--quote-height,300px),48%); margin: 0; writing-mode: vertical-rl; text-orientation: upright; overflow: hidden; color: #f0ebe2; font-size: clamp(12.5px,4.1cqw,16px); letter-spacing: .12em; line-height: 2; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.result-card__quote span { opacity: 0; animation: character-reveal .5s var(--ease) var(--char-delay) both; }
.result-card__state { position: absolute; left: 18%; right: 8%; bottom: 17%; margin: 0; color: rgba(232,227,219,.88); font-size: clamp(9.5px,2.95cqw,11.5px); letter-spacing: .05em; line-height: 2.2; text-align: justify; text-indent: 2em; text-shadow: 0 1px 3px rgba(6,5,8,.95),0 2px 10px rgba(6,5,8,.9),0 0 22px rgba(6,5,8,.85); opacity: 0; animation: fade-up .8s var(--ease) var(--state-delay) both; }
.result-card__relations { position: absolute; left: 8%; right: 8%; bottom: 9%; display: flex; align-items: stretch; border-top: 1px solid rgba(232,227,219,.1); padding-top: 12px; opacity: 0; animation: fade-up .8s var(--ease) var(--relations-delay) both; }
.result-card__relations > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.result-card__relations > b { width: 1px; margin: 2px 0; background: rgba(232,227,219,.14); }
.result-card__relations small { color: rgba(232,227,219,.5); font-size: clamp(8px,2.44cqw,9.5px); letter-spacing: .2em; white-space: nowrap; }
.result-card__relations p { margin: 0; display: flex; align-items: center; gap: clamp(4px,1.54cqw,6px); color: #efe8da; font-size: clamp(10px,3.2cqw,12.5px); letter-spacing: .05em; white-space: nowrap; text-shadow: 0 1px 8px rgba(6,5,8,.9); }
.result-card__relations i { width: 9px; height: 9px; border-radius: 50%; background: var(--relation-color); box-shadow: 0 0 8px 2px var(--relation-color); animation: glow-breathe 4.5s var(--ease) infinite; }
.result-card__scroll-cue { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 7.5%; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.result-card__wordmark { position: absolute; left: 50%; bottom: 43%; transform: translateX(-50%); color: rgba(232,227,219,.62); font: 400 clamp(10px,3.08cqw,12px) "Noto Serif TC",serif; letter-spacing: .32em; text-indent: .32em; white-space: nowrap; opacity: 0; animation: fade-in .6s var(--ease) var(--wordmark-delay) both; }
.result-card__scroll-cue:hover .result-card__wordmark { color: rgba(243,234,217,.9); }
.result-card__cue { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); color: rgba(232,227,219,.8); font: 300 25px/1 system-ui; opacity: .8; animation: result-cue 1.8s ease-in-out infinite; }
.result-actions { background: linear-gradient(180deg,#131117,#0f0e13); padding: 24px 22px 44px; }
.result-actions__hooks { position: relative; height: 30px; color: rgba(232,227,219,.85); font-size: 13.5px; letter-spacing: .1em; text-align: center; }
.result-actions__hooks p { position: absolute; inset: 0; margin: 0; }
.result-actions__hooks p:first-child { animation: hook-a 12s ease-in-out infinite; }
.result-actions__hooks p:last-child { opacity: 0; animation: hook-b 12s ease-in-out infinite; }
.result-actions button,
.result-actions a { display: block; width: 100%; border-radius: 14px; padding: 15px; color: #e8e3db; font: 300 14px "Noto Serif TC",serif; letter-spacing: .14em; text-align: center; text-decoration: none; cursor: pointer; }
.result-actions__share,
.result-actions__threads { margin-top: 13px; border: 1px solid rgba(231,201,160,.5); background: linear-gradient(180deg,rgba(231,201,160,.16),rgba(231,201,160,.07)); }
.result-actions__share:hover,
.result-actions__share:focus-visible,
.result-actions__threads:hover,
.result-actions__threads:focus-visible { border-color: rgba(240,217,185,.72); outline: none; background: linear-gradient(180deg,rgba(231,201,160,.22),rgba(231,201,160,.11)); }
.result-actions__waitlist { margin-top: 13px; border: 1px solid rgba(232,227,219,.22); background: transparent; }
.result-actions__retake { margin-top: 13px; border: 1px solid rgba(232,227,219,.1); background: transparent; color: rgba(232,227,219,.55) !important; }

.waitlist-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(10,8,12,.78); backdrop-filter: blur(4px); }
.waitlist-modal.is-open { display: flex; }
.waitlist-modal__panel { width: 84%; max-width: 340px; border: 1px solid rgba(232,227,219,.14); border-radius: 16px; padding: 28px 24px; background: #1d1a22; text-align: center; }
.waitlist-modal__panel h2 { margin: 0 0 12px; color: #e8e3db; font-size: 16px; font-weight: 400; letter-spacing: .12em; }
.waitlist-modal__panel p { margin: 0 0 20px; color: rgba(232,227,219,.6); font-size: 11.5px; line-height: 2; }
.waitlist-modal__bot-field { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.waitlist-modal__email { width: 100%; border: 1px solid rgba(232,227,219,.2); border-radius: 10px; padding: 12px; outline: none; background: #141218; color: #e8e3db; font: 14px -apple-system,sans-serif; text-align: center; }
.waitlist-modal__email.is-invalid { border-color: rgba(220,120,120,.7); }
.waitlist-modal__error { margin: 8px 0 0 !important; color: rgba(235,145,145,.9) !important; font: 11px/1.5 -apple-system,sans-serif !important; }
.waitlist-modal__privacy { margin: 9px 0 0 !important; color: rgba(232,227,219,.36) !important; font-size: 10px !important; line-height: 1.6 !important; }
.waitlist-modal__status { margin: 9px 0 0 !important; color: rgba(235,145,145,.9) !important; font: 11px/1.5 -apple-system,sans-serif !important; }
.waitlist-modal__submit { display: block; width: 100%; margin-top: 14px; border: 1px solid rgba(231,201,160,.5); border-radius: 14px; padding: 14px; background: linear-gradient(180deg,rgba(231,201,160,.16),rgba(231,201,160,.07)); color: #f3ead9; font: 300 14px "Noto Serif TC",serif; letter-spacing: .14em; cursor: pointer; }
.waitlist-modal__submit:disabled { opacity: .35; cursor: not-allowed; }
.waitlist-modal__close { margin-top: 14px; border: 0; padding: 2px 8px; background: transparent; color: rgba(232,227,219,.35); font: 300 11px "Noto Serif TC",serif; cursor: pointer; }

.share-modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(10,8,12,.9); backdrop-filter: blur(7px); }
.share-modal.is-open { display: flex; }
.share-modal__panel { position: relative; width: min(92vw,360px); max-height: 94dvh; overflow-y: auto; border: 1px solid rgba(232,227,219,.14); border-radius: 18px; padding: 18px; background: #1a171f; text-align: center; box-shadow: 0 20px 70px rgba(0,0,0,.6); }
.share-modal__panel h2 { margin: 0 0 14px; color: #e8e3db; font-size: 16px; font-weight: 300; letter-spacing: .18em; }
.share-modal__preview { position: relative; width: min(100%,270px); aspect-ratio: 9/16; margin: 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #111017; color: rgba(232,227,219,.45); font-size: 12px; }
.share-modal__preview img { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; }
.share-modal__preview.is-ready img { display: block; }
.share-modal__preview.is-ready span { display: none; }
.share-modal__actions { margin-top: 16px; }
.share-modal__actions button { border-radius: 12px; padding: 13px 8px; color: #f3ead9; font: 300 13px "Noto Serif TC",serif; letter-spacing: .08em; cursor: pointer; }
.share-modal__actions button:disabled { opacity: .35; cursor: wait; }
.share-modal__share { width: 100%; border: 1px solid rgba(231,201,160,.5); background: linear-gradient(180deg,rgba(231,201,160,.16),rgba(231,201,160,.07)); }
.share-modal__close { position: absolute; z-index: 2; right: 9px; top: 8px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; color: rgba(232,227,219,.62); font: 300 27px/1 system-ui,sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.share-modal__close:hover,
.share-modal__close:focus-visible { background: rgba(232,227,219,.08); color: #f3ead9; outline: none; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes invitation-pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.06);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.96);
  }
}

@keyframes invitation-pulse-strong {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.14);
  }
}

@keyframes invitation-disperse {
  from {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.6);
  }
}

@keyframes glow-bloom {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translate(-50%, -50%) scale(0.85);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes glow-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.74; }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.55; }
}

@keyframes expand-fill {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.04);
  }
  18% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes q2-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes slide-down-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes keyboard-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes keyboard-down { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(22px); } }
@keyframes send-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes candidate-breathe { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes candidate-breathe-strong { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes caret-blink { 0%,42% { opacity: 1; } 55%,92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes q4-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fog-drift { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: .9; } }
@keyframes text-breathe { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes dot-breathe { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes sweep-light { 0% { transform: translateY(-6%); opacity: 0; } 14%,86% { opacity: .9; } 100% { transform: translateY(300%); opacity: 0; } }
@keyframes write-drift { from { transform: translate(-50%,-34%) scale(.96); } to { transform: translate(-50%,-50%) scale(1); } }
@keyframes fog-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes fog-sink { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(38%); } }
@keyframes puddle-dry { from { transform: scale(1); opacity: 1; } to { transform: scale(.7); opacity: .6; } }
@keyframes puddle-morph { from { border-radius: 50% 50% 48% 52% / 55% 52% 48% 45%; transform: scale(1); } to { border-radius: 44% 56% 62% 38% / 63% 43% 57% 37%; transform: scale(.9); } }
@keyframes puddle-shimmer { 0% { transform: translateX(-40%); opacity: .5; } 50% { opacity: .9; } 100% { transform: translateX(40%); opacity: .5; } }
@keyframes puddle-bright { 0%,100% { filter: blur(5px) brightness(1); } 45% { filter: blur(3px) brightness(1.7); } }
@keyframes puddle-scatter { 0% { filter: blur(5px); opacity: 1; } 40% { filter: blur(11px); opacity: .5; } 100% { filter: blur(6px); opacity: .85; } }
@keyframes ripple-expand { from { width: 30px; height: 18px; opacity: .7; } to { width: 200px; height: 118px; opacity: 0; } }
@keyframes breathe-far { 0%,100% { opacity: .55; } 50% { opacity: .72; } }
@keyframes breathe-mid { 0%,100% { opacity: .56; } 50% { opacity: .82; } }
@keyframes breathe-near { 0%,100% { opacity: .6; } 50% { opacity: .9; } }
@keyframes arc-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes light-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes light-converge { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-30%) scale(.7); } }
@keyframes gaze-zoom { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes window-breathe { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes glow-flash { 0%,100% { filter: brightness(1); opacity: 1; } 40% { filter: brightness(1.5); opacity: 1; } }
@keyframes key-flicker { 0% { opacity: 0; } 30% { opacity: .85; } 55% { opacity: .2; } 75% { opacity: .6; } 100% { opacity: 0; } }
@keyframes window-dawn-rise { from { opacity: .6; } to { opacity: 1; } }
@keyframes dawn-rise { from { opacity: 0; } to { opacity: .24; } }
@keyframes dawn-accelerate { from { opacity: .24; } to { opacity: .42; } }
@keyframes dawn-warm { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@keyframes blur-reveal { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes character-reveal { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes result-cue { 0%,100% { opacity: .8; transform: translate(-50%,-2px); } 50% { opacity: .8; transform: translate(-50%,4px); } }
@keyframes hook-a { 0%,34% { opacity: 1; } 43% { opacity: .18; } 48%,86% { opacity: 0; } 94% { opacity: .18; } 100% { opacity: 1; } }
@keyframes hook-b { 0%,48% { opacity: 0; } 53% { opacity: .18; } 62%,76% { opacity: 1; } 85% { opacity: .18; } 90%,100% { opacity: 0; } }

@keyframes temp-wave {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 1; }
}

@keyframes light-flicker {
  0%, 100% { opacity: 1; }
  7% { opacity: 0.8; }
  9% { opacity: 1; }
  23% { opacity: 0.9; }
  36% { opacity: 1; }
  44% { opacity: 0.68; }
  47% { opacity: 0.96; }
  63% { opacity: 0.86; }
  69% { opacity: 1; }
  86% { opacity: 0.9; }
}