*,*: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: #f6f2e8;--bg-1: #fffaf0;--surface-0: #fffdf8;--surface-1: #f0e8d8;--text-0: #2f2923;--text-1: #5f554c;--accent-main: #4d9fb0;--accent-correct: #2d9b6f;--accent-wrong: #d4583a;--accent-note: #e6a236;--line-0: #c9bda7;--line-1: #a89779;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--shadow-card: 0 6px 18px rgba(47, 41, 35, .08);--font-heading: "M PLUS 1p", sans-serif;--font-body: "M PLUS 1p", 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)}#app{max-width:1100px;margin-inline:auto;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}@media(min-width:768px){#app{padding:24px}}.app-header{text-align:center;margin-bottom:24px}.app-title{font-family:var(--font-heading);font-weight:700;font-size:1.25rem;color:var(--text-0)}@media(min-width:768px){.app-title{font-size:1.5rem}}.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:2px solid var(--line-0);color:var(--text-0);font-family:var(--font-heading);font-weight:700;font-size:1rem;text-align:center;transition:border-color .15s}.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:#2d9b6f1a;border-left-color:var(--accent-correct)}.feedback-wrong{background:#d4583a1a;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:center;gap:1px;line-height:.95}.piano-key-label-sharp,.piano-key-label-flat{display:block}.piano-compact .piano-key-label{bottom:8px;font-family:var(--font-heading);font-size:.92rem;font-weight:800;letter-spacing:-.02em;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:1px;line-height:.92}.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:8px;font-size:.86rem;font-weight:800;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: 18px;--board-height: calc(var(--edge-gap) * 2 + var(--string-gap) * 5);min-width:760px;width:100%}.fretboard-corner{width:52px}.fretboard-header,.fretboard-body,.fretboard-foot{display:grid;grid-template-columns:52px 1fr}.fretboard-fret-nums,.fretboard-dots{display:grid;grid-template-columns:repeat(13,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:4px 0 18px}.fretboard-labels{position:relative;height:var(--board-height)}.fretboard-string-label{font-family:var(--font-mono);font-size:.7rem;font-weight:500;color:var(--text-1);position:absolute;left:0;right:6px;top:calc(var(--edge-gap) + var(--string-gap) * var(--string-index));transform:translateY(-50%);text-align:center;line-height:1;white-space:nowrap}.fretboard-board{position:relative;height:var(--board-height);background:var(--surface-1)}.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:920px}.fretboard-corner{width:64px}.fretboard-header,.fretboard-body,.fretboard-foot{grid-template-columns:64px 1fr}.fretboard-string-label{font-size:.75rem;right:8px}.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:18px 0 2px;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:22px;height:22px;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(min-width:768px){.fretboard-note-label{width:26px;height:26px;font-size:.64rem}}.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}.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-heading);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-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;font-size:.8rem;color:var(--text-1)}.chord-legend-item{display:inline-flex;align-items:center;gap:4px}.chord-legend-marker{display:inline-block;width:14px;height:14px;border-radius:50%}.chord-legend-selected{background:var(--accent-main)}.chord-legend-mute{background:var(--accent-wrong)}.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){.chord-m-column{width:34px}}.screen-guide{font-size:.85rem;color:var(--text-1);margin-bottom:12px;line-height:1.5}.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}