:root{--bg-color:#121212;--panel-bg:#1e1e1e;--fretboard-bg:#151515;--text-color:#e0e0e0;--accent:#4caf50;--danger:#f44336;--secondary:#2196f3;--warning:#ff9800;--altered:#9c27b0;--fret-wire:#666;--string-color:#888;--inlay-color:#ffffff0f;--marker-bg:#121212;--marker-border:#444;--marker-text:#ccc;--nut-color:#e0e0e0;--ghost-color:#555;--btn-hover-bg:#ffffff0f;--v-string:#ffffff47;--v-fret:#ffffff1f;--v-fret-wire:#ffffff1f;--v-cell-gradient:linear-gradient(to bottom, #ffffff08, #0000);--chord-tone:#2196f3;--color-tone:#e91e63;--pent-tone:#ff9800;--target-glow:#e91e6380}body.light-mode{--bg-color:#f5f5f5;--panel-bg:#fff;--fretboard-bg:#fff;--text-color:#333;--accent:#2e7d32;--danger:#d32f2f;--secondary:#1976d2;--warning:#ef6c00;--altered:#7b1fa2;--fret-wire:#999;--string-color:#444;--inlay-color:#0000000a;--marker-bg:#fff;--marker-border:#666;--marker-text:#222;--nut-color:#333;--ghost-color:#ccc;--btn-hover-bg:#0000000d;--v-string:#333;--v-fret:#bbb;--v-fret-wire:#bbb;--v-cell-gradient:linear-gradient(to bottom, #0000000a, #0000);--chord-tone:#1565c0;--color-tone:#c2185b;--pent-tone:#ef6c00}body{background:var(--bg-color);color:var(--text-color);margin:0;padding:18px 18px 40px;font-family:system-ui,-apple-system,sans-serif;transition:background .3s,color .3s}.top-bar{grid-template-columns:1fr auto;align-items:start;gap:12px;margin-bottom:10px;display:grid}.app-title{align-items:center;gap:10px;margin:0;font-size:22px;font-weight:900;line-height:1.05;display:flex}.header-controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.hdr-btn{height:44px;color:var(--text-color);cursor:pointer;opacity:.92;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff08;border:1px solid #ffffff40;border-radius:12px;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:800;transition:opacity .15s,background .15s,transform 50ms;display:inline-flex}.hdr-btn:hover{opacity:1;background:var(--btn-hover-bg)}.hdr-btn:active{transform:translateY(1px)}.mute-toggle{justify-content:center;width:44px;padding:0}.mute-toggle.is-muted{color:#fff;background:#f4433647;border-color:#f443368c}@media (width<=620px){.app-title{font-size:20px}.hdr-btn{padding:0 12px;font-size:13px}}@media (width<=420px){body{padding:14px}.hdr-btn{height:42px}.app-title{font-size:19px}}.utility-row{justify-content:flex-start;align-items:center;gap:10px;margin:6px 0 10px;display:flex}.stats-toggle{color:var(--text-color);cursor:pointer;opacity:.9;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff08;border:1px solid #ffffff40;border-radius:12px;align-items:center;gap:8px;height:38px;padding:0 12px;font-weight:800;display:inline-flex}.stats-toggle:hover{opacity:1;background:var(--btn-hover-bg)}.stats-toggle .caret{opacity:.85;transition:transform .18s;display:inline-block}.stats-toggle[aria-expanded=true] .caret{transform:rotate(90deg)}.stats-toggle .btn-label{display:inline}.stats-drawer{background:var(--panel-bg);opacity:0;border:1px solid #ffffff1f;border-radius:12px;max-height:0;transition:max-height .24s,opacity .18s,transform .18s;overflow:hidden;transform:translateY(-6px);box-shadow:0 2px 8px #00000026}.stats-drawer.open{opacity:1;max-height:260px;transform:translateY(0)}.stats-drawer-inner{padding:12px}.stats-topline{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.text-link-btn{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;opacity:.85;background:0 0;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:800}.text-link-btn:hover{opacity:1;background:var(--btn-hover-bg)}.stats-panel{background:0 0;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:0;padding:0;display:grid}.stat-item{text-align:center}.stat-value{color:var(--accent);font-size:24px;font-weight:700}.stat-label{opacity:.7;margin-top:4px;font-size:11px}@media (width<=520px){.stats-panel{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat-value{font-size:20px}}.controls{background:var(--panel-bg);z-index:50;border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;padding:12px;display:flex;position:relative;box-shadow:0 2px 5px #0000001a}label{opacity:.85;flex-direction:column;min-width:140px;font-size:11px;font-weight:700;display:flex}select,button{border:1px solid var(--fret-wire);background:var(--bg-color);color:var(--text-color);cursor:pointer;border-radius:10px;margin-top:4px;padding:8px 10px;font-size:14px}select:disabled{opacity:.5;cursor:not-allowed;background-color:#0003}.controls-grow{flex:auto}#scaleControls,#triadControls,#seventhControls{flex-wrap:wrap;gap:12px;display:flex}.header-btn{white-space:nowrap;border-width:2px;border-radius:12px;justify-content:center;align-items:center;margin-top:0;padding:10px 16px;font-size:14px;font-weight:800;display:inline-flex}.header-btn-secondary{border-color:var(--secondary);color:var(--secondary);background:0 0}@media (width<=740px){.controls{-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;flex-wrap:nowrap;gap:10px;padding-right:40px;overflow-x:auto;box-shadow:inset -24px 0 20px -10px #000}body.light-mode .controls{box-shadow:inset -24px 0 20px -10px #0003}.controls::-webkit-scrollbar{height:4px;display:block}.controls::-webkit-scrollbar-track{background:#ffffff14;border-radius:4px}body.light-mode .controls::-webkit-scrollbar-track{background:#0000000d}.controls::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}label{scroll-snap-align:start;min-width:155px}#scaleControls,#triadControls,#seventhControls{flex-wrap:nowrap}.controls-grow{display:none}}@media (height<=500px) and (orientation:landscape){body{padding:8px}.top-bar{margin-bottom:4px}.utility-row{margin:2px 0 6px}.controls{margin-bottom:6px;padding:6px 10px}.status-bar{gap:8px;margin-bottom:6px;padding:6px 10px}.prompt{padding:4px 10px;font-size:15px}.message{font-size:11px}.fretboard-container{padding:2px 0}.stats-drawer.open{max-height:150px}}.status-bar,.status-text{display:none}.status-buttons{flex:none;align-self:center;gap:8px;display:flex}.prompt{color:var(--text-color);border:1px solid var(--fret-wire);white-space:nowrap;opacity:.6;cursor:default;background:0 0;border-radius:20px;max-width:100%;margin-bottom:0;padding:8px 20px;font-size:14px;font-weight:700;line-height:1.2;transition:all .2s;display:inline-block}.prompt:hover{opacity:1;background:var(--btn-hover-bg)}.prompt.prompt-cta{cursor:pointer;background:var(--accent);color:#fff;border:1px solid var(--accent);opacity:1}.prompt.prompt-cta:hover{filter:brightness(1.1)}.exit-quiz-btn{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;opacity:.6;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .15s;display:flex}.exit-quiz-btn:hover{opacity:1;border-color:var(--danger);color:var(--danger)}.message{color:var(--danger);text-align:center;min-height:20px;margin-bottom:10px;font-size:13px;font-weight:700}.action-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;padding:10px 14px;font-weight:900}.action-btn:active{transform:translateY(1px)}.action-btn:disabled{cursor:not-allowed;opacity:.7;background:#555}.audio-btn{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .15s}.audio-btn:hover{border-color:var(--accent);background:linear-gradient(135deg,#5a6578 0%,#3d4758 100%);transform:translateY(-1px)}.audio-btn:active{background:var(--accent);transform:translateY(0)}.audio-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.play-along-btn.playing{background:var(--danger);border-color:var(--danger);animation:1s ease-in-out infinite pulse-play}@keyframes pulse-play{0%,to{opacity:1}50%{opacity:.7}}.fretboard td.triad-clickable{cursor:pointer}.fretboard td.triad-clickable:hover{filter:brightness(1.3)}.fretboard td.note-playing{box-shadow:0 0 15px 5px var(--accent);animation:.4s ease-out note-highlight}.fretboard td.shape-dimmed .note-marker{opacity:.22;filter:grayscale(.35)saturate(.35)}.fretboard td.note-playing .note-marker{opacity:1;filter:none}@keyframes note-highlight{0%{transform:scale(1.3)}to{transform:scale(1)}}#continueBtn{background:var(--secondary);align-self:center;margin:0;display:none;box-shadow:0 2px 5px #0003}#restartBtn{background:var(--warning);color:#121212;align-self:center;margin:0;display:none;box-shadow:0 2px 5px #0003}.fretboard-container{background:var(--panel-bg);border:1px solid var(--fret-wire);border-top:2px solid var(--fret-wire);border-radius:12px;padding:8px 0;overflow-x:auto}.fretboard-wrap{justify-content:center;min-width:min-content;display:flex}#boardContainer.vertical-scroll{border-top:none;max-height:65vh;padding:0;overflow:hidden auto;-webkit-mask-image:linear-gradient(#0000,#000 12px calc(100% - 12px),#0000);mask-image:linear-gradient(#0000,#000 12px calc(100% - 12px),#0000)}#boardContainer.vertical-scroll .fretboard-wrap{justify-content:flex-start}.fretboard{border-collapse:collapse;table-layout:fixed;transform-origin:top;width:max-content;min-width:0}.fretboard th,.fretboard td{text-align:center;padding:0;position:relative}.fretboard:not(.vertical-mode) .fret-num{color:var(--accent);width:46px;padding:4px 0 8px;font-size:14px;font-weight:700;line-height:1.2}.fretboard:not(.vertical-mode) .string-label{width:40px;color:var(--accent);background:var(--panel-bg);z-index:10;border-right:2px solid var(--fret-wire);padding:0;font-size:14px;font-weight:700;line-height:32px;position:sticky;left:0}.fretboard:not(.vertical-mode) .note-cell{border-right:2px solid var(--fret-wire);cursor:pointer;touch-action:manipulation;width:46px;min-width:0;height:32px;line-height:0}.fretboard:not(.vertical-mode) td.note-cell.fret-odd{background-color:#ffffff0a}body.light-mode .fretboard:not(.vertical-mode) td.note-cell.fret-odd{background-color:#0000000f}.fretboard:not(.vertical-mode) .note-cell.nut-line{border-right:5px solid var(--nut-color)}.fretboard:not(.vertical-mode) .string-line{background:var(--string-color);z-index:1;pointer-events:none;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.fretboard.vertical-mode{width:max-content;min-width:0}.fretboard.vertical-mode th.fret-num{background:var(--panel-bg);text-align:right;width:40px;color:var(--text-color);opacity:.7;vertical-align:middle;z-index:30;border:none;padding:0 15px 0 0;font-size:13px;font-weight:700;position:sticky;left:0}.fretboard.vertical-mode .string-label{text-align:center;background:var(--panel-bg);width:46px;height:40px;color:var(--accent);z-index:40;border:none;font-weight:900;position:sticky;top:0}.fretboard.vertical-mode .note-cell{background:var(--fretboard-bg);border-right:none;border-bottom:2px solid var(--v-fret-wire);touch-action:manipulation;width:46px;min-width:0;height:54px;position:relative}.fretboard.vertical-mode tr td.note-cell:last-child{border-right:none}.fretboard.vertical-mode .note-cell.nut-line{border-bottom:6px solid var(--nut-color)}.fretboard.vertical-mode tr.open-pos td.note-cell{border-top:none}.fretboard.vertical-mode .string-line{width:var(--string-w,2px);background:var(--v-string);opacity:1;pointer-events:none;z-index:1;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);height:100%!important}.inlay-bg{background-color:var(--inlay-color)!important}.note-marker{z-index:5;background:var(--marker-bg);border:1px solid var(--marker-border);width:28px;height:28px;color:var(--marker-text);text-shadow:0 1px 3px #000000b3;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;font-weight:700;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative}body.light-mode .note-marker{text-shadow:none;font-weight:600}.note-marker .interval{margin-bottom:1px;font-size:11px;line-height:1}.note-marker .note-name{opacity:.8;font-size:10px;line-height:1}.degree-1 .note-marker{color:#fff;background:#4caf5080;border-color:#66bb6a}.degree-3 .note-marker,.degree-b3 .note-marker{color:#fff;background:#ff980080;border-color:#ffb74d}.degree-5 .note-marker{color:#fff;background:#2196f380;border-color:#64b5f6}.degree-b5 .note-marker,.degree-sharp5 .note-marker{color:#fff;background:#9c27b080;border-color:#ba68c8}.degree-7 .note-marker,.degree-b7 .note-marker,.degree-bb7 .note-marker{color:#fff;background:#e91e6380;border-color:#f06292}body.light-mode .degree-1 .note-marker{color:var(--accent);border-color:var(--accent);background:0 0}body.light-mode .degree-3 .note-marker,body.light-mode .degree-b3 .note-marker{border-color:var(--warning);color:var(--warning);background:0 0}body.light-mode .degree-5 .note-marker{border-color:var(--secondary);color:var(--secondary);background:0 0}body.light-mode .degree-b5 .note-marker,body.light-mode .degree-sharp5 .note-marker{border-color:var(--altered);color:var(--altered);background:0 0}body.light-mode .degree-7 .note-marker,body.light-mode .degree-b7 .note-marker,body.light-mode .degree-bb7 .note-marker{color:#e91e63;background:0 0;border-color:#e91e63}.root-note .note-marker{background:var(--accent);color:#fff;border-color:var(--accent);opacity:1!important}.quiz-active .note-marker:not(.revealed):not(.ghost):not(.hint-flash){opacity:0;pointer-events:none;transform:scale(.5)}.note-marker.revealed{animation:.3s ease-out revealPulse;box-shadow:0 0 10px #ffffff80;opacity:1!important;transform:scale(1.15)!important}.degree-1 .note-marker.revealed{background:var(--accent);color:#fff;border-color:var(--accent)}.degree-3 .note-marker.revealed,.degree-b3 .note-marker.revealed{background:var(--warning);color:#121212;border-color:var(--warning)}.degree-5 .note-marker.revealed{background:var(--secondary);color:#fff;border-color:var(--secondary)}.degree-b5 .note-marker.revealed,.degree-sharp5 .note-marker.revealed{background:var(--altered);color:#fff;border-color:var(--altered)}.degree-7 .note-marker.revealed,.degree-b7 .note-marker.revealed,.degree-bb7 .note-marker.revealed{color:#fff;background:#e91e63;border-color:#e91e63}.note-marker.ghost{opacity:1!important;background:var(--marker-bg)!important;box-shadow:none!important;transform:scale(1)!important}.quiz-active.blind-mode .note-marker:not(.revealed):not(.ghost):not(.hint-flash){pointer-events:auto;opacity:0!important}@keyframes revealPulse{0%{transform:scale(.8)}50%{transform:scale(1.25)}to{transform:scale(1.15)}}.wrong-flash{background-color:#f443364d}.near-miss-flash{background-color:#ff98004d}.out-scale .note-marker{opacity:0;pointer-events:none}.legend-row{background:var(--panel-bg);border:1px solid var(--fret-wire);opacity:.9;border-radius:12px;margin-top:8px;padding:10px 12px;font-size:13px;line-height:1.35;display:none}.chord-tone-hint{color:var(--text-color);opacity:.85;font-weight:700}.fretboard-footer{flex-direction:column;align-items:center;gap:8px;margin-top:10px;display:flex}.interval-display{flex-wrap:wrap;justify-content:center;gap:6px;min-height:24px;padding:4px;display:none}.interval-display.show{display:flex}.interval-pill{border:1px solid var(--fret-wire);color:var(--accent);background:#ffffff0d;border-radius:6px;padding:4px 10px;font-size:13px;font-weight:700;display:inline-block;box-shadow:0 1px 3px #0003}body.light-mode .interval-pill{background:#0000000d}.page-footer{text-align:center;opacity:.6;flex-direction:column;gap:8px;margin-top:40px;font-size:12px;display:flex}.page-footer a{color:var(--text-color);cursor:pointer;text-decoration:underline}.text-btn{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;opacity:.85;background:0 0;border-radius:12px;margin:0 auto;padding:10px 14px;font-size:13px;font-weight:800;text-decoration:none;display:inline-block}.text-btn:hover{opacity:1;background:var(--btn-hover-bg)}.modal{z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal.show{display:flex}.modal-content{background:var(--panel-bg);border-radius:14px;width:calc(100% - 28px);max-width:650px;max-height:80vh;padding:24px;overflow-y:auto}.modal-content h2{color:var(--accent);align-items:center;gap:8px;margin-top:0;display:flex}.modal-close{float:right;cursor:pointer;opacity:.7;font-size:24px}.modal-close:hover{opacity:1}.stats-history-table{border-collapse:collapse;width:100%;font-size:12px}.stats-history-table th{text-align:left;opacity:.8;padding:6px 4px;font-weight:900}.stats-history-table td{opacity:.75;padding:6px 4px}.mode-chord-summary{margin-bottom:12px;font-size:14px;line-height:1.5}.mode-chord-summary strong{font-weight:700}.mode-chord-table{border-collapse:collapse;width:100%;margin:16px 0 8px;font-size:13px}.mode-chord-table th,.mode-chord-table td{text-align:left;border:1px solid #333;padding:6px 8px}.mode-chord-table th{background:#161616}.mode-chord-row-highlight{background:#4caf5026}.mode-help-toggle{color:var(--secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;margin-top:8px;padding:0;font-size:13px;font-weight:800;display:inline-flex}.mode-help-toggle .caret{transition:transform .2s;display:inline-block}.mode-help-toggle.open .caret{transform:rotate(90deg)}.mode-help-body{margin-top:8px;font-size:13px;line-height:1.5;display:none}.mode-help-body.show{display:block}#progressionUI{margin-bottom:20px;display:none}.youtube-panel{background:var(--panel-bg);border:1px solid var(--fret-wire);border-radius:12px;margin-bottom:16px;overflow:hidden}.youtube-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:12px 16px;transition:background .15s;display:flex}.youtube-panel-header:hover{background:#ffffff08}.youtube-panel-header h3{flex-shrink:0;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:700;display:flex}.youtube-panel-header .video-title-preview{opacity:.6;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;max-width:200px;font-size:13px;font-weight:400;overflow:hidden}.youtube-header-url-input{border:1px solid var(--fret-wire);background:var(--bg-color);min-width:120px;max-width:280px;color:var(--text-color);border-radius:6px;flex:1;padding:6px 10px;font-size:12px}.youtube-header-url-input::placeholder{opacity:.5}.youtube-header-load-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:600}.youtube-header-load-btn:hover{filter:brightness(1.1)}.youtube-collapse-toggle{opacity:.7;background:#ffffff0d;border-radius:6px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;display:flex}.youtube-collapse-toggle .arrow{transition:transform .2s}.youtube-panel.collapsed .youtube-collapse-toggle .arrow{transform:rotate(180deg)}.youtube-panel-content{max-height:1000px;padding:0 16px 16px;transition:max-height .3s,padding .3s;overflow:visible}.youtube-panel.collapsed .youtube-panel-content{max-height:0;padding:0 16px}.youtube-video-wrapper{justify-content:center;display:flex}.youtube-video-container{aspect-ratio:16/9;background:#000;border-radius:8px;width:100%;max-width:480px;position:relative;overflow:hidden}.youtube-video-container iframe,#youtubePlayerContainer,#youtubePlayerContainer iframe{width:100%;height:100%;position:absolute;top:0;left:0}.youtube-video-placeholder{color:#666;text-align:center;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;font-size:13px;display:flex;position:absolute;top:0;left:0}.tap-zone-mobile{border:2px dashed var(--danger);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#f4433626,#f4433614);border-radius:12px;margin-top:12px;padding:30px;display:none}.tap-zone-mobile.show{display:block}.tap-zone-mobile.tapped{background:#f443364d;transform:scale(.98)}.tap-zone-mobile .tap-icon{margin-bottom:8px;font-size:36px}.tap-zone-mobile .tap-text{font-size:16px;font-weight:600}.yt-player-container{aspect-ratio:16/9;background:#000;border-radius:8px;width:100%;max-width:800px;margin:0 auto;position:relative;overflow:hidden}@supports not (aspect-ratio:16 / 9){.yt-player-container{height:0;padding-bottom:56.25%}}.yt-player-container iframe{width:100%;height:100%;position:absolute;top:0;left:0}.progression-builder{background:var(--panel-bg);border:1px solid var(--fret-wire);border-radius:12px;margin-bottom:16px;padding:16px}.progression-input-row{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.chord-chip{color:var(--secondary);cursor:pointer;-webkit-user-select:none;user-select:none;background:#2196f326;border:1px solid #2196f366;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;font-weight:800;display:inline-flex}.chord-chip.active{background:var(--secondary);color:#fff;transform:scale(1.05);box-shadow:0 4px 12px #2196f34d}.chord-chip.loop-active{box-shadow:0 0 0 2px var(--accent), 0 0 12px #4caf5066;transform:scale(1.05)}.chord-chip .remove-chord{opacity:.6;margin-left:4px;font-size:16px;line-height:.8}.chord-chip .remove-chord:hover{opacity:1;color:#fff}.clear-all-chords-btn{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;opacity:1;background:#ffffff0d;border-radius:16px;align-items:center;gap:6px;margin-right:4px;padding:6px 14px;font-size:12px;font-weight:700;transition:all .15s;display:inline-flex}#importBtn{border-color:var(--secondary);color:var(--secondary)}#importBtn:hover{background:#2196f326;transform:translateY(-1px)}#clearAllChordsBtn{border-color:var(--danger);color:var(--danger)}#clearAllChordsBtn:hover{background:#f4433626;transform:translateY(-1px)}.add-chord-btn{border:2px dashed var(--fret-wire);width:36px;height:36px;color:var(--text-color);cursor:pointer;opacity:.6;background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:20px;display:flex}.add-chord-btn:hover{opacity:1;border-color:var(--accent);color:var(--accent)}.chord-add-panel{background:#0003;border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;padding:12px;display:none}.chord-add-panel.show{display:flex}.analysis-key-badge{background:var(--accent);color:#fff;border-radius:12px;padding:4px 10px;font-size:12px;font-weight:800}.chord-analysis-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:16px;display:grid}.chord-analysis-card{border:1px solid var(--fret-wire);cursor:pointer;background:#ffffff08;border-radius:10px;padding:12px;transition:transform .2s}.target-pill{border-radius:10px;margin-top:4px;margin-right:4px;padding:3px 8px;font-size:11px;font-weight:700;display:inline-block}.target-pill.chord-tone{color:var(--chord-tone);background:#2196f333;border:1px solid #2196f366}.target-pill.color-tone{color:var(--color-tone);background:#e91e6340;border:1px solid #e91e6380;animation:2s infinite colorPulse}.chord-cycle-controls{border-top:1px solid var(--fret-wire);flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding-top:12px;display:flex}.cycle-btn{border:2px solid var(--fret-wire);background:var(--panel-bg);width:40px;min-width:40px;height:40px;min-height:40px;color:var(--text-color);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:0;padding:0;font-size:14px;transition:all .15s;display:flex}.cycle-btn:hover{border-color:var(--accent);background:var(--btn-hover-bg);transform:scale(1.05)}.cycle-btn:active{transform:scale(.95)}.tap-learn-btn{background:var(--danger);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:18px;display:flex}.tap-learn-btn.recording{background:var(--warning);color:#000;animation:.8s ease-in-out infinite pulse-record}@keyframes pulse-record{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.tap-play-btn{background:var(--accent);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:16px;display:flex}.tap-stop-btn{color:#fff;background:#666;flex-shrink:0;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:14px;display:flex}#cyclePlayBtn{border-color:var(--accent);background:#4caf501a;width:48px;height:48px;font-size:18px}#cyclePlayBtn:hover{background:#4caf5033}.cycle-btn.playing{background:var(--danger);border-color:var(--danger);color:#fff}.cycle-btn.playing:hover{background:var(--danger);filter:brightness(1.1)}.metro-toggle{cursor:pointer;border:1px solid var(--fret-wire);-webkit-user-select:none;user-select:none;background:#ffffff0d;border-radius:8px;align-items:center;gap:4px;padding:4px 8px;display:flex}.metro-toggle:hover{background:var(--btn-hover-bg)}.metro-toggle input{display:none}.metro-toggle .metro-icon{opacity:.4;font-size:16px;transition:opacity .15s}.metro-toggle input:checked+.metro-icon{opacity:1}.current-chord-display{text-align:center;border:1px solid var(--secondary);box-sizing:border-box;background:linear-gradient(135deg,#2196f326,#e91e6314);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;height:115px;margin-bottom:12px;padding:12px;display:none}.current-chord-display.show{display:flex}.chord-tone-cell .note-marker{color:#fff;background:#2196f380;border-color:#64b5f6;opacity:1!important;transform:scale(1)!important}body.light-mode .chord-tone-cell .note-marker{border-color:var(--chord-tone);color:var(--chord-tone);background:#2196f326}.color-tone-cell .note-marker{border-color:var(--color-tone);color:#fff;background:var(--color-tone);box-shadow:0 0 10px var(--target-glow);z-index:10;animation:1.5s ease-in-out infinite markerPulse;opacity:1!important;transform:scale(1.15)!important}.root-tone .note-marker{background:var(--accent);color:#fff;border-color:var(--accent);opacity:1!important}.scale-tone .note-marker{color:#fff;background:#26c6da73;border:2px solid #4dd0e1;transform:scale(.95);opacity:.9!important}body.light-mode .scale-tone .note-marker{color:#00acc1;background:#00acc11a;border-color:#00acc1}.pent-safe .note-marker{color:#fff;background:#ff980080;border-color:#ffb74d;opacity:.9!important}body.light-mode .pent-safe .note-marker{border-color:var(--pent-tone);color:var(--pent-tone);background:#ff98001a}.outside-chord-tone .note-marker{color:#fff;background:#9c27b080;border:2px dashed #ba68c8;transform:scale(1.05);opacity:1!important}body.light-mode .outside-chord-tone .note-marker{color:#7b1fa2;background:#9c27b01f;border-color:#7b1fa2}.combo-ghost .note-marker{background:#ffffff08;border-style:dashed;border-width:2px;transform:scale(.85);opacity:.55!important}body.light-mode .combo-ghost .note-marker{background:#00000008;opacity:.5!important}.blue-note-cell .note-marker{color:#fff;background:#9c27b080;border-color:#ba68c8;opacity:.95!important}body.light-mode .blue-note-cell .note-marker{color:#7b1fa2;background:#7b1fa21f;border-color:#7b1fa2}.blue-note-hint .note-marker{color:#fff;background:#e91e6366;opacity:.8!important;border:2px dashed #f06292!important}body.light-mode .blue-note-hint .note-marker{color:#c2185b;background:#c2185b14;border:2px dashed #c2185b!important}@keyframes colorPulse{0%,to{box-shadow:0 0 2px #e91e634d}50%{box-shadow:0 0 8px #e91e6399}}@keyframes markerPulse{0%,to{box-shadow:0 0 5px var(--target-glow)}50%{box-shadow:0 0 15px var(--target-glow)}}.trim-editor{box-sizing:border-box;-webkit-user-select:none;user-select:none;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:12px;width:100%;padding:10px}.trim-toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.trim-toolbar .btn{appearance:none;color:inherit;font:inherit;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;border-radius:10px;padding:8px 10px}.trim-toolbar .btn:active{transform:translateY(1px)}.trim-toolbar .field{background:#00000026;border:1px solid #ffffff1f;border-radius:10px;align-items:center;gap:6px;padding:6px 8px;display:flex}.trim-toolbar input[type=number]{width:92px;color:inherit;font:inherit;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;padding:6px 8px}.trim-toolbar .hint{opacity:.75;font-size:12px}.trim-stage{background:#00000038;border:1px solid #ffffff1a;border-radius:12px;height:92px;position:relative;overflow:hidden}.trim-canvas{width:100%;height:100%;position:absolute;inset:0}.trim-region{pointer-events:auto;background:#ffffff14;border-left:1px solid #ffffff38;border-right:1px solid #ffffff38;position:absolute;top:0;bottom:0}.trim-handle{cursor:ew-resize;pointer-events:auto;touch-action:none;background:#ffffff2e;border:1px solid #ffffff40;border-radius:10px;width:14px;margin-left:-7px;position:absolute;top:0;bottom:0}.trim-handle:after{content:"";background:#ffffff59;border-radius:2px;width:2px;position:absolute;top:20%;bottom:20%;left:50%;transform:translate(-50%)}.trim-tooltip{pointer-events:none;white-space:nowrap;opacity:0;background:#000000b8;border:1px solid #ffffff24;border-radius:10px;padding:6px 8px;font-size:12px;transition:opacity 80ms;position:absolute;transform:translate(-50%,-120%)}.trim-tooltip.show{opacity:1}.trim-footer{opacity:.8;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px;display:flex}body.mic-mode-active .fretboard-container,body.mic-mode-active .status-bar,body.mic-mode-active .fretboard-footer,body.mic-mode-active .legend-row,body.mic-mode-active #progressionUI{display:none!important}.shuffle-container{border:1px solid var(--fret-wire);background:#0003;border-radius:8px;align-items:center;gap:15px;padding:6px 12px;display:flex}.mode-tab{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;opacity:.6;background:0 0;border-radius:20px;padding:8px 20px;font-weight:700;transition:all .2s}.mode-tab:hover{opacity:1;background:var(--btn-hover-bg)}.mode-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;opacity:1}.bubble{background:var(--panel-bg);border:3px solid var(--fret-wire);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:80px;height:80px;transition:transform .2s;display:flex;position:relative}.bubble .main-text{color:var(--text-color);font-size:24px;font-weight:800;line-height:1}.bubble .sub-text{opacity:.6;color:var(--text-color);margin-top:4px;font-size:13px}.bubble.target{border-color:var(--accent);box-shadow:0 0 25px var(--accent);background:var(--bg-color);z-index:10;transform:scale(1.1)}.bubble.success{border-color:var(--accent);background:var(--accent)}.bubble.success .main-text,.bubble.success .sub-text{color:#fff}@media (width<=500px){.chord-cycle-controls{justify-content:center}#tapTimingControls{flex-wrap:wrap;width:100%;margin-top:10px;justify-content:center!important;gap:10px!important;margin-left:0!important}}#tapTimingControls{opacity:0;transition:opacity .15s}#tapTimingControls.ready{opacity:1}@media (width<=500px){#tapTimingStatus{text-align:center;width:100%;margin-top:6px}#loopBackControl{width:100%;margin-top:8px;justify-content:center!important;margin-left:0!important}#cycleHintText{text-align:center;width:100%;margin-top:8px;margin-left:0!important}}.mini-string{height:2px;transition:background .2s;position:absolute;left:0;right:0}.mini-string.active{background:#888;box-shadow:0 1px 4px #00000080}.mini-string.inactive{background:#333}.shape-dot{z-index:10;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:11px;font-weight:800;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 5px #000c}.mic-degree-1{background:var(--accent);color:#fff;border:2px solid var(--accent)}.mic-degree-3,.mic-degree-b3{color:#000;background:#ff9800;border:2px solid #ff9800}.mic-degree-5{background:var(--secondary);color:#fff;border:2px solid var(--secondary)}.mic-degree-b5{color:#fff;background:#9c27b0;border:2px solid #9c27b0}.mic-degree-s5{color:#fff;background:#f44336;border:2px solid #f44336}.note-marker.behavior-land{z-index:10;transform:scale(1.1);box-shadow:0 0 12px;opacity:1!important}.note-marker.behavior-touch{transform:scale(.95);box-shadow:inset 0 0 5px #00000080;opacity:.9!important;background-color:#0000!important;border-width:2px!important}.degree-7 .note-marker.behavior-touch,.degree-b7 .note-marker.behavior-touch,.degree-bb7 .note-marker.behavior-touch{color:#f06292!important;border-color:#f06292!important}.degree-2 .note-marker.behavior-touch,.degree-4 .note-marker.behavior-touch,.degree-6 .note-marker.behavior-touch{color:#ba68c8!important;border-color:#ba68c8!important}body.light-mode .note-marker.behavior-touch{font-weight:900;border-width:3px!important}.note-marker.land-primary{filter:drop-shadow(0 0 10px #ffffff2e);border-width:3px;transform:scale(1.1)}.note-marker.land-secondary{filter:drop-shadow(0 0 8px #ffffff24);border-width:2.5px;transform:scale(1.06)}.note-marker.land-tertiary{filter:drop-shadow(0 0 6px #ffffff1a);border-width:2px;transform:scale(1.03)}.note-marker.touch-strong{opacity:.95;outline-offset:2px;outline:2px dashed #ffffff59}.note-marker.touch-medium{opacity:.9;outline-offset:2px;outline:1px dashed #ffffff47}.note-marker.touch-light{opacity:.82}.legend-wrap{align-items:center;gap:8px;display:inline-flex}.legend-toggle{color:#ffffffd9;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #ffffff40;border-radius:999px;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;display:inline-flex}.legend-tooltip{z-index:50;color:#ffffffeb;background:#000000d9;border:1px solid #ffffff2e;border-radius:10px;width:260px;margin-top:8px;padding:10px 12px;font-size:12px;line-height:1.35;position:absolute;box-shadow:0 8px 24px #00000059}.legend-tooltip.hidden{display:none}.legend-tooltip .row{justify-content:space-between;gap:12px;margin:6px 0;display:flex}.legend-tooltip .k{opacity:.85}.legend-tooltip .v{opacity:.95;font-weight:600}.current-chord-display{z-index:50;position:relative;overflow:visible}.fretboard-container{z-index:1;position:relative}.legendWrap{z-index:9998;position:relative}.legend-tooltip{z-index:9999;transform:translateZ(0)}.target-pill b{font-weight:700}.target-pill .touch{opacity:.85}.note-marker.behavior-land{z-index:10!important}.note-marker.behavior-touch{clip-path:none!important;box-shadow:none!important;opacity:.72!important;z-index:4!important;filter:saturate(.8)brightness(1.06)!important;text-shadow:0 1px 2px #0000008c,0 0 8px #00000059!important;background-color:#0000!important;background-image:none!important;border-style:dashed!important;border-width:2px!important;border-radius:999px!important;font-weight:800!important;transform:none!important;-webkit-mask:none!important;mask:none!important}.degree-1 .note-marker.behavior-touch{color:#66bb6ac7!important;border-color:#66bb6ac7!important}.degree-3 .note-marker.behavior-touch,.degree-b3 .note-marker.behavior-touch{color:#ffb74dc7!important;border-color:#ffb74dc7!important}.degree-5 .note-marker.behavior-touch{color:#64b5f6c7!important;border-color:#64b5f6c7!important}.degree-b5 .note-marker.behavior-touch,.degree-sharp5 .note-marker.behavior-touch{color:#ba68c8c7!important;border-color:#ba68c8c7!important}.degree-7 .note-marker.behavior-touch,.degree-b7 .note-marker.behavior-touch{color:#ef5350c7!important;border-color:#ef5350c7!important}.degree-2 .note-marker.behavior-touch{color:#4dd0e1c7!important;border-color:#4dd0e1c7!important}.degree-4 .note-marker.behavior-touch{color:#9575cdc7!important;border-color:#9575cdc7!important}.degree-6 .note-marker.behavior-touch,.degree-b6 .note-marker.behavior-touch{color:#ab47bcc7!important;border-color:#ab47bcc7!important}.secondary .note-marker.behavior-touch,.tertiary .note-marker.behavior-touch{opacity:.72!important;box-shadow:none!important;border-style:dashed!important;border-width:2px!important}.note-marker.behavior-touch.touch-focus{border-width:3px!important;box-shadow:0 0 0 2px #ffffff29!important}.secondary .note-marker.behavior-touch,.tertiary .note-marker.behavior-touch{opacity:1!important;border-style:dashed!important;border-width:3px!important;box-shadow:0 0 0 2px #ffffff24,0 0 10px #ffffff1a!important}.note-marker.behavior-touch{opacity:.95!important;filter:none!important;z-index:5!important;background-color:#00000040!important;border-style:solid!important;border-width:2.5px!important;transform:scale(1)!important}.degree-1 .note-marker.behavior-touch{color:#81c784!important;border-color:#81c784!important;box-shadow:0 0 0 2px #81c78459,0 0 10px #81c78466!important}.degree-2 .note-marker.behavior-touch{color:#80deea!important;border-color:#80deea!important;box-shadow:0 0 0 2px #80deea59,0 0 10px #80deea66!important}.degree-3 .note-marker.behavior-touch,.degree-b3 .note-marker.behavior-touch{color:#ffcc80!important;border-color:#ffcc80!important;box-shadow:0 0 0 2px #ffcc8059,0 0 10px #ffcc8066!important}.degree-4 .note-marker.behavior-touch{color:#b39ddb!important;border-color:#b39ddb!important;box-shadow:0 0 0 2px #b39ddb59,0 0 10px #b39ddb66!important}.degree-5 .note-marker.behavior-touch{color:#90caf9!important;border-color:#90caf9!important;box-shadow:0 0 0 2px #90caf959,0 0 10px #90caf966!important}.degree-b5 .note-marker.behavior-touch,.degree-sharp5 .note-marker.behavior-touch,.degree-6 .note-marker.behavior-touch,.degree-b6 .note-marker.behavior-touch{color:#ce93d8!important;border-color:#ce93d8!important;box-shadow:0 0 0 2px #ce93d859,0 0 10px #ce93d866!important}.degree-7 .note-marker.behavior-touch,.degree-b7 .note-marker.behavior-touch{color:#f48fb1!important;border-color:#f48fb1!important;box-shadow:0 0 0 2px #f48fb159,0 0 10px #f48fb166!important}.note-marker.behavior-touch.touch-focus{opacity:.65!important;filter:saturate(.75)brightness()!important;z-index:3!important;background-color:#0006!important;border-style:dashed!important;border-width:2px!important;transform:scale(.85)!important;box-shadow:inset 0 0 5px #00000080!important}.degree-1 .note-marker.behavior-touch.touch-focus{color:#81c784!important;border-color:#81c784!important}.degree-2 .note-marker.behavior-touch.touch-focus{color:#80deea!important;border-color:#80deea!important}.degree-3 .note-marker.behavior-touch.touch-focus,.degree-b3 .note-marker.behavior-touch.touch-focus{color:#ffcc80!important;border-color:#ffcc80!important}.degree-4 .note-marker.behavior-touch.touch-focus{color:#b39ddb!important;border-color:#b39ddb!important}.degree-5 .note-marker.behavior-touch.touch-focus{color:#90caf9!important;border-color:#90caf9!important}.degree-b5 .note-marker.behavior-touch.touch-focus,.degree-sharp5 .note-marker.behavior-touch.touch-focus,.degree-6 .note-marker.behavior-touch.touch-focus,.degree-b6 .note-marker.behavior-touch.touch-focus{color:#ce93d8!important;border-color:#ce93d8!important}.degree-7 .note-marker.behavior-touch.touch-focus,.degree-b7 .note-marker.behavior-touch.touch-focus{color:#f48fb1!important;border-color:#f48fb1!important}.target-pill .passing{opacity:.7;font-style:italic}.landscape-warning{display:none}@media only screen and (orientation:portrait) and (width<=768px){.landscape-warning{color:#fff;z-index:10000;text-align:center;background-color:#121212;justify-content:center;align-items:center;width:100vw;height:100vh;font-family:Helvetica,Arial,sans-serif;display:flex;position:fixed;top:0;left:0}.warning-content{max-width:80%;padding:20px}.landscape-warning h1{text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:10px;font-size:2rem}.landscape-warning p{color:#ccc;margin-bottom:15px;font-size:1.2rem;line-height:1.5}.landscape-warning .rock-on{color:#fff;font-size:1.4rem;font-weight:700}.main-content{display:none}.phone-icon{border:3px solid #fff;border-radius:6px;width:40px;height:70px;margin-bottom:20px;animation:2s ease-in-out infinite rotate-phone;display:inline-block;position:relative}.phone-icon:after{content:"";background:#fff;width:20px;height:3px;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}@keyframes rotate-phone{0%,10%{transform:rotate(0)}40%,60%{transform:rotate(90deg)}90%,to{transform:rotate(0)}}}.progression-section{background:var(--panel-bg);border:1px solid var(--fret-wire);border-radius:12px;margin-bottom:12px;padding:16px}.section-header{border-bottom:1px solid #ffffff1a;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;display:flex}.section-number{background:var(--secondary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:flex}.section-title{font-size:14px;font-weight:700}.optional-badge{opacity:.6;font-size:11px;font-style:italic}.preset-label{opacity:.7;text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:700}.chip-separator{background:var(--fret-wire);opacity:.5;width:1px;height:24px;margin:0 12px}.audio-source-tabs{gap:4px;margin-bottom:12px;display:flex}.audio-tab{color:var(--text-color);cursor:pointer;background:#ffffff0d;border:1px solid #0000;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 12px;font-size:13px;transition:all .2s;display:flex}.audio-tab:hover{background:#ffffff1a}.audio-tab.active{background:var(--secondary);color:#fff;border-color:var(--secondary)}.audio-tab .tab-icon{font-size:16px}.audio-tab .tab-label{font-weight:600}.audio-source-content{min-height:60px}.manual-mode-hint{text-align:center;opacity:.6;padding:20px;font-size:13px}.youtube-input-row{gap:8px;margin-bottom:12px;display:flex}.youtube-url-input{border:1px solid var(--fret-wire);background:var(--bg-color);color:var(--text-color);border-radius:8px;flex:1;padding:10px 12px;font-size:14px}.youtube-load-btn{background:var(--secondary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-weight:600}.youtube-player-wrapper{margin-bottom:8px}.youtube-video-container{background:#000;border-radius:8px;width:100%;padding-bottom:56.25%;position:relative;overflow:hidden}.youtube-video-placeholder{text-align:center;opacity:.5;font-size:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.video-title-display{opacity:.7;text-align:center;margin-top:8px;font-size:12px}#audioContentYoutube .youtube-player-wrapper{justify-content:center;margin-bottom:8px;display:flex}#audioContentYoutube .youtube-video-container{aspect-ratio:16/9;background:#000;border-radius:8px;width:100%;max-width:480px;max-height:none;padding-bottom:0;position:relative;overflow:hidden}.playback-controls-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.cycle-hint{opacity:.6;margin-left:auto;font-size:12px}.analysis-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.analysis-header-left,.analysis-header-right{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.analysis-header select{border:1px solid var(--fret-wire);background:var(--bg-color);color:var(--text-color);border-radius:4px;padding:4px 8px;font-size:12px}#audioContentRecord .loop-recorder-section{background:0 0;border:none;margin:0}#audioContentRecord .loop-recorder-header{display:none}#audioContentRecord .loop-recorder-content{padding:0;display:block!important}.current-chord-display #dispChordName{color:var(--secondary);margin-bottom:4px;font-size:24px;font-weight:900}.current-chord-display #dispChordHint{opacity:.9;font-size:13px}@media (width<=740px){.fs-bottom-nav{display:grid}.main-content{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}body{padding-bottom:0!important}}@keyframes fs-slide-up{0%{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}@keyframes fs-card-in{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:translate(0)}}.fs-bottom-nav{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);z-index:200;height:62px;padding:0;padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid #ffffff1a;grid-template-columns:repeat(4,1fr);align-items:stretch;display:none;position:fixed;bottom:0;left:0;right:0}body.light-mode .fs-bottom-nav{border-top-color:#0000001a;box-shadow:0 -2px 12px #00000014}.fs-nav-btn{color:var(--text-color);opacity:.45;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 4px 2px;font-family:inherit;transition:opacity .15s,color .15s;display:flex;position:relative}.fs-nav-btn:after{content:"";background:var(--accent);border-radius:0 0 3px 3px;height:2px;transition:transform .2s;position:absolute;top:0;left:20%;right:20%;transform:scaleX(0)}.fs-nav-btn.fs-nav-active{opacity:1;color:var(--accent)}.fs-nav-btn.fs-nav-active:after{transform:scaleX(1)}.fs-nav-btn:active{opacity:.8;transform:scale(.95)}.fs-nav-icon{font-size:20px;line-height:1;display:block}.fs-nav-label{letter-spacing:.3px;font-size:10px;font-weight:700;line-height:1;display:block}@media (width<=740px){.fs-bottom-nav{display:grid}.main-content{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}body{padding-bottom:0!important}}.fs-onboard-overlay{z-index:9000;justify-content:center;align-items:flex-end;display:none;position:fixed;inset:0}.fs-onboard-overlay.fs-onboard-visible{display:flex}.fs-onboard-backdrop{-webkit-backdrop-filter:blur(2px);background:#0000008c;position:absolute;inset:0}.fs-onboard-card{z-index:1;background:var(--panel-bg);border:1px solid #ffffff26;border-radius:24px 24px 0 0;width:100%;max-width:520px;padding:28px 24px 36px;animation:.3s cubic-bezier(.34,1.56,.64,1) both fs-slide-up;position:relative;box-shadow:0 -8px 40px #0006}body.light-mode .fs-onboard-card{border-color:#0000001a;box-shadow:0 -8px 40px #00000026}.fs-onboard-step-dots{justify-content:center;gap:6px;margin-bottom:20px;display:flex}.fs-dot{background:var(--fret-wire);border-radius:50%;width:6px;height:6px;transition:background .2s,transform .2s}.fs-dot.fs-dot-active{background:var(--accent);transform:scale(1.4)}.fs-onboard-emoji{text-align:center;margin-bottom:12px;font-size:40px;line-height:1}.fs-onboard-title{text-align:center;color:var(--text-color);margin:0 0 10px;font-size:20px;font-weight:900}.fs-onboard-body{text-align:center;opacity:.8;color:var(--text-color);margin:0 0 24px;font-size:14px;line-height:1.55}.fs-onboard-actions{justify-content:space-between;align-items:center;gap:12px;display:flex}.fs-onboard-skip{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;opacity:.7;background:0 0;border-radius:12px;padding:10px 16px;font-family:inherit;font-size:13px;font-weight:700;transition:opacity .15s}.fs-onboard-skip:hover{opacity:1}.fs-onboard-next{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;flex:1;padding:12px 28px;font-family:inherit;font-size:15px;font-weight:900;transition:filter .15s,transform 80ms}.fs-onboard-next:hover{filter:brightness(1.1)}.fs-onboard-next:active{transform:scale(.97)}.fs-card-animating{animation:.22s both fs-card-in}.segmented-control{background-color:var(--panel-bg);border:1px solid var(--marker-border);-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:2px;width:fit-content;padding:2px;display:inline-flex;overflow:hidden}.segmented-control.mode-selector{border-radius:12px;width:100%;padding:3px;display:flex}.segment-btn{color:var(--text-color);opacity:.75;cursor:pointer;text-align:center;white-space:nowrap;background:0 0;border:none;border-radius:6px;outline:none;flex:1;padding:6px 12px;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1)}.segment-btn:hover{opacity:1;background-color:var(--btn-hover-bg)}.segment-btn.active{font-weight:700;box-shadow:0 2px 6px #00000040;background-color:var(--accent)!important;color:#fff!important;opacity:1!important}.segmented-control.mode-selector .segment-btn{border-radius:9px;padding:10px 16px;font-size:14px;font-weight:700}@media (width<=768px){.segmented-control{width:100%;display:flex}.segment-btn{padding:8px 10px;font-size:12px}.segmented-control.mode-selector .segment-btn{padding:8px 12px;font-size:13px}}.settings-modal-content{border:1px solid var(--marker-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1e1e1ee6!important;max-width:420px!important;box-shadow:0 12px 40px #0009!important}body.light-mode .settings-modal-content{background:#fffffff2!important;box-shadow:0 12px 40px #00000026!important}.settings-group{flex-direction:column;gap:8px;display:flex}.settings-group label{color:var(--text-color);opacity:.9;font-size:13px;font-weight:700}.hint-btn{color:#ffb74d;cursor:pointer;opacity:.92;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ff98001f;border:1px solid #ff980066;border-radius:10px;align-items:center;gap:6px;height:38px;padding:0 16px;font-size:13px;font-weight:800;transition:opacity .15s,background .15s,transform 50ms,border-color .15s;display:inline-flex}.hint-btn:hover{opacity:1;background:#ff980033;border-color:#ff980099}.hint-btn:active{transform:translateY(1px)scale(.97)}@keyframes hintPulse{0%{transform:scale(1);box-shadow:0 0 #ff9800cc,inset 0 0 4px #ff980080}50%{transform:scale(1.15);box-shadow:0 0 0 10px #ff980000,inset 0 0 8px #ff9800cc}to{transform:scale(1);box-shadow:0 0 #ff980000,inset 0 0 4px #ff980080}}.note-marker.hint-flash{color:#fff!important;z-index:10!important;background-color:#ff980059!important;border:3px solid #ff9800!important;animation:1.2s ease-in-out infinite hintPulse!important}body.light-mode .note-marker.hint-flash{color:#333!important;background-color:#f57c0040!important;border:3px solid #f57c00!important}.gallery-welcome-card{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#2196f31a,#4caf500d);border:1px solid #ffffff14;border-radius:12px;margin-bottom:20px;padding:18px}.gallery-welcome-card h3{color:var(--secondary);margin:0 0 6px;font-size:18px;font-weight:800}.gallery-welcome-card p{opacity:.85;margin:0;font-size:13px;line-height:1.5}.gallery-filters{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.filter-chip{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff0a;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:700;transition:all .15s}.filter-chip:hover{background:var(--btn-hover-bg);border-color:var(--secondary)}.filter-chip.active{background:var(--secondary);border-color:var(--secondary);color:#fff;box-shadow:0 4px 10px #2196f333}.jam-track-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:15px;margin-bottom:25px;display:grid}.jam-track-card{border:1px solid var(--fret-wire);cursor:pointer;background:#ffffff08;border-radius:12px;flex-direction:column;justify-content:space-between;min-height:140px;padding:16px;transition:all .2s ease-in-out;display:flex;position:relative;overflow:hidden}.jam-track-card:hover{border-color:var(--secondary);background:#ffffff0f;transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.jam-track-card .card-vibe-pill{text-transform:uppercase;letter-spacing:.5px;border-radius:10px;padding:2px 8px;font-size:10px;font-weight:800;position:absolute;top:12px;right:12px}.jam-track-card[data-vibe=pop] .card-vibe-pill{color:#64b5f6;background:#2196f333}.jam-track-card[data-vibe=sad] .card-vibe-pill{color:#f06292;background:#e91e6333}.jam-track-card[data-vibe=blues] .card-vibe-pill{color:#ffb74d;background:#ff980033}.jam-track-card[data-vibe=jazz] .card-vibe-pill{color:#ba68c8;background:#9c27b033}.jam-track-card[data-vibe=rock] .card-vibe-pill{color:#e57373;background:#f4433633}.jam-track-card .track-title{color:var(--text-color);margin:0 0 8px;padding-right:70px;font-size:16px;font-weight:800}.jam-track-card .track-meta{opacity:.75;gap:12px;margin-bottom:12px;font-size:12px;display:flex}.jam-track-card .track-meta span{align-items:center;gap:4px;display:flex}.jam-track-card .track-action{color:var(--secondary);text-align:center;background:#2196f31a;border:1px solid #2196f34d;border-radius:8px;padding:8px;font-size:13px;font-weight:700;transition:all .15s}.jam-track-card:hover .track-action{background:var(--secondary);color:#fff;border-color:var(--secondary)}.toggle-custom-builder-btn{border:1px dashed var(--fret-wire);color:var(--text-color);cursor:pointer;background:#ffffff08;border-radius:8px;width:100%;max-width:320px;padding:10px 20px;font-size:13px;font-weight:700;transition:all .15s}.toggle-custom-builder-btn:hover{background:var(--btn-hover-bg);border-color:var(--secondary);color:var(--secondary)}.toggle-custom-builder-btn.active{border-color:var(--accent);color:var(--accent);background:#4caf5014}.jam-player-console{box-sizing:border-box;z-index:50;background:linear-gradient(90deg,#1e1e1ecc,#141414e6);border:1px solid #ffffff0f;border-radius:14px;flex-direction:row;justify-content:space-between;align-items:center;gap:15px;height:125px;margin-bottom:15px;padding:8px 16px;display:flex;position:relative;overflow:visible;box-shadow:0 8px 30px #0006}.fine-tune-panel{justify-content:flex-end;align-items:center;margin:0 0 10px;display:flex}.fine-tune-anchor{align-items:center;display:inline-flex;position:relative}.fine-tune-toggle{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.fine-tune-trigger{height:32px;color:var(--text-color);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;opacity:.85;background:0 0;border:none;align-items:center;gap:6px;padding:0 6px;font-size:13px;transition:color .15s,opacity .15s;display:inline-flex}.fine-tune-trigger:hover{opacity:1;color:var(--secondary)}.fine-tune-trigger .ft-gear{font-size:13px;line-height:1}.fine-tune-toggle:checked~.fine-tune-trigger{color:var(--secondary);opacity:1}.fine-tune-toggle:focus-visible~.fine-tune-trigger{outline:2px solid var(--secondary);outline-offset:2px;border-radius:4px}.fine-tune-popover{box-shadow:none;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:60;background:0 0;border:none;align-items:center;gap:8px;margin-right:10px;padding:0;transition:opacity .15s,transform .15s,visibility .15s;display:flex;position:absolute;top:50%;right:100%;transform:translateY(-50%)translate(8px)}.fine-tune-toggle:checked~.fine-tune-popover{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)translate(0)}.fine-tune-select,.fine-tune-btn{border:1px solid var(--fret-wire);background:var(--bg-color);height:30px;color:var(--text-color);cursor:pointer;box-sizing:border-box;border-radius:6px;padding:0 12px;font-size:13px}.fine-tune-select{padding:0 8px}.fine-tune-btn:hover{background:var(--btn-hover-bg)}.fine-tune-nudge-group{border:1px solid var(--fret-wire);border-radius:6px;display:inline-flex;overflow:hidden}.fine-tune-nudge-group .fine-tune-btn.nudge{border:0;border-radius:0}.fine-tune-nudge-group .fine-tune-btn.nudge:first-child{border-right:1px solid var(--fret-wire)}.fine-tune-btn.save{background:var(--accent);border-color:var(--accent);color:#fff}.fine-tune-btn.save:hover{filter:brightness(1.08)}.fine-tune-btn.cancel{opacity:.85;background:0 0}.fine-tune-btn.cancel:hover{opacity:1}.fine-tune-btn.resync{width:34px;padding:0;font-size:14px}.fine-tune-btn.dev-export{width:auto;padding:0 10px}.fine-tune-status{color:var(--text-color);opacity:.7;font-size:12px}#scaleControls[style*="display: flex"],#triadControls[style*="display: flex"],#seventhControls[style*="display: flex"]{display:contents!important}.triad-hint{opacity:.75;color:var(--text-color);flex-basis:100%;margin-top:2px;font-size:12px}.yt-play-btn{border:1px solid var(--fret-wire);background:var(--panel-bg);width:34px;height:34px;color:var(--text-color);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;line-height:1;transition:background .15s,border-color .15s;display:flex}.yt-play-btn:hover{background:var(--btn-hover-bg);border-color:var(--secondary)}.jam-player-console[style*=block]{display:flex!important}.console-left-panel{flex:none;align-items:center;gap:12px;display:flex}.console-left-panel .youtube-player-wrapper{flex:0 0 140px;width:140px;margin:0}.console-left-panel .youtube-video-container{width:140px;height:79px;padding-bottom:0;position:relative;overflow:hidden}.console-left-panel #youtubePlayerContainer,.console-left-panel #youtubePlayerContainer iframe,.console-left-panel .youtube-video-container iframe{border:0;width:100%;height:100%;position:absolute;top:0;left:0}.console-mid-panel{flex-direction:column;flex:auto;justify-content:center;gap:4px;max-width:300px;display:flex}.console-right-panel{border-left:1px solid #ffffff14;flex-direction:column;flex:auto;justify-content:center;min-width:220px;height:100%;padding-left:15px;display:flex}body.light-mode .console-right-panel{border-left-color:#00000014}.console-right-panel .current-chord-display{text-align:left;height:auto;min-height:auto;box-shadow:none;background:0 0;border:none;flex-direction:column;align-items:flex-start;margin:0;padding:0;display:none}.console-right-panel .current-chord-display.show{display:flex}.console-title-group{flex-direction:column;display:flex}.console-song-title{color:var(--text-color);text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:900;overflow:hidden}.console-song-meta{opacity:.7;gap:8px;margin-top:1px;font-size:11px;display:flex}.console-back-btn{border:1px solid var(--fret-wire);color:var(--text-color);cursor:pointer;background:#ffffff0a;border-radius:6px;align-items:center;gap:4px;height:fit-content;padding:4px 8px;font-size:11px;font-weight:700;transition:all .15s;display:inline-flex}.console-back-btn:hover{border-color:var(--danger);color:#ff8a80;background:#f4433626}.chord-analysis-cards{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;box-sizing:border-box;align-items:stretch;gap:8px;min-height:92px;margin-bottom:12px;padding-bottom:6px;flex-flow:row!important;height:auto!important;display:flex!important;overflow-x:auto!important}.chord-analysis-cards::-webkit-scrollbar{height:4px}.chord-analysis-cards::-webkit-scrollbar-track{background:0 0}.chord-analysis-cards::-webkit-scrollbar-thumb{background-color:#ffffff26;border-radius:4px}.chord-analysis-card{box-sizing:border-box;border:1px solid var(--fret-wire);cursor:pointer;background:#ffffff05;border-radius:8px;flex-direction:column;justify-content:space-between;transition:transform .15s,background .15s;display:flex;flex:0 0 165px!important;min-height:auto!important;margin:0!important;padding:6px 8px!important}.chord-analysis-card:hover{background:var(--btn-hover-bg);transform:translateY(-1px)}.chord-analysis-card.active{border-color:var(--secondary);background:#2196f31a}.chord-analysis-card div{line-height:1.1;margin-bottom:2px!important}.chord-analysis-card span{font-size:11px!important}.chord-analysis-card .target-pill{padding:1px 4px!important;font-size:9px!important}body.light-mode .chord-analysis-cards{scrollbar-color:#00000026 transparent}body.light-mode .chord-analysis-cards::-webkit-scrollbar-thumb{background-color:#00000026}body.light-mode .gallery-welcome-card{background:linear-gradient(135deg,#2196f314,#4caf500a);border:1px solid #0000000f}body.light-mode .jam-track-card{background:#00000005}body.light-mode .jam-track-card:hover{background:#0000000a}body.light-mode .jam-player-console{background:linear-gradient(90deg,#fff,#f9f9f9);border:1px solid #0000000f;box-shadow:0 8px 30px #00000014}@media (height<=520px) and (orientation:landscape){.current-chord-display{height:70px!important;margin-bottom:6px!important;padding:6px!important}.current-chord-display #dispChordName{margin-bottom:2px!important;font-size:18px!important}.current-chord-display #dispChordHint{font-size:11px!important}}