/* breakpoints: 600px and less; 768px and less, 992px and up */
:root {
  font: 100%/1.3 system-ui, sans-serif; /* font-size=browsers default/line height=(x*font size) OS native UI font*/
  --cell-unit: clamp(0.95rem, 0.94rem + 1.0vw, 2.50rem);
  /* Site palette - light theme (default). */
  /* starting colors: #33691E #374151 #6b7280 #d1d5db #fde68a #FCF8ED #f0e2c6 #dec8a4 #c9ad85 #9f8162 */
  --site-bg: #FFFEFA;
  --site-text: #352B22;
  --site-link: #221C16;
  --site-leftHand: #46970C;
  --site-beatlabel: #9f8162;
  --site-beatlabel-strong: #856B51;
  --site-beatgroup-underline: #9f8162;
  --site-metronome-bg: #FEFCF5;
  --site-list-bg: #FEF5D2;
  --site-hover-bg: rgba(0, 0, 0, 0.05);
  --site-hover-border-col:#DDBC97;
  --site-active-border-col:#FCDFBF;
  --site-box-shadow-bg: rgba(0,0,0,0.12);
  --site-input-border-col: #221C16;
  --site-input-bgr-col:#FFFEFA;
  --site-ok: #46970C;
  --site-activeBeat: #FF8C00;
  --site-border-color: #c9ad85;
  --site-border-radius: 3px;
  --site-border-padding: 0.5rem;
  --site-primary-button-col: #fde68a;
  --site-secondary-button-col: #FEF5D2;
  --site-tetriary-button-col: #FEF5D2;
  --site-submitBtn-border-col: #856B51;
  --site-error-col: #c0392b;
  --site-warning-col: #8a4b00;

  --handpan-rim: #8d8d8b;
  --handpan-body-highlight: #f5f3ee;
  --handpan-body-mid: #d9d8d2;
  --handpan-body-shadow: #bab9b4;
  --handpan-dimple-highlight: #fffdf9;
  --handpan-dimple-mid: #c3c3bd;
  --handpan-dimple-shadow: #91918b;
  --handpan-tonefield-fill: #d9d8d2;
  --handpan-shoulder-right: #d5d4ce;
  --handpan-shoulder-left: #cecfc9;
  --handpan-stroke: #9a9c9a;
  --handpan-label-color: #6a6c6a;
  --handpan-flash-color: #FFDB23;
}

:root.dark-theme {
  --site-bg: #1c1d1f;
  --site-text: #d8d9da;
  --site-link: #8fd3ff;
  --site-leftHand: #1e983d;
  --site-beatlabel: #87898C;
  --site-beatlabel-strong: #c8cacb;
  --site-beatgroup-underline: #6a6c6e;
  --site-metronome-bg: #1c1d1f;
  --site-list-bg: #232527;
  --site-hover-bg: rgba(255, 255, 255, 0.08);
  --site-hover-border-col:#879DB5;
  --site-active-border-col:#384E6B;
  --site-box-shadow-bg: rgba(255,255,255,0.12);
  --site-input-border-col: #4a4c4f;
  --site-input-bgr-col:#22262A;
  --site-ok: #46970C;
  --site-activeBeat: #FF4C23;
  --site-border-color: #6a6c6e;
  --site-primary-button-col: #374151;
  --site-secondary-button-col: #6b7280;
  --site-tetriary-button-col: rgba(255, 255, 255, 0.08);
  --site-submitBtn-border-col: #5A6677;
  --site-error-col: #ff8f8f;
  --site-warning-col: #FF8F05;

  --handpan-rim: #3B434E;
  --handpan-body-highlight: #82868a;
  --handpan-body-mid: #65686c;
  --handpan-body-shadow: #4e5155;
  --handpan-dimple-highlight: #9a9d9f;
  --handpan-dimple-mid: #5c5f62;
  --handpan-dimple-shadow: #2e3033;
  --handpan-tonefield-fill: #5c5f62;
  --handpan-shoulder-right: #5b5e61;
  --handpan-shoulder-left: #54575a;
  --handpan-stroke: #3B434E;
  --handpan-label-color: #3B434E;
}
@media (min-width: 600px) {
  :root {
    --cell-unit: clamp(1.75rem, 1.2rem + 2.6vw, 2.50rem);
  }
}

body {
	display: flex;
	flex-direction:row;
	/*font-size:clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem);*/
	background-color: var(--page-background-color, var(--site-bg));
	color: var(--site-text);
	font-family: inherit;
}
main {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	width:100%;
	margin-bottom:2rem;
	flex-direction:column;
}
main.stacked section { display: initial; }
section {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0 1rem;
	align-items:center;
}
section.column form {
	display: grid; gap: 1rem;
}
h2 { text-align:center;}
th { text-align: left; }
a { color: var(--site-link); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-size:inherit; color: var(--site-link); }

input[type=text], input[type=password], input[type=email], textarea {
	height:2rem;
	border-color: var(--site-input-border-col);
	border-radius: var(--site-border-radius);
	background: var(--site-input-bgr-col); 
	color: var(--site-text);
}
textarea {height:1.5rem;margin: 0.3rem 0;}
/*textarea:focus {min-height:3rem;}*/
textarea:required:placeholder-shown {
  border: 1px solid var(--site-error-col);
}

textarea:required:not(:placeholder-shown) {
  border: 1px solid var(--site-input-border-col);
}

select, input[type="file"]::file-selector-button { min-width: 0; max-width: 100%; height:2.5rem; }
input[type=submit]:hover, button:hover {
  /*filter: drop-shadow(0px 0px 1px);*/
  border-top-color: var(--site-hover-border-col);
  border-left-color: var(--site-hover-border-col);
}
input[type=submit]:active, button:active {
  /*filter: drop-shadow(0px 0px 0px);*/
  border-top-color: var(--site-active-border-col);
  border-left-color: var(--site-active-border-col);
}

.btnIcon {background:none;border:0;padding:0;cursor:pointer;line-height:0;}
.submitBtn { padding:0.7rem; text-wrap:wrap; font-size:inherit; width:100%; color: var(--site-text); background-color: var(--site-secondary-button-col); border-radius: var(--site-border-radius); border-color: var(--site-submitBtn-border-col); }
.submitBtnPrim { padding:0.7rem; text-wrap:wrap; font-size:inherit; width:100%; color: var(--site-text); background-color: var(--site-primary-button-col); border-radius: var(--site-border-radius); border-color: var(--site-submitBtn-border-col); }
.aBTN {
text-decoration: none;
border: 1px solid var(--site-border-color);
border-radius: var(--site-border-radius);
padding: 1px 4px;
}
#themeToggle {
	position: fixed;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1000;
	background: var(--site-list-bg);
	border: 1px solid var(--site-border-color);
	border-radius: var(--site-border-radius);
	padding: 0.3rem 0.7rem;
	font-size: 0.8rem;
	cursor: pointer;
	color: var(--site-text);
}

.barActions { display: flex; align-items: center; gap: 0.1ch; }
.uiIcon { height: 1.5rem; width: auto; vertical-align: middle; }
.barActions .uiIcon { display: block; }
#help .uiIcon { height: 2ch; }
#help details {width:100%;}
.in3char { width:4rem; padding:0.2rem;border: 1px solid var(--site-submitBtn-border-col);border-radius: var(--site-border-radius);text-align:center;}
.timeCell { display: flex; align-items: center; justify-content: center; }
.timeCell input {
  width: 100%;
  /*max-width: var(--cell-unit);*/
  box-sizing: border-box;
  text-align: center;
  font: inherit;
  border: 1px solid var(--site-input-border-col);
  border-radius: 0px;
  padding: 2px 0;
}

#groove {width:100%;}
#settings, #groove {line-height:200%;}
#settings {width: 100%; max-width: 750px;}
.partHeader {display:flex;justify-content:center;margin-top:1rem;}
.partMeta {width: 100%; margin: 0 auto; max-width: 750px; display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
#SaveAs {display: grid; grid-template-columns: 1fr 1fr; width: 100%; align-items: center;}
#TSoptions {display: grid;grid-template-columns: auto auto;row-gap: 0.3rem;align-items: center;}
#createBtns {display:flex;gap:0.15rem;justify-content:center;}
@media (max-width:600px) {
 #createBtns {flex-wrap:wrap;}
}
#SaveLoad { text-align:center; margin-top:2rem; display:flex; gap: 0.3rem;}

#privateNotations, #publicNotations { display:grid; grid-template-columns:minmax(0,1fr) auto;column-gap:0.5rem; }
#newNotation, #publicNotations, #privateNotations {
	max-width:750px;
	width:95dvw;
}
#help, #privacy, #about, .column {
	max-width: 750px;
	width: 95dvw;
	margin:0.5rem 0 1.5rem 0;
}
.column {
	flex-direction:column;
}
.np {
	text-align:center;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	gap:1rem;
}
.offscreen {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.vcenter { display:flex; align-items:center; gap:1ch; }
.break { flex-basis:100%; height:0; }

.center, .partTitle, .partComment {
	width:100%;
	text-align:center;
	margin-top:1rem;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1rem;
}
.partComment {margin:0 0 1rem 0;}
.partComment:empty { display: none; }
.partCont {width:100%;}
.partCont.currentlyPlaying .noteRowsBlock { border-color: var(--site-activeBeat); }

#config {
	color: var(--config-text-color, inherit);
	font-variant-caps: var(--config-font-variant-caps, normal);
	font-family: var(--config-font-family, inherit);
}
#config h2 {
	color: var(--config-h2-color, inherit);
}
#parts {
	color: var(--parts-text-color, inherit);
	font-variant-caps: var(--parts-font-variant-caps, normal);
	font-family: var(--parts-font-family, inherit);
	width:95dvw;
}
#parts h2 {
	color: var(--parts-h2-color, inherit);
}
.notation {
	width:100%;
}
.notationGrid {
	display: grid;
	justify-content: center;
	column-gap: calc(var(--cell-unit) * 0.2);
	grid-template-columns: repeat(var(--cell-count, 16), var(--cell-unit));
}
.notationGrid.compactNotation {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	justify-content: stretch;
	column-gap: min(calc(var(--cell-unit) * 0.2), 0.3rem);
	grid-template-columns: repeat(var(--cell-count, 16), minmax(0, 1fr));
}
.notationGrid.editable {
  grid-template-columns: repeat(var(--cell-count, 16), var(--cell-unit)) 4.4rem;
  column-gap:calc(var(--cell-unit) * 0.03);
  row-gap:calc(var(--cell-unit) * 0.05);
}
.notationGrid.editable.compactNotation {
	grid-template-columns: repeat(var(--cell-count, 16), minmax(0, 1fr)) 4.4rem;
}
@media (max-width:600px) {
	.notationGrid {
		grid-template-columns: repeat(var(--cell-count, 16), minmax(0, 1fr));
	}
	.notationGrid.editable {
	  grid-template-columns: repeat(var(--cell-count, 16), minmax(0, 1fr)) 4.4rem;
	  column-gap:0; 
	}
}
.beatLabel {
	color: var(--parts-beatlabel-color, var(--site-beatlabel));
	text-align: left; /*left align for display, centered for editing (inline style)*/
}
.notationGrid.editable .beatLabel { text-align:center; }
.beatLabel b {
	color: var(--parts-beatlabel-strong-color, var(--site-beatlabel-strong));
}
.noteRowsBlock {
	grid-column: 1 / -1;              /* wrapper spans all columns */
	display: grid;
	grid-template-columns: subgrid;   /* inherits exact widths */
	row-gap: 10px;
	margin: 0 -8px;
	padding: 8px;
	border: 1px solid var(--parts-noterows-border-color, var(--site-border-color)); /* one border around every row inside */
	border-radius: var(--site-border-radius);
}
.beatGroupUnderline {
	grid-row: 1;
	align-self: end;      /* sits at the bottom of the row's height, not floating mid-row */
	border-bottom: 1px solid var(--parts-beatgroup-underline-color, var(--site-beatgroup-underline));
	height: 0;
}
.noteRow {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;   /* inherits widths from .noteRowsBlock */
	align-items:center;
	min-height:1.3rem;
}
.noteCell {
	grid-row: 1;   /* pins cells to the same row as the underline - stops the auto-placement shift */
	width: var(--cell-unit);
	display: flex;
	flex-direction: column;   /* so wrapped chars stack, still centered as a block */
	align-items: flex-start;
	justify-content: center;  /* vertical centering within the stretched cell height */
	height: 100%;             /* fills the row height the grid already gave it */
	white-space: pre-line;    /*preserves line breaks from the HTML source but collapses sequences of spaces and tabs*/
	word-spacing:9999px;      /*forces wrapping on space without <br>*/
	font-weight:var(--parts-note-font-weight, 700);
}
.compactNotation .noteCell {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	/*font-size: clamp(0.65rem, 2.8cqw, 1rem);*/
}
.LeftHand {
	color: var(--parts-lefthand-color, var(--site-leftHand));
}

#metronome {
	border:0;
	background-color: var(--site-metronome-bg);
	color: var(--site-link);
	width:6rem;
}
.active-beat {
	background-color: var(--site-activeBeat);
}
#notationKey {
	width:100%;
	margin-bottom:1rem;
	text-align:left;
}

.msgBox {border:1px solid var(--site-border-color);border-radius:var(--site-border-radius);padding:var(--site-border-padding);}
.appendError {
	color: var(--site-error-col);
	text-align: center;
	margin: 0.5rem auto;
	max-width: 60ch;
}
.ok { color: var(--site-ok); }
.bold { font-weight:var(--parts-note-font-weight, 700); }
.list {display: block; padding: 0.5ch 1ch; clear: both; background-color: var(--site-list-bg); margin: 0.17rem 0 0.17rem 0; border-radius: var(--site-border-radius); text-align: left; color: var(--site-text); text-decoration: none;}
.listRowActions {display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;}
.listRowActionsForm {margin:0;display:flex;}

/*site navigation*/
#topNav {
	width:100%;
	display:flex;
	padding-bottom:0.5rem;
}
.siteNav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width:95dvw;
	max-width:750px;
	border-bottom: 1px solid var(--site-border-color);
	padding-bottom: 0.5rem;
}
.siteNavGroup {
	display: flex;
	gap: 1em;
}
.accountMenu {
	position: relative;
}
.accountMenuToggle {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--site-link);
	cursor: pointer;
	list-style: none;
}
.accountMenuToggle::-webkit-details-marker {
	display: none;
}
.accountMenuDropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.5em;
	min-width: 10em;
	background: var(--site-bg);
	border: 1px solid var(--site-border-color);
	border-radius: var(--site-border-radius);
	/*box-shadow: 0 0px 4px var(--site-box-shadow-bg);*/
	padding: 0;
	z-index: 30;
}
.accountMenuDropdown a {
	display: block;
	padding: 0.6em 0.9em;
	white-space: nowrap;
}
.accountMenuDropdown a:hover {
	background: var(--site-hover-bg);
}
.notationToolbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.5rem;
	align-items: center;
	justify-items: center;
	width: 95dvw;
	max-width: 750px;
	margin: 0 auto;
	line-height:200%;
}
.notationToolbar > a,
.notationToolbar > form {
	text-align: center;
}

/* Chord helper + chord explorer (createNotation.php, editNotation.php,
   chordExplorer.php): the overlay (#chordHelperOverlay) and the explorer
   page (#chordExplorer) render the exact same shared markup
   (chordHelperOverlayHtml / chordDingInputHtml / renderChordTableHtml in
   functions/chords.php), so their styles are one shared set, listed under
   both roots. Only existing palette variables, so light/dark both work. */
#chordHelperOverlay {
	box-sizing:border-box;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:995;
	width:min(95dvw, 750px);
	max-height:90dvh;
	overflow-y:auto;
	background:var(--site-bg);
	border:1px solid var(--site-border-color);
	border-radius:var(--site-border-radius);
	padding:var(--site-border-padding);
	/*box-shadow:0 0px 4px var(--site-box-shadow-bg);*/
}
#chordHelperOverlay[hidden] { display:none; }
/* Overlay panel header: with the Chords toggle living in the document
   flow above the save buttons, the overlay has no fixed anchor, so it
   reads as a modal-ish centered panel instead of hugging a screen
   edge. */
.chordHelperHeader {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:0.5rem;
	border-bottom:1px solid var(--site-border-color);
	padding-bottom:0.4rem;
	margin-bottom:0.5rem;
}
/* .vcenter's author display:flex overrides the UA's [hidden] rule (author
   origin always wins), so the hidden attribute alone would never hide the
   name field -- this explicit rule is required. */
#chordHelperOverlay #chordNameWrap[hidden],
#chordExplorer #chordNameWrap[hidden] { display:none; }
/* Drop-downs: match the site's themed input look (works in both themes). */
#chordHelperOverlay select,
#chordExplorer select {
	height:2rem;
	border:1px solid var(--site-input-border-col);
	border-radius:var(--site-border-radius);
	background:var(--site-input-bgr-col);
	color:var(--site-text);
}
/* Table-like chord list: exactly one grid row per scale degree: degree,
   triad name, notes, voicing buttons. */
#chordHelperOverlay .chordTable,
#chordExplorer .chordTable {
	display:grid;
	grid-template-columns:auto auto auto minmax(0,1fr);
	column-gap:0.4rem;
	row-gap:0.5rem;
	align-items:center;
	margin-top:0.5rem;
}
#chordHelperOverlay .chordDegree,
#chordExplorer .chordDegree { color:var(--site-beatlabel-strong); }
#chordHelperOverlay .chordNotes,
#chordExplorer .chordNotes { color:var(--site-beatlabel); }
#chordHelperOverlay .chordNotes > div,
#chordExplorer .chordNotes > div { white-space:nowrap; }
#chordHelperOverlay .chordVariants,
#chordExplorer .chordVariants {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:0.15rem 0.25rem;
}
/* In-flow type tag before each non-label chord group (7ths, sus): the
   row label covers the triad and its inversions; this names everything
   else for screens where title tooltips do not exist (phones). Muted like
   the notes column; default size, so it never competes with the buttons. */
#chordHelperOverlay .chordGroupTag,
#chordExplorer .chordGroupTag {
	color:var(--site-beatlabel);
	align-self:center;
}
/* One voicing button = 2 rows: note names (voicing order) over note
   numbers. Both rows share identical styling: default text color, default
   font size, no font weight. Inversion info lives only in the title
   attribute (desktop hover). The per-button type tag (phones have no
   tooltips) rides at the end of the numbers row, muted like the notes
   column; the tightened line spacing keeps tagged buttons compact. */
#chordHelperOverlay .chordBtn,
#chordExplorer .chordBtn {
	display:inline-grid;
	justify-items:center;
	background:var(--site-tetriary-button-col);
	border:0px solid var(--site-border-color);
	border-radius:var(--site-border-radius);
	cursor:pointer;
	text-align:center;
	white-space:nowrap;
	line-height:1.1;
}
#chordHelperOverlay .chordTypeTag,
#chordExplorer .chordTypeTag { color:var(--site-beatlabel); }
#chordHelperOverlay .chordWarn,
#chordExplorer .chordWarn {
	color:var(--site-warning-col);
	margin-bottom:0.5rem;
	/* Full-row span: without this the warning becomes a grid child in
	   column 1 and shifts every following chord row sideways. */
	grid-column:1 / -1;
}
@media (max-width:600px) {
	/* Same single-row-per-chord layout; the notes column is hidden on
	   narrow screens (the buttons already show each voicing's note names)
	   and the auto columns all shrink to their content. */
	#chordHelperOverlay .chordTable,
	#chordExplorer .chordTable { grid-template-columns:auto auto minmax(0,1fr); }
	#chordHelperOverlay .chordNotes,
	#chordExplorer .chordNotes { display:none; }
}

/* --- notationReplay.php real-time bar editing (owner only, replayEdit.js).
   Scoped to the replay page's own classes/ids so every other page's
   layout and the shared print styles stay untouched. */
body.replayEditMode .noteRow { cursor: pointer; }
body.replayEditMode .noteRow:hover { outline: 1px solid var(--site-hover-border-col); }
.noteRow.rowEditing { outline: 1px solid var(--site-hover-border-col); }
.noteRow.rowEditing .noteCell input.in3char {
	/* full-cell-width editing input matching the editor's grid inputs */
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 2px 0;
	font: inherit;
	text-align: center;
	border: 1px solid var(--site-input-border-col);
	border-radius: 0;
}
.noteRow.rowEditing .loopBarRow {
	/* second grid row below the pinned cells, spanning the whole bar */
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: 0.4rem;
	text-align: center;
	font-weight: normal;
}
.noteRow.rowEditing .loopBarBtn {
	/* toggle button (Loop this bar <-> Stop looping this bar), not a
	   checkbox: it is an action, and its .active state shows the looping bar */
	width: auto;
	padding: 0.35rem 1.2rem;
	cursor: pointer;
	font: inherit;
	color: var(--site-text);
	background: var(--site-secondary-button-col);
	border: 1px solid var(--site-submitBtn-border-col);
	border-radius: var(--site-border-radius);
}
.noteRow.rowEditing .loopBarBtn.active {
	background: var(--site-primary-button-col);
	font-weight: 600;
}
/* The author display:flex below would otherwise defeat the UA's
   [hidden] { display:none } rule (author origin always wins -- same trap as
   #chordNameWrap above), which exposed this bar from page load as an
   orphaned Save/Discard pair. This rule is required. */
#replayActionBar[hidden] {
	display: none;
}
#replayActionBar {
	/* sticky dirty-only action bar: anchored to the viewport bottom so the
	   only save affordance stays reachable even below a long part */
	position: sticky;
	bottom: 0;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1ch;
	box-sizing: border-box;
	width: 100%;
	max-width: 750px;
	margin: 0.5rem auto 0 auto;
	padding: 0.5rem 0;
	background: var(--site-bg); /* solid, no shadow/blur */
}
#replayActionBar button {
	width: auto;
	padding: 0.4rem 1rem;
}

@media print {
  @page {
    margin: 8mm;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-size: 14pt;
    line-height: 1.2;
  }

  main {
    display: block;
    width: 100%;
    margin: 0;
  }

  #config {
    display: block;
    margin: 0 0 5mm;
    text-align: center;
  }

  #config h2 {
    margin: 0 0 2mm;
    font-size: 22pt;
    font-weight: 750;
    line-height: 1.05;
  }

  #config > div {
    display: inline;
    font-size: 13pt;
  }

  .notationMeta {
    font-size: 11pt;
    font-weight: 500;
  }

  #parts {
    display: block;
    width: 100%;
  }

  .partTitle {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 4mm;
    padding: 1.5mm 2.5mm;
    font-size: 16pt;
    font-weight: 700;
    font-style: italic;
    line-height: 1.1;
  }

  .partComment {
    margin: -2mm 0 3mm;
    font-size: 11pt;
    line-height: 1.2;
  }

  .partTitle:empty { display:none; }
  .partComment:empty { display: none; }

  .partCont {
    width: 100%;
    margin: 0 0 7mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .notation {
    width: calc(100% - 3mm);
    margin-right: auto;
    margin-left: auto;
  }

  .notationGrid {
    width: 100%;
    column-gap: 2mm;
    justify-content: stretch;
    grid-template-columns: repeat(var(--cell-count, 16), minmax(0, 1fr));
  }

  .noteRowsBlock {
    box-sizing: border-box;
    width: auto;
    margin: 0 -1.5mm;
    padding: 2mm 1.5mm;
    border-radius: 1mm;
    row-gap: 1.5mm;
  }

  .noteRow { min-height: 7mm; }

  .beatLabel {
    box-sizing: border-box;
    min-width: 0;
    padding-right: 0.5mm;
    padding-left: 1mm;
    font-size: 16pt;
    line-height: 1;
    text-align: left;
  }

  #parts .compactNotation .beatLabel {
    padding-right: 0;
    padding-left: 0.25mm;
    font-size: 11pt;
  }

  .noteCell {
    box-sizing: border-box;
    min-width: 0;
    padding-right: 0.5mm;
    padding-left: 1mm;
    letter-spacing: 0.01em;
  }

  #parts .noteCell {
    font-size: 21pt;
    font-weight: var(--parts-note-font-weight, 700);
    line-height: 1.2;
  }

  #parts .compactNotation .noteCell {
    padding-right: 0;
    padding-left: 0.25mm;
    font-size: 14pt;
  }

  #parts .LeftHand { font-weight: 800; }

  .np, .noPrint, #topNav, #help, #themeToggle {
    display: none !important;
  }

  a { text-decoration: none; }
  a::after { content: "(" attr(href) ")"; }
}