:root {
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #2e2736;
  background: #fff9fc;
  font-synthesis: none;
  --pink: #f21f78;
  --orange: #ff563a;
  --light-pink: #ffe4ee;
  --subtle: #857a8c;
  --shadow: 0 19px 56px rgba(159, 58, 107, .11);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 15% 15%, #fff0f7 0, transparent 38%), radial-gradient(circle at 100% 75%, #fff0ec 0, transparent 40%), #fff9fc; }
button,input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible,input:focus-visible,a:focus-visible { outline: 3px solid #ff8eb7; outline-offset: 3px; }
[hidden] { display: none !important; }
.site-shell { min-height: 100vh; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(20px, calc((100vw - 1050px) / 2)); background: rgba(255,255,255,.93); box-shadow: 0 2px 17px #eebcd72b; border-bottom: 1px solid #f6e6ee; position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: #f24d42; text-decoration: none; font-family: ui-rounded, "Arial Rounded MT Bold", -apple-system, sans-serif; font-size: 28px; font-weight: 950; letter-spacing: -1.1px; }
.brand-symbol { width: 36px; height: 36px; border-radius: 12px; color: #fff; font-size: 25px; display: grid; place-items: center; background: linear-gradient(135deg,#ff742f,#f42381); box-shadow: 0 4px 12px #ff7a786b; }
.brand-dot { color: var(--pink); }
.top-actions { display: flex; align-items: center; gap: 13px; }
.top-tag { font-weight: 750; background: #fff3f9; color: #e52e77; border: 1px solid #ffe1ed; padding: 8px 13px; border-radius: 99px; font-size: 13px; }
.icon-button { border: 1px solid #f0e5ed; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #392c40; display: grid; place-items: center; transition: .2s; }
.icon-button:hover { background: #fff1f6; transform: translateY(-1px); }
.icon-button svg { width: 21px; height: 21px; }
.main { width: min(100% - 32px, 530px); margin: 0 auto; text-align: center; }
.overline { margin: 27px 0 18px; display: flex; gap: 12px; justify-content: center; align-items: center; color: #e84782; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.overline-dash { width: 21px; height: 1px; background: #efa5c6; }
.view { animation: slide-in .35s ease both; }
.view:not(.is-active) { display: none; }
.hero-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 3px; color: #fa5997; }
.display-title { line-height: 1.12; margin: 10px 0 12px; color: #ee2876; letter-spacing: 2px; font-weight: 950; font-size: clamp(42px, 9vw, 62px); text-shadow: 0 4px #ffe0ec; }
.pineapple { display: inline-block; transform: rotate(-12deg); font-size: .78em; vertical-align: 4px; animation: pineapple-bob 2.5s ease-in-out infinite; }
.hero-sub { color: #75697d; font-size: 15px; line-height: 1.75; margin: 0 auto 18px; }
.hero-sub strong { color: #e53370; }
.hero-photo { width: 175px; height: 147px; margin: 0 auto -18px; position: relative; z-index: 2; transform: rotate(2deg); background: #141016; border: 6px solid white; outline: 3px solid #ffc1d9; border-radius: 24px; box-shadow: 0 10px 28px #e76e9980; }
.hero-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; border-radius: 17px; display: block; }
.photo-sticker { position: absolute; bottom: -13px; right: -15px; font-size: 39px; filter: drop-shadow(1px 3px 0 #fff); transform: rotate(-17deg); }
.hero-spark { position: absolute; color: #ff9644; font-size: 27px; }
.spark-a { left: -30px; top: 10px; }.spark-b { top: -28px; right: -20px; }
.card { background: #fff; border: 1px solid #fae4ee; border-radius: 28px; box-shadow: var(--shadow); }
.welcome-card { padding: 42px 27px 29px; position: relative; margin-top: 0; }
.card-pill { width: fit-content; margin: 0 auto 18px; padding: 8px 15px; border-radius: 99px; font-size: 13px; color: #ea377e; font-weight: 850; background: #fff0f6; }
.field-label { font-size: 18px; font-weight: 850; display: block; margin-bottom: 13px; }
.name-input { width: 100%; height: 64px; border: 2px solid #f5c6db; background: #fffcfe; color: #2e2534; border-radius: 17px; text-align: center; font-weight: 700; font-size: 19px; outline: none; transition: box-shadow .2s, border-color .2s; }
.name-input::placeholder { color: #b4acba; }
.name-input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px #ffd0e5; }
.field-error { font-size: 13px; color: #e92954; margin: 6px 0; min-height: 17px; }
.gradient-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 17px; min-height: 60px; padding: 14px 20px; font-weight: 900; font-size: 19px; color: white; background: linear-gradient(107deg, #f0187a, #f83265 60%, #ff503c); box-shadow: 0 12px 28px #fa27715c; transition: transform .2s, filter .2s; }
.gradient-button:active { transform: scale(.975); }.gradient-button:hover { filter: brightness(1.06); }
.card-tip { font-size: 12px; color: #9d919f; margin: 17px 0 0; }
.quiz-context { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px; gap: 8px; font-size: 13px; font-weight: 800; }
.context-label { color: #89758a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-counter { background: #fff1f7; color: #e73680; padding: 6px 11px; border-radius: 99px; white-space: nowrap; }
.progress-track { width: 100%; height: 9px; border-radius: 99px; background: #f2e7ed; margin: 0 0 20px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #fd823c, #fa2473); border-radius: inherit; transition: width .45s ease; }
.question-card { padding: 28px 22px 26px; text-align: center; min-height: 320px; }
.q-count { color: #f0659c; font-weight: 900; font-size: 12px; letter-spacing: 2.4px; margin: 0 0 13px; }
.question-title { font-size: clamp(22px, 5.2vw, 28px); font-weight: 950; letter-spacing: -.4px; line-height: 1.5; margin: 0 auto 23px; max-width: 420px; }
.question-figure { margin: -6px auto 22px; width: min(100%, 310px); border-radius: 15px; overflow: hidden; box-shadow: 0 7px 19px #20152929; background: black; }
.question-figure img { display: block; width: 100%; height: auto; }
.choices { display: grid; gap: 11px; }
.choice { width: 100%; border: 2px solid #ebe5ed; border-radius: 14px; min-height: 63px; padding: 11px 16px; background: #f9f7fa; display: flex; gap: 13px; align-items: center; text-align: left; color: #4e4652; font-size: 16px; font-weight: 760; box-shadow: 0 2px 0 #ebe8ed; transition: transform .18s, background .18s, border-color .18s; }
.choice:hover:not(:disabled) { background: #fff0f6; border-color: #ffc3da; transform: translateY(-1px); }
.choice:active:not(:disabled) { transform: scale(.99); }
.choice:disabled { cursor: default; }
.choice-number { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #a4869b; border: 1px solid #eae0e9; font-weight: 900; }
.choice-label { flex: 1; line-height: 1.5; }
.choice-status { font-size: 23px; font-weight: 900; }
.choice.is-correct { color: #146d45; background: #b9ebd0; border-color: #70d2a3; }
.choice.is-correct .choice-number { color: #168355; }
.choice.is-wrong { color: #a92d3d; background: #ffd7dc; border-color: #fa8291; }
.choice.is-wrong .choice-number { color: #c43043; }
.choice.is-muted { opacity: .55; }
.choice-figure { width: 106px; max-width: 100%; flex: 0 0 106px; display: flex; align-items: center; }
.choice-figure img { width: 74px; border-radius: 9px; display: block; }
.choice-with-picture { flex-wrap: wrap; }
.answer-note { height: 0; min-height: 0; margin: 0; font-size: 13px; font-weight: 700; overflow: hidden; }
.quiz-hint { color: #ada0ae; font-size: 12px; margin: 18px 0; }
.result-card { margin-top: 12px; padding: 32px 24px 27px; overflow: hidden; position: relative; }
.result-badge { position: relative; z-index: 1; display: inline-block; border-radius: 99px; background: #fff0f6; color: #e93478; padding: 7px 13px; font-size: 13px; font-weight: 850; }
.result-title { font-size: 36px; line-height: 1.2; font-weight: 950; color: #ee2c78; margin: 19px 0 9px; }
.result-name { margin: 0 0 19px; font-size: 15px; color: #8b778b; overflow-wrap: anywhere; }
.score-pill { position: relative; z-index: 1; display: inline-block; border-radius: 15px; background: #2e243e; color: #ffb844; padding: 12px 30px; font-size: 40px; line-height: 1.2; font-weight: 950; box-shadow: 0 10px 24px #2e243e36; }
.gauge-wrap { margin: 2px auto 8px; width: min(100%, 320px); }
.score-gauge { display: block; width: 100%; height: auto; }
.score-percent { display: block; margin-top: -15px; font-size: 26px; font-weight: 950; }
.result-message { color: #75677c; font-weight: 700; font-size: 15px; line-height: 1.7; margin: 15px 0 22px; }
.result-actions { display: grid; gap: 12px; }
.outline-button { border: 2px solid #f4b7ce; background: #fff; border-radius: 17px; min-height: 56px; font-weight: 900; color: #df2d74; font-size: 17px; }
.outline-button:hover { background: #fff0f6; }
.result-footer { border-top: 1px solid #f5e8ef; padding-top: 20px; margin: 25px 0 0; font-size: 12px; color: #b6a7b5; }
.result-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-piece { position: absolute; top: -20px; width: 9px; height: 14px; opacity: .9; border-radius: 3px; animation: fall 2.2s ease-in both; }
.footer { color: #bfaeba; font-size: 12px; margin: 30px 0 40px; }
.footer strong { color: #f271a1; }
.feedback-overlay { position: fixed; inset: 0; z-index: 30; padding: 24px; display: grid; place-items: center; background: #1b0927c9; backdrop-filter: blur(8px); animation: fade-in .18s ease; }
.feedback-card { width: min(100%, 360px); background: #fff; border-radius: 27px; padding: 18px 18px 22px; box-shadow: 0 22px 65px #1305159c; animation: pop-in .32s cubic-bezier(.2,1.4,.4,1) both; text-align: center; }
.wrong-visual { height: 245px; overflow: hidden; position: relative; background: #060606; border-radius: 18px; }
.wrong-visual img { width: 100%; height: 100%; object-fit: contain; }
.giant-x { position: absolute; inset: 0; display: grid; place-items: center; font-size: 160px; color: #ff263e; font-family: Arial, sans-serif; font-weight: 950; line-height: 1; text-shadow: 0 4px 0 #fff, 0 7px 21px #7b0a16; transform: rotate(-9deg); animation: x-bam .42s ease both; }
.right-visual { height: 180px; display: grid; place-content: center; position: relative; }
.clap-burst { font-size: 100px; animation: applause .65s ease-in-out infinite alternate; }
.right-check { position: absolute; bottom: 4px; right: 27px; font-size: 65px; color: #23b86d; font-weight: 1000; text-shadow: 0 0 7px white; }
.feedback-title { font-size: 31px; margin: 15px 0 5px; color: #f03055; font-weight: 950; }
.feedback-card.is-right .feedback-title { color: #18a36b; }
.feedback-desc { font-size: 14px; color: #897988; margin: 0 0 19px; line-height: 1.7; }
.feedback-next { width: 100%; min-height: 48px; border: none; border-radius: 13px; background: #fff0f6; color: #df3074; font-weight: 850; }
.toast { position: fixed; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%,16px); z-index: 80; padding: 10px 18px; border-radius: 99px; background: #362b3e; color: #fff; box-shadow: 0 7px 22px #0004; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
@keyframes slide-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.73); } to { opacity: 1; transform: scale(1); } }
@keyframes x-bam { from { transform: rotate(-28deg) scale(1.7); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
@keyframes applause { from { transform: rotate(-14deg) scale(.98); } to { transform: rotate(12deg) scale(1.06); } }
@keyframes pineapple-bob { 50% { transform: translateY(-7px) rotate(8deg); } }
@keyframes fall { from { transform: translateY(-10px) rotate(0); opacity: 1; } to { transform: translateY(550px) rotate(600deg); opacity: 0; } }
@media (min-width: 800px) { .main { width: min(100% - 32px, 560px); }.welcome-card { padding-inline: 42px; }.topbar { height: 90px; } }
@media (max-width: 480px) { .topbar { height: 65px; padding: 0 18px; }.brand { font-size: 25px; }.brand-symbol { width: 31px; height: 31px; }.top-tag { font-size: 12px; padding: 7px 10px; }.icon-button { width: 38px; height: 38px; }.main { width: min(100% - 26px, 530px); }.overline { margin: 18px 0 15px; }.display-title { font-size: 51px; }.hero-sub { margin-bottom: 13px; }.hero-photo { width: 148px; height: 127px; }.welcome-card { padding: 39px 17px 23px; border-radius: 24px; }.question-card { padding: 27px 16px 22px; }.choice { padding: 11px 10px; gap: 9px; }.choice-number { flex-basis: 30px; width: 30px; height: 30px; }.choice-label { font-size: 15px; }.result-title { font-size: 31px; } }
@media (max-height: 710px) { .hero-photo { height: 116px; width: 138px; }.display-title { font-size: 44px; }.overline { margin-block: 12px; }.welcome-card { padding-top: 33px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }