:root{--bg: #ffffff;--wash: #e4f1f8;--panel: #ffffff;--ink: #10243a;--text: #1c3248;--muted: #4f647a;--rule: #dbe5ec;--accent: #1f6fa8;--accent-ink: #ffffff;--sky: #e4f1f8;--beige: #f9f1e1;--amber: #f2a33a;--signal: #d4552f;--display: "Segoe UI Variable Display", "SF Pro Display", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;--key-white: #ffffff;--key-white-ink: #10243a;--key-black: #10243a;--key-black-ink: #f4f8fb;--key-active: #1f6fa8;--key-active-root: #d4552f;--key-active-target: #1f8a5a;--marginal: #f2a33a;--warn-ink: #96560a;--an-skin: #f4e4da;--an-air: #fffdfb;--an-tongue: #e8a09d;--an-bone: #efe6cf;--an-cartilage: #bcd9e8;--an-fold: #d96f6a;--an-lung: #f6cfcb;--an-ink: #5b4a44;--an-brain: #e6c6c1;--an-cord: #f0dfb6;--an-lig: #c19a5a;--an-disc: #a9cbdb;--an-tfold: #f3e6e1;--string: #8a9db0;--fret: #c5d3de;color-scheme:light;--inst-scale: 1.8}@media(min-width:1100px){:root{--inst-scale: 1.55}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0b1726;--wash: #173048;--panel: #12243a;--ink: #eaf2f8;--text: #d5e4ef;--muted: #a9bfd0;--rule: #223a55;--accent: #7dbbe6;--accent-ink: #0b1726;--sky: #173048;--beige: #2b2a26;--amber: #f2a33a;--signal: #ff8f68;--key-white: #e9f0f5;--key-white-ink: #10243a;--key-black: #07101b;--key-black-ink: #e9f0f5;--key-active: #7dbbe6;--key-active-root: #ff8f68;--key-active-target: #4ad189;--marginal: #f2a33a;--warn-ink: #f2b560;--an-skin: #3b2e2d;--an-air: #0e1117;--an-tongue: #a85b5e;--an-bone: #8c8573;--an-cartilage: #4f6b7c;--an-fold: #c4575a;--an-lung: #5d3b3b;--an-ink: #cdbfb8;--an-brain: #73565a;--an-cord: #a98f66;--an-lig: #c9a460;--an-disc: #5a8294;--an-tfold: #cdb7b1;--string: #56708a;--fret: #2d4660;color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--display);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.2}h1{font-size:1.7rem;margin:0 0 .5rem;letter-spacing:-.03em}h2{font-size:1.35rem;margin:0 0 .5rem}h3{font-size:1.1rem;margin:0 0 .35rem}h4{font-size:1rem;margin:0 0 .3rem}input[type=range],input[type=checkbox]{accent-color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button,select,input{font:inherit;color:inherit}input[type=text],input[type=number],input:not([type]){background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:.3rem .5rem}a{color:var(--accent)}.app-shell{min-height:100%;display:flex;flex-direction:column}.app-nav{display:flex;align-items:center;gap:1.25rem;padding:0 1rem;min-height:3.1rem;border-bottom:1px solid var(--rule);background:var(--panel)}.app-nav__brand{font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:-.025em;margin-right:auto}.app-nav a{text-decoration:none;color:var(--muted);font-size:.95rem;font-weight:500}.app-nav a.active,.app-nav a:hover{color:var(--ink)}.app-nav__links a{display:flex;align-items:center;min-height:3.1rem;border-bottom:3px solid transparent}.app-nav__links a.active{border-bottom-color:var(--accent)}.lang-toggle{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden}.lang-toggle button{border:none;background:transparent;padding:.3rem .7rem;cursor:pointer;font-size:.85rem;color:var(--muted)}.lang-toggle button.active{background:var(--accent);color:var(--accent-ink)}.app-main{flex:1;padding:.75rem 1rem 1rem;max-width:1360px;width:100%;margin:0 auto}.panel{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:1rem}.panel>:first-child,.vl-card>:first-child{margin-top:0}.panel>:last-child,.vl-card>:last-child{margin-bottom:0}.panel+.panel{margin-top:.75rem}.stack{display:flex;flex-direction:column;gap:.75rem}.inset{background:var(--wash);border-radius:12px;padding:.75rem 1rem}.stack>.panel+.panel{margin-top:0}.row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.btn{border:1px solid transparent;background:var(--wash);color:var(--ink);padding:.4rem .85rem;border-radius:999px;cursor:pointer;font-size:.9rem;font-weight:500}.btn:hover{border-color:var(--accent)}.btn.active:hover{border-color:transparent;filter:brightness(1.08)}.btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}select.device-select{max-width:100%;border:1px solid var(--rule);background:var(--wash);border-radius:10px;padding:.4rem .7rem}.muted{color:var(--muted)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted)}.status-dot.ok{background:var(--key-active-target)}.status-dot.warn{background:var(--key-active-root)}.lesson-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}.lesson-list a{display:block;padding:.45rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink)}.lesson-list a:hover,.lesson-list a.active{background:var(--wash)}.lesson-group-label{text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;color:var(--muted);margin:0 0 .3rem .8rem}.lesson-list .lesson-order{color:var(--muted);font-size:.8rem;margin-right:.5rem}.term-chip{max-width:100%;overflow-wrap:anywhere;flex-wrap:wrap;display:inline-flex;gap:.4rem;align-items:baseline;background:var(--wash);border-radius:999px;padding:.2rem .7rem;font-size:.85rem;margin:.15rem}.term-chip .ru{color:var(--muted)}.exercise-choices{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.exercise-feedback{margin-top:.75rem;font-size:.9rem}.exercise-feedback.correct{color:var(--key-active-target)}.exercise-feedback.incorrect{color:var(--key-active-root)}.chord-table-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}.piano-chord-cell{width:130px;display:flex;flex-direction:column;align-items:center;gap:.25rem}.piano-chord-cell-name{margin:0;font-size:.85rem;font-weight:600}.instrument-toggle{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;margin-bottom:1rem}.instrument-toggle button{border:none;background:transparent;padding:.45rem 1.1rem;cursor:pointer;color:var(--muted)}.instrument-toggle button.active{background:var(--accent);color:var(--accent-ink)}.chord-recognizer-result{font-size:1.4rem;font-weight:700;margin:.75rem 0 .25rem}.chord-recognizer-alt{color:var(--muted);font-size:.9rem}.app-nav a.app-nav__brand{color:var(--ink);font-size:1rem}.app-footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.25rem;justify-content:space-between;padding:.75rem 1rem 1rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.8rem}.app-footer a{color:var(--muted)}.home-lead{font-size:1.1rem;line-height:1.55;max-width:46rem;margin-bottom:0}.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.home-card{color:inherit;text-decoration:none;margin:0!important;transition:border-color .15s,background .15s}.home-card.sky{background:var(--sky);border-color:transparent}.home-card.beige{background:var(--beige);border-color:transparent}.home-card h3{margin:.2rem 0 .35rem;font-size:1.15rem}.home-card p{margin:0;color:var(--muted);line-height:1.5}.home-card:hover h3{color:var(--accent)}.home-tag{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.home-h{margin:.25rem 0 .6rem}.home-cta{margin-top:1rem}.home-facts{margin:.9rem 0 0;font-size:.9rem;color:var(--muted)}.home-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.75rem}.home-units ul{margin:.4rem 0 .6rem;padding-left:1.1rem;display:grid;gap:.25rem}.home-units .home-count{margin:0;font-size:.85rem}.home-hero{background:var(--beige);border-color:transparent}.home-card:hover{border-color:var(--accent)}.app-nav__links{display:contents}@media(max-width:720px){.app-nav{flex-wrap:wrap;gap:0 1rem;padding:.35rem .75rem 0;min-height:0}.app-nav__links{display:flex;order:3;flex-basis:100%;gap:1.1rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.app-nav__links a{min-height:2.75rem}.lang-toggle button{padding:.4rem .8rem}.app-main{padding:.5rem .5rem .75rem}.panel{padding:.75rem;border-radius:12px}.app-footer{padding:.6rem .75rem .9rem}}@media(pointer:coarse){.btn{min-height:2.4rem}}.instrument-scroll{overflow-x:auto}.guide h3{margin:.8rem 0 .2rem;font-size:1.05rem}.guide p{font-family:var(--serif);font-size:1.05rem;line-height:1.6;max-width:46rem}.home-guides{margin:0;padding-left:1.2rem;display:grid;gap:.5rem}a.btn{display:inline-block;text-decoration:none;color:inherit}a.btn.active{color:var(--accent-ink)}.reading{font-family:var(--serif);font-size:1.05rem;line-height:1.6;max-width:46rem}.lessons-layout{flex-direction:row;align-items:flex-start}.lessons-nav{width:260px;flex-shrink:0}@media(max-width:720px){.lessons-layout{flex-direction:column;align-items:stretch}.lessons-nav{width:auto;order:2}}.app-footer__links{display:flex;flex-wrap:wrap;gap:.3rem 1.25rem;justify-content:flex-end}.build-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;letter-spacing:.02em;-webkit-user-select:all;user-select:all}@media(max-width:960px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.home-grid{grid-template-columns:1fr}}.home-grid>.panel,.home-units>.panel{margin-top:0}@media(max-width:600px){.home-units{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.5rem;margin:0 -.5rem;padding:0 .5rem .25rem;scrollbar-width:none}.home-units>.panel{flex:0 0 82%;scroll-snap-align:start}}.piano-keyboard{width:calc(var(--vw) * var(--inst-scale) * 1px);max-width:none;height:auto;display:block;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none}.piano-key{cursor:pointer;stroke:var(--rule);stroke-width:.5;transition:fill .05s ease}.piano-key--white{fill:var(--key-white)}.piano-key--black{fill:var(--key-black)}.piano-key.is-pressed.piano-key--white,.piano-key.is-active.piano-key--white,.piano-key.is-pressed.piano-key--black,.piano-key.is-active.piano-key--black{fill:var(--key-active)}.piano-key.is-root{fill:var(--key-active-root)}.piano-key.is-target{fill:var(--key-active-target)}.piano-key-label{font-size:8px;fill:var(--key-white-ink);text-anchor:middle;pointer-events:none}.fretboard{width:calc(var(--vw) * var(--inst-scale) * 1px);max-width:none;height:auto;display:block;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none}.fretboard-neck{fill:var(--wash);rx:6}.fret-line{stroke:var(--fret);stroke-width:1.5}.fret-nut{stroke:var(--ink);stroke-width:3.5}.fretboard-string{stroke:var(--string)}.fret-marker{fill:var(--rule)}.fret-number{font-size:8px;fill:var(--muted);pointer-events:none}.fretboard-open-name{font-size:9px;font-weight:600;fill:var(--ink);pointer-events:none}.fretboard-open-octave{font-size:7px;font-weight:400;fill:var(--muted)}.fret-hit{fill:transparent;cursor:pointer}.fret-hit:hover+.fret-note:not(.is-active):not(.is-pressed){fill:color-mix(in srgb,var(--accent) 30%,transparent)}.fret-note{fill:transparent;stroke:transparent;pointer-events:none}.fret-note.is-pressed,.fret-note.is-active{fill:var(--key-active)}.fret-note.is-root{fill:var(--key-active-root)}.fret-note.is-target{fill:var(--key-active-target)}.fret-note-label{font-size:8px;fill:var(--accent-ink);text-anchor:middle;pointer-events:none}