:root{color-scheme:light;background:#fafaf7;color:#1f2933;font:15px/1.4 Avenir,"Helvetica Neue",sans-serif;--accent:#17675e}*{box-sizing:border-box}body{margin:0}main{padding:14px;max-width:760px;margin:auto}h1{font-size:23px;line-height:1.2;margin:0 0 7px}.intro{font-size:14px;margin:0 0 14px;color:#4f5d63}section{border-top:1px solid #cbd5cf;padding:10px 0 5px}header{display:flex;align-items:center;justify-content:space-between;gap:8px}h2{font-size:16px;margin:0}h2 span{font-size:13px;font-weight:400;color:#4f5d63}button{font:inherit;font-size:14px;padding:6px 10px;min-height:36px;border:1px solid #9caea7;border-radius:5px;background:white;color:var(--accent);cursor:pointer}button:disabled{opacity:.5;cursor:default}button:hover:not(:disabled){background:#e6f0ec}button:focus-visible{outline:3px solid #a15a1a;outline-offset:3px}section.playing{box-shadow:inset 3px 0 var(--accent)}.staff{width:100%;min-height:135px}.staff svg{display:block;max-width:100%;height:auto}.ct-transport{display:flex;gap:9px;align-items:center;flex-wrap:wrap;border-top:1px solid #cbd5cf;padding-top:9px}#status{font-size:13px;color:var(--accent)}.tempo{font-size:12px;color:#4f5d63;margin-left:auto}#problem{font-size:13px;color:#8b2929;margin-bottom:0}[hidden]{display:none!important}@media(max-width:420px){main{padding:10px 8px}h1{font-size:20px}h2 span{display:block}header{align-items:center}.intro{font-size:13px}.tempo{font-size:11px}}