:root{color-scheme:dark;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(180deg,#0f172a,#111827 60%,#0b1120);color:#f8fafc}body{margin:0;min-height:100vh}.app{padding:2rem;max-width:1000px;margin:0 auto;display:grid;gap:1.5rem}.app__header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.app__title{font-size:1.75rem;margin:0}.app__status{display:flex;gap:.75rem;align-items:center;font-size:.875rem}.panel{background:#0f172ab3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.1);border-radius:16px;padding:1.5rem;box-shadow:inset 0 1px #ffffff0a,0 10px 30px #080f2840}.panel__title{margin:0 0 1rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8}.source-controls{display:grid;gap:1rem}.slider-control{display:flex;flex-direction:column;gap:.5rem}.slider-control label{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:#94a3b8}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:#1e293bcc;border:1px solid rgba(148,163,184,.25);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#67e8f9,#06b6d4);cursor:pointer;box-shadow:0 2px 6px #67e8f966;transition:transform .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#67e8f9,#06b6d4);cursor:pointer;border:none;box-shadow:0 2px 6px #67e8f966;transition:transform .15s ease}input[type=range]::-moz-range-thumb:hover{transform:scale(1.1)}.slider-control span{font-feature-settings:"tnum";font-family:IBM Plex Mono,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#bae6fd;font-size:.9rem}.checkbox-group{display:flex;gap:1.5rem;flex-wrap:wrap}.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:#f8fafc;transition:color .2s ease}.checkbox-group label:has(input:disabled){opacity:.5;cursor:not-allowed}input[type=checkbox]{appearance:none;width:20px;height:20px;border-radius:6px;background:#1e293bcc;border:2px solid rgba(148,163,184,.3);cursor:pointer;position:relative;transition:background .2s ease,border .2s ease}input[type=checkbox]:checked{background:linear-gradient(135deg,#0ea5e9,#22d3ee);border-color:#67e8f999}input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.joystick-container{display:flex;justify-content:center;padding:1rem 0}.joystick-container canvas{border-radius:12px;box-shadow:inset 0 2px 8px #080f2899,0 4px 12px #080f284d;cursor:crosshair;max-width:100%;height:auto;transition:box-shadow .2s ease,border .2s ease;border:2px solid rgba(148,163,184,.1)}.joystick-container canvas:active,.joystick-container canvas.active{border-color:#67e8f999;box-shadow:inset 0 2px 8px #080f2899,0 0 20px #22d3ee66}.instructions{margin-bottom:1rem;padding:1rem;background:#22d3ee14;border-left:3px solid rgba(34,211,238,.5);border-radius:8px;font-size:.9rem;line-height:1.5}.instructions p{margin:.5rem 0}.instructions p:first-child{margin-top:0}.instructions p:last-child{margin-bottom:0}.instructions kbd{display:inline-block;padding:.2rem .5rem;background:#0f172acc;border:1px solid rgba(148,163,184,.3);border-radius:4px;font-family:IBM Plex Mono,monospace;font-size:.85em;color:#67e8f9}.formant-readout{display:flex;justify-content:space-around;gap:1rem;margin-top:1rem;padding:.75rem;background:#0f172a80;border-radius:8px;font-feature-settings:"tnum";font-family:IBM Plex Mono,monospace}.formant-readout span{color:#cbd5f5}.formant-readout span span{color:#67e8f9;font-weight:600}.formant-controls{display:grid;gap:1rem}.envelope-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}select{background:#0f172ad9;color:#f8fafc;border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:.5rem .75rem;font-size:1rem;min-width:200px;cursor:pointer;transition:border .2s ease,box-shadow .2s ease}select:focus{border-color:#67e8f999;outline:none;box-shadow:0 0 0 3px #0891b233}select:disabled{opacity:.5;cursor:not-allowed}.toggle{appearance:none;width:56px;height:32px;border-radius:999px;background:#1e293bcc;border:1px solid rgba(148,163,184,.25);position:relative;cursor:pointer;transition:background .2s ease,border .2s ease}.toggle:after{content:"";position:absolute;width:24px;height:24px;border-radius:999px;background:#f8fafc;top:3px;left:3px;transition:transform .2s ease;box-shadow:0 2px 4px #0f172a80}.toggle:checked{background:linear-gradient(135deg,#0ea5e9,#22d3ee);border-color:#67e8f999}.toggle:checked:after{transform:translate(24px)}.status-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:999px;background:#0ea5e91f;color:#bae6fd;font-weight:500;letter-spacing:.05em;font-size:.85rem}.status-pill:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 6px #22d3eeb3}.status-pill--off{background:#7f1d1d2e;color:#fecaca}.status-pill--off:before{background:#f87171;box-shadow:none}.power-button{background:linear-gradient(135deg,#22d3ee,#0ea5e9);border:none;color:#0f172a;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:12px;padding:.6rem 1.4rem;cursor:pointer;box-shadow:0 10px 20px #0ea5e933;transition:transform .15s ease,box-shadow .15s ease}.power-button:active{transform:translateY(2px);box-shadow:0 6px 12px #0ea5e947}.power-button:disabled{background:#94a3b84d;color:#e2e8f099;cursor:not-allowed;box-shadow:none}.midi-status{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.midi-status__devices{display:inline-flex;gap:.5rem;align-items:center;font-size:.85rem;color:#f8fafc}.midi-activity{width:10px;height:10px;border-radius:50%;background:#94a3b866;box-shadow:none;transition:background .15s ease,box-shadow .15s ease}.midi-activity--on{background:#4ade80;box-shadow:0 0 10px #4ade8099}@media(max-width:768px){.app{padding:1rem}.app__title{font-size:1.5rem}.joystick-container canvas{max-width:100%}.formant-readout{flex-direction:column;gap:.5rem;text-align:center}.envelope-controls{grid-template-columns:1fr}}@media(min-width:1100px){.app{max-width:1200px}}