:root {
	/* Studio Night */
	--chrome-bg: #1E2429;
	--chrome-bg-deep: #151A1E;
	--chrome-border: #0F1316;
	--header-bg-color: #1B2228;
	--header-bg-start-color: #1B2228;
	--header-bg-end-color: #151A1E;
	--bpm-bg-color: #151A1E;
	--side-bg-color: #1E2429;
	--bottom-bg-color: #1E2429;
	--player-bg-color: #151A1E;
	--side-highlight-bg-color: #3D9B8F;
	--note-overlay-bg-color: #C5EDE6;

	--highlight-color: #3D9B8F;
	--highlight-color-hover: #4FB3A5;
	--highlight-color-on-white: #2F7F76;
	--highlight-color-soft: rgba(61, 155, 143, 0.18);

	--workspace-bg: #F4F6F7;
	--surface-white: #FFFFFF;
	--text-on-dark: #E8EEF1;
	--text-on-dark-muted: #9AA7B0;
	--text-on-light: #1E2429;
	--success-color: #3FAE78;
	--danger-color: #D96B6B;
	--menu-bg: #EEF2F4;
	--menu-hover: #D9E2E6;
	--menu-border: #1E2429;
	--staff-line-color: #C5CCD1;
}


	/* this is for debugging layout issues - puts a read border around everything */
	/* body * { border: 1px solid red; }		 */
	body {

	}
	.warnings {
		font-family: monospace;
		display: none;
	}
	p.warnings:has(+ #diverr:not(:empty)) {
		display: block;
		color: var(--accent-warn-color, #ffb067);
		font-weight: 700;
	}
	#diverr:not(:empty) {
		display: block;
		padding: 8px 12px;
		color: var(--accent-warn-color, #ffb067);
		background: rgba(216, 79, 79, 0.12);
		border: 1px solid rgba(216, 79, 79, 0.35);
		border-radius: 4px;
		white-space: pre-wrap;
	}

	.Printable {
		display: block;
	}
	.nonPrintable {
		display: block;
	}

	/* there is another .svgTarget definition in groove_writer_orange.css */
	.svgTarget {
		width: 100%;
	}
	.svgTarget svg {
		width: 100%;
		height: calc(100%);  /* hack, should really be auto, but that causes old webkit to go nuts */
	}
	.playerControl {
		display: inline-block;
		background-color: var(--player-bg-color);
		width: 100%;  /* expand to the surounding element */
		font-family: 'Lato', sans-serif;
		white-space: nowrap;
	}
	.playerControl.micPracticeEnabled {
		white-space: normal;
	}
	.playerControl.large {
		display: block;
		width: calc(50% - 83px);
		min-width: 500px;
		border: 1px solid #009;
		padding-left: 0px;
		margin: 0px 0px 0px 0px;
	}
	.playerControl.small {
		width: 90px;
		border: 1px solid #009;
		padding-left: 0px;
	}
	.playerControlsRow {
		/display: flex;
		/display: -webkit-flex;
		padding-left: 6px;
		height: 48px;
		flex-flow: flex-start;
		flex-wrap: nowrap;
		-webkit-flex-flow: flex-start;
		-webkit-flex-wrap: nowrap;
	}
	.playerControlsRow.large, .playerControlsRow.small {
		padding-left: 0px;
	}
	.playerControl.micPracticeEnabled .playerControlsRow {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		height: auto;
		row-gap: 6px;
		padding-bottom: 8px;
	}
	.midiPlayImage, .midiExpandImage {
		display: inline-flex;
		display: -webkit-inline-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 4px 0px 4px 0px;
		border: 0px solid #000;
		color: #cccccc;
		font-size: 20px;
		text-align: center;
		line-height: 40px;
		vertical-align: top;
		border-radius: 50%;
		-webkit-flex: none;
		flex: none;
		box-sizing: border-box;
	}
	.midiPlayImage {
		background: #666666;
		margin: 4px 4px 4px 4px;
		color: #DD4444;

	}
	.midiPlayImagePrimary {
		width: 48px;
		height: 48px;
		margin: 2px 8px 2px 6px;
		border: 2px solid rgba(61, 155, 143, 0.55);
		font-size: 22px;
		line-height: 48px;
	}
	.midiPlayImage.Stopped,
	.midiPlayImage.Paused {
		background: #2f9e44;
		color: #FFF;
	}
	.midiPlayImage.Playing {
		background: #d9480f;
		color: #FFF;
	}
	.midiPlayImage.Stopped:hover,
	.midiPlayImage.Paused:hover {
		background: #37b24d;
	}
	.midiPlayImage.Playing:hover {
		background: #e8590c;
	}
	.midiPlayGlyph {
		display: block;
		width: 18px;
		height: 18px;
		flex: none;
		pointer-events: none;
	}
	.midiPlayImagePrimary .midiPlayGlyph {
		width: 22px;
		height: 22px;
	}
	.midiExpandImage {
		font-size: 26px;
		transition: all .6s ease-in-out;
	}
	.midiExpandImage.small:hover {
		color: #68c2ff;
		transform: scale(1.4);
	}
	.midiExpandImage.large:hover {
		color: #68c2ff;
		transform: scale(.8);
	}
	.midiExpandImage.small .bb-icon,
	.midiExpandImage.large .bb-icon {
		width: 22px;
		height: 22px;
	}
	.tempoAndProgress {
		display: inline-flex;
		display: -webkit-inline-flex;
		align-items: center;
		-webkit-align-items: center;
		flex-wrap: nowrap;
		-webkit-flex-wrap: nowrap;
		gap: 6px 10px;
		width: auto;
		max-width: none;
		height: auto;
		min-height: 40px;
		vertical-align: top;
		flex: 0 1 auto;
		-webkit-flex: 0 1 auto;
		overflow: visible;
		position: relative;
		z-index: 2;
		padding-top: 4px;
		box-sizing: border-box;
	}
	.playerControl.micPracticeEnabled .tempoAndProgress {
		width: auto;
		min-width: 0;
		flex: 0 1 auto;
		-webkit-flex: 0 1 auto;
	}
	.tempoAndProgress.small {
			display: none;
	}
	.tempoRow, .swingRow, .metronomeVolumeRow {
		display: inline-flex;
		display: -webkit-inline-flex;
		align-items: center;
		-webkit-align-items: center;
		height: 28px;
		min-height: 28px;
		vertical-align: middle;
		flex: 0 0 auto;
		-webkit-flex: 0 0 auto;
		gap: 4px;
		white-space: nowrap;
	}
	.playerControl,
	.playerControlsRow {
		overflow: visible;
	}
	.playerSliderHint {
		position: relative;
		outline: none;
		cursor: help;
	}
	.playerSliderHint .playerSliderTooltip {
		/* text source only; visible bubble is #playerSliderTipBubble on body */
		display: none;
	}
	.playerSliderTipBubble {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10050;
		max-width: min(300px, calc(100vw - 24px));
		padding: 10px 12px;
		border-radius: 6px;
		background: #1a1a1a;
		color: #f2f2f2;
		font-family: 'Lato', sans-serif;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.45;
		text-align: left;
		white-space: pre-line;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
	}
	.playerSliderTipBubble.visible {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.playerSliderTipBubble::after {
		content: "";
		position: absolute;
		left: 24px;
		top: -6px;
		border: 6px solid transparent;
		border-bottom-color: #1a1a1a;
	}
	.playerSliderTipBubble.place-above::after {
		top: auto;
		bottom: -6px;
		border-bottom-color: transparent;
		border-top-color: #1a1a1a;
	}
	.tempoInput, .swingInput, .metronomeVolumeInput {
		background-color: 3f91e5;
		vertical-align: middle;
		padding: 0;
		margin: 0;
		color: #66c0fe;
		height: 8px;
		width: 72px;
		max-width: 72px;
		min-width: 56px;
		flex: none;
		-webkit-flex: none;
	}
	.tempoSettings {
		color: #FFF;
	}
	.tempoLabel, .swingLabel, .metronomeVolumeLabel {
		text-align: left;
		padding: 0;
		vertical-align: middle;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.04em;
		width: auto;
		min-width: 0;
		color: #999999;
		-webkit-flex: none;
		flex: none;
		line-height: 1;
	}
	.tempoTextField {
		margin: 0;
		color: #999999;
		background-color: #222;
		border: none;
		width: 28px;
		text-align: center;
		font-size: 13px;
		padding: 0;
		height: 18px;
		flex: none;
		-webkit-flex: none;
	}
	.swingOutput, .metronomeVolumeOutput {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		padding: 0;
		font-size: 12px;
		color: #999999;
		width: 34px;
		min-width: 28px;
		-webkit-flex: none;
		flex: none;
		line-height: 1;
	}
	.swingSettings {
		color: #FFF;
	}
	.MIDIPlayTime {
		display: inline-block;
		width: 110px;
		color: #999999;
		font-size: 30px;
		margin-left: 6px;
		padding-top: 4px;
		text-align: left;
		line-height: 40px;
		vertical-align: top;
		flex: none;
	}
	.midiVisualCount {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 56px;
		height: 40px;
		margin: 0;
		padding: 0 8px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.06);
		color: #6f8591;
		font-size: 22px;
		font-weight: 700;
		line-height: 1;
		vertical-align: top;
		flex: none;
		letter-spacing: 0.02em;
		text-transform: none;
		cursor: pointer;
		user-select: none;
		transition: color 0.08s ease, background 0.08s ease, transform 0.08s ease;
	}
	.midiVisualCountGroup {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		margin: 4px 8px 4px 0;
		vertical-align: top;
		flex: none;
	}
	.midiVisualCountExpand {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.06);
		color: #7a8f9a;
		cursor: pointer;
		line-height: 1;
		transition: color 0.12s ease, background 0.12s ease;
	}
	.midiVisualCountExpand:hover,
	.midiVisualCountExpand.is-active {
		background: rgba(229, 132, 22, 0.22);
		color: #f0b36a;
	}
	.midiVisualCountExpand .bb-icon {
		width: 14px;
		height: 14px;
	}
	.midiVisualCount:hover {
		background: rgba(255, 255, 255, 0.12);
		filter: brightness(1.08);
	}
	.midiVisualCount.active {
		background: rgba(255, 255, 255, 0.08);
	}
	.midiVisualCount.beat.active {
		transform: scale(1.06);
		background: rgba(255, 255, 255, 0.12);
	}
	/* Color by beat group: "раз Е И Е" share one color, next beat another */
	.midiVisualCount.count-m0,
	.midiVisualCountFullscreenLabel.count-m0 {
		color: #ff8a3d;
	}
	.midiVisualCount.count-m1,
	.midiVisualCountFullscreenLabel.count-m1 {
		color: #5ec8ff;
	}
	.midiVisualCount.count-m2,
	.midiVisualCountFullscreenLabel.count-m2 {
		color: #c792ea;
	}
	.midiVisualCount.count-m3,
	.midiVisualCountFullscreenLabel.count-m3 {
		color: #3ddc97;
	}
	.midiVisualCount.count-m4,
	.midiVisualCountFullscreenLabel.count-m4 {
		color: #f2cc60;
	}
	.midiVisualCount.count-m5,
	.midiVisualCountFullscreenLabel.count-m5 {
		color: #f07178;
	}
	.midiVisualCount.count-m6,
	.midiVisualCountFullscreenLabel.count-m6 {
		color: #7aa2ff;
	}
	.midiVisualCount.count-m7,
	.midiVisualCountFullscreenLabel.count-m7 {
		color: #95e6a8;
	}
	.midiVisualCount.count-m0.active,
	.midiVisualCountFullscreenLabel.count-m0.active {
		background: rgba(255, 138, 61, 0.22);
	}
	.midiVisualCount.count-m1.active,
	.midiVisualCountFullscreenLabel.count-m1.active {
		background: rgba(94, 200, 255, 0.2);
	}
	.midiVisualCount.count-m2.active,
	.midiVisualCountFullscreenLabel.count-m2.active {
		background: rgba(199, 146, 234, 0.22);
	}
	.midiVisualCount.count-m3.active,
	.midiVisualCountFullscreenLabel.count-m3.active {
		background: rgba(61, 220, 151, 0.2);
	}
	.midiVisualCount.count-m4.active,
	.midiVisualCountFullscreenLabel.count-m4.active {
		background: rgba(242, 204, 96, 0.2);
	}
	.midiVisualCount.count-m5.active,
	.midiVisualCountFullscreenLabel.count-m5.active {
		background: rgba(240, 113, 120, 0.2);
	}
	.midiVisualCount.count-m6.active,
	.midiVisualCountFullscreenLabel.count-m6.active {
		background: rgba(122, 162, 255, 0.22);
	}
	.midiVisualCount.count-m7.active,
	.midiVisualCountFullscreenLabel.count-m7.active {
		background: rgba(149, 230, 168, 0.2);
	}
	.midiVisualCount[data-count-mode="beats"].beat.active {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	}
	.MIDIPlayTime.small {
		display: none;
	}
	.midiVisualCountGroup.small,
	.midiVisualCount.small {
		display: none;
	}
	.midiVisualCountFullscreen {
		position: fixed;
		inset: 0;
		z-index: 10050;
		display: none;
		align-items: center;
		justify-content: center;
		padding: 24px;
		background: rgba(12, 14, 16, 0.94);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}
	.midiVisualCountFullscreen.is-open {
		display: flex;
	}
	.midiVisualCountFullscreen:fullscreen,
	.midiVisualCountFullscreen:-webkit-full-screen {
		display: flex;
		width: 100%;
		height: 100%;
		inset: 0;
		padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
		background: #0c0e10;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.midiVisualCountFullscreenInner {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: min(960px, 100%);
		min-height: min(70vh, 520px);
		text-align: center;
	}
	.midiVisualCountFullscreenHint {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: max-content;
		max-width: 92vw;
		color: rgba(255, 255, 255, 0.38);
		font-size: 13px;
		letter-spacing: 0.02em;
		line-height: 1.4;
	}
	.midiVisualCountFullscreenLabel {
		margin: 0;
		padding: 12px 20px;
		border-radius: 18px;
		color: #8fa3ad;
		font-size: clamp(64px, 18vw, 180px);
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: 0.04em;
		cursor: pointer;
		user-select: none;
		transition: color 0.08s ease, background 0.08s ease, transform 0.08s ease;
	}
	.midiVisualCountFullscreenLabel.active {
		/* word color comes from count-* classes */
	}
	.midiVisualCountFullscreenLabel.beat.active {
		transform: scale(1.04);
	}
	.midiVisualCountFullscreenLabel[data-count-mode="beats"].beat.active {
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
	}
	.midiVisualCountFullscreenClose {
		position: absolute;
		top: 0;
		right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.08);
		color: #d7e2e8;
		cursor: pointer;
	}
	.midiVisualCountFullscreenClose:hover {
		background: rgba(229, 132, 22, 0.28);
		color: #fff;
	}
	.midiVisualCountFullscreenClose .bb-icon {
		width: 18px;
		height: 18px;
	}
	body.visual-count-fullscreen-open {
		overflow: hidden;
	}
	.drumSampleKitRow {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-left: 8px;
		vertical-align: top;
		padding-top: 8px;
	}
	.micPracticeRow {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 8px;
		vertical-align: top;
		margin: 2px 8px 0;
		padding: 10px 12px 12px;
		max-width: none;
		width: calc(100% - 16px);
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(104, 194, 255, 0.14);
		border-radius: 14px;
		box-sizing: border-box;
		order: 3;
		flex: 1 1 100%;
		-webkit-flex: 1 1 100%;
	}
	.micPracticeMeta {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 320px;
		max-width: none;
		min-width: 280px;
		line-height: 1.15;
	}
	.playerControl.micPracticeEnabled .drumSampleKitRow {
		flex: none;
	}
	.micPracticeToggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		min-width: 30px;
		padding: 0;
		border: 1px solid #5d7684;
		border-radius: 999px;
		background: #30444f;
		color: #f2f6f8;
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
	}
	.micPracticeMicCluster {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 6px;
		flex: 0 0 auto;
		min-height: 30px;
		position: relative;
	}
	.micPracticeDeviceMenu {
		display: none;
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 80;
		min-width: 220px;
		max-width: min(320px, 80vw);
		padding: 6px;
		border-radius: 12px;
		border: 1px solid rgba(255, 255, 255, 0.14);
		background: #24353e;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
		box-sizing: border-box;
	}
	.micPracticeDeviceMenu.is-open {
		display: block;
	}
	.micPracticeDeviceMenuTitle {
		padding: 4px 8px 8px;
		color: #9eb4c0;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.micPracticeDeviceOption {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		margin: 0;
		padding: 8px 10px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: #edf3f6;
		font-size: 12px;
		line-height: 1.25;
		text-align: left;
		cursor: pointer;
	}
	.micPracticeDeviceOption:hover,
	.micPracticeDeviceOption.is-active {
		background: rgba(104, 194, 255, 0.14);
	}
	.micPracticeDeviceOptionLabel {
		flex: 1 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.micPracticeDeviceOptionMark {
		flex: 0 0 auto;
		color: #7fd0c4;
		font-size: 12px;
	}
	.micPracticeLevel {
		display: none;
		align-items: center;
		width: 52px;
		height: 5px;
		padding: 0;
		border-radius: 999px;
		background: rgba(15, 19, 22, 0.65);
		border: 1px solid rgba(255, 255, 255, 0.12);
		overflow: hidden;
		box-sizing: border-box;
		flex: 0 0 auto;
	}
	.micPracticeLevel.active {
		display: inline-flex;
	}
	.micPracticeLevelFill {
		display: block;
		height: 100%;
		width: 0%;
		border-radius: inherit;
		background: linear-gradient(90deg, #2F7F76 0%, #3D9B8F 55%, #4FB3A5 100%);
		transition: width 0.04s linear;
	}
	.micPracticeToggle:hover {
		background: #3b5562;
	}
	.micPracticeToggle.enabled {
		background: #c62828;
		border-color: #b71c1c;
		color: #fff;
	}
	.micPracticeToggle.enabled:hover {
		background: #d32f2f;
		border-color: #c62828;
	}
	.micPracticeLoopButton {
		height: 30px;
		padding: 0 10px;
		border: 1px solid #4e6774;
		border-radius: 999px;
		background: var(--highlight-color-soft);
		color: #b8ebe3;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
	}
	.micPracticeLegendButton {
		width: 30px;
		height: 30px;
		padding: 0;
		border: 1px solid #5d7684;
		border-radius: 999px;
		background: transparent;
		color: #d5e2ea;
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
	}
	.micPracticeLegendButton:hover {
		background: rgba(104, 194, 255, 0.12);
		border-color: #68c2ff;
		color: #ffffff;
	}
	.micPracticeKitSetupButton {
		height: 30px;
		padding: 0 10px;
		border: 1px solid #4e6774;
		border-radius: 999px;
		background: var(--highlight-color-soft);
		color: #b8ebe3;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		cursor: pointer;
	}
	.micPracticeKitSetupButton:hover {
		background: rgba(104, 194, 255, 0.12);
		border-color: #68c2ff;
		color: #ffffff;
	}
	.micPracticeKitSetupButton.enabled {
		background: #c62828;
		border-color: #b71c1c;
		color: #fff;
	}
	.micPracticeKitSetupButton.is-ready {
		border-color: #3D9B8F;
		color: #b8ebe3;
		background: rgba(47, 127, 118, 0.28);
	}
	.micPracticeKitSetupButton.unavailable,
	.micPracticeKitSetupButton:disabled {
		opacity: 0.45;
		cursor: default;
	}
	.micPracticeAutoTempoButton {
		height: 30px;
		padding: 0 10px;
		border: 1px solid #4f6a57;
		border-radius: 999px;
		background: rgba(42, 182, 115, 0.1);
		color: #d8f6e5;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
	}
	.micPracticeAutoTempoPercentButton {
		height: 30px;
		padding: 0 10px;
		border: 1px solid #7c6b3a;
		border-radius: 999px;
		background: rgba(215, 178, 47, 0.12);
		color: #f4e3a5;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
	}
	.micPracticeCaptureFlow {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 0;
		flex: 0 0 auto;
		min-height: 30px;
	}
	.micPracticeFlowDivider {
		display: inline-block;
		width: 1px;
		height: 18px;
		margin: 0 8px;
		flex: 0 0 auto;
		align-self: center;
		background: rgba(255, 255, 255, 0.22);
		pointer-events: none;
	}
	.micPracticeFlowLink {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 30px;
		flex: 0 0 auto;
		color: #8a9aa8;
		pointer-events: none;
		user-select: none;
	}
	.micPracticeFlowLink::before {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
		margin-right: 1px;
		box-sizing: border-box;
	}
	.micPracticeAutoTempoFlow {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 0;
		flex: 0 0 auto;
		min-height: 30px;
	}
	.micPracticeRecordButton {
		height: 30px;
		padding: 0 10px;
		border: 1px solid #8a3d3d;
		border-radius: 999px;
		background: rgba(216, 79, 79, 0.12);
		color: #f5c0c0;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		min-width: 84px;
	}
	.micPracticeMixModeButton {
		height: 30px;
		padding: 0 10px;
		border: 1px solid #5a5f78;
		border-radius: 999px;
		background: rgba(120, 130, 180, 0.12);
		color: #d5daf0;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
	}
	.micPracticeLoopButton:hover {
		background: var(--highlight-color-soft);
		border-color: #68c2ff;
		color: #ffffff;
	}
	.micPracticeAutoTempoButton:hover {
		background: rgba(42, 182, 115, 0.18);
		border-color: #63d398;
		color: #ffffff;
	}
	.micPracticeAutoTempoPercentButton:hover {
		background: rgba(215, 178, 47, 0.2);
		border-color: #d7b22f;
		color: #fff6d0;
	}
	.micPracticeRecordButton:hover {
		background: rgba(216, 79, 79, 0.22);
		border-color: #e57373;
		color: #ffffff;
	}
	.micPracticeMixModeButton:hover {
		background: rgba(120, 130, 180, 0.2);
		border-color: #9aa3d4;
		color: #ffffff;
	}
	.micPracticeLoopButton.enabled {
		background: var(--highlight-color);
		border-color: var(--highlight-color-hover);
		color: #ffffff;
	}
	.micPracticeAutoTempoButton.enabled {
		background: #2ab673;
		border-color: #63d398;
		color: #ffffff;
	}
	.micPracticeRecordButton.recording {
		background: #d84f4f;
		border-color: #ff8a80;
		color: #ffffff;
		animation: micPracticeRecordPulse 1.2s ease-in-out infinite;
	}
	.micPracticeMixModeButton.enabled {
		background: #5c6bc0;
		border-color: #9fa8da;
		color: #ffffff;
	}
	@keyframes micPracticeRecordPulse {
		0%, 100% { box-shadow: 0 0 0 0 rgba(216, 79, 79, 0.35); }
		50% { box-shadow: 0 0 0 6px rgba(216, 79, 79, 0); }
	}
	.micPracticeLoopButton.unavailable,
	.micPracticeLoopButton:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}
	.micPracticeRecordButton.unavailable,
	.micPracticeRecordButton:disabled,
	.micPracticeMixModeButton.unavailable,
	.micPracticeMixModeButton:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}
	.micPracticeToggle.unavailable {
		opacity: 0.55;
		cursor: not-allowed;
	}
	.micPracticeStatus {
		display: block;
		color: #f1f1f1;
		font-size: 12px;
		font-weight: 700;
		white-space: normal;
		overflow: hidden;
		line-height: 1.25;
		max-height: 2.5em;
	}
	.micPracticeStats {
		display: block;
		color: #9fb3bf;
		font-size: 11px;
		line-height: 1.3;
		white-space: normal;
		margin-top: 4px;
	}
	.micPracticeInfoLine {
		display: block;
		padding: 8px 10px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.06);
		color: #b9c7cf;
	}
	.micPracticeAutoTempoPanel {
		display: block;
		margin-top: 8px;
	}
	.micPracticeAutoTempoProgress {
		display: block;
		margin-top: 6px;
	}
	.micPracticeAutoTempoProgressLabel {
		display: block;
		margin-bottom: 5px;
		color: #d9efe3;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.03em;
	}
	.micPracticeAutoTempoProgressTrack {
		position: relative;
		display: block;
		height: 10px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.08);
		overflow: hidden;
		border: 1px solid rgba(99, 211, 152, 0.18);
	}
	.micPracticeAutoTempoProgressFill {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: linear-gradient(90deg, #2ab673 0%, #63d398 100%);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	}
	.micPracticeAutoTempoProgress.is-bad .micPracticeAutoTempoProgressFill {
		background: linear-gradient(90deg, #d84f4f 0%, #ef7d7d 100%);
	}
	.micPracticeAutoTempoProgress.is-near .micPracticeAutoTempoProgressFill {
		background: linear-gradient(90deg, #d7b22f 0%, #efd56f 100%);
	}
	.micPracticeAutoTempoProgress.is-good .micPracticeAutoTempoProgressFill {
		background: linear-gradient(90deg, #2ab673 0%, #63d398 100%);
	}
	.micPracticeAutoTempoProgressTarget {
		position: absolute;
		top: -2px;
		bottom: -2px;
		width: 2px;
		margin-left: -1px;
		background: #ffffff;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.24);
		border-radius: 999px;
		pointer-events: none;
	}
	.micPracticeAutoTempoNote {
		display: block;
		margin-top: 6px;
		padding: 7px 10px;
		border-radius: 11px;
		background: rgba(42, 182, 115, 0.12);
		border: 1px solid rgba(99, 211, 152, 0.2);
		color: #d8f6e5;
	}
	.micPracticeStatsPanel {
		display: flex;
		flex-direction: column;
		gap: 6px;
		width: 100%;
	}
	.micPracticeStatsRow {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	.micPracticeMetric {
		display: inline-flex;
		align-items: baseline;
		gap: 6px;
		padding: 7px 10px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.08);
		min-width: 0;
	}
	.micPracticeMetricLabel {
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #8ea5b2;
	}
	.micPracticeMetricValue {
		font-size: 13px;
		font-weight: 800;
		color: #f5fbff;
	}
	.micPracticeMetric.good {
		background: rgba(42, 182, 115, 0.18);
		border-color: rgba(42, 182, 115, 0.35);
	}
	.micPracticeMetric.near {
		background: rgba(215, 178, 47, 0.18);
		border-color: rgba(215, 178, 47, 0.35);
	}
	.micPracticeMetric.bad {
		background: rgba(216, 79, 79, 0.18);
		border-color: rgba(216, 79, 79, 0.35);
	}
	.micPracticeMetric.early {
		background: rgba(92, 200, 255, 0.16);
		border-color: rgba(92, 200, 255, 0.32);
	}
	.micPracticeMetric.late {
		background: rgba(255, 176, 103, 0.16);
		border-color: rgba(255, 176, 103, 0.32);
	}
	.micPracticeMetric.avg,
	.micPracticeMetric.bias,
	.micPracticeMetric.extra,
	.micPracticeMetric.worst {
		background: var(--highlight-color-soft);
		border-color: rgba(104, 194, 255, 0.28);
	}
	button.micPracticeMetric {
		font: inherit;
		color: inherit;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		margin: 0;
		text-align: left;
	}
	button.micPracticeMetric.is-clickable:hover {
		box-shadow: 0 0 0 2px rgba(104, 194, 255, 0.35);
	}
	button.micPracticeMetric.is-active {
		box-shadow: 0 0 0 2px #68c2ff;
		transform: translateY(-1px);
	}
	.micPracticeMetric.kit-ok {
		background: rgba(42, 182, 115, 0.18);
		border-color: rgba(42, 182, 115, 0.35);
	}
	.micPracticeMetric.kit-bad {
		background: rgba(216, 79, 79, 0.18);
		border-color: rgba(216, 79, 79, 0.35);
	}
	.micPracticeMetric.kit-unknown,
	.micPracticeMetric.kit-heard {
		background: rgba(104, 194, 255, 0.14);
		border-color: rgba(104, 194, 255, 0.3);
	}
	.micPracticeStatsGroup {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		margin-top: 6px;
		min-width: 0;
		gap: 0;
	}
	.micPracticeStatsGroup:first-child {
		margin-top: 0;
	}
	.micPracticeStatsGroupOval {
		display: flex;
		align-items: center;
		min-width: 140px;
		flex: 1 1 58%;
		padding: 8px 12px;
		border: 2px solid #68c2ff;
		border-radius: 999px;
		background: rgba(104, 194, 255, 0.08);
		box-shadow: inset 0 0 0 1px rgba(104, 194, 255, 0.12);
		box-sizing: border-box;
	}
	.micPracticeStatsGroupOval .micPracticeStatsRow {
		margin: 0;
		width: 100%;
	}
	.micPracticeStatsGroupCallout {
		display: flex;
		align-items: center;
		flex: 1 1 140px;
		min-width: 120px;
		max-width: 100%;
	}
	.micPracticeStatsGroupLine {
		display: block;
		width: 16px;
		min-width: 10px;
		height: 2px;
		background: #68c2ff;
		flex-shrink: 0;
	}
	.micPracticeStatsGroupTitle {
		display: block;
		min-width: 0;
		padding: 0 2px 3px 6px;
		border-bottom: 2px solid #68c2ff;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #9fd6ff;
		line-height: 1.15;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.micPracticeStatsGroup.is-accuracy .micPracticeStatsGroupOval {
		border-color: #63d398;
		background: rgba(42, 182, 115, 0.1);
		box-shadow: inset 0 0 0 1px rgba(42, 182, 115, 0.14);
	}
	.micPracticeStatsGroup.is-accuracy .micPracticeStatsGroupLine {
		background: #63d398;
	}
	.micPracticeStatsGroup.is-accuracy .micPracticeStatsGroupTitle {
		color: #9be8bf;
		border-bottom-color: #63d398;
	}
	.micPracticeStatsGroup.is-shift .micPracticeStatsGroupOval {
		border-color: #efd56f;
		background: rgba(215, 178, 47, 0.1);
		box-shadow: inset 0 0 0 1px rgba(215, 178, 47, 0.14);
	}
	.micPracticeStatsGroup.is-shift .micPracticeStatsGroupLine {
		background: #efd56f;
	}
	.micPracticeStatsGroup.is-shift .micPracticeStatsGroupTitle {
		color: #f0e09a;
		border-bottom-color: #efd56f;
	}
	.micPracticeStatsGroup.is-review .micPracticeStatsGroupOval {
		border-color: #ef7d7d;
		background: rgba(216, 79, 79, 0.1);
		box-shadow: inset 0 0 0 1px rgba(216, 79, 79, 0.14);
	}
	.micPracticeStatsGroup.is-review .micPracticeStatsGroupLine {
		background: #ef7d7d;
	}
	.micPracticeStatsGroup.is-review .micPracticeStatsGroupTitle {
		color: #f2a3a3;
		border-bottom-color: #ef7d7d;
	}
	.micPracticeStatsGroup.is-kit .micPracticeStatsGroupOval {
		border-color: #68c2ff;
		background: rgba(104, 194, 255, 0.08);
		box-shadow: inset 0 0 0 1px rgba(104, 194, 255, 0.12);
	}
	.micPracticeStatsGroup.is-kit .micPracticeStatsGroupLine {
		background: #68c2ff;
	}
	.micPracticeStatsGroup.is-kit .micPracticeStatsGroupTitle {
		color: #9fd6ff;
		border-bottom-color: #68c2ff;
	}
	.micPracticeMetric.compact {
		padding: 4px 7px;
		gap: 4px;
		border-radius: 10px;
	}
	.micPracticeMetric.compact .micPracticeMetricLabel {
		font-size: 9px;
		letter-spacing: 0.04em;
	}
	.micPracticeMetric.compact .micPracticeMetricValue {
		font-size: 11px;
	}
	.micPracticeHistory {
		display: block;
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid rgba(183, 127, 47, 0.28);
	}
	.micPracticeHistoryTitleRow {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 6px;
	}
	.micPracticeHistoryTitle {
		display: block;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #a7bbca;
	}
	.micPracticeHistoryHeatLink {
		flex: none;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		color: #6fb4df;
	}
	.micPracticeHistoryHeatLink:hover {
		text-decoration: underline;
		color: #9ad0f0;
	}
	.micPracticeHistoryCounter {
		color: #6fb4df;
		margin-left: 6px;
	}
	.micPracticeHistoryList {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.micPracticeHistoryItem {
		display: block;
		padding: 8px 9px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.06);
	}
	.micPracticeHistoryHead {
		display: flex;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 6px;
		color: #9eb0bb;
		font-size: 10px;
		font-weight: 700;
	}
	.micPracticeHistoryTime {
		color: #f2f6f8;
	}
	.micPracticeHistoryAvg {
		color: #9eb0bb;
	}
	.micPracticeHistoryMetrics {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}
	.micPracticeHistoryDots {
		display: flex;
		gap: 5px;
		margin-top: 7px;
	}
	.micPracticeHistoryDot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.16);
	}
	.micPracticeHistoryDot.active {
		background: #68c2ff;
	}
	.playerControl.small.micPracticeEnabled {
		width: 100%;
		min-width: 320px;
		white-space: normal;
	}
	.playerControl.small.micPracticeEnabled .playerControlsRow {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		height: auto;
		row-gap: 4px;
		padding-bottom: 4px;
	}
	.playerControl.small.micPracticeEnabled .micPracticeRow {
		display: flex;
		align-items: flex-start;
		margin: 4px;
		max-width: calc(100% - 8px);
		width: calc(100% - 8px);
		white-space: normal;
		padding: 8px 10px 10px;
	}
	.playerControl.small.micPracticeEnabled .micPracticeLoopButton {
		padding-left: 8px;
		padding-right: 8px;
	}
	.playerControl.small.micPracticeEnabled .micPracticeAutoTempoButton,
	.playerControl.small.micPracticeEnabled .micPracticeAutoTempoPercentButton,
	.playerControl.small.micPracticeEnabled .micPracticeRecordButton,
	.playerControl.small.micPracticeEnabled .micPracticeMixModeButton {
		padding-left: 8px;
		padding-right: 8px;
	}
	.playerControl.small.micPracticeEnabled .micPracticeMeta {
		max-width: none;
	}
	.playerControl.small.micPracticeEnabled .micPracticeStatus,
	.playerControl.small.micPracticeEnabled .micPracticeStats {
		white-space: normal;
	}
	.drumSampleKitLabel {
		font-size: 12px;
		letter-spacing: 0.08em;
		color: #999999;
	}
	.drumSampleKitSelect {
		height: 30px;
		min-width: 110px;
		border: 1px solid #cccccc;
		border-radius: 4px;
		background: #ffffff;
		color: #444444;
	}
	button {
		cursor: pointer;
	}

	.abcr {  /* rectangles enclosing notes in ABC SVG */
		fill: transparent;
		fill-opactity: 0.25;
	}
	.abcr.highlighted {
		fill: var(--highlight-color) !important;
		fill-opacity: 0.10;
		stroke: var(--highlight-color-on-white);
		stroke-width: 2px;
	}
	.abcr.mic-hit-good {
		fill: #2ab673 !important;
		fill-opacity: 0.32;
	}
	.abcr.mic-hit-near {
		fill: #d7b22f !important;
		fill-opacity: 0.34;
	}
	.abcr.mic-hit-bad {
		fill: #d84f4f !important;
		fill-opacity: 0.32;
	}
	.abcr.mic-hit-early {
		stroke: #5cc8ff;
		stroke-width: 2px;
	}
	.abcr.mic-hit-late {
		stroke: #ffb067;
		stroke-width: 2px;
		stroke-dasharray: 6 3;
	}
	#debugDisplayArea {
		background-color: #DDD;
	}

input[type=range] {
  -webkit-appearance: none;
  background: #888888;
  border-radius: 8px;
}

/* MSIE hacks for range sliders */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	input[type=range] {
		margin-top: 0px;
		background: var(--chrome-bg-deep);
		height: 24px;
	}
}
@supports (-ms-accelerator:true) {
	input[type=range] {
		margin-top: 0px;
		background: var(--chrome-bg-deep);
		height: 24px;
	}
}

input[type=range]:before {
  /* set this color for the runnable-track left of the thumb color */
  color: #888888;
}
input[type=range]:after {
  /* set this color for the runnable-track right of the thumb color */
  color: #444444;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #444444;
  border-radius: 6px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  border: 1px solid #444444;
  height: 18px;
  width: 18px;
  border-radius: 20px;
  background: #888888;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type=range].touch::-webkit-slider-thumb {
  height: 24px;
  width: 24px;
  margin-top: -8px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #666666;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: #444444;
  border-radius: 6px;
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  border: 1px solid #444444;
  height: 18px;
  width: 18px;
  border-radius: 20px;
  background: #888888;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #888888;
  border: 0px solid #010101;
  border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
  background: #444444;
  border: 0px solid #010101;
  border-radius: 6px;
}
input[type=range]::-ms-thumb {
  border: 1px solid #444444;
  height: 16px;
  width: 16px;
  border-radius: 18px;
  background: #888888;
  cursor: pointer;
  margin-top: 0px;
}
input[type=range]:active::-moz-range-thumb {
	background: #fff;
}
input[type=range]:active::-webkit-slider-thumb {
	background: #fff;
}

@media only screen and (max-width: 900px) {
	.playerControl,
	.playerControl.large,
	.playerControl.small,
	.playerControl.small.micPracticeEnabled {
		width: 100%;
		min-width: 0;
		white-space: normal;
		box-sizing: border-box;
	}

	.playerControlsRow,
	.playerControlsRow.large,
	.playerControlsRow.small {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		flex-wrap: nowrap;
		height: auto;
		min-height: 54px;
		padding: 4px 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}

	.midiPlayImage,
	.midiExpandImage {
		width: 40px;
		height: 40px;
		min-width: 40px;
		margin: 3px;
		line-height: 40px;
	}

	.tempoAndProgress,
	.playerControl.micPracticeEnabled .tempoAndProgress {
		min-width: 0;
		width: auto;
		flex: 1 1 auto;
		-webkit-flex: 1 1 auto;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		gap: 4px 8px;
		padding-top: 2px;
	}

	.tempoLabel,
	.swingLabel,
	.metronomeVolumeLabel {
		width: auto;
		font-size: 10px;
	}

	.tempoTextField {
		width: 26px;
		font-size: 12px;
	}

	.swingOutput,
	.metronomeVolumeOutput {
		width: 30px;
		font-size: 11px;
	}

	.tempoInput,
	.swingInput,
	.metronomeVolumeInput {
		width: 56px;
		max-width: 56px;
		min-width: 48px;
	}

	.MIDIPlayTime {
		width: 86px;
		font-size: 20px;
		line-height: 34px;
		margin-left: 2px;
	}


	.drumSampleKitRow {
		flex: 0 0 auto;
		margin-left: 4px;
		padding-top: 4px;
	}

	.drumSampleKitSelect {
		max-width: 150px;
	}

	.playerControl.micPracticeEnabled .playerControlsRow,
	.playerControl.small.micPracticeEnabled .playerControlsRow {
		flex-wrap: wrap;
		overflow-x: hidden;
		row-gap: 6px;
	}

	.micPracticeRow,
	.playerControl.small.micPracticeEnabled .micPracticeRow {
		width: calc(100% - 8px);
		max-width: calc(100% - 8px);
		margin: 4px;
		padding: 8px 10px 10px;
		box-sizing: border-box;
	}

	.micPracticeMeta,
	.playerControl.small.micPracticeEnabled .micPracticeMeta {
		min-width: 0;
		flex: 1 1 220px;
	}

	.micPracticeStatus {
		white-space: normal;
	}
}

@media only screen and (max-width: 520px) {
	.playerControlsRow,
	.playerControlsRow.large,
	.playerControlsRow.small {
		padding-left: 4px;
		padding-right: 4px;
	}

	.tempoAndProgress,
	.playerControl.micPracticeEnabled .tempoAndProgress {
		min-width: 0;
		flex-basis: auto;
		-webkit-flex-basis: auto;
	}

	.MIDIPlayTime {
		display: none;
	}


	.drumSampleKitSelect {
		max-width: 128px;
	}

	.micPracticeToggle,
	.micPracticeLegendButton,
	.micPracticeLoopButton,
	.micPracticeAutoTempoButton,
	.micPracticeAutoTempoPercentButton,
	.micPracticeRecordButton,
	.micPracticeMixModeButton,
	.micPracticeKitSetupButton {
		height: 34px;
	}
	.micPracticeFlowLink {
		height: 34px;
	}
	.micPracticeToggle,
	.micPracticeLegendButton {
		width: 34px;
		min-width: 34px;
	}
}

@media print {
	/* keep at bottom so it overrides the styles above */
	body {margin:0; padding:0; border:0; background-color: transparent}
	div.newpage {page-break-before: always}
	.nonPrintable {
		display: none !important;
	}
}