@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-wght-normal-ukD16Tqj.woff2) format("woff2");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}@font-face{font-family:Manrope;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-cyrillic-wght-normal-Dvxsihut.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-latin-wght-normal-DHIcAJRg.woff2) format("woff2");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}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-cyrillic-400-normal-BSMlKf0J.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-latin-500-normal-DSY6xOcd.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-cyrillic-500-normal-Bq9vWWag.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-latin-600-normal-BgSNZQsw.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-cyrillic-600-normal-CTOM6hUh.woff2) format("woff2")}:root{color-scheme:light}[data-theme=light]{--bg: #f3f1ea;--bg-glow-1: rgba(47, 130, 92, .1);--bg-glow-2: rgba(199, 141, 51, .1);--surface: #ffffff;--surface-soft: #f7f5ef;--border: rgba(28, 33, 30, .12);--text: #1c211e;--text-soft: #565f5a;--accent: #1f6d4a;--accent-strong: #164f36;--accent-bright: #34a06c;--accent-soft: #e1efe6;--amber: #b8792a;--amber-soft: #f4e3c8;--danger: #a3402c;--key-white: #fffdf9;--key-white-shadow: #cfc9ba;--key-black: #211d17;--shadow-sm: 0 4px 14px rgba(28, 33, 30, .08);--shadow-lg: 0 18px 40px rgba(28, 33, 30, .14);color-scheme:light}[data-theme=dark]{--bg: #12161a;--bg-glow-1: rgba(52, 211, 153, .09);--bg-glow-2: rgba(242, 181, 68, .08);--surface: #1a2027;--surface-soft: #212832;--border: rgba(233, 240, 236, .1);--text: #e9f0ec;--text-soft: #a2ada7;--accent: #34d399;--accent-strong: #1f8f68;--accent-bright: #6ee7b7;--accent-soft: #1d3327;--amber: #f2b544;--amber-soft: #3a2f18;--danger: #e2725a;--key-white: #eef0ee;--key-white-shadow: #9aa39e;--key-black: #0a0c0b;--shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);--shadow-lg: 0 24px 48px rgba(0, 0, 0, .5);color-scheme:dark}[data-theme=notebook]{--bg: #ece1c6;--bg-glow-1: rgba(76, 148, 104, .1);--bg-glow-2: rgba(184, 134, 59, .1);--surface: rgba(255, 253, 246, .62);--surface-soft: #f4ecd8;--border: rgba(44, 36, 24, .14);--text: #2c2418;--text-soft: #5b4d38;--accent: #2f6b48;--accent-strong: #23503a;--accent-bright: #4c9468;--accent-soft: #dfe9dc;--amber: #b8863b;--amber-soft: #efe1c1;--danger: #9c3b2c;--key-white: #fffdf6;--key-white-shadow: #c9b98d;--key-black: #241d14;--shadow-sm: 0 6px 18px rgba(44, 36, 24, .14);--shadow-lg: 0 12px 30px rgba(35, 27, 15, .22);color-scheme:light}:root,[data-theme]{--font-display: "Fraunces", Georgia, "Iowan Old Style", serif;--font-body: "Manrope", "Segoe UI", system-ui, sans-serif;--font-mono: "IBM Plex Mono", "Courier New", ui-monospace, monospace;--radius-lg: 20px;--radius-md: 14px;--radius-sm: 9px}[data-theme=notebook]{--font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;--font-body: "Iowan Old Style", "Palatino Linotype", Georgia, "Book Antiqua", serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;font-family:var(--font-body);color:var(--text);background:var(--bg);transition:background-color .2s ease,color .2s ease}a{color:var(--accent-strong)}.app-shell{min-height:100vh;background:radial-gradient(ellipse 60% 40% at 10% -10%,var(--bg-glow-1),transparent 55%),radial-gradient(ellipse 55% 45% at 100% 0%,var(--bg-glow-2),transparent 55%),var(--bg)}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(16px,4vw,40px);background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.topbar__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--text)}.topbar__mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--surface);font-size:1rem}.theme-switcher{display:flex;gap:6px;padding:4px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border)}.theme-switcher__btn{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--text-soft);background:transparent;border:none;border-radius:999px;padding:6px 12px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.theme-switcher__btn:hover{color:var(--text)}.theme-switcher__btn.is-active{background:var(--accent);color:var(--surface)}.theme-switcher__btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.theme-switcher__swatch{width:10px;height:10px;border-radius:50%;flex:none}.theme-switcher__swatch[data-swatch=light]{background:linear-gradient(135deg,#fff,#cfe8d8);border:1px solid rgba(0,0,0,.15)}.theme-switcher__swatch[data-swatch=dark]{background:linear-gradient(135deg,#1a2027,#34d399)}.theme-switcher__swatch[data-swatch=notebook]{background:linear-gradient(135deg,#f4ecd8,#2f6b48)}.topbar__switchers{display:flex;align-items:center;gap:10px}.locale-switcher{display:flex;gap:6px;padding:4px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border)}.locale-switcher__btn{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--text-soft);background:transparent;border:none;border-radius:999px;padding:6px 10px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.locale-switcher__btn:hover{color:var(--text)}.locale-switcher__btn.is-active{background:var(--accent);color:var(--surface)}.locale-switcher__btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.layout{max-width:1080px;margin:0 auto;padding:clamp(20px,4vw,44px) clamp(16px,4vw,40px) 60px}.hero{margin:0 0 clamp(24px,4vw,40px);padding-bottom:22px;border-bottom:3px double var(--accent-strong);text-align:center}.hero__kicker{margin:0 0 8px;font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--accent-strong)}.hero__title{margin:0 0 12px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,4.6vw,2.8rem);color:var(--text);text-wrap:balance}.hero__subtitle{margin:0 auto;max-width:46em;color:var(--text-soft);font-size:clamp(.95rem,1.6vw,1.08rem)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.card--wide{grid-column:1 / -1}.card{min-width:0;position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow-sm)}.card__title{margin:0 0 10px;font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--text);display:flex;align-items:center;gap:.6em}.card__index{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-family:var(--font-mono);font-size:.6em;font-weight:600}.card__hint{margin:0 0 16px;color:var(--text-soft);font-size:.94rem}.card__hint--tight{margin-top:-4px;margin-bottom:8px;font-size:.85rem}.divider{border:none;border-top:1px dashed var(--border);margin:18px 0}.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.row--wrap{align-items:flex-end}.row__buttons{display:flex;gap:10px;flex-wrap:wrap}.btn{font-family:var(--font-body);font-size:.95rem;font-weight:700;color:var(--accent-strong);background:var(--surface);border:2px solid var(--accent-strong);border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease;box-shadow:3px 3px color-mix(in srgb,var(--accent-strong) 20%,transparent)}.btn:hover:not(:disabled){background:var(--accent-soft)}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px color-mix(in srgb,var(--accent-strong) 20%,transparent)}.btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn--primary{background:var(--accent-strong);color:var(--surface)}.btn--primary:hover:not(:disabled){background:var(--accent)}.field{display:flex;flex-direction:column;gap:4px;font-size:.88rem}.field__label{color:var(--text-soft);font-size:.8rem}select,input[type=range]{font-family:var(--font-body);font-size:.95rem}select{padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-soft);color:var(--text);min-width:220px;max-width:100%}input[type=range]{accent-color:var(--accent-strong);width:180px}output{font-family:var(--font-mono);font-weight:700;color:var(--accent-strong);min-width:2.4em;text-align:right}.hand-choice{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;display:flex;gap:14px;align-items:center;margin:0;color:var(--text)}.hand-choice legend{font-size:.8rem;color:var(--text-soft);padding:0 6px}.hand-choice label{display:flex;align-items:center;gap:6px;cursor:pointer}.switch{display:flex;align-items:center;gap:10px;cursor:pointer;max-width:46em}.switch input{position:absolute;opacity:0;width:1px;height:1px}.switch__track{flex:none;width:44px;height:24px;border-radius:999px;background:var(--border);position:relative;transition:background-color .15s ease}.switch__track:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--key-white);box-shadow:0 1px 3px #0000004d;transition:transform .15s ease}.switch input:checked+.switch__track{background:var(--accent-strong)}.switch input:checked+.switch__track:after{transform:translate(20px)}.switch input:focus-visible+.switch__track{outline:3px solid var(--amber);outline-offset:2px}.switch__label{font-size:.9rem;color:var(--text-soft)}.status{margin:10px 0 0;font-size:.92rem;color:var(--text-soft);min-height:1.4em}.status--result{font-weight:700}.status--ok{color:var(--accent-strong)}.status--error{color:var(--danger)}.audio-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;color:var(--text-soft)}.audio-badge:before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}.audio-badge--ok{color:var(--accent-strong)}.audio-badge--wait{color:var(--text-soft)}.audio-badge--bad{color:var(--danger)}.piano-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}.piano{--white-w: 42px;--white-h: 150px;--black-w: 26px;--black-h: 92px;position:relative;display:flex;width:max-content;height:var(--white-h);padding:6px;background:linear-gradient(#241d14,#0e0c08)}.piano__white,.piano__black{border:none;padding:0 0 8px;cursor:pointer;font-family:var(--font-mono);display:flex;align-items:flex-end;justify-content:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.piano__white{position:relative;flex:none;width:var(--white-w);height:var(--white-h);background:linear-gradient(var(--key-white),color-mix(in srgb,var(--key-white) 80%,#b8ac8f));border-right:1px solid var(--key-white-shadow);border-radius:0 0 6px 6px;color:#6b6252;font-size:.68rem;z-index:1}.piano__white:after{content:attr(data-label)}.piano__white.is-done{background:linear-gradient(var(--surface-soft),color-mix(in srgb,var(--accent) 28%,var(--key-white)))}.piano__black.is-done{background:linear-gradient(color-mix(in srgb,var(--accent) 55%,var(--key-black)),var(--key-black))}.piano__black{position:absolute;top:6px;width:var(--black-w);height:var(--black-h);background:linear-gradient(var(--key-black),#000);border-radius:0 0 4px 4px;z-index:2;box-shadow:0 3px 6px #00000080}.piano__white:hover,.piano__black:hover{filter:brightness(1.06)}.piano__white:focus-visible,.piano__black:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}.piano__white.is-active{background:linear-gradient(var(--accent-soft),color-mix(in srgb,var(--accent-bright) 55%,var(--accent-soft)))}.piano__black.is-active{background:linear-gradient(var(--accent-bright),var(--accent-strong))}.piano__white.is-expected:before,.piano__black.is-expected:before{content:"";position:absolute;left:50%;top:8px;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 30%,transparent)}.exercise-status{margin-bottom:6px}.exercise-status__expected{font-family:var(--font-display);font-size:1.1rem;color:var(--accent-strong);margin:0 0 10px;min-height:1.4em}.progress{height:10px;border-radius:999px;background:var(--border);overflow:hidden}.progress__bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-bright));transition:width .25s ease}.exercise-status__meta{display:flex;gap:20px;margin:8px 0 0;font-size:.86rem;color:var(--text-soft);font-family:var(--font-mono)}.theory-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.theory-nav__btn{font-family:var(--font-body);font-size:.86rem;border:1px solid var(--accent-strong);background:transparent;color:var(--accent-strong);padding:7px 13px;border-radius:999px;cursor:pointer}.theory-nav__btn:hover{background:var(--accent-soft)}.theory-nav__btn.is-active{background:var(--accent-strong);color:var(--surface)}.theory-nav__btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.theory-content{border-left:3px solid var(--accent-strong);padding:4px 0 4px 16px}.theory-content h3{margin:0 0 8px;font-family:var(--font-display);color:var(--text)}.theory-content p{margin:0 0 10px;color:var(--text-soft)}.theory-content p:last-child{margin-bottom:0}.notebook-footer{text-align:center;margin-top:24px;padding-top:18px;border-top:1px dashed var(--border);font-size:.8rem;color:var(--text-soft)}.notebook-footer__roadmap{margin-top:4px}@media(max-width:860px){.grid{grid-template-columns:1fr}.card--wide{grid-column:1}}@media(max-width:560px){.piano{--white-w: 34px;--white-h: 120px;--black-w: 20px;--black-h: 74px}select{min-width:0;width:100%}.row{align-items:stretch}.hand-choice,.topbar{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}.topbar__brand{text-decoration:none}.topbar__nav{display:flex;gap:6px;margin-left:auto;margin-right:12px}.topbar__nav a{padding:6px 12px;border-radius:999px;font-size:.9rem;font-weight:700;color:var(--text-soft);text-decoration:none}.topbar__nav a:hover{background:var(--surface-soft)}.topbar__nav a.is-active{background:var(--accent-strong);color:var(--surface)}.page{display:flex;flex-direction:column;gap:20px}.crumbs{display:flex;gap:8px;font-size:.88rem;color:var(--text-soft)}.crumbs a{color:var(--accent-strong)}.page__head{padding-bottom:16px;border-bottom:3px double var(--accent-strong)}.page__kicker{margin:0 0 6px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}.page__title{margin:0 0 10px;font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.3rem);color:var(--text)}.page__summary{margin:0;color:var(--text-soft);max-width:70ch}.lesson-badge{display:inline-block;margin:12px 0 0;padding:4px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:.82rem;font-weight:700}.module{display:grid;gap:14px}.module__head{display:grid;gap:4px}.module__title{margin:0;font-size:1.25rem}.module__summary{margin:0;color:var(--text-soft)}.module__meta{margin:0;font-size:.85rem;color:var(--text-soft);letter-spacing:.04em;text-transform:uppercase}.lesson-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin:0;padding:0}.lesson-card{display:flex;align-items:flex-start;gap:14px;height:100%;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--text)}.lesson-card:hover{border-color:var(--accent);transform:translateY(-2px)}.lesson-card.is-done{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface))}.lesson-card__index{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-strong);color:var(--surface);font-family:var(--font-mono);font-weight:700}.lesson-card__body{display:flex;flex-direction:column;gap:6px;min-width:0}.lesson-card__title{font-family:var(--font-display);font-size:1.08rem;font-weight:600}.lesson-card__summary{color:var(--text-soft);font-size:.92rem}.lesson-card__meta{font-family:var(--font-mono);font-size:.76rem;color:var(--text-soft)}.lesson-card__state{margin-left:auto;color:var(--accent-strong);font-size:1.2rem}.theory__text{margin:0 0 12px;line-height:1.65;max-width:74ch}.theory__list{margin:0 0 12px;padding-left:22px;line-height:1.6;color:var(--text-soft);max-width:74ch}.theory__list li{margin-bottom:6px}.theory__note{margin:0 0 12px;padding:12px 16px;border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;line-height:1.6;max-width:74ch}.practice{padding:18px;margin-top:16px;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md)}.practice.is-running{border-color:var(--amber)}.practice.is-done{border-color:var(--accent)}.practice__title{margin:0 0 6px;font-family:var(--font-display);font-size:1.05rem}.practice__instruction{margin:0 0 12px;color:var(--text-soft);line-height:1.55}.practice__expected{margin:14px 0 8px;font-family:var(--font-mono);font-weight:700;color:var(--accent-strong)}.practice__meta{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 0;font-family:var(--font-mono);font-size:.82rem;color:var(--text-soft)}.repeats{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-soft)}.repeats__select{min-width:72px;padding:8px 10px}.repeats__select:disabled{opacity:.6;cursor:not-allowed}.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.pager .btn{text-decoration:none}.workbench{position:sticky;bottom:0;z-index:9;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);box-shadow:var(--shadow-lg)}.workbench__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}.workbench__toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 0;border:0;background:none;color:var(--accent-strong);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}.workbench__toggle:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;border-radius:var(--radius-sm)}.workbench__chevron{font-size:.75rem;line-height:1}.workbench__bar-info{font-family:var(--font-mono);font-size:.8rem;opacity:.75}.workbench__inner{max-width:1080px;margin:0 auto;padding:12px clamp(16px,4vw,40px) 16px}.workbench__controls{gap:12px;margin-bottom:10px}.workbench__bpm{font-family:var(--font-mono);font-weight:700}.workbench__settings{margin-bottom:12px}.workbench__settings>summary{cursor:pointer;font-size:.9rem;font-weight:700;color:var(--accent-strong);padding:6px 0}.workbench__settings[open]>summary{margin-bottom:8px}@media(max-width:720px){.lesson-list{grid-template-columns:1fr}.workbench__controls{gap:8px}}.staff-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;margin:12px 0 16px;padding-bottom:4px}.staff svg{display:block;max-width:none;height:auto}.staff__line,.staff__ledger{stroke:var(--text-soft);stroke-width:1.4}.staff__clef,.staff__meter{fill:var(--text);font-weight:600}.staff__meter{font-size:20px;text-anchor:middle;dominant-baseline:middle}.staff__head{fill:var(--text)}.staff__head--open{fill:none;stroke:var(--text);stroke-width:2.4}.staff__stem,.staff__flag,.staff__rest-mark{stroke:var(--text);stroke-width:2;fill:none}.staff__rest{fill:var(--text)}.staff__accidental{fill:var(--text);font-size:20px}.staff__name{fill:var(--text-soft);font-size:12px;text-anchor:middle}.staff__note.is-done .staff__head,.staff__note.is-done .staff__rest{fill:var(--accent-bright)}.staff__note.is-done .staff__head--open{fill:none;stroke:var(--accent-bright)}.staff__note.is-done .staff__stem,.staff__note.is-done .staff__flag{stroke:var(--accent-bright)}.staff__note.is-current .staff__head{fill:var(--accent)}.staff__note.is-current .staff__head--open{fill:none;stroke:var(--accent)}.staff__note.is-current .staff__stem,.staff__note.is-current .staff__flag,.staff__note.is-current .staff__accidental{stroke:var(--accent);fill:var(--accent)}.theory__figure{margin:0}.theory__figure figcaption{color:var(--text-soft);font-size:.9rem}.theory__listen{margin-bottom:12px}