.knob{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;touch-action:none}.knob svg{cursor:ns-resize;border-radius:50%;outline:none}.knob svg:focus-visible{outline:2px solid rgba(200,140,60,.85);outline-offset:3px}.knob-label{color:#cec5b2d9;font-size:9px;font-family:Inter,Helvetica Neue,sans-serif;letter-spacing:.09em;font-weight:500;white-space:nowrap}.knob-readout{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:2px 7px;border-radius:5px;background:#08080eeb;border:1px solid rgba(200,140,60,.4);color:#d8c9a8;font-size:10px;font-family:Inter,monospace;white-space:nowrap;pointer-events:none;z-index:10}.dm-algo{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin-top:22px;padding:14px 12px 12px;border-radius:12px;background:linear-gradient(160deg,#24242f,#191922 60%,#101018);border:1px solid rgba(0,0,0,.7);box-shadow:inset 0 2px 2px #ffffff0f,inset 0 -3px 5px #00000080,0 3px 10px #0006}.dm-algo-group{position:relative;display:flex;flex-direction:column;gap:8px;padding:6px 14px 4px;border-radius:9px;background:#00000038;box-shadow:inset 0 1px 3px #0000008c,inset 0 -1px #ffffff08}.dm-algo-group-end{margin-left:auto}.dm-algo-legend{font-size:9px;font-weight:600;letter-spacing:.14em;color:#d4c2a4bd}.dm-algo-row{display:flex;align-items:flex-end;gap:10px}.dm-algo-field{display:flex;flex-direction:column;gap:4px}.dm-algo-label{font-size:10px;font-weight:500;letter-spacing:.1em;color:#cac0acc7}.dm-algo-select,.dm-algo-num{height:26px;padding:0 6px;border-radius:5px;border:1px solid rgba(0,0,0,.7);background:linear-gradient(180deg,#0c0c12,#05050a);color:#d8c9a8;font-family:Inter,Helvetica Neue,sans-serif;font-size:11px;box-shadow:inset 0 1px 2px #0009}.dm-algo-num{width:52px}.dm-algo-select:focus-visible,.dm-algo-num:focus-visible,.dm-algo-btn:focus-visible{outline:2px solid rgba(200,140,60,.85);outline-offset:2px}.dm-algo-btn{height:26px;padding:0 12px;border-radius:5px;border:none;outline:1px solid rgba(0,0,0,.55);background:linear-gradient(180deg,#3a3a48,#23232e);color:#dcd2beeb;font-family:Inter,Helvetica Neue,sans-serif;font-size:10px;font-weight:600;letter-spacing:.08em;cursor:pointer;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #00000073;transition:background .12s ease,box-shadow .12s ease}.dm-algo-btn:hover:not(:disabled){background:linear-gradient(180deg,#45454f,#2b2b36)}.dm-algo-btn:active:not(:disabled){background:linear-gradient(180deg,#23232e,#1a1a24);box-shadow:inset 0 2px 4px #0009}.dm-algo-btn-warn{color:#f0b4aaeb}.dm-algo-btn:disabled,.dm-algo-select:disabled,.dm-algo-num:disabled{opacity:.45;cursor:default}.dm-algo-toast{align-self:center;font-size:10px;color:#e6be78e6;opacity:0;transition:opacity .15s ease;white-space:nowrap}.dm-algo-toast-show{opacity:1}@media(max-width:620px){.dm-algo-group-end{margin-left:0}}@media(prefers-reduced-motion:reduce){.dm-algo-btn,.dm-algo-toast{transition:none!important}}.dm-machine{--dm-led: #c87828;--dm-led-dim: rgba(140, 90, 30, .18);--dm-text: rgba(208, 199, 180, .86);width:min(100%,1000px);padding:20px 28px 26px;border-radius:22px;background:linear-gradient(135deg,#2e2e3c,#212130 32%,#141420);border:1px solid rgba(0,0,0,.75);box-shadow:0 14px 44px #000000d9,0 4px 12px #0009,inset 0 2px 2px #ffffff24,inset 2px 0 2px #ffffff0d,inset 0 -3px 5px #0000008c,inset -3px 0 4px #0000004d;font-family:Inter,Helvetica Neue,sans-serif}.dm-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.dm-title{margin:0;font-size:21px;font-weight:600;letter-spacing:.01em}.dm-title-algo{color:#8888a8}.dm-title-drum{color:#6f92e0}.dm-status{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a3418,#201204);border:1px solid rgba(0,0,0,.6);animation:dm-status-pulse 1.1s ease-in-out infinite}.dm-status-ready{background:radial-gradient(circle at 35% 30%,#ffcf8a,var(--dm-led));box-shadow:0 0 8px #c88c28b3;animation:none}@keyframes dm-status-pulse{50%{background:radial-gradient(circle at 35% 30%,#8a6430,#3a2408)}}.dm-board{position:relative;display:grid;grid-template-columns:auto repeat(16,minmax(0,1fr)) 26px auto;grid-auto-rows:min-content;column-gap:2px;align-items:center}.dm-screen{grid-row:1 / 6;grid-column:2 / 18;align-self:stretch;justify-self:stretch;margin:-10px;border-radius:12px;background:#08080e;border:1px solid rgba(0,0,0,.9);box-shadow:inset 0 14px 18px -8px #000000bf,inset 10px 0 14px -8px #00000073,inset 0 -5px 8px -4px #ffffff0a,0 2px 10px #000000a6}.dm-track-label{padding-right:20px;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--dm-text);text-align:right;z-index:1}.dm-cell{position:relative;z-index:1;width:100%;aspect-ratio:41 / 37;padding:0;margin:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}.dm-cell:before{content:"";position:absolute;inset:7px;border-radius:7px;background:#06060c;box-shadow:inset 0 8px 10px -5px #000000b3,inset 6px 0 8px -5px #0006,inset 0 -4px 6px -4px #ffffff0d}.dm-cell[data-bar-start]:not(:first-of-type):after{content:"";position:absolute;left:-2px;top:8%;bottom:8%;width:2px;background:#b4a08214}.dm-cell[data-bar-odd]{background:#c8b49609}.dm-cell[data-beyond],.dm-step-number[data-beyond]{opacity:.4}.dm-cell:focus-visible{outline:none}.dm-cell:focus-visible:before{outline:2px solid rgba(200,140,60,.85);outline-offset:2px}.dm-led{position:relative;width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 38%,var(--dm-led-dim),rgba(60,38,12,.12));transition:box-shadow 90ms ease,background 90ms ease}.dm-cell[data-active] .dm-led{background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.92),var(--dm-led) 34%,rgba(200,120,40,.25) 100%);box-shadow:0 0 10px 2px #c882288c,0 0 26px 4px #c8822833}.dm-cell[data-accent] .dm-led{background:radial-gradient(circle at 38% 32%,#fff,#ffb050 30%,#ffa53766);box-shadow:0 0 13px 3px #ffaa3ccc,0 0 32px 7px #eb962d52}.dm-cell[data-playhead]{background:#c88c2812}.dm-cell[data-playhead]:before{box-shadow:inset 0 8px 10px -5px #000000b3,inset 6px 0 8px -5px #0006,inset 0 -4px 6px -4px #ffffff0d,inset 0 2px #c88c2866}.dm-cell[data-playhead][data-active] .dm-led{box-shadow:0 0 12px 3px #eba53ccc,0 0 30px 6px #c882284d}.dm-step-number{padding-top:16px;text-align:center;font-size:10px;font-family:Inter,monospace;color:#c0b298b8;z-index:1}.dm-step-number[data-playhead]{color:#e6be78cc}.dm-track-controls{display:flex;align-items:center;gap:8px;padding-left:2px}.dm-mute{width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:13px;background:transparent;border:none;border-radius:50%;cursor:pointer}.dm-mute:focus-visible{outline:2px solid rgba(200,140,60,.85);outline-offset:1px}.dm-mute-led{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a1010,#1a0505);border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 1px #ffffff0a;transition:background .1s ease,box-shadow .1s ease}.dm-mute[aria-pressed=true] .dm-mute-led{background:radial-gradient(circle at 35% 30%,#ff7070,#cc1010);box-shadow:0 0 7px #d21414bf,inset 0 1px #ffc8c840}.dm-transport{display:flex;align-items:flex-start;gap:20px;margin-top:28px;padding:0 4px}.dm-transport-spacer{flex:1}.dm-tempo-group{display:flex;flex-direction:column;align-items:center;gap:6px}.dm-tap{padding:3px 10px;border-radius:5px;border:none;outline:1px solid rgba(0,0,0,.55);background:linear-gradient(180deg,#3a3a48,#23232e);color:#dcd2beeb;font-family:Inter,Helvetica Neue,sans-serif;font-size:9px;font-weight:600;letter-spacing:.1em;cursor:pointer;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #00000073;transition:background .12s ease}.dm-tap:hover:not(:disabled){background:linear-gradient(180deg,#45454f,#2b2b36)}.dm-tap:active:not(:disabled){background:linear-gradient(180deg,#23232e,#1a1a24);box-shadow:inset 0 2px 4px #0009}.dm-tap:disabled{opacity:.45;cursor:default}.dm-tap:focus-visible{outline:2px solid rgba(200,140,60,.85);outline-offset:2px}.dm-play{width:48px;height:48px;margin-top:3px;border-radius:50%;border:none;outline:1.5px solid rgba(0,200,120,.35);background:linear-gradient(145deg,#1a9a66,#0d6644);box-shadow:0 0 14px #00b46459,0 4px 10px #0009,inset 0 1px #ffffff26;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}.dm-play:disabled{filter:grayscale(.8) brightness(.6);cursor:default}.dm-play:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}.dm-play-active{background:linear-gradient(145deg,#e03333,#911);outline-color:#ff505073;box-shadow:0 0 18px #dc323280,0 4px 10px #0009,inset 0 1px #ffffff26}@media(max-width:620px){.dm-machine{padding:14px 14px 18px}.dm-board{grid-template-columns:auto repeat(16,minmax(0,1fr)) 12px auto}.dm-cell:before{inset:3px;border-radius:5px}.dm-track-label{padding-right:10px;font-size:9px}.dm-track-controls{gap:4px}.dm-transport{flex-wrap:wrap;gap:14px}}@media(prefers-reduced-motion:reduce){.dm-machine *,.dm-machine *:before{transition:none!important;animation:none!important}}.fault-panel{width:min(100%,460px);margin:0 auto;padding:26px 28px 24px;border-radius:16px;text-align:center;background:linear-gradient(135deg,#2e2e3c,#212130 32%,#141420);border:1px solid rgba(0,0,0,.75);box-shadow:0 14px 44px #000000d9,inset 0 2px 2px #ffffff1f,inset 0 -3px 5px #0000008c;font-family:Inter,Helvetica Neue,sans-serif}.fault-badge{width:44px;height:44px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#ffcf8a;border-radius:50%;background:radial-gradient(circle at 38% 32%,#7a4a1a,#341c06);box-shadow:0 0 14px #c8782873,inset 0 1px #ffffff1f}.fault-title{margin:0 0 10px;font-size:18px;font-weight:600;color:#f0e7d4}.fault-text{margin:0 0 16px;font-size:14px;line-height:1.5;color:#cdc3ad}.fault-detail{margin:0 0 18px;padding:8px 10px;border-radius:6px;text-align:left;overflow-x:auto;white-space:pre-wrap;word-break:break-word;background:linear-gradient(180deg,#0c0c12,#05050a);border:1px solid rgba(0,0,0,.7);box-shadow:inset 0 1px 2px #0009;font-family:SFMono-Regular,Menlo,monospace;font-size:12px;color:#e58e8e}.fault-btn{min-width:120px;height:34px;padding:0 18px;border-radius:6px;border:none;outline:1px solid rgba(0,0,0,.55);background:linear-gradient(180deg,#3a3a48,#23232e);color:#f0e7d4;font-family:Inter,Helvetica Neue,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #00000073;transition:background .12s ease,box-shadow .12s ease}.fault-btn:hover{background:linear-gradient(180deg,#45454f,#2b2b36)}.fault-btn:active{background:linear-gradient(180deg,#23232e,#1a1a24);box-shadow:inset 0 2px 4px #0009}.fault-btn:focus-visible{outline:2px solid rgba(200,140,60,.85);outline-offset:2px}@media(prefers-reduced-motion:reduce){.fault-btn{transition:none}}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(120% 90% at 46% 40%,#252535,#111118 55%,#05050a) #05050a}.app-loading{color:#d8c1a0;margin-bottom:16px;font-family:Georgia,serif;font-size:15px}.app-fault{width:min(100%,460px);margin-bottom:20px;padding:26px 28px 24px;border-radius:16px;text-align:center;background:linear-gradient(135deg,#2e2e3c,#212130 32%,#141420);border:1px solid rgba(0,0,0,.75);box-shadow:0 14px 44px #000000d9,inset 0 2px 2px #ffffff1f,inset 0 -3px 5px #0000008c;font-family:Inter,Helvetica Neue,sans-serif}.app-fault-badge{width:44px;height:44px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#ffcf8a;border-radius:50%;background:radial-gradient(circle at 38% 32%,#7a4a1a,#341c06);box-shadow:0 0 14px #c8782873,inset 0 1px #ffffff1f}.app-fault-title{margin:0 0 10px;font-size:18px;font-weight:600;color:#f0e7d4}.app-fault-text{margin:0 0 16px;font-size:14px;line-height:1.5;color:#cdc3ad}.app-fault-detail{margin:0 0 18px;padding:8px 10px;border-radius:6px;text-align:left;overflow-x:auto;white-space:pre-wrap;word-break:break-word;background:linear-gradient(180deg,#0c0c12,#05050a);border:1px solid rgba(0,0,0,.7);box-shadow:inset 0 1px 2px #0009;font-family:SFMono-Regular,Menlo,monospace;font-size:12px;color:#e58e8e}.app-fault-btn{min-width:120px;height:34px;padding:0 18px;border-radius:6px;border:none;outline:1px solid rgba(0,0,0,.55);background:linear-gradient(180deg,#3a3a48,#23232e);color:#f0e7d4;font-family:Inter,Helvetica Neue,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #00000073;transition:background .12s ease,box-shadow .12s ease}.app-fault-btn:hover{background:linear-gradient(180deg,#45454f,#2b2b36)}.app-fault-btn:active{background:linear-gradient(180deg,#23232e,#1a1a24);box-shadow:inset 0 2px 4px #0009}.app-fault-btn:focus-visible{outline:2px solid rgba(200,140,60,.85);outline-offset:2px}@media(prefers-reduced-motion:reduce){.app-fault-btn{transition:none}}