@charset "UTF-8";

:root {
--staff-url: url("../img/staff.svg");
--whole-note-url: url("../img/whole-note.svg");
--treble-clef-url: url("../img/treble-clef.svg");
--ledger-line-url: url("../img/ledger-line.svg");
--accidental-sharp-url: url("../img/accidental-sharp.svg");
--accidental-natural-url: url("../img/accidental-natural.svg");
--accidental-flat-url: url("../img/accidental-flat.svg");

--base-color: rgba(242 242 246);
--translucent-base-color: rgba(250 250 250 / 0.75);
--button-base-color: rgba(250 250 250);
--staff-base-color: rgba(254 254 254);
--accent-color: rgba(58 131 242);

--button-shadow-offset: 3px;
--button-shadow-blur: 0.4rem;
--button-shadow-color: rgba(0 0 0 / 0.1);
--active-button-shadow-color: rgba(0 0 0 / 0.5);

--upper-staff-scaling: 0.25;

--input-staff-scaling: 0.5;
--staff-line-spacing: calc(36px * var(--input-staff-scaling));
--input-staff-vertical-offset: calc(var(--staff-line-spacing) * 1.5);

--fingering-image-scale: 0.5;
}

/*reset*/
*,*::before,*::after {
margin:0;
padding:0;
box-sizing:border-box
}
:where([hidden]:not([hidden='until-found'])) {
display:none!important
}
:where(html) {
-webkit-text-size-adjust: none;
color-scheme: dark light;
tab-size: 2;
scrollbar-gutter: stable
}
@media (prefers-reduced-motion:no-preference) {
:where(html:focus-within){
scroll-behavior: smooth
}
}
:where(body) {
line-height: 1.5;
font-family: system-ui,sans-serif;
-webkit-font-smoothing:antialiased
}
:where(button) {
all:unset
}
:where(input,button,textarea,select) {
font:inherit;
color:inherit
}
:where(textarea) {
resize:vertical;
resize:block
}
:where(button,label,select,summary,[role='button'],[role='option']) {
cursor:pointer
}
:where(:disabled) {
cursor:not-allowed
}
:where(label:has(>input:disabled),label:has(+input:disabled)) {
cursor:not-allowed
}
:where(a) {
color:inherit;
text-underline-offset:.2ex
}
:where(ul,ol){
list-style:none
}
:where(img,svg,video,canvas,audio,iframe,embed,object) {
display:block
}
:where(img,picture,svg,video) {
max-inline-size:100%;
block-size:auto
}
:where(p,h1,h2,h3,h4,h5,h6) {
overflow-wrap:break-word
}
:where(h1,h2,h3) {
line-height:calc(1em + 0.5rem);
text-wrap:balance
}
:where(hr) {
border:none;
border-block-start:1px solid;
color:inherit;block-size:0;
overflow:visible
}
:where(dialog) {
border:none;
background:none;
inset:unset;
max-width:unset;
max-height:unset
}
:where(dialog:not([open])) {
display:none!important
}
:where(:focus-visible) {
outline:none;
box-shadow:none;
outline-offset:1px
}
:where(:focus-visible,:target) {
scroll-margin-block:8vh
}
:where(.visually-hidden:not(:focus-within,:active)) {
clip-path:inset(50%)!important;
height:1px!important;
width:1px!important;
overflow:hidden!important;
position:absolute!important;
white-space:nowrap!important;
border:0!important
}
/*reset-end*/

html {
line-height: 1.5em;
text-size-adjust: none;
touch-action: manipulation;
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}

body {
color: #333;
background-color: var(--base-color);
width: 100vw;
}

h1 {
margin: 0;
padding: 0;
}

h1 svg {
margin: 1rem auto;
width: 60vw;
max-height: 21px;
}

main {
position: relative;
width: 100vw;
max-width: calc(480px + var(--button-shadow-offset) * 2 + var(--button-shadow-blur) * 2);
margin: 0 auto;
overflow-x: clip;
}

#input,
#result {
width: 96vw;
max-width: 480px;
margin: auto;
transition: .25s;
}

#input {
position: relative;
}

#result {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
}

body.input #input {
left: 0;
opacity: 1;
visibility: visible;
}

body.input #result {
left: 100vw;
opacity: 0;
visibility: hidden;
}

body.result #input {
left: -100vw;
opacity: 0;
visibility: hidden;
}

body.result #result {
left: 0;
opacity: 1;
visibility: visible;
}

#error {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0, 0);
overflow: hidden;
text-align: center;
width: 95vw;
min-height: 25vh;
padding: 1rem;
background: var(--translucent-base-color);
box-shadow: 0px 0px 9px 0px rgba(0 0 0 / 0.1);
border-radius: 1rem;
backdrop-filter: blur(9px);
opacity: 0;
visibility: hidden;
transition: .25s;
}

body.error #error {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1, 1);
}

body.error #input {

}

#error p {
color: rgb(255 0 0);
font-size: 1rem;
font-weight: bold;
text-align: center;
}

#result.loading * {
opacity: 0.25;
}

#result.loading svg {
opacity: 1;
}

button {
-webkit-user-select: none;
user-select: none;
}

#submit-note-order,
#input-field,
#submit-note-order,
#accidental-button-group,
#up-down-button-group {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}

#accidental-button-group,
#up-down-button-group {
flex-direction: column;
align-items: center;
justify-content: center;
}

#input-note {
margin: auto;
display: grid;
grid-template-columns: 1fr 4rem 4rem;
gap: 0.5rem;
position: relative;
}

#staff {
grid-column-start: 1;
grid-column-end: 2;
position: relative;
display: flex;
align-items: center;
height: calc(590px * var(--input-staff-scaling));
background-image: var(--staff-url);
background-size: calc(200px * var(--input-staff-scaling)) auto;
background-repeat: repeat-x;
background-position: center calc(50% + var(--input-staff-vertical-offset));
overflow: hidden;
}

#staff::before {
content: "";
display: block;
position: absolute;
top: calc(-72px * var(--input-staff-scaling) + var(--input-staff-vertical-offset) * 2);
bottom: 0px;
margin: auto auto auto calc((92px + 18px) * var(--input-staff-scaling));
left: calc((92px + 18px + ) * var(--input-staff-scaling));
padding: 0;
width: calc(96vw - 9rem - (92px + 18px) * var(--input-staff-scaling));
min-width: calc(120px * var(--input-staff-scaling));
max-width: calc(480px - 9rem - (92px + 18px) * var(--input-staff-scaling));
height: calc(500px * var(--input-staff-scaling));
background-image: url('../img/ledger-line-guide.svg');
background-size: calc(96px * var(--input-staff-scaling)) calc(960px * var(--input-staff-scaling));
background-repeat: no-repeat;
background-position: center center;
opacity: 10%;
z-index: -2;
}

.ledger-line {
display: block;
width: calc(96px * var(--input-staff-scaling));
height: calc(4px * var(--input-staff-scaling));
position: absolute;
top: 0px;
bottom: 0px;
left: calc((92px + 18px) * var(--input-staff-scaling));
right: 0px;
margin: auto;
z-index: -1;
}

#treble-clef {
position: relative;
top: var(--input-staff-vertical-offset);
width: calc(92px * var(--input-staff-scaling));
height: calc(260px * var(--input-staff-scaling));
margin-left: calc(18px * var(--input-staff-scaling));
flex-shrink: 0;
}

#note {
writing-mode: vertical-lr;
direction: rtl;
position: relative;
width: calc(96vw - 9rem - (92px + 18px) * var(--input-staff-scaling));
height: calc(600px * var(--input-staff-scaling));
top: calc(-36px * var(--input-staff-scaling) + var(--input-staff-vertical-offset));
margin: 0 auto;
padding: 0;
appearance: none;
background: transparent;
touch-action: none;
}

#note::-webkit-slider-runnable-track {
appearance: none;
width: 100%;
}

#note::-webkit-slider-thumb {
appearance: none;
cursor: grab;
display: block;
width: 100%;
min-width: calc(120px * var(--input-staff-scaling));
max-width: calc(480px - 9rem);
height: calc(133px * var(--input-staff-scaling));
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
background-image: var(--whole-note-url);
background-size: calc(72px * var(--input-staff-scaling)) calc(40px * var(--input-staff-scaling));
background-repeat: no-repeat;
background-position: left 50% center;
}

#note::-webkit-slider-thumb:active {
cursor: grabbing;
transform-origin: center;
transition: .1s;
transform: scale(1.1);
}


#note.sharp::-webkit-slider-thumb {
background-image: var(--whole-note-url), var(--accidental-sharp-url);
background-size: calc(72px * var(--input-staff-scaling)) calc(40px * var(--input-staff-scaling)), calc(36px * var(--input-staff-scaling)) calc(108px * var(--input-staff-scaling));
background-position: left 50% center, left calc(50% - 36px) center;
}

#note.flat::-webkit-slider-thumb {
background-image: var(--whole-note-url), var(--accidental-flat-url);
background-size: calc(72px * var(--input-staff-scaling)) calc(40px * var(--input-staff-scaling)), calc(32px * var(--input-staff-scaling)) calc(133px * var(--input-staff-scaling));
background-position: left 50% center, left calc(50% - 32px) center;
}


#input-field {
grid-column-start: 1;
grid-column-end: 4;
}


#note-name {
font-weight: bold;
font-size: 2rem;
line-height: calc(3rem - 4px);
height: 3rem;
max-width: 50vw;
border: solid 2px rgb(192 192 192);
border-radius: 0.5rem;
text-align: center;
background-color: var(--button-base-color);
flex: 2;
}

#input-note-button,
#submit-note-order-button,
#backspace-button {
font-weight: bold;
font-size: 1.75rem;
line-height: 3rem;
text-align: center;
height: 3rem;
padding: 0 1.5rem;
border-radius: 0.5rem;
background-color: var(--button-base-color);
box-shadow: var(--button-shadow-offset) var(--button-shadow-offset) var(--button-shadow-blur) 0px var(--button-shadow-color);
transition: .1s;
}

#back-button {
font-weight: bold;
font-size: 1.25rem;
line-height: 2rem;
text-align: center;
height: 2rem;
padding: 0 1.5rem;
border-radius: 0.5rem;
background-color: var(--button-base-color);
box-shadow: var(--button-shadow-offset) var(--button-shadow-offset) var(--button-shadow-blur) 0px var(--button-shadow-color);
transition: .1s;
}

@media (hover: hover) {
#submit-note-list li:hover .note-label,
#submit-note-list li:hover .note-delete-button {
display: block;
background-color: rgba(0 0 0 / 0.3);
}

#submit-note-list li:hover .note-delete-button:hover {
background-color: rgba(0 0 0 / 1);
}

#submit-note-order-button:hover {
color: rgba(240 240 255);
}

#input-note-button:hover,
#backspace-button:hover,
#back-button:hover,
#accidental-button-group input[type=radio]:hover,
#up-down-button-group button:hover,
#rewind-forward-button-group button:hover {
color: rgb(128 128 128);
background-color: rgb(250 250 250);
}
}

#input-note-button:active,
#submit-note-order-button:active,
#backspace-button:active,
#back-button:active,
#accidental-button-group input[type=radio]:active,
#up-down-button-group button:active,
#rewind-forward-button-group button:active {
transform: scale(0.9);
box-shadow: 1px 1px 2px 0px var(--active-button-shadow-color);
}


#input-note-button {
flex: 1;
}

#notes-list-display {
display: none;
}

#accidental-button-group {
grid-column-start: 3;
grid-column-end: 4;
-webkit-user-select: none;
user-select: none;
}

#accidental-button-group input[type=radio] {
-webkit-appearance: none;
cursor: pointer;
width: 3rem;
height: 3rem;
border-radius: 3rem;
text-align: center;
background-color: var(--button-base-color);
box-shadow: var(--button-shadow-offset) var(--button-shadow-offset) var(--button-shadow-blur) 0px var(--button-shadow-color);
}

#accidental-button-group label {
display: none;
}

#accidental-button-group input[type=radio]:checked {
display: none;
}

#sharp-button {
background-image: var(--accidental-sharp-url);
background-size: calc(36px * 0.25) calc(108px * 0.25);
background-repeat: no-repeat;
background-position: center;
}

#flat-button {
background-image: var(--accidental-flat-url);
background-size: calc(32px * 0.25) calc(133px * 0.25);
background-repeat: no-repeat;
background-position: center 75%;
}

#natural-button {
background-image: var(--accidental-natural-url);
background-size: calc(24px * 0.25) calc(104px * 0.25);
background-repeat: no-repeat;
background-position: center;
}

#accidental-button-group:has(#sharp-button:checked) #natural-button {
background-color: rgb(248 248 255);
background-image: var(--accidental-sharp-url);
background-size: calc(36px * 0.25) calc(108px * 0.25);
box-shadow: 1px 1px 2px 0px var(--active-button-shadow-color);
border: solid 3px var(--accent-color);
}

#accidental-button-group:has(#flat-button:checked) #natural-button {
background-color: rgb(248 248 255);
background-image: var(--accidental-flat-url);
background-size: calc(32px * 0.25) calc(133px * 0.25);
background-position: center calc(75% + 1.5px);
box-shadow: 1px 1px 2px 0px var(--active-button-shadow-color);
border: solid 3px var(--accent-color);
}

#up-down-button-group {
grid-column-start: 2;
grid-column-end: 3;
justify-content: space-between;
}

#up-down-button-group button {
margin: 1rem 0;
}

#up-down-button-group button,
#rewind-forward-button-group button {
width: 3rem;
height: 3rem;
border-radius: 3rem;
text-align: center;
background-color: var(--button-base-color);
box-shadow: var(--button-shadow-offset) var(--button-shadow-offset) var(--button-shadow-blur) 0px var(--button-shadow-color);
}

input:disabled,
button:disabled {
opacity: 0.25;
}

#submit-note-list {
display: flex;
justify-content: start;
position: relative;
align-items: center;
width: 96vw;
max-width: 480px;
height: calc(720px * var(--upper-staff-scaling));
margin: 0.5rem auto;
border-radius: 1rem;
background-color: var(--staff-base-color);
background-image: var(--staff-url);
background-size: calc(200px * var(--upper-staff-scaling)) auto;
background-repeat: repeat-x;
background-position: center;
overflow: scroll hidden;
-webkit-user-select: none;
user-select: none;
}

#submit-note-list::before {
content: "";
background-image: var(--treble-clef-url);
background-repeat: no-repeat;
width: calc(92px * var(--upper-staff-scaling));
height: calc(260px * var(--upper-staff-scaling));
max-width: calc(92px * var(--upper-staff-scaling) + 1rem);
margin: 0 0 0 6px;
flex-shrink: 0;
flex-grow: 1;
}


#submit-note-list li {
position: relative;
top: 0px;
width: calc(120px * var(--upper-staff-scaling));
height: calc(133px * var(--upper-staff-scaling));
background-color: transparent;
margin: 0;
color: rgba(0,0,0,0);
flex-shrink: 0;
flex-grow: 2;
max-width: 20%;
}

#submit-note-list li:has(.accidental) {
margin-left: calc(3rem * var(--upper-staff-scaling));
}

#submit-note-list .whole-note {
position: absolute;
top: calc(50% - calc(40px * var(--upper-staff-scaling) / 2));
left: calc(120px * var(--upper-staff-scaling) - 72px * var(--upper-staff-scaling));
width: calc(72px * var(--upper-staff-scaling));
height: calc(40px * var(--upper-staff-scaling));
z-index: 1;
}

#submit-note-list li:active .whole-note {
transform: scale(0.9);
}

#submit-note-list .accidental {
position: absolute;
left: 0;
width: calc(36px * var(--upper-staff-scaling));
height: calc(108px * var(--upper-staff-scaling));
}


#submit-note-list li.current .whole-note use,
#submit-note-list li.current .accidental use {
fill: var(--accent-color);
}

#submit-note-list li.sharp .accidental {
top: calc(50% - calc(108px * var(--upper-staff-scaling) / 2));
width: calc(36px * var(--upper-staff-scaling));
height: calc(108px * var(--upper-staff-scaling));
}

#submit-note-list li.flat .accidental {
top: calc(50% - calc(133px * var(--upper-staff-scaling) / 2));
width: calc(32px * var(--upper-staff-scaling));
height: calc(133px * var(--upper-staff-scaling));
}

#submit-note-list li.natural .accidental {
top: calc(50% - calc(104px * var(--upper-staff-scaling) / 2));
left: 2px;
width: calc(24px * var(--upper-staff-scaling));
height: calc(104px * var(--upper-staff-scaling));
}

#submit-note-list .list-ledger-line {
position: absolute;
top: 0;
margin-top: calc(66px *  var(--upper-staff-scaling));
left: calc(120px * var(--upper-staff-scaling) - 86px * var(--upper-staff-scaling));
width: calc(96px * var(--upper-staff-scaling));
height: calc(4px * var(--upper-staff-scaling));
}

#submit-note-list .note-label {
background: rgba(0 0 0 / 0.5);
color: rgb(255 255 255);
position: absolute;
font-size: 0.75rem;
font-weight: bold;
text-align: center;
border-radius: 1rem;
width: calc(10rem * var(--upper-staff-scaling));
margin: 0 auto;
padding: 0 calc(0.4rem * var(--upper-staff-scaling));
display: none;
}

#submit-note-list li.active .note-label {
display: block;
}

#submit-note-list li:active .note-label {
background-color: rgba(0 0 0 / 0.75);
}

#submit-note-list li.current .note-label {
display: block;
background: var(--accent-color);
}

.note-delete-button {
position: absolute;
top: 0;
left: calc(72px * var(--upper-staff-scaling) + 12px);
width: 18px;
height: 18px;
padding: 0;
border-width: 0;
border-radius: 50%;
background-color: rgba(0 0 0 / 0.5);
display: none;
}

.note-delete-button:active {
transform: scale(0.75);
}

.note-delete-button svg {
width: 9px;
height: 9px;
margin: auto;
}

.note-delete-button svg use {
fill: rgb(255 255 255);
}

#submit-note-list li.active .note-delete-button {
display: block;
}

#submit-note-order {
margin: 1rem auto 0.5rem;
}

#submit-note-order-button {
flex: 2;
background-color: var(--accent-color);
color: rgba(255 255 255);
}


#clear-button {
flex: 1;
font-size: 1.75rem;
font-weight: 500;
}

#fingering-image-area {
display: flex;
align-items: center;
justify-content: center;
}

#rewind-forward-button-group {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
top: calc(480px * var(--fingering-image-scale));
}

#rewind-forward-button-group button {
margin: 1rem;
}

#fingering-image-area {

}

#Boehm-System-Clarinet {
width: calc(240px * var(--fingering-image-scale));
height: calc(720px * var(--fingering-image-scale));
}

#display-pattern {
display: none;
}

.single #display-pattern {
display: block;
font-weight: 600;
font-size: 1.25rem;
line-height: 2rem;
height: 2rem;
border-radius: 1rem;
text-align: center;
background-color: var(--button-base-color);
flex: 2;
}

#debug-field {
border: 0px;
background: var(--base-color);
}

nav ul {
list-style: none;
font-weight: bold;
position: absolute;
width: calc(100vw - 1rem);
max-width: 440px;
top: 0.5rem;
right: 0.5rem;
margin: 0 auto;
padding: 0;
border-radius: 1rem;
background-color: rgb(255 255 255 / 0.25);
transform-origin: top;
z-index: 3;
/*transition: 0.2s ease-in-out 0.1s;*/
will-change: auto;
backdrop-filter: blur(9px);
box-shadow: 0px 0px 9px 0px rgba(0 0 0 / 0.25);
transform: scale(1, 0);
opacity: 0;
}

nav ul a {
display: block;
text-align: center;
margin: 0 auto;
padding: 1.25rem;
width: calc(100% - 4rem);
font-size: 1rem;
letter-spacing: 0.25rem;
color: rgb(64 64 64 / 0.75);
transition: 0.2s;
text-decoration: none;
}

nav ul li:nth-child(n+2) a {
border-top: 1px solid rgb(128 128 128 / 0.5);
}

nav.open ul {
transition: 0.2s;
transform: scale(1, 1);
opacity: 1;
}

nav.open::before {
content: "";
position: fixed;
top: 0;
height: 100vh;
height: 100svh;
width: 100vw;
background: rgb(255 255 255 / 0.25);
backdrop-filter: blur(3px);
z-index: 1;
}

#share a {
padding-bottom: 0.25rem;
transition: none;
}

.copy-url {
letter-spacing: 0;
color: var(--accent-color);
}

#share-url {
font-weight: 300;
font-size: 0.75rem;
line-height: 1rem;
border: solid 2px rgb(192 192 192);
border-radius: 0.5rem;
height: 1.75rem;
text-align: left;
background-color: var(--button-base-color);
width: 80%;
margin: 0.25rem 10% 1.5rem;
padding: 0.5rem;
}

#menu-toggle {
position: absolute;
top: 0;
right: 0;
margin: 1.25rem;
z-index: 4;
}

#menu-toggle svg {
width: 16px;
height: 16px;
}

#menu-toggle svg use {
fill: rgb(128 128 128);
}

nav #menu-toggle svg.menu-open {
display: none;
}

nav.open #menu-toggle svg.menu-close {
display: none;
}

nav.open #menu-toggle svg.menu-open {
display: block;
}

footer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0, 0);
overflow: hidden;
text-align: center;
width: 95vw;
max-width: 360px;
padding: 1rem;
background: var(--translucent-base-color);
box-shadow: 0px 0px 9px 0px rgba(0 0 0 / 0.1);
border-radius: 1rem;
backdrop-filter: blur(9px);
opacity: 0;
visibility: hidden;
transition: .25s;
}

footer.open {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1, 1);
}

footer .close-button {
position: absolute;
top: 1rem;
right: 1rem;
width: 32px;
height: 32px;
padding: 0;
border-width: 0;
border-radius: 50%;
text-align: center;
color: rgba(64 64 64);
background-color: rgba(255 255 255 / 0.5);
box-shadow: var(--button-shadow-offset) var(--button-shadow-offset) var(--button-shadow-blur) 0px var(--button-shadow-color);
transition: .1s;
}

footer .close-button svg {
margin: auto;
width: 16px;
height: 16px;
}

footer .close-button svg use {
fill: rgb(64 64 64);
}

footer .close-button:active {
transform: scale(0.9);
box-shadow: 1px 1px 2px 0px var(--active-button-shadow-color);
}

footer h3 {
font-size: 1rem;
color: rgb(64 64 64);
}

.version {
margin: 0.5rem auto;
}

.version,
.copyright {
font-size: 0.75rem;
color: rgb(128 128 128);
}

.spinner {
position: absolute;
width: 48px;
height: 48px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.spinner use {
position: absolute;
fill: var(--accent-color);
transform-origin: center;
animation: spinner .75s infinite linear;
}
@keyframes spinner {
100% {transform:rotate(360deg)}}

/* fingering-image */

.tone-hole {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
stroke-width: 1.5;
transition: fill 250ms, stroke 250ms;
}

.key {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
stroke-width: 1;
stroke-miterlimit: 10;
transition: fill 250ms, stroke 250ms;
}

.on {
fill: var(--accent-color);
stroke: var(--base-color);
animation-name: keyOn;
animation-duration: 250ms;
animation-delay: 0ms;
animation-iteration-count: 1;
}

.off {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
animation-name: keyOff;
}

.opt {
fill: rgb(210 230 240);
stroke: rgb(128 148 192);
}

#separator {
fill: none;
stroke: rgb(64 64 64);
stroke-width: 1;
}

@keyframes keyOn {
50% {
fill: rgb(128 192 255);
}
}

@keyframes keyOff {
50% {
fill: var(--base-color);
}
}