.mt{background:var(--white);grid-template-columns:minmax(0,1fr) 340px;display:grid}.mt-main{border-right:1.5px solid var(--ink);background:radial-gradient(circle at 50% 58%, var(--white) 0 38%, transparent 70%), repeating-linear-gradient(180deg, transparent 0 23px, #efe9dc 23px 24px), var(--paper);flex-direction:column;align-items:center;gap:16px;min-width:0;padding:16px 22px 18px;display:flex;position:relative}.mt-top{flex-wrap:wrap;align-self:stretch;align-items:center;gap:10px 14px;min-height:34px;display:flex}.mt-sig{border:1.5px solid var(--ink);background:var(--white);white-space:pre;border-radius:30px;padding:3px 12px;font-size:15px;font-weight:500}.mt-subname{color:var(--mute);font-size:13.5px}.mt-beats{flex-wrap:wrap;justify-content:center;gap:10px 16px;max-width:100%;display:flex}.mt-group{gap:6px;display:flex}.mt-beats .mt-group+.mt-group{border-left:1.5px dashed var(--line);padding-left:16px}.mt-cellwrap{flex-direction:column;align-items:center;gap:5px;display:flex}.mt-beat{border:1.5px solid var(--ink);background:var(--white);width:clamp(34px,4.6vw,52px);height:66px;color:var(--ink);border-radius:12px;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding:7px 0 5px;transition:transform 80ms;display:flex}.mt-beat:hover{transform:translateY(-1px)}.mt-beat b{font:500 12px/1 var(--mono)}.mt-lv{flex-direction:column-reverse;gap:3px;display:flex}.mt-lv i{background:var(--line-2);border-radius:2px;width:18px;height:7px;display:block}.mt-beat[data-level="1"] .mt-lv i:first-child,.mt-beat[data-level="2"] .mt-lv i:nth-child(-n+2),.mt-beat[data-level="3"] .mt-lv i{background:var(--ink)}.mt-beat[data-level="3"] .mt-lv i:nth-child(3){background:var(--sig)}.mt-beat[data-level="0"]{color:var(--mute);background:0 0;border-style:dashed}.mt-beat.is-on{box-shadow:0 0 0 2.5px var(--sig);animation:.32s ease-out mtHit}.mt-beat.is-on.is-muted{box-shadow:0 0 0 2.5px var(--mute);animation:none}.mt-beat.is-on.is-count{animation:.32s ease-out mtHitB;box-shadow:0 0 0 2.5px #2747ff}@keyframes mtHit{0%{background:var(--sig);transform:translateY(-3px)}to{background:var(--white);transform:none}}@keyframes mtHitB{0%{background:#2747ff}to{background:var(--white)}}.mt-subdots{gap:4px;height:6px;display:flex}.mt-subdots i{background:var(--line);border-radius:50%;width:6px;height:6px}.mt-subdots i.is-on{background:var(--sig)}.mt:not(.is-running) .mt-beat.is-on{box-shadow:none}.mt-core{justify-content:center;align-items:center;gap:clamp(10px,3vw,30px);display:flex}.mt-dial{aspect-ratio:1;touch-action:none;cursor:grab;border-radius:50%;width:clamp(236px,30vw,330px);position:relative}.mt-dial.is-drag{cursor:grabbing}.mt-dial:focus-visible{outline-offset:-4px;border-radius:50%}.mt-dial-svg{width:100%;height:100%;color:var(--ink);overflow:visible}.mt-track{fill:none;stroke:var(--line-2);stroke-width:12px;stroke-linecap:round}.mt-val{fill:none;stroke:var(--sig);stroke-width:12px;stroke-linecap:round}.mt-knob{fill:var(--white);stroke:var(--ink);stroke-width:2.5px}.mt-dial-c{background:var(--white);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;inset:21%}.mt-dial.is-pulse .mt-dial-c{animation:.2s ease-out mtPulse}@keyframes mtPulse{0%{border-color:var(--sig);box-shadow:4px 4px 0 var(--sig);transform:scale(1.035)}to{transform:none}}.mt-bpm{text-align:center;width:3.3ch;color:var(--ink);font:600 clamp(52px, 6.4vw, 80px)/.95 var(--serif);letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;cursor:text;background:0 0;border:0;border-radius:8px;padding:0}.mt-bpm:focus{background:var(--sig-soft);outline:none}.mt-unit{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--mute)}.mt-name{font:italic 400 17px/1.1 var(--serif);color:var(--sig-ink);margin-top:3px}.mt-step{border:1.5px solid var(--ink);background:var(--white);width:58px;height:58px;font:400 30px/1 var(--font);touch-action:manipulation;user-select:none;border-radius:50%;flex-shrink:0;place-items:center;padding:0 0 3px;display:grid}.mt-step:hover{background:var(--ink);color:var(--paper)}.mt-step:active{transform:scale(.96)}.mt-pend{width:min(100%,440px);height:96px}.mt-transport{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;display:flex}.mt-play{border:1.5px solid var(--ink);background:var(--ink);color:#fff;min-width:190px;height:64px;font:700 19px/1 var(--font);box-shadow:4px 4px 0 var(--sig);touch-action:manipulation;border-radius:40px;justify-content:center;align-items:center;gap:10px;padding:0 30px;transition:transform .1s,background .1s;display:inline-flex}.mt-play svg{width:22px;height:22px}.mt-play:hover{transform:translate(-1px,-1px)}.mt-play.is-on{background:var(--sig);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}.mt-tap{border:1.5px solid var(--ink);background:var(--white);touch-action:manipulation;user-select:none;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:88px;height:64px;display:flex}.mt-tap b{font-size:16px}.mt-tap small{font:500 10.5px/1 var(--mono);color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:2px 5px}.mt-tap:hover{background:var(--bg)}.mt-tap.is-hit{animation:.2s ease-out mtTap}@keyframes mtTap{0%{background:var(--sig);color:#fff;transform:scale(.96)}to{background:var(--white)}}.mt-stats{flex-wrap:wrap;align-items:flex-end;gap:18px;display:flex}.mt-stats>span:not(.mt-train-info){flex-direction:column;gap:3px;min-width:64px;display:flex}.mt-stats small{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}.mt-stats b{font-size:21px;font-weight:500;line-height:1.1}.mt-train-info{color:var(--sig-ink);max-width:22ch;font-size:12.5px;line-height:1.3}.mt-train-info:empty{display:none}.mt-keys{font:11.5px/1.5 var(--mono);color:var(--mute);text-align:center;margin:0}.mt.is-flash .mt-main{animation:.22s ease-out mtFlash}.mt.is-flash2 .mt-main{animation:.3s ease-out mtFlash2}@keyframes mtFlash{0%{background:#ffd9cc}}@keyframes mtFlash2{0%{background:#ff9b7f}}.mt-side{flex-direction:column;gap:16px;min-width:0;padding:18px;display:flex}.mt-tabs button{padding:8px 4px;font-size:12.5px}.mt-pane{flex-direction:column;gap:16px;display:flex}.mt-pane .chips{gap:5px}.mt-pane .chip{font-family:var(--mono);padding:5px 10px;font-size:12.5px}.mt-subgrid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.mt-subbtn{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:7px 6px}.mt-subbtn svg{width:100%;height:20px}.mt-subbtn:hover{border-color:var(--ink)}.mt-subbtn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.mt-2col{grid-template-columns:1fr 1fr;gap:10px;display:grid}.mt-3col{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.mt-num .field-row{font-size:12.5px}.mt-num .input{padding:7px 9px}.mt-box{border:1px solid var(--line);background:var(--paper);border-radius:12px;gap:12px;padding:12px}.mt-acc-hint{color:var(--mute);justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;display:flex}.mt-save{gap:8px;display:flex}.mt-save .input{padding:7px 12px}.mt-presets{flex-direction:column;gap:6px;margin:-6px 0 0;padding:0;list-style:none;display:flex}.mt-presets li{align-items:center;gap:6px;display:flex}.mt-preset{text-align:left;border:1.5px solid var(--line);background:var(--paper);border-radius:10px;flex:1;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:8px 12px;font-size:14px;display:flex}.mt-preset b{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.mt-preset small{color:var(--mute);flex-shrink:0;font-size:11.5px}.mt-preset:hover{border-color:var(--ink)}.mt-del{border:1.5px solid var(--line);background:var(--white);border-radius:50%;flex-shrink:0;place-items:center;width:32px;height:32px;padding:0;display:grid}.mt-del svg{width:14px;height:14px}.mt-del:hover{border-color:var(--err);color:var(--err)}.mt-empty{color:var(--mute);font-size:13px}.mt.is-compact{grid-template-columns:1fr}.mt.is-compact .mt-side{display:none}.mt.is-compact .mt-main{border-right:0;padding-block:26px}.mt:fullscreen{width:100vw;height:100vh;box-shadow:none;border:0;border-radius:0;overflow:auto}.mt:fullscreen .mt-main{justify-content:center;gap:24px}.mt:fullscreen .mt-dial{width:min(52vh,46vw,560px)}.mt:fullscreen .mt-bpm{font-size:min(12vh,9vw,140px)}.mt:fullscreen .mt-beat{width:clamp(40px,6vw,80px);height:90px}@media (width<=900px){.mt{grid-template-columns:1fr}.mt-main{border-right:0;border-bottom:1.5px solid var(--ink)}}@media (width<=560px){.mt-main{gap:14px;padding:12px 10px 16px}.mt-beats{gap:8px 10px}.mt-beats .mt-group+.mt-group{padding-left:10px}.mt-group{gap:4px}.mt-beat{width:32px;height:58px}.mt-lv i{width:15px;height:6px}.mt-core{gap:6px}.mt-step{width:44px;height:44px;font-size:26px}.mt-dial{width:min(100vw - 150px,260px)}.mt-top .btn--sm{padding:5px 10px;font-size:12px}.mt-subname{display:none}.mt-play{min-width:150px;height:58px;padding:0 22px}.mt-tap{width:74px;height:58px}.mt-stats{justify-content:center;width:100%}.mt-keys{display:none}.mt-side{padding:14px}.mt-subgrid{grid-template-columns:repeat(4,1fr)}}@media (hover:none){.mt-keys{display:none}}
