.dm-page {
  --dm-green: #adff00;
  --dm-ink: #1b1f27;
  --dm-panel: #2d323e;
  --dm-panel-2: #232832;
  --dm-line: #414855;
  --dm-muted: #9fa6b3;
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--navigation-bar-height) + 42px) 24px 96px;
  color: #fff;
}

.dm-page button, .dm-page input, .dm-page select { font-family: var(--font-body); }
.dm-page, .dm-page * { -webkit-user-select: none; user-select: none; }
.dm-page :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }
.dm-page ::selection { background: #596273; color: #fff; }
.dm-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 28px; }
.dm-intro h1 { margin: 2px 0 12px; font-size: clamp(2rem, 5vw, 4rem); }
.dm-intro > div:first-child > p:last-child { max-width: 720px; color: var(--dm-muted); }
.dm-eyebrow { color: var(--dm-muted); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.dm-connection { display: inline-flex; align-items: center; gap: 8px; color: var(--dm-muted); white-space: nowrap; }
.dm-connection span { width: 8px; height: 8px; border-radius: 50%; background: #69707e; }
.dm-connection.is-connected span { background: var(--dm-green); box-shadow: 0 0 14px rgba(173,255,0,.7); }

.dm-machine { overflow: hidden; border: 1px solid var(--dm-line); border-radius: 18px; background: #141820; box-shadow: 0 28px 80px rgba(0,0,0,.35); }
.dm-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 18px; border-bottom: 1px solid var(--dm-line); background: var(--dm-ink); }
.dm-preset-browser { display: flex; align-items: flex-end; gap: 10px; margin-left: auto; }
.dm-preset-dialog #dm-preset-name { box-sizing: border-box; width: 100%; margin: 8px 0; padding: 10px; border: 1px solid var(--dm-line); border-radius: 8px; background: var(--dm-panel); color: #fff; }
.dm-preset-dialog .dm-auth-actions {display:flex;justify-content:center;gap:12px}
.dm-mixer-icon {padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.dm-mixer-icon:hover {filter:brightness(1.3)}
.dm-mixer-icon:focus-visible {outline:1px solid var(--dm-green);outline-offset:2px;border-radius:4px}
.dm-preset-dialog label { display: block; }
.dm-brand { min-width: 145px; margin-right: auto; display: flex; flex-direction: column; }
.dm-brand span { color: var(--dm-muted); font-size: 9px; letter-spacing: .22em; }
.dm-number, .dm-field, .dm-bpm, .dm-generator label, .dm-pad-editor label { display: grid; gap: 5px; color: var(--dm-muted); font-size: 11px; letter-spacing: .04em; }
.dm-bpm { width: 190px; }
.dm-bpm {position:relative}
#dm-tempo-sync {position:absolute;top:100%;left:0;right:0;text-align:center;font-size:10px;line-height:14px;color:var(--dm-muted);letter-spacing:0}
#dm-tempo-sync:empty {display:none}
.dm-tempo-label { width: calc(100% - 60px); text-align: center; color: #fff; font-size: 14px; font-weight: 700; }
.dm-bpm > span { display: flex; align-items: center; gap: 12px; min-height: 38px; }
.dm-bpm input { flex: 1; min-width: 0; }
.dm-page #dm-bpm-value { flex: 0 0 48px; width: 48px; min-width: 0; box-sizing: border-box; padding: 3px 0; margin: 0; border: 0; border-radius: 3px; background: transparent; color: #fff; font-size: 19.2px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; cursor: text; }
.dm-page #dm-bpm-value:focus, .dm-page #dm-bpm-value:focus-visible { outline: none; box-shadow: none; background: transparent; }
.dm-page input[type="number"], .dm-page input[type="search"], .dm-page select { min-height: 38px; padding: 0 11px; border: 1px solid var(--dm-line); border-radius: 8px; background: var(--dm-panel-2); color: #fff; outline: none; }
.dm-page input:focus, .dm-page select:focus { border-color: var(--dm-green); box-shadow: 0 0 0 2px rgba(173,255,0,.12); }
.dm-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--dm-line); border-radius: 8px; background: var(--dm-panel); color: #fff; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .15s; }
.dm-button:hover { border-color: #687180; background: #38404d; }
.dm-button:active { transform: translateY(1px); }
.dm-button:disabled { cursor: not-allowed; opacity: .4; }
.dm-button--accent { border-color: var(--dm-green); background: var(--dm-green); color: #11151c; }
.dm-button--accent:hover { background: #c0ff38; border-color: #c0ff38; }
#dm-play { display: flex; align-items: center; justify-content: center; width: 80px; min-width: 80px; height: 38px; padding: 0; box-shadow: 0 0 0 1px rgba(173,255,0,.45), 0 0 18px rgba(173,255,0,.4), 0 0 30px rgba(173,255,0,.16); }
#dm-clear { position: relative; }
#dm-open-browser { box-shadow: 0 0 0 1px rgba(173,255,0,.45), 0 0 18px rgba(173,255,0,.4), 0 0 30px rgba(173,255,0,.16); }
#dm-clear .dm-clear-sizing { visibility: hidden; }
#dm-clear svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#dm-play[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--dm-ink); }
.dm-page #dm-play:focus {outline:none}
.dm-page #dm-play:focus-visible {outline:1px solid var(--dm-green);outline-offset:3px}

#dm-export, #dm-follow { width: 112px; height: 38px; padding: 0 10px; flex-shrink: 0; }
#dm-export { width: auto; min-width: 144px; }
#dm-follow { display: inline-flex; justify-content: center; align-items: center; width: 56px; padding: 0; background: transparent; border: 0; box-shadow: none; }
#dm-follow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#dm-follow .dm-key-black { fill: currentColor; stroke: none; }
#dm-follow:hover, #dm-follow[aria-pressed="true"] { background: transparent; color: var(--dm-green); }
.dm-workspace { display: grid; grid-template-columns: minmax(300px, var(--dm-pad-share, .85fr)) minmax(320px, var(--dm-pattern-share, 1.4fr)) 190px; }
#dm-height-divider { position: relative; height: 12px; margin: -6px 0; z-index: 4; cursor: row-resize; touch-action: none; }
#dm-height-divider::after { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--dm-line); }
#dm-height-divider:hover::after, #dm-height-divider:focus-visible::after { background: #737b87; }
.dm-workspace.has-bank-height .dm-pads, .dm-workspace.has-bank-height .dm-grid { height: var(--dm-bank-height); grid-auto-rows: minmax(0, 1fr); }
.dm-workspace.has-bank-height .dm-pad { min-height: 0; }
.dm-workspace.has-bank-height .dm-pad-trigger { min-height: 0; height: 100%; }
.dm-workspace.has-bank-height .dm-step { aspect-ratio: auto; min-height: 0; }
.dm-pad-section { container-type: inline-size; position: relative; min-width: 0; padding: 14px; border-right: 1px solid var(--dm-line); }
.dm-bank-divider { position: absolute; z-index: 3; top: 0; bottom: 0; right: -6px; width: 12px; cursor: col-resize; touch-action: none; }
.dm-bank-divider::after { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 1px; background: rgba(255,255,255,.35); }
.dm-bank-divider:hover::after, .dm-bank-divider:focus-visible::after, .dm-bank-divider.is-dragging::after { background: #737b87; box-shadow: none; }
.dm-bank-divider:focus-visible { outline: none; }
.dm-workspace.is-resizing { user-select: none; cursor: col-resize; }
.dm-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 16px; }
.dm-section-heading h2, .dm-generator h2, .dm-browser h2 { margin: 2px 0 0; font-size: 22px; }
.dm-pads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; width: 100%; }
.dm-pad { position: relative; min-height: 92px; padding: 10px; overflow: hidden; border: 1px solid #3a414e; border-radius: 11px; background: linear-gradient(145deg, #333946, #272c36); color: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.04), 0 5px 10px rgba(0,0,0,.15); transition: transform .08s, border-color .15s, box-shadow .15s; }
.dm-pad::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 110%, rgba(173,255,0,.16), transparent 55%); opacity: 0; transition: opacity .12s; }
.dm-pad:hover { border-color: #657080; }
.dm-pad.is-selected { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 22px rgba(255,255,255,.08); }
.dm-pad.is-playing { transform: translateY(2px) scale(.985); border-color: var(--dm-green); box-shadow: inset 0 0 26px rgba(173,255,0,.25), 0 0 25px rgba(173,255,0,.18); }
.dm-pad.is-playing::after { opacity: 1; }
.dm-pad.is-selected.is-playing { border-color: #fff; box-shadow: 0 0 0 1px #fff, inset 0 0 26px rgba(173,255,0,.25), 0 0 25px rgba(173,255,0,.18); }
.dm-pad__top { display: flex; justify-content: space-between; color: var(--dm-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.dm-pad__glyph { display: grid; place-items: center; height: 28px; color: var(--dm-green); font-size: 20px; line-height: 1; }
.dm-pad__glyph svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dm-pad .dm-pad__glyph { color: var(--dm-lane-colour, var(--dm-green)); }
.dm-pad-browse { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); width: 40px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.dm-pad-browse:hover, .dm-pad-browse:focus-visible { background: color-mix(in srgb, var(--dm-lane-colour, var(--dm-green)) 12%, transparent); outline: 1px solid var(--dm-lane-colour, var(--dm-green)); }
.dm-pad-shuffle { position: absolute; top: 36px; width: 24px; height: 28px; padding: 3px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--dm-muted); cursor: pointer; }
.dm-pad-shuffle--previous { left: calc(50% - 46px); }
.dm-pad-shuffle--next { right: calc(50% - 46px); }
.dm-pad-shuffle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dm-pad-shuffle:hover, .dm-pad-shuffle:focus-visible { color: var(--dm-lane-colour, var(--dm-green)); background: transparent; }
.dm-browser[open] { display: flex; flex-direction: column; }
.dm-browser__header, .dm-search, .dm-pagination { flex-shrink: 0; }
.dm-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px; border-top: 1px solid var(--dm-line); }
.dm-pagination span { min-width: 110px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; }
.dm-pagination button { display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.dm-pagination button:disabled { opacity: .35; cursor: default; }
.dm-pagination button[hidden] { display: none; }
.dm-pagination button:not(:disabled):hover { background: var(--dm-panel); }
.dm-pagination button:focus-visible { outline: 1px solid var(--dm-green); }
.dm-pagination svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dm-pad__name { display: block; overflow: hidden; color: #fff; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dm-pad__sample { display: block; overflow: hidden; margin-top: 3px; color: #edf0f5; font-size: clamp(11px, 2.9cqw, 14px); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dm-pad { padding: 0; }
.dm-pad-trigger { display: block; width: 100%; min-height: clamp(104px, 28cqw, 160px); padding: 10px; border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.dm-pad-trigger .dm-pad__top { min-height: 26px; padding-right: 58px; }
.dm-pad-actions { position: absolute; z-index: 2; top: 5px; right: 5px; display: flex; gap: 3px; }
.dm-pad-action { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #606875; border-radius: 6px; background: #232832; color: #cbd0d8; font-size: 12px; font-weight: 700; cursor: pointer; }
.dm-pad-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-pad-action:hover { background: #414956; color: #fff; }
.dm-pad-action[aria-pressed="true"] { background: var(--dm-lane-colour, var(--dm-green)); border-color: var(--dm-lane-colour, var(--dm-green)); color: #141820; }
.dm-pad-action:hover { border-color: var(--dm-lane-colour, var(--dm-green)); }
.dm-pad.is-silenced .dm-pad__glyph, .dm-pad.is-silenced .dm-pad__sample { opacity: .4; }
.dm-pad-action:focus-visible, .dm-pad-trigger:focus-visible { outline: 2px solid var(--dm-green); outline-offset: -2px; }
.dm-pad-editor { --dm-knob-size: clamp(30px, 8cqw, 46px); --dm-envelope-width: calc(var(--dm-knob-size) * 4 + 8px); position: relative; display: grid; gap: 16px; margin-top: 15px; padding: 14px; border-radius: 10px; background: var(--dm-ink); }
#dm-editor-link { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 30px; height: 30px; padding: 5px; border: 0; background: transparent; color: var(--dm-green); cursor: pointer; border-radius: 5px; }
#dm-editor-link[aria-pressed="false"] { color: var(--dm-muted); }
#dm-editor-link:hover { background: transparent; color: var(--dm-green); box-shadow: none; }
#dm-editor-link:focus-visible { outline: 1px solid currentColor; }
#dm-editor-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm-pad-editor > div:first-child { padding: 0 65px; min-height: 44px; }
.dm-pad-editor .dm-choke-corner { position: absolute; top: 10px; right: 14px; width: 64px; font-size: 10px; gap: 2px; }
.dm-page #dm-pad-choke { width: 64px; min-height: 28px; padding: 0 4px; font-size: 10px; }
.dm-pad-browser-controls { display: flex; align-items: center; justify-content: center; min-width: 0; }
.dm-pad-browser-controls .dm-button { flex: 1; min-width: 0; padding: 0 10px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-sound-arrow { display: grid; place-items: center; width: 22px; height: 38px; flex-shrink: 0; padding: 1px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.dm-sound-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dm-sound-arrow:hover, .dm-sound-arrow:focus-visible { color: var(--dm-green); background: transparent; }
.dm-sound-arrow:disabled { opacity: .35; cursor: default; }
.dm-pad-editor > div:first-child { display: flex; flex-direction: column; align-items: center; }
.dm-pad-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) var(--dm-envelope-width); gap: 8px; align-items: center; }
.dm-pad-sliders > label { align-self: stretch; grid-template-rows: 14px var(--dm-knob-size) 16px; gap: 4px; align-items: center; }
.dm-pad-sliders .dm-envelope { align-self: center; }
.dm-envelope > div { grid-template-columns: minmax(0, 1fr); }
.dm-knob-label { white-space: nowrap; font-size: 9px; }
.dm-pad-sliders label { min-width: 0; }
.dm-pad-sliders output { font-size: 11px; font-variant-numeric: tabular-nums; }
.dm-bipolar-slider { position: relative; display: flex; align-items: center; height: 20px; }
.dm-bipolar-slider::before { content: ''; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; transform: translateX(-50%); background: #c8cdd4; border-radius: 1px; pointer-events: none; }
.dm-bipolar-slider input { position: relative; width: 100%; margin: 0; }
.dm-pad-options { display: grid; grid-template-columns: minmax(60px, 1fr) auto; justify-content: center; gap: 8px; }
.dm-pad-options select { width: 100%; min-width: 0; }
.dm-pad-editor output { color: #fff; }
.dm-pad-editor { -webkit-user-select: none; user-select: none; }
.dm-pad__name { text-transform: none; }
#dm-selected-name { text-transform: none; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
#dm-selected-name:hover { color: var(--dm-green); }
#dm-selected-name:focus-visible { outline: 1px solid var(--dm-green); outline-offset: 3px; }
.dm-lane-label, #dm-step-editor-name, #dm-browser-pad { text-transform: uppercase; }
#dm-buy-kit:not(:disabled), #dm-export-audio:not(:disabled) { box-shadow: 0 0 0 1px rgba(173,255,0,.45), 0 0 18px rgba(173,255,0,.4), 0 0 30px rgba(173,255,0,.16); }
#dm-export-audio:disabled { background: #414650; border-color: #555b65; color: #9299a3; box-shadow: none; cursor: not-allowed; }
.dm-envelope { display: grid; width: var(--dm-envelope-width); grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; gap: 2px; }
.dm-envelope > div { display: grid; min-width: 0; grid-template-rows: 14px var(--dm-knob-size) 16px; justify-items: center; gap: 4px; font-size: 9px; color: var(--dm-muted); }
.dm-envelope output { width: 100%; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 16px; font-size: 9px; }
.dm-envelope-knob { position: relative; width: var(--dm-knob-size); height: var(--dm-knob-size); padding: 0; border: 1px solid #707985; border-radius: 50%; background: #343c48; touch-action: none; cursor: ns-resize; }
.dm-envelope-knob::after { content: ''; position: absolute; left: calc(50% - 1px); top: 10%; width: 2px; height: 34%; background: var(--dm-green); transform-origin: 1px calc(var(--dm-knob-size) * .4 - 1px); transform: rotate(var(--angle, -135deg)); }
.dm-envelope-knob:focus-visible { outline: 1px solid var(--dm-green); outline-offset: 2px; }
.dm-page input[type="range"] { width: 100%; accent-color: var(--dm-green); outline: none; box-shadow: none; }
.dm-pad-editor { --dm-volume-start: color-mix(in srgb, var(--dm-green) 25%, #242a34); --dm-volume-mid: color-mix(in srgb, var(--dm-green) 65%, #242a34); }
.dm-page input[type="range"]:focus, .dm-page input[type="range"]:focus-visible { outline: none; box-shadow: none; }
.dm-page :is(#dm-pad-volume, #dm-master, #dm-density, #dm-bpm, #dm-swing) { appearance: none; -webkit-appearance: none; height: 20px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.dm-page :is(#dm-pad-volume, #dm-master, #dm-density, #dm-bpm, #dm-swing)::-webkit-slider-runnable-track { height: 6px; border-radius: 8px; background: linear-gradient(to right, var(--dm-volume-start, #3c5427), var(--dm-volume-mid, #79b52c) 50%, var(--dm-green)); }
.dm-page :is(#dm-pad-volume, #dm-master, #dm-density, #dm-bpm, #dm-swing)::-moz-range-track { height: 6px; border-radius: 8px; background: linear-gradient(to right, var(--dm-volume-start, #3c5427), var(--dm-volume-mid, #79b52c) 50%, var(--dm-green)); }
.dm-page :is(#dm-pad-volume, #dm-master, #dm-density, #dm-bpm, #dm-swing)::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--dm-green); }
.dm-page :is(#dm-pad-volume, #dm-master, #dm-density, #dm-bpm, #dm-swing)::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--dm-green); }
.dm-page :is(#dm-pad-volume, #dm-master, #dm-density, #dm-swing)::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--dm-volume-start, #3c5427), var(--dm-volume-mid, #79b52c) 50%, var(--dm-green)) left / var(--dm-track-fill, 0%) 100% no-repeat, #626873; }
.dm-page :is(#dm-pad-volume, #dm-master, #dm-density, #dm-swing)::-moz-range-track { background: linear-gradient(to right, var(--dm-volume-start, #3c5427), var(--dm-volume-mid, #79b52c) 50%, var(--dm-green)) left / var(--dm-track-fill, 0%) 100% no-repeat, #626873; }

.dm-generator { min-width: 0; padding: 14px; background: var(--dm-ink); }
.dm-generator select { width: 100%; min-width: 0; }
.dm-generator > label { margin-top: 14px; }
.dm-generator .dm-button { width: 100%; margin-top: 14px; }
.dm-generator hr { height: 1px; margin: 20px 0; border: 0; background: var(--dm-line); }
.dm-generator .dm-check { display: flex; align-items: center; gap: 8px; }
.dm-generator output { color: #fff; }
.dm-help { margin-top: 10px; color: var(--dm-muted); font-size: 11px; line-height: 1.35; }

.dm-sequencer { box-sizing: border-box; min-width: 0; width: 100%; padding: 14px; border-right: 1px solid var(--dm-line); }
.dm-sequencer .dm-section-heading { flex-wrap: wrap; gap: 10px; }
.dm-sequencer .dm-section-heading label { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 700; }
.dm-page #dm-bpm::-webkit-slider-runnable-track { background: #626873; }
.dm-page #dm-bpm::-moz-range-track { background: #626873; }
.dm-sequence-scroll { overflow-x: auto; padding-bottom: 6px; }
.dm-sequencer { display: flex; flex-direction: column; }
.dm-step-editor { box-sizing: border-box; height: var(--dm-editor-height, 240px); min-height: 200px; margin-top: auto; padding: 14px; border-radius: 10px; background: var(--dm-ink); }
.dm-step-editor[hidden] { display: none; }
.dm-step-editor-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.dm-step-editor-heading strong { flex: 1 0 76px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dm-page #dm-step-parameter, .dm-page #dm-step-direction { box-sizing: border-box; min-width: 70px; width: 110px; flex-shrink: 1; font-size: 11px; font-weight: 400; letter-spacing: .02em; padding-left: 8px; padding-right: 20px; }
.dm-page #dm-step-parameter { width: 108px; min-width: 108px; flex-shrink: 0; }
.dm-page #dm-step-parameter:focus {outline:none;box-shadow:none;border-color:var(--dm-line)}
.dm-page #dm-step-parameter:focus-visible {border-color:#aab1bc}
.dm-step-editor-heading button { background: transparent; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
.dm-page #dm-step-rate, .dm-page #dm-step-division { box-sizing: border-box; width: 60px; min-width: 60px; flex-shrink: 0; font-size: 11px; padding-left: 7px; padding-right: 4px; }
.dm-page #dm-step-rate { width: 50px; min-width: 50px; }
.dm-step-editor-heading #dm-step-editor-close { flex: 0 0 18px; padding: 0; }
.dm-step-controls { position: relative; display: grid; grid-template-columns: repeat(16, minmax(18px, 1fr)); gap: 3px; height: calc(100% - 50px); min-height: 120px; user-select: none; -webkit-user-select: none; }
.dm-ramp-guide { position: absolute; height: 1px; background: #fff; box-shadow: 0 0 4px #000; transform-origin: left center; pointer-events: none; z-index: 2; }
.dm-page #dm-lane-shape { box-sizing: border-box; min-height: 38px; margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .02em; width: 108px; min-width: 70px; flex-shrink: 1; padding-left: 8px; padding-right: 20px; }
.dm-select-menu { position: fixed; z-index: 10000; box-sizing: border-box; padding: 5px; max-height: 280px; overflow-y: auto; border: 1px solid #626371; border-radius: 6px; background: #444450; box-shadow: 0 8px 24px #0008; }
.dm-select-menu { scrollbar-width: thin; scrollbar-color: #747480 transparent; }
@supports selector(::-webkit-scrollbar) {
  .dm-select-menu { scrollbar-width: auto; scrollbar-color: auto; }
}
.dm-page .dm-midi-learn-dialog { position: fixed; inset: 0; margin: auto; width: min(300px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; padding: 22px; background: var(--dm-panel); color: #fff; border: 1px solid var(--dm-line); border-radius: 12px; font-family: var(--font-body); font-size: 12px; text-align: center; }
.dm-midi-learn-dialog::backdrop { background: #0008; }
.dm-page .dm-midi-learn-dialog h3 { margin: 0 0 12px; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.dm-page .dm-midi-learn-dialog p { margin: 8px 0; font-family: var(--font-body); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.dm-page .dm-midi-learn-dialog .dm-context-learn-name { color: var(--dm-green); font-size: 13px; font-weight: 600; }
.dm-page .dm-midi-learn-dialog .dm-context-learn-assignment { color: #fff; font-size: 12px; }
.dm-page .dm-midi-learn-dialog .dm-context-learn-help { color: var(--dm-muted); }
.dm-page .dm-midi-learn-dialog .dm-button { display: block; width: 100%; margin: 16px 0 0; min-height: 34px; font-size: 12px; }
.dm-select-menu::-webkit-scrollbar { width: 4px; height: 4px; }
.dm-select-menu::-webkit-scrollbar-track { background: transparent; border-radius: 8px; margin: 6px 0; }
.dm-select-menu::-webkit-scrollbar-thumb { background: #747480; border: 0; border-radius: 8px; min-height: 28px; }
.dm-select-menu::-webkit-scrollbar-thumb:hover { background: #92929e; }
.dm-select-menu::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.dm-select-menu::-webkit-scrollbar-corner { background: transparent; }
.dm-select-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 3px; background: transparent; color: #e2e2ea; font-family: var(--font-body); font-size: 11px; text-align: left; cursor: pointer; }
.dm-select-option::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: transparent; flex-shrink: 0; }
.dm-select-option[aria-selected="true"]::before { background: #fff; }
.dm-select-option:hover { background: #fff; color: #1c2028; }
.dm-select-option:focus { outline: none; }
.dm-select-option:focus-visible { outline: none; text-decoration: none; }
.dm-select-option[aria-selected="true"]:hover::before { background: #1c2028; }
.dm-step-control { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; background: transparent; padding: 4px 0; }
.dm-step-control:nth-child(4)::after, .dm-step-control:nth-child(8)::after, .dm-step-control:nth-child(12)::after { content: ''; position: absolute; top: 5px; bottom: 5px; right: -2px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(180,186,195,.2) 15%, rgba(180,186,195,.2) 85%, transparent); pointer-events: none; }
.dm-step-control button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: #515866; color: #fff; font-size: 10px; cursor: pointer; touch-action: none; }
.dm-step-control button[aria-pressed="true"] { background: var(--dm-green); color: #141820; }
.dm-page .dm-step-control input[type="range"] { writing-mode: vertical-lr; direction: rtl; width: 18px; flex: 1; min-height: 50px; touch-action: none; }
.dm-step-control output { color: #e2e5ea; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-step-control.is-current button { outline: 1px solid #aeb4bd; outline-offset: 2px; }
.dm-step-controls input { appearance: none; -webkit-appearance: none; background: transparent; }
.dm-step-controls input::-webkit-slider-runnable-track { width: 4px; border-radius: 4px; background: linear-gradient(to top, var(--dm-green) 0 var(--dm-fill, 0%), #343a44 var(--dm-fill, 0%) 100%); }
.dm-step-controls input::-moz-range-track { width: 4px; border-radius: 4px; background: linear-gradient(to top, var(--dm-green) 0 var(--dm-fill, 0%), #343a44 var(--dm-fill, 0%) 100%); }
.dm-step-controls input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 8.96px; height: 8.96px; margin-left: -2.48px; border: 0; border-radius: 50%; background: var(--dm-green); }
.dm-step-controls input::-moz-range-thumb { width: 8.96px; height: 8.96px; border: 0; border-radius: 50%; background: var(--dm-green); }
.dm-step-controls[data-parameter="velocity"] input::-webkit-slider-runnable-track { width: 6px; background: linear-gradient(to top, color-mix(in srgb, var(--dm-green) 25%, #242a34) 0%, var(--dm-green) var(--dm-fill, 0%), #343a44 var(--dm-fill, 0%) 100%); }
.dm-step-controls[data-parameter="velocity"] input::-moz-range-track { width: 6px; background: linear-gradient(to top, color-mix(in srgb, var(--dm-green) 25%, #242a34) 0%, var(--dm-green) var(--dm-fill, 0%), #343a44 var(--dm-fill, 0%) 100%); }
.dm-step-controls[data-parameter="velocity"] input::-webkit-slider-thumb { margin-left: -1.48px; }
.dm-page #dm-pad-pitch { appearance: none; -webkit-appearance: none; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dm-page #dm-pad-pitch::-webkit-slider-runnable-track { height: 6px; border-radius: 8px; background: #626873; }
.dm-page #dm-pad-pitch::-moz-range-track { height: 6px; border-radius: 8px; background: #626873; }
.dm-page #dm-pad-pitch::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--dm-green); }
.dm-page #dm-pad-pitch::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--dm-green); }
.dm-grid { display: grid; grid-template-columns: 76px repeat(16, minmax(18px, 1fr)); gap: 2px; min-width: 500px; cursor: url('../images/rhythm-pencil-cursor.svg?v=2') 3 17, pointer; }
.dm-lane-label { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 4px; border: 1px solid #6c727c; border-radius: 3px; background: #555b65; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.dm-lane-label:hover, .dm-lane-label:focus-visible { border-color: var(--dm-lane-colour, var(--dm-green)); background: color-mix(in srgb, var(--dm-lane-colour, var(--dm-green)) 22%, #343b46); box-shadow: inset 0 0 10px color-mix(in srgb, var(--dm-lane-colour, var(--dm-green)) 12%, transparent); color: #fff; }
.dm-lane-label:focus-visible { outline: 1px solid var(--dm-lane-colour, var(--dm-green)); outline-offset: 1px; }
.dm-step { aspect-ratio: 1; min-height: 18px; padding: 0; border: 1px solid #343b46; border-radius: 3px; background: #242a34; cursor: inherit; touch-action: none; user-select: none; }
.dm-step.is-beat { border-color: #4d5561; background: #303743; }
.dm-step[data-step="4"], .dm-step[data-step="8"], .dm-step[data-step="12"] { position: relative; }
.dm-step[data-step="4"]::before, .dm-step[data-step="8"]::before, .dm-step[data-step="12"]::before { content: ''; position: absolute; left: -2.5px; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.22); pointer-events: none; }
.dm-step.is-on { border-color: #7a9e32; background: #526b21; box-shadow: inset 0 0 0 1px rgba(173,255,0,.24); }
.dm-step.is-velocity-25 { background: #3d4c22; }
.dm-step.is-velocity-50 { background: #526b21; }
.dm-step.is-velocity-75 { background: #71951f; }
.dm-step.is-velocity-100 { background: var(--dm-green); }
.dm-pad[data-pad-index="6"], .dm-pad[data-pad-index="7"], .dm-step[data-lane="6"], .dm-lane-label[data-select-lane="6"], .dm-step[data-lane="7"], .dm-lane-label[data-select-lane="7"] { --dm-lane-colour: #B09AE8; }
.dm-pad[data-pad-index="10"], .dm-pad[data-pad-index="11"], .dm-step[data-lane="10"], .dm-lane-label[data-select-lane="10"], .dm-step[data-lane="11"], .dm-lane-label[data-select-lane="11"] { --dm-lane-colour: #E8B45F; }
.dm-pad[data-pad-index="3"], .dm-pad[data-pad-index="4"], .dm-pad[data-pad-index="8"], .dm-step[data-lane="3"], .dm-lane-label[data-select-lane="3"], .dm-step[data-lane="4"], .dm-lane-label[data-select-lane="4"], .dm-step[data-lane="8"], .dm-lane-label[data-select-lane="8"] { --dm-lane-colour: #D58DA8; }
.dm-pad:is([data-pad-index="2"], [data-pad-index="5"], [data-pad-index="0"], [data-pad-index="1"], [data-pad-index="3"], [data-pad-index="4"], [data-pad-index="6"], [data-pad-index="7"], [data-pad-index="8"], [data-pad-index="10"], [data-pad-index="11"]) { border-color: color-mix(in srgb, var(--dm-lane-colour) 65%, #343b46); }
.dm-pad:is([data-pad-index="2"], [data-pad-index="5"], [data-pad-index="0"], [data-pad-index="1"], [data-pad-index="3"], [data-pad-index="4"], [data-pad-index="6"], [data-pad-index="7"], [data-pad-index="8"], [data-pad-index="10"], [data-pad-index="11"]):is(.is-selected, .is-playing, :hover) { border-color: var(--dm-lane-colour); box-shadow: 0 0 0 1px var(--dm-lane-colour), 0 0 18px color-mix(in srgb, var(--dm-lane-colour) 20%, transparent); }
.dm-step.is-on:is([data-lane="2"], [data-lane="5"], [data-lane="0"], [data-lane="1"], [data-lane="3"], [data-lane="4"], [data-lane="6"], [data-lane="7"], [data-lane="8"], [data-lane="10"], [data-lane="11"]) { border-color: var(--dm-lane-colour); background: color-mix(in srgb, var(--dm-lane-colour) var(--dm-step-strength, 60%), #242a34); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dm-lane-colour) 24%, transparent); }
.dm-step.is-velocity-25 { --dm-step-strength: 30%; }
.dm-pad[data-pad-index="5"], .dm-step[data-lane="5"], .dm-lane-label[data-select-lane="5"] { --dm-lane-colour: #E88E78; }
.dm-pad[data-pad-index="2"], .dm-step[data-lane="2"], .dm-lane-label[data-select-lane="2"] { --dm-lane-colour: #809FEF; }
.dm-pad[data-pad-index="0"], .dm-pad[data-pad-index="1"], .dm-step[data-lane="0"], .dm-lane-label[data-select-lane="0"], .dm-step[data-lane="1"], .dm-lane-label[data-select-lane="1"] { --dm-lane-colour: #63C7D5; }
.dm-step.is-velocity-50 { --dm-step-strength: 50%; }
.dm-step.is-velocity-75 { --dm-step-strength: 75%; }
.dm-step.is-velocity-100 { --dm-step-strength: 100%; }
.dm-step.is-current { outline: 1px solid rgba(180, 186, 195, .85); outline-offset: 0; box-shadow: inset 0 0 0 1px rgba(180, 186, 195, .12), 0 0 5px rgba(180, 186, 195, .18); }

.dm-kit-summary { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--dm-line); text-align: center; }
.dm-kit-summary strong { display: block; font-size: 13px; }

.dm-browser { width: min(1120px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); padding: 0; overflow: hidden; border: 1px solid #697180; border-radius: 14px; background: var(--dm-ink); color: #fff; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
#dm-pad-browse { border-color: var(--dm-green); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dm-green) 20%, transparent), 0 0 18px color-mix(in srgb, var(--dm-green) 30%, transparent), 0 0 30px color-mix(in srgb, var(--dm-green) 12%, transparent); }
.dm-browser::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(3px); }
.dm-page dialog { position: fixed; inset: 0; margin: auto; max-height: calc(100dvh - 32px); }
.dm-page .dm-credit-dialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); height: fit-content; padding: 24px; overflow-y: auto; text-align: center; font-family: var(--font-body); }
.dm-page .dm-credit-dialog h2 { font-family: var(--font-body); font-size: 20px; line-height: 1.25; }
.dm-page .dm-credit-dialog p { font-size: 13px; }
.dm-confirm-actions { display: flex; justify-content: center; gap: 12px; width: 100%; }
.dm-confirm-actions .dm-button { flex: 1; }
.dm-credit-dialog h2 { margin: 0 0 16px; }
.dm-credit-dialog p { margin: 0 0 20px; line-height: 1.5; }
.dm-credit-dialog a { color: var(--dm-green); }
.dm-credit-dialog form { align-self: flex-end; }
.dm-auth-actions { display: flex; gap: 12px; margin-bottom: 20px; }
.dm-auth-actions a { display: flex; align-items: center; justify-content: center; flex: 1; text-decoration: none; color: #fff; }
.dm-auth-actions .dm-button--accent { color: #11151c; }
.dm-browser__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--dm-line); }
.dm-icon-button { width: 38px; height: 38px; padding: 0; border: 1px solid var(--dm-line); border-radius: 50%; background: var(--dm-panel); color: #fff; font-size: 24px; cursor: pointer; }
.dm-search { display: flex; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--dm-line); }
.dm-page .dm-search input[type="search"] { flex: 1; min-width: 0; padding-inline: 16px; border-radius: 999px; background: #fff; color: #111; caret-color: #111; }
.dm-page .dm-search input[type="search"]::placeholder { color: #333; opacity: 1; }
#dm-browser { position: fixed; inset: 0; margin: auto; width: min(960px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 32px)); }
.dm-results { flex: 1; min-height: 0; max-height: 500px; overflow: auto; scrollbar-gutter: stable; padding: 8px; }
.dm-result { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; min-width: 0; padding: 9px; border-radius: 9px; }
.dm-result:hover { background: var(--dm-panel-2); }
.dm-result img { width: 48px; height: 48px; border-radius: 5px; object-fit: cover; background: var(--dm-panel); }
.dm-result__copy { min-width: 0; }
.dm-result__copy strong, .dm-result__copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-result__copy span { color: var(--dm-muted); font-size: 11px; }
.dm-result__cost { color: var(--dm-muted); font-size: 11px; white-space: nowrap; }
.dm-preview { width: 38px; padding: 0; border-radius: 50%; }
.dm-empty { padding: 48px 20px; color: var(--dm-muted); text-align: center; }
.dm-toast { position: fixed; z-index: 1400; left: 50%; bottom: 26px; padding: 10px 16px; border: 1px solid var(--dm-line); border-radius: 8px; background: var(--dm-panel); color: #fff; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s; }
.dm-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1050px) {
  .dm-workspace { grid-template-columns: 1fr; }
  .dm-bank-divider { display: none; }
  .dm-pad-section { border-right: 0; }
  .dm-generator { border-top: 1px solid var(--dm-line); }
  .dm-sequencer { width: 100%; border-right: 0; border-top: 1px solid var(--dm-line); }
}

@media (max-width: 620px) {
  .dm-page { padding: calc(var(--navigation-bar-height) + 24px) 12px 64px; }
  .dm-intro { align-items: flex-start; flex-direction: column; }
  .dm-toolbar { align-items: stretch; }
  .dm-brand { width: 100%; }
  .dm-toolbar .dm-field { flex: 1 1 145px; }
  .dm-bpm { width: 100%; }
  .dm-pads { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .dm-pad { min-height: 92px; padding: 0; }
  .dm-pad-trigger .dm-pad__top { padding-right: 0; padding-top: 22px; }
  .dm-result { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
  .dm-result img { width: 42px; height: 42px; }
  .dm-result__cost { display: none; }
}
.dm-page dialog .dm-dialog-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 24px; height: 24px;
  min-width: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; color: #a5abb5;
  font: 400 21px/1 Arial, sans-serif; cursor: pointer;
}
.dm-page dialog .dm-dialog-close:hover {color: #fff; background: transparent; box-shadow: none;}
.dm-page dialog .dm-dialog-close:focus-visible {outline: 1px solid #a5abb5; outline-offset: 2px;}
.dm-page dialog h2, .dm-page dialog h3 {padding-inline: 20px;}
#dm-auth-frame {width:100%;height:440px;border:0;background:#191d25;border-radius:8px}
#dm-auth-dialog {max-height:calc(100dvh - 32px);overflow-y:auto}
.dm-page #dm-auth-dialog {padding:20px 24px}
.dm-page #dm-auth-dialog h2 {margin-bottom:8px}
.dm-page #dm-auth-dialog > p {margin-bottom:10px;font-size:12px}
#dm-auth-frame {display:block}
.dm-editor-toolbar {display:flex;justify-content:flex-end;align-items:center;flex:0 0 24px;height:24px;margin:0;padding:0 8px}
.dm-editor-toolbar + .dm-step-editor {margin-top:0}
.dm-step-editor.is-mixer[hidden] {display:none}
#dm-mixer-toggle {padding:0;width:24px;height:24px;display:grid;place-items:center;color:#aab1bc;background:transparent;border:0;cursor:pointer}
#dm-mixer-toggle svg {width:20px;height:20px;fill:var(--dm-ink);stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
#dm-mixer-toggle:hover, #dm-mixer-toggle[aria-pressed="true"] {color:#fff}
.dm-step-editor.is-mixer .dm-step-editor-heading select {display:none}
.dm-step-controls[hidden], #dm-mixer[hidden] {display:none}
#dm-mixer {display:grid;grid-template-columns:repeat(12,minmax(30px,1fr));gap:6px;height:calc(100% - 58px);min-height:120px;overflow-x:auto}
.dm-mixer-channel {display:grid;grid-template-rows:24px minmax(38px,1fr) 16px 16px 16px;justify-items:center;gap:3px;min-width:0}
.dm-mixer-icon svg {height:23px;width:23px;fill:none;stroke:var(--dm-green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dm-mixer-channel output {font-size:10px;color:#fff;line-height:16px}
.dm-page #dm-mixer .dm-mixer-gain {writing-mode:vertical-lr;direction:rtl;width:18px;height:100%;min-height:0;appearance:none;background:transparent}
.dm-mixer-gain::-webkit-slider-runnable-track {width:5px;border-radius:4px;background:linear-gradient(to top,var(--dm-green) var(--dm-fill,0%),#343a44 var(--dm-fill,0%))}
.dm-mixer-gain::-moz-range-track {width:5px;border-radius:4px;background:linear-gradient(to top,var(--dm-green) var(--dm-fill,0%),#343a44 var(--dm-fill,0%))}
.dm-mixer-gain::-webkit-slider-thumb {appearance:none;width:10px;height:10px;margin-left:-2.5px;border-radius:50%;background:var(--dm-green)}
.dm-mixer-gain::-moz-range-thumb {width:10px;height:10px;border:0;border-radius:50%;background:var(--dm-green)}
.dm-page #dm-mixer .dm-mixer-pan {width:100%;height:16px;margin:0;accent-color:var(--dm-green);appearance:none;background:transparent}
.dm-mixer-pan::-webkit-slider-runnable-track {height:4px;border-radius:4px;background:#626873}
.dm-mixer-pan::-moz-range-track {height:4px;border-radius:4px;background:#626873}
.dm-mixer-pan::-webkit-slider-thumb {appearance:none;width:11.2px;height:11.2px;margin-top:-3.6px;border:0;border-radius:50%;background:var(--dm-green)}
.dm-mixer-pan::-moz-range-thumb {width:11.2px;height:11.2px;border:0;border-radius:50%;background:var(--dm-green)}
.dm-step-editor.is-mixer {display:flex;flex-direction:column}
.dm-step-editor.is-mixer .dm-step-editor-heading {flex-shrink:0}
.dm-step-editor.is-mixer #dm-mixer {flex:1;min-height:0;height:auto;grid-template-rows:minmax(0,1fr)}
.dm-mixer-channel {min-height:0}
.dm-page #dm-mixer .dm-mixer-gain {contain:size}
.dm-envelope > div {white-space:nowrap}

.dm-envelope > div {text-align:center}