*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px;color:#333}#app{max-width:1400px;margin:0 auto}.face-landmarker-container{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;overflow:hidden}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;text-align:center}.header h1{font-size:2.5rem;margin-bottom:10px;font-weight:700}.header p{font-size:1.1rem;opacity:.9}.content{display:grid;grid-template-columns:1fr 400px;gap:0}.video-section{padding:30px;background:#f8f9fa;display:flex;flex-direction:column;align-items:center}.video-wrapper{position:relative;width:100%;max-width:460px;margin:0 auto}.video-container{position:relative;background:#000;border-radius:50%;overflow:hidden;box-shadow:0 8px 30px #0000004d;aspect-ratio:1 / 1;border:4px solid #667eea}#webcam{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}#output-canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scaleX(-1);height:100%;width:auto}.instruction-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:18px 24px;border-radius:14px;margin-bottom:20px;width:100%;max-width:460px;box-shadow:0 4px 16px #667eea59;transition:background .4s}.instruction-banner.success{background:linear-gradient(135deg,#11998e,#38ef7d);box-shadow:0 4px 16px #38ef7d59}.instruction-icon{font-size:2.2rem;line-height:1;flex-shrink:0}.instruction-text{font-size:1.15rem;font-weight:700;letter-spacing:.01em}.countdown-wrap{width:100%;max-width:460px;height:7px;background:#e0e0e0;border-radius:4px;margin-bottom:16px;overflow:hidden}.countdown-bar{height:100%;width:100%;background:#667eea;border-radius:4px;transition:width .25s linear,background-color .4s}.countdown-bar.warning{background:#f59e0b}.countdown-bar.danger{background:#ef4444}.good-feedback{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#11998ebf;color:#fff;pointer-events:none;transition:opacity .3s;z-index:10}.good-feedback.hidden{opacity:0}.good-check{font-size:3.5rem;line-height:1;font-weight:700}.good-label{font-size:1.8rem;font-weight:800;margin-top:4px;letter-spacing:.05em}.step-tracker{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 4px;width:100%;max-width:460px}.step-pill{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:600;border:2px solid #e0e0e0;background:#fff;color:#aaa;transition:all .3s}.step-pill.active{border-color:#667eea;color:#667eea;background:#eef0ff;box-shadow:0 2px 8px #667eea4d}.step-pill.done{border-color:#11998e;color:#11998e;background:#e6faf6}.step-pill-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e0e0e0;color:#999;font-size:.72rem;font-weight:700;flex-shrink:0}.step-pill.active .step-pill-num{background:#667eea;color:#fff}.step-pill.done .step-pill-num{background:#11998e;color:#fff}.status{margin-top:20px;padding:15px;background:#fff;border-radius:8px;text-align:center;font-weight:500;box-shadow:0 2px 8px #0000001a}.status.error{background:#fee;color:#c33}.controls-section{padding:30px;background:#fff;border-left:1px solid #e0e0e0;overflow-y:auto;max-height:800px}.controls-section h2{font-size:1.5rem;margin-bottom:20px;color:#667eea}.control-group{margin-bottom:25px}.control-group label{display:block;font-weight:600;margin-bottom:10px;color:#555;font-size:.95rem}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;transition:transform .2s}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:transform .2s}.control-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.primary-button{width:100%;padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #667eea66}.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.primary-button:active{transform:translateY(0)}.primary-button.active{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 4px 12px #f5576c66}.legend{margin-top:30px;padding:20px;background:#f8f9fa;border-radius:8px}.legend h3{font-size:1.1rem;margin-bottom:15px;color:#667eea}.legend-item{display:flex;align-items:center;margin-bottom:10px;font-size:.9rem}.color-box{width:24px;height:24px;border-radius:4px;margin-right:12px;border:1px solid #ddd}.model-selector{margin-top:20px;padding:15px;background:#f8f9fa;border-radius:8px}.model-selector label{display:block;font-weight:600;margin-bottom:8px;color:#555}.model-selector select{width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:6px;font-size:.95rem;background:#fff;cursor:pointer;transition:border-color .2s}.model-selector select:focus{outline:none;border-color:#667eea}.error-container{padding:60px 30px;text-align:center;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d}.error-container h1{color:#c33;margin-bottom:20px}.error-container p{color:#666;margin-bottom:10px;font-size:1.1rem}@media (max-width: 1024px){.content{grid-template-columns:1fr}.controls-section{border-left:none;border-top:1px solid #e0e0e0;max-height:none}}@media (max-width: 768px){.header h1{font-size:1.8rem}.header p{font-size:1rem}.video-section,.controls-section{padding:20px}}.sumsub-container{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;overflow:hidden}.sumsub-step-bar{display:flex;align-items:center;justify-content:center;gap:0;padding:16px 32px;background:#f8f9fa;border-bottom:1px solid #e9ecef}.sumsub-step{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#adb5bd}.sumsub-step--done{color:#667eea}.sumsub-step--active{color:#1a1a2e;font-weight:600}.sumsub-step__icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;background:#e9ecef;color:#adb5bd}.sumsub-step--done .sumsub-step__icon{background:#667eea;color:#fff}.sumsub-step--active .sumsub-step__icon{background:#1a1a2e;color:#fff}.sumsub-step-connector{width:48px;height:2px;background:#e9ecef;margin:0 8px}.sumsub-step-connector--done{background:#667eea}.sumsub-body{padding:32px;min-height:500px;display:flex;flex-direction:column;align-items:center}.sumsub-loading{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:80px;color:#6c757d}.sumsub-spinner{width:40px;height:40px;border:3px solid #e9ecef;border-top-color:#667eea;border-radius:50%;animation:sumsub-spin .8s linear infinite}@keyframes sumsub-spin{to{transform:rotate(360deg)}}.sumsub-error{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:60px;text-align:center;color:#dc3545}.sumsub-error__icon{font-size:2.5rem}.sumsub-error.hidden,.sumsub-loading.hidden{display:none}#sumsub-websdk-container{width:100%;max-width:640px}.sumsub-complete{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 32px;text-align:center}.sumsub-complete__icon{font-size:3.5rem}.sumsub-complete__title{font-size:1.5rem;font-weight:700;color:#1a1a2e}.sumsub-complete__sub{color:#6c757d;max-width:400px;line-height:1.6}