:root{--lumio-black:#171717;--lumio-green:#82f213;--lumio-white:#fff;--lumio-dark:#0f0f0f;--lumio-gray:#2a2a2a;--lumio-light-gray:#6b6b6b;--lumio-green-hover:#6bc20f;--lumio-green-glow:#82f2134d;--lumio-danger:#ff3b30;--lumio-danger-hover:#e62e24}*{box-sizing:border-box}body{align-items:center;background:#171717;background:var(--lumio-black);color:#fff;color:var(--lumio-white);display:flex;font-family:Red Hat Text,-apple-system,BlinkMacSystemFont,sans-serif;justify-content:center;margin:0;min-height:100vh;position:relative}body:before{background:radial-gradient(circle at 50% 50%,#82f2130d 0,#0000 60%);content:"";height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:0}.container{max-width:1400px;padding:2rem;position:relative;width:95%;z-index:1}.logo-container{margin:0 0 2rem;padding:1rem 0;text-align:center}.lumio-wordmark{display:inline-block;height:auto;max-width:200px}.screen{animation:fadeIn .4s cubic-bezier(.4,0,.2,1);display:none}.screen.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}h1,h2,h3{font-family:Darker Grotesque,sans-serif}h1{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 1rem}h1,h2{text-align:center}h2{color:#fff;color:var(--lumio-white);font-size:1.75rem;font-weight:600;letter-spacing:-.01em;margin:.5rem 0 1rem}h3{font-size:1.25rem;font-weight:600;margin:1.5rem 0 .75rem}h3,p{color:#6b6b6b;color:var(--lumio-light-gray)}p{font-family:Red Hat Text,sans-serif;font-size:1.125rem;line-height:1.6;margin:0 0 2rem;text-align:center}.pin-input{margin:2rem 0}.pin-input input{background:#0f0f0f;background:var(--lumio-dark);border:2px solid #2a2a2a;border:2px solid var(--lumio-gray);border-radius:16px;color:#fff;color:var(--lumio-white);font-family:Darker Grotesque,sans-serif;font-size:3.5rem;font-weight:700;letter-spacing:1.2rem;outline:none;padding:1.5rem;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.pin-input input:focus{border-color:#82f213;border-color:var(--lumio-green);box-shadow:0 0 0 4px #82f2134d;box-shadow:0 0 0 4px var(--lumio-green-glow)}.pin-input input::placeholder{color:#6b6b6b;color:var(--lumio-light-gray);font-weight:400;opacity:.4}.help-text{background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:16px;margin-top:3rem;overflow:hidden;padding:1.5rem;position:relative;text-align:left}.help-text:before{background:#82f213;background:var(--lumio-green);content:"";height:100%;left:0;position:absolute;top:0;width:4px}.help-text h3{font-family:Darker Grotesque,sans-serif;margin-left:.5rem;margin-top:0}.help-text ol{color:#fff;color:var(--lumio-white);margin:0;padding-left:2rem}.help-text li{font-family:Red Hat Text,sans-serif;font-size:1rem;line-height:1.6;margin:.75rem 0}.audio-selection{background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:16px;margin:2rem 0;padding:1.5rem}.audio-label{color:#fff;color:var(--lumio-white);display:block;font-family:Darker Grotesque,sans-serif;font-size:1.125rem;font-weight:600;margin-bottom:1rem}.audio-options{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.radio-option{cursor:pointer;flex:1 1;min-width:120px}.radio-option input[type=radio]{display:none}.radio-label{align-items:center;background:#171717;background:var(--lumio-black);border:2px solid #2a2a2a;border:2px solid var(--lumio-gray);border-radius:12px;display:flex;flex-direction:column;justify-content:center;padding:1.25rem .75rem;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.radio-option input[type=radio]:checked+.radio-label{background:#82f2131a;border-color:#82f213;border-color:var(--lumio-green)}.radio-label:hover{border-color:#82f213;border-color:var(--lumio-green);transform:translateY(-2px)}.radio-label .icon{font-size:1.75rem;margin-bottom:.5rem}.radio-label .text{color:#6b6b6b;color:var(--lumio-light-gray);font-family:Red Hat Text,sans-serif;font-size:.875rem;font-weight:500}.radio-option input[type=radio]:checked+.radio-label .text{color:#82f213;color:var(--lumio-green);font-weight:700}.audio-hint{color:#6b6b6b;color:var(--lumio-light-gray);font-family:Red Hat Text,sans-serif;font-size:.8125rem;line-height:1.5;margin:0;opacity:.8}.btn-danger,.btn-primary,.btn-secondary{border:none;border-radius:12px;cursor:pointer;font-family:Darker Grotesque,sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:.02em;margin-top:1rem;overflow:hidden;padding:1.25rem 2rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.btn-primary{background:#82f213;background:var(--lumio-green);color:#171717;color:var(--lumio-black)}.btn-primary:before{background:#ffffff4d;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.btn-primary:hover:before{height:300px;width:300px}.btn-primary:hover{background:#6bc20f;background:var(--lumio-green-hover);box-shadow:0 8px 24px #82f2134d;box-shadow:0 8px 24px var(--lumio-green-glow);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#0000;border:2px solid #2a2a2a;border:2px solid var(--lumio-gray);color:#fff;color:var(--lumio-white)}.btn-secondary:hover{background:#0f0f0f;background:var(--lumio-dark);border-color:#82f213;border-color:var(--lumio-green);color:#82f213;color:var(--lumio-green)}.btn-danger{background:#ff3b30;background:var(--lumio-danger);color:#fff;color:var(--lumio-white)}.btn-danger:hover{background:#e62e24;background:var(--lumio-danger-hover);box-shadow:0 8px 24px #ff3b304d;transform:translateY(-2px)}.btn-danger:active{transform:translateY(0)}.spinner{animation:spin 1s linear infinite;border:3px solid #2a2a2a;border-top:3px solid #82f213;border:3px solid var(--lumio-gray);border-radius:50%;border-top-color:var(--lumio-green);height:60px;margin:0 auto 2rem;width:60px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.status-bar{background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:16px;margin-bottom:2rem;padding:1.25rem;text-align:center}.status-connected{align-items:center;color:#82f213;color:var(--lumio-green);display:inline-flex;font-family:Darker Grotesque,sans-serif;font-size:1.25rem;font-weight:700;gap:.5rem}.status-connected:before{animation:pulse 2s infinite;content:"●"}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.preview-container{background:#000;margin:2rem 0;overflow:hidden;position:relative}#localPreview{background:#000;display:block;max-height:400px;width:100%}.preview-label{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#171717e6;border:1px solid #82f213;border:1px solid var(--lumio-green);border-radius:8px;bottom:1rem;color:#82f213;color:var(--lumio-green);font-family:Darker Grotesque,sans-serif;font-size:.875rem;font-weight:600;left:1rem;padding:.5rem 1rem;position:absolute}#sourceControls{background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:12px;gap:1rem;margin:1.5rem 0;padding:1rem}.source-btn{background:#0000;border:2px solid #2a2a2a;border:2px solid var(--lumio-gray);border-radius:8px;flex:1 1;font-family:Darker Grotesque,sans-serif;font-size:1rem;font-weight:600;padding:.75rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.source-btn:hover{color:#82f213;color:var(--lumio-green)}.source-btn.active,.source-btn:hover{border-color:#82f213;border-color:var(--lumio-green)}.stats{grid-gap:1rem;background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:16px;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:2rem 0;padding:1.5rem}.stat{flex-direction:column;gap:.5rem;padding:.5rem}.stat .label{font-family:Red Hat Text,sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.stat span:last-child{color:#82f213;color:var(--lumio-green);font-family:Darker Grotesque,sans-serif;font-size:1.5rem;font-weight:700}.error-icon{font-size:4rem;margin-bottom:1rem;text-align:center}#errorTitle,.error-icon{color:#ff3b30;color:var(--lumio-danger)}#errorTitle{font-family:Darker Grotesque,sans-serif}#errorMessage{background:#0f0f0f;background:var(--lumio-dark);border-left:4px solid #ff3b30;border-left:4px solid var(--lumio-danger);border-radius:12px;color:#fff;color:var(--lumio-white);font-family:Red Hat Text,sans-serif;font-size:1rem;line-height:1.8;margin:1.5rem 0;padding:1.5rem}#unsupportedBrowserScreen .error-icon{color:orange}.browser-warning{background:#0f0f0f;background:var(--lumio-dark);border-left:4px solid orange;border-radius:12px;color:#fff;color:var(--lumio-white);font-family:Red Hat Text,sans-serif;font-size:1.1rem;line-height:1.8;margin:1.5rem 0;padding:1.5rem}#unsupportedBrowserScreen .help-text ul{list-style:none;margin:1rem 0;padding-left:1.5rem}#unsupportedBrowserScreen .help-text li{font-size:1rem;line-height:1.6;margin:1rem 0;padding-left:1rem;position:relative}#unsupportedBrowserScreen .help-text li:before{color:#82f213;color:var(--lumio-green);content:"✓";font-weight:700;left:-.5rem;position:absolute}#unsupportedBrowserScreen .help-text em{color:#6b6b6b;color:var(--lumio-light-gray);font-size:.9rem}.loading{overflow:hidden;position:relative}.loading:after{animation:shimmer 2s infinite;background:linear-gradient(90deg,#0000,#82f21333,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes shimmer{to{left:100%}}@media (max-width:768px){.container{padding:1rem;width:95%}.lumio-logo{font-size:2.5rem}h1{font-size:2rem}h2{font-size:1.5rem}.pin-input input{font-size:2.5rem;letter-spacing:.8rem}.btn-danger,.btn-primary,.btn-secondary{font-size:1.125rem;padding:1rem 1.5rem}.stats{grid-template-columns:1fr}#sourceControls,.audio-options{flex-direction:column}.radio-option{min-width:100%}}@media (max-width:480px){.lumio-logo{font-size:2rem}h1{font-size:1.75rem}.pin-input input{font-size:2rem;letter-spacing:.5rem}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){:root{--lumio-green:#a4ff2b;--lumio-gray:#4a4a4a}.btn-primary{font-weight:900}}.connected-layout{align-items:flex-start;display:flex;gap:2rem;margin:0 auto;max-width:1400px;padding:0 2rem;width:100%}.left-panel{display:flex;flex:0 0 380px;flex-direction:column;gap:1.5rem}.right-panel{align-items:center;display:flex;flex:1 1;flex-direction:column;min-width:0}.control-section{background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:16px;padding:1.5rem}.control-section h3{color:#fff;color:var(--lumio-white);font-family:Darker Grotesque,sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:.5px;margin:0 0 1rem;text-transform:uppercase}#sourceControls{display:flex;flex-direction:column;gap:.5rem}.source-btn{align-items:center;background:#2a2a2a;background:var(--lumio-gray);border:none;border-radius:12px;color:#fff;color:var(--lumio-white);cursor:pointer;display:flex;font-family:Red Hat Text,sans-serif;font-size:.95rem;font-weight:500;gap:.75rem;justify-content:flex-start;padding:.75rem 1rem;text-align:left;transition:all .2s ease;width:100%}.source-btn:hover{transform:translateY(-1px)}.source-btn.active,.source-btn:hover{background:#82f213;background:var(--lumio-green);color:#171717;color:var(--lumio-black)}.source-btn.active{box-shadow:0 0 20px #82f2134d;box-shadow:0 0 20px var(--lumio-green-glow)}.preview-container{background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:16px;max-width:900px;padding:1.5rem;text-align:center;width:100%}.preview-container video{aspect-ratio:16/9;background:#171717;background:var(--lumio-black);border-radius:12px;height:auto;max-height:600px;min-height:400px;width:100%}.preview-label{color:#6b6b6b;color:var(--lumio-light-gray);font-size:.9rem;font-weight:500;margin-top:1rem}.stats{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:1fr}.stat{align-items:center;border-bottom:1px solid #2a2a2a;border-bottom:1px solid var(--lumio-gray);display:flex;justify-content:space-between;padding:.75rem 0}.stat:last-child{border-bottom:none}.stat .label{color:#6b6b6b;color:var(--lumio-light-gray);font-size:.9rem;font-weight:500}.stat span:last-child{color:#fff;color:var(--lumio-white);font-family:Darker Grotesque,monospace;font-weight:600}.stats-horizontal{align-items:center;background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:16px;display:flex;flex-wrap:nowrap;gap:3rem;justify-content:space-around;margin-bottom:1.5rem;max-width:900px;padding:1.25rem 2rem;width:100%}.stat-horizontal{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:.5rem;text-align:center}.stat-horizontal .label{color:#6b6b6b;color:var(--lumio-light-gray);font-size:.8rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.stat-horizontal span:last-child{color:#fff;color:var(--lumio-white);font-family:Darker Grotesque,monospace;font-size:1rem;font-weight:700}.pin-layout{align-items:center;display:flex;gap:3rem;margin:0 auto;max-width:1200px;padding:2rem 0}.pin-main{flex:1 1;text-align:center}.pin-sidebar{align-items:flex-start;display:flex;flex:0 0 350px;flex-direction:column;justify-content:center}.audio-selection-horizontal{background:#0f0f0f;background:var(--lumio-dark);border:1px solid #2a2a2a;border:1px solid var(--lumio-gray);border-radius:16px;margin:2rem 0;padding:1.5rem}.audio-selection-horizontal .audio-label{color:#fff;color:var(--lumio-white);display:block;font-family:Darker Grotesque,sans-serif;font-size:1.125rem;font-weight:600;margin-bottom:1rem;text-align:center}.audio-options-horizontal{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.radio-option-horizontal{cursor:pointer;flex:0 0 auto}.radio-option-horizontal input[type=radio]{display:none}.radio-label-horizontal{align-items:center;background:#171717;background:var(--lumio-black);border:2px solid #2a2a2a;border:2px solid var(--lumio-gray);border-radius:12px;display:flex;flex-direction:column;justify-content:center;min-width:120px;padding:1rem;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.radio-option-horizontal input[type=radio]:checked+.radio-label-horizontal{background:#82f2131a;border-color:#82f213;border-color:var(--lumio-green)}.radio-label-horizontal:hover{border-color:#82f213;border-color:var(--lumio-green);transform:translateY(-2px)}.radio-label-horizontal .icon{font-size:1.5rem;margin-bottom:.5rem}.radio-label-horizontal .text{color:#6b6b6b;color:var(--lumio-light-gray);font-family:Red Hat Text,sans-serif;font-size:.875rem;font-weight:500}.radio-option-horizontal input[type=radio]:checked+.radio-label-horizontal .text{color:#82f213;color:var(--lumio-green);font-weight:700}@media (max-width:768px){.pin-layout{flex-direction:column;gap:2rem;padding:1rem 0}.pin-sidebar{flex:none;order:-1}.pin-sidebar .audio-options{flex-direction:row;gap:.5rem}.connected-layout{flex-direction:column;gap:1rem}.left-panel{flex:none;order:2}.right-panel{order:1}#sourceControls{flex-direction:row;gap:.5rem}.source-btn{flex:1 1;font-size:.85rem;justify-content:center;padding:.75rem .5rem}}