: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;
	}

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

	/* there is another .svgTarget definitiion in groove_writer.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, .midiRepeatImage, .midiExpandImage {
		display: inline-block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 4px 0px 4px 0px;
		border: 0px solid #000;
		color: #cccccc;
		font-size: 20px;
		font-family: FontAwesome;
		text-align: center;
		line-height: 40px;
		vertical-align: top;
		border-radius: 50%;
		-webkit-flex: none;
		flex: none;
	}
	.midiPlayImage, .midiRepeatImage {
		background: #666666;
		margin: 4px 4px 4px 4px;

	}
	.midiPlayImage:hover, .midiRepeatImage:hover {
		color: #ffffff;
		background: #777777;
	}
	.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);
	}
	.midiPlayImage:before   {
		color: #DD4444;
	 	content: "\f05e";
	}
	.midiPlayImage.Stopped:before ,  .midiPlayImage.Paused:before   {
	 	color: #FFF;
		letter-spacing: -3px;
		content: "\f04b";
	}
	.midiPlayImage.Playing:before  {
		color: #FFF;
		content: "\f04c";
	}
	.midiExpandImage.small:before   {
	 	letter-spacing: -3px;
		content: "\f065";
	}
	.midiExpandImage.large:before   {
	 	letter-spacing: -3px;
		content: "\f066";
	}
	.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;
	}
	.MIDIProgressRow {
		display: none;
	}
	.MIDIProgressRow.large {
		display: block;
		margin-left: 60px;
		display: flex;
		display: -webkit-flex;
		flex-flow: flex-start;
		flex-wrap: nowrap;
		white-space: nowrap;
		height: 20px;
	}
	.MIDIProgressRow.small {
		display: block;
		margin-left: 8px;
		padding: 0px;
	}
	.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 .fa {
		font-size: 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;
	}
	.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 .fa {
		font-size: 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;
	}
	.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;
	}
	.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;
	}
	.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;
	}
	.micPracticeLoopButton.enabled {
		background: var(--highlight-color);
		border-color: var(--highlight-color-hover);
		color: #ffffff;
	}
	.micPracticeAutoTempoButton.enabled {
		background: #2ab673;
		border-color: #63d398;
		color: #ffffff;
	}
	.micPracticeLoopButton.unavailable,
	.micPracticeLoopButton: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);
	}
	.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);
	}
	.micPracticeHistoryTitle {
		display: block;
		margin-bottom: 6px;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #a7bbca;
	}
	.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 {
		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;
	}
	.MIDIProgress {
		width: 85%;
		height: 8px;
		font-size: 0px;
	}
	.MIDIProgress.small {
		width: 80px;
	}
	.MIDIProgress.large {
		margin-top: 3px;
	}

	#ABCSource {
		font-family: monospace;
		font-size: 14px;
	}

	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;
	}
	#GrooveDB_MetaData , #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,
	.midiRepeatImage,
	.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;
	}

	.MIDIProgressRow.large {
		margin-left: 48px;
	}

	.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;
	}

	.MIDIProgressRow.large {
		margin-left: 48px;
	}

	.drumSampleKitSelect {
		max-width: 128px;
	}

	.micPracticeToggle,
	.micPracticeLegendButton,
	.micPracticeLoopButton,
	.micPracticeAutoTempoButton,
	.micPracticeAutoTempoPercentButton {
		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}
	div.nobrk {page-break-inside: avoid}

	.nonPrintable {
		display: none !important;
	}
}