@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(data:font/woff2;base64,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) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-cyrillic-wght-normal-Dvxsihut.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-greek-wght-normal-DL7QRZyv.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-vietnamese-wght-normal-usUDDRr7.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-latin-ext-wght-normal-Ch3YOpNY.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-latin-wght-normal-DHIcAJRg.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--font: "Manrope Variable", Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--bg: #f6f7fb;--surface: #ffffff;--surface-2: #f0f1f6;--border: #e3e5ee;--text: #0f1222;--muted: #61667a;--accent: #5b4ff0;--accent-hover: #4a3fe0;--accent-soft: #e8e6fe;--accent-text: #ffffff;--root: #3d31c4;--focus: #f97316;--focus-soft: #ffedd9;--warn: #b45309;--ok: #15803d;--ok-soft: #dcf5e4;--bad: #c62828;--bad-soft: #fde4e2;--key-white: #ffffff;--key-black: #1a1b24;--key-line: #c9ccd8;--header-bg: rgba(255, 255, 255, .78);--shadow-sm: 0 1px 2px rgba(15, 18, 34, .04), 0 1px 3px rgba(15, 18, 34, .06);--shadow-md: 0 2px 4px rgba(15, 18, 34, .04), 0 8px 24px rgba(15, 18, 34, .08);--radius: 16px;--radius-sm: 10px;--ease: cubic-bezier(.2, .7, .3, 1);color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #0b0c12;--surface: #14161e;--surface-2: #1c1f2a;--border: #282c3a;--text: #ecedf3;--muted: #9497a8;--accent: #8f86ff;--accent-hover: #a39cff;--accent-soft: #272552;--accent-text: #0c0b1d;--root: #bdb7ff;--focus: #ffa24d;--focus-soft: #4a2f16;--warn: #fbbf5a;--ok: #5ed38a;--ok-soft: #173424;--bad: #ff8a80;--bad-soft: #43201f;--key-white: #e6e7ee;--key-black: #08090d;--key-line: #444959;--header-bg: rgba(20, 22, 30, .72);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 2px 4px rgba(0, 0, 0, .25), 0 12px 28px rgba(0, 0, 0, .35);color-scheme:dark}}:root[data-theme=dark]{--bg: #0b0c12;--surface: #14161e;--surface-2: #1c1f2a;--border: #282c3a;--text: #ecedf3;--muted: #9497a8;--accent: #8f86ff;--accent-hover: #a39cff;--accent-soft: #272552;--accent-text: #0c0b1d;--root: #bdb7ff;--focus: #ffa24d;--focus-soft: #4a2f16;--warn: #fbbf5a;--ok: #5ed38a;--ok-soft: #173424;--bad: #ff8a80;--bad-soft: #43201f;--key-white: #e6e7ee;--key-black: #08090d;--key-line: #444959;--header-bg: rgba(20, 22, 30, .72);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 2px 4px rgba(0, 0, 0, .25), 0 12px 28px rgba(0, 0, 0, .35);color-scheme:dark}:root[data-theme=synthwave]{--bg: #120726;--surface: #1c0f3a;--surface-2: #2a1655;--border: #4b2a8a;--text: #f6e9ff;--muted: #b69be0;--accent: #ff2bd6;--accent-hover: #ff5fe3;--accent-soft: #4a1a6b;--accent-text: #1a0630;--root: #00f0ff;--focus: #ffd319;--focus-soft: #4a3a0a;--warn: #ffb347;--ok: #39ffb0;--ok-soft: #0e3a35;--bad: #ff5c7a;--bad-soft: #4a1230;--key-white: #efe6ff;--key-black: #0d0221;--key-line: #6b45b0;--header-bg: rgba(26, 10, 56, .75);--shadow-sm: 0 0 0 1px rgba(255, 43, 214, .12), 0 1px 6px rgba(255, 43, 214, .18);--shadow-md: 0 0 0 1px rgba(255, 43, 214, .16), 0 8px 28px rgba(0, 240, 255, .14);color-scheme:dark}:root[data-theme=synthwave]{background:linear-gradient(180deg,#0d0221,#1b0b3a 55%,#3a0f5c) fixed}:root[data-theme=synthwave] body{background:transparent}:root[data-theme=synthwave] .topbar{border-bottom-color:var(--accent);box-shadow:0 1px 14px #ff2bd659}:root[data-theme=synthwave] h1{text-shadow:0 0 14px rgba(255,43,214,.55)}:root[data-theme=synthwave] .game-root{text-shadow:0 0 18px rgba(0,240,255,.6)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}h1,h2{margin:0;line-height:1.2;letter-spacing:-.02em}h1{font-size:clamp(1.5rem,1.2rem + 1.2vw,1.9rem);font-weight:750}h2{font-size:1.02rem;font-weight:650;letter-spacing:-.01em}.muted{color:var(--muted)}.small{font-size:.85rem}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:var(--header-bg);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}.brand{display:inline-flex;align-items:center;gap:8px;font-weight:750;letter-spacing:-.02em;font-size:1.05rem}.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--root));color:var(--accent-text);font-size:1rem;box-shadow:var(--shadow-sm)}.topbar nav{flex:1;display:flex;gap:4px}.nav-item{color:var(--muted);font-size:.92rem;font-weight:550;text-decoration:none;padding:6px 12px;border-radius:999px;transition:background-color .15s var(--ease),color .15s var(--ease)}.nav-item.on{color:var(--text);background:var(--surface-2);font-weight:650}main{max-width:1100px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}.explorer,.lesson,.col{display:flex;flex-direction:column;gap:16px;min-width:0}.grid{display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 860px){.grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start}.grid>.col:last-child{position:sticky;top:76px}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:14px}.row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px}.key-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}.picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chip{min-width:44px;min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-weight:600;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .1s var(--ease)}.chip.wide{font-weight:500}.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text);box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 35%,transparent)}.badge{font-size:.72rem;font-weight:600;letter-spacing:.01em;padding:2px 9px;border-radius:999px;border:1px solid currentColor}.badge.warn{color:var(--warn)}.btn{min-height:40px;padding:6px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);font-weight:550;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease),box-shadow .15s var(--ease)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:650;box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 30%,transparent)}.btn.tiny{min-height:32px;padding:2px 10px;font-size:.85rem}.theme-picker{cursor:pointer;color:var(--text)}.btn:not(:disabled):active,.chip:active,.choice:not(:disabled):active,.triad:active{transform:scale(.97)}@media (hover: hover){.nav-item:hover{color:var(--text);background:var(--surface-2)}.chip:not(.on):hover,.btn:not(:disabled):not(.primary):hover,.choice:not(:disabled):hover,.triad:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.btn.primary:not(:disabled):hover{background:var(--accent-hover);border-color:var(--accent-hover)}}button:focus-visible,[role=button]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.piano{display:block;width:100%;max-height:260px;touch-action:manipulation;user-select:none;-webkit-user-select:none}.piano g{cursor:pointer;outline:none}.piano text{text-anchor:middle;pointer-events:none;font-weight:700}.piano .lbl{font-size:13px}.piano .deg{font-size:11px;font-weight:600}.piano rect{transition:fill .15s var(--ease)}.piano .white rect{fill:var(--key-white);stroke:var(--key-line)}.piano .black rect{fill:var(--key-black);stroke:var(--key-black)}.piano .white text{fill:#0f1222}.piano .black text{fill:#fff;font-size:10px}.piano .white.scale rect,.piano .black.scale rect,.piano .white.root rect,.piano .black.root rect{fill:var(--accent);stroke:var(--accent)}.piano .black.scale rect{stroke:var(--key-black);stroke-width:1.5}.piano .white.root rect,.piano .black.root rect{stroke:color-mix(in srgb,var(--accent) 35%,#fff);stroke-width:4}.piano.dim .white:not(.scale):not(.root):not(.wrong) rect{fill:#6b6e7b;stroke:#555866}.piano.dim .black:not(.scale):not(.root):not(.wrong) rect{fill:#3c3e49;stroke:#3c3e49}.piano .white.scale text,.piano .black.scale text,.piano .white.root text,.piano .black.root text{fill:var(--accent-text)}.piano .wrong rect{fill:var(--bad-soft);stroke:var(--bad);stroke-width:3}.piano .wrong text{fill:var(--bad)}.piano .focus rect{stroke:var(--focus);stroke-width:4}.piano g:active rect,.piano g:focus-visible rect{filter:brightness(.85)}.steps{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:8px}.steps li.current{background:var(--focus-soft);border-radius:8px;padding:4px 8px;margin-left:-8px}.answer{margin:12px 0 0;font-size:1.1rem;font-weight:600}.hint{margin:12px 0 0;font-size:.9rem}.degrees{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.degrees th{text-align:left;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:4px 6px 8px}.degrees td{padding:8px 6px;border-top:1px solid var(--border)}.degrees td.note{font-weight:700;font-size:1.05rem}.degrees tr.on td{background:var(--focus-soft)}.degrees .actions{text-align:right;white-space:nowrap}.degrees .actions .btn+.btn{margin-left:4px}.triads{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.triad{width:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease)}.triads li.on .triad{border-color:var(--focus);background:var(--focus-soft)}.triad .rn{grid-row:span 2;align-self:center;font-weight:800;font-size:1.2rem;letter-spacing:-.02em;min-width:2.4em}.triad .tn{font-weight:600}.triad .tq{font-size:.8rem}.circle{display:block;width:100%;max-width:380px;margin:0 auto;font-family:var(--font)}.circle text{text-anchor:middle;pointer-events:none}.circle .seg{cursor:pointer;outline:none}.circle .seg path{stroke:var(--surface);stroke-width:2;transition:fill .2s var(--ease)}.circle .major path{fill:var(--surface-2)}.circle .minor path{fill:var(--bg)}.circle .seg:hover path{filter:brightness(.94)}.circle .seg.lit path{fill:var(--accent-soft)}.circle .seg.sel path{fill:var(--accent)}.circle .seg.partner path{fill:var(--accent-soft)}.circle .seg:focus-visible path{stroke:var(--focus);stroke-width:3}.circle .name-maj{font-size:15px;font-weight:700;fill:var(--text)}.circle .name-min{font-size:11px;font-weight:600;fill:var(--text)}.circle .alt{font-size:9px;fill:var(--muted)}.circle .sel text{fill:var(--accent-text)}.circle .sig{font-size:9px;fill:var(--muted)}.circle .center-top{font-size:22px;font-weight:800;letter-spacing:-.02em;fill:var(--text)}.circle .center-bottom{font-size:11px;fill:var(--muted)}.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0}.facts dt{color:var(--muted);font-size:.9rem}.facts dd{margin:0;font-weight:600}@media (max-width: 480px){main{padding-top:16px}.card{padding:16px;border-radius:14px}.btn,.chip{min-height:44px}.degrees th:nth-child(3),.degrees td:nth-child(3){font-size:.85rem}}.block{display:block}.units{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.unit-link{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;transition:border-color .15s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}@media (hover: hover){.unit-link:not(.locked):hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:var(--shadow-md);transform:translateY(-1px)}}.unit-link>span:nth-child(2){flex:1}.unit-num{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--root);font-weight:800;font-variant-numeric:tabular-nums}.badge.ok{color:var(--ok);white-space:nowrap}a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.lesson-head h1{margin:2px 0 6px}.lesson-head p{margin:0}.tabs{display:flex;gap:4px;margin-top:16px;padding:4px;border-radius:12px;background:var(--surface-2);width:fit-content;max-width:100%;overflow-x:auto}.tab{min-height:38px;padding:6px 16px;border:none;border-radius:9px;background:none;cursor:pointer;color:var(--muted);font-weight:600;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease)}.tab.on{color:var(--text);background:var(--surface);box-shadow:var(--shadow-sm)}.learn-card p{margin:0 0 12px}.learn-card .piano,.learn-card .circle{margin-top:8px}.intro,.progress-line{margin:0}.question .prompt{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;margin-bottom:14px}.question>.piano{margin-top:12px}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.choice{min-height:52px;padding:8px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);font-weight:600;font-size:1.05rem;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .1s var(--ease)}.choice:disabled{cursor:default}.choice.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}.choice.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad);text-decoration:line-through}.feedback{margin:14px 0 0;padding:10px 14px;border-radius:12px;font-weight:600}.feedback.ok{background:var(--ok-soft);color:var(--ok)}.feedback.bad{background:var(--bad-soft);color:var(--bad)}.question .derivation,.hints{margin-top:12px}.hints .steps{margin-bottom:8px}.slots{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:6px}.slots li{display:flex;align-items:center}.slot{min-width:42px;height:42px;display:grid;place-items:center;padding:0 4px;border-radius:10px;border:1.5px dashed var(--border);font-weight:700;color:var(--muted);transition:background-color .15s var(--ease),border-color .15s var(--ease)}.slots li.filled .slot{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.slots li.current .slot{border:2px solid var(--focus);color:var(--focus)}.gap{min-width:26px;text-align:center;font-size:.75rem;font-weight:700;color:var(--muted)}.note-picker{margin-top:12px}.done h2{font-size:1.35rem}.xpbar{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.xpbar .lvl{font-weight:800;color:var(--root);white-space:nowrap;font-variant-numeric:tabular-nums}.xpbar .track{width:140px;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}.xpbar.compact .track{width:44px;height:6px}.xpbar .fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--root));transition:width .5s var(--ease)}.stat-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:2px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:inherit;text-decoration:none;font-size:.85rem;transition:border-color .15s var(--ease)}.stat-chip.on{border-color:var(--accent)}.streak{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}.gain{color:var(--ok);font-weight:600}.unit-link.locked{opacity:.55}.badge.muted{white-space:nowrap}.circle-card p{margin:8px 0}.badges,.skills{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.badges li{display:flex;gap:10px;align-items:flex-start}.badge-icon{font-size:1.3rem;line-height:1.2;color:var(--muted)}.badges li.earned .badge-icon{color:var(--warn)}.skills li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}.skills li>.small{grid-column:1 / -1}.boxes{letter-spacing:2px;color:var(--accent);white-space:nowrap}@media (max-width: 480px){.brand-name{display:none}.topbar{flex-wrap:wrap;gap:8px;padding-top:8px;padding-bottom:8px}.topbar nav{order:5;flex-basis:100%}.topbar .stat-chip{margin-left:auto}.nav-item{padding:6px 10px}}.score{font-variant-numeric:tabular-nums}.game-root{margin:4px 0;font-size:clamp(3rem,2rem + 6vw,4.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--root)}.game-root+.prompt{font-size:1.2rem;margin:0 0 8px}@media (max-width: 400px){.nav-item{padding:6px 8px;font-size:.85rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important}}