@import "https://fonts.googleapis.com/css2?family=Piazzolla:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap";:root{--text:#26201a;--bg:#f6ecd9;--surface:#ecdbb8;--surface-hover:#e2cd9e;--border:#d8c297;--border-subtle:#e7d6ae;--muted:#6e5b40;--accent:#b8792e;--accent-text:#fff8ec;--accent-soft-bg:#efd9ae;--accent-soft-text:#6b4a1e;--pine:#33513f;--danger-bg:#f3dcd3;--danger-text:#7a2e18;--warning-bg:#f7e4be;--warning-text:#6b4a12;--success-bg:#e1ead9;--success-text:#2f4a2a;--shadow-color:#2b1f0f2e;--radius-sm:6px;--radius:12px;--font-body:"Work Sans", system-ui, "Segoe UI", Roboto, sans-serif;--font-display:"Piazzolla", "Iowan Old Style", serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font:16px/145% var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#efe3cc;--bg:#1c1712;--surface:#2a2015;--surface-hover:#362a19;--border:#40331f;--border-subtle:#332818;--muted:#b3a186;--accent:#d79a4c;--accent-text:#241705;--accent-soft-bg:#3b2c16;--accent-soft-text:#e9c485;--pine:#7fae95;--danger-bg:#3a2018;--danger-text:#e08b6d;--warning-bg:#3a3018;--warning-text:#e9c26c;--success-bg:#223326;--success-text:#8fc07f;--shadow-color:#00000080}}body{margin:0}h1,h2,h3{font-family:var(--font-display);font-weight:600}input[type=radio],input[type=checkbox]{accent-color:var(--accent)}button,input,select{font:inherit}button,select{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.45rem .9rem;transition:background-color .15s,border-color .15s}button:not(:disabled):hover,select:hover{background:var(--surface-hover)}button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.btn-primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600;box-shadow:0 2px #00000026}.btn-primary:not(:disabled):hover{filter:brightness(1.08)}input[type=text],input[type=number]{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.3rem .5rem}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{max-width:640px;padding:1.5rem;padding-bottom:calc(var(--practice-deck-height,0px) + 1.5rem);margin:0 auto}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:1.25rem 0;padding:1rem 1.25rem}.panel>h2:first-child{margin-top:0}.brand{align-items:center;gap:.6rem;margin-bottom:1rem;display:flex}.brand-mark{width:32px;height:32px;color:var(--pine);flex-shrink:0}.brand h1{margin:0;font-size:1.7rem}.app-header{align-items:flex-start;gap:.9rem;display:flex}.link-back{color:var(--pine);background:0 0;border:none;margin-top:.2rem;padding:.3rem .2rem;font-size:.85rem;font-weight:600}.link-back:hover{background:0 0;text-decoration:underline}.app-title-block{flex-direction:column;gap:.1rem;display:flex}.app-composer{color:var(--muted);margin:0;font-size:.85rem}.app-title{font-family:var(--font-display);align-items:center;gap:.5rem;margin:0;font-size:1.5rem;font-weight:600;display:inline-flex}.app-rename{color:var(--accent);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:.15rem .35rem;font-size:1rem}.app-rename:hover{background:var(--accent-soft-bg)}.app-title-edit{align-items:center;gap:.5rem;display:inline-flex}.app-title-edit input{font-family:var(--font-display);border-radius:var(--radius-sm);padding:.15rem .35rem;font-size:1.3rem;font-weight:600}.banner{border-radius:var(--radius-sm);margin:.5rem 0;padding:.5rem .75rem}.banner-error{background:var(--danger-bg);color:var(--danger-text)}.banner-warning{background:var(--warning-bg);color:var(--warning-text)}.input-source-list,.hand-filter-control{background:var(--surface);border:none;border-radius:999px;flex-wrap:wrap;align-items:center;gap:.15rem;width:fit-content;margin:0;padding:4px;display:flex}.input-source-label,.hand-filter-control legend{color:var(--muted);margin:0 .4rem 0 .3rem;padding:0;font-size:.82rem;font-weight:600}.input-source,.hand-filter-option{cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.85rem;display:inline-flex}:is(.input-source:has(:checked),.hand-filter-option:has(:checked)){background:var(--bg);box-shadow:0 1px 3px var(--shadow-color);font-weight:600}.hand-filter-control:disabled .hand-filter-option,.hand-filter-control[disabled] .hand-filter-option{cursor:default}.midi-selector .keyboard-legend,.midi-selector>button,.midi-selector>select{margin-top:.5rem}.keyboard-legend{flex-wrap:wrap;gap:.2rem;display:flex}.keyboard-key{border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;align-items:center;min-width:1.5rem;padding:.2rem .25rem;font-size:.75rem;line-height:1.1;display:inline-flex}.keyboard-key-note{color:var(--muted);font-size:.6rem}.score-viewer{scrollbar-color:var(--border) transparent;scrollbar-width:thin;min-height:100px;overflow-x:auto}.score-viewer-clickable{cursor:pointer}.progress-legend{color:var(--muted);gap:1rem;padding:.4rem 0;font-size:.85rem;display:flex}.progress-legend-item{align-items:center;gap:.35rem;display:inline-flex}.progress-swatch{border-radius:50%;width:.7rem;height:.7rem;display:inline-block}.practice-action-bar{z-index:10;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.deck{background:var(--surface);border-top:1px solid var(--border);width:100%;max-width:640px;box-shadow:inset 0 1px 0 #fff3, 0 -10px 24px -14px var(--shadow-color);background-image:repeating-linear-gradient(#00000009 0 1px,#0000 1px 5px);flex-direction:column;gap:.65rem;max-height:70vh;margin:0;padding:.85rem 1.5rem 1rem;display:flex;overflow-y:auto}@media (width>=860px){.app,.deck{max-width:960px}}.deck-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.deck-idle-controls{align-items:flex-start}.practice-section-label{color:var(--muted);white-space:nowrap;font-size:.9rem}.practice-result-aborted{margin:0;padding:.2rem .5rem;font-size:.85rem}.practice-result-text{font-weight:600}.practice-hint{color:var(--muted);font-size:.9rem}.metronome{flex-shrink:0;width:64px;height:44px;position:relative}.metronome-base{background:var(--border);border-radius:2px;height:2px;position:absolute;bottom:8px;left:6px;right:6px}.metronome-needle{background:var(--pine);transform-origin:bottom;opacity:.4;border-radius:2px;width:2px;height:30px;transition:transform .12s ease-out;position:absolute;bottom:8px;left:50%}.metronome-live .metronome-needle{opacity:1}.metronome-ticks{justify-content:space-between;padding:0 3px;display:flex;position:absolute;bottom:0;left:0;right:0}.metronome-tick{background:var(--border);border-radius:50%;width:5px;height:5px}.metronome-tick-active{background:var(--accent)}.tempo-control{flex-direction:column;flex:1;gap:.35rem;min-width:210px;display:flex}.tempo-readout{font-family:var(--font-display);align-items:baseline;gap:.3rem;display:flex}.tempo-readout input[type=number]{font-family:var(--font-display);font-variant-numeric:tabular-nums;background:0 0;border:none;width:3.2rem;padding:0;font-size:1.7rem;font-weight:600}.tempo-readout input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tempo-readout input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-unit{color:var(--muted);font-size:.75rem;font-family:var(--font-body)}.tempo-slider{appearance:none;background:var(--border);border:none;border-radius:999px;width:100%;height:6px;margin:.15rem 0;padding:0}.tempo-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);width:18px;height:18px;box-shadow:0 2px 4px var(--shadow-color), 0 0 0 4px var(--bg);cursor:pointer;border-radius:50%}.tempo-slider::-moz-range-thumb{background:var(--accent);width:18px;height:18px;box-shadow:0 2px 4px var(--shadow-color), 0 0 0 4px var(--bg);cursor:pointer;border:none;border-radius:50%}.tempo-slider:disabled{opacity:.5}.tempo-presets{gap:.3rem;display:flex}.tempo-preset-btn{border-radius:999px;padding:.25rem .55rem;font-size:.8rem}.tempo-preset-btn-active{background:var(--pine);color:var(--accent-text);border-color:var(--pine)}.deck-status-text{justify-content:center}.status-word{font-family:var(--font-display);color:var(--pine);font-size:1.1rem;font-weight:600}.deck-result{flex-direction:column;align-items:stretch;gap:.6rem}.stat{align-items:center;gap:.6rem;display:flex}.stat-label{width:56px;color:var(--muted);font-size:.82rem;font-weight:600}.stat-value{font-family:var(--font-display);font-variant-numeric:tabular-nums;width:48px;font-size:1.1rem;font-weight:600}.stat-bar{background:var(--border);border-radius:999px;flex:1;height:8px;overflow:hidden}.stat-bar span{background:var(--pine);border-radius:999px;height:100%;display:block}.stat-bar-timing span{background:var(--accent)}.stat-bar-balance{display:flex}.stat-bar-balance-left,.stat-bar-balance-right{height:100%;display:block}.stat-bar-balance-left{background:var(--pine)}.stat-bar-balance-right{background:var(--accent)}.stamp{font-family:var(--font-display);border:2px solid var(--pine);color:var(--pine);border-radius:999px;align-self:flex-start;padding:.3rem 1.1rem;font-size:.9rem;font-weight:600;position:relative;transform:rotate(-4deg)}.stamp:after{content:"";opacity:.5;border:1px dashed;border-radius:999px;position:absolute;inset:3px}.stamp-progressing{border-color:var(--accent);color:var(--accent)}.stamp-struggling{border-color:var(--danger-text);color:var(--danger-text)}.tally{color:var(--muted);margin:0;font-size:.82rem}.loop-toggle{color:var(--muted);cursor:pointer;align-self:center;align-items:center;gap:.4rem;font-size:.85rem;display:flex}.deck-actions{justify-content:center}.btn-round{border-radius:999px;width:84px;height:84px;padding:0;font-weight:600}.result-actions{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.shelf{gap:.6rem;padding-bottom:.2rem;display:flex;overflow-x:auto}.tile{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);flex-direction:column;flex:none;gap:.25rem;min-width:130px;padding:.65rem .8rem;display:flex}.tile-range{font-size:.85rem;font-weight:600}.tile-status{color:var(--muted);align-items:center;gap:.35rem;font-size:.8rem;display:flex}.tile-dot{border-radius:50%;flex-shrink:0;width:9px;height:9px}.tile-meta{color:var(--muted);font-size:.75rem}.tile-ready .tile-dot{background:var(--pine)}.tile-progressing .tile-dot{background:var(--accent)}.tile-struggling .tile-dot{background:var(--danger-text)}.coach-suggestion{background:var(--accent-soft-bg);color:var(--accent-soft-text);border-left:3px solid var(--accent);border-radius:var(--radius-sm);margin:.5rem 0 1rem;padding:.5rem .75rem}.coach-headline{margin:0;font-weight:600}.coach-detail{margin:.25rem 0 0;font-size:.9rem}.history-empty{color:var(--muted)}.log-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.log-row{border-top:1px solid var(--border-subtle);font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:center;gap:.7rem;padding:.55rem 0;font-size:.85rem;display:flex}.log-row:first-child{border-top:none}.log-when{color:var(--muted);flex:1.4;min-width:140px}.log-range{flex:1.2;min-width:110px}.log-tempo{color:var(--muted)}.log-score{font-weight:600}.log-aborted{padding:.1rem .5rem;font-size:.75rem}.attempt-delete{color:var(--danger-text);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:.2rem .5rem;font-size:.85rem}.attempt-delete:not(:disabled):hover{background:var(--danger-bg)}.piece-library ul{margin:0;padding:0;list-style:none}.piece-row{border-top:1px solid var(--border-subtle);align-items:center;gap:.4rem;display:flex}.piece-row:first-child{border-top:none}.piece-select{text-align:left;border-radius:var(--radius-sm);background:0 0;border:none;flex-direction:column;flex:1;align-items:flex-start;gap:.1rem;padding:.8rem .4rem;display:flex}.piece-select:not(:disabled):hover{background:var(--accent-soft-bg)}.piece-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600}.piece-composer{color:var(--muted);font-size:.85rem}.piece-meta{color:var(--muted);font-size:.78rem}.piece-delete{color:var(--danger-text);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:.25rem .5rem;font-size:.8rem}.piece-delete:not(:disabled):hover{background:var(--danger-bg)}.piece-upload::file-selector-button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;margin-right:.6rem;padding:.4rem .8rem;transition:background-color .15s}.piece-upload::file-selector-button:hover{background:var(--surface-hover)}