@font-face{font-family:DM Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/dm-mono-latin-400-normal-4GdczIuU.woff2)format("woff2")}:root{--ink:#24323e;--soft:#24323e8c;--faint:#24323e29;--mono:"DM Mono",ui-monospace,Menlo,monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{overscroll-behavior:none;background:#eef5fa;height:100%;overflow:hidden}body{font:400 11px/1.3 var(--mono);color:var(--ink);letter-spacing:.06em;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;letter-spacing:inherit;background:0 0;border:0}#bg{position:fixed;inset:0}#bg canvas{display:block;width:100%!important;height:100%!important}#fx{pointer-events:none;width:100%;height:100%;position:fixed;inset:0}#panel{padding:10px 12px max(12px,env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--faint);background:#eef5fabd;max-width:760px;margin:0 auto;position:fixed;bottom:0;left:0;right:0}#bar{justify-content:space-between;align-items:center;height:44px;display:flex}#play{place-items:center;width:44px;height:44px;display:grid}#play svg{fill:none;width:16px;height:16px;stroke:var(--ink);stroke-width:1.1px;stroke-linejoin:round;grid-area:1/1}#play .i-stop,body.on #play .i-play{display:none}body.on #play .i-stop{display:block}#tempo{align-items:center;gap:2px;display:flex}#tempo button{width:40px;height:44px;font-size:16px}#bpm{text-align:center;min-width:3ch;font-size:14px}#clear{height:44px;color:var(--soft);padding:0 6px}#gen{height:36px;color:var(--soft);align-items:center;gap:2px;display:flex}#gen span{margin-right:8px}#gen button{height:36px;color:var(--ink);border-bottom:1px solid #0000;padding:0 8px}#gen button.hit{border-color:var(--ink)}#grid{touch-action:none;flex-direction:column;gap:3px;margin-top:6px;display:flex}.row{align-items:stretch;gap:6px;display:flex}.lab{width:38px;color:var(--soft);flex:none;align-items:center;font-size:10px;display:flex}.cells{flex:1;grid-template-columns:repeat(16,1fr);gap:2px;display:grid}.cells i{border:1px solid var(--faint);background:#ffffff47;display:block;position:relative}.cells i:nth-child(4n+1){margin-left:4px}.cells i:first-child{margin-left:0}.cells i.on{background:var(--ink);border-color:var(--ink)}.cells i.cur:after{content:"";border:1px solid var(--ink);opacity:.9;position:absolute;inset:-1px}.k{height:30px}.s{height:20px}.sep{height:6px}@media (hover:hover){.cells i:hover{border-color:var(--soft)}}