html{box-sizing:border-box;}*{box-sizing:inherit;}body{margin:0;}:root{--color-p-red:#feb6b7;--color-t-red-orange:#fccabf;--color-s-orange:#fbd1b9;--color-t-yellow-orange:#fcdeba;--color-p-yellow:#faf5b5;--color-t-yellow-green:#deeebf;--color-s-green:#b9e6c7;--color-t-blue-green:#bef1ea;--color-p-blue:#c0c4e7;--color-t-blue-violet:#c4bcd4;--color-s-violet:#b395cb;--color-t-red-violet:#e0bedf;}body{background-color:#1d1f21;color:#c5c8c6;font-family:monospace;}fieldset{border-width:1px;border-radius:1em;}select{cursor:pointer;}.hv-center{height:100vh;line-height:100vh;text-align:center;vertical-align:middle;}.column-container{display:flex;}.row-container{display:flex;flex-direction:column;}.tonnetz{height:300px;width:400px;}.contour{height:300px;flex-grow:1;}.contour-grid-major{paint-order:stroke;stroke-width:0;fill:#c5c8c6;}.contour-grid-minor{paint-order:stroke;stroke-width:0;fill:#808080;}.contour-line{paint-order:stroke;stroke-width:3;stroke:currentColor;fill:currentColor;}.tonnetz-circle{stroke-width:2;paint-order:stroke;stroke:#c5c8c6;fill:none;}.tonnetz-circle.highlight{stroke:#c5c8c6;}.tonnetz-circle:not(.highlight){stroke:#808080;}.tonnetz-circle:not(.in-scale){display:none;}.tonnetz-label{font-size:20px;}.tonnetz-label.highlight{fill:currentColor;}.tonnetz-label:not(.highlight){fill:#808080;}.cof-path{stroke-width:2;paint-order:stroke;stroke:#c5c8c6;fill:none;shape-rendering:crispEdges;}.cof-path:not(.highlight){stroke:#808080;}.cof-path:not(.in-scale){display:none;}.cof-label{font-size:20px;}.cof-label.highlight{fill:currentColor;}.cof-label:not(.highlight){fill:#808080;}.cof-label:not(.in-scale):not(.highlight){display:none;}svg{display:block;margin:auto;}.piano{height:150px;}.piano-white{stroke-width:1;paint-order:stroke;stroke:#000000;fill:#ffffff;}.piano-white.sustained{fill:#000000;}.piano-white.out-of-key{fill:#c0c0c0;}.piano-black{stroke-width:1;paint-order:stroke;stroke:#000000;fill:#000000;}.piano-black.out-of-key{fill:#808080;}.piano-color{stroke-width:1;paint-order:stroke;stroke:#000000;fill:currentColor;}.piano-color:not(.pressed):not(.sustained):not(.overtone){opacity:0%;}.degree{color:#1d1f21;}.pressed{fill:currentColor;opacity:100%;}.sustained{fill:currentColor;opacity:80%;}.degree:not(.sustained):not(.pressed){display:none;}.octave{font-size:2em;fill:#444444;}.console{font-size:3em;text-align:center;}.padded{padding-bottom:0.25em;padding-top:0.25em;}.\31 {color:var(--color-p-yellow);}.\35 {color:var(--color-t-yellow-orange);}.\32 {color:var(--color-s-orange);}.\36 {color:var(--color-t-red-orange);}.\33 {color:var(--color-p-red);}.\37 {color:var(--color-t-red-violet);}.♯4{color:var(--color-s-violet);}.♭2{color:var(--color-t-blue-violet);}.♭6{color:var(--color-p-blue);}.♭3{color:var(--color-t-blue-green);}.♭7{color:var(--color-s-green);}.\34 {color:var(--color-t-yellow-green);}.lil-warning{color:#fff06f;}