*,:before,:after{box-sizing:border-box}body{margin:0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8f9fa;--surface:#fff;--border:#e2e6ea;--text:#212529;--text-muted:#6c757d;--accent:#3b82f6;--accent-dk:#2563eb;--green:#16a34a;--green-bg:#dcfce7;--red:#dc2626;--red-bg:#fee2e2;--yellow-bg:#fef9c3;--radius:10px;--shadow:0 1px 3px #0000001a}html{font-size:16px}body{background:var(--bg);color:var(--text);min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}.app{max-width:640px;margin:0 auto;padding-bottom:3rem}.app-header{border-bottom:1px solid var(--border);background:var(--surface);z-index:10;justify-content:space-between;align-items:center;padding:1.25rem 1rem;display:flex;position:sticky;top:0}.app-title{letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.header-btn{font-size:.875rem}.app-main{flex-direction:column;gap:1.25rem;padding:1.25rem 1rem;display:flex}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}.panel-title{margin-bottom:1.25rem;font-size:1.1rem;font-weight:700}.btn{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.375rem;padding:.625rem 1.25rem;font-size:1rem;font-weight:600;transition:background .15s,opacity .15s;display:inline-flex}.btn:disabled{opacity:.38;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-dk)}.btn-ghost{color:var(--text);border:1px solid var(--border);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--bg)}.btn-large{width:100%;margin-top:1.25rem;padding:1rem;font-size:1.125rem}.btn-play{background:var(--accent);color:#fff;border-radius:50px;flex:1;padding:1rem 1.5rem;font-size:1.125rem}.btn-play:hover{background:var(--accent-dk)}.btn-replay{background:var(--bg);color:var(--text);border:2px solid var(--border);border-radius:50px;flex:1;padding:1rem 1.5rem;font-size:1.125rem}.btn-replay:hover{background:#e9ecef}.play-row{align-items:stretch;gap:.75rem;display:flex}.btn-do{color:#5b21b6;white-space:nowrap;background:#ede9fe;border:2px solid #c4b5fd;border-radius:50px;flex-shrink:0;padding:.875rem 1.125rem;font-size:1rem;font-weight:700}.btn-do:hover{background:#ddd6fe}.answer-grid{grid-template-columns:repeat(7,1fr);gap:.5rem;margin-top:1.25rem;display:grid}@media (width<=480px){.answer-grid{grid-template-columns:repeat(4,1fr)}}.btn-answer{background:var(--bg);color:var(--text);border:2px solid var(--border);border-radius:8px;min-height:64px;padding:.875rem .25rem;font-size:1rem;font-weight:700}.btn-answer:hover:not(:disabled){background:#e9ecef;border-color:#adb5bd}.btn-answer--correct{background:var(--green-bg)!important;border-color:var(--green)!important;color:var(--green)!important}.btn-answer--wrong{background:var(--red-bg)!important;border-color:var(--red)!important;color:var(--red)!important}.btn-answer--dim{opacity:.4}.btn-answer--disabled{opacity:.5}.btn-next{background:var(--accent);color:#fff;border-radius:8px;width:100%;margin-top:.75rem;padding:.875rem 1.5rem;font-size:1rem}.btn-next:hover{background:var(--accent-dk)}.field{margin-bottom:1rem}.field-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.85rem;font-weight:600;display:block}.key-grid{grid-template-columns:repeat(6,1fr);gap:.5rem;display:grid}@media (width<=360px){.key-grid{grid-template-columns:repeat(4,1fr)}}.key-btn{border:2px solid var(--border);background:var(--bg);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:8px;padding:.625rem .25rem;font-size:.9rem;font-weight:600}.key-btn:hover{background:#e9ecef}.key-btn--active{background:var(--accent);border-color:var(--accent);color:#fff}.scale-preview{background:var(--bg);border-radius:8px;flex-wrap:wrap;gap:.375rem;margin:1rem 0;padding:.75rem;display:flex}.scale-preview-item{flex-direction:column;align-items:center;min-width:36px;display:flex}.scale-note{font-size:.95rem;font-weight:700}.scale-degree{color:var(--text-muted);font-size:.7rem}.range-row{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.75rem;display:grid}.select{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;border-radius:8px;padding:.625rem 2.25rem .625rem .75rem;font-size:.95rem}.select:focus{outline:2px solid var(--accent);outline-offset:2px}.warning{color:var(--red);background:var(--red-bg);border-radius:6px;margin-bottom:.75rem;padding:.5rem .75rem;font-size:.875rem}.range-info{color:var(--text-muted);margin-bottom:.75rem;font-size:.875rem}.progress-header{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.progress-tag{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:.25rem .75rem;font-size:.8rem;font-weight:600}.key-tag{background:var(--accent);border-color:var(--accent);color:#fff}.attempt-dots{flex-wrap:wrap;gap:.375rem;margin-bottom:1.25rem;display:flex}.dot{border-radius:50%;flex-shrink:0;width:22px;height:22px}.dot--empty{background:var(--border)}.dot--current{background:var(--accent);opacity:.5}.dot--correct{background:var(--green)}.dot--wrong{background:var(--red)}.play-area{margin-bottom:0}.feedback{border-radius:8px;flex-direction:column;gap:.5rem;margin-top:1.25rem;padding:1rem;display:flex}.feedback--correct{background:var(--green-bg);border:1px solid var(--green)}.feedback--wrong{background:var(--red-bg);border:1px solid var(--red)}.feedback-result{font-size:1.25rem;font-weight:700}.feedback--correct .feedback-result{color:var(--green)}.feedback--wrong .feedback-result{color:var(--red)}.feedback-note{color:var(--text);font-size:.95rem}.set-done-panel{text-align:center}.big-score{color:var(--accent);margin:.5rem 0;font-size:4rem;font-weight:800}.sub-label{color:var(--text-muted);margin-bottom:1rem}.complete-panel{text-align:center}.complete-key{color:var(--text-muted);margin-bottom:1rem}.complete-sets{text-align:left;flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.complete-set-row{background:var(--bg);border-radius:6px;justify-content:space-between;padding:.625rem .875rem;font-size:1rem;display:flex}.complete-avg{border-top:2px solid var(--border);background:#f1f3f5;font-weight:600}.score--high{color:var(--green)}.score--mid{color:#d97706}.score--low{color:var(--red)}.table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.log-table{border-collapse:collapse;width:100%;font-size:.9rem}.log-table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:2px solid var(--border);white-space:nowrap;padding:.5rem .75rem;font-size:.75rem}.log-table td{border-bottom:1px solid var(--border);white-space:nowrap;padding:.625rem .75rem}.log-table tr:last-child td{border-bottom:none}.key-cell,.avg-cell{font-weight:700}.acc--high{color:var(--green)}.acc--mid{color:#d97706}.acc--low{color:var(--red)}.empty-state{color:var(--text-muted);font-size:.95rem}.stat-card{background:var(--bg);text-align:center;border-radius:8px;margin-bottom:1.25rem;padding:1rem}.stat-card-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.8rem}.stat-card-value{color:var(--accent);font-size:3rem;font-weight:800;line-height:1.1}.stat-card-sub{color:var(--text-muted);margin-top:.25rem;font-size:.8rem}.subsection-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:1.25rem 0 .75rem;font-size:.9rem;font-weight:700}.analysis-rows{flex-direction:column;gap:.5rem;display:flex}.analysis-row{grid-template-columns:3rem 1fr 6.5rem;align-items:center;gap:.75rem;display:grid}.analysis-label{font-size:.95rem;font-weight:700}.analysis-count{color:var(--text-muted);text-align:right;font-size:.8rem}.bar-track{background:var(--bg);border:1px solid var(--border);border-radius:4px;height:22px;position:relative;overflow:hidden}.bar-fill{border-radius:4px;min-width:2px;height:100%;transition:width .3s}.bar-fill--high{background:#bbf7d0}.bar-fill--mid{background:#fde68a}.bar-fill--low{background:#fecaca}.bar-label{color:var(--text);font-size:.75rem;font-weight:600;position:absolute;top:50%;right:.375rem;transform:translateY(-50%)}.bar-empty{color:var(--text-muted);font-size:.85rem}.keyboard-section{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1rem}.keyboard-hint{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.78rem;display:flex}.tonic-swatch{background:#ddd6fe;border:1px solid #a5b4fc;border-radius:2px;flex-shrink:0;width:12px;height:12px;display:inline-block}.range-swatch{background:#eff6ff;border:1px solid #bfdbfe;border-radius:2px;flex-shrink:0;width:12px;height:12px;margin-left:.25rem;display:inline-block}.piano-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;cursor:default;padding-bottom:6px;overflow:auto visible}.piano-scroll::-webkit-scrollbar{height:4px}.piano-scroll::-webkit-scrollbar-track{background:0 0}.piano-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.piano-inner{-webkit-user-select:none;user-select:none;height:76px;position:relative}.pkey{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:0 0 4px 4px;transition:background-color 60ms;position:absolute;top:0}.pkey-white{z-index:1;border:1px solid #9ca3af;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:5px;display:flex}.pkey-white:hover{filter:brightness(.93)}.pkey-black{z-index:2;border:1px solid #0f172a;border-top:none;border-radius:0 0 3px 3px;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:4px;display:flex}.pkey-black:hover{filter:brightness(1.25)}.pkey-label{pointer-events:none;letter-spacing:-.02em;font-size:8px;font-weight:700;line-height:1}.pkey-tonic-dot{pointer-events:none;background:#c4b5fd;border-radius:50%;flex-shrink:0;width:5px;height:5px}.pkey-black-label{pointer-events:none;letter-spacing:-.03em;font-size:6.5px;font-weight:700;line-height:1}.range-presets{flex-wrap:wrap;gap:.375rem;margin-bottom:.75rem;display:flex}.btn-preset{border:1.5px solid var(--border);background:var(--bg);cursor:pointer;color:var(--text-muted);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:6px;padding:.35rem .75rem;font-size:.8rem;font-weight:600;transition:background .12s,border-color .12s,color .12s}.btn-preset:hover{color:var(--text);background:#e9ecef}.btn-preset--active{color:#1d4ed8;background:#eff6ff;border-color:#3b82f6}.btn-range-select{border:1.5px solid var(--border);background:var(--bg);cursor:pointer;color:var(--text);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:8px;justify-content:center;align-items:center;gap:.375rem;width:100%;margin-bottom:.625rem;padding:.55rem 1rem;font-size:.875rem;font-weight:600;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.btn-range-select:hover{background:#e9ecef}.btn-range-select--active{color:#92400e;background:#fef3c7;border-color:#f59e0b}.btn-range-select--active:hover{background:#fde68a}.range-select-status{color:#713f12;background:#fef9c3;border:1px solid #fde047;border-radius:7px;align-items:center;gap:.375rem;margin-bottom:.625rem;padding:.5rem .875rem;font-size:.85rem;font-weight:500;display:flex}.audio-settings{border-top:1px solid var(--border);margin-top:1rem;padding-top:.875rem}.audio-settings-header{align-items:center;margin-bottom:.75rem;display:flex}.audio-settings-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);flex:1;font-size:.78rem;font-weight:700}.audio-reset-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:4px;padding:.2rem .55rem;font-size:.72rem}.audio-reset-btn:hover{color:var(--text);background:#e9ecef}.audio-row{align-items:center;gap:.625rem;margin-bottom:.625rem;display:flex}.audio-row-label{color:var(--text-muted);flex-shrink:0;min-width:5.5rem;font-size:.8rem}.audio-row-value{text-align:right;min-width:2.5rem;color:var(--text);font-size:.8rem;font-weight:700}.audio-slider-wrap{flex:1}.audio-slider{appearance:none;cursor:pointer;border-radius:3px;outline:none;width:100%;height:5px}.audio-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:17px;height:17px;box-shadow:0 1px 3px #00000040}.audio-slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:17px;height:17px;box-shadow:0 1px 3px #00000040}.audio-seg{border:1px solid var(--border);border-radius:7px;flex:1;display:flex;overflow:hidden}.audio-seg-btn{cursor:pointer;color:var(--text-muted);border:none;border-right:1px solid var(--border);background:0 0;flex:1;padding:.3rem .25rem;font-size:.78rem;font-weight:600}.audio-seg-btn:last-child{border-right:none}.audio-seg-btn:hover{background:#e9ecef}.audio-seg-btn--active{background:var(--accent);color:#fff}.audio-test-btns{flex-wrap:wrap;flex:1;gap:4px;display:flex}.audio-test-btn{background:var(--bg);border:1px solid var(--border);cursor:pointer;color:var(--text);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:5px;padding:.25rem .55rem;font-size:.75rem;font-weight:700;transition:background .1s,border-color .1s}.audio-test-btn:hover{background:#e2e8f0;border-color:#94a3b8}.audio-test-btn:active{border-color:var(--accent);background:#bfdbfe}.mode-selector{grid-template-columns:repeat(2,1fr);gap:.5rem;display:grid}.mode-btn{border:1.5px solid var(--border);background:var(--bg);cursor:pointer;color:var(--text-muted);text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:8px;padding:.55rem .5rem;font-size:.85rem;font-weight:600;transition:background .12s,border-color .12s,color .12s}.mode-btn:hover{color:var(--text);background:#e9ecef}.mode-btn--active{border-color:var(--accent);color:#1d4ed8;background:#eff6ff}.focus-info{color:#14532d;background:#f0fdf4;border:1px solid #86efac;border-radius:7px;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.375rem;margin-bottom:.625rem;padding:.5rem .875rem;font-size:.85rem;display:flex}.focus-info--warning{background:var(--yellow-bg);color:#713f12;border-color:#fde047}.focus-info-sub{color:inherit;opacity:.75;font-size:.8rem}.btn-use-recommended{color:#15803d;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#dcfce7;border:1px solid #16a34a;border-radius:5px;flex-shrink:0;padding:.2rem .6rem;font-size:.78rem;font-weight:600}.btn-use-recommended:hover{background:#bbf7d0}.custom-degrees{margin-top:.375rem;margin-bottom:.75rem}.custom-degrees-grid{grid-template-columns:repeat(7,1fr);gap:.375rem;margin-bottom:.5rem;display:grid}@media (width<=400px){.custom-degrees-grid{grid-template-columns:repeat(4,1fr)}}.degree-checkbox-label{border:1.5px solid var(--border);cursor:pointer;background:var(--bg);color:var(--text-muted);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:7px;flex-direction:column;align-items:center;gap:.2rem;padding:.4rem .2rem;font-size:.85rem;font-weight:600;transition:background .1s,border-color .1s,color .1s;display:flex}.degree-checkbox-label input{display:none}.degree-checkbox-label--active{border-color:var(--accent);color:#1d4ed8;background:#eff6ff}.drill-card{background:#fefce8;border:1px solid #fde047;border-radius:8px;margin-bottom:1.25rem;padding:.875rem 1rem}.drill-card-label{text-transform:uppercase;letter-spacing:.05em;color:#713f12;margin-bottom:.3rem;font-size:.72rem;font-weight:700}.drill-card-content{color:var(--text);font-size:.92rem}.mode-tag{color:#92400e;background:#fef3c7;border-color:#f59e0b}.mode-cell{color:var(--text-muted);white-space:nowrap;font-size:.78rem;font-weight:600}.field-mode-tag{color:#0f766e;background:#ccfbf1;border-color:#14b8a6}.field-mode-hint{color:var(--text-muted);text-align:center;margin:.25rem 0 1rem;font-size:.88rem}.field-answer-grid{flex-direction:column;gap:.6rem;margin-top:1.25rem;margin-bottom:.25rem;display:flex}.btn-field-answer{border:2px solid var(--border);background:var(--bg);width:100%;color:var(--text);cursor:pointer;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:10px;padding:.875rem 1rem;font-size:1rem;font-weight:600;transition:background .12s,border-color .12s}.btn-field-answer:hover:not(:disabled){background:#e9ecef;border-color:#adb5bd}.btn-field-answer:disabled{opacity:.38;cursor:not-allowed}.btn-field--good{border-color:var(--green)!important;color:#14532d!important;background:#dcfce7!important}.btn-field--acceptable{color:#713f12!important;background:#fef9c3!important;border-color:#ca8a04!important}.btn-field--mismatch{border-color:var(--red)!important;color:#7f1d1d!important;background:#fee2e2!important}.btn-field--dim{opacity:.35}.btn-field--disabled{opacity:.5}.field-feedback{border-radius:8px;flex-direction:column;gap:.4rem;margin-top:1rem;padding:1rem;display:flex}.field-feedback--good{border:1.5px solid var(--green);background:#f0fdf4}.field-feedback--acceptable{background:var(--yellow-bg);border:1.5px solid #ca8a04}.field-feedback--mismatch{background:var(--red-bg);border:1.5px solid var(--red)}.field-feedback-result{font-size:1.1rem;font-weight:700}.field-feedback--good .field-feedback-result{color:var(--green)}.field-feedback--acceptable .field-feedback-result{color:#92400e}.field-feedback--mismatch .field-feedback-result{color:var(--red)}.field-feedback-detail{color:var(--text);font-size:.9rem}.dot--acceptable{background:#f59e0b}.field-focus-section{margin-bottom:1rem}.field-focus-header{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.field-focus-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);flex-shrink:0;font-size:.78rem;font-weight:700}.field-focus-display{color:#0f766e;white-space:nowrap;text-overflow:ellipsis;background:#ccfbf1;border:1px solid #14b8a6;border-radius:20px;max-width:60%;padding:.15rem .65rem;font-size:.8rem;font-weight:600;overflow:hidden}.field-focus-grid{grid-template-columns:repeat(7,1fr);gap:.375rem;display:grid}@media (width<=400px){.field-focus-grid{grid-template-columns:repeat(4,1fr)}}.btn-focus-toggle{border:1.5px solid var(--border);background:var(--bg);color:var(--text-muted);cursor:pointer;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:7px;padding:.4rem .2rem;font-size:.85rem;font-weight:600;transition:background .1s,border-color .1s,color .1s}.btn-focus-toggle:hover{color:var(--text);background:#e9ecef}.btn-focus-toggle--active{color:#0f766e;background:#ccfbf1;border-color:#14b8a6}