@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap";:root{--bg: #0a0a0a;--surface: #111;--border: #2a2a2a;--text: #999;--text-dim: #555;--text-hi: #ddd}*{box-sizing:border-box;margin:0;padding:0;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-size:11px;letter-spacing:.02em}#canvas-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;justify-content:center;align-items:center}canvas{display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:100;display:flex;justify-content:center;align-items:center;transition:opacity .4s,visibility .4s}.overlay.hidden{opacity:0;visibility:hidden}.start-content{text-align:center}.start-content h1{font-size:1.6rem;font-weight:400;color:var(--text-hi);letter-spacing:.08em;text-transform:lowercase}.start-content p{font-size:.75rem;color:var(--text-dim);margin:.75rem 0 1.5rem}.start-buttons{display:flex;justify-content:center;gap:10px}button{background:transparent;border:1px solid var(--border);color:var(--text);padding:6px 16px;font-size:.7rem;font-family:inherit;letter-spacing:.04em;cursor:pointer;transition:background .15s,color .15s,border-color .15s}button:hover{border-color:var(--text);color:var(--text-hi)}button.active{background:var(--text-hi);color:var(--bg);border-color:var(--text-hi)}#start-btn,#start-info-btn{padding:8px 28px;font-size:.75rem;border-color:var(--text);color:var(--text-hi)}#start-btn:hover,#start-info-btn:hover{background:var(--text-hi);color:var(--bg)}#start-info-btn{border-color:var(--border);color:var(--text-dim)}#start-info-btn:hover{border-color:var(--text)}#ui-controls{position:absolute;top:12px;right:12px;z-index:50}#ui-controls.hidden{opacity:0;pointer-events:none}#panel-toggle{position:absolute;top:0;right:0;width:20px;height:20px;padding:0;font-size:12px;line-height:18px;text-align:center;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);z-index:2;cursor:pointer;transition:color .15s}#panel-toggle:hover{color:var(--text)}.panel{background:var(--surface);border:1px solid var(--border);padding:20px 16px 14px;width:260px;transition:opacity .2s,max-height .3s;overflow:hidden}#ui-controls.collapsed .panel{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border:none;margin:0}.group{margin-bottom:14px;display:flex;flex-direction:column;gap:5px}.label{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.label span{color:var(--text)}.hint{font-size:.55rem;color:var(--text-dim);line-height:1.4;margin-top:2px}.toggle-row{display:flex}.toggle-row button{flex:1;padding:4px 0;font-size:.65rem;text-align:center}.toggle-row button:first-child{border-right:none}.root-row{display:flex;gap:4px}.root-row select{flex:1}select{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:4px 6px;font-size:.65rem;font-family:inherit;letter-spacing:.04em;outline:none;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none}select:focus{border-color:var(--text-dim)}select option{background:var(--bg);color:var(--text)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{width:100%;height:1px;background:var(--border)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;width:10px;background:var(--text);margin-top:-4.5px;cursor:pointer}input[type=range]::-moz-range-track{width:100%;height:1px;background:var(--border);border:none}input[type=range]::-moz-range-thumb{height:10px;width:10px;background:var(--text);border:none;border-radius:0}.midi-status{font-size:.6rem;color:var(--text-dim);padding:4px 0;border-top:1px solid var(--border);margin-top:4px}.midi-status.connected{color:var(--text)}#piano-roll{position:absolute;top:12px;left:12px;z-index:50;display:flex;flex-direction:column-reverse;gap:1px;font-size:.6rem;font-family:inherit;pointer-events:none}.pr-note{color:var(--text);transition:opacity .3s}.pr-empty{color:var(--text-dim)}#legend{position:absolute;bottom:12px;left:12px;z-index:50;display:flex;align-items:center;gap:14px;font-size:.6rem;color:var(--text-dim);white-space:nowrap}.leg-item{display:inline-flex;align-items:center;gap:3px}.leg-item span{color:var(--text)}.lg{font-size:.7rem;line-height:1}.lg.t{color:#fff}.lg.a{color:#aaa}.lg.i{color:#555}.leg-sep{width:1px;height:10px;background:var(--border)}#info-btn{position:absolute;bottom:12px;right:44px;z-index:50;width:24px;height:24px;padding:0;font-size:13px;line-height:22px;text-align:center;border:1px solid var(--border);background:transparent;color:var(--text-dim)}#info-btn:hover{color:var(--text);border-color:var(--text)}#info-btn.hidden{display:none}#fs-btn{position:absolute;bottom:12px;right:12px;z-index:50;width:24px;height:24px;padding:0;font-size:14px;line-height:22px;text-align:center;border:1px solid var(--border);background:transparent;color:var(--text-dim)}#fs-btn:hover{color:var(--text);border-color:var(--text)}#info-overlay{z-index:200;display:flex;justify-content:center;align-items:center}#info-overlay.hidden{opacity:0;visibility:hidden}.info-modal{background:var(--surface);border:1px solid var(--border);padding:28px 32px;max-width:520px;max-height:85vh;overflow-y:auto;position:relative}.info-modal h2{font-size:1rem;font-weight:500;color:var(--text-hi);text-transform:lowercase;letter-spacing:.08em;margin:20px 0 10px;padding-bottom:4px;border-bottom:1px solid var(--border)}.info-modal h2:first-child{margin-top:0}.info-modal ol{padding-left:18px;margin:0;font-size:.85rem;line-height:1.7;color:var(--text)}.info-modal ol li{margin-bottom:2px}.info-modal table{width:100%;border-collapse:collapse;font-size:.85rem;line-height:1.6}.info-modal td{padding:3px 0;vertical-align:top;color:var(--text)}.info-modal td:first-child{width:80px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;padding-right:12px}.info-modal code{font-family:inherit;color:var(--text-dim)}.info-modal p{font-size:.85rem;line-height:1.6;color:var(--text);margin:4px 0}.info-modal a{color:var(--text-hi);text-decoration:none;border-bottom:1px dotted var(--text-dim)}.info-modal a:hover{color:#fff;border-bottom-color:var(--text)}.info-hint{color:var(--text-dim)!important;font-size:.55rem!important;margin-top:6px!important}.info-close{position:absolute;top:8px;right:10px;width:20px;height:20px;padding:0;font-size:16px;line-height:18px;text-align:center;border:none;background:transparent;color:var(--text-dim);cursor:pointer}.info-close:hover{color:var(--text-hi)}@media (max-width: 600px){#ui-controls{top:4px;right:4px}.panel{width:220px;padding:20px 12px 10px}.group{margin-bottom:10px}.label,button,select,.hint{font-size:.55rem}#legend{bottom:4px;left:4px;gap:8px;font-size:.5rem}.lg{font-size:.55rem}.leg-sep{height:8px}}.panel{width:286px;max-height:calc(100dvh - 24px);overflow-y:auto;scrollbar-width:thin}.panel-heading{color:var(--text-hi);margin-bottom:16px;letter-spacing:.08em}section{border-top:1px solid var(--border);margin-top:16px;padding-top:12px}section h2{font-size:10px;font-weight:400;color:var(--text-hi);margin-bottom:12px}.slider-control{margin-top:12px}.control-label{display:flex;align-items:center;gap:6px;font-size:10px}.control-label output{margin-left:auto;color:var(--text-hi)}button.learn{font-size:9px;padding:3px 5px;min-width:42px}.hint{display:block;line-height:1.6;margin-top:8px;color:#888}section .label,details .label{margin-top:12px}.range-preview{height:8px;position:relative;margin-top:8px;background:linear-gradient(to right,#111,#ddd)}.range-preview.dark{background:linear-gradient(to right,#ddd,#111)}#range-band{position:absolute;top:-2px;bottom:-2px;border:1px solid white}details{border-top:1px solid var(--border);margin-top:16px;padding-top:12px}summary{cursor:pointer;color:var(--text-hi)}#clear-midi{margin-top:10px}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:1px solid white;outline-offset:3px}#legend{flex-wrap:wrap;max-width:calc(100vw - 90px);white-space:normal}@media (max-width: 600px){.panel{width:250px;max-height:calc(100dvh - 56px)}#legend{gap:6px}}.panel{background:#0d0d0d;border-color:#222;padding:24px 18px 18px}.panel-heading{display:flex;justify-content:space-between;color:#eee}.panel-heading span{color:#666;font-size:9px;letter-spacing:0}.transport{margin-top:12px}.scene-tools{margin-top:6px}#performance-status{font-size:9px;min-height:29px}select{padding:7px 8px}section h2{color:#b5b5b5;letter-spacing:.06em}.control-label label{color:#999}.control-label output{font-size:9px}button.learn{border-color:transparent;color:#666}button.learn:hover,button.learn:focus-visible{border-color:#555;color:#ddd}button.learn.active{color:#111}.checkbox-label{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:10px}input[type=checkbox]{accent-color:#ddd}#piano-roll{top:24px;left:24px;gap:5px;font-size:10px}#legend{left:24px;bottom:20px;color:#777;gap:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media (max-width: 800px){#ui-controls{top:auto;right:12px;left:12px;bottom:46px}.panel{width:100%;max-height:calc(48dvh - 46px);padding-top:24px}#ui-controls.collapsed{left:auto;top:12px;bottom:auto}#legend{left:12px;bottom:12px;font-size:8px;gap:8px}#piano-roll{left:12px;top:12px;font-size:9px}}[hidden]{display:none!important}.panel .panel-heading{margin-bottom:10px}.utility-row{display:flex;gap:4px;margin-top:6px}.utility-row button{flex:1;padding:5px 2px;font-size:9px;border-color:transparent}.utility-row button:hover{border-color:#444}.utility-row button.active{border-color:#ddd}.performance-section{margin-top:12px;padding-top:10px}.performance-section h2{font-size:9px;margin-bottom:8px;color:#777}.source-row button{padding:6px}.slider-control{margin-top:9px}#performance-status{min-height:0;font-size:9px}#performance-status:empty,#learn-status:empty,#camera-status:empty{display:none}button.learn{display:none}.mapping button.learn{display:block}.mapping .control-label label{font-size:9px}.panel details{margin-top:12px;padding-top:10px}.panel summary{font-size:10px;color:#888}.panel summary:hover{color:#ddd}#edge-controls{padding-top:2px}.save-row{display:flex;align-items:stretch;gap:5px;margin-top:5px}.save-row input[type=text]{min-width:0;flex:1;padding:7px 8px;border:1px solid var(--border);background:#090909;color:var(--text-hi);font:inherit;font-size:10px}.save-row button{padding:5px 8px;font-size:9px}.setup-actions{display:grid;grid-template-columns:repeat(3,1fr)}.setup-actions button{padding-inline:3px}#preset-status{font-size:9px;overflow-wrap:anywhere}