:root{font-family:Inter,Helvetica Neue,Arial,sans-serif;color:#edf7f1;background:#061b16;font-synthesis:none;--panel:#0c2d25;--line:#2d5c4d;--gold:#f2bd45;--amber:#ecb45f;--blue:#77c5ee;--muted:#a7c1b5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#174f3f 0,#09251e,#061914 72%);min-width:320px}button,a,select,input{-webkit-tap-highlight-color:transparent}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,g:focus-visible{outline:3px solid #fff;outline-offset:3px}main{max-width:1500px;margin:auto;padding:28px 34px 24px}.site-header{display:flex;align-items:end;justify-content:space-between;padding:4px 5px 22px;border-bottom:1px solid #d6ad4b66}.site-header h1{margin:0;font:700 46px/1 Georgia,serif;color:#ffe39a;text-shadow:0 2px 0 #6a4b08}.site-header p{margin:8px 0 0;font-size:17px;color:#d4e5db}.lesson-tag{padding:9px 13px;border:1px solid #d6ad4b80;border-radius:999px;color:#f6d982;font-size:10px;font-weight:800;letter-spacing:.16em}.journey{display:flex;gap:10px;padding:18px 0}.journey span{display:flex;align-items:center;gap:9px;padding:8px 16px 8px 8px;border:1px solid #315f51;border-radius:999px;background:#0c2e26;color:#c8dad1;font-size:12px;font-weight:700}.journey b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f2bd45;color:#14261f}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.explore-panel,.export-panel,.control-panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#113a30,#0a261f);box-shadow:0 18px 50px #0005}.explore-panel{overflow:hidden}.chord-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px 22px 14px}.chord-card{display:grid;grid-template-columns:1fr auto;align-items:center;padding:15px 18px;border-radius:13px;background:#09241e;border:1px solid}.chord-card small{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.chord-card strong{grid-row:1/3;grid-column:2;font:700 28px Georgia,serif}.chord-card>span{margin-top:6px;font-weight:700}.chord-card em{grid-column:1/-1;margin-top:7px;color:var(--muted);font-size:10px;font-style:normal;text-transform:uppercase;letter-spacing:.08em}.lower-card{border-color:#b58a2e;color:#f4c96e}.upper-card{border-color:#4e9fc4;color:#a9ddf6}.keyboard-frame{margin:0 22px;border:1px solid #527265;border-radius:11px;overflow:hidden;box-shadow:0 8px 26px #0006}.keyboard-scroll{background:#061712;padding:8px;overflow-x:auto;overflow-y:hidden}.keyboard{display:block;width:100%;min-width:760px;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none}.white rect{fill:#f5f0df;stroke:#d3cbb7;stroke-width:1}.black rect{fill:#18201d;stroke:#030a06;stroke-width:1}.piano-key text{font:700 13px Arial,sans-serif;text-anchor:middle;pointer-events:none;fill:#47574b}.black text{fill:#d4ded4}.piano-key .octave{font-size:9px;fill:#819082}.upper rect{fill:#77c5ee}.lower rect{fill:#ecb45f}.both rect{fill:url(#shared)}.upper text,.lower text,.both text{fill:#102923}.piano-key{cursor:pointer}.piano-key:hover rect{stroke:#fff;stroke-width:2}.playback-row{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr)) auto auto;gap:10px;padding:17px 22px}.playback-row button{border-radius:10px;padding:12px 14px;border:1px solid;font-weight:800;color:#071d17;box-shadow:inset 0 1px #fff6}.hear{display:flex;justify-content:center;gap:8px}.lower-hear{background:#e8ad3f;border-color:#ffd375}.upper-hear{background:#65b9e6;border-color:#a4def9}.together-hear{background:#5fcf7c;border-color:#a2ebb5}.stop-button,.reset-button{background:#0b2821!important;color:#e9f5ef!important;border-color:#4d7467!important}.playback-row .selected{outline:3px solid #fff}.audio-status{display:flex;align-items:center;gap:14px;min-height:48px;padding:11px 22px;border-top:1px solid #31564a;background:#08231c;color:#b9cec3;font-size:11px}.audio-status>span:first-child{margin-right:auto}.audio-status button{border:1px solid #d8b876;border-radius:7px;background:#d8b876;color:#14251e;padding:8px 13px;font-weight:800}.ready{color:#9ee5aa;font-weight:800}.hold-control{display:flex;align-items:center;gap:6px;color:#d9e8df}.hold-control input{accent-color:#edcc91}.duration{color:#89a99a}.held-status{color:#f5dfa9}.export-panel{padding:23px;border-color:#ae8939}.step-label{margin:0 0 5px;color:#f3bf49;font-size:10px;font-weight:900;letter-spacing:.15em}.export-panel h2,.control-panel h2{margin:0;font:700 25px Georgia,serif;color:#fff1c5}.export-panel>p:not(.step-label){color:#afc6bb;font-size:12px;line-height:1.55}.export-group{margin-top:18px;padding:16px;border:1px solid #406c5d;border-radius:12px;background:#09251e}.export-group h3{margin:0;font-size:14px}.export-group h3 span{float:right;color:#7fb5a0;font-size:9px;letter-spacing:.1em}.export-group p{margin:7px 0 12px;color:#93afa1;font-size:11px;line-height:1.45}.export-group button{width:100%;margin-top:7px;padding:9px 10px;border:1px solid #5c8274;border-radius:7px;background:#153e33;color:#eaf4ef;text-align:left;font-weight:700}.export-group button:hover{border-color:#f0c35d;background:#1d5042}.midi-group button{background:#e8b742;color:#12251e;text-align:center;border-color:#ffdb7a}.control-panel{margin-top:18px;padding:22px}.section-heading{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:end;margin-bottom:18px}.section-heading .step-label{grid-row:1}.section-heading h2{grid-row:2}.section-heading>span{grid-column:2;grid-row:1/3;color:#a9c0b5;font-size:12px}.selectors{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:16px}.selector-block,.selectors form{display:flex;flex-direction:column;gap:10px;padding:15px;border:1px solid #315f50;border-radius:12px;background:#09251e}.selectors label{display:flex;flex-direction:column;gap:7px;color:#cbded4;font-size:11px;font-weight:800}.selectors select,.selectors input{width:100%;border:1px solid #4f7769;border-radius:7px;background:#061c16;color:#f0f7f3;padding:10px}.voicing-control,.inversion-control{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;border:0}.voicing-control legend,.inversion-control legend{margin-bottom:7px;color:#8eaa9c;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.voicing-control button,.inversion-control button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:8px 4px;border:1px solid #456d5f;border-radius:7px;background:#0d3027;color:#c9dbd2;font-size:10px}.voicing-control button small,.inversion-control button small{font-size:8px;color:#819e90}.voicing-control button.selected{border-color:var(--amber);background:#5d4727;color:#fff}.inversion-control button.selected{border-color:var(--blue);background:#214b55;color:#fff}.octave-control{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:7px;color:#92ad9f;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.octave-control button{width:30px;height:28px;border:1px solid #4f7769;border-radius:6px;background:#0c3027;color:#fff;font-size:17px}.octave-control output{min-width:65px;color:#f5d580;text-align:center;font-size:10px}.entry-row{display:flex;gap:7px}.entry-row button{border:0;border-radius:7px;background:#e4b546;color:#14251e;padding:0 16px;font-weight:900}.selectors small{color:#819e90;font-size:9px}.entry-error{color:#ffd0c9;font-size:10px;line-height:1.35}footer{display:flex;justify-content:space-between;gap:20px;padding:18px 4px 0;color:#86a295;font-size:10px}footer a{color:#d4e5db}@media(max-width:1050px){.workspace{grid-template-columns:1fr}.export-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}.export-panel>p,.export-panel>.step-label,.export-panel>h2{grid-column:1/-1}.export-group{margin-top:0}.playback-row{grid-template-columns:repeat(3,1fr) auto}.reset-button{grid-column:1/-1}.selectors{grid-template-columns:1fr 1fr}.selectors form{grid-column:1/-1}}@media(max-width:720px){main{padding:18px}.site-header{align-items:start}.site-header h1{font-size:34px}.lesson-tag{display:none}.journey{overflow:auto}.journey span{white-space:nowrap}.chord-cards{grid-template-columns:1fr}.workspace{display:block}.export-panel{display:block;margin-top:16px}.export-group{margin-top:14px}.playback-row{grid-template-columns:1fr 1fr}.playback-row .together-hear{grid-column:1/-1}.selectors{grid-template-columns:1fr}.selectors form{grid-column:auto}.section-heading{display:block}.section-heading>span{display:block;margin-top:7px}.audio-status{flex-wrap:wrap}.audio-status>span:first-child{width:100%}footer{flex-direction:column}.keyboard-frame{margin:0 12px}.chord-cards,.playback-row{padding-left:12px;padding-right:12px}}.harmonize-panel{margin-top:18px;padding:22px;border:1px solid #4e9fc4;border-radius:18px;background:linear-gradient(145deg,#113a30,#0a261f);box-shadow:0 18px 50px #0005}.harmonize-panel h2{margin:0;font:700 25px Georgia,serif;color:#fff1c5}.melody-picker{display:grid;grid-template-columns:160px 120px 1fr;gap:12px;align-items:end;margin-bottom:14px}.melody-picker label{display:flex;flex-direction:column;gap:7px;color:#cbded4;font-size:11px;font-weight:800}.melody-picker select{border:1px solid #5b8ca2;border-radius:7px;background:#061c16;color:#f0f7f3;padding:10px}.melody-picker output{padding:11px 14px;border-radius:8px;background:#123d47;color:#a9ddf6;font-size:12px;font-weight:800}.harmonization-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.harmonization-grid button{display:grid;grid-template-columns:1fr auto;gap:5px;padding:14px;border:1px solid #487786;border-radius:10px;background:#09251e;color:#dcece5;text-align:left}.harmonization-grid button:hover{border-color:#8fd8fa;background:#10362e}.harmonization-grid button.selected{border-color:#9ce1ff;outline:2px solid #77c5ee;background:#173f47}.harmonization-grid strong{font:700 19px Georgia,serif;color:#b9e7fb}.harmonization-grid .harmony-quality{color:#79a99a;font-size:9px;font-weight:900;text-align:right;text-transform:uppercase;letter-spacing:.1em}.harmonization-grid em{grid-column:1/-1;color:#f4ce75;font-size:10px;font-style:normal}@media(max-width:1050px){.harmonization-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.harmonization-grid,.melody-picker{grid-template-columns:1fr}}.voicing-control{grid-template-columns:repeat(2,1fr)}.bass rect{fill:#d68cff}.bass-lower rect{fill:url(#bassLower)}.bass-upper rect{fill:url(#bassUpper)}.all-three rect{fill:url(#allThree)}.bass text,.bass-lower text,.bass-upper text,.all-three text{fill:#102923}.bass-card{border-color:#a968c9;color:#e5b4ff}.disabled-card{opacity:.55}.bass-hear{background:#c17bea;border-color:#e1b3fa}.chord-cards{grid-template-columns:repeat(3,1fr)}.playback-row{grid-template-columns:repeat(4,minmax(115px,1fr)) auto auto}.selectors{grid-template-columns:repeat(3,1fr)}.selectors form{grid-column:1/-1}.include-bass{flex-direction:row!important;align-items:center;padding:9px 10px;border:1px solid #6f5180;border-radius:7px;background:#24162b;color:#e5b4ff!important}.include-bass input{width:auto!important;accent-color:#d68cff}.octave-down-marker rect,.bass .octave-down-marker rect,.bass-lower .octave-down-marker rect,.bass-upper .octave-down-marker rect,.all-three .octave-down-marker rect{fill:#6f2f91;stroke:#f0c9ff;stroke-width:1.5}.octave-down-marker text,.bass .octave-down-marker text,.bass-lower .octave-down-marker text,.bass-upper .octave-down-marker text,.all-three .octave-down-marker text{fill:#fff;font-size:10px;font-weight:900}.octave-down-marker .octave-down-symbol{fill:#f0c9ff;font-size:9px}.demo-preset{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:12px 14px;border:1px solid #8a5ba1;border-radius:10px;background:#211429}.demo-preset div{display:flex;flex-direction:column;gap:4px}.demo-preset strong{color:#f0d0ff}.demo-preset span{color:#c4a8d1;font-size:11px}.demo-preset button{padding:9px 13px;border:1px solid #e0b4f4;border-radius:7px;background:#b96de1;color:#1a0c20;font-weight:900}@media(max-width:1050px){.chord-cards{grid-template-columns:1fr 1fr}.bass-card{grid-column:1/-1}.playback-row{grid-template-columns:repeat(2,1fr) auto}.selectors{grid-template-columns:1fr 1fr}.bass-controls{grid-column:1/-1}}@media(max-width:720px){.chord-cards,.playback-row,.selectors{grid-template-columns:1fr}.bass-card,.bass-controls{grid-column:auto}}.playback-row{grid-template-columns:repeat(4,minmax(115px,1fr))}.hold-button{grid-column:1/3;min-height:48px;border:2px solid;border-radius:10px;font-weight:900;letter-spacing:.02em;transition:background .15s,border-color .15s,color .15s}.hold-button.hold-off{background:#172f29;color:#eef7f2;border-color:#78978a}.hold-button.hold-on{background:#f2bd45;color:#13251e;border-color:#ffe499;box-shadow:0 0 0 3px #f2bd4540,inset 0 1px #fff8}.hold-button.hold-on:before{content:"● ";color:#17582c}.stop-button,.reset-button{min-height:48px}@media(max-width:720px){.playback-row{grid-template-columns:1fr 1fr}.hold-button{grid-column:1/-1}.reset-button{grid-column:auto}.audio-status .duration{width:100%}}.mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px;padding:7px;border:1px solid #315f51;border-radius:13px;background:#08231c}.mode-selector button{padding:12px 16px;border:1px solid #456d5f;border-radius:9px;background:#0d3027;color:#bdd2c8;font-weight:800}.mode-selector button.selected{border-color:#f2bd45;background:#3b321d;color:#ffe39a;box-shadow:inset 0 0 0 1px #f2bd4566}.manual-entry-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 22px 0;padding:13px 15px;border:1px solid #587c70;border-radius:11px;background:#08251e}.manual-entry-bar>div{display:flex;flex-direction:column;gap:4px}.manual-entry-bar strong{color:#fff1c5}.manual-entry-bar span{color:#9eb7ab;font-size:11px}.manual-entry-bar fieldset{display:flex;gap:7px;margin:0;padding:0;border:0}.manual-entry-bar legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.manual-entry-bar button{padding:9px 12px;border:1px solid #587c70;border-radius:7px;background:#102f27;color:#d7e6df;font-size:11px;font-weight:900}.manual-entry-bar .manual-bass.selected{border-color:#e4b0fb;background:#63367a;color:#fff}.manual-entry-bar .manual-lower.selected{border-color:#ffd375;background:#6a4f24;color:#fff}.manual-entry-bar .manual-upper.selected{border-color:#a4def9;background:#245567;color:#fff}.manual-cards .chord-card strong{min-width:32px;text-align:right}.manual-cards .chord-card>span{overflow-wrap:anywhere}.hold-button:disabled{opacity:.82;cursor:default}.export-panel button:disabled{opacity:.45;cursor:not-allowed}.midi-connect{display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(190px,260px) minmax(210px,280px);gap:12px;align-items:center;margin:10px 22px 0;padding:13px 15px;border:1px solid #4d7467;border-radius:11px;background:#071f19}.midi-connect>div{display:flex;flex-direction:column;gap:4px}.midi-connect>div>strong{color:#d8f2e5}.midi-connect>div>span{color:#90ad9f;font-size:10px;line-height:1.35}.midi-connect-button{padding:10px 13px;border:1px solid #8eb7a4;border-radius:7px;background:#1a4a3b;color:#f2faf6;font-weight:900}.midi-connect label{display:flex;flex-direction:column;gap:5px;color:#9eb7ab;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.midi-connect select{min-width:0;padding:9px;border:1px solid #4f7769;border-radius:7px;background:#061c16;color:#f0f7f3}.midi-connect .record-midi{flex-direction:row;align-items:center;padding:9px 11px;border:1px solid #6d806f;border-radius:8px;background:#102b24;text-transform:none;letter-spacing:0}.record-midi input{width:18px;height:18px;accent-color:#f2bd45}.record-midi span{display:flex;flex-direction:column;gap:2px}.record-midi strong{color:#f5e5b0;font-size:11px}.record-midi small{color:#9eb7ab;font-size:9px;font-weight:600}.midi-connect button:disabled,.midi-connect select:disabled{opacity:.5}@media(max-width:720px){.mode-selector{grid-template-columns:1fr}.manual-entry-bar{align-items:stretch;flex-direction:column;margin:12px}.manual-entry-bar fieldset{display:grid;grid-template-columns:1fr 1fr 1fr}.manual-entry-bar button{padding:9px 5px}}@media(max-width:1050px){.midi-connect{grid-template-columns:1fr 1fr}.midi-connect>div{grid-column:1/-1}}@media(max-width:720px){.midi-connect{grid-template-columns:1fr;margin:10px 12px 0}.midi-connect>div{grid-column:auto}}.shared-audio-control{display:flex;align-items:center;gap:16px;margin:-8px 0 18px;padding:12px 15px;border:1px solid #5f806f;border-radius:11px;background:#0a2a22}.shared-audio-control>div{display:flex;flex:1;flex-direction:column;gap:3px}.shared-audio-control strong{color:#fff1c5}.shared-audio-control span{color:#9eb7ab;font-size:10px}.shared-audio-control button{padding:9px 14px;border:1px solid #e5c574;border-radius:7px;background:#d8b876;color:#14251e;font-weight:900}.shared-audio-control .piano-ready{color:#9ee5aa;font-size:12px;font-weight:900;letter-spacing:.04em}.erase-note{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #8b6262;border-radius:8px;background:#321d1d}.erase-note input{width:18px;height:18px;accent-color:#df6f6f}.erase-note span{display:flex!important;flex-direction:column!important;gap:2px!important}.erase-note strong{color:#ffd1d1!important;font-size:11px}.erase-note small{color:#c9a3a3;font-size:9px}.erase-note:has(input:checked){border-color:#ff9a9a;background:#5a2929}.erase-note:has(input:checked) strong{color:#fff!important}@media(max-width:900px){.manual-entry-bar{align-items:stretch;flex-wrap:wrap}.manual-entry-bar>div{flex:1 1 100%}.erase-note{margin-left:auto}}@media(max-width:720px){.shared-audio-control{align-items:stretch;flex-direction:column;margin-top:-8px}.shared-audio-control button{width:100%}.erase-note{margin-left:0}}.shared-audio-control{min-height:42px;margin-top:-10px;padding:6px 12px}.shared-audio-control>div{gap:1px}.shared-audio-control button{padding:6px 12px}.manual-entry-bar fieldset{flex:1;justify-content:center}.manual-entry-bar button{min-width:145px;min-height:56px;padding:14px 18px;font-size:16px;letter-spacing:.01em}.manual-entry-bar .manual-bass.selected,.manual-entry-bar .manual-lower.selected,.manual-entry-bar .manual-upper.selected{outline:4px solid currentColor;outline-offset:2px;box-shadow:0 0 0 3px #fff3,0 8px 22px #0005;transform:translateY(-1px)}.manual-cards .chord-card.active-level{outline:3px solid currentColor;outline-offset:2px;animation:manual-level-pulse .58s ease-out}.manual-cards .bass-card.active-level{box-shadow:0 0 0 2px #d68cff55,0 0 24px #d68cff70}.manual-cards .lower-card.active-level{box-shadow:0 0 0 2px #ecb45f55,0 0 24px #ecb45f70}.manual-cards .upper-card.active-level{box-shadow:0 0 0 2px #77c5ee55,0 0 24px #77c5ee70}@keyframes manual-level-pulse{0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.018);filter:brightness(1.35)}to{transform:scale(1);filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.manual-cards .chord-card.active-level{animation:none}.manual-entry-bar .selected{transform:none}}@media(max-width:1050px){.manual-entry-bar{display:grid;grid-template-columns:1fr auto}.manual-entry-bar>div,.manual-entry-bar fieldset{grid-column:1/-1}.manual-entry-bar fieldset{display:grid;grid-template-columns:repeat(3,1fr)}.manual-entry-bar button{min-width:0}.erase-note{grid-column:2}}@media(max-width:720px){.manual-entry-bar fieldset{grid-template-columns:1fr}.manual-entry-bar button{min-height:52px;font-size:15px}.erase-note{grid-column:1/-1}}.manual-cards .chord-card{cursor:pointer}.edit-history{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 22px 0}.edit-history button{min-width:110px;padding:9px 14px;border:1px solid #ff8a8a;border-radius:8px;background:#b92525;color:#fff;font-weight:900}.edit-history button:not(:disabled):hover{border-color:#ffd0d0;background:#d12d2d}.edit-history button:disabled{background:#6f3030;border-color:#805050;color:#d9c3c3;opacity:.72}.edit-history span{margin-left:4px;color:#8ea99c;font-size:10px;font-weight:700}.shared-audio-control .piano-auto{color:#f2d27c;font-size:10px;font-weight:900;letter-spacing:.12em}@media(max-width:720px){.edit-history{justify-content:stretch;padding-left:12px;padding-right:12px}.edit-history button{flex:1;min-width:0}.edit-history span{display:none}}.keyboard-scroll{overflow:hidden}.keyboard{width:100%;min-width:0;height:234px;touch-action:pan-y}.wide-range .keyboard{height:205px}.range-overview{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:0 3px 7px;color:#9eb7ab;font:700 9px Arial,sans-serif}.range-overview>div{position:relative;height:7px;border:1px solid #527265;border-radius:999px;background:#0d3027}.range-overview i{position:absolute;top:0;width:4px;height:5px;border-radius:2px;transform:translate(-2px)}.range-overview .overview-bass{background:#d68cff}.range-overview .overview-lower{background:#ecb45f}.range-overview .overview-upper{background:#77c5ee}