.ex-eyebrow{color:var(--muted);letter-spacing:.01em;margin-bottom:12px;font-size:.875rem;font-weight:500}.ex-facts{flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;display:flex}.ex-facts li{border:1px solid var(--line);background:var(--card);min-height:30px;color:var(--ink-2);border-radius:999px;align-items:center;gap:2px;padding:0 12px;font-size:.875rem;display:inline-flex}.ex{padding-bottom:0;position:relative;overflow:hidden}.ex-head{grid-template-columns:1fr auto 1fr;align-items:baseline;gap:12px;display:grid}.ex .score-level{transition:opacity .3s}.ex.is-stamped .score-level{opacity:0}.ex-lines{min-height:300px;margin-top:6px;transition:opacity .25s}.ex-single .ex-lines{min-height:200px}.ex.is-loading .ex-lines{opacity:.35}.ex-line+.ex-line{margin-top:4px}.ex .sheet .cursor{transition:opacity .2s}.ex .sheet.is-idle .cursor{opacity:0}.ex .stamp{top:8px;right:10px}.ex-piano{margin:14px calc(-1*clamp(16px,2.6vw,30px)) 0}.piano-exercise{--white-h:clamp(84px, 11vw, 132px);padding-inline:clamp(10px,2vw,22px)}.ex-controls{flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 0;display:flex}.ex-controls .btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.ex-controls [data-listen] svg{fill:currentColor}.btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}.btn-quiet:hover{background:var(--paper)}.btn-quiet.is-on{color:var(--wine);box-shadow:inset 0 0 0 1px #8e2c4859}.ex-controls-gap{flex:1}.ex-caption{min-height:1.6em;color:var(--muted);margin:12px 0 0;padding-bottom:clamp(16px,2.6vw,26px);font-size:.875rem}.ex-print-head,.ex-print-foot{display:none}.ex-page .prose ul{padding-left:1.2em}.ex-howto{border-radius:var(--r-card);background:var(--paper-deep);padding:16px 20px;font-size:.9375rem;margin-top:1.6em!important}.ex-nav{grid-template-columns:1fr 1fr;gap:14px;max-width:54rem;margin-top:clamp(36px,5vw,56px);display:grid}.ex-nav-next{text-align:right}.ex-nav-dir,.ex-card-no{font-weight:500;color:var(--muted)!important;margin:0 0 4px!important;font-size:.8125rem!important}.ex-book{margin-top:clamp(44px,6vw,72px)}.ex-book h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}.ex-book-no{color:var(--wine);font-family:var(--font-ui);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;font-size:.8125rem;font-weight:600;display:block}.ex-book>p{max-width:40em;color:var(--text-2);margin-top:8px}.ex-book .link-grid{margin-top:20px}.ex-cta-action{margin-top:24px!important}.btn-light{color:var(--ink);background:#f4f4f1}.btn-light:hover{background:#fff}@media (width<=640px){.ex-head{grid-template-columns:auto 1fr}.ex-head .score-title{text-align:right}.ex-head .score-level{display:none}.ex-lines{min-height:220px}.ex-single .ex-lines{min-height:140px}.ex-controls-gap{display:none}.ex-nav{grid-template-columns:1fr}.ex-nav-next{text-align:left}}@media print{@page{margin:14mm 12mm}html,body{background:#fff!important}.skip,.bar,.foot,.crumbs,.page-head,.prose,.ex-nav,.page-cta,.ex-head,.ex-piano,.ex-controls,.ex-caption,.ex .stamp,.ex .sheet .cursor,.ex .sheet .cover,.ex .ghost{display:none!important}.page{padding:0!important}.wrap{width:100%!important}.ex{box-shadow:none!important;margin:0!important;padding:0!important;overflow:visible!important}.ex-print-head{color:#333;border-bottom:1px solid #ccc;justify-content:space-between;gap:16px;margin:0 0 6mm;padding-bottom:3mm;font-size:10pt;display:flex}.ex-print-foot{color:#777;text-align:right;margin-top:6mm;font-size:9pt;display:block}.ex-lines,.ex-single .ex-lines{min-height:0;opacity:1!important}.ex-line{break-inside:avoid;height:auto!important;overflow:visible!important}.ex-line+.ex-line{margin-top:6mm}.ex .sheet{height:auto!important;position:static!important}.ex .sheet svg{width:var(--print-width,100%)!important;height:auto!important;transform:none!important}.ex .sheet .vf-stave{stroke:#777}.ex .sheet .vf-stavebarline rect{fill:#777}.ex .sheet .vf-stavenote,.ex .sheet .vf-stavenote.is-ok,.ex .sheet .vf-stavenote.is-bad{fill:#000!important;stroke:#000!important;transition:none!important}}.ex svg[hidden]{display:none}
