:root{--bg: #f6f1e8;--surface: #fffaf2;--ink: #222222;--accent: #2d6a4f;--muted: #7f8b8c}*{box-sizing:border-box}body{margin:0;font-family:IBM Plex Sans,Avenir Next,Segoe UI,sans-serif;color:var(--ink);background:radial-gradient(circle at top right,#d8f3dc 0%,transparent 30%),radial-gradient(circle at bottom left,#ffe8d6 0%,transparent 35%),var(--bg)}#app{min-height:100dvh;padding:1rem;display:grid;place-items:center}.panel{width:min(940px,100%);background:var(--surface);border:1px solid #e8ddcb;border-radius:16px;padding:1rem;box-shadow:0 10px 25px #00000014}#app[data-mode=practice] .panel{width:min(1180px,100%)}#app[data-mode=tuning] .panel{width:min(1080px,100%)}h1{margin:0 0 .45rem;font-size:clamp(1.2rem,2.4vw,1.55rem)}.brand-wordmark{display:inline-block;color:#16392b;font-family:Ballet,Zapfino,Apple Chancery,Segoe Script,cursive;font-size:clamp(2.65rem,6vw,4.15rem);font-optical-sizing:auto;font-style:normal;font-weight:400;letter-spacing:0;line-height:.82;-webkit-text-stroke:.35px #16392b;text-shadow:.35px 0 #16392b,0 .35px #16392b}h2{margin-top:0}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.45rem}.mode-hint{display:none;font-size:.86rem;line-height:1.2;white-space:nowrap}.top-bpm-control,.top-pitch-control{display:inline-flex;align-items:center;gap:.38rem;color:#4f5d5e;font-size:.86rem}.top-pitch-control select{padding:.38rem .55rem;font-size:.86rem}.audio-processing-control{display:inline-flex;align-items:center;gap:.38rem;color:#4f5d5e;font-size:.86rem}.audio-processing-control select{padding:.38rem .55rem;font-size:.86rem}.audio-processing-status{max-width:15rem;color:#63706f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-processing-status.is-error{color:#a33a2d}.sheet-playback-controls{display:none;align-items:center;gap:.42rem;flex-wrap:wrap}.sheet-playback-controls label{display:inline-flex;align-items:center;gap:.36rem;color:#4f5d5e;font-size:.86rem}.sheet-playback-controls select{padding:.38rem .55rem;font-size:.86rem}.sheet-playback-btn{min-height:2.2rem;border-color:#1b4332;background:#1b4332;color:#fff;font-weight:800}.sheet-playback-btn:hover,.sheet-playback-btn:focus-visible{border-color:#2d6a4f;background:#2d6a4f}.sheet-playback-btn.playing{border-color:#7a3e15;background:#7a3e15}button,select{border:1px solid #d2c4af;border-radius:10px;background:#fff;color:var(--ink);padding:.5rem .75rem;font-size:.95rem}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem;font-size:.92rem}.bleed-threshold-group{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto}.bleed-threshold-group input{width:7.4ch;min-width:7.4ch;padding:.22rem .35rem;font-size:.86rem;-moz-appearance:textfield}.bleed-threshold-group input::-webkit-outer-spin-button,.bleed-threshold-group input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.toggle-row.compact{margin-bottom:.35rem;font-size:.88rem}.grid{display:grid;gap:1rem;grid-template-columns:1fr}.card{background:#fff;border:1px solid #e8ddcb;border-radius:12px;padding:.75rem}.metric{margin:0;font-size:clamp(1.25rem,4vw,1.9rem);font-weight:700;text-align:left}.note-readout{min-height:4.5rem;display:flex;flex-direction:column;justify-content:flex-start}.bleed-note-line{margin:.12rem 0 0;min-height:1.1rem;font-size:.98rem;line-height:1.1rem;color:#5d6a66}.muted{color:var(--muted)}.meta-line{margin:0 0 .5rem;font-size:.95rem;color:#4f5d5e}.purity-line{min-height:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bleed-note{color:#b00020;font-weight:700}.bleed-note-prefix{color:#5d6a66;font-weight:500}.metronome-box{margin:.1rem 0 .6rem;padding:.45rem .55rem;border:1px solid #ddd1be;border-radius:10px;background:#fffdf8}.practice-sheet-statusbar{display:flex;justify-content:flex-end;align-items:stretch;gap:.55rem;margin-top:.35rem}.practice-sheet-statusbar .metronome-box{margin:0;min-width:0;flex:0 0 auto}.metronome-sound-toggle{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;position:relative;width:3rem;padding:.35rem;border:1px solid #ddd1be;border-radius:8px;background:#fffdf8;color:#1f2f2a;font-size:2.16rem;line-height:1;cursor:pointer}.metronome-sound-toggle .speaker-glyph{display:block}.metronome-sound-toggle:not(.is-on):after{content:"×";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#b42318;font-size:3.6rem;font-weight:800;line-height:1;text-shadow:0 1px 0 #fffdf8}.metronome-sound-toggle.is-on{border-color:#9bc2a6;background:#f1faf3}.beat-batch-box{margin:.1rem 0 .6rem;min-height:72px}.beat-batch-track{position:relative;min-height:72px}.beat-batch{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;gap:.45rem;grid-template-columns:repeat(var(--beat-cols, 4),minmax(0,1fr))}.beat-batch.current{z-index:2}.beat-batch.fading{z-index:1;pointer-events:none}.beat-batch.empty{position:static;display:block;color:#6b756e;font-size:.85rem}.beat-cell{border:1px solid #ddd1be;border-radius:8px;background:#fffdf8;padding:.26rem .32rem;display:flex;flex-direction:column;gap:.2rem;min-height:56px}.beat-index{font-size:.74rem;color:#6f7a73}.beat-text{font-size:.76rem;color:#2a3632}.metro-row{display:flex;gap:.35rem;align-items:center}.metro-countdown{margin-bottom:.32rem;font-size:1.75rem;line-height:1;font-weight:800;color:#1b4332}.metro-beat{width:32px;height:32px;border-radius:999px;background:#c0b09c;opacity:.45;transform:scale(1);box-shadow:0 0 #0000}.metro-beat.accent-strong{background:#2d6a4f}.metro-beat.accent-medium{background:#58856f}.metro-beat.active{opacity:var(--pulse-opacity, .9);transform:scale(var(--pulse-scale, 1.15));box-shadow:0 0 calc(10px + 12px * var(--pulse-glow, .35)) rgba(45,106,79,calc(.15 + .45 * var(--pulse-glow, .35)))}.metro-label{margin-top:.28rem;font-size:.78rem;color:#6b756e}.sequence-controls{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:.5rem;margin-bottom:.6rem}.sequence-controls label{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:#4f5d5e}.sequence-controls input,.sequence-controls select{font-size:.9rem;padding:.4rem .5rem}.note-entry-controls{display:none;grid-template-columns:repeat(auto-fit,minmax(6.8rem,1fr));gap:.5rem;align-items:end;margin:-.1rem 0 .6rem}.note-entry-controls label{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:#4f5d5e}.note-entry-controls input,.note-entry-controls select{min-width:0;font-size:.9rem;padding:.4rem .5rem}.note-entry-controls button{height:2.25rem;border-radius:8px}.live-bpm-stepper{display:inline-flex;align-items:stretch;gap:.28rem}.live-bpm-input{width:6.2ch;min-width:6.2ch;-moz-appearance:textfield}.live-bpm-arrows{display:inline-flex;flex-direction:column;gap:.14rem}.live-bpm-input::-webkit-outer-spin-button,.live-bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.live-bpm-arrow{width:1.35rem;height:1.05rem;border-radius:6px;border:1px solid #d2c4af;padding:0;font-size:.62rem;line-height:1;background:#fff}.practice-panel{margin:0;padding:.55rem;border:1px solid #ddd1be;border-radius:8px;background:#fffdf8}.practice-status{display:inline-flex;align-items:center;min-height:1.9rem;padding:.22rem .5rem;border-radius:8px;font-size:1.12rem;font-weight:700;color:#1f2f2a;background:#e9f4ee}.practice-feedback-grid{display:grid;grid-template-columns:minmax(9rem,.7fr) minmax(0,1.3fr);gap:.4rem;align-items:stretch}.practice-sheet-statusbar .practice-feedback-grid{flex:1 1 auto}.practice-feedback-card{display:flex;align-items:center;gap:.35rem;min-width:0;padding:.26rem .34rem;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.practice-feedback-card>span{flex:0 0 auto;color:#60706b;font-size:.72rem;line-height:1.1}.practice-overall-feedback{flex:1 1 auto;min-height:1.9rem;padding:.24rem .42rem;border-radius:8px;color:#1f2f2a;background:#f3f5f2;font-size:1.12rem;line-height:1.25}.practice-overall-feedback.status-play-faster{background:#e1f2e8;color:#173c2e}.practice-overall-feedback.status-play-slower{background:#f8e8d5;color:#5d2e0b}.practice-overall-feedback.status-on-tempo{background:#dcebe3;color:#173c2e}.practice-status.status-play-faster{color:#173c2e;background:#ccebd9}.practice-status.status-play-slower{color:#5d2e0b;background:#f6dec2}.practice-status.status-on-tempo{color:#fff;background:#2d6a4f}.practice-status.status-insufficient,.practice-status.status-idle{color:#53615d;background:#edf0ed}.practice-pattern-controls{display:flex;align-items:center;gap:.42rem;margin-top:.44rem}.practice-pattern-play{width:2.45rem;height:2.45rem;display:inline-grid;place-items:center;flex:0 0 auto;border-radius:999px;padding:0;color:#fff;background:#1b4332;border-color:#1b4332;line-height:1}.practice-pattern-play.playing{background:#5d2e0b;border-color:#5d2e0b}.practice-pattern-manage{height:2.35rem;flex:0 0 auto;border-radius:8px;padding:.38rem .62rem;color:#1f2f2a;background:#fffdf8}.practice-analysis-btn{height:2.35rem;flex:0 0 auto;border-radius:8px;padding:.38rem .62rem;color:#1f2f2a;background:#fff}.practice-analysis-btn.active{border-color:#2d6a4f;background:#e9f4ee}.practice-pattern-select{width:7.2rem;min-width:7.2rem;padding:.44rem .5rem;border-radius:8px;font-size:.86rem}.practice-pattern-loop{display:inline-flex;align-items:center;gap:.28rem;color:#4f5d5e;font-size:.82rem;white-space:nowrap}.practice-pattern-loop-mode{display:inline-flex;align-items:center;gap:.32rem;color:#4f5d5e;font-size:.82rem;white-space:nowrap}.practice-pattern-loop-mode select{min-width:7.8rem;padding:.38rem .45rem;border-radius:8px;font-size:.82rem}.practice-ramp-controls{display:inline-flex;align-items:center;gap:.32rem;flex:0 1 auto}.practice-ramp-controls label{display:inline-flex;align-items:center;gap:.22rem;color:#4f5d5e;font-size:.78rem;white-space:nowrap}.practice-ramp-controls input{width:3.3rem;min-width:0;border:1px solid #d2c4af;border-radius:8px;padding:.34rem .36rem;font-size:.82rem}.practice-pattern-copy{min-width:4.2rem;flex:0 0 4.2rem;display:flex;flex-direction:column;gap:.12rem;align-items:center;text-align:center}.practice-pattern-copy strong{display:none}.practice-pattern-copy span{color:#60706b;font-size:.8rem;line-height:1.25;overflow-wrap:anywhere}.practice-pattern-copy .practice-pattern-storage-status{color:#8a6f4e;font-size:.72rem}.practice-estimate,.practice-detail{margin:0;font-size:.84rem;color:#3f4d49}.practice-detail{display:none;color:#6b756e}.practice-minimal-controls{display:flex;flex-wrap:wrap;gap:.42rem;align-items:center;margin:0}.practice-minimal-controls label{display:inline-flex;align-items:center;gap:.35rem;color:#4f5d5e;font-size:.82rem}.practice-minimal-controls input[type=number],.practice-minimal-controls select{width:4.2rem;min-width:0;border:1px solid #d2c4af;border-radius:8px;padding:.34rem .42rem;font-size:.86rem}.practice-minimal-controls select{width:6.6rem}.practice-debug-toggle{margin-left:auto}.practice-debug-section{display:none}.practice-tuning{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem;gap:.55rem;margin-top:.65rem}.practice-tuning label{display:flex;flex-direction:column;gap:.24rem;color:#4f5d5e;font-size:.78rem}.practice-tuning input[type=range]{width:100%}.practice-tuning input[type=number],.practice-tuning select{width:100%;min-width:0;border:1px solid #d2c4af;border-radius:8px;padding:.36rem .45rem;font-size:.86rem}.practice-debug{margin-top:.65rem}.tuning-panel{margin:0;padding:.55rem;border:1px solid #ddd1be;border-radius:8px;background:#fffdf8}.tuning-command{min-height:3.1rem;display:flex;align-items:center;padding:.55rem .65rem;border:1px solid #e4d8c6;border-radius:8px;color:#1f2f2a;background:#fff;font-size:1.04rem;font-weight:800;line-height:1.2}.tuning-command.status-good,.tuning-command.phase-complete{color:#fff;background:#2d6a4f;border-color:#2d6a4f}.tuning-command.status-needs-work{color:#5d2e0b;background:#f8e8d5;border-color:#e9c9a0}.tuning-meter{margin-top:.55rem;padding:.52rem .62rem;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.tuning-meter-readout{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;align-items:baseline}.tuning-meter-readout span,.tuning-meter-readout small{color:#60706b;font-size:.76rem;line-height:1.1}.tuning-meter-readout strong{color:#1f2f2a;font-size:1rem;line-height:1.1}.tuning-meter-track{position:relative;height:18px;margin-top:.45rem;border-radius:999px;background:linear-gradient(90deg,rgba(176,0,32,.18),transparent 42%,transparent 58%,rgba(176,0,32,.18)),#ece8df;overflow:hidden}.tuning-meter-zone,.tuning-meter-center,.tuning-meter-marker{position:absolute;top:0;bottom:0}.tuning-meter-zone{left:calc(50% - var(--tol, 8%));right:calc(50% - var(--tol, 8%));background:#2d6a4f3d}.tuning-meter-center{left:calc(50% - 1px);width:2px;background:#2d6a4f}.tuning-meter-marker{left:var(--marker, 50%);width:4px;border-radius:999px;background:#111;transform:translate(-50%);box-shadow:0 0 0 2px #fffdf8}.tuning-meter-labels{display:flex;justify-content:space-between;margin-top:.22rem;color:#60706b;font-size:.68rem}.tuning-controls{display:flex;flex-wrap:wrap;gap:.45rem;align-items:end;margin-top:.55rem}.tuning-controls label{display:flex;flex-direction:column;gap:.2rem;color:#4f5d5e;font-size:.82rem}.tuning-controls input,.tuning-controls select{min-width:5.6rem;border:1px solid #d2c4af;border-radius:8px;padding:.4rem .5rem;font-size:.9rem}.tuning-controls button{height:2.35rem;border-radius:8px}.tuning-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.8rem,1fr));gap:.38rem;margin-top:.55rem}.tuning-summary-empty{color:#6b756e;font-size:.86rem}.tuning-summary-item{min-width:0;padding:.42rem;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.tuning-summary-item.active{border-color:#2d6a4f;box-shadow:inset 0 0 0 1px #2d6a4f33}.tuning-summary-item.status-good{background:#e9f4ee}.tuning-summary-item.status-needs-work{background:#fff4e8}.tuning-summary-item span,.tuning-summary-item strong,.tuning-summary-item small{display:block;overflow:hidden;text-overflow:clip;white-space:nowrap}.tuning-summary-item span{color:#60706b;font-size:.68rem}.tuning-summary-item strong{margin-top:.08rem;color:#1f2f2a;font-size:.94rem;line-height:1.1}.tuning-summary-item small{margin-top:.08rem;color:#60706b;font-size:.72rem}.tuning-bleed-report{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.38rem;margin-top:.16rem;padding-top:.42rem;border-top:1px solid #e4d8c6}.tuning-bleed-title{grid-column:1 / -1;color:#60706b;font-size:.72rem;font-weight:800;line-height:1.1}.tuning-bleed-row{min-width:0;padding:.42rem;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.tuning-bleed-row span,.tuning-bleed-row strong,.tuning-bleed-row small{display:block;overflow-wrap:anywhere}.tuning-bleed-row span{color:#60706b;font-size:.68rem}.tuning-bleed-row strong{margin-top:.08rem;color:#1f2f2a;font-size:.9rem}.tuning-bleed-row small{margin-top:.1rem;color:#60706b;font-size:.72rem;line-height:1.2}.practice-analysis-panel{display:none;margin-top:.65rem;padding-top:.65rem;border-top:1px solid #e4d8c6}.practice-analysis-empty{color:#6b756e;font-size:.85rem}.practice-analysis-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.practice-analysis-summary div{min-width:0;padding:.48rem;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.practice-analysis-summary span,.practice-analysis-heading span{display:block;color:#60706b;font-size:.72rem;line-height:1.1}.practice-analysis-summary strong{display:block;margin-top:.14rem;color:#1f2f2a;font-size:.88rem;line-height:1.2;overflow-wrap:anywhere}.practice-analysis-block{position:relative;margin-top:.65rem}.practice-analysis-heading{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;margin-bottom:.34rem}.practice-analysis-heading small{color:#6b756e;font-size:.68rem;line-height:1.2;text-align:right}.practice-histogram{position:relative;z-index:1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.26rem;height:130px;padding:.55rem .45rem 1.35rem;border:1px solid #e4d8c6;border-radius:8px;background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(176,0,32,.34) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),#fff}.practice-histogram-bin{min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:.24rem}.practice-histogram-bar{position:relative;min-height:3px;border-radius:4px 4px 0 0;background:#9ab7a8}.practice-histogram-bin.center-bin .practice-histogram-bar{background:#2d6a4f}.practice-histogram-bar span{position:absolute;left:50%;top:-1.05rem;color:#1f2f2a;font-size:.65rem;transform:translate(-50%)}.practice-histogram-bin small{min-height:.8rem;color:#6b756e;font-size:.58rem;line-height:1;text-align:center;white-space:nowrap}.practice-analysis-sheet.practice-sheet{gap:.42rem;padding:0}.analysis-row{min-height:250px}.practice-analysis-pair-grid{position:absolute;top:0;right:0;bottom:0;left:4.35rem;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) .9rem minmax(0,1fr)}.practice-analysis-half{position:relative;min-width:0}.analysis-bleed-half{background:#fffbefad}.practice-analysis-pair-gap{border-left:1px solid rgba(120,101,75,.22)}.practice-sheet-row.has-clef .practice-analysis-half .practice-pattern-grid{left:0}.practice-analysis-target-note .staff-batch-note-head,.practice-analysis-target-note .staff-batch-note-stem{background:#111}.practice-analysis-wrong-note,.practice-analysis-bleed-note{position:absolute;z-index:4;width:var(--dot-size, 12px);height:var(--dot-size, 12px);border:1px solid rgba(255,254,249,.92);border-radius:999px;transform:translate(-50%,-50%)}.practice-analysis-wrong-note{left:50%;background:#b00020;box-shadow:0 0 0 1px #b0002038}.practice-analysis-bleed-note{left:62%;background:#b56818;box-shadow:0 0 0 1px #b5681842}.analysis-slot .practice-pattern-target{bottom:34px}.analysis-slot .practice-pattern-played{bottom:20px}.practice-analysis-errors{position:absolute;left:0;right:0;bottom:6px;font-size:.56rem;font-weight:700;line-height:1.05;text-align:center;overflow:hidden;text-overflow:clip;white-space:nowrap}.practice-analysis-errors.no-attempts{color:#8a7a64}.practice-analysis-errors.no-errors,.practice-analysis-errors.no-bleed{color:#2d6a4f}.practice-analysis-errors.has-errors{color:#b00020}.practice-analysis-errors.has-bleed{color:#9a5b11}.practice-debug-empty{color:#6b756e;font-size:.85rem}.practice-debug-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.practice-debug-cell{min-width:0;padding:.48rem;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.practice-debug-cell.wide{grid-column:1 / -1}.practice-response-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin-top:.5rem}.practice-response-card{min-width:0;padding:.38rem;border:1px solid #e4d8c6;border-radius:8px;background:#fffdf8}.practice-response-card span,.practice-response-card strong,.practice-response-card small{display:block}.practice-response-card span{color:#60706b;font-size:.68rem}.practice-response-card strong{margin-top:.08rem;color:#1f2f2a;font-size:.88rem;line-height:1.1}.practice-response-card small{margin-top:.18rem;color:#6b756e;font-size:.62rem;line-height:1.2;overflow-wrap:anywhere}.practice-debug-cell span,.practice-trace-label span{display:block;color:#60706b;font-size:.72rem;line-height:1.1}.practice-debug-cell strong{display:block;margin-top:.12rem;color:#1f2f2a;font-size:1rem;line-height:1.1}.practice-debug-cell small,.practice-trace-label small{display:block;margin-top:.22rem;color:#6b756e;font-size:.68rem;line-height:1.2;overflow-wrap:anywhere}.practice-level{position:relative;height:8px;margin-top:.42rem;border-radius:999px;background:#e5e0d7;overflow:hidden}.practice-level-fill{height:100%;border-radius:inherit;background:#2d6a4f}.practice-level-marker{position:absolute;top:-2px;bottom:-2px;width:2px;background:#b00020}.practice-level-marker.noise{background:#7f8b8c}.practice-level-marker.sustain{background:#c18a16}.practice-trace-wrap{margin-top:.55rem}.practice-trace-label{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}.practice-trace{display:flex;align-items:flex-end;gap:1px;height:64px;margin-top:.32rem;padding:.22rem;border:1px solid #e4d8c6;border-radius:8px;background:linear-gradient(0deg,rgba(45,106,79,.12) 0 1px,transparent 1px) 0 50% / 100% 50%,#fff}.practice-trace.empty{height:64px}.practice-trace-bar{flex:1 1 0;min-width:1px;border-radius:2px 2px 0 0;background:#bfd4ca}.practice-trace-bar.inactive{background:#d9d6cf;opacity:.55}.practice-trace-bar.peak{background:#b00020;box-shadow:0 0 0 1px #b000203d}.staff{margin:.45rem 0 0;position:relative;height:312px;border-left:2px solid #a6906f;border-right:2px solid #a6906f;background:#fffef9;overflow:hidden}.staff.practice-sheet-active{height:auto;max-height:min(56dvh,500px);min-height:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;border:1px solid #c7b798;border-radius:8px}.staff.practice-sheet-active>.staff-line{display:none}.staff.sheet-entry-active{cursor:crosshair}.spectrum-panel{display:none;margin:.45rem 0 0;position:relative;height:300px;border:1px solid #14251f;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px) 0 0 / 12.5% 100%,#07110f;overflow:hidden}.spectrogram-canvas,.spectrogram-overlay{position:absolute;top:0;right:0;bottom:0;left:0}.spectrogram-canvas{width:100%;height:100%}.spectrogram-overlay{pointer-events:none;background:linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px) 0 0 / 100% 12.5%,linear-gradient(90deg,transparent,rgba(7,17,15,.24))}.spectrum-axis-label{position:absolute;right:.45rem;display:flex;gap:.35rem;align-items:baseline;padding:.08rem .32rem;border-radius:999px;color:#fffaf2;background:#07110f9e;font-size:.72rem;line-height:1;transform:translateY(-50%);text-shadow:0 1px 2px rgba(0,0,0,.55)}.spectrum-axis-label small{color:#afd7c6;font-size:.66rem}.spectrum-current-pitch,.spectrum-primary-band,.spectrum-bleed-band{position:absolute;left:0;right:0;transform:translateY(-50%)}.spectrum-current-pitch{height:2px;background:#fffaf2e6;box-shadow:0 0 12px #fffaf2b8}.spectrum-current-pitch span,.spectrum-bleed-band span{position:absolute;left:.55rem;top:-.82rem;padding:.08rem .32rem;border-radius:999px;font-size:.68rem;color:#fffaf2;background:#07110fb3}.spectrum-primary-band{height:1px;background:#52b788d6}.spectrum-bleed-band{height:12px;border-top:1px dashed rgba(255,80,105,var(--bleed-alpha, .4));border-bottom:1px dashed rgba(255,80,105,var(--bleed-alpha, .4));background:rgba(176,0,32,calc(var(--bleed-alpha, .4) * .24));box-shadow:0 0 18px rgba(176,0,32,calc(var(--bleed-alpha, .4) * .42))}.spectrum-bleed-band span{color:#ffd7de}.staff-line{position:absolute;left:0;right:0;height:1px;background:#78654b}.staff-line.l1{top:56px}.staff-line.l2{top:82px}.staff-line.l3{top:108px}.staff-line.l4{top:134px}.staff-line.l5{top:160px}.trail-layer,.ledger-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.staff-batch-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;display:none}.staff.practice-sheet-active .staff-batch-layer{position:relative;inset:auto;min-height:0;pointer-events:auto}.staff-batch-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(var(--beat-cols, 4),minmax(0,1fr));gap:0}.staff-batch-grid.current{z-index:2}.staff-batch-grid.fading{z-index:1;pointer-events:none}.practice-pattern-grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;grid-template-columns:repeat(var(--pattern-cols, 16),minmax(0,1fr))}.practice-sheet{position:relative;display:grid;gap:.35rem;padding:.4rem .5rem .45rem}.practice-sheet-row{position:relative;min-height:270px;border:1px solid rgba(120,101,75,.16);border-radius:8px;background:#fffef9;overflow:hidden}.practice-sheet-clef{position:absolute;left:.18rem;top:6px;z-index:4;width:4.65rem;height:12.35rem;pointer-events:none}.practice-sheet-clef path{fill:#1f2f2a}.practice-sheet-lines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.practice-sheet-row .practice-pattern-grid{position:absolute;top:0;right:0;bottom:0;left:0}.practice-sheet-row.has-clef .practice-pattern-grid{left:4.35rem}.sheet-entry-slot{position:relative;min-width:0;border-right:1px dashed rgba(120,101,75,.25);background:linear-gradient(180deg,rgba(45,106,79,.035),transparent 42%)}.sheet-entry-slot:nth-child(2n){background:linear-gradient(180deg,rgba(45,106,79,.06),transparent 42%)}.sheet-entry-slot:last-child{border-right:none}.sheet-entry-slot.empty:after{content:"";position:absolute;left:50%;top:108px;width:.34rem;height:.34rem;border-radius:999px;background:#78654b2e;transform:translate(-50%,-50%)}.sheet-entry-note{transform:translate(-50%,-50%)}.sheet-entry-accidental{position:absolute;left:-.25rem;top:50%;min-width:.8rem;color:#1f2f2a;font-size:1rem;font-weight:700;line-height:1;text-align:right;transform:translate(-100%,-50%)}.sheet-entry-slot-label,.sheet-entry-note-label{position:absolute;left:.08rem;right:.08rem;text-align:center;overflow:hidden;text-overflow:clip;white-space:nowrap}.sheet-entry-slot-label{top:.35rem;color:#8a7a64;font-size:.64rem}.sheet-entry-note-label{bottom:.32rem;color:#1f2f2a;font-size:.66rem;font-weight:700}.sheet-entry-note-label.status-wrong{color:#b00020}.sheet-entry-note-label.status-correct{color:#1b7f4a}.practice-pattern-slot{position:relative;min-width:0;border-right:1px dashed rgba(120,101,75,.18)}.practice-pattern-slot.placeholder{opacity:.28}.practice-pattern-slot.active-slot{background:linear-gradient(180deg,rgba(45,106,79,.1),transparent 60%)}.practice-pattern-slot.active-slot:after{content:"";position:absolute;top:.22rem;right:.12rem;bottom:.18rem;left:.12rem;z-index:6;border:2px solid rgba(45,106,79,.72);border-radius:8px;box-shadow:0 0 0 3px #2d6a4f1a;pointer-events:none}.practice-pattern-slot:last-child{border-right:none}.practice-pattern-note{transform:translate(-50%,-50%) scale(1);transform-origin:center;transition:filter .11s ease}.practice-pattern-note.active{transform:translate(-50%,-50%) scale(1.1);filter:drop-shadow(0 0 5px rgba(27,67,50,.3))}.practice-pattern-played-note{z-index:3}.practice-pattern-ledger-line{position:absolute;left:50%;width:32px;height:1px;transform:translate(-50%);background:#78654b}.practice-pattern-ledger-line.played{background:#b00020}.practice-pattern-target,.practice-pattern-played{position:absolute;left:0;right:0;text-align:center;line-height:1.05;overflow:hidden;text-overflow:clip;white-space:nowrap}.practice-pattern-target{bottom:22px;color:#1f2f2a;font-size:.7rem;font-weight:700;opacity:.8}.practice-pattern-target small{display:block;color:#6f7d79;font-size:.58rem;font-weight:600;line-height:1}.practice-pattern-played{bottom:8px;padding:0 1px;color:#9a9184;font-size:.54rem;opacity:.8}.practice-pattern-played.status-correct{color:#2d6a4f;font-weight:700}.practice-pattern-played.status-wrong{color:#b00020;font-weight:700}.tuning-row{min-height:260px}.tuning-slot.active-slot{background:linear-gradient(180deg,rgba(45,106,79,.16),transparent 64%)}.staff-batch-note.tuning-note.status-good .staff-batch-note-head,.staff-batch-note.tuning-note.status-good .staff-batch-note-stem{background:#2d6a4f}.staff-batch-note.tuning-note.status-needs-work .staff-batch-note-head,.staff-batch-note.tuning-note.status-needs-work .staff-batch-note-stem{background:#b35b00}.staff-beat-slot{position:relative;border-right:1px dashed rgba(120,101,75,.25)}.staff-beat-slot.continuation{border-right:1px dashed rgba(120,101,75,.15)}.staff-beat-slot:last-child{border-right:none}.staff-batch-note{position:absolute;left:50%;width:34px;height:24px;transform:translate(-50%,-50%)}.staff-batch-note-head{position:absolute;left:8px;top:6px;width:18px;height:13px;border-radius:50%;background:#1b4332;transform:rotate(-18deg)}.staff-batch-note.value-half .staff-batch-note-head{background:#fffef9;border:2px solid #1b4332;width:16px;height:11px;left:9px;top:7px}.staff-batch-note.value-whole .staff-batch-note-head{background:#fffef9;border:2px solid #1b4332;width:18px;height:12px;left:8px;top:6px}.staff-batch-note.practice-pattern-note .staff-batch-note-head,.staff-batch-note.practice-pattern-note .staff-batch-note-stem{background:#111}.staff-batch-note.practice-pattern-note.status-correct .staff-batch-note-head,.staff-batch-note.practice-pattern-note.status-correct .staff-batch-note-stem{background:#2d6a4f}.staff-batch-note.practice-pattern-note.status-wrong .staff-batch-note-head,.staff-batch-note.practice-pattern-note.status-wrong .staff-batch-note-stem{background:#111}.staff-batch-note.practice-pattern-played-note .staff-batch-note-head,.staff-batch-note.practice-pattern-played-note .staff-batch-note-stem{background:#b00020}.staff-batch-note-stem{position:absolute;width:2px;height:46px;background:#1b4332}.staff-batch-note.stem-up .staff-batch-note-stem{left:24px;top:-36px}.staff-batch-note.stem-down .staff-batch-note-stem{left:8px;top:6px}.staff-batch-note-flag{position:absolute;width:12px;height:12px;border-top:2px solid #1b4332;border-right:2px solid #1b4332;border-top-right-radius:10px}.staff-batch-note.stem-up .staff-batch-note-flag{left:24px;top:-36px;transform:rotate(18deg)}.staff-batch-note.stem-down .staff-batch-note-flag{left:-2px;top:42px;transform:scaleY(-1) rotate(18deg)}.staff-rest-token{position:absolute;left:50%;top:108px;transform:translate(-50%);font-size:1rem;color:#6f7a73;font-weight:600}.staff-batch-ledger-line{position:absolute;left:50%;width:40px;height:1px;transform:translate(-50%);background:#78654b}.trail-layer{z-index:1}.ledger-layer{z-index:4}.ledger-line,.trail-ledger-line{position:absolute;width:40px;height:1px;background:#78654b}.ledger-line{left:calc(58% - 19px)}.trail-note{position:absolute;transform:translateY(-50%);width:34px;height:24px}.trail-ledger-line{left:-3px}.trail-note-head,.staff-note-head{position:absolute;left:8px;top:6px;width:18px;height:13px;border-radius:50%;background:#1b4332;transform:rotate(-18deg)}.trail-note-stem,.staff-note-stem{position:absolute;width:2px;height:54px;background:#1b4332}.trail-note.stem-up .trail-note-stem,.staff-note-group.stem-up .staff-note-stem{left:24px;top:-44px}.trail-note.stem-down .trail-note-stem,.staff-note-group.stem-down .staff-note-stem{left:8px;top:6px}.staff-note-group{position:absolute;left:58%;transform:translateY(-50%);width:34px;height:24px;pointer-events:none;visibility:hidden;z-index:5}pre{white-space:pre-wrap;margin:0;font-size:.9rem}@media (min-width: 800px){.grid{grid-template-columns:1fr 1fr}.sequence-controls{grid-template-columns:repeat(5,minmax(90px,1fr))}#app[data-mode=practice] .grid,#app[data-mode=tuning] .grid{grid-template-columns:minmax(0,1fr)}}#app[data-mode=practice] .note-readout,#app[data-mode=practice] .practice-hidden-control,#app[data-mode=practice] #sequence-meta,#app[data-mode=practice] #sequence-summary,#app[data-mode=tuning] .practice-sheet-statusbar,#app[data-mode=tuning] .practice-hidden-control,#app[data-mode=tuning] #sequence-meta,#app[data-mode=tuning] #sequence-summary,#app[data-mode=ai-probe] .practice-sheet-statusbar,#app[data-mode=ai-probe] .practice-hidden-control,#app[data-mode=ai-probe] .visual-card{display:none}#app[data-mode=ai-probe] #sequence-summary{white-space:normal}#app[data-mode=ai-probe] .grid{grid-template-columns:minmax(0,1fr)}.ai-probe-panel{display:grid;gap:.5rem}.ai-probe-panel button{justify-self:start;border-radius:8px}.ai-probe-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;color:#60706b;font-size:.82rem}.ai-probe-controls label{display:inline-flex;align-items:center;gap:.35rem;color:#2d3b38;font-weight:700}.ai-probe-controls input{width:5rem;padding:.34rem .45rem;border:1px solid #d2c4af;border-radius:8px;background:#fffdf8;color:#1f2f2a;font:inherit;font-variant-numeric:tabular-nums}.ai-probe-controls .ai-probe-diagnose{gap:.28rem;font-weight:800}.ai-probe-controls .ai-probe-diagnose input{width:auto;margin:0;accent-color:#2d6a4f}.ai-probe-notation{display:grid;gap:.42rem}.ai-probe-notation-sheet{min-height:244px;padding:0;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.ai-probe-notation-row{min-height:242px;border:none;border-radius:8px;background:#fffef9}.ai-probe-notation-row .practice-sheet-lines{left:4.35rem;right:.75rem}.ai-probe-notation-track{position:absolute;top:0;right:.75rem;bottom:0;left:4.35rem}.ai-probe-notation-grid{top:0;right:0;bottom:0;left:0}.ai-probe-playhead{position:absolute;top:.55rem;bottom:.55rem;z-index:5;width:2px;background:#2d6a4f;box-shadow:0 0 0 2px #2d6a4f1f;opacity:.72;pointer-events:none;transform:translate(-50%)}.ai-probe-diagnostics{display:grid;gap:.5rem}.ai-probe-profile{display:grid;gap:.42rem;padding:.55rem;border:1px solid #e4d8c6;border-radius:8px;background:#fff;color:#22322e}.ai-probe-profile-head,.ai-probe-profile-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem .75rem}.ai-probe-profile-head strong{font-size:.88rem}.ai-probe-profile-head span,.ai-probe-profile-foot span{color:#60706b;font-size:.72rem}.ai-probe-profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.26rem}.ai-probe-profile-row{display:flex;align-items:center;justify-content:space-between;gap:.45rem;min-height:2rem;padding:.28rem .38rem;border:1px solid #eee5d7;border-radius:6px;background:#fffdf8}.ai-probe-profile-row.bottleneck{border-color:#98b9a1;background:#edf7f0}.ai-probe-profile-row span{color:#4f5d5e;font-size:.68rem;line-height:1.05}.ai-probe-profile-row strong{flex:0 0 auto;color:#17382a;font-size:.72rem;font-variant-numeric:tabular-nums}.ai-probe-tempo{display:grid;gap:.32rem;padding:.55rem;border:1px solid #e4d8c6;border-radius:8px;background:#fffdf8}.ai-probe-beats,.ai-probe-slots,.ai-probe-symbols{display:grid;grid-template-columns:repeat(16,minmax(0,1fr))}.ai-probe-pattern{padding:.34rem .45rem;border:1px solid #e6dbc9;border-radius:8px;background:#fff;color:#4f5d5e;font-size:.72rem;font-weight:700;line-height:1.25;overflow-wrap:anywhere}.ai-probe-beat{grid-column:span 4;padding:.18rem .28rem;border-left:1px solid #d9c9b3;color:#60706b;font-size:.7rem;font-weight:800;text-transform:uppercase}.ai-probe-beat.active{color:#1b4332;background:#dfeee4}.ai-probe-slot{min-height:3.4rem;padding:.22rem .14rem;border:1px solid #e9dfd1;border-left-width:0;background:#fff;color:#22322e;overflow:hidden;text-align:center}.ai-probe-slot:first-child{border-left-width:1px;border-radius:8px 0 0 8px}.ai-probe-slot:last-child{border-radius:0 8px 8px 0}.ai-probe-slot.beat-start{border-left-width:2px;border-left-color:#b59d7b}.ai-probe-slot.active{outline:3px solid #2d6a4f;outline-offset:-3px;background:#ebf7ee}.ai-probe-slot.has-note{background:#f5fbf7}.ai-probe-slot span,.ai-probe-slot strong,.ai-probe-slot small{display:block;line-height:1.05}.ai-probe-slot span{color:#82908b;font-size:.62rem;font-weight:800;font-variant-numeric:tabular-nums}.ai-probe-slot strong{min-height:1.05rem;margin-top:.2rem;color:#17382a;font-size:.8rem}.ai-probe-slot small{margin-top:.16rem;color:#60706b;font-size:.58rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-probe-symbols{gap:.2rem}.ai-probe-symbol{min-height:2.8rem;padding:.35rem .42rem;border:1px solid #d8cbb8;border-radius:8px;background:#fff;color:#1f2f2a;overflow:hidden}.ai-probe-symbol.note{border-color:#98b9a1;background:#edf7f0}.ai-probe-symbol.rest{color:#60706b;background:#f7f2ea}.ai-probe-symbol.active{box-shadow:inset 0 0 0 2px #2d6a4f}.ai-probe-symbol strong,.ai-probe-symbol small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-probe-symbol strong{font-size:.78rem;line-height:1.1}.ai-probe-symbol small{margin-top:.18rem;color:#60706b;font-size:.62rem;line-height:1.1}.ai-probe-sheet{position:relative;height:430px;overflow:hidden;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.ai-probe-sheet-line{position:absolute;left:.75rem;right:.75rem;height:1px;background:#222;opacity:.38}.ai-probe-sheet-line.l1{top:216px}.ai-probe-sheet-line.l2{top:242px}.ai-probe-sheet-line.l3{top:268px}.ai-probe-sheet-line.l4{top:294px}.ai-probe-sheet-line.l5{top:320px}.ai-probe-sheet-point{position:absolute;width:7px;height:7px;border-radius:999px;background:#1f2f2a;transform:translate(-50%,-50%)}.ai-probe-sheet-empty{position:absolute;left:.75rem;right:.75rem;top:.75rem;color:#60706b;font-size:.82rem}.ai-probe-table{overflow-x:auto;border:1px solid #e4d8c6;border-radius:8px;background:#fff}.ai-probe-table-head,.ai-probe-table-row{display:grid;grid-template-columns:minmax(6rem,.9fr) minmax(5.6rem,.8fr) minmax(5.8rem,.8fr) minmax(5.4rem,.75fr) minmax(4.6rem,.65fr) minmax(4rem,.55fr) minmax(4rem,.55fr);min-width:42rem}.ai-probe-table-head{position:sticky;top:0;color:#4f5d5e;background:#f4efe7;font-weight:800}.ai-probe-table-head span,.ai-probe-table-row span{padding:.36rem .45rem;border-bottom:1px solid #eee5d7;font-variant-numeric:tabular-nums}.ai-probe-table-row span{color:#1f2f2a}.ai-probe-empty{display:block;padding:.42rem .48rem;border:1px solid #e4d8c6;border-radius:8px;background:#fff;font-size:.78rem;color:#60706b;line-height:1.25}#app:not([data-mode=practice]) .top-bpm-control,#app:not([data-mode=practice]) .top-pitch-control{display:none}#app:not([data-mode=practice]) .practice-sheet-statusbar .practice-feedback-grid,#app:not([data-mode=practice]) #practice-estimate{display:none}#app[data-mode=spectrum] .metronome-sound-toggle{display:none}#app[data-mode=practice] .live-metro-controls{display:flex!important;align-items:center;gap:.75rem;margin-bottom:.45rem;grid-template-columns:none}#app[data-mode=practice] .live-metro-controls label{flex:0 0 auto}#app[data-mode=practice] #practice-estimate{flex:1 1 auto;min-width:0}#app[data-mode=practice] .live-metro-controls .practice-minimal-controls{flex:0 0 auto}@media (max-width: 720px){.practice-feedback-grid{grid-template-columns:minmax(0,1fr)}.practice-pattern-controls{align-items:flex-start;flex-wrap:wrap}.practice-pattern-copy{flex:1 1 100%}}