*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--paper: #FFFAF4;--porcelain: #F5F2EC;--porcelain-deep: #ECE7DE;--card: #FFFDFA;--lavender: #BFA2DB;--lavender-deep: #8B6FAE;--lavender-soft: rgba(191, 162, 219, .16);--ink: #2E2836;--ink-muted: #6E6678;--ink-faint: #A39BAD;--hairline: rgba(46, 40, 54, .09);--correct: #6FA97C;--correct-deep: #4C7A57;--wrong: #C97B7B;--wrong-deep: #9C5555;--amber: #C99A3F;--amber-deep: #A67C27;--ease: cubic-bezier(.32, .72, 0, 1);--shadow-soft: 0 20px 40px -20px rgba(139, 111, 174, .28), 0 2px 8px rgba(139, 111, 174, .06);--shadow-lift: 0 28px 56px -24px rgba(139, 111, 174, .38), 0 4px 12px rgba(139, 111, 174, .08);--font-display: "Fraunces", Georgia, serif;--font-body: "Plus Jakarta Sans", system-ui, sans-serif}html,body,#root{min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(640px 420px at 88% -6%,rgba(191,162,219,.22),transparent 62%),radial-gradient(520px 400px at -8% 104%,rgba(191,162,219,.13),transparent 60%)}::selection{background:var(--lavender-soft)}:focus-visible{outline:2px solid var(--lavender-deep);outline-offset:2px;border-radius:4px}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--ink);text-wrap:balance}.display em{font-style:italic;font-weight:500;color:var(--lavender-deep)}.eyebrow{display:inline-flex;align-items:center;width:max-content;padding:5px 14px;border-radius:999px;border:1px solid var(--hairline);background:var(--porcelain);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lavender-deep)}.page{min-height:100dvh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px clamp(20px,5vw,44px)}.wordmark{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink)}.wordmark em{font-style:italic;font-weight:500;color:var(--lavender-deep)}.topbar-title{font-family:var(--font-display);font-weight:600;font-size:18px}.footer{padding:22px clamp(20px,5vw,44px) 26px;text-align:center;font-size:12px;color:var(--ink-faint)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-family:var(--font-body);font-weight:600;transition:all .5s var(--ease)}.btn:active{transform:scale(.98)}.btn-primary{background:var(--ink);color:var(--paper);padding:10px 10px 10px 26px;font-size:15px;box-shadow:var(--shadow-soft)}.btn-primary .chip{width:34px;height:34px;border-radius:999px;background:#fffaf424;display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:transform .5s var(--ease)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}.btn-primary:hover .chip{transform:translate(2px,-1px) scale(1.05)}.btn-primary:disabled{opacity:.4;cursor:default}.btn-primary:disabled:hover{transform:none;box-shadow:var(--shadow-soft)}.btn-quiet{padding:9px 20px;border:1px solid var(--hairline);background:var(--card);color:var(--ink-muted);font-size:13.5px}.btn-quiet:hover{border-color:var(--lavender);color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-soft)}.btn-back{padding:6px 0;color:var(--ink-muted);font-size:14px;transition:color .4s var(--ease)}.btn-back:hover{color:var(--ink)}.btn-hint{padding:11px 22px;border:1px solid rgba(201,154,63,.45);background:#c99a3f14;color:var(--amber-deep);font-size:14px}.btn-hint:hover:not(:disabled){background:#c99a3f26;transform:translateY(-1px)}.btn-hint:disabled{opacity:.4;cursor:default}.shell{background:#2e28360a;border:1px solid var(--hairline);border-radius:28px;padding:7px}.core{background:var(--card);border-radius:21px;box-shadow:inset 0 1px 1px #ffffffd9,var(--shadow-soft)}@keyframes rise{0%{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.rise{animation:rise .8s var(--ease) both}.d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}.d5{animation-delay:.38s}.d6{animation-delay:.46s}.home-main{flex:1;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(32px,6vw,80px);padding:clamp(28px,5vw,56px) clamp(20px,5vw,44px) clamp(40px,6vw,72px);max-width:1160px;margin:0 auto;width:100%}.hero{display:flex;flex-direction:column;gap:22px;align-items:flex-start}.hero h1{font-size:clamp(40px,5.5vw,64px)}.hero .lede{max-width:46ch;color:var(--ink-muted);font-size:16px}.stats-core{display:flex;flex-direction:column;gap:16px;padding:22px 26px;min-width:min(400px,100%)}.stats-row{display:flex;align-items:center;gap:28px}.stat{display:flex;flex-direction:column;gap:0}.stat-num{font-family:var(--font-display);font-weight:700;font-size:32px;color:var(--lavender-deep);line-height:1.2;font-variant-numeric:tabular-nums}.stat-label{font-size:11px;color:var(--ink-faint);letter-spacing:.12em;text-transform:uppercase;font-weight:600}.stat-divider{width:1px;height:40px;background:var(--hairline)}.bar-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-faint)}.bar{height:8px;border-radius:999px;background:var(--porcelain-deep);overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--lavender),var(--lavender-deep));transition:width .8s var(--ease)}.cat-stage{display:flex;flex-direction:column;align-items:center;gap:20px}.bubble{position:relative;background:var(--card);border:1px solid var(--hairline);border-radius:18px;padding:12px 22px;font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--ink-muted);box-shadow:var(--shadow-soft);max-width:250px;text-align:center}.bubble:after{content:"";position:absolute;bottom:-7px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background:var(--card);border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}.cat-sprite{display:flex;flex-direction:column;align-items:center;gap:8px}.cat-img-wrap{position:relative;width:100%}.cat-img-wrap:before{content:"";position:absolute;bottom:3%;left:50%;transform:translate(-50%);width:62%;height:7%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--expr) 30%,transparent) 0%,transparent 70%)}.cat-img{width:132%;margin:-12% -16% -3%;display:block;filter:drop-shadow(0 18px 28px color-mix(in srgb,var(--expr) 22%,transparent));transition:filter .5s var(--ease);-webkit-user-select:none;user-select:none}.cat-label-chip{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:13px;color:var(--expr);background:var(--card);border:1px solid var(--hairline);border-radius:999px;padding:3px 15px;box-shadow:var(--shadow-soft)}.cat-shell{background:#2e28360a;border:1px solid var(--hairline);border-radius:36%;padding:8px}.cat-core{width:100%;height:100%;border-radius:34%;background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--expr) 22%,transparent),color-mix(in srgb,var(--expr) 6%,transparent)),var(--card);border:1px solid color-mix(in srgb,var(--expr) 35%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:all .5s var(--ease);box-shadow:inset 0 1px 1px #fffc,0 20px 40px -18px color-mix(in srgb,var(--expr) 40%,transparent)}.cat-label{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:13px;color:var(--expr)}.list-col{display:flex;flex-direction:column;gap:14px;padding:12px clamp(20px,5vw,40px) 56px;max-width:780px;margin:0 auto;width:100%}.list-head{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:20px clamp(20px,5vw,40px) 18px;max-width:780px;margin:0 auto;width:100%}.list-head h1{font-size:clamp(30px,4vw,42px)}.chapter-card{display:flex;align-items:center;gap:22px;background:var(--card);border:1px solid var(--hairline);border-radius:22px;padding:22px 26px;cursor:pointer;transition:all .5s var(--ease);text-align:left;width:100%}.chapter-card:hover:not(.locked){transform:translateY(-3px);border-color:var(--lavender);box-shadow:var(--shadow-lift)}.chapter-card:active:not(.locked){transform:translateY(-1px) scale(.995)}.chapter-card.locked{opacity:.5;cursor:default;background:transparent}.chapter-num{font-family:var(--font-display);font-weight:700;font-size:30px;color:#8b6fae59;min-width:46px;font-variant-numeric:tabular-nums}.chapter-body{flex:1;display:flex;flex-direction:column;gap:5px}.chapter-title{font-family:var(--font-display);font-weight:600;font-size:18px}.chapter-desc{font-size:13px;color:var(--ink-muted);line-height:1.55}.mastery{display:flex;align-items:center;gap:10px;margin-top:7px}.mastery .bar{flex:1;max-width:170px;height:5px}.mastery-label{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}.chapter-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}.chapter-pts{font-size:12px;font-weight:700;color:var(--lavender-deep);font-variant-numeric:tabular-nums}.chapter-arrow{width:32px;height:32px;border-radius:999px;background:var(--porcelain);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-muted);font-size:14px;transition:all .5s var(--ease)}.chapter-card:hover:not(.locked) .chapter-arrow{background:var(--lavender-deep);color:var(--paper);transform:translate(3px)}.soon{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--ink-faint)}.quiz-topbar{display:flex;align-items:center;gap:20px;padding:16px clamp(20px,5vw,44px);border-bottom:1px solid var(--hairline)}.quiz-progress{flex:1;display:flex;align-items:center;gap:14px}.quiz-count{font-size:13px;color:var(--ink-faint);flex-shrink:0;font-variant-numeric:tabular-nums}.quiz-progress .bar{flex:1;height:6px}.streak-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:#c99a3f1f;color:var(--amber-deep);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;transition:opacity .4s var(--ease)}.quiz-body{flex:1;display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,4vw,44px);padding:clamp(20px,4vw,40px) clamp(20px,5vw,44px) 56px;max-width:1060px;margin:0 auto;width:100%;align-items:start}.quiz-aside{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;position:sticky;top:24px}.hint-bubble{background:#c99a3f17;border:1px solid rgba(201,154,63,.32);border-radius:18px;padding:14px 16px;font-size:13px;color:var(--ink-muted);line-height:1.6;display:flex;flex-direction:column;gap:6px;animation:rise .6s var(--ease) both}.tag-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.hint-bubble .tag-label{color:var(--amber-deep)}.quiz-main{display:flex;flex-direction:column;gap:18px}.qshell{padding:6px;border-radius:24px}.qcore{padding:24px 28px;border-radius:18px}.qtext{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.55}.opts{display:flex;flex-direction:column;gap:10px}.opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:14px 18px;border-radius:16px;background:var(--card);border:1px solid var(--hairline);font-size:14.5px;color:var(--ink);transition:all .4s var(--ease)}.opt:hover:not(:disabled){transform:translate(4px);border-color:var(--lavender);background:#bfa2db14}.opt:disabled{cursor:default}.opt-letter{width:28px;height:28px;border-radius:999px;background:var(--porcelain);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--ink-muted);flex-shrink:0;transition:all .4s var(--ease)}.opt-selected{border-color:var(--lavender-deep);background:var(--lavender-soft)}.opt-selected .opt-letter{background:var(--lavender-deep);color:var(--paper)}.opt-correct{border-color:var(--correct);background:#6fa97c1f;color:var(--correct-deep)}.opt-correct .opt-letter{background:var(--correct);color:#fff}.opt-wrong{border-color:var(--wrong);background:#c97b7b1f;color:var(--wrong-deep)}.opt-wrong .opt-letter{background:var(--wrong);color:#fff}.opt-dim{opacity:.45}.opt-shake{animation:shake .5s}.feedback{border-radius:14px;padding:13px 20px;font-size:14px;font-weight:600;animation:rise .5s var(--ease) both}.feedback-correct{background:#6fa97c1f;border:1px solid rgba(111,169,124,.4);color:var(--correct-deep)}.feedback-wrong{background:#c97b7b1a;border:1px solid rgba(201,123,123,.35);color:var(--wrong-deep)}.solution{background:var(--porcelain);border:1px solid var(--hairline);border-radius:18px;padding:18px 22px;font-size:14px;color:var(--ink-muted);line-height:1.7;display:flex;flex-direction:column;gap:7px;animation:rise .6s var(--ease) both}.solution .tag-label{color:var(--lavender-deep)}.quiz-actions{display:flex;gap:12px;margin-top:4px}.btn-submit{flex:1;background:var(--ink);color:var(--paper);padding:12px 26px;font-size:15px;box-shadow:var(--shadow-soft)}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lift)}.btn-submit:disabled{opacity:.35;cursor:default}.particles{position:absolute;top:-6px;left:50%;transform:translate(-50%);pointer-events:none;display:flex;gap:8px;z-index:5}.particle{font-size:20px;animation:pop 1s var(--ease) forwards;animation-delay:calc(var(--i) * .1s)}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes pop{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-64px) scale(1.4);opacity:0}}.results-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,48px)}.results-core{padding:clamp(32px,5vw,48px);max-width:460px;width:100%;display:flex;flex-direction:column;align-items:center;gap:24px}.results-core h1{font-size:clamp(24px,3.5vw,30px);text-align:center}.score-row{display:flex;align-items:center;justify-content:center;gap:26px;padding:20px 30px;background:var(--porcelain);border-radius:18px;width:100%}.score-row .stat{align-items:center}.score-row .stat-num{color:var(--ink);font-size:28px}.score-row .stat-num.accent{color:var(--lavender-deep)}.total-line{font-size:15px;color:var(--ink-muted)}.total-line strong{color:var(--lavender-deep)}.unlock-banner{background:var(--lavender-soft);border:1px solid rgba(139,111,174,.35);border-radius:18px;padding:16px 24px;width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;animation:rise .7s var(--ease) both}.unlock-title{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--lavender-deep)}.unlock-item{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--ink-muted)}.results-actions{display:flex;gap:10px;width:100%;flex-wrap:wrap}.results-actions .btn-quiet{flex:1}.results-actions .btn-primary{flex:2;padding:10px 12px 10px 22px}.btn-gallery-wide{width:100%;padding:11px 22px;border:1px solid rgba(139,111,174,.4);background:#bfa2db14;color:var(--lavender-deep);font-size:14px}.btn-gallery-wide:hover{background:var(--lavender-soft);transform:translateY(-1px)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;padding:12px clamp(20px,5vw,40px) 40px;max-width:980px;margin:0 auto;width:100%}.outfit-card{background:var(--card);border:1px solid var(--hairline);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:all .5s var(--ease)}.outfit-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}.outfit-card.unlocked{border-color:#8b6fae66;box-shadow:0 16px 32px -18px #8b6fae4d}.outfit-stage{height:150px;display:flex;align-items:center;justify-content:center;background:var(--porcelain);font-size:60px}.outfit-stage .locked-emoji{filter:grayscale(1) opacity(.22)}.outfit-info{padding:14px 18px 16px;display:flex;flex-direction:column;gap:5px;position:relative}.outfit-name{font-family:var(--font-display);font-weight:600;font-size:16px}.outfit-flavor{font-size:12px;color:var(--ink-faint);line-height:1.55}.outfit-lock-msg{font-size:12px;color:var(--ink-faint)}.outfit-lock-msg strong{color:var(--lavender-deep);font-weight:600}.lock-icon{position:absolute;top:13px;right:15px;font-size:13px;opacity:.45}.gallery-note{text-align:center;padding:0 clamp(20px,5vw,40px) 44px;font-size:13px;color:var(--ink-faint)}@media (max-width: 820px){.home-main{grid-template-columns:1fr;gap:40px;padding-top:16px}.cat-stage{order:-1}.quiz-body{grid-template-columns:1fr}.quiz-aside{position:static;flex-direction:row;justify-content:flex-start;flex-wrap:wrap}.quiz-aside .hint-bubble{flex:1;min-width:200px}.stats-core{min-width:100%}}