:root {
  color-scheme: light;
  font-family: "Arial Black", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ink: #121318;
  --blue: #62c8f3;
  --blue-deep: #28aee8;
  --yellow: #ffdf18;
  --lime: #b8ff37;
  --cream: #fffdf2;
  --pink: #ff8fbc;
  --green: #17c98a;
  --line: 3px solid var(--ink);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #171717;
}

body {
  min-height: 100dvh;
  overflow: hidden;
}

button {
  color: inherit;
  font: inherit;
}

.app-shell {
  position: relative;
  width: min(100%, 430px);
  height: 100dvh;
  min-height: 640px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--blue);
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(22px);
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s;
  overflow: hidden;
}

.screen.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.topbar {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: max(13px, env(safe-area-inset-top)) 20px 0;
  flex: 0 0 auto;
}

.icon-button {
  display: grid;
  width: 39px;
  height: 39px;
  padding: 0;
  place-items: center;
  border: 2px solid rgba(18, 19, 24, 0.7);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(18, 19, 24, 0.55);
}

.icon-button:active { transform: translate(2px, 2px); box-shadow: none; }
.icon-button:disabled { opacity: 0.42; }
.icon-button span { font: 32px/1 Arial, sans-serif; transform: translateY(-2px); }
.icon-button .share-icon { font-size: 23px; transform: none; }
.icon-button .palette-icon { font-size: 22px; transform: none; }

.mini-brand {
  padding: 6px 12px 5px;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 1.8px;
  border: 2px solid var(--cream);
  border-radius: 999px;
  transform: rotate(-2deg);
}

.mini-brand.dark { color: var(--ink); border-color: var(--ink); }

.cover-screen {
  background: var(--blue);
}

.cover-screen::before {
  content: "";
  position: absolute;
  width: 85%;
  height: 42%;
  right: -40%;
  top: 14%;
  background: var(--lime);
  border: var(--line);
  border-radius: 50%;
  transform: rotate(-27deg);
}

.cover-screen::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 140px;
  left: -110px;
  bottom: 7%;
  background: var(--pink);
  border: var(--line);
  border-radius: 50%;
  transform: rotate(18deg);
}

.cover-copy {
  z-index: 2;
  position: relative;
  padding: clamp(24px, 5vh, 46px) 27px 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font: 700 11px/1.2 Arial, sans-serif;
  letter-spacing: 1.3px;
}

.eyebrow span { width: 25px; height: 4px; background: var(--ink); border-radius: 3px; }

.cover-copy h1 {
  margin: 0;
  font-size: clamp(38px, 10.6vw, 49px);
  line-height: 1.09;
  letter-spacing: -2px;
  transform: scaleX(0.94);
  transform-origin: left;
}

.cover-copy h1 span {
  display: inline-block;
  margin-top: 6px;
  padding: 0 5px 4px;
  background: var(--yellow);
  border: var(--line);
  box-shadow: 5px 6px 0 var(--ink);
  transform: rotate(-1deg);
}

.subtitle {
  margin: 20px 0 0;
  font: 600 15px/1.6 "PingFang SC", sans-serif;
  letter-spacing: 0.5px;
}

.hero-art {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 265px;
}

.sunburst {
  position: absolute;
  width: 260px;
  height: 260px;
  left: 86px;
  top: 17px;
  border: var(--line);
  border-radius: 50%;
  background: repeating-conic-gradient(var(--yellow) 0 14deg, #ffe96a 14deg 27deg);
  animation: rotate 24s linear infinite;
}

.desk {
  position: absolute;
  z-index: 3;
  width: 290px;
  height: 74px;
  left: 88px;
  bottom: 13px;
  border: var(--line);
  border-radius: 8px 8px 26px 8px;
  background: var(--cream);
  transform: rotate(-3deg);
  box-shadow: 8px 9px 0 var(--ink);
}

.laptop {
  position: absolute;
  width: 105px;
  height: 74px;
  right: 28px;
  top: -55px;
  display: grid;
  place-items: center;
  border: var(--line);
  border-radius: 6px;
  background: var(--pink);
  transform: skew(-4deg) rotate(2deg);
}

.laptop span { font: 900 23px Arial; transform: rotate(-4deg); }
.mug { position: absolute; right: -2px; top: -15px; width: 34px; height: 35px; border: var(--line); border-radius: 4px 4px 12px 12px; background: var(--lime); }
.mug::after { content: ""; position: absolute; width: 13px; height: 17px; right: -12px; top: 5px; border: var(--line); border-left: 0; border-radius: 0 12px 12px 0; }

.plant { position: absolute; left: 20px; top: -47px; width: 44px; height: 48px; }
.plant b { position: absolute; bottom: -1px; left: 9px; width: 35px; height: 27px; border: var(--line); background: #ff735e; border-radius: 4px 4px 13px 13px; }
.plant i { position: absolute; width: 23px; height: 34px; bottom: 18px; left: 16px; background: var(--green); border: var(--line); border-radius: 100% 0 100% 0; transform-origin: bottom; }
.plant i:nth-child(1) { transform: rotate(-38deg); }
.plant i:nth-child(2) { transform: rotate(20deg); }
.plant i:nth-child(3) { transform: translateY(-8px) rotate(-5deg); }

.character {
  position: absolute;
  z-index: 4;
  left: 116px;
  bottom: 63px;
  width: 120px;
  height: 160px;
  animation: float 3.2s ease-in-out infinite;
}

.head { position: absolute; width: 79px; height: 72px; left: 22px; top: 15px; border: var(--line); border-radius: 45% 48% 50% 48%; background: #ffd2aa; z-index: 2; }
.hair { position: absolute; z-index: 3; left: 15px; top: 6px; width: 95px; height: 44px; border: var(--line); border-bottom: 0; border-radius: 80% 70% 15% 10%; background: var(--ink); transform: rotate(-5deg); }
.hair::after { content: ""; position: absolute; right: -7px; bottom: -18px; width: 21px; height: 35px; background: var(--ink); border-radius: 40%; transform: rotate(-18deg); }
.head i { position: absolute; top: 33px; width: 8px; height: 11px; background: var(--ink); border-radius: 50%; }
.head i:first-child { left: 20px; }
.head i:nth-child(2) { right: 20px; }
.head b { position: absolute; width: 21px; height: 9px; left: 28px; bottom: 9px; border-bottom: 3px solid var(--ink); border-radius: 50%; }
.body { position: absolute; z-index: 1; left: 4px; bottom: 0; width: 114px; height: 91px; padding-top: 31px; text-align: center; border: var(--line); border-radius: 52% 52% 12px 12px; background: var(--green); font: 900 19px Arial; }
.arm { position: absolute; z-index: 5; left: -17px; bottom: 38px; width: 52px; height: 23px; border: var(--line); border-radius: 20px; background: #ffd2aa; transform: rotate(-22deg); }

.note { position: absolute; z-index: 5; display: grid; place-items: center; padding: 7px; border: var(--line); box-shadow: 4px 4px 0 var(--ink); font-size: 11px; text-align: center; }
.note-a { left: 22px; top: 58px; width: 68px; height: 68px; background: var(--pink); transform: rotate(-9deg); }
.note-b { right: 24px; top: 73px; width: 62px; height: 42px; background: var(--cream); transform: rotate(7deg); }
.scribble { position: absolute; z-index: 4; font: 900 42px Arial; }
.scribble-one { left: 48px; bottom: 54px; transform: rotate(-12deg); }
.scribble-two { right: 23px; top: 3px; font-size: 55px; transform: rotate(23deg); }

.cover-actions {
  position: relative;
  z-index: 6;
  padding: 4px 27px max(18px, env(safe-area-inset-bottom));
  text-align: center;
}

.current-theme {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding: 0 5px;
  border: 0;
  background: transparent;
  font: 700 11px/1.2 "PingFang SC", sans-serif;
  cursor: pointer;
}
.current-theme > span { opacity: .55; }
.current-theme strong { justify-self: start; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); }
.current-theme i { font-style: normal; }

.primary-button {
  width: 100%;
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: var(--line);
  border-radius: 15px;
  background: var(--ink);
  color: white;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 6px 7px 0 var(--cream);
}

.primary-button i { font-style: normal; color: var(--lime); font-size: 26px; transition: transform 0.2s; }
.primary-button:active { transform: translate(3px, 3px); box-shadow: 3px 4px 0 var(--cream); }
.primary-button:active i { transform: translateX(4px); }
.cover-actions p { margin: 13px 0 0; font: 500 11px/1.2 "PingFang SC", sans-serif; }

/* Questions */
.question-screen { background: var(--yellow); }
.question-bg { position: absolute; inset: 0; overflow: hidden; }
.blob { position: absolute; display: block; border: var(--line); border-radius: 45% 55% 61% 39% / 44% 38% 62% 56%; }
.blob-a { width: 320px; height: 360px; right: -122px; top: -92px; background: var(--blue); transform: rotate(20deg); }
.blob-b { width: 300px; height: 300px; left: -180px; bottom: -60px; background: var(--pink); transform: rotate(30deg); }
.spark { position: absolute; font-size: 32px; }
.spark-a { right: 34px; top: 150px; }
.spark-b { left: 25px; bottom: 84px; }

.question-topbar { height: 68px; }
.progress-wrap { z-index: 2; padding: 20px 27px 0; }
.progress-copy { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 9px; }
.progress-copy > span { font: 900 11px Arial; letter-spacing: 1.5px; }
.progress-copy strong { font: 800 14px Arial; }
.progress-copy strong b { font-size: 24px; font-style: italic; }
.progress-copy strong i { font-style: normal; opacity: 0.55; }
.progress-track { height: 10px; padding: 2px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); }
.progress-track span { display: block; height: 100%; width: 16.666%; border-radius: 999px; background: var(--green); transition: width 0.42s cubic-bezier(.2,.9,.2,1); }

.question-card {
  position: relative;
  z-index: 3;
  flex: 1;
  min-height: 0;
  margin: 25px 20px 14px;
  padding: clamp(25px, 4.5vh, 42px) 18px 18px;
  border: var(--line);
  border-radius: 28px 12px 25px 16px;
  background: var(--cream);
  box-shadow: 8px 9px 0 var(--ink);
  transform: rotate(-0.5deg);
}

.question-card.is-changing { animation: cardIn 0.36s ease both; }
.standard-question { height: 100%; }
.chat-question, .scale-question { display: none; height: 100%; }
.question-sticker { position: absolute; right: 18px; top: -17px; padding: 8px 13px 6px; border: var(--line); background: var(--pink); transform: rotate(4deg); font: 900 11px Arial; box-shadow: 3px 3px 0 var(--ink); }
.question-kicker { margin: 0 0 9px; font: 800 13px/1.2 "PingFang SC", sans-serif; color: #168960; }
.question-card h2 { min-height: 70px; margin: 0 0 clamp(18px, 3vh, 30px); font-size: clamp(23px, 6.7vw, 30px); line-height: 1.28; letter-spacing: -0.7px; }
.options { display: grid; gap: clamp(11px, 2vh, 16px); }

.option-button {
  position: relative;
  width: 100%;
  min-height: 65px;
  display: grid;
  grid-template-columns: 43px 1fr 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 10px;
  border: 2.5px solid var(--ink);
  border-radius: 17px 10px 16px 12px;
  background: #fff;
  text-align: left;
  font: 700 15px/1.35 "PingFang SC", sans-serif;
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform 0.16s, background 0.16s, box-shadow 0.16s;
}

.option-button:nth-child(even) { transform: rotate(0.35deg); }
.option-button:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.option-button.is-selected { background: var(--green); transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.option-letter { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font: italic 900 20px/1 Arial; }
.option-check { font: 900 22px Arial; opacity: 0; transform: scale(0.4) rotate(-15deg); transition: 0.2s; }
.option-button.is-selected .option-check { opacity: 1; transform: scale(1) rotate(0); }

.comic-next, .scale-next {
  display: none;
  width: 100%;
  height: 49px;
  margin-top: 14px;
  border: var(--line);
  border-radius: 12px;
  background: var(--ink);
  color: white;
  font: 800 14px "PingFang SC", sans-serif;
  box-shadow: 4px 4px 0 white;
  cursor: pointer;
}
.comic-next:disabled, .scale-next:disabled { opacity: .35; cursor: default; }

/* Conversational questionnaire */
.question-card[data-mode="chat"] { padding: 13px 14px 15px; border-radius: 27px; background: linear-gradient(160deg,#f8fffc,#eefeff); }
.question-card[data-mode="chat"] .standard-question,
.question-card[data-mode="scale"] .standard-question { display:none; }
.question-card[data-mode="chat"] .chat-question { display:flex; flex-direction:column; }
.chat-status { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 11px; border-bottom:2px solid #28524a; font:700 11px "PingFang SC",sans-serif; }
.chat-status span { display:flex; align-items:center; gap:6px; }
.chat-status i { display:block; width:8px; height:8px; border-radius:50%; background:#31d89b; box-shadow:0 0 0 3px #c5f6e4; }
.chat-status b { letter-spacing:3px; }
.chat-thread { flex:1; min-height:0; overflow-y:auto; padding:16px 5px 10px; scrollbar-width:none; }
.chat-thread::-webkit-scrollbar { display:none; }
.chat-row { display:flex; align-items:flex-end; gap:8px; margin-bottom:13px; animation:chatIn .3s ease both; }
.chat-row.user { justify-content:flex-end; }
.chat-avatar { flex:0 0 31px; display:grid; width:31px; height:31px; place-items:center; border:2px solid #28524a; border-radius:50%; background:#fff0a8; font:900 13px Arial; }
.chat-row.user .chat-avatar { order:2; background:#ffc7dc; }
.chat-bubble { max-width:78%; padding:10px 12px; border:2px solid #28524a; border-radius:16px 16px 16px 4px; background:white; font:600 13px/1.45 "PingFang SC",sans-serif; box-shadow:2px 3px 0 rgba(40,82,74,.25); }
.chat-row.user .chat-bubble { border-radius:16px 16px 4px 16px; background:#b7f8d9; }
.chat-bubble small { display:block; margin-bottom:4px; color:#4ba887; font:700 9px Arial; letter-spacing:1px; }
.chat-typing { display:flex; gap:4px; align-items:center; width:55px; padding:10px 12px; border:2px solid #28524a; border-radius:16px 16px 16px 4px; background:white; }
.chat-typing i { width:5px; height:5px; border-radius:50%; background:#28524a; animation:typing 1s ease-in-out infinite; }
.chat-typing i:nth-child(2){animation-delay:.14s}.chat-typing i:nth-child(3){animation-delay:.28s}
.chat-replies { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:10px; border-top:2px dashed rgba(40,82,74,.35); }
.chat-reply { min-height:48px; padding:7px 8px; border:2px solid #28524a; border-radius:14px; background:#fff0a8; font:700 11px/1.35 "PingFang SC",sans-serif; cursor:pointer; }
.chat-reply:nth-child(2){background:#ffc7dc}.chat-reply:nth-child(3){background:#bcefff}.chat-reply:nth-child(4){background:#b7f8d9}
.chat-reply.is-selected { color:white; background:#28524a; transform:translateY(2px); }

/* Seven-step personality scale */
.question-card[data-mode="scale"] { display:flex; flex-direction:column; justify-content:center; padding:25px 18px; border-color:#075687; background:rgba(249,255,255,.9); box-shadow:8px 9px 0 #075687; }
.question-card[data-mode="scale"] .scale-question { display:flex; flex-direction:column; justify-content:center; }
.scale-topline { display:flex; justify-content:space-between; align-items:center; margin-bottom:27px; font:900 10px Arial; letter-spacing:1.3px; }
.scale-topline b { display:grid; width:45px; height:37px; place-items:center; border:2px solid #075687; border-radius:9px; color:#075687; background:#fff800; font:italic 900 21px Arial; box-shadow:3px 3px 0 #075687; }
.scale-kicker { margin:0 0 8px; text-align:center; color:#0876a9; font:700 12px "PingFang SC",sans-serif; }
.scale-question h2 { min-height:112px; margin:0 0 29px; display:grid; place-items:center; text-align:center; font-size:25px; line-height:1.42; }
.scale-options { display:flex; justify-content:space-between; align-items:center; gap:5px; }
.scale-option { display:grid; place-items:center; padding:0; border:3px solid #07966d; border-radius:50%; background:white; cursor:pointer; transition:.18s; }
.scale-option:nth-child(1),.scale-option:nth-child(7){width:42px;height:42px}
.scale-option:nth-child(2),.scale-option:nth-child(6){width:37px;height:37px}
.scale-option:nth-child(3),.scale-option:nth-child(5){width:32px;height:32px}
.scale-option:nth-child(4){width:28px;height:28px;border-color:#748389}
.scale-option:nth-child(n+5){border-color:#7845a0}
.scale-option::after { content:""; width:46%; height:46%; border-radius:50%; background:transparent; }
.scale-option.is-selected { transform:scale(1.13); box-shadow:0 0 0 3px rgba(255,248,0,.8); }
.scale-option.is-selected::after { background:currentColor; }
.scale-option:nth-child(-n+3){color:#00bc83}.scale-option:nth-child(n+5){color:#8d48bd}.scale-option:nth-child(4){color:#748389}
.scale-labels { display:flex; justify-content:space-between; margin:10px 0 25px; color:#697a80; font:700 10px "PingFang SC",sans-serif; }
.scale-next { display:block; margin-top:0; border-color:#075687; border-radius:999px; background:linear-gradient(100deg,#063c91,#4e167c); box-shadow:0 5px 0 #0876a9; }

.question-footer { z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 0 26px max(22px, env(safe-area-inset-bottom)); font: 500 10px "PingFang SC", sans-serif; }
.previous-button, .text-button { padding: 6px 0; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font: 800 14px "PingFang SC", sans-serif; cursor: pointer; }
.previous-button:disabled { opacity: 0.32; }

/* Loading */
.loading-screen { align-items: center; justify-content: center; background: var(--ink); color: white; }
.loading-blob { position: absolute; width: 320px; height: 320px; border: 3px solid white; border-radius: 43% 57% 61% 39%; opacity: 0.23; }
.blob-one { left: -190px; top: -80px; background: var(--blue); animation: rotate 12s linear infinite; }
.blob-two { right: -190px; bottom: -90px; background: var(--pink); animation: rotate 9s linear infinite reverse; }
.loading-content { z-index: 2; width: 76%; text-align: center; }
.orbit { position: relative; width: 128px; height: 128px; margin: 0 auto 30px; border: 3px solid white; border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; }
.orbit::after { content: ""; position: absolute; inset: 17px; border: 3px dashed var(--lime); border-radius: 50%; animation: rotate 5s linear infinite; }
.orbit span { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: var(--yellow); font-size: 47px; }
.orbit i, .orbit b { position: absolute; z-index: 3; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; }
.orbit i { top: 4px; left: 7px; background: var(--pink); }
.orbit b { bottom: 0; right: 5px; background: var(--blue); }
.loading-content p { margin: 0 0 25px; font: 800 18px "PingFang SC", sans-serif; }
.loading-track { height: 13px; padding: 2px; border: 2px solid white; border-radius: 999px; }
.loading-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--lime); transition: width 0.1s linear; }
.loading-content > strong { display: block; margin-top: 11px; color: var(--lime); font: italic 900 22px Arial; }

/* Result */
.result-screen { overflow-y: auto; background: var(--result-accent, var(--pink)); }
.result-screen::before { content: ""; position: absolute; width: 260px; height: 260px; right: -125px; top: 140px; border: var(--line); border-radius: 50%; background: var(--yellow); }
.result-screen::after { content: ""; position: absolute; width: 220px; height: 220px; left: -150px; top: 420px; border: var(--line); border-radius: 43% 57% 60% 40%; background: var(--lime); }
.result-topbar { position: relative; }
.result-heading { position: relative; z-index: 2; padding: 20px 25px 16px; text-align: center; }
.result-heading p { margin: 0 0 9px; font: 900 10px Arial; letter-spacing: 1.5px; }
.result-heading h2 { display: inline; margin: 0; padding: 1px 7px 3px; border-bottom: 5px solid var(--yellow); font-size: clamp(36px, 10vw, 46px); line-height: 1.15; letter-spacing: -2px; }
.result-heading > span { display: block; margin-top: 8px; font: italic 900 12px Arial; letter-spacing: 1px; }

.result-poster { position: relative; z-index: 2; margin: 3px 22px 20px; padding: 18px 18px 20px; border: var(--line); border-radius: 20px 9px 24px 12px; background: var(--cream); box-shadow: 8px 9px 0 var(--ink); }
.poster-label { position: absolute; right: -8px; top: 18px; padding: 6px 12px; border: var(--line); background: var(--blue); transform: rotate(5deg); font: 900 12px Arial; box-shadow: 3px 3px 0 var(--ink); }
.result-avatar { position: relative; width: 150px; height: 142px; margin: 0 auto 3px; }
.avatar-rays { position: absolute; inset: 4px; border: var(--line); border-radius: 50%; background: repeating-conic-gradient(var(--yellow) 0 14deg, var(--pink) 14deg 28deg); }
.avatar-face { position: absolute; z-index: 2; width: 75px; height: 70px; left: 38px; top: 23px; border: var(--line); border-radius: 45% 48% 50%; background: #ffd2aa; }
.avatar-face::before { content: ""; position: absolute; left: -7px; top: -9px; width: 84px; height: 31px; border: var(--line); border-bottom: 0; border-radius: 70% 70% 15% 15%; background: var(--ink); transform: rotate(-4deg); }
.avatar-face i { position: absolute; z-index: 2; top: 34px; width: 7px; height: 10px; background: var(--ink); border-radius: 50%; }
.avatar-face i:first-child { left: 19px; }
.avatar-face i:nth-child(2) { right: 19px; }
.avatar-face b { position: absolute; width: 20px; height: 8px; left: 26px; bottom: 8px; border-bottom: 3px solid var(--ink); border-radius: 50%; }
.avatar-body { position: absolute; z-index: 3; bottom: 0; left: 27px; width: 98px; height: 58px; display: grid; place-items: center; border: var(--line); border-radius: 45% 45% 10px 10px; background: var(--green); font: 900 15px Arial; }
.result-poster blockquote { margin: 7px 0 15px; text-align: center; font: 800 18px/1.48 "PingFang SC", sans-serif; }
.energy-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 11px 0; border-top: 2px dashed var(--ink); border-bottom: 2px dashed var(--ink); font: 800 12px "PingFang SC", sans-serif; }
.energy-row > div { display: flex; gap: 5px; }
.energy-row i { display: block; width: 22px; height: 14px; border: 2px solid var(--ink); border-radius: 4px; background: var(--yellow); transform: skew(-8deg); }
.tags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 15px 0 12px; }
.tags span { padding: 5px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime); font: 800 11px "PingFang SC", sans-serif; }
.tags span:nth-child(2) { background: var(--blue); }
.tags span:nth-child(3) { background: var(--pink); }
.result-description { margin: 0; font: 500 13px/1.62 "PingFang SC", sans-serif; }
.result-actions { position: relative; z-index: 3; padding: 0 27px max(24px, env(safe-area-inset-bottom)); text-align: center; }
.result-share { height: 56px; box-shadow: 5px 6px 0 var(--yellow); }
.result-actions .text-button { margin-top: 17px; }

.toast { position: fixed; z-index: 50; left: 50%; bottom: max(35px, env(safe-area-inset-bottom)); padding: 11px 17px; color: white; background: rgba(18,19,24,.9); border-radius: 999px; font: 600 13px "PingFang SC", sans-serif; opacity: 0; transform: translate(-50%, 15px); transition: .25s; pointer-events: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Theme picker */
.theme-sheet { position: absolute; z-index: 80; inset: 0; visibility: hidden; pointer-events: none; }
.theme-sheet.is-open { visibility: visible; pointer-events: auto; }
.theme-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(18,19,24,.62); opacity: 0; transition: opacity .25s; }
.theme-sheet.is-open .theme-backdrop { opacity: 1; }
.theme-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 19px max(25px, env(safe-area-inset-bottom)); border: var(--line); border-bottom: 0; border-radius: 28px 28px 0 0; background: var(--cream); transform: translateY(102%); transition: transform .32s cubic-bezier(.2,.9,.2,1); }
.theme-sheet.is-open .theme-panel { transform: translateY(0); }
.sheet-handle { width: 48px; height: 5px; margin: 0 auto 15px; border-radius: 999px; background: var(--ink); opacity: .22; }
.theme-panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.theme-panel-heading p { margin: 0 0 3px; font: 900 9px Arial; letter-spacing: 1.3px; opacity: .55; }
.theme-panel-heading h2 { margin: 0; font-size: 24px; }
.sheet-close { display: grid; width: 36px; height: 36px; padding: 0 0 4px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font: 400 27px/1 Arial; cursor: pointer; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.theme-card { position: relative; display: grid; grid-template-columns: 55px 1fr; grid-template-rows: auto auto; column-gap: 9px; min-height: 82px; padding: 9px; border: 2px solid var(--ink); border-radius: 15px; background: white; text-align: left; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.theme-card.is-selected { background: #efffd4; outline: 3px solid var(--green); outline-offset: -5px; }
.theme-card > strong { align-self: end; font: 800 13px "PingFang SC", sans-serif; }
.theme-card > small { align-self: start; margin-top: 4px; font: 500 9px "PingFang SC", sans-serif; opacity: .6; }
.theme-check { position: absolute; right: 6px; top: 5px; display: none; width: 19px; height: 19px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--green); font: 900 12px Arial; }
.theme-card.is-selected .theme-check { display: grid; }
.theme-preview { position: relative; grid-row: 1 / 3; display: block; width: 55px; height: 60px; overflow: hidden; border: 2px solid var(--ink); border-radius: 9px; background: var(--blue); }
.theme-preview i { position: absolute; z-index: 3; left: 6px; top: 7px; display: grid; width: 20px; height: 20px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font: italic 900 10px Arial; }
.theme-preview b, .theme-preview em { position: absolute; display: block; border: 2px solid var(--ink); }
.theme-preview b { width: 43px; height: 14px; left: 6px; top: 35px; border-radius: 5px; background: white; }
.theme-preview em { width: 36px; height: 36px; right: -18px; top: -10px; border-radius: 50%; background: var(--lime); }
.preview-comic { background: #68b3f0; }
.preview-comic::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 48%, #ffdf18 49%); }
.preview-comic i,.preview-comic b { z-index:2; }
.preview-paper { background: linear-gradient(145deg,#dfffee,#ffe2e8); border-color: #28524a; }
.preview-paper b { border-color:#28524a; border-radius: 9px; background:#ffaed0; box-shadow: 0 16px 0 #fff0a8; }
.preview-paper em { border:0; background:rgba(255,255,255,.7); }
.preview-arcade { background: linear-gradient(145deg,#00bfe9,#16f5a5); }
.preview-arcade b { border-color:white; background:linear-gradient(#fff,#c8f3ff); box-shadow:0 4px 0 #087ebb; }
.preview-arcade em { background:#fff800; }
.theme-hint { margin: 16px 0 0; text-align: center; font: 500 10px "PingFang SC",sans-serif; opacity:.55; }

/* Style 2: blue/yellow comic */
.app-shell[data-theme="comic"] { --blue:#68b3f0; --yellow:#ffdc00; --lime:#c5ff46; --pink:#ff75ad; }
.app-shell[data-theme="comic"] .cover-screen { background:#68b3f0; }
.app-shell[data-theme="comic"] .cover-screen::before { width:125%; height:49%; right:-58%; top:30%; border-radius:0; background:#ffdc00; transform:rotate(-28deg); }
.app-shell[data-theme="comic"] .cover-screen::after { width:180px; height:180px; left:-95px; bottom:11%; background:#fff; border-radius:0; transform:rotate(38deg); }
.app-shell[data-theme="comic"] .cover-copy h1 span { background:#ffdc00; transform:rotate(1deg); box-shadow:7px 7px 0 var(--ink); }
.app-shell[data-theme="comic"] .sunburst { border-radius: 38% 62% 44% 56%; background:#ff75ad; animation:none; transform:rotate(12deg); }
.app-shell[data-theme="comic"] .note { border-radius:999px; }
.app-shell[data-theme="comic"] .question-screen { background:#68b3f0; }
.app-shell[data-theme="comic"] .question-bg::after { content:""; position:absolute; width:150%; height:80%; left:-80%; top:25%; border:var(--line); background:#ffdc00; transform:rotate(-29deg); }
.app-shell[data-theme="comic"] .blob { display:none; }
.app-shell[data-theme="comic"] .question-card { background:transparent; border:0; box-shadow:none; margin-left:25px; margin-right:25px; padding-left:5px; padding-right:5px; }
.app-shell[data-theme="comic"] .question-card h2 { max-width:90%; font-size:29px; text-shadow:1px 1px 0 white; }
.app-shell[data-theme="comic"] .question-kicker { color:var(--ink); }
.app-shell[data-theme="comic"] .question-sticker { background:#ffdc00; }
.app-shell[data-theme="comic"] .option-button { background:#dbeeff; border-width:3px; border-radius:17px 9px 17px 9px; box-shadow:4px 5px 0 var(--ink); }
.app-shell[data-theme="comic"] .option-button.is-selected { background:#ffdc00; }
.app-shell[data-theme="comic"] .options { grid-template-columns:1fr 1fr; gap:13px; }
.app-shell[data-theme="comic"] .option-button { min-height:105px; grid-template-columns:38px 1fr; grid-template-rows:auto 1fr; align-items:start; padding:11px; font-size:13px; }
.app-shell[data-theme="comic"] .option-letter { grid-row:1; }
.app-shell[data-theme="comic"] .option-button > span:nth-child(2) { grid-column:1 / 3; align-self:center; }
.app-shell[data-theme="comic"] .option-check { position:absolute; right:8px; top:5px; padding:3px 5px; color:#fff; background:var(--ink); transform:scale(0) rotate(-14deg); font-size:12px; }
.app-shell[data-theme="comic"] .option-button.is-selected .option-check { transform:scale(1) rotate(-8deg); }
.app-shell[data-theme="comic"] .comic-next { display:block; border-radius:4px 15px 4px 15px; background:#ff75ad; color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.app-shell[data-theme="comic"] .loading-screen { background:#68b3f0; color:var(--ink); }
.app-shell[data-theme="comic"] .loading-track,.app-shell[data-theme="comic"] .orbit { border-color:var(--ink); }
.app-shell[data-theme="comic"] .result-screen { background:linear-gradient(135deg,#68b3f0 0 55%,#ffdc00 55%); }

/* Style 3: soft paper notes */
.app-shell[data-theme="paper"] { --blue:#bcefff; --yellow:#fff0a8; --lime:#b7f8d9; --pink:#ffc7dc; --cream:#fffefa; --green:#67d9b1; }
.app-shell[data-theme="paper"] .cover-screen { background:linear-gradient(155deg,#d9f6ff 0%,#d9fff0 70%,#fff2c9 100%); }
.app-shell[data-theme="paper"] .cover-screen::before { width:270px; height:430px; right:-70px; top:25%; border-color:rgba(18,19,24,.35); background:rgba(255,255,255,.28); border-radius:46% 46% 25% 25%; transform:rotate(4deg); }
.app-shell[data-theme="paper"] .cover-screen::after { width:210px; height:145px; left:-90px; bottom:18%; background:#ffc7dc; opacity:.68; }
.app-shell[data-theme="paper"] .cover-copy h1 { font-family:"PingFang SC",sans-serif; font-weight:900; }
.app-shell[data-theme="paper"] .cover-copy h1 span { background:#b7f8d9; box-shadow:4px 5px 0 #28524a; }
.app-shell[data-theme="paper"] .sunburst { border-color:#28524a; border-radius:50%; background:radial-gradient(circle at 50% 50%,#fff8c7 0 30%,#b7f8d9 31% 52%,#d6f4ff 53%); animation:pulse 4s ease-in-out infinite; }
.app-shell[data-theme="paper"] .note { border-color:#28524a; border-radius:17px; box-shadow:3px 4px 0 #28524a; }
.app-shell[data-theme="paper"] .question-screen { background:#ffe1e7; }
.app-shell[data-theme="paper"] .blob-a { background:#b7f8d9; opacity:.8; }
.app-shell[data-theme="paper"] .blob-b { background:#d9f6ff; opacity:.8; }
.app-shell[data-theme="paper"] .question-card { border-color:#28524a; border-radius:32px; box-shadow:6px 7px 0 #28524a; }
.app-shell[data-theme="paper"] .question-sticker { border-color:#28524a; background:#fff0a8; box-shadow:3px 3px 0 #28524a; border-radius:999px; }
.app-shell[data-theme="paper"] .option-button { border-color:#28524a; border-radius:22px; box-shadow:none; background:#fff; }
.app-shell[data-theme="paper"] .option-button:nth-child(2) { background:#fff2f6; }
.app-shell[data-theme="paper"] .option-button:nth-child(3) { background:#f0fff8; }
.app-shell[data-theme="paper"] .option-button.is-selected { background:#b7f8d9; box-shadow:0 0 0 3px #67d9b1; }
.app-shell[data-theme="paper"] .option-letter { border-color:#28524a; background:#fff0a8; }
.app-shell[data-theme="paper"] .loading-screen { background:linear-gradient(145deg,#bcefff,#ffc7dc); color:#28524a; }
.app-shell[data-theme="paper"] .loading-track,.app-shell[data-theme="paper"] .orbit { border-color:#28524a; }
.app-shell[data-theme="paper"] .result-screen { background:linear-gradient(160deg,#d9f6ff,#d9fff0 55%,#ffc7dc); }
.app-shell[data-theme="paper"] .result-poster { border-color:#28524a; border-radius:32px; box-shadow:6px 7px 0 #28524a; }

/* Style 4: neon quiz arcade */
.app-shell[data-theme="arcade"] { --blue:#00c7ec; --yellow:#fff800; --lime:#40ff9b; --pink:#ff67ce; --green:#00db99; }
.app-shell[data-theme="arcade"] .cover-screen { background:linear-gradient(160deg,#039ed9 0%,#02e4c1 53%,#31ff87 100%); }
.app-shell[data-theme="arcade"] .cover-screen::before { background:linear-gradient(145deg,#fff800,#ff67ce); filter:blur(.2px); }
.app-shell[data-theme="arcade"] .cover-screen::after { background:#bf77ff; }
.app-shell[data-theme="arcade"] .cover-copy h1 { color:white; text-shadow:3px 3px 0 #065c9a,-1px -1px 0 #065c9a; }
.app-shell[data-theme="arcade"] .cover-copy h1 span { color:var(--ink); text-shadow:none; background:linear-gradient(180deg,#fff800,#ff9fe1); }
.app-shell[data-theme="arcade"] .sunburst { background:radial-gradient(circle,#fff800 0 30%,#ff67ce 31% 46%,#00c7ec 47%); box-shadow:0 0 28px rgba(255,248,0,.8); }
.app-shell[data-theme="arcade"] .primary-button { background:linear-gradient(100deg,#063c91,#281057); box-shadow:0 6px 0 #00a3b7,0 0 0 3px #fff800; }
.app-shell[data-theme="arcade"] .question-screen { background:linear-gradient(160deg,#029cdd,#03efab); }
.app-shell[data-theme="arcade"] .blob-a { background:#fff800; opacity:.75; }
.app-shell[data-theme="arcade"] .blob-b { background:#ff67ce; opacity:.78; }
.app-shell[data-theme="arcade"] .progress-track { box-shadow:0 0 12px rgba(255,248,0,.85); }
.app-shell[data-theme="arcade"] .question-card { background:rgba(247,255,255,.86); border-color:#09629a; box-shadow:8px 9px 0 #075687; backdrop-filter:blur(9px); }
.app-shell[data-theme="arcade"] .question-sticker { color:white; background:linear-gradient(120deg,#365cff,#c338ff); }
.app-shell[data-theme="arcade"] .option-button { border-color:#0876a9; border-radius:999px; background:linear-gradient(#fff,#dff8ff); box-shadow:0 5px 0 #0876a9; }
.app-shell[data-theme="arcade"] .option-button.is-selected { background:linear-gradient(90deg,#fff800,#6cffac); box-shadow:0 2px 0 #0876a9; }
.app-shell[data-theme="arcade"] .option-letter { color:white; border-color:#075687; background:linear-gradient(145deg,#047bd9,#7940ed); }
.app-shell[data-theme="arcade"] .loading-screen { background:linear-gradient(155deg,#063c91,#69008c); }
.app-shell[data-theme="arcade"] .result-screen { background:linear-gradient(155deg,#04bee6,#3cff93 54%,#fff800); }
.app-shell[data-theme="arcade"] .result-poster { background:rgba(255,255,255,.9); border-color:#075687; box-shadow:8px 9px 0 #075687; }

/* Shared motion system */
.progress-track { position:relative; overflow:hidden; }
.progress-track span { position:relative; overflow:hidden; }
.progress-track span::after { content:""; position:absolute; inset:0; width:45%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); transform:skewX(-18deg) translateX(-180%); animation:progressShine 1.7s ease-in-out infinite; }
.screen.is-active .topbar { animation:topbarDrop .48s cubic-bezier(.2,.9,.2,1) both; }
.theme-sheet.is-open .theme-card { animation:themeCardUp .42s cubic-bezier(.2,.9,.2,1) both; }
.theme-sheet.is-open .theme-card:nth-child(2){animation-delay:.05s}.theme-sheet.is-open .theme-card:nth-child(3){animation-delay:.1s}.theme-sheet.is-open .theme-card:nth-child(4){animation-delay:.15s}
.theme-card:active .theme-preview { transform:scale(.9) rotate(-3deg); }
.theme-preview em { animation:previewOrbit 4s linear infinite; transform-origin:18px 28px; }
.primary-button:not(:active) i { animation:arrowNudge 1.2s ease-in-out infinite; }

/* Doodle motion: buoyant, hand-drawn and playful */
.app-shell[data-theme="doodle"] .cover-copy { animation:doodleTitleIn .65s cubic-bezier(.16,1,.3,1) both; }
.app-shell[data-theme="doodle"] .cover-copy h1 span { animation:markerBounce 2.6s ease-in-out infinite; }
.app-shell[data-theme="doodle"] .note-a { animation:noteWiggle 2.2s ease-in-out infinite; }
.app-shell[data-theme="doodle"] .note-b { animation:noteWiggle 2.2s .45s ease-in-out infinite reverse; }
.app-shell[data-theme="doodle"] .plant i:nth-child(1){animation:leafSwayA 2.4s ease-in-out infinite}.app-shell[data-theme="doodle"] .plant i:nth-child(2){animation:leafSwayB 2.1s ease-in-out infinite}
.app-shell[data-theme="doodle"] .laptop { animation:laptopTap 2.8s ease-in-out infinite; }
.app-shell[data-theme="doodle"] .question-sticker { animation:stickerWobble 2s ease-in-out infinite; }
.app-shell[data-theme="doodle"] .question-card.is-changing .option-button { animation:doodleOptionIn .4s cubic-bezier(.2,.9,.2,1) both; }
.app-shell[data-theme="doodle"] .question-card.is-changing .option-button:nth-child(2){animation-delay:.07s}.app-shell[data-theme="doodle"] .question-card.is-changing .option-button:nth-child(3){animation-delay:.14s}.app-shell[data-theme="doodle"] .question-card.is-changing .option-button:nth-child(4){animation-delay:.21s}
.app-shell[data-theme="doodle"] .question-card.is-answering .option-button.is-selected { animation:doodlePick .33s cubic-bezier(.2,1.6,.4,1) both; }

/* Comic motion: panel punches, speed lines and page turns */
.app-shell[data-theme="comic"] .question-bg::before { content:""; position:absolute; inset:-20%; opacity:.16; background:repeating-linear-gradient(112deg,transparent 0 22px,#111 23px 25px,transparent 26px 42px); animation:speedLines 1.8s linear infinite; }
.app-shell[data-theme="comic"] .question-bg::after { animation:comicSweep .55s cubic-bezier(.2,.9,.2,1) both; }
.app-shell[data-theme="comic"] .question-card.is-changing .question-kicker { animation:comicKick .35s ease-out both; }
.app-shell[data-theme="comic"] .question-card.is-changing h2 { animation:comicTitle .46s cubic-bezier(.2,1.35,.4,1) both; }
.app-shell[data-theme="comic"] .question-card.is-changing .option-button { animation:panelPunch .42s cubic-bezier(.18,1.4,.3,1) both; }
.app-shell[data-theme="comic"] .question-card.is-changing .option-button:nth-child(2){animation-delay:.08s}.app-shell[data-theme="comic"] .question-card.is-changing .option-button:nth-child(3){animation-delay:.14s}.app-shell[data-theme="comic"] .question-card.is-changing .option-button:nth-child(4){animation-delay:.2s}
.app-shell[data-theme="comic"] .option-button.is-selected { animation:comicPick .32s cubic-bezier(.2,1.5,.3,1) both; }
.app-shell[data-theme="comic"] .option-button.is-selected .option-check { animation:stampHit .36s cubic-bezier(.2,1.8,.3,1) both; }
.app-shell[data-theme="comic"] .comic-next:not(:disabled) { animation:comicButtonReady .9s ease-in-out infinite alternate; }
.app-shell[data-theme="comic"] .question-card.is-flipping { animation:pageFlipOut .38s cubic-bezier(.55,.06,.68,.19) both; transform-origin:left center; }
.app-shell[data-theme="comic"] .loading-screen .orbit { animation:comicSpin .75s steps(4) infinite; }

/* Paper motion: soft floating bubbles and conversational rhythm */
.app-shell[data-theme="paper"] .cover-screen { background-size:160% 160%; animation:pastelDrift 8s ease-in-out infinite alternate; }
.app-shell[data-theme="paper"] .blob-a { animation:softFloatA 7s ease-in-out infinite; }
.app-shell[data-theme="paper"] .blob-b { animation:softFloatB 8.5s ease-in-out infinite; }
.app-shell[data-theme="paper"] .chat-row:nth-child(2){animation-delay:.08s}.app-shell[data-theme="paper"] .chat-row:nth-child(3){animation-delay:.16s}.app-shell[data-theme="paper"] .chat-row:nth-child(4){animation-delay:.24s}
.app-shell[data-theme="paper"] .chat-new { animation:chatPop .32s cubic-bezier(.2,1.35,.4,1) both; }
.app-shell[data-theme="paper"] .chat-avatar { animation:avatarHello 2.6s ease-in-out infinite; }
.app-shell[data-theme="paper"] .chat-row.user .chat-avatar { animation-delay:.7s; }
.app-shell[data-theme="paper"] .chat-reply { animation:replyRise .42s cubic-bezier(.2,.9,.2,1) both; }
.app-shell[data-theme="paper"] .chat-reply:nth-child(2){animation-delay:.06s}.app-shell[data-theme="paper"] .chat-reply:nth-child(3){animation-delay:.12s}.app-shell[data-theme="paper"] .chat-reply:nth-child(4){animation-delay:.18s}
.app-shell[data-theme="paper"] .chat-replies.is-sent .chat-reply:not(.is-selected) { opacity:.25; transform:scale(.94); }
.app-shell[data-theme="paper"] .chat-reply.is-selected { animation:replySend .38s cubic-bezier(.2,1.3,.3,1) both; }
.app-shell[data-theme="paper"] .loading-screen .orbit { animation:softOrbit 3.5s ease-in-out infinite; }

/* Arcade motion: energy charging, neon scans and lock-on */
.app-shell[data-theme="arcade"] .cover-screen,
.app-shell[data-theme="arcade"] .question-screen,
.app-shell[data-theme="arcade"] .result-screen { background-size:180% 180%; animation:neonFlow 5s ease-in-out infinite alternate; }
.app-shell[data-theme="arcade"] .sunburst { animation:arcadeRadar 2.6s ease-in-out infinite; }
.app-shell[data-theme="arcade"] .question-card[data-mode="scale"]::before { content:""; position:absolute; z-index:-1; inset:-3px; border-radius:inherit; background:linear-gradient(120deg,#00efff,#fff800,#e54cff,#00efff); background-size:250%; animation:neonBorder 2.3s linear infinite; }
.app-shell[data-theme="arcade"] .scale-topline b { animation:scorePulse 1.5s ease-in-out infinite; }
.app-shell[data-theme="arcade"] .scale-question h2 { animation:scanText .55s ease-out both; }
.app-shell[data-theme="arcade"] .scale-option { animation:energyDotIn .48s cubic-bezier(.2,1.5,.3,1) both; }
.app-shell[data-theme="arcade"] .scale-option:nth-child(2){animation-delay:.05s}.app-shell[data-theme="arcade"] .scale-option:nth-child(3){animation-delay:.1s}.app-shell[data-theme="arcade"] .scale-option:nth-child(4){animation-delay:.15s}.app-shell[data-theme="arcade"] .scale-option:nth-child(5){animation-delay:.2s}.app-shell[data-theme="arcade"] .scale-option:nth-child(6){animation-delay:.25s}.app-shell[data-theme="arcade"] .scale-option:nth-child(7){animation-delay:.3s}
.app-shell[data-theme="arcade"] .scale-option.is-selected { animation:energyPicked .58s ease-in-out infinite alternate; }
.app-shell[data-theme="arcade"] .scale-next { position:relative; overflow:hidden; }
.app-shell[data-theme="arcade"] .scale-next:not(:disabled)::after { content:""; position:absolute; inset:-30% auto -30% -45%; width:35%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-20deg); animation:buttonScan 1.35s ease-in-out infinite; }
.app-shell[data-theme="arcade"] .question-card.is-charged { box-shadow:8px 9px 0 #075687,0 0 28px rgba(255,248,0,.72); }
.app-shell[data-theme="arcade"] .question-card.is-locking { animation:energyLock .43s cubic-bezier(.2,1.4,.3,1) both; }
.app-shell[data-theme="arcade"] .loading-screen .orbit { box-shadow:0 0 32px #40ff9b; animation:arcadeLoader 1.1s linear infinite; }

/* Theme switch and result celebration */
.theme-is-changing .cover-copy { animation:themeSwapTitle .62s cubic-bezier(.2,1.25,.3,1) both; }
.theme-is-changing .hero-art { animation:themeSwapArt .66s cubic-bezier(.2,1.3,.3,1) both; }
.celebration { position:absolute; z-index:15; inset:0; overflow:hidden; pointer-events:none; }
.celebration i { position:absolute; left:var(--x); top:-35px; color:var(--yellow); font:900 16px Arial; text-shadow:1px 1px 0 var(--ink); opacity:0; }
.result-screen.is-celebrating .celebration i { animation:confettiFall 2.7s var(--delay) cubic-bezier(.2,.7,.4,1) forwards; }
.result-screen.is-celebrating .result-heading { animation:resultTitleDrop .65s cubic-bezier(.2,1.35,.3,1) both; }
.result-screen.is-celebrating .result-poster { animation:posterReveal .65s .13s cubic-bezier(.2,1.15,.3,1) both; }
.result-screen.is-celebrating .result-avatar { animation:resultAvatar .72s .36s cubic-bezier(.2,1.5,.3,1) both; }
.result-screen.is-celebrating .energy-row i { animation:energyBar .35s cubic-bezier(.2,1.6,.3,1) both; }
.result-screen.is-celebrating .energy-row i:nth-child(2){animation-delay:.08s}.result-screen.is-celebrating .energy-row i:nth-child(3){animation-delay:.16s}.result-screen.is-celebrating .energy-row i:nth-child(4){animation-delay:.24s}.result-screen.is-celebrating .energy-row i:nth-child(5){animation-delay:.32s}
.result-screen.is-celebrating .tags span { animation:tagPop .36s .48s cubic-bezier(.2,1.5,.3,1) both; }
.result-screen.is-celebrating .tags span:nth-child(2){animation-delay:.57s}.result-screen.is-celebrating .tags span:nth-child(3){animation-delay:.66s}

@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cardIn { from { opacity: .3; transform: translateX(20px) rotate(1deg); } to { opacity: 1; transform: translateX(0) rotate(-.5deg); } }
@keyframes chatIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes typing { 0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)} }
@keyframes progressShine { 0%,35%{transform:skewX(-18deg) translateX(-180%)}75%,100%{transform:skewX(-18deg) translateX(380%)} }
@keyframes topbarDrop { from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)} }
@keyframes themeCardUp { from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes previewOrbit { to{transform:rotate(360deg)} }
@keyframes arrowNudge { 0%,100%{transform:translateX(0)}50%{transform:translateX(6px)} }
@keyframes doodleTitleIn { from{opacity:0;transform:translateX(-32px) rotate(-2deg)}to{opacity:1;transform:translateX(0) rotate(0)} }
@keyframes markerBounce { 0%,82%,100%{transform:rotate(-1deg) translateY(0)}88%{transform:rotate(1deg) translateY(-5px)}94%{transform:rotate(-2deg) translateY(1px)} }
@keyframes noteWiggle { 0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-6px)} }
@keyframes leafSwayA { 0%,100%{transform:rotate(-38deg)}50%{transform:rotate(-49deg)} }
@keyframes leafSwayB { 0%,100%{transform:rotate(20deg)}50%{transform:rotate(31deg)} }
@keyframes laptopTap { 0%,88%,100%{transform:skew(-4deg) rotate(2deg)}92%{transform:skew(-4deg) rotate(-1deg) translateY(3px)} }
@keyframes stickerWobble { 0%,100%{transform:rotate(4deg)}50%{transform:rotate(-2deg) translateY(-2px)} }
@keyframes doodleOptionIn { from{opacity:0;transform:translateX(-18px) rotate(-2deg)}to{opacity:1;transform:translateX(0) rotate(0)} }
@keyframes doodlePick { 0%{transform:scale(1)}55%{transform:scale(1.035) rotate(-1deg)}100%{transform:translate(2px,3px)} }
@keyframes speedLines { to{transform:translateX(42px)} }
@keyframes comicSweep { from{transform:rotate(-29deg) translateX(-80%)}to{transform:rotate(-29deg) translateX(0)} }
@keyframes comicKick { from{opacity:0;transform:translateX(-35px) skewX(-14deg)}to{opacity:1;transform:translateX(0) skewX(0)} }
@keyframes comicTitle { from{opacity:0;transform:scale(1.25) rotate(-4deg)}to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes panelPunch { from{opacity:0;transform:scale(.72) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes comicPick { 0%{transform:scale(1)}50%{transform:scale(1.06) rotate(-1deg)}100%{transform:scale(1)} }
@keyframes stampHit { from{opacity:0;transform:scale(3.4) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(-8deg)} }
@keyframes comicButtonReady { from{transform:translateY(0) rotate(-.3deg)}to{transform:translateY(-3px) rotate(.3deg)} }
@keyframes pageFlipOut { from{opacity:1;transform:perspective(650px) rotateY(0)}to{opacity:0;transform:perspective(650px) rotateY(-78deg) translateX(-35px)} }
@keyframes comicSpin { to{transform:rotate(360deg) scale(1.08)} }
@keyframes pastelDrift { from{background-position:0% 0%}to{background-position:100% 100%} }
@keyframes softFloatA { 0%,100%{transform:rotate(20deg) translate(0)}50%{transform:rotate(12deg) translate(-15px,22px)} }
@keyframes softFloatB { 0%,100%{transform:rotate(30deg) translate(0)}50%{transform:rotate(38deg) translate(18px,-18px)} }
@keyframes chatPop { from{opacity:0;transform:translateY(12px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes avatarHello { 0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-12deg) scale(1.08)}96%{transform:rotate(10deg) scale(1.08)} }
@keyframes replyRise { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)} }
@keyframes replySend { 0%{transform:scale(1)}60%{transform:scale(1.06) translateY(-3px)}100%{transform:scale(1) translateY(1px)} }
@keyframes softOrbit { 0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.08)} }
@keyframes neonFlow { from{background-position:0% 0%}to{background-position:100% 100%} }
@keyframes arcadeRadar { 0%,100%{transform:scale(1);filter:hue-rotate(0)}50%{transform:scale(1.045);filter:hue-rotate(28deg)} }
@keyframes neonBorder { to{background-position:250% 0} }
@keyframes scorePulse { 0%,100%{transform:scale(1);box-shadow:3px 3px 0 #075687}50%{transform:scale(1.08);box-shadow:3px 3px 0 #075687,0 0 16px #fff800} }
@keyframes scanText { from{opacity:0;filter:blur(5px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:translateY(0)} }
@keyframes energyDotIn { from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)} }
@keyframes energyPicked { from{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,248,0,.6)}to{transform:scale(1.18);box-shadow:0 0 0 7px rgba(255,248,0,.16),0 0 20px #fff800} }
@keyframes buttonScan { 0%,25%{left:-45%}75%,100%{left:120%} }
@keyframes energyLock { 0%{transform:scale(1)}45%{transform:scale(.98);filter:brightness(1.45)}100%{transform:scale(1.08);opacity:0} }
@keyframes arcadeLoader { to{transform:rotate(360deg);filter:hue-rotate(360deg)} }
@keyframes themeSwapTitle { from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes themeSwapArt { from{opacity:0;transform:scale(.8) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes confettiFall { 0%{opacity:0;transform:translateY(-20px) rotate(0) scale(.6)}12%{opacity:1}100%{opacity:0;transform:translateY(920px) rotate(var(--spin)) scale(1.1)} }
@keyframes resultTitleDrop { from{opacity:0;transform:translateY(-28px) rotate(-2deg)}to{opacity:1;transform:translateY(0) rotate(0)} }
@keyframes posterReveal { from{opacity:0;transform:translateY(45px) rotate(3deg) scale(.92)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)} }
@keyframes resultAvatar { from{opacity:0;transform:scale(.3) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes energyBar { from{opacity:0;transform:scaleX(0);transform-origin:left}to{opacity:1;transform:scaleX(1);transform-origin:left} }
@keyframes tagPop { from{opacity:0;transform:scale(0) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)} }

@media (min-width: 560px) {
  body { display: grid; place-items: center; padding: 22px; }
  .app-shell { height: min(880px, calc(100dvh - 44px)); border: 4px solid #070707; border-radius: 34px; box-shadow: 0 28px 80px rgba(0,0,0,.46); }
  .toast { position: absolute; }
}

@media (max-height: 720px) {
  .cover-copy { padding-top: 18px; }
  .cover-copy h1 { font-size: 36px; }
  .subtitle { margin-top: 12px; }
  .hero-art { min-height: 235px; transform: scale(.9); transform-origin: center bottom; }
  .question-card { margin-top: 16px; padding-top: 24px; }
  .question-card h2 { font-size: 22px; min-height: 58px; margin-bottom: 15px; }
  .option-button { min-height: 57px; }
  .options { gap: 10px; }
}

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