:root{--bg:white;--text:black;--primary:#222;--key-color:white;--invert:1;--bg-accent:#ddd;--white-midi-bg:#ddd;--black-midi-bg:#b0b0b0;--correct-midi-bg:#0f0;--near-midi-bg:#fff700;--incorrect-midi-bg:#000}.colorblind{--correct-midi-bg:#ffa600;--near-midi-bg:#32f8ff}.dark{--bg:#222;--bg-accent:#4e4e4e;--text:white;--primary:#171f24;--key-color:#d1d1d1;--invert:0}@font-face{font-family:Sono;src:url(/fonts/Sono-Regular.ttf)format("woff2")}body{background-color:var(--bg);color:var(--text);font-family:Sono,serif;overflow:hidden}.btn{border:1.5px solid var(--text);width:35%;height:auto;color:var(--text);background-color:var(--bg);border-radius:10px;margin:10px;padding-left:20px;padding-right:20px;font-family:Sono,serif;font-size:40px}.btn-footer{width:90%;height:7%;font-size:25px;position:absolute;bottom:0}.btn-footer-block{width:90%;font-size:25px}.footer-block{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.btn:hover{cursor:pointer;background-color:#edeaea80}.btn-play{aspect-ratio:1;background-color:var(--text);border-radius:50%;justify-content:center;align-items:center;width:15%;margin-left:5%;margin-right:5%;position:relative}.btn-play:hover{cursor:pointer}.btn-play img{height:50px}.top-bar{justify-content:space-between;padding:10px;font-size:25px;display:flex}#top-row,.btn-row{justify-content:space-around;display:flex}#corner-btns{position:absolute;bottom:20px;right:20px}.btn-corner{background-color:var(--bg);border:none;margin:5px;font-family:Sono,serif;font-size:40px}.btn-corner:hover{cursor:pointer;rotate:5deg}.btn-corner img{width:auto;height:50px}#main-div{flex-direction:column;flex:1;margin-inline:auto;padding-top:max(20px,3%);display:flex}#container{flex-direction:column;height:100dvh;display:flex}#home-click:hover{cursor:pointer}#settings-container{width:100%;font-size:20px}.settings-li{justify-content:space-between;padding-top:5px;display:flex}.settings-li select{color:var(--text);background-color:var(--bg);border:none;border-bottom:1px solid #ccc;font-family:Sono,serif;font-size:15px}ul{padding-inline-start:0}#settings-top-bar{justify-content:space-between;font-size:35px;display:flex}.switch{align-items:center;width:50px;height:24px;display:inline-flex;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#ccc;border-radius:34px;position:absolute;inset:0}.slider:before{content:"";background-color:var(--bg);border-radius:50%;width:18px;height:18px;position:absolute;bottom:3px;left:3px}input:checked+.slider:before{transform:translate(26px)}#settings-list{list-style-type:none}#settings-list li{margin:5px}#popup-right{background-color:var(--bg);z-index:10;padding:5px;opacity:.98;border:1px solid #000;border-radius:5px;width:min(500px,97%);max-height:100vh;padding-top:10px;position:absolute;bottom:0;right:0;overflow-y:auto}#popup-background{width:100vw;height:100vh}#popup-header{background-color:var(--bg);justify-content:space-between;padding:5px;font-size:30px;display:flex;position:sticky;top:0}#popup-right button{color:var(--texts);background:0 0;border:none}#popup-right button img{border:none;width:auto;height:30px}#popup-right button img:hover{cursor:pointer}.help-section{border:1px solid var(--text);border-radius:4px;margin:3px;padding:5px}.help-section:hover{background-color:#edeaea80}.help-section-bio{max-height:0;margin-left:10px;margin-right:10px;line-height:1.5;transition:max-height .2s ease-in;overflow:hidden}.help-section button.open+.help-section-bio{max-height:300px}.rec-click{cursor:pointer;text-decoration:underline}.help-section button{width:100%;margin:0;font-family:Sono,serif;font-size:20px}.help-section button:hover{cursor:pointer}.color-example{border:2px solid #66666680;border-radius:5px}#color-example-list li{margin:8px;list-style-type:none}.modal-background{background-color:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.black-line{background-color:var(--primary);flex-shrink:0;width:90%;height:1px;margin:3%}.modal-window{background-color:var(--bg);color:var(--texts);border:2px solid #000;border-radius:10px;flex-direction:column;align-items:center;width:min(90%,700px);height:90%;padding:20px;display:flex;position:relative}.modal-scroll{scrollbar-width:none;flex-direction:column;align-items:center;gap:10px;height:80%;display:flex;position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#000 85%,#0000 100%);mask-image:linear-gradient(#000 85%,#0000 100%)}.close-x-modal{background-color:none;width:auto;height:40px;position:absolute;top:25px;right:25px}.close-x-modal:hover{cursor:pointer}.modal-header{font-size:3rem;font-weight:700}#copy-alert{background-color:#d8d8d8cc;border-radius:15px;align-items:center;height:50px;padding:5px;display:flex;position:absolute;bottom:10%;left:50%;transform:translate(-50%,-50%)}.btn-mobile{border:1.5px solid var(--text);width:35%;height:auto;color:var(--text);background-color:var(--bg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border-radius:3px;font-family:Sono,serif;font-size:20px}.btn-mobile:active{background-color:#edeaea80}.btn-wide{width:100%;height:8vh}.btn-svg-container{cursor:pointer;background:0 0;border:none}.btn-modal-cta{cursor:pointer;background:0 0;border:1px solid #00000078;border-radius:10px;align-items:center;width:40%;padding:1%;display:flex}.btn-modal-cta:hover{background-color:#d7d7d7}.btn-modal-cta img{flex:none}.btn-modal-cta span{text-align:center;flex:1;font-size:1.2rem}.top-bar-small{justify-content:space-between;align-items:center;padding:0 7px 7px;font-size:20px;display:flex}#top-row-mobile{justify-content:space-between;align-items:center;padding:10% 5% 5%;display:flex}#buttons-mobile-container{flex-direction:column;height:35vh;display:flex}#buttons-laptop-container{justify-content:center;gap:20px;padding:20px}.btn-play-mobile{aspect-ratio:1;background-color:var(--text);border-radius:50%;justify-content:center;align-items:center;width:40%;margin-left:5%;margin-right:5%;position:relative}.btn-play-mobile img{height:25px}#btn-guess-mobile{width:90%;height:80%}#bottom-row-mobile{flex:1;display:flex}.btn-mobile-side{border-radius:5%;height:50%}.discreteBtn{cursor:pointer;border:none}.svg-small{height:25px}.svg-med{height:40px}.svg-hover:hover{rotate:5deg}.svg-dark{filter:invert(calc(1 - var(--invert)));background-color:none}.svg-light{filter:invert(var(--invert));background-color:none}.back-arrow{z-index:10;padding-right:10px}.back-arrow:hover,.back-arrow:active{cursor:pointer}.log-entry{background-color:var(--bg-accent);border-radius:20px;margin:3px;padding:1px 10px 10px}#reset-button:hover{cursor:pointer}.bar-chart{flex-direction:row;height:180px;display:flex;position:relative}#center-loading{color:#ccc;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%)}.bar-column{flex-direction:column;flex:1;justify-content:flex-end;height:100%;margin-left:5px;margin-right:5px;display:flex}.bar-bar{text-align:center;color:#000;background-color:#ccc;height:0;font-size:small;transition:height .8s}.bar-bar:hover{background-color:#a0a0a0}.bar-guesses{background-color:#18df18}.bar-guesses:hover{background-color:#0f0}.bar-label{text-align:center;margin-top:5px}.bar-container{border:.5px solid #0000002c;border-radius:3px;width:80%;height:215px;padding:5px}.bar-container:hover{background-color:#efeeee9a}.bar-xlabel{text-align:center}.kofi-support{border:none;width:100%;height:100vh;padding:4px;position:absolute;top:-5px}.em-dash-hover:hover{cursor:pointer}.light-subheading{text-align:center;color:#8f8f8f;margin:3px 3px 4%;font-size:1.2rem}.link-small{cursor:pointer;padding:2px;font-size:.7rem;text-decoration:underline}.graph-title{text-align:center;font-weight:700}#game-gif{max-width:200px;margin-left:20px;margin-right:20px}.modal-block{background-color:#cccccc78;border-radius:1px;width:90%;margin:2px;padding:0 5px 5px}.block-header{margin-top:4px;font-size:1.2rem;font-weight:700}.instructions-text{font-size:15px;line-height:1.5}.archive-btn{background-color:var(--bg);border:2px solid var(--text);color:var(--text);cursor:pointer;border-radius:10px;width:60px;height:60px;margin:5px;font-family:Sono,serif;font-size:25px;font-weight:700}.archive-btn-solved{color:#000;background-color:#76ef7686}.archive-btn:hover{background-color:#edeaea80}.archive-container{flex-wrap:wrap;place-content:flex-start center;gap:12px;height:80%;display:flex;overflow-y:auto;-webkit-mask-image:linear-gradient(#000 90%,#0000 100%);mask-image:linear-gradient(#000 90%,#0000 100%)}#try-again{background-color:none;cursor:pointer;border:none}.even-split{justify-content:space-evenly;width:100%;display:flex}.flex-text{align-items:center;font-size:1.2rem;line-height:1.4}#end-modal-close{cursor:pointer;background:0 0;border:none;position:absolute;top:2%;right:2%}.end-modal-history{text-indent:2ch;font-size:1rem}#quip{margin-bottom:1%;font-size:1rem}#end-modal-window{height:initial}.stat-row{grid-template-columns:auto 1fr;column-gap:16px;display:grid}.stat-left{justify-self:start}.stat-right{justify-self:end;font-weight:700}@keyframes shake{0%{transform:translate(0)rotate(0)}15%{transform:translate(-2px,-1px)rotate(-.5deg)}30%{transform:translate(2px,1px)rotate(.5deg)}45%{transform:translate(-2px,1px)rotate(-.4deg)}60%{transform:translate(2px,-1px)rotate(.4deg)}75%{transform:translate(-1px,1px)rotate(-.2deg)}90%{transform:translate(1px,-1px)rotate(.2deg)}to{transform:translate(0)rotate(0)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}#piano-roll-container{flex:1;justify-content:center;width:700px;display:flex}.incorrect-shake{animation:.5s shake}#piano-roll{flex-direction:column;flex-shrink:0;width:175px;display:flex;position:relative}.white-key{box-sizing:border-box;background-color:var(--key-color);border:1px solid #000;flex:1;width:100%;height:auto}.black-key{box-sizing:border-box;background-color:#000;width:60%;position:absolute}.key-pressed{filter:brightness(.8)}.midi-input{opacity:.6;cursor:pointer;text-align:center;width:100%;min-height:20px;transform-style:preserve-3d;border:1px solid #000;border-radius:3px;flex-grow:1;transition:transform .5s ease-out;display:flex;position:relative}.midi-input:hover{opacity:1!important}#midi-window{box-sizing:border-box;background-color:var(--white-midi-bg);border-left:none;width:150%;display:flex}.midi-column{flex-direction:column-reverse;flex-grow:1;display:flex;position:relative}.select-marker{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;position:relative}.rot{transform:rotateX(180deg)}.select-marker-container{perspective:1000px;width:100%;height:100%}.select-front,.select-back{backface-visibility:hidden;border-radius:3px;position:absolute;inset:0}.select-front{background-color:var(--correct-midi-bg) }.select-back{transform:rotateX(180deg)}.green-bar{opacity:1;background-color:#0f3;width:100%;height:10px;position:absolute;top:0}.midi-white{background-color:var(--white-midi-bg)}.midi-black{background-color:var(--black-midi-bg)}.midi-locked{filter:brightness(.5)}.midi-correct{background-color:var(--correct-midi-bg);border:.5px solid #000;animation:.25s pop}.midi-near{background-color:var(--near-midi-bg)}.midi-incorrect{background-color:var(--incorrect-midi-bg)}.midi-selected{opacity:.9!important}.midi-input-arrow{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (width<=768px){#piano-roll{max-width:50px}#piano-roll-container,#container{width:100%}#main-div{padding:0}.btn{font-size:20px}.btn-play img{height:25px}.midi-input{box-sizing:border-box;border:.5px solid #000;border-radius:0}.white-key{border:.5px solid #000}#main-div{margin-inline:initial}.select-front,.select-back{border-radius:0}.bar-label{font-size:small}.modal-window{border:.5px solid #000;border-radius:5px;width:min(85%,700px);height:78%;padding:10px}.archive-btn{border:1px solid var(--text);border-radius:8px;width:50px;height:50px;font-size:17px}.modal-header{font-size:2rem}.bar-chart{height:140px}.flex-text{font-size:.9rem;line-height:1.1}.bar-container{height:175px}#end-modal-player-stats{text-align:left;place-content:center;line-height:1.3;display:grid}.end-modal-history{text-align:center;text-indent:initial;margin:0}.btn-modal-cta{border:.5px solid #00000078;border-radius:10px;margin:2%;padding:2%}.btn-modal-cta span{text-align:center;flex:1;font-size:.8rem}.light-subheading{text-align:center;font-size:1.2rem}#quip{margin-bottom:0;margin-left:10%;margin-right:10%;font-size:.7rem}#end-modal-window{min-height:70%}.black-line{width:90%;height:.5px}#history-container{scrollbar-width:none;max-height:75px;overflow-y:scroll;-webkit-mask-image:linear-gradient(#000 85%,#0000 100%);mask-image:linear-gradient(#000 85%,#0000 100%)}.link-small{font-size:.5rem}}:root{--note-area-height:30px;--whole-note-height:calc(2 * var(--note-area-height))}.staff-container{flex-direction:column-reverse;display:flex;position:relative}.staff-line{background-color:#000;height:5px}.ledger-line{background-color:#000;width:25%;height:5px;margin-left:50%;transform:translate(-50%)}.note-area{flex-direction:column;justify-content:center;height:30px;display:flex;position:relative}.note-area:hover{cursor:pointer;background-color:#ccc}.note-area-selected{background-color:#00000093}.note-area-selected:hover{background-color:#000}.note-guessed{fill:#5f5}.cluster-container{padding-left:25%;padding-right:25%}.whole-note{height:var(--whole-note-height);position:absolute;top:50%;left:65%;transform:translate(-50%,-50%)}.note-ghost{opacity:.2}.note-offset{transform:translate(29%,-50%)}#bass-clef-svg{height:calc(6 * var(--note-area-height));top:calc(4.5 * var(--note-area-height));position:absolute;left:5%}#cluster-chord-btn-container{border:1px solid #000;border-radius:10px;width:100%;height:50px;margin:20px;display:flex}#cluster-chord-btn-container button{cursor:pointer;background:0 0;border:none;width:50%;height:100%}#cluster-chord-btn-container button:hover{background-color:#cccccc9b}#cluster-chord-btn-container button:not(:last-child){border-right:1px solid #000}@media (width<=768px){.cluster-container{display:initial;width:initial}}