.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:dark;--bg: #0f1115;--panel: #171a20;--panel-light: #1f2430;--text: #e6edf3;--muted: #9aa7b2;--accent: #6dd3ff;--accent-strong: #44bfff;--success: #45d483;--danger: #ff6b6b;--warning: #ffcc66;--border: #2b313a;--shadow: rgba(0, 0, 0, .4)}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}.app-shell{display:grid;grid-template-columns:360px 1fr;min-height:100vh}.panel{background:var(--panel);padding:24px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:20px}.panel-header h1{margin:0 0 8px;font-size:22px}.panel-header p{margin:0;color:var(--muted);font-size:14px}.panel-section{background:var(--panel-light);padding:16px;border-radius:12px;box-shadow:0 8px 20px var(--shadow)}.panel-section h2{margin:0 0 12px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.field-grid{display:grid;gap:12px}label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:6px}select,input[type=number]{background:#0f1218;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:14px}button{border:none;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}button:hover{transform:translateY(-1px);box-shadow:0 8px 20px #00000059}button.primary{background:var(--accent);color:#001018}button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}.panel-section button{width:100%;margin-bottom:10px}.panel-section button:last-child{margin-bottom:0}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;background:#0f1218;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted)}.chip.disabled{opacity:.45;cursor:not-allowed}.chip.disabled input{cursor:not-allowed}.chip input{accent-color:var(--accent)}.toggle{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text)}.hint{margin-top:8px;font-size:12px;color:var(--muted)}.panel,.board,.instrument-frame,.piano-container{min-width:0}.title-row{display:flex;align-items:flex-start;gap:14px}.title-row>div{min-width:0;flex:1}.help-link{color:var(--accent);font-size:13px;font-weight:700;text-decoration:none;border:1px solid var(--border);border-radius:9px;padding:7px 10px}.help-link:hover,.help-link:focus-visible{border-color:var(--accent);outline:none}.instrument-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:16px;padding:4px;border:1px solid var(--border);border-radius:12px;background:#0f1218}.instrument-toggle button{min-width:0;padding:8px 10px;color:var(--muted);background:transparent}.instrument-toggle button.is-selected{color:#001018;background:var(--accent)}.hint.is-problem{color:#ff8b8b;font-weight:650}.panel-footer{margin-top:auto;color:var(--muted);font-size:12px}.board{display:flex;flex-direction:column;gap:20px;padding:24px}.game-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--panel-light);padding:12px 16px;border-radius:14px;box-shadow:0 10px 24px var(--shadow);position:sticky;top:16px;z-index:3}.game-nav button{min-width:140px}.hud{display:flex;gap:16px}.stat{background:var(--panel-light);padding:12px 18px;border-radius:12px;box-shadow:0 8px 20px var(--shadow);min-width:140px}.stat .label{display:block;font-size:12px;color:var(--muted)}.stat .value{font-size:20px;font-weight:700}.prompt{background:linear-gradient(135deg,#44bfff33,#1f2430e6);padding:18px 22px;border-radius:16px;border:1px solid rgba(109,211,255,.3);box-shadow:0 12px 30px var(--shadow)}.prompt-title{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted)}.prompt-text{margin-top:6px;font-size:20px;font-weight:700}.prompt-detail{margin-top:6px;font-size:14px;color:var(--muted)}.prompt-feedback{margin-top:8px;font-size:14px;font-weight:600}.prompt-feedback.success{color:var(--success)}.prompt-feedback.fail{color:var(--danger)}.instrument-frame{background:var(--panel-light);padding:16px;border-radius:16px;box-shadow:0 12px 30px var(--shadow);overflow-x:auto}#fretboard{min-height:240px}.piano-container{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid var(--border);border-radius:12px;background:#0a0d12}.piano{display:block;height:280px}.piano-key{cursor:pointer;outline:none}.piano-key-white{fill:#f6f7fb;stroke:#8993a2;stroke-width:1}.piano-key-black{fill:#111722;stroke:#020408;stroke-width:1}.piano-key:hover,.piano-key:focus-visible{fill:#bcecff}.piano-key-black:hover,.piano-key-black:focus-visible{fill:#27667f}.piano-key.is-wrong{fill:var(--danger)}.piano-note{fill:#111722;stroke:#fff;stroke-width:2;pointer-events:none}.piano-note.start{fill:var(--accent-strong)}.piano-note.user{fill:#fff;stroke:#111722}.piano-note.answer{fill:var(--warning);stroke:#111722}.piano-note-label{fill:#fff;font-size:11px;font-weight:800;pointer-events:none}.piano-note.user+.piano-note-label,.piano-note.answer+.piano-note-label{fill:#111722}.piano-octave{fill:#667085;font-size:10px;pointer-events:none}.piano-title{position:sticky;left:0;z-index:2;width:100%;height:42px;margin-bottom:-42px;padding:11px 14px 0;color:var(--text);text-align:center;font-weight:700;pointer-events:none}@media(max-width:1024px){.app-shell{grid-template-columns:1fr}.panel{border-right:none;border-bottom:1px solid var(--border)}}@media(max-width:600px){.panel,.board{padding:14px}.panel{gap:14px}.game-nav{position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px}.game-nav button{min-width:0}.game-nav .primary{grid-column:1 / -1}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{min-width:0;padding:10px}.instrument-frame{padding:8px}.piano{height:230px}}.help-page{min-height:100vh;padding:32px 18px 64px;background:linear-gradient(160deg,#0f1115,#111b25 55%,#0f1115)}.help-document{width:min(940px,100%);margin:0 auto}.help-hero,.help-document section{margin-bottom:22px;padding:24px;border:1px solid var(--border);border-radius:16px;background:#1f2430f0;box-shadow:0 12px 30px var(--shadow)}.help-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.help-hero h1,.help-document h2{margin:0 0 10px}.help-hero p,.help-document p,.help-document li,.help-document dd{color:#c4ced8;line-height:1.6}.eyebrow{margin:0 0 5px!important;color:var(--accent)!important;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.help-document figure{margin:22px 0 0}.help-document img{display:block;width:100%;border:1px solid #3b4652;border-radius:12px;box-shadow:0 14px 34px #00000059}.help-document figcaption{margin-top:8px;color:var(--muted);font-size:13px}.help-document dt{margin-top:12px;color:var(--text);font-weight:800}.help-document dd{margin:3px 0 0}@media(max-width:600px){.help-page{padding:14px 10px 40px}.help-hero,.help-document section{padding:18px}.help-hero{display:block}.help-hero .help-link{display:inline-block;margin-top:12px}}