:root{--glass-bg:#1e3a8a4d;--glass-border:#3b82f666;--glass-bg-hover:#1e3a8a66;--glass-border-hover:#3b82f680;--glass-bg-solid:#091129;--ground:#000;--ambient-wash:radial-gradient(60% 55% at 80% 4%,#e2ecff33 0%,#e2ecff0d 45%,#0000 72%),radial-gradient(52% 46% at 10% 98%,#7896ff1a 0%,#0000 70%);--card-border:#ffffff1f;--card-filter:blur(35px) saturate(300%);--card-shadow:0 20px 60px #0000000f,0 8px 25px #0000000a,0 2px 8px #00000005,inset 0 2px 0 #ffffff4d,inset 0 -2px 0 #00000008;--sheen-depth:linear-gradient(135deg,#ffffff26,#ffffff0d 25%,#ffffff05 50%,#00000003 75%,#00000008);--sheen-top:linear-gradient(#ffffff1f,#ffffff0a 50%,#0000);--card-bg-solid:#0d0d0f;--header-filter:blur(35px) saturate(240%);--footer-filter:blur(35px) saturate(300%);--text-heading:#f8fafcf2;--text-body:#e5e7eb;--text-muted:#9ca3af;--text-accent:#93c5fd;--shadow-body:0 2px 4px #000c,0 1px 2px #0009;--shadow-accent:0 1px 3px #000000b3;--shadow-muted:0 1px 2px #0009;--glow:0 0 15px #1e40afcc,0 0 30px #1e40af66;--glow-strong:0 0 20px #1e40af,0 0 40px #1e40af99;--footer-text:#fffffff2;--footer-shadow:1px 1px 3px #000c;--footer-link:#60a5fa;--footer-link-hover:#fff;--button-radius:12px;--button-filter:none;--button-filter-hover:none;--button-shadow:inset 0 1px 0 #fffc,0 4px 12px -2px #0003;--button-shadow-hover:inset 0 1px 0 #ffffffe6,0 8px 24px -4px #0000004d;--button-lift:translateY(-2px) scale(1.05);--button-transition:all 0.3s cubic-bezier(0.4,0,0.2,1);--button-border-selected:#60a5facc;--focus-ring:#60a5fa}html{background:#000;background:var(--ground)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0000;color:#e5e7eb;color:var(--text-body);font-family:Arial,sans-serif;line-height:1.6;margin:0;text-shadow:0 2px 4px #000c,0 1px 2px #0009;text-shadow:var(--shadow-body)}body:before{background:radial-gradient(60% 55% at 80% 4%,#e2ecff33 0,#e2ecff0d 45%,#0000 72%),radial-gradient(52% 46% at 10% 98%,#7896ff1a 0,#0000 70%);background:var(--ambient-wash);content:"";inset:0;pointer-events:none;position:fixed;z-index:-1}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1,h2,h3,h4,h5,h6{color:#f8fafcf2;color:var(--text-heading);font-weight:600;text-shadow:none}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{display:flex;flex:1 1;flex-wrap:wrap}.detection-console,.left-panel{backdrop-filter:blur(35px) saturate(300%);backdrop-filter:var(--card-filter);-webkit-backdrop-filter:blur(35px) saturate(300%);-webkit-backdrop-filter:var(--card-filter);background:#0000;border:1px solid #ffffff1f;border:1px solid var(--card-border);border-radius:28px;box-shadow:0 20px 60px #0000000f,0 8px 25px #0000000a,0 2px 8px #00000005,inset 0 2px 0 #ffffff4d,inset 0 -2px 0 #00000008;box-shadow:var(--card-shadow);position:relative}.detection-console:after,.detection-console:before,.left-panel:after,.left-panel:before{border-radius:inherit;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:0}.detection-console:before,.left-panel:before{background:linear-gradient(135deg,#ffffff26,#ffffff0d 25%,#ffffff05 50%,#00000003 75%,#00000008);background:var(--sheen-depth);bottom:0}.detection-console:after,.left-panel:after{background:linear-gradient(#ffffff1f,#ffffff0a 50%,#0000);background:var(--sheen-top);border-bottom-left-radius:0;border-bottom-right-radius:0;height:50%}.detection-console>*,.left-panel>*{position:relative;z-index:1}.left-panel{flex:1 1;margin:1rem 0 1rem 1rem;min-width:250px}.left-panel,.right-panel{box-sizing:border-box;padding:1rem}.right-panel{display:flex;flex:2 1;flex-direction:column;min-width:300px}.camera-feed{height:0;overflow:hidden;padding-bottom:75%;position:relative;text-shadow:none;transition:all .3s ease;width:100%}.camera-feed.maximized{background-color:#000;height:100vh;left:0;padding-bottom:0;position:fixed;top:0;width:100vw;z-index:9999}.camera-feed .avatar-view,.camera-feed .main-view{height:100%;left:0;position:absolute;top:0;transition:all .3s ease;width:100%}.camera-feed .avatar-view.pip,.camera-feed .main-view.pip{border:2px solid #fff;border-radius:5px;bottom:auto;cursor:pointer;height:30%;left:auto;overflow:hidden;right:10px;top:10px;width:30%;z-index:10}.camera-feed canvas,.camera-feed video{height:100%;left:0;object-fit:contain;position:absolute;top:0;width:100%}.camera-controls{bottom:10px;display:flex;gap:10px;position:absolute;right:10px}.control-button{align-items:center;background-color:#00000080;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .3s ease}.control-button:hover{background-color:#000000b3}.avatar-thumbnails{display:flex;gap:5px}.avatar-thumbnail{align-items:center;background-color:#00000080;border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-size:12px;padding:8px;transition:background-color .3s ease}.avatar-thumbnail:hover{background-color:#000000b3}.avatar-thumbnail svg{font-size:24px;margin-bottom:4px}.avatar-thumbnail span{text-align:center}.info-overlay{background-color:#00000080;left:10px;padding:10px;top:10px}.error-message,.info-overlay,.loading-message{border-radius:5px;color:#fff;position:absolute}.error-message,.loading-message{background-color:#000000b3;left:50%;padding:20px;text-align:center;top:50%;transform:translate(-50%,-50%)}.left-panel .error-message{background-color:#000000b3;color:#fff;margin-top:10px;padding:10px 12px;position:static;text-align:left;transform:none}@keyframes emojiPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.animated-emoji{animation:emojiPulse 1s infinite;display:inline-block}.action-button,.contact-button,.cta-button,.error-message button,.generate-button,button[type=submit]{backdrop-filter:none;backdrop-filter:var(--button-filter);-webkit-backdrop-filter:none;-webkit-backdrop-filter:var(--button-filter);background-color:#1e3a8a4d;background-color:var(--glass-bg);border:1px solid #3b82f666;border:1px solid var(--glass-border);border-radius:12px;border-radius:var(--button-radius);box-shadow:inset 0 1px 0 #fffc,0 4px 12px -2px #0003;box-shadow:var(--button-shadow);color:#fff;cursor:pointer;font-family:inherit;text-shadow:0 0 15px #1e40afcc,0 0 30px #1e40af66;text-shadow:var(--glow);transition:all .3s cubic-bezier(.4,0,.2,1);transition:var(--button-transition)}.action-button:focus-visible,.action-button:hover,.contact-button:focus-visible,.contact-button:hover,.cta-button:focus-visible,.cta-button:hover,.error-message button:focus-visible,.error-message button:hover,.generate-button:focus-visible,.generate-button:hover,button[type=submit]:focus-visible,button[type=submit]:hover{backdrop-filter:none;backdrop-filter:var(--button-filter-hover);-webkit-backdrop-filter:none;-webkit-backdrop-filter:var(--button-filter-hover);background-color:#1e3a8a66;background-color:var(--glass-bg-hover);border-color:#3b82f680;border-color:var(--glass-border-hover);box-shadow:inset 0 1px 0 #ffffffe6,0 8px 24px -4px #0000004d;box-shadow:var(--button-shadow-hover);text-shadow:0 0 20px #1e40af,0 0 40px #1e40af99;text-shadow:var(--glow-strong);transform:translateY(-2px) scale(1.05);transform:var(--button-lift)}.camera-feed .error-message button,.camera-feed .error-message button:focus-visible,.camera-feed .error-message button:hover{backdrop-filter:none;-webkit-backdrop-filter:none}.action-button:focus-visible,.contact-button:focus-visible,.cta-button:focus-visible,.error-message button:focus-visible,.generate-button:focus-visible,button[type=submit]:focus-visible{outline:2px solid #60a5fa;outline:2px solid var(--focus-ring);outline-offset:2px}.action-button.active,.action-button.active:focus-visible,.action-button.active:hover{backdrop-filter:none;backdrop-filter:var(--button-filter-hover);-webkit-backdrop-filter:none;-webkit-backdrop-filter:var(--button-filter-hover);background-color:#1e3a8a66;background-color:var(--glass-bg-hover);border-color:#60a5facc;border-color:var(--button-border-selected);box-shadow:inset 0 1px 0 #ffffffe6,0 8px 24px -4px #0000004d;box-shadow:var(--button-shadow-hover);text-shadow:0 0 20px #1e40af,0 0 40px #1e40af99;text-shadow:var(--glow-strong);transform:none}.action-button:disabled,.action-button:disabled:hover{backdrop-filter:none;backdrop-filter:var(--button-filter);-webkit-backdrop-filter:none;-webkit-backdrop-filter:var(--button-filter);background-color:#1e3a8a4d;background-color:var(--glass-bg);border-color:#3b82f666;border-color:var(--glass-border);box-shadow:inset 0 1px 0 #fffc,0 4px 12px -2px #0003;box-shadow:var(--button-shadow);cursor:not-allowed;opacity:.65;text-shadow:0 0 15px #1e40afcc,0 0 30px #1e40af66;text-shadow:var(--glow);transform:none}.action-button{align-items:center;box-sizing:border-box;display:inline-flex;font-size:14px;gap:5px;justify-content:center;margin:5px 0;min-width:120px;padding:8px 12px;width:calc(100% - 10px)}.action-button svg{font-size:1em}select.action-button option{background-color:#091129;background-color:var(--glass-bg-solid);color:#fff;text-shadow:none}.cta-button,.generate-button{display:inline-block;font-size:20px;font-weight:700;padding:12px 24px;text-decoration:none}.error-message button{margin-top:10px;padding:5px 10px}button[type=submit]{padding:12px 24px}.contact-button{display:inline-block;font-weight:700;padding:8px 16px;text-decoration:none}.dropzone{border:2px dashed #ffffff1f;border:2px dashed var(--card-border);border-radius:4px;cursor:pointer;margin-top:10px;padding:20px;text-align:center}.dropzone:hover{border-color:#3b82f680;border-color:var(--glass-border-hover)}.avatar-url-input{background-color:#091129;background-color:var(--glass-bg-solid);border:1px solid #3b82f666;border:1px solid var(--glass-border);border-radius:12px;border-radius:var(--button-radius);box-sizing:border-box;color:#e5e7eb;color:var(--text-body);margin-top:10px;padding:8px;text-shadow:none;width:100%}.pip-canvas{border:2px solid #fff;bottom:10px;height:20%;position:absolute;right:10px;width:20%}.camera-selector{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.camera-selector .action-button,.camera-selector select.action-button{margin:0;width:100%}@media (min-width:481px){.camera-selector{flex-direction:row;flex-wrap:wrap}.camera-selector select.action-button{flex:1 1 100%}.camera-selector .action-button{flex-basis:calc(50% - 5px);flex-grow:1;flex-shrink:1}}.header{backdrop-filter:blur(35px) saturate(240%);backdrop-filter:var(--header-filter);-webkit-backdrop-filter:blur(35px) saturate(240%);-webkit-backdrop-filter:var(--header-filter);background:#1e3a8a4d;background:var(--glass-bg);border:1px solid #3b82f666;border:1px solid var(--glass-border);border-radius:0 0 20px 20px;border-top:none;box-shadow:0 20px 60px #0000000f,0 8px 25px #0000000a,0 2px 8px #00000005,inset 0 2px 0 #ffffff4d,inset 0 -2px 0 #00000008;box-shadow:var(--card-shadow);box-sizing:border-box;color:#f8fafcf2;color:var(--text-heading);display:flex;flex-direction:column;padding:16px 20px;position:relative;text-shadow:none}.footer:after,.footer:before,.header:after,.header:before{border-radius:inherit;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:0}.footer:before,.header:before{background:linear-gradient(135deg,#ffffff26,#ffffff0d 25%,#ffffff05 50%,#00000003 75%,#00000008);background:var(--sheen-depth);bottom:0}.header:after{height:50%}.footer:after,.header:after{background:linear-gradient(#ffffff1f,#ffffff0a 50%,#0000);background:var(--sheen-top)}.footer:after{height:40%}.footer>*,.header>*{position:relative;z-index:1}.header-top{justify-content:space-between}.brand,.header-top{align-items:center;display:flex}.brand{gap:12px;min-width:0}.brand-logo{display:block;flex:none;height:44px;width:44px}.brand-text{align-items:baseline;column-gap:10px;display:flex;flex-wrap:wrap;min-width:0}.header-title{color:#fff;font-size:24px;font-weight:700;line-height:44px;margin:0;text-shadow:0 0 15px #1e40afcc,0 0 30px #1e40af66;text-shadow:var(--glow)}.brand-by{color:#60a5fa;color:var(--footer-link);font-size:13px;text-decoration:none;white-space:nowrap}.brand-by:hover{color:#fff;color:var(--footer-link-hover);text-decoration:underline}.brand-by:focus-visible{outline:2px solid #60a5fa;outline:2px solid var(--focus-ring);outline-offset:2px}@media (max-width:480px){.brand-text{align-items:flex-start;flex-direction:column}.header-title{line-height:1.15}}.footer{backdrop-filter:blur(35px) saturate(300%);backdrop-filter:var(--footer-filter);-webkit-backdrop-filter:blur(35px) saturate(300%);-webkit-backdrop-filter:var(--footer-filter);background:#1e3a8a4d;background:var(--glass-bg);border-radius:28px 28px 0 0;border-top:1px solid #3b82f666;border-top:1px solid var(--glass-border);box-shadow:0 -20px 60px #0000000f,0 -8px 25px #0000000a,0 -2px 8px #00000005,inset 0 2px 0 #ffffff4d,inset 0 -2px 0 #00000008;color:#fffffff2;color:var(--footer-text);font-size:14px;padding:20px;position:relative;text-align:center;text-shadow:1px 1px 3px #000c;text-shadow:var(--footer-shadow)}.footer a{color:#60a5fa;color:var(--footer-link);text-decoration:none;transition:color .3s}.footer a:hover{color:#fff;color:var(--footer-link-hover)}@media (max-width:768px){.main-content{flex-direction:column}.left-panel,.right-panel{width:100%}.left-panel{margin:.5rem;width:auto}.camera-feed{padding-bottom:56.25%}}@media (max-width:480px){.left-panel,.right-panel{padding:.5rem}.console{max-height:150px}}.detection-console{color:#e5e7eb;color:var(--text-body);font-family:Arial,sans-serif;margin-top:1rem;max-height:500px;overflow-y:auto;padding:1.5rem}.console-title{border-bottom:1px solid #ffffff1f;border-bottom:1px solid var(--card-border);color:#fff;font-size:1.5rem;margin-bottom:1rem;padding-bottom:.5rem;text-shadow:0 2px 4px #000c,0 1px 2px #0009;text-shadow:var(--shadow-body)}.stream-info{border:1px solid #ffffff1f;border:1px solid var(--card-border);border-radius:12px;display:flex;justify-content:space-between;margin-bottom:1rem;padding:.5rem}.info-item{align-items:center;display:flex}.info-label{color:#f8fafcf2;color:var(--text-heading);font-weight:700;margin-right:.5rem}.info-value{color:#93c5fd;color:var(--text-accent);text-shadow:0 1px 3px #000000b3;text-shadow:var(--shadow-accent)}.detection-section{border:1px solid #ffffff1f;border:1px solid var(--card-border);border-radius:12px;margin-bottom:1rem;overflow:hidden}.detection-section h3{align-items:center;color:#93c5fd;color:var(--text-accent);cursor:pointer;display:flex;font-size:1rem;margin:0;padding:.75rem;text-shadow:0 1px 3px #000000b3;text-shadow:var(--shadow-accent);-webkit-user-select:none;user-select:none}.detection-section h3 svg{margin-right:.5rem}.section-content{background-color:initial;padding:1rem}.scrollable-content{border:1px solid #ffffff1f;border:1px solid var(--card-border);border-radius:3px;margin-top:.5rem;max-height:200px;overflow-y:auto;padding:.5rem}.expression,.keypoint,.landmark{font-size:.9rem;margin-bottom:.25rem}.no-data{color:#9ca3af;color:var(--text-muted);font-style:italic;padding:1rem;text-align:center;text-shadow:0 1px 2px #0009;text-shadow:var(--shadow-muted)}.detection-console::-webkit-scrollbar{width:8px}.detection-console::-webkit-scrollbar-track{background:#0000}.detection-console::-webkit-scrollbar-thumb{background:#ffffff1f;background:var(--card-border);border-radius:4px}.detection-console::-webkit-scrollbar-thumb:hover{background:#3b82f680;background:var(--glass-border-hover)}@media (prefers-reduced-motion:reduce){.action-button,.contact-button,.cta-button,.error-message button,.generate-button,button[type=submit]{transition-property:background-color,border-color,color,text-shadow,box-shadow}.action-button:focus-visible,.action-button:hover,.contact-button:focus-visible,.contact-button:hover,.cta-button:focus-visible,.cta-button:hover,.error-message button:focus-visible,.error-message button:hover,.generate-button:focus-visible,.generate-button:hover,button[type=submit]:focus-visible,button[type=submit]:hover{transform:none}}@media (prefers-reduced-transparency:reduce){.action-button,.action-button.active,.action-button.active:hover,.action-button:disabled,.action-button:focus,.action-button:focus-visible,.action-button:focus-within,.action-button:hover,.contact-button,.contact-button:focus,.contact-button:focus-visible,.contact-button:hover,.cta-button,.cta-button:focus,.cta-button:focus-visible,.cta-button:hover,.error-message button,.error-message button:focus,.error-message button:focus-visible,.error-message button:hover,.footer,.footer:focus,.footer:focus-within,.footer:hover,.generate-button,.generate-button:focus,.generate-button:focus-visible,.generate-button:hover,.header,.header:focus,.header:focus-within,.header:hover,button[type=submit],button[type=submit]:focus,button[type=submit]:focus-visible,button[type=submit]:hover{backdrop-filter:none;-webkit-backdrop-filter:none;background-color:#091129;background-color:var(--glass-bg-solid)}.detection-console,.detection-console:focus,.detection-console:focus-within,.detection-console:hover,.left-panel,.left-panel:focus,.left-panel:focus-within,.left-panel:hover{backdrop-filter:none;-webkit-backdrop-filter:none;background-color:#0d0d0f;background-color:var(--card-bg-solid)}}