:root{--c-sage:#87a96b;--c-sage-light:#a8c796;--c-mint-cream:#f0f7ee;--c-forest:#2e5a3d;--c-fern:#4d6a53;--c-charcoal:#2c3e2e;--c-lime-soft:#b5d6a7;--c-lime-deep:#5c8a5e;--c-bg:#f0f7ee;--c-surface:#fafdf9;--c-surface-alt:#f5faf4;--c-border:#d4e4d0;--c-border-light:#e4ede2;--c-text:#2c3e2e;--c-text-secondary:#5a6e5c;--c-text-muted:#8a9a8c;--c-accent:var(--c-forest);--c-primary:var(--c-sage);--c-primary-hover:#7a9b5f;--sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;--sp-2xl:48px;--sp-3xl:64px;--r-sm:12px;--r-md:20px;--r-lg:28px;--r-xl:40px;--r-full:9999px;--shadow-sm:0 2px 8px #2e5a3d0f;--shadow-md:0 4px 16px #2e5a3d14;--shadow-lg:0 8px 32px #2e5a3d1a;--ease-out:cubic-bezier(.16,1,.3,1);--dur-fast:.15s;--dur-normal:.3s;--dur-slow:.5s;--font-display:"Quicksand","PingFang SC","Microsoft YaHei",system-ui,sans-serif;--font-body:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;font-size:16px}body{font-family:var(--font-body);background-color:var(--c-bg);color:var(--c-text);overflow-x:hidden;position:relative;min-height:100dvh;line-height:1.6}body:before{content:"";position:fixed;z-index:-1;pointer-events:none;background:radial-gradient(600px 400px at 10% 20%,#87a96b14,#0000),radial-gradient(500px 500px at 90% 80%,#87a96b0f,#0000);inset:0}#root{min-height:100dvh}img{display:block;max-width:100%;height:auto}button{cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none}.app{min-height:100dvh}.screen{animation:screenIn var(--dur-slow)var(--ease-out)}.btn{display:inline-flex;justify-content:center;align-items: center;gap:var(--sp-sm);padding:var(--sp-md)var(--sp-xl);border-radius:var(--r-full);font-weight:700;font-family:var(--font-display);transition:all var(--dur-normal)var(--ease-out);white-space:nowrap;font-size:1rem}.btn--primary{background:linear-gradient(135deg,var(--c-sage)0%,var(--c-fern)100%);color:#fff;box-shadow:var(--shadow-md),0 0 0 0 #87a96b4d}.btn--primary:hover{box-shadow:var(--shadow-lg),0 0 0 4px #87a96b26;transform:translateY(-2px)}.btn--primary:active{transform:translateY(0)}.btn--primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--shadow-sm);transform:none}.btn--outline{border:2px solid var(--c-sage);color:var(--c-fern);background:0 0}.btn--outline:hover{background:#87a96b14;transform:translateY(-1px)}.btn--ghost{color:var(--c-fern);padding:var(--sp-sm)var(--sp-md)}.btn--ghost:hover{color:var(--c-forest);border-radius:var(--r-full);background:#87a96b14}.btn--sm{padding:var(--sp-xs)var(--sp-md);font-size:.875rem}.btn--pulse{animation:pulse 2.5s ease-in-out infinite}.btn--pulse:hover{animation:none}.btn__icon{transition:transform var(--dur-normal)var(--ease-out)}.btn:hover .btn__icon{transform:translate(4px)}.toast{position:fixed;bottom:var(--sp-xl);background:var(--c-forest);color:#fff;padding:var(--sp-md)var(--sp-xl);border-radius:var(--r-full);opacity:0;transition:all var(--dur-normal)var(--ease-out);z-index:1000;pointer-events:none;box-shadow:var(--shadow-lg);font-size:.875rem;font-weight:600;left:50%;transform:translate(-50%)translateY(80px)}.toast--visible{opacity:1;transform:translate(-50%)translateY(0)}.intro{padding:var(--sp-3xl)var(--sp-lg)var(--sp-2xl);display:flex;align-items: center;gap:var(--sp-xl);text-align:center;flex-direction:column;max-width:720px;margin:0 auto}.intro__decor{position:fixed;pointer-events:none;z-index:-1;overflow:hidden;inset:0}.leaf{position:absolute;opacity:.25;animation:floatLeaf 20s ease-in-out infinite;font-size:1.5rem}.leaf--1{animation-delay:0s;top:10%;left:5%}.leaf--2{animation-delay:-5s;font-size:1.8rem;top:30%;right:8%}.leaf--3{animation-delay:-10s;bottom:20%;left:10%}.leaf--4{animation-delay:-15s;font-size:1.2rem;top:60%;right:5%}.intro__hero{display:flex;align-items: center;gap:var(--sp-md);flex-direction:column}.intro__sprout{animation:sproutBounce 3s ease-in-out infinite;font-size:4rem;line-height:1}.intro__title{font-family:var(--font-display);color:var(--c-forest);letter-spacing:-.02em;position:relative;font-size:clamp(3rem,8vw,4.5rem);font-weight:700;line-height:1.1}.intro__title:after{content:"";position:absolute;background:var(--c-sage-light);animation:wavyUnderline 3s ease-in-out infinite;border-radius:2px;height:4px;bottom:-4px;left:10%;right:10%}.intro__subtitle{display:block;font-family:var(--font-display);color:var(--c-fern);margin-top:var(--sp-xs);font-size:clamp(1rem,3vw,1.4rem);font-weight:600}.intro__tagline{font-family:var(--font-display);color:var(--c-charcoal);margin-top:var(--sp-md);font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700}.intro__desc{color:var(--c-text-secondary);max-width:360px;font-size:.95rem}.intro__saved{display:flex;align-items: center;gap:var(--sp-xs);flex-direction:column}.intro__saved-time{color:var(--c-text-muted);font-size:.8rem}.intro__types{padding-top:var(--sp-xl);border-top:1px solid var(--c-border-light);width:100%}.intro__types-title{font-family:var(--font-display);color:var(--c-forest);margin-bottom:var(--sp-xs);font-size:1.3rem;font-weight:700}.intro__types-sub{color:var(--c-text-muted);margin-bottom:var(--sp-lg);font-size:.85rem}.intro__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--sp-md)}.type-card{background:var(--c-surface);border:1px solid var(--c-border-light);border-radius:var(--r-md);padding:var(--sp-md)var(--sp-sm);text-align:center;transition:all var(--dur-normal)var(--ease-out);position:relative;overflow:hidden}.type-card:hover{box-shadow:var(--shadow-md);border-color:var(--c-sage-light);transform:translateY(-3px)}.type-card__img{margin:0 auto var(--sp-sm);object-fit:cover;border-radius:20%;width:56px;height:56px}.type-card__code{font-family:var(--font-display);color:var(--c-forest);font-size:.85rem;font-weight:700}.type-card__cn{color:var(--c-text-secondary);margin-top:2px;font-size:.75rem}.type-card__tag{position:absolute;background:var(--c-sage);color:#fff;border-radius:var(--r-full);padding:2px 6px;font-size:.6rem;font-weight:700;top:6px;right:6px}.intro__footer{color:var(--c-text-muted);padding:var(--sp-xl)0;text-align:center;font-size:.8rem}.intro__footer a{color:var(--c-sage);text-decoration:none;transition:color var(--dur-normal);font-weight:600}.intro__footer a:hover{color:var(--c-forest);text-decoration:underline}.test{padding:var(--sp-lg);display:flex;gap:var(--sp-xl);flex-direction:column;max-width:640px;margin:0 auto}.test__header{position:sticky;z-index:10;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:var(--sp-md);border-radius:0 0 var(--r-lg)var(--r-lg);display:flex;align-items: center;gap:var(--sp-md);background:#f0f7eeeb;top:0}.test__vine{display:flex;flex-direction:column;flex:1;gap:4px}.test__vine-track{background:var(--c-border-light);border-radius:var(--r-full);overflow:hidden;position:relative;height:8px}.test__vine-fill{background:linear-gradient(90deg,var(--c-lime-soft),var(--c-sage));border-radius:var(--r-full);transition:width var(--dur-slow)var(--ease-out);position:relative;height:100%}.test__leaf{position:absolute;animation:leafAppear var(--dur-normal)var(--ease-out)both;font-size:.7rem;top:-12px;transform:translate(-50%)}.test__progress-text{font-family:var(--font-display);color:var(--c-text-muted);text-align:center;font-size:.75rem;font-weight:600}.test__list{display:flex;gap:var(--sp-xl);flex-direction:column}.q-card{background:var(--c-surface);border:1px solid var(--c-border-light);border-radius:var(--r-lg);padding:var(--sp-xl);box-shadow:var(--shadow-sm);animation:cardIn var(--dur-slow)var(--ease-out)}.q-card__meta{display:flex;align-items: center;gap:var(--sp-sm);margin-bottom:var(--sp-md)}.q-card__badge{background:var(--c-mint-cream);color:var(--c-fern);font-family:var(--font-display);border-radius:var(--r-full);padding:4px 12px;font-size:.75rem;font-weight:700}.q-card__text{color:var(--c-charcoal);margin-bottom:var(--sp-lg);font-size:1.05rem;font-weight:500;line-height:1.65}.q-card__options{display:flex;gap:var(--sp-sm);flex-direction:column}.q-card__radio{position:absolute;opacity:0;pointer-events:none}.q-card__option{display:flex;align-items: center;gap:var(--sp-md);padding:var(--sp-md)var(--sp-lg);border-radius:var(--r-md);border:2px solid var(--c-border-light);cursor:pointer;transition:all var(--dur-normal)var(--ease-out);position:relative}.q-card__option:hover{border-color:var(--c-sage-light);background:#87a96b0a}.q-card__option--selected{border-color:var(--c-sage);background:#87a96b14;box-shadow:0 0 0 3px #87a96b1f}.q-card__option--selected .q-card__code{background:var(--c-sage);color:#fff}.q-card__code{display:flex;background:var(--c-mint-cream);color:var(--c-fern);font-family:var(--font-display);transition:all var(--dur-normal)var(--ease-out);border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;width:32px;height:32px;font-size:.85rem;font-weight:700}.q-card__label{color:var(--c-text);font-size:.95rem;line-height:1.5}.test__footer{display:flex;align-items: center;gap:var(--sp-md);padding:var(--sp-xl)0 var(--sp-2xl);flex-direction:column}.test__hint{color:var(--c-text-muted);text-align:center;font-size:.85rem}.result{padding:var(--sp-lg);display:flex;gap:var(--sp-xl);flex-direction:column;max-width:640px;margin:0 auto}.type-hero{position:relative;text-align:center;padding:var(--sp-xl)var(--sp-lg);background:var(--c-surface);border-radius:var(--r-xl);border:1px solid var(--c-border-light);box-shadow:var(--shadow-md);overflow:hidden}.type-hero__confetti{position:absolute;pointer-events:none;overflow:hidden;inset:0}.confetti-piece{position:absolute;animation:confettiFall 3s var(--ease-out)both;opacity:0;border-radius:50%}.type-hero__main{display:flex;align-items: flex-start;gap:var(--sp-xl);margin-bottom:var(--sp-md)}.type-hero__avatar{background:var(--c-mint-cream);border-radius:var(--r-lg);overflow:hidden;display:flex;box-shadow:var(--shadow-md);animation:avatarPop var(--dur-slow)var(--ease-out);flex-shrink:0;justify-content:center;align-items: center;width:120px;height:120px}.type-hero__img{object-fit:cover;width:100%;height:100%}.type-hero__placeholder{font-family:var(--font-display);color:var(--c-fern);font-size:1.8rem;font-weight:700}.type-hero__badge{display:flex;align-items: flex-start;gap:var(--sp-sm);flex-direction:column;min-width:0}.type-hero__mode{background:var(--c-sage);color:#fff;font-family:var(--font-display);border-radius:var(--r-full);padding:4px 16px;font-size:.75rem;font-weight:700}.type-hero__code{font-family:var(--font-display);color:var(--c-forest);font-size:clamp(1.5rem,5vw,2.2rem);font-weight:700}.type-hero__badge-text{color:var(--c-text-secondary);font-size:.85rem;font-weight:600}.type-hero__quote{margin-top:var(--sp-md);padding:var(--sp-sm)var(--sp-xl);background:var(--c-surface-alt);border-radius:var(--r-md);color:var(--c-fern);font-style:italic;font-weight:600}.result__desc-card{background:var(--c-surface);border:1px solid var(--c-border-light);border-radius:var(--r-lg);padding:var(--sp-xl);box-shadow:var(--shadow-sm)}.result__desc-title{font-family:var(--font-display);color:var(--c-forest);margin-bottom:var(--sp-md);font-size:1.2rem;font-weight:700}.result__desc-text{color:var(--c-text);margin-bottom:var(--sp-md);font-size:.95rem;line-height:1.75}.result__desc-sub{color:var(--c-text-secondary);font-size:.85rem;font-style:italic}.result__fun-note{color:var(--c-text-muted);text-align:center;padding:var(--sp-md);background:var(--c-surface-alt);border-radius:var(--r-md);font-size:.8rem;line-height:1.6}.radar{background:var(--c-surface);border:1px solid var(--c-border-light);border-radius:var(--r-lg);padding:var(--sp-xl);box-shadow:var(--shadow-sm)}.radar__title{font-family:var(--font-display);color:var(--c-forest);text-align:center;margin-bottom:var(--sp-md);font-size:1.1rem;font-weight:700}.radar__svg{display:block;width:100%;max-width:320px;margin:0 auto}.dim-list{display:flex;gap:var(--sp-md);flex-direction:column}.dim-list__title{font-family:var(--font-display);color:var(--c-forest);margin-bottom:var(--sp-sm);font-size:1.1rem;font-weight:700}.dim-item{background:var(--c-surface);border:1px solid var(--c-border-light);border-radius:var(--r-md);padding:var(--sp-md)var(--sp-lg);box-shadow:var(--shadow-sm)}.dim-item__top{display:flex;margin-bottom:var(--sp-sm);justify-content:space-between;align-items: center}.dim-item__name{font-family:var(--font-display);color:var(--c-fern);font-size:.9rem;font-weight:700}.dim-item__score{font-family:var(--font-display);color:var(--c-sage);background:var(--c-mint-cream);border-radius:var(--r-full);padding:2px 10px;font-size:.8rem;font-weight:600}.dim-item__bar{background:var(--c-border-light);border-radius:var(--r-full);margin-bottom:var(--sp-sm);overflow:hidden;height:4px}.dim-item__bar-fill{background:linear-gradient(90deg,var(--c-lime-soft),var(--c-sage));border-radius:var(--r-full);transition:width var(--dur-slow)var(--ease-out);height:100%}.dim-item__explanation{color:var(--c-text-secondary);font-size:.85rem;line-height:1.5}.share-bar{display:flex;align-items: center;gap:var(--sp-xl);padding-top:var(--sp-lg);border-top:1px solid var(--c-border-light);flex-direction:column}.share-bar__actions{display:flex;gap:var(--sp-sm);flex-wrap:wrap;justify-content:center}.share-bar__qr{display:flex;align-items: center;gap:var(--sp-xs);flex-direction:column}.share-bar__qr-img{border-radius:var(--r-sm);width:120px;height:120px}.share-bar__qr-text{color:var(--c-text-secondary);font-size:.85rem;font-weight:600}.share-bar__qr-host{color:var(--c-text-muted);font-size:.75rem}@keyframes screenIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes cardIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes sproutBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes wavyUnderline{0%,to{transform:scaleX(1)translateY(0)}50%{transform:scaleX(.85)translateY(1px)}}@keyframes floatLeaf{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(10px,-15px)rotate(5deg)}50%{transform:translate(-5px,-25px)rotate(-3deg)}75%{transform:translate(8px,-10px)rotate(4deg)}}@keyframes leafAppear{0%{opacity:0;transform:translate(-50%)scale(0)}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes avatarPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(400px)rotate(720deg)scale(.3)}}@media (max-width:480px){.intro{padding:var(--sp-2xl)var(--sp-md)var(--sp-xl)}.intro__grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--sp-sm)}.type-card{padding:var(--sp-sm)var(--sp-xs)}.type-card__img{width:44px;height:44px}.q-card{padding:var(--sp-lg)}.q-card__text{font-size:.95rem}.q-card__option,.test__header{padding:var(--sp-sm)var(--sp-md)}.type-hero__avatar{width:100px;height:100px}.share-bar__actions{width:100%}.share-bar__actions .btn{padding:var(--sp-sm)var(--sp-md);flex:1;min-width:0;font-size:.85rem}}@media (min-width:768px){.intro__sprout{font-size:5rem}.type-hero{padding:var(--sp-2xl)var(--sp-xl)}.type-hero__avatar{width:140px;height:140px}.intro__decor .leaf{opacity:.15;font-size:2rem}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}