:root{--text:#3f3d45;--text-h:#08060d;--bg:#f7f7f9;--surface:#fff;--border:#e5e4e7;--accent:#ff6b35;--accent-text:#fff;--danger:#dc2626;--muted:#6b6375;--chart-1:#2a78d6;--chart-2:#eb6834;--chart-3:#1baf7a;--chart-4:#eda100;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font:16px/1.45 var(--sans);color:var(--text);background:var(--bg);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:#d1d5db;--text-h:#f3f4f6;--bg:#0f1115;--surface:#181b21;--border:#2a2d36;--accent:#ff8a5c;--accent-text:#16171d;--danger:#f87171;--muted:#9ca3af;--chart-1:#3987e5;--chart-2:#d95926;--chart-3:#199e70;--chart-4:#c98500}}*{box-sizing:border-box}body{margin:0}h1,h2,h3{font-family:var(--sans);color:var(--text-h);margin:0 0 8px;font-weight:600}h1{font-size:22px}h2{font-size:18px}h3{font-size:15px}p{margin:0}.muted{color:var(--muted)}button{font:inherit}button,input,select{min-height:44px}.app{flex-direction:column;width:100%;max-width:640px;min-height:100svh;margin:0 auto;display:flex}.app-header{border-bottom:1px solid var(--border);background:var(--bg);z-index:1;padding:12px 16px;position:sticky;top:0}.app-header h1{text-align:center;font-size:18px}.tabs{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.tab{border:1px solid var(--border);background:var(--surface);min-width:72px;max-width:140px;color:var(--text);cursor:pointer;white-space:nowrap;border-radius:999px;flex:1;padding:10px 8px;font-size:13px}.tab-active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.app-main{flex-direction:column;flex:1;gap:16px;padding:16px;display:flex}.btn{border:1px solid var(--border);background:var(--surface);min-width:120px;color:var(--text);cursor:pointer;border-radius:10px;flex:1;padding:12px 16px;font-weight:600}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-big{width:100%;padding:16px;font-size:16px}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn-secondary{background:0 0}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-small{flex:0 auto;min-width:0;padding:8px 14px;font-size:13px}input[type=text]{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;width:100%;padding:10px 12px}.empty-state{border:1px dashed var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:6px;padding:16px;display:flex}.empty-state-prominent{border:2px solid var(--accent);gap:10px}.empty-state-prominent h2{margin:0}section{flex-direction:column;gap:8px;display:flex}.practice-view{flex-direction:column;gap:16px;display:flex}.stat-row{gap:12px;display:flex}.stat-card{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:14px 8px;display:flex}.practice-selected-pattern{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:8px 12px}.stat-number{color:var(--text-h);font-size:26px;font-weight:700;line-height:1}.stat-label{color:var(--muted);font-size:12px}.kit-setup-view{flex-direction:column;gap:12px;display:flex}.kit-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.kit-card{border:1px solid var(--border);background:var(--surface);border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;display:flex}.kit-card-main{flex-direction:column;gap:2px;display:flex}.kit-card-name{color:var(--text-h);font-weight:600}.kit-card-detail{font-size:13px}.kit-card-actions{gap:8px;display:flex}.kit-card-actions .btn,.kit-card-rename-row .btn{flex:none;min-width:0;padding:8px 12px}.kit-card-rename-row{flex-wrap:wrap;align-items:center;gap:8px;width:100%;display:flex}.kit-card-rename-row input{flex:1;min-width:120px}.kit-card-item{flex-direction:column;gap:8px;display:flex}.kit-piece-manager{border:1px solid var(--border);background:var(--surface);border-radius:10px;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.kit-piece-checklist{flex-wrap:wrap;gap:10px 16px;display:flex}.kit-piece-checkbox{align-items:center;gap:6px;font-size:14px;display:flex}.kit-add-row{flex-wrap:wrap;gap:8px;display:flex}.kit-add-row input{flex:1;min-width:160px}.kit-add-row .btn{flex:none}.calibration-wizard{flex-direction:column;gap:16px;display:flex}.calibration-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.calibration-header h2{margin:0}.calibration-header .btn{flex:none;min-width:0;padding:8px 12px}.calibration-step{border:1px solid var(--border);background:var(--surface);text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:12px;padding:20px 16px;display:flex}.calibration-error{color:var(--danger)}.calibration-progress-label{color:var(--muted);font-size:13px}.calibration-target{color:var(--text-h);padding:12px;font-size:24px;font-weight:700;transition:transform .1s,color .1s}.calibration-target-hit{color:var(--accent);transform:scale(1.06)}.calibration-count{color:var(--text-h);font-size:15px;font-weight:600}.calibration-dots{gap:8px;display:flex}.calibration-dot{border:2px solid var(--border);background:0 0;border-radius:999px;width:16px;height:16px}.calibration-dot-filled{background:var(--accent);border-color:var(--accent)}.calibration-level-track{background:var(--bg);border:1px solid var(--border);border-radius:999px;width:100%;height:10px;overflow:hidden}.calibration-level-bar{background:var(--accent);border-radius:999px;width:0%;height:100%;transition:width 50ms linear}.calibration-level-readout{font-family:ui-monospace,monospace;font-size:12px}.calibration-hint{font-size:13px}.calibration-step-actions{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;display:flex}.calibration-step-actions .btn{flex:none}.live-detection{flex-direction:column;gap:12px;display:flex}.hit-indicator-row{flex-wrap:wrap;gap:8px;display:flex}.hit-indicator{text-align:center;min-width:84px;color:var(--text-h);background:var(--surface);border:2px solid var(--border);border-radius:10px;flex:1;padding:14px 8px;font-size:13px;font-weight:600;transition:background-color .1s,border-color .1s,transform .1s}.hit-indicator-uncalibrated{color:var(--muted);border-style:dashed}.hit-indicator-unknown{color:var(--muted)}.hit-indicator-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text);transform:scale(1.05)}.hit-log{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.hit-log-item{border:1px solid var(--border);background:var(--surface);border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;display:flex}.hit-log-piece{color:var(--text-h);font-weight:600}.hit-log-piece-unknown{color:var(--muted)}.progress-view{flex-direction:column;gap:24px;display:flex}.progress-charts{flex-direction:column;gap:16px;display:flex}.progress-chart{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:8px;padding:14px 16px;display:flex}.progress-chart-empty{gap:4px}.chart-svg{width:100%;height:auto;overflow:visible}.chart-gridline{stroke:var(--border);stroke-width:1px}.chart-axis-label{fill:var(--muted);font-size:10px}.chart-line{fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.chart-dot{stroke:var(--surface);stroke-width:2px}.chart-end-label{fill:var(--text);font-size:11px;font-weight:600}.chart-legend{color:var(--text);flex-wrap:wrap;gap:10px 14px;margin:0;padding:0;font-size:12px;list-style:none;display:flex}.chart-legend li{align-items:center;gap:6px;display:flex}.chart-legend-swatch{border-radius:50%;flex-shrink:0;width:10px;height:10px}.piece-breakdown-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.piece-breakdown-row{grid-template-columns:72px 1fr auto;align-items:center;gap:10px;display:grid}.piece-breakdown-label{font-size:13px}.piece-breakdown-bar-track{background:var(--bg);border:1px solid var(--border);border-radius:4px;height:10px;overflow:hidden}.piece-breakdown-bar-fill{background:var(--chart-1);border-radius:4px;min-width:2px;height:100%}.piece-breakdown-value{white-space:nowrap;font-size:12px}.history-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.history-row{border:1px solid var(--border);background:var(--surface);border-radius:10px;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.history-row-main{flex-direction:column;display:flex}.history-kit{color:var(--text-h);font-weight:600}.history-date{font-size:12px}.history-row-group{flex-direction:column;gap:6px;display:flex}.history-take-list{flex-direction:column;gap:6px;margin:0 0 0 16px;padding:0;list-style:none;display:flex}.history-take-row{border:1px solid var(--border);background:var(--surface);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;font-size:13px;display:flex}.history-take-main{flex-direction:column;gap:2px;display:flex}.history-take-no-audio{white-space:nowrap;font-size:12px}.take-audio-player{max-width:220px;height:32px}.pattern-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.pattern-item{flex-direction:column;gap:6px;display:flex}.pattern-card{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);cursor:pointer;text-align:left;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;display:flex}.pattern-card-active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.pattern-card-main{flex-direction:column;gap:2px;display:flex}.pattern-card-name{color:var(--text-h);align-items:center;gap:6px;font-weight:600;display:inline-flex}.pattern-card-origin{text-transform:uppercase;letter-spacing:.03em;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500}.pattern-card-rudiment{text-transform:uppercase;letter-spacing:.03em;color:var(--text);border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500}.pattern-card-detail{font-size:13px}.pattern-item-actions{align-items:center;gap:12px;display:flex}.pattern-item-actions .btn-small{flex:none}.pattern-notation-toggle{color:var(--accent);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:2px 0;font-size:12px;font-weight:600}.drum-notation{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 4px;position:relative;overflow-x:auto}.drum-notation svg{display:block}.drum-notation-single{align-self:flex-start}.view-mode-toggle{gap:8px;display:flex}.view-mode-toggle .btn{flex:none;min-width:0;padding:8px 16px}.notation-quiz{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:12px;padding:16px;display:flex}.notation-quiz-progress{color:var(--text-h);font-weight:600}.notation-quiz-retry-hint{color:var(--accent);font-size:13px}.notation-quiz-feedback-correct{color:var(--accent);font-weight:600}.notation-quiz-feedback-incorrect{color:var(--danger);font-weight:600}.notation-quiz-result{align-items:stretch}.notation-quiz-passed{color:var(--accent);font-weight:600}.notation-quiz-failed{color:var(--danger);font-weight:600}.pattern-step-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.pattern-step-row{border:1px solid var(--border);background:var(--surface);border-radius:8px;justify-content:space-between;align-items:center;padding:6px 10px;font-size:13px;display:flex}.pattern-step-row-hit{border-color:var(--accent)}.pattern-step-row-missed{border-color:var(--danger)}.metronome{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:16px;padding:16px;display:flex}.metronome-controls{flex-wrap:wrap;gap:12px;display:flex}.metronome-field{flex-direction:column;flex:1;gap:4px;min-width:110px;display:flex}.metronome-field label{color:var(--muted);font-size:12px}.metronome-field select{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:10px 12px}.metronome-tempo{flex:100%}.metronome-tempo input[type=range]{width:100%}.timing-session{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:16px;padding:16px;display:flex}.score-summary{flex-direction:column;gap:16px;display:flex}.score-piece-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.score-help-toggle{min-height:0;color:var(--accent);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:4px 0;font-size:13px;font-weight:600;text-decoration:underline}.score-help{border:1px solid var(--border);background:var(--bg);border-radius:10px;flex-direction:column;gap:8px;padding:12px 14px;font-size:13px;display:flex}.score-help p{margin:0}.install-banner{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 16px 0;padding:12px 14px;display:flex}.install-banner-text{min-width:160px;color:var(--text);flex:1;margin:0;font-size:13px}.install-banner-actions{gap:8px;display:flex}.tutorial-overlay{z-index:100;background:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.tutorial-card{border:1px solid var(--border);background:var(--surface);border-radius:16px;flex-direction:column;gap:16px;width:100%;max-width:440px;max-height:90vh;padding:20px;display:flex;overflow-y:auto}.tutorial-header{justify-content:space-between;align-items:center;display:flex}.tutorial-step-count{text-transform:uppercase;letter-spacing:.04em;font-size:12px}.tutorial-close{min-width:32px;min-height:32px;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:22px;line-height:1}.tutorial-dots{justify-content:center;gap:6px;display:flex}.tutorial-dot{background:var(--border);border-radius:999px;width:7px;height:7px}.tutorial-dot-active{background:var(--accent)}.tutorial-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.tutorial-actions .btn{flex:none;min-width:0}.tutorial-nav-actions{gap:8px;display:flex}.beat-grid{flex-direction:column;align-items:center;gap:8px;display:flex}.beat-grid-row{background:var(--bg);border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;width:100%;padding:12px;transition:border-color .15s;display:flex}.beat-grid-row-count-in{border-color:var(--accent);border-style:dashed}.beat-cell{background:var(--border);border-radius:999px;transition:transform 60ms,background 60ms;display:inline-block}.beat-cell-subdivision{width:8px;height:8px}.beat-cell-beat{width:16px;height:16px}.beat-cell-group{width:18px;height:18px}.beat-cell-accent{width:22px;height:22px}.beat-cell-group-start{margin-left:10px}.beat-cell-active{background:var(--accent);transform:scale(1.25)}.beat-grid-label{color:var(--muted);min-height:1.2em;font-size:13px}.pattern-builder{flex-direction:column;gap:12px;display:flex}.builder-field-row{flex-wrap:wrap;gap:12px;display:flex}.builder-field-row .metronome-field{flex:1;min-width:100px}.builder-repeat-input{flex:none;width:4em}.builder-checkbox{align-items:center;gap:8px;font-size:14px;display:flex}.builder-grid{align-items:center;gap:2px;display:grid;overflow-x:auto}.builder-grid-corner{height:100%}.builder-grid-step-label{text-align:center;font-size:11px}.builder-grid-row-label{color:var(--text-h);white-space:nowrap;padding-right:6px;font-size:12px;font-weight:600}.builder-cell{aspect-ratio:1;border:1px solid var(--border);background:var(--surface);min-width:28px;min-height:28px;color:var(--text);cursor:pointer;border-radius:6px;padding:0;font-weight:700}.builder-cell-normal{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.builder-cell-accent{background:var(--danger);border-color:var(--danger);color:#fff}.builder-cell-ghost{background:var(--surface);border-color:var(--accent);color:var(--accent)}.builder-cell-technique{position:relative}.builder-cell-technique-badge{color:var(--danger);background:var(--surface);border-radius:3px;padding:0 2px;font-size:9px;font-weight:700;line-height:1;position:absolute;bottom:1px;right:2px}.tempo-ramp-drill{flex-direction:column;gap:12px;display:flex}.pattern-builder-item{flex-direction:column;gap:8px;display:flex}.pattern-share-panel,.pattern-import{border:1px solid var(--border);background:var(--surface);border-radius:10px;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.pattern-share-code{border:1px solid var(--border);background:var(--surface);width:100%;min-height:80px;color:var(--text);resize:vertical;border-radius:8px;padding:10px 12px;font-family:ui-monospace,monospace;font-size:12px}.fullscreen-modal{z-index:200;background:var(--bg);padding:56px 12px 24px;position:fixed;inset:0;overflow:auto}.fullscreen-modal-close{z-index:201;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;padding:10px 16px;font-weight:600;position:fixed;top:12px;right:12px}.fullscreen-modal-content{flex-direction:column;gap:12px;max-width:100%;display:flex}.song-preview-toolbar{z-index:5;background:var(--bg);flex-direction:column;gap:8px;padding-bottom:8px;display:flex;position:sticky;top:0}.fullscreen-modal-content .drum-notation{width:100%}.settings-view{flex-direction:column;gap:24px;display:flex}.settings-version{font-family:ui-monospace,monospace;font-size:12px}.app-footer{border-top:1px solid var(--border);color:var(--muted);text-align:center;margin-top:16px;padding-top:8px;font-family:ui-monospace,monospace;font-size:11px}.midi-setup{flex-direction:column;gap:12px;display:flex}.midi-map-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.midi-map-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.midi-map-piece{min-width:130px;font-size:14px}.midi-note-chip{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;padding:2px 8px;font-family:ui-monospace,monospace;font-size:12px}.midi-note-chip:hover{border-color:var(--accent)}.midi-learn-hint{font-weight:600}.update-banner{background:var(--surface);border-bottom:2px solid var(--accent);color:var(--text-h);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:-12px -16px 12px;padding:8px 16px;font-size:14px;font-weight:600;animation:.3s ease-out update-banner-in;display:flex}@keyframes update-banner-in{0%{opacity:0;transform:translateY(-100%)}}.whats-new{margin:0;padding-left:20px;line-height:1.45}.whats-new li+li{margin-top:6px}.version-line{text-align:center;margin:0;font-size:12px}.toast{border:1px solid var(--accent);background:var(--surface);max-width:calc(100vw - 32px);color:var(--text-h);z-index:100;pointer-events:none;border-radius:999px;padding:10px 16px;font-size:14px;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0003}