*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0d0d;--panel:#161616;--panel-raise:#1e1e1e;--border:#2a2a2a;--accent:#e85d04;--accent-dim:#7a2f00;--accent-strong:#ff7a1a;--accent-rgb:232,93,4;--text-hi:#b8b4ae;--text-lo:#5a5a5a;--led-on:#ff6b00;--led-off:#1a0900;--font-display:"Barlow Condensed", sans-serif;--font-mono:"Share Tech Mono", monospace;--radius-sm:3px;--radius-md:6px;--shadow-inset:inset 0 2px 6px #0009;--shadow-raise:0 4px 12px #0009}:root[data-theme=green]{--accent:#4caf50;--accent-dim:#24552a;--accent-strong:#72d676;--accent-rgb:76,175,80;--led-on:#73e277;--led-off:#0a190c}:root[data-theme=blue]{--accent:#3f87f5;--accent-dim:#1d4d93;--accent-strong:#74a8ff;--accent-rgb:63,135,245;--led-on:#8ab5ff;--led-off:#08111f}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:16px}body{background-color:var(--bg);color:var(--text-hi);font-family:var(--font-display);min-height:100dvh;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);flex-direction:column;justify-content:center;align-items:center;display:flex;overflow-x:hidden}#app{flex-direction:column;align-items:center;width:100%;max-width:960px;padding:1.5rem 1rem;display:flex}.dm-logo{font-family:var(--font-display);letter-spacing:.12em;color:var(--text-hi);font-weight:900;line-height:1}.dm-logo span{color:var(--accent)}.dm-version{font-family:var(--font-mono);color:var(--text-lo);letter-spacing:.1em;font-size:.65rem}.dm-greeting{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:480px;padding:2rem 1.5rem;animation:.5s both fadeUp;display:flex}.dm-greeting__info{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}.dm-greeting__info-text{font-family:var(--font-mono);color:var(--text-lo);text-align:center;font-size:clamp(.65rem,2vw,.8rem);line-height:1.8}.dm-greeting__info-text strong{color:var(--text-hi)}.dm-greeting__logo{font-family:var(--font-display);letter-spacing:.1em;color:var(--text-hi);font-size:clamp(3rem,12vw,6rem);font-weight:900;line-height:1}.dm-greeting__logo span{color:var(--accent)}.dm-greeting__sub{font-family:var(--font-mono);color:var(--text-lo);letter-spacing:.15em;text-transform:uppercase;font-size:clamp(.65rem,2vw,.8rem)}.dm-start-btn{font-family:var(--font-display);letter-spacing:.25em;text-transform:uppercase;color:var(--accent);border:2px solid var(--accent);border-radius:var(--radius-sm);cursor:pointer;background:0 0;margin-top:.5rem;padding:.75rem 3rem;font-size:clamp(1rem,3vw,1.25rem);font-weight:900;transition:background .15s,color .15s,box-shadow .15s;position:relative}.dm-start-btn:hover{background:var(--accent);color:#0d0d0d;box-shadow:0 0 20px rgba(var(--accent-rgb),.4)}.dm-start-btn:active{transform:scale(.97)}.dm-badges{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.dm-badge{font-family:var(--font-mono);letter-spacing:.1em;border:1px solid var(--accent-dim);border-radius:var(--radius-sm);color:var(--accent);background:rgba(var(--accent-rgb),.06);text-transform:uppercase;padding:.25rem .6rem;font-size:.65rem}.dm-theme-picker{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-lo);align-items:center;gap:.6rem;font-size:.65rem;display:flex}.dm-theme-picker__label{white-space:nowrap}.dm-theme-picker__select{text-align:center;text-align-last:center;appearance:none;background:var(--panel-raise);min-width:8.5rem;color:var(--accent);border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;letter-spacing:.08em;cursor:pointer;box-shadow:var(--shadow-inset);padding:.5rem .75rem}.dm-theme-picker__select:hover,.dm-theme-picker__select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), var(--shadow-inset);outline:none}.dm-theme-picker__select[data-theme=orange]{color:#e85d04}.dm-theme-picker__select[data-theme=green]{color:#4caf50}.dm-theme-picker__select[data-theme=blue]{color:#3f87f5}.dm-theme-picker__select option{background:var(--panel);color:var(--text-hi)}.dm-theme-picker__select option[value=orange]{color:#e85d04}.dm-theme-picker__select option[value=green]{color:#4caf50}.dm-theme-picker__select option[value=blue]{color:#3f87f5}.dm-machine{width:100%;animation:.4s both fadeUp}.dm-machine__body{background:var(--panel);border:2px solid var(--border);border-radius:var(--radius-md);width:100%;box-shadow:var(--shadow-raise), inset 0 1px 0 #ffffff08;overflow:hidden}.dm-machine__header{border-bottom:1px solid var(--border);background:var(--panel-raise);justify-content:space-between;align-items:center;padding:.85rem 1.25rem;display:flex}.dm-machine__header .dm-logo{font-size:clamp(1.1rem,3vw,1.5rem)}.dm-machine__stage{flex-direction:column;align-items:stretch;min-height:clamp(320px,50vw,500px);padding:1.5rem 1.5rem 0;display:flex}.dm-bpm-panel{flex-direction:column;justify-self:start;align-items:center;gap:.6rem;padding:1rem .75rem;display:flex}.dm-bpm-value{font-family:var(--font-mono);color:var(--text-hi);letter-spacing:.05em;text-align:center;min-width:3ch;font-size:.8rem}.dm-knob--bpm{width:64px;height:64px}.dm-machine__controls{grid-template-columns:1fr auto 1fr;align-items:center;width:100%;padding-bottom:1.5rem;display:grid}.dm-instruments{flex-direction:row;justify-content:center;align-items:center;gap:1.5rem;display:flex}.dm-instrument{flex-direction:column;align-items:center;gap:.5rem;display:flex}.dm-instrument__panel{background:var(--panel-raise);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;align-items:center;gap:1.25rem;width:110px;padding:1.25rem 1rem 1.5rem;display:flex}.dm-instrument__label{font-family:var(--font-mono);color:var(--text-lo);letter-spacing:.12em;text-transform:uppercase;font-size:.6rem}.dm-knob-row{flex-direction:column;align-items:center;gap:.85rem;display:flex}.dm-knob-group{flex-direction:column;align-items:center;gap:.3rem;display:flex}.dm-knob-label{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-size:.6rem;font-weight:700}.dm-knob{cursor:grab;--knob-angle:-45deg;width:40px;height:40px;transform:rotate(var(--knob-angle));background:radial-gradient(circle at 38% 35%,#3a3a3a,#1a1a1a);border:1px solid #444;border-radius:50%;transition:box-shadow .1s;position:relative;box-shadow:0 2px 6px #0009,inset 0 1px #ffffff0f}.dm-knob:active{cursor:ns-resize}.dm-knob:hover{box-shadow:0 2px 8px #000000b3, 0 0 0 1px var(--accent-dim), inset 0 1px 0 #ffffff0f}.dm-knob__indicator{background:var(--accent);border-radius:1px;width:2px;height:10px;position:absolute;top:5px;left:50%;transform:translate(-50%)}.dm-fader-row{justify-content:center;width:100%;display:flex}.dm-fader-group{flex-direction:column;align-items:center;display:flex}.dm-fader{appearance:slider-vertical;writing-mode:vertical-lr;cursor:pointer;width:28px;height:70px;accent-color:var(--accent);direction:rtl;background:0 0}.dm-fader::-webkit-slider-runnable-track{background:var(--border);border-radius:2px;width:4px}.dm-fader::-webkit-slider-thumb{-webkit-appearance:none;background:var(--panel-raise);border:2px solid var(--text-lo);cursor:pointer;border-radius:2px;width:18px;height:10px;margin-left:-7px}.dm-fader::-webkit-slider-thumb:hover{border-color:var(--text-hi)}.dm-fader::-moz-range-track{background:var(--border);border-radius:2px;width:4px}.dm-fader::-moz-range-thumb{background:var(--panel-raise);border:2px solid var(--text-lo);cursor:pointer;border-radius:2px;width:18px;height:10px}.dm-sequencer{border-top:1px solid var(--border);flex-direction:column;gap:.6rem;width:100%;padding:1rem 1.5rem 1.25rem;display:flex}.dm-seq-row{align-items:center;gap:.75rem;display:flex}.dm-seq-label{font-family:var(--font-mono);color:var(--accent);letter-spacing:.12em;text-transform:uppercase;text-align:right;flex-shrink:0;width:1.8rem;font-size:.6rem;font-weight:700}.dm-seq-steps{flex:1;grid-template-columns:repeat(16,1fr);gap:4px;display:grid}.dm-seq-step{aspect-ratio:1;background:var(--panel-raise);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;min-width:0;transition:background 80ms,border-color 80ms,box-shadow 80ms}.dm-seq-step:nth-child(4n+1){border-color:var(--accent-dim)}.dm-seq-step:hover{border-color:var(--accent);background:rgba(var(--accent-rgb), .1)}.dm-seq-step--on,.dm-seq-step[aria-pressed=true]{background:var(--accent);border-color:var(--accent);box-shadow:0 0 6px rgba(var(--accent-rgb), .5)}.dm-seq-step--on:hover,.dm-seq-step[aria-pressed=true]:hover{background:var(--accent-strong);border-color:var(--accent-strong)}.dm-seq-step--current{box-shadow:inset 0 0 0 2px var(--text-hi)}.dm-seq-step--on.dm-seq-step--current,.dm-seq-step[aria-pressed=true].dm-seq-step--current{box-shadow:0 0 6px #e85d0480, inset 0 0 0 2px var(--text-hi)}.dm-machine__footer{border-top:1px solid var(--border);flex-direction:column;align-items:center;gap:.75rem;width:100%;padding:1rem 0 1.25rem;display:flex}.dm-transport{justify-content:center;gap:.5rem;display:flex}.dm-play-btn,.dm-stop-btn,.dm-clear-btn{font-family:var(--font-display);background:var(--panel-raise);width:52px;height:36px;color:var(--accent);border:2px solid var(--accent);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;font-size:1.1rem;font-weight:800;transition:background .15s,color .15s,box-shadow .15s;display:flex}.dm-clear-btn{letter-spacing:.16em;text-transform:uppercase;width:auto;min-width:88px;padding:0 .9rem;font-size:.8rem}.dm-stop-btn__icon{background:currentColor;width:.7rem;height:.7rem;display:block}.dm-play-btn:hover,.dm-stop-btn:hover,.dm-clear-btn:hover{background:var(--accent);color:#0d0d0d;box-shadow:0 0 16px rgba(var(--accent-rgb),.4)}.dm-play-btn:active,.dm-stop-btn:active,.dm-clear-btn:active{transform:scale(.95)}@media (width<=480px){#app{padding:1rem .75rem}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}*{scrollbar-width:thin;scrollbar-color:var(--border) var(--bg)}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}