:root {
  color-scheme: dark;
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #08031a;
  color: #f4f0ff;
  --ink: #f4f0ff;
  --muted: #8f78ba;
  --panel: rgba(11, 10, 34, .94);
  --panel-border: #70509e;
  --violet: #7138ff;
  --pink: #df49b5;
  --action-gradient: linear-gradient(100deg, var(--violet), var(--pink));
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
button { font: inherit; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.scene {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #09011d url("./assets/questionnaire-background.webp") center / cover no-repeat;
}

.hero { position: absolute; z-index: 1; pointer-events: none; user-select: none; }
.hero--desktop { right: -5vw; bottom: -5vh; height: 92vh; max-width: 58vw; object-fit: contain; object-position: right bottom; }
.scene--privacy .hero--desktop { z-index: 3; }
.hero--mobile { display: none; }
.scene-content { position: relative; z-index: 2; min-height: 100svh; display: grid; place-items: center; padding: 4vh 5vw; }

.panel {
  width: min(1180px, 76vw);
  min-height: 690px;
  padding: 34px 48px;
  border: 3px solid var(--panel-border);
  border-radius: 40px;
  background: linear-gradient(120deg, rgba(12, 11, 35, .97), rgba(22, 17, 55, .91));
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 20px 80px rgba(0,0,0,.2);
  animation: panel-reveal .28s ease-out both;
}

.compact-panel { width: min(1020px, 64vw); min-height: min(680px, 70vh); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.compact-panel h1 { margin: 34px 0 26px; font-size: clamp(30px, 2.4vw, 48px); font-weight: 500; }
.countdown { display: flex; align-items: center; justify-content: center; gap: 12px; color: #9a5cff; font: 400 27px ui-monospace, monospace; letter-spacing: 4px; }
.countdown img { filter: drop-shadow(0 0 8px rgba(134,70,255,.25)); }

.privacy-copy { max-width: 820px; margin: 0; color: #e8e1f6; font-size: 20px; line-height: 2; }
.privacy-copy span { display: block; }
.section-divider { display: flex; align-items: center; width: 100%; gap: 18px; margin: 28px 0; color: #7d639f; }
.section-divider::before, .section-divider::after { content: ""; height: 1px; flex: 1; background: #3a2d56; }
.promise-list { display: flex; gap: 16px; width: 72%; }
.promise-list span { flex: 1; padding: 14px; border: 1px solid #2e2445; border-radius: 14px; color: #9b86b8; }
.action-row { display: flex; justify-content: center; gap: 28px; width: 100%; margin-top: 42px; }
.action-button { min-width: 258px; min-height: 68px; border: 2px solid #7650a2; border-radius: 20px; background: #0d0a25; color: #d08afd; font-size: 22px; cursor: pointer; transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease; }
.action-button--primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-color: #d66ad0; background: var(--action-gradient); color: white; }

.loading-screen { gap: 18px; }
.loading-copy { max-width: 520px; color: #8d79aa; font-size: 18px; line-height: 1.7; }
.progress-track { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(150,134,184,.22); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6f3cff, #fff); transition: width 180ms ease; }
.loading-progress { width: min(580px, 80%); margin-top: 28px; }
.loading-progress .progress-fill { width: 100%; transform: scaleX(0); transform-origin: left center; animation: loading-fill 3s linear forwards; will-change: transform; }
.loading-status { margin: -4px 0 0; color: #75618e; }

.question-shell { width: 100%; }
.question-screen { margin: 0 auto; }
.question-header { position: relative; min-height: 86px; border-bottom: 1px solid #2b2142; }
.question-header h1 { position: absolute; top: 0; left: 0; margin: 0; font-size: 30px; font-weight: 400; }
.question-count { text-align: center; font-size: 22px; letter-spacing: 3px; }
.question-header .countdown { position: absolute; top: 0; right: 0; font-size: 20px; }
.question-progress { position: absolute; left: 165px; right: 150px; bottom: 28px; }
.question-layout { display: grid; grid-template-columns: 170px 1fr; gap: 40px; padding-top: 22px; }
.step-navigation { display: flex; flex-direction: column; gap: 10px; }
.step-item { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px; border: 1px solid #272039; border-radius: 17px; color: #75658f; font-size: 18px; }
.step-number { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #5b477b; border-radius: 50%; }
.step-item.is-active { border-color: #df58d4; background: var(--action-gradient); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.question-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; text-align: center; animation: content-reveal .24s ease-out both; }
.question-eyebrow { margin: 10px 0 12px; font-size: 31px; }
.question-content h2 { max-width: 880px; margin: 0; font-size: clamp(32px, 2.65vw, 53px); line-height: 1.35; font-weight: 500; }
.question-hint { margin: 18px 0 30px; color: #7e64a2; font-size: 20px; }
.text-options { display: grid; gap: 20px; width: min(520px, 80%); }
.text-option { position: relative; min-height: 70px; border: 2px solid #71509b; border-radius: 18px; background: #0d0a25; color: #c277ed; font-size: 22px; cursor: pointer; transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease; }
.text-option:first-child { background: var(--action-gradient); color: white; }
.text-option img { margin-right: 10px; vertical-align: middle; }
.text-option.is-selected, .image-option.is-selected { box-shadow: 0 0 24px #e44cc4; transform: translateY(-2px); }
.image-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; }
.image-option { overflow: hidden; padding: 0; border: 2px solid #7656a3; border-radius: 14px; background: #09071d; color: white; cursor: pointer; transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease; }
.image-option img { display: block; width: 100%; height: 245px; object-fit: cover; }
.image-option span { display: block; padding: 10px 5px; font-size: 17px; }
.image-options--position { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.image-options--position .image-option img { height: 390px; }
.mobile-navigation { display: none; }

.result-screen { min-height: 720px; padding-top: 28px; justify-content: flex-start; }
.result-screen h1 { margin: 22px 0 8px; color: #c06cf2; font-size: 28px; }
.result-subtitle { margin: 0 0 12px; color: #7f699a; }
.online-pill { padding: 9px 26px; border: 1px solid #51416f; border-radius: 999px; color: #aa91c9; }
.online-dot { display: inline-block; width: 12px; height: 12px; margin-right: 12px; border-radius: 50%; background: #55ff72; box-shadow: 0 0 12px #55ff72; }
.result-card { display: grid; grid-template-columns: 118px 1fr; align-items: center; column-gap: 18px; width: min(780px, 88%); margin: 30px auto 24px; padding: 26px 34px; border: 1px solid #7452a2; border-radius: 22px; background: linear-gradient(#44338f, #6e1e88); text-align: left; }
.result-card > img { grid-row: 1 / 3; width: 112px; height: 112px; border-radius: 20px; object-fit: cover; }
.download-button { display: block; width: 100%; min-height: 64px; margin: 0; border: 0; border-radius: 18px; background: var(--action-gradient); color: white; font-size: 22px; cursor: pointer; }
.download-button:disabled { cursor: not-allowed; filter: grayscale(.6); }
.result-card p { margin: 8px 0 0; color: #9073a8; }
.result-notice { max-width: 900px; color: #9b89b3; text-align: left; line-height: 1.7; }
.result-notice p { margin: 0 0 6px; }
.result-notice ul { margin: 0; padding-left: 20px; }

.timeout-screen p { margin: 0 0 28px; color: #8873a5; font-size: 18px; }
.timeout-screen .action-button { margin-top: 12px; }
@media (hover: hover) {
  .action-button:hover, .text-option:hover, .image-option:hover, .download-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); border-color: #dc71ec; box-shadow: 0 10px 26px rgba(128,55,220,.28); }
}
@keyframes loading-fill { to { transform: scaleX(1); } }
@keyframes panel-reveal { from { opacity: 0; filter: blur(3px); transform: scale(.995); } }
@keyframes content-reveal { from { opacity: 0; filter: blur(2px); } }
@media (max-width: 768px) {
  .scene { min-height: 100svh; overflow: visible; background-color: #17004a; background-image: url("./assets/questionnaire-background-mobile.png"), url("./assets/questionnaire-background-mobile.png"); background-size: 100% auto, 100% auto; background-repeat: no-repeat, repeat-y; background-position: top center, top center; }
  .hero--desktop { display: none; }
  .hero--mobile { display: block; top: 12px; left: 50%; width: min(88vw, 380px); height: auto; transform: translateX(-50%); }
  .scene-content { display: block; min-height: 100svh; padding: 288px 14px 28px; }
  .scene--questionnaire .scene-content { --question-top: clamp(228px, 31svh, 288px); padding-top: var(--question-top); }
  .panel { width: 100%; min-height: 0; padding: 20px 18px; border-width: 2px; border-radius: 30px; }
  .compact-panel { min-height: 500px; justify-content: flex-start; padding-top: 30px; }
  .compact-panel h1 { margin: 25px 0 22px; font-size: 26px; }
  .countdown { font-size: 20px; }
  .privacy-copy { font-size: 15px; line-height: 1.7; }
  .section-divider { margin: 22px 0; font-size: 13px; }
  .promise-list { width: 100%; gap: 8px; }
  .promise-list span { padding: 10px 3px; font-size: 13px; }
  .action-row { flex-direction: column; gap: 12px; margin-top: 28px; }
  .action-button { width: 100%; min-width: 0; min-height: 56px; font-size: 18px; }
  .loading-screen { padding-top: 40px; }
  .loading-progress { width: 100%; }
  .question-screen { display: flex; flex-direction: column; min-height: max(480px, calc(100svh - var(--question-top, 288px) - 88px)); padding: 18px 16px 20px; }
  .question-header { min-height: 82px; }
  .question-header h1 { font-size: 16px; }
  .question-header .countdown { font-size: 15px; }
  .question-header .countdown img { width: 23px; height: 23px; }
  .question-count { padding-top: 39px; text-align: left; font-size: 15px; }
  .question-progress { left: 0; right: 0; bottom: 11px; }
  .question-layout { display: flex; flex: 1; flex-direction: column; padding-top: 11px; }
  .question-layout > .step-navigation { display: none; }
  .question-eyebrow { margin: 0 0 4px; font-size: 18px; }
  .question-content { flex: 1; }
  .question-content h2 { font-size: clamp(19px, 5.5vw, 24px); line-height: 1.32; }
  .question-hint { margin: 6px 0 12px; font-size: 12px; }
  .text-options { width: 100%; gap: 10px; }
  .text-option { min-height: 52px; font-size: 16px; }
  .image-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .image-option img { height: clamp(96px, 26vw, 112px); }
  .image-option span { padding: 6px 2px; font-size: 12px; }
  .image-options--position .image-option img { height: clamp(136px, 38vw, 158px); }
  .mobile-navigation { display: block; margin: 14px 0 0; overflow: visible; }
  .mobile-navigation .step-navigation { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .mobile-navigation .step-item { flex-direction: column; justify-content: center; gap: 0; width: clamp(40px, 10vw, 46px); height: clamp(40px, 10vw, 46px); min-height: 0; padding: 0; border-radius: 50%; font-size: 12px; justify-self: center; }
  .mobile-navigation .step-number { display: none; }
  .result-screen { min-height: 720px; }
  .result-card { display: block; width: 100%; margin: 16px 0; padding: 14px 16px; text-align: center; }
  .result-card > img { width: 92px; height: 92px; }
  .download-button { min-height: 54px; margin-top: 8px; font-size: 17px; }
  .result-notice { font-size: 13px; }
  .timeout-screen { min-height: 500px; justify-content: center; }
}

@media (max-width: 768px) and (max-height: 820px) {
  .scene--questionnaire .scene-content { padding-bottom: 16px; }
  .image-option img { height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}