:root{--bg-dark:#0b0d13;--bg-card:#14161f;--bg-input:#1f212e;--border-color:#2b2e3b;--text-primary:#f9fafb;--text-secondary:#b6bec9;--text-muted:#707a8f;--accent-cyan:#00f5dc;--accent-blue:#00bbfa;--accent-magenta:#f39;--accent-purple:#9938fa;--eye-glow:0 0 40px #00f5d426;--eye-size:720px;--font-family:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100vw;height:100vh;margin:0;overflow:hidden}#root{flex-direction:column;width:100%;height:100%;display:flex}.glass-panel{-webkit-backdrop-filter:blur(16px);background:#121420a6;border:1px solid #ffffff14;border-radius:16px;box-shadow:0 8px 32px #0000005e}.onboarding-container{background:radial-gradient(circle at center, #171926 0%, var(--bg-dark) 100%);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;display:flex}.onboarding-header{text-align:center;margin-bottom:3rem;animation:.8s ease-out fadeInDown}.onboarding-brand{letter-spacing:.2em;color:var(--accent-cyan);text-transform:uppercase;margin-bottom:.5rem;font-size:.9rem;font-weight:800}.onboarding-title{letter-spacing:-.03em;background:linear-gradient(135deg, var(--text-primary) 30%, var(--text-secondary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1rem;font-size:3rem;font-weight:800}.onboarding-desc{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.1rem}.role-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;width:100%;max-width:1000px;margin-bottom:2rem;animation:.8s ease-out fadeInUp;display:grid}.role-card{text-align:center;cursor:pointer;flex-direction:column;align-items:center;padding:2.5rem 2rem;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.role-card:before{content:"";opacity:0;background:linear-gradient(135deg,#ffffff08 0%,#0000 100%);width:100%;height:100%;transition:opacity .4s;position:absolute;top:0;left:0}.role-card:hover{border-color:#fff3;transform:translateY(-8px);box-shadow:0 16px 48px #00000080,0 0 20px #00f5d41a}.role-card:hover:before{opacity:1}.role-icon-container{background:#ffffff08;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin-bottom:1.5rem;transition:all .4s;display:flex}.role-card:hover .role-icon-container{border-color:var(--accent-cyan);background:#00f5d41a;box-shadow:0 0 15px #00f5d44d}.role-card.master:hover .role-icon-container{border-color:var(--accent-blue);background:#00bbf91a;box-shadow:0 0 15px #00bbf94d}.role-card.slave:hover .role-icon-container{border-color:var(--accent-magenta);background:#f725851a;box-shadow:0 0 15px #f725854d}.role-card h3{color:var(--text-primary);margin-bottom:.75rem;font-size:1.5rem;font-weight:700}.role-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.display-container{background-color:#030305;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.eyes-wrapper{--eye-size:440px;justify-content:center;align-items:center;gap:4rem;width:100%;height:100%;display:flex}.single-eye-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.eye-outer{width:var(--eye-size);height:var(--eye-size);background:radial-gradient(circle,#fff 60%,#e2e8f0 100%);border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;transition:box-shadow .5s;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 40px #000c,inset 0 4px 20px #00000026,inset 0 -10px 30px #0003}.eye-outer:after{content:"";pointer-events:none;border-radius:50%;position:absolute;inset:0;box-shadow:inset 0 0 25px #0000004d}.eye-iris{width:calc(var(--eye-size) * .5);height:calc(var(--eye-size) * .5);background:radial-gradient(circle,#000b18 0%,#001a36 30%,#005f73 65%,#0a9396 85%,#94d2bd 100%);border-radius:50%;justify-content:center;align-items:center;transition:transform 80ms cubic-bezier(.25,1,.5,1);display:flex;position:absolute;box-shadow:0 0 20px #00bbf966,inset 0 0 15px #ffffff4d}.eye-pupil{width:calc(var(--eye-size) * .23);height:calc(var(--eye-size) * .23);background:#020205;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:inset 0 0 10px #ffffff0d}.eye-reflection-1{top:calc(var(--eye-size) * .046);left:calc(var(--eye-size) * .046);width:calc(var(--eye-size) * .06);height:calc(var(--eye-size) * .06);background:#ffffffd9;border-radius:50%;position:absolute;transform:rotate(-45deg)}.eye-reflection-2{bottom:calc(var(--eye-size) * .07);right:calc(var(--eye-size) * .07);width:calc(var(--eye-size) * .025);height:calc(var(--eye-size) * .025);background:#fff6;border-radius:50%;position:absolute}.eyelids-svg{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}.eyelid-path{fill:#030305;transition:d .12s cubic-bezier(.45,0,.55,1)}.dashboard-trigger{color:var(--text-secondary);cursor:pointer;z-index:100;-webkit-backdrop-filter:blur(10px);background:#12142099;border:1px solid #ffffff14;border-radius:8px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .3s;position:absolute;bottom:20px;left:20px}.dashboard-trigger:hover{color:var(--text-primary);background:#121420e6;border-color:#fff3}.dashboard-panel{z-index:100;flex-direction:column;gap:1.25rem;width:320px;padding:1.5rem;display:flex;position:absolute;bottom:20px;left:20px}.dashboard-header{justify-content:space-between;align-items:center;display:flex}.dashboard-title{color:var(--text-primary);font-size:1.1rem;font-weight:700}.dashboard-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.2rem;transition:color .2s}.dashboard-close:hover{color:var(--text-primary)}.webcam-preview-container{background:#000;border:1px solid #ffffff0d;border-radius:8px;width:100%;height:140px;position:relative;overflow:hidden}.webcam-video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.webcam-canvas{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.webcam-status-dot{background:var(--accent-magenta);border-radius:50%;width:8px;height:8px;position:absolute;top:10px;right:10px}.webcam-status-dot.active{background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan)}.control-group{flex-direction:column;gap:.5rem;display:flex}.control-label{color:var(--text-secondary);justify-content:space-between;font-size:.8rem;display:flex}.control-input-slider{-webkit-appearance:none;background:var(--bg-input);cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}.control-input-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-cyan);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 0 8px #00f5d466}.select-input{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-family);cursor:pointer;border-radius:6px;outline:none;width:100%;padding:8px 12px;font-size:.85rem}.select-input:focus{border-color:var(--accent-cyan)}.home-btn{color:var(--text-secondary);cursor:pointer;z-index:100;-webkit-backdrop-filter:blur(10px);background:#12142080;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:600;transition:all .3s;display:flex;position:absolute;top:20px;left:20px}.home-btn:hover{color:var(--text-primary);background:#121420cc;border-color:#fff3}.slave-status{color:var(--text-secondary);-webkit-backdrop-filter:blur(10px);background:#12142080;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:8px;padding:8px 14px;font-size:.8rem;display:flex;position:absolute;top:20px;right:20px}.slave-status-dot{background:var(--accent-cyan);width:8px;height:8px;box-shadow:0 0 8px var(--accent-cyan);border-radius:50%;animation:2s infinite pulse}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #00f5d4b3}70%{transform:scale(1);box-shadow:0 0 0 6px #00f5d400}to{transform:scale(.95);box-shadow:0 0 #00f5d400}}
