.mixer-morph{grid-column:1/-1;margin-bottom:12px}
.mix-record-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px;min-height:64px}
.mix-record-controls button{font-size:10px;min-height:32px;min-width:48px;padding:5px 8px}
.mix-record-controls button[aria-pressed=true]{border-color:var(--chords);color:var(--chords)}
.mix-record-controls button:first-child[aria-pressed=true]{background:var(--drums);color:var(--bg)}
.mix-record-controls label{display:flex;align-items:center;gap:5px;font-size:10px}
.mix-record-controls input{width:64px;min-height:32px;font-size:11px}
.mix-record-status{flex-basis:100%;height:14px;font-size:9px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mix-pad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mix-pad-card{min-width:0;background:linear-gradient(135deg,var(--tone-19282d,#19282d),var(--tone-171c28,#171c28));border:1px solid var(--tone-3e555b,#3e555b);border-radius:12px;padding:12px;color:var(--tone-d8eceb,#d8eceb)}
.mix-pad-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mix-pad-heading h3{font-size:12px;letter-spacing:.1em;margin:0}
.mix-pad-heading button{font-size:11px;padding:4px 8px}
.mix-pad-surface{position:relative;height:160px;margin-top:12px;border-radius:8px;border:1px solid var(--tone-40545d,#40545d);cursor:crosshair;touch-action:none;user-select:none;overflow:hidden;background:radial-gradient(ellipse at 25% 15%,var(--tone-6caea627,#6caea627),transparent 65%),radial-gradient(ellipse at 85% 85%,var(--tone-ed98772b,#ed98772b),transparent 65%),linear-gradient(var(--tone-52636d20,#52636d20) 1px,transparent 1px),linear-gradient(90deg,var(--tone-52636d20,#52636d20) 1px,transparent 1px),var(--tone-101b24,#101b24);background-size:auto,auto,25% 25%,25% 25%,auto}
.mix-pad-surface:before,.mix-pad-surface:after{content:"";position:absolute;background:var(--tone-8199a24d,#8199a24d);pointer-events:none}
.mix-pad-surface:before{left:50%;top:0;width:1px;height:100%}
.mix-pad-surface:after{top:50%;left:0;height:1px;width:100%}
.mix-pad-surface:focus-visible{outline:2px solid var(--tone-ace2d7,#ace2d7);outline-offset:3px}
.mix-pad-left,.mix-pad-right,.mix-pad-top,.mix-pad-bottom{position:absolute;font-size:10px;pointer-events:none;color:var(--tone-b9cfd0,#b9cfd0)}
.mix-pad-left{left:8px;top:46%}.mix-pad-right{right:8px;top:46%}
.mix-pad-top,.mix-pad-bottom{left:0;right:0;text-align:center;font-size:9px}.mix-pad-top{top:8px}.mix-pad-bottom{bottom:8px}
.mix-pad-dot{position:absolute;left:var(--mix-x,50%);top:var(--mix-y,50%);width:14px;height:14px;border:2px solid var(--tone-dcfff3,#dcfff3);background:var(--tone-a6d8c7,#a6d8c7);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 7px var(--tone-a6d8c717,#a6d8c717),0 0 20px var(--tone-a6d8c765,#a6d8c765);pointer-events:none}
.mix-pad-card>output{display:block;color:var(--tone-a6d8c7,#a6d8c7);font-size:10px;letter-spacing:.12em;margin-top:8px}
.mix-pad-axes{display:flex;gap:12px;margin-top:8px}
.mix-pad-axes label{flex:1;min-width:0;font-size:9px;color:var(--tone-90a8ac,#90a8ac)}
.mix-pad-axes input{display:block;width:100%;accent-color:var(--tone-a6d8c7,#a6d8c7);margin-top:4px}
.mix-pad-card .mix-pad-surface{height:240px;min-height:240px}
@media(max-width:540px){.mix-pad-grid{grid-template-columns:1fr}.mix-pad-card .mix-pad-surface{height:220px;min-height:220px}}
.mix-cube-surface:before,.mix-cube-surface:after{display:none}
.mix-pad-card .mix-cube-surface{height:auto;min-height:220px;aspect-ratio:1;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
.mix-cube-frame{position:absolute;inset:0;pointer-events:none}
.mix-cube-frame svg{width:100%;height:100%;overflow:visible}
.mix-cube-frame path{fill:none;stroke:var(--accent);stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}
.mix-cube-plane{--cube-z:.5;position:absolute;left:calc(10% + var(--cube-z)*22%);top:calc(26% - var(--cube-z)*22%);width:64%;height:64%;border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);background:linear-gradient(color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px),color-mix(in srgb,var(--accent) 7%,transparent);background-size:25% 25%;pointer-events:none}
.mix-cube-depth-track{--cube-z:.5;position:absolute;left:74%;top:26%;width:var(--depth-length,31.1127%);height:32px;transform:translateY(-50%) rotate(var(--depth-angle,-36deg));transform-origin:0 50%;touch-action:none;cursor:ew-resize;z-index:4}
.mix-cube-depth-track:before{content:'';position:absolute;top:50%;width:100%;height:2px;background:var(--accent)}
.mix-cube-depth-thumb{position:absolute;left:calc(var(--cube-z)*100%);top:50%;width:18px;height:18px;transform:translate(-50%,-50%) rotate(45deg);border:2px solid var(--accent);background:var(--bg);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 35%,transparent);pointer-events:none}
.mix-cube-depth-label{position:absolute;left:-35px;top:-4px;font-size:9px;white-space:nowrap;color:var(--accent);pointer-events:none}
.mix-cube-depth-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mix-cube-surface .mix-pad-dot{z-index:3;width:16px;height:16px}
.mix-cube-surface .mix-pad-left,.mix-cube-surface .mix-pad-right{top:auto;bottom:3px}
.mix-cube-surface .mix-pad-top{top:3px;text-align:left;padding-left:8px;right:30%}
.mix-cube-surface .mix-pad-bottom{bottom:3px;left:28%;right:28%;font-size:8px}
.drum-cube-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mix-pad-card>output{float:none}
@media(max-width:900px){.drum-cube-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.drum-cube-grid>.mix-pad-card:last-child{grid-column:1/-1}}
@media(max-width:540px){.drum-cube-grid{grid-template-columns:minmax(0,1fr)}}