@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}}