:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b1120;--surface:#141c2e;--surface-2:#1b2540;--line:#263150;--text:#f1f4fa;--text-muted:#8a94ad;--accent:#f2b65b;--on-accent:#1a1405;--ring-next:#8e7cff;--hand-l:#8e7cff;--on-hand-l:#0b1120;--hand-r:#f2b65b;--on-hand-r:#1a1405;--chord-fill:#5ab0f0;--on-chord:#0b1120;--warning:#ff7a6b;--contour:#ffffff14;--font-display:"Golos Text", "Noto Music", system-ui, sans-serif;--fw-display:600;--fs-display:40px;--lh-display:1.1;--ls-display:-.01em;--font-display-landing:"Golos Text", "Noto Music", system-ui, sans-serif;--fw-display-landing:600;--fs-display-landing:56px;--lh-display-landing:1.05;--ls-display-landing:-.01em;--font-title:"Golos Text", "Noto Music", system-ui, sans-serif;--fw-title:600;--fs-title:28px;--lh-title:1.2;--font-wordmark:"Unbounded", "Golos Text", "Noto Music", system-ui, sans-serif;--fw-wordmark:600;--fs-wordmark:24px;--lh-wordmark:1.1;--ls-wordmark:.3em;--font-body:"Golos Text", "Noto Music", system-ui, sans-serif;--fw-body:400;--fs-body:16px;--lh-body:1.5;--font-label:"Golos Text", "Noto Music", system-ui, sans-serif;--fw-label:500;--fs-label:13px;--lh-label:1.4;--font-note-label:"JetBrains Mono", "Noto Music", ui-monospace, monospace;--fw-note-label:600;--fs-note-label:24px;--font-tab-play:"JetBrains Mono", "Noto Music", ui-monospace, monospace;--fw-tab-play:600;--fs-tab-play:28px;--font-mono:"JetBrains Mono", "Noto Music", ui-monospace, monospace;--fw-mono:500;--fs-mono:16px;--font-music-glyph:"Noto Music", system-ui, sans-serif;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-pill:999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f7f3ec;--surface:#fffdfa;--surface-2:#efe8dd;--line:#ddd4c7;--text:#2a2520;--text-muted:#6b6259;--accent:#9a5a2c;--on-accent:#fff;--ring-next:#3f6d5d;--hand-l:#4b3ed0;--on-hand-l:#fff;--hand-r:#f2b65b;--on-hand-r:#1a1405;--chord-fill:#166fb3;--on-chord:#fff;--warning:#b3261e;--contour:#2a252022}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f7f3ec;--surface:#fffdfa;--surface-2:#efe8dd;--line:#ddd4c7;--text:#2a2520;--text-muted:#6b6259;--accent:#9a5a2c;--on-accent:#fff;--ring-next:#3f6d5d;--hand-l:#4b3ed0;--on-hand-l:#fff;--hand-r:#f2b65b;--on-hand-r:#1a1405;--chord-fill:#166fb3;--on-chord:#fff;--warning:#b3261e;--contour:#2a252022}*,:before,:after{box-sizing:border-box}:root{--pan-shell-hi:#2e3a5a;--pan-shell-mid:#1b2440;--pan-shell-lo:#0e1526;--pan-field-hi:#2a3552;--pan-field-lo:#161e33;--pan-rim:#3c4a6e;--pan-rim-lit:#ffffff59;--pan-label:var(--text);--pan-label-muted:var(--text-muted);--pan-photo-filter:brightness(.72) saturate(.9);--strip-ink-r:var(--hand-r);--strip-ink-l:var(--hand-l);--strip-mark-r:transparent;--strip-mark-l:transparent}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--pan-shell-hi:#cda57c;--pan-shell-mid:#a98258;--pan-shell-lo:#6e4e33;--pan-field-hi:#c49c74;--pan-field-lo:#8e6a48;--pan-rim:#5e4430;--pan-rim-lit:#ffffff73;--pan-label:#1e1813;--pan-label-muted:#3e342b;--pan-photo-filter:none;--strip-ink-r:var(--text);--strip-ink-l:var(--text);--strip-mark-r:var(--hand-r);--strip-mark-l:var(--hand-l)}}:root[data-theme=light]{--pan-shell-hi:#cda57c;--pan-shell-mid:#a98258;--pan-shell-lo:#6e4e33;--pan-field-hi:#c49c74;--pan-field-lo:#8e6a48;--pan-rim:#5e4430;--pan-rim-lit:#ffffff73;--pan-label:#1e1813;--pan-label-muted:#3e342b;--pan-photo-filter:none;--strip-ink-r:var(--text);--strip-ink-l:var(--text);--strip-mark-r:var(--hand-r);--strip-mark-l:var(--hand-l)}:root[data-theme=dark] .only-light,:root[data-theme=light] .only-dark{display:none}@media (prefers-color-scheme:light){:root:not([data-theme]) .only-dark{display:none}}@media not all and (prefers-color-scheme:light){:root:not([data-theme]) .only-light{display:none}}html{background:var(--bg);color:var(--text);font:var(--fw-body) var(--fs-body) / var(--lh-body) var(--font-body);font-variant-numeric:tabular-nums;scrollbar-color:var(--line) var(--bg);-webkit-text-size-adjust:100%}body{min-height:100svh;margin:0}.page{overflow-x:clip}::selection{background:var(--accent);color:var(--on-accent)}input,textarea{caret-color:var(--accent)}:focus-visible{outline:3px solid var(--ring-next);outline-offset:2px;border-radius:4px}a{color:var(--text);-webkit-text-decoration-color:var(--text-muted);text-decoration-color:var(--text-muted);text-underline-offset:3px}a:visited{color:var(--text-muted)}p,h1,h2,h3{margin:0}.muted{color:var(--text-muted)}.topbar,main,.footer,.choose{width:min(100%,1120px);margin-inline:auto;padding-inline:16px}@media (min-width:600px){.topbar,main,.footer,.choose{padding-inline:32px}}.topbar{justify-content:space-between;align-items:center;min-height:56px;display:flex}.wordmark{font:var(--fw-wordmark) 18px / 1 var(--font-wordmark);letter-spacing:var(--ls-wordmark)}.lang{gap:4px;display:flex}.lang a{min-width:44px;min-height:44px;font:var(--fw-label) var(--fs-label) / 1 var(--font-mono);color:var(--text-muted);place-items:center;text-decoration:none;display:inline-grid}.lang a[aria-current=page]{color:var(--text)}.lang a:hover{text-decoration:underline}.hero{--halo:1.2;grid-template-areas:"text""pan""hint""chips""actions";justify-items:start;padding-block:24px 32px;display:grid}.hero-text{grid-area:text;gap:16px;max-width:480px;display:grid}.pan-wrap{grid-area:pan;justify-self:center;width:min(100vw - 32px,50svh,560px);margin-block:10% 4%}.hint{font:var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-label);color:var(--text-muted);grid-area:hint;justify-self:center;min-height:20px;transition:opacity .4s}.hint.is-gone{opacity:0}.scales{grid-area:chips;justify-self:stretch;justify-items:center;display:grid}.more-scales,.more-scales:visited,.clip-lesson,.clip-lesson:visited{min-height:44px;font:var(--fw-label) var(--fs-label) / 1.2 var(--font-label);color:var(--text-muted);text-align:center;align-items:center;display:inline-flex}.more-scales:hover,.clip-lesson:hover{color:var(--text)}.chips{scrollbar-width:none;justify-content:safe center;justify-self:stretch;gap:8px;margin-inline:-16px;padding-block:12px 4px;padding-inline:16px;display:flex;overflow-x:auto}.hero>.actions{grid-area:actions;width:100%;margin-top:16px}.hero>.actions .btn-primary{width:100%}@media (min-width:600px){.chips{flex-wrap:wrap;justify-content:center;margin-inline:0;padding-inline:0}.hero>.actions .btn-primary{justify-self:start;width:auto}}@media (min-width:900px) and (min-height:500px) and (orientation:landscape){.hero{--halo:1.35;grid-template:".pan"1fr"text pan""hint pan""actions pan"".pan"1fr".chips"/minmax(320px,480px) minmax(0,640px);justify-content:center;align-items:start;column-gap:96px;padding-block:32px 48px}.pan-wrap{width:min(100%,60svh,640px);margin-block:17.5%}.hint{justify-self:start;margin-top:16px}.chips{justify-content:center;padding-top:0}}.pan-stage{aspect-ratio:1;touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:50%;position:relative}.pan-stage>svg{width:100%;height:100%;position:absolute;inset:0}.pan-stage>canvas.sand{inset:calc((var(--halo) - 1) / -2 * 100%);width:calc(var(--halo) * 100%);height:calc(var(--halo) * 100%);pointer-events:none;position:absolute}.pan-stage:focus-visible{outline-offset:6px;border-radius:50%}.svg-defs{width:0;height:0;position:absolute;overflow:hidden}.pan-svg{display:block;overflow:visible}.pan-svg text{font-variant-numeric:tabular-nums;text-anchor:middle;dominant-baseline:central;pointer-events:none}.pan-photo{filter:var(--pan-photo-filter)}.pan-shell{stroke:var(--pan-rim);stroke-width:2px}.pan-shell.on-photo{fill:#0000}.pan-contour{fill:none;stroke:var(--contour);stroke-width:1px}.pan-ding-ring{fill:none;stroke:var(--ring-next);stroke-opacity:.4;stroke-width:2px;pointer-events:none}.pf-face{stroke:var(--pan-rim);stroke-width:1.5px}.pf.on-photo .pf-face{fill-opacity:.3}.pf-inner{fill:none;stroke:var(--pan-rim);stroke-width:1px}.pf-tick{stroke:var(--pan-label-muted);stroke-width:3px;stroke-linecap:round}.pf-tab{font:600 24px var(--font-note-label);fill:var(--pan-label)}.pf-ding .pf-tab{font-size:28px}.pf-note{font:500 13px var(--font-mono);fill:var(--pan-label-muted)}.pf.on-photo text{paint-order:stroke;stroke:color-mix(in srgb, var(--bg) 75%, transparent);stroke-width:4px;stroke-linejoin:round}.pan-top .pf,.pan-top .pz{cursor:pointer;touch-action:none}.pz-hit{fill:#0000}.pz-tak .pz-face{fill:var(--contour);stroke:var(--pan-rim);stroke-width:1px}.pz-ghost .pz-face{fill:none;stroke:var(--text-muted);stroke-width:1px}@media (hover:hover) and (pointer:fine){.pan-top .pf:hover .pf-face,.pan-top .pz:hover .pz-face{stroke:var(--ring-next);stroke-width:2px}}.pf.is-lit .pf-shape{filter:url(#site-glow)}.pf.is-lit .pf-face{fill:var(--hand-r);fill-opacity:1;stroke:var(--pan-rim-lit)}.pf.is-lit[data-hand=L] .pf-face{fill:var(--hand-l)}.pf.is-lit text{fill:var(--on-hand-r);stroke:none}.pf.is-lit[data-hand=L] text{fill:var(--on-hand-l)}.pz.is-lit .pz-face{fill:var(--hand-r);filter:url(#site-glow)}.pz.is-lit[data-hand=L] .pz-face{fill:var(--hand-l)}.pf-next,.pz-next{display:none}.is-next:not(.is-lit)>.pf-next,.is-next:not(.is-lit)>.pz-next{display:inline}.cue-back{fill:none;stroke:var(--pan-shell-lo);stroke-opacity:.55;stroke-width:14px}.cue{fill:none;stroke:var(--hand-r);stroke-width:10px;stroke-dasharray:19 14}[data-next-hand=L] .cue{stroke:var(--hand-l)}.chip{border:1px solid var(--line);min-height:44px;color:var(--text-muted);font:var(--fw-label) var(--fs-label) / 1 var(--font-mono);cursor:pointer;background:0 0;border-radius:22px;flex:none;padding:0 14px}.chip[aria-pressed=true]{background:var(--surface-2);color:var(--text);border-color:var(--text-muted)}.chip:hover{color:var(--text)}.topbar-end{align-items:center;gap:4px;display:flex}.theme-toggle{min-height:44px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:22px;place-items:center;padding:0 4px;display:inline-grid}.theme-toggle:disabled{cursor:default}.tt-track{border:1px solid var(--line);background:var(--surface-2);border-radius:16px;grid-template-columns:1fr 1fr;place-items:center;width:60px;height:32px;padding:0 3px;display:grid;position:relative}.tt-thumb{background:var(--surface);width:26px;height:26px;box-shadow:0 0 0 1px var(--line);border-radius:50%;transition:transform .2s;position:absolute;top:2px;left:2px;transform:translate(28px)}.tt-icon{fill:currentColor;width:18px;height:18px;position:relative}.tt-sun{color:var(--text-muted)}.tt-moon{color:var(--text)}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .tt-thumb{transform:none}:root:not([data-theme=dark]) .tt-sun{color:var(--text)}:root:not([data-theme=dark]) .tt-moon{color:var(--text-muted)}}:root[data-theme=light] .tt-thumb{transform:none}:root[data-theme=light] .tt-sun{color:var(--text)}:root[data-theme=light] .tt-moon{color:var(--text-muted)}@media (max-width:419px){.topbar{gap:8px}.wordmark{font-size:14px}.topbar-end,.lang{gap:0}.theme-toggle{padding:0 2px}}@media (hover:hover) and (pointer:fine){.theme-toggle:not(:disabled):hover .tt-track{border-color:var(--text-muted)}}.sound-btn{width:48px;height:48px;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:24px;place-items:center;display:inline-grid}.sound-btn:disabled{opacity:.45;cursor:default}.sound-btn .icon{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.sound-btn .i-body{fill:currentColor;fill-opacity:.2}.sound-btn[aria-pressed=true] .i-off,.sound-btn[aria-pressed=false] .i-on{display:none}.sound-btn[aria-pressed=false],.sound-btn.has-error{color:var(--text-muted)}.sound-err{font:var(--fw-label) var(--fs-label) / 1.2 var(--font-label);color:var(--text-muted)}.sound-err:empty{display:none}h1{font:var(--fw-display-landing) clamp(36px, 6vw, var(--fs-display-landing)) / var(--lh-display-landing) var(--font-display-landing);letter-spacing:var(--ls-display-landing);text-wrap:balance}.subline{color:var(--text-muted);max-width:60ch}.actions{gap:12px;margin-top:8px;display:grid}.stores{flex-wrap:wrap;gap:12px;display:flex}.btn{font:var(--fw-title) var(--fs-body) / 1.2 var(--font-body);border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:0 20px;text-decoration:none;display:inline-flex}.btn-primary,.btn-primary:visited{background:var(--accent);min-height:52px;color:var(--on-accent)}.btn-primary:active{filter:brightness(.92)}.btn-secondary,.btn-secondary:visited{background:var(--surface-2);min-height:48px;color:var(--text);border:1px solid var(--line)}.btn.is-soon{opacity:.45;cursor:default}.soon{font:var(--fw-label) var(--fs-label) / 1 var(--font-label);color:var(--text-muted)}.section{gap:12px;max-width:640px;padding-top:64px;display:grid}@media (min-width:900px){.section{padding-top:96px}}.section.has-screen>.shot{order:1;margin-top:4px}@media (min-width:900px){.section.has-screen{max-width:none;display:block}.section.has-screen>:not(.shot){max-width:640px}.section.has-screen>h2{margin-bottom:16px}.section.has-screen>h2~*{margin-top:12px}.section.has-screen>.clip{margin-top:20px}.section.has-screen>.shot{float:right;clear:right;margin:0 0 32px 64px}}h2{font:var(--fw-title) var(--fs-title) / var(--lh-title) var(--font-title);margin-bottom:4px}h3{font:var(--fw-title) var(--fs-body) / var(--lh-body) var(--font-body);margin-top:16px}.section p{max-width:60ch}.plans{gap:8px;margin:0;padding:0;list-style:none;display:grid}.plan{background:var(--surface-2);border:2px solid var(--line);border-radius:14px;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;min-height:56px;padding:12px 16px;display:grid}.plan-name{font-weight:var(--fw-title)}.price{font:var(--fw-mono) var(--fs-body) / 1 var(--font-mono);grid-area:1/2}.badge{background:var(--accent);color:var(--on-accent);font:var(--fw-label) var(--fs-label) / 1.4 var(--font-label);border-radius:8px;justify-self:start;padding:2px 8px}.per-month{color:var(--text-muted);font:var(--fw-label) var(--fs-label) / 1.4 var(--font-mono);grid-column:1/-1}.elsewhere{border-top:1px solid var(--line);gap:12px;margin-top:8px;padding-top:16px;display:grid}.elsewhere .links{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.lesson{gap:16px;margin-top:16px;display:grid}.lesson-head{gap:4px;display:grid}.lesson-head h3{margin-top:0}.term{font-style:italic}.strip{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;display:grid}.slot{background:var(--surface-2);border:2px solid #0000;border-radius:10px;justify-items:center;gap:6px;padding-block:10px 8px;display:grid}.slot .sym{font:600 20px / 1 var(--font-mono);color:var(--strip-ink-r);border-bottom:3px solid var(--strip-mark-r);padding-bottom:3px}.slot[data-hand=L] .sym{color:var(--strip-ink-l);border-bottom-color:var(--strip-mark-l)}.slot.is-rest{background:0 0}.slot.is-rest .sym{border-bottom-color:#0000}.slot .count{font:var(--fw-label) var(--fs-label) / 1 var(--font-mono);color:var(--text-muted)}.slot.is-accent .sym:after{content:">";vertical-align:super;margin-left:1px;font-size:11px}.slot.is-now{border-color:var(--ring-next)}.lesson-play{align-items:center;gap:24px;display:flex}.pan-mini{aspect-ratio:1;flex:none;width:min(200px,45vw);height:auto}.pan-mini .pf-note,.pan-mini .pf-tick{display:none}.pan-mini .pf-tab{font-size:34px}.pan-mini .pf-ding .pf-tab{font-size:40px}.listen[aria-pressed=true]{border-color:var(--ring-next)}.btn:disabled{opacity:.45;cursor:default}button.btn{cursor:pointer}.clip{flex-wrap:wrap;align-items:center;gap:4px 20px;margin-top:8px;display:flex}.clip-lesson{text-align:left}.clip-btn{position:relative;overflow:hidden}.clip-bar{background:var(--accent);transform-origin:0;height:3px;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.shot{width:280px;max-width:100%;margin:0}.screen{border-radius:var(--radius-lg);border:1px solid var(--line);width:100%;height:auto;display:block}.shot figcaption{text-align:center;font:var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-label);color:var(--text-muted);margin-top:8px}.scene-art{width:min(100vw,1600px);margin-inline:calc(50% - min(50vw,800px));display:block;-webkit-mask-image:linear-gradient(#0000 0,#000 18% 75%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 18% 75%,#0000 100%)}.scene-art img{aspect-ratio:4/5;object-fit:cover;object-position:center bottom;width:100%;height:auto;display:block}.scene+.section{padding-top:8px}@media (min-width:600px){.scene-art img{aspect-ratio:5/2}}.final{clear:both;max-width:none;padding-bottom:32px}@media (min-width:600px){.final{text-align:center;justify-items:center}.final>.actions{justify-items:center;width:auto}.final .stores{justify-content:center}}.footer{border-top:1px solid var(--line);font:var(--fw-label) var(--fs-label) / var(--lh-label) var(--font-label);color:var(--text-muted);gap:12px;margin-top:64px;padding-block:32px 48px;display:grid}.footer .links{flex-wrap:wrap;gap:16px;display:flex}.footer a,.footer a:visited{color:var(--text-muted)}.choose{gap:12px;padding-block:48px;display:grid}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}