:root{--paper:#c6c4c4;--ink:#242723;--muted:#6c7066;--line:#dedfd6;--accent:#70bd8a;--dark:#222923;--lime:#70bd8a}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}main{max-width:1180px;margin:auto;padding:35px 40px 24px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:27px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;color:var(--ink);font-weight:900;font-size:33px;letter-spacing:-2px;text-decoration:none}.brand>span{color:var(--accent)}.brand small{font-size:10px;letter-spacing:1.3px;margin-left:18px;border-left:1px solid #bfc3b7;padding:8px 0 8px 18px}.private{display:flex;align-items:center;gap:7px;background:#e9ecdf;border:1px solid #d8dec8;color:#555f43;padding:7px 10px;border-radius:30px;font-size:11px}.private svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:37px 0 35px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;margin:0 0 12px;color:var(--muted)}h1{font-size:42px;font-weight:600;letter-spacing:-1.7px;line-height:1.08;margin:0}h1>span{color:var(--accent)}.intro-note{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 2px}.player{border:1px solid #d7dacd;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 6px 16px #24272304}.exercise-picker{display:flex;align-items:center;gap:20px;padding:16px 27px;background:#f9faf5;border-bottom:1px solid #e6e8df}.exercise-picker label{font-size:9px;color:#6f7768;letter-spacing:1.3px;font-weight:700;white-space:nowrap}select{appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23474c43' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;border:0;color:var(--ink);font-size:14px;font-weight:600;flex:1;max-width:420px;padding:6px 25px 6px 0;border-radius:0}#exercise-total{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}.exercise-heading{padding:27px 30px 24px;display:flex;justify-content:space-between;gap:20px}.exercise-heading .eyebrow{font-size:10px;color:var(--accent);margin-bottom:7px}h2{font-size:27px;letter-spacing:-.8px;font-weight:600;margin:0 0 9px}#description{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.signature{border-left:1px solid #e4e6dd;padding-left:22px;font-size:23px;font-weight:600;align-self:flex-start;text-align:center;white-space:nowrap}.signature small{display:block;font-size:8px;letter-spacing:1px;font-weight:400;color:var(--muted);margin-top:4px}.score-meta{display:flex;justify-content:space-between;padding:0 30px 13px;font-size:10px;color:#868c80}#section-label{background:#f1f3e9;border-radius:4px;color:#67724f;padding:5px 8px;font-weight:600}#score-hint{align-self:center}.sheet{overflow:hidden;scrollbar-width:thin;padding:5px 18px 0;scroll-behavior:auto}.score{position:relative;min-width:0;cursor:crosshair}.score img{display:block;width:100%;user-select:none}.cursor{position:absolute;top:0;width:2px;height:50%;background:var(--accent);pointer-events:none;z-index:2;transform:translateX(-1px);box-shadow:0 0 0 5px #70bd8a24}.cursor>span{position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}.cursor.counting{opacity:0}.score-footer{display:flex;justify-content:space-between;font-size:10px;color:#888e81;padding:16px 30px 24px}.score-footer b{font-size:11px;color:#515a47;margin-left:13px;margin-right:3px}.score-footer b:first-child{margin-left:0}.console{background:var(--dark);color:#f4f6ee;padding:25px 30px 19px}.console-top{display:flex;align-items:center;justify-content:space-between;gap:30px}.transport{display:flex;align-items:center;gap:10px}.transport button{display:flex;align-items:center;gap:8px;border-radius:7px;height:44px;padding:0 17px;border:0;font-size:13px;font-weight:600}.play{background:var(--lime);color:#242d1e;min-width:110px;justify-content:center}.play:hover{background:#70bd8a}.play svg{width:16px;height:16px;fill:currentColor}.restart{background:transparent;color:#c4ccbd}.restart:hover{background:#354032}.restart svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}.tempo{display:flex;align-items:center;gap:16px}.tempo button{width:33px;height:33px;border:1px solid #4c5848;border-radius:50%;background:transparent;color:#e4eadb;font-size:22px;font-weight:300;padding:0;line-height:1}.tempo button:not(:disabled):hover{border-color:#70bd8a;color:var(--lime)}.tempo label{display:flex;gap:6px;align-items:baseline}.tempo input{background:transparent;color:#f1f4e9;font-size:31px;font-weight:600;border:0;outline-offset:2px;width:62px;padding:0;appearance:textfield;text-align:right;font-variant-numeric:tabular-nums}.tempo input::-webkit-inner-spin-button{appearance:none}.tempo label>span:not(.sr-only){font-size:9px;color:#a3b095;letter-spacing:1px}.beat-readout{text-align:right;min-width:55px}.beat-readout>span{font-size:25px;font-weight:600;font-variant-numeric:tabular-nums}.beat-readout>span>span{font-size:14px;color:#829477;font-weight:400}.beat-readout small{display:block;font-size:8px;letter-spacing:1px;color:#8f9f84;margin-top:4px}.timeline{margin-top:22px}.timeline input{display:block;width:100%;appearance:none;height:5px;margin:10px 0;background:linear-gradient(to right,var(--lime) 0%,#4c5747 0%);border-radius:8px;cursor:pointer;accent-color:var(--lime)}.timeline input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #70bd8a24}.timeline input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--lime)}.timeline>div{display:flex;justify-content:space-between;font-size:10px;color:#9eae92;font-variant-numeric:tabular-nums;margin-top:9px}.console-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #3c4737;margin-top:19px;padding-top:17px}.options{display:flex;gap:22px;flex-wrap:wrap}.options label{display:flex;align-items:center;gap:7px;font-size:11px;color:#c7d0bd;cursor:pointer}.options input{appearance:none;width:23px;height:13px;background:#56604f;border-radius:9px;margin:0;position:relative;cursor:pointer;flex-shrink:0}.options input:after{content:'';position:absolute;width:9px;height:9px;left:2px;top:2px;background:#adb79e;border-radius:50%;transition:left .12s}.options input:checked{background:#70bd8a}.options input:checked:after{left:12px;background:var(--lime)}.status{font-size:10px;color:#aab99f;text-align:right}.status:before{content:'';display:inline-block;width:5px;height:5px;background:#9fae95;border-radius:50%;margin-right:6px}.status.playing:before{background:var(--lime)}.below-player{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8b9183;margin:16px 0 24px}.below-player>span{display:flex;align-items:center;gap:6px}.shortcut-seek{margin-left:13px}kbd{font:9px Arial,Helvetica,sans-serif;border:1px solid #d3d7c9;border-radius:3px;padding:3px 5px;color:#737d67;display:inline-block;margin-right:3px}#copy{border:0;background:transparent;font-size:11px;color:#657457;padding:6px 0}#copy span{margin-left:8px}.source{font-size:11px;color:#7a8370;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}summary{padding:15px 0;cursor:pointer;width:fit-content}.source-body{padding:0 0 17px;font-size:11px;line-height:1.7;max-width:790px}.source-body p{margin:0 0 10px}.source-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.file-button,.source-actions button{position:relative;border:1px solid #cdd4c2;padding:7px 10px;border-radius:5px;color:#546747;background:#fcfdf7;font-size:11px;cursor:pointer;overflow:hidden}.file-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-button:focus-within{outline:3px solid var(--accent);outline-offset:2px}.source-actions button[hidden]{display:none}#message{font-size:12px;color:#70bd8a;line-height:1.5;margin:8px 0;min-height:18px}footer{display:flex;justify-content:space-between;color:#989e90;font-size:9px;padding:8px 0 0}footer>span:first-child{letter-spacing:1.2px;font-weight:700}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1450px){main{padding-top:50px}.intro{padding-top:45px;padding-bottom:42px}}@media(max-width:800px){main{padding:24px}.intro{padding:28px 0}h1{font-size:35px}.intro-note{font-size:11px}.console{padding:22px}.console-top{gap:16px}.tempo{gap:10px}.exercise-heading{padding:24px}.exercise-picker{padding:14px 24px}.score-meta{padding-left:24px;padding-right:24px}.score-footer{padding-left:24px;padding-right:24px}.status{font-size:9px}.options{gap:14px}.options label{font-size:10px}}@media(max-width:570px){main{padding:19px 14px}.brand{font-size:29px}.brand small{font-size:8px;margin-left:12px;padding-left:12px;letter-spacing:1px}.private{font-size:9px;padding:6px 8px}.private svg{width:11px}header{padding-bottom:20px}.intro{padding:26px 2px}.intro h1{font-size:32px}.intro-note{display:none}.eyebrow{font-size:9px}.exercise-picker{padding:12px 17px;gap:13px;flex-wrap:wrap}.exercise-picker label{font-size:8px}.exercise-picker select{font-size:12px;max-width:calc(100% - 107px)}#exercise-total{display:none}.exercise-heading{padding:23px 19px 20px}h2{font-size:24px}#description{font-size:12px}.signature{font-size:20px;padding-left:14px}.score-meta{padding-left:19px;padding-right:19px;gap:10px}#score-hint{font-size:9px;max-width:135px;text-align:right}.sheet{padding-left:12px;padding-right:12px}.score-footer{padding:13px 19px 21px;font-size:9px;gap:10px}.score-footer b{margin-left:8px}.console{padding:20px 17px 18px}.console-top{flex-wrap:wrap;gap:15px;justify-content:space-between}.transport{gap:3px}.transport button{padding:0 12px;height:42px;font-size:12px}.play{min-width:88px}.restart{padding-right:5px!important}.restart span{display:none}.tempo{gap:10px;margin-left:auto}.tempo button{width:29px;height:29px}.tempo input{font-size:28px;width:54px}.beat-readout{display:none}.console-bottom{align-items:flex-start;gap:14px;flex-direction:column}.options{gap:16px;justify-content:space-between;width:100%}.options label{font-size:10px}.status{font-size:10px}.timeline{margin-top:20px}.below-player{margin-bottom:20px}.shortcut-seek{display:none}.source-body{font-size:11px}footer{font-size:8px}}

.exercise-picker select{max-width:none;min-width:0;text-overflow:ellipsis}option,optgroup{color:var(--ink);background:white}

/* Compact header and an explicit, full-width exercise dropdown. */
.brand>span{color:inherit}
.private{background:none;border:0;border-radius:0;padding:0}
.player{margin-top:28px}
.exercise-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;padding:20px 27px}
.exercise-picker label{grid-column:1/-1;display:flex;align-items:center;gap:14px;font-size:10px;color:#3c4538;letter-spacing:1px}
.exercise-picker label span{font-size:11px;font-weight:400;letter-spacing:0;color:var(--muted);white-space:normal}
.exercise-picker select{width:100%;max-width:none;min-width:0;border:1.5px solid #79866b;border-radius:7px;background-color:white;background-position:right 17px center;background-size:15px 10px;padding:15px 46px 15px 15px;font-size:14px;cursor:pointer;box-shadow:0 2px 3px #24272308}
.exercise-picker select:hover{border-color:#3e5132;background-color:#fcfdf8}
#exercise-total{margin-left:0;white-space:nowrap}
@media(max-width:570px){.player{margin-top:20px}.exercise-picker{padding:16px;gap:10px}.exercise-picker label{align-items:flex-start;flex-direction:column;gap:5px}.exercise-picker select{max-width:none;font-size:12px;padding:14px 36px 14px 11px;background-position:right 12px center}#exercise-total{display:none}}

/* Fit each complete notation image to the available viewport; no score panning. */
.score{width:100%;min-width:0;max-width:100%}
.score img{width:100%;height:auto;max-width:100%}
.sheet{overflow:hidden;min-width:0}
.options input:checked:after{background:#fff}
.play:hover{filter:brightness(.95)}

.contact{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);text-decoration:none}
.contact svg{width:18px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.contact:hover{text-decoration:underline;text-underline-offset:3px}
footer{gap:16px;flex-wrap:wrap;color:#444743}

.usage-notice{font-size:10px;line-height:1.5;color:#444743;margin:14px 0 0;text-align:center}