.ear-training{width:min(520px,100%);margin:0 auto;padding:36px 24px 50px}.ear-training button,.ear-training summary{cursor:pointer;touch-action:manipulation;min-height:44px}.ear-training button:disabled{cursor:default}.ear-training h1{font-size:36px}.ear-training h2{margin:18px 0 8px;font-family:Georgia,serif;font-size:27px;font-weight:500}.ear-training h2:focus{outline:none}.ear-heading{justify-content:space-between;align-items:center;gap:10px;margin-bottom:28px;display:flex}.ear-text-button{color:var(--muted);background:0 0;border:0;padding:8px 0;font-size:12px}.ear-round-label{color:var(--muted);letter-spacing:.7px;font-size:11px}.ear-progress{background:var(--line);border-radius:4px;height:4px;margin:12px 0 25px;overflow:hidden}.ear-progress>div{background:var(--green);height:100%;transition:width .2s}.ear-meta{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:11px;display:flex}.ear-feedback p{color:var(--muted);font-size:13px;line-height:1.65}.ear-player{border:1px solid var(--line);background:var(--green-soft);border-radius:10px;margin:23px 0;padding:15px 17px}.ear-player-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.ear-player-row span{font-variant-numeric:tabular-nums;color:var(--green);font-size:12px}.ear-play,.ear-primary{background:var(--green);color:#fff;border:1px solid var(--green);border-radius:7px;padding:12px 17px;font-size:14px}.ear-play{min-width:110px}.ear-player input{width:100%;height:32px;accent-color:var(--green);margin-top:12px}.ear-answers{gap:12px;display:grid}.ear-answer{border:1px solid var(--line);background:var(--paper);text-align:left;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:17px;display:flex;min-height:66px!important}.ear-answer strong{font-family:Georgia,serif;font-size:17px;font-weight:500}.ear-answer:hover:not(:disabled){border-color:var(--green)}.ear-answer.correct{background:var(--green-soft);border-color:#719080}.ear-answer.wrong{background:#f5e6e3;border-color:#b97868}.ear-feedback{margin-top:20px;font-size:13px}.ear-feedback h3{color:var(--green);font-size:14px}.ear-feedback.missed h3,.ear-error{color:#a3544b}.ear-primary{width:100%;margin-top:17px;min-height:50px!important}.ear-primary:hover,.ear-play:hover{background:#193d34}.ear-secondary{color:var(--green);background:0 0}.ear-secondary:hover{background:var(--green-soft)}.ear-training summary{padding:12px 0;font-size:12px}.ear-score{margin:24px 0 10px;font-family:Georgia,serif;font-size:64px}.ear-score small{color:var(--muted);font-size:27px}.ear-results{padding:0;list-style:none}.ear-results li{border-bottom:1px solid var(--line);justify-content:space-between;gap:12px;padding:12px 0;font-size:12px;line-height:1.5;display:flex}.ear-results li>span:last-child{white-space:nowrap}.ear-shuffle{min-height:48px;color:var(--muted);align-items:center;gap:10px;margin-top:14px;font-size:13px;display:flex}.ear-shuffle input{width:20px;height:20px;accent-color:var(--green)}.ear-error{font-size:12px}.ear-training button:focus-visible,.ear-training input:focus-visible,.ear-training summary:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}@media (width<=760px){.ear-training{padding:28px 18px 40px}}@media (prefers-reduced-motion:reduce){.ear-progress>div{transition:none}}.ear-autoplay{min-height:44px;color:var(--muted);align-items:center;gap:8px;margin:-10px 0 12px;font-size:12px;display:flex}.ear-autoplay input{width:18px;height:18px;accent-color:var(--green)}.tx-melody-keyboard{min-width:0;margin-top:14px}.tx-keyboard-controls{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.tx-melody-keyboard .tx-keyboard-controls button{border:1px solid var(--line,#dfddd4);background:var(--paper,#fbfaf6);min-height:44px;color:var(--green,#234d42);font:inherit;cursor:pointer;border-radius:7px;padding:8px 12px;font-size:12px}.tx-melody-keyboard .tx-keyboard-controls button:disabled{opacity:.4;cursor:not-allowed}.tx-keyboard-range{color:var(--muted,#77776d);white-space:nowrap;font-size:12px}.tx-keyboard-scroll{border:1px solid var(--line,#dfddd4);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#a9b9af #eeece4;background:#eeece4;border-radius:8px;overflow-x:auto}.tx-keyboard-keys{width:100%;min-width:616px;height:152px;position:relative}.tx-melody-keyboard .tx-piano-key{background:var(--paper,#fbfaf6);height:100%;min-height:0;color:var(--muted,#77776d);font:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border:1px solid #d1d0c5;border-top:0;border-radius:0 0 5px 5px;justify-content:center;align-items:flex-end;margin:0;padding:0 0 12px;font-size:11px;font-weight:500;display:flex;position:absolute;top:0}.tx-melody-keyboard .tx-piano-key.is-black{z-index:1;color:#f0efe6;background:#33463b;border:1px solid #25392f;height:62%;padding-bottom:10px;font-size:9px;box-shadow:0 3px 2px #25392f40}.tx-melody-keyboard .tx-piano-key.is-pressed{background:var(--green-soft,#dfe9e3);color:var(--green,#234d42);box-shadow:inset 0 -4px #739c87}.tx-melody-keyboard .tx-piano-key.is-black.is-pressed{color:#fff;background:#628b73;box-shadow:inset 0 -3px #234d42}.tx-melody-keyboard .tx-piano-key:disabled{opacity:.45;cursor:not-allowed}.tx-melody-keyboard .tx-piano-key:focus-visible{z-index:2;outline:3px solid var(--ochre,#bf7c35);outline-offset:-4px}.tx-melody-keyboard .tx-keyboard-controls button:focus-visible,.tx-keyboard-scroll:focus-visible{outline:3px solid var(--ochre,#bf7c35);outline-offset:2px}.tx-keyboard-scroll-rail{min-width:616px;color:var(--muted,#77776d);text-align:center;-webkit-user-select:none;user-select:none;padding:10px;font-size:10px}.tx-keyboard-help{color:var(--muted,#77776d);margin:9px 0 0;font-size:11px;line-height:1.6}@media (width<=480px){.tx-keyboard-keys{height:136px}.tx-keyboard-scroll-rail{text-align:left;padding-left:14px}}.tx-keyboard-keys,.tx-keyboard-keys *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.tx-keyboard-keys{touch-action:none}.tx-piano-key>span{pointer-events:none}.tx-recording-dialog{z-index:100;background:var(--paper,#fbfaf6);width:100%;height:100dvh;color:var(--ink,#30332e);overscroll-behavior:none;grid-template-rows:auto minmax(0,1fr);display:grid;position:fixed;inset:0;overflow:hidden}.tx-recording-header{z-index:2;padding:calc(16px + env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px)) 16px max(20px, env(safe-area-inset-left,0px));border-bottom:1px solid var(--line,#dfddd4);background:var(--paper,#fbfaf6);justify-content:space-between;align-items:center;gap:12px;display:flex;position:sticky;top:0}.tx-recording-status{color:var(--muted,#77776d);margin:0;font-size:13px;line-height:1.5}.tx-recording-stop{border:1px solid var(--green,#234d42);background:var(--green,#234d42);color:#fff;min-height:44px;font:inherit;cursor:pointer;border-radius:7px;flex-shrink:0;padding:10px 18px;font-size:14px}.tx-recording-stop:hover{background:#193d34}.tx-recording-stop:focus-visible{outline:3px solid var(--ochre,#bf7c35);outline-offset:3px}.tx-recording-content{min-width:0;min-height:0;padding:clamp(12px, 4vh, 40px) max(20px, env(safe-area-inset-right,0px)) max(20px, env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px));overscroll-behavior:contain;align-items:center;display:grid;overflow:auto}.tx-recording-dialog .tx-melody-keyboard{grid-template-rows:auto minmax(0,1fr) auto;width:100%;max-width:1200px;height:min(100%,480px);min-height:0;margin:0 auto;display:grid}.tx-recording-dialog .tx-keyboard-scroll{flex-direction:column;min-height:0;display:flex;overflow:auto hidden}.tx-recording-dialog .tx-keyboard-keys{flex:1 0 80px;height:auto}.tx-recording-dialog .tx-keyboard-scroll-rail{flex-shrink:0}@media (height<=480px){.tx-recording-header{padding-top:max(8px, env(safe-area-inset-top,0px));padding-bottom:8px}.tx-recording-content{padding-top:10px;padding-bottom:max(10px, env(safe-area-inset-bottom,0px))}.tx-recording-dialog .tx-keyboard-controls{margin-bottom:6px}.tx-recording-dialog .tx-keyboard-scroll-rail{padding-top:6px;padding-bottom:6px}.tx-recording-dialog .tx-keyboard-help{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.tx-recording-dialog .tx-melody-keyboard{grid-template-rows:auto minmax(0,1fr)}}@media (width<=480px){.tx-recording-header,.tx-recording-content{padding-left:max(12px, env(safe-area-inset-left,0px));padding-right:max(12px, env(safe-area-inset-right,0px))}.tx-recording-status{font-size:12px}}.transcription{max-width:1280px}.transcription button,.transcription select,.transcription input{border:1px solid var(--line);background:var(--paper);min-height:44px;color:var(--ink);font:inherit;border-radius:7px;font-size:13px}.transcription button{cursor:pointer;padding:8px 13px}.transcription button:hover{border-color:var(--green);background:var(--green-soft)}.transcription button:disabled{opacity:.4;cursor:not-allowed}.transcription :is(button,select,input):focus-visible{outline:3px solid var(--ochre);outline-offset:2px}.transcription input,.transcription select{width:100%;padding:9px 11px}.transcription label{min-width:0;color:var(--muted);flex-direction:column;gap:7px;font-size:11px;display:flex}.transcription h2{margin-bottom:7px;font-family:Georgia,serif;font-size:24px;font-weight:500}.transcription .tx-primary{background:var(--green);border-color:var(--green);color:#fff}.tx-library{flex-wrap:wrap;align-items:flex-end;gap:14px;margin:30px 0 24px;display:flex}.tx-library>label{flex:1;min-width:190px}.tx-create{flex:1.4;align-items:flex-end;gap:8px;display:flex}.tx-create label{flex:1}.tx-backups{gap:7px;display:flex}.tx-chart,.tx-audition{border:1px solid var(--line);background:var(--paper);border-radius:12px;margin-top:20px;padding:22px}.tx-settings{grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:12px;margin-bottom:18px;display:grid}.tx-settings.with-target{grid-template-columns:repeat(6,minmax(0,1fr))}.tx-settings .tx-chart-heading,.tx-settings .tx-transport{display:contents}.tx-settings .tx-title{grid-column:1/-1}.transcription .tx-settings :is(input,select,button){width:100%;height:44px;min-height:44px;font-family:inherit;font-size:14px}.tx-settings .tx-play{white-space:nowrap;padding-inline:6px}.tx-settings .tx-play-status{color:var(--muted);order:3;grid-column:1/-1;margin:0;font-size:11px}.tx-bars{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(8,minmax(0,1fr));gap:0;display:grid}.transcription .tx-bar{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;background:0 0;border-radius:0;min-width:0;min-height:48px;padding:9px 10px;font-size:16px;line-height:1.4;display:block;position:relative}.transcription .tx-bar.is-selected{background:var(--green-soft);box-shadow:inset 0 0 0 2px var(--green)}.tx-bar-entries{min-height:28px;display:block}.tx-bar-entries>span{white-space:nowrap}.tx-blank{color:#b7b4aa}.transcription .tx-bar:disabled{opacity:1}.transcription .tx-bar.is-playing{box-shadow:inset 0 0 0 2px var(--ochre);background:#f8edda}.tx-bar .is-sounding{color:#8c4c15;text-underline-offset:4px;text-decoration:underline}.transcription textarea{resize:vertical;border:1px solid var(--line);background:var(--paper);width:100%;min-height:44px;color:var(--ink);font:inherit;border-radius:0;padding:5px;font-size:16px;line-height:1.6;display:block}.transcription textarea:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}.transcription textarea[aria-invalid=true]{border-color:#a34e3c}.tx-text-help{color:var(--muted);margin:8px 0 14px;font-size:11px;line-height:1.6}.tx-text-error{color:#8e3e2c;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;display:flex}.tx-chart-actions{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8px;display:grid}.tx-chart-actions span{text-align:right;color:var(--muted);grid-column:1/-1;font-size:11px}.tx-grid-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:15px;display:flex}.tx-grid-heading p,.tx-welcome p{color:var(--muted);margin-bottom:0;font-size:13px;line-height:1.6}.tx-grid-heading>button{flex-shrink:0}.tx-grid-scroll{overflow-x:auto}.tx-grid{table-layout:fixed;border-collapse:collapse;width:100%}.tx-grid th{color:var(--muted);overflow-wrap:anywhere;padding:8px 3px;font-size:11px;font-weight:500}.tx-grid th:first-child{width:45px}.tx-grid td{padding:3px}.transcription .tx-grid button{width:100%;min-height:48px;padding:8px 3px;font-size:17px}.tx-footnote{color:var(--muted);margin:14px 0 0;font-size:11px;line-height:1.7}.tx-notice{background:#f5e9d7;border-radius:7px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font-size:13px;display:flex}.tx-welcome{margin:30px 0;padding:25px 0}@media (width<=760px){.tx-library{gap:14px 10px}.tx-library>label,.tx-create{flex-basis:100%}.tx-chart,.tx-audition{padding:14px}.tx-bars{grid-template-columns:repeat(4,minmax(0,1fr))}.transcription .tx-bar{padding:9px 10px;font-size:16px}.tx-settings,.tx-settings.with-target{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tx-settings .tx-target-key{grid-column:1/-1}.transcription .tx-settings :is(input,select,button){font-size:16px}.transcription .tx-settings .tx-play{font-size:14px}.tx-chart-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.tx-grid th{font-size:9px}.tx-grid th:first-child{width:27px}.tx-grid td{padding:2px}.transcription .tx-grid button{letter-spacing:-.3px;font-size:13px}.tx-grid-heading{align-items:flex-start}.tx-grid-heading p{font-size:12px}.tx-grid-heading h2{font-size:23px}}@media (width<=360px){.tx-chart,.tx-audition{padding:10px}.transcription .tx-grid button{font-size:12px}}@media (width>=761px) and (width<=1050px){.tx-bars{grid-template-columns:repeat(4,minmax(0,1fr))}.tx-settings,.tx-settings.with-target{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=480px){.tx-bars{grid-template-columns:repeat(2,minmax(0,1fr))}}.transcription div.tx-bar.is-selected>.tx-bar-entries{visibility:hidden}.transcription .tx-bar textarea{resize:none;scrollbar-width:none;width:100%;height:100%;min-height:0;font:inherit;line-height:inherit;text-align:inherit;background:0 0;border:0;margin:0;padding:9px 10px;position:absolute;inset:0;overflow:auto}.tx-sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tx-metronome>span{border:1px solid var(--line);height:44px;color:var(--ink);border-radius:7px;align-items:center;gap:9px;padding:0 11px;font-size:14px;display:flex}.transcription .tx-settings .tx-metronome input{width:18px;height:18px;min-height:18px;accent-color:var(--green);margin:0}@media (width<=760px){.tx-metronome>span{font-size:16px}}.transcription .tx-lockable{border:0;min-width:0;padding:0}.transcription .tx-bar.has-melody:after{content:"";background:var(--green);pointer-events:none;height:3px;position:absolute;top:0;left:0;right:0}.transcription fieldset.tx-settings{margin-inline:0;margin-top:0}@media (width<=760px){.transcription .tx-recording-rate select{font-size:16px}}.transcription .tx-settings .tx-chart-actions button{white-space:nowrap;padding-inline:6px;font-size:14px}.feature-nav{border-bottom:1px solid var(--line);background:var(--paper)}.feature-nav-inner{gap:8px;width:min(1280px,100%);margin:0 auto;padding:10px 42px;display:flex}.feature-nav a{min-height:40px;color:var(--muted);border-radius:7px;align-items:center;padding:0 16px;font-size:13px;text-decoration:none;display:inline-flex}.feature-nav a[aria-current]{background:var(--green);color:#fff}.feature-nav a:hover:not([aria-current]){background:var(--green-soft);color:var(--green)}.feature-nav a:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}@media (width<=1050px){.feature-nav-inner{padding-inline:30px}}@media (width<=760px){.feature-nav-inner{padding-inline:18px}}.quiz-hub{width:min(1280px,100%);margin:0 auto;padding:45px 42px 70px}.quiz-category-list{gap:36px;margin-top:36px;display:grid}.quiz-category-list h2{margin-bottom:8px;font-family:Georgia,serif;font-size:24px;font-weight:500}.quiz-card-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),380px));gap:16px;display:grid}.quiz-card{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:24px;text-decoration:none;display:block}.quiz-card:hover{border-color:var(--green);background:#f5f7f1}.quiz-card h3{justify-content:space-between;gap:16px;margin-bottom:12px;font-family:Georgia,serif;font-size:22px;font-weight:500;display:flex}.quiz-card h3 span{color:var(--green)}.quiz-card small{color:var(--green);font-size:11px}.quiz-breadcrumb{width:min(520px,100%);color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;margin:0 auto;padding:22px 24px 0;font-size:11px;display:flex}.quiz-breadcrumb a{min-height:44px;color:var(--green);align-items:center;text-decoration:none;display:inline-flex}.quiz-breadcrumb a:hover{text-decoration:underline}.quiz-breadcrumb+.ear-training{padding-top:16px}.quiz-card:focus-visible,.quiz-breadcrumb a:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}@media (width<=1050px){.quiz-hub{padding-inline:30px}}@media (width<=760px){.quiz-hub{padding:32px 18px 50px}.quiz-breadcrumb{padding:14px 18px 0}.quiz-card{padding:20px}}:root{color:#282823;font-synthesis:none;text-rendering:optimizelegibility;--ink:#282823;--muted:#77776d;--paper:#fbfaf6;--line:#dfddd4;--green:#234d42;--green-soft:#dfe9e3;--ochre:#bf7c35;background:#f4f1ea;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#f4f1ea;min-width:320px;min-height:100vh;margin:0}button,input,textarea{font:inherit}button{color:inherit}.app-shell{min-height:100vh}.family-quality.minor{color:#4b776d}.family-quality.major{color:#b56e28}.family-quality.half-diminished{color:#a65d56}.family-quality.dominant{color:#69618b}.family-quality.suspended{color:#52799a}main{min-width:0}.content{width:min(1280px,100%);margin:0 auto;padding:45px 42px 70px}.page-heading{justify-content:space-between;align-items:flex-end;gap:30px;display:flex}.eyebrow{color:var(--ochre);letter-spacing:1.7px;text-transform:uppercase;margin:0 0 10px;font-size:10px;font-weight:750}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-1.7px;margin-bottom:9px;font-family:Georgia,Times New Roman,serif;font-size:clamp(35px,4vw,48px);font-weight:500;line-height:1.05}.lede{color:var(--muted);margin-bottom:0;font-family:Georgia,serif;font-size:15px;font-style:italic}.summary-card{border:1px solid var(--line);background:#fbfaf6bf;border-radius:10px;align-items:center;gap:22px;padding:16px 20px;display:flex}.summary-card div{flex-direction:column;display:flex}.summary-card strong{font-family:Georgia,serif;font-size:22px;font-weight:500}.summary-card span{color:#8b897f;letter-spacing:.7px;text-transform:uppercase;margin-top:2px;font-size:9px}.summary-card i{background:var(--line);width:1px;height:29px}.filter-panel{border:1px solid var(--line);background:#fbfaf6a8;border-radius:10px;margin-top:36px;overflow:hidden}.filter-row{align-items:center;gap:20px;min-height:58px;padding:10px 14px 10px 19px;display:flex}.filter-row+.filter-row{border-top:1px solid var(--line)}.filter-heading{border-right:1px solid var(--line);min-width:104px;padding-right:18px}.filter-heading span{font-family:Georgia,serif;font-size:13px;display:block}.filter-heading small{color:#9a978e;letter-spacing:.9px;text-transform:uppercase;margin-top:3px;font-size:8px;display:block}.filter-options{scrollbar-width:none;align-items:center;gap:5px;display:flex;overflow-x:auto}.filter-options::-webkit-scrollbar{display:none}.filter-options button{color:#6d6b63;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:7px;flex:none;min-width:42px;height:34px;padding:0 12px;font-family:Georgia,serif;font-size:12px}.filter-options button:hover{border-color:#d6d2c8}.filter-options button.active{border-color:var(--green);background:var(--green);color:#fff}.midi-controls{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.midi-connect{border:1px solid var(--green);background:var(--green);color:#fff;cursor:pointer;border-radius:7px;flex:none;height:34px;padding:0 13px;font-family:Georgia,serif;font-size:11px}.midi-connect:hover{background:#193d34}.midi-status{color:#77746c;align-items:center;gap:6px;min-width:0;font-size:10px;display:flex}.midi-status i{background:#aaa79f;border-radius:50%;flex:none;width:7px;height:7px}.midi-status.connected i{background:#3f8d70;box-shadow:0 0 0 3px #3f8d701f}.midi-status.connecting i{background:var(--ochre)}.midi-status.error i{background:#b65f53}.midi-status span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.held-notes{align-items:center;gap:3px;display:flex}.held-notes span{color:#4f4e48;text-align:center;background:#fff;border:1px solid #d3cfc5;border-radius:5px;min-width:29px;padding:4px 6px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px}.midi-hint{color:#9a978e;letter-spacing:.35px;white-space:nowrap;margin-left:auto;font-size:8px}.midi-hint.active{color:var(--green);font-weight:700}.result-toolbar{justify-content:space-between;align-items:center;gap:16px;min-height:58px;display:flex}.result-toolbar strong{letter-spacing:.1px;font-size:11px}.result-toolbar span{color:#99968d;font-size:10px}.library-actions{gap:7px;display:flex}.primary-action,.secondary-action{cursor:pointer;border-radius:7px;min-height:34px;padding:0 13px;font-size:11px}.primary-action{border:1px solid var(--green);background:var(--green);color:#fff}.primary-action:hover{background:#193d34}.secondary-action{background:var(--paper);color:#64625b;border:1px solid #d3cfc5}.secondary-action:hover{background:#f0ede6;border-color:#aaa69c}.secondary-action:disabled{opacity:.45;cursor:not-allowed}.voicing-stack{color:#55544d;gap:1px;min-width:max-content;font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:11px;line-height:1.12;display:grid}.note-line{gap:4px;display:flex}.degree{grid-template-columns:.65em .65em;align-items:baseline;display:inline-grid}.accidental{text-align:right}.top-degree{color:var(--ochre)}.matrix-shell{border:1px solid var(--line);background:var(--paper);border-radius:10px;overflow:auto;box-shadow:0 2px 6px #1e1e1908}.matrix{border-collapse:collapse;table-layout:fixed;width:100%;min-width:960px;font-size:10px}.matrix th,.matrix td{text-align:center;vertical-align:middle;border-bottom:1px solid #e7e4dc;border-right:1px solid #e7e4dc;height:40px;padding:1px 4px}.matrix thead th{z-index:2;color:#747169;background:#eeebe4;height:30px;font-family:Georgia,serif;font-size:10px;position:sticky;top:0}.matrix thead th:first-child,.matrix tbody th:first-child{z-index:3;background:#f5f2ec;width:64px;position:sticky;left:0}.matrix thead th:nth-child(2),.matrix tbody th:nth-child(2){z-index:3;text-align:left;background:#f9f7f2;width:110px;padding-left:10px;position:sticky;left:64px}.matrix thead th:nth-child(2){text-align:center;padding-left:4px}.matrix tbody th:first-child{font-size:9px;font-weight:650}.matrix tbody th:nth-child(2) strong{font-family:Georgia,serif;font-size:12px;font-weight:500;display:block}.matrix tbody th:nth-child(2) small{color:#a19e95;text-transform:uppercase;margin-top:1px;font-size:7px;font-weight:500;display:block}.matrix td{color:#99968f;text-align:left;padding-left:7px}.matrix td .voicing-stack{gap:3px;font-size:9px;line-height:1}.matrix td .note-line{justify-content:flex-start;gap:2px}.empty-cell{color:#d2cfc6;text-align:center;display:block}.voicing-button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:5px;width:100%;min-height:34px;padding:3px}.voicing-button:hover,.voicing-button:focus-visible{background:#ebe8df;outline:none}.shape-edit-button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:5px;width:100%;min-height:36px;padding:3px 20px 3px 0;position:relative}.shape-edit-button:hover,.shape-edit-button:focus-visible{background:#ebe8df;outline:none}.shape-edit-button i{background:var(--ochre);border-radius:50%;width:6px;height:6px;position:absolute;top:7px;right:7px;box-shadow:0 0 0 2px #f3e5d5}.matrix td.midi-match-cell{background:#edf4ef;padding-left:3px;box-shadow:inset 0 0 0 1px #aac8b7}.midi-match-button{justify-content:space-between;align-items:center;gap:3px;display:flex}.midi-match-button .degree:not(.midi-note-match){opacity:.4}.degree.midi-note-match{background:var(--green);color:#fff;opacity:1;border-radius:3px;margin:-1px -2px;padding:1px 2px}.midi-root{min-width:22px;color:var(--green);flex-direction:column;align-items:center;margin-left:auto;font-family:Georgia,serif;font-size:12px;font-weight:700;line-height:1;display:flex}.midi-root small{color:#7b9689;letter-spacing:.5px;text-transform:uppercase;margin-bottom:2px;font-family:Inter,sans-serif;font-size:5px;font-weight:750}.dialog-backdrop{z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1d1f1b8f;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.voicing-dialog{background:var(--paper);border:1px solid #d6d1c5;border-radius:14px;width:min(760px,100%);padding:28px;position:relative;overflow:hidden;box-shadow:0 22px 65px #14161340}.voicing-dialog h2{margin-bottom:8px;font-family:Georgia,serif;font-size:30px;font-weight:500}.dialog-close{color:#66645d;cursor:pointer;background:#ece9e1;border:0;border-radius:50%;width:34px;height:34px;font-size:24px;line-height:1;position:absolute;top:15px;right:16px}.shape-editor,.export-dialog{background:var(--paper);border:1px solid #d6d1c5;border-radius:14px;width:min(720px,100%);max-height:calc(100vh - 48px);position:relative;overflow-y:auto;box-shadow:0 22px 65px #14161340}.shape-editor form,.export-dialog{padding:28px}.shape-editor h2,.export-dialog h2{margin-bottom:21px;font-family:Georgia,serif;font-size:28px;font-weight:500}.editor-fields{grid-template-columns:1fr 1fr;gap:13px;display:grid}.editor-fields label{grid-column:1/-1}.editor-fields label>span{color:#77746c;letter-spacing:.65px;text-transform:uppercase;margin:0 0 6px 2px;font-size:9px;font-weight:700;display:block}.editor-fields input{width:100%;height:39px;color:var(--ink);background:#fff;border:1px solid #d4d0c6;border-radius:7px;outline:none;padding:0 11px;font-size:12px}.editor-fields input:focus{border-color:var(--green);box-shadow:0 0 0 3px #234d421a}.editor-section-heading{justify-content:space-between;align-items:flex-start;margin-top:24px;display:flex}.editor-section-heading h3{margin-bottom:3px;font-family:Georgia,serif;font-size:16px;font-weight:500}.editor-section-heading p{color:#918e85;margin-bottom:10px;font-size:9px}.editor-section-heading>strong{background:var(--green-soft);min-width:25px;color:var(--green);text-align:center;border-radius:12px;padding:4px 7px;font-size:10px}.editor-voicings{gap:5px;display:grid}.editor-voicing{background:#fff;border:1px solid #e1ded6;border-radius:7px;grid-template-columns:25px minmax(120px,1fr) auto auto;align-items:center;gap:10px;min-height:44px;padding:6px 8px;display:grid}.voicing-number{color:#88857c;background:#efede7;border-radius:50%;place-items:center;width:22px;height:22px;font-size:9px;display:grid}.voicing-top-note{color:var(--ochre);white-space:nowrap;font-size:9px}.editor-voicing>button{color:#a3544b;cursor:pointer;background:0 0;border:0;border-radius:5px;padding:5px 7px;font-size:9px}.editor-voicing>button:hover{background:#f5e6e3}.no-voicings{color:#96938b;text-align:center;border:1px dashed #d7d3ca;border-radius:7px;padding:22px;font-family:Georgia,serif;font-size:12px;font-style:italic}.midi-capture{background:#f2f0e9;border:1px solid #d8d4ca;border-radius:8px;align-items:center;gap:12px;min-height:55px;margin-top:14px;padding:9px 11px;display:flex}.midi-capture>div:first-child{align-items:center;gap:9px;min-width:190px;display:flex}.midi-capture strong,.midi-capture small{display:block}.midi-capture strong{margin-bottom:2px;font-family:Georgia,serif;font-size:11px;font-weight:500}.midi-capture small{color:#8e8b82;font-size:8px}.capture-light{background:#aaa79f;border-radius:50%;flex:none;width:9px;height:9px}.midi-capture.recording{background:#eaf2ed;border-color:#9ec0ad}.midi-capture.recording .capture-light{background:#3f8d70;box-shadow:0 0 0 4px #3f8d7024}.midi-capture .held-notes{margin-left:auto;overflow-x:auto}.capture-notice{min-height:15px;color:var(--green);margin:5px 2px 0;font-size:9px}.editor-actions{justify-content:space-between;gap:7px;margin-top:16px;display:flex}.editor-actions>div{gap:7px;display:flex}.danger-action{color:#a3544b;cursor:pointer;background:0 0;border:1px solid #d8b7b1;border-radius:7px;min-height:34px;padding:0 11px;font-size:10px}.danger-action:hover,.danger-action.confirming{color:#fff;background:#a3544b;border-color:#a3544b}.danger-action:disabled{opacity:.45;cursor:not-allowed}.danger-action:disabled:hover{color:#a3544b;background:0 0;border-color:#d8b7b1}.export-dialog{width:min(760px,100%)}.export-dialog>p:not(.eyebrow){color:#77746c;margin:-10px 45px 14px 0;font-size:11px;line-height:1.55}.export-dialog code{color:#4b554f;font-family:ui-monospace,monospace;font-size:10px}.export-dialog textarea{resize:vertical;color:#e8e5dc;background:#292b28;border:1px solid #d1cdc3;border-radius:8px;outline:none;width:100%;min-height:340px;padding:13px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.55}.export-dialog textarea:focus{border-color:var(--green)}.root-picker{flex-wrap:wrap;gap:4px;margin:0 0 15px;display:flex}.root-picker button{color:#6d6b63;cursor:pointer;background:0 0;border:1px solid #d8d4ca;border-radius:5px;min-width:34px;height:28px;padding:0 7px;font-family:Georgia,serif;font-size:11px}.root-picker button:hover{background:#eeebe4}.root-picker button.active{border-color:var(--green);background:var(--green);color:#fff}.voicing-picker{flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 14px;display:flex}.voicing-picker button{color:#6d6b63;cursor:pointer;background:0 0;border:1px solid #d8d4ca;border-radius:5px;min-width:34px;height:28px;padding:0 7px;font-family:ui-monospace,monospace;font-size:10px}.voicing-picker button:hover{background:#eeebe4}.voicing-picker button.active{border-color:var(--ochre);background:var(--ochre);color:#fff}.piano-scroll{padding-bottom:6px;overflow-x:auto}.piano{-webkit-user-select:none;user-select:none;min-width:max-content;height:76px;position:relative}.white-keys{height:100%;display:flex}.piano-key{justify-content:center;align-items:flex-end;display:flex;position:relative}.white-key{background:#fff;border:1px solid #aaa79f;border-radius:0 0 3px 3px;flex:0 0 20px;width:20px;height:76px}.white-key+.white-key{border-left:0}.black-key{z-index:1;background:#292a27;border-radius:0 0 2px 2px;width:12px;height:46px;position:absolute;top:0;box-shadow:0 2px 3px #0003}.piano-key.pressed{background:var(--note-color)}.piano-key span{color:#fff;margin-bottom:8px;font-family:ui-monospace,monospace;font-size:8px;font-weight:750}.white-key span{color:var(--paper)}.empty-state{text-align:center;color:var(--muted);border:1px dashed #d4d0c7;border-radius:10px;padding:70px 20px}.empty-state div{color:#aaa79d;font-family:Georgia,serif;font-size:32px}.empty-state h2{color:var(--ink);margin:12px 0 6px;font-family:Georgia,serif;font-weight:500}.empty-state p{font-size:12px}.empty-state button{cursor:pointer;background:#fff;border:1px solid #d4d0c7;border-radius:6px;padding:8px 13px}@media (width<=1050px){.content{padding-inline:30px}.summary-card{display:none}}@media (width<=760px){.content{padding:32px 18px 50px}.page-heading{display:block}h1{font-size:36px}.filter-panel{margin-top:28px}.filter-row{padding:10px;display:block}.filter-heading{border:0;margin:0 0 8px 4px;padding:0}.filter-heading small{margin-left:5px;display:inline}.filter-heading span{display:inline}.midi-controls{flex-wrap:wrap}.midi-hint{width:100%;margin-left:0}.held-notes{overflow-x:auto}.result-toolbar{flex-direction:column;align-items:flex-start;padding:10px 0}.library-actions{width:100%}.library-actions button{flex:1}.dialog-backdrop{padding:12px}.voicing-dialog{padding:24px 18px}.shape-editor,.export-dialog{max-height:calc(100vh - 24px)}.shape-editor form,.export-dialog{padding:24px 16px}.editor-fields{grid-template-columns:1fr}.editor-fields label{grid-column:auto}.editor-voicing{grid-template-columns:25px minmax(100px,1fr) auto}.voicing-top-note{display:none}.midi-capture{flex-wrap:wrap;align-items:flex-start}.midi-capture .held-notes{width:100%;margin-left:0}}