@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap);:root{--bg:#1a1a1a;--surface:#242424;--surface-2:#2e2e2e;--surface-3:#383838;--border:#3a3a3a;--accent:#f0c040;--accent-dim:#c49a20;--text:#e8e4d8;--text-dim:#8a8680;--text-muted:#5a5652;--raw-bg:#1e2430;--raw-border:#2a3a50;--edit-bg:#1a2820;--edit-border:#2a4432;--sheet-bg:#faf8f0;--sheet-text:#1a1a1a;--radius:6px;--radius-lg:10px}*{box-sizing:border-box;margin:0;padding:0}body{display:flex;justify-content:center;background:#1a1a1a;background:var(--bg);min-height:100vh;font-family:"IBM Plex Sans",sans-serif;color:#e8e4d8;color:var(--text)}#root{max-width:900px;width:100%;padding:32px 24px 48px}.app-header{display:flex;align-items:center;justify-content:space-between;grid-gap:20px;gap:20px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #3a3a3a;border-bottom:1px solid var(--border);flex-wrap:wrap}.app-header-title{display:flex;align-items:baseline;grid-gap:12px;gap:12px}.app-header h1{font-size:22px;font-weight:600;color:#f0c040;color:var(--accent);letter-spacing:.05em}.app-header h1,.app-subtitle{font-family:"IBM Plex Mono",monospace}.app-subtitle{font-size:12px;color:#5a5652;color:var(--text-muted)}.app-credits{display:flex;flex-direction:column;align-items:flex-end;grid-gap:3px;gap:3px}.credits-line{font-family:"IBM Plex Mono",monospace;font-size:10px;color:#5a5652;color:var(--text-muted);text-align:right;line-height:1.4}.credits-line strong{color:#8a8680;color:var(--text-dim);font-weight:600}.credits-link{color:#c49a20;color:var(--accent-dim);text-decoration:none;transition:color .15s}.credits-link:hover{color:#f0c040;color:var(--accent);text-decoration:underline}.controls{background:#242424;background:var(--surface);border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:10px;border-radius:var(--radius-lg);padding:20px;margin-bottom:24px;display:flex;flex-direction:column;grid-gap:16px;gap:16px}.section-label{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5a5652;color:var(--text-muted);margin-bottom:6px}.textarea-row{display:flex;grid-gap:12px;gap:12px}.textarea-box{flex:1 1;min-width:0}.edit-textarea,.raw-textarea{width:100%;font-family:"IBM Plex Mono",monospace;font-size:12px;padding:10px 12px;border-radius:6px;border-radius:var(--radius);outline:none;resize:vertical;line-height:1.5;transition:border-color .15s;color:#e8e4d8;color:var(--text)}.raw-textarea{background:#1e2430;background:var(--raw-bg);border:1px solid #2a3a50;border:1px solid var(--raw-border);min-height:120px}.raw-textarea:focus{border-color:#4a7ab0}.edit-textarea{background:#1a2820;background:var(--edit-bg);border:1px solid #2a4432;border:1px solid var(--edit-border);min-height:120px}.edit-textarea:focus{border-color:#4a9060}textarea::-webkit-input-placeholder{color:#5a5652;color:var(--text-muted)}textarea:-ms-input-placeholder{color:#5a5652;color:var(--text-muted)}textarea::-ms-input-placeholder{color:#5a5652;color:var(--text-muted)}textarea::placeholder{color:#5a5652;color:var(--text-muted)}.devtools-hint{background:#2e2e2e;background:var(--surface-2);border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;grid-gap:10px;gap:10px}.devtools-hint code{flex:1 1;color:#8a8680;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis}.btn,.devtools-hint code{font-family:"IBM Plex Mono",monospace;font-size:11px;white-space:nowrap}.btn{font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:none;border-radius:6px;border-radius:var(--radius);padding:9px 16px;cursor:pointer;transition:opacity .15s,transform .1s}.btn:active{transform:scale(.97)}.btn-primary{background:#f0c040;background:var(--accent);color:#1a1a1a}.btn-primary:hover{opacity:.88}.btn-secondary{background:#383838;background:var(--surface-3);color:#e8e4d8;color:var(--text);border:1px solid #3a3a3a;border:1px solid var(--border)}.btn-secondary:hover{background:#2e2e2e;background:var(--surface-2);border-color:#5a5652;border-color:var(--text-muted)}.btn-ghost{background:transparent;color:#5a5652;color:var(--text-muted);border:1px solid #3a3a3a;border:1px solid var(--border)}.btn-ghost:hover{color:#e8e4d8;color:var(--text);border-color:#5a5652;border-color:var(--text-muted)}.btn-copy{background:#383838;background:var(--surface-3);color:#6ab0e0;border:1px solid #2a3a50;border:1px solid var(--raw-border);flex-shrink:0}.btn-copy:hover{background:#1e2430;background:var(--raw-bg);border-color:#4a7ab0}.btn-copy.copied{color:#60c080;border-color:#2a5a3a}.button-row{display:flex;grid-gap:8px;gap:8px;flex-wrap:wrap;align-items:center}.layout-toggle{display:flex;grid-gap:3px;gap:3px;background:#2e2e2e;background:var(--surface-2);border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius);padding:3px}.layout-btn{display:flex;align-items:center;grid-gap:5px;gap:5px;background:transparent;border:none;border-radius:4px;padding:5px 10px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:#5a5652;color:var(--text-muted);transition:background .15s,color .15s;white-space:nowrap}.layout-btn:hover{color:#8a8680;color:var(--text-dim)}.layout-btn.active{background:#383838;background:var(--surface-3);color:#f0c040;color:var(--accent)}.pdf-settings-row{display:flex;grid-gap:20px;gap:20px;align-items:center;flex-wrap:wrap}.pdf-setting-group{display:flex;align-items:center;grid-gap:8px;gap:8px}.pdf-setting-label{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#8a8680;color:var(--text-dim);white-space:nowrap}.transpose-row{display:flex;align-items:center;grid-gap:12px;gap:12px;flex-wrap:wrap}.transpose-label{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8a8680;color:var(--text-dim);min-width:100px;flex-shrink:0}.transpose-label span{color:#f0c040;color:var(--accent);font-weight:600}.transpose-slider{flex:1 1;min-width:120px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:#383838;background:var(--surface-3);border-radius:2px;outline:none}.transpose-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#f0c040;background:var(--accent);cursor:pointer;border:2px solid #1a1a1a;border:2px solid var(--bg);-webkit-transition:transform .1s;transition:transform .1s}.transpose-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.key-display{font-family:"IBM Plex Mono",monospace;font-size:11px;display:flex;align-items:center;grid-gap:6px;gap:6px;white-space:nowrap}.key-display--active{color:#c49a20;color:var(--accent-dim)}.key-display--active strong{color:#f0c040;color:var(--accent);font-weight:600}.options-row{grid-gap:20px;gap:20px;flex-wrap:wrap}.options-group,.options-row{display:flex;align-items:flex-start}.options-group{flex-direction:column;grid-gap:8px;gap:8px}.options-group>label{font-size:12px;color:#8a8680;color:var(--text-dim);font-family:"IBM Plex Mono",monospace}.radio-group{grid-gap:12px;gap:12px;flex-wrap:wrap}.radio-group,.radio-option{display:flex;align-items:center}.radio-option{grid-gap:5px;gap:5px;cursor:pointer}.radio-option input[type=radio]{accent-color:#f0c040;accent-color:var(--accent);cursor:pointer}.radio-option span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#8a8680;color:var(--text-dim)}.key-selector{display:flex;align-items:center;grid-gap:10px;gap:10px;flex-wrap:wrap}.key-transposed-note{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#5a5652;color:var(--text-muted)}.key-transposed-note strong{color:#f0c040;color:var(--accent)}.style-select{background:#2e2e2e;background:var(--surface-2);border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius);padding:7px 10px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#8a8680;color:var(--text-dim);outline:none;cursor:pointer}.style-select:focus{border-color:#c49a20;border-color:var(--accent-dim)}.checkbox-option{display:flex;align-items:center;grid-gap:6px;gap:6px;cursor:pointer;margin-top:4px}.checkbox-option input[type=checkbox]{accent-color:#f0c040;accent-color:var(--accent);cursor:pointer;width:14px;height:14px}.checkbox-option span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#8a8680;color:var(--text-dim)}.divider{height:1px;background:#3a3a3a;background:var(--border);margin:4px 0}.sheet-wrapper{border-radius:10px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid #d8d4c8;transition:background .2s,border-color .2s}.sheet-light{background:#faf8f0;border-color:#d8d4c8}.sheet-dark{background:#1e1e1e;border-color:#3a3a3a}.sheet-toolbar{display:flex;align-items:center;grid-gap:16px;gap:16px;padding:8px 16px;flex-wrap:wrap}.sheet-light .sheet-toolbar{background:#edeae0;border-bottom:1px solid #d8d4c8}.sheet-dark .sheet-toolbar{background:#2a2a2a;border-bottom:1px solid #3a3a3a}.sheet-mode-toggle{display:flex;align-items:center;grid-gap:6px;gap:6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sheet-mode-opt,.sheet-mode-sep{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#888}.sheet-mode-opt{transition:color .15s}.sheet-mode-opt.active{color:#f0c040;color:var(--accent);font-weight:600}.chord-color-picker{display:flex;align-items:center;grid-gap:7px;gap:7px;flex-wrap:wrap}.chord-color-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#888}.color-swatch{width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s;padding:0;flex-shrink:0}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:#f0c040;border-color:var(--accent);transform:scale(1.15)}.chord-color-hash{color:#888;margin-left:2px}.chord-color-hash,.chord-hex-input{font-family:"IBM Plex Mono",monospace;font-size:11px}.chord-hex-input{width:58px;background:transparent;border:1px solid #888;border-radius:3px;padding:2px 5px;outline:none;text-transform:uppercase}.sheet-light .chord-hex-input{color:#333}.sheet-dark .chord-hex-input{color:#ccc;border-color:#555}.sheet-header{padding:12px 20px;display:flex;flex-direction:column;grid-gap:3px;gap:3px}.sheet-light .sheet-header{background:#f0ece0;border-bottom:1px solid #d8d4c8}.sheet-dark .sheet-header{background:#252525;border-bottom:1px solid #3a3a3a}.sheet-artist-input,.sheet-song-input{background:transparent;border:none;outline:none;font-family:"IBM Plex Mono",monospace;width:100%}.sheet-light .sheet-artist-input,.sheet-light .sheet-song-input{color:#1a1a1a}.sheet-dark .sheet-artist-input,.sheet-dark .sheet-song-input{color:#e8e4d8}.sheet-song-input{font-size:18px;font-weight:600}.sheet-artist-input{font-size:13px}.sheet-light .sheet-artist-input{color:#5a5652}.sheet-dark .sheet-artist-input{color:#8a8680}.sheet-artist-input::-webkit-input-placeholder,.sheet-song-input::-webkit-input-placeholder{color:#b0aaa0}.sheet-artist-input:-ms-input-placeholder,.sheet-song-input:-ms-input-placeholder{color:#b0aaa0}.sheet-artist-input::-ms-input-placeholder,.sheet-song-input::-ms-input-placeholder{color:#b0aaa0}.sheet-artist-input::placeholder,.sheet-song-input::placeholder{color:#b0aaa0}.sheet-pages{padding:0}.sheet-empty{padding:32px 20px;font-family:"IBM Plex Mono",monospace;font-size:12px;text-align:center}.sheet-light .sheet-empty{color:#b0aaa0}.sheet-dark .sheet-empty{color:#4a4a4a}.sheet-page{padding:16px 20px 0}.page-badge{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.sheet-light .page-badge{color:#b0aaa0}.sheet-dark .page-badge{color:#5a5652}.sheet-bottom-pad{height:24px}.page-content{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:17px}.sheet-light .page-content{color:#1a1a1a}.sheet-dark .page-content{color:#d8d4c8}.page-content.two-col{display:flex;grid-gap:0;gap:0}.page-col{flex:1 1;min-width:0;overflow:hidden}.sheet-light .col-divider{background:#d8d4c8}.sheet-dark .col-divider{background:#3a3a3a}.col-divider{width:1px;margin:0 20px;flex-shrink:0}.chord-line{white-space:pre;line-height:17px}.chord-token{font-weight:600}.page-break-marker{display:flex;align-items:center;grid-gap:10px;gap:10px;margin:14px 0 0;padding-bottom:14px}.sheet-light .page-break-marker{border-bottom:1px dashed #c8c4b8}.sheet-dark .page-break-marker{border-bottom:1px dashed #3a3a3a}.page-break-marker:after,.page-break-marker:before{content:"";flex:1 1;height:1px}.sheet-light .page-break-marker:after,.sheet-light .page-break-marker:before{background:#d8d4c8}.sheet-dark .page-break-marker:after,.sheet-dark .page-break-marker:before{background:#3a3a3a}.page-break-marker span{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase}.sheet-light .page-break-marker span{color:#b0aaa0}.sheet-dark .page-break-marker span{color:#4a4a4a}.capo-row{grid-gap:10px;gap:10px}.capo-btn,.capo-row{display:flex;align-items:center}.capo-btn{width:28px;height:28px;background:#383838;background:var(--surface-3);border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius);color:#e8e4d8;color:var(--text);font-size:16px;line-height:1;cursor:pointer;justify-content:center;transition:background .15s,color .15s;flex-shrink:0}.capo-btn:hover:not(:disabled){background:#2e2e2e;background:var(--surface-2);border-color:#5a5652;border-color:var(--text-muted)}.capo-btn:disabled{opacity:.3;cursor:not-allowed}.capo-value{font-size:12px;font-weight:600;color:#f0c040;color:var(--accent);min-width:68px;text-align:center}.capo-key-reminder,.capo-value{font-family:"IBM Plex Mono",monospace}.capo-key-reminder{font-size:10px;color:#e0a040;background:rgba(224,160,64,.1);border:1px solid rgba(224,160,64,.3);border-radius:4px;padding:4px 8px;margin-top:6px;display:block}.capo-key-reminder em{font-style:italic;color:#f0c040;color:var(--accent)}.snippet-code{flex:1 1;font-family:"IBM Plex Mono",monospace;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.5}.snip-keyword{color:#569cd6}.snip-fn{color:#dcdcaa}.snip-obj,.snip-prop{color:#9cdcfe}.snip-var{color:#4fc1ff}.snip-str{color:#ce9178}.snip-op{color:#d4d4d4}.snip-paren{color:gold}.instructions-panel{margin-bottom:16px;border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:10px;border-radius:var(--radius-lg);overflow:hidden}.instructions-toggle{width:100%;display:flex;align-items:center;grid-gap:8px;gap:8px;background:#242424;background:var(--surface);border:none;padding:12px 16px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:#8a8680;color:var(--text-dim);text-align:left;transition:background .15s,color .15s}.instructions-toggle:hover{background:#2e2e2e;background:var(--surface-2);color:#e8e4d8;color:var(--text)}.instructions-icon{color:#f0c040;color:var(--accent);font-size:11px;flex-shrink:0}.instructions-badge{margin-left:auto;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5a5652;color:var(--text-muted);background:#383838;background:var(--surface-3);border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:3px;padding:2px 6px}.instructions-body{background:#242424;background:var(--surface);border-top:1px solid #3a3a3a;border-top:1px solid var(--border);padding:16px 20px 20px}.instructions-list{list-style:none;counter-reset:instr-counter;display:flex;flex-direction:column;grid-gap:10px;gap:10px;margin:0;padding:0}.instructions-list li{counter-increment:instr-counter;display:flex;grid-gap:12px;gap:12px;font-family:"IBM Plex Sans",sans-serif;font-size:12px;color:#8a8680;color:var(--text-dim);line-height:1.5}.instructions-list li:before{content:counter(instr-counter);font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;color:#f0c040;color:var(--accent);background:#383838;background:var(--surface-3);border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:3px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.instructions-list strong{color:#e8e4d8;color:var(--text);font-weight:600}.instructions-list em{font-style:italic;color:#c49a20;color:var(--accent-dim)}.instr-code{border:1px solid #3a3a3a;border:1px solid var(--border);border-radius:3px;color:#8a8680;color:var(--text-dim)}.instr-code,kbd{font-family:"IBM Plex Mono",monospace;font-size:10px;background:#383838;background:var(--surface-3);padding:1px 5px}kbd{border:1px solid #3a3a3a;border:solid var(--border);border-width:1px 1px 2px;border-radius:3px;color:#e8e4d8;color:var(--text)}