/* styles/40-page.css — Wav section styles. Tokens only (verify-enforced). */

/* ---------- Nav adaptation ---------- */
.Navbar__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--foreground);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
}
.Navbar__logo svg {
	height: 18px;
	width: auto;
	color: var(--foreground);
}
@media (max-width: 879px) {
	.Navbar__menuOpened .Navbar__navbar {
		height: auto;
	}
}

/* ---------- Hero ---------- */
.ow-ground-poster {
	background:
		radial-gradient(70% 60% at 50% 110%, var(--dusk-3) 0%, transparent 70%),
		radial-gradient(40% 40% at 20% 20%, var(--dusk-2), transparent 70%),
		var(--dusk-1);
}
.ow-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 32px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	background: var(--card-bg-glass);
	box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--edge-2);
	color: var(--foreground-muted);
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}
.ow-pill-dots {
	display: inline-flex;
	gap: 5px;
}
.ow-pill-dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.ow-pill-dots i:nth-child(1) { background: var(--track-1); }
.ow-pill-dots i:nth-child(2) { background: var(--track-2); }
.ow-pill-dots i:nth-child(3) { background: var(--track-3); }
.ow-hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ---------- Studio mock (mirrors assets/screens/arrangement.webp) ---------- */
.ow-studio {
	height: 560px;
}
.ow-studio-in {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	min-width: 0;
}
.ow-top {
	display: flex;
	align-items: center;
	position: relative;
	height: 36px;
	flex: none;
}
.ow-project {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	font-size: 12px;
	font-weight: 600;
}
.ow-project svg {
	width: 13px;
	height: 13px;
	color: var(--foreground-subtle);
}
.ow-dot-green {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--success);
}
.ow-transport {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 32px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.ow-tbtn {
	width: 14px;
	height: 14px;
	color: var(--foreground-muted);
	flex: none;
}
.ow-rec {
	color: var(--danger);
}
.ow-pos {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
}
.ow-bpm {
	font-size: 11px;
	color: var(--foreground-subtle);
	font-variant-numeric: tabular-nums;
}
.ow-topright {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 4px;
}
.ow-ic-pause { display: none; }
.ow-studio.is-playing .ow-ic-pause { display: block; }
.ow-studio.is-playing .ow-ic-play { display: none; }

.ow-body {
	display: flex;
	gap: 8px;
	flex: 1;
	min-height: 0;
}
.ow-side {
	width: 176px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ow-side-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 24px;
	padding: 0 6px;
	color: var(--foreground-subtle);
	font-size: 12px;
	font-weight: 500;
}
.ow-side-row svg {
	width: 11px;
	height: 11px;
}
.ow-tcard {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: var(--r-8);
	background: var(--surface-1);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.ow-tcard.is-sel {
	box-shadow: inset 0 0 0 1px var(--accent-border);
}
.ow-ticon {
	width: 24px;
	height: 24px;
	border-radius: var(--r-6);
	background: var(--c);
	flex: none;
	display: grid;
	place-items: center;
}
.ow-ticon i {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--clip-ink);
}
.ow-tmeta {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ow-tmeta b {
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ow-tmeta small {
	font-size: 12px;
	color: var(--foreground-subtle);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ow-meter {
	height: 3px;
	border-radius: 2px;
	background: var(--surface-recessed);
	overflow: hidden;
	margin-top: 4px;
}
.ow-meter i {
	display: block;
	height: 100%;
	width: 60%;
	border-radius: inherit;
	background: var(--c, var(--meter-ok));
	transform-origin: left center;
}
.ow-tms {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ow-tms button {
	width: 14px;
	height: 12px;
	border: 0;
	border-radius: 3px;
	background: var(--surface-3);
	color: var(--foreground-subtle);
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	padding: 0;
}

.ow-tl {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-radius: var(--r-12);
	background: var(--surface-recessed);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	overflow: hidden;
}
.ow-ruler {
	position: relative;
	flex: none;
	border-bottom: 1px solid var(--border-subtle);
	font-size: 11px;
}
.ow-sects {
	display: flex;
	border-bottom: 1px solid var(--border-subtle);
}
.ow-sects span {
	flex: 8 1 0;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 600;
	color: var(--foreground-subtle);
	border-right: 1px solid var(--border-subtle);
}
.ow-sects span + span {
	flex: 8 1 0;
}
.ow-sects span:last-child {
	border-right: 0;
}
.ow-cycles {
	display: flex;
}
.ow-cycles span {
	flex: 1;
	text-align: center;
	padding: 3px 0;
	color: var(--foreground-subtle);
	font-variant-numeric: tabular-nums;
	border-left: 1px solid var(--lane-cycle);
}
.ow-cycles span:first-child {
	border-left: 0;
}
.ow-chords {
	display: flex;
	gap: 2px;
	padding: 3px 4px;
}
.ow-chord {
	flex: 1;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	color: var(--foreground-subtle);
	border-radius: var(--r-pill);
	background: var(--surface-2);
	padding: 2px 0;
	transition: color .2s, background .2s;
	white-space: nowrap;
	overflow: hidden;
}
.ow-chord.is-live {
	background: var(--foreground);
	color: var(--accent-foreground);
}
.ow-tick {
	position: absolute;
	top: 0;
	width: 2px;
	height: 6px;
	border-radius: 1px;
	background: var(--accent);
	opacity: 0;
	transition: opacity .3s;
}
.ow-tick.is-on {
	opacity: 1;
}

.ow-lanes {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	background: repeating-linear-gradient(to right, var(--lane-cycle) 0 1px, transparent 1px calc(100% / 9));
}
.ow-live-cycle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(100% / 9);
	background: var(--live-cycle);
	border-left: 1px solid var(--ruler-tick-cycle);
	border-right: 1px solid var(--ruler-tick-cycle);
	transform: translateX(0);
}
.ow-lane {
	position: relative;
	flex: 1;
	border-bottom: 1px solid var(--lane-cycle);
}
.ow-lane:last-of-type {
	border-bottom: 0;
}
.ow-clip {
	position: absolute;
	top: 4px;
	bottom: 4px;
	border-radius: var(--r-8);
	background: var(--c);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	padding: 0 8px;
	overflow: hidden;
}
.ow-clip[data-clip^="Intro"] {
	left: .5%;
	width: 87.9%;
}
.ow-clip[data-clip^="Verse"] {
	left: 89%;
	right: .5%;
}
.ow-clip.is-sel {
	box-shadow: 0 0 0 1.5px var(--foreground);
}
.ow-note {
	font-style: normal;
	font-size: 9px;
	color: var(--clip-ink);
	position: absolute;
	top: 3px;
	left: 6px;
}
.ow-clip em {
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	color: var(--clip-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 12px;
}
.ow-notes {
	display: flex;
	gap: 3px;
	padding-left: 12px;
	align-items: center;
	height: 6px;
}
.ow-notes b {
	height: 2px;
	border-radius: 1px;
	background: var(--clip-ink-soft);
	flex: none;
}
.ow-notes b:nth-child(1) { width: 14%; }
.ow-notes b:nth-child(2) { width: 22%; }
.ow-notes b:nth-child(3) { width: 10%; }
.ow-notes b:nth-child(4) { width: 30%; }
.ow-clip.is-dense .ow-notes b:nth-child(1) { width: 10%; }
.ow-clip.is-dense .ow-notes b:nth-child(2) { width: 14%; }
.ow-clip.is-dense .ow-notes b:nth-child(3) { width: 18%; }
.ow-clip.is-dense .ow-notes b:nth-child(4) { width: 12%; }
.ow-clip.is-dense .ow-notes { gap: 2px; }
.ow-chip {
	position: absolute;
	top: 4px;
	right: 6px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 6px;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: var(--accent-foreground);
	opacity: 0;
	transition: opacity .3s;
}
.ow-chip.is-on {
	opacity: 1;
}
.ow-playhead {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--playhead-live);
	transform: translateX(0);
	z-index: 2;
}
.ow-playhead:before {
	content: "";
	position: absolute;
	top: 0;
	left: -3px;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 5px solid var(--playhead-live);
}

/* Right panel (inspect | mixer) */
.ow-panel {
	width: 224px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-radius: var(--r-12);
	background: var(--surface-1);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	padding: 8px;
	overflow: hidden;
}
.ow-seg {
	display: flex;
	gap: 2px;
	padding: 2px;
	border-radius: var(--r-8);
	background: var(--surface-recessed);
}
.ow-tab {
	flex: 1;
	border: 0;
	border-radius: var(--r-6);
	background: transparent;
	color: var(--foreground-subtle);
	font: 600 11px/20px var(--font-sans);
	cursor: default;
}
.ow-tab.is-on {
	background: var(--segmented-active-bg);
	color: var(--foreground);
}
.ow-pane {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 0;
}
.ow-pane[hidden] {
	display: none;
}
.ow-pane h3 {
	font-size: 12px;
	font-weight: 600;
	margin: 0;
}
.ow-plead {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--foreground-subtle);
}
.ow-fields {
	display: flex;
	gap: 6px;
}
.ow-fields span {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 10px;
	color: var(--foreground-subtle);
	background: var(--surface-recessed);
	border-radius: var(--r-6);
	padding: 4px 8px;
}
.ow-fields b {
	font-size: 11px;
	font-weight: 600;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.ow-fx {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 6px;
	border-radius: var(--r-6);
	background: var(--surface-2);
	font-size: 11px;
}
.ow-fx svg {
	width: 10px;
	height: 10px;
	color: var(--foreground-subtle);
}
.ow-fx span {
	flex: 1;
}
.ow-switch {
	width: 22px;
	height: 13px;
	border-radius: var(--r-pill);
	background: var(--surface-4);
	box-shadow: inset 0 0 0 1px var(--border);
	position: relative;
	display: inline-block;
	flex: none;
}
.ow-switch b {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--foreground-subtle);
}
.ow-switch.is-on {
	background: var(--accent);
	box-shadow: none;
}
.ow-switch.is-on b {
	left: 11px;
	background: var(--accent-foreground);
}
/* Mixer strip pane */
.ow-strip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 8px;
	border-radius: var(--r-8);
	background: var(--surface-2);
	flex: 1;
}
.ow-strip b {
	font-size: 12px;
}
.ow-strip small {
	font-size: 10px;
	color: var(--foreground-subtle);
}
.ow-pan {
	width: 80%;
	height: 4px;
	border-radius: 2px;
	background: var(--surface-recessed);
	position: relative;
}
.ow-pan i {
	position: absolute;
	top: -2px;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--foreground-muted);
	transform: translateX(-50%);
}
.ow-fader {
	position: relative;
	width: 22px;
	flex: 1;
	min-height: 90px;
	border-radius: var(--r-6);
	background: var(--surface-recessed);
}
.ow-db-scale {
	position: absolute;
	inset: 6px;
}
.ow-fader-fill {
	position: absolute;
	bottom: 6px;
	left: 6px;
	right: 6px;
	height: 45%;
	border-radius: 3px;
	background: var(--track-1);
	opacity: .55;
}
.ow-knob {
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: calc(6px + 45% - 5px);
	height: 10px;
	border-radius: 3px;
	background: var(--foreground);
	box-shadow: 0 1px 3px var(--scrim);
}
.ow-meter-t {
	width: 4px;
	height: 60px;
	margin: 0;
}
.ow-meter-t i {
	width: 100%;
	height: 40%;
	transform-origin: center bottom;
}
.ow-db {
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	color: var(--foreground-muted);
}

/* Bottom drawer */
.ow-drawer {
	flex: none;
	border-radius: var(--r-12);
	background: var(--surface-1);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	position: relative;
}
.ow-dhead {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 30px;
	padding: 0 10px;
	border-bottom: 1px solid var(--border-subtle);
	font-size: 11px;
}
.ow-dtitle {
	font-weight: 600;
}
.ow-dclip {
	color: var(--foreground-subtle);
}
.ow-dsel {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.ow-dsel svg {
	width: 10px;
	height: 10px;
}
.ow-dbody {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
}
.ow-prompt {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--r-8);
	background: var(--surface-recessed);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	font: 500 12px/1.5 var(--font-sans);
	color: var(--foreground-muted);
	white-space: nowrap;
	overflow: hidden;
}
.ow-caret {
	width: 1px;
	height: 14px;
	background: var(--accent);
	animation: ow-caret-blink 1.06s steps(1) infinite;
}
@keyframes ow-caret-blink {
	50% { opacity: 0; }
}
.ow-dfoot {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ow-apply {
	border: 0;
	border-radius: var(--r-8);
	background: var(--accent);
	color: var(--accent-foreground);
	font: 600 11px/1 var(--font-sans);
	height: 26px;
	padding: 0 14px;
	cursor: default;
	transition: transform .15s var(--ease-press), background .15s;
}
.ow-apply.is-press {
	transform: scale(.94);
	background: var(--accent-hover);
}
.ow-ask {
	position: absolute;
	left: 50%;
	bottom: -14px;
	transform: translateX(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--card-bg);
	box-shadow: inset 0 0 0 1px var(--edge-2), var(--pop-shadow);
	color: var(--accent);
	z-index: 3;
}
.ow-ask svg {
	width: 15px;
	height: 15px;
}

/* Hero responsive */
@media (max-width: 1100px) {
	.ow-panel {
		display: none;
	}
	.ow-side {
		width: 150px;
	}
}
@media (max-width: 700px) {
	.ow-studio {
		height: auto;
	}
	.ow-side,
	.ow-topright,
	.ow-dclip {
		display: none;
	}
	.ow-body {
		min-height: 220px;
	}
	.ow-lane {
		min-height: 36px;
	}
	.ow-clip em {
		font-size: 11px;
	}
	.ow-notes {
		display: none;
	}
	.ow-top {
		justify-content: space-between;
	}
	.ow-transport {
		position: static;
		transform: none;
		gap: 7px;
		padding: 0 10px;
		height: 28px;
	}
	.ow-transport .ow-tbtn:not(.ow-play) {
		display: none;
	}
	.ow-pos {
		font-size: 11px;
		white-space: nowrap;
	}
	.ow-bpm {
		font-size: 10px;
		white-space: nowrap;
	}
	.ow-tbtn {
		width: 12px;
		height: 12px;
	}
	.ow-dhead {
		gap: 6px;
	}
	.ow-dbody {
		flex-wrap: wrap;
	}
	.ow-prompt {
		flex: 1 1 100%;
	}
	.ow-project {
		padding: 0 8px;
		font-size: 11px;
	}
}
@media (max-width: 390px) {
	.ow-bpm {
		display: none;
	}
}

/* ---------- Facts band ---------- */
.ow-facts {
	padding: var(--section-y) 0 calc(var(--section-y) * .5);
}
.ow-facts-band {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 72px 0;
	border-radius: var(--r-14);
	background:
		radial-gradient(60% 90% at 50% 120%, var(--accent-glow) 0%, transparent 70%),
		var(--surface-1);
	box-shadow: inset 0 0 0 1px var(--edge);
	overflow: clip;
}
.ow-facts-band .ow-title {
	margin-bottom: 28px;
}
.ow-facts-row {
	--gradient-color: var(--surface-1);
	--gradient-width: 160px;
}
.ow-facts-row--rev .rfm-marquee {
	--direction: reverse;
}
.ow-fact {
	display: inline-block;
	white-space: nowrap;
	margin-right: 12px;
	padding: 7px 14px;
	border-radius: var(--r-8);
	background: var(--surface-3);
	box-shadow: inset 0 0 0 1px var(--border);
	color: var(--foreground-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	user-select: none;
	cursor: default;
}
@media (max-width: 700px) {
	.ow-facts-band {
		padding: 56px 0;
	}
	.ow-facts-row {
		--gradient-width: 60px;
	}
	.ow-fact {
		font-size: 12px;
		padding: 6px 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.rfm-marquee {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 12px;
	}
	.rfm-marquee + .rfm-marquee {
		display: none;
	}
	.ow-facts-row {
		overflow: visible;
	}
}

/* ---------- Showcase ---------- */
.ow-showcase {
	padding: calc(var(--section-y) * .75) 0;
	overflow-x: clip;
}
.ow-reel {
	position: absolute;
	inset: 0;
}
.ow-shot {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity 400ms var(--ease-out);
}
.ow-shot.is-active {
	opacity: 1;
}
.ow-shot img {
	max-width: 92%;
	max-height: 84%;
	width: auto;
	height: auto;
	border-radius: var(--r-8);
	box-shadow: 0 24px 60px -30px var(--scrim), 0 0 0 1px var(--edge);
	object-fit: contain;
}
@media (max-width: 700px) {
	.index-utU0aa__stars,
	.index-utU0aa__backdrop {
		display: none;
	}
	.index-utU0aa__frameOuter {
		height: clamp(340px, 90vw, 500px);
	}
}

html.nonav #nav {
	display: none;
}

/* ---------- Cut (mbs section overrides) ---------- */
.ow-cut {
	--pin-len: 1600px;
}
@media (max-width: 700px) {
	.ow-cut {
		--pin-len: 900px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ow-cut {
		--pin-len: 0px;
	}
}

/* ---------- Ask ---------- */
.ow-ask-section {
	padding: var(--section-y) 0 calc(var(--section-y) * .5);
}
.ow-card-wide {
	grid-column: 1 / -1;
}
.ow-askwin {
	border-radius: var(--r-12);
	background: var(--surface-recessed);
	box-shadow: inset 0 0 0 1px var(--edge);
	min-height: 340px;
}
.ow-asklog {
	padding-bottom: 8px;
}
.ow-receipts {
	flex-direction: column;
	gap: 4px;
	align-items: flex-end;
	display: flex;
}
.ow-receipt {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font: 400 12px/16px var(--font-mono);
	color: var(--foreground-muted);
}
.ow-receipt svg {
	width: 13px;
	height: 13px;
	color: var(--success);
	flex: none;
}
.ow-answer {
	margin: 0;
	color: var(--foreground-muted);
}
.ow-composer {
	margin-top: auto;
	padding: 0 var(--chat-side-spacing) var(--chat-side-spacing);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ow-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ow-suggestions span {
	font-size: 12px;
	line-height: 16px;
	color: var(--foreground-muted);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	border-radius: var(--r-pill);
	padding: 5px 10px;
}
.ow-composer-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--r-pill);
	background: var(--surface-3);
	box-shadow: inset 0 0 0 1px var(--border);
	padding: 8px 8px 8px 12px;
}
.ow-trackchip {
	--c: var(--track-3);
	background: var(--c);
	color: var(--clip-ink);
	font-weight: 600;
	height: 22px;
}
.ow-input {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: var(--foreground-disabled);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ow-send {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-foreground);
	display: grid;
	place-items: center;
}
.ow-send svg {
	width: 14px;
	height: 14px;
}
.ow-alts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ow-segctl {
	display: inline-flex;
	align-self: flex-start;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	border-radius: var(--r-8);
	padding: 3px;
	gap: 2px;
}
.ow-segctl span {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--foreground-muted);
	border-radius: var(--r-6);
	padding: 3px 12px;
}
.ow-alts .ow-segctl span[data-i="1"] {
	background: var(--surface-3);
	box-shadow: inset 0 0 0 1px var(--border);
	color: var(--foreground);
}
.ow-altgrids {
	display: flex;
	gap: 10px;
}
.ow-altgrid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 3px;
	border-radius: var(--r-6);
	padding: 6px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.ow-altgrid.is-sel {
	box-shadow: inset 0 0 0 1px var(--accent);
}
.ow-altgrid b {
	height: 8px;
	border-radius: 2px;
	background: var(--surface-3);
}
.ow-altgrid b.on {
	background: var(--track-3);
}
.ow-tree {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 18px;
	position: relative;
}
.ow-tree:before {
	content: "";
	position: absolute;
	left: 5px;
	top: 12px;
	bottom: 12px;
	border-left: 1px solid var(--border);
}
.ow-tree-node {
	position: relative;
	font-size: 13px;
	font-weight: 500;
	color: var(--foreground-muted);
	padding: 9px 12px;
	border-radius: var(--r-8);
}
.ow-tree-node:before {
	content: "";
	position: absolute;
	left: -13px;
	top: 0;
	bottom: 50%;
	width: 13px;
	border-left: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	border-radius: 0 0 0 var(--r-6);
}
.ow-tree-node:first-child:before {
	display: none;
}
.ow-tree-node.is-sel {
	background: var(--surface-3);
	box-shadow: inset 0 0 0 1px var(--accent);
	color: var(--foreground);
}
@media (max-width: 700px) {
	.ow-askwin {
		min-height: 0;
	}
	.ow-altgrids {
		flex-direction: column;
	}
}

/* ---------- Produce: recording grid ---------- */
.ow-produce-a {
	padding-top: calc(var(--section-y) * .5);
}
.ow-recdlg {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	padding: var(--spacing-4);
	min-width: 0;
	min-height: 220px;
	flex: 1;
}
.ow-rec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-3);
}
.ow-rec-head b {
	font-size: 14px;
	font-weight: 600;
	color: var(--foreground);
}
.ow-field {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-2);
	font-size: 12px;
	color: var(--foreground-subtle);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	border-radius: var(--r-6);
	padding: 6px 10px;
}
.ow-field b {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: var(--foreground);
}
.ow-rec-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	flex-wrap: wrap;
}
.ow-rec-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--foreground-subtle);
}
.ow-rec-device {
	font-size: 13px;
	color: var(--foreground-muted);
}
.ow-rec-preroll {
	font: 400 12px/16px var(--font-mono);
	color: var(--foreground-subtle);
}
.ow-rec-row:first-child .ow-segctl span[data-i="0"],
.ow-rec-row:nth-child(2) .ow-segctl span[data-i="2"] {
	background: var(--surface-3);
	box-shadow: inset 0 0 0 1px var(--border);
	color: var(--foreground);
}
.ow-arm {
	font-size: 12px;
	padding: 5px 12px;
	height: auto;
	min-height: 0;
}
.ow-rec-meter {
	height: 8px;
	border-radius: var(--r-4);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	overflow: hidden;
}
.ow-rec-meter i {
	display: block;
	width: 62%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(to right, var(--success), var(--warning));
}
.ow-fxpanel {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	padding: var(--spacing-4);
	flex: 1;
}
.ow-fxchips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-2);
}
.ow-eq {
	width: 100%;
	height: auto;
	color: var(--foreground-muted);
	margin-top: auto;
}
.ow-takes {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--spacing-4);
	flex: 1;
}
.ow-take {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--foreground-muted);
	border-radius: var(--r-8);
	padding: 8px 10px;
}
.ow-take[data-i="1"] {
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	color: var(--foreground);
}
.ow-take-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--border-strong);
	flex: none;
}
.ow-take[data-i="1"] .ow-take-dot {
	background: var(--accent);
}
.ow-take-actions {
	display: flex;
	gap: var(--spacing-2);
	margin-top: auto;
	padding-top: var(--spacing-3);
}
.ow-ghost {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--foreground-muted);
	border-radius: var(--r-6);
	box-shadow: inset 0 0 0 1px var(--border);
	padding: 4px 12px;
}

/* ---------- Produce: extensions reel ---------- */
.ow-produce-b {
	padding-bottom: calc(var(--section-y) * .5);
}
.ow-produce-b .ExtensionHighlight__text .ow-title {
	padding: 0;
}
.ow-reel-arrows {
	position: absolute;
	right: var(--spacing-4);
	bottom: calc(100% + var(--spacing-3));
	z-index: 2;
}
@media (max-width: 1024px) {
	.ow-reel-arrows {
		display: none;
	}
}
.ow-prodcard {
	position: relative;
	background: var(--card-bg);
	box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--edge-2);
	padding: var(--spacing-4);
	padding-top: 96px;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-2);
	min-height: 300px;
}
.ow-prodcard:before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 96px;
	background: radial-gradient(80% 100% at 50% 0%, var(--card-tint, var(--accent)) 0%, transparent 75%);
	opacity: .14;
	pointer-events: none;
}
.ow-prodicon {
	position: absolute;
	top: 28px;
	left: var(--spacing-4);
	color: var(--card-tint, var(--accent));
	display: inline-flex;
}
.ow-prodcard > b {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: var(--foreground);
}
.ow-prodcard > p {
	margin: 0;
	font-size: 13px;
	line-height: 19px;
	color: var(--foreground-muted);
}
.ow-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ow-badge i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--foreground-disabled);
}
.ow-badge--browser i {
	background: var(--success);
}
.ow-badge--setup i {
	background: var(--warning);
}
.ow-badge .ow-badge-browser, .ow-badge .ow-badge-setup {
	display: none;
}
.ow-badge--browser .ow-badge-browser,
.ow-badge--setup .ow-badge-setup {
	display: inline;
}
.ow-reel-foot {
	text-align: center;
	padding: 0 var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
	.ExtensionHighlight__extensionCardWrapper {
		animation: none;
		opacity: 1;
	}
}

/* 07-sounds tile faces — lifted .mbt shell, Wav face contents. */
.ow-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ow-sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.mbt-t[data-family="drums"] { --fam: var(--track-1); }
.mbt-t[data-family="bass"] { --fam: var(--track-2); }
.mbt-t[data-family="synth"] { --fam: var(--track-3); }
.mbt-t[data-family="keys"] { --fam: var(--track-5); }
.mbt-t[data-family="mallet"] { --fam: var(--track-6); }
.mbt-t[data-family="strings"], .mbt-t[data-family="wind"] { --fam: var(--track-4); }
.mbt-face {
	background: radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--fam) 28%, transparent), transparent 70%), var(--tile-face);
	box-shadow: inset 0 0 0 1px var(--edge), inset 0 2px var(--edge-2);
}
@media (hover: hover) and (pointer: fine) {
	.mbt-lift.is-hot .mbt-face { background: radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--fam) 28%, transparent), transparent 70%), var(--tile-face-hover); }
}
.mbt-face .mbt-glyph {
	color: var(--foreground);
	opacity: .85;
	width: 28px;
	height: 28px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -66%);
}
.mbt-face .mbt-cym {
	width: 62px;
	height: 62px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -62%);
	color: var(--foreground-muted);
	opacity: .85;
	object-fit: contain;
}
.mbt-name {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 8px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--foreground-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#sounds .ow-title p { max-width: 52ch; margin: var(--spacing-5) auto 0; }
#sounds .mbt { margin-top: var(--spacing-12); }

/* 10-shortcuts — lit key reskin on the lifted key face + the dl. */
.index-h8MSgW__key.is-lit {
	--key-bg-start-color: var(--accent-muted);
	--key-bg-end-color: var(--surface-2);
	color: var(--accent);
	background: linear-gradient(180deg, var(--key-bg-start-color) 0%, var(--key-bg-end-color) 100%);
	box-shadow: 0 0 0 1px var(--accent-border), 0 0 28px var(--accent-glow-2), 0 1.5px .5px 2.5px var(--clip-ink), inset 0 1px 1px 1px var(--edge-2);
}
.index-h8MSgW__key.is-lit .index-h8MSgW__primary > span,
.index-h8MSgW__key.is-lit .index-h8MSgW__alt > span {
	color: var(--accent);
	font-weight: 600;
}
.index-h8MSgW__isNotSafari .index-h8MSgW__key.is-lit:before {
	opacity: 1;
	width: 120%;
	height: 130%;
	transform: scale(1.08) translate3d(0, 0, 0);
	background: radial-gradient(56% 65%, var(--accent) 0%, transparent 100%);
	position: absolute;
	top: -15%;
	left: -10%;
	z-index: -1;
	filter: blur(15px);
}
.ow-kbd-small .index-h8MSgW__key { font-size: 18px; }
.ow-keys {
	columns: 2;
	gap: 12px 48px;
	max-width: 560px;
	margin: 56px auto 0;
	padding: 0;
}
.ow-keys-row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 8px 0;
	break-inside: avoid;
}
.ow-keys-row dt { flex: 0 0 auto; }
.ow-keys-row kbd {
	display: inline-block;
	background: var(--surface-4);
	box-shadow: inset 0 0 0 1px var(--border);
	border-radius: 6px;
	padding: 3px 8px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	line-height: 18px;
	color: var(--foreground);
}
.ow-keys-row dd {
	margin: 0;
	color: var(--foreground-muted);
	font-size: 14px;
}
@media (max-width: 700px) {
	.ow-keys { columns: 1; }
}

/* 11-closing — dusk poster + buttons row. */
.mbl-closing .ow-ground-poster {
	background:
		radial-gradient(80% 70% at 50% 115%, var(--dusk-4) 0%, transparent 65%),
		radial-gradient(50% 45% at 15% 15%, var(--dusk-2) 0%, transparent 70%),
		radial-gradient(45% 40% at 88% 8%, var(--dusk-3) 0%, transparent 70%),
		linear-gradient(in oklab 180deg, var(--dusk-1) 0%, var(--background) 45%, var(--dusk-2) 80%, var(--dusk-3) 100%);
}
.mbl-closing .mbl-badge-credit svg { color: var(--brand-mark); width: 24px; height: 24px; margin-left: 2px; }
.ow-closing-actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
	justify-content: center;
}
@media (max-width: 700px) {
	.mbl-closing { padding: 88px 20px 96px; margin-top: 72px; }
	.mbl-closing-h2 { font-size: 40px; line-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	.mbt[data-state] .mbt-bob { animation: none; }
	.mbl-closing-grain { animation: none; }
}

/* ---------- Final responsive pass ---------- */
@media (max-width: 719.5px) {
	/* Reel: 86vw snap cards */
	.ExtensionHighlight__reel {
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.ExtensionHighlight__extensionCardWrapper {
		scroll-snap-align: start;
	}
	.ow-prodcard {
		width: 86vw;
		flex: none;
	}
	/* Keyboard scales, keeps every key */
	.AnimatedCmdSpaceKeyboard__svg {
		width: clamp(340px, 94vw, 700px);
	}
}
/* Cut slider: 44px touch target on coarse pointers / small screens */
@media (max-width: 700px), (pointer: coarse) {
	#cut .mbs-lane {
		min-height: 44px;
	}
	#cut .mbs-lane::before {
		content: "";
		position: absolute;
		inset: -10px 0;
	}
}

/* Current Studio capture and original Wav vector artwork. */
.ow-hero-capture { display: block; width: 100%; height: auto; border-radius: var(--rounding-lg); border: 1px solid var(--border); }
.ow-footer-wordmark { width: 100%; height: auto; transform: none; padding: 4vw 8vw; }
.mbl-h1 { font-family: var(--font-sans); font-weight: 400; }

/* Single-hero landing: logo and one action, with no section navigation. */
.Navbar__navbar { display: flex; align-items: center; justify-content: space-between; }
.Navbar__logoContainer { position: static; width: auto; transform: none; }
.Navbar__logoContainer > a { display: flex; }
.Navbar__navbar > .Button__button { flex-shrink: 0; }
.mbl-hero { min-height: 100svh; padding-bottom: 24px; }
@media (max-width: 700px) { .mbl-studio-wrap { max-width: none; } }

.mbl-hero-sub { width: min(800px, 100%); text-wrap: balance; }

.mbl-hero-copy { padding-top: calc(var(--navbar-height) + 96px); }

.ow-hero-actions { margin-top: var(--spacing-3); }
.ow-hero-actions .Button__button {
 min-height: 48px;
 padding: var(--spacing-3) var(--spacing-6);
 border-radius: var(--r-8);
 letter-spacing: 0;
 color: var(--accent-foreground);
 background: var(--accent);
 box-shadow: 0 1px 3px var(--surface-recessed);
}
.ow-hero-actions .Button__button:focus-visible {
 outline: 2px solid var(--ring);
 outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
 .ow-hero-actions .Button__button:hover { background: var(--accent-hover); }
}

.Navbar__navbar { border-radius: var(--landing-nav-radius); }
.Navbar__navbar > .Button__button { border-radius: var(--landing-cta-radius); }

.Navbar__navbar {
 padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-6);
}
.Navbar__navbar > .Button__button {
 min-height: var(--landing-cta-height);
 padding: var(--spacing-3) var(--spacing-6);
 line-height: 1;
 letter-spacing: 0;
}

.ow-hero-actions > .Button__button {
 min-height: var(--landing-cta-height);
 padding: var(--spacing-3) var(--spacing-6);
 border-radius: var(--landing-cta-radius);
 font-size: 14px;
 line-height: 1;
 letter-spacing: 0;
}

.Navbar__navbar {
 padding-left: clamp(24px, 3vw, 40px);
 padding-right: calc(clamp(24px, 3vw, 40px) - var(--spacing-2));
}
.Navbar__logoContainer .Navbar__logo { height: 30px; }
.Navbar__logo svg { height: 27px; }

.ow-hero-player { display: block; width: 100%; }
.ow-hero-video-skin {
 --media-border-radius: var(--rounding-lg);
 --media-font-family: var(--font-sans);
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 border-radius: var(--rounding-lg);
 background: var(--surface-recessed);
 font-family: var(--font-sans);
}
.ow-hero-video-skin video { width: 100%; height: 100%; object-fit: contain; }