@page {
size: A4 portrait;
margin: 0mm;
}

:root {
--base-color: rgba(255 255 255);
--translucent-base-color: rgba(255 255 255);
--button-base-color: rgba(255 255 255);
--staff-base-color: rgba(255 255 255);
--accent-color: rgba(0 0 0);

--upper-staff-scaling: 0.4;
--fingering-image-scale: 0.75;
}

body {
color: rgb(0 0 0);
background-color: rgb(255 255 255);
width: 210mm;
height: 295mm;
display: grid;
grid-template-rows: 24mm 96mm 168mm;
gap: 0;
margin: 1mm 0;
}

h1 {
color: rgb(0 0 0);
height: 24mm;
}

h1 svg {
width: 100%;
max-height: 16mm;
margin: 4mm auto;
}

#submit-note-list {
width: 100%;
max-width: none;
height: 96mm;
-webkit-print-color-adjust: exact;
}

#submit-note-list li:not(.current) {
display: none;
}

main {
display: block;
width: 100%;
height: 168mm;
max-width: none;
}

#input, #result {
translate: none !important;
position: relative;
}

nav,
footer {
display: none;
}

button {
display: none;
}

.tone-hole,
.key {
stroke: rgb(0 0 0);
}

.opt {
fill: rgb(128 128 128);
}