*,*:before,*:after{box-sizing:border-box}.hidden{display:none}:root{--accent: #4f9cf9;--correct: #4ade80;--incorrect: #f87171;--bg: #0d0d12;--surface: #14141c;--surface-2: #1c1c28;--text: #eaeaf8;--text-muted: #7070a0;--btn-bg: #17172a;--btn-border: #28283e;--radius-sm: 5px;--radius: 8px;--radius-lg: 12px;font-family:Inter,system-ui,-apple-system,sans-serif}body[data-theme=light]{--bg: #f4f4f8;--surface: #ffffff;--surface-2: #eaeaf2;--text: #18182a;--text-muted: #606080;--btn-bg: #ebebf5;--btn-border: #d0d0e4;background:#dcdce8}body{margin:0;background:#06060a;color:var(--text);min-height:100dvh;display:flex;align-items:flex-start;justify-content:center}#app{width:100%;max-width:480px;background:var(--bg);display:flex;flex-direction:column;min-height:100dvh;padding:0 16px}@media(min-width:600px){#app{box-shadow:0 0 0 1px var(--btn-border)}}header{padding:14px 0 0;border-bottom:1px solid var(--btn-border)}.header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}h1{margin:0;font-size:.95rem;font-weight:700;letter-spacing:.04em;color:var(--text)}.header-right{display:flex;align-items:center;gap:8px}.score{display:flex;gap:10px;font-size:.82rem;color:var(--text-muted)}.score-item{display:flex;align-items:center;gap:4px}.score-symbol{font-size:1rem}.score-symbol.quaver{color:#6b7a99}.score-symbol.clef{color:#eab308}.score-value{font-weight:700;color:var(--text)}.settings-btn{background:transparent;color:var(--text-muted);border:none;width:28px;height:28px;font-size:1.25rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .12s}.settings-btn:hover{color:var(--text)}.settings-panel{background:var(--surface);border:1px solid var(--btn-border);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--text);cursor:pointer;padding:4px 0}.settings-row input[type=checkbox]{width:16px;height:16px;flex-shrink:0;cursor:pointer;accent-color:var(--accent)}.difficulty-seg{display:flex;background:var(--surface);border:1px solid var(--btn-border);border-radius:var(--radius);padding:3px;gap:2px;margin-bottom:12px}.diff-btn{flex:1;background:transparent;color:var(--text-muted);border:none;border-radius:var(--radius-sm);padding:7px 3px;font-size:.77rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .12s,color .12s;white-space:nowrap}.diff-btn:hover:not(.active){color:var(--text);background:#ffffff0d}.diff-btn.active{background:var(--accent);color:#fff;font-weight:700}main{flex:1;display:flex;flex-direction:column;gap:10px;padding-top:14px;padding-bottom:14px}.staff-wrapper{position:relative;cursor:pointer}.play-hint{position:absolute;bottom:6px;right:8px;font-size:.62rem;color:var(--text-muted);pointer-events:none;opacity:.5;letter-spacing:.04em}#staff-container{background:#fff;border-radius:var(--radius);overflow:hidden;width:100%;min-height:160px;display:flex;align-items:center;justify-content:center}#staff-container.contextual-staff{min-height:320px}#staff-container svg{width:100%;height:auto;display:block}.step-controls{display:flex;align-items:center;gap:8px}.step-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0}.step-indicator{display:flex;align-items:center;gap:6px;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.step-dot{width:6px;height:6px;border-radius:50%;background:var(--btn-border);transition:background .2s}.step-dot.active{background:var(--accent)}.step-dot.done{background:var(--correct)}.feedback{text-align:center;font-size:.95rem;font-weight:700;padding:9px 14px;border-radius:var(--radius)}.feedback.hidden{display:block;visibility:hidden;height:38px}.feedback.correct{color:var(--correct);background:#4ade8014}.feedback.incorrect{color:var(--incorrect);background:#f8717114}.clef-celebration{text-align:center;padding:9px 14px;border-radius:var(--radius);background:#eab30814;border:1px solid rgba(234,179,8,.2);color:#eab308;font-size:.9rem;font-weight:700}.hint-text{font-size:.82rem;font-weight:600;color:var(--text-muted);font-style:italic}.hint-text:empty{display:none}.next-btn,.submit-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:14px;font-size:.95rem;font-weight:700;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .15s,transform .1s;letter-spacing:.01em}.next-btn:hover,.submit-btn:hover:not(:disabled){opacity:.88}.next-btn:active,.submit-btn:active:not(:disabled){transform:scale(.98)}.submit-btn:disabled{opacity:.22;cursor:default}.hint-btn,.lock-key-btn,.replay-btn{background:transparent;color:var(--text-muted);border:1px solid var(--btn-border);border-radius:var(--radius-sm);padding:5px 11px;font-size:.73rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .12s,border-color .12s}.hint-btn:hover,.lock-key-btn:hover,.replay-btn:hover{color:var(--text);border-color:#4f9cf973}.replay-btn{align-self:flex-start}.lock-key-btn.locked{background:#4f9cf914;border-color:#4f9cf980;color:var(--accent)}.step-question{margin:0 0 6px;font-size:.62rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em}.answer-section{display:flex;flex-direction:column;gap:8px}.root-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.key-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.key-grid.key-grid-full{grid-template-columns:repeat(6,1fr)}.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.step-sublabel{margin:6px 0 3px;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-weight:600}.key-btn,.role-btn,.root-btn{background:var(--btn-bg);color:var(--text-muted);border:1px solid var(--btn-border);border-radius:var(--radius-sm);padding:10px 4px;font-size:.87rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .12s,border-color .12s,background .12s}.key-btn:hover,.role-btn:hover,.root-btn:hover{color:var(--text);border-color:#4f9cf959}.key-btn:active,.role-btn:active,.root-btn:active{transform:scale(.95)}.key-btn.selected,.role-btn.selected,.root-btn.selected{background:var(--accent);border-color:var(--accent);color:#fff}.key-btn:disabled,.role-btn:disabled,.root-btn:disabled{opacity:.4;cursor:default;transform:none}.quality-row{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border:1px solid var(--btn-border);border-radius:var(--radius);padding:3px;gap:2px}.quality-btn{background:transparent;color:var(--text-muted);border:none;border-radius:var(--radius-sm);padding:10px 4px;font-size:.9rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .12s,color .12s}.quality-btn:hover:not(.selected){color:var(--text);background:#ffffff0d}.quality-btn.selected{background:var(--accent);color:#fff}.quality-btn:disabled{opacity:.4;cursor:default}.text-input-container{display:flex;justify-content:center}@media(hover:none)and (pointer:coarse){.text-input-container{display:none}}.note-text-input{background:var(--surface);color:var(--text);border:1px solid var(--btn-border);border-radius:var(--radius);padding:9px 14px;font-size:1rem;font-family:inherit;width:100%;outline:none;transition:border-color .12s;caret-color:var(--accent)}.note-text-input:focus{border-color:var(--accent)}.note-text-input::placeholder{color:var(--text-muted);font-size:.78rem}.ref-footer{border-top:1px solid var(--btn-border);padding:4px 0 env(safe-area-inset-bottom,20px)}.ref-toggles{display:flex;gap:16px;padding:6px 0 2px}.ref-toggle-btn{background:transparent;color:var(--text-muted);border:none;padding:4px 0;font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:5px;transition:color .12s}.ref-toggle-btn:hover{color:var(--text)}.ref-toggle-btn.open{color:var(--accent)}.keyboard-panel{background:var(--surface);border-radius:var(--radius);padding:8px 8px 4px;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}#keyboard-container svg{display:block}.cof-container{display:flex;justify-content:center;padding:4px 0 8px}.cof-container svg{max-width:220px}.hof-btn{background:transparent;color:var(--text-muted);border:none;width:28px;height:28px;font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .12s}.hof-btn:hover{color:var(--text)}.hof-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:center;justify-content:center;z-index:300;padding:16px}.hof-panel{background:var(--surface);border:1px solid var(--btn-border);border-radius:var(--radius-lg);width:100%;max-width:400px;max-height:90dvh;overflow-y:auto;display:flex;flex-direction:column}.hof-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--btn-border);flex-shrink:0}.hof-title{margin:0;font-size:.95rem;font-weight:700}.hof-close-btn{background:transparent;color:var(--text-muted);border:none;font-size:1rem;cursor:pointer;padding:4px 6px;border-radius:var(--radius-sm);line-height:1;transition:color .12s}.hof-close-btn:hover{color:var(--text)}.hof-diff-tabs{display:flex;background:var(--surface-2);padding:4px;gap:2px;flex-shrink:0}.hof-tab{flex:1;background:transparent;color:var(--text-muted);border:none;border-radius:var(--radius-sm);padding:6px 2px;font-size:.73rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .12s,color .12s}.hof-tab.active{background:var(--accent);color:#fff}.hof-board{padding:12px 16px;min-height:140px;flex:1}.hof-loading,.hof-empty,.hof-error{color:var(--text-muted);font-size:.82rem;text-align:center;padding:28px 0}.hof-error{color:var(--incorrect)}.hof-table{width:100%;border-collapse:collapse;font-size:.85rem}.hof-table th{color:var(--text-muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;text-align:left;padding:0 8px 8px 0;border-bottom:1px solid var(--btn-border)}.hof-table td{padding:8px 8px 8px 0;border-bottom:1px solid rgba(255,255,255,.04)}body[data-theme=light] .hof-table td{border-bottom-color:#0000000f}.hof-rank{color:var(--text-muted);font-size:.75rem;width:28px}.hof-name{font-weight:700;letter-spacing:.06em}.hof-score-val{font-weight:700;color:var(--accent)}.hof-submit-section{padding:12px 16px 16px;border-top:1px solid var(--btn-border);flex-shrink:0}.hof-submit-label{margin:0 0 8px;font-size:.8rem;color:var(--text-muted)}.hof-submit-muted{font-style:italic}.hof-score-preview{font-weight:700;color:var(--accent)}.hof-submit-row{display:flex;gap:8px}.hof-initials-input{background:var(--surface-2);color:var(--text);border:1px solid var(--btn-border);border-radius:var(--radius);padding:9px 12px;font-size:1rem;font-family:monospace;text-transform:uppercase;width:72px;outline:none;text-align:center;letter-spacing:.2em;caret-color:var(--accent);transition:border-color .12s}.hof-initials-input:focus{border-color:var(--accent)}.hof-initials-input:disabled{opacity:.4}.hof-submit-btn{flex:1;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:9px 16px;font-size:.87rem;font-weight:700;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .15s}.hof-submit-btn:hover:not(:disabled){opacity:.88}.hof-submit-btn:disabled{opacity:.4;cursor:default}.hof-submit-status{margin:6px 0 0;font-size:.75rem;color:var(--text-muted);min-height:1.1em}.soft-keyboard{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;flex-wrap:wrap;gap:5px;padding:10px 12px env(safe-area-inset-bottom,8px);background:#09090e;border-top:1px solid var(--btn-border)}.sk-btn{flex:1;min-width:38px;background:var(--btn-bg);color:var(--text);border:1px solid var(--btn-border);border-radius:var(--radius-sm);padding:10px 4px;font-size:1rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.sk-btn:active{background:var(--accent);border-color:var(--accent)}