body,h1{padding:0;margin:0}body{font-family:Arial,sans-serif;flex-direction:column;min-height:100vh;background-color:#f4f4f4;background:url(notes/bg.webp);background-size:cover}h1{color:#333;font-size:1.2em;text-align:center}.game-container,.staff-container,body{display:flex;justify-content:center;align-items:center}.game-container{background-color:#fff;border-radius:10px;min-height:300px;box-shadow:0 4px 8px rgba(0,0,0,.1);padding:1em;flex-direction:column;gap:0;width:580px}.staff-container{user-select:none;background:#fff;width:100%;padding:0;text-align:center;height:280px;margin-bottom:0}.note-buttons button,.settings-buttons button{padding:10px 20px;font-size:1em;font-weight:700;cursor:pointer;border:0;border-radius:5px;background-color:#007bff;color:#fff;transition:background-color .3s ease}.note-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.note-buttons button{padding:12px 25px;font-size:1.2em}.note-buttons button:hover{background-color:#0056b3}.timer-container{font-size:1.4em;font-weight:700;color:#555;text-align:right}.score-container{font-size:1.4em;font-weight:700;color:#228b22}.info-row{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:10px;gap:30px}.made-by{font-size:1em;color:#888;margin-top:10px}.piano-key.correct{background-color:#28a745}.piano-key.incorrect{background-color:#dc3545}fieldset{border:1.5px solid #b3c6ff;border-radius:6px;margin:1em 0 0;padding:.3em .5em .5em .3em;background:#f7faff}label,legend{font-size:1em;color:#2a4d8f}legend{font-weight:700;letter-spacing:.5px}label{margin-right:1em;cursor:pointer}input[type=checkbox]{accent-color:#7faaff;width:24px;height:24px;min-width:24px;min-height:24px;margin-right:.3em;vertical-align:middle}.piano-keys{user-select:none;outline:0;position:relative;margin-top:0;margin-bottom:2em}.piano-keys,.white-keys{display:flex;justify-content:center;align-items:flex-end}.black-keys,.piano-key{user-select:none;align-items:flex-end}.black-keys{position:absolute;display:flex;justify-content:center;margin-bottom:51px;margin-left:-15px}.piano-key{width:40px;height:150px;margin:1px;border:1px solid #000;border-radius:4px;background:#fff;box-shadow:0 4px 6px rgba(0,0,0,.1);display:inline-flex;flex-direction:column;justify-content:flex-end;font-size:.8em;color:#333;cursor:pointer;-webkit-tap-highlight-color:transparent}.piano-key.pressed{box-shadow:inset 0 2px 4px rgba(0,0,0,.4);transform:translateY(4px)}.piano-key:focus{outline:0}.piano-key.black{width:30px;height:100px;background:#000;color:#fff;margin:0 0 0 13px;z-index:1;box-shadow:0 4px 6px rgba(0,0,0,.3)}.piano-key.spacer{background:0 0;border:0;box-shadow:none;cursor:default}.note-settings{display:grid;grid-template-columns:repeat(4,auto);gap:10px 20px}.start-button{padding:12px 30px;font-size:1.2em;font-weight:700;cursor:pointer;border:0;border-radius:5px;background-color:#2874a7;color:#fff;transition:background-color .3s ease;margin-top:20px}.start-button:hover{background-color:#1b4f73}.hidden{display:none}@media (max-width:767px){.game-container{width:100vw;height:100vh;padding:8px;box-sizing:border-box;border-radius:0}.staff-container{margin-bottom:8px}#note-image{width:95vw!important;max-width:98vw;height:auto!important}.note-buttons{grid-template-columns:repeat(2,1fr);gap:10px;width:100%}.note-buttons button{font-size:1em;padding:10px 0}.info-row{flex-direction:column;gap:10px;align-items:stretch}details{display:block;padding:0;margin:1em 0 0}.settings-buttons button,fieldset{font-size:.85em}.made-by{font-size:.9em;margin-top:8px}.desktop-visible{display:none}}