:root{--cc-bg:#08090b;--cc-card:#111318;--cc-card-hover:#1a1d24;--cc-border:#ffffff14;--cc-text:#f5f0e8;--cc-text-secondary:#a6a3a0;--cc-text-muted:#77736c;--cc-gold:#d9a441;--cc-gold-dim:#d9a44126;--cc-string:#b8b3aa;--cc-fret:#555;--cc-diagram-text:#f5f0e8;--cc-shadow:0 4px 20px #0000004d;--cc-radius:14px}body.light-mode .cc-page,.light-mode .cc-page{--cc-bg:#f7f4ee;--cc-card:#fff;--cc-card-hover:#faf7f2;--cc-border:#e7e1d8;--cc-text:#191919;--cc-text-secondary:#66635f;--cc-text-muted:#8a8680;--cc-gold:#c88a32;--cc-gold-dim:#c88a321f;--cc-string:#666;--cc-fret:#ccc;--cc-diagram-text:#191919;--cc-shadow:0 4px 16px #0000000f}.cc-page{background:var(--cc-bg);min-height:100vh;color:var(--cc-text)}.cc-container{max-width:1100px;margin:0 auto;padding:0 1.5rem}.cc-hero{text-align:center;padding:2.5rem 0 1.5rem}.cc-title{color:var(--cc-text);margin:0 0 .5rem;font-family:Dancing Script,cursive;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:500}.cc-subtitle{color:var(--cc-text-secondary);margin:0;font-family:Inter,sans-serif;font-size:.85rem}.cc-filters{padding:0 0 1.5rem}.cc-search-wrap{margin-bottom:1rem;position:relative}.cc-search-icon{color:var(--cc-text-muted);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.cc-search{background:var(--cc-card);border:1px solid var(--cc-border);width:100%;color:var(--cc-text);border-radius:12px;outline:none;padding:.75rem 1rem .75rem 2.8rem;font-family:DM Sans,sans-serif;font-size:.9rem;transition:border-color .2s}.cc-search:focus{border-color:var(--cc-gold)}.cc-search::placeholder{color:var(--cc-text-muted)}.cc-categories{flex-wrap:wrap;gap:.4rem;display:flex}.cc-cat-btn{border:1px solid var(--cc-border);background:var(--cc-card);color:var(--cc-text-secondary);cursor:pointer;border-radius:8px;padding:.4rem .9rem;font-family:DM Sans,sans-serif;font-size:.78rem;font-weight:600;transition:all .2s}.cc-cat-btn:hover{border-color:var(--cc-gold);color:var(--cc-gold)}.cc-cat-btn.active{background:var(--cc-gold);color:#1a1a1a;border-color:var(--cc-gold)}.cc-grid-section{padding-bottom:2rem}.cc-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem;display:grid}.cc-card{background:var(--cc-card);border:1px solid var(--cc-border);text-align:center;cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:.4rem;padding:1rem .5rem .75rem;transition:all .2s;display:flex}.cc-card:hover{border-color:var(--cc-gold);background:var(--cc-card-hover);box-shadow:var(--cc-shadow);transform:translateY(-2px)}.cc-card.selected{border-color:var(--cc-gold);background:var(--cc-gold-dim);box-shadow:0 0 0 1px var(--cc-gold)}.cc-card-mini{width:50px;height:65px}.cc-mini-svg{width:100%;height:100%}.cc-card-name{color:var(--cc-text);font-family:DM Sans,sans-serif;font-size:.85rem;font-weight:700}.cc-empty{text-align:center;color:var(--cc-text-muted);padding:3rem;font-family:Inter,sans-serif;font-size:.85rem}.cc-detail{padding:2rem 0}.cc-detail-card{background:var(--cc-card);border:1px solid var(--cc-border);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);align-items:flex-start;gap:2.5rem;padding:2rem;display:flex}.cc-detail-left{flex-shrink:0}.cc-diagram-wrap{background:#00000026;border-radius:12px;width:200px;height:260px;padding:10px}.light-mode .cc-diagram-wrap{background:#00000008}.cc-diagram-svg{width:100%;height:100%}.cc-detail-right{flex:1}.cc-detail-header{margin-bottom:1rem}.cc-detail-name{color:var(--cc-text);margin:0 0 .25rem;font-family:DM Serif Display,Georgia,serif;font-size:1.5rem;font-weight:400}.cc-detail-pos{color:var(--cc-text-muted);margin-bottom:.25rem;font-size:.78rem;display:block}.cc-detail-tab{color:var(--cc-gold);letter-spacing:.15em;font-family:DM Mono,monospace;font-size:1.1rem;font-weight:700}.cc-string-row{margin-bottom:1.25rem}.cc-string-labels{justify-content:space-between;margin-bottom:.5rem;display:flex}.cc-string-labels span{color:var(--cc-text-muted);text-align:center;width:32px;font-size:.7rem;font-weight:600}.cc-string-indicators{justify-content:space-between;display:flex}.cc-ind-item{text-align:center;width:32px}.cc-ind-sym{border-radius:50%;width:28px;height:28px;font-size:1.1rem;font-weight:800;line-height:28px;display:inline-block}.cc-ind-mute{color:#b54a4a;background:#b54a4a1a}.cc-ind-open,.cc-ind-fret{color:var(--cc-gold);background:var(--cc-gold-dim)}.cc-section-title{color:var(--cc-text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5rem;font-family:DM Sans,sans-serif;font-size:.75rem;font-weight:700}.cc-finger-list{flex-direction:column;gap:.3rem;margin-bottom:1.25rem;display:flex}.cc-finger-row{color:var(--cc-text-secondary);align-items:center;gap:.5rem;font-family:Inter,sans-serif;font-size:.8rem;display:flex}.cc-finger-num{background:var(--cc-gold);color:#1a1a1a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:.7rem;font-weight:800;display:flex}.cc-actions{flex-wrap:wrap;gap:.75rem;display:flex}.cc-btn{cursor:pointer;border:none;border-radius:10px;align-items:center;gap:.4rem;padding:.6rem 1.25rem;font-family:DM Sans,sans-serif;font-size:.8rem;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.cc-btn-play{background:var(--cc-gold);color:#1a1a1a}.cc-btn-play:hover{background:#e5b85c;transform:translateY(-1px)}.cc-btn-play.playing{animation:.3s pulse}.cc-btn-practice{background:var(--cc-card);color:var(--cc-text-secondary);border:1px solid var(--cc-border)}.cc-btn-practice:hover{border-color:var(--cc-gold);color:var(--cc-gold)}.cc-beginner{padding:2rem 0}.cc-beginner-card{background:var(--cc-card);border:1px solid var(--cc-border);border-radius:var(--cc-radius);padding:1.5rem 2rem}.cc-section-heading{color:var(--cc-text);margin:0 0 .5rem;font-family:DM Serif Display,Georgia,serif;font-size:1.2rem;font-weight:400}.cc-beginner-text{color:var(--cc-text-secondary);margin:0 0 .75rem;font-family:Inter,sans-serif;font-size:.82rem;line-height:1.6}.cc-beginner-label{color:var(--cc-text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5rem;font-family:DM Sans,sans-serif;font-size:.75rem;font-weight:700}.cc-beginner-chords{flex-wrap:wrap;gap:.5rem;display:flex}.cc-beginner-chord{border:1px solid var(--cc-border);background:var(--cc-card);color:var(--cc-gold);cursor:pointer;border-radius:8px;padding:.5rem 1rem;font-family:DM Sans,sans-serif;font-size:.85rem;font-weight:700;transition:all .2s}.cc-beginner-chord:hover{background:var(--cc-gold);color:#1a1a1a}.cc-progressions{padding:2rem 0 4rem}.cc-section-sub{color:var(--cc-text-secondary);margin:0 0 1rem;font-family:Inter,sans-serif;font-size:.82rem}.cc-prog-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;display:grid}.cc-prog-card{background:var(--cc-card);border:1px solid var(--cc-border);border-radius:12px;padding:1rem 1.25rem}.cc-prog-name{color:var(--cc-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;font-family:DM Sans,sans-serif;font-size:.75rem;font-weight:700}.cc-prog-chords{flex-wrap:wrap;align-items:center;gap:.3rem;margin-bottom:.3rem;display:flex}.cc-prog-chord{color:var(--cc-gold);cursor:pointer;background:0 0;border:none;padding:0;font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:700}.cc-prog-chord:hover{text-decoration:underline}.cc-prog-arrow{color:var(--cc-text-muted);font-size:.8rem}.cc-prog-desc{color:var(--cc-text-muted);margin:0;font-family:Inter,sans-serif;font-size:.75rem}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media (width<=768px){.cc-detail-card{flex-direction:column;align-items:center;padding:1.5rem}.cc-diagram-wrap{width:180px;height:230px}.cc-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:.5rem}.cc-card{padding:.75rem .4rem .5rem}.cc-prog-grid{grid-template-columns:1fr}}.sb-section{padding:2rem 0 4rem}.sb-card{background:var(--cc-card);border:1px solid var(--cc-border);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);flex-direction:column;gap:1.5rem;padding:2rem;display:flex}.sb-row{flex-direction:column;gap:.6rem;display:flex}.sb-label{color:var(--cc-text-muted);text-transform:uppercase;letter-spacing:.06em;font-family:DM Sans,sans-serif;font-size:.75rem;font-weight:700}.sb-chords{flex-wrap:wrap;align-items:center;gap:.5rem;min-height:38px;display:flex}.sb-chord-chip{background:var(--cc-gold-dim);border:1px solid var(--cc-gold);color:var(--cc-gold);border-radius:8px;align-items:center;gap:.35rem;padding:.4rem .75rem;font-family:DM Sans,sans-serif;font-size:.85rem;font-weight:700;display:inline-flex}.sb-chord-chip.active{box-shadow:0 0 0 2px var(--cc-gold)}.sb-chord-remove{color:var(--cc-text-muted);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:.9rem;line-height:1;transition:color .15s}.sb-chord-remove:hover{color:var(--cc-gold)}.sb-chord-add-wrap{display:inline-flex}.sb-chord-select{border:1px dashed var(--cc-border);color:var(--cc-text-secondary);cursor:pointer;background:0 0;border-radius:8px;outline:none;padding:.4rem .75rem;font-family:DM Sans,sans-serif;font-size:.82rem;transition:all .2s}.sb-chord-select:hover,.sb-chord-select:focus{border-color:var(--cc-gold);color:var(--cc-gold)}.sb-chord-select option{background:var(--cc-card);color:var(--cc-text)}.sb-strums{flex-wrap:wrap;align-items:center;gap:.4rem;min-height:38px;display:flex}.sb-strum-ev{cursor:pointer;border:1px solid var(--cc-border);background:var(--cc-card);width:36px;height:36px;color:var(--cc-text-secondary);border-radius:8px;justify-content:center;align-items:center;font-size:1.1rem;font-weight:700;transition:all .15s;display:inline-flex;position:relative}.sb-strum-ev:hover{border-color:var(--cc-gold)}.sb-strum-ev.down{color:var(--cc-gold)}.sb-strum-ev.up{color:#91a85b}.sb-strum-ev.mute{color:var(--cc-red,#e07070)}.sb-strum-ev .sb-strum-x{background:var(--cc-text-muted);width:14px;height:14px;color:var(--cc-card);text-align:center;opacity:0;cursor:pointer;border:none;border-radius:50%;padding:0;font-size:.55rem;line-height:14px;transition:opacity .15s;position:absolute;top:-4px;right:-4px}.sb-strum-ev:hover .sb-strum-x{opacity:1}.sb-strum-add{gap:.4rem;display:flex}.sb-strum-add-btn{border:1px dashed var(--cc-border);cursor:pointer;width:36px;height:36px;color:var(--cc-text-muted);background:0 0;border-radius:8px;padding:0;font-size:1.1rem;transition:all .15s}.sb-strum-add-btn:hover{border-color:var(--cc-gold);color:var(--cc-gold)}.sb-presets{flex-wrap:wrap;gap:.4rem;display:flex}.sb-preset{border:1px solid var(--cc-border);background:var(--cc-card);color:var(--cc-text-secondary);cursor:pointer;border-radius:8px;padding:.4rem .85rem;font-family:DM Sans,sans-serif;font-size:.78rem;font-weight:600;transition:all .2s}.sb-preset:hover{border-color:var(--cc-gold);color:var(--cc-gold)}.sb-preset.active{background:var(--cc-gold);color:#1a1a1a;border-color:var(--cc-gold)}.sb-settings{border-top:1px solid var(--cc-border);grid-template-columns:1fr 1fr 1fr;gap:1.5rem;padding-top:.5rem;display:grid}.sb-setting{flex-direction:column;gap:.5rem;display:flex}.sb-radio-group{flex-direction:column;gap:.3rem;display:flex}.sb-radio{color:var(--cc-text-secondary);cursor:pointer;align-items:center;gap:.4rem;font-family:Inter,sans-serif;font-size:.78rem;display:flex}.sb-radio input[type=radio]{accent-color:var(--cc-gold)}.sb-bpm{align-items:center;gap:.5rem;display:flex}.sb-bpm-btn{border:1px solid var(--cc-border);background:var(--cc-card);width:30px;height:30px;color:var(--cc-text-secondary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;font-size:1rem;font-weight:700;transition:all .15s;display:flex}.sb-bpm-btn:hover{border-color:var(--cc-gold);color:var(--cc-gold)}.sb-bpm-val{color:var(--cc-text);text-align:center;min-width:2.5rem;font-family:DM Serif Display,Georgia,serif;font-size:1.3rem}.sb-bpm-unit{color:var(--cc-text-muted);text-transform:uppercase;font-family:DM Sans,sans-serif;font-size:.7rem;font-weight:600}.sb-duration{gap:.35rem;display:flex}.sb-dur-btn{border:1px solid var(--cc-border);background:var(--cc-card);color:var(--cc-text-secondary);cursor:pointer;border-radius:8px;padding:.35rem .7rem;font-family:DM Sans,sans-serif;font-size:.75rem;font-weight:600;transition:all .2s}.sb-dur-btn:hover{border-color:var(--cc-gold);color:var(--cc-gold)}.sb-dur-btn.active{background:var(--cc-gold);color:#1a1a1a;border-color:var(--cc-gold)}.sb-perchord{border-top:1px solid var(--cc-border);flex-direction:column;gap:.6rem;padding-top:1rem;display:flex}.sb-perchord-row{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.sb-perchord-chord{color:var(--cc-gold);min-width:50px;font-family:DM Sans,sans-serif;font-size:.85rem;font-weight:700}.sb-perchord-strums{flex-wrap:wrap;gap:.3rem;display:flex}.sb-actions{flex-wrap:wrap;gap:.75rem;padding-top:.5rem;display:flex}.sb-btn{cursor:pointer;border:none;border-radius:10px;align-items:center;gap:.4rem;padding:.6rem 1.25rem;font-family:DM Sans,sans-serif;font-size:.8rem;font-weight:700;transition:all .2s;display:inline-flex}.sb-btn-preview{background:var(--cc-gold);color:#1a1a1a}.sb-btn-preview:hover{background:#e5b85c;transform:translateY(-1px)}.sb-btn-stop{background:var(--cc-card);color:var(--cc-text-secondary);border:1px solid var(--cc-border)}.sb-btn-stop:hover{border-color:var(--cc-gold);color:var(--cc-gold)}.sb-btn-record{color:#fff;background:#e07070}.sb-btn-record:hover{background:#d05858;transform:translateY(-1px)}.sb-btn-record.recording{background:#b54a4a;animation:1s infinite rec-pulse}.sb-btn-play{background:var(--cc-gold);color:#1a1a1a}.sb-btn-play:hover{background:#e5b85c}.sb-btn-download{background:var(--cc-card);color:var(--cc-text-secondary);border:1px solid var(--cc-border)}.sb-btn-download:hover{border-color:var(--cc-gold);color:var(--cc-gold)}.sb-rec-controls{flex-wrap:wrap;gap:.75rem;display:flex}.sb-status{color:var(--cc-text-muted);min-height:1.2em;font-family:Inter,sans-serif;font-size:.78rem}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.6}}.sb-chord-chip.playing{background:#91a85b26;border-color:#91a85b;box-shadow:0 0 0 2px #91a85b}.sb-strum-ev.playing{background:var(--cc-gold-dim);border-color:var(--cc-gold)}@media (width<=768px){.sb-settings{grid-template-columns:1fr;gap:1rem}.sb-card{padding:1.25rem}.sb-actions{flex-direction:column}.sb-btn{justify-content:center}}.sb-cta-section{padding:2rem 0 4rem}.sb-cta-card{background:var(--cc-card);border:1px solid var(--cc-border);border-radius:var(--cc-radius);text-align:center;box-shadow:var(--cc-shadow);padding:2rem}.sb-cta-header{justify-content:center;align-items:center;gap:.4rem;margin-bottom:.5rem;display:flex}.sb-cta-btn{background:var(--cc-gold);color:#1a1a1a;cursor:pointer;border:none;border-radius:10px;align-items:center;gap:.4rem;padding:.65rem 1.5rem;font-family:DM Sans,sans-serif;font-size:.85rem;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.sb-cta-btn:hover{background:#e5b85c;transform:translateY(-1px)}.sb-info-btn{color:var(--cc-text-muted);cursor:pointer;opacity:.5;background:0 0;border:none;align-items:center;padding:0;transition:all .15s;display:inline-flex;position:relative}.sb-info-btn:hover{opacity:1;color:var(--cc-gold)}.sb-info-tip{z-index:300;background:var(--cc-card);border:1px solid var(--cc-border);min-width:180px;max-width:260px;box-shadow:var(--cc-shadow);color:var(--cc-text-secondary);opacity:0;pointer-events:none;white-space:normal;text-align:left;border-radius:8px;padding:.5rem .75rem;font-family:Inter,sans-serif;font-size:.72rem;line-height:1.5;transition:opacity .15s;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.sb-info-tip.open{opacity:1}