@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap";:root{--primary:#4a9fe5;--primary-light:#7bbdf0;--primary-lighter:#b8d9f7;--primary-lightest:#e8f4fd;--primary-dark:#2b7bc9;--primary-darker:#1a5a9e;--bg:#f0f6fb;--bg-card:#fff;--text-primary:#1a2b3d;--text-secondary:#5a6b7d;--text-muted:#8e9cad;--border:#d8e4ef;--success:#00b894;--warning:#fdcb6e;--danger:#e85d75;--info:#74b9ff;--font-family:"Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #4a9fe51a;--shadow-lg:0 8px 24px #4a9fe526;--shadow-xl:0 16px 48px #4a9fe533;--transition-fast:.15s ease;--transition-base:.3s ease;--transition-slow:.5s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-family);background:linear-gradient(180deg, var(--primary-lightest) 0%, var(--bg) 50%, #f8fbfe 100%);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}#app{max-width:420px;padding:var(--space-md);min-height:100vh;transition:opacity var(--transition-base), transform var(--transition-base);margin:0 auto}.title-hero{color:var(--text-primary);letter-spacing:-.02em;font-size:2rem;font-weight:900;line-height:1.3}.title-lg{color:var(--text-primary);font-size:1.5rem;font-weight:700}.title-md{color:var(--text-primary);font-size:1.25rem;font-weight:700}.title-sm{color:var(--text-secondary);font-size:1rem;font-weight:500}.text-body{color:var(--text-secondary);font-size:.9375rem;line-height:1.7}.text-sm{color:var(--text-muted);font-size:.8125rem}.card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md);border:1px solid #4a9fe514}.card-elevated{box-shadow:var(--shadow-lg)}.btn{border-radius:var(--radius-full);font-family:var(--font-family);cursor:pointer;transition:all var(--transition-base);-webkit-user-select:none;user-select:none;border:none;outline:none;justify-content:center;align-items:center;padding:14px 32px;font-size:1rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";transition:background var(--transition-fast);background:#fff0;position:absolute;inset:0}.btn:active:after{background:#0000001a}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;box-shadow:0 4px 16px #4a9fe559}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4a9fe566}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--primary-lightest);color:var(--primary-dark);border:1px solid var(--primary-lighter)}.btn-secondary:hover{background:var(--primary-lighter)}.btn-block{width:100%;display:flex}.btn-lg{padding:16px 40px;font-size:1.125rem}.option-btn{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-md);width:100%;font-family:var(--font-family);color:var(--text-primary);text-align:left;cursor:pointer;transition:all var(--transition-base);align-items:flex-start;padding:14px 16px;font-size:.9375rem;line-height:1.5;display:flex;position:relative}@media (hover:hover) and (pointer:fine){.option-btn:hover{border-color:var(--primary-light);background:var(--primary-lightest)}}.option-btn:active{transform:scale(.98)}.option-btn.selected{border-color:var(--primary);background:var(--primary-lightest);color:var(--primary-dark);font-weight:500}.option-btn.selected:before{content:"✓";background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:.75rem;font-weight:700;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.option-label{background:var(--primary-lightest);width:22px;height:22px;color:var(--primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;margin-right:10px;font-size:.75rem;font-weight:700;display:inline-flex}.option-btn.selected .option-label{background:var(--primary);color:#fff}.progress-container{background:var(--primary-lighter);border-radius:var(--radius-full);width:100%;height:6px;margin-bottom:var(--space-sm);overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--primary), var(--primary-dark));border-radius:var(--radius-full);height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.progress-text{color:var(--text-muted);text-align:right;margin-bottom:var(--space-lg);font-size:.8125rem}.tag{border-radius:var(--radius-full);align-items:center;padding:4px 12px;font-size:.8125rem;font-weight:500;display:inline-flex}.tag-primary{background:var(--primary-lightest);color:var(--primary-dark);border:1px solid var(--primary-lighter)}.tag-match{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;font-weight:600}.dimension-card{gap:var(--space-xs);padding:var(--space-md);background:var(--primary-lightest);border-radius:var(--radius-md);border:1px solid var(--primary-lighter);flex-direction:column;display:flex}.dimension-header{justify-content:space-between;align-items:center;display:flex}.dimension-label{color:var(--text-primary);font-size:.875rem;font-weight:500}.dimension-tag{color:var(--primary-dark);font-size:.8125rem;font-weight:600}.dimension-bar-bg{background:var(--primary-lighter);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.dimension-bar-fill{border-radius:var(--radius-full);height:100%;transition:width 1s cubic-bezier(.4,0,.2,1)}.landing-container{text-align:center;justify-content:center;align-items:center;gap:var(--space-xl);flex-direction:column;min-height:calc(100vh - 32px);display:flex}.landing-brand{color:var(--primary);letter-spacing:.15em;text-transform:uppercase;font-size:.875rem;font-weight:600}.landing-title{background:linear-gradient(135deg, var(--primary-dark), var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.25rem;font-weight:900;line-height:1.25}.landing-subtitle{color:var(--text-secondary);max-width:300px;font-size:1rem;line-height:1.6}.landing-stats{gap:var(--space-xl);justify-content:center;display:flex}.landing-stat{text-align:center}.landing-stat-number{color:var(--primary);font-size:1.5rem;font-weight:900}.landing-stat-label{color:var(--text-muted);margin-top:2px;font-size:.75rem}.landing-disclaimer{color:var(--text-muted);max-width:280px;font-size:.75rem;line-height:1.5}.quiz-container{padding-top:var(--space-lg)}.quiz-question{margin-bottom:var(--space-lg)}.quiz-question-text{color:var(--text-primary);margin-bottom:var(--space-lg);font-size:1.125rem;font-weight:600;line-height:1.6}.quiz-options{gap:var(--space-sm);flex-direction:column;display:flex}.quiz-nav{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.quiz-nav-btn{align-items:center;gap:var(--space-xs);color:var(--text-muted);font-family:var(--font-family);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);background:0 0;border:none;padding:10px 20px;font-size:.875rem;display:flex}.quiz-nav-btn:hover{color:var(--primary);background:var(--primary-lightest)}.quiz-nav-btn:disabled{opacity:.3;cursor:not-allowed}.result-container{padding-top:var(--space-lg);padding-bottom:var(--space-2xl)}.result-header{text-align:center;margin-bottom:var(--space-xl)}.result-type-label{color:var(--text-muted);margin-bottom:var(--space-sm);font-size:.875rem}.result-emoji{margin-bottom:var(--space-md);font-size:4rem;animation:.6s cubic-bezier(.36,.07,.19,.97) bounceIn;display:block}.result-name{margin-bottom:var(--space-xs);font-size:2rem;font-weight:900}.result-code{color:var(--text-muted);letter-spacing:.1em;margin-bottom:var(--space-md);font-size:1.25rem;font-weight:700}.result-tagline{color:var(--text-secondary);margin-bottom:var(--space-md);font-size:1rem}.result-section{margin-bottom:var(--space-lg)}.result-section-title{color:var(--text-primary);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px solid var(--primary-lighter);font-size:1rem;font-weight:700}.result-description{color:var(--text-secondary);white-space:pre-line;font-size:.9375rem;line-height:1.8}.result-advice{padding:var(--space-md);background:linear-gradient(135deg, var(--primary-lightest), #4a9fe50d);border-radius:var(--radius-md);border-left:3px solid var(--primary);color:var(--text-primary);font-size:.9375rem;line-height:1.6}.result-dimensions{gap:var(--space-sm);flex-direction:column;display:flex}.result-actions{gap:var(--space-sm);margin-top:var(--space-xl);flex-direction:column;display:flex}.poster-overlay{-webkit-backdrop-filter:blur(8px);z-index:1000;padding:var(--space-md);background:#0009;flex-direction:column;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.poster-image-container{border-radius:var(--radius-lg);width:100%;max-width:360px;max-height:70vh;box-shadow:var(--shadow-xl);overflow:auto}.poster-image-container img{width:100%;display:block}.poster-hint{color:#fffc;margin-top:var(--space-md);text-align:center;font-size:.875rem}.poster-close-btn{margin-top:var(--space-md);color:#fff;border-radius:var(--radius-full);font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast);background:#fff3;border:1px solid #ffffff4d;padding:10px 28px;font-size:.875rem}.poster-close-btn:hover{background:#ffffff4d}.poster-template{background:#f0f6fb;width:400px;padding:32px 24px;font-family:Noto Sans SC,sans-serif;position:fixed;top:0;left:-9999px}.poster-heading{margin-bottom:20px;padding-left:8px}.poster-brand{color:var(--text-primary);margin-bottom:2px;font-size:18px;font-weight:800}.poster-domain{color:var(--text-muted);font-size:12px}.poster-main-card{background:#fff;border-radius:16px;margin-bottom:24px;padding:32px 24px 24px;box-shadow:0 4px 24px #4a9fe514}.poster-top-center{text-align:center;margin-bottom:32px}.poster-result-label{color:var(--text-primary);margin-bottom:12px;font-size:14px;font-weight:600}.poster-result-name{letter-spacing:.05em;margin-bottom:-4px;font-size:36px;font-weight:900;line-height:1.2}.poster-result-code{letter-spacing:.1em;margin-bottom:16px;font-size:24px;font-weight:800}.poster-result-emoji{font-size:80px;display:block}.poster-section{margin-bottom:28px}.poster-section-title{color:var(--text-secondary);border-bottom:2px solid var(--primary-lightest);margin-bottom:12px;padding-bottom:6px;font-size:13px;font-weight:700}.poster-primary-type{color:var(--text-primary);margin-bottom:8px;font-size:24px;font-weight:900}.poster-pt-name{font-size:20px;font-weight:700}.poster-match-badge{border-radius:4px;margin-bottom:8px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-block}.poster-tagline-desc{color:var(--text-muted);font-size:12px}.poster-description-text{color:var(--text-primary);text-align:justify;font-size:13px;line-height:1.8}.poster-dim-grid{gap:8px;display:flex}.poster-dim-box{background:var(--bg);border-radius:8px;flex:1;padding:12px 8px}.poster-box-top{color:var(--text-primary);margin-bottom:4px;font-size:11px;font-weight:600}.poster-box-bottom{font-size:11px;font-weight:700}.poster-qr-wrap{border-top:1px dashed var(--border);align-items:center;gap:16px;padding-top:24px;display:flex}.poster-qr-img{width:64px;height:64px;padding:2px}.poster-qr-info{flex:1}.poster-qr-title{color:var(--text-primary);margin-bottom:2px;font-size:15px;font-weight:800}.poster-qr-desc{color:var(--text-secondary);font-size:11px;line-height:1.4}.poster-qr-url{color:var(--primary);margin-top:4px;font-size:12px;font-weight:600}.poster-footer{text-align:center;color:var(--text-muted);font-size:12px;font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.1)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.animate-fade-in{animation:.5s forwards fadeIn}.animate-slide-up{animation:.5s forwards slideUp}.animate-bounce-in{animation:.6s cubic-bezier(.36,.07,.19,.97) forwards bounceIn}.stagger-1{opacity:0;animation-delay:.1s}.stagger-2{opacity:0;animation-delay:.2s}.stagger-3{opacity:0;animation-delay:.3s}.stagger-4{opacity:0;animation-delay:.4s}@media (width<=420px){#app{padding:var(--space-sm) var(--space-md)}.landing-title{font-size:1.75rem}}::-webkit-scrollbar{background:0 0;width:0}.landing-icp{text-align:center;margin-top:24px;font-size:12px}.landing-icp a{color:var(--text-muted);text-decoration:none;transition:color .2s}.landing-icp a:hover{color:var(--primary)}.quiz-ad-banner{background:linear-gradient(135deg, var(--bg-card), #f8fbfe);border:1px dashed var(--primary-light);border-radius:var(--radius-md);text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:var(--transition-base);flex-direction:column;justify-content:center;align-items:center;margin-top:32px;margin-bottom:16px;padding:16px;display:flex;position:relative}.quiz-ad-banner:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.quiz-ad-badge{background:var(--text-muted);color:#fff;opacity:.8;letter-spacing:1px;border-radius:4px;padding:2px 6px;font-size:10px;position:absolute;top:-10px;right:16px}.quiz-ad-content{color:var(--text-secondary);flex-direction:column;display:flex}