.scale-app{--ink:#333333;--muted:#666666;--accent:#ff4c65;--accent-dark:#9b2636;--blue:#044a99;--line:#e1e1e1;--panel:#f7f4ef;max-width:1200px;margin:auto;padding:36px 24px 72px;color:var(--ink);font-family:system-ui,sans-serif}
.scale-app h1,.scale-app h2,.scale-app h3{color:var(--blue)}.scale-app *{box-sizing:border-box}.scale-app h1{font-size:clamp(32px,5vw,54px);line-height:1.12;margin:12px 0 20px}.scale-app h2{font-size:23px;line-height:1.3;margin:0}.scale-app h3{font-size:19px}.scale-hero{padding:12px 0 30px;max-width:740px}.scale-hero>a{color:var(--blue)}.scale-hero>a:hover{color:var(--accent-dark)}.scale-eyebrow{font-size:13px;letter-spacing:.13em;text-transform:uppercase;margin:26px 0 0}.scale-hero>p:last-child{font-size:19px;line-height:1.6;color:var(--muted)}
.scale-controls{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:24px}.scale-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.scale-app fieldset{border:0;padding:0;margin:0;min-width:0}.scale-app legend{font-weight:700;font-size:16px;margin-bottom:12px}.scale-app label{display:block;font-size:14px;line-height:1.4;margin:8px 0}.scale-app select,.scale-app input[type=number]{display:block;width:100%;margin-top:5px;background:white;border:1px solid #cacaca;border-radius:8px;min-height:42px;padding:8px 10px;color:var(--ink);font-size:16px}.scale-app select:focus-visible,.scale-app input:focus-visible,.scale-app button:focus-visible,.scale-app summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.scale-app input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);flex:none;margin:0}.scale-app .scale-check{display:flex;align-items:center;gap:9px}.scale-app small{display:block;font-size:13px;line-height:1.5;color:var(--muted);margin-top:8px}.scale-advanced{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.scale-advanced>summary{cursor:pointer;font-weight:600}.scale-advanced[open]>.scale-fields{margin-top:20px}.scale-override{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;align-items:center;border-top:1px solid var(--line);padding:8px 0}.scale-app button{font:inherit;cursor:pointer;border:1px solid #cacaca;border-radius:9px;padding:11px 16px;background:white;color:var(--ink)}.scale-app button:disabled{opacity:.5;cursor:default}.scale-app button.scale-primary{background:var(--accent);color:white;border-color:var(--accent);font-size:19px;font-weight:700}.scale-build-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.scale-transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0}.scale-transport>div{flex:1;min-width:220px}.scale-transport label{margin:0}.scale-transport input[type=number]{width:88px}.scale-transport>span{font-size:13px;color:var(--muted)}
.scale-card{border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 22px;background:white;min-width:0}.scale-card-header{display:flex;gap:16px;justify-content:space-between;align-items:start}.scale-card-header>div{min-width:0}.scale-card p{margin:8px 0 16px;font-size:14px;color:var(--muted);line-height:1.5}.scale-score{overflow-x:auto;max-width:100%;padding-bottom:8px}.scale-score svg{display:block;flex:none;color:#0a0a0a}.scale-card details{margin-top:12px;font-size:13px}.scale-card summary{cursor:pointer}.scale-notes{overflow-wrap:anywhere;line-height:1.9}.scale-card pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel);padding:12px}.scale-card.is-error{border-color:var(--accent);background:#fff0f0}.scale-card.is-error p,#scale-message.is-error{color:#a60017}.scale-active{color:#ff4c65!important;fill:#ff4c65!important;stroke:#ff4c65!important}.scale-local-note{font-size:13px;color:var(--muted)}.scale-print{display:block;position:absolute;left:-10000px;top:0;width:680px}
.scale-app button:not(:disabled):hover{border-color:var(--blue);color:var(--blue)}.scale-app button.scale-primary:not(:disabled):hover{background:var(--accent-dark);border-color:var(--accent-dark);color:white}
@media(max-width:760px){.scale-app{padding:20px 12px 40px}.scale-controls{padding:18px 14px}.scale-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.scale-patterns{grid-column:1/-1}.scale-card{padding:16px 12px}.scale-card-header{flex-wrap:wrap}.scale-override{grid-template-columns:1fr 1fr}.scale-override>span{grid-column:1/-1}.scale-transport{gap:10px}.scale-transport>div{flex-basis:100%}}
@media(max-width:400px){.scale-fields{grid-template-columns:1fr}.scale-patterns{grid-column:auto}}
.scale-print-selection{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.scale-print-selection>span{flex:1;min-width:200px;font-size:14px}.scale-card-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex-shrink:0}.scale-card-actions .scale-check{margin:0;white-space:nowrap}
@page{size:A4 portrait;margin:14mm}
/* Give a continued slur room above the next system's high notes. */
.scale-notation>div+div{margin-top:24px}
/* Match offscreen measurement to print before beforeprint moves the blocks. */
.scale-print h1,.scale-print h2,.scale-print p,.scale-print a{color:#000}
.scale-print h1{font-size:16px;line-height:1.3;margin:0 0 10px}
.scale-print h2{font-size:13px;line-height:1.3;margin:0 0 2px}
.scale-print p{font-size:12px;margin:6px 0}
.scale-print .scale-notation>div+div{margin-top:12px}
.scale-print svg{color:#000;display:block;max-width:100%;height:auto}
.scale-print-page{display:flow-root;width:680px;break-inside:avoid;page-break-inside:avoid}
.scale-print-page+.scale-print-page{break-before:page;page-break-before:always}
.scale-print-exercise{position:relative;break-inside:avoid;page-break-inside:avoid}
.scale-print-exercise-body{display:flow-root;width:680px;padding-top:10px}
.scale-print .scale-print-credit{font-size:10px;line-height:1.4;margin:12px 0 0;break-inside:avoid;page-break-inside:avoid}
.scale-print-credit a{text-decoration:none}
.scale-print-credit a[href]::after{content:none!important}
@media print{
body{margin:0!important;background:white!important}
body>:not(.page),.page>:not(.scale-app),.scale-app>:not(.scale-print){display:none!important}
.page,.scale-app{padding:0!important;margin:0!important;max-width:none!important;width:auto!important}
.scale-print{display:block!important;position:static;width:auto;color:#000}
.scale-print svg{break-inside:avoid;page-break-inside:avoid}
}