*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background-color:#1d1d1d}h1.project-title{color:#fff;font-size:3rem;text-align:center;margin:1rem 0}p.project-info{background-color:#333;color:#fff;padding:1rem;text-align:center}.controls{display:flex;justify-content:center;gap:1rem;padding:1rem}.control-button{background-color:#333;color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;transition:background-color .3s}.control-button:hover{background-color:#555}#app{width:80%;margin:0 auto;background-color:#fff}#keyboard-guide{padding:1rem;background-color:#333;color:#fff;width:50%;margin:1rem auto;border-radius:5px}#keyboard-guide>ul>li{margin:10px;display:grid;grid-template-columns:1fr 3fr}.key{background-color:#fff;color:#333;border:3px outset #ddd;border-radius:5px;padding:1px 5px;width:min-content;height:min-content}dialog#dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:none;flex-direction:column;gap:1rem;width:300px;padding:1rem;border-radius:5px;background-color:#333;color:#fff;text-align:center}dialog#dialog h1{font-size:1.5rem}dialog#dialog p{font-size:1rem}dialog#dialog button{background-color:#fff;color:#333;width:50%;margin:0 auto;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;transition:background-color .3s}dialog#dialog button:hover{background-color:#eee}dialog#dialog button:focus{outline:none}dialog#dialog.open{display:flex}@media (max-width: 768px){#app{width:100%}#keyboard-guide{width:90%}}