:root {
  color-scheme: light;
  --ink: #2e2240;
  --quiet: #675677;
  --purple: #5735ab;
  --dark: #44278e;
  --line: #e4dbef;
  --paper: #fffdff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; }
body {
  margin: 0;
  color: #2e2240;
  color: var(--ink);
  background: #f7f1fb;
  background-image: radial-gradient(#dcd0e8 1px, transparent 1px), linear-gradient(145deg,#fcf6f0,#f4ecff 78%);
  background-size: 22px 22px, auto;
  font-family: "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:not(:disabled) { cursor: pointer; }
button:focus { outline: 3px solid #8661dd; outline-offset: 3px; }
button:focus:not(:focus-visible) { outline: none; }
h1[tabindex]:focus { outline: none; }
.shell {
  max-width: 472px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 21px 24px 16px;
  background: #fffdff;
  background: var(--paper);
  border-left: 1px solid #e9e0ef;
  border-right: 1px solid #e9e0ef;
  box-shadow: 0 18px 62px rgba(68,37,99,.08);
}
.mast { display:flex; align-items:center; justify-content:space-between; margin-bottom: 21px; }
.wordmark { display:flex; align-items:center; font-size:15px; font-weight:800; letter-spacing:.11em; }
.mark {
  display:inline-flex; justify-content:center; align-items:center; width:30px; height:30px; margin-right:9px;
  border-radius:10px; background:#ded0ff; color:#503195; font:700 16px Georgia,serif;
  transform:rotate(-7deg);
}
.mast-index {
  display:block; padding:5px 9px; border:1px solid #e7dcf0; border-radius:100px;
  background:#fbf8ff; color:#675677; font-size:10px; font-weight:700; letter-spacing:.09em; white-space:nowrap;
}
.mast-index span, .hero-foot span:first-child, .question-progress { font-variant-numeric:tabular-nums; }
.mast-index span { margin-left:3px; color:#5735ab; font-family:monospace; font-size:11px; }
.hero {
  overflow:hidden; position:relative; text-align:center; border:1px solid #dccbf0; border-radius:25px;
  padding:23px 16px 0;
  background-color:#f1e7ff;
  background-image:linear-gradient(rgba(109,72,164,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(109,72,164,.075) 1px,transparent 1px),linear-gradient(153deg,#f9effe 4%,#ebe0ff 72%,#f3e6ff);
  background-size:21px 21px,21px 21px,auto;
  box-shadow:0 5px 0 #f0e7f8;
}
.hero-label {
  display:inline-flex; align-items:center; padding:5px 11px; border:1px solid #dbc6f2; border-radius:99px;
  color:#573b80; background:#fff9ff; font-size:11px; font-weight:800; letter-spacing:.17em;
}
.hero-label span { width:6px; height:6px; border-radius:50%; background:#8c64d9; margin-right:7px; }
.hero h1 { position:relative; margin:14px -4px 0; font-size:38px; font-size:clamp(29px,8vw,38px); line-height:1.2; font-weight:900; letter-spacing:-.055em; }
.hero h1 em { font-style:normal; color:#5834a7; text-decoration:underline; text-decoration-color:#c6a7f3; text-underline-offset:5px; }
.hero-illustration { max-width:342px; position:relative; margin:-3px auto -6px; }
.hero-illustration img { width:100%; height:auto; display:block; }
.bubble {
  position:absolute; z-index:1; padding:6px 9px; background:#fffaf1; color:#513877; font-size:11px; font-weight:800; white-space:nowrap;
  border:1px solid #725694; box-shadow:2px 3px 0 rgba(104,62,157,.18); border-radius:9px;
}
.bubble-left { top:23%; left:2%; transform:rotate(-10deg); }
.bubble-right { top:51%; right:1%; transform:rotate(9deg); background:#eee4ff; }
.hero-foot {
  display:flex; align-items:center; justify-content:space-between; position:relative;
  border-top:1px dashed #bfabd8; padding:9px 1px 10px; color:#634887;
  font-size:10px; font-weight:800; letter-spacing:.12em;
}
.hero-foot span:first-child { font-family:monospace; }
.intro { margin:22px 0 18px; color:#675677; color:var(--quiet); text-align:center; font-size:14px; line-height:1.8; }
.primary {
  position:relative; display:block; width:100%; min-height:52px; padding:12px 42px;
  border:1px solid #44278e; border-radius:15px; color:white; background:#5735ab; background:var(--purple);
  font-size:15px; font-weight:800; letter-spacing:.1em;
  box-shadow:0 4px 0 #382266; transition:background-color .15s,transform .15s,box-shadow .15s;
}
.primary:hover:not(:disabled) { background:#492b98; }
.primary:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 #382266; }
.primary:disabled { background:#eae2f3; border-color:#e1d8ec; color:#77658b; box-shadow:0 3px 0 #e1d8ec; }
.button-arrow { position:absolute; right:15px; top:50%; transform:translateY(-50%); font-size:18px; font-family:Arial,sans-serif; line-height:1; }
.meta { text-align:center; font-size:11px; color:#6d5a81; margin:16px 0 0; }
.meta span { margin:0 3px; }
.footer {
  display:flex; align-items:center; justify-content:space-between; margin-top:26px; padding-top:12px; gap:8px;
  border-top:1px solid #ece3f1; color:#735e85; font-size:10px; letter-spacing:.04em;
}
.question-progress { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; color:#695581; font-size:12px; font-weight:800; letter-spacing:.07em; }
.question-progress span:first-child { color:#5735ab; }
.segments { display:flex; flex:1 0 100%; margin-top:9px; }
.segments i { flex:1; height:5px; border-radius:4px; background:#eee6f5; }
.segments i + i { margin-left:5px; }
.segments .complete { background:#7348c8; }
.segments .current { background:#b99be9; }
.question-title {
  margin-top:17px; padding:19px 18px 18px; border-radius:19px; border:1px solid #e4d5f1;
  background:#f3eaff; background-image:linear-gradient(135deg,#fbf3ff,#eee2ff);
}
.scene { color:#67439a; font-size:11px; letter-spacing:.09em; font-weight:800; }
.scene span:first-child { margin-right:4px; }
.question-title h1 { margin:10px 0 0; font-size:25px; line-height:1.42; font-weight:900; letter-spacing:-.02em; }
.options { margin-top:13px; }
.option {
  display:flex; width:100%; min-height:55px; text-align:left; align-items:center; margin-bottom:8px; padding:10px 12px;
  border:1px solid #e6dbef; border-radius:13px; background:#fffaff; font-size:14px; line-height:1.5;
}
.option:hover { border-color:#af95db; }
.option[aria-pressed="true"] { background:#f1e6ff; border-color:#8560cc; color:#3f257a; box-shadow:0 0 0 1px #8560cc inset; }
.option-code {
  display:inline-flex; flex:0 0 26px; align-items:center; justify-content:center; height:26px; margin-right:10px;
  background:#eee5f8; border-radius:8px; font:800 12px monospace; color:#6b4d9a;
}
.option[aria-pressed="true"] .option-code { color:white; background:#6b43b4; }
.option-text { flex:1; min-width:0; }
.controls { display:flex; align-items:stretch; margin-top:14px; }
.controls .primary { flex:1; width:auto; margin-left:10px; min-width:0; padding-left:28px; }
.secondary {
  min-height:46px; padding:9px 14px; border:1px solid #e0d4ee; border-radius:13px; color:#634489;
  background:#fffaff; font-size:13px; font-weight:800; white-space:nowrap;
}
.secondary:hover { background:#f3eaff; }
.secondary span:first-child { margin-right:3px; }
.result-heading { text-align:center; margin: 3px 0 12px; }
.result-heading h1 { font-size:23px; margin:4px 0 0; font-weight:900; letter-spacing:-.025em; }
.result-card {
  display:block; width:100%; max-width:360px; height:auto; margin:0 auto 16px; border-radius:19px;
  background:#f2eafa; box-shadow:0 4px 15px rgba(65,42,91,.14);
}
.save-message { margin:12px 0 6px; min-height:18px; text-align:center; font-size:12px; color:#69557e; line-height:1.5; }
.restart { display:block; margin:0 auto; border-color:transparent; background:transparent; min-height:36px; padding:7px 14px; }
@media (max-width:480px) {
  body { background:#fffdff; }
  .shell { border:0; box-shadow:none; }
}
@media (max-width:370px) {
  .shell { padding:16px 15px 12px; }
  .mast { margin-bottom:15px; }
  .hero { padding-top:19px; }
  .hero h1 { font-size:29px; }
  .intro { margin:17px 0 14px; }
  .question-title { margin-top:13px; padding:15px 14px; }
  .question-title h1 { margin-top:8px; font-size:22px; }
  .options, .controls { margin-top:10px; }
  .option { min-height:50px; margin-bottom:6px; padding:8px 10px; line-height:1.42; }
  .footer { margin-top:20px; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; }
}