@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:400;font-display:swap;src:url(../media/38b3f57056672e96-s.3vy-_l9ztcxef.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:400;font-display:swap;src:url(../media/8cccf984c8510bbf-s.p.2v4ibmotuyxuz.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:700;font-display:swap;src:url(../media/ae9e2a5bb156676d-s.1zpm-mgw3w1fq.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:700;font-display:swap;src:url(../media/191d227036512e10-s.p.3pskbmi5y11f5.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Atkinson Hyperlegible Fallback;src:local(Arial);ascent-override:95.6%;descent-override:29.18%;line-gap-override:0.0%;size-adjust:99.37%}.UW8cqW_className{font-family:Atkinson Hyperlegible,Atkinson Hyperlegible Fallback;font-style:normal}.UW8cqW_variable{--font-atkinson:"Atkinson Hyperlegible", "Atkinson Hyperlegible Fallback"}
@font-face{font-family:Atkinson Hyperlegible Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../media/c5a8e16e4d2fdb67.3ct1bjzmjks6d.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../media/9a99c25b2c6879f5.p.3gjqgyucvuvvf.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Atkinson Hyperlegible Mono;font-style:normal;font-weight:600;font-display:swap;src:url(../media/c5a8e16e4d2fdb67.3ct1bjzmjks6d.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible Mono;font-style:normal;font-weight:600;font-display:swap;src:url(../media/9a99c25b2c6879f5.p.3gjqgyucvuvvf.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.xaq-jq_className{font-family:Atkinson Hyperlegible Mono;font-style:normal}.xaq-jq_variable{--font-atkinson-mono:"Atkinson Hyperlegible Mono"}
@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(../media/951a1661741fc9a6-s.0c05j22lu0e1h.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(../media/840ca482ea7a70a1-s.14r01_8b-ryu9.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(../media/edc92f5080bab07a-s.p.2lg3sxkcxwsl6.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Bricolage Grotesque Fallback;src:local(Arial);ascent-override:88.21%;descent-override:25.61%;line-gap-override:0.0%;size-adjust:105.43%}._9R8U0a_className{font-family:Bricolage Grotesque,Bricolage Grotesque Fallback;font-style:normal}._9R8U0a_variable{--font-bricolage:"Bricolage Grotesque", "Bricolage Grotesque Fallback"}
.yBvhsG_navbar{z-index:10;background:var(--surface);border-bottom:1px solid var(--line);position:relative}.yBvhsG_inner{max-width:820px;padding-block:8px;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:0 auto;display:flex}.yBvhsG_brand{min-height:44px;color:var(--fg);font-family:var(--font-display);align-items:center;gap:10px;font-size:1.15rem;font-weight:800;text-decoration:none;display:inline-flex}.yBvhsG_links{gap:4px;margin:0;padding:0;list-style:none;display:flex}.yBvhsG_links a{min-height:44px;color:var(--fg);border-radius:999px;align-items:center;padding:0 14px;font-weight:700;text-decoration:none;display:flex}.yBvhsG_links a:hover{background:var(--bg)}.yBvhsG_links a[aria-current]{background:var(--fg);color:var(--bg)}.yBvhsG_toggle{justify-content:center;align-items:center;width:44px;padding:0;display:none}.yBvhsG_toggle .yBvhsG_bar{transform-origin:12px 12px;transition:transform .2s ease-out,opacity .2s ease-out}.yBvhsG_toggle[aria-expanded=true] .yBvhsG_barTop{transform:rotate(45deg)translateY(5px)}.yBvhsG_toggle[aria-expanded=true] .yBvhsG_barMiddle{opacity:0}.yBvhsG_toggle[aria-expanded=true] .yBvhsG_barBottom{transform:rotate(-45deg)translateY(-5px)}@media (max-width:799px){.yBvhsG_toggle{display:inline-flex}.yBvhsG_links{padding:8px max(16px, env(safe-area-inset-right,0px)) 12px max(16px, env(safe-area-inset-left,0px));background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 8px 16px var(--shadow);opacity:0;visibility:hidden;flex-direction:column;transition:opacity .15s ease-in,transform .15s ease-in,visibility 0s linear .15s;position:absolute;top:100%;left:0;right:0;transform:translateY(-8px)}.yBvhsG_links[data-open=true]{opacity:1;visibility:visible;transition:opacity .2s ease-out,transform .2s ease-out,visibility;transform:none}.yBvhsG_links a{border-radius:8px}}
:root{--bg:#f5f6f8;--surface:#fff;--fg:#1b2230;--muted:#586174;--line:#d9dde5;--rh:#c2560f;--rh-soft:#fbe3d1;--rh-text:#983f08;--lh:#0f7a86;--lh-soft:#d3eef0;--lh-text:#0b6570;--dot-text:#fff;--key-white:#fff;--key-black:#1b2230;--key-edge:#1b2230;--shadow:#1b22301f;--font-display:var(--font-bricolage), "Segoe UI", system-ui, sans-serif;--font-body:var(--font-atkinson), "Verdana", system-ui, sans-serif;--font-mono:var(--font-atkinson-mono), ui-monospace, "SFMono-Regular", Menlo, monospace}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12161d;--surface:#1a1f28;--fg:#e8ebf1;--muted:#a2aabb;--line:#2f3642;--rh:#f2924f;--rh-soft:#4a2d1a;--lh:#4cc3cf;--lh-soft:#163d42;--rh-text:#f2924f;--lh-text:#4cc3cf;--dot-text:#12161d;--key-white:#e8ebf1;--key-black:#0b0e13;--key-edge:#0b0e13;--shadow:#00000080;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#12161d;--surface:#1a1f28;--fg:#e8ebf1;--muted:#a2aabb;--line:#2f3642;--rh:#f2924f;--rh-soft:#4a2d1a;--lh:#4cc3cf;--lh-soft:#163d42;--rh-text:#f2924f;--lh-text:#4cc3cf;--dot-text:#12161d;--key-white:#e8ebf1;--key-black:#0b0e13;--key-edge:#0b0e13;--shadow:#00000080;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}
*,:after,:before,::backdrop{box-sizing:border-box}::file-selector-button{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4}b,strong{font-weight:bolder}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}[hidden]:where(:not([hidden=until-found])){display:none!important}body{background:var(--bg);color:var(--fg);font-family:var(--font-body);margin:0;font-size:17px;line-height:1.6}h1,h2{font-family:var(--font-display);text-wrap:balance;margin:0;line-height:1.15}h1{letter-spacing:-.01em;font-size:clamp(2rem,6vw,3rem);font-weight:800}h2{font-size:clamp(1.6rem,4.5vw,2.1rem);font-weight:800}a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--rh);outline-offset:2px}p{max-width:65ch;margin:0}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.wrap{max-width:820px;padding-block:40px 64px;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));gap:28px;margin:0 auto;display:grid}main,.section-page{gap:28px;display:grid}.sec{gap:20px;display:grid}.intro{gap:12px;display:grid}.lede{color:var(--muted);font-size:1.1rem}footer{color:var(--muted);gap:8px;font-size:.9rem;display:grid}footer a{color:inherit}.statement{gap:28px;display:grid}.statement section{gap:12px;display:grid}.statement ul{gap:4px;max-width:65ch;margin:0;padding-left:1.2em;display:grid}.statement a{color:var(--fg)}
.ex-head h2,.legend h2{font-size:1.4rem;font-weight:600}.link-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.link-list li{background:var(--surface);border:1px solid var(--line);border-radius:10px;gap:4px;padding:16px 18px;display:grid}.link-list a{color:var(--fg);font-family:var(--font-display);font-size:1.3rem;font-weight:800}.link-list p{color:var(--muted)}.ex-head h1{font-size:clamp(1.6rem,5vw,2.2rem)}.legend{border:1px solid var(--line);background:var(--surface);border-radius:10px;gap:10px;padding:16px 18px;display:grid}.legend ul{gap:4px;margin:0;padding-left:1.2em;display:grid}.chip{font-family:var(--font-mono);border-radius:999px;padding:1px 8px;font-size:.85rem;font-weight:600;display:inline-block}.chip.rh{background:var(--rh-soft);color:var(--rh-text)}.chip.lh{background:var(--lh-soft);color:var(--lh-text)}.ex{background:var(--surface);border:1px solid var(--line);border-radius:10px;gap:14px;min-width:0;padding:20px 18px;display:grid}.ex-head{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.num{font-family:var(--font-mono);color:var(--muted);letter-spacing:.06em;font-size:.85rem;font-weight:600}.steps{gap:4px;max-width:65ch;margin:0;padding-left:1.2em;display:grid}.kb-label{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}.count{aspect-ratio:1;box-sizing:border-box;border:4px solid var(--rh);background:var(--surface);width:24cqw;color:var(--fg);font-family:var(--font-mono);border-radius:50%;place-items:center;font-size:13cqw;font-weight:700;line-height:1;display:grid;position:absolute;top:42.9578%;left:50%;translate:-50% -50%}.count:empty{display:none}.staves{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;display:grid}.staves>div{gap:6px;min-width:0;display:grid}
.controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:8px;min-height:44px;padding:8px 14px;font-weight:700}button.play{background:var(--fg);color:var(--bg);border-color:var(--fg);min-width:96px}button:focus-visible{outline:3px solid var(--rh);outline-offset:2px}.confirm{box-sizing:border-box;border:1px solid var(--line);background:var(--surface);max-width:min(440px,100vw - 32px);color:var(--fg);border-radius:12px;padding:20px 22px}.confirm::backdrop{background:#00000080}.confirm h2{font-size:1.4rem;font-weight:600}.confirm p{margin:10px 0 20px}.confirm-buttons{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.confirm .primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}.seg{border:1px solid var(--line);border-radius:8px;display:inline-flex}.seg button{background:var(--surface);border:0;border-radius:0}.seg button+button{border-left:1px solid var(--line)}.seg button:first-child{border-radius:7px 0 0 7px}.seg button:last-child{border-radius:0 7px 7px 0}.seg button:focus-visible{z-index:1;position:relative}.ex>.seg{justify-self:start}button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
