:root { --pink: #e7a0ac; --cyan: #8cc9c4; --green: #b8ca8b; --panel: #252728; --line: #424544; --bg: #151717; }
body { background: #151717; }
main { width: min(100%, 1440px); padding: 28px 36px; }
header { padding-bottom: 24px; }
#status { margin: -14px 0 14px; }
.rack-module { user-select: none; -webkit-user-select: none; }
h1 { font-size: 30px; font-weight: 500; }
.eyebrow { font-size: var(--font-min); margin-bottom: 8px; color: #afb4ac; }
#audio { background: #252b27; box-shadow: inset 0 1px #424a42, 0 3px 5px #080a09; border-radius: 3px; }
#audio::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5e6656; margin-right: 10px; }
#audio[aria-pressed="true"]::before { background: #c8efa2; box-shadow: 0 0 9px #a0da73; }
.modular-rack { border: 1px solid #080a09; padding: 0 10px; background: #0e1010; box-shadow: 0 8px 22px #0005, inset 0 0 0 3px #303333; }
.rack-rail { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 16px; color: #929d96; font-size: var(--font-min); background: repeating-linear-gradient(0deg, #262a28 0 1px, #292d2b 1px 3px); }
.rack-rail::before, .rack-rail::after { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg,#525653 43%,#101310 44% 58%,#525653 59%); box-shadow: 0 1px 1px #000; }
.rack-rail > :first-child { margin-right: auto; }
#patch-status { font-size: var(--font-min); text-align: right; }
#rack-body { position: relative; padding-bottom: 100px; background: repeating-linear-gradient(90deg, #161a18 0 1px, #121614 1px 9px); }
#modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; position: relative; z-index: 1; }
.rack-module { min-width: 0; padding: 12px 14px 0; background: linear-gradient(100deg, #323633, #272b29 75%); border-top: 3px solid var(--module-color); box-shadow: inset 1px 0 #4d534d, inset -1px 0 #090d0a; display: flex; flex-direction: column; }
.module-top { display: flex; align-items: center; gap: 10px; color: var(--module-color); }
.module-number { font-family: 'IBM Plex Mono', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: var(--font-min); }
.signal-led { width: 7px; height: 7px; border-radius: 50%; background: var(--module-color); opacity: calc(.18 + var(--signal, 0) * .82); box-shadow: 0 0 calc(var(--signal, 0) * 14px) var(--module-color); }
.module-edit { margin-left: auto; min-height: 32px; padding: 0 8px; font-size: var(--font-min); color: #b6bcb4; border: 0; }
.module-identity { margin: 12px 0 22px; border-bottom: 1px solid #575c51; padding-bottom: 12px; position: relative; }
.module-identity::after { content: ''; display: block; width: 52px; height: 8px; margin-top: 10px; background: repeating-linear-gradient(90deg,var(--module-color) 0 2px,transparent 2px 6px); opacity: .6; }
.pattern-1 .module-identity::after { background: repeating-linear-gradient(135deg,var(--module-color) 0 2px,transparent 2px 6px); }
.pattern-2 .module-identity::after { background: repeating-linear-gradient(0deg,var(--module-color) 0 1px,transparent 1px 3px); }
.pattern-3 .module-identity::after { background: radial-gradient(circle,var(--module-color) 1px,transparent 2px) 0 0 / 7px 7px; }
.module-identity select { width: 100%; background: transparent; border: 0; border-radius: 0; padding: 0 22px 0 0; color: var(--module-color); font-size: 20px; font-weight: 500; min-height: 36px; }
option, optgroup { background: #272b29; color: #eff1ef; }
.module-kind { display: block; color: #b2b9b0; font-size: var(--font-min); overflow-wrap: anywhere; min-height: 16px; }
.module-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 8px; align-content: start; flex: 1; }
.rack-control { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; font-size: var(--font-min); }
.rack-control > span:first-child { min-height: 28px; display: flex; align-items: center; justify-content: center; line-height: 14px; overflow-wrap: anywhere; }
.rack-control output { color: #abb4aa; min-height: 16px; font-size: var(--font-min); max-width: 100%; overflow-wrap: anywhere; }
.rotary { --angle: 0deg; --sweep: 135deg; position: relative; display: block; width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(from 225deg, var(--module-color, var(--cyan)) var(--sweep), #555b50 0 270deg, transparent 0); box-shadow: 0 0 0 4px #252925; }
.rotary::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #282c28; }
.knob-face { position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 28%, #565b55, #343934 60%, #191d19 75%); box-shadow: 0 4px 5px #000b, inset 0 1px 2px #979d8655, 0 0 0 2px #101510; transform: rotate(var(--angle)); pointer-events: none; }
.knob-face::after { content: ''; position: absolute; width: 3px; height: 15px; top: 3px; left: calc(50% - 1.5px); background: var(--module-color, #d5dccb); border-radius: 1px; box-shadow: 0 0 3px #fff2; }
.rotary input[type="range"] { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; touch-action: none; cursor: ns-resize; }
.rotary:focus-within { outline: 2px solid var(--module-color, var(--cyan)); outline-offset: 5px; }
.rotary.turning { filter: brightness(1.18); }
.module-mix { border-top: 1px solid #4b5148; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding-top: 15px; margin-top: 20px; }
.module-mix .rotary { width: 48px; height: 48px; }
.module-mix .knob-face { inset: 6px; }
.module-mix .knob-face::after { height: 10px; }
.module-switches { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 18px 0 15px; }
.hardware-switch, .track-switch { display: flex; align-items: center; gap: 5px; font-size: var(--font-min); }
input[type="checkbox"] { appearance: none; width: 23px; height: 36px; border: 1px solid #080d09; border-radius: 3px; background: linear-gradient(#0a110d 45%,#444d42 46% 50%,#111812 51%); position: relative; flex: 0 0 auto; cursor: pointer; box-shadow: inset 0 1px 5px #000; }
input[type="checkbox"]::after { content: ''; position: absolute; width: 13px; height: 19px; top: 12px; left: 4px; border-radius: 2px; background: linear-gradient(90deg,#747f70,#d2d6ca 40%,#8a9483); box-shadow: 1px 2px 3px #0009; transition: top 120ms; }
input[type="checkbox"]:checked::after { top: 3px; background: linear-gradient(90deg,#818d68,#d7e5b7 40%,#9aa57d); }
.trigger { min-height: 36px; padding: 0 8px; border: 1px solid #111710; background: #40483d; box-shadow: inset 0 1px #6d7861, 0 2px 3px #0008; font-size: var(--font-min); }
.trigger:active { transform: translateY(2px); box-shadow: inset 0 1px 3px #0008; }
.jack-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; background: #1b201b; border-top: 1px solid #0f150f; margin: 0 -14px; padding: 14px 6px 9px; }
.jack { min-width: 0; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: var(--font-min); line-height: 14px; min-height: 62px; touch-action: none; color: #b8c0b4; }
.jack:hover { background: transparent; color: #fff; }
.socket { position: relative; display: block; width: 25px; height: 25px; border: 4px solid #6a7266; border-radius: 50%; background: #070b08; box-shadow: 0 2px 3px #000b, inset 1px 2px 2px #000, 0 0 0 1px #0c100c; }
.socket::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid #3a4238; }
.jack.connected .socket { background: var(--plug-color); border-color: var(--plug-color); }
.jack.pending .socket { border-color: var(--module-color); box-shadow: 0 0 0 5px #ffffff22,0 0 14px var(--module-color); }
.jack:disabled { opacity: .3; }
#patch-cables { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
#patch-cables path { fill: none; stroke-linecap: round; }
.cable-shadow { stroke: #0009; stroke-width: 10; transform: translateY(4px); }
.cable { stroke: var(--cable-color); stroke-width: 6; }
.cable-sheen { stroke: #ffffff35; stroke-width: 1.3; transform: translateY(-1px); }
.running .cable { animation: cable-signal 2.5s ease-in-out infinite alternate; }
@keyframes cable-signal { from { filter: brightness(.8); } to { filter: brightness(1.18); } }
#patch-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px; background: #121614; }
#patch-list:not(:empty) { padding-bottom: 14px; }
.connection { border: 0; border-left: 3px solid var(--cable-color); border-radius: 0; min-height: 32px; font-size: var(--font-min); padding: 0 9px; color: #c1cabe; }
.bottom-rail { color: #8f998d; }
.rack-scroll { overflow-x: auto; scrollbar-color: #6c7965 #121614; scrollbar-width: thin; }
#rack-nav { display: none; }
.sequencer { border: 1px solid #3c443a; background: #252a24; margin-top: 20px; padding: 20px 24px; box-shadow: inset 0 1px #5b6456,0 4px 12px #0004; }
.transport { border-bottom: 1px solid #414a3c; padding-bottom: 16px; }
.transport h2 { font-size: 18px; }
.track { display: grid; grid-template-columns: 228px minmax(0,1fr); align-items: center; gap: 18px; padding: 12px 0; border-top: 0; }
.track-heading { display: grid; grid-template-columns: 1fr auto auto; gap: 5px; margin: 0; }
.track-select { grid-column: 1 / -1; min-height: 28px; font-size: var(--font-min); }
.track-meter { width: 84px; margin-left: 10px; }
.track-switch { min-height: 32px; }
.track-switch input { width: 18px; height: 29px; }
.track-switch input::after { width: 10px; height: 14px; left: 3px; top: 10px; }
.track-switch input:checked::after { top: 3px; }
.steps { gap: 7px; grid-template-columns: repeat(16,minmax(0,1fr)); }
.step { height: 46px; min-height: 46px; border-radius: 3px; border: 1px solid #0b110b; background: linear-gradient(#414a3d,#323b2e); color: #8b9784; box-shadow: inset 0 1px #5c6855,0 3px 2px #0d140d; position: relative; transition: background 100ms,box-shadow 100ms,transform 100ms; }
.step::before { content: ''; position: absolute; width: 8px; height: 3px; top: 6px; left: calc(50% - 4px); border-radius: 1px; background: #171f15; }
.step:nth-child(4n+1) { border-left-color: #a2ad91; }
.step[aria-pressed="true"] { background: color-mix(in srgb,var(--track-color) 48%,#263126); color: #f5fff0; border-color: color-mix(in srgb,var(--track-color) 65%,#172014); box-shadow: inset 0 1px #fff5,0 3px 2px #0d140d,0 0 9px color-mix(in srgb,var(--track-color) 20%,transparent); }
.step[aria-pressed="true"]::before { background: var(--track-color); box-shadow: 0 0 6px var(--track-color); }
.step.current { background: #d2e9bd; color: #182715; box-shadow: 0 0 14px #bded9970,inset 0 1px #fff; transform: translateY(2px); }
.step.selected { outline: 1px solid #bfcab5; outline-offset: 2px; }
.step-editor { margin-top: 10px; padding-top: 14px; gap: 12px 18px; }
.voice-editor { margin-top: 22px; border-top: 1px solid #41483d; border-bottom: 1px solid #41483d; }
.voice-editor > summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.voice-editor > summary::after { content: '+'; font-size: 24px; }
.voice-editor[open] > summary::after { content: '−'; }
.voice-editor > summary > :first-child { margin-right: auto; color: #c6d1be; font-size: 20px; }
.voice-editor > summary > :nth-child(2) { color: #a4aea0; font-size: var(--font-label); }
#voice-title { margin: 0; }
.instrument { padding: 0 0 24px; }
.control { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.control-heading { justify-content: center; flex-direction: column; text-align: center; }
.channel-controls > label { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.effect-controls > label { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.effect-controls .rotary { width: 60px; height: 60px; }
.effect-controls { grid-template-columns: repeat(6,minmax(0,1fr)); }
.recorder h2 { font-size: 18px; }
@media (min-width: 1100px) { .module-controls { min-height: 260px; } }
@media (max-width: 1100px) {
  main { padding: 24px 18px; }
  .rack-module { padding-left: 10px; padding-right: 10px; }
  .module-controls { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 390px; }
  .jack-strip { margin-left: -10px; margin-right: -10px; }
  .module-identity select { font-size: 16px; }
  .module-mix .rotary { width: 42px; height: 42px; }
  .module-switches { flex-wrap: wrap; }
  .track { grid-template-columns: 170px minmax(0,1fr); gap: 10px; }
  .steps { gap: 4px; }
  .sequencer { padding: 16px; }
}
@media (max-width: 760px) {
  main { padding: 20px 12px; }
  header { gap: 12px; }
  h1 { font-size: 26px; }
  #audio { padding: 0 10px; }
  #modules { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  .modular-rack { padding: 0 5px; }
  .rack-module { padding-top: 10px; }
  .module-controls { min-height: 390px; }
  .rack-rail { padding: 6px; gap: 8px; }
  .rack-rail > span { max-width: 40%; }
  .rack-rail::before,.rack-rail::after { display: none; }
  .track { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .track-heading { grid-template-columns: minmax(0,1fr) auto auto auto; }
  .track-select { grid-column: auto; padding-left: 6px; }
  .track-meter { width: 30px; margin: 0; }
  .steps { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 8px; }
  .sequencer { padding: 16px 12px; }
  .step { height: 44px; min-height: 44px; }
  .effect-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .voice-editor > summary > :nth-child(2) { max-width: 100px; }
}
@media (max-width: 360px) {
  #modules { grid-template-columns: minmax(0,1fr); }
  .module-controls { grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 260px; }
  h1 { font-size: 24px; }
  .track-heading { grid-template-columns: minmax(0,1fr) auto auto; }
  .track-meter { display: none; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 1100px) {
  #rack-body { min-width: 1040px; }
  #modules { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .module-controls { grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 250px; }
  #rack-nav { display: flex; gap: 8px; padding: 8px; background: #1e241e; }
  #rack-nav button { color: var(--module-color); width: 48px; padding: 0; }
  #rack-nav button[aria-pressed="true"] { border-color: var(--module-color); background: #354030; }
}

/* The module bank is independent of the four sequencer tracks. */
main { width: min(100%, 1720px); }
.sequencer { margin: 0 0 24px; }
.rack-scroll { overflow: visible; }
#rack-body { min-width: 0; padding-bottom: 180px; }
#modules { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; }
.rack-module { padding: 10px 12px 0; position: relative; }
.module-top { min-height: 24px; }
.assigned-tracks { margin-left: auto; color: #c3cbbd; font-size: var(--font-min); }
.module-identity { margin: 8px 0 0; padding-bottom: 10px; border-bottom: 0; }
.module-identity h2 { color: var(--module-color); font-size: 19px; line-height: 23px; min-height: 46px; overflow-wrap: anywhere; }
.module-kind { min-height: 30px; line-height: 15px; }
.jack-strip { margin: 0 -12px 14px; padding: 10px 4px 6px; }
.jack { font-size: var(--font-min); min-height: 58px; }
.jack > span:last-child { width: 100%; white-space: pre-line; overflow-wrap: anywhere; }
.socket { width: 24px; height: 24px; }
.module-controls { grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 224px; gap: 12px 6px; }
.rack-control { gap: 6px; }
.rack-control .rotary { width: 50px; height: 50px; }
.rack-control .knob-face { inset: 6px; }
.rack-control .knob-face::after { height: 11px; }
.module-mix { margin-top: 14px; padding-top: 10px; }
.module-mix .rotary { width: 42px; height: 42px; }
.module-switches { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0; gap: 8px; }
.module-switches > * { width: 100%; min-width: 0; margin: 0; min-height: 36px; font-size: var(--font-min); }
.module-assignment { padding: 4px; }
.add-cord { border-color: #667061; background: #353e31; padding: 0 5px; }
.patch-source { box-shadow: inset 0 0 0 2px var(--module-color),0 0 16px #0006; }
.patch-target { cursor: crosshair; }
.patch-target:hover { box-shadow: inset 0 0 0 2px #e2edcf; }
#patch-cables { z-index: 4; }
.cable-shadow { stroke-width: 17px; transform: translate(3px, 7px); }
.cable { stroke-width: 11px; }
.cable-sheen { stroke-width: 2px; transform: translate(-1px, -2px); }
.running .cable { animation: none; }
#cancel-cord { min-height: 30px; padding: 0 8px; font-size: var(--font-min); }
.track { grid-template-columns: 280px minmax(0, 1fr); padding: 8px 0; }
.track-heading { grid-template-columns: minmax(0,1fr) auto auto; }
.track-select { grid-column: auto; font-size: var(--font-min); min-height: 30px; }
.track-meter { display: none; }
.track-voice-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: var(--font-min); }
.track-voice-label select { flex: 1; width: 100%; min-height: 36px; padding: 4px 8px; font-size: 14px; background: #131b13; border-color: #7b8870; }
@media (max-width: 1100px) { .track { grid-template-columns: 220px minmax(0,1fr); } }
@media (max-width: 760px) {
  #modules { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rack-module { padding: 10px 8px 0; }
  .module-controls { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 336px; }
  .module-identity h2 { font-size: 17px; line-height: 21px; min-height: 42px; }
  .module-mix { gap: 3px; }
  .module-mix .rotary { width: 35px; height: 35px; }
  .module-mix .knob-face { inset: 5px; }
  .module-mix .knob-face::after { height: 8px; }
  .jack-strip { margin-left: -8px; margin-right: -8px; }
  .jack { font-size: var(--font-min); gap: 6px; }
  .socket { width: 22px; height: 22px; border-width: 3px; }
  .track { grid-template-columns: minmax(0,1fr); }
  .track-heading { grid-template-columns: minmax(0,1fr) auto auto; }
  .track-voice-label { margin-top: 4px; }
  .rack-rail > span { max-width: none; }
}
@media (max-width: 340px) { #modules { grid-template-columns: minmax(0,1fr); } }
.auto-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 12px 0; }
.auto-controls label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-min, 12px); }
.auto-controls input[type="number"] { width: 115px; max-width: 100%; }
.auto-controls #auto-minutes { width: 72px; }
.auto-controls #auto[aria-pressed="true"] { background: #aacd87; color: #17191b; box-shadow: 0 0 12px #aacd8755; }
.auto-controls output { min-width: 130px; font-size: var(--text-min, 12px); align-self: center; }