@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--white: #ffffff;--off-white: #f8f9fc;--gray-50: #f1f3f9;--gray-100: #e4e8f1;--gray-200: #cdd3e1;--gray-300: #9ba5bc;--gray-400: #6b7694;--gray-500: #4a5468;--gray-600: #2d3548;--gray-700: #1a2033;--gray-800: #0f1420;--black: #070a11;--accent: #6366f1;--accent-light: #818cf8;--accent-dark: #4f46e5;--danger: #ef4444;--success: #10b981;--warning: #f59e0b;--gradient-1: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);--gradient-2: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);--gradient-3: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);--shadow-sm: 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 16px rgba(0,0,0,.06);--shadow-lg: 0 8px 32px rgba(0,0,0,.08);--shadow-xl: 0 16px 48px rgba(0,0,0,.12);--shadow-glow: 0 0 60px rgba(99,102,241,.15);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--off-white);color:var(--gray-700);line-height:1.6;min-height:100vh}#root{min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}.hero{position:relative;padding:4rem 2rem 5rem;text-align:center;background:var(--white);overflow:hidden}.hero:before{content:"";position:absolute;top:-40%;left:50%;transform:translate(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(99,102,241,.06) 0%,transparent 70%);pointer-events:none}.hero:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gray-100),transparent)}.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-full);font-size:.75rem;font-weight:600;color:var(--accent);letter-spacing:.02em;margin-bottom:1.25rem;text-transform:uppercase}.hero-badge .pulse{width:6px;height:6px;background:var(--success);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}.hero h1{font-family:Space Grotesk,sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--gray-800);margin-bottom:.75rem}.hero h1 .gradient-text{background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-sub{font-size:1.1rem;color:var(--gray-400);font-weight:400;max-width:500px;margin:0 auto;line-height:1.5}.hero-sub em{font-style:normal;color:var(--gray-500);font-weight:500}.stats-bar{display:inline-flex;align-items:center;gap:8px;margin-top:1.5rem;padding:8px 20px;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);font-size:.85rem;color:var(--gray-400);font-weight:500}.stats-bar .count{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.main-content{flex:1;padding:2rem 1.5rem 4rem;max-width:640px;width:100%;margin:0 auto}.upload-card{background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--gray-100);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow .3s ease}.upload-card:hover{box-shadow:var(--shadow-lg)}.drop-zone{position:relative;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;border:2px dashed var(--gray-200);margin:1.25rem;border-radius:var(--radius-lg);background:var(--gray-50)}.drop-zone:hover{border-color:var(--accent-light);background:#6366f108}.drop-zone.dragging{border-color:var(--accent);background:#6366f10f;transform:scale(1.01)}.drop-zone.has-photo{border-style:solid;border-color:var(--gray-100);background:var(--white);padding:1.5rem;cursor:default}.upload-icon-wrap{width:72px;height:72px;margin:0 auto 1.25rem;border-radius:50%;background:var(--gradient-1);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #6366f140}.upload-icon-wrap svg{width:32px;height:32px;color:var(--white)}.drop-zone p{margin:0;color:var(--gray-500);font-size:1rem;font-weight:500}.drop-zone .sub-text{font-size:.85rem;color:var(--gray-300);margin-top:.25rem;font-weight:400}.photo-preview-wrap{display:flex;align-items:center;gap:1.5rem;text-align:left}.photo-preview-img{width:120px;height:120px;border-radius:var(--radius-lg);object-fit:cover;border:3px solid var(--white);box-shadow:var(--shadow-lg);flex-shrink:0}.photo-info{flex:1}.photo-info .filename{font-weight:600;color:var(--gray-700);font-size:.95rem;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}.photo-info .file-size{font-size:.8rem;color:var(--gray-300)}.photo-info .change-photo{display:inline-block;margin-top:.5rem;font-size:.8rem;color:var(--accent);font-weight:600;cursor:pointer;background:none;border:none;padding:0;text-decoration:none}.photo-info .change-photo:hover{text-decoration:underline}.btn-row{padding:0 1.25rem 1.25rem;display:flex;gap:.75rem}.btn-primary{flex:1;padding:.875rem 1.5rem;background:var(--gradient-1);color:var(--white);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 16px #6366f14d;display:flex;align-items:center;justify-content:center;gap:8px}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px #6366f166}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{padding:.875rem 1.5rem;background:var(--white);color:var(--gray-500);border:1px solid var(--gray-200);border-radius:var(--radius-md);font-size:.95rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .2s ease}.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-300);color:var(--gray-600)}.file-input{display:none}.error-toast{margin:0 1.25rem 1rem;padding:.75rem 1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-md);color:var(--danger);font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:8px;animation:fadeIn .3s ease}.loading-card{background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--gray-100);box-shadow:var(--shadow-lg);padding:3rem 2rem;text-align:center;animation:fadeIn .4s ease}.scan-visual{width:120px;height:120px;margin:0 auto 1.5rem;border-radius:50%;background:var(--gradient-1);display:flex;align-items:center;justify-content:center;position:relative}.scan-visual:before{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:spin 1.2s linear infinite}.scan-visual:after{content:"";position:absolute;top:-18px;right:-18px;bottom:-18px;left:-18px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent-light);animation:spin 1.8s linear infinite reverse;opacity:.5}@keyframes spin{to{transform:rotate(360deg)}}.scan-visual svg{width:40px;height:40px;color:var(--white)}.loading-label{font-family:Space Grotesk,sans-serif;font-size:1.15rem;font-weight:600;color:var(--gray-700);margin-bottom:.5rem}.loading-sub{font-size:.875rem;color:var(--gray-300);margin-bottom:1.5rem}.progress-track{width:100%;max-width:260px;height:4px;background:var(--gray-100);border-radius:var(--radius-full);margin:0 auto;overflow:hidden}.progress-fill{height:100%;background:var(--gradient-1);border-radius:var(--radius-full);animation:progressAnim 3s ease-in-out infinite}@keyframes progressAnim{0%{width:0%}40%{width:70%}80%{width:90%}to{width:95%}}.loading-steps{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem;max-width:280px;margin-left:auto;margin-right:auto;text-align:left}.loading-step{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--gray-300);opacity:0;animation:fadeSlideIn .4s ease forwards}.loading-step:nth-child(1){animation-delay:.3s}.loading-step:nth-child(2){animation-delay:1s}.loading-step:nth-child(3){animation-delay:1.8s}.loading-step:nth-child(4){animation-delay:2.5s}.loading-step .check{width:20px;height:20px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0}.loading-step .check svg{width:12px;height:12px;color:var(--white)}.loading-step.active{color:var(--gray-600);font-weight:500}@keyframes fadeSlideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.results-card{background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--gray-100);box-shadow:var(--shadow-lg);overflow:hidden;animation:cardReveal .5s ease}@keyframes cardReveal{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.result-header{padding:2rem 2rem 1.5rem;text-align:center;background:var(--gray-50);border-bottom:1px solid var(--gray-100)}.result-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--white);box-shadow:var(--shadow-md);margin-bottom:.75rem}.result-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.badge-red{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.badge-green{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}.badge-yellow{background:#fffbeb;color:#d97706;border:1px solid #fde68a}.badge-blue{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.score-section{padding:2rem;text-align:center;border-bottom:1px solid var(--gray-100);position:relative;overflow:hidden}.score-section:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(99,102,241,.04) 0%,transparent 70%);pointer-events:none}.score-ring{width:140px;height:140px;margin:0 auto 1rem;position:relative}.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.score-ring .track{fill:none;stroke:var(--gray-100);stroke-width:8}.score-ring .fill{fill:none;stroke:url(#scoreGradient);stroke-width:8;stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:377;animation:ringFill 1.5s ease-out .5s forwards}@keyframes ringFill{to{stroke-dashoffset:var(--dash-offset)}}.score-value{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.score-value .number{font-family:Space Grotesk,sans-serif;font-size:2.75rem;font-weight:700;color:var(--gray-800);line-height:1}.score-value .label{font-size:.7rem;color:var(--gray-300);font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}.score-emoji{font-size:2.5rem;margin-bottom:.5rem;animation:bounceIn .5s ease 1s both}@keyframes bounceIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.verdict-line{font-family:Space Grotesk,sans-serif;font-size:1.25rem;font-weight:600;color:var(--gray-700)}.roast-section{padding:1.5rem 2rem;border-bottom:1px solid var(--gray-100);opacity:0;animation:fadeSlideIn .5s ease .3s forwards}.section-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-300);margin-bottom:.75rem;display:flex;align-items:center;gap:6px}.section-label svg{width:14px;height:14px}.roast-quote{font-size:1.05rem;line-height:1.7;color:var(--gray-600);font-weight:450;padding-left:1.25rem;border-left:3px solid var(--accent-light);font-style:italic}.garble-section{padding:1rem 2rem;text-align:center;border-bottom:1px solid var(--gray-100);opacity:0;animation:fadeSlideIn .5s ease .6s forwards}.garble-text{font-family:Courier New,SF Mono,monospace;font-size:1.1rem;color:var(--gray-300);letter-spacing:.05em;padding:.5rem 1rem;background:var(--gray-50);border-radius:var(--radius-sm);display:inline-block;animation:glitchFlicker .15s ease infinite alternate}@keyframes glitchFlicker{0%{opacity:.7}to{opacity:1}}.disclaimer-card{margin-top:1.25rem;padding:1rem 1.25rem;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);text-align:center;opacity:0;animation:fadeSlideIn .5s ease 1.2s forwards}.disclaimer-card p{margin:0;font-size:.8rem;color:var(--gray-300);line-height:1.5}.reset-row{margin-top:1.25rem;text-align:center;opacity:0;animation:fadeSlideIn .5s ease 1.4s forwards}.steps-card{margin-top:2rem;background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);padding:2rem}.steps-card h2{font-family:Space Grotesk,sans-serif;font-size:1.25rem;font-weight:700;color:var(--gray-700);text-align:center;margin-bottom:1.75rem}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.step-item{text-align:center}.step-num{width:36px;height:36px;margin:0 auto .75rem;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:.85rem;color:var(--accent)}.step-item p{font-size:.85rem;color:var(--gray-400);font-weight:500;line-height:1.4}.steps-fine-print{margin:1.5rem 0 0;text-align:center;font-size:.75rem;color:var(--gray-200);font-style:italic}.app-footer{padding:2rem;text-align:center;border-top:1px solid var(--gray-100);background:var(--white);margin-top:auto}.app-footer p{margin:0;font-size:.8rem;color:var(--gray-300);font-weight:400}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .5s ease both}@media(max-width:640px){.hero{padding:3rem 1.5rem 3.5rem}.main-content{padding:1.5rem 1rem 3rem}.drop-zone{padding:2rem 1.5rem}.photo-preview-wrap{flex-direction:column;text-align:center}.photo-preview-img{width:100px;height:100px}.photo-info .filename{max-width:100%}.steps-grid{grid-template-columns:1fr;gap:1rem}.btn-row{flex-direction:column}.result-header,.score-section{padding:1.5rem}.roast-section,.garble-section{padding:1.25rem 1.5rem}.score-ring{width:120px;height:120px}.score-value .number{font-size:2.25rem}}