*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark:#0a0a0a;--bg-panel:#111;--text-primary:#e8e4dc;--text-secondary:#8a8580;--text-muted:#555250;--accent-gold:#c9a84c;--accent-warm:#d4a574;--serif:"Quintessential", Georgia, "Times New Roman", serif;--sans:"Spline Sans Mono", monospace}html,body,#root{background:var(--bg-dark);width:100%;height:100%;color:var(--text-primary);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}body{cursor:crosshair}.app{background:var(--bg-dark);width:100vw;height:100vh;position:relative;overflow:hidden}.capture-flash{z-index:100;pointer-events:none;background:#fff;animation:.6s ease-out forwards flash;position:fixed;inset:0}@keyframes flash{0%{opacity:1}to{opacity:0}}.permission-screen{flex-direction:column;justify-content:center;align-items:center;gap:32px;height:100%;display:flex}.permission-screen h1{font-family:var(--serif);letter-spacing:.05em;text-transform:uppercase;color:var(--text-primary);font-size:48px;font-weight:900}.permission-screen p{color:var(--text-secondary);text-align:center;max-width:400px;font-size:14px;line-height:1.6}.permission-screen .subtitle{font-family:var(--serif);color:var(--text-muted);margin-top:-16px;font-size:16px;font-style:italic}.permission-btn{border:1px solid var(--text-secondary);color:var(--text-primary);font-family:var(--sans);letter-spacing:.15em;text-transform:uppercase;cursor:pointer;background:0 0;padding:14px 40px;font-size:13px;transition:all .3s}.permission-btn:hover{border-color:var(--text-primary);background:#ffffff0d}.permission-error{color:#c44;font-size:13px}.split-layout{height:100%;display:flex}.split-left{background:#000;flex:0 0 60%;position:relative;overflow:hidden}.split-right{background:var(--bg-panel);flex-direction:column;flex:0 0 40%;justify-content:center;align-items:center;padding:40px;display:flex}.webcam-canvas{object-fit:cover;width:100%;height:100%;display:block}.frozen-frame{object-fit:cover;width:100%;height:100%}.face-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.emotion-panel{width:100%;max-width:440px}.emotion-panel h2{font-family:var(--serif);letter-spacing:.15em;text-transform:uppercase;color:var(--text-primary);text-align:center;margin-bottom:36px;font-size:34px}.emotion-bar{align-items:center;gap:16px;margin-bottom:24px;display:flex}.emotion-bar-label-name{letter-spacing:.08em;color:var(--text-primary);text-align:right;flex-shrink:0;width:140px;font-size:18px;font-weight:600}.emotion-bar-track{background:#ffffff14;border-radius:8px;flex:1;height:36px;overflow:hidden}.emotion-bar-fill{border-radius:8px;height:100%;transition:width .15s ease-out}.emotion-bar-pct{font-family:var(--serif);font-variant-numeric:tabular-nums;color:var(--text-secondary);text-align:left;flex-shrink:0;width:50px;font-size:18px;font-weight:600}.capture-btn{border:1px solid var(--accent-gold);color:var(--accent-gold);font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;background:0 0;margin-top:48px;padding:14px 40px;font-size:14px;transition:all .3s}.capture-btn:hover{background:#c9a84c1a}.capture-btn:disabled{opacity:.3;cursor:not-allowed}.no-face-msg{color:var(--text-muted);margin-top:24px;font-size:15px;font-style:italic}.loading-msg{font-family:var(--serif);color:var(--text-muted);letter-spacing:.1em;font-size:18px}.analysis-heading{font-family:var(--serif);letter-spacing:.15em;text-transform:uppercase;color:var(--text-primary);margin-bottom:40px;font-size:34px;font-weight:700}.analysis-status{letter-spacing:.2em;text-transform:uppercase;color:var(--accent-gold);font-size:16px;animation:1.5s ease-in-out infinite pulse-text}@keyframes pulse-text{0%,to{opacity:.5}50%{opacity:1}}.emotion-word{font-family:var(--serif);letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary);text-align:center;font-size:72px;font-weight:900;animation:3s ease-in-out forwards fade-in-out}@keyframes fade-in-out{0%{opacity:0;transform:scale(.95)}20%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.matching-heading{font-family:var(--serif);letter-spacing:.15em;text-transform:uppercase;color:var(--text-primary);min-height:30px;margin-bottom:40px;font-size:24px;font-weight:700}.painting-frame{border:3px solid var(--accent-gold);background:#1a1a1a;width:180px;height:180px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #c9a84c4d,0 0 0 6px #c9a84c1a,0 0 30px #c9a84c14,inset 0 0 20px #00000080}.face-scroll-strip{flex-direction:column;display:flex}.face-scroll-item{object-fit:cover;flex-shrink:0;width:180px;height:180px}.painting-frame-found{animation:.4s ease-in-out 4 border-blink}@keyframes border-blink{0%,to{border-color:var(--accent-gold)}50%{border-color:#c9a84c33}}.match-description{color:var(--text-secondary);letter-spacing:.05em;margin-top:20px;font-size:16px;font-style:italic}.reveal{width:100%;height:100%;position:relative;overflow:hidden}.reveal-painting{object-fit:contain;background:#0a0a0a;width:100%;height:100%}.reveal-pulse{pointer-events:none;border:2px solid #d4b44c;border-radius:50%;animation:.8s ease-in-out infinite blink-ring;position:absolute}@keyframes blink-ring{0%,to{opacity:1}50%{opacity:.15}}.reveal-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0a0aeb;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;align-items:center;gap:12px;padding:20px 28px;animation:.6s ease-out slide-up;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}@keyframes slide-up{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.reveal-card-fade{animation:1s ease-out forwards card-fade-out}@keyframes card-fade-out{0%{opacity:1}to{opacity:0}}.reveal-match-pct{font-family:var(--serif);letter-spacing:.1em;color:var(--accent-gold);font-size:22px;font-weight:700}.reveal-faces{align-items:center;gap:16px;display:flex}.reveal-thumb{object-fit:cover;border:1px solid #ffffff26;border-radius:6px;width:72px;height:72px}.reveal-vs{font-family:var(--serif);color:var(--text-muted);font-size:12px;font-style:italic}.start-over-btn{border:1px solid var(--text-muted);color:var(--text-secondary);font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;background:0 0;padding:10px 24px;font-size:11px;transition:all .3s;position:absolute;bottom:40px;right:40px}.start-over-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}.loupe-container{pointer-events:none;border:3px solid #d4b44c;border-radius:50%;animation:3s ease-out both loupe-appear;position:absolute;overflow:hidden;box-shadow:0 0 40px #0009,0 0 0 4px #d4b44c33}@keyframes loupe-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}