:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{display:grid;place-items:center;margin:0;overflow:auto;height:100vh}@media (max-width: 768px){body{overflow:auto;height:100vh}.song-component{text-align:center;display:flex;position:relative;justify-content:center;align-items:center;min-width:340px;padding:3px 3px 1px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;transition:box-shadow .3s ease}.song-component.active{box-shadow:0 0 0 3px green;border:0px}}h1{font-size:3em;margin-top:-40px;margin-bottom:0}h3{margin:7px;text-align:center}h4{margin:10px}button,input{border-radius:4px;border:2px solid green;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:all .2s ease-in-out}button:hover,input:hover{background:#4caf50;color:#fff;border-color:#388e3c}button:active,input:active{transform:scale(.94)}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button,input,select{background-color:#fff;color:#213547}i{color:#213547}}.play-pause-button{margin-top:11px;margin-bottom:5px;padding:6.5px 15px;transition:transform .2s ease}.play-again-high-score{margin-top:11px;margin-bottom:10px;padding:7.5px 10px}input,select{padding:.4em 1em;margin-bottom:10px}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:15px;border-radius:10px;margin-right:14px;margin-top:6px;overflow:hidden}progress::-webkit-progress-bar{background-color:#eeeded;border-radius:10px}progress::-webkit-progress-value{background:linear-gradient(90deg,#367be9,#2049ef);border-radius:10px}progress::-moz-progress-bar{background:linear-gradient(90deg,#367be9,#2049ef);border-radius:10px}p{margin-block-start:0em;margin-block-end:0em}@media (min-width: 768px){.song-component{text-align:center;display:flex;position:relative;justify-content:center;align-items:center;min-width:420px;padding:3px 3px 1px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;transition:box-shadow .3s ease}.song-component.active{box-shadow:0 0 0 3px green;border:0px}}.right-content{position:absolute;right:10px}.play-pause-progress{display:flex;gap:5px;padding-bottom:7px;justify-content:center;padding-top:5px;align-items:center;text-align:center}.submission-div{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:7px;justify-content:center}.form_class{display:flex}.components-container{display:flex;flex-direction:column;gap:10px}.submit-button{padding-top:7px;margin-left:7px}.result-div{text-align:center;margin:auto;height:5%;padding-top:20px;z-index:9999}.new-game{display:flex;justify-content:center;align-items:center;gap:10px}.instructions-div{background-color:#fff;z-index:1}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}@media (max-width: 2560px){.modal-box{background:#fff;padding:30px 50px;border-radius:10px;box-shadow:0 4px 6px #0000001a;align-items:center;position:relative;z-index:1001}.modal-box h2{text-align:center;margin-bottom:30px}.modal-box button{text-align:center;align-items:center}}@media (max-width: 1024px){.modal-box{background:#fff;padding:30px 50px;border-radius:10px;box-shadow:0 4px 6px #0000001a;width:400px;align-items:center;position:relative;z-index:1001}.modal-box h2{text-align:center;margin-bottom:30px}.modal-box button{text-align:center;align-items:center}}@media (max-width: 800px){.modal-box{background:#fff;padding:30px 50px;border-radius:10px;box-shadow:0 4px 6px #0000001a;width:380px;align-items:center;position:relative;z-index:1001}.modal-box h2{text-align:center;margin-bottom:30px}.modal-box button{text-align:center;align-items:center}}@media (max-width: 600px){.modal-box{background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 6px #0000001a;width:350px;align-items:center;position:relative;z-index:1001}.modal-box h2{text-align:center;margin-bottom:30px}.modal-box button{text-align:center;align-items:center}}@media (max-width: 450px){.modal-box{background:#fff;padding:10px;border-radius:10px;box-shadow:0 4px 6px #0000001a;width:350px;align-items:center;position:relative;z-index:1001}.modal-box h2{text-align:center;margin-bottom:30px}.modal-box button{text-align:center;align-items:center}}.close{color:#aaa;float:right;float:top;font-size:28px;font-weight:700}@media (prefers-color-scheme: dark){button,input,select{background-color:#222;color:#fff}i,body{color:#fff}progress::-webkit-progress-bar{background-color:#323332}progress{background-color:#323332}}@media (prefers-color-scheme: dark){.chart-label-x{color:#fff!important}}