:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#141420b3;--bg-card-hover:#1a1a2acc;--bg-glass:#ffffff08;--text-primary:#f0f0f5;--text-secondary:#8b8ba3;--text-muted:#55556a;--accent-purple:#a78bfa;--accent-cyan:#06b6d4;--accent-green:#34d399;--accent-red:#f87171;--accent-yellow:#fbbf24;--gradient-main:linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);--gradient-match:linear-gradient(135deg, #34d399 0%, #06b6d4 100%);--gradient-no-match:linear-gradient(135deg, #f87171 0%, #fb923c 100%);--border-subtle:#ffffff0f;--border-accent:#a78bfa4d;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 8px 32px #0006;--shadow-lg:0 16px 64px #00000080;--shadow-glow:0 0 40px #a78bfa26;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--font-family:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);background-image:radial-gradient(80% 50% at 50% -10%,#a78bfa14,#0000),radial-gradient(60% 40% at 80% 100%,#06b6d40f,#0000);min-height:100vh;overflow-x:hidden}a{color:var(--accent-cyan);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--accent-purple)}.loading-overlay{z-index:1000;background:var(--bg-primary);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);justify-content:center;align-items:center;transition:opacity .5s,visibility .5s;display:flex;position:fixed;inset:0}.loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-content{text-align:center}.loading-content h2{background:var(--gradient-main);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-top:1.5rem;font-size:1.5rem;font-weight:600}.loading-content p{color:var(--text-secondary);margin-top:.5rem;font-size:.875rem}.loading-spinner{border:3px solid var(--border-subtle);border-top-color:var(--accent-purple);border-radius:50%;width:48px;height:48px;margin:0 auto;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#app-header{border-bottom:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background:#0a0a0fcc;padding:1.25rem 2rem;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;display:flex}.logo{align-items:center;gap:.75rem;display:flex}.logo-icon{align-items:center;animation:3s ease-in-out infinite pulse-glow;display:flex}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 0 4px #a78bfa4d)}50%{filter:drop-shadow(0 0 12px #a78bfa99)}}.logo-text{letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.logo-badge{text-transform:uppercase;letter-spacing:.08em;background:var(--gradient-main);color:#fff;border-radius:4px;padding:.2em .6em;font-size:.625rem;font-weight:600}.header-subtitle{color:var(--text-secondary);font-size:.8125rem}#main-content{max-width:1200px;margin:0 auto;padding:2.5rem 2rem}.compare-grid{grid-template-columns:1fr auto 1fr;align-items:start;gap:1.5rem;display:grid}.image-panel{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color var(--transition-normal), box-shadow var(--transition-normal);overflow:hidden}.image-panel:hover{border-color:var(--border-accent);box-shadow:var(--shadow-glow)}.panel-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.panel-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-size:.75rem;font-weight:600}.face-status{color:var(--text-muted);transition:color var(--transition-fast);font-size:.6875rem;font-weight:500}.face-status.detected{color:var(--accent-green)}.face-status.error{color:var(--accent-red)}.drop-zone{aspect-ratio:1;cursor:pointer;transition:background var(--transition-normal);position:relative;overflow:hidden}.drop-zone:hover{background:var(--bg-glass)}.drop-zone.drag-over{outline:2px dashed var(--accent-purple);outline-offset:-8px;background:#a78bfa0d}.face-canvas{object-fit:cover;width:100%;height:100%;display:none}.face-canvas.visible{display:block}.drop-placeholder{color:var(--text-muted);transition:color var(--transition-fast);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:2rem;display:flex;position:absolute;inset:0}.drop-placeholder svg{opacity:.4;transition:opacity var(--transition-fast), transform var(--transition-normal)}.drop-zone:hover .drop-placeholder svg{opacity:.7;transform:translateY(-2px)}.drop-placeholder p{font-size:.8125rem;font-weight:500}.drop-hint{color:var(--text-muted);opacity:.6;font-size:.6875rem}.drop-placeholder.hidden{display:none}.results-panel{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-width:220px;min-height:300px;padding:2rem 1.5rem;display:flex}.result-content{text-align:center;flex-direction:column;align-items:center;gap:.75rem;display:flex}.result-content[hidden]{display:none!important}.result-idle{color:var(--text-muted)}.result-icon-idle{opacity:.3}.result-idle p{max-width:160px;font-size:.8125rem;line-height:1.5}.result-loading p{color:var(--text-secondary);font-size:.875rem}.result-spinner{border:3px solid var(--border-subtle);border-top-color:var(--accent-cyan);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}.match-indicator{position:relative}.match-ring{width:120px;height:120px;position:relative}.match-ring-svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:var(--border-subtle);stroke-width:6px}.ring-progress{fill:none;stroke:url(#ring-gradient);stroke-width:6px;stroke-linecap:round;stroke-dasharray:339.292;stroke-dashoffset:339.292px;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}.match-percentage{letter-spacing:-.02em;justify-content:center;align-items:center;font-size:1.75rem;font-weight:700;display:flex;position:absolute;inset:0}.match-label{border-radius:var(--radius-sm);transition:all var(--transition-normal);padding:.35em 1em;font-size:1rem;font-weight:600}.match-label.match{color:var(--accent-green);background:#34d3991f;border:1px solid #34d39933}.match-label.no-match{color:var(--accent-red);background:#f871711f;border:1px solid #f8717133}.match-label.uncertain{color:var(--accent-yellow);background:#fbbf241f;border:1px solid #fbbf2433}.match-details{color:var(--text-muted);font-size:.6875rem;line-height:1.6}.compare-btn{font-family:var(--font-family);color:#fff;background:var(--gradient-main);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);border:none;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;display:flex;box-shadow:0 4px 16px #a78bfa4d}.compare-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #a78bfa66}.compare-btn:active:not(:disabled){transform:translateY(0)}.compare-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.zk-section{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-top:3rem;padding:2rem}.section-title{align-items:center;gap:.5rem;margin-bottom:1.5rem;font-size:1.125rem;font-weight:600;display:flex}.section-icon{font-size:1.25rem}.zk-steps{align-items:flex-start;gap:0;display:flex}.zk-step{text-align:center;flex-direction:column;flex:1;align-items:center;gap:.75rem;display:flex;position:relative}.step-number{background:var(--gradient-main);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.875rem;font-weight:700;display:flex}.zk-step-locked .step-number{background:var(--bg-secondary);border:2px dashed var(--text-muted);color:var(--text-muted)}.step-content h3{margin-bottom:.25rem;font-size:.8125rem;font-weight:600}.step-content p{color:var(--text-secondary);max-width:180px;font-size:.75rem;line-height:1.5}.step-badge{text-transform:uppercase;letter-spacing:.06em;color:var(--accent-yellow);vertical-align:middle;background:#fbbf2426;border-radius:3px;padding:.15em .5em;font-size:.5625rem;font-weight:600;display:inline-block}.zk-connector{background:var(--border-subtle);flex-shrink:0;width:40px;height:2px;margin-top:17px}#app-footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border-subtle);margin-top:2rem;padding:2rem;font-size:.75rem}@media (width<=900px){.compare-grid{grid-template-columns:1fr;gap:1rem}.results-panel{min-height:auto;padding:1.5rem}.zk-steps{flex-direction:column;align-items:stretch}.zk-step{text-align:left;flex-direction:row;gap:1rem}.zk-connector{width:2px;height:20px;margin:0 0 0 17px}.step-content p{max-width:none}.header-inner{flex-direction:column;align-items:flex-start;gap:.5rem}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.compare-section{animation:.6s forwards fade-in-up}.zk-section{opacity:0;animation:.6s .15s forwards fade-in-up}@keyframes result-pop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.result-content.animate-in{animation:.5s forwards result-pop}.header-right{align-items:center;gap:1rem;display:flex}.wallet-btn{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--transition-short);border-radius:999px;padding:.5rem 1rem;font-size:.875rem;font-weight:500}.wallet-btn:hover{background:var(--bg-hover);border-color:#fff3}.action-btn{color:#fff;cursor:pointer;transition:all var(--transition-short);background:linear-gradient(135deg,#a78bfa,#06b6d4);border:none;border-radius:999px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;box-shadow:0 4px 12px #06b6d433}.action-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #06b6d44d}.action-btn:disabled{background:var(--bg-hover);color:var(--text-muted);box-shadow:none;cursor:not-allowed;opacity:.7}.outline-btn{border:1px solid var(--border-subtle);box-shadow:none;color:var(--text-secondary);background:0 0}.outline-btn:hover{background:var(--bg-hover);border-color:#fff3}.result-icon-success{font-size:2rem;animation:.5s forwards result-pop}.debug-section{opacity:0;margin-top:2rem;animation:.6s .3s forwards fade-in-up}.debug-card{border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f0f19cc;border:1px solid #a78bfa33;padding:1.5rem;box-shadow:0 0 40px #00000080}.debug-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.debug-title{color:var(--accent-purple);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:700}.debug-status{color:var(--text-muted);font-family:monospace;font-size:.75rem}.debug-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;display:grid}.debug-item{flex-direction:column;gap:.5rem;display:flex}.debug-item-wide{grid-column:1/-1}.debug-label{color:var(--text-secondary);text-transform:uppercase;font-size:.6875rem;font-weight:600}.debug-value{color:var(--text-primary);font-family:JetBrains Mono,Fira Code,monospace;font-size:.9375rem;font-weight:700}.debug-value-compact{word-break:break-all;font-size:.75rem}.highlight-cyan{color:var(--accent-cyan)}.debug-progress-container{background:var(--bg-secondary);border-radius:3px;height:6px;margin-top:.25rem;overflow:hidden}.debug-progress-bar{background:var(--gradient-main);height:100%;transition:width .5s ease-out}.debug-footer{border-top:1px solid var(--border-subtle);flex-direction:column;gap:.5rem;margin-top:1.5rem;padding-top:1rem;display:flex}.debug-footer p{color:var(--text-muted);font-size:.6875rem;line-height:1.4}.debug-footer strong{color:var(--accent-yellow)}