@charset "UTF-8";html,body{margin:0;padding:0;height:100%}html{font-family:PT Sans Caption,sans-serif}body{background-color:#1e4c5b;color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh}.popup_answer{position:fixed;padding:10px 20px;border-radius:5px;color:#1e4c5b;top:20px;left:50%;transform:translate(-50%);z-index:1000;box-shadow:0 2px 10px #0000001a}.popup_answer.correct{border:1px solid rgb(101,231,177);background:#7fffd4}.popup_answer.incorrect{border:1px solid rgb(190,83,83);background:#d16767}.halftone{display:flex;flex-flow:column;align-items:center;width:100%;max-width:800px;padding:20px;box-sizing:border-box}.halftone h1{margin-bottom:10px;font-size:2rem}.halftone h4{margin-bottom:20px;font-size:1.2rem;text-align:center}.halftone .direction-select{display:flex;align-items:center;gap:10px;margin-bottom:20px}.halftone .direction-select select{padding:5px;border-radius:4px;border:1px solid #ccc;background-color:#fff;color:#1e4c5b;font-size:1rem}.halftone .keyboard{display:flex;align-items:flex-start;justify-content:center;position:relative;margin-top:20px;height:120px}.halftone .note{width:40px;height:120px;margin:0;background-color:#fff;border:1px solid #ccc;position:relative;z-index:1;cursor:pointer;transition:all .2s ease;border-radius:0 0 3px 3px}.halftone .note.black:nth-child(2){left:40px}.halftone .note.black:nth-child(4){left:82px}.halftone .note.black:nth-child(7){left:160px}.halftone .note.black:nth-child(9){left:200px}.halftone .note.black:nth-child(11){left:240px}.halftone .note.white{padding-top:95px;box-sizing:border-box;text-align:center;font-size:8pt;padding-bottom:10px;color:#1e4c5b}.halftone .note.black{padding-top:60px;box-sizing:border-box;text-align:center;font-size:8pt;color:#fff;width:30px;height:80px;background-color:#000;border:none;position:absolute;z-index:2;top:0;margin-left:-15px;margin-right:-15px}.halftone .note.active{background-color:#e0e0e0}.halftone .note.correct{background-color:#90ee90}.halftone .help{margin-top:20px;display:flex;align-items:center;gap:10px}.halftone .help input[type=checkbox]{width:16px;height:16px}.halftone .answers{margin-top:20px;display:flex;gap:20px;font-size:1.1rem}.halftone button{margin:10px;padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .3s ease}.halftone button:hover{background-color:#0056b3}.halftone button:disabled{background-color:#ccc;cursor:not-allowed}.halftone .results_container{margin-top:20px;width:100%;max-width:600px;background-color:#ffffff1a;padding:20px;border-radius:5px;box-shadow:0 2px 10px #0000001a}.halftone .results_container h3{margin-bottom:10px;font-size:1.5rem;text-align:center;color:#fff}.halftone .results_container .results{max-height:200px;overflow-y:auto;padding:10px;background-color:#ffffff1a;border-radius:5px}.halftone .results_container .results div{margin-bottom:10px;font-size:.9rem;line-height:1.4;padding:10px;border-radius:4px;background-color:#ffffff0d;transition:background-color .3s ease}.halftone .results_container .results div.correct{background-color:#90ee9033;border-left:4px solid #90ee90}.halftone .results_container .results div.incorrect{background-color:#d1676733;border-left:4px solid #d16666}.halftone .results_container .results div:last-child{margin-bottom:0}