:root{--sk-bg-dark: #0a0a0a;--sk-bg-card: #151515;--sk-bg-elevated: #1a1a1a;--sk-neon-lime: #BFFF00;--sk-neon-pink: #FF2D95;--sk-neon-orange: #FF6B35;--sk-neon-cyan: #00FFFF;--sk-neon-yellow: #FFE600;--sk-text-primary: #f0f0f0;--sk-text-secondary: #888888;--sk-text-muted: #555555;--sk-border: #333333;--sk-border-strong: #444444;--sk-error: #FF4757;--sk-success: #2ecc71;font-family:Space Mono,monospace;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--sk-text-primary);background-color:var(--sk-bg-dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}.checkerboard-bg{background-image:linear-gradient(45deg,#1a1a1a 25%,transparent 25%),linear-gradient(-45deg,#1a1a1a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a1a 75%),linear-gradient(-45deg,transparent 75%,#1a1a1a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 20% 0%,rgba(191,255,0,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(255,45,149,.08) 0%,transparent 50%),var(--sk-bg-dark)}#root{width:100%;min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:Space Mono,monospace;letter-spacing:.05em;text-transform:uppercase}h1{font-size:3rem;line-height:1.1}h2{font-size:2rem}a{font-weight:700;color:var(--sk-neon-lime);text-decoration:none;transition:color .15s ease}a:hover{color:var(--sk-neon-pink);text-decoration:underline;text-decoration-style:wavy}button{font-family:Space Mono,monospace;font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s ease;border:3px solid transparent}button:disabled{cursor:not-allowed;opacity:.5}::selection{background:var(--sk-neon-lime);color:var(--sk-bg-dark)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--sk-bg-dark)}::-webkit-scrollbar-thumb{background:var(--sk-border-strong);border:2px solid var(--sk-bg-dark)}::-webkit-scrollbar-thumb:hover{background:var(--sk-neon-lime)}:focus-visible{outline:3px solid var(--sk-neon-lime);outline-offset:2px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes skate-slide{0%{transform:translate(-100%) skew(-5deg)}to{transform:translate(0) skew(0)}}@keyframes neon-flicker{0%,to{opacity:1}50%{opacity:.8}75%{opacity:.95}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px) rotate(-1deg)}75%{transform:translate(5px) rotate(1deg)}}.spinner{width:50px;height:50px;border:4px solid var(--sk-border-strong);border-top-color:var(--sk-neon-lime);border-right-color:var(--sk-neon-pink);border-radius:50%;animation:spin .8s linear infinite}.btn-primary{padding:1rem 2rem;background:var(--sk-neon-lime);color:var(--sk-bg-dark);border:3px solid var(--sk-bg-dark);border-radius:0;box-shadow:4px 4px 0 var(--sk-bg-dark),inset 0 0 0 2px var(--sk-neon-lime);position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .4s ease}.btn-primary:hover:before{left:100%}.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sk-bg-dark),inset 0 0 0 2px var(--sk-neon-lime)}.btn-primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sk-bg-dark),inset 0 0 0 2px var(--sk-neon-lime)}.btn-primary:disabled{background:var(--sk-border-strong);color:var(--sk-text-muted);box-shadow:none;transform:none}.btn-secondary{padding:.75rem 1.5rem;background:transparent;color:var(--sk-neon-pink);border:3px solid var(--sk-neon-pink);border-radius:0;position:relative}.btn-secondary:hover{background:var(--sk-neon-pink);color:var(--sk-bg-dark);transform:skew(-3deg)}.btn-secondary:active{transform:skew(-3deg) scale(.98)}.btn-ghost{padding:.5rem 1rem;background:transparent;color:var(--sk-text-secondary);border:2px solid var(--sk-border);border-radius:0}.btn-ghost:hover{border-color:var(--sk-neon-lime);color:var(--sk-neon-lime)}.btn-ghost.danger:hover{border-color:var(--sk-error);color:var(--sk-error)}.btn-success{padding:1rem 2rem;background:var(--sk-success);color:var(--sk-bg-dark);border:3px solid var(--sk-bg-dark);border-radius:0;box-shadow:4px 4px 0 var(--sk-bg-dark)}.btn-success:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sk-bg-dark);filter:brightness(1.1)}.btn-success:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sk-bg-dark)}.btn-success:disabled{background:var(--sk-border-strong);color:var(--sk-text-muted);box-shadow:none;transform:none}.card{background:var(--sk-bg-card);border:3px solid var(--sk-border-strong);padding:2rem;position:relative}.card:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;height:6px;background:linear-gradient(90deg,var(--sk-neon-lime),var(--sk-neon-pink),var(--sk-neon-orange))}.card h2{color:var(--sk-neon-lime);margin:0 0 1.5rem;text-shadow:2px 2px 0 var(--sk-bg-dark)}.input,input[type=text],input[type=number],input[type=email],select{font-family:Space Mono,monospace;font-size:1rem;padding:.75rem 1rem;background:var(--sk-bg-dark);color:var(--sk-text-primary);border:3px solid var(--sk-border-strong);border-radius:0;transition:all .15s ease}.input:focus,input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,select:focus{outline:none;border-color:var(--sk-neon-lime);box-shadow:0 0 0 3px #bfff0033}.input::placeholder,input::placeholder{color:var(--sk-text-muted)}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23BFFF00' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}select option{background:var(--sk-bg-dark);color:var(--sk-text-primary)}.status-dot{width:12px;height:12px;border-radius:50%;background:var(--sk-success);box-shadow:0 0 10px var(--sk-success);animation:pulse 2s infinite}.status-connected{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background:#2ecc7126;border:2px solid var(--sk-success);color:var(--sk-success);font-weight:700;text-transform:uppercase;letter-spacing:.05em}.error-box{padding:1rem 1.5rem;background:#ff475726;border:2px solid var(--sk-error);color:var(--sk-error)}.diagonal-stripes{background:repeating-linear-gradient(-45deg,var(--sk-neon-lime),var(--sk-neon-lime) 10px,var(--sk-bg-dark) 10px,var(--sk-bg-dark) 20px)}@media (max-width: 768px){.btn-primary,.btn-secondary,.btn-success{width:100%}}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:repeating-linear-gradient(45deg,transparent,transparent 50px,rgba(191,255,0,.03) 50px,rgba(191,255,0,.03) 100px);animation:slide-bg 20s linear infinite;pointer-events:none}@keyframes slide-bg{0%{transform:translate(0)}to{transform:translate(100px,100px)}}.login-card{max-width:480px;width:100%;padding:3rem 2.5rem;background:var(--sk-bg-card);border:4px solid var(--sk-border-strong);text-align:center;position:relative;z-index:1}.login-card:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;height:8px;background:linear-gradient(90deg,var(--sk-neon-lime) 0%,var(--sk-neon-lime) 33%,var(--sk-neon-pink) 33%,var(--sk-neon-pink) 66%,var(--sk-neon-orange) 66%,var(--sk-neon-orange) 100%)}.login-card:after{content:"";position:absolute;bottom:0;left:0;right:0;height:30px;background:repeating-linear-gradient(-45deg,var(--sk-bg-dark),var(--sk-bg-dark) 8px,var(--sk-border-strong) 8px,var(--sk-border-strong) 16px);opacity:.5}.login-card h1{font-family:Space Mono,monospace;font-size:3rem;color:var(--sk-neon-lime);margin:0 0 .5rem;text-shadow:3px 3px 0 var(--sk-neon-pink),6px 6px 0 var(--sk-bg-dark);letter-spacing:.08em;animation:neon-flicker 3s ease-in-out infinite;position:relative}.login-description{color:var(--sk-text-secondary);font-size:1rem;line-height:1.7;margin-bottom:2.5rem;padding:0 1rem}.login-btn{width:100%;padding:1.25rem 2rem;background:var(--sk-neon-lime);color:var(--sk-bg-dark);border:4px solid var(--sk-bg-dark);font-family:Space Mono,monospace;font-size:1.5rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;position:relative;box-shadow:6px 6px 0 var(--sk-bg-dark);transition:all .15s ease;z-index:1}.login-btn:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--sk-bg-dark);background:var(--sk-neon-yellow)}.login-btn:active{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--sk-bg-dark)}.login-card-error{border-color:var(--sk-error)}.login-card-error:before{background:var(--sk-error)}.login-error-message{color:var(--sk-error);padding:1rem;margin-bottom:1.5rem;background:#ff47571a;border:2px solid var(--sk-error);font-weight:700}.login-loading{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 0}.login-loading p{color:var(--sk-text-secondary);font-size:1rem;text-transform:uppercase;letter-spacing:.1em}@media (max-width: 480px){.login-card{padding:2rem 1.5rem}.login-card h1{font-size:2.5rem}.login-btn{font-size:1.25rem;padding:1rem 1.5rem}}.project-selection-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0%,rgba(191,255,0,.05) 0%,transparent 50%),var(--sk-bg-dark)}.project-selection-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:4px solid var(--sk-border-strong);background:var(--sk-bg-card);position:relative}.project-selection-header:after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sk-neon-lime),var(--sk-neon-pink),var(--sk-neon-orange),var(--sk-neon-cyan))}.project-selection-header h1{font-family:Space Mono,monospace;font-size:1.75rem;color:var(--sk-neon-lime);margin:0;text-shadow:2px 2px 0 var(--sk-bg-dark);letter-spacing:.08em}.project-selection-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.project-selection-card{max-width:550px;width:100%;padding:2.5rem;background:var(--sk-bg-card);border:4px solid var(--sk-border-strong);position:relative}.project-selection-card:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;height:8px;background:linear-gradient(90deg,var(--sk-neon-lime),var(--sk-neon-pink))}.project-selection-info{color:var(--sk-text-secondary);font-size:1.05rem;line-height:1.7;text-align:center;margin-bottom:2.5rem;padding:0 1rem}.projects-loading{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem}.projects-loading p{color:var(--sk-text-secondary);text-transform:uppercase;letter-spacing:.1em}.projects-error{text-align:center;padding:1.5rem;background:#ff47571a;border:3px solid var(--sk-error)}.projects-error p{color:var(--sk-error);margin-bottom:1.25rem;font-weight:700}.retry-btn{padding:.75rem 1.5rem;background:var(--sk-error);color:var(--sk-bg-dark);border:3px solid var(--sk-bg-dark);font-family:Space Mono,monospace;font-size:.9rem;font-weight:700;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 var(--sk-bg-dark);transition:all .15s ease}.retry-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--sk-bg-dark)}.project-buttons{display:flex;gap:1.25rem}.new-project-btn{flex:1;padding:1.25rem;background:var(--sk-neon-lime);color:var(--sk-bg-dark);border:4px solid var(--sk-bg-dark);font-family:Space Mono,monospace;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:5px 5px 0 var(--sk-bg-dark);transition:all .15s ease}.new-project-btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--sk-bg-dark);background:var(--sk-neon-yellow)}.new-project-btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--sk-bg-dark)}.new-project-btn:disabled{background:var(--sk-border-strong);color:var(--sk-text-muted);box-shadow:none;transform:none}.dropdown-container{flex:1;position:relative}.existing-project-btn{width:100%;padding:1.25rem;background:transparent;color:var(--sk-neon-pink);border:4px solid var(--sk-neon-pink);font-family:Space Mono,monospace;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:all .15s ease}.existing-project-btn:hover{background:var(--sk-neon-pink);color:var(--sk-bg-dark);transform:skew(-3deg)}.existing-project-btn:disabled{border-color:var(--sk-border);color:var(--sk-text-muted);transform:none;background:transparent}.dropdown-arrow{font-size:.75rem;transition:transform .2s ease}.dropdown-arrow.open{transform:rotate(180deg)}.projects-dropdown{position:absolute;top:calc(100% + .75rem);left:0;right:0;max-height:400px;overflow-y:auto;background:var(--sk-bg-elevated);border:3px solid var(--sk-neon-pink);box-shadow:8px 8px #ff2d954d;z-index:100}.dropdown-empty{padding:2rem;text-align:center;color:var(--sk-text-secondary);text-transform:uppercase;letter-spacing:.1em}.projects-list{list-style:none;margin:0;padding:.5rem 0}.projects-list li{margin:0}.project-item{width:100%;padding:1rem 1.25rem;background:transparent;color:var(--sk-text-primary);border:none;border-left:4px solid transparent;font-family:Space Mono,monospace;font-size:.95rem;text-align:left;cursor:pointer;transition:all .15s ease}.project-item:hover{background:#ff2d9526;border-left-color:var(--sk-neon-pink);padding-left:1.5rem}.show-more-btn{width:100%;padding:1rem;background:#ff2d951a;color:var(--sk-neon-pink);border:none;border-top:2px solid var(--sk-border-strong);font-family:Space Mono,monospace;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s ease}.show-more-btn:hover{background:#ff2d9533}.show-more-btn:disabled{color:var(--sk-text-muted);cursor:not-allowed}@media (max-width: 768px){.project-selection-header{padding:1rem}.project-selection-header h1{font-size:1.4rem}.project-selection-content{padding:1rem}.project-selection-card{padding:1.5rem}.project-buttons{flex-direction:column}.new-project-btn,.existing-project-btn{font-size:1.1rem}.projects-dropdown{max-height:300px}}:root{--shadowColour: rgba(0, 0, 0, .4);--highlightColour: rgba(255, 255, 255, .25);--lightBounceColour: rgba(255, 255, 255, .125);--holeColour: #000000;--backgroundColour: #666666;--labelColour: #ffffff;--deviceColour: #888888;--controlColour: #444444;--controlLabelColour: #ffffff;--displayColour: #222222;--displaySecondaryColour: #dcd6ca;--displayTextColour: #cce8ff;--good: #98d0ff;--neutral: #ffae00;--bad: #ff006c;--displayAccentColour: #ff7449;--colourFilter: sepia(1) saturate(55%) hue-rotate(175deg);--transparent: rgba(0, 0, 0, 0);--darken: rgba(0, 0, 0, .25);--lighten: rgba(255, 255, 255, .125)}.knob-container{display:flex;flex-direction:column;align-items:center;gap:1rem;-webkit-user-select:none;user-select:none}.knob-container.disabled{opacity:.5;pointer-events:none}.knob:before{content:"";border-radius:50%;left:-10%;top:-10%;position:absolute;transform:rotate(-45deg);width:120%;height:120%;box-shadow:var(--boxShadow, 0 var(--boxShadowSize, -40px) var(--boxShadowSize, 80px) var(--lightBounceColour), 0 var(--boxShadowSize, 40px) var(--boxShadowSize, 80px) var(--shadowColour), 0 var(--boxShadowSize, .8px) var(--boxShadowSize, 2.4px) var(--shadowColour), 0 var(--boxShadowSize, -20px) var(--boxShadowSize, 20px) var(--shadowColour) inset, 0 var(--boxShadowSize, 20px) var(--boxShadowSize, 20px) var(--highlightColour) inset)}.knob:after{content:"";border-radius:50%;left:0;top:0;transform:rotate(-45deg);position:absolute;width:100%;height:100%;background:conic-gradient(from 0deg at 50% 50%,var(--highlightColour) 1%,var(--transparent) 10%,var(--transparent) 40%,var(--highlightColour) 50%,var(--transparent) 60%,var(--transparent) 90%,var(--highlightColour) 99%)}.knob-label{font-family:Space Mono,monospace;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--sk-text-secondary)}.knob{position:relative;width:140px;height:140px;cursor:grab;touch-action:none}.knob:focus{outline:none}.knob:focus-visible .knob-body{box-shadow:0 0 0 4px var(--sk-neon-lime),inset 0 -8px 20px #0009}.knob.dragging{cursor:grabbing}.knob-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--sk-border-strong);background:var(--sk-bg-dark)}.knob-tick{position:absolute;width:1px;height:10px;background:var(--sk-border-strong);left:50%;top:8px;transform-origin:50% 62px;border-radius:2px}.knob-tick:nth-child(1),.knob-tick:nth-child(6),.knob-tick:nth-child(11){height:14px;background:var(--sk-neon-lime);box-shadow:0 0 8px var(--sk-neon-lime)}.knob-body{position:absolute;inset:16px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#3c3c3c,#505050 8deg,#323232,#1e1e1e 22deg,#3c3c3c 30deg);border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 2px 4px #ffffff1a,inset 0 -2px 4px #0006}.knob-body:before{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5a5a5a,#323232,#282828);border:1px solid rgba(0,0,0,.5);box-shadow:inset 0 3px 8px #ffffff26,inset 0 -3px 8px #00000080,0 2px 4px #0000004d}.knob.dragging .knob-body{box-shadow:inset 0 -8px 20px #0009,0 0 30px #bfff0066}.knob-indicator{position:absolute;width:2px;height:30px;background:var(--sk-neon-lime);left:50%;top:0;margin-left:-2px;border-radius:2px;box-shadow:0 0 12px var(--sk-neon-lime)}.knob-glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(191,255,0,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .2s ease}.knob:hover .knob-glow,.knob.dragging .knob-glow{opacity:1}.knob-value{font-family:Space Mono,monospace;font-size:2rem;font-weight:700;color:var(--sk-neon-lime);text-shadow:0 0 20px rgba(191,255,0,.5);letter-spacing:.05em}@media (max-width: 768px){.knob{width:120px;height:120px}.knob-tick{transform-origin:50% 52px}.knob-body{inset:14px}.knob-body:before{inset:10px}.knob-indicator{height:24px;top:8px}.knob-value{font-size:1.75rem}}.knob-container.danger .knob-tick:nth-child(1),.knob-container.danger .knob-tick:nth-child(6),.knob-container.danger .knob-tick:nth-child(11){background:#f33;box-shadow:0 0 8px #f33}.knob-container.danger .knob-indicator{background:#f33;box-shadow:0 0 12px #f33}.knob-container.danger .knob-glow{background:radial-gradient(circle,rgba(255,51,51,.15) 0%,transparent 70%)}.knob-container.danger .knob-value{color:#f33;text-shadow:0 0 20px rgba(255,51,51,.5)}.knob-container.danger .knob:focus-visible .knob-body{box-shadow:0 0 0 4px #f33,inset 0 -8px 20px #0009}.knob-container.danger .knob.dragging .knob-body{box-shadow:inset 0 -8px 20px #0009,0 0 30px #f336}.vocoder-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 80% 20%,rgba(255,45,149,.08) 0%,transparent 40%),radial-gradient(ellipse at 20% 80%,rgba(191,255,0,.08) 0%,transparent 40%),var(--sk-bg-dark)}.vocoder-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:4px solid var(--sk-border-strong);background:var(--sk-bg-card);position:relative}.vocoder-header:after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sk-neon-pink),var(--sk-neon-orange),var(--sk-neon-yellow),var(--sk-neon-lime))}.vocoder-header h1{font-family:Space Mono,monospace;font-size:1.5rem;color:var(--sk-text-primary);margin:0;flex:1;text-align:center;letter-spacing:.05em;text-shadow:2px 2px 0 var(--sk-bg-dark)}.back-btn{padding:.6rem 1.25rem;background:transparent;color:var(--sk-text-secondary);border:2px solid var(--sk-border);font-family:Space Mono,monospace;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s ease}.back-btn:hover{border-color:var(--sk-neon-lime);color:var(--sk-neon-lime);transform:skew(-3deg)}.logout-btn{padding:.6rem 1.25rem;background:transparent;color:var(--sk-text-secondary);border:2px solid var(--sk-border);font-family:Space Mono,monospace;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s ease}.logout-btn:hover{border-color:var(--sk-error);color:var(--sk-error);transform:skew(-3deg)}.vocoder-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:3rem 2rem;gap:2rem}.vocoder-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;flex:1}.vocoder-loading p{color:var(--sk-text-secondary);text-transform:uppercase;letter-spacing:.15em;font-size:.9rem}.vocoder-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;flex:1;text-align:center;max-width:450px}.vocoder-error p{color:var(--sk-error);font-weight:700;padding:1rem 1.5rem;background:#ff47571a;border:2px solid var(--sk-error)}.back-btn-large{padding:1rem 2rem;background:transparent;color:var(--sk-neon-lime);border:3px solid var(--sk-neon-lime);font-family:Space Mono,monospace;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s ease}.back-btn-large:hover{background:var(--sk-neon-lime);color:var(--sk-bg-dark);transform:skew(-3deg)}.status-row{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center}.connection-status{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background:#2ecc7126;border:3px solid var(--sk-success);color:var(--sk-success);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem}.status-dot{width:12px;height:12px;border-radius:50%;background:var(--sk-success);box-shadow:0 0 12px var(--sk-success);animation:pulse 2s ease-in-out infinite}.open-audiotool-btn{padding:.75rem 1.5rem;background:transparent;color:var(--sk-neon-cyan);border:3px solid var(--sk-neon-cyan);font-family:Space Mono,monospace;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s ease}.open-audiotool-btn:hover{background:var(--sk-neon-cyan);color:var(--sk-bg-dark);transform:translate(-2px,-2px);box-shadow:4px 4px #00ffff4d}.vocoder-card{max-width:500px;width:100%;padding:2.5rem;background:var(--sk-bg-card);border:4px solid var(--sk-border-strong);position:relative}.vocoder-card:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;height:8px;background:linear-gradient(90deg,var(--sk-neon-lime) 0%,var(--sk-neon-yellow) 25%,var(--sk-neon-orange) 50%,var(--sk-neon-pink) 75%,var(--sk-neon-cyan) 100%)}.vocoder-card h2{font-family:Space Mono,monospace;font-size:1.5rem;color:var(--sk-neon-lime);margin:0 0 2rem;text-shadow:2px 2px 0 var(--sk-bg-dark);letter-spacing:.08em;text-align:center}.vocoder-controls{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.knob-sticker{position:absolute;top:280px;left:50%}.knob-sticker img{transform:translate(-50%,-50%) translate(110px,-150px) rotate(45deg);width:150px;object-fit:contain}.knob-section{display:flex;justify-content:center;padding:1rem 0}.advanced-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:transparent;color:var(--sk-text-muted);border:none;font-family:Space Mono,monospace;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all .15s ease}.advanced-toggle:hover{color:var(--sk-text-secondary)}.toggle-arrow{font-size:.6rem;transition:transform .2s ease}.toggle-arrow.open{transform:rotate(90deg)}.position-section{width:100%;padding:1rem;background:#0003;border:1px solid var(--sk-border);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.position-inputs{display:flex;justify-content:center;gap:2rem}.position-group{display:flex;align-items:center;gap:.5rem}.position-group label{color:var(--sk-text-muted);font-family:Space Mono,monospace;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.position-input{width:150px;padding:.4rem .5rem;background:var(--sk-bg-dark);color:var(--sk-text-secondary);border:1px solid var(--sk-border);font-family:Space Mono,monospace;font-size:.65rem;text-align:center;transition:all .15s ease}.position-input:hover{border-color:var(--sk-border-strong)}.position-input:focus{outline:none;border-color:var(--sk-neon-pink);color:var(--sk-text-primary)}.position-input::-webkit-inner-spin-button,.position-input::-webkit-outer-spin-button{opacity:1}.create-vocoder-btn{width:100%;padding:1.25rem 2rem;background:var(--sk-neon-lime);color:var(--sk-bg-dark);border:4px solid var(--sk-bg-dark);font-family:Space Mono,monospace;font-size:1.1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:6px 6px 0 var(--sk-bg-dark);transition:all .15s ease;position:relative;overflow:hidden}.create-vocoder-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .4s ease}.create-vocoder-btn:hover:before{left:100%}.create-vocoder-btn:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--sk-bg-dark);background:var(--sk-neon-yellow)}.create-vocoder-btn:active{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--sk-bg-dark)}.create-vocoder-btn:disabled{background:var(--sk-border-strong);color:var(--sk-text-muted);box-shadow:none;transform:none;cursor:not-allowed}.create-vocoder-btn:disabled:before{display:none}.create-vocoder-btn.danger{background:#f33}.create-vocoder-btn.danger:hover{background:#f55}.vocoder-success-message{width:100%;padding:1rem 1.5rem;background:#2ecc7126;border:3px solid var(--sk-success);color:var(--sk-success);font-family:Space Mono,monospace;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;text-align:center;animation:successPop .3s ease}@keyframes successPop{0%{opacity:0;transform:scale(.9)}50%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.vocoder-header{padding:1rem;flex-wrap:wrap;gap:.75rem}.vocoder-header h1{order:-1;width:100%;text-align:center;margin-bottom:.5rem;font-size:1.25rem}.back-btn,.logout-btn{font-size:.75rem;padding:.5rem 1rem}.vocoder-content{padding:1.5rem 1rem}.vocoder-card{padding:1.5rem}.vocoder-card h2{font-size:1.25rem}.status-row{width:100%;flex-direction:column;gap:1rem}.connection-status,.open-audiotool-btn{width:100%;justify-content:center}.create-vocoder-btn{font-size:1rem;padding:1rem 1.5rem}}