*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#0a0a0a;min-height:100vh;width:100%;max-width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fafafa;overflow-x:hidden}.container{max-width:1400px;width:100%;padding:60px}h1{font-size:2rem;margin-bottom:2rem;font-weight:400;color:#fafafa}.demo-grid{display:grid;grid-template-columns:auto 1fr;gap:120px;margin-bottom:2rem}@media(max-width:1200px){.demo-grid{grid-template-columns:1fr;gap:20px}.demo-grid>.panel:first-child{order:2}.demo-grid>.panel:last-child{order:1;margin-bottom:2rem}.canvas-wrapper{width:100%;max-width:100%;height:auto;aspect-ratio:4 / 3}#avatar{width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:4 / 3}.stats-bar{max-width:100%;flex-wrap:wrap;gap:10px}.webcam-overlay{width:160px!important;top:10px;right:10px}h1{font-size:1.5rem;margin-bottom:1.5rem}body{padding:0;justify-content:flex-start}.container{padding:80px 60px;max-width:100%}.code-block{font-size:.75rem;padding:12px}.code-block code{word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}.code-section{max-width:100%}.panel h2{font-size:18px;margin-bottom:24px}.panel h3{font-size:.9rem;margin-bottom:12px}.slider-group{margin-bottom:12px}button{font-size:.8125rem;padding:10px 12px;max-width:100%}.avatar-tabs{top:8px;left:8px;padding:2px;max-width:calc(100% - 16px)}.avatar-tab{padding:6px 12px;font-size:.75rem}.slider-group label{font-size:.8125rem;gap:8px}.slider-group label span:first-child{flex:1;min-width:0;word-wrap:break-word}.slider-group label span:last-child{flex-shrink:0}}@media(max-width:600px){.container{padding:40px 20px}.webcam-overlay{width:160px!important;top:8px;right:8px}.demo-grid{gap:16px}.footer{font-size:.8125rem;padding:0 10px}.code-header{flex-wrap:wrap;gap:8px}.btn-copy{width:100%;justify-content:center}}@media(max-width:400px){.container{padding:60px 30px}.panel h2{font-size:16px}.code-block{font-size:.7rem}button{font-size:.75rem;padding:8px 10px}}.panel{padding:0;width:100%;max-width:100%;overflow:hidden}.panel h2{font-weight:400;font-size:20px;margin-bottom:32px;color:#a1a1aa}.panel h3{font-size:1rem;margin-bottom:16px;align-items:center;color:#fafafa;font-weight:400}.panel .sliders{display:flex;flex-direction:column;gap:24px;width:100%;max-width:100%}.blendshapes-sliders{margin-bottom:40px}.canvas-wrapper{position:relative;width:100%;max-width:800px;height:auto;aspect-ratio:4 / 3}#avatar{width:100%!important;max-width:800px!important;height:auto!important;aspect-ratio:4 / 3;border-radius:8px;background:#000;display:block;cursor:grab;border:1px solid #27272a}#avatar:active{cursor:grabbing}.webcam-overlay{position:fixed;top:20px;right:20px;width:240px;z-index:1000}#webcam{width:100%;display:block;border-radius:8px;background:#000;transform:scaleX(-1)}.controls{padding:0}.button-group{display:flex;gap:10px;margin-bottom:16px}button{flex:1;padding:8px 12px;font-size:.875rem;border:1px solid #27272a;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease;background:#171717;color:#fafafa;display:inline-flex;align-items:center;justify-content:center;gap:6px}button svg{flex-shrink:0}button:hover{background:#262626;border-color:#3f3f46}button:active{background:#1a1a1a}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#fafafa;color:#0a0a0a;border-color:#fafafa;font-weight:500}.btn-primary:hover:not(:disabled){background:#e5e5e5;border-color:#e5e5e5}.btn-secondary{background:#171717;color:#fafafa;border:1px solid #27272a}.btn-secondary:hover:not(:disabled){background:#262626;border-color:#3f3f46}.btn-danger{background:#ef4444;color:#fff}.status{padding:12px 0;margin-top:16px;font-size:.875rem;display:flex;align-items:center;gap:8px;color:#a1a1aa}.spinner{width:16px;height:16px;border:2px solid #27272a;border-top-color:#fafafa;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.slider-group{margin-bottom:16px;width:100%;max-width:100%}.slider-group label{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.875rem;color:#a1a1aa;width:100%;max-width:100%}.slider-group label .slider-value,#eyeBlink-value,#jawOpen-value,#smile-value,#fov-value,#scale-value{color:#a1a1aa;font-weight:500}.slider-group input[type=range]{width:100%;height:4px;border-radius:2px;background:#27272a;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#a1a1aa;cursor:pointer;transition:all .2s ease}.slider-group input[type=range]::-webkit-slider-thumb:hover{background:#e5e5e5;border-color:#e5e5e5}.slider-group input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#a1a1aa;cursor:pointer;transition:all .2s ease}.slider-group input[type=range]::-moz-range-thumb:hover{background:#e5e5e5;border-color:#e5e5e5}.section-divider{margin:25px 0 16px;padding-top:20px}.section-divider h3{font-size:1rem;font-weight:500;margin-bottom:16px;color:#fafafa}.checkbox-group{margin:20px 0}.checkbox-group label{display:flex;align-items:center;gap:8px;cursor:pointer;color:#a1a1aa;font-size:.875rem}.checkbox-group input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#a1a1aa}.stats-bar{display:flex;justify-content:space-between;align-items:center;margin:12px 0;font-size:.875rem;max-width:100%;width:100%}.stats-info{display:flex;gap:20px}.stats-bar span{font-family:Courier New,monospace;color:#71717a}.stats-bar span span{color:#fafafa;font-weight:500}.stats-bar button{flex:0 0 auto}.code-section{margin-top:20px;padding-top:20px;width:100%;max-width:420px}.code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.code-header h3{margin-bottom:0;display:flex;align-items:center;gap:4px;transition:opacity .2s ease}#code-title-updated{color:#fafafa}.code-title-visible{opacity:1}.code-title-hidden{opacity:0;position:absolute}.code-block{background:#171717;border:1px solid #27272a;border-radius:6px;padding:16px;overflow-x:auto;font-size:.8125rem;line-height:1.6;position:relative;transition:all .2s ease;width:100%;max-width:100%;box-sizing:border-box}.code-block code{font-family:Courier New,Consolas,monospace;color:#a1a1aa;white-space:break-spaces}.code-highlight{color:#fafafa;font-weight:700}.btn-copy{padding:8px 12px;font-size:.8125rem;background:#171717;border:1px solid #27272a;border-radius:6px;cursor:pointer;color:#fafafa;font-weight:500;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}.btn-copy svg{flex-shrink:0}.btn-copy:hover{background:#262626;border-color:#3f3f46}.toast{position:fixed;bottom:30px;right:30px;background:#fafafa;color:#0a0a0a;padding:12px 20px;border-radius:6px;font-size:.875rem;font-weight:500;border:1px solid #e5e5e5;box-shadow:0 4px 12px #00000080;z-index:2000;opacity:0;transform:translateY(20px);transition:all .2s ease;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.camera-reminder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fafafab3;color:#0a0a0a;padding:20px 28px;border-radius:8px;font-size:1rem;font-weight:500;box-shadow:0 8px 24px #0009;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease;display:flex;flex-direction:column;align-items:center;gap:12px}.camera-reminder svg{flex-shrink:0;width:32px;height:32px}.camera-reminder.show{opacity:1}.camera-reminder.fade-out{opacity:0}.info{font-size:.875rem;opacity:.8;line-height:1.6}.footer{text-align:center;margin-top:2rem;font-size:.875rem;color:#71717a}.footer a{color:#fafafa;text-decoration:none;transition:color .2s}.footer a:hover{color:#a1a1aa}.avatar-tabs{position:absolute;top:12px;left:12px;display:inline-flex;background:#171717;border:1px solid #27272a;border-radius:8px;padding:3px;gap:0;z-index:10}.avatar-tab{flex:0 0 auto;padding:6px 16px;font-size:.8125rem;background:transparent;color:#a1a1aa;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease;white-space:nowrap}.avatar-tab:hover{background:#262626;color:#e5e5e5}.avatar-tab.active{background:#fafafa;color:#0a0a0a}.avatar-tab.active:hover{background:#e5e5e5;color:#0a0a0a}