:root{color-scheme:dark;--bg: #0e0f13;--bg-raised: #17181d;--bg-raised-2: #1e1f24;--border: #26272e;--border-strong: #3a3d47;--text: #e7e8ec;--text-muted: #c5c8d0;--text-dim: #aab0bc;--text-faint: #6f727c;--accent: #e0a458;--accent-strong: #eab56f;--accent-soft: rgba(224, 164, 88, .16);--on-accent: #14100a;--ok: #7fd29a;--fail: #e0797b;--partial: #d9a441;--switch-track: #505664;--switch-knob: #f4f5f7;--overlay: rgba(0, 0, 0, .6);--notation-ink: #d5d8df;--keys-warm: #e2764a;--keys-cool: #558fd6;--keys-mid: #16171c;--keys-bad: #e2795a;--keys-sheen: rgba(255, 255, 255, .09);--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}[data-theme=light]{color-scheme:light;--bg: #efe7d6;--bg-raised: #faf5e9;--bg-raised-2: #e8dec8;--border: #2c2620;--border-strong: #4a4136;--text: #1d1813;--text-muted: #443b31;--text-dim: #5d5245;--text-faint: #756a5c;--accent: #bd2f26;--accent-strong: #9f241d;--accent-soft: rgba(189, 47, 38, .12);--on-accent: #faf5e9;--ok: #1f7a3d;--fail: #b3261e;--partial: #a06a12;--switch-track: #cdc2a9;--switch-knob: #faf5e9;--overlay: rgba(24, 18, 12, .5);--notation-ink: #1d1813;--keys-warm: #c2542c;--keys-cool: #558cc0;--keys-mid: #e6dcc6;--keys-bad: #c05a37;--keys-sheen: rgba(255, 255, 255, .4);--font-display: "Fraunces", "Instrument Serif", Georgia, serif;--font-body: "Spectral", Georgia, "Times New Roman", serif}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body)}#app{min-height:100%}.shell{display:flex;flex-direction:column;min-height:100vh;width:100%;max-width:1100px;margin:0 auto;padding:24px 20px}.shell--wide{max-width:1280px}.shell-body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:20px}.back-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);text-decoration:none;font-size:.9rem;padding:6px 10px;margin-left:-10px;border-radius:8px;transition:color .15s ease}.back-link:hover{color:var(--text)}.back-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.intervals-head-actions{display:flex;align-items:center;gap:8px}.theme-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border-strong);background:var(--bg-raised-2);color:var(--text);width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.theme-toggle:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-toast{position:fixed;top:16px;right:16px;max-width:min(360px,calc(100vw - 32px));padding:12px 16px;background:var(--bg-raised);border:1px solid var(--accent);border-radius:12px;color:var(--text);font-size:.9rem;line-height:1.4;box-shadow:0 8px 32px #00000059;transform:translate(calc(100% + 32px));opacity:0;transition:transform .28s ease,opacity .28s ease;z-index:100;pointer-events:none}.app-toast--show{transform:translate(0);opacity:1}.btn--blink{animation:replay-blink .8s ease-in-out 3}@keyframes replay-blink{0%,to{background:transparent;box-shadow:none}50%{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent),0 0 20px color-mix(in srgb,var(--accent) 55%,transparent)}}.interval-pad.is-locked .interval-btn,.note-pad.is-locked .note-name-btn,.modes-answer.is-locked .mode-btn,[data-role=answer].is-locked .mode-btn{pointer-events:none;opacity:.45}.interval-pad.is-locked .interval-btn.is-correct,.interval-pad.is-locked .interval-btn.is-wrong,.note-pad.is-locked .note-name-btn.is-correct,.note-pad.is-locked .note-name-btn.is-wrong,.modes-answer.is-locked .mode-btn.is-correct,.modes-answer.is-locked .mode-btn.is-wrong,[data-role=answer].is-locked .mode-btn.is-correct,[data-role=answer].is-locked .mode-btn.is-wrong{opacity:1}.field-block{position:relative;border:1px solid var(--border-strong);border-radius:12px;padding:16px}.field-block__label{position:absolute;top:-.55em;left:14px;padding:0 8px;background:var(--bg);color:var(--text-dim);font-size:.76rem;font-weight:600;letter-spacing:.04em;line-height:1}.footer{padding-top:28px;padding-bottom:4px;text-align:center;color:var(--text-muted);font-size:.85rem;letter-spacing:.01em;text-wrap:balance}.staff{position:relative;display:flex;background:var(--bg-raised);border:1px solid var(--border);border-radius:16px;padding:20px 16px;overflow:hidden;min-width:0}.staff-inner{position:relative;display:inline-block;margin:auto}.staff svg{display:block;max-width:none}.playhead{position:absolute;width:2px;background:var(--accent);border-radius:2px;pointer-events:none}.controls{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--bg-raised);border:1px solid var(--border);border-radius:16px}.controls .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.controls .row+.row{padding-top:14px;border-top:1px solid var(--border)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:transparent;color:var(--text);font:inherit;font-size:.95rem;padding:0 16px;height:44px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s ease,border-color .15s ease,color .15s ease}.btn-icon{width:1.05em;height:1.05em;flex:none}.btn:hover{background:var(--accent-soft);border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn:focus-visible,.help-play:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn-primary:hover{background:var(--accent-strong)}.btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.tempo{display:flex;align-items:center;gap:8px}.tempo .btn{padding:0 14px}.bpm{font-variant-numeric:tabular-nums;font-size:1.05rem;min-width:88px;height:44px;display:inline-flex;align-items:baseline;justify-content:center;gap:5px;color:var(--accent);font-weight:600}.bpm-unit{font-size:.7em;font-weight:600;letter-spacing:.06em;color:var(--text-dim)}.level{display:flex;gap:8px}.level-btn{text-transform:capitalize}@media (max-width: 640px){.shell{padding:12px 10px}.shell-body{gap:10px}.controls{padding:12px 10px}.btn{font-size:.9rem;padding:0 12px}.staff{padding:10px}.footer{font-size:.78rem;padding-top:14px}.field-block{padding:10px}}.landing{display:flex;flex-direction:column;min-height:100dvh;width:100%;max-width:560px;margin:0 auto;padding:24px 20px;animation:landing-in .45s ease both}.landing-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px}.landing-top{display:flex;justify-content:flex-end}@keyframes landing-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.landing-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.eyebrow{margin:0;color:var(--text-muted);text-transform:uppercase;letter-spacing:.22em;font-size:.76rem;font-weight:600}.landing-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,7vw,2.7rem);line-height:.95;letter-spacing:0}.staff-motif{width:100%}.staff-motif svg{display:block;width:min(100%,260px);height:auto;margin:0 auto}.trainers{display:flex;flex-direction:column;gap:8px}.trainer-card{display:flex;align-items:center;gap:16px;padding:13px 18px;min-height:60px;background:var(--bg-raised);border:1px solid var(--border);border-radius:14px;color:var(--text);text-decoration:none;transition:border-color .15s ease,background .15s ease}.trainer-card--active,.trainer-card--soon{background:var(--bg-raised-2);border-color:var(--border-strong)}.trainer-card--active:hover{background:var(--accent-soft)}.trainer-card--active:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.trainer-icon{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;color:var(--accent)}.trainer-icon svg{width:26px;height:26px}.trainer-text{display:flex;flex-direction:column;gap:4px;min-width:0}.trainer-name{font-size:1.05rem;font-weight:600}.trainer-desc{font-size:.85rem;color:var(--text-muted)}.trainer-chevron{margin-left:auto;flex:0 0 auto;color:var(--accent);display:grid;place-items:center;transition:transform .15s ease}.trainer-chevron svg{width:18px;height:18px}.trainer-card--active:hover .trainer-chevron{transform:translate(3px)}.trainer-badge{margin-left:auto;flex:0 0 auto;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);border:1px solid var(--border-strong);border-radius:999px;padding:4px 10px}@media (max-width: 640px){.landing{padding:20px 16px}.landing-body{gap:18px}.trainer-card{padding:12px 16px;gap:14px}}@media (prefers-reduced-motion: reduce){.landing{animation:none}.trainer-card,.trainer-chevron{transition:none}}.trainer-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.7rem;line-height:1;letter-spacing:-.01em}.trainer-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.interval-mode-tabs{display:flex;align-items:flex-end;gap:2px;padding:0;background:transparent;border:none;border-bottom:1px solid var(--border-strong);border-radius:0}.interval-mode-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;border-bottom:none;background:transparent;color:var(--text-dim);font:inherit;font-size:.85rem;white-space:nowrap;height:38px;padding:0 14px;border-radius:9px 9px 0 0;cursor:pointer;margin-bottom:-1px;transition:color .15s ease,background .15s ease,border-color .15s ease}.interval-mode-tab:hover:not(:disabled){color:var(--text);background:var(--bg-raised-2)}.interval-mode-tab.active{background:var(--bg);border-color:var(--border-strong);color:var(--text)}.interval-mode-tab:disabled{color:var(--text-faint);cursor:not-allowed}.note-question{font-family:var(--font-display);font-size:1.2rem;padding-bottom:4px}.mode-hint{font-family:var(--font-display);font-size:1.12rem;font-weight:400;line-height:1.45;color:var(--text);padding:0 0 0 14px;margin:0;border-left:2px solid var(--accent)}.note-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.note-name-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:52px;padding:6px 4px;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg-raised-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-family:var(--font-display);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .9s ease}.note-name-btn:focus-visible,.note-name-btn:active{border-color:var(--accent);color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}@media (hover: hover){.note-name-btn:hover{border-color:var(--accent);color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}}.note-name-btn.is-correct{border-color:color-mix(in srgb,var(--ok) 70%,transparent);color:var(--ok);background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 42%,transparent),color-mix(in srgb,var(--ok) 18%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 55%,transparent),0 0 28px color-mix(in srgb,var(--ok) 40%,transparent)}.note-name-btn.is-wrong{border-color:color-mix(in srgb,var(--fail) 70%,transparent);color:var(--fail);background:linear-gradient(180deg,color-mix(in srgb,var(--fail) 40%,transparent),color-mix(in srgb,var(--fail) 16%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fail) 45%,transparent)}.note-name-btn.is-correct,.note-name-btn.is-wrong,.interval-btn.is-correct,.interval-btn.is-wrong{animation:answer-release 1.4s ease .3s forwards}@keyframes answer-release{to{border-color:var(--border-strong);color:var(--text);background:var(--bg-raised-2);box-shadow:none}}@media (max-width: 640px){.note-pad{gap:6px}.note-name-btn{min-height:44px;font-size:.95rem;border-radius:10px}}@media (prefers-reduced-motion: reduce){.note-name-btn,.note-name-btn:hover,.note-name-btn:focus-visible{transition:none}.note-name-btn.is-correct,.note-name-btn.is-wrong{animation:none}}@media (max-width: 640px){.trainer-title-row{align-items:flex-start;flex-direction:column}.interval-mode-tabs{width:100%;overflow-x:auto}}.intervals-head{display:flex;align-items:center;justify-content:space-between}.journal-toggle{height:38px;padding:0 14px;font-size:.9rem}.journal-modal{max-width:640px}.journal-empty{margin:0;color:var(--text-dim);font-size:.9rem}.journal-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.85rem}.journal-table th,.journal-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border)}.journal-table th{white-space:nowrap}.journal-table td{overflow-wrap:break-word;word-break:normal}.journal-table th:first-child,.journal-table td:first-child{width:68px}.journal-table th:nth-child(2),.journal-table td:nth-child(2){width:132px}.journal-table th:last-child,.journal-table td:last-child{width:20px;text-align:center}.journal-ok{color:var(--ok)}.journal-fail{color:var(--fail)}.journal-partial{color:var(--partial)}.intervals-main,.intervals-sticky{display:flex;flex-direction:column;gap:16px;min-width:0}#controls{display:flex;flex-direction:column;gap:14px}.type-toggles{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}.type-toggles[hidden]{display:none}.type-toggles--sevenths{padding:10px 12px;border:1px solid var(--border);border-radius:12px}.type-toggles-title{flex-basis:100%;font-size:.78rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:10px;background:transparent;border:none;padding:0;font:inherit;color:var(--text);cursor:pointer}.switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}.switch-label{font-size:.95rem}.switch-track{position:relative;flex:0 0 auto;width:46px;height:28px;border-radius:999px;background:var(--switch-track);transition:background .2s ease}.switch-knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--switch-knob);box-shadow:0 1px 3px #00000073;transition:transform .2s ease}.switch.on .switch-track{background:var(--accent)}.switch.on .switch-knob{transform:translate(18px);background:var(--on-accent)}.interval-staff{min-height:180px;display:flex;align-items:center;justify-content:center}@media (max-width: 640px){.interval-staff{min-height:0}}.interval-answer{display:flex;gap:10px}.answer-input{flex:0 1 280px;min-width:0;height:44px;padding:0 14px;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;color:var(--text);font:inherit}.answer-input:focus{outline:2px solid var(--accent);outline-offset:0}.answer-input::placeholder{color:var(--text-faint)}.interval-result{min-height:2.6em;font-weight:600;line-height:1.3}.interval-result.ok{color:var(--ok)}.interval-result.fail{color:var(--fail)}.interval-result.partial{color:var(--partial)}.interval-result--hint{color:var(--accent);font-weight:600}.interval-actions{display:flex;gap:10px;justify-content:space-between}.btn-help{color:var(--text-dim);border-color:var(--border);background:transparent}.interval-pad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.interval-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:56px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:16px;background:var(--bg-raised-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-family:"Cormorant",var(--font-display);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s ease,color .15s ease,transform .15s ease,background .15s ease,box-shadow .9s ease}.interval-btn:focus-visible,.interval-btn:active{border-color:var(--accent);color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);transition:border-color .12s ease,color .12s ease,transform .12s ease,background .12s ease,box-shadow .12s ease}@media (hover: hover){.interval-btn:hover{border-color:var(--accent);color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);transition:border-color .12s ease,color .12s ease,transform .12s ease,background .12s ease,box-shadow .12s ease}}.interval-btn.is-correct{border-color:color-mix(in srgb,var(--ok) 70%,transparent);color:var(--ok);background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 42%,transparent),color-mix(in srgb,var(--ok) 18%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 55%,transparent),0 0 28px color-mix(in srgb,var(--ok) 40%,transparent)}.interval-btn.is-wrong{border-color:color-mix(in srgb,var(--fail) 70%,transparent);color:var(--fail);background:linear-gradient(180deg,color-mix(in srgb,var(--fail) 40%,transparent),color-mix(in srgb,var(--fail) 16%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fail) 45%,transparent)}.interval-btn-full{font-size:1.05rem;line-height:1.15}.interval-btn-abbr{display:none;font-style:italic;font-weight:600}@media (max-width: 640px){.interval-pad{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.interval-btn{min-height:48px;border-radius:14px}.interval-btn-full{display:none}.interval-btn-abbr{display:inline;font-size:1.45rem}.interval-btn[data-interval=tritone] .interval-btn-abbr{font-size:1.1rem}}@media (prefers-reduced-motion: reduce){.interval-btn,.interval-btn:hover,.interval-btn:focus-visible{transition:none}.interval-btn.is-correct,.interval-btn.is-wrong{animation:none}}.btn:disabled{background:var(--bg-raised-2);border-color:var(--border-strong);color:var(--text-faint);cursor:not-allowed}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.help-overlay[hidden]{display:none}.help-modal{background:var(--bg-raised);border:1px solid var(--border);border-radius:16px;max-width:1200px;width:100%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 64px #00000080}.help-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.help-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.4rem}.help-scroll{overflow:auto;padding:8px 12px}.help-table{width:100%;border-collapse:collapse;font-size:.85rem}.help-table th,.help-table td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}.help-table th{white-space:normal;font-weight:600;color:var(--text-dim)}.help-table td{white-space:nowrap}.help-table .help-group-title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--text)}.help-table .help-group-row td{border-bottom:1px solid var(--border-strong);padding-top:18px;padding-bottom:8px}.help-notation{display:flex;gap:6px;align-items:flex-start}.help-notation-stave{flex:0 0 auto}.help-table td.help-notation,.help-table td.help-anchor,.help-table td.help-quality,.help-table td.help-solfege{white-space:normal}.help-notation svg{display:block}.modes-help-table{table-layout:fixed;width:1080px;margin:0 auto;border-collapse:collapse;font-size:.9rem}.help-table thead th{position:sticky;top:0;background:color-mix(in srgb,var(--bg-raised) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1;box-shadow:0 1px 0 0 var(--border)}.modes-help-table th,.modes-help-table td{border-bottom:none}.modes-help-table tbody tr{border-bottom:1px solid var(--border)}.modes-help-table .help-group-row{border-bottom:1px solid var(--border-strong)}.modes-help-table col.help-notation-col{width:620px}.modes-help-table col.help-desc-col{width:460px}.modes-help-table td.help-notation,.modes-help-table td.help-desc{vertical-align:top}.modes-help-table .help-notation{flex-direction:column;align-items:flex-start}.modes-help-table .help-chord-head,.modes-help-table .help-notation-play{display:flex;align-items:center;gap:8px}.modes-help-table .help-mode-name{font-weight:600;font-size:1.05rem;line-height:1;color:var(--accent)}.modes-help-table .help-notation-entry{margin-top:10px}.modes-help-table .help-notation-play,.modes-help-table .help-chord-head{height:32px}.modes-help-table .help-notation-play{margin-bottom:4px}.modes-help-table .help-chord-head{margin-top:4px;margin-bottom:4px}.modes-help-table .help-chord-label{margin-top:8px;font-size:.8rem;color:var(--text-dim)}.modes-help-table .help-notation-caption{display:flex;flex-direction:column;font-size:.8rem;line-height:18px;color:var(--text-dim);margin-top:8px}.modes-help-table .help-notation-desc{font-size:.78rem;line-height:18px}.modes-help-table .help-notation-inner.help-notation-descending{margin-top:-24px}.modes-help-table .help-desc{white-space:normal}.modes-help-table .help-desc:first-letter{text-transform:uppercase}.modes-help-table .help-desc-minor{color:var(--text-dim);font-size:.8rem}.modes-help-table .help-group-row td{border-bottom:1px solid var(--border-strong);padding-top:18px;padding-bottom:8px}.modes-help-table .help-group-row{scroll-margin-top:48px}.modes-help-table .help-group-title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--text)}.modes-help-table .help-group-desc{font-size:.85rem;color:var(--text-dim);margin-top:2px}.modes-help-table .help-chord-symbol{color:var(--accent);font-weight:600}.modes-help-modal .help-filters .btn{text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}.help-abbr{color:var(--accent);font-weight:600}.help-anchor{min-width:220px}.help-anchor-row{display:flex;align-items:center;gap:8px;line-height:1.7}.help-anchor-dir{flex:0 0 auto;color:var(--text-dim);font-size:.8rem}.help-anchor-song{color:var(--text);white-space:normal}.help-play{height:32px;width:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;flex:0 0 auto}@media (max-width: 860px){.intervals-main{order:1;display:flex;flex-direction:column}.intervals-sticky{position:sticky;top:0;z-index:5;background:var(--bg)}}@media (prefers-reduced-motion: reduce){.switch-track,.switch-knob{transition:none}.btn:active{transform:none}}.level-select{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--border)}.level-select .level-btn{text-transform:none}.level-select .level-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.chord-root{color:var(--text);font-size:1rem;min-height:1.4em}.help-filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;border-bottom:1px solid var(--border)}.help-filters .btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.keys-title{text-align:center}.keys-layout{display:flex;flex-direction:column;align-items:center;gap:8px}#keys-answer{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:var(--keys-answer-width, 900px)}#keys-answer[hidden]{display:none}.keys-main{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:760px}.keys-main-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px}.keys-main .interval-staff{width:340px;max-width:100%;min-height:96px;padding:10px 16px}.keys-staff--hidden{display:none}.keys-tabs{display:flex;align-items:flex-end;gap:2px;padding:0;width:100%;max-width:760px;background:transparent;border:none;border-bottom:1px solid var(--border-strong);border-radius:0}.keys-tab{text-transform:none;border:1px solid transparent;border-bottom:none;background:transparent;color:var(--text-dim);height:40px;padding:0 14px;font-size:.85rem;white-space:nowrap;border-radius:9px 9px 0 0;margin-bottom:-1px}.keys-tab:hover{background:var(--bg-raised-2);border-color:transparent;color:var(--text)}.keys-tab.active{background:var(--bg);border-color:var(--border-strong);color:var(--text)}.keys-hint{margin:0;font-size:.85rem;color:var(--text-dim)}.keys-hint[hidden]{display:none}.keys-answer{display:flex;gap:10px;position:relative}.keys-toast{position:absolute;top:calc(100% + 4px);left:0;font-size:.85rem;color:var(--text-muted);opacity:0;transform:translateY(-2px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;white-space:nowrap}.keys-toast--show{opacity:1;transform:translateY(0)}.keys-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--keys-gap, 10px);width:100%}.keys-tile:first-child{grid-column:1 / -1}@media (max-width: 640px){.keys-pad{gap:var(--keys-gap-mobile, 6px)}}.keys-tile{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 2px;border:1px solid var(--border-strong);border-radius:12px;background:color-mix(in srgb,var(--bg-raised-2) 85%,var(--bg));color:var(--text);cursor:pointer;min-height:46px;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.keys-tile:hover{border-color:var(--accent);background:var(--bg-raised)}.keys-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.keys-tile-svg{display:flex;justify-content:center;align-items:center;width:100%;overflow:hidden}.keys-tile-svg svg{display:block;max-width:100%;height:auto}.keys-tile.is-correct{border-color:color-mix(in srgb,var(--ok) 70%,transparent);background:color-mix(in srgb,var(--ok) 18%,transparent)}.keys-tile.is-wrong{border-color:color-mix(in srgb,var(--fail) 70%,transparent);background:color-mix(in srgb,var(--fail) 16%,transparent)}.keys-pad.is-locked .keys-tile{pointer-events:none;opacity:.45}.keys-pad.is-locked .keys-tile.is-correct,.keys-pad.is-locked .keys-tile.is-wrong{opacity:1}.keys-answer[hidden],.btn[hidden]{display:none}.keys-question{min-height:1.4em;margin:0;font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1.1;letter-spacing:-.01em;color:var(--text);text-align:center}.keys-question--instruction{font-family:var(--font-display);font-size:1rem;font-weight:400;line-height:1.4;letter-spacing:0;color:var(--text-dim)}.keys-result{min-height:24px;font-weight:600;color:var(--text-muted)}.keys-result--ok{color:var(--accent)}#circle{position:relative;width:min(400px,40vh);aspect-ratio:1 / 1;margin:0 auto;display:grid;place-items:center}#circle.keys-circle--hidden{display:none}.keys-circle{display:block;width:100%;height:auto}.keys-halo,.keys-glow{position:absolute;left:50%;top:50%;width:73%;height:73%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;-webkit-mask:radial-gradient(circle closest-side,transparent 66%,#000 66.5%,#000 100%);mask:radial-gradient(circle closest-side,transparent 66%,#000 66.5%,#000 100%)}.keys-halo{background:conic-gradient(from 90deg,var(--keys-warm) 0deg,var(--keys-mid) 90deg,var(--keys-cool) 180deg,var(--keys-mid) 270deg,var(--keys-warm) 360deg);background:conic-gradient(from 90deg in oklch,var(--keys-warm) 0deg,var(--keys-mid) 90deg,var(--keys-cool) 180deg,var(--keys-mid) 270deg,var(--keys-warm) 360deg);opacity:.55}.keys-glow{background:conic-gradient(from calc(var(--keys-angle, 0deg) - 14deg),transparent 0deg,color-mix(in srgb,var(--keys-glow-color, var(--accent)) 65%,transparent) 14deg,transparent 28deg);opacity:0;transition:opacity .1s ease}.keys-glow--on{opacity:1}.keys-circle-bg,.keys-rings,.keys-sheen{pointer-events:none}.keys-sheen--c{stop-color:var(--keys-sheen)}.keys-sheen--e{stop-color:var(--keys-sheen);stop-opacity:0}.keys-grad--c{stop-color:var(--bg-raised)}.keys-grad--e{stop-color:var(--bg)}.keys-disc{stroke:none}.keys-ring{fill:none}.keys-ring--outer{stroke:var(--border);stroke-width:1;opacity:.5}.keys-ring--mid{stroke:var(--border);stroke-width:.75;opacity:.3}.keys-hub{fill:transparent;stroke:var(--border);stroke-width:.75;opacity:.3}.keys-sector{stroke:none;transition:filter .3s ease}.keys-sector[data-kind=sharp]{fill:url(#keys-sector-warm)}.keys-sector[data-kind=flat]{fill:url(#keys-sector-cool)}.keys-sector[data-kind=none]{fill:url(#keys-sector-none)}.keys-sector-grad--warm--in{stop-color:var(--keys-warm);stop-opacity:.03}.keys-sector-grad--warm--out{stop-color:var(--keys-warm);stop-opacity:.4}.keys-sector-grad--cool--in{stop-color:var(--keys-cool);stop-opacity:.03}.keys-sector-grad--cool--out{stop-color:var(--keys-cool);stop-opacity:.4}.keys-sector-grad--none--in{stop-color:var(--text-faint);stop-opacity:0}.keys-sector-grad--none--out{stop-color:var(--text-faint);stop-opacity:.12}.keys-sector--on{filter:brightness(1.5) drop-shadow(0 0 12px var(--accent));transition:filter .1s ease}.keys-sector.keys-sector--correct{fill:var(--ok);filter:none}.keys-sector.keys-sector--wrong{fill:var(--keys-bad);filter:none}.keys-circle--interactive .keys-label,.keys-circle--interactive .keys-sector{cursor:pointer}.keys-label text{font-family:var(--font-display);fill:var(--text);transition:fill .3s ease,filter .3s ease}.keys-label--major text{font-size:22px;font-weight:600}.keys-label--minor text{font-size:22px;font-weight:600;fill:var(--text)}.keys-label--hl text{fill:var(--accent);font-weight:700;filter:drop-shadow(0 0 6px var(--accent));transition:fill .1s ease,filter .1s ease}.keys-label--correct text{fill:var(--ok);font-weight:700}.keys-label--wrong text{fill:var(--keys-bad);font-weight:700;filter:none}.keys-thread{stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .3s ease}.keys-thread--on{opacity:1;stroke-width:3;filter:drop-shadow(0 0 5px var(--accent));transition:opacity .1s ease}.keys-thread--correct{opacity:1;stroke:var(--ok);stroke-width:3}.keys-thread--wrong{opacity:1;stroke:var(--keys-bad);stroke-width:3}@media (max-width: 640px){.keys-question{font-size:1.4rem}.keys-main-row{flex-direction:column}.keys-main .interval-staff{width:100%}.keys-answer{flex-direction:column}.keys-answer .answer-input{flex:1 1 auto;width:100%}#circle{width:min(100%,300px,50vh)}}@media (prefers-reduced-motion: reduce){.keys-label text,.keys-thread,.keys-sector{transition:none}}.notes-main{display:flex;flex-direction:column;gap:14px;padding:18px;max-width:640px;margin:0 auto;background:var(--bg-raised);border:1px solid var(--border);border-radius:16px}.notes-title{text-align:center}.notes-main .type-toggles{justify-content:center}.notes-pad{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.note-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:0;height:64px;border:1px solid var(--border-strong);border-radius:16px;background:var(--bg-raised-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-family:var(--font-display);font-size:1.6rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s ease,color .15s ease,transform .15s ease,background .15s ease,box-shadow .9s ease}.note-btn:hover,.note-btn:focus-visible{border-color:var(--accent);color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);transition:border-color .12s ease,color .12s ease,transform .12s ease,background .12s ease,box-shadow .12s ease}.note-btn.is-correct{border-color:color-mix(in srgb,var(--ok) 70%,transparent);color:var(--ok);background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 42%,transparent),color-mix(in srgb,var(--ok) 18%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 55%,transparent),0 0 28px color-mix(in srgb,var(--ok) 40%,transparent)}.note-btn.is-wrong{border-color:color-mix(in srgb,var(--fail) 70%,transparent);color:var(--fail);background:linear-gradient(180deg,color-mix(in srgb,var(--fail) 40%,transparent),color-mix(in srgb,var(--fail) 16%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fail) 45%,transparent)}.note-btn.is-correct,.note-btn.is-wrong{animation:answer-release 1.4s ease .3s forwards}.notes-staff{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.notes-clef-label{font-size:.85rem;font-weight:600;color:var(--text-muted)}.notes-staff-svg svg{display:block;max-width:none}.notes-result{min-height:24px;font-weight:600;text-align:center}.notes-result--ok{color:var(--ok)}.notes-result--fail{color:var(--fail)}@media (max-width: 640px){.notes-main{padding:12px 10px}.notes-pad{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.note-btn{flex:0 0 calc(25% - 8px);height:56px;font-size:1.35rem;border-radius:14px}}@media (prefers-reduced-motion: reduce){.note-btn,.note-btn:hover,.note-btn:focus-visible{transition:none}.note-btn.is-correct,.note-btn.is-wrong{animation:none}}.modes-answer,.chords-pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}.mode-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:0;min-height:56px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-raised-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-family:var(--font-display);font-size:1.05rem;line-height:1.2;text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,color .15s ease,transform .15s ease,background .15s ease,box-shadow .9s ease}.mode-btn:focus-visible,.mode-btn:active{border-color:var(--accent);color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);transition:border-color .12s ease,color .12s ease,transform .12s ease,background .12s ease,box-shadow .12s ease}@media (hover: hover){.mode-btn:hover{border-color:var(--accent);color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);transition:border-color .12s ease,color .12s ease,transform .12s ease,background .12s ease,box-shadow .12s ease}}.mode-btn.is-correct{border-color:color-mix(in srgb,var(--ok) 70%,transparent);color:var(--ok);background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 42%,transparent),color-mix(in srgb,var(--ok) 18%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 55%,transparent),0 0 28px color-mix(in srgb,var(--ok) 40%,transparent)}.mode-btn.is-wrong{border-color:color-mix(in srgb,var(--fail) 70%,transparent);color:var(--fail);background:linear-gradient(180deg,color-mix(in srgb,var(--fail) 40%,transparent),color-mix(in srgb,var(--fail) 16%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fail) 45%,transparent)}.mode-btn.is-correct,.mode-btn.is-wrong{animation:answer-release 1.4s ease .3s forwards}.mode-btn--back{grid-column:1 / -1;justify-self:start;justify-content:flex-start;min-height:36px;padding:0 12px;border-color:transparent;background:transparent;color:var(--text-dim);font-family:var(--font-body);font-size:.85rem;font-weight:600;margin-bottom:4px;text-align:left}.mode-btn--back:hover,.mode-btn--back:focus-visible{color:var(--text);border-color:transparent;background:transparent;box-shadow:none}@media (max-width: 640px){.mode-btn{min-height:48px;border-radius:12px}}@media (prefers-reduced-motion: reduce){.mode-btn,.mode-btn:hover,.mode-btn:focus-visible{transition:none}.mode-btn.is-correct,.mode-btn.is-wrong{animation:none}}@media (max-width: 640px){.trainer-title{font-size:1.5rem}.interval-mode-tab{height:34px;font-size:.8rem;padding:0 12px}.mode-hint{font-size:1rem;line-height:1.4}.keys-layout,.keys-main{gap:8px}.modes-answer,.chords-pad{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.chords-pad{max-height:140px;overflow-y:auto}.mode-btn{min-height:34px;padding:5px 8px;font-size:.74rem;border-radius:10px}.type-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:8px}.type-toggles--sevenths{grid-template-columns:repeat(3,minmax(0,1fr));padding:0;border:none;border-radius:0}.type-toggles-title{grid-column:1 / -1;margin-bottom:2px}.type-toggles .switch{justify-content:flex-end;width:100%}.switch[data-type=harmonic]{grid-column:1 / -1}.switch{gap:7px}.switch-label{font-size:.85rem}.switch-track{width:40px;height:24px}.switch-knob{width:20px;height:20px;top:2px;left:2px}.switch.on .switch-knob{transform:translate(16px)}.interval-result{min-height:1.4em}.chord-root{min-height:1.2em}.note-name-btn{min-height:34px;font-size:.95rem}.note-pad{gap:4px}}