*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #09090b;--accent-blue: #3b82f6;--accent-purple: #8b5cf6;--text-main: #f8fafc;--text-muted: #94a3b8;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1)}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}body:before,body:after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);z-index:-1;opacity:.4}body:before{top:-100px;left:-200px;background:var(--accent-purple)}body:after{bottom:-150px;right:-100px;background:var(--accent-blue)}.app-container{display:flex;flex-direction:column;width:100%;max-width:1200px;height:90vh;padding:2rem;z-index:1}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:2.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}.app-header h1 span{background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));-webkit-background-clip:text;background-clip:text;color:transparent}.app-header p{color:var(--text-muted);font-size:1.1rem}.main-content{flex:1;position:relative;display:flex;justify-content:center;align-items:center;border-radius:24px;background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:0 25px 50px -12px #00000080;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden}.avatar-wrapper{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}#avatar-canvas{width:100%;height:100%;object-fit:contain}.overlay-glass{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(180deg,rgba(9,9,11,0) 50%,rgba(9,9,11,.4) 100%)}.video-pip{position:absolute;bottom:20px;right:20px;width:240px;height:180px;border-radius:16px;background:#000;overflow:hidden;border:1px solid var(--glass-border);box-shadow:0 10px 20px #0009;opacity:0;transform:translateY(20px) scale(.95);transition:all .4s cubic-bezier(.175,.885,.32,1.275);pointer-events:none}.video-pip.active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}#debug-canvas{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.loading-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;background:var(--bg-dark);padding:2rem 3rem;border-radius:20px;border:1px solid var(--glass-border);box-shadow:0 15px 30px #00000080;z-index:10;transition:opacity .5s ease}.loading-state.hidden{opacity:0;pointer-events:none}.spinner{width:40px;height:40px;border:4px solid var(--glass-border);border-top-color:var(--accent-purple);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.controls{margin-top:1.5rem;display:flex;justify-content:center;gap:1rem}.btn{background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--glass-border);padding:10px 24px;border-radius:12px;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn:hover{background:rgba(255,255,255,.1);border-color:#fff3;transform:translateY(-2px)}.btn:active{transform:translateY(0)}