*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;touch-action:manipulation}body{min-height:100dvh;line-height:1.5;-webkit-font-smoothing:antialiased;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}ul,ol{list-style:none}:root{--bg-0: #f5f0e6;--bg-1: #faf6ee;--surface-0: #fffcf5;--surface-1: #f0ead8;--text-0: #1a1a2e;--text-1: #4a4a5c;--text-2: #8a8a98;--accent-main: #2b4c7e;--accent-warm: #c4553a;--accent-correct: #3a7d5c;--accent-wrong: #c4553a;--accent-note: #c4553a;--line-0: #d8d0c0;--line-1: #c0b8a4;--radius-sm: 3px;--radius-md: 6px;--radius-lg: 10px;--shadow-card: 0 2px 12px rgba(0, 0, 0, .04);--font-heading: "Cormorant Garamond", "Noto Sans JP", serif;--font-body: "Noto Sans JP", sans-serif;--font-mono: "JetBrains Mono", monospace}body{font-family:var(--font-body);font-weight:400;color:var(--text-0);background-color:var(--bg-0);background-image:repeating-linear-gradient(0deg,transparent,transparent 24px,rgba(26,26,46,.04) 24px,rgba(26,26,46,.04) 25px)}#app{max-width:720px;margin-inline:auto;padding:24px 20px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg-1);min-height:100vh;border-left:1px solid var(--line-0);border-right:1px solid var(--line-0);box-shadow:-20px 0 40px #00000008,20px 0 40px #00000008}@media(min-width:768px){#app{padding:32px 28px}}.app-header{text-align:center;margin-bottom:28px;padding-bottom:18px;position:relative}.app-header:after{content:"";position:absolute;bottom:0;left:10%;right:10%;height:5px;background:repeating-linear-gradient(0deg,var(--line-0),var(--line-0) 1px,transparent 1px,transparent 3px)}.app-nav-link{font-family:var(--font-body);font-size:.78rem;font-weight:500;color:var(--text-2);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}.app-nav-link:hover{color:var(--accent-main);border-bottom-color:var(--accent-main)}.app-nav-link+.app-nav-link{margin-left:20px}.app-title{font-family:var(--font-heading);font-weight:600;font-size:1.6rem;color:var(--text-0);letter-spacing:.04em;margin-bottom:10px}@media(min-width:768px){.app-title{font-size:1.8rem}}.card{background:var(--surface-0);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:20px;margin-bottom:16px}.card-title{font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:var(--text-1);margin-bottom:12px}.segmented{display:flex;flex-wrap:wrap;gap:8px}.segmented-btn{flex:1 1 auto;min-width:80px;min-height:44px;padding:8px 12px;border:2px solid var(--line-0);border-radius:var(--radius-sm);background:var(--surface-0);color:var(--text-1);font-size:.9rem;font-weight:500;text-align:center;transition:background-color .15s,border-color .15s,color .15s}.segmented-btn:hover,.segmented-btn:focus-visible{border-color:var(--accent-main);color:var(--accent-main)}.segmented-btn[aria-pressed=true]{background:var(--accent-main);border-color:var(--accent-main);color:#fff}.segmented-btn:focus-visible{outline:2px solid var(--accent-main);outline-offset:2px}.btn-primary{display:block;width:100%;min-height:48px;padding:12px 24px;border-radius:var(--radius-md);background:var(--accent-main);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:1rem;text-align:center;transition:opacity .15s}.btn-primary:hover{opacity:.9}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-primary:focus-visible{outline:2px solid var(--accent-main);outline-offset:2px}.btn-secondary{display:block;width:100%;min-height:48px;padding:12px 24px;border-radius:var(--radius-md);background:var(--surface-0);border:1.5px solid var(--line-0);color:var(--text-1);font-family:var(--font-body);font-weight:600;font-size:.9rem;text-align:center;transition:border-color .2s,color .2s}.btn-secondary:hover{border-color:var(--accent-main);color:var(--accent-main)}.btn-secondary:focus-visible{outline:2px solid var(--accent-main);outline-offset:2px}.result-card{text-align:center;padding:32px 20px}.result-mode{font-family:var(--font-heading);font-weight:600;font-size:.9rem;color:var(--text-1);margin-bottom:8px}.result-score{font-family:var(--font-mono);font-weight:700;font-size:3rem;color:var(--accent-main);margin-bottom:8px}.result-rate{font-size:1.1rem;color:var(--text-1)}.result-actions{display:flex;flex-direction:column;gap:12px}.stats-panel{display:flex;justify-content:center;gap:24px;padding:16px;background:var(--surface-1);border-radius:var(--radius-sm)}.stat-item{text-align:center}.stat-value{font-family:var(--font-mono);font-weight:500;font-size:1.25rem;color:var(--text-0)}.stat-label{font-size:.8rem;color:var(--text-1)}.quiz-header{padding:12px 0;margin-bottom:16px;border-bottom:1px solid var(--line-0)}.quiz-header-top{display:flex;justify-content:space-between;align-items:center}.quiz-header-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.quiz-name{font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--text-0)}.quiz-stats{display:flex;gap:12px;align-items:center}.quiz-progress{font-family:var(--font-mono);font-weight:500;font-size:.95rem;color:var(--text-1)}.quiz-score{font-family:var(--font-mono);font-weight:500;font-size:.95rem;color:var(--accent-main)}.btn-finish{font-family:var(--font-heading);font-size:.85rem;padding:6px 16px;border:1px solid var(--line-0);border-radius:var(--radius-sm);background:transparent;color:var(--text-1);cursor:pointer;min-height:36px}.question-area{background:var(--surface-0);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:24px;margin-bottom:16px;text-align:center;min-height:80px}.question-prompt{font-family:var(--font-heading);font-weight:700;font-size:2rem;color:var(--text-0);margin-bottom:8px}.question-hint{font-size:.9rem;color:var(--text-1)}.question-visual{font-size:.9rem;color:var(--text-1);padding:20px}.answer-piano{position:relative;display:flex;height:120px;margin-bottom:16px}@media(min-width:768px){.answer-piano{height:140px}}.answer-btn{font-size:.85rem;font-weight:500;text-align:center;border:none;cursor:pointer;transition:background-color .15s}.answer-btn:focus-visible{outline:2px solid var(--accent-main);outline-offset:-2px;z-index:3}.answer-btn:disabled{cursor:not-allowed}.answer-white-key{flex:1;background:var(--surface-0);border:1px solid var(--line-0);border-radius:0 0 var(--radius-sm) var(--radius-sm);color:var(--text-0);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}.answer-white-key:hover:not(:disabled){background:var(--surface-1)}.answer-black-key{position:absolute;top:0;width:calc(100% / 7 * .6);height:60%;transform:translate(-50%);background:var(--text-0);color:var(--surface-0);border-radius:0 0 3px 3px;font-size:.7rem;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}.answer-black-key:hover:not(:disabled){background:var(--text-1)}.answer-btn.answer-correct{background:var(--accent-correct)!important;color:#fff}.answer-btn.answer-wrong{background:var(--accent-wrong)!important;color:#fff}.circular-answer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.circular-answer-btn{width:100%;aspect-ratio:1;min-width:44px;min-height:44px;border-radius:50%;border:2px solid var(--line-0);background:var(--surface-0);color:var(--text-0);font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s}.circular-answer-btn:hover:not(:disabled){border-color:var(--accent-main);color:var(--accent-main)}.circular-answer-btn:focus-visible{outline:2px solid var(--accent-main);outline-offset:2px}.circular-answer-btn:disabled{cursor:not-allowed}.circular-answer-btn.answer-correct{background:var(--accent-correct);border-color:var(--accent-correct);color:#fff}.circular-answer-btn.answer-wrong{background:var(--accent-wrong);border-color:var(--accent-wrong);color:#fff}@media(min-width:768px){.circular-answer-grid{gap:12px;max-width:400px;margin-left:auto;margin-right:auto}.circular-answer-btn{font-size:.9rem}}.feedback-panel{padding:16px;border-radius:var(--radius-sm);margin-bottom:16px;border-left:4px solid}.feedback-correct{background:#3a7d5c14;border-left-color:var(--accent-correct)}.feedback-wrong{background:#c4553a14;border-left-color:var(--accent-wrong)}.feedback-result{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;margin-bottom:4px}.feedback-correct .feedback-result{color:var(--accent-correct)}.feedback-wrong .feedback-result{color:var(--accent-wrong)}.feedback-answer{font-size:.9rem;color:var(--text-1)}.btn-next-question{display:block;width:100%;max-width:320px;margin:12px auto 0;padding:12px 24px;font-family:var(--font-heading);font-size:1rem;font-weight:600;color:var(--bg-0);background:var(--accent-wrong);border:none;border-radius:var(--radius-sm);cursor:pointer}.piano-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.piano{position:relative;width:min(100%,880px);min-width:320px;height:140px;margin:0 auto;display:flex}.piano-compact{width:100%;min-width:0;height:84px}@media(min-width:768px){.piano{height:180px}.piano-compact{width:min(100%,880px);min-width:620px;height:96px}}.piano-key-white{position:relative;flex:1;border:1px solid var(--line-0);border-radius:0 0 var(--radius-sm) var(--radius-sm);background:#fff}.piano-key-white[data-active=true]{background:var(--accent-main)}.piano-key-white[data-root=true]{background:var(--accent-note)}.piano-key-black{position:absolute;top:0;width:calc(100% / 7 * .6);height:62%;background:var(--text-0);border-radius:0 0 4px 4px;z-index:1}.piano-compact .piano-key-black{width:calc(100% / var(--piano-white-count) * .62);height:58%}.piano-key-black[data-active=true]{background:color-mix(in srgb,var(--accent-main) 78%,white);outline:2px solid var(--accent-main)}.piano-key-black[data-root=true]{background:var(--accent-note);outline:2px solid var(--accent-note)}.piano-key-clickable{cursor:pointer}.piano-key-clickable.piano-key-white:hover{background:#f0ede8}.piano-key-clickable.piano-key-white[data-active=true]:hover{background:var(--accent-main)}.piano-key-clickable.piano-key-white[data-root=true]:hover{background:var(--accent-note)}.piano-key-clickable.piano-key-black:hover{background:var(--text-1)}.piano-key-clickable.piano-key-black[data-active=true]:hover{background:color-mix(in srgb,var(--accent-main) 78%,white)}.piano-key-clickable.piano-key-black[data-root=true]:hover{background:var(--accent-note)}.piano-key-label{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:.6rem;font-weight:600;pointer-events:none;line-height:1}.piano-key-label-dual{display:flex;flex-direction:column;align-items:stretch;gap:1px;line-height:.95}.piano-key-label-sharp,.piano-key-label-flat{display:block;width:100%;text-align:center}.piano-compact .piano-key-label{bottom:6px;font-family:"M PLUS 1 Code",var(--font-mono);font-size:clamp(.66rem,1.9vw,.76rem);font-weight:600;letter-spacing:-.05em;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.24),0 0 2px rgba(0,0,0,.16)}.piano-compact .piano-key-label-dual{gap:2px;line-height:1}.piano-key-white .piano-key-label{color:var(--text-1)}.piano-key-white[data-active=true] .piano-key-label,.piano-key-white[data-root=true] .piano-key-label,.piano-key-black .piano-key-label{color:#fff}.piano-key-black .piano-key-label{bottom:4px;font-size:.5rem}.piano-key-black[data-active=true] .piano-key-label{color:#fff}.piano-compact .piano-key-black .piano-key-label{bottom:4px;font-family:"M PLUS 1 Code",var(--font-mono);font-size:clamp(.52rem,1.5vw,.62rem);font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.34),0 0 2px rgba(0,0,0,.18)}.explorer-piano-container{margin:12px 0 0}.chord-piano-container{margin:16px 0 12px}.fretboard-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.fretboard{--fret-count: 13;--string-gap: 36px;--edge-gap: 22px;--board-height: calc(var(--edge-gap) * 2 + var(--string-gap) * 5);min-width:calc(var(--fret-count) * 56px);width:max(100%,calc(var(--fret-count) * 56px))}.fretboard-header,.fretboard-body,.fretboard-foot{display:block}.fretboard-body{position:relative}.fretboard-fret-nums,.fretboard-dots{display:grid;grid-template-columns:repeat(var(--fret-count),minmax(0,1fr))}.fretboard-fret-num{font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:var(--text-1);text-align:center;padding:2px 0 8px}.fretboard-board{position:relative;height:var(--board-height);background:var(--surface-1);overflow:hidden}.fretboard-fret-line{position:absolute;top:0;bottom:0;left:calc((var(--fret-index) + 1) * (100% / var(--fret-count)));border-left:1px solid var(--line-0);z-index:1}.fretboard-nut-line{border-left:4px solid var(--text-0)}.fretboard-row{--string-thickness: 2px;position:absolute;left:0;right:0;top:calc(var(--edge-gap) + var(--string-gap) * var(--string-index));height:0;z-index:2}.fretboard-row.fretboard-string-1{--string-thickness: .75px}.fretboard-row.fretboard-string-2{--string-thickness: 1px}.fretboard-row.fretboard-string-3{--string-thickness: 1.5px}.fretboard-row.fretboard-string-4{--string-thickness: 2px}.fretboard-row.fretboard-string-5{--string-thickness: 2.5px}.fretboard-row.fretboard-string-6{--string-thickness: 3px}.fretboard-string-line{position:absolute;left:0;right:0;top:0;border-top:var(--string-thickness) solid var(--text-1)}.fretboard-cell{position:absolute;top:calc(-1 * var(--string-gap) / 2);left:calc(var(--fret-index) * (100% / var(--fret-count)));width:calc(100% / var(--fret-count));height:var(--string-gap)}.fretboard-marker{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--accent-main);z-index:3}.fretboard-marker-selected{background:var(--accent-main)}.fretboard-marker-labeled{color:#fff;font-family:var(--font-mono);width:24px;height:24px;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;letter-spacing:-.02em;text-shadow:0 1px 1px rgba(0,0,0,.22),0 0 2px rgba(0,0,0,.12)}.fretboard-marker-bass{background:var(--accent-note);box-shadow:0 0 0 2px var(--surface-0),0 0 0 5px color-mix(in srgb,var(--accent-note) 45%,transparent);transform:translate(-50%,-50%) scale(1.1)}.fretboard-marker-correct{background:var(--accent-correct)}.fretboard-marker-wrong{background:var(--accent-wrong)}.fretboard-marker-missed{background:var(--accent-note);border:2px dashed var(--accent-correct)}@media(min-width:768px){.fretboard{min-width:calc(var(--fret-count) * 64px);width:max(100%,calc(var(--fret-count) * 64px))}.fretboard-marker{width:24px;height:24px}.fretboard-marker-labeled{width:28px;height:28px;font-size:.72rem}}.fretboard-dot-cell{font-size:.6rem;color:var(--text-1);text-align:center;padding:6px 0 0;letter-spacing:2px}.fretboard-cell-clickable{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.fretboard-cell-clickable:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:var(--text-1);opacity:0;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .15s;pointer-events:none}@media(hover:hover)and (pointer:fine){.fretboard-cell-clickable:hover .fretboard-marker,.fretboard-cell-clickable:hover:after{opacity:.5}}@media(min-width:768px){.fretboard-cell-clickable:after{width:24px;height:24px}}.reverse-score-display{text-align:center;font-family:var(--font-mono);font-size:1.1rem;font-weight:500;color:var(--accent-main);padding:8px;margin-bottom:8px}.explorer-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}.explorer-controls .btn-secondary{flex:1 1 100%}.explorer-controls .btn-note-labels-toggle{flex:1 1 auto}.btn-note-labels-toggle{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:var(--radius-md);background:var(--surface-0);border:2px solid var(--line-0);color:var(--text-0);font-family:var(--font-heading);font-weight:600;font-size:.85rem;cursor:pointer;transition:border-color .15s,color .15s;white-space:nowrap}.btn-note-labels-toggle[aria-pressed=true]{border-color:var(--accent-main);color:var(--accent-main)}.fretboard-note-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--surface-0);border:1px solid var(--line-0);color:var(--text-0);font-family:var(--font-mono);font-size:.58rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;z-index:2;pointer-events:none;overflow:hidden;text-overflow:ellipsis}@media(max-width:767px){.fretboard-marker-labeled{width:26px;height:26px;font-size:.7rem}.fretboard-note-label{width:26px;height:26px;font-size:.64rem}}@media(min-width:768px){.fretboard-note-label{width:28px;height:28px;font-size:.64rem}}.fretboard-note-label-bass{background:var(--accent-note);border-color:var(--accent-note);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22);box-shadow:0 0 0 2px var(--surface-0),0 0 0 4px color-mix(in srgb,var(--accent-note) 45%,transparent);transform:translate(-50%,-50%) scale(1.1);z-index:4}.fretboard-note-label-selected{background:var(--accent-main);border-color:var(--accent-main);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)}.fretboard-marker-highlight{background:var(--accent-note);z-index:3}.fretboard-cell .fretboard-marker-highlight+.fretboard-marker+.fretboard-note-label,.fretboard-cell .fretboard-marker-highlight~.fretboard-note-label{background:var(--accent-note);color:#fff;border-color:var(--accent-note);z-index:5}.fretboard-cell .fretboard-marker[data-active=true]~.fretboard-note-label{background:var(--accent-main);color:#fff;border-color:var(--accent-main);z-index:5}.fretboard-marker-mute{background:var(--accent-wrong);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}.fretboard-marker-mute-gray{background:var(--text-1);box-shadow:none}.chord-m-btn{width:32px;height:32px;border-radius:50%;border:2px solid var(--line-0);background:var(--surface-0);color:var(--text-1);font-family:var(--font-body);font-weight:700;font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s,box-shadow .15s;position:absolute;transform:translateY(-50%)}.chord-m-btn[aria-pressed=true]{background:var(--accent-wrong);border-color:var(--accent-wrong);color:#fff;box-shadow:0 0 6px #d4583a80}.chord-m-btn:focus-visible{outline:2px solid var(--accent-main);outline-offset:2px}.chord-action-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}.chord-action-row .btn-primary,.chord-action-row .btn-secondary{min-height:44px}@media(min-width:768px){.chord-action-row{grid-template-columns:repeat(2,minmax(0,1fr))}}.chord-fretboard-row{display:flex;gap:0}.chord-m-column{position:relative;width:40px;flex-shrink:0}@media(max-width:767px){.fretboard{min-width:calc(var(--fret-count) * 52px);width:max(100%,calc(var(--fret-count) * 52px))}.fretboard-fret-num{padding-bottom:6px}.fretboard-dot-cell{padding-top:4px}.chord-m-column{width:28px}.chord-m-btn{width:26px;height:26px;font-size:.68rem;border-width:1.5px}}.quiz-mode-toggle{display:flex;justify-content:center;gap:0;margin-bottom:14px;border:1px solid var(--line-0);border-radius:var(--radius-sm);overflow:hidden;max-width:240px;margin-left:auto;margin-right:auto}.quiz-mode-btn{flex:1;min-height:36px;padding:6px 16px;border:0;background:var(--surface-0);color:var(--text-2);font-family:var(--font-body);font-size:.82rem;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s}.quiz-mode-btn+.quiz-mode-btn{border-left:1px solid var(--line-0)}.quiz-mode-btn-active{background:var(--accent-main);color:#fff}.quiz-mode-btn:focus-visible{outline:2px solid var(--accent-main);outline-offset:-2px;position:relative;z-index:1}.screen-guide{font-size:.85rem;color:var(--text-1);margin-bottom:12px;line-height:1.5}.chord-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-bottom:10px}.chord-setup-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.chord-select-field{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--text-1);white-space:nowrap}.chord-segmented-toggle{display:inline-flex;align-items:stretch;border:1px solid var(--line-0);border-radius:4px;overflow:hidden;background:var(--surface-0)}.chord-segmented-toggle-btn{min-height:30px;padding:4px 10px;border:0;border-right:1px solid var(--line-0);background:transparent;color:var(--text-1);font-family:var(--font-heading);font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}.chord-segmented-toggle-btn:last-child{border-right:0}.chord-segmented-toggle-btn[data-active=true]{background:var(--accent-main);color:#fff}.chord-segmented-toggle-btn:focus-visible{position:relative;z-index:1;outline:2px solid var(--accent-main);outline-offset:-2px}.chord-select{min-width:90px;min-height:30px;padding:4px 24px 4px 10px;border:1px solid var(--line-0);border-radius:0;background-color:var(--surface-0);background-image:linear-gradient(45deg,transparent 50%,var(--text-1) 50%),linear-gradient(135deg,var(--text-1) 50%,transparent 50%);background-position:calc(100% - 11px) calc(50% - 1px),calc(100% - 7px) calc(50% - 1px);background-size:4px 4px,4px 4px;background-repeat:no-repeat;color:var(--text-0);font-family:var(--font-heading);font-size:.8rem;font-weight:700;appearance:none;-webkit-appearance:none;outline:none}.chord-select-capo{min-width:58px}.chord-select:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-main) 28%,transparent)}.chord-setup-summary-inline{margin-bottom:10px;font-size:.78rem;color:var(--text-1);line-height:1.4}.chord-toggle-btn{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border:1px solid var(--line-0);border-radius:4px;background:var(--surface-0);color:var(--text-0);font-family:var(--font-heading);font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}.chord-toggle-btn[aria-pressed=true]{background:var(--accent-main);border-color:var(--accent-main);color:#fff}.chord-toggle-btn:focus-visible{outline:2px solid var(--accent-main);outline-offset:2px}@media(max-width:767px){.chord-toolbar{align-items:flex-start}}.quiz-string-labels{position:absolute;left:-40px;top:0;bottom:0;width:36px;z-index:3}.quiz-string-label{position:absolute;top:calc(var(--edge-gap) + var(--string-gap) * (var(--string-index, 0)));transform:translateY(-50%);font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--text-1);white-space:nowrap}.quiz-string-label[data-string="1"]{--string-index: 0}.quiz-string-label[data-string="2"]{--string-index: 1}.quiz-string-label[data-string="3"]{--string-index: 2}.quiz-string-label[data-string="4"]{--string-index: 3}.quiz-string-label[data-string="5"]{--string-index: 4}.quiz-string-label[data-string="6"]{--string-index: 5}.quiz-cell-active{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--surface-0);border:2px solid var(--line-0);color:var(--text-0);font-family:var(--font-heading);font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color .15s,background-color .15s}.quiz-cell-active:hover{border-color:var(--accent-main)}.quiz-cell-selected{background:var(--accent-main);border-color:var(--accent-main);color:#fff}.quiz-cell-answered{background:var(--surface-1);border-color:var(--line-1);color:var(--text-0)}.quiz-cell-correct{background:var(--accent-correct);border-color:var(--accent-correct);color:#fff;cursor:default}.quiz-cell-incorrect{background:var(--accent-wrong);border-color:var(--accent-wrong);color:#fff;cursor:default;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;font-family:var(--font-heading);font-size:.62rem;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;z-index:3}.quiz-cell-answer-label{display:block;font-size:.48rem;color:#fff;opacity:.8;margin-top:1px}.quiz-cell-accidental{opacity:.3}.quiz-palette{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0}.quiz-palette-btn{min-width:50px;min-height:50px;padding:8px 14px;border:1.5px solid var(--line-0);border-radius:var(--radius-sm);background:var(--surface-0);color:var(--text-0);font-family:var(--font-heading);font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 1px 3px #0000000f}.quiz-palette-btn:hover:not(:disabled){border-color:var(--accent-main);color:var(--accent-main);box-shadow:0 2px 8px #2b4c7e1f;transform:translateY(-1px)}.quiz-palette-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px #00000014}.quiz-palette-btn:disabled{opacity:.4;cursor:not-allowed}.quiz-palette-btn-clear{color:var(--accent-wrong);border-color:color-mix(in srgb,var(--accent-wrong) 50%,var(--line-0));font-family:var(--font-body);font-size:1rem}.quiz-palette-btn-clear:hover:not(:disabled){background:var(--accent-wrong);color:#fff}.quiz-counter{text-align:center;font-family:var(--font-mono);font-size:.95rem;font-weight:500;color:var(--text-1);margin:8px 0}.quiz-result-summary{text-align:center;font-family:var(--font-body);font-weight:700;font-size:1rem;color:var(--accent-main);padding:12px;margin-top:12px}.quiz-result-perfect{color:var(--accent-correct)}.quiz-fretboard-container{padding-left:40px}@media(min-width:768px){.quiz-cell-active,.quiz-cell-incorrect{width:30px;height:30px;font-size:.68rem}.quiz-cell-answer-label{font-size:.52rem}}.flashcard-table-wrapper{max-height:50vh;overflow-y:auto;margin-bottom:16px;border-radius:var(--radius-md);border:1px solid var(--line-0);background:var(--surface-0);box-shadow:var(--shadow-card)}.flashcard-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--font-body);font-size:.88rem}.flashcard-table thead{position:sticky;top:0;z-index:1}.flashcard-table th{background:var(--surface-1);color:var(--text-1);font-family:var(--font-heading);font-weight:600;font-size:.82rem;letter-spacing:.06em;padding:10px 12px;text-align:center;border-bottom:2px solid var(--line-1)}.flashcard-table td{padding:9px 12px;text-align:center;border-bottom:1px solid rgba(0,0,0,.05);color:var(--text-1)}.flashcard-table td[data-col=note]{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:var(--text-0)}.flashcard-table td[data-col=result]{font-family:var(--font-mono);font-size:.82rem}.flashcard-table tr:nth-child(2n){background:#00000004}.flashcard-row-current{background:#2b4c7e0f}.flashcard-row-current td{color:var(--text-0);font-weight:600}.flashcard-row-current td:first-child{color:var(--accent-main)}.flashcard-row-correct{background:#3a7d5c14}.flashcard-row-correct td[data-col=result]{color:var(--accent-correct);font-weight:600}.flashcard-row-incorrect{background:#c4553a14}.flashcard-row-incorrect td[data-col=result]{color:var(--accent-wrong);font-weight:600}.flashcard-action-row{display:flex;justify-content:center;margin-top:16px}.flashcard-action-row .btn-secondary{min-width:200px}.explorer-note-display{text-align:center;font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--text-0);padding:8px 0 6px;margin-top:10px;min-height:32px;display:flex;align-items:center;justify-content:center}