.app{min-height:100vh;background:transparent;color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 2rem;background:var(--glass-bg);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.logo{height:60px;width:auto;filter:drop-shadow(0 0 10px rgba(52,152,219,.3))}.app-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding-top:100px}.welcome-screen{text-align:center;max-width:680px;padding:3rem;background:radial-gradient(120% 120% at 0% 0%,rgba(116,185,255,.12),transparent 30%),var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--glass-border);border-radius:28px;box-shadow:var(--glass-shadow)}.welcome-title{font-size:3.2rem;font-weight:700;background:linear-gradient(45deg,var(--accent),#2980b9,#74b9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;animation:titleGlow 3s ease-in-out infinite alternate}.welcome-subtitle{font-size:1.15rem;color:#ecf0f1d9;margin-bottom:2.25rem;line-height:1.6}.vto-button{position:relative;min-width:320px;height:var(--pill-h);padding:0 24px;border-radius:calc(var(--pill-h) / 2);border:1px solid var(--glass-border);background:linear-gradient(180deg,#ffffff29,#ffffff0d);color:#fff;cursor:pointer;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;margin:0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;letter-spacing:.2px;box-shadow:0 8px 24px #00000059,inset 0 0 24px #ffffff14}.vto-button:hover{transform:translateY(-1px);box-shadow:0 12px 34px #00000073,inset 0 0 28px #ffffff1f}.vto-button:active{transform:translateY(0)}.vto-button.loading{animation:spin 2s linear infinite}.button-content{display:flex;flex-direction:row;align-items:center;gap:.75rem;z-index:1}.button-icon{font-size:1.4rem;animation:none}.button-ripple{display:none}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top:3px solid white;border-radius:50%;animation:spin 1s linear infinite}.vto-screen{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}@keyframes pulse{0%,to{box-shadow:0 8px 24px #00000059,inset 0 0 24px #ffffff14}50%{box-shadow:0 10px 30px #00000073,inset 0 0 28px #ffffff1f}}@keyframes pulseHover{0%,to{box-shadow:0 12px 34px #00000073,inset 0 0 28px #ffffff1f}50%{box-shadow:0 16px 40px #0000008c,inset 0 0 36px #ffffff29}}@keyframes ripple{0%{width:0;height:0;opacity:1}to{width:200px;height:200px;opacity:0}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}@keyframes titleGlow{0%{text-shadow:0 0 20px rgba(52,152,219,.5)}to{text-shadow:0 0 30px rgba(52,152,219,.8)}}@media (max-width: 768px){.welcome-title{font-size:2.4rem}.welcome-subtitle{font-size:1rem;margin-bottom:1.8rem}.vto-button{min-width:260px;height:56px;border-radius:28px;font-size:1.1rem}.logo{height:40px}.app-header{padding:.5rem 1rem}}.vto-container{width:100%;height:100vh;display:flex;flex-direction:column;background:transparent;color:#fff}.vto-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--glass-bg);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:100}.stop-button{background:linear-gradient(45deg,#e74c3c,#c0392b);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:25px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #e74c3c4d}.stop-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e74c3c80}.face-status{display:flex;align-items:center}.status-indicator{padding:.5rem 1rem;border-radius:20px;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;background:linear-gradient(180deg,#ffffff1a,#ffffff0a);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.status-indicator.searching{background:linear-gradient(45deg,#f39c12,#e67e22);animation:searchingPulse 2s infinite}.status-indicator.detected{background:linear-gradient(45deg,#27ae60,#2ecc71);animation:detectedGlow 1s ease-in-out infinite alternate}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:2rem}.vto-canvas{max-width:100%;max-height:100%;border-radius:20px;box-shadow:var(--glass-shadow),0 0 30px #74b9ff2e;border:1px solid var(--glass-border)}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0f141999;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;gap:1rem}.loading-spinner{width:50px;height:50px;border:4px solid rgba(52,152,219,.3);border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}.vto-instructions{text-align:center;padding:1rem 2rem;background:var(--glass-bg);border-top:1px solid var(--glass-border);color:#bdc3c7}.vto-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;padding:2rem;background:linear-gradient(135deg,#0f1419,#1a2332);color:#fff}.vto-error h2{color:#e74c3c;margin-bottom:1rem;font-size:2rem}.vto-error p{color:#bdc3c7;margin-bottom:2rem;font-size:1.1rem}.error-button{background:linear-gradient(45deg,#3498db,#2980b9);color:#fff;border:none;padding:1rem 2rem;border-radius:25px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #3498db4d}.error-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3498db80}@keyframes searchingPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes detectedGlow{0%{box-shadow:0 0 10px #27ae6080}to{box-shadow:0 0 20px #27ae60cc}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.vto-header{padding:.75rem 1rem}.stop-button{padding:.5rem 1rem;font-size:.9rem}.status-indicator{padding:.4rem .8rem;font-size:.9rem}.canvas-container{padding:1rem}.vto-instructions{padding:.75rem 1rem;font-size:.9rem}}@media (max-width: 480px){.vto-header{flex-direction:column;gap:.5rem;padding:1rem}.stop-button{width:100%;text-align:center}}.main-content{flex:1;display:flex;height:calc(100vh - 140px)}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:1rem}.controls-panel{width:400px;background:var(--glass-bg);border-left:1px solid var(--glass-border);padding:1rem;overflow-y:auto;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--glass-shadow)}.controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--glass-border)}.controls-header h3{color:var(--accent);font-size:1.2rem;margin:0}.reset-button{background:linear-gradient(45deg,#f39c12,#e67e22);color:#fff;border:none;padding:.5rem 1rem;border-radius:15px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s ease}.reset-button:hover{transform:translateY(-1px);box-shadow:0 4px 15px #f39c1266}.controls-grid{display:flex;flex-direction:column;gap:1.5rem}.control-group{background:#1a23328c;border-radius:16px;padding:1rem;border:1px solid var(--glass-border);position:relative}.control-group h4{color:#2ecc71;margin:0 0 1rem;font-size:1rem;font-weight:600}.control-item{margin-bottom:1rem}.control-item:last-child{margin-bottom:0}.control-item label{display:block;color:#bdc3c7;font-size:.9rem;margin-bottom:.5rem;font-weight:500}.input-group{display:flex;flex-direction:column;gap:.5rem}.manual-input{width:100%;padding:.5rem;background:#3498db1a;border:1px solid rgba(52,152,219,.3);border-radius:5px;color:#ecf0f1;font-size:.9rem;font-family:Courier New,monospace;text-align:center;transition:all .3s ease}.manual-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 10px #3498db4d;background:#3498db26}.manual-input:hover{border-color:#3498db80;background:#3498db1f}.slider-input{width:100%;height:6px;background:#3498db33;border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:.25rem}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;cursor:pointer;box-shadow:0 2px 10px #3498db4d;transition:all .3s ease}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 15px #3498db80}.slider-input::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 10px #3498db4d}.manual-input::-webkit-outer-spin-button,.manual-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.manual-input[type=number]{-moz-appearance:textfield}.manual-input.recently-changed{background:#2ecc7133;border-color:#2ecc7180;animation:valueChanged .5s ease-out}@keyframes valueChanged{0%{background:#2ecc7166;border-color:#2ecc71cc}to{background:#2ecc7133;border-color:#2ecc7180}}@media (max-width: 768px){.manual-input{font-size:.8rem;padding:.4rem}.input-group{gap:.3rem}}.control-item input[type=range]{width:100%;height:6px;background:#3498db33;border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;cursor:pointer;box-shadow:0 2px 10px #3498db4d;transition:all .3s ease}.control-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 15px #3498db80}.control-item input[type=range]::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 10px #3498db4d}.control-item input[type=checkbox]{margin-right:.5rem;transform:scale(1.2);accent-color:#3498db}.toggle-controls{position:fixed;right:1rem;top:50%;transform:translateY(-50%);background:linear-gradient(45deg,#3498db,#2980b9);color:#fff;border:none;padding:.75rem;border-radius:50%;cursor:pointer;font-size:1.2rem;z-index:1000;box-shadow:0 4px 15px #3498db4d;transition:all .3s ease}.toggle-controls:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 20px #3498db80}@media (max-width: 1200px){.main-content{flex-direction:column}.controls-panel{width:100%;max-height:300px;border-left:none;border-top:1px solid var(--glass-border)}}@media (max-width: 768px){.controls-panel{max-height:250px}.controls-grid{gap:1rem}.control-group{padding:.75rem}}.restart-note{color:#f39c12;font-size:.8rem;font-weight:400;font-style:italic}.error-buttons{display:flex;gap:1rem;margin-top:1rem}.error-button.restart{background:linear-gradient(45deg,#27ae60,#2ecc71)}.error-button.restart:hover{box-shadow:0 6px 20px #2ecc7180}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{width:100%;min-height:100vh}.text-center{text-align:center}.flex-center{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a2332}::-webkit-scrollbar-thumb{background:#3498db;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#2980b9}:root{--bg-1: #0f1419;--bg-2: #17202e;--bg-3: #24344a;--accent: #74b9ff;--accent-2: #5dade2;--glass-bg: rgba(255, 255, 255, .045);--glass-border: rgba(255, 255, 255, .16);--glass-shadow: 0 10px 28px rgba(0, 0, 0, .32);--glass-blur: 18px;--glass-bg-strong: rgba(255, 255, 255, .1);--glass-border-strong: rgba(255, 255, 255, .28);--ring: rgba(116, 185, 255, .6);--pill-h: 64px;--stroke-w: 1.6px}body{background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 50%,var(--bg-3) 100%);position:relative}body:before{content:"";position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;z-index:-1;background:radial-gradient(40% 40% at 20% 20%,rgba(116,185,255,.35),transparent 60%),radial-gradient(35% 35% at 80% 30%,rgba(93,173,226,.25),transparent 60%),radial-gradient(45% 45% at 50% 80%,rgba(52,152,219,.25),transparent 60%);filter:blur(60px) saturate(140%);animation:liquidShift 24s ease-in-out infinite alternate}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>');opacity:.4}@keyframes liquidShift{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(-2%,-1%,0) scale(1.05)}to{transform:translate3d(2%,1%,0) scale(1.08)}}.glass-elevated{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);backdrop-filter:blur(var(--glass-blur)) saturate(140%);box-shadow:var(--glass-shadow)}.glass-border-animated{position:relative}.glass-border-animated:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;background:conic-gradient(from 0deg,#74b9ff80,#ffffff26,#5dade266,#ffffff26,#74b9ff80);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);animation:borderRotate 14s linear infinite;pointer-events:none}@keyframes borderRotate{to{transform:rotate(360deg)}}.sheen-sweep{position:relative;overflow:hidden}.sheen-sweep:after{content:"";position:absolute;inset:-150% -50% auto -50%;height:300%;background:conic-gradient(from 0deg,transparent 0 20%,rgba(255,255,255,.12) 25%,transparent 30% 70%,rgba(255,255,255,.1) 75%,transparent 80%);transform:rotate(0);animation:sheenMove 8s linear infinite;pointer-events:none}@keyframes sheenMove{0%{transform:translate(-40%) rotate(0)}50%{transform:translate(40%) rotate(180deg)}to{transform:translate(140%) rotate(360deg)}}.sheen-diagonal{position:relative;overflow:hidden}.sheen-diagonal:after{content:"";position:absolute;top:-40%;left:-30%;width:200%;height:180%;background:linear-gradient(20deg,#fff0 30%,#ffffff24 45%,#ffffff0f 55%,#fff0 70%);transform:rotate(8deg);pointer-events:none}.gradient-stroke{position:relative}.gradient-stroke:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--stroke-w);border-radius:inherit;background:linear-gradient(120deg,#ffffffa6,#74b9ff8c,#fff6);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}