@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=DM+Sans:wght@400;500;600;700&display=swap";:root{--body: #c8bea0;--body-light: #d4cbb0;--body-dark: #b0a588;--lcd-bg: #8a9a6c;--lcd-text: #1a2810;--lcd-dim: #6e7d5a;--lcd-glow: rgba(26, 40, 16, .6);--btn-bg: #b8ae92;--btn-border: #9e9478;--btn-active: #5a6e3c;--btn-active-text: #d4e8b0;--btn-queued: #7a8a5c;--text: #3a3520;--text-dim: #6b6348;--label: #4a4430;--accent: #2a4a1a;--red: #a03020;--border: #a09880;--inset: inset 1px 1px 2px rgba(0,0,0,.15), inset -1px -1px 1px rgba(255,255,255,.2);--raised: 1px 1px 2px rgba(0,0,0,.2), -1px -1px 1px rgba(255,255,255,.3);--mono: "Share Tech Mono", monospace;--sans: "DM Sans", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:#888070;font-family:var(--sans);-webkit-font-smoothing:antialiased}.panel-body{max-width:880px;margin:24px auto;background:linear-gradient(180deg,var(--body-light) 0%,var(--body) 30%,var(--body-dark) 100%);border-radius:12px;border:2px solid #8a8068;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff4d;padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px}.lcd{background:var(--lcd-bg);border-radius:6px;box-shadow:var(--inset),0 0 0 2px #7a8a62;padding:10px 14px;position:relative;overflow:hidden}.lcd:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none}.lcd-top{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.lcd-format{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--lcd-text);background:#1a281040;border:1px solid rgba(26,40,16,.3);padding:2px 6px;border-radius:3px;letter-spacing:.5px;margin-left:auto;flex-shrink:0}.lcd-number{font-family:var(--mono);font-size:22px;font-weight:400;color:var(--lcd-text);letter-spacing:1px}.lcd-colon{font-family:var(--mono);font-size:22px;color:var(--lcd-dim)}.lcd-name{font-family:var(--mono);font-size:22px;font-weight:400;color:var(--lcd-text);letter-spacing:1px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lcd-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.lcd-field{display:flex;flex-direction:column;align-items:center;gap:1px}.lcd-field-label{font-family:var(--mono);font-size:9px;color:var(--lcd-dim);text-transform:uppercase;letter-spacing:1px}.lcd-field-value{font-family:var(--mono);font-size:16px;color:var(--lcd-text)}.lcd-section{font-family:var(--mono);font-size:13px;color:var(--lcd-text);background:#1a28101f;padding:3px 10px;border-radius:3px;letter-spacing:.5px}.lcd-section-queued{font-family:var(--mono);font-size:10px;color:var(--lcd-dim)}.lcd-chord{font-family:var(--mono);font-size:16px;font-weight:400;color:var(--lcd-text);letter-spacing:.5px}.transport-row{display:flex;gap:8px;align-items:center}.hw-btn{font-family:var(--mono);font-size:11px;color:var(--text);background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:4px;padding:6px 12px;cursor:pointer;box-shadow:var(--raised);transition:all .08s;text-transform:uppercase;letter-spacing:.5px}.hw-btn:active{box-shadow:var(--inset);transform:translateY(1px)}.hw-btn.active{background:var(--btn-active);color:var(--btn-active-text);border-color:#4a5e2c}.bpm-control{display:flex;align-items:center;gap:0;background:var(--lcd-bg);border:1px solid #7a8a62;border-radius:6px;box-shadow:var(--inset);overflow:hidden}.bpm-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--btn-bg);border:none;border-right:1px solid #7a8a62;color:var(--text);font-family:var(--mono);font-size:18px;font-weight:400;cursor:pointer;transition:background .08s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bpm-btn:last-child{border-right:none;border-left:1px solid #7a8a62}.bpm-btn:active{background:var(--btn-active);color:var(--btn-active-text)}.bpm-value{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--lcd-text);min-width:40px;text-align:center;padding:0 4px}.play-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;border-radius:50%;background:var(--btn-bg);border:2px solid var(--btn-border);cursor:pointer;box-shadow:var(--raised);color:var(--text);transition:all .08s}.play-btn:active{box-shadow:var(--inset)}.play-btn.playing{background:var(--btn-active);color:var(--btn-active-text);border-color:#4a5e2c}.field-label{font-family:var(--mono);font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}.yep-select{font-family:var(--mono);font-size:11px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:4px;padding:4px 8px;color:var(--text);max-width:200px;box-shadow:var(--raised)}.section-panel{display:flex;flex-direction:column;gap:2px}.section-panel-label{font-family:var(--mono);font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;text-align:center;padding:4px 0 2px}.section-row{display:flex;gap:4px}.section-group{flex:1;display:flex;flex-direction:column;gap:2px}.section-group-label{font-family:var(--mono);font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;text-align:center}.section-btn{height:32px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--text);background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:3px;cursor:pointer;box-shadow:var(--raised);transition:all .08s;letter-spacing:.3px}.section-btn:active{box-shadow:var(--inset);transform:translateY(1px)}.section-btn.active{background:var(--btn-active);color:var(--btn-active-text);border-color:#4a5e2c;box-shadow:inset 0 0 6px #0003}.section-btn.queued{animation:hw-blink .35s steps(1) infinite}@keyframes hw-blink{0%,49%{background:var(--btn-active);color:var(--btn-active-text);border-color:#4a5e2c}50%,to{background:var(--btn-bg);color:var(--text);border-color:var(--btn-border)}}.channels-label{font-family:var(--mono);font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;text-align:center;margin-top:4px}.channel-strip-row{display:flex;gap:3px}.ch-strip{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:4px;padding:6px 2px;box-shadow:var(--raised);min-width:0}.vu-meter{display:flex;flex-direction:column;gap:1px;width:100%;padding:2px 3px;background:var(--lcd-bg);border-radius:3px;box-shadow:inset 1px 1px 2px #0003,inset -1px -1px 1px #ffffff1a;position:relative;overflow:hidden}.vu-meter:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);pointer-events:none;z-index:1}.vu-bar{height:3px;border-radius:1px;background:#1a281026;transition:background .06s;position:relative;z-index:0}.vu-bar.lit{background:var(--lcd-text);box-shadow:0 0 4px var(--lcd-glow)}.ch-icon{font-size:18px;line-height:1}.ch-name{font-family:var(--mono);font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ch-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:var(--border);border-radius:2px;outline:none}.ch-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text-dim);border:1px solid var(--btn-border);cursor:pointer}.ch-btn-row{display:flex;gap:2px;width:100%}.ch-sm-btn{flex:1;height:18px;border:1px solid var(--btn-border);border-radius:2px;background:var(--body);font-family:var(--mono);font-size:8px;font-weight:700;color:var(--text-dim);cursor:pointer;letter-spacing:.5px;transition:all .08s}.ch-sm-btn:active{box-shadow:var(--inset)}.mute-btn.active{background:var(--red);color:#fff;border-color:var(--red)}.solo-btn.active{background:var(--btn-active);color:var(--btn-active-text);border-color:#4a5e2c}.chord-panel{display:flex;flex-direction:column;gap:4px}.chord-types{display:flex;gap:3px}.chord-type-btn{flex:1;height:26px;font-family:var(--mono);font-size:10px;color:var(--text);background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:3px;cursor:pointer;box-shadow:var(--raised);transition:all .08s}.chord-type-btn:active{box-shadow:var(--inset)}.chord-type-btn.active{background:var(--btn-active);color:var(--btn-active-text);border-color:#4a5e2c}.chord-keys{display:flex;gap:2px;height:48px}.chord-key{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#e8e0cc;border:1px solid var(--btn-border);border-radius:0 0 4px 4px;cursor:pointer;transition:all .08s;min-width:0}.chord-key.black{background:var(--text);height:36px;align-self:flex-start}.chord-key.black .chord-key-note{color:#e8e0cc}.chord-key.black .chord-key-chord{color:#999}.chord-key:active{transform:translateY(1px)}.chord-key.active{background:var(--btn-active);border-color:#4a5e2c}.chord-key.active .chord-key-note{color:var(--btn-active-text)}.chord-key.active .chord-key-chord{color:#8a9a6c}.chord-key-note{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--text)}.chord-key-chord{font-family:var(--mono);font-size:7px;color:var(--text-dim)}.chord-hint{font-family:var(--mono);font-size:8px;color:var(--text-dim);text-align:center;letter-spacing:.3px}.dropzone{background:var(--lcd-bg);border-radius:6px;box-shadow:var(--inset);padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer}.dropzone:hover{background:#7e8e60}.dropzone-icon{font-size:28px;color:var(--lcd-dim)}.dropzone-text{font-family:var(--mono);font-size:12px;color:var(--lcd-text)}.dropzone-text strong{color:var(--lcd-text);text-decoration:underline}.dropzone-formats{font-family:var(--mono);font-size:9px;color:var(--lcd-dim);letter-spacing:1px}.library{background:var(--lcd-bg);border-radius:6px;box-shadow:var(--inset),0 0 0 2px #7a8a62;overflow:hidden}.library-header{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid #7a8a62;align-items:center}.library-search{flex:1;font-family:var(--mono);font-size:12px;color:var(--lcd-text);background:#1a281026;border:1px solid #6e7d5a;border-radius:4px;padding:5px 8px;outline:none}.library-search::placeholder{color:var(--lcd-dim)}.library-search:focus{border-color:var(--lcd-text)}.library-actions{display:flex;gap:4px}.library-scroll{max-height:320px;overflow-y:auto;padding:4px}.library-scroll::-webkit-scrollbar{width:6px}.library-scroll::-webkit-scrollbar-track{background:transparent}.library-scroll::-webkit-scrollbar-thumb{background:#6e7d5a;border-radius:3px}.library-collection{margin-bottom:4px}.library-collection-name{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--lcd-dim);text-transform:uppercase;letter-spacing:1px;padding:6px 8px 2px;position:sticky;top:0;background:var(--lcd-bg);z-index:1}.library-list{display:flex;flex-direction:column;gap:1px}.library-item{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#1a281014;border:1px solid transparent;border-radius:3px;cursor:pointer;transition:all .1s;text-align:left;width:100%}.library-item:hover{background:#1a281033;border-color:#6e7d5a}.library-item:active{box-shadow:var(--inset)}.library-item:disabled{opacity:.5;cursor:wait}.library-item-name{flex:1;font-family:var(--mono);font-size:12px;color:var(--lcd-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-item-meta{font-family:var(--mono);font-size:10px;color:var(--lcd-dim);white-space:nowrap}.error-bar{background:#a0302026;border:1px solid rgba(160,48,32,.4);border-radius:4px;padding:6px 12px;font-family:var(--mono);font-size:11px;color:var(--red)}.copyright{font-family:var(--mono);font-size:9px;color:var(--text-dim);text-align:center;padding:12px 0 4px;letter-spacing:.5px}.load-another{text-align:center;margin-top:4px}.load-another button{background:none;border:none;font-family:var(--mono);font-size:9px;color:var(--text-dim);cursor:pointer;letter-spacing:1px;text-transform:uppercase}.load-another button:hover{color:var(--text)}.reference{margin-top:24px;max-width:880px;margin-left:auto;margin-right:auto;padding:0 8px}.reference-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:#888;font-family:var(--mono);font-size:10px;letter-spacing:.5px;cursor:pointer;padding:12px 0}.reference-toggle:hover{color:#aaa}.reference-toggle-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1px solid #666;border-radius:2px;font-size:11px;color:#888;flex-shrink:0}.reference-body{padding-bottom:24px}.ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}.ref-card{background:#2a2a2a;border:1px solid #383838;padding:16px;color:#999;font-size:13px;line-height:1.6}.ref-card:first-child{border-radius:8px 0 0}.ref-card:nth-child(2){border-radius:0 8px 0 0}.ref-card:nth-last-child(2){border-radius:0 0 0 8px}.ref-card:last-child{border-radius:0 0 8px}.ref-card h3{font-family:var(--mono);font-size:11px;font-weight:600;color:#c8bea0;margin-bottom:8px;letter-spacing:.3px}.ref-card h4{font-family:var(--mono);font-size:10px;font-weight:600;color:#bbb;margin:10px 0 4px}.ref-card p{margin-bottom:6px;color:#888}.ref-card code{font-family:var(--mono);font-size:10px;color:#c8bea0;background:#1a1a1a;padding:1px 4px;border-radius:2px}.ref-dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12px}.ref-dl dt{font-family:var(--mono);font-size:10px;font-weight:600;color:#ccc;white-space:nowrap}.ref-dl dd{color:#888;font-size:11px}.ref-footer{margin-top:12px;padding:10px 14px;background:#222;border:1px solid #333;border-radius:6px;font-family:var(--mono);font-size:9px;color:#555;line-height:1.5}.ref-footer a{color:#c8bea0;text-decoration:none}.ref-footer a:hover{text-decoration:underline}.ref-parser{display:flex;flex-direction:column;gap:2px;margin-top:8px}.ref-wide{border-radius:0!important}.ref-parser .ref-wide:first-child{border-radius:8px 8px 0 0!important}.ref-parser .ref-wide:last-child{border-radius:0 0 8px 8px!important}.ref-hex{font-family:var(--mono);font-size:10px;line-height:1.7;color:#888;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:10px 14px;overflow-x:auto;margin:6px 0;white-space:pre}@media (max-width: 640px){.panel-body{margin:8px;padding:10px 12px 14px}.section-row,.channel-strip-row{flex-wrap:wrap}.ch-strip{min-width:calc(25% - 3px)}.ref-grid{grid-template-columns:1fr}.ref-card{border-radius:0!important}}