/* ==========================================================================
   MS-01 instrument: sequencer, header docking, drum machine, key numbers
   ========================================================================== */

:root,
:root[data-theme="dark"] {
	--ms-step-dim: #4a4237;
	--ms-read-line: #8a7b6a;
	--ms-track-on: #7a6c5c;
	--ms-cell-cur: #211f1d;
	--ms-led-off: #2e3a2c;
	--ms-scrim: rgba(10, 9, 8, 0.55);
	--ms-drawer: #1a1817;
}

:root[data-theme="light"] {
	--ms-step-dim: #d6d6db;
	--ms-read-line: #86868b;
	--ms-track-on: #a1a1a6;
	--ms-cell-cur: #f5f5f7;
	--ms-led-off: #d9eedc;
	--ms-scrim: rgba(0, 0, 0, 0.18);
	--ms-drawer: #ffffff;
}

.ms-only-mobile { display: none; }

/* ---------- Layering ---------- */
.ms-main { position: relative; z-index: 1; }
.wp-site-blocks > footer { position: relative; z-index: 1; background: var(--ms-bg); }

/* ---------- Voice shapes (the glyph system) ---------- */
.ms-step[data-voice="bd"] span, [data-voice="bd"]:not(.ms-step) { border-radius: 50%; }
.ms-step[data-voice="sd"] span, [data-voice="sd"]:not(.ms-step) { border-radius: 0; }
.ms-step[data-voice="cp"] span, [data-voice="cp"]:not(.ms-step) { border-radius: 100% 0 0 0; }
.ms-step[data-voice="ch"] span, [data-voice="ch"]:not(.ms-step) { border-radius: 50% 50% 0 0; }
.ms-step[data-voice="oh"] span, [data-voice="oh"]:not(.ms-step) { border-radius: 0 0 50% 50%; }

/* ---------- Sequencer ---------- */
.ms-seq {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 55;
	display: flex;
	align-items: center;
	gap: var(--gap, 10px);
	transform-origin: 50% 50%;
	pointer-events: none;
	will-change: transform;
}

.ms-seq::before {
	content: "";
	position: absolute;
	inset: -14px -22px;
	z-index: -1;
	border-radius: 999px;
	background: rgba(var(--ms-header-rgb), 0.6);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	opacity: var(--cap, 0);
}

.ms-seq:not(.has-cap)::before { display: none; }
.ms-seq.is-playable { pointer-events: auto; }

.ms-step {
	flex-shrink: 0;
	width: var(--s, 28px);
	height: var(--s, 28px);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.ms-step:nth-child(4), .ms-step:nth-child(8), .ms-step:nth-child(12) { margin-right: var(--gg, 12px); }

.ms-step span {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid var(--ms-line);
	background: transparent;
	transition: transform 90ms ease;
}

.ms-step.is-head:not(.is-on) span { border-color: var(--ms-muted); }
.ms-step.is-read:not(.is-on) span { border-color: var(--ms-read-line); }
.ms-step.is-on span {
	border-color: transparent;
	background: color-mix(in srgb, var(--ms-accent) calc(var(--b, 0) * 100%), var(--ms-step-dim));
}
.ms-step.is-on.is-read span { background: var(--ms-accent); }
.ms-step.is-on.is-head span { transform: scale(1.12); }

.ms-seq-open {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 56;
	display: none;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* ---------- Speaker button ---------- */
.ms-sound {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid var(--ms-line);
	background: transparent;
	color: var(--ms-text);
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.ms-sound[aria-pressed="true"] { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-bg); }
.ms-sound--large { width: 48px; height: 48px; }

/* Speaker icon in the style of system icons: filled body, waves when on, a cross when muted */
.ms-spk {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	overflow: visible;
}
.ms-spk__body { fill: currentColor; }
.ms-spk__w1, .ms-spk__w2, .ms-spk__x {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}
.ms-spk__w2 { opacity: 0.55; transition: opacity 160ms ease; }
.ms-kick [aria-pressed="true"] > .ms-spk .ms-spk__w2 { opacity: 1; }
[aria-pressed="false"] > .ms-spk .ms-spk__w1,
[aria-pressed="false"] > .ms-spk .ms-spk__w2,
[aria-pressed="true"] > .ms-spk .ms-spk__x { display: none; }

/* Speaker and reading progress in the header, next to the docked sequencer */
.ms-bar-sound {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 56;
	opacity: 0;
	border-color: transparent;
}
.ms-bar-sound[aria-pressed="true"] { background: transparent; border-color: transparent; color: var(--ms-accent); }

.ms-bar-read {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 56;
	margin: 0;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	font-size: 11px;
}

/* ---------- LED and pill ---------- */
.ms-led {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--ms-led-off);
}
.ms-hit .ms-led { background: var(--ms-signal); }

.ms-pill {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--ms-line);
	background: transparent;
	color: var(--ms-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

/* ---------- Knobs ---------- */
.ms-knob { position: relative; display: flex; align-items: center; gap: 10px; }

.ms-knob__dial {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid var(--ms-line);
	background: var(--ms-surface);
}
.ms-knob__dial i {
	position: absolute;
	left: 50%;
	top: 5px;
	width: 2px;
	height: 11px;
	margin-left: -1px;
	border-radius: 1px;
	background: var(--ms-accent);
	transform-origin: 1px 12px;
	transform: rotate(var(--rot, 0deg));
}

.ms-knob__input {
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}
.ms-knob:focus-within .ms-knob__dial { outline: 2px solid var(--ms-accent); outline-offset: 3px; }

.ms-knob__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ms-text);
	white-space: nowrap;
}
.ms-hero__instrument .ms-knob__name { display: none; }

/* ---------- Hero instrument row ---------- */
.ms-hero__instrument {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	width: auto;
	height: auto;
	transform: none;
	box-sizing: border-box;
	padding: 0 var(--ms-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 391px minmax(0, 1fr);
	column-gap: 24px;
	align-items: center;
	opacity: var(--ms-ctrl, 1);
}
.ms-ctrl-off .ms-hero__instrument { pointer-events: none; }
.home .ms-hero__foot { opacity: var(--ms-ctrl, 1); }

.ms-instrument__left { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ms-instrument__space { height: 16px; }
.ms-instrument__right { justify-self: start; display: flex; align-items: center; }
.ms-instrument__caption {
	grid-column: 1 / -1;
	margin: 22px 0 0;
	display: flex;
	justify-content: center;
	text-align: center;
}
.ms-instrument__place { margin: 0; white-space: nowrap; }
.ms-instrument__line { font-size: 13px; line-height: 1.4; color: var(--ms-muted); }
@media (min-width: 721px) {
	.ms-hero:has(.ms-instrument__place) .ms-hero__foot { display: none; }
}
.ms-hero__instrument .ms-sound { width: 40px; height: 40px; border-color: transparent; }
.ms-hero__instrument .ms-sound[aria-pressed="true"] { background: transparent; color: var(--ms-accent); }
.ms-hero__instrument .ms-pill { height: 40px; padding: 0 10px; border-color: transparent; }
.ms-instrument__knobs { display: flex; align-items: center; gap: 16px; }
.ms-instrument__hint { grid-column: 1 / -1; margin: 18px 0 0; text-align: center; font-size: 10px; }

.ms-hero__foot { bottom: 24px; }
.home .ms-hero__text, .home .ms-hero__status { opacity: var(--ms-hero-fade, 1); }

@media (max-width: 1180px) {
	.ms-instrument__knobs { display: none; }
}

/* ---------- About: four on the floor ---------- */
.ms-about { position: relative; background: var(--ms-bg); }
.ms-about.is-enhanced { height: 260vh; margin-bottom: calc(-1 * var(--ab-tail, 0px)); }
.ms-about__stage {
	position: relative;
	box-sizing: border-box;
	min-height: 100vh;
	padding: var(--ms-header-h) var(--ms-gutter) 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 56px;
}
.ms-about.is-enhanced .ms-about__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.ms-about__head { position: absolute; top: calc(var(--ms-header-h) + 24px); left: var(--ms-gutter); opacity: var(--ab-in, 1); }
.ms-about__head > * { margin: 0; }
.ms-about__slot { width: var(--ab-w, 0); height: var(--ab-h, 0); flex-shrink: 0; }
.ms-about__notes {
	list-style: none;
	margin: 0;
	padding: 0;
	width: var(--ab-w, min(960px, 100%));
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--ab-gap, 24px);
	opacity: var(--ab-out, 1);
}
.ms-about__note { display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.4; color: var(--ms-text); }
.ms-about__note .ms-label { color: var(--ms-name); }
.ms-about.is-enhanced .ms-about__note { opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 400ms ease; }
.ms-about.is-enhanced .ms-about__note.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ms-about.is-enhanced .ms-about__note { transition: none; transform: none; }
}
@media (max-width: 720px) {
	.ms-about__stage { gap: 40px; }
	.ms-about__notes { grid-template-columns: 1fr; row-gap: 16px; }
	.ms-about__note { flex-direction: row; align-items: baseline; gap: 14px; font-size: 16px; }
}

/* ---------- Header while the sequencer is docked ---------- */
.ms-logo--bar { display: none; }

@media (min-width: 721px) {
	.ms-header .ms-header__status { grid-column: 1; grid-row: 1; }
	.ms-header .ms-logo--bar { grid-column: 1; grid-row: 1; justify-self: start; }
	.ms-header > .ms-logo:not(.ms-logo--bar) { grid-column: 2; grid-row: 1; }
	.ms-header .ms-header__actions { grid-column: 3; grid-row: 1; }

	.home .ms-header .ms-logo--bar { display: block; opacity: var(--ms-dock, 0); pointer-events: none; }
	.ms-docked .home .ms-header .ms-logo--bar { pointer-events: auto; }
	/* Status leaves with the hero, the bar logo only arrives late, so the two never share the corner */
	.home .ms-header .ms-header__status { opacity: var(--ms-hero-fade, 1); }
	.home .ms-header .ms-logo--bar { opacity: calc((var(--ms-dock, 0) - 0.6) / 0.4); }
	.home .ms-header > .ms-logo:not(.ms-logo--bar) { opacity: calc(1 - var(--ms-dock, 0)); }

	body:not(.home) .ms-header .ms-header__status,
	body:not(.home) .ms-header > .ms-logo:not(.ms-logo--bar) { display: none; }
	body:not(.home) .ms-header .ms-logo--bar { display: block; }
}

.ms-logo--bar a::after { background: var(--ms-signal); }

/* ---------- Drum machine ---------- */
.ms-drum-scrim {
	position: fixed;
	inset: 0;
	z-index: 65;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--ms-scrim);
	opacity: 0;
	pointer-events: none;
	cursor: default;
	transition: opacity 260ms ease;
}
.ms-drum-open .ms-drum-scrim { opacity: 1; pointer-events: auto; }

.ms-drum {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	height: 460px;
	box-sizing: border-box;
	padding: 28px var(--ms-gutter);
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: var(--ms-drawer);
	color: var(--ms-text);
	border-top: 1px solid var(--ms-line-2);
	border-radius: 20px 20px 0 0;
	transform: translateY(calc(100% + 24px));
	visibility: hidden;
	transition: transform 360ms var(--ms-ease), visibility 0s linear 360ms;
}

.ms-drum.is-top {
	top: var(--ms-header-h);
	bottom: auto;
	border-top: 0;
	border-bottom: 1px solid var(--ms-line-2);
	border-radius: 0 0 20px 20px;
	transform: translateY(calc(-100% - var(--ms-header-h) - 24px));
}

.ms-drum-open .ms-drum {
	transform: none;
	visibility: visible;
	transition: transform 360ms var(--ms-ease), visibility 0s;
}
.ms-drum.no-anim { transition: none !important; }

:root[data-theme="light"] .ms-drum { box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.08); }
:root[data-theme="light"] .ms-drum.is-top { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08); }

.ms-drum__handle { display: none; }
.ms-drum__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ms-drum__left { display: flex; align-items: center; gap: 32px; }
.ms-drum__controls { display: flex; align-items: center; gap: 24px; }
.ms-drum__right { display: flex; align-items: center; gap: 12px; }
.ms-drum__title { display: inline-flex; align-items: center; color: var(--ms-text); white-space: nowrap; }
.ms-drum__note { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--ms-muted); }

.ms-drum .ms-knob__label { display: flex; flex-direction: column; gap: 3px; width: 70px; }
.ms-drum .ms-knob__name { font-size: 10px; letter-spacing: 0.14em; color: var(--ms-muted); }
.ms-drum .ms-knob__value { font-size: 12px; letter-spacing: 0; text-transform: none; }

.ms-chip {
	height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--ms-line);
	background: transparent;
	color: var(--ms-text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.ms-close { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ms-text); cursor: pointer; }
.ms-close span { position: absolute; left: 10px; top: 21px; width: 24px; height: 2px; background: currentColor; }
.ms-close span:first-child { transform: rotate(45deg); }
.ms-close span:last-child { transform: rotate(-45deg); }

.ms-drum__tracks { display: flex; flex-direction: column; gap: 10px; overflow-x: auto; }
.ms-track { display: flex; align-items: center; gap: 24px; }

.ms-track__label {
	flex-shrink: 0;
	width: 170px;
	height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--ms-line-2);
	background: transparent;
	color: var(--ms-text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}
.ms-track__label[aria-pressed="true"] { color: var(--ms-muted); }
.ms-track__name { color: var(--ms-muted); }
.ms-glyph { display: block; width: 14px; height: 14px; background: var(--ms-accent); }
.ms-track__label[aria-pressed="true"] .ms-glyph { background: var(--ms-line); }

.ms-track__cells { display: flex; gap: 8px; }

.ms-cell {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ms-cell:nth-child(4), .ms-cell:nth-child(8), .ms-cell:nth-child(12) { margin-right: 10px; }
.ms-cell span { display: block; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--ms-line-2); transition: transform 90ms ease; }
.ms-cell.is-cur { background: var(--ms-cell-cur); }
.ms-cell.is-cur span { border-color: var(--ms-muted); }
.ms-cell.is-on span { background: var(--ms-track-on); border-color: transparent; }
.ms-cell.is-on.is-cur span { background: var(--ms-accent); transform: scale(1.1); }
.ms-cell.is-on.is-muted span { background: var(--ms-line); }

.ms-drum__numbers { display: flex; margin-left: 194px; font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ms-muted); }
.ms-drum__numbers span { width: 218px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
	.ms-only-mobile { display: revert; }
	.ms-hide-mobile { display: none !important; }

	.ms-hero { padding-bottom: 180px; }
	.ms-hero__instrument {
		bottom: 48px;
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		column-gap: 8px;
		row-gap: 16px;
	}
	.ms-instrument__space { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 285px; height: 12px; }
	.ms-instrument__left { grid-column: 1; grid-row: 2; justify-self: end; }
	.ms-instrument__place { display: none; }
	.ms-instrument__right { grid-column: 2; grid-row: 2; justify-self: start; }
	.ms-instrument__caption { display: none; }
	.ms-instrument__hint { grid-row: 3; margin: 0; text-align: left; }

	.ms-drum,
	.ms-drum.is-top {
		top: auto;
		bottom: 0;
		height: auto;
		max-height: 88vh;
		overflow-y: auto;
		padding: 10px 14px 24px;
		gap: 14px;
		border-top: 1px solid var(--ms-line-2);
		border-bottom: 0;
		border-radius: 22px 22px 0 0;
		transform: translateY(calc(100% + 24px));
	}
	.ms-drum__handle { display: block; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--ms-line); }

	.ms-drum__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
	.ms-drum__left { display: contents; }
	.ms-drum__title { grid-column: 1; grid-row: 1; }
	.ms-drum__right { grid-column: 2; grid-row: 1; gap: 6px; }
	.ms-drum__controls {
		grid-column: 1 / -1;
		grid-row: 2;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		justify-items: center;
		gap: 0;
		padding: 12px 8px;
		border-radius: 14px;
		background: var(--ms-bg);
	}
	.ms-drum .ms-knob { flex-direction: column; gap: 6px; }
	.ms-drum .ms-knob__dial, .ms-drum .ms-knob__input { width: 48px; height: 48px; }
	.ms-drum .ms-knob__dial i { top: 6px; height: 14px; transform-origin: 1px 17px; }
	.ms-drum .ms-knob__label { width: auto; align-items: center; }
	.ms-drum .ms-knob__name { display: block; font-size: 9px; }

	.ms-drum__pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.ms-pagebtn {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border-radius: 10px;
		border: 1px solid var(--ms-line-2);
		background: transparent;
		color: var(--ms-muted);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.ms-pagebtn[aria-pressed="true"] { background: var(--ms-cell-cur); border-color: var(--ms-line); color: var(--ms-text); }
	.ms-pagebtn__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ms-line); }
	.ms-pagebtn.is-playing .ms-pagebtn__dot { background: var(--ms-accent); }

	.ms-drum__tracks { gap: 8px; }
	.ms-track { gap: 8px; }
	.ms-track__label { width: 32px; height: 36px; padding: 0; border: 0; flex-direction: column; justify-content: center; gap: 4px; font-size: 9px; letter-spacing: 0.08em; }
	.ms-track__name { display: none; }
	.ms-glyph { width: 12px; height: 12px; }
	.ms-track__cells { gap: 4px; }
	.ms-cell { width: 34px; height: 36px; }
	.ms-cell span { width: 20px; height: 20px; }
	.ms-cell:nth-child(8) { margin-right: 0; }
	.ms-cell:nth-child(4), .ms-cell:nth-child(12) { margin-right: 6px; }
	.ms-drum[data-page="0"] .ms-cell:nth-child(n+9) { display: none; }
	.ms-drum[data-page="1"] .ms-cell:nth-child(-n+8) { display: none; }
	.ms-drum__note { text-align: center; font-size: 10px; }
}

/* ---------- Key number from glyphs ---------- */
.ms-glyph-number { position: relative; overflow: hidden; }
.ms-glyph-number__field { position: relative; margin: 0 auto 28px; }
.ms-glyph-number__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--dot, 16px);
	height: var(--dot, 16px);
	background: color-mix(in srgb, var(--ms-accent) calc(var(--e, 0) * 100%), var(--ms-step-dim));
	will-change: transform;
}
.ms-glyph-number.is-enhanced .ms-glyph-number__value {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.ms-glyph-number.is-enhanced figcaption { opacity: var(--caption, 0); transition: opacity 300ms ease; }

/* ---------- Keep the instrument below the open menu ---------- */
.ms-menu-open .ms-seq,
.ms-menu-open .ms-seq-open,
.ms-menu-open .ms-bar-sound,
.ms-menu-open .ms-bar-read {
	visibility: hidden;
	opacity: 0 !important;
}