/* this is for debugging layout issues - puts a red border around everything */
	/* body * { border: 1px solid red; }		 */
	body {
		/* Use GrooveWriter instead of body for easy embedding */
		margin: 0px;
		height: 100vh;
		background-color: var(--side-bg-color, #1E2429);
	}
	#GrooveWriter {
		/* tag surrounds entire app */
		/* Use the following CSS to move the app down so a nav bar can be inserted above */
		/* width and height can also be set here to fit within a page */
		/* carefully set the height since a vertical scroll bar will be added to the right hand
		 * content when the height of the content is more than the height specified here.
		 * Usually set the height to 100vh - (the height of the top nav)
		 */
		position: relative;
		background-color: var(--side-bg-color, #1E2429);
		width: 100%;
		min-width: 800px;
		/* to embed, add your header height here.  Replace 0px with your header height */
		font: 100%/normal 'Lato', Calibri, sans-serif;

	}
	.fullWidthEle {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}
	.warnings {
		font-family: monospace;
		display: none;
	}
	p.warnings:has(+ #diverr:not(:empty)) {
		display: block;
		margin: 8px 72px 0;
		color: var(--accent-warn-color, #ffb067);
		font-weight: 700;
	}
	#diverr:not(:empty) {
		display: block;
		margin: 4px 72px 8px;
		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;
	}
	#LeftHandNav {
		width: 70px;
		height: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		border-right: 2px solid var(--chrome-border, #0F1316);
		background: var(--side-bg-color, #1E2429);
		z-index: 999;
	}
	#TopNav {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 998;
		width: calc(100% - 72px);
		margin-left: 72px;
		height: 48px;  /* total 48 */
		border-bottom: 1px solid var(--chrome-border, #0F1316);
		background: var(--header-bg-color);
		background: linear-gradient(to right, var(--header-bg-start-color), var(--header-bg-end-color));
		display: block;
		box-sizing: border-box;
	}
	.topNavMainRow {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		height: 48px;
		padding: 0 4px 0 0;
		box-sizing: border-box;
		gap: 8px;
	}
	#midiPlayer {  /* more #midiPlayer css in groove_display.css */
		background: var(--player-bg-color, #151A1E);
		width: calc(100% - 72px);
		height: auto;
		min-height: 48px;
		position: fixed;
		top: 49px;
		left: 72px;
		z-index: 999;
		border-bottom: 1px solid var(--chrome-border, #0F1316);
		overflow: visible;
	}
	#RightHandContent {
		position: relative;
		top: 98px;
		left: 72px;
		height: calc(100% - 98px);
		width: calc(100% - 72px);
		overflow-y: auto;
		background: var(--workspace-bg, #F4F6F7);
	}
	#logoTextUpperLeft {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 0 10px 0 8px;
		box-sizing: border-box;
		vertical-align: top;
		flex: 0 0 auto;
	}
	#logoTextUpperLeft img {
		display: block;
		height: 32px;
		width: auto;
		max-width: 140px;
		max-height: 36px;
		object-fit: contain;
	}
	.topNavToggleButton {
		display: none;
	}
	.bottomNavToggleButton {
		display: block;
		width: min(360px, calc(100% - 40px));
		min-height: 28px;
		margin: 12px auto 0;
		padding: 5px 10px;
		border: 1px solid rgba(255, 255, 255, 0.26);
		border-radius: 999px;
		background: rgba(0, 0, 0, 0.18);
		color: #fff;
		font: 700 12px/16px 'Lato', Calibri, sans-serif;
		text-align: center;
		cursor: pointer;
		box-sizing: border-box;
	}
	#bottomNav {
		background: var(--bottom-bg-color, #1E2429);
		text-align: center;
		color: var(--text-on-dark-muted, #9AA7B0);
		padding: 0 0 8px;
		box-sizing: border-box;
	}
	#GrooveWriter.bottomNavCollapsed #bottomButtonRow {
		display: none;
	}
	#GrooveWriter.bottomNavCollapsed #bottomNav {
		padding: 10px;
	}
	#GrooveWriter.bottomNavCollapsed .bottomNavToggleButton {
		margin: 0 auto;
	}
	#upperLeft  {
		margin-top: 0;
		display: inline-flex;
		display: -webkit-inline-flex;
		align-items: center;
		white-space: nowrap;
		vertical-align: middle;
		flex: 1 1 auto;
		min-width: 0;
	}
	#aiGroovePanel {
		box-sizing: border-box;
		padding: 18px 20px 16px;
		background: linear-gradient(135deg, #E8F5F2, #D2EBE5);
		border-bottom: 1px solid #9BC9C1;
	}
	#aiGroovePanelHeader {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px 16px;
		width: 100%;
		margin-bottom: 10px;
		box-sizing: border-box;
	}
	#aiGroovePanelHeaderMain {
		flex: 1 1 220px;
		min-width: 0;
	}
	.aiGrooveBackToEditor {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		height: 36px;
		padding: 0 14px;
		border: 1px solid #2F7F76;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.95);
		color: #2F7F76;
		font-weight: 700;
		font-size: 13px;
		text-decoration: none;
		white-space: nowrap;
		transition: transform .12s ease-in-out, background .12s ease-in-out, color .12s ease-in-out;
	}
	.aiGrooveBackToEditor:hover {
		transform: translateY(-1px);
		background: #2F7F76;
		color: #fff;
	}
	#aiGrooveSelectionBar {
		margin-bottom: 12px;
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.22);
		border-radius: 12px;
		background: rgba(244, 251, 249, 0.9);
	}
	.aiGrooveSectionLabel {
		margin-bottom: 8px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	#aiGrooveSelectionChips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.aiGrooveSelectionChip {
		display: inline-flex;
		align-items: center;
		padding: 5px 10px;
		border-radius: 999px;
		background: rgba(210, 235, 229, 0.95);
		border: 1px solid rgba(61, 155, 143, 0.24);
		color: #1E5F57;
		font-size: 12px;
		font-weight: 700;
	}
	#aiGroovePrimaryOptions {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 10px;
		margin-bottom: 12px;
	}
	#aiGroovePrimaryActions {
		display: flex;
		gap: 10px;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 12px;
	}
	.aiGrooveMoreParams {
		margin-bottom: 12px;
		border: 1px solid rgba(61, 155, 143, 0.22);
		border-radius: 14px;
		background: rgba(244, 251, 249, 0.88);
		overflow: hidden;
	}
	.aiGrooveMoreParams > summary {
		list-style: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 14px;
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #1E5F57;
		user-select: none;
	}
	.aiGrooveMoreParams > summary::-webkit-details-marker {
		display: none;
	}
	.aiGrooveMoreParams > summary::before {
		content: "▸";
		display: inline-block;
		margin-right: 8px;
		color: #3D9B8F;
		transition: transform .12s ease-in-out;
	}
	.aiGrooveMoreParams[open] > summary::before {
		transform: rotate(90deg);
	}
	#aiGrooveMoreParamsLabel {
		flex: 1 1 auto;
	}
	#aiGrooveMoreParamsMeta {
		flex: 0 1 auto;
		max-width: 55%;
		padding: 4px 10px;
		border-radius: 999px;
		background: rgba(210, 235, 229, 0.95);
		border: 1px solid rgba(61, 155, 143, 0.24);
		color: #2F7F76;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: normal;
		text-transform: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#aiGrooveMoreParamsMeta:empty {
		display: none;
	}
	#aiGrooveMoreParamsBody {
		padding: 0 12px 12px;
		border-top: 1px solid rgba(61, 155, 143, 0.14);
	}
	#aiGrooveOptions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 12px 0 10px;
	}
	.aiGrooveOptionGroup {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		min-width: 0;
		gap: 0;
	}
	.aiGrooveOptionGroupOval {
		display: flex;
		align-items: stretch;
		min-width: 180px;
		flex: 1 1 62%;
		padding: 10px 12px;
		border: 2px solid #3D9B8F;
		border-radius: 28px;
		background: rgba(61, 155, 143, 0.08);
		box-shadow: inset 0 0 0 1px rgba(61, 155, 143, 0.12);
		box-sizing: border-box;
	}
	.aiGrooveOptionGroupFields {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		gap: 10px;
		width: 100%;
		min-width: 0;
	}
	.aiGrooveOptionGroupCallout {
		display: flex;
		align-items: center;
		flex: 1 1 120px;
		min-width: 110px;
		max-width: 100%;
	}
	.aiGrooveOptionGroupLine {
		display: block;
		width: 16px;
		min-width: 10px;
		height: 2px;
		background: #3D9B8F;
		flex-shrink: 0;
	}
	.aiGrooveOptionGroupTitle {
		display: block;
		min-width: 0;
		padding: 0 2px 3px 6px;
		border-bottom: 2px solid #3D9B8F;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #1E5F57;
		line-height: 1.15;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.aiGrooveOptionGroup.is-structure .aiGrooveOptionGroupOval {
		border-color: #3D9B8F;
		background: rgba(61, 155, 143, 0.08);
		box-shadow: inset 0 0 0 1px rgba(61, 155, 143, 0.12);
	}
	.aiGrooveOptionGroup.is-structure .aiGrooveOptionGroupLine {
		background: #3D9B8F;
	}
	.aiGrooveOptionGroup.is-structure .aiGrooveOptionGroupTitle {
		color: #1E5F57;
		border-bottom-color: #3D9B8F;
	}
	.aiGrooveOptionGroup.is-type .aiGrooveOptionGroupOval {
		border-color: #4F8FD9;
		background: rgba(79, 143, 217, 0.08);
		box-shadow: inset 0 0 0 1px rgba(79, 143, 217, 0.14);
	}
	.aiGrooveOptionGroup.is-type .aiGrooveOptionGroupLine {
		background: #4F8FD9;
	}
	.aiGrooveOptionGroup.is-type .aiGrooveOptionGroupTitle {
		color: #2A5F9E;
		border-bottom-color: #4F8FD9;
	}
	.aiGrooveOptionGroup.is-practice .aiGrooveOptionGroupOval {
		border-color: #3FAE74;
		background: rgba(42, 182, 115, 0.08);
		box-shadow: inset 0 0 0 1px rgba(42, 182, 115, 0.14);
	}
	.aiGrooveOptionGroup.is-practice .aiGrooveOptionGroupLine {
		background: #3FAE74;
	}
	.aiGrooveOptionGroup.is-practice .aiGrooveOptionGroupTitle {
		color: #1F7A4D;
		border-bottom-color: #3FAE74;
	}
	.aiGrooveOptionGroup.is-style .aiGrooveOptionGroupOval {
		border-color: #D4A93A;
		background: rgba(215, 178, 47, 0.1);
		box-shadow: inset 0 0 0 1px rgba(215, 178, 47, 0.14);
	}
	.aiGrooveOptionGroup.is-style .aiGrooveOptionGroupLine {
		background: #D4A93A;
	}
	.aiGrooveOptionGroup.is-style .aiGrooveOptionGroupTitle {
		color: #8A6A12;
		border-bottom-color: #D4A93A;
	}
	.aiGrooveOptionGroup.is-kit .aiGrooveOptionGroupOval {
		border-color: #68A8D8;
		background: rgba(104, 194, 255, 0.1);
		box-shadow: inset 0 0 0 1px rgba(104, 194, 255, 0.16);
	}
	.aiGrooveOptionGroup.is-kit .aiGrooveOptionGroupLine {
		background: #68A8D8;
	}
	.aiGrooveOptionGroup.is-kit .aiGrooveOptionGroupTitle {
		color: #2F6F9A;
		border-bottom-color: #68A8D8;
	}
	.aiGrooveOption {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
		padding: 8px 10px;
		border: 1px solid rgba(255, 255, 255, 0.55);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.72);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	.aiGrooveOptionHidden {
		display: none;
	}
	.aiGrooveOptionLocked {
		opacity: 0.62;
		background: rgba(245, 248, 247, 0.92);
	}
	.aiGrooveOption select,
	.aiGrooveOption input[type="number"] {
		height: 40px;
		padding: 0 12px;
		font-size: 14px;
		font-weight: 600;
		border: 1px solid #9BC9C1;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.95);
		color: #1E5F57;
	}
	.aiGrooveOption select:focus,
	.aiGrooveOption input[type="number"]:focus {
		outline: none;
		border-color: #3D9B8F;
		box-shadow: 0 0 0 2px rgba(61, 155, 143, 0.18);
	}
	.aiGrooveOptionLocked select:disabled,
	.aiGrooveOptionLocked input:disabled {
		cursor: not-allowed;
		color: #5a7f78;
		background: rgba(245, 248, 247, 0.95);
	}
	.aiGroovePresetsLocked {
		opacity: 0.55;
		pointer-events: none;
	}
	.aiGrooveOptionHint {
		font-size: 11px;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: normal;
		text-transform: none;
		color: #3D7A72;
	}
	#aiGroovePanelTitle {
		font-size: 20px;
		font-weight: 700;
		color: #1E5F57;
	}
	#aiGroovePanelHint {
		margin-top: 4px;
		font-size: 13px;
		color: #2F7F76;
	}
	#aiGrooveControls {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	#aiGroovePrompt {
		flex: 1 1 480px;
		min-width: 260px;
		height: 42px;
		padding: 0 14px;
		font-size: 14px;
		border: 1px solid #9BC9C1;
		border-radius: 10px;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.95);
	}
	#aiGroovePrompt[hidden],
	#aiGroovePromptActions[hidden],
	.aiGroovePromptHidden {
		display: none !important;
	}
	#aiGroovePromptActions {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		flex: 1 1 100%;
	}
	.aiGrooveActionChip {
		height: 32px;
		padding: 0 12px;
		border: 1px solid rgba(117, 142, 0, 0.28);
		border-radius: 999px;
		background: rgba(220, 239, 234, 0.92);
		color: #2F7F76;
		font-size: 12px;
		font-weight: 800;
		cursor: pointer;
		transition: transform .12s ease-in-out, background-color .12s ease-in-out;
	}
	.aiGrooveActionChip:hover {
		transform: translateY(-1px);
		background: #DCEFEA;
	}
	.aiGrooveActionChip:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGrooveQuickPresets {
		display: grid;
		gap: 10px;
		flex: 1 1 100%;
	}
	.aiGroovePresetGroup {
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.18);
		border-radius: 12px;
		background: rgba(236, 247, 244, 0.85);
	}
	.aiGroovePresetGroupTitle {
		margin-bottom: 8px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	.aiGroovePresetGroupRow {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	.aiGroovePresetButton {
		height: 34px;
		padding: 0 12px;
		border: 1px solid #9BC9C1;
		border-radius: 999px;
		background: rgba(232, 245, 242, 0.95);
		color: #2F7F76;
		font-size: 12px;
		font-weight: 700;
		cursor: pointer;
		transition: transform .12s ease-in-out, background-color .12s ease-in-out;
	}
	.aiGroovePresetButton:hover {
		transform: translateY(-1px);
		background: #D7EBE5;
	}
	.aiGroovePresetButton:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGroovePrompt:focus {
		outline: none;
		border-color: #3D9B8F;
		box-shadow: 0 0 0 2px rgba(61, 155, 143, 0.18);
	}
	#aiGrooveGenerateButton {
		height: 42px;
		padding: 0 18px;
		border: 0;
		border-radius: 10px;
		background: linear-gradient(135deg, #2F7F76, #3D9B8F);
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		cursor: pointer;
		transition: transform .12s ease-in-out, opacity .12s ease-in-out;
	}
	#aiGrooveResetButton {
		height: 42px;
		padding: 0 18px;
		border: 1px solid #9BC9C1;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.95);
		color: #2F7F76;
		font-weight: 700;
		font-size: 14px;
		cursor: pointer;
		transition: transform .12s ease-in-out, opacity .12s ease-in-out;
	}
	#aiGrooveGenerateButton:hover {
		transform: translateY(-1px);
	}
	#aiGrooveResetButton:hover {
		transform: translateY(-1px);
	}
	#aiGrooveGenerateButton:disabled {
		opacity: 0.65;
		cursor: wait;
		transform: none;
	}
	#aiGrooveResetButton:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGrooveHistoryBar {
		display: block;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid rgba(61, 155, 143, 0.22);
	}
	#aiGrooveHistoryMeta {
		font-size: 12px;
		font-weight: 700;
		color: #2F7F76;
		margin-bottom: 10px;
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.18);
		border-radius: 12px;
		background: rgba(244, 246, 247, 0.92);
	}
	#aiGrooveHistoryList {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 8px;
		margin-bottom: 10px;
	}
	.aiGrooveHistoryItem {
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.28);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.92);
		color: #243038;
		cursor: pointer;
		transition: transform .12s ease-in-out, border-color .12s ease-in-out, box-shadow .12s ease-in-out;
	}
	.aiGrooveHistoryItem:hover {
		transform: translateY(-1px);
		border-color: #3D9B8F;
	}
	.aiGrooveHistoryItem.active {
		border-color: #2F7F76;
		box-shadow: 0 0 0 2px rgba(61, 155, 143, 0.18);
		background: rgba(61, 155, 143, 0.08);
	}
	.aiGrooveHistoryItem.active .aiGrooveHistoryTitle {
		color: #2F7F76;
	}
	.aiGrooveHistoryItem.accepted {
		border-color: #6c8a00;
	}
	.aiGrooveHistoryTitle {
		font-size: 12px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin-bottom: 6px;
	}
	.aiGrooveHistorySummary,
	.aiGrooveHistoryTemplate {
		font-size: 12px;
		line-height: 1.4;
	}
	.aiGrooveHistoryTemplate {
		margin-top: 4px;
		color: #5a6a73;
	}
	.aiGrooveHistoryTomHints {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 8px;
	}
	.aiGrooveTomHintBadge {
		display: inline-flex;
		align-items: center;
		padding: 3px 8px;
		border-radius: 999px;
		background: rgba(122, 147, 0, 0.14);
		border: 1px solid rgba(122, 147, 0, 0.28);
		color: #4c6500;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}
	#aiGrooveHistoryControls {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	#aiGrooveAcceptButton,
	#aiGrooveRegenerateButton,
	#aiGrooveCoachButton {
		height: 34px;
		padding: 0 14px;
		border-radius: 10px;
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
		transition: transform .12s ease-in-out, opacity .12s ease-in-out;
	}
	#aiGrooveAcceptButton {
		border: 0;
		background: linear-gradient(135deg, #7a9300, #96b300);
		color: #fff;
	}
	#aiGrooveRegenerateButton,
	#aiGrooveCoachButton {
		border: 1px solid #c98f35;
		background: rgba(255, 251, 243, 0.96);
		color: #2F7F76;
	}
	#aiGrooveAcceptButton:hover {
		transform: translateY(-1px);
	}
	#aiGrooveRegenerateButton:hover,
	#aiGrooveCoachButton:hover {
		transform: translateY(-1px);
	}
	#aiGrooveAcceptButton:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGrooveRegenerateButton:disabled,
	#aiGrooveCoachButton:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	.aiGrooveCoachCard {
		margin-top: 10px;
		padding: 12px 14px;
		border-radius: 12px;
		border: 1px solid rgba(61, 155, 143, 0.22);
		background: linear-gradient(180deg, rgba(236, 247, 244, 0.95), rgba(244, 251, 249, 0.92));
	}
	#aiGrooveCoachHeader {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 8px;
	}
	#aiGrooveCoachTitle {
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	#aiGrooveCoachMeta {
		font-size: 12px;
		font-weight: 700;
		color: #3D7A72;
	}
	#aiGrooveCoachSummary {
		margin-bottom: 12px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.45;
		color: #1E5F57;
	}
	.aiGrooveCoachSection {
		margin-top: 10px;
	}
	.aiGrooveCoachSectionTitle {
		margin-bottom: 6px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	#aiGrooveCoachListenFor,
	#aiGrooveCoachMistakes,
	#aiGrooveCoachTips,
	#aiGrooveCoachPlanSteps {
		margin: 0;
		padding-left: 18px;
		color: #1E5F57;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.45;
	}
	#aiGrooveCoachPlanMeta {
		margin-bottom: 6px;
		font-size: 13px;
		font-weight: 700;
		color: #216b10;
	}
	.aiGrooveCoachCard.loading {
		opacity: 0.72;
	}
	#aiGrooveStatusCard {
		margin-top: 10px;
		padding: 10px 12px;
		border-radius: 12px;
		background: rgba(255, 251, 243, 0.9);
		border: 1px solid rgba(61, 155, 143, 0.18);
	}
	#aiGrooveStatusLabel {
		margin-bottom: 6px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	#aiGrooveStatus {
		min-height: 18px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.5;
		color: #1E5F57;
	}
	#aiGrooveStatusCard.error #aiGrooveStatus {
		color: #9e1d00;
	}
	#aiGrooveStatusCard.success #aiGrooveStatus {
		color: #216b10;
	}
	#aiGrooveDebugPanel {
		display: none;
		margin-top: 10px;
		padding: 10px 12px;
		border: 1px solid rgba(120, 78, 18, 0.25);
		border-radius: 10px;
		background: rgba(255, 251, 243, 0.82);
		color: #1E5F57;
	}
	#aiGrooveDebugPanel.aiGrooveDebugVisible {
		display: block;
	}
	#aiGrooveDebugPanel summary {
		cursor: pointer;
		font-size: 12px;
		font-weight: 700;
		color: #2F7F76;
	}
	#aiGrooveDebugContent {
		margin: 8px 0 0;
		max-height: 240px;
		overflow: auto;
		white-space: pre-wrap;
		word-break: break-word;
		font-size: 12px;
		line-height: 1.45;
		color: #5d3a0b;
	}
	@media only screen and (max-width: 900px) {
		#aiGroovePanel {
			padding: 14px;
		}
		#aiGrooveControls {
			display: block;
		}
		#aiGroovePrimaryActions {
			display: flex;
			flex-direction: column;
			align-items: stretch;
		}
		#aiGroovePrimaryOptions {
			grid-template-columns: 1fr;
		}
		#aiGrooveMoreParamsMeta {
			max-width: 48%;
		}
		#aiGrooveSelectionBar {
			padding: 10px;
		}
		#aiGrooveOptions {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}
		.aiGrooveOptionGroup {
			flex-direction: column;
			align-items: stretch;
		}
		.aiGrooveOptionGroupOval {
			flex: 1 1 auto;
			border-radius: 20px;
			width: 100%;
		}
		.aiGrooveOptionGroupCallout {
			order: -1;
			margin: 0 0 4px 4px;
			flex: 0 0 auto;
		}
		.aiGrooveOptionGroupLine {
			display: none;
		}
		.aiGrooveOptionGroupFields {
			grid-template-columns: 1fr;
		}
		.aiGrooveOption {
			width: 100%;
			margin-bottom: 0;
		}
		.aiGrooveOption select,
		.aiGrooveOption input[type="number"] {
			width: 100%;
		}
		#aiGroovePrompt {
			width: 100%;
			margin-bottom: 10px;
		}
		#aiGrooveQuickPresets {
			margin-bottom: 10px;
		}
		.aiGroovePresetGroup {
			padding: 10px;
		}
		#aiGrooveHistoryBar {
			display: block;
		}
		#aiGrooveHistoryMeta {
			margin-bottom: 10px;
		}
		#aiGrooveHistoryList {
			grid-template-columns: 1fr;
		}
		#aiGrooveHistoryControls {
			display: grid;
			grid-template-columns: 1fr;
		}
		#aiGrooveGenerateButton {
			width: 100%;
		}
		#aiGrooveResetButton {
			width: 100%;
			margin-top: 10px;
		}
		#aiGrooveAcceptButton {
			width: 100%;
		}
		#aiGrooveRegenerateButton {
			width: 100%;
			margin-top: 10px;
		}
		#aiGrooveDebugContent {
			max-height: 180px;
		}
	}
	#upperRight {
		margin-top: 0;
		display: inline-flex;
		display: -webkit-inline-flex;
		align-items: center;
		float: none;
		margin-right: 10px;
		margin-left: auto;
		white-space: nowrap;
		vertical-align: middle;
		flex: 0 0 auto;
		gap: 4px;
	}
	.rightButtonsPrimary {
		font-weight: 700;
		padding: 4px 10px;
		background: rgba(61, 155, 143, 0.22);
		border: 1px solid rgba(61, 155, 143, 0.45);
	}
	.rightButtonsExport {
		font-weight: 700;
		padding: 4px 10px;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.18);
	}
	.rightButtonsExport:hover {
		border-color: rgba(61, 155, 143, 0.55);
		color: #FFF;
	}
	#topMoreAnchor {
		padding: 4px 10px;
		background: rgba(255, 255, 255, 0.08);
	}
	#GrooveWriter:has(#permutationAnchor.buttonSelected) #topMoreAnchor {
		font-weight: 700;
		color: #FFF;
		background: rgba(61, 155, 143, 0.28);
	}
	#topMoreContextMenu {
		width: 220px;
	}
	#topMoreContextMenu .topMoreMenuItem {
		cursor: pointer;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		gap: 8px;
	}
	#topMoreContextMenu .topMoreMenuLink {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		gap: 8px;
		color: inherit;
		text-decoration: none;
		width: 100%;
	}
	#topMoreContextMenu #permutationAnchor {
		color: #8A9399;
	}
	#topMoreContextMenu #permutationAnchor.enabled {
		color: #1E2429;
	}
	#topMoreContextMenu #permutationAnchor.buttonSelected {
		font-weight: 700;
		background: var(--menu-hover, #D9E2E6);
	}
	.bottomMorePanel {
		display: none;
		position: fixed;
		z-index: 1001;
		padding: 12px;
		border-radius: 12px;
		background: var(--bottom-bg-color, #1E2429);
		border: 1px solid rgba(255, 255, 255, 0.14);
		color: var(--text-on-dark-muted, #9AA7B0);
		box-sizing: border-box;
	}
	.bottomMorePanelGrid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.bottomMorePanel .pageBottomButton {
		margin: 0;
		padding: 10px 8px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.04);
		box-sizing: border-box;
		text-align: center;
	}
	#gridZoomBar.gridZoomBar {
		display: none !important;
		align-items: center;
		gap: 8px;
		padding: 8px 12px 0;
		box-sizing: border-box;
	}
	#gridZoomBar.gridZoomBar.is-mobile-visible {
		display: flex !important;
		display: -webkit-flex !important;
	}
	.gridZoomLabel {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #5A656C;
	}
	.gridZoomButton {
		min-width: 36px;
		min-height: 36px;
		padding: 0;
		border: 1px solid #C5CED3;
		border-radius: 8px;
		background: #FFF;
		color: #1E2429;
		font: 700 18px/1 'Lato', Calibri, sans-serif;
		cursor: pointer;
	}
	.gridZoomButton:disabled {
		opacity: 0.4;
		cursor: default;
	}
	#musicalInput {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#divisionButtonContainer {

	}
	#metronomeContainer {
	}
	#metronomeLabel {
		display: inline-block;
		height: 20px;
		font-weight: 500;
		margin: 0px 5px 0px 10px;
		text-align: center;
		color: var(--text-on-dark, #E8EEF1);
	}
	.metronomeButton, .rightButtons {
		padding: 2px;
		cursor: pointer;
		display: inline-block;
		color: var(--text-on-dark, #E8EEF1);
		border: 0px solid #00B;
		text-align: center;
		border-radius: 20px;
		margin: 0px 1px;
		height: 20px;
		transition: all .1s ease-in-out;
	}
	.rightButtons {
		margin: 0px 6px;
	}
	.metronomeButton:hover, .rightButtons:hover, .metronomeButton.selected:hover, .rightButtons.selected:hover, .rightButtons.buttonSelected:hover {
		font-weight: 700;
		transform: scale(1.05);
	}
	.metronomeButton.options {
		width: 75px;
	}
	.metronomeButton.buttonSelected, .metronomeButton.selected, .rightButtons.buttonSelected {  /* is a button and is selected */
		color: #FFF;
		font-weight: 700;
	}

	#logoInSubdivision {
		background-color: var(--chrome-bg-deep, #151A1E);
		width: 100%;
		height: 48px;
		padding: 4px;
		box-sizing: border-box;
		overflow: hidden;
	}
	#logoInSubdivision img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		object-position: center;
	}
	.left-button {
		display: block;
		color: var(--text-on-dark-muted, #9AA7B0);
		cursor: pointer;
	}
	.left-button-content {
		display: block;
		cursor: pointer;
		font-size: 12px;
		font-weight: bold;
		height: 48px;
		border-bottom: 1px solid var(--chrome-border, #0F1316);
		text-align: center;
		vertical-align: middle;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		transition: all .1s ease-in-out;
	}
	#timeLabel {
		height: 48px;  /* Override from above */
	}
	#timeSigLabel {
		color: var(--success-color, #3FAE78);
		font-size: 20px;
		margin-bottom: -5px;
	}
	#timeSubLabel {
		color: var(--success-color, #3FAE78);
		font-size: 12px;
	}
	.left-button.disabled, .left-button.disabled:hover {
		color: var(--chrome-border, #0F1316);
		background-color: var(--side-bg-color, #1E2429);
	}
	.left-button.buttonSelected, .left-button.buttonSelected:hover {  /* is subdivision and is selected */
		background: var(--highlight-color, #3D9B8F);
		color: #FFF;
		cursor: auto;
		transform: scale(1.1);
	}
	.left-button:hover {
	   border-top-color: var(--highlight-color-on-white, #2F7F76);
	   background: #2A333A;
	   color: var(--text-on-dark, #E8EEF1);
	   transform: scale(1.05);
	 }
	.left-button:active  {
	   border-top-color: var(--highlight-color-on-white, #2F7F76);
	   background: #172026;
    }
	.buttonFraction {  /* The number above "triplet" in the .subdivision 1/4, 1/8, etc */
		display: block;
		font-size: 18px;
	}
	#advancedEditAnchor.buttonSelected {
		background: var(--highlight-color-hover, #4FB3A5);
		color: #FFF;
		font-size: 14px;
	}
	#undoButton,
	#redoButton {
		display: none;
		font-size: 14px;
		color: #FFF;
	}
	#undoButton.is-available,
	#redoButton.is-available {
		display: block;
	}
	#undoButton {
		background: var(--danger-color, #D96B6B);
	}
	#undoButton:hover {
		background: #E58585;
		color: #FFF;
	}
	#redoButton {
		background: var(--success-color, #3FAE78);
	}
	#redoButton:hover {
		background: #55C48C;
		color: #FFF;
	}
	#KeyButton {
		font-size: 14px;
		text-align: right;
		align-self: center;
		margin-left: auto;
		float: none;
		padding-right: 0;
	}
	.hiddenCheckbox {
		/* checkbox for the key (legend) */
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
	#LegendLabel {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		border: 1px solid #999;
		padding: 4px 10px;
		border-radius: 8px;
		background: #EEE;
		color: #333;
		margin-right: 8px;
		cursor: pointer;
		font-weight: 700;
		line-height: 1.2;
		user-select: none;
		-webkit-user-select: none;
	}
	#LegendLabel:hover {
		border-color: #777;
		background: #E4E4E4;
	}
	#showLegend:focus + #LegendLabel {
		outline: 2px solid var(--highlight-color);
		outline-offset: 2px;
	}
	#showLegend:checked + #LegendLabel {
		background: var(--highlight-color);
		border-color: var(--highlight-color);
		color: #FFF;
	}
	.legendLabelText {
		font-family: Lato, sans-serif;
		font-size: 13px;
		letter-spacing: 0.02em;
	}
	.seoIntro {
		box-sizing: border-box;
		clear: both;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 22px 20px 28px;
		border-top: 1px solid var(--chrome-border, #0F1316);
		background: var(--bottom-bg-color, #1E2429);
		color: var(--text-on-dark-muted, #9AA7B0);
		font-family: Lato, "Segoe UI", sans-serif;
		font-size: 0.82rem;
		line-height: 1.55;
		text-align: center;
	}
	.seoIntro h1 {
		margin: 0 0 8px;
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--text-on-dark, #E8EEF1);
		line-height: 1.35;
	}
	.seoIntro > p {
		margin: 0 auto 10px;
		max-width: 42em;
		color: var(--text-on-dark-muted, #9AA7B0);
	}
	.seoIntroLinks {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 14px;
		margin: 14px 0 0;
	}
	.seoIntroLinks a,
	.seoIntro a {
		color: var(--highlight-color-hover, #4FB3A5);
		text-decoration: none;
		border-bottom: 1px solid transparent;
		transition: color 0.15s ease, border-color 0.15s ease;
	}
	.seoIntroLinks a:hover,
	.seoIntro a:hover {
		color: var(--text-on-dark, #E8EEF1);
		border-bottom-color: rgba(79, 179, 165, 0.55);
	}
	.seoIntroInstall {
		margin: 16px 0 0;
	}
	.pwaInstallButton {
		appearance: none;
		-webkit-appearance: none;
		display: inline-block;
		margin: 0;
		padding: 8px 16px;
		border: 1px solid rgba(79, 179, 165, 0.55);
		border-radius: 4px;
		background: transparent;
		color: var(--highlight-color-hover, #4FB3A5);
		font-family: inherit;
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		line-height: 1.3;
		cursor: pointer;
		transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	}
	.pwaInstallButton:hover,
	.pwaInstallButton:focus-visible {
		color: var(--text-on-dark, #E8EEF1);
		background: rgba(79, 179, 165, 0.14);
		border-color: rgba(79, 179, 165, 0.85);
		outline: none;
	}
	.pwaInstallHint {
		margin: 8px auto 0;
		max-width: 28em;
		color: var(--text-on-dark-muted, #9AA7B0);
		font-size: 0.76rem;
		line-height: 1.45;
	}
	.seoIntroMore {
		margin: 14px auto 0;
		max-width: 42em;
		text-align: left;
	}
	.seoIntroMore summary {
		cursor: pointer;
		list-style: none;
		display: inline-block;
		color: var(--text-on-dark-muted, #9AA7B0);
		font-size: 0.78rem;
		user-select: none;
	}
	.seoIntroMore summary::-webkit-details-marker {
		display: none;
	}
	.seoIntroMore summary::after {
		content: " ▾";
		opacity: 0.6;
	}
	.seoIntroMore[open] summary::after {
		content: " ▴";
	}
	.seoIntroMore summary:hover {
		color: var(--text-on-dark, #E8EEF1);
	}
	.seoIntroMore p {
		margin: 10px 0 0;
		color: var(--text-on-dark-muted, #9AA7B0);
		font-size: 0.8rem;
	}
	#musicalInput {
		width: 100%;
		background: var(--surface-white, #FFFFFF);
		overflow-x: hidden;
		overflow-y: visible;
		border-bottom: 1px solid #C5CCD1;
		text-align: center;
		white-space: normal;
		box-sizing: border-box;
	}
	#musicalInput.expanded {
		max-width: 100% !important;
	}
	#measureContainer {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 14px 0;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 4px 0 12px;
		white-space: normal;
		box-sizing: border-box;
	}
	#measureContainer.multi-row-layout {
		row-gap: 16px;
	}
	.staff-container {
		--line-label-width: 80px;
		margin-right: 0;
		margin-bottom: 2px;
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 0 1 auto;
		max-width: 100%;
		background: #FFFFFF;
		text-align: left;
		white-space: nowrap;
	}
	.staff-fit-wrap {
		display: inline-block;
		vertical-align: top;
		flex: 0 0 auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	#measureContainer.multi-row-layout .staff-container {
		margin-bottom: 6px;
	}
	#measureContainer.wide-single-measure {
		justify-content: flex-start;
	}
	#measureContainer.wide-single-measure .staff-container {
		transform: scale(0.9);
		transform-origin: top center;
		margin-bottom: -22px;
	}
	.notes-row-container {
		display: inline-block;
		max-width: 100%;
	}
	.line-labels {
		display: inline-block;
		vertical-align: top;
		width: var(--line-label-width);
		font-size: 20px;
		display: table-cell;
	}
	.stickings-row-container {
		display: block;
		margin-left: var(--line-label-width);
	}
	.stickings-row-container .line-labels {
		display: none;
	}
	.stickings-row-container .music-line-container {
		display: block;
	}
	.stickings-label {
		display: none;
		height: 25px;
		background: #f7f1cf;
		color: #000;
		padding-top: 9px;
		padding-left: 1px;
		font-size: 12px;
		cursor: pointer;
		text-align: center;
	}
	.hh-label {
		display: block;
		white-space:nowrap;
		margin-top: 16px;
		margin-left: 8px;
		cursor: pointer;
		text-align: center;
	}
	.tom-label {
		display: block;
		white-space:nowrap;
		margin-top: 5px;
		margin-left: 8px;
		cursor: pointer;
		text-align: center;
		visibility: hidden;
	}
	.snare-label {
		margin-top: 5px;
		margin-left: 8px;
		cursor: pointer;
		text-align: center;
	}
	.kick-label {
		margin-top: 5px;
		margin-left: 8px;
		cursor: pointer;
		text-align: center;
	}
	.stickings-label:hover {
		color: var(--highlight-color);
	}
	.hh-label:hover, .snare-label:hover, .kick-label:hover {
		color: var(--highlight-color);
	}
	.music-line-container {
		display: inline-block;
		z-index: 3;
		display: table-cell;
	}
	.notes-container {
		font-family:  Times New Roman;  /* parens around snare ghost note, R for Ride */
		position: relative;
		z-index: 4;
	}
	.stickings-container {
		display: none;
		height: 32px;
		background: #f7f1cf;
		border: 1px solid transparent;
		margin-top: 0px;
		white-space:nowrap;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.background-highlight-container {
		position: absolute;
		height: 190px;
		white-space:nowrap;
		border: 1px solid transparent;
	}
	.hi-hat-container {
		height: 42px;
		white-space:nowrap;
		border: 1px solid transparent;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.toms-container {
		height: 28px;
		white-space:nowrap;
		border: 1px solid transparent;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		visibility: hidden;
	}
	.snare-container {
		border: 1px solid transparent;
		height: 28px;
		white-space:nowrap;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.kick-container {
		border: 1px solid transparent;
		height: 56px;
		white-space:nowrap;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.staff-line-1{
		position: absolute; top: 42px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-2{
		position: absolute; top: 72px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-3{
		position: absolute; top: 103px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-4{
		position: absolute; top: 132px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-5{
		position: absolute; top: 163px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-6{
		position: absolute; top: 192px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	/* Default grid is hi-hat / snare / kick. Hide tom rows and their staff
	 * lines until the user turns toms on. */
	#musicalInput:not(.toms-visible) .toms-container,
	#musicalInput:not(.toms-visible) .tom-label {
		display: none;
	}
	#musicalInput:not(.toms-visible) .staff-line-2,
	#musicalInput:not(.toms-visible) .staff-line-3,
	#musicalInput:not(.toms-visible) .staff-line-5,
	#musicalInput:not(.toms-visible) .staff-line-6 {
		display: none;
	}
	#musicalInput:not(.toms-visible) .staff-line-4 {
		top: 72px;
	}
	#musicalInput:not(.toms-visible) .background-highlight-container {
		height: 126px;
	}
	#musicalInput:not(.toms-visible) .bg-highlight {
		height: 128px;
	}
	#musicalInput.toms-visible .toms-container,
	#musicalInput.toms-visible .tom-label {
		visibility: visible;
	}
	.sticking {
		display: inline-block;
		position: relative;
		border: 1px solid;
		border-color: transparent;
		width: 29px;
		height: 100%;
		margin-right: 2px;
		margin-left: 2px;
		margin-bottom: 0;
	}
	.bg-highlight {
		display: inline-block;
		/* Must match .hi-hat/.snare outer box (width + margins + transparent border)
		 * or the playhead drifts left and the last cell never lines up on mobile. */
		width: 29px;
		height: 192px;
		margin-left: 2px;
		margin-right: 2px;
		border: 1px solid transparent;
		box-sizing: content-box;
	}
	.hi-hat {
		display: inline-block;
		position: relative;
		border: 1px solid;
		border-color: transparent;
		width: 29px;
		height: 100%;
		margin-right: 2px;
		margin-left: 2px;
	}
	.tom {
		display: inline-block;
		position: relative;
		border: 1px solid;
		border-color: transparent;
		width: 29px;
		height: 100%;
		margin-right: 2px;
		margin-left: 2px;
	}
	.snare {
		display: inline-block;
		position: relative;
		border: 1px solid;
		border-color: transparent;
		width: 29px;
		height: 100%;
		margin-right: 2px;
		margin-left: 2px;
	}
	.kick {
		display: inline-block;
		position: relative;
		border: 1px solid;
		border-color: transparent;
		width: 29px;
		height: 100%;
		margin-right: 2px;
		margin-left: 2px;
	}
	.note_part {  /* all the following note segments also share class .note_part */
	}
	.sticking_right {
		position: absolute; top: 0px; left: 6px;
		font-size: 24px;
		color: #CCCCCC;
		cursor: pointer;
	}
	.sticking_left {
		position: absolute; top: 0px; left: 6px;
		font-size: 24px;
		color: #CCCCCC;
		cursor: pointer;
	}
	.sticking_both {
		position: absolute; top: 5px; left: 0px;
		font-size: 18px;
		color: transparent;
		cursor: pointer;
	}
	.sticking_count {
		position: absolute; top: 0px; left: 6px;
		font-size: 24px;
		color: transparent;
		cursor: pointer;
	}
	.hh_crash {
		position: absolute; top: 19px; left: 5px;
		font-size: 20px;
		color: transparent;
		cursor: pointer;
	}
	.hh_ride {
		position: absolute; top: 18px; left: 6px;
		font-size: 20px;
		color: transparent;
		cursor: pointer;
	}
	.hh_ride_bell {
		position: absolute; top: 18px; left: 6px;
		font-size: 20px;
		color: transparent;
		cursor: pointer;
	}
	.hh_cow_bell {
		position: absolute; top: 18px; left: 6px;
		font-size: 20px;
		color: transparent;
		cursor: pointer;
	}
	.hh_stacker {
		position: absolute; top: 17px; left: 5px;
		font-size: 20px;
		color: transparent;
		cursor: pointer;
	}
	.hh_metronome_normal {
		position: absolute; top: 17px; left: 5px;
		font-size: 20px;
		color: transparent;
		cursor: pointer;
	}
	.hh_metronome_accent {
		position: absolute; top: 17px; left: 5px;
		font-size: 20px;
		color: transparent;
		cursor: pointer;
	}
	.hh_cross {
		position: absolute; top: 15px; left: 5px;
		font-size: 24px;
		color: #CCCCCC;
		cursor: pointer;
	}
	.hh_open {
		position: absolute; top: 3px; left: 9px;
		font-size: 13px;
		color: transparent;
	}
	.hh_close {
		position: absolute; top: 3px; left: 9px;
		font-size: 13px;
		color: transparent;
		float:left;
	}
	.hh_accent {
		position: absolute; top: 0px; left: 11px;
		font-size: 20px;
		color: transparent;
		float:left;
	}
	.unmuteHHButton, .unmuteSnareButton, .unmuteKickButton, .unmuteTom1Button, .unmuteTom2Button, .unmuteTom3Button, .unmuteTom4Button {
		display: inline-block;
		display: none;
		position: relative;
		border: 1px solid;
		border-color: transparent;
		vertical-align: top;
		width: 29px;
		height: 100%;
		margin-right: 2px;
		margin-left: 2px;
		cursor: pointer;
	}
	.unmuteHHButton:hover, .unmuteSnareButton:hover, .unmuteKickButton:hover, .unmuteTom1Button:hover, .unmuteTom2Button:hover, .unmuteTom3Button:hover, .unmuteTom4Button:hover {
		opacity: .6;
	}
	.unmuteHHStack {
		margin-top: 9px;
	}
	.unmuteStack {
		margin-top: -3px;
	}
	.tom_circle {
		position: absolute; top: 1px; left: 3px;
		width:90%;
		height:20px;
		width: 20px;
		background: #FFF;
		border: 2px solid;
		border-color: #999;
		border-radius: 30px;
		cursor: pointer;
	}
	.dot_in_snare_ghost_note {
		font-size: 14px;
		position: relative; top: -1px; left: 0px;
	}
	.snare_ghost {
		position: absolute; top: -4px; left: 1px;
		font-size: 26px;
		line-height: 30px;
		color: transparent;
		cursor: pointer;
	}
	.snare_circle {
		position: absolute; top: 0px; left: 2px;
		width:90%;
		line-height: 20px;
		height:22px;
		width: 22px;
		background: #FFF;
		border: 2px solid;
		border-color: #999;
		border-radius: 30px;
		cursor: pointer;
	}
	.snare_accent {
		position: absolute; top: 5px; left: 11px;
		line-height: 15px;
		font-size: 15px;
		color: transparent;
		cursor: pointer;
	}
	.snare_xstick {
		position: absolute; top: -5px; left: 3px;
		font-size: 30px;
		color: transparent;
		cursor: pointer;
	}
	.snare_buzz {
		position: absolute; top: 0px; left: 3px;
		font-size: 22px;
		color: transparent;
		cursor: pointer;
	}
	.snare_flam {
		position: absolute; top: -2px; left: -2px;
		font-size: 25px;
		color: transparent;
		cursor: pointer;
	}
	.snare_drag {
		position: absolute; top: -2px; left: -2px;
		font-size: 25px;
		color: transparent;
		cursor: pointer;
	}
	.kick_circle {
		position: absolute; top: 0px; left: 2px;
		height: 22px;
		width: 22px;
		background: #FFF;
		border: 2px solid #999;
		border-radius: 40px 40px 40px 40px;
		cursor: pointer;
	}

	.kick_splash {
		position: absolute; top: 24px; left: 3px;
		font-size: 30px;
		color: transparent;
		cursor: pointer;
	}
	.opening_note_space {
		display: inline-block;
		width:1px;
		height:1px;
		background: transparent;
	}
	.end_note_space {
		display: inline-block;
		width:1px;
		height:1px;
		background: transparent;
	}
	.space_between_note_groups {
		display: inline-block;
		width:20px;
		height:1px;
		background: transparent;
	}
	#addMeasureButton {
		vertical-align: top;
		display: inline-block;
		color: var(--highlight-color-on-white);
		cursor: pointer;
		font-size: 40px;
		padding-top: 2px;
		margin-top: 73px;
	}

	.closeMeasureButton {
		vertical-align: top;
		display: inline-block;
		margin-top: 3px;
		cursor: pointer;
		color: var(--highlight-color-on-white);
	}
	.closeMeasureButton:hover, #addMeasureButton:hover {
		color: #000;
	}
	#PermutationOptions.displayed {
		padding: 12px 14px 14px;
		background: #F3EEE7;
		border-bottom: 1px solid #D8CFC3;
		color: #2c2620;
	}
	#PermutationOptionsHeader {
		font-size: 17px;
		font-weight: 700;
		margin: 0 0 4px;
	}
	#PermutationOptionsHint {
		margin: 0 0 12px;
		font-size: 14px;
		line-height: 1.45;
		color: #5c534a;
		max-width: 720px;
	}
	#PermutationOptionsStatus {
		margin: 0 0 10px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
		color: #1f1a15;
		max-width: 720px;
	}
	.permutationPresetRow {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin-bottom: 10px;
	}
	.permutationPresetLabel {
		font-size: 14px;
		font-weight: 700;
		margin-right: 2px;
	}
	.permutationPresetButton,
	.permutationDetailsToggle,
	.permutationOffButton {
		appearance: none;
		border: 1px solid #C9BBA8;
		background: #fff;
		color: #2c2620;
		border-radius: 6px;
		padding: 7px 12px;
		font: inherit;
		font-size: 14px;
		cursor: pointer;
	}
	.permutationPresetButton:hover,
	.permutationDetailsToggle:hover,
	.permutationOffButton:hover {
		border-color: #A89478;
		background: #FFF8F0;
	}
	.permutationPresetButton.selected {
		border-color: var(--highlight-color-on-white, #2F7F76);
		background: #FFF1DE;
		color: #1f1a15;
		font-weight: 700;
	}
	.PermutationSpecialOptions {
		margin: 0 0 10px;
	}
	.PermutationSpecialOption {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		font-size: 14px;
		line-height: 1.4;
		cursor: pointer;
	}
	.PermutationSpecialOption em,
	.permutationOptionHint {
		font-style: normal;
		color: #7a7168;
		font-weight: 400;
	}
	.permutationDetailsToggle {
		display: inline-block;
		margin-bottom: 8px;
	}
	#PermutationOptionsDetails {
		display: none;
		margin-bottom: 10px;
	}
	#PermutationOptionsDetails.open {
		display: block;
	}
	.PermutationOptionWrapper {
		display: table;
		border-collapse: collapse;
		width: 100%;
		max-width: 760px;
	}
	.PermutationOptionGroup{
		display: table-row;
		border-bottom: 1px solid #D8CFC3;
	}
	.PermutationOptionGroup:last-child{
		border-bottom: 0;
	}
	.PermutationOption{
		min-height: 28px;
		display: table-cell;
		padding: 6px 15px 6px 0;
		vertical-align: middle;
		white-space: nowrap;
	}
	.PermutationSubOption{
		display: table-cell;
		padding: 6px 15px 6px 0;
		vertical-align: middle;
	}
	.permutationOffRow {
		margin-top: 4px;
	}
	.permutationOffButton {
		color: #5c534a;
	}
	#sheetMusicDiv {
		background: var(--surface-white, #FFFFFF);
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}
	.svgTarget {
		background: var(--surface-white, #FFFFFF);
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	/* override the normal 100% width that is in groove_display for editing */
	#RightHandContent .svgTarget svg {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		width: 100%;
		height: auto;
		/* height: auto; */
	}

	#sheetMusicTextFields {
		border-bottom: 1px solid #C5CCD1;
		padding: 0;
		text-align: left;
		display: block;
		background-color: #E8ECEF;
	}
	.sheetMusicMetaBar {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		gap: 10px;
		padding: 6px 10px;
		box-sizing: border-box;
		min-height: 40px;
	}
	.sheetMusicMetaToggle {
		display: inline-flex;
		display: -webkit-inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 30px;
		padding: 4px 10px;
		border: 1px solid #B8C2C8;
		border-radius: 8px;
		background: #FFF;
		color: #1E2429;
		font: 700 13px/1.2 Lato, Calibri, sans-serif;
		cursor: pointer;
		flex: 0 0 auto;
	}
	.sheetMusicMetaToggle:hover {
		border-color: var(--highlight-color-on-white, #2F7F76);
		color: var(--highlight-color-on-white, #2F7F76);
	}
	.sheetMusicMetaToggleCaret {
		display: inline-block;
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 6px solid currentColor;
		transition: transform 0.12s ease;
	}
	#sheetMusicTextFields:not(.metaFieldsCollapsed) .sheetMusicMetaToggleCaret {
		transform: rotate(90deg);
	}
	.sheetMusicMetaSummary {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 13px;
		font-weight: 600;
		color: #5A656C;
	}
	.sheetMusicMetaFields {
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 8px 16px;
		padding: 0 10px 10px;
		box-sizing: border-box;
	}
	#sheetMusicTextFields.metaFieldsCollapsed .sheetMusicMetaFields {
		display: none;
	}
	#sheetMusicTextFields .sheetMusicMetaFields[hidden] {
		display: none !important;
	}
	.gestureHintsBanner {
		display: none;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 14px 12px;
		background: #FFF8EB;
		border-bottom: 1px solid #E0C48A;
		color: #2c2620;
	}
	.gestureHintsBanner[hidden] {
		display: none !important;
	}
	.gestureHintsInner {
		max-width: 920px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 16px;
	}
	.gestureHintsTitle {
		font-weight: 700;
		font-size: 14px;
		color: var(--highlight-color-on-white, #2F7F76);
		white-space: nowrap;
	}
	.gestureHintsList {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 18px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 13px;
		line-height: 1.35;
		color: #5c534a;
		flex: 1 1 280px;
	}
	.gestureHintsList li {
		margin: 0;
	}
	.gestureHintsList b {
		color: #2c2620;
	}
	.gestureHintsMouse,
	.gestureHintsTouch {
		display: none;
	}
	.gestureHintsBanner.is-mouse .gestureHintsMouse,
	.gestureHintsBanner.is-touch .gestureHintsTouch {
		display: flex;
	}
	.gestureHintsDismiss {
		font-family: Lato, sans-serif;
		font-size: 13px;
		font-weight: 700;
		color: #fff;
		background: var(--highlight-color, #3D9B8F);
		border: 0;
		border-radius: 8px;
		padding: 7px 14px;
		cursor: pointer;
		white-space: nowrap;
	}
	.gestureHintsDismiss:hover {
		opacity: 0.92;
	}
	.firstRunCoach {
		display: none;
		box-sizing: border-box;
		width: 100%;
		padding: 12px 16px 14px;
		background: #FFF8EB;
		border-bottom: 3px solid var(--highlight-color, #3D9B8F);
		color: #2c2620;
		font-family: Lato, sans-serif;
	}
	.firstRunCoach[hidden] {
		display: none !important;
	}
	.firstRunCoachInner {
		max-width: 920px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 16px;
	}
	.firstRunCoachStep {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: var(--highlight-color-on-white, #2F7F76);
		white-space: nowrap;
	}
	.firstRunCoachTitle {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
		white-space: nowrap;
	}
	.firstRunCoachBody {
		margin: 0;
		font-size: 14px;
		line-height: 1.4;
		color: #5c534a;
		flex: 1 1 240px;
	}
	.firstRunCoachSkip {
		font-family: Lato, sans-serif;
		font-size: 13px;
		font-weight: 700;
		color: #fff;
		background: var(--highlight-color, #3D9B8F);
		border: 0;
		border-radius: 8px;
		padding: 7px 14px;
		cursor: pointer;
		white-space: nowrap;
	}
	.firstRunCoachSkip:hover {
		opacity: 0.92;
		text-decoration: none;
	}
	.firstRunPulse {
		outline: 3px solid var(--highlight-color, #3D9B8F);
		outline-offset: 3px;
		border-radius: 6px;
		animation: firstRunPulse 1.6s ease-in-out infinite;
	}
	@keyframes firstRunPulse {
		0%, 100% { outline-color: var(--highlight-color, #3D9B8F); }
		50% { outline-color: rgba(61, 155, 143, 0.35); }
	}
	#topMoreAnchor.firstRunPulse,
	.midiPlayImage.firstRunPulse {
		position: relative;
		z-index: 3;
	}
	@media print {
		.firstRunCoach {
			display: none !important;
		}
	}
	.sheetMusicTextField {
		margin: 0px 10px;
	}
	.sheetMusicInputField {

	}
	/* Context Menu */
	.noteContextMenu {

	}
	#topMoreContextMenu, #permutationContextMenu, #helpContextMenu, #metronomeOptionsContextMenu, #metronomeOptionsOffsetClickContextMenu {
		position: fixed;
		top: 0px;
		right: 0px;
	}
	.metronomeOptionsContextMenuItem:before, .metronomeOptionsOffsetClickContextMenuItem:before, .metronomeVisualCountContextMenuItem:before {
		content: "\00a0";  /* blank space */
		letter-spacing: 17px;
	} /* unchecked icon */
	.menuChecked:before {
		content: "";
		display: inline-block;
		width: 1em;
		height: 1em;
		margin-right: 0.35em;
		vertical-align: -0.15em;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	} /* checked icon */
	.noteContextMenu>ul.list  {
		display: none;
		position:fixed; left:30px; top:-30px; z-index:999;
		width:150px;
		margin:0; padding:0px; list-style:none;
		background: var(--menu-bg, #EEF2F4);
		color: #000;
		border: 1px solid var(--menu-border, #1E2429);
		list-style:none;
	}
	.noteContextMenu>ul.list li {
		padding:10px;
		border-bottom: solid 1px var(--menu-border, #1E2429);
		text-decoration: none;
	}
	.noteContextMenu>ul.list li:hover, ul.list a:hover {
		background: var(--menu-hover, #D9E2E6);
	}
	.noteContextMenu>ul.list li:last-child {
		border:none;
	}
	#grooveListWrapper {
		display: none;
		position: fixed;
		z-index: 999;
		top: 0px;
		right: 0px;
		width: 300px;
		height: 300px;
		overflow: auto;
		background: var(--menu-bg, #EEF2F4);
		border: 1px solid var(--menu-border, #1E2429);
	}
	.grooveListUL {
		margin:0; padding:0px; list-style:none;
		background: var(--menu-bg, #EEF2F4);
		color: #000;
	}
	.grooveListHeaderLI {
		padding:15px;
		background: var(--highlight-color);
		font-size: 18px;
		font-weight: bold;
	}
	.grooveListLI {
		padding: 10px;
		padding-left: 15px;
		border-bottom: solid 1px var(--menu-border, #1E2429);
	}
	.grooveListLI:hover {
		background: var(--menu-hover, #D9E2E6);
	}
	#grooveLibraryPopup {
		display: none;
		position: fixed;
		right: 18px;
		top: 64px;
		z-index: 1002;
		width: 420px;
		max-width: calc(100% - 36px);
		max-height: calc(100vh - 96px);
		overflow: auto;
		padding: 16px;
		box-sizing: border-box;
		background: #f7f7f7;
		color: #222;
		border: 2px solid #222;
		border-radius: 14px;
		box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
	}
	#grooveLibraryCloseButton {
		float: right;
		cursor: pointer;
		color: #555;
	}
	#grooveLibraryCloseButton:hover {
		color: #000;
	}
	#grooveLibraryTitle {
		font-size: 22px;
		font-weight: 800;
		line-height: 1.1;
	}
	#grooveLibrarySubTitle {
		margin-top: 4px;
		color: #666;
		font-size: 12px;
		font-weight: 700;
	}
	.grooveLibraryLocalBanner {
		display: flex;
		display: -webkit-flex;
		align-items: flex-start;
		gap: 10px;
		margin-top: 12px;
		padding: 12px;
		border-radius: 10px;
		border: 1px solid rgba(61, 155, 143, 0.35);
		background: rgba(61, 155, 143, 0.12);
		box-sizing: border-box;
	}
	.grooveLibraryLocalBannerText {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
		line-height: 1.4;
		font-weight: 600;
		color: #1E2429;
	}
	.grooveLibraryLocalBannerDismiss {
		flex: 0 0 auto;
		min-height: 32px;
		padding: 6px 10px;
		border: 1px solid rgba(47, 127, 118, 0.45);
		border-radius: 8px;
		background: #fff;
		color: #2F7F76;
		font: 700 12px/1 Lato, Calibri, sans-serif;
		cursor: pointer;
	}
	.grooveLibraryLocalBannerDismiss:hover {
		background: #E8F5F2;
	}
	#grooveLibraryCapacity {
		margin-top: 8px;
		color: #444;
		font-size: 13px;
		font-weight: 700;
	}
	#grooveLibraryCapacity.is-full {
		color: #c0392b;
	}
	#grooveLibraryActions {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 8px;
		margin-top: 14px;
	}
	#grooveLibraryNameInput {
		min-width: 0;
		height: 38px;
		padding: 0 10px;
		border: 1px solid #bdbdbd;
		border-radius: 9px;
		font: 14px Lato, Calibri, sans-serif;
		box-sizing: border-box;
	}
	#grooveLibrarySaveButton {
		height: 38px;
		padding: 0 12px;
		border: 0;
		border-radius: 9px;
		background: var(--highlight-color);
		color: #fff;
		font-weight: 800;
		font-family: Lato, Calibri, sans-serif;
	}
	#grooveLibraryTransferActions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		margin-top: 8px;
	}
	#grooveLibraryExportButton,
	#grooveLibraryImportButton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 36px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 9px;
		background: #fff;
		color: #333;
		font-weight: 800;
		font-size: 12px;
		font-family: Lato, Calibri, sans-serif;
		cursor: pointer;
	}
	#grooveLibraryExportButton {
		border-color: rgba(61, 155, 143, 0.45);
		background: rgba(61, 155, 143, 0.1);
		color: #1E5F57;
	}
	#grooveLibraryExportButton:hover,
	#grooveLibraryImportButton:hover {
		border-color: var(--highlight-color);
		color: #111;
	}
	#grooveLibraryExportButton:hover {
		background: rgba(61, 155, 143, 0.18);
		color: #1E5F57;
	}
	#grooveLibraryStatus {
		min-height: 18px;
		margin-top: 10px;
		font-size: 12px;
		font-weight: 700;
		color: #666;
	}
	#grooveLibraryStatus.success {
		color: #287a1f;
	}
	#grooveLibraryStatus.error {
		color: #a52213;
	}
	#grooveLibraryList {
		display: grid;
		gap: 10px;
		margin-top: 10px;
	}
	.grooveLibraryEmpty {
		padding: 18px 14px;
		border: 1px dashed #bbb;
		border-radius: 12px;
		color: #666;
		font-size: 13px;
		line-height: 1.4;
		background: #fff;
	}
	.grooveLibraryItem {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 10px;
		align-items: center;
		padding: 12px;
		border: 1px solid #ddd;
		border-radius: 12px;
		background: #fff;
	}
	.grooveLibraryItemTitle {
		font-size: 15px;
		font-weight: 800;
		line-height: 1.25;
		word-break: break-word;
	}
	.grooveLibraryItemMeta {
		margin-top: 4px;
		color: var(--highlight-color-on-white);
		font-size: 12px;
		font-weight: 800;
	}
	.grooveLibraryItemDate {
		margin-top: 4px;
		color: #777;
		font-size: 11px;
	}
	.grooveLibraryItemActions {
		display: grid;
		gap: 6px;
	}
	.grooveLibraryLoadButton,
	.grooveLibraryShareButton,
	.grooveLibraryDeleteButton {
		height: 32px;
		padding: 0 10px;
		border-radius: 8px;
		font-size: 12px;
		font-weight: 800;
		font-family: Lato, Calibri, sans-serif;
	}
	.grooveLibraryLoadButton {
		border: 0;
		background: var(--highlight-color);
		color: #fff;
	}
	.grooveLibraryShareButton {
		border: 1px solid #ccc;
		background: #fff;
		color: #333;
	}
	.grooveLibraryDeleteButton {
		border: 1px solid #ccc;
		background: #fff;
		color: #8b1d1d;
	}
	hr {
		width: 795px;
		margin-left: 0px;
	}
	#fullURLPopup, #metronomeAutoSpeedupConfiguration, #timeSigPopup, #midiImportPopup {
		display: none;
		position: absolute;
		left: 300px;
		top: 250px;
		z-index: 999;
		background-color: #FFF;
		width: 400px;
		padding: 10px;
		border: solid 2px #999;
		border-radius: 5px;
	}
	#fullURLPopup {
		position: fixed;
		left: 50%;
		top: 18%;
		transform: translateX(-50%);
		z-index: 1003;
		width: 420px;
		max-width: calc(100% - 36px);
		padding: 16px;
		box-sizing: border-box;
		background: #f7f7f7;
		color: #222;
		border: 2px solid #222;
		border-radius: 14px;
		box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
	}
	#fullURLPopupCloseButton {
		font-size: 100%;
		float: right;
		cursor: pointer;
		color: #555;
	}
	#fullURLPopupCloseButton:hover {
		color: #000;
	}
	#fullURLPopupTitle {
		font-size: 18px;
		font-weight: 700;
		text-align: center;
	}
	#fullURLPopupSubTitle {
		color: var(--highlight-color);
		font-size: 14px;
		font-weight: 700;
		text-align: center;
		margin-top: 6px;
	}
	#fullURLPopupSubSubTitle {
		font-size: 12px;
		text-align: center;
		margin-top: 4px;
		color: #666;
	}
	#fullURLPopupCheckboxes {
		display: flex;
		width: 100%;
		margin: 12px auto 8px;
		justify-content: center;
	}
	.fullURLPopupCheckboxLabel {
		font-size: 13px;
		cursor: pointer;
	}
	.fullURLPopupCheckboxLabel input[type="checkbox"] {
		vertical-align: middle;
		margin-right: 6px;
	}
	#fullURLPopupTextFieldContainer {
		margin: 0 auto;
		width: 100%;
	}
	#fullURLPopupTextField {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		background: #ffe9b7;
		border: 0;
		border-radius: 8px;
		text-align: center;
		font-size: 13px;
	}
	#fullURLPopupStatus {
		min-height: 18px;
		margin-top: 8px;
		text-align: center;
		font-size: 13px;
		color: #2a7a2a;
	}
	#shareButtonContainer {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		margin-top: 10px;
	}
	#fullURLPopupCopyButton,
	#fullURLPopupNativeShareButton {
		font-size: 15px;
		font-family: Lato, sans-serif;
		font-weight: 700;
		color: #fff;
		background: var(--highlight-color);
		border: 0;
		border-radius: 8px;
		padding: 8px 14px;
		cursor: pointer;
	}
	#fullURLPopupCopyButton:hover,
	#fullURLPopupNativeShareButton:hover {
		opacity: 0.92;
	}
	#timeSigPopup {
		font-size: 24px;
	}
	#timeSigPopupTitle {
		text-align: center;
		margin-top: 8px;
		margin-bottom: 30px;
	}
	#timeSigPopupOptions {
		text-align: center;
	}
	#timeSigPopupTimeSigTop, #timeSigPopupTimeSigBottom {
		font-size: 24px;
		font-weight: 500;
		color: #666;
		background-color: #EEE;
		vertical-align: top;
		padding-left: 20px;
		width: 80px;
	}
	#timeSigPopupSlash {
		font-size: 24px;
		margin: 0px 10px;
	}
	#timeSigPopupCancel {
		font-size: 16px;
		font-weight: 500;
		background: #FFF;
		color: #CCC;
		border: 0px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	#timeSigPopupOK {
		font-size: 16px;
		font-weight: 500;
		background: var(--highlight-color);
		color: #FFF;
		border: 0px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	#timeSigPopupButtons {
		margin-top: 30px;
		text-align: center;
	}
	#midiImportPopup {
		font-size: 16px;
		line-height: 1.45;
	}
	#midiImportPopupTitle {
		font-size: 24px;
		text-align: center;
		margin-top: 8px;
		margin-bottom: 16px;
	}
	#midiImportPopupSummary {
		margin: 0 0 12px;
	}
	#midiImportRangeLabel {
		display: block;
		margin-bottom: 6px;
		font-weight: 600;
	}
	#midiImportRangeSelect {
		width: 100%;
		font-size: 16px;
		padding: 6px 8px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}
	#midiImportPopupHint {
		margin: 0 0 8px;
		color: #666;
		font-size: 14px;
	}
	#midiImportPopupCancel {
		font-size: 16px;
		font-weight: 500;
		background: #FFF;
		color: #CCC;
		border: 0px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	#midiImportPopupOK {
		font-size: 16px;
		font-weight: 500;
		background: var(--highlight-color);
		color: #FFF;
		border: 0px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	#midiImportPopupButtons {
		margin-top: 18px;
		text-align: center;
	}
	.sheetMusicPending {
		margin: 24px 16px;
		color: #666;
		font-size: 18px;
		text-align: center;
	}
	#metronomeAutoSpeedupConfigurationSliders {
		width: 370px;
		margin: 0px auto;
	}
	#metronomeAutoSpeedupTempoIncreaseAmount, #metronomeAutoSpeedupTempoIncreaseInterval {
		background: var(--highlight-color);
		width: 365px;
	}
	#metronomeAutoSpeedupOutputText {
		font-size: 25px;
		text-align: center;
	}
	#metronomeAutoSpeedupTempoIncreaseAmountOutput, #metronomeAutoSpeedupTempoIncreaseIntervalOutput {
		color: var(--highlight-color);
		font-weight: 700;
	}
	#metronomeAutoSpeedupConfigurationAmountLable, #metronomeAutoSpeedupConfigurationIntervalLable {
		font-size: 12px;
	}
	#metronomeAutoSpeedupConfigurationKeepIncreasing {
		font-size: 12px;
		color: var(--highlight-color);
		text-align: center;
		vertical-align: middle;
		margin-bottom: 10px;
	}
	#metronomeAutoSpeedupCloseButtonDiv {
		text-align: center;
		margin-top: 15px;
	}
	#metronomeAutoSpeedupConfigurationCloseButton {
		font-size: 16px;
		font-weight: 500;
		background: var(--highlight-color);
		color: #FFF;
		border: 0px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	#stickingsButton .bottomButtonIcon {
		letter-spacing: -2px;
		line-height: 32px;
	}
	#stickingsButton .bottomButtonIcon .bb-icon {
		width: 1.55em;
		height: 1.55em;
	}
	button {
		cursor: pointer;
	}


	input[type=checkbox]:checked  + label {
		color: #000;
		cursor: pointer;
	}
	input[type=checkbox]:not(:checked) + label {
		color: #888;
		cursor: pointer;
	}
	#totalPlayTime {
		z-index: 999;
		position: fixed;
		bottom: 3px;
		right: 3px;
		margin-right: 20px;
		color: var(--highlight-color);
	}
	.totalTimeNum {
		color: #EEE;
	}
	.myCheckbox {
		display:none;
	} /* to hide the checkbox itself */
	.myCheckbox + label:before
	{
		display: inline-block;
	 /* content: "\f096";  /* uncheck box */
		content: "\00a0";  /* blank space */
		letter-spacing: 17px;
	} /* unchecked icon */
	.myCheckbox:checked + label:before
	{
		content: "";
		display: inline-block;
		width: 1em;
		height: 1em;
		margin-right: 0.35em;
		vertical-align: -0.15em;
		letter-spacing: 0;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	} /* checked icon */
	#bottomButtonRow {
		padding: 20px 0px;
		background: transparent;
		text-align: center;
		color: inherit;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		-webkit-justify-content: space-around;
	}
	.pageBottomButton {
		position: relative;
		display: inline-block;
		margin: 0px 20px;
	}
	.pageBottomButtonPrimary .bottomButtonLabel {
		font-weight: 700;
	}
	.pageBottomButton:hover {
		cursor: pointer;
		color: #FFF;
	}
	.pageBottomButton.buttonSelected {
		color: #FFF;
		font-weight: 700;
	}
	.pageBottomButton[data-tooltip]::before,
	.pageBottomButton[data-tooltip]::after {
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease, visibility 0.15s ease;
		z-index: 40;
	}
	.pageBottomButton[data-tooltip]::after {
		content: attr(data-tooltip);
		position: absolute;
		left: 50%;
		bottom: calc(100% + 12px);
		transform: translateX(-50%);
		width: max-content;
		max-width: 240px;
		padding: 10px 12px;
		border-radius: 6px;
		background: #1a1a1a;
		color: #f2f2f2;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.45;
		text-align: left;
		white-space: pre-line;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	}
	.pageBottomButton[data-tooltip]::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: calc(100% + 4px);
		transform: translateX(-50%);
		border: 6px solid transparent;
		border-top-color: #1a1a1a;
	}
	.pageBottomButton[data-tooltip]:hover::before,
	.pageBottomButton[data-tooltip]:hover::after,
	.pageBottomButton[data-tooltip]:focus-within::before,
	.pageBottomButton[data-tooltip]:focus-within::after {
		opacity: 1;
		visibility: visible;
	}
	#bottomButtonRow > .pageBottomButton:first-child[data-tooltip]::after {
		left: 0;
		transform: none;
	}
	#bottomButtonRow > .pageBottomButton:first-child[data-tooltip]::before {
		left: 24px;
	}
	#bottomButtonRow > .pageBottomButton:last-child[data-tooltip]::after {
		left: auto;
		right: 0;
		transform: none;
	}
	#bottomButtonRow > .pageBottomButton:last-child[data-tooltip]::before {
		left: auto;
		right: 24px;
		transform: none;
	}
	.bottomButtonIcon {
		display:block;
	}
	.bottomButtonLabel {
		margin-top: 2px;
		display: block;
	}
	/*  3 circles make up the tom icon.  Position them */
	#icon-tom1 {
		font-size: 16px;
		margin-top: 16px;
	}
	#icon-tom2 {
		font-size: 14px;
		margin-left: -5px;
		vertical-align: top;
	}
	#icon-tom3 {
		font-size: 20px;
		margin-top: 11px;
	}
	@media only screen and (max-width: 900px) {
		body {
			height: auto;
			min-height: 100vh;
			overflow-x: hidden;
		}

		#GrooveWriter {
			min-width: 0;
			width: 100%;
			min-height: 100vh;
			overflow-x: hidden;
		}

		#LeftHandNav {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 58px;
			border-right: 0;
			border-bottom: 1px solid #000;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
			z-index: 1001;
		}

		#divisionButtonContainer {
			display: inline-flex;
			display: -webkit-inline-flex;
			min-width: max-content;
			height: 58px;
		}

		#logoInSubdivision {
			min-width: 58px;
			width: 58px;
			height: 57px;
			padding: 6px;
		}

		#logoInSubdivision img {
			width: 100%;
			height: 100%;
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

		.left-button {
			display: inline-block;
			min-width: 64px;
			vertical-align: top;
		}

		.left-button-content {
			height: 57px;
			padding: 0 6px;
			border-right: 1px solid #000;
			border-bottom: 0;
			font-size: 10px;
			line-height: 1.1;
			box-sizing: border-box;
		}

		.left-button.buttonSelected,
		.left-button.buttonSelected:hover,
		.left-button:hover {
			transform: none;
		}

		.buttonFraction {
			font-size: 15px;
		}

		#timeLabel {
			height: 57px;
		}

		#timeSigLabel {
			font-size: 17px;
		}

		#timeSubLabel {
			font-size: 10px;
		}

		#undoButton,
		#redoButton {
			font-size: 12px;
		}
		#undoButton.is-available,
		#redoButton.is-available {
			display: block;
		}

		#TopNav {
			position: fixed;
			top: 58px;
			left: 0;
			width: 100%;
			height: auto;
			min-height: 0;
			margin-left: 0;
			padding: 6px 10px;
			box-sizing: border-box;
			z-index: 1000;
		}

		.topNavMainRow {
			height: auto;
			min-height: 36px;
			flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			padding: 0;
			gap: 6px;
		}

		.topNavToggleButton {
			display: block;
			width: 100%;
			min-height: 28px;
			margin: 0 0 6px 0;
			padding: 5px 10px;
			border: 1px solid rgba(255, 255, 255, 0.26);
			border-radius: 999px;
			background: rgba(0, 0, 0, 0.18);
			color: #fff;
			font: 700 12px/16px 'Lato', Calibri, sans-serif;
			text-align: center;
			cursor: pointer;
		}

		.bottomNavToggleButton {
			display: block;
			width: calc(100% - 20px);
			max-width: 100%;
			min-height: 28px;
			margin: 0 auto 10px;
			padding: 5px 10px;
			border: 1px solid rgba(255, 255, 255, 0.26);
			border-radius: 999px;
			background: rgba(0, 0, 0, 0.18);
			color: #fff;
			font: 700 12px/16px 'Lato', Calibri, sans-serif;
			text-align: center;
			cursor: pointer;
			box-sizing: border-box;
		}

		#bottomNav {
			padding: 10px 0 0;
		}

		#GrooveWriter.bottomNavCollapsed #bottomNav {
			padding: 10px;
		}

		#GrooveWriter.bottomNavCollapsed #bottomButtonRow {
			display: none;
		}

		#GrooveWriter.bottomNavCollapsed .bottomNavToggleButton {
			margin-bottom: 0;
		}

		#GrooveWriter.topNavCollapsed #TopNav {
			min-height: 36px;
			padding-top: 4px;
			padding-bottom: 4px;
		}

		#GrooveWriter.topNavCollapsed .topNavToggleButton {
			margin-bottom: 0;
		}

		#GrooveWriter.topNavCollapsed #topNavMainRow,
		#GrooveWriter.topNavCollapsed #logoTextUpperLeft,
		#GrooveWriter.topNavCollapsed #upperLeft,
		#GrooveWriter.topNavCollapsed #upperRight {
			display: none;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer {
			display: block;
			min-height: 44px;
			height: auto;
			overflow: hidden;
			border-bottom: 1px solid #000;
		}

		/* Compact playback strip: keep PLAY / time / visual count when nav is collapsed */
		#GrooveWriter.topNavCollapsed #midiPlayer .tempoAndProgress,
		#GrooveWriter.topNavCollapsed #midiPlayer .drumSampleKitRow,
		#GrooveWriter.topNavCollapsed #midiPlayer .micPracticeRow,
		#GrooveWriter.topNavCollapsed #midiPlayer .midiMetronomeMenu,
		#GrooveWriter.topNavCollapsed #midiPlayer .playerControl,
		#GrooveWriter.topNavCollapsed #midiPlayer .playerControl.micPracticeEnabled {
			white-space: nowrap;
			min-height: 44px;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .playerControlsRow,
		#GrooveWriter.topNavCollapsed #midiPlayer .playerControl.micPracticeEnabled .playerControlsRow {
			display: flex;
			display: -webkit-flex;
			align-items: center;
			flex-wrap: nowrap;
			-webkit-flex-wrap: nowrap;
			height: 44px;
			min-height: 44px;
			padding-top: 0;
			padding-bottom: 0;
			row-gap: 0;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .midiPlayImage {
			flex: none;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .midiPlayImagePrimary {
			width: 40px;
			height: 40px;
			margin: 2px 6px;
			line-height: 40px;
			font-size: 20px;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .midiPlayImagePrimary .midiPlayGlyph {
			width: 18px;
			height: 18px;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .MIDIPlayTime,
		#GrooveWriter.topNavCollapsed #midiPlayer .midiVisualCountGroup {
			display: inline-flex;
			align-items: center;
			flex: none;
		}

		#logoTextUpperLeft {
			display: none;
		}

		#upperLeft,
		#upperRight {
			display: flex;
			display: -webkit-flex;
			float: none;
			margin: 0;
			white-space: nowrap;
		}

		#upperLeft {
			flex: 1 1 auto;
			min-width: 0;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}

		#upperRight {
			flex: 0 0 auto;
			margin-top: 0;
		}

		#metronomeContainer {
			display: flex;
			display: -webkit-flex;
			align-items: center;
			gap: 6px;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			padding-bottom: 2px;
		}

		#metronomeLabel {
			flex: none;
			height: auto;
			margin: 0 4px 0 0;
			font-size: 11px;
			line-height: 28px;
		}

		.metronomeButton,
		.rightButtons {
			min-height: 28px;
			height: auto;
			padding: 5px 9px;
			margin: 0;
			border-radius: 999px;
			font-size: 12px;
			line-height: 18px;
			box-sizing: border-box;
		}

		.metronomeButton:hover,
		.rightButtons:hover,
		.metronomeButton.selected:hover,
		.rightButtons.selected:hover,
		.metronomeButton.buttonSelected:hover,
		.rightButtons.buttonSelected:hover {
			transform: none;
		}

		#upperRight {
			display: flex;
			display: -webkit-flex;
			flex: 1 1 100%;
			max-width: 100%;
			min-width: 0;
			gap: 8px;
			flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			justify-content: flex-end;
			-webkit-justify-content: flex-end;
			overflow-x: visible;
			padding: 4px 2px 6px;
			box-sizing: border-box;
		}

		.rightButtons {
			flex: 0 0 auto;
			margin: 0;
			text-decoration: none;
			background: rgba(255, 255, 255, 0.08);
		}

		#midiPlayer {
			position: fixed;
			top: 120px;
			left: 0;
			width: 100%;
			min-height: 54px;
			z-index: 999;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}

		#RightHandContent {
			top: 174px;
			left: 0;
			width: 100%;
			height: auto;
			min-height: calc(100vh - 174px);
			overflow-y: visible;
		}

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

		#sheetMusicDiv,
		.svgTarget {
			overflow-x: hidden;
			-webkit-overflow-scrolling: touch;
		}

		#RightHandContent .svgTarget svg {
			min-width: 0;
			width: 100%;
			max-width: 100%;
		}

		#musicalInput {
			overflow-x: visible;
			overflow-y: visible;
			-webkit-overflow-scrolling: touch;
			text-align: left;
		}

		#measureContainer {
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
			min-width: 0;
			max-width: 100%;
			padding: 8px 10px 16px;
			gap: 12px;
			overflow-x: visible;
			-webkit-overflow-scrolling: touch;
		}

		.staff-container {
			--line-label-width: 52px;
			flex: 0 0 auto;
			max-width: none;
			transform-origin: top left;
		}

		#measureContainer.wide-single-measure .staff-container {
			transform: none;
			margin-bottom: 2px;
		}

		.staff-container.staff-fit-scaled {
			/* JS applies transform/margins; keep origin stable for touch targets */
			transform-origin: top left;
		}

		.line-labels {
			width: var(--line-label-width);
			font-size: 14px;
		}

		.hh-label,
		.tom-label,
		.snare-label,
		.kick-label {
			display: flex;
			display: -webkit-flex;
			align-items: center;
			-webkit-align-items: center;
			justify-content: center;
			-webkit-justify-content: center;
			margin-top: 0;
			margin-left: 2px;
			padding-top: 0;
			box-sizing: border-box;
			line-height: 1.1;
		}

		.hh-label {
			height: 42px;
		}

		.tom-label,
		.snare-label {
			height: 28px;
		}

		.kick-label {
			height: 56px;
		}

		.sticking,
		.hi-hat,
		.tom,
		.snare,
		.kick,
		.unmuteHHButton,
		.unmuteSnareButton,
		.unmuteKickButton,
		.unmuteTom1Button,
		.unmuteTom2Button,
		.unmuteTom3Button,
		.unmuteTom4Button {
			width: 22px;
			margin-left: 1px;
			margin-right: 1px;
		}

		.bg-highlight {
			width: 22px;
			margin-left: 1px;
			margin-right: 1px;
			border: 1px solid transparent;
			box-sizing: content-box;
		}

		.space_between_note_groups {
			width: 6px;
		}

		.sticking_right,
		.sticking_left,
		.sticking_count {
			left: 2px;
			font-size: 16px;
		}

		.hh_cross,
		.hh_open,
		.hh_close,
		.hh_accent,
		.hh_crash,
		.hh_ride,
		.hh_ride_bell,
		.hh_cow_bell,
		.hh_stacker {
			left: 2px;
			font-size: 15px;
		}

		.tom_circle {
			left: 0;
			width: 16px;
			height: 16px;
		}

		.snare_circle,
		.kick_circle {
			left: 0;
			width: 16px;
			height: 16px;
		}

		#sheetMusicTextFields {
			display: block;
			padding: 0;
			text-align: left;
		}

		.sheetMusicMetaBar {
			flex-wrap: wrap;
			padding: 8px 10px;
			gap: 8px;
		}

		.sheetMusicMetaSummary {
			flex: 1 1 100%;
			order: 3;
		}

		.sheetMusicMetaFields {
			display: block;
			padding: 0 10px 10px;
		}

		#sheetMusicTextFields.metaFieldsCollapsed .sheetMusicMetaFields {
			display: none;
		}

		.sheetMusicTextField {
			display: block;
			margin: 0 0 8px;
		}

		.sheetMusicInputField {
			width: 100%;
			min-height: 34px;
			box-sizing: border-box;
		}

		#KeyButton {
			float: none;
			display: inline-block;
			margin-left: 0;
			padding-right: 0;
		}

		#bottomButtonRow {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 10px;
			padding: 14px 10px 18px;
			text-align: center;
		}

		.pageBottomButton {
			margin: 0;
			padding: 10px 8px;
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 12px;
			background: rgba(255, 255, 255, 0.04);
			box-sizing: border-box;
		}

		.bottomButtonIcon .bb-icon-2x {
			width: 1.5em;
			height: 1.5em;
		}

		.bottomButtonLabel {
			font-size: 11px;
			line-height: 1.2;
		}

		#grooveListWrapper {
			top: 66px;
			left: 50%;
			right: auto;
			width: min(340px, calc(100vw - 24px));
			max-width: calc(100vw - 24px);
			max-height: calc(100vh - 80px);
			height: auto;
			transform: translateX(-50%);
			box-sizing: border-box;
		}

		#grooveLibraryPopup {
			top: 66px;
			right: 8px;
			left: 8px;
			width: auto;
			max-width: none;
			max-height: calc(100vh - 82px);
			padding: 14px;
		}

		#fullURLPopup {
			top: 12%;
			left: 8px;
			right: 8px;
			width: auto;
			max-width: none;
			transform: none;
			padding: 14px;
		}

		#grooveLibraryActions {
			grid-template-columns: 1fr;
		}

		#grooveLibrarySaveButton {
			width: 100%;
		}

		.grooveLibraryLocalBanner {
			flex-direction: column;
		}

		.grooveLibraryLocalBannerDismiss {
			width: 100%;
		}

		#grooveLibraryTransferActions {
			grid-template-columns: 1fr;
		}

		.grooveLibraryItem {
			grid-template-columns: 1fr;
		}

		.grooveLibraryItemActions {
			grid-template-columns: 1fr 1fr 1fr;
		}

		.noteContextMenu>ul.list {
			left: 8px;
			right: 8px;
			top: auto;
			bottom: 8px;
			width: auto;
			max-height: 70vh;
			overflow-y: auto;
			font-size: 16px;
			box-sizing: border-box;
		}

		.noteContextMenu>ul.list li {
			padding: 14px 16px;
		}

		#topMoreContextMenu,
		#permutationContextMenu,
		#helpContextMenu,
		#metronomeOptionsContextMenu,
		#metronomeOptionsOffsetClickContextMenu,
		#metronomeOptionsOffsetClickForTripletsContextMenu,
		#metronomeVisualCountContextMenu {
			left: 50%;
			right: auto;
			top: 70px;
			bottom: auto;
			width: min(340px, calc(100vw - 24px));
			max-width: calc(100vw - 24px);
			transform: translateX(-50%);
			box-sizing: border-box;
		}

		#metronomeAutoSpeedupConfiguration,
		#timeSigPopup,
		#midiImportPopup {
			position: fixed;
			left: 12px;
			right: 12px;
			top: 50%;
			width: auto;
			max-width: 420px;
			margin: 0 auto;
			transform: translateY(-50%);
			box-sizing: border-box;
		}

		#metronomeAutoSpeedupConfigurationSliders {
			width: 100%;
		}

		#metronomeAutoSpeedupTempoIncreaseAmount,
		#metronomeAutoSpeedupTempoIncreaseInterval {
			width: 100%;
			box-sizing: border-box;
		}

		#metronomeAutoSpeedupOutputText {
			font-size: 20px;
		}

		#totalPlayTime {
			display: none;
		}
	}

	@media only screen and (max-width: 520px) {
		#TopNav {
			min-height: 0;
			padding: 6px 8px;
		}

		#GrooveWriter.topNavCollapsed #TopNav {
			min-height: 36px;
			padding: 4px 8px;
		}

		#midiPlayer {
			top: 122px;
		}

		#RightHandContent {
			top: 176px;
			min-height: calc(100vh - 176px);
		}

		.firstRunCoach {
			padding: 10px 12px 12px;
		}

		.firstRunCoachTitle {
			white-space: normal;
		}

		/* Fallback before JS measures: LeftHand 58 + TopNav 36 + gap ≈ 95; + player 44 ≈ 140 */
		#GrooveWriter.topNavCollapsed #midiPlayer {
			top: 95px;
		}

		#GrooveWriter.topNavCollapsed #RightHandContent {
			top: 140px;
			min-height: calc(100vh - 140px);
		}

		.left-button {
			min-width: 58px;
		}

		.left-button-content {
			font-size: 9px;
			padding: 0 4px;
		}

		#RightHandContent .svgTarget svg {
			min-width: 0;
			width: 100%;
			max-width: 100%;
		}

		#measureContainer {
			padding-left: 8px;
			padding-right: 8px;
		}

		.staff-container {
			--line-label-width: 46px;
		}

		.line-labels {
			width: var(--line-label-width);
			font-size: 12px;
		}

		.hh-label,
		.tom-label,
		.snare-label,
		.kick-label {
			margin-left: 1px;
		}

		/* Default comfortable zoom (grid-zoom-1): larger touch targets than legacy 18px */
		#musicalInput.grid-zoom-0 .sticking,
		#musicalInput.grid-zoom-0 .hi-hat,
		#musicalInput.grid-zoom-0 .tom,
		#musicalInput.grid-zoom-0 .snare,
		#musicalInput.grid-zoom-0 .kick,
		#musicalInput.grid-zoom-0 .unmuteHHButton,
		#musicalInput.grid-zoom-0 .unmuteSnareButton,
		#musicalInput.grid-zoom-0 .unmuteKickButton,
		#musicalInput.grid-zoom-0 .unmuteTom1Button,
		#musicalInput.grid-zoom-0 .unmuteTom2Button,
		#musicalInput.grid-zoom-0 .unmuteTom3Button,
		#musicalInput.grid-zoom-0 .unmuteTom4Button,
		#musicalInput.grid-zoom-0 .bg-highlight {
			width: 18px;
			margin-left: 0;
			margin-right: 0;
		}
		#musicalInput.grid-zoom-0 .bg-highlight {
			border: 1px solid transparent;
			box-sizing: content-box;
		}
		#musicalInput.grid-zoom-0 .space_between_note_groups { width: 4px; }
		#musicalInput.grid-zoom-0 .tom_circle,
		#musicalInput.grid-zoom-0 .snare_circle,
		#musicalInput.grid-zoom-0 .kick_circle {
			width: 14px;
			height: 14px;
		}

		.sticking,
		.hi-hat,
		.tom,
		.snare,
		.kick,
		.unmuteHHButton,
		.unmuteSnareButton,
		.unmuteKickButton,
		.unmuteTom1Button,
		.unmuteTom2Button,
		.unmuteTom3Button,
		.unmuteTom4Button,
		#musicalInput.grid-zoom-1 .sticking,
		#musicalInput.grid-zoom-1 .hi-hat,
		#musicalInput.grid-zoom-1 .tom,
		#musicalInput.grid-zoom-1 .snare,
		#musicalInput.grid-zoom-1 .kick,
		#musicalInput.grid-zoom-1 .unmuteHHButton,
		#musicalInput.grid-zoom-1 .unmuteSnareButton,
		#musicalInput.grid-zoom-1 .unmuteKickButton,
		#musicalInput.grid-zoom-1 .unmuteTom1Button,
		#musicalInput.grid-zoom-1 .unmuteTom2Button,
		#musicalInput.grid-zoom-1 .unmuteTom3Button,
		#musicalInput.grid-zoom-1 .unmuteTom4Button,
		#musicalInput.grid-zoom-1 .bg-highlight {
			width: 26px;
			margin-left: 0;
			margin-right: 0;
		}
		.bg-highlight,
		#musicalInput.grid-zoom-1 .bg-highlight {
			border: 1px solid transparent;
			box-sizing: content-box;
		}
		.space_between_note_groups,
		#musicalInput.grid-zoom-1 .space_between_note_groups { width: 5px; }
		.tom_circle,
		.snare_circle,
		.kick_circle,
		#musicalInput.grid-zoom-1 .tom_circle,
		#musicalInput.grid-zoom-1 .snare_circle,
		#musicalInput.grid-zoom-1 .kick_circle {
			width: 18px;
			height: 18px;
		}

		#musicalInput.grid-zoom-2 .sticking,
		#musicalInput.grid-zoom-2 .hi-hat,
		#musicalInput.grid-zoom-2 .tom,
		#musicalInput.grid-zoom-2 .snare,
		#musicalInput.grid-zoom-2 .kick,
		#musicalInput.grid-zoom-2 .unmuteHHButton,
		#musicalInput.grid-zoom-2 .unmuteSnareButton,
		#musicalInput.grid-zoom-2 .unmuteKickButton,
		#musicalInput.grid-zoom-2 .unmuteTom1Button,
		#musicalInput.grid-zoom-2 .unmuteTom2Button,
		#musicalInput.grid-zoom-2 .unmuteTom3Button,
		#musicalInput.grid-zoom-2 .unmuteTom4Button,
		#musicalInput.grid-zoom-2 .bg-highlight {
			width: 34px;
			margin-left: 0;
			margin-right: 0;
		}
		#musicalInput.grid-zoom-2 .bg-highlight {
			border: 1px solid transparent;
			box-sizing: content-box;
		}
		#musicalInput.grid-zoom-2 .space_between_note_groups { width: 6px; }
		#musicalInput.grid-zoom-2 .tom_circle,
		#musicalInput.grid-zoom-2 .snare_circle,
		#musicalInput.grid-zoom-2 .kick_circle {
			width: 22px;
			height: 22px;
		}

		#bottomNav {
			padding: 6px 0 0;
		}

		#GrooveWriter.bottomNavCollapsed #bottomNav {
			padding: 6px 8px;
		}

		.bottomNavToggleButton {
			width: calc(100% - 16px);
			min-height: 26px;
			margin: 0 auto 6px;
			padding: 4px 8px;
			font-size: 11px;
			line-height: 16px;
		}

		#bottomButtonRow {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 6px;
			padding: 8px 8px 12px;
		}

		.pageBottomButton {
			margin: 0;
			padding: 6px 4px;
			border-radius: 10px;
		}

		.bottomButtonIcon .bb-icon-2x {
			width: 1.25em;
			height: 1.25em;
		}

		.bottomButtonLabel {
			margin-top: 1px;
			font-size: 9px;
			line-height: 1.15;
		}

		#icon-tom1 {
			font-size: 13px;
			margin-top: 10px;
		}

		#icon-tom2 {
			font-size: 12px;
		}

		#icon-tom3 {
			font-size: 16px;
			margin-top: 7px;
		}

		.seoIntro {
			padding: 12px 12px 16px;
			font-size: 0.72rem;
			line-height: 1.4;
		}

		.seoIntro h1 {
			margin: 0 0 4px;
			font-size: 0.68rem;
		}

		.seoIntro > p {
			margin: 0 auto 6px;
		}

		.seoIntroLinks {
			margin: 8px 0 0;
			gap: 4px 10px;
		}

		.seoIntroInstall {
			margin: 10px 0 0;
		}

		.pwaInstallButton {
			padding: 7px 12px;
			font-size: 0.72rem;
		}

		.pwaInstallHint {
			margin-top: 6px;
			font-size: 0.7rem;
		}

		.seoIntroMore {
			margin-top: 6px;
		}
	}

	@media print {
		/* keep at bottom so it overrides the styles above */
		/* there is another definition in groove_display.css that adds more rules */
		body {
			margin: 0;
			padding: 0;
			background: #fff !important;
			color: #000 !important;
		}

		#GrooveWriter {
			min-width: 10px;
		}

		.nonPrintable {
			display: none !important;
		}

		.Printable {
			display: block !important;
		}

		#RightHandContent {
			margin-left: 0px;
			padding-top: 0px;
			top: 0px;
			left: 0px;
			overflow: visible !important;
			width: 100% !important;
			min-height: 0 !important;
		}

		#sheetMusicDiv,
		.svgTarget {
			overflow: visible !important;
			background: #fff !important;
		}

		.svgTarget svg {
			margin: 0 !important;
			width: 100% !important;
			max-width: 100% !important;
			min-width: 0 !important;
			height: auto !important;
			color: #000 !important;
		}

		/* Editor grid: print only tracks used in the current groove */
		#musicalInput {
			display: block !important;
			width: 100% !important;
			max-width: 100% !important;
			margin-top: 18px !important;
			padding-top: 12px !important;
			border-top: 1px solid #bbb !important;
			border-bottom: none !important;
			background: #fff !important;
			overflow: visible !important;
			page-break-inside: avoid;
			-webkit-print-color-adjust: exact !important;
			print-color-adjust: exact !important;
			color-adjust: exact !important;
		}

		#musicalInput * {
			-webkit-print-color-adjust: exact !important;
			print-color-adjust: exact !important;
			color-adjust: exact !important;
		}

		/* Active snare/kick/tom notes are background fills on screen.
		   Use a thick black border so the fill still prints when the browser
		   strips backgrounds (default print behavior). */
		#musicalInput .snare_circle.print-note-filled,
		#musicalInput .kick_circle.print-note-filled,
		#musicalInput .tom_circle.print-note-filled {
			background: #000 !important;
			border-color: #000 !important;
			border-style: solid !important;
			border-width: 11px !important;
			box-sizing: border-box !important;
		}

		#measureContainer {
			display: flex !important;
			flex-wrap: wrap !important;
			justify-content: flex-start !important;
			gap: 12px 16px !important;
			padding: 0 !important;
			width: 100% !important;
			max-width: 100% !important;
		}

		#measureContainer.wide-single-measure .staff-container {
			transform: none !important;
			margin-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.staff-container {
			background: #fff !important;
			max-width: 100% !important;
			page-break-inside: avoid;
			transform: none !important;
			margin-right: 0 !important;
			margin-bottom: 0 !important;
		}

		.staff-line-1,
		.staff-line-2,
		.staff-line-3,
		.staff-line-4,
		.staff-line-5,
		.staff-line-6,
		.background-highlight-container,
		.bg-highlight,
		.unmuteHHButton,
		.unmuteSnareButton,
		.unmuteKickButton,
		.unmuteTom1Button,
		.unmuteTom2Button,
		.unmuteTom3Button,
		.unmuteTom4Button,
		.closeMeasureButton,
		#addMeasureButton {
			display: none !important;
		}

		.stickings-row-container,
		.stickings-container,
		.stickings-label,
		.hi-hat-container,
		.hh-label,
		.toms-container,
		.tom-label,
		.snare-container,
		.snare-label,
		.kick-container,
		.kick-label {
			display: none !important;
			visibility: hidden !important;
		}

		#musicalInput.print-track-stickings .stickings-row-container {
			display: block !important;
			visibility: visible !important;
			margin-left: 0 !important;
		}
		#musicalInput.print-track-stickings .stickings-row-container .line-labels {
			display: table-cell !important;
		}
		#musicalInput.print-track-stickings .stickings-container,
		#musicalInput.print-track-stickings .stickings-label {
			display: block !important;
			visibility: visible !important;
			background: #fff !important;
			color: #000 !important;
		}

		#musicalInput.print-track-hh .hi-hat-container,
		#musicalInput.print-track-hh .hh-label,
		#musicalInput.print-track-tom1 #tom1-container,
		#musicalInput.print-track-tom1 #tom1-label,
		#musicalInput.print-track-tom2 #tom2-container,
		#musicalInput.print-track-tom2 #tom2-label,
		#musicalInput.print-track-tom3 #tom3-container,
		#musicalInput.print-track-tom3 #tom3-label,
		#musicalInput.print-track-tom4 #tom4-container,
		#musicalInput.print-track-tom4 #tom4-label,
		#musicalInput.print-track-snare .snare-container,
		#musicalInput.print-track-snare .snare-label,
		#musicalInput.print-track-kick .kick-container,
		#musicalInput.print-track-kick .kick-label {
			display: block !important;
			visibility: visible !important;
		}

		.hi-hat-container,
		.toms-container,
		.snare-container,
		.kick-container,
		.stickings-container {
			border-bottom: 1px solid #999 !important;
		}

		.hh-label,
		.tom-label,
		.snare-label,
		.kick-label,
		.stickings-label {
			color: #000 !important;
			cursor: default !important;
		}

		.line-labels {
			color: #000 !important;
		}
	}