.app-main{max-width:1400px;margin:0 auto;padding:64px 5% 120px}.page-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}.page-title{font-size:1.75rem;font-weight:500;letter-spacing:2px;margin:0;color:var(--text-heading, #1a1a1a)}.page-meta{font-family:Roboto Mono,monospace;font-size:.75rem;color:var(--text-muted, #777777);letter-spacing:2px;text-transform:uppercase}.page-divider{height:1px;background-color:var(--border-light, #ededed)}.section-divider{margin-top:24px;margin-bottom:0}.page-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:18px 0 0;flex-wrap:wrap}.page-actions-btn-row{display:flex;align-items:center;gap:10px;flex:1 1 100%;justify-content:flex-end}.page-actions .action-btn-black{height:40px;padding:0 18px;font-size:.95rem}.speed-control{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#212126;font-size:1rem;font-family:"Noto Serif SC",serif;user-select:none;transition:border-color .15s ease,box-shadow .15s ease}.speed-control:focus-within{border-color:#151718;box-shadow:0 0 0 3px #1517180f}.speed-control-label{font-weight:500;white-space:nowrap;color:#212126}.speed-control input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:4px;background:#e5e7eb;border-radius:999px;outline:none;cursor:pointer;margin:0}.speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#151718;border:none;cursor:pointer}.speed-control input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#151718;border:none;cursor:pointer}.speed-control input[type=range]::-moz-range-track{background:#e5e7eb;border-radius:999px;height:4px}.speed-control-value{font-variant-numeric:tabular-nums;min-width:64px;text-align:right;color:#4a4d52}.controls-section{padding:0 0 24px;display:flex;flex-direction:column;align-items:center;gap:16px}.controls-row{display:flex;align-items:center;gap:16px;width:100%;max-width:800px}.select-input{flex:1;height:40px;padding:0 14px;border:1px solid var(--border-input, #e5e7eb);border-radius:8px;background-color:#fff;font-family:"Noto Serif SC",serif;font-size:16px;color:var(--text-main, #212126);outline:none;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23212126%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 14px top 50%;background-size:10px auto}.select-input:focus{border-color:var(--btn-bg, #151718);box-shadow:0 0 0 3px #1517180f}.select-input:disabled{background-color:#f9fafb;color:#6b7280;cursor:not-allowed}.select-wrapper{position:relative;display:flex;align-items:center;flex:1 1 0;min-width:0}.select-label{position:absolute;left:14px;font-size:.85rem;font-family:"Noto Serif SC",serif;pointer-events:none;transition:opacity .2s;white-space:nowrap}.select-input.has-label{padding-left:100px}.action-btn-black{height:40px;padding:0 22px;border:none;border-radius:8px;background-color:#151718;color:#fff;font-family:"Noto Serif SC",serif;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap}.action-btn-black:hover:not(:disabled){background-color:#2c3033}.action-btn-black:active:not(:disabled){background-color:#000}.action-btn-black:disabled{opacity:.6;cursor:not-allowed}.action-btn-black.is-toggle-active{height:34px;padding:0 15px;background-color:#f0b90b;color:#1a1a1a;border:1px solid #f0b90b;box-shadow:0 4px 14px #f0b90b2e;box-sizing:border-box}.action-btn-black.is-toggle-active:hover:not(:disabled){background-color:#d8a409;border-color:#d8a409}.action-btn-black.is-toggle-active:active:not(:disabled){background-color:#b88a00;border-color:#b88a00}.page-actions .action-btn-black.is-toggle-active{height:40px;padding:0 17px}#playSelectedBtn.is-playing{background-color:#1e3a8a;color:#fff;border-color:#1e3a8a;box-shadow:0 4px 14px #1e3a8a38}#playSelectedBtn.is-playing:hover:not(:disabled){background-color:#1a3375;border-color:#1a3375}#playSelectedBtn.is-playing:active:not(:disabled){background-color:#15265c;border-color:#15265c}.status-toast{width:100%;padding:10px 14px;border-radius:8px;font-size:.85rem;font-family:"Noto Serif SC",serif;border:1px solid transparent;transition:all .3s ease}.status-toast[data-tone=loading]{background-color:#fefce8;color:#a16207;border-color:#fef08a}.status-toast[data-tone=success]{background-color:#f0fdf4;color:#15803d;border-color:#bbf7d0}.status-toast[data-tone=error]{background-color:#fef2f2;color:#b91c1c;border-color:#fecaca}.fretboard-scroll-wrapper{width:100%;overflow-x:auto;padding-top:18px;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:#000000 transparent}.fretboard-scroll-wrapper::-webkit-scrollbar{height:6px}.fretboard-scroll-wrapper::-webkit-scrollbar-thumb{background-color:#000;border-radius:3px}.fretboard-container{position:relative;background-color:#212325;border-radius:6px;padding-top:10px;padding-bottom:10px;box-shadow:0 10px 30px #00000014;border:1px solid #e5e7eb;width:1200px;user-select:none}.fret-markers{position:absolute;inset:0 0 0 50px;display:grid;grid-template-columns:repeat(24,1fr);pointer-events:none;z-index:1}.marker{display:flex;justify-content:center;align-items:center}.dot{width:18px;height:18px;background-color:#ffffff26;border-radius:50%}.double-dot{display:flex;flex-direction:column;gap:103px}.fretboard{display:grid;grid-template-columns:50px repeat(24,1fr);grid-template-rows:repeat(6,40px);position:relative;z-index:1}.note-cell{position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer}.note-cell:before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background-color:#9ca3af;z-index:1;pointer-events:none}.fretboard>div:nth-child(n+1):nth-child(-n+25):before{height:1px}.fretboard>div:nth-child(n+26):nth-child(-n+50):before{height:1.2px}.fretboard>div:nth-child(n+51):nth-child(-n+75):before{height:1.5px}.fretboard>div:nth-child(n+76):nth-child(-n+100):before{height:2px}.fretboard>div:nth-child(n+101):nth-child(-n+125):before{height:2.5px}.fretboard>div:nth-child(n+126):nth-child(-n+150):before{height:3px}.note-cell:not(:nth-child(25n+1)):after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background-color:#45494d;z-index:2;pointer-events:none}.note-cell:nth-child(25n+1):after{content:"";position:absolute;right:0;top:0;bottom:0;width:5px;background-color:#d1d5db;z-index:2;pointer-events:none}.note-circle{width:24px;height:24px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-family:Roboto Mono,monospace;font-size:11px;font-weight:500;opacity:0;transition:all .15s ease;background-color:#212126;color:#fff;position:relative;z-index:3}.note-cell:nth-child(25n+1) .note-circle{opacity:1;background-color:transparent;color:#9ca3af}.note-cell:hover .note-circle{opacity:1;transform:scale(1.1);background-color:#4b5563;color:#fff}.note-cell.active .note-circle{opacity:1;transform:scale(1.2);background-color:#fff;color:#212126;box-shadow:0 0 0 3px #fff3;font-weight:600}.note-cell:nth-child(25n+1).active .note-circle{background-color:#212126;color:#fff}.note-cell.emphasized .note-circle{opacity:1;transform:scale(1.2);background-color:#f0b90b;color:#1a1a1a;font-weight:600;box-shadow:0 0 0 3px #f0b90b47,0 4px 14px #f0b90b59}.note-cell.emphasized:hover .note-circle{background-color:#d8a409;color:#1a1a1a}.note-cell:nth-child(25n+1).emphasized .note-circle{background-color:#f0b90b;color:#1a1a1a}.note-cell.muted .note-circle{opacity:1;transform:scale(1.1);background-color:#4b5563;color:#fff;box-shadow:none}.note-cell.muted .note-circle .note-icon-x{display:inline-block}.note-cell.muted .note-circle .note-name{display:none}.note-cell.muted:hover .note-circle{background-color:#4b5563;color:#fff}.note-cell:nth-child(25n+1).muted .note-circle{background-color:#4b5563;color:#fff}.note-cell.string-silenced .note-circle{opacity:.35}.note-cell.string-silenced:hover .note-circle{opacity:.35;transform:none;background-color:#212126}.note-cell.playing .note-circle{transform:scale(1.25);box-shadow:0 0 0 4px #ffffff40,0 4px 16px #fff3}.note-cell.emphasized.playing .note-circle{box-shadow:0 0 0 4px #f0b90b59,0 4px 16px #f0b90b66}.note-icon-x{display:none;width:14px;height:14px}.fret-numbers{display:grid;grid-template-columns:50px repeat(24,1fr);width:1200px;margin-top:12px;text-align:center;font-family:Roboto Mono,monospace;color:#9ca3af;font-size:11px}.chart-library{width:100%;margin:24px 0 0;padding:24px;background-color:#fff;border:1px solid var(--border-light, #ededed);border-radius:12px;box-sizing:border-box}.chart-library-header{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--border-light, #ededed);margin-bottom:16px}.chart-library-title{font-size:1.25rem;font-weight:500;letter-spacing:1px;margin:0;color:var(--text-heading, #1a1a1a)}.chart-library-hint{font-family:Roboto Mono,monospace;font-size:.75rem;color:var(--text-muted, #777777);letter-spacing:1px;align-self:flex-end;padding-bottom:4px}.chart-library-spacer{flex:1}.chart-library-action{height:34px;padding:0 14px;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;line-height:1}.chart-library-gate{padding:32px 16px;text-align:center;color:var(--text-muted, #777777);font-size:.95rem;background-color:#fafafa;border-radius:8px}.chart-library-body{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}.folder-list{min-width:0}.folder-list-items{display:flex;flex-direction:column;gap:6px}.folder-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background-color .15s ease;font-size:.9rem;color:var(--text-main, #212126);border:1px solid transparent;background-color:transparent;position:relative;user-select:none}.folder-item-handle{flex-shrink:0;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;cursor:grab;opacity:.35;transition:opacity .15s ease;line-height:0}.folder-item:hover .folder-item-handle{opacity:.7}.folder-item-handle:active{cursor:grabbing}.folder-item-handle svg{width:12px;height:12px;display:block}.folder-item.is-dragging{opacity:.4;cursor:grabbing}.folder-item.is-drag-over-top{border-top:2px solid #151718;padding-top:9px}.folder-item.is-drag-over-bottom{border-bottom:2px solid #151718;padding-bottom:9px}.folder-item:hover{background-color:#f5f5f5}.folder-item.is-selected{background-color:#151718;color:#fff}.folder-item.is-selected .folder-item-count{color:#ffffffb3}.folder-item-name{flex:1;word-break:break-word;font-family:"Noto Serif SC",serif}.folder-item-count{font-family:Roboto Mono,monospace;font-size:.75rem;color:var(--text-muted, #777777);flex-shrink:0}.folder-item-edit{border:none;background:transparent;color:inherit;cursor:pointer;padding:0 4px;opacity:.5;transition:opacity .15s ease;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:0}.folder-item-edit svg{width:12px;height:12px;display:block}.folder-item-edit:hover{opacity:1}.folder-item-share{border:none;background:transparent;color:inherit;cursor:pointer;padding:0 4px;opacity:.5;transition:opacity .15s ease;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:0}.folder-item-share svg{width:12px;height:12px;display:block}.folder-item-share:hover{opacity:1}.folder-item-merge{border:none;background:transparent;color:inherit;cursor:pointer;padding:0 4px;opacity:.5;transition:opacity .15s ease;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:0}.folder-item-merge svg{width:12px;height:12px;display:block}.folder-item-merge:hover{opacity:1}.chart-grid-wrap{min-width:0}.chart-grid-empty{padding:32px 16px;text-align:center;color:var(--text-muted, #777777);font-size:.9rem;background-color:#fafafa;border-radius:8px}.chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.chart-card{background-color:#fff;border:1px solid var(--border-light, #ededed);border-radius:10px;padding:10px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;display:flex;flex-direction:column;gap:8px;position:relative;user-select:none}.chart-card.is-dragging{opacity:.4;cursor:grabbing}.chart-card.is-drag-over-top{box-shadow:inset 0 3px #151718}.chart-card.is-drag-over-bottom{box-shadow:inset 0 -3px #151718}.chart-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000014;border-color:#d1d5db}.chart-card-preview{background-color:#212325;border-radius:6px;height:72px;position:relative;overflow:hidden}.chart-card-preview svg{position:absolute;inset:0;display:block}.chart-card-preview svg .fret-line{stroke:#ffffff59;stroke-width:.4}.chart-card-preview svg .nut{stroke:#ffffff8c;stroke-width:.6}.chart-card-preview svg .string{stroke:#ffffff40;stroke-width:.35}.chart-card-preview svg .note{fill:#fff}.chart-card-preview svg .note-emph{fill:#f0b90b}.chart-card-preview .badge-dynamic{position:absolute;inset:0;margin:auto;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#ffffffeb;color:#212325;font-size:16px;line-height:1;pointer-events:none;box-shadow:0 2px 6px #00000059}.chart-card-info{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.chart-card-name{font-size:.9rem;color:var(--text-main, #212126);font-family:"Noto Serif SC",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.chart-card-edit{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;border-radius:50%;background-color:#0000008c;color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:0}.chart-card-edit svg{width:11px;height:11px;display:block}.chart-card:hover .chart-card-edit{display:inline-flex}.chart-card-edit:hover{background-color:#000c}.save-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}.save-modal .action-btn-black{width:auto;flex:0 0 auto}.save-modal-backdrop{position:absolute;inset:0;background-color:#00000073}.save-modal-card{position:relative;background-color:#fff;border-radius:12px;padding:24px;width:min(420px,calc(100% - 32px));box-shadow:0 20px 60px #00000040;display:flex;flex-direction:column;gap:10px;z-index:1}.save-modal-title{margin:0 0 4px;font-size:1.15rem;font-weight:500;color:var(--text-heading, #1a1a1a)}.save-modal-label{font-size:.85rem;color:var(--text-muted, #777777);font-family:"Noto Serif SC",serif;margin-top:4px}.save-modal-input{width:100%;height:40px;padding:0 14px;border:1px solid var(--border-input, #e5e7eb);border-radius:8px;background-color:#fff;font-family:"Noto Serif SC",serif;font-size:.95rem;color:var(--text-main, #212126);outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}.save-modal-input:focus{border-color:var(--btn-bg, #151718);box-shadow:0 0 0 3px #1517180f}.save-modal-folder-row{display:flex;gap:8px;align-items:stretch}.save-modal-folder-row .save-modal-input{flex:1}.save-modal-new-folder-btn{height:40px;padding:0 14px;font-size:.85rem;white-space:nowrap;width:auto;flex:0 0 auto}.save-modal-error{padding:8px 12px;border-radius:6px;background-color:#fef2f2;color:#b91c1c;border:1px solid #fecaca;font-size:.85rem}.save-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.save-modal-actions--split{justify-content:space-between;align-items:center}.save-modal-actions-right{display:flex;gap:10px;align-items:center}.save-modal-delete-btn{height:40px;padding:0 22px;font-size:1rem;font-weight:500}.save-modal-cancel-btn{background-color:#fff;color:var(--text-main, #212126);border:1px solid var(--border-input, #e5e7eb);width:auto;flex:0 0 auto}.save-modal-cancel-btn:hover:not(:disabled){background-color:#f5f5f5;color:var(--text-main, #212126)}.save-modal-card--confirm{width:min(380px,calc(100% - 32px))}.save-modal-body{margin:0 0 4px;font-size:.92rem;line-height:1.6;color:var(--text-main, #212126)}.save-modal-confirm-btn--danger{background-color:#b91c1c}.save-modal-confirm-btn--danger:hover:not(:disabled){background-color:#991b1b}.save-modal-confirm-btn--danger:active:not(:disabled){background-color:#7f1d1d}.share-link-row{display:flex;gap:8px;margin:8px 0 6px;align-items:stretch}.share-link-input{flex:1;min-width:0;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.85rem;color:var(--text-main, #212126);background-color:#f8fafc;cursor:text}.share-link-copy-btn{flex:0 0 auto;width:auto;min-width:80px;height:42px;padding:0 18px}.share-modal-open-btn,.save-modal-open-btn{height:40px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:500}.action-btn-black.save-modal-open-btn{background-color:#fff;color:#212126;border:1px solid #e5e7eb}.action-btn-black.save-modal-open-btn:hover:not(:disabled){background-color:#f5f5f5;color:#212126}.action-btn-black.save-modal-open-btn:active:not(:disabled){background-color:#ececec;color:#212126}@media(max-width:768px){.app-main{padding:40px 5% 80px}.controls-row{flex-direction:column;align-items:stretch}.action-btn-black{width:100%}.page-actions{flex-wrap:wrap;gap:8px}.page-actions>.select-wrapper{flex:1 1 100%;min-width:0}.page-actions-spacer{display:none}.page-actions>.action-btn-black{flex:1 1 calc(33.33% - 6px);min-width:0;height:38px;padding:0 8px;font-size:.85rem}.page-actions-btn-row{flex:1 1 100%;gap:8px;flex-wrap:wrap}.page-actions-btn-row>.action-btn-black{flex:1 1 calc(33.33% - 6px);min-width:0;height:38px;padding:0 8px;font-size:.85rem}#highlightModeBtn{flex:0 0 100%}.speed-control{flex:1 1 100%;justify-content:space-between;height:38px;padding:0 12px}.speed-control input[type=range]{width:60%}.chart-library-body{grid-template-columns:1fr}.chart-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.chart-card-preview{height:60px}.chart-library-action{width:auto;flex:0 0 auto;align-self:center}}