: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:960px;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}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.25rem}.knob{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.knob__ring{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#1f2937,#020617 70%);border:2px solid rgba(148,163,184,.25);box-shadow:inset 0 4px 10px #080f2866;position:relative;cursor:pointer;transition:border .2s ease,box-shadow .2s ease}.knob__ring:after{content:"";position:absolute;width:6px;height:16px;border-radius:6px;background:linear-gradient(180deg,#67e8f9,#06b6d4);top:10px;left:calc(50% - 3px);box-shadow:0 0 10px #67e8f966}.knob__ring:active{border-color:#67e8f999;box-shadow:0 0 0 4px #0891b226}.knob__label{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:#cbd5f5}.knob__value{font-feature-settings:"tnum";font-family:IBM Plex Mono,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#bae6fd}.algorithm-select{display:flex;flex-direction:column;gap:.75rem}.algorithm-select__control{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}.algorithm-select label{text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;font-size:.8rem}select{background:#0f172ad9;color:#f8fafc;border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:.5rem .75rem;font-size:1rem;min-width:240px;transition:border .2s ease,box-shadow .2s ease}select:focus{border-color:#67e8f999;outline:none;box-shadow:0 0 0 3px #0891b233}.toggle{appearance:none;width:56px;height:32px;border-radius:999px;background:#1e293bcc;border:1px solid rgba(148,163,184,.25);position:relative;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)}.keyboard{display:grid;gap:1rem}.keyboard__keys{position:relative;-webkit-user-select:none;user-select:none;padding:12px 18px 20px;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 60%);border-radius:18px;box-shadow:inset 0 -1px #ffffff1a;overflow:hidden;width:100%}.keyboard__keys:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #0f172a33}.keyboard__white-keys{display:flex;position:relative;z-index:1;width:100%}.keyboard__black-keys{position:absolute;inset:12px 18px 58%;pointer-events:none;z-index:2}.key{position:relative;cursor:pointer;transition:transform .04s ease,box-shadow .06s ease;touch-action:none}.key.white{display:flex;justify-content:center;align-items:flex-end;flex:1 1 0;min-width:38px;max-width:80px;height:150px;margin:0 2px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#e2e8f0,#cbd5f5 60%,#f8fafc);border:1px solid rgba(15,23,42,.25);box-shadow:inset 0 -6px 10px #0f172a26,0 8px 16px #080f2859}.key.white:first-child{margin-left:0}.key.white:last-child{margin-right:0}.key.white .key__label{margin-bottom:8px;font-size:.72rem;font-family:IBM Plex Mono,monospace;color:#0f172a99}.keyboard__black-keys .key.black{pointer-events:auto;position:absolute;height:95px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#0f172a,#020617);border:1px solid rgba(148,163,184,.2);box-shadow:inset 0 -8px 12px #080f2873,0 8px 16px #080f2873}.key.active{transform:translateY(4px);box-shadow:inset 0 -2px 4px #0f172a4d}.keyboard__legend{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;font-family:IBM Plex Mono,monospace;font-size:.75rem;color:#94a3b8cc;text-transform:uppercase;letter-spacing:.1em;text-align:center}.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}.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-status__devices select{min-width:180px}.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:1.5rem}.knob__ring{width:56px;height:56px}.keyboard__keys{padding:12px 12px 18px}.key.white{min-width:32px;height:120px}.keyboard__black-keys .key.black{height:80px}}@media(min-width:1100px){.key.white{max-width:64px;height:170px}.keyboard__black-keys .key.black{height:110px}}