.harmony-app{--ink:#121921;--ink-2:#283341;--ink-3:#344253;--surface:#fff9ed;--surface-2:#fff;--surface-3:#f7eddb;--gold:#b1913a;--gold-bright:#e3c062;--gold-pale:#f2df9d;--gold-deep:#806720;--blue:#6d89ad;--blue-bright:#a8c0dc;--mint:#67d2ad;--coral:#ff8e77;--text:#f9f4e8;--muted:#b8c3d1;--dark-text:#18202a;--border:#ffffff1f;--shadow:0 20px 56px #161d2624;--radius-lg:20px;--radius-md:18px;--radius-sm:12px}.harmony-app,.harmony-app *{box-sizing:border-box}.harmony-app{scroll-behavior:smooth;background:var(--surface);background:radial-gradient(circle at 82% 3%, #e3c06229, transparent 28rem), var(--surface);color:var(--dark-text);text-rendering:optimizelegibility;margin:0;font-family:Montserrat,Avenir Next,Avenir,Segoe UI,Arial,sans-serif;line-height:1.5}.harmony-app button,.harmony-app input,.harmony-app select{font:inherit}.harmony-app button,.harmony-app select,.harmony-app input,.harmony-app a{-webkit-tap-highlight-color:transparent}.harmony-app :where(button){color:inherit}.harmony-app button:not(:disabled),.harmony-app select:not(:disabled),.harmony-app input:not(:disabled){cursor:pointer}.harmony-app button:focus-visible,.harmony-app select:focus-visible,.harmony-app input:focus-visible,.harmony-app a:focus-visible,.harmony-app [tabindex="0"]:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}.harmony-app button:disabled,.harmony-app input:disabled{cursor:not-allowed;opacity:.55}.harmony-app{width:min(1380px,100%);min-height:100vh;margin:0 auto;padding:22px clamp(14px,3vw,46px) 44px}.harmony-hero{isolation:isolate;border-radius:var(--radius-lg);background:radial-gradient(circle at 82% 20%, #e3c0621a, transparent 25rem), var(--ink);min-height:144px;box-shadow:var(--shadow);border:1px solid #ffffff24;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3vw,42px);padding:clamp(20px,2.4vw,30px);display:grid;position:relative;overflow:hidden}.harmony-hero:after{z-index:-1;content:"";border:1px solid #e8bd552e;border-radius:50%;width:520px;height:520px;position:absolute;bottom:-430px;right:-180px;box-shadow:0 0 0 54px #e8bd5509,0 0 0 108px #76a9df06}.harmony-hero-glow{z-index:-1;filter:blur(70px);background:#76a9df21;border-radius:50%;width:430px;height:430px;position:absolute;top:-220px;right:16%}.harmony-hero-copy{max-width:760px}.harmony-eyebrow,.section-kicker{color:var(--gold-bright);letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px;font-size:.75rem;font-weight:800}.harmony-hero h1{color:#fffaf0;letter-spacing:-.065em;max-width:880px;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,3.65vw,3.75rem);font-weight:500;line-height:.94}.harmony-hero-description{color:#d9e0e9;max-width:750px;margin:13px 0 0;font-size:clamp(.9rem,1.25vw,1.05rem)}.trainer-brand{color:var(--gold-bright);align-items:center;gap:11px;text-decoration:none;display:inline-flex}.trainer-brand img{object-fit:contain;width:54px;height:54px}.trainer-brand>span{flex-direction:column;line-height:1;display:flex}.trainer-brand strong{letter-spacing:.03em;font-family:Georgia,Times New Roman,serif;font-size:1.35rem}.trainer-brand small{color:#fff;letter-spacing:.27em;margin-top:5px;font-size:.45rem;font-weight:850}.home-link{min-height:44px;color:var(--gold-pale);white-space:nowrap;border:1px solid #e3c0627a;border-radius:999px;align-items:center;gap:8px;padding:0 18px;font-size:.72rem;font-weight:850;text-decoration:none;display:inline-flex}.home-link:hover{border-color:var(--gold-bright);background:#e3c0621a}.harmony-hero-badges{flex-wrap:wrap;gap:8px;margin-top:28px;display:flex}.harmony-hero-badges span{color:#f7f1e3;background:#ffffff0d;border:1px solid #ffffff24;border-radius:999px;padding:8px 12px;font-size:.78rem;font-weight:700}.harmony-hero-mark{aspect-ratio:1;width:clamp(130px,16vw,220px);color:var(--gold-bright);background:#e8bd550f;border:1px solid #e8bd557a;border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 0 55px #e8bd5514}.harmony-hero-mark span{grid-area:1/1;font-family:Georgia,serif;font-size:clamp(4rem,8vw,7rem);line-height:1}.harmony-hero-mark small{background:var(--ink-2);letter-spacing:.22em;grid-area:1/1;align-self:end;margin-bottom:20%;padding:3px 8px;font-size:.6rem;font-weight:900}.section-nav{z-index:20;border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#111822e0;border-radius:999px;flex-wrap:wrap;gap:7px;width:fit-content;max-width:100%;margin:14px auto 30px;padding:7px;display:flex;position:sticky;top:10px;box-shadow:0 12px 30px #03080e47}.section-nav a{color:#dbe3ec;white-space:nowrap;border-radius:999px;padding:9px 14px;font-size:.78rem;font-weight:800;text-decoration:none}.section-nav a:hover{color:#fff;background:#ffffff14}.control-deck,.panel,.metronome-panel{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);background:linear-gradient(160deg,#222f40f5,#182231f5)}.control-deck{margin-bottom:26px;padding:clamp(22px,3vw,34px)}.control-heading,.harmony-section-heading{justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:24px;display:flex}.control-heading h2,.harmony-section-heading h2,.ear-category h3,.ear-challenge-card h3{color:#fffaf0;letter-spacing:-.025em;margin:0;font-family:Georgia,Times New Roman,serif;font-weight:500}.control-heading h2,.harmony-section-heading h2{font-size:clamp(1.65rem,3vw,2.6rem);line-height:1.05}.audio-status{border:1px solid var(--border);color:#dfe7ef;border-radius:999px;flex:none;align-items:center;gap:9px;padding:9px 12px;font-size:.76rem;font-weight:700;display:flex}.audio-status>span{background:#78889a;border-radius:50%;width:8px;height:8px}.audio-status.ready>span{background:var(--mint);box-shadow:0 0 0 4px #67d2ad21}.audio-status.loading>span{background:var(--gold);animation:1s infinite alternate pulse}.audio-status.error>span{background:var(--coral)}@keyframes pulse{to{opacity:.35}}.global-controls-grid{grid-template-columns:minmax(0,1fr) minmax(250px,330px);align-items:end;gap:22px;display:grid}.control-intro,.instrument-heading-copy{max-width:680px;color:var(--muted);margin:7px 0 0;font-size:.78rem}.instrument-selector-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;display:grid}.instrument-selector-grid button{text-align:left;background:#ffffff0b;border:1px solid #ffffff1f;border-radius:14px;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:2px 9px;min-width:0;min-height:74px;padding:10px;display:grid}.instrument-selector-grid button>span{background:var(--ink-3);width:38px;height:38px;color:var(--gold-pale);letter-spacing:.05em;border-radius:50%;grid-row:1/span 2;place-items:center;font-size:.68rem;font-weight:950;display:grid}.instrument-selector-grid button strong{color:#fff9ed;text-overflow:ellipsis;white-space:nowrap;font-size:.77rem;overflow:hidden}.instrument-selector-grid button small{color:#9fabb9;text-overflow:ellipsis;white-space:nowrap;font-size:.58rem;overflow:hidden}.instrument-selector-grid button:hover,.instrument-selector-grid button.active{border-color:var(--gold-bright);background:#e3c0621f}.instrument-selector-grid button.active>span{background:var(--gold-bright);color:var(--ink);box-shadow:0 0 0 5px #e3c06217}.root-control-row{grid-template-columns:1fr}.harmony-app fieldset{border:0;min-width:0;margin:0;padding:0}.harmony-app legend,.select-field>span,.tempo-field>span,.metronome-tempo label>span{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-size:.72rem;font-weight:850;display:block}.root-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;display:grid}.root-grid button{color:#f5f0e7;background:#ffffff0e;border:1px solid #ffffff1a;border-radius:11px;min-height:46px;padding:9px 6px;font-size:.82rem;font-weight:800}.root-grid button:hover,.root-grid button.active{border-color:var(--gold);background:var(--gold);color:#171b21}.select-field,.tempo-field{min-width:0;display:block}.select-field select,.tempo-field input,.metronome-tempo input{color:#fff9eb;background:#101721;border:1px solid #ffffff24;border-radius:12px;width:100%;min-height:48px;font-weight:750}.select-field select{padding:0 38px 0 13px}.tempo-field input,.metronome-tempo input{padding:0 54px 0 13px}.workspace-grid{grid-template-columns:minmax(0,1fr) minmax(340px,395px);align-items:start;gap:26px;display:grid}.workspace-main{gap:26px;min-width:0;display:grid}.panel{min-width:0;padding:clamp(22px,3vw,36px);scroll-margin-top:90px}.selected-summary{text-align:right;background:#e8bd5513;border:1px solid #e8bd5542;border-radius:13px;gap:3px;min-width:min(100%,225px);max-width:360px;padding:11px 14px;display:grid}.selected-summary strong{color:var(--gold-bright);font-size:.9rem}.selected-summary span{color:#d7dfe8;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;overflow:hidden}.category-tabs{flex-wrap:wrap;gap:7px;margin-bottom:18px;display:flex}.category-tabs button,.segmented-control button{color:#dce4ed;background:#ffffff0b;border:1px solid #ffffff1a;font-weight:780}.category-tabs button{border-radius:11px;align-items:center;gap:8px;padding:10px 13px;font-size:.8rem;display:flex}.category-tabs button span{background:#ffffff17;border-radius:999px;place-items:center;min-width:21px;height:21px;padding:0 5px;font-size:.65rem;display:grid}.category-tabs button:hover,.category-tabs button.active,.segmented-control button:hover,.segmented-control button.active{border-color:var(--gold);color:var(--gold-bright);background:#e8bd5524}.accuracy-note{border-left:4px solid var(--mint);color:#dce9e5;background:#67d2ad14;border-radius:8px 12px 12px 8px;margin:0 0 18px;padding:13px 15px;font-size:.82rem}.type-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px;display:grid}.type-card{background:#090e1552;border:1px solid #ffffff17;border-radius:14px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:9px;transition:border-color .16s,transform .16s;display:grid}.type-card:hover{border-color:#76a9df7a;transform:translateY(-1px)}.type-card.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px #e8bd5529}.type-select,.progression-name{text-align:left;background:0 0;border:0;gap:3px;min-width:0;padding:7px 8px;display:grid}.type-select strong,.progression-name strong{color:#fff9ed;font-size:.9rem}.type-select>span,.progression-name small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.playback-actions{flex-wrap:wrap;gap:8px;display:flex}.playback-actions.compact{flex-wrap:nowrap;gap:4px}.icon-action{color:#eef4fa;background:#ffffff0e;border:1px solid #ffffff1c;border-radius:10px;justify-content:center;align-items:center;gap:6px;min-height:38px;padding:7px 10px;font-size:.72rem;font-weight:800;display:inline-flex}.compact .icon-action{width:38px;padding:0}.compact .icon-action span:last-child{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.icon-action:hover{border-color:var(--blue);color:var(--blue-bright);background:#76a9df24}.instrument-heading{align-items:center}.segmented-control{border:1px solid var(--border);background:#111924;border-radius:13px;grid-auto-flow:column;padding:4px;display:inline-grid}.segmented-control.full{grid-template-columns:1fr 1fr;margin-bottom:20px;display:grid}.segmented-control button{border-radius:9px;min-height:38px;padding:7px 12px;font-size:.75rem}.fretboard-scroll,.piano-scroll{scrollbar-color:var(--gold-deep) #ffffff0d;width:100%;padding:2px 2px 12px;overflow-x:auto}.fretboard-grid{background:linear-gradient(90deg,#ffffff09 1px,#0000 1px),linear-gradient(#6f4b2d,#402a1b);border:1px solid #ffffff2e;border-radius:16px;grid-template-columns:56px repeat(18,minmax(42px,1fr));min-width:890px;display:grid;overflow:hidden}.fret-row-contents{display:contents}.fret-corner,.fret-number,.string-label{color:#cfd8e3;background:#111924;place-items:center;min-height:34px;font-size:.66rem;font-weight:800;display:grid}.fret-number{border-left:1px solid #ffffff14}.string-label{z-index:3;min-height:48px;color:var(--gold-bright);border-top:1px solid #ffffff14;position:sticky;left:0}.fret{background:0 0;border:0;border-top:1px solid #ffffff1f;border-left:2px solid #d6d1be73;place-items:center;min-height:48px;padding:0;display:grid;position:relative}.fret:after{content:"";background:#f2eedc9e;height:1px;position:absolute;top:50%;left:0;right:0;box-shadow:0 1px #00000073}.fret>span{z-index:2;color:#fff;background:#41556d;border:2px solid #ffffff61;border-radius:50%;place-items:center;width:29px;height:29px;font-size:.66rem;font-weight:900;display:grid;position:relative;box-shadow:0 3px 8px #00000059}.fret[data-role=root]>span,.piano-key[data-role=root].active{background:var(--gold);color:#161a20;border-color:#ffe9aa}.fret[data-role=third]>span,.piano-key[data-role=third].active{background:#6a9dd2}.fret[data-role=fifth]>span,.piano-key[data-role=fifth].active{background:#65b897}.fret:hover{background:#ffffff14}.piano-keyboard{background:#111924;border:8px solid #111924;border-radius:15px;grid-template-columns:repeat(25,minmax(31px,1fr));align-items:start;min-width:820px;height:230px;display:grid;overflow:hidden}.piano-key{color:#1b2027;background:#fffaf0;border:1px solid #29313a;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;height:100%;padding:0 2px 15px;font-size:.68rem;font-weight:900;display:flex;position:relative}.piano-key.black{z-index:2;color:#fff;background:linear-gradient(#121820,#27313e);height:63%;margin-inline:-6px;box-shadow:0 6px 8px #0000006b}.piano-key.active{box-shadow:inset 0 -16px #76a9df9e}.piano-key.black.active{box-shadow:inset 0 -18px #76a9dfb8,0 6px 8px #0000006b}.tone-legend{color:#d8e0e8;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px;font-size:.72rem;display:flex}.tone-legend span{align-items:center;gap:7px;display:inline-flex}.tone-legend i{background:#41556d;border-radius:50%;width:10px;height:10px}.tone-legend i.root{background:var(--gold)}.tone-legend i.third{background:#6a9dd2}.tone-legend i.fifth{background:#65b897}.tone-legend small{color:var(--muted);text-align:right;flex:250px}.primary-button,.secondary-button,.danger-button,.text-button{border-radius:12px;min-height:44px;padding:10px 16px;font-size:.79rem;font-weight:850}.primary-button{border:1px solid var(--gold);background:var(--gold);color:#161b22;box-shadow:0 8px 20px #e8bd5524}.primary-button:hover{background:var(--gold-bright)}.secondary-button{color:var(--blue-bright);background:#76a9df1a;border:1px solid #76a9df80}.danger-button{color:#ffb3a3;background:#ff8e7729;border:1px solid #ff8e77b3}.text-button{color:#dce4ed;text-underline-offset:4px;background:0 0;border:0;text-decoration:underline}.generator-controls{grid-template-columns:repeat(4,minmax(115px,1fr)) minmax(125px,.8fr);gap:10px;margin-bottom:20px;display:grid}.compact-field select{min-height:44px}.tempo-field>div,.metronome-tempo label>div{position:relative}.tempo-field>div>span,.metronome-tempo label>div>span{color:#92a0af;font-size:.65rem;font-weight:850;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.progression-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;display:grid}.progression-card{background:#090e1559;border:1px solid #ffffff1a;border-radius:14px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:10px;display:grid}.progression-card.playing{border-color:var(--mint);background:#67d2ad1a;box-shadow:0 0 24px #67d2ad1f}.progression-name{grid-template-columns:auto minmax(0,1fr);align-items:center}.progression-name>span{width:28px;height:28px;color:var(--gold-bright);background:#e8bd551f;border-radius:9px;grid-row:1/span 2;place-items:center;margin-right:6px;font-size:.7rem;font-weight:900;display:grid}.transport-row{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;padding-top:18px;display:flex}.check-control{color:#e6edf5;align-items:center;gap:8px;font-size:.78rem;font-weight:800;display:inline-flex}.check-control input{width:18px;height:18px;accent-color:var(--gold)}.transport-row p{color:var(--muted);text-align:right;flex:280px;margin:0;font-size:.74rem}.custom-interval-grid{grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:8px;display:grid}.custom-interval-grid button{text-align:left;background:#090e1557;border:1px solid #ffffff1a;border-radius:12px;gap:2px;min-height:76px;padding:10px;display:grid}.custom-interval-grid button.active{border-color:var(--gold);background:#e8bd551f}.custom-interval-grid strong{color:#fff9ed;font-size:.92rem}.custom-interval-grid span,.custom-interval-grid small{color:var(--muted);font-size:.67rem}.custom-interval-grid small{color:var(--mint)}.builder-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;display:flex}.metronome-panel{padding:22px;scroll-margin-top:90px}.metronome-sticky{position:sticky;top:90px}.compact-heading{align-items:center;margin-bottom:18px}.transport-light{background:#596575;border-radius:50%;width:15px;height:15px;box-shadow:0 0 0 7px #ffffff09}.transport-light.on{background:var(--mint);box-shadow:0 0 0 7px #67d2ad1a,0 0 18px #67d2ad59}.metronome-tempo{grid-template-columns:minmax(0,1fr) 92px;align-items:end;gap:10px;margin-bottom:14px;display:grid}.metronome-tempo input{min-height:64px;font-size:1.5rem;font-weight:900}.tap-button{border:1px solid var(--gold);min-height:64px;color:var(--gold-bright);letter-spacing:.08em;background:#e8bd551f;border-radius:13px;place-items:center;padding:8px;font-size:1rem;font-weight:950;display:grid}.tap-button small{color:#c9d2dc;letter-spacing:0;font-size:.55rem}.meter-controls{grid-template-columns:.8fr 1.2fr;gap:10px;margin-bottom:20px;display:grid}.metronome-pattern-heading{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px;display:flex}.metronome-pattern-heading>div{gap:2px;display:grid}.metronome-pattern-heading strong{color:#fff9ed;font-size:.85rem}.metronome-pattern-heading span{color:var(--muted);font-size:.66rem}.metronome-pattern-heading>span{background:#ffffff0f;border-radius:999px;flex:none;padding:5px 8px}.metronome-pattern{grid-template-columns:repeat(auto-fit,minmax(65px,1fr));gap:6px;display:grid}.metronome-pattern button{background:#090e155c;border:1px solid #ffffff1a;border-radius:11px;place-items:center;gap:3px;min-width:0;min-height:70px;padding:7px 4px;display:grid}.metronome-pattern button.downbeat{border-color:#e8bd557a}.metronome-pattern button i{background:#657184;border-radius:50%;width:13px;height:13px;box-shadow:0 0 0 4px #ffffff09}.metronome-pattern button.downbeat i{background:var(--gold)}.metronome-pattern button.flashing i{background:var(--blue-bright);box-shadow:0 0 0 7px #76a9df29,0 0 20px #76a9df99}.metronome-pattern button.downbeat.flashing i{background:var(--gold-bright);box-shadow:0 0 0 7px #e8bd5533,0 0 22px #e8bd55b3}.metronome-pattern button strong{color:#f6f0e6;font-size:.75rem}.metronome-pattern button span{max-width:100%;color:var(--blue-bright);text-overflow:ellipsis;white-space:nowrap;font-size:.58rem;font-weight:800;overflow:hidden}.metronome-pattern button.muted{opacity:.5}.metronome-pattern button.muted span{color:#adb6c1}.metronome-start{border:1px solid var(--gold);background:var(--gold);color:#141920;border-radius:13px;width:100%;min-height:52px;margin-top:14px;font-weight:900}.metronome-start.running{border-color:var(--coral);color:#ffb9aa;background:#ff8e7729}.ear-panel{margin-top:26px;scroll-margin-top:90px}.ear-heading>div:first-child>p:last-child{max-width:650px;color:var(--muted);margin:10px 0 0;font-size:.82rem}.ear-score{background:#e8bd5512;border:1px solid #e8bd5540;border-radius:15px;grid-template-columns:auto auto;align-items:center;gap:0 16px;min-width:150px;padding:12px 14px;display:grid}.ear-score>span{color:var(--muted);text-transform:uppercase;font-size:.66rem;font-weight:800}.ear-score>strong{color:var(--gold-bright);grid-area:1/2/span 2;font-size:1.7rem}.ear-score>strong small{font-size:.78rem}.ear-score button{color:#dce4ed;background:0 0;border:0;width:fit-content;padding:0;font-size:.65rem;text-decoration:underline}.ear-challenge-card{background:radial-gradient(circle at 88% 20%,#76a9df21,#0000 18rem),#090e155c;border:1px solid #76a9df47;border-radius:20px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:clamp(20px,3vw,30px);display:grid}.ear-challenge-card h3{font-size:clamp(1.4rem,2.5vw,2.1rem)}.ear-challenge-card p:not(.section-kicker){color:var(--muted);margin:7px 0 0;font-size:.78rem}.ear-primary-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.answer-grid{border-top:1px solid var(--border);grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding-top:20px;display:grid}.answer-grid button{text-align:left;background:#ffffff0b;border:1px solid #ffffff1f;border-radius:12px;gap:3px;min-height:68px;padding:10px 12px;display:grid}.answer-grid button:hover:not(:disabled){border-color:var(--blue)}.answer-grid button.correct{border-color:var(--mint);background:#67d2ad1f}.answer-grid strong{color:#fff9ed;font-size:.82rem}.answer-grid span{color:var(--muted);font-size:.65rem}.ear-selection-toolbar{justify-content:space-between;align-items:center;gap:18px;margin:28px 0 14px;display:flex}.ear-selection-toolbar>div:first-child{display:grid}.ear-selection-toolbar strong{color:#fff9ed}.ear-selection-toolbar span{color:var(--muted);font-size:.73rem}.ear-selection-toolbar>div:last-child{gap:7px;display:flex}.ear-selection-toolbar button,.ear-category-heading button{color:#e6edf4;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:10px;min-height:38px;padding:8px 12px;font-size:.7rem;font-weight:800}.ear-category-stack{gap:14px;display:grid}.ear-category{background:#090e1547;border:1px solid #ffffff17;border-radius:18px;padding:clamp(16px,2.4vw,24px)}.ear-category-heading{justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px;display:flex}.ear-category-heading>div{align-items:baseline;gap:10px;display:flex}.ear-category-heading h3{font-size:1.15rem}.ear-category-heading span{color:var(--muted);font-size:.66rem}.ear-option-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px;display:grid}.ear-option-grid button{text-align:left;background:#ffffff09;border:1px solid #ffffff17;border-radius:11px;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px;min-height:56px;padding:8px 10px;display:grid}.ear-option-grid button.active{background:#67d2ad14;border-color:#67d2ad7a}.ear-option-grid i{color:#132019;border:1px solid #627184;border-radius:6px;place-items:center;width:21px;height:21px;font-size:.72rem;font-style:normal;font-weight:900;display:grid}.ear-option-grid button.active i{border-color:var(--mint);background:var(--mint)}.ear-option-grid button>span{min-width:0;display:grid}.ear-option-grid strong{color:#f7f2e8;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;overflow:hidden}.ear-option-grid small{color:#9eabb9;text-overflow:ellipsis;white-space:nowrap;font-size:.61rem;overflow:hidden}.site-footer{color:#aeb9c5;grid-template-columns:auto minmax(240px,1fr) auto;align-items:center;gap:30px;margin-top:26px;padding:28px 6px 4px;font-size:.72rem;display:grid}.site-footer>div{display:grid}.site-footer strong{color:#f4eee2}.site-footer p{text-align:center;max-width:720px;margin:0 auto}.site-footer a{color:var(--gold-bright);font-weight:800;text-decoration:none}.visually-hidden{clip:rect(0 0 0 0)!important;white-space:nowrap!important;width:1px!important;height:1px!important;position:absolute!important;overflow:hidden!important}.related-shelf{border-top:1px solid var(--border);margin-top:30px;padding-top:26px}.related-heading,.related-group-heading{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.related-kicker,.replacement-kicker,.drum-eyebrow{color:var(--gold-bright);letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;font-size:.68rem;font-weight:900}.related-title,.replacement-title,.drum-heading h2{color:#fff9ed;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.3rem,2.4vw,2rem);font-weight:500}.related-intro,.replacement-intro,.related-group-description,.related-empty{color:var(--muted);margin:6px 0 0;font-size:.73rem}.related-selection-formula,.related-group-count{color:var(--gold-pale);background:#e3c0621c;border-radius:999px;flex:none;padding:6px 9px;font-size:.65rem;font-weight:800}.related-groups{gap:20px;margin-top:20px;display:grid}.related-group-title{color:#fff9ed;margin:0;font-size:.92rem}.related-card-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px;margin-top:10px;display:grid}.related-card{background:#090e154d;border:1px solid #ffffff1a;border-radius:14px;padding:10px;display:grid}.related-card-select{text-align:left;background:0 0;border:0;gap:2px;padding:5px;display:grid}.related-card-kind{color:var(--gold-bright);text-transform:uppercase;font-size:.58rem;font-weight:900}.related-card-title{color:#fff9ed;font-size:.82rem}.related-card-formula,.related-tone-summary{color:var(--muted);font-size:.62rem}.related-tone-summary{border-top:1px solid #ffffff14;gap:2px;margin:7px 5px;padding-top:7px;display:grid}.related-tone-summary strong{color:#dce5ee}.related-card-actions{grid-template-columns:1fr 1fr;gap:5px;display:grid}.related-card-actions button{color:#eaf0f5;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:9px;min-height:36px;font-size:.62rem;font-weight:800}.substitution-lab{background:#e3c0620e;border:1px solid #e3c06233;border-radius:16px;margin:0 0 20px;padding:16px}.substitution-heading{justify-content:space-between;align-items:center;gap:18px;margin-bottom:11px;display:flex}.substitution-heading>div,.substitution-heading label,.substitution-toggle-grid button>span{display:grid}.substitution-heading strong,.custom-sequence-heading strong{color:#fff9ed;font-size:.82rem}.substitution-heading span,.custom-sequence-heading span{color:var(--muted);font-size:.65rem}.substitution-heading label{min-width:160px}.substitution-heading input{width:100%;accent-color:var(--gold-bright)}.substitution-toggle-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.substitution-toggle-grid button{text-align:left;background:#090e154d;border:1px solid #ffffff1a;border-radius:11px;grid-template-columns:23px minmax(0,1fr);align-items:center;gap:8px;min-height:62px;padding:8px;display:grid}.substitution-toggle-grid button i{border:1px solid #607083;border-radius:6px;place-items:center;width:22px;height:22px;font-size:.68rem;font-style:normal;font-weight:950;display:grid}.substitution-toggle-grid button strong{color:#f8f1e5;font-size:.68rem}.substitution-toggle-grid button small{color:#9fabb8;font-size:.55rem;line-height:1.3}.substitution-toggle-grid button.active{border-color:var(--gold-bright);background:#e3c0621f}.substitution-toggle-grid button.active i{border-color:var(--gold-bright);background:var(--gold-bright);color:var(--ink)}.progression-card-actions{justify-items:end;gap:5px;display:grid}.progression-name em{width:fit-content;color:var(--gold-pale);background:#e3c06221;border-radius:999px;grid-column:2;padding:3px 6px;font-size:.55rem;font-style:normal;font-weight:850}.replace-chord-button{min-height:30px;color:var(--gold-pale);background:0 0;border:1px solid #e3c06259;border-radius:8px;padding:4px 8px;font-size:.58rem;font-weight:850}.replacement-menu{background:#10171f;border:1px solid #e3c06261;border-radius:18px;margin-top:18px;padding:clamp(16px,2.4vw,24px)}.replacement-heading,.replacement-context,.replacement-section-summary,.replacement-candidate{justify-content:space-between;align-items:center;gap:14px;display:flex}.replacement-close{background:#ffffff0d;border:1px solid #ffffff24;border-radius:50%;flex:0 0 40px;place-items:center;width:40px;height:40px;font-size:1.4rem;display:grid}.replacement-context{color:var(--muted);background:#ffffff0b;border-radius:12px;justify-content:flex-start;margin:16px 0;padding:11px;font-size:.66rem}.replacement-current-chord{display:grid}.replacement-current-chord strong{color:var(--gold-pale)}.replacement-section{border-top:1px solid #ffffff1a}.replacement-section-summary{cursor:pointer;min-height:62px;list-style:none}.replacement-section-summary::-webkit-details-marker{display:none}.replacement-section-copy,.replacement-candidate-identity,.replacement-candidate-meta{display:grid}.replacement-section-title,.replacement-candidate-symbol{color:#fff9ed;font-size:.78rem}.replacement-section-description,.replacement-candidate-explanation,.replacement-candidate-meta,.replacement-search-status,.replacement-result-limit,.replacement-empty{color:var(--muted);font-size:.6rem}.replacement-section-count,.replacement-candidate-action{color:var(--gold-pale);background:#e3c0621c;border-radius:999px;padding:4px 7px;font-size:.6rem;font-weight:850}.replacement-section-content{padding:0 0 15px}.replacement-candidate-list{gap:5px;display:grid}.replacement-candidate{text-align:left;background:#ffffff09;border:1px solid #ffffff17;border-radius:10px;width:100%;min-height:56px;padding:9px 10px}.replacement-candidate:hover{border-color:var(--gold-bright)}.replacement-candidate-explanation{flex:auto}.replacement-search-field{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;margin-bottom:9px;display:grid}.replacement-search-label{color:#e9eef3;font-size:.65rem;font-weight:800}.replacement-search-input{background:var(--ink);color:#fff;border:1px solid #ffffff21;border-radius:10px;min-height:42px;padding:0 12px}.chord-identity{border-left:4px solid var(--gold-bright);background:#e3c06214;border-radius:0 12px 12px 0;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:14px;padding:12px 14px;display:grid}.chord-identity span,.chord-identity small{color:var(--muted);font-size:.65rem}.chord-identity strong{color:var(--gold-pale)}.custom-sequence{border-top:1px solid var(--border);margin-top:22px;padding-top:18px}.custom-sequence-heading{justify-content:space-between;align-items:center;gap:14px;display:flex}.custom-sequence-heading>div{gap:8px;display:flex}.custom-sequence-heading>div:first-child{display:grid}.custom-sequence-empty{color:var(--muted);margin:12px 0 0;font-size:.72rem}.custom-sequence-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px;margin-top:12px;display:grid}.custom-sequence-grid article{background:#090e154d;border:1px solid #ffffff17;border-radius:11px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;padding:7px;display:grid}.custom-sequence-grid article>span{width:25px;height:25px;color:var(--gold-pale);background:#e3c0621f;border-radius:8px;place-items:center;font-size:.62rem;font-weight:900;display:grid}.custom-sequence-grid article>button:not(.custom-remove){text-align:left;background:0 0;border:0;min-width:0;padding:3px;display:grid}.custom-sequence-grid strong{color:#fff9ed;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.custom-sequence-grid small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.56rem;overflow:hidden}.custom-remove{color:#ffb4a5;background:#ff8e771a;border:0;border-radius:50%;width:28px;height:28px}.metronome-sound-legend{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:9px;display:grid}.metronome-sound-legend span{color:var(--muted);align-items:center;gap:5px;font-size:.58rem;font-weight:800;display:flex}.metronome-sound-legend i{background:var(--gold-bright);border-radius:2px;width:8px;height:8px}.metronome-beat-pattern{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.metronome-beat-group{background:#090e1559;border:1px solid #ffffff1a;border-radius:12px;min-width:0;padding:8px}.metronome-beat-group.downbeat-group{border-color:#e3c0626b}.metronome-beat-number{color:var(--gold-pale);margin-bottom:5px;font-size:.62rem;display:block}.metronome-beat-steps{gap:4px;display:grid}.metronome-step-column{justify-items:center;gap:4px;min-width:0;display:grid}.metronome-step-light{background:#566474;border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 3px #ffffff08}.metronome-step-column.downbeat .metronome-step-light{background:#806f43;width:13px;height:13px}.metronome-step-light.flashing{background:var(--gold-pale);box-shadow:0 0 0 6px #f2df9d21,0 0 18px #f2df9db3}.metronome-step-column.downbeat .metronome-step-light.flashing{background:var(--gold-bright);box-shadow:0 0 0 7px #e3c0622e,0 0 22px #e3c062bf}.metronome-count-label{color:#d9e1e9;min-height:16px;font-size:.58rem;font-weight:850}.metronome-sound-stack{gap:3px;width:100%;display:grid}.metronome-sound-block{background:var(--ink-3);border:1px solid #ffffff14;border-radius:5px;width:100%;min-width:0;min-height:28px;padding:0}.metronome-sound-block:hover{border-color:var(--gold-bright)}.metronome-sound-block[aria-pressed=true]{border-color:var(--gold-bright);background:var(--gold-bright);box-shadow:0 4px 12px #b1913a3d}.ear-playback-choice{background:#e3c0620e;border:1px solid #e3c06233;border-radius:14px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;padding:12px 14px;display:flex}.ear-playback-choice>div:first-child{display:grid}.ear-playback-choice strong{color:#fff9ed;font-size:.78rem}.ear-playback-choice span{color:var(--muted);font-size:.64rem}.drum-trainer{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);background:radial-gradient(circle at 88% 5%,#e3c0621c,#0000 25rem),linear-gradient(160deg,#283341fa,#121921fa);margin-top:26px;padding:clamp(22px,3vw,36px);scroll-margin-top:90px}.drum-heading,.drum-controls,.drum-transport,.drum-control-actions,.drum-legend{align-items:center;gap:12px;display:flex}.drum-heading{justify-content:space-between;margin-bottom:20px}.drum-heading-copy p{max-width:660px;color:var(--muted);margin:7px 0 0;font-size:.76rem}.drum-transport{flex-direction:column;align-items:flex-end}.drum-play-button,.drum-secondary-button,.drum-tertiary-button{border-radius:999px;min-height:44px;padding:8px 14px;font-size:.7rem;font-weight:850}.drum-play-button{border:1px solid var(--gold-bright);background:var(--gold-bright);color:var(--ink)}.drum-play-button.drum-is-running{border-color:var(--coral);color:#ffc1b5;background:#ff8e7724}.drum-status{color:var(--muted);font-size:.61rem}.drum-controls{grid-template-columns:1.2fr .65fr 1fr auto;align-items:end;margin-bottom:15px;display:grid}.drum-field{color:var(--muted);text-transform:uppercase;gap:6px;font-size:.64rem;font-weight:850;display:grid}.drum-field select,.drum-field input[type=number]{background:var(--ink);color:#fff;border:1px solid #ffffff21;border-radius:10px;width:100%;min-height:44px;padding:0 12px}.drum-input-with-unit{display:block;position:relative}.drum-input-with-unit>span{color:var(--muted);font-size:.58rem;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.drum-swing-field input{accent-color:var(--gold-bright)}.drum-secondary-button{border:1px solid var(--gold-bright);color:var(--gold-pale);background:#e3c0621a}.drum-tertiary-button{color:#e3eaf1;background:#ffffff0a;border:1px solid #ffffff21}.drum-legend{color:var(--muted);flex-wrap:wrap;margin-bottom:10px;font-size:.62rem}.drum-legend span{align-items:center;gap:5px;display:inline-flex}.drum-legend-dot{background:var(--ink-3);border-radius:3px;width:10px;height:10px}.drum-legend-dot.drum-is-ghost{background:#9d8752}.drum-legend-dot.drum-is-accent{background:var(--gold-bright)}.drum-legend small{margin-left:auto}.drum-sequencer-scroll{padding-bottom:8px;overflow-x:auto}.drum-sequencer{min-width:1040px}.drum-ruler,.drum-row{grid-template-columns:190px minmax(800px,1fr);align-items:center;gap:8px;display:grid}.drum-ruler{margin-bottom:5px}.drum-ruler-label{color:var(--muted);text-transform:uppercase;font-size:.6rem;font-weight:850}.drum-step-grid{grid-template-columns:repeat(16,minmax(42px,1fr));gap:4px;display:grid}.drum-step-light{color:var(--muted);justify-items:center;gap:2px;font-size:.55rem;display:grid}.drum-step-light i{background:#556373;border-radius:50%;width:8px;height:8px}.drum-step-light.drum-is-current i{background:var(--gold-pale);box-shadow:0 0 12px #f2df9dbf}.drum-step-light[data-beat-start=true] i{width:11px;height:11px}.drum-row{margin-top:5px}.drum-row-head{gap:3px;display:grid}.drum-row-head label{color:#fff9ed;font-size:.7rem;font-weight:850}.drum-row-head select{background:var(--ink);color:#fff;border:1px solid #ffffff21;border-radius:9px;width:100%;min-height:40px;padding:0 9px;font-size:.63rem}.drum-step{min-height:48px;color:var(--gold-pale);background:#ffffff0b;border:1px solid #ffffff1a;border-radius:7px;padding:0}.drum-step[data-beat-start=true]{border-left:3px solid #e3c06280}.drum-step.drum-is-ghost{background:#b1913a1c;border-color:#9d8752}.drum-step.drum-is-accent{border-color:var(--gold-bright);background:var(--gold-bright);color:var(--ink)}.drum-step.drum-is-current{box-shadow:0 0 0 2px var(--gold-pale), 0 0 17px #e3c06259}.drum-step-mark{font-size:.86rem}.instrument-visualizer{gap:18px;display:grid}.instrument-fretboard-region,.piano-region{scrollbar-color:var(--gold-deep) #ffffff0d;width:100%;padding:2px 2px 12px;overflow-x:auto}.fret-board{--string-column:64px;background:radial-gradient(circle at 24% 0,#ffffff0e,#0000 31rem),linear-gradient(145deg,#6b472d,#362419 72%);border:1px solid #ffffff2e;border-radius:16px;min-width:930px;overflow:hidden;box-shadow:inset 0 0 38px #00000052}.fret-header{grid-template-columns:var(--string-column) repeat(17, minmax(48px, 1fr));background:var(--ink);min-height:34px;display:grid}.fret-string-heading,.fret-header .fret-number{color:#aeb9c6;background:0 0;border-left:1px solid #ffffff12;place-items:center;min-height:34px;font-size:.6rem;font-weight:850;display:grid}.fret-string-heading{color:var(--gold-pale);border-left:0}.fret-header .fret-number.fret-landmark{color:var(--gold-bright)}.fret-string-row{grid-template-columns:var(--string-column) minmax(0, 1fr);border-top:1px solid #ffffff12;min-height:57px;display:grid;position:relative}.fret-open-string-cell{z-index:3;background:#121921f5;grid-column:1;place-items:center;display:grid;position:relative}.fret-string-button{background:0 0;border:0;border-radius:50%;place-items:center;width:42px;height:42px;padding:0;display:grid}.fret-string-button:hover{background:#ffffff12}.fret-string-name,.fret-open-string-marker{color:#d7e0e9;border:1px solid #ffffff2e;border-radius:50%;place-items:center;width:32px;height:32px;font-size:.72rem;font-weight:900;display:grid}.fret-open-string-marker{border-color:color-mix(in srgb, var(--interval-color) 80%, white);background:var(--interval-color);color:var(--interval-ink,#fff);box-shadow:0 4px 13px color-mix(in srgb, var(--interval-color) 30%, transparent)}.fret-string-line{top:50%;right:0;left:var(--string-column);z-index:1;pointer-events:none;background:#f4edd6d1;height:1px;position:absolute;box-shadow:0 1px 1px #000000b8}.fret-string-row:nth-child(n+4) .fret-string-line{height:2px}.fret-cells{z-index:2;grid-column:2;grid-template-columns:repeat(17,minmax(48px,1fr));display:grid}.fret-cell{border-left:2px solid #dad8ca7a;place-items:center;min-height:57px;display:grid;position:relative}.fret-cell.fret-landmark{background:#e3c06209}.fret-note-button{background:0 0;border:0;place-items:center;width:100%;height:100%;padding:0;display:grid}.fret-note-button:hover{background:#ffffff12}.fret-note-marker,.piano-note-marker,.instrument-legend-swatch{border:2px solid color-mix(in srgb, var(--interval-color) 70%, white);background:var(--interval-color);color:var(--interval-ink,#fff);border-radius:50%;place-items:center;font-weight:950;display:grid;box-shadow:0 4px 13px #04090e57}.fret-note-marker{width:31px;height:31px;font-size:.58rem}.instrument-visually-hidden,.visually-hidden{clip:rect(0 0 0 0)!important;white-space:nowrap!important;width:1px!important;height:1px!important;position:absolute!important;overflow:hidden!important}.piano-region{padding-top:4px}.piano-region .piano-keyboard{border:10px solid var(--ink);background:var(--ink);border-top-width:18px;border-radius:13px;min-width:720px;height:254px;margin:0;padding:0;display:block;position:relative;overflow:hidden;box-shadow:0 14px 28px #03080d57}.piano-white-keybed{gap:0;width:100%;height:100%;display:flex}.piano-key-button{place-items:end center;padding:0;display:grid;position:relative}.piano-white-key{background:linear-gradient(92deg,#dadbdd 0,#fff 13%,#f8f8f6 82%,#c9cbcd 100%);border:0;border-left:1px solid #aeb2b7;border-radius:0 0 4px 4px;flex:none;height:100%;padding-bottom:17px;box-shadow:inset 0 -8px 10px #272b301a}.piano-white-key:first-child{border-left:0}.piano-white-key:hover{background:linear-gradient(92deg,#d3d5d8,#f6f2e7 18%,#efeadb 85%,#bfc2c5)}.piano-black-key-layer{z-index:2;pointer-events:none;position:absolute;inset:0}.piano-black-key{pointer-events:auto;background:linear-gradient(90deg,#080b0e,#29313a 48%,#07090b);border:1px solid #050708;border-radius:0 0 5px 5px;height:62%;padding-bottom:10px;position:absolute;top:0;box-shadow:0 7px 8px #0000007a}.piano-black-key:hover{background:linear-gradient(90deg,#11161b,#3c4651 48%,#0b0e11)}.piano-note-marker{width:32px;height:32px;font-size:.58rem}.piano-black-key .piano-note-marker{width:27px;height:27px;font-size:.52rem}.piano-key-button[data-active=true]{box-shadow:inset 0 -6px 0 var(--interval-color), inset 0 -8px 13px color-mix(in srgb, var(--interval-color) 28%, transparent)}.piano-black-key[data-active=true]{box-shadow:inset 0 -5px 0 var(--interval-color), 0 7px 8px #0000007a}.instrument-interval-legend{flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;display:flex}.instrument-legend-item{color:#dce4ec;background:#090e154f;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:7px;min-height:40px;padding:5px 10px 5px 6px;display:inline-flex}.instrument-legend-swatch{width:28px;height:28px;font-size:.57rem}.instrument-legend-label{font-size:.64rem;font-weight:800}.instrument-legend-empty{color:var(--muted);margin:0;font-size:.72rem}.interval-root{--interval-color:#e3c062;--interval-ink:#18202a}.interval-minor-2{--interval-color:#e95596;--interval-ink:#fff}.interval-major-2{--interval-color:#4d8bc9;--interval-ink:#fff}.interval-minor-3{--interval-color:#d94e59;--interval-ink:#fff}.interval-major-3{--interval-color:#4f9d70;--interval-ink:#fff}.interval-perfect-4{--interval-color:#4b5662;--interval-ink:#fff}.interval-tritone{--interval-color:#9266aa;--interval-ink:#fff}.interval-perfect-5{--interval-color:#c9cfd5;--interval-ink:#18202a}.interval-minor-6{--interval-color:#dc91b2;--interval-ink:#18202a}.interval-major-6{--interval-color:#8aadd0;--interval-ink:#18202a}.interval-minor-7{--interval-color:#c66f9a;--interval-ink:#fff}.interval-major-7{--interval-color:#376fae;--interval-ink:#fff}.harmony-app{width:100%;max-width:none;padding:14px clamp(10px,1.7vw,32px) 38px}.harmony-hero{min-height:104px;padding:16px clamp(18px,2vw,28px)}.harmony-hero h1{font-size:clamp(1.9rem,2.8vw,3.25rem)}.harmony-hero-description{margin-top:8px}.section-nav{margin:10px auto 14px;position:static}.control-deck,.panel,.drum-trainer{padding:clamp(16px,1.6vw,24px)}.control-deck,.workspace-main,.ear-panel,.drum-trainer{margin-bottom:18px}.control-heading,.harmony-section-heading{margin-bottom:14px}.control-heading h2,.harmony-section-heading h2{font-size:clamp(1.45rem,2vw,2.15rem)}.instrument-fieldset{margin-bottom:12px}.instrument-selector-grid button{grid-template-columns:32px minmax(0,1fr);min-height:50px;padding:7px 9px}.instrument-selector-grid button>span{grid-row:1;width:30px;height:30px}.instrument-selector-grid button strong{font-size:.72rem}.root-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}.root-grid button{border-radius:8px;min-height:34px;padding:4px 2px;font-size:clamp(.58rem,.75vw,.76rem)}.workspace-grid{display:block}.workspace-main{gap:18px}.panel{scroll-margin-top:220px}.type-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:7px}.type-card{padding:6px}.god-mode-control{background:#e3c0620e;border:1px solid #e3c06238;border-radius:12px;justify-content:space-between;align-items:center;gap:16px;margin:-3px 0 13px;padding:9px 11px;display:flex}.god-mode-control>div{display:grid}.god-mode-control strong{color:#fff9ed;font-size:.78rem}.god-mode-control span{color:var(--muted);font-size:.62rem}.god-mode-control button{color:#dce5ee;background:#ffffff0d;border:1px solid #ffffff21;border-radius:999px;min-height:34px;padding:6px 10px;font-size:.65rem;font-weight:850}.god-mode-control button.active{border-color:var(--gold-bright);background:var(--gold-bright);color:var(--ink)}.metronome-toolbar{z-index:50;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-color:#e3c06252;margin-bottom:18px;padding:11px;scroll-margin-top:8px;position:sticky;top:6px;box-shadow:0 15px 38px #03080e57}.metronome-toolbar .metronome-sticky{grid-template-columns:minmax(116px,.62fr) minmax(215px,1.18fr) minmax(180px,.82fr) minmax(245px,1.15fr) minmax(125px,.64fr);align-items:end;gap:8px 10px;display:grid;position:static}.metronome-title,.metronome-toolbar .segmented-control.full,.metronome-toolbar .metronome-tempo,.metronome-toolbar .meter-controls,.metronome-toolbar .metronome-start,.metronome-toolbar .metronome-pattern-heading,.metronome-toolbar .metronome-sound-legend{margin:0}.metronome-title{align-self:center}.metronome-title h2{font-size:1.45rem}.metronome-title .section-kicker{margin-bottom:3px}.metronome-toolbar .metronome-tempo{grid-template-columns:minmax(0,1fr) 62px}.metronome-toolbar .metronome-tempo input,.metronome-toolbar .tap-button,.metronome-toolbar .select-field select,.metronome-toolbar .tempo-field input{min-height:42px}.metronome-toolbar .metronome-tempo input{font-size:1rem}.metronome-toolbar .tap-button{min-height:42px;font-size:.78rem}.metronome-toolbar .meter-controls{grid-template-columns:minmax(95px,.72fr) minmax(145px,1.28fr)}.metronome-toolbar .metronome-start{width:100%;min-height:42px;margin:0}.metronome-toolbar .metronome-pattern-heading,.metronome-toolbar .metronome-sound-legend{align-self:center}.metronome-toolbar .metronome-beat-pattern{grid-column:3/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;display:grid}.metronome-toolbar .metronome-beat-group{border-radius:9px;padding:5px}.metronome-toolbar .metronome-beat-number{margin-bottom:2px}.metronome-toolbar .metronome-beat-steps,.metronome-toolbar .metronome-step-column{gap:2px}.metronome-toolbar .metronome-step-light{width:7px;height:7px}.metronome-toolbar .metronome-step-column.downbeat .metronome-step-light{width:10px;height:10px}.metronome-toolbar .metronome-count-label{min-height:11px;font-size:.5rem}.metronome-toolbar .metronome-sound-stack{gap:2px}.metronome-toolbar .metronome-sound-block{border-radius:3px;min-height:12px}.related-shelf{margin-top:16px;padding-top:14px}.related-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:9px}.related-group-heading{align-items:center}.related-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:6px}.related-card{border-radius:9px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;min-width:0;padding:5px}.related-card-select{min-width:0;padding:2px 3px}.related-card-title,.related-card-formula{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.related-card-title{font-size:.68rem}.related-card-kind{font-size:.48rem}.related-card-formula{font-size:.52rem}.related-tone-summary{display:none}.related-card-actions{grid-template-columns:repeat(3,26px);gap:3px}.related-card-actions button{width:26px;min-height:26px;padding:0;font-size:.72rem}.map-control-cluster{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:7px 12px;display:flex}.map-instrument-switch{grid-template-columns:repeat(6,32px);gap:3px;display:grid}.map-instrument-switch button,.map-back-button{color:#e4ebf2;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:8px;min-height:32px;font-size:.6rem;font-weight:900}.map-instrument-switch button.active{border-color:var(--gold-bright);background:var(--gold-bright);color:var(--ink)}.map-back-button{color:var(--gold-pale);padding:5px 9px}.map-sync-control{font-size:.65rem}.instrument-panel,.instrument-visualizer,.instrument-fretboard-region,.piano-region,.fret-board,.piano-region .piano-keyboard{width:100%;max-width:none}.generator-controls{grid-template-columns:minmax(100px,.7fr) minmax(210px,1.6fr) repeat(2,minmax(120px,.8fr)) minmax(120px,.75fr);margin-bottom:13px}.voice-leading{border-top:1px solid var(--border);margin-top:16px;padding-top:14px}.voice-leading-heading{justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:8px;display:flex}.voice-leading-heading h3{color:#fff9ed;margin:0;font-family:Georgia,Times New Roman,serif;font-size:1.25rem;font-weight:500}.voice-leading-heading p:not(.section-kicker){color:var(--muted);margin:4px 0 0;font-size:.65rem}.voice-leading-heading>span{color:var(--mint);background:#67d2ad17;border-radius:999px;flex:none;padding:5px 8px;font-size:.6rem;font-weight:800}.voice-leading-stack{gap:4px;display:grid}.voice-row{grid-template-columns:minmax(195px,.42fr) minmax(620px,1.58fr);align-items:stretch;gap:7px;min-width:0;display:grid}.voice-row-label{text-align:left;background:#090e1557;border:1px solid #ffffff1a;border-radius:8px;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:1px 7px;min-width:0;padding:6px 8px;display:grid;position:relative}.voice-row-label>span{width:22px;height:22px;color:var(--gold-bright);background:#e3c0621f;border-radius:6px;grid-row:1/span 2;place-items:center;font-size:.58rem;font-weight:900;display:grid}.voice-row-label strong{color:#fff9ed;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.voice-row-label small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.52rem;overflow:hidden}.voice-row-label i{color:var(--gold-pale);grid-area:1/3/span 2;font-size:.62rem;font-style:normal}.voice-pitch-lane{background:#111821;border:1px solid #ffffff1a;border-radius:8px;grid-template-columns:repeat(29,minmax(12px,1fr));min-width:620px;display:grid;overflow:hidden}.voice-pitch-lane span{color:#0000;background:#e9e8e2;border-left:1px solid #1a20273b;place-items:center;min-height:46px;font-size:.48rem;font-weight:950;display:grid}.voice-pitch-lane span.black{background:#303a46}.voice-pitch-lane span.active{background:var(--gold-bright);color:var(--ink);box-shadow:inset 0 0 0 2px #fff0b9}.practice-sync-strip{color:#fff;background:linear-gradient(120deg,#283341fa,#121921fa);border:1px solid #e3c0623d;border-radius:16px;justify-content:space-between;align-items:center;gap:18px;margin:0 0 -8px;padding:12px 16px;display:flex}.practice-sync-strip>div:first-child{display:grid}.practice-sync-strip strong{font-family:Georgia,Times New Roman,serif;font-size:1.12rem;font-weight:500}.practice-sync-strip span{color:var(--muted);font-size:.62rem}.drum-row-mix{grid-template-columns:28px minmax(0,1fr);align-items:center;gap:5px;display:grid}.drum-row-mute{color:#dce4ec;background:#ffffff0d;border:1px solid #ffffff21;border-radius:6px;width:28px;height:25px;padding:0;font-size:.58rem;font-weight:900}.drum-row-mute.drum-is-muted{border-color:var(--coral);color:#ffc0b3;background:#ff8e7726}.drum-row-volume,.drum-row-volume input{width:100%}.drum-row-volume input{accent-color:var(--gold-bright)}.sr-only{clip:rect(0 0 0 0)!important;white-space:nowrap!important;width:1px!important;height:1px!important;position:absolute!important;overflow:hidden!important}@media (max-width:1120px){.workspace-grid{grid-template-columns:1fr}.metronome-panel{order:2}.metronome-sticky{position:static}.metronome-pattern{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}.generator-controls{grid-template-columns:repeat(3,1fr)}.instrument-selector-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.drum-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:820px){.harmony-app{padding-inline:12px}.harmony-hero{border-radius:24px;grid-template-columns:1fr;gap:18px;min-height:0;padding:26px 24px}.harmony-hero-mark{display:none}.home-link{width:fit-content}.section-nav{border-radius:18px;justify-content:center;position:static}.global-controls-grid{grid-template-columns:1fr}.root-grid{grid-template-columns:repeat(4,1fr)}.harmony-section-heading,.control-heading{align-items:stretch}.generator-controls,.answer-grid{grid-template-columns:repeat(2,1fr)}.substitution-toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.replacement-search-field,.ear-challenge-card{grid-template-columns:1fr}.ear-primary-actions{justify-content:flex-start}.site-footer{text-align:center;grid-template-columns:1fr;gap:12px}.fretboard-grid{grid-template-columns:48px repeat(13,minmax(39px,1fr));min-width:555px}}@media (max-width:560px){.harmony-hero h1{font-size:clamp(2.15rem,11vw,3rem)}.trainer-brand img{width:44px;height:44px}.section-nav a{text-align:center;flex:42%}.control-heading,.harmony-section-heading,.ear-selection-toolbar,.ear-category-heading{flex-direction:column}.audio-status,.selected-summary{text-align:left;width:100%;max-width:none}.root-grid{grid-template-columns:repeat(3,1fr)}.instrument-selector-grid,.substitution-toggle-grid,.metronome-beat-pattern,.type-grid,.progression-grid,.generator-controls,.meter-controls,.metronome-tempo{grid-template-columns:1fr}.transport-row p,.tone-legend small{text-align:left}.ear-score{width:100%}.answer-grid{grid-template-columns:1fr}.ear-selection-toolbar>div:last-child{width:100%}.ear-playback-choice,.substitution-heading,.custom-sequence-heading,.drum-heading{flex-direction:column;align-items:stretch}.drum-transport{align-items:stretch}.drum-controls{grid-template-columns:1fr}.drum-control-actions>button{flex:1}.drum-legend small{width:100%;margin-left:0}.ear-selection-toolbar button{flex:1}.ear-category-heading>div{flex-direction:column;align-items:flex-start;gap:2px}.ear-option-grid{grid-template-columns:1fr}.builder-actions,.playback-actions:not(.compact){width:100%}.builder-actions>button,.playback-actions:not(.compact) .icon-action{flex:1}}@media (max-width:1120px){.instrument-selector-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.metronome-toolbar .metronome-sticky{grid-template-columns:repeat(4,minmax(0,1fr))}.metronome-toolbar .metronome-title{grid-column:1}.metronome-toolbar .metronome-sync{grid-column:2}.metronome-toolbar .metronome-tempo{grid-column:3}.metronome-toolbar .meter-controls{grid-column:4}.metronome-toolbar .metronome-start{grid-column:1}.metronome-toolbar .metronome-pattern-heading{grid-column:2}.metronome-toolbar .metronome-sound-legend{grid-column:3/-1}.metronome-toolbar .metronome-beat-pattern{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}.related-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.voice-leading-stack{padding-bottom:4px;overflow-x:auto}.voice-row{min-width:900px}}@media (max-width:820px){.root-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}.root-grid button{min-height:32px;font-size:.57rem}.metronome-toolbar .metronome-sticky{grid-template-columns:repeat(2,minmax(0,1fr))}.metronome-toolbar .metronome-title,.metronome-toolbar .metronome-tempo,.metronome-toolbar .metronome-pattern-heading{grid-column:1}.metronome-toolbar .metronome-sync,.metronome-toolbar .meter-controls,.metronome-toolbar .metronome-sound-legend{grid-column:2}.metronome-toolbar .metronome-start,.metronome-toolbar .metronome-beat-pattern{grid-column:1/-1}.metronome-toolbar .metronome-beat-pattern{grid-template-columns:repeat(4,minmax(0,1fr))}.related-groups{grid-template-columns:1fr}.related-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.instrument-heading{flex-direction:column;align-items:stretch}.map-control-cluster{justify-content:flex-start}.generator-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-sync-strip{flex-direction:column;align-items:stretch}.practice-sync-strip .segmented-control{width:100%}}@media (max-width:560px){.harmony-app{padding-inline:8px}.harmony-hero{gap:10px;padding:16px}.harmony-hero-description{display:none}.instrument-selector-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.root-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}.root-grid button{min-height:30px;padding-inline:0;font-size:.52rem}.metronome-toolbar{position:static}.metronome-toolbar .metronome-tempo{grid-column:1/-1;grid-template-columns:minmax(0,1fr) 52px}.metronome-toolbar .meter-controls{grid-column:1/-1;grid-template-columns:minmax(78px,.7fr) minmax(120px,1.3fr)}.metronome-toolbar .metronome-title{grid-column:1}.metronome-toolbar .metronome-start{grid-column:2}.metronome-toolbar .metronome-sync{grid-column:1/-1}.metronome-toolbar .metronome-sync button{min-width:0;padding-inline:6px;font-size:.62rem;line-height:1.15}.metronome-toolbar .metronome-pattern-heading{grid-column:1}.metronome-toolbar .metronome-sound-legend{grid-column:2}.metronome-toolbar .metronome-beat-pattern{grid-template-columns:repeat(4,minmax(0,1fr))}.metronome-toolbar .metronome-beat-group{padding:3px}.metronome-toolbar .metronome-sound-block{min-height:10px}.related-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.map-instrument-switch{grid-template-columns:repeat(6,minmax(28px,1fr));width:100%}.generator-controls{grid-template-columns:1fr}.voice-leading-heading{flex-direction:column;align-items:flex-start}.practice-sync-strip .segmented-control{grid-template-columns:1fr;grid-auto-flow:row}}@media (prefers-reduced-motion:reduce){.harmony-app,.harmony-app *,.harmony-app :before,.harmony-app :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}