/* DIE INSTANZ · Loops — v1.0.33 */
.loops-section{background:#080808}.loops-section .section-title-row>div{max-width:620px}.loops-master{display:grid;grid-template-columns:145px 160px 130px 130px minmax(180px,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px}.loops-master>*{background:#0c0c0c;min-width:0}.loops-master label{display:grid;gap:8px;padding:14px}.loops-master label>span,.loop-track-picker>span,.loop-control>span{font:650 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#858079}.loops-master input[type=number],.loops-master select,.loop-track-picker select{width:100%;min-height:44px;border:1px solid #3a3733;background:#080808;color:#eee9e0;padding:0 10px;outline:none}.loops-master input:focus,.loops-master select:focus,.loop-track-picker select:focus{border-color:#8b332c}.loops-master .mixer-button{margin:14px;min-height:44px}.loops-master .loops-master-volume{padding:14px}.loops-master input[type=range],.loop-control input[type=range]{width:100%;accent-color:var(--red)}
.loops-clock{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-top:0;background:#0b0b0b;padding:11px 14px}.loops-clock>span{font:600 9px/1 ui-monospace,monospace;letter-spacing:.12em;color:#77726b}.loops-clock-dots{display:flex;gap:7px}.loops-clock-dots span{width:7px;height:7px;border-radius:50%;background:#3b3835}.loops-clock-dots span.active{background:#d23b31;box-shadow:0 0 0 3px rgba(210,59,49,.13)}
.loops-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}.loop-channel{background:#0c0c0c;padding:22px;min-width:0}.loop-channel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.loop-channel-head h3{margin:0;font:700 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}.loop-state{font:650 8px/1 ui-monospace,monospace;letter-spacing:.1em;color:#7f7a73;border:1px solid #34312e;padding:6px 8px}.loop-state[data-type=ok]{color:#83b298;border-color:#274537}.loop-state[data-type=error]{color:#d28d87;border-color:#5f2825}.loop-track-picker{display:grid;gap:8px}.loop-pads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:14px}.loop-pad{--loop-progress:0%;position:relative;overflow:hidden;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:48px;border:1px solid #34312e;background:linear-gradient(90deg,rgba(181,51,42,.16) 0 var(--loop-progress),#0a0a0a var(--loop-progress) 100%);color:#aaa39a;text-align:left;padding:0 9px;cursor:pointer}.loop-pad:hover{border-color:#706a64;color:#eee9e0}.loop-pad.selected{border-color:#9b3029;color:#f0ebe3;background:linear-gradient(90deg,rgba(181,51,42,.24) 0 var(--loop-progress),#100c0b var(--loop-progress) 100%)}.loop-pad strong{font:700 10px/1 ui-monospace,monospace;color:#b73830}.loop-pad span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 9px/1 ui-monospace,monospace;letter-spacing:.05em}.loop-pad small{font:600 8px/1 ui-monospace,monospace;color:#716c66}.loop-meta{min-height:34px;margin:12px 0 0;color:#77726b;font:500 9px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}.loop-transport{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.loop-transport .mixer-button{width:100%;min-height:44px}.loop-transport .play{font-size:15px}.loop-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:19px;padding-top:18px;border-top:1px solid var(--line)}.loop-control{display:grid;gap:8px}.loop-control.filter,.loop-control.volume{grid-column:1/-1}.loops-status{margin-top:14px;padding:12px 14px;border:1px solid #2e2b28;color:#8b867f;font:500 10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}.loops-status[data-type=ok]{border-color:#274537;color:#83b298}.loops-status[data-type=error]{border-color:#5f2825;color:#d28d87}
@media(max-width:1180px){.loops-master{grid-template-columns:repeat(3,minmax(0,1fr))}.loops-master .loops-master-volume{grid-column:auto}}
@media(max-width:980px){.loops-grid{grid-template-columns:1fr}.loop-pads{grid-template-columns:repeat(5,minmax(0,1fr))}.loop-pad{grid-template-columns:28px minmax(0,1fr);min-height:58px}.loop-pad small{grid-column:2}}
@media(max-width:760px){.loops-master{grid-template-columns:1fr 1fr}.loops-master .loops-master-volume{grid-column:1/-1}.loop-pads{grid-template-columns:repeat(2,minmax(0,1fr))}.loop-channel{padding:18px 14px}.loop-controls{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.loops-master{grid-template-columns:1fr}.loops-master .loops-master-volume{grid-column:auto}.loops-master .mixer-button{margin:10px 14px}.loop-pads{grid-template-columns:1fr 1fr}.loop-pad{grid-template-columns:30px minmax(0,1fr);padding:0 8px}.loop-control.filter,.loop-control.volume{grid-column:1/-1}}
/* Desktop: keep the three performance channels side by side even when OS/browser scaling reduces CSS viewport width. */
@media (hover:hover) and (pointer:fine) and (min-width:900px){.loops-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.loop-pads{grid-template-columns:repeat(2,minmax(0,1fr))}.loop-pad{grid-template-columns:34px minmax(0,1fr) auto;min-height:48px}.loop-pad small{grid-column:auto}}