:root{--accent: #6d7ff5;--accent-deep: #4658d4;--accent-soft: #eef0ff;--sky-1: #eef2ff;--sky-2: #f6f0ff;--blob-1: #d7dcff;--blob-2: #ffe0f0;--sparkle: "⭐️";--ink: #2c2545;--muted: #6f6789;--card: #ffffff;--card-edge: #e6e2f2;--line: #e4e0ef;--good: #14a06e;--good-deep: #0b7d55;--good-bg: #e4faf1;--soft: #e08b00;--soft-bg: #fff5e2;--soft-ink: #8a5300;--radius: 26px;--font-display: "Baloo 2", system-ui, sans-serif;--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}[data-theme=girl]{--accent: #f0569b;--accent-deep: #c72f77;--accent-soft: #ffecf4;--sky-1: #fff0f7;--sky-2: #f5ecff;--blob-1: #ffd0e5;--blob-2: #e3d6ff;--card-edge: #f6dbe8;--line: #f4dde9;--ink: #40254a;--muted: #8a6a84}[data-theme=boy]{--accent: #2b8ef0;--accent-deep: #1466c4;--accent-soft: #e7f3ff;--sky-1: #e9f4ff;--sky-2: #e6fbf3;--blob-1: #c2e2ff;--blob-2: #bff0de;--card-edge: #d8e8f7;--line: #d9e7f5;--ink: #16324d;--muted: #5b7690}*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;background:linear-gradient(160deg,var(--sky-1),var(--sky-2));color:var(--ink);font-family:var(--font-body);font-size:18px;font-weight:600;line-height:1.55;overflow-x:hidden;transition:background .5s ease}body:before,body:after{content:"";position:fixed;border-radius:50%;filter:blur(48px);opacity:.6;pointer-events:none;z-index:0}body:before{width:46vmax;height:46vmax;background:var(--blob-1);top:-18vmax;left:-14vmax;animation:drift 19s ease-in-out infinite}body:after{width:40vmax;height:40vmax;background:var(--blob-2);bottom:-18vmax;right:-12vmax;animation:drift 25s ease-in-out infinite reverse}@keyframes drift{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4vmax,3vmax) scale(1.12)}}@keyframes bob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}to{transform:scale(1);opacity:1}}@keyframes twinkle{0%,to{opacity:.3}50%{opacity:.75}}@keyframes blink{0%,93%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}@keyframes fall{0%{transform:translateY(-40px) rotate(0);opacity:0}15%{opacity:1}to{transform:translateY(380px) rotate(520deg);opacity:0}}@keyframes cheer{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.15) rotate(-8deg)}75%{transform:scale(1.15) rotate(8deg)}}.app:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff 2px,transparent 2.4px),radial-gradient(circle,#fff 1.4px,transparent 1.8px);background-size:150px 150px,95px 95px;background-position:0 0,48px 62px;animation:twinkle 6.5s ease-in-out infinite}.app{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px 92px}.card{background:var(--card);border-radius:var(--radius);border:3px solid #fff;box-shadow:0 8px 0 var(--card-edge),0 22px 40px #3c285a21;padding:26px 24px 28px;width:100%;max-width:680px;animation:pop .35s ease-out}.card.narrow{max-width:440px}.card.center{text-align:center}.title{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.2;margin:0 0 4px}.subtitle{color:var(--muted);margin:0 0 20px;font-size:17px}.row{display:flex;align-items:center;gap:12px}.row.between{justify-content:space-between}.avatar{display:block;flex:none}.card.center .avatar{margin-inline:auto}.avatar.float{animation:bob 3.4s ease-in-out infinite}.av-eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.5s infinite}.avatar-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.avatar-swap{display:flex;flex-direction:column;align-items:center;gap:2px;border:none;background:none;padding:4px 6px;cursor:pointer;border-radius:18px}.avatar-swap:active{transform:scale(.94)}.avatar-swap-label{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--accent-deep);background:var(--accent-soft);border-radius:999px;padding:2px 10px;white-space:nowrap}.avatar-swap-panel{margin-top:16px}.avatar-btn{min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;border:3px solid var(--line);background:#fff;border-radius:20px;font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:transform .12s,border-color .15s,background .15s}.avatar-btn:hover{border-color:var(--accent)}.avatar-btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);transform:scale(1.06)}.hero{display:flex;align-items:center;gap:14px;margin-bottom:18px}.hero .title{margin:0}.btn,.choice,.area-btn,.gender-btn,.chip,.nut-tieng{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.btn{min-height:60px;padding:0 26px;border:none;border-radius:18px;font-size:19px;font-weight:800;font-family:var(--font-display);cursor:pointer;transition:transform .08s,box-shadow .08s,background .2s}.btn.block{display:block;width:100%;margin-top:14px}.btn.primary{background:var(--accent);color:#fff;box-shadow:0 5px 0 var(--accent-deep)}@media(hover:hover){.btn.primary:hover:not(:disabled){background:var(--accent-deep)}}.btn.primary:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--accent-deep)}.btn.primary:disabled{background:var(--line);color:var(--muted);box-shadow:none;cursor:default}.btn.ghost{background:#fff;color:var(--muted);border:3px solid var(--line);box-shadow:0 4px 0 var(--line)}.btn.ghost:active{transform:translateY(4px);box-shadow:0 0 0 var(--line)}.btn.small{min-height:46px;font-size:16px;padding:0 18px;border-radius:14px}.tabs{display:flex;gap:10px;margin-bottom:22px}.tab{flex:1;min-height:56px;border:3px solid var(--line);background:#fff;border-radius:16px;font-size:17px;font-weight:700;font-family:var(--font-display);cursor:pointer;color:var(--muted);transition:all .15s}.tab.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}.field{display:block;margin-bottom:18px}.field>span{display:block;margin-bottom:8px;font-weight:800;font-size:16px}.field input,.field select{width:100%;min-height:58px;padding:0 16px;font-size:18px;font-weight:600;font-family:inherit;border:3px solid var(--line);border-radius:16px;background:#fff;color:var(--ink)}.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}.gender-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}.gender-btn{min-height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:3px solid var(--line);background:#fff;border-radius:20px;font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s}.gender-btn .swatch{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px #3c285a33}.gender-btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}.error{background:var(--soft-bg);color:var(--soft-ink);border:3px solid #ffe3ae;border-radius:16px;padding:12px 16px;margin:0 0 14px;font-size:16px}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.chip{min-height:56px;padding:0 20px;display:inline-flex;align-items:center;gap:8px;border:3px solid var(--line);background:#fff;border-radius:30px;font-size:17px;font-weight:700;font-family:var(--font-body);cursor:pointer;color:var(--ink);transition:all .15s}.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}.chip.add{color:var(--muted);border-style:dashed}.chip.small{min-height:46px;padding:0 16px;font-size:15px}.chip .avatar{margin:-6px 0}.lang-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:24px}.lang-label{flex-basis:100%;color:var(--muted);font-size:15px;margin-bottom:2px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}.area-btn{min-height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:3px solid var(--line);background:#fff;border-radius:22px;box-shadow:0 5px 0 var(--card-edge);font-family:var(--font-display);cursor:pointer;color:var(--ink);transition:transform .1s,box-shadow .1s,border-color .15s}@media(hover:hover){.area-btn:hover{border-color:var(--accent)}}.area-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--card-edge)}.area-btn.all{grid-column:1 / -1;background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}.area-icon{display:flex;align-items:center;justify-content:center;line-height:0}.bar-name svg{vertical-align:-5px}.session-area svg{vertical-align:-4px}.timer svg{vertical-align:-4px}.area-name{font-size:18px;font-weight:700}.progress{color:var(--muted);font-size:16px;font-weight:800}.track{position:relative;height:14px;background:var(--line);border-radius:99px;margin:16px 0 30px}.track-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .3s ease}.track-runner{position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .3s ease;pointer-events:none}.figure-box{display:flex;justify-content:center;margin-bottom:18px}.figure{width:100%;height:auto}.question{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.35;margin:0 0 8px}.question.secondary,.feedback-text.secondary{font-family:var(--font-body);font-weight:600;color:var(--muted);font-size:18px}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:20px}.choice{min-height:78px;padding:12px 16px;border:3px solid var(--line);background:#fff;border-radius:20px;box-shadow:0 5px 0 var(--card-edge);font-size:24px;font-weight:800;line-height:1.25;font-family:var(--font-display);cursor:pointer;color:var(--ink);transition:transform .1s,box-shadow .1s,border-color .15s,background .15s}@media(hover:hover){.choice:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}}.choice:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--card-edge)}.choice:disabled{cursor:default}.choice.right{border-color:var(--good);background:var(--good-bg);color:var(--good-deep);box-shadow:0 5px #bdecd8;animation:cheer .5s ease}.choice.picked{border-color:var(--soft);background:var(--soft-bg);color:var(--soft-ink);box-shadow:0 5px #ffe3ae}.choice.dim{opacity:.4;box-shadow:none}.feedback{margin-top:24px;padding:20px;border-radius:22px;border:3px solid transparent;animation:pop .3s ease-out}.feedback.good{background:var(--good-bg);border-color:#bdecd8}.feedback.soft{background:var(--soft-bg);border-color:#ffe3ae}.feedback-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.feedback-face{font-size:38px;line-height:1;animation:cheer .6s ease}.feedback-title{font-family:var(--font-display);font-size:22px;font-weight:800;margin:0}.feedback-text{margin:0 0 6px;font-size:17px}.gop-y-mo{display:block;margin:14px auto 0;font-size:15px;opacity:.7}.gop-y{margin-top:16px;padding-top:14px;border-top:3px dashed rgba(60,40,90,.15)}.gop-y-label{margin:0 0 10px;font-size:15px;font-weight:800;color:var(--muted)}.gop-y .chips{margin-bottom:12px}.gop-y-note{width:100%;min-height:52px;padding:0 14px;margin-bottom:12px;font-size:16px;font-family:inherit;border:3px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}.gop-y-note:focus{outline:none;border-color:var(--accent)}.gop-y-xong{margin:14px 0 0;text-align:center;font-size:15px;font-weight:800;color:var(--muted)}.card.party{position:relative;overflow:hidden}.confetti-rain{position:absolute;inset:0;pointer-events:none}.confetti-rain i{position:absolute;top:0;width:9px;height:14px;border-radius:3px;animation:fall 2.6s linear infinite}.confetti-rain i:nth-child(3n){background:var(--accent)}.confetti-rain i:nth-child(3n+1){background:#ffd166}.confetti-rain i:nth-child(3n+2){background:#4ddbb0}.confetti-rain i:nth-child(4n){border-radius:50%}.score{margin:22px 0;background:var(--accent-soft);border-radius:22px;padding:18px}.score-num{font-family:var(--font-display);font-size:62px;font-weight:800;color:var(--accent-deep)}.score-of{font-size:20px;color:var(--muted);margin-left:8px}@media(max-width:420px){.choices{grid-template-columns:1fr 1fr}.title{font-size:27px}.card{padding:22px 18px 24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.section{font-family:var(--font-display);font-size:21px;margin:26px 0 12px;color:var(--ink)}.ok-msg{background:var(--good-bg);color:var(--good-deep);border-radius:16px;padding:12px 16px;font-weight:700;margin:14px 0 0}.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.badge{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-deep);border-radius:999px;padding:9px 16px;font-weight:800;font-size:15px}.badge-icon{font-size:19px}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.stat-tile{background:var(--accent-soft);border-radius:20px;padding:16px 10px;text-align:center}.stat-num{display:block;font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--accent-deep);line-height:1.1}.stat-cap{display:block;font-size:14px;color:var(--muted);font-weight:700}.bars{list-style:none;padding:0;margin:0}.bar-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(80px,2fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:2px solid var(--line)}.bar-row:last-child{border-bottom:none}.bar-name{font-weight:800;font-size:16px}.bar-track{height:16px;background:var(--line);border-radius:999px;overflow:hidden}.bar-fill{display:block;height:100%;background:var(--accent);border-radius:999px}.bar-val{font-weight:800;font-size:16px;color:var(--accent-deep);white-space:nowrap}.bar-sub{font-weight:700;font-size:13px;color:var(--muted)}.bar-empty{grid-column:2 / span 2;color:var(--muted);font-size:15px;font-weight:700}.nudge{background:var(--accent-soft);border-radius:22px;padding:18px;margin-top:20px}.nudge .btn{margin-top:14px}.chart{width:100%;height:auto;display:block}.chart-grid{stroke:var(--line);stroke-width:1.5}.chart-tick{fill:var(--muted);font-size:9px;font-weight:700;font-family:var(--font-body)}.chart-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.chart-dot{fill:var(--accent);stroke:var(--card);stroke-width:2}.chart-label{fill:var(--accent-deep);font-size:12px;font-weight:800;font-family:var(--font-display)}.session-list{list-style:none;padding:0;margin:14px 0 0}.session-row{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:2px solid var(--line);font-weight:700}.session-row:last-child{border-bottom:none}.session-date{color:var(--muted);font-size:14px}.session-area{font-size:15px}.session-score{font-weight:800;color:var(--accent-deep)}.timer{font-family:var(--font-display);font-weight:800;font-size:19px;background:var(--accent-soft);color:var(--accent-deep);border-radius:14px;padding:8px 14px}.timer.low{background:var(--soft-bg);color:var(--soft-ink)}.grid.extra{margin-top:14px}.parent-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.two-col .btn{grid-column:1 / -1}.q-list{list-style:none;padding:0;margin:0}.q-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:2px solid var(--line)}.q-row:last-child{border-bottom:none}.q-row.done{opacity:.5}.q-text{margin:0 0 4px;font-weight:700}.q-meta{margin:0;font-size:14px;color:var(--muted);font-weight:700}@media(max-width:560px){.two-col{grid-template-columns:1fr}.bar-row{grid-template-columns:1fr auto}.bar-track{grid-column:1 / -1}.stat-num{font-size:28px}}.photo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.face-photo{width:108px;height:108px;border-radius:50%;object-fit:cover;border:5px solid var(--accent);box-shadow:0 6px 0 var(--card-edge)}.photo-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.photo-note{font-size:14px;color:var(--muted);font-weight:700;margin:10px 0 0}.nut-tieng{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:10;width:56px;height:56px;border-radius:50%;border:3px solid var(--card-edge);background:var(--card);box-shadow:0 5px 0 var(--card-edge),0 10px 20px #3c285a1f;font-size:24px;cursor:pointer}.nut-tieng:active{transform:translateY(4px);box-shadow:0 1px 0 var(--card-edge)}