.fretboard-container{display:inline-block;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.fretboard-background{border-radius:4px;box-shadow:0 2px 8px #0000001a}.string{border-radius:1px;box-shadow:0 1px 2px #0003}.nut{border-radius:2px;box-shadow:0 1px 3px #0000004d}.fret{border-radius:1px;box-shadow:0 0 1px #0000004d}.end-cap{border-radius:1px;box-shadow:0 0 2px #0006}.fret-marker{opacity:.6;box-shadow:inset 0 1px 2px #0003}.fret-marker-12{opacity:.8}.fret-number{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;pointer-events:none}.dot{cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #0000004d}.dot:hover{transform:scale(1.1);box-shadow:0 3px 10px #0006}.dot.open-string{box-shadow:0 0 0 2px currentColor,0 2px 6px #0003}.dot.open-string:hover{transform:scale(1.1);box-shadow:0 0 0 2px currentColor,0 3px 10px #0000004d}.fretboard-dot{cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #0000004d}.fretboard-dot:hover{transform:scale(1.1);box-shadow:0 3px 10px #0006}.fretboard-dot.user-dot{cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0006}.fretboard-dot.user-dot:hover{transform:scale(1.1);box-shadow:0 3px 12px #00000080}.fret-click-target{position:absolute;cursor:pointer;z-index:5;background:transparent;border:none;pointer-events:auto;border-radius:50%;transition:background-color .1s ease}.fret-click-target:hover{background:#3498db1a}.fretboard-dot.playing{z-index:20!important}.scale-dot{pointer-events:none;opacity:.7;transition:opacity .3s ease}.fretboard-container:hover .scale-dot{opacity:.4}@media(max-width:768px){.fretboard-container{max-width:100%;max-height:100vh}.dot{transform:scale(.9)}.dot:hover{transform:scale(1)}.fretboard-dot{transform:scale(.9)}.fretboard-dot:hover{transform:scale(1)}}.dot-appear{animation:dotAppear .3s ease-out}@keyframes dotAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.dot-pulse{animation:dotPulse 1s ease-in-out infinite alternate}@keyframes dotPulse{0%{opacity:.7;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}.fretboard-dark .fretboard-background{background:#2d2d2d!important}.fretboard-dark .string{background:#666!important}.fretboard-dark .fret,.fretboard-dark .end-cap{background:#999!important}.fretboard-dark .nut{background:#111!important}.fretboard-dark .fret-number{color:#ccc!important}.fretboard-dark .fret-marker{background:#fff3!important}.fretboard-high-contrast .fretboard-background{background:#000!important}.fretboard-high-contrast .string,.fretboard-high-contrast .fret,.fretboard-high-contrast .end-cap,.fretboard-high-contrast .nut{background:#fff!important}.fretboard-high-contrast .fret-number{color:#fff!important;font-weight:700}.fretboard-high-contrast .dot,.fretboard-high-contrast .fretboard-dot{background:#ff0!important;color:#000!important;border:2px solid #000!important}@media print{.fretboard-container{break-inside:avoid;page-break-inside:avoid}.dot,.fretboard-dot{box-shadow:none;border:1px solid #000}.fret-marker{opacity:1}}.audio-controls{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;align-items:center}.play-button{background:#27ae60;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease;display:flex;align-items:center;gap:8px}.play-button:hover{background:#229954;transform:translateY(-1px);box-shadow:0 4px 12px #27ae604d}.play-button:active{transform:translateY(0)}.play-button.playing{background:#e74c3c}.play-button.playing:hover{background:#c0392b}.play-button:disabled{background:#95a5a6;cursor:not-allowed;transform:none;box-shadow:none}.play-button .icon{font-size:16px}.stop-button{background:#e74c3c;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease}.stop-button:hover{background:#c0392b;transform:translateY(-1px);box-shadow:0 4px 12px #e74c3c4d}.stop-button:active{transform:translateY(0)}.audio-mode-selector{display:flex;gap:5px;margin-left:20px}.mode-button{background:#34495e;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s ease}.mode-button:hover{background:#2c3e50}.mode-button.active{background:#3498db}.mode-button.active:hover{background:#2980b9}.tempo-control{display:flex;align-items:center;gap:10px;margin-left:20px;color:#2c3e50;font-size:14px}.tempo-control label{font-weight:700}.tempo-control input{width:80px;padding:5px 8px;border:2px solid #ddd;border-radius:4px;font-size:12px}.tempo-control input:focus{outline:none;border-color:#3498db}.audio-status{margin-left:20px;padding:8px 12px;background:#ecf0f1;border-radius:4px;font-size:12px;color:#2c3e50}.audio-status.loading{background:#f39c12;color:#fff}.audio-status.ready{background:#27ae60;color:#fff}.audio-status.error{background:#e74c3c;color:#fff}@media(max-width:768px){.audio-controls{flex-direction:column;align-items:stretch}.audio-mode-selector,.tempo-control{margin-left:0;justify-content:center}.audio-status{margin-left:0;text-align:center}}:root{color-scheme:light;--bg-surface: #f5f5fb;--bg-panel: #ffffff;--bg-accent: #1f7ae0;--bg-accent-muted: #e3f0ff;--bg-muted: #eef1f6;--border-color: #d9dce3;--border-strong: #b7bcc7;--text-primary: #1f2532;--text-secondary: #515b6c;--text-muted: #7b8496;--danger: #d64545;--success: #1f9d5c;--radius-large: 20px;--radius-medium: 14px;--radius-small: 10px;--shadow-soft: 0 18px 40px rgba(31, 61, 99, .08);--shadow-popup: 0 28px 70px rgba(12, 23, 52, .18);--transition-base: .16s ease}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 10% 10%,#fdfbff,#edf2ff 55%,#e6f0ff);color:var(--text-primary);min-height:100vh}h1,h2,h3{margin:0;font-weight:600}p{margin:0}a{color:inherit}button{font-family:inherit;cursor:pointer}.app-layout{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:clamp(12px,2.5vw,22px);padding:clamp(12px,3vw,28px)}.control-panel{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,16px);min-width:0}.panel-section{background:#ffffffeb;padding:clamp(12px,1.8vw,16px);border-radius:var(--radius-large);box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.7);display:flex;flex-direction:column;gap:12px}#mode-section .section-actions{justify-content:flex-start}.panel-section.compact{padding:clamp(10px,1.4vw,14px);gap:8px}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading h2{font-size:1.05rem}.section-actions{display:flex;gap:6px}.section-subtext{color:var(--text-muted);font-size:.86rem}.segmented-control{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.segmented{border:1px solid var(--border-color);border-radius:var(--radius-small);padding:9px 10px;background:var(--bg-panel);color:var(--text-secondary);font-weight:500;font-size:.88rem;transition:transform var(--transition-base),box-shadow var(--transition-base),background var(--transition-base)}.segmented:hover{transform:translateY(-2px);box-shadow:0 10px 20px #1f3d6314}.segmented.active{background:var(--bg-accent);color:#fff;border-color:transparent;box-shadow:0 10px 25px #1f7ae040}.interval-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.interval-toggle{position:relative;border:1px solid var(--border-color);border-radius:var(--radius-small);padding:10px;background:var(--bg-panel);display:flex;flex-direction:column;gap:4px;transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base)}.interval-toggle input{position:absolute;inset:0;opacity:0}.interval-toggle label{display:flex;align-items:center;justify-content:center;cursor:pointer;height:100%;text-align:center}.interval-toggle .name{font-weight:600;font-size:.9rem}.interval-toggle input:checked+label{color:var(--text-primary)}.interval-toggle input:checked+label:after{content:"";position:absolute;inset:0;border-radius:var(--radius-small);border:2px solid rgba(31,122,224,.55);box-shadow:0 10px 25px #1f7ae038;pointer-events:none}.interval-toggle:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1f3d6314}.quiz-button-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.primary-button,.secondary-button,.text-button,.danger-button,.icon-button{border:none;border-radius:var(--radius-small);padding:8px 12px;font-size:.86rem;font-weight:600;transition:background var(--transition-base),color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base)}.primary-button{background:linear-gradient(135deg,#1f7ae0,#4a9dff);color:#fff;box-shadow:0 12px 25px #1f7ae040}.primary-button:disabled{background:var(--bg-muted);color:var(--text-muted);box-shadow:none;cursor:not-allowed}.primary-button:not(:disabled):hover{transform:translateY(-2px)}.secondary-button{background:var(--bg-muted);color:var(--text-secondary)}.secondary-button:disabled{opacity:.5;cursor:not-allowed}.text-button{background:transparent;color:var(--bg-accent);padding:4px 6px;font-size:.8rem}.text-button:hover{text-decoration:underline}.range-control{display:flex;align-items:center;gap:12px}.range-control input[type=range]{width:100%;accent-color:var(--bg-accent)}.range-value{font-weight:600;color:var(--text-secondary)}.auto-advance-controls{display:flex;flex-direction:column;gap:12px}.toggle-row{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text-secondary)}.toggle-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--bg-accent)}.field-row{display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--text-secondary)}.field-row input[type=number]{padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-small);font-size:.95rem}.field-hint{margin:0;font-size:.8rem;color:var(--text-muted);line-height:1.4}.field-row select{padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-small);font-size:.95rem;background:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.danger-button{background:var(--danger);color:#fff}.danger-button:hover{filter:brightness(.97)}.icon-button{background:transparent;color:var(--text-secondary);font-size:1.4rem;line-height:1;width:40px;height:40px;display:grid;place-items:center}.answer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.answer-button{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-small);padding:10px;text-align:center;font-weight:600;color:var(--text-secondary);transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}.answer-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 24px #1f3d631f;border-color:#1f7ae059}.answer-button:disabled{opacity:.55;cursor:not-allowed}.summary-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.summary-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.summary-block{display:flex;flex-direction:column;gap:10px}.summary-block h3{font-size:.95rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.summary-metrics div{background:var(--bg-muted);border-radius:var(--radius-small);padding:10px}.summary-metrics dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.summary-metrics dd{margin:6px 0 0;font-size:1.05rem;font-weight:700}.display-panel{background:#fffffff2;border-radius:var(--radius-large);box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.7);padding:clamp(16px,2.6vw,28px);display:flex;flex-direction:column;gap:14px;min-height:0;min-width:0}.fretboard-wrapper{background:var(--bg-muted);border-radius:var(--radius-medium);padding:clamp(12px,1.8vw,20px);display:flex;justify-content:center;align-items:center;box-shadow:inset 0 1px #fff9}.piano-wrapper{background:var(--bg-muted);border-radius:var(--radius-medium);padding:clamp(12px,1.8vw,20px);display:flex;justify-content:center;align-items:center;overflow:hidden;max-width:100%;box-shadow:inset 0 1px #fff9}.piano{position:relative;display:flex;flex:0 0 auto;width:min(100%,782px);margin-inline:auto;height:clamp(112px,17vw,180px)}.piano-key{position:relative;border:1px solid #cfd6e4;border-radius:0 0 8px 8px;box-sizing:border-box}.piano-key.white{width:auto;min-width:0;flex:1 1 0;background:#fff;height:100%}.piano-key.black{position:absolute;top:0;right:-29.4%;width:58.8%;height:61.1%;background:#1f2532;border-radius:0 0 6px 6px;z-index:2;border:1px solid #0e1117}.piano-key.white.active{background:#dcecff}.piano-key.black.active{background:#2f7fe8}.piano-key.root{box-shadow:inset 0 0 0 2px #1f7ae0}.piano-label{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:.7rem;background:#ffffffe6;padding:2px 4px;border-radius:4px;color:#1f2532;display:none;pointer-events:none}.piano-key.black .piano-label{background:#ffffffd9;color:#1f2532}.piano-key.show-label>.piano-label{display:block}#fretboard{width:100%;overflow:hidden;position:relative}.quiz-panel{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,16px)}.status-banner{background:var(--bg-accent-muted);color:var(--bg-accent);border-radius:var(--radius-small);padding:10px 14px;font-weight:500;border:1px solid rgba(31,122,224,.2);min-height:48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}#status-message{flex:1 1 auto;min-width:0}.status-banner.error{background:#d645451f;color:var(--danger);border-color:#d645454d}.status-banner.success{background:#1f9d5c1f;color:var(--success);border-color:#1f9d5c4d}.status-action{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.status-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.mobile-settings-button,.mobile-settings-heading,.mobile-settings-backdrop{display:none}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}.modal.active{display:flex}.modal-backdrop{position:absolute;inset:0;background:#0f172a73}.modal-content{position:relative;width:min(640px,92vw);background:#fff;border-radius:var(--radius-large);box-shadow:var(--shadow-popup);display:flex;flex-direction:column;max-height:90vh}.modal-header,.modal-footer{padding:20px clamp(20px,4vw,28px);display:flex;align-items:center;justify-content:space-between}.modal-body{padding:0 clamp(20px,4vw,28px) clamp(20px,4vw,28px);overflow-y:auto}.stats-overview{background:var(--bg-muted);border-radius:var(--radius-medium);padding:18px;margin-bottom:20px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.stats-grid .label{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.stats-grid .value{font-size:1.3rem;font-weight:700;display:block;margin-top:6px}.stats-table{width:100%;border-collapse:collapse;font-size:.92rem}.stats-table th,.stats-table td{padding:12px 10px;border-bottom:1px solid var(--border-color);text-align:left}.stats-table th{text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;color:var(--text-muted)}.stats-table tbody tr:hover{background:#1f7ae014}.stats-table tbody tr.mode-row{transition:background .18s ease}.stats-table tbody tr.mode-row.expanded{background:#1f7ae024}.stats-table tbody tr.mode-row td:first-child{width:44px;text-align:center}.mode-toggle{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-color);background:#fff;color:var(--text-primary);font-weight:600;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}.mode-toggle:hover,.mode-toggle:focus{border-color:#1f7ae099;color:#1f7ae0;outline:none}.mode-toggle[aria-expanded=true]{background:#1f7ae01f;border-color:#1f7ae080;color:#1f7ae0}.mode-breakdown-row td{background:#1f7ae00f;padding:18px 16px}.mode-breakdown{display:flex;flex-direction:column;gap:12px}.stats-subtable{width:100%;border-collapse:collapse;font-size:.88rem}.stats-subtable th,.stats-subtable td{padding:8px 6px;border-bottom:1px solid var(--border-color);text-align:left}.stats-subtable th{text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;color:var(--text-muted)}@media(max-width:1024px){.app-layout{grid-template-columns:1fr}.display-panel{min-height:0}}@media(max-width:720px){.panel-section{border-radius:var(--radius-medium)}.segmented-control{grid-template-columns:1fr}.quiz-button-row{grid-template-columns:repeat(2,minmax(0,1fr))}.status-actions{width:100%;margin-left:0}.status-actions .status-action{flex:1 1 0}}@media(orientation:landscape)and (max-height:600px)and (max-width:1024px){html,body{overflow-x:hidden}.app-layout{display:block;height:calc(100dvh - var(--bh-host-chrome-height, 0px));min-height:160px;padding:6px}.control-panel{display:none}.display-panel{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr);grid-template-rows:auto minmax(0,1fr);gap:6px;height:100%;padding:6px;border-radius:var(--radius-small);overflow:hidden}.status-banner{grid-column:1 / -1;min-height:34px;padding:5px 8px;gap:6px;font-size:.76rem}.status-actions{width:auto;margin-left:auto}.status-actions .status-action:not(.mobile-settings-button){display:none}.mobile-settings-button{display:inline-flex;padding:6px 10px;font-size:.74rem}.fretboard-wrapper,.piano-wrapper{grid-column:1;grid-row:2;min-width:0;min-height:0;height:100%;padding:4px;border-radius:8px;overflow:hidden}.piano{height:min(150px,calc(100dvh - var(--bh-host-chrome-height, 0px) - 64px))}.piano-label{bottom:3px;max-width:46px;padding:1px 2px;font-size:.56rem;line-height:1.05;white-space:normal;text-align:center}.quiz-panel{grid-column:2;grid-row:2;display:grid;grid-template-rows:auto minmax(0,1fr);gap:5px;min-width:0;min-height:0;overflow:hidden}#quiz-controls,#answer-section{gap:4px;padding:5px;border-radius:8px}#answer-section{min-height:0;overflow:hidden}#answer-section .section-subtext,#summary-section{display:none}.quiz-button-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.quiz-button-row button,.answer-button{min-width:0;min-height:30px;padding:5px 3px;font-size:clamp(.62rem,1.55vw,.74rem);line-height:1.05}.answer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;min-height:0;align-content:center}.mobile-settings-backdrop{position:fixed;inset:0;z-index:1000;width:100%;height:100%;padding:0;border:0;background:#0f172a7a}body.mobile-settings-open .mobile-settings-backdrop{display:block}body.mobile-settings-open .control-panel{position:fixed;inset:calc(var(--bh-host-chrome-height, 0px) + 6px) 8px 8px;z-index:1001;display:flex;gap:8px;padding:10px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--radius-medium);background:var(--bg-surface);box-shadow:var(--shadow-popup)}.mobile-settings-heading{position:sticky;top:-10px;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:4px 2px 8px;background:var(--bg-surface)}.mobile-settings-heading h2{font-size:1.05rem}.control-panel .panel-section{padding:10px;border-radius:var(--radius-small)}.control-panel .segmented-control{grid-template-columns:repeat(3,minmax(0,1fr))}.control-panel .interval-list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(orientation:landscape)and (max-height:340px)and (max-width:700px){.app-layout{padding:3px}.display-panel{gap:3px;padding:3px}.status-banner{min-height:28px;padding:3px 6px;font-size:.68rem}.mobile-settings-button{padding:4px 7px;font-size:.66rem}.quiz-panel{gap:3px}#quiz-controls,#answer-section{padding:3px;gap:2px}.quiz-button-row,.answer-grid{gap:2px}.quiz-button-row button,.answer-button{min-height:24px;padding:2px 1px;font-size:.56rem}.piano{height:min(105px,calc(100dvh - var(--bh-host-chrome-height, 0px) - 52px))}}