:root{--color-deep-purple:#241a59;--color-coral:#ff6e6f;--color-a:#ffe9ec;--color-light-purple:#f3f1ff;--color-background:#f7f6fc;--color-surface:#fff;--feedback-good:#0f8f62;--feedback-fair:#eba900;--feedback-missed:#e24f5f;--feedback-omitted:#e24f5f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only;color:var(--color-deep-purple);background:var(--color-background);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{color:var(--color-deep-purple);background:var(--color-background);margin:0}.app-shell{min-height:100svh;color:var(--color-deep-purple);background:var(--color-background);padding:24px}.app-header{max-width:1440px;margin:0 auto 16px}.app-header-inner{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.eyebrow{color:var(--color-deep-purple);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;font-size:.76rem;font-weight:700}h1,h2,h3,h4,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(2rem,4vw,3.4rem);line-height:1}.brand-logo{align-items:center;width:min(200px,100% - 64px);min-height:44px;display:flex}.brand-logo img{width:100%;height:auto;display:block}h2{margin-bottom:0;font-size:clamp(1.35rem,2vw,2rem);line-height:1.08}h3{margin-bottom:14px;font-size:1rem}h4{color:var(--color-deep-purple);letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px;font-size:.78rem}button,input{font:inherit}.settings-toggle,.settings-close,.tempo-stepper button{border:1px solid var(--color-light-purple);color:var(--color-coral);background:var(--color-surface);cursor:pointer;border-radius:8px}.settings-toggle{width:44px;height:44px;color:var(--color-deep-purple);background:0 0;border:0;border-radius:999px;place-items:center;padding:0;font-weight:800;display:grid}.settings-toggle:hover{background:var(--color-light-purple)}.icon{flex:none;width:1.25rem;height:1.25rem;display:block}.settings-toggle .icon{width:1.9rem;height:1.9rem}.quick-settings-row{grid-template-columns:minmax(0,1fr);gap:10px;width:min(100%,760px);margin-bottom:16px;display:grid}.quick-settings-row.with-feedback-legend{grid-template-columns:max-content minmax(220px,1fr)}.quick-settings{border:1px solid var(--color-light-purple);background:var(--color-surface);border-radius:8px;align-items:stretch;gap:18px;width:100%;padding:16px 18px;display:flex}.quick-settings.tempo-only{width:max-content;max-width:100%;display:block}.quick-tempo-control{flex:1 1 0;min-width:0}.quick-setting-field{flex:1 1 0;place-items:center;min-width:0;display:grid}.quick-settings:not(.tempo-only) .tempo-stepper{justify-content:center;margin-inline:auto}.quick-settings-label{color:var(--color-deep-purple);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;font-size:.76rem;font-weight:800;display:block}.tempo-stepper{justify-content:flex-start;align-items:center;gap:12px;width:max-content;max-width:100%;display:flex}.tempo-readout{min-width:140px;color:var(--color-deep-purple);justify-content:center;align-items:baseline;display:flex}.tempo-readout span{margin:0;font-size:.86rem;font-weight:800}.switch-row{min-height:42px;color:var(--color-deep-purple);cursor:pointer;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin-top:12px;font-size:.9rem;font-weight:700;display:grid}.switch-row input{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.switch-track{border:1px solid var(--color-light-purple);background:var(--color-light-purple);border-radius:999px;align-items:center;width:44px;height:26px;padding:3px;transition:background .12s,border-color .12s;display:inline-flex}.switch-thumb{background:var(--color-surface);border-radius:999px;width:18px;height:18px;transition:transform .12s;box-shadow:0 1px 3px #241a593d}.switch-row input:checked+.switch-track{border-color:var(--color-coral);background:var(--color-coral)}.switch-row input:checked+.switch-track .switch-thumb{transform:translate(18px)}.switch-row input:focus-visible+.switch-track{outline-offset:2px;outline:3px solid #ff6e6f33}.hear-rhythm-main{background:0 0;border:0;border-radius:0;grid-template-columns:auto auto;align-self:center;gap:12px;width:max-content;min-height:50px;margin:0;padding:0;font-size:1rem}.hear-rhythm-main .switch-track{grid-area:1/2}.hear-rhythm-main>span:last-child{grid-area:1/1}.settings-panel{border:1px solid var(--color-light-purple);background:var(--color-surface)}.tempo-stepper input{width:96px;min-height:46px;color:var(--color-deep-purple);font-variant-numeric:tabular-nums;text-align:center;appearance:textfield;background:0 0;border:0;border-radius:0;padding:0;font-size:2.25rem;font-weight:800;line-height:1}.tempo-stepper input::-webkit-inner-spin-button{appearance:none;margin:0}.tempo-stepper input::-webkit-outer-spin-button{appearance:none;margin:0}.tempo-stepper button{border-color:var(--color-coral);min-width:58px;min-height:56px;color:var(--color-coral);place-items:center;padding:0;font-size:2rem;font-weight:800;line-height:1;display:grid}.tempo-stepper button:hover{background:var(--color-a)}.tempo-stepper button:disabled{border-color:var(--color-light-purple);color:#a8a2bd;background:var(--color-surface);cursor:not-allowed}.tempo-stepper button:disabled:hover{background:var(--color-surface)}.quick-settings-divider{background:var(--color-light-purple);flex:0 0 1px;width:1px}.feedback-legend{color:var(--color-deep-purple);grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:12px 16px;font-size:.84rem;font-weight:700;display:grid}.feedback-legend-card{border:1px solid var(--color-light-purple);background:var(--color-surface);border-radius:8px;padding:16px 18px;display:grid}.feedback-legend-item{align-items:center;gap:7px;min-width:0;display:inline-flex}.feedback-marker{background:var(--feedback-omitted);forced-color-adjust:none;border-radius:999px;flex:none;width:11px;height:11px;display:inline-block}.feedback-marker.triangle{background:0 0;border-bottom:11px solid;border-left:6px solid #0000;border-right:6px solid #0000;border-radius:0;width:0;height:0}.feedback-marker.good{border-bottom-color:var(--feedback-good)}.feedback-marker.fair{border-bottom-color:var(--feedback-fair)}.feedback-marker.missed{border-bottom-color:var(--feedback-missed)}.rhythm-feedback-good{fill:var(--feedback-good)}.rhythm-feedback-fair{fill:var(--feedback-fair)}.rhythm-feedback-missed{fill:var(--feedback-missed)}.rhythm-feedback-omitted{fill:var(--feedback-omitted)}.rhythm-feedback-pending{fill:#8a9692}.rhythm-feedback-marker{forced-color-adjust:none}.workspace-grid{grid-template-columns:minmax(0,65fr) minmax(320px,35fr);gap:18px;max-width:1440px;margin:0 auto;display:grid}.settings-adjustment-notice{bottom:max(18px, env(safe-area-inset-bottom));z-index:30;border:1px solid var(--color-coral);width:min(100% - 28px,560px);color:var(--color-surface);background:var(--color-deep-purple);text-align:center;pointer-events:none;border-radius:8px;padding:11px 15px;font-size:.82rem;font-weight:700;line-height:1.35;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #241a5933}.settings-closed .workspace-grid{grid-template-columns:minmax(0,1fr)}.practice-panel,.settings-panel{border-radius:8px}.practice-panel{min-width:0;padding:20px 0 24px;display:flex}.practice-main-stack{width:100%}.notation-shell{border:1px solid var(--color-light-purple);background:var(--color-surface);border-radius:8px;overflow:hidden}.notation-scroll{padding:clamp(4px,1.4vw,14px);position:relative;overflow:hidden}.rhythm-preview{width:100%}.rhythm-preview.is-main-measure{max-width:100%}.rhythm-preview svg{width:100%;height:auto;display:block}.practice-status-row{min-height:24px;color:var(--color-deep-purple);justify-content:center;margin-top:10px;font-size:.86rem;font-weight:800;display:flex}.transport-row{justify-content:center;gap:10px;margin-top:10px;display:flex}.transport-button{border:1px solid var(--color-surface);width:56px;min-width:56px;height:56px;min-height:56px;color:var(--color-deep-purple);background:var(--color-surface);cursor:pointer;border-radius:999px;place-items:center;padding:0;display:inline-grid}.transport-button:hover{border-color:var(--color-deep-purple);color:var(--color-surface);background:var(--color-deep-purple)}.transport-button:first-child{border-color:var(--color-coral);color:var(--color-surface);background:var(--color-coral)}.transport-button:first-child:hover{border-color:var(--color-deep-purple);color:var(--color-surface);background:var(--color-deep-purple)}.transport-button:nth-child(2){border-color:var(--color-surface)}.transport-button:nth-child(2):hover{border-color:var(--color-deep-purple)}.transport-button .icon{width:1.65rem;height:1.65rem}.tap-area{border:1px solid var(--color-coral);width:100%;min-height:132px;color:var(--color-deep-purple);background:var(--color-a);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border-radius:8px;place-items:center;margin-top:18px;display:grid}.tap-area.is-active{border-color:var(--color-coral);background:var(--color-a)}.tap-area:active,.tap-area.is-active:active{background:var(--color-a);transform:translateY(1px)}.tap-area span{pointer-events:none;-webkit-user-select:none;user-select:none;font-size:1.6rem;font-weight:800}.tap-area small{color:var(--color-deep-purple);pointer-events:none;-webkit-user-select:none;user-select:none;margin-top:-22px;font-size:.84rem;font-weight:700}.invalid-pool{border:1px solid var(--color-coral);color:var(--color-deep-purple);background:var(--color-light-purple);border-radius:8px;padding:28px}.feedback-summary{color:var(--color-deep-purple);flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px;font-size:.9rem;font-weight:800;display:flex}.diagnostics-panel{border:1px solid var(--color-light-purple);background:var(--color-light-purple);border-radius:8px;margin-top:14px;padding:12px}.diagnostics-header{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;display:flex}.diagnostics-header h3{margin:0;font-size:.9rem}.diagnostics-header-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.diagnostics-export-button{border:1px solid var(--color-surface);min-height:30px;color:var(--color-deep-purple);background:var(--color-surface);border-radius:7px;justify-content:center;align-items:center;padding:4px 9px;font-size:.75rem;font-weight:800;text-decoration:none;display:inline-flex}.diagnostics-input-mode{border:1px solid var(--color-light-purple);color:var(--color-deep-purple);background:var(--color-surface);border-radius:7px;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 10px;padding:8px 10px;font-size:.78rem;font-weight:700;display:flex}.diagnostics-input-mode legend{color:var(--color-deep-purple);padding:0 4px;font-weight:800}.diagnostics-input-mode label{align-items:center;gap:5px;display:inline-flex}.diagnostics-input-mode small{color:var(--color-deep-purple);flex-basis:100%;font-weight:600}.diagnostics-remark{color:var(--color-deep-purple);gap:5px;margin-bottom:10px;font-size:.78rem;font-weight:800;display:grid}.diagnostics-remark textarea{resize:vertical;border:1px solid var(--color-light-purple);min-height:46px;color:var(--color-deep-purple);background:var(--color-surface);font:inherit;border-radius:7px;padding:8px 10px;font-weight:600}.diagnostics-remark textarea:focus{border-color:var(--color-coral);outline:3px solid #ff6e6f2e}.diagnostics-remark-actions{color:var(--color-deep-purple);flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 10px;font-size:.78rem;font-weight:700;display:flex}.diagnostics-header span,.diagnostics-meta,.diagnostics-empty{color:var(--color-deep-purple);font-size:.78rem;font-weight:700}.diagnostics-empty{margin:0}.diagnostics-subsection{margin-top:12px}.diagnostics-header-compact{margin-top:10px}.diagnostics-meta{flex-wrap:wrap;gap:6px 12px;margin-bottom:8px;display:flex}.diagnostics-table-wrap{overflow-x:auto}.diagnostics-table{border-collapse:collapse;width:100%;min-width:760px;font-size:.78rem}.diagnostics-table-compact{min-width:620px}.diagnostics-table th,.diagnostics-table td{border-top:1px solid var(--color-light-purple);text-align:left;white-space:nowrap;padding:6px 8px}.diagnostics-table th{color:var(--color-deep-purple);text-transform:uppercase;font-size:.72rem}.settings-panel{padding:18px;position:relative;overflow-y:auto}.settings-close,.settings-backdrop{display:none}.settings-section{border-bottom:1px solid var(--color-light-purple);padding-bottom:20px}.settings-section+.settings-section{padding-top:18px}.field-label{color:var(--color-deep-purple);gap:8px;margin-top:12px;font-size:.9rem;font-weight:700;display:grid}.field-label input{border:1px solid var(--color-coral);border-radius:8px;width:100%;min-height:38px;padding:6px 10px}.pattern-group+.pattern-group{margin-top:18px}.pattern-group-header{justify-content:flex-start;align-items:center;gap:10px;margin-bottom:10px;display:flex}.pattern-group-header h4{margin-bottom:0}.pattern-bulk-actions{flex-wrap:wrap;justify-content:flex-start;gap:6px;display:flex}.pattern-bulk-actions button{border:1px solid var(--color-coral);min-height:28px;color:var(--color-surface);background:var(--color-coral);cursor:pointer;border-radius:8px;padding:0 8px;font-size:.72rem;font-weight:700}.pattern-bulk-actions button:hover{border-color:var(--color-coral);color:var(--color-deep-purple);background:var(--color-a)}.pattern-grid{flex-wrap:wrap;align-items:stretch;gap:8px;display:flex}.pattern-tile{border:1px solid var(--color-light-purple);width:auto;min-height:104px;color:var(--color-deep-purple);background:var(--color-surface);text-align:left;cursor:pointer;border-radius:8px;place-items:center;padding:7px 8px;display:grid;position:relative}.pattern-tile:hover{border-color:var(--color-coral)}.pattern-tile.is-selected{border-color:var(--color-coral);color:var(--color-deep-purple);background:var(--color-a);box-shadow:inset 0 0 0 1px var(--color-coral)}.pattern-tile.is-disabled,.pattern-tile.is-disabled:hover{color:#77718c;box-shadow:none;cursor:not-allowed;background:#eeecf3;border-color:#d8d4e5}.pattern-tile.is-disabled .rhythm-preview{opacity:.48;filter:grayscale()}.pattern-tile .pattern-disabled-reason{color:#625b78;text-align:center;background:#f7f6fcf0;border-radius:5px;padding:2px 4px;font-size:.62rem;font-weight:800;line-height:1.2;position:absolute;bottom:5px;left:5px;right:5px}.pattern-tile span{font-size:.82rem;font-weight:700;line-height:1.18;display:block}.pattern-tile .rhythm-preview{pointer-events:none;width:auto;max-width:100%}.pattern-tile svg{width:auto;max-width:min(320px,100%);height:auto;display:block;overflow:visible}@media (width<=980px){.app-header,.app-header-inner{align-items:flex-start}.workspace-grid,.settings-open .workspace-grid,.settings-closed .workspace-grid{grid-template-columns:1fr}.settings-panel{z-index:20;border-radius:0;max-height:none;padding:22px;position:fixed;inset:0;overflow-y:auto}.settings-backdrop{z-index:19;cursor:pointer;background:#241a5961;border:0;display:block;position:fixed;inset:0}.settings-close{z-index:1;place-items:center;width:38px;height:38px;margin-left:auto;font-size:1.35rem;line-height:1;display:grid;position:sticky;top:0}}@media (width>=981px){.app-shell{padding:22px 24px}.app-header{margin-bottom:8px}.settings-open .settings-panel{inline-size:100%;align-self:start;max-height:calc(100svh - 140px)}.practice-panel{min-height:calc(100svh - 136px);padding:12px 0 18px}.is-normal-mode .practice-panel{align-items:center}.is-normal-mode .practice-main-stack{margin-block:auto}.quick-settings-row{margin-bottom:12px}.practice-panel .tempo-stepper button{min-width:56px;min-height:50px;padding-inline:12px}.practice-panel .tempo-stepper input{width:96px;min-height:50px;padding-inline:0}.hear-rhythm-main{min-height:50px;padding-inline:14px}.transport-button{width:58px;min-width:58px;height:58px;min-height:58px}.transport-button .icon{width:1.75rem;height:1.75rem}}@media (width<=640px){.app-shell{padding:14px}.brand-logo{width:min(160px,100% - 54px)}.practice-panel{padding:0}.quick-settings-row.with-feedback-legend{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:8px;width:100%}.quick-settings-row.with-feedback-legend .quick-settings.tempo-only{width:100%}.quick-settings-row.with-feedback-legend .tempo-stepper{justify-content:center}.quick-settings{grid-template-columns:minmax(0,1.15fr) 1px minmax(0,.85fr);gap:8px;width:100%;padding:10px;display:grid}.feedback-legend-card{padding:10px}.quick-settings-label{margin-bottom:7px;font-size:.66rem}.tempo-stepper{gap:3px;width:100%}.tempo-stepper button{min-width:34px;min-height:42px;font-size:1.55rem}.tempo-readout{min-width:92px}.tempo-stepper input{width:64px;min-height:42px;font-size:1.55rem}.tempo-readout span{font-size:.64rem}.hear-rhythm-main{grid-template-columns:minmax(0,auto) auto;justify-content:center;gap:5px;width:100%;max-width:100%;min-height:42px;font-size:.76rem}.feedback-legend{gap:8px 3px;font-size:.66rem}.feedback-legend-item{gap:3px}.feedback-marker{width:8px;height:8px}.feedback-marker.triangle{border-bottom-width:9px;border-left-width:5px;border-right-width:5px}}