styles.css

:root {
	color-scheme: dark;
	font-family:
		Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;
	background: #090a0f;
	color: #f4f5f8;
	font-synthesis: none;
}

* {
	box-sizing: border-box;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	padding: clamp(16px, 4vw, 48px);
	background:
		radial-gradient(circle at 16% 0%, rgb(80 73 150 / 22%), transparent 36rem),
		linear-gradient(145deg, #0c0e15, #07080c 70%);
}

button,
select,
input {
	font: inherit;
}

.controller-shell {
	width: min(1180px, 100%);
	min-height: calc(100vh - clamp(32px, 8vw, 96px));
	margin: 0 auto;
	padding: clamp(20px, 3vw, 38px);
	overflow: hidden;
	background: linear-gradient(160deg, rgb(29 32 45 / 96%), rgb(17 19 27 / 98%));
	border: 1px solid #343849;
	border-radius: 26px;
	box-shadow: 0 28px 90px rgb(0 0 0 / 48%);
}

.app-header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 28px;
	padding-bottom: 24px;
}

.eyebrow,
.control-number,
.mapping-note {
	color: #949bad;
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eyebrow {
	margin: 0 0 6px;
}

h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.8rem);
	font-weight: 760;
	letter-spacing: -0.055em;
	line-height: 0.95;
}

.midi-setup {
	display: flex;
	align-items: end;
	gap: 12px;
}

.field {
	display: grid;
	gap: 7px;
	color: #aeb4c3;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.field select,
.connect-button {
	height: 42px;
	border: 1px solid #454b60;
	border-radius: 10px;
}

.field select {
	min-width: 230px;
	padding: 0 36px 0 12px;
	background: #11131b;
	color: #f5f6f9;
}

.field select:disabled {
	color: #777e90;
}

.channel-field select {
	min-width: 84px;
}

.connect-button {
	padding: 0 17px;
	background: #7c6df2;
	border-color: #988cff;
	color: white;
	font-weight: 750;
	cursor: pointer;
	transition: transform 120ms ease, background 120ms ease;
}

.connect-button:hover {
	background: #8a7cf8;
	transform: translateY(-1px);
}

.connect-button:disabled {
	cursor: default;
	opacity: 0.65;
	transform: none;
}

.status-bar {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 42px;
	padding: 10px 14px;
	background: #10121a;
	border: 1px solid #303445;
	border-radius: 11px;
	color: #aeb4c3;
	font-size: 0.82rem;
}

.status-light {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	background: #687084;
	border-radius: 999px;
	box-shadow: 0 0 0 4px rgb(104 112 132 / 13%);
}

.status-light.is-connected {
	background: #54dca1;
	box-shadow: 0 0 0 4px rgb(84 220 161 / 13%), 0 0 14px rgb(84 220 161 / 42%);
}

.status-light.is-error {
	background: #ff6c7b;
	box-shadow: 0 0 0 4px rgb(255 108 123 / 13%);
}

.last-message {
	margin-left: auto;
	color: #757d90;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.75rem;
}

.fader-bank {
	margin-top: 22px;
}

.pitch-settings {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 12px;
	padding: 14px 18px 16px;
	background: linear-gradient(180deg, #181b25, #12141c);
	border: 1px solid #303444;
	border-radius: 14px;
}

.pitch-settings h2 {
	margin: 0;
	font-size: 0.9rem;
}

.scale-selects {
	display: flex;
	gap: 10px;
}

.scale-field {
	display: grid;
	gap: 5px;
	color: #8f96a8;
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.scale-field select {
	min-width: 150px;
	height: 36px;
	padding: 0 32px 0 10px;
	background: #090b10;
	border: 1px solid #303545;
	border-radius: 8px;
	color: #a99eff;
	cursor: pointer;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.76rem;
	text-transform: none;
}

#scale {
	min-width: 190px;
}

.step-count-field select {
	min-width: 76px;
}

.vertical-faders {
	--step-count: 10;

	display: grid;
	grid-template-columns: repeat(var(--step-count), minmax(70px, 1fr));
	gap: 8px;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
}

.fader {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto auto;
	justify-items: center;
	min-width: 70px;
	height: 386px;
	padding: 18px 8px 14px;
	background: linear-gradient(180deg, #181b25, #12141c);
	border: 1px solid #303444;
	border-radius: 14px;
}

.control-number {
	margin: 0 0 5px;
	color: #767e91;
}

.fader-name {
	font-size: 0.86rem;
	font-weight: 720;
}

.fader output,
.split-heading output {
	min-width: 42px;
	padding: 5px 8px;
	background: #090b10;
	border: 1px solid #303545;
	border-radius: 7px;
	color: #a99eff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78rem;
	text-align: center;
}

.split-heading output {
	min-width: 90px;
}

.fader.is-lane-a .fader-name {
	color: #70e0ad;
}

.fader.is-lane-b .fader-name {
	color: #72b7ff;
}

.fader.is-current.is-lane-a {
	border-color: #54dca1;
	box-shadow:
		inset 0 0 0 1px rgb(84 220 161 / 28%),
		0 0 20px rgb(84 220 161 / 12%);
}

.fader.is-current.is-lane-b {
	border-color: #65adf5;
	box-shadow:
		inset 0 0 0 1px rgb(101 173 245 / 28%),
		0 0 20px rgb(101 173 245 / 12%);
}

.fader:not(.is-enabled) .vertical-fader,
.fader:not(.is-enabled) output,
.fader:not(.is-enabled) .fader-name {
	opacity: 0.48;
}

.fader.is-skipped .vertical-fader,
.fader.is-skipped output,
.fader.is-skipped .fader-name {
	opacity: 0.28;
}

input[type="range"] {
	accent-color: #8c7df7;
	cursor: ns-resize;
}

.vertical-fader {
	width: 190px;
	height: 26px;
	margin: auto 0;
	transform: rotate(-90deg);
}

.lower-controls {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.split-section,
.tempo-section {
	padding: 17px 20px 19px;
	background: linear-gradient(180deg, #181b25, #12141c);
	border: 1px solid #303444;
	border-radius: 14px;
}

.split-heading,
.tempo-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 9px;
}

.split-heading h2,
.tempo-heading h2 {
	margin: 0;
	font-size: 0.9rem;
}

.horizontal-fader {
	width: 100%;
	cursor: ew-resize !important;
}

.bpm-field {
	display: flex;
	align-items: baseline;
	gap: 5px;
	color: #8f96a8;
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.08em;
}

.bpm-field input {
	width: 72px;
	padding: 5px 7px;
	background: #090b10;
	border: 1px solid #303545;
	border-radius: 7px;
	color: #a99eff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	text-align: right;
}

.tempo-fader {
	display: block;
	margin-bottom: 10px;
}

.ratio-control {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.ratio-field {
	display: grid;
	gap: 4px;
	color: #8f96a8;
	font-size: 0.66rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.ratio-field select {
	min-width: 82px;
	height: 32px;
	padding: 0 28px 0 9px;
	background: #090b10;
	border: 1px solid #303545;
	border-radius: 7px;
	color: #a99eff;
	cursor: pointer;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78rem;
}

.ratio-control output {
	padding-bottom: 7px;
	color: #72b7ff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	white-space: nowrap;
}

.transport-button {
	width: 100%;
	min-height: 38px;
	background: #292d3b;
	border: 1px solid #444a5e;
	border-radius: 9px;
	color: #e5e7ed;
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 750;
	transition: background 120ms ease, border-color 120ms ease;
}

.transport-button:hover:not(:disabled) {
	background: #34394a;
	border-color: #665e9f;
}

.transport-button.is-running {
	background: #3a2450;
	border-color: #9c6bc6;
	color: #f5eaff;
}

.transport-button:disabled {
	cursor: not-allowed;
	opacity: 0.48;
}

.step-toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	max-width: 100%;
	min-height: 32px;
	margin-top: 10px;
	padding: 0 7px;
	border: 1px solid #363b4d;
	border-radius: 999px;
	color: #aeb4c3;
	cursor: pointer;
	font-size: 0.72rem;
	font-weight: 750;
	transition: border 120ms ease, background 120ms ease, color 120ms ease;
}

.step-toggle span {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.step-toggle span::before {
	display: inline-block;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	background: #596074;
	border-radius: 999px;
	content: "";
	vertical-align: 0.08em;
}

.step-toggle:hover {
	border-color: #625a9b;
}

.step-toggle:focus-visible {
	outline: 2px solid #afa5ff;
	outline-offset: 2px;
}

.step-toggle.is-on {
	background: #2e2858;
	border-color: #8c7df7;
	color: white;
	box-shadow: inset 0 0 0 1px rgb(171 160 255 / 24%);
}

.step-toggle.is-on span::before {
	background: #a99eff;
	box-shadow: 0 0 10px rgb(169 158 255 / 75%);
}

.step-toggle.is-skip {
	background: #30291d;
	border-color: #9c7e49;
	border-style: dashed;
	color: #f1d59d;
}

.step-toggle.is-skip span::before {
	background: #d5a957;
	box-shadow: 0 0 9px rgb(213 169 87 / 55%);
}

.mapping-note {
	margin: 13px 2px 0;
	color: #737b8e;
	line-height: 1.55;
	text-transform: none;
}

@media (max-width: 860px) {
	.app-header,
	.midi-setup {
		align-items: stretch;
		flex-direction: column;
	}

	.midi-setup {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.connect-button {
		grid-column: 1 / -1;
	}

	.field select {
		width: 100%;
		min-width: 0;
	}

	.lower-controls {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 520px) {
	body {
		padding: 0;
	}

	.controller-shell {
		min-height: 100vh;
		border: 0;
		border-radius: 0;
	}

	.midi-setup {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.output-field {
		grid-column: 1 / -1;
	}

	.pitch-settings {
		align-items: stretch;
		flex-direction: column;
	}

	.scale-selects {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.scale-field select {
		width: 100%;
		min-width: 0;
	}

	#scale {
		min-width: 0;
	}

	.step-count-field select {
		min-width: 0;
	}

	.last-message {
		display: none;
	}
}