:root{color:#262e2b;font-synthesis:none;background:#f7f5ef;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:#284c40;background:0 0;border:1px solid #c9d0c8;border-radius:8px;padding:11px 16px;font-weight:600}button:hover{background:#edf1e9}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-offset:4px;outline:3px solid #b46c32}main{max-width:1040px;margin:auto;padding:0 36px 36px}header{border-bottom:1px solid #dfdfd5;justify-content:space-between;align-items:center;gap:16px;padding:30px 0;display:flex}.brand{color:inherit;letter-spacing:-.8px;font-size:23px;font-weight:700;text-decoration:none}.brand span{color:#70786d;letter-spacing:0;font-size:14px;font-weight:400}.refresh{font-size:13px}.intro{padding:52px 0 30px}.eyebrow{letter-spacing:1.8px;color:#667365;font-size:11px;font-weight:700}h1{letter-spacing:-2px;margin:14px 0 13px;font-family:Georgia,serif;font-size:clamp(38px,6vw,58px);font-weight:400}.intro p{color:#747970;margin:0;font-size:15px}.card{background:#fffefa;border:1px solid #dedfd3;border-radius:14px;padding:28px 32px;box-shadow:0 8px 30px #37403205}.section-top{color:#777d73;justify-content:space-between;align-items:center;gap:15px;font-size:12px;display:flex}.score{color:#26362e;min-height:150px;margin:12px 0 10px}.score svg{width:100%;display:block}.notes{flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none;display:flex}.notes li{background:#f1f3ec;border:1px solid #e6e9df;border-radius:7px;min-width:69px;padding:12px 14px}.notes strong{font-size:18px;font-weight:500;display:block}.notes span{color:#747d70;margin-top:6px;font-size:11px;display:block}.controls{border-bottom:1px solid #e6e7de;flex-wrap:wrap;align-items:center;gap:28px;padding-bottom:27px;display:flex}.primary{color:#fff;background:#315c49;border-color:#315c49;padding:13px 20px}.primary:hover{background:#254c3b}.tempo{color:#65705f;align-items:center;gap:12px;font-size:13px;display:flex}.tempo input{accent-color:#315c49;width:125px}.tempo output{font-variant-numeric:tabular-nums;min-width:65px}.practice-note{padding-top:23px}.practice-note p{max-width:620px;margin:10px 0 0;font-size:15px;line-height:1.7}.source{max-width:770px;padding:26px 2px 24px}.source p{color:#7b7f73;margin:7px 0;font-size:12px;line-height:1.7}footer{color:#777e70;border-top:1px solid #dfdfd5;align-items:center;gap:7px;padding-top:18px;font-size:11px;display:flex}.dot{background:#839177;border-radius:50%;flex-shrink:0;width:6px;height:6px}.footer-right{margin-left:auto}.picker{align-items:center;gap:12px;margin-bottom:20px;display:flex}.picker select{max-width:80%;padding:8px}.error{color:#803e25}@media (width<=600px){main{padding:0 18px 26px}header{padding:20px 0}.brand span{display:none}.intro{padding:34px 0 24px}.card{padding:22px 16px}.section-top{font-size:11px}.notes{gap:6px}.notes li{min-width:56px;padding:10px}.controls{gap:20px}.tempo{gap:9px}footer{flex-wrap:wrap}.footer-right{width:100%;margin:4px 0 0 13px}}
