*{box-sizing:border-box}body{margin:0;background:#fff;color:#252525;font-family:Arial,Roboto,sans-serif}nav{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:32px 20px;border-bottom:1px solid #eee}a{color:inherit;text-decoration:none}nav a{color:#484848;font-size:16px;padding-bottom:5px}nav a:hover,nav a[aria-current]{color:#000;border-bottom:1px solid}main{max-width:1120px;margin:auto;padding:0 28px}header{text-align:center;padding:75px 0 55px}.eyebrow{font-size:11px;letter-spacing:3px;color:#777}h1{font-size:clamp(36px,6vw,58px);font-weight:400;letter-spacing:-1.5px;margin:20px 0}.intro{font-size:18px;line-height:1.7;color:#666}.editor{border:1px solid #ddd;padding:28px;border-radius:4px}.toolbar{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:28px}button{background:white;border:1px solid #ccc;border-radius:3px;color:inherit;font:inherit;padding:11px 18px;cursor:pointer}button:hover{background:#f3f3f3}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #626b63;outline-offset:3px}.primary{background:#303a32;color:white;border-color:#303a32;min-width:126px}.primary:hover{background:#455147}.tempo{display:flex;align-items:center;gap:10px;font-size:14px}.tempo input{width:65px;font:inherit;padding:9px 6px;border:1px solid #ccc;border-radius:3px}.tempo span,.meter{color:#777;font-size:13px}#clear{margin-left:auto;font-size:13px}.scroll{overflow-x:auto}.grid{display:grid;grid-template-columns:130px repeat(16,minmax(34px,1fr));gap:6px;min-width:820px}.step-label{font-size:11px;text-align:center;color:#888;padding:5px 0 12px}.beat-label{font-size:15px;color:#333}.row-label{font-size:14px;display:flex;align-items:center}.cell{padding:0;height:42px;border-color:#e1e1e1;background:#fafafa;border-radius:3px}.cell.beat{border-left:2px solid #a4aaa5}.cell[data-value="1"]{background:#87998a;border-color:#87998a;color:white}.cell[data-value="2"]{background:#303a32;border-color:#303a32;color:white}.cell.current{box-shadow:0 0 0 2px #a78042 inset}.hint{font-size:12px;color:#777;line-height:1.7;margin:22px 0 38px}.notation-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #eee;padding-top:26px}h2{font-size:20px;font-weight:400;margin:0}.notation-heading span{color:#888;font-size:11px}.score{margin-top:16px}#notation{width:100%;min-width:850px;display:block}.legend{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:#666}#status{font-size:12px;color:#777;margin-top:30px}footer{padding:45px 0;text-align:center;color:#888;font-size:12px}footer a{border-bottom:1px solid #ccc}@media(max-width:600px){nav{gap:17px;padding:24px 15px}nav a{font-size:12px}main{padding:0 16px}header{padding:48px 0 30px}.editor{padding:18px 14px}.toolbar{gap:15px}.meter{order:3;width:100%}#clear{margin-left:0}.notation-heading{align-items:flex-start;flex-direction:column}.intro{font-size:16px}.hint{margin-bottom:25px}}

.sound{display:flex;align-items:center;gap:10px;font-size:14px}.sound select{font:inherit;padding:9px 26px 9px 10px;border:1px solid #ccc;border-radius:3px;background:white;color:#333}.sound select:focus-visible{outline:2px solid #626b63;outline-offset:3px}

.tool-links{display:flex;justify-content:center;gap:18px 32px;flex-wrap:wrap;margin-top:26px;font-size:13px;color:#777}.tool-links a{display:inline-block;padding:8px 0;line-height:1.5}.tool-links a[aria-current],.tool-links a:hover{color:#252525;border-bottom:1px solid}.sound input{accent-color:#526b57}

.site-support{margin:28px 0 8px;padding:20px 0;border-top:1px solid #e8e8e8;color:#666;font-size:14px;line-height:1.6}.site-support p{margin:0 0 6px}.site-support a{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:#444;text-decoration:underline;text-decoration-color:#ccc;text-underline-offset:4px}.site-support a:hover{color:#111;text-decoration-color:currentColor}.site-support a:focus-visible{outline:2px solid #87998a;outline-offset:4px}.site-support svg{width:13px;height:13px;flex:none}
.division-controls{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px}.division-setting{display:flex;align-items:center;gap:6px;font-size:12px;color:#666}.division-setting select{font:inherit;padding:8px;border:1px solid #ccc;background:#fff;border-radius:3px}.division-hint{margin:8px 0 22px}.sound input[type=number],#meter-numerator{width:60px;padding:8px;font:inherit;border:1px solid #ccc;border-radius:3px}.many-steps .desktop-grid{display:none}.many-steps .mobile-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.beat-card{min-width:0}.beat-card h3{font-size:14px;font-weight:400}.beat-grid{display:grid;gap:5px}.beat-grid .cell{min-height:44px}.beats{flex-wrap:wrap}@media(max-width:600px){.division-setting select{font-size:16px}.sound input[type=number]{font-size:16px}.many-steps .mobile-grid{grid-template-columns:1fr}}
@media(orientation:landscape) and (pointer:coarse) and (min-width:601px) and (max-width:1100px) and (max-height:600px){.grid{min-width:0!important}}
.beat-card{overflow-x:auto}