.piano-container.svelte-3pxg4y.svelte-3pxg4y{width:100%;max-width:500px;margin:2rem auto}.key.svelte-3pxg4y.svelte-3pxg4y{position:absolute;box-sizing:border-box;border:3px solid #333;border-radius:255px 15px 225px/15px 225px 15px 255px;cursor:pointer;display:flex;justify-content:center;align-items:flex-end;padding:10% 0 8px;transition:all .1s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none}.black.svelte-3pxg4y.svelte-3pxg4y:before{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border-radius:inherit;background:linear-gradient(to bottom,transparent 40%,var(--highlight-color, transparent) 80%);filter:blur(8px);opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:-1}.black.correct-highlight.svelte-3pxg4y.svelte-3pxg4y{--highlight-color:#28a745}.black.incorrect-highlight.svelte-3pxg4y.svelte-3pxg4y{--highlight-color:#ffc107}.black.correct-highlight.svelte-3pxg4y.svelte-3pxg4y:before,.black.incorrect-highlight.svelte-3pxg4y.svelte-3pxg4y:before{opacity:1}.white.correct-highlight.svelte-3pxg4y.svelte-3pxg4y{border-color:#28a745;box-shadow:0 0 15px #28a745}.white.incorrect-highlight.svelte-3pxg4y.svelte-3pxg4y{border-color:#ffc107;box-shadow:0 0 15px #ffc107}.white.svelte-3pxg4y.svelte-3pxg4y{height:100%;background-color:#fff;color:#333;z-index:1;top:0}.black.svelte-3pxg4y.svelte-3pxg4y{height:60%;background-color:#333;color:#fff;z-index:2;top:0}.white.active.svelte-3pxg4y.svelte-3pxg4y{background:repeating-linear-gradient(45deg,#fff,#fff 10px,#eee 10px,#eee 20px);transform:translate(2px,2px)}.black.active.svelte-3pxg4y.svelte-3pxg4y{background:#777;transform:translate(1px,1px)}.label.svelte-3pxg4y.svelte-3pxg4y{font-size:1.5em;-webkit-user-select:none;user-select:none;font-family:Patrick Hand,cursive}.white.svelte-3pxg4y .label.svelte-3pxg4y{align-self:flex-end}.black.svelte-3pxg4y .label.svelte-3pxg4y{font-size:1.2em}.feedback-icon.svelte-3pxg4y.svelte-3pxg4y{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%);font-size:3em;font-family:Patrick Hand,cursive;pointer-events:none;color:#28a745;z-index:4}.two-rows.svelte-3pxg4y.svelte-3pxg4y{display:none}.single-row.svelte-3pxg4y.svelte-3pxg4y{display:block;position:relative;height:0;padding-bottom:41.66%}.single-row.svelte-3pxg4y .white.svelte-3pxg4y{width:12.5%}.single-row.svelte-3pxg4y .black.svelte-3pxg4y{width:7.5%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(1){left:0}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(3){left:12.5%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(5){left:25%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(6){left:37.5%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(8){left:50%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(10){left:62.5%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(12){left:75%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(13){left:87.5%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(2){left:8.75%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(4){left:21.25%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(7){left:46.25%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(9){left:58.75%}.single-row.svelte-3pxg4y .key.svelte-3pxg4y:nth-child(11){left:71.25%}@media (max-width: 520px){.single-row.svelte-3pxg4y.svelte-3pxg4y{display:none}.two-rows.svelte-3pxg4y.svelte-3pxg4y{display:flex;flex-direction:column;align-items:center;gap:5px}.piano-row.svelte-3pxg4y.svelte-3pxg4y{position:relative;height:110px}.two-rows.svelte-3pxg4y .key.svelte-3pxg4y{height:100%}.two-rows.svelte-3pxg4y .black.svelte-3pxg4y{height:60%}.feedback-icon.svelte-3pxg4y.svelte-3pxg4y{bottom:10%}.two-rows.svelte-3pxg4y .piano-row.svelte-3pxg4y:nth-child(1){width:150px}.two-rows.svelte-3pxg4y .piano-row:nth-child(1) .white.svelte-3pxg4y{width:50px}.two-rows.svelte-3pxg4y .piano-row:nth-child(1) .black.svelte-3pxg4y{width:30px}.two-rows.svelte-3pxg4y .piano-row:nth-child(1) .key.svelte-3pxg4y:nth-child(1){left:0}.two-rows.svelte-3pxg4y .piano-row:nth-child(1) .key.svelte-3pxg4y:nth-child(3){left:50px}.two-rows.svelte-3pxg4y .piano-row:nth-child(1) .key.svelte-3pxg4y:nth-child(5){left:100px}.two-rows.svelte-3pxg4y .piano-row:nth-child(1) .key.svelte-3pxg4y:nth-child(2){left:35px}.two-rows.svelte-3pxg4y .piano-row:nth-child(1) .key.svelte-3pxg4y:nth-child(4){left:85px}.two-rows.svelte-3pxg4y .piano-row.svelte-3pxg4y:nth-child(2){width:250px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .white.svelte-3pxg4y{width:50px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .black.svelte-3pxg4y{width:30px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .key.svelte-3pxg4y:nth-child(1){left:0}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .key.svelte-3pxg4y:nth-child(3){left:50px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .key.svelte-3pxg4y:nth-child(5){left:100px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .key.svelte-3pxg4y:nth-child(7){left:150px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .key.svelte-3pxg4y:nth-child(8){left:200px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .key.svelte-3pxg4y:nth-child(2){left:35px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .key.svelte-3pxg4y:nth-child(4){left:85px}.two-rows.svelte-3pxg4y .piano-row:nth-child(2) .key.svelte-3pxg4y:nth-child(6){left:135px}.two-rows.svelte-3pxg4y .black .label.svelte-3pxg4y{font-size:1em}.feedback-icon.svelte-3pxg4y.svelte-3pxg4y{font-size:2em}}.main-card.svelte-1jmblh8{background-color:#fff;border:3px solid #333;border-radius:15px 255px/255px 15px;padding:2rem;text-align:center;box-shadow:5px 5px #333;width:100%;box-sizing:border-box}@media (max-width: 600px){.main-card.svelte-1jmblh8{padding:1rem}}.controls.svelte-1jmblh8{display:flex;justify-content:center;gap:1rem;margin-top:2rem}.btn.svelte-1jmblh8{min-width:8em;background-color:#fff;color:#333;border:3px solid #333;border-radius:255px 15px 225px/15px 225px 15px 255px;padding:.8rem 1.5rem;font-size:1.2rem;font-family:Patrick Hand,cursive;cursor:pointer;transition:all .2s ease;box-shadow:3px 3px #333}.btn.svelte-1jmblh8:hover:not(:disabled){box-shadow:5px 5px #333;transform:translate(-2px,-2px)}.btn.svelte-1jmblh8:active:not(:disabled){box-shadow:0 0 #333;transform:translate(3px,3px)}.btn.svelte-1jmblh8:disabled{background-color:#eee;color:#aaa;box-shadow:none;cursor:not-allowed}.message.svelte-1jmblh8{margin-top:2rem;font-size:1.5rem;font-weight:500;color:#333;min-height:1.5em}