main{--success:#2d8a5c;--danger:#c44;--inset:color-mix(in srgb, var(--border) 35%, var(--bg))}main *{box-sizing:border-box}main .view{display:none}main .view-active{display:block}main .card{margin-bottom:1rem}main .card :where(h2,h3){margin:0 0 1rem;font-weight:600}main .settings-panel h2{margin-top:0}main .home-start-label{font-size:var(--text-xs);color:var(--text-muted);margin:0 0 1rem}main .home-actions{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}main .home-actions .btn{margin-top:0;margin-right:0}main .start-row{flex-wrap:wrap;gap:.5rem;display:flex}main .start-row .btn{margin-top:0;margin-right:0}main .home-mode{margin-top:1rem}main .home-mode .home-start-label{color:var(--text);font-weight:600}main .home-settings-row{margin-top:1rem}main .field-grid{gap:.75rem;margin-bottom:1rem;display:grid}main label{font-size:var(--text-xs);color:var(--text-muted);flex-direction:column;gap:.35rem;display:flex}main input,main select{border:1px solid var(--border);background:var(--inset);color:var(--text);border-radius:6px;padding:1rem;font-size:1rem}main label.checkbox{flex-direction:row;align-items:center;gap:.5rem}main .advanced{color:var(--text-muted);margin-bottom:1rem}main .hint{color:var(--success);font-size:var(--text-xs)}main .progress-row{font-size:var(--text-base);justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}main .practice-status{margin:1rem 0;font-size:1.5rem;font-weight:600}main .practice-hint{font-size:var(--text-xl);flex-wrap:wrap;justify-content:center;gap:.75rem;min-height:1em;margin:1rem 0;line-height:1;display:flex}main .practice-hint .hint-slot{text-align:center;min-width:1.25em}main .practice-hint .hint-slot-placeholder{visibility:hidden}main .practice-hint .hint-slot:not(.hint-correct){color:var(--danger)}main .practice-hint .hint-correct{color:var(--success)}main .practice-hint .hint-reveal{color:var(--success);font-size:2rem;line-height:1}main .practice-sequence{color:var(--text-muted);font-size:var(--text-base);margin:0 0 1rem}main .practice-live{font-family:var(--font-mono);color:var(--text-muted);margin:0 0 1rem}main .meter-wrap{margin-top:1rem}main .meter-label{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:1rem}main .meter{background:var(--inset);border:1px solid var(--border);border-radius:999px;height:10px;position:relative;overflow:hidden}main .meter-fill{background:linear-gradient(90deg, var(--accent-hover), var(--accent));width:0%;height:100%;transition:width 80ms linear}main .meter-fill.above-gate{background:linear-gradient(90deg, color-mix(in srgb, var(--success) 70%, var(--bg)), var(--success))}main .meter-gate{background:var(--text);opacity:.85;pointer-events:none;z-index:1;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}main .gate-slider{font-size:var(--text-xs);flex-direction:row;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1rem}main .gate-slider input[type=range]{min-width:0;accent-color:var(--accent);background:0 0;border:none;flex:1;padding:0}main .gate-hint{font-size:var(--text-xs);color:var(--text-muted);margin:1rem 0 0}main .note-range-field{flex-direction:column;gap:.25rem;display:flex}main .note-range-field .gate-slider{margin-top:0}main .note-range-preview{font-size:var(--text-xs);color:var(--text-muted);margin:0;line-height:1}main .practice-volume,main .practice-note-range{margin-top:1rem}main .note-name-pad{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;margin-top:1rem;display:grid}main .note-name-btn{min-width:0;margin:0;padding:1rem}main .note-name-btn:disabled{opacity:.4;cursor:not-allowed}main .note-name-btn--out-of-range:disabled{opacity:.28;filter:grayscale(.6)}main .fretboard-wrap{margin-top:1rem}main .fretboard-scroll{-webkit-overflow-scrolling:touch;padding-bottom:1rem;overflow-x:auto}main .fretboard-neck{grid-template-rows:repeat(var(--string-count), 1.65rem);background-color:#e6c98a;background-image:repeating-linear-gradient(90deg,#0000 0 3px,#c9a66b38 3px 4px),linear-gradient(#f3e0b0 0%,#e6c98a 48%,#d4b070 100%);border:1px solid #b8955a;border-radius:6px;min-width:min-content;display:grid;position:relative;overflow:hidden}main .fretboard-inactive{opacity:.55}main .fretboard-inlay{pointer-events:none;z-index:1;justify-content:center;align-items:center;display:flex}main .fretboard-inlay:after{content:"";opacity:.85;background:#2a241c;border-radius:50%;width:.5rem;height:.5rem}main .fretboard-inlay--double{flex-direction:column;gap:28%}main .fretboard-inlay--double:before{content:"";opacity:.85;background:#2a241c;border-radius:50%;width:.5rem;height:.5rem}main .fretboard-string-line{pointer-events:none;height:var(--string-width);z-index:1;opacity:.85;background:linear-gradient(#c8c4be,#7a7670);border-radius:999px;align-self:center}main .fretboard-cell{z-index:2;cursor:pointer;touch-action:manipulation;appearance:none;color:inherit;background:0 0;border:none;border-right:1.5px solid #6d6963;border-radius:0;min-width:0;min-height:0;margin:0;padding:0;position:relative}main .fretboard-cell--nut{background:#f7f1e46b;border-right-width:4px;border-right-color:#f4eee4}main .fretboard-cell:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 18%, transparent)}main .fretboard-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}main .fretboard-cell:disabled{cursor:default;opacity:1}main .fretboard-cell--out-of-range{background:#3a322852}main .fretboard-cell--nut.fretboard-cell--out-of-range{background:#3a32286b}main .fretboard-cell--out-of-range:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 12%, #3a3228 28%)}main .fretboard-cell--flash{background:color-mix(in srgb, var(--accent) 45%, transparent)}main .fretboard-cell--prompt{background:color-mix(in srgb, var(--accent) 62%, transparent);box-shadow:inset 0 0 0 2px var(--accent)}main .fretboard-cell--out-of-range.fretboard-cell--prompt{background:color-mix(in srgb, var(--accent) 62%, transparent)}main .stats-grid{grid-template-columns:1fr 1fr;gap:.75rem 1rem;margin:0 0 1rem;display:grid}main .stats-grid dt{color:var(--text-muted);font-size:var(--text-xs)}main .stats-grid dd{font-size:var(--text-lg);margin:0;font-weight:600}main .per-note-list{margin:0 0 1rem;padding:0;list-style:none}main .per-note-list li{border-bottom:1px solid var(--border);font-size:var(--text-base);justify-content:space-between;padding:1rem 0;display:flex}main .per-note-list .wrong{color:var(--danger)}main :where(.tuner-title,.metronome-title,.drum-title){text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.75rem;font-weight:600}main .tuner-note{font-size:var(--text-xl);text-align:center;letter-spacing:.02em;margin:1rem 0;font-weight:600}main .tuner-card.in-tune .tuner-note{color:var(--success)}main .tuner-cents{text-align:center;font-size:var(--text-lg);min-height:1.5rem;margin:0 0 1rem}main .tuner-freq{font-family:var(--font-mono);color:var(--text-muted);text-align:center;min-height:1.25rem;margin:0 0 1rem}main .tuner-gauge{background:var(--inset);border:1px solid var(--border);border-radius:999px;height:12px;margin:0 0 1rem;position:relative;overflow:hidden}main .tuner-center{background:var(--text-muted);opacity:.6;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:50%}main .tuner-needle{background:var(--accent);border-radius:2px;width:4px;margin-left:-2px;transition:left 60ms linear;position:absolute;top:1px;bottom:1px;left:50%}main .tuner-card.in-tune .tuner-needle{background:var(--success)}main .metronome-controls{flex-direction:column;align-items:center;gap:1.5rem;margin-top:1rem;display:flex}main .metronome-play{min-width:8rem;margin:0}main .tempo-dial-wrap{flex-direction:column;align-items:center;gap:.5rem;width:100%;display:flex}main .tempo-dial-label{font-size:var(--text-xs);color:var(--text-muted)}main .tempo-dial{border:3px solid var(--border);background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--border) 50%, var(--bg-elevated)) 0%, var(--bg-elevated) 65%);touch-action:none;cursor:grab;user-select:none;border-radius:50%;width:10rem;height:10rem;position:relative}main .tempo-dial:active{cursor:grabbing}main .tempo-dial:focus-visible{outline:2px solid var(--accent);outline-offset:3px}main .tempo-dial-knob{background:var(--accent);transform-origin:50% 4.35rem;pointer-events:none;border-radius:2px;width:4px;height:1.35rem;margin-left:-2px;position:absolute;top:.65rem;left:50%;transform:rotate(0)}main .metronome-card.beat-pulse .tempo-dial{border-color:var(--accent-hover)}main .tempo-dial-value{font-size:var(--text-xl);letter-spacing:-.03em;pointer-events:none;font-weight:700;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}main .tempo-dial-unit{color:var(--text-muted);pointer-events:none;font-size:.75rem;position:absolute;top:58%;left:50%;transform:translate(-50%)}main .tempo-stepper{justify-content:center;align-items:center;gap:.35rem;margin-top:1rem;display:flex}main .tempo-stepper-btn-wide{min-width:2.75rem}main .tempo-tap-btn{width:100%;max-width:10rem;margin-top:1rem}main .stepper-field{flex-direction:column;align-items:center;gap:.5rem;width:100%;display:flex}main .stepper-label{font-size:var(--text-xs);color:var(--text-muted)}main .stepper-label-row{font-size:var(--text-xs);color:var(--text-muted);justify-content:center}main .stepper-field:has(#metronome-beats:disabled) .stepper{opacity:.45}main .stepper{align-items:center;gap:.35rem;display:flex}main .stepper-btn{min-width:2.25rem;margin:0;padding:1rem}main .stepper-input{text-align:center;width:3rem;font-size:var(--text-base);border:1px solid var(--border);background:var(--bg);color:var(--text);-moz-appearance:textfield;border-radius:6px;padding:1rem;font-weight:600}main .stepper-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}main .stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}main .stepper-btn:disabled{opacity:.35;cursor:not-allowed}main .metronome-volume{width:100%;max-width:18rem}main .drum-controls{flex-direction:column;gap:1.25rem;margin-top:1rem;display:flex}main .drum-transport{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}main .drum-play{min-width:8rem;margin:0}main .drum-tempo{width:100%;max-width:20rem;margin:0 auto}main .drum-volumes{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;width:100%;max-width:22rem;margin:0 auto;display:grid}main .drum-vol-slider{text-align:center;flex-direction:column;align-items:center;gap:.35rem;margin:0}main .drum-vol-mark{font-size:var(--text-xs);color:var(--text);letter-spacing:.02em;font-weight:600}main .drum-vol-slider input[type=range]{width:100%}main .drum-bpm-readout{text-align:center;font-size:var(--text-base);margin-top:1rem;font-weight:600;display:block}main .drum-steppers{flex-wrap:wrap;justify-content:center;gap:1rem 1.5rem;width:100%;display:flex}main .drum-grid{width:100%;margin-top:1rem}main .drum-grid-scroll{padding-bottom:1rem;overflow-x:auto}main .drum-grid-inner{flex-direction:column;gap:.35rem;min-width:min-content;display:flex}main .drum-row{align-items:center;gap:.35rem;display:flex}main .drum-row-label{color:var(--text-muted);text-align:right;flex:0 0 2rem;padding-right:1rem;font-size:.75rem;line-height:1}main .drum-steps{gap:.2rem;display:flex}main .drum-step{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:6px;flex:0 0 1.35rem;width:1.35rem;height:1.35rem;margin:0;padding:0}main .drum-step:hover{border-color:var(--accent-hover)}main .drum-step-on{background:var(--accent);border-color:var(--accent);color:#fff}main .drum-step-current{box-shadow:0 0 0 2px var(--text)}main .drum-step-on.drum-step-current{box-shadow:0 0 0 2px var(--text), inset 0 0 0 1px #0003}main .drum-step.drum-beat-mark{border-color:color-mix(in srgb, var(--border) 70%, var(--accent) 30%)}main .evenness-title{font-weight:600}main .evenness-lead{font-size:var(--text-xs);color:var(--text-muted);margin:1rem 0}main .evenness-wave-wrap{--evenness-wave-bg:var(--inset);--evenness-beat-line:color-mix(in srgb, var(--text) 45%, transparent);width:100%;margin-bottom:1rem;position:relative}main .evenness-wave{border:1px solid var(--border);background:var(--inset);border-radius:8px;width:100%;height:11rem;display:block}main .evenness-legend{font-size:var(--text-xs);justify-content:flex-end;gap:.85rem;margin-top:1rem;display:flex}main .evenness-legend-odd{color:#3b7ddd}main .evenness-legend-even{color:#c44}main .evenness-controls{flex-direction:column;align-items:stretch;gap:.25rem;max-width:20rem;margin:0 auto;display:flex}main .evenness-tempo,main .evenness-click-volume,main .evenness-latency,main .evenness-lowpass{width:100%;margin-top:1rem}main .evenness-tempo,main .evenness-latency,main .evenness-lowpass{flex-wrap:wrap}main .evenness-tempo .drum-bpm-readout,main .evenness-latency .drum-bpm-readout,main .evenness-lowpass .drum-bpm-readout{flex:1 0 100%}