:root{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--bg-tertiary: #f1f5f9;--bg-card: #ffffff;--border-color: #000000;--border-subtle: #cbd5e1;--text-primary: #000000;--text-secondary: #475569;--text-muted: #94a3b8;--pad-off: #ffffff;--pad-off-border: #000000;--pad-on: #000000;--pad-highlight1: #475569;--pad-highlight2: #94a3b8;--accent-blue: #2563eb;--accent-emerald: #059669;--radius-sm: 3px;--radius-md: 6px;--radius-lg: 8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--bg-secondary);border-bottom:2px solid var(--border-color);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.header-brand{display:flex;align-items:center;gap:.75rem}.header-brand h1{font-size:1.25rem;font-weight:800;color:var(--text-primary)}.header-badge{font-size:.75rem;padding:.2rem .5rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-weight:600}.controls-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.control-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-secondary)}.control-item label{font-weight:600;color:var(--text-primary);white-space:nowrap}select,input[type=number],input[type=text]{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:.35rem .6rem;font-size:.85rem;outline:none}select:focus,input:focus{outline:2px solid var(--border-color)}input[type=color]{-webkit-appearance:none;border:1px solid var(--border-color);width:26px;height:26px;padding:1px;border-radius:var(--radius-sm);cursor:pointer;background:#fff;vertical-align:middle}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:2px}.btn-mini{background:#fff;color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:.2rem .5rem;font-size:.78rem;font-weight:700;cursor:pointer;transition:background .1s}.btn-mini:hover{background:#f1f5f9}.indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background:#94a3b8;margin-right:4px}.indicator.online{background:var(--accent-emerald)}.app-container{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;max-width:1500px;width:100%;margin:0 auto}.twin-monitor-section{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}.monitor-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 2px 4px #0000000d}.monitor-card.live-monitor-card{flex:0 0 auto;min-width:380px}.monitor-card.last-captured-card{flex:0 0 310px;width:310px;border-style:solid;background:#fff}@media(max-width:800px){.monitor-card.live-monitor-card,.monitor-card.last-captured-card{flex:1 1 100%;width:100%;min-width:0}}.monitor-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-subtle);padding-bottom:.5rem}.monitor-title-area{display:flex;align-items:baseline;gap:.75rem}.monitor-badge-label{font-size:.75rem;font-weight:700;text-transform:uppercase;background:#000;color:#fff;padding:.15rem .4rem;border-radius:2px;letter-spacing:.5px}.monitor-badge-label.paused{background:#d97706;color:#fff}.pause-btn{font-size:.75rem;padding:.15rem .45rem;background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .1s ease}.pause-btn:hover{background:#f1f5f9}.pause-btn.is-paused{background:#fef08a;border-color:#ca8a04;color:#854d0e;font-weight:700}.monitor-detected-chord{font-size:1.5rem;font-weight:800;color:var(--text-primary)}.monitor-detected-notes{font-size:.85rem;color:var(--text-secondary)}.progress-container{display:flex;flex-direction:column;gap:.35rem;width:100%}.progress-info{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;color:var(--text-secondary)}.hold-status-text{font-size:.72rem;font-weight:700;color:var(--text-primary)}.progress-bar-bg{width:100%;height:6px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:999px;overflow:hidden}.progress-bar-fill{width:0%;height:100%;background:#000;border-radius:999px;transition:width .05s linear}.progress-bar-fill.ready{background:var(--accent-emerald)}.monitor-actions-bar{display:flex;gap:.65rem;width:100%}.monitor-action-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:.5rem .85rem;font-size:.82rem;font-weight:700;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}.monitor-action-btn.pause-btn{background:#fff;color:var(--text-primary);border:1px solid var(--border-color)}.monitor-action-btn.pause-btn:hover{background:#f1f5f9;border-color:#94a3b8}.monitor-action-btn.pause-btn.is-paused{background:#fef3c7;border-color:#f59e0b;color:#b45309;box-shadow:0 0 0 2px #f59e0b33}.monitor-action-btn.capture-btn{background:#000;color:#fff;border:1px solid #000000}.monitor-action-btn.capture-btn:hover{background:#334155;border-color:#334155;transform:translateY(-1px)}.monitor-action-btn.capture-btn:active{transform:translateY(0)}.monitor-grid-wrapper{align-self:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.monitor-candidate-list{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;align-items:center;width:100%;min-height:48px;max-height:120px;overflow-y:auto;padding:.6rem .75rem;background:#f8fafc;border:1px solid var(--border-color);border-radius:var(--radius-sm);box-sizing:border-box}.candidate-placeholder{color:var(--text-secondary);font-size:.78rem;font-style:italic}.candidate-chip{background:#fff;border:1px solid var(--border-color);color:var(--text-primary);padding:.25rem .65rem;border-radius:999px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:.3rem;-webkit-user-select:none;user-select:none;box-shadow:0 1px 2px #0000000a}.candidate-chip:hover{border-color:#0f172a;background:#f1f5f9;transform:translateY(-1px);box-shadow:0 2px 4px #00000014}.candidate-chip:active{transform:translateY(0)}.candidate-chip.is-primary{background:#0f172a;border-color:#0f172a;color:#fff}.candidate-chip.is-primary:hover{background:#334155;border-color:#334155}.candidate-chip .chip-star{color:#fbbf24;font-size:.75rem}.grid-container{display:grid;gap:0;background:#fff;border-top:1px solid #000000;border-left:1px solid #000000;align-self:center;margin:0 auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}.pad-cell{background:#fff;border-right:1px solid #000000;border-bottom:1px solid #000000;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:#64748b;cursor:pointer;transition:background-color .08s}.pad-cell:hover{background-color:#f1f5f9}.pad-cell.active-on{background:var(--pad-on, #000000)!important;color:var(--pad-on-text, #ffffff)!important;font-weight:800}.pad-cell.active-highlight1{background:var(--pad-highlight1, #918118)!important;color:var(--pad-h1-text, #ffffff)!important;font-weight:800}.pad-cell.active-highlight2{background:var(--pad-highlight2, #808080)!important;color:var(--pad-h2-text, #ffffff)!important;font-weight:800}.action-toolbar{display:flex;gap:.75rem;flex-wrap:wrap;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.75rem 1.25rem;align-items:center}.btn{background:#fff;color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:.4rem .85rem;font-size:.85rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:all .1s ease}.btn:hover{background:#f1f5f9}.btn:active{transform:translateY(1px)}.btn-primary{background:#000;border-color:#000;color:#fff}.btn-primary:hover{background:#333}.btn-danger{color:#dc2626;border-color:#dc2626}.btn-danger:hover{background:#fee2e2}.diagrams-section{display:flex;flex-direction:column;gap:1rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-header h2{font-size:1.15rem;font-weight:800;color:var(--text-primary)}.diagram-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}.diagram-card,.text-card{background:#fff;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);padding:.85rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 2px 4px #0000000a;position:relative}.text-card-textarea{width:100%;height:190px;resize:vertical;font-family:inherit;font-size:.85rem;line-height:1.45;padding:.5rem;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#fff;color:var(--text-primary);outline:none;box-sizing:border-box}.text-card-textarea:focus{border-color:var(--border-color);background:#fff}.cursor-card{background:#f8fafc;border:2px dashed #94a3b8;border-radius:var(--radius-sm);padding:1.25rem .85rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;min-height:240px;text-align:center;-webkit-user-select:none;user-select:none;transition:border-color .15s,background-color .15s}.cursor-card:hover{border-color:#000;background:#f1f5f9}.cursor-badge{font-size:.72rem;font-weight:700;background:#000;color:#fff;padding:.2rem .5rem;border-radius:2px;text-transform:uppercase;letter-spacing:.5px}.cursor-card-hint{font-size:.8rem;color:var(--text-secondary);line-height:1.4}.cursor-card-actions{display:flex;flex-direction:column;gap:.5rem;width:100%;align-items:center}.cursor-nav-buttons{display:flex;gap:.4rem}.card-header{display:flex;justify-content:space-between;align-items:center;gap:.4rem}.card-title-input{font-size:1.1rem;font-weight:800;color:#000;background:transparent;border:1px solid transparent;padding:.15rem .35rem;border-radius:var(--radius-sm);flex:1;min-width:0;width:100%}.card-title-input:hover{border-color:var(--border-color)}.card-title-input:focus{border-color:var(--border-color);background:#f8fafc}.card-candidate-chips{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-top:-.25rem;margin-bottom:.15rem}.card-chip{background:#f1f5f9;border:1px solid var(--border-color);color:var(--text-primary);padding:.15rem .45rem;border-radius:999px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;user-select:none;line-height:1.2;box-shadow:0 1px 1px #00000008}.card-chip:hover{background:#e2e8f0;border-color:#94a3b8;transform:translateY(-.5px)}.card-chip.is-selected{background:#0f172a;border-color:#0f172a;color:#fff;font-weight:700}.card-actions{display:flex;gap:.2rem;flex-shrink:0}.btn-icon{background:#fff;border:1px solid var(--border-color);color:#000;cursor:pointer;padding:.15rem .35rem;border-radius:2px;font-size:.8rem;font-weight:700}.btn-icon:hover{background:#f1f5f9}.card-memo-input{font-size:.8rem;color:var(--text-secondary);background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.25rem .4rem;width:100%}.card-memo-input:focus{border-color:var(--border-color)}.card-grid{display:grid;gap:0;background:#fff;border-top:1px solid #000000;border-left:1px solid #000000;-webkit-user-select:none;user-select:none}.empty-state{padding:3rem 1rem;text-align:center;color:var(--text-secondary);background:#fff;border:1.5px dashed var(--border-color);border-radius:var(--radius-md);font-size:.95rem;font-weight:500}.instructions-section{background:#fff;border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}.instructions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem}.instruction-item{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:#334155;line-height:1.5}.instruction-item strong{color:#000;font-size:.92rem}.json-bottom-section{margin-top:.5rem;background:var(--bg-secondary);border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.json-textarea{width:100%;min-height:220px;background:#fff;color:#000;font-family:JetBrains Mono,Fira Code,monospace;font-size:.82rem;line-height:1.4;padding:.75rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);resize:vertical}.help-box{background:#f8fafc;border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:.6rem .8rem;font-size:.8rem;color:#334155;line-height:1.4}@media print{body{background:#fff}.app-header,.controls-bar,.twin-monitor-section,.action-toolbar,.json-bottom-section{display:none!important}.app-container{padding:0;max-width:100%}.diagram-card{box-shadow:none;page-break-inside:avoid}.card-candidate-chips{display:none!important}}