.key{align-items:flex-end;cursor:pointer;display:flex;justify-content:center;overflow:hidden;position:relative;transition:transform .1s ease-out;-webkit-user-select:none;user-select:none}.white-key{background:linear-gradient(rgba(14,1,1,.014),#e0e0e0);border:1px solid #ccc;border-radius:3px;box-shadow:inset 0 -3px 5px #0003,0 3px 5px #0000004d;height:190px;width:50px}.black-key{background:linear-gradient(#000,#333);border:1px solid #000;border-radius:2px;box-shadow:inset 0 -2px 4px #ffffff1a,2px 5px 10px #00000080;color:#fff;height:110px;position:absolute;top:20px;transition:transform .1s ease-in-out;width:25px;z-index:2}.active{animation:vibrate .2s ease-in-out,pulse .3s ease-in-out}.key:after{background:#fff6;border-radius:50%;content:"";height:100%;opacity:0;position:absolute;transform:scale(0);transition:transform .2s,opacity .3s;width:100%}.active:after{opacity:.3;transform:scale(1.5)}@keyframes vibrate{0%{transform:translateX(0)}25%{transform:translateX(-1px)}50%{transform:translateX(1px)}75%{transform:translateX(-1px)}to{transform:translateX(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.logger{background:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin-top:20px;padding:20px}.logger .notes-log{display:block}.logger .notes-log span{background:#f0f0f0;border-radius:4px;display:inline-block;font-family:monospace;margin-bottom:5px;padding:4px 8px}.logger .notes-log br{display:block;margin-bottom:10px}.sarangi-wrapper{display:flex;flex-direction:column;gap:20px}.sarangi-wrapper>.top-row{align-items:flex-end;display:flex;gap:20px}.instructions{background:#f4f4f4;border-radius:8px;box-shadow:2px 2px 5px #0003;display:flex;flex-direction:column;font-family:Arial,sans-serif;gap:10px;height:auto;justify-content:flex-start;padding:15px;width:540px}.note-container{flex-direction:row;width:100%}.left-column,.note-container{display:flex;gap:10px;justify-content:space-between}.left-column{flex-wrap:wrap;width:50%}.right-column{display:flex;flex-direction:column;gap:5px;justify-content:flex-start;width:50%}.note{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:0 0 10px #0003;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:14px;font-weight:700;height:50px;line-height:50px;overflow:hidden;text-align:center;text-overflow:ellipsis;transition:all .2s ease-in-out;white-space:nowrap;width:220px}.note-name{font-size:16px}.note.active{background:#ffb84c;box-shadow:0 0 10px #ffa50099}.note.spacebar{background:#d4d4d4;border-radius:5px;text-align:center;width:150px}.note-spacebar.active{background:#ffb84c;box-shadow:0 0 10px #ffa50099}.key-like-text{background:#fff;border:1px solid #ddd;border-radius:5px;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:14px;font-weight:700;height:30px;line-height:30px;margin:0 5px;text-align:center;transition:all .2s ease-in-out;width:60px}.key-like-text-press.active{background:#357ab7;color:#fff}.key-like-text:hover{background:#e6e6e6}.key-like-text.active{background:#ffb84c;box-shadow:0 0 10px #ffa50099;color:#fff}.key-like-text-spacebar{background:#fffefb;box-shadow:0 0 10px #e2ad4a99;color:#040303}.key-like-text-spacebar.active{background:#357ab7;color:#2c2828}.sarangi-container{background:#f5f5f5;background:var(--bg-color,#f5f5f5);border-radius:18px;box-shadow:0 10px 20px #57414133;display:flex;height:300px;margin:50px auto;padding:20px;position:relative}.color-scheme-selector{align-items:center;display:flex;gap:10px}.color-options button{border:1px solid #584f4f;border-radius:50%;cursor:pointer;height:30px;transition:transform .2s ease,box-shadow .3s ease;width:30px}.color-options button:hover{box-shadow:0 0 8px 4px #0003,0 4px 10px #0000004d;transform:scale(1.1)}.sarangi-container.wooden .key{background-color:#d8c5a0}.sarangi-container.wooden .key.black-key{background-color:#5c4033}.sarangi-container.wooden{background-color:#8b6f47}.sarangi-container.earthy .key{background-color:#dad9d5}.sarangi-container.earthy .key.black-key{background-color:#a5a3a2}.sarangi-container.earthy{background-color:#d7cebe}.sarangi-container.classic .key{background-color:#f1e2d3;border:1px solid #000}.sarangi-container.classic .key.black-key{background-color:#b86a3f}.sarangi-container.classic{background-color:#d8d0b0}.sarangi-container.serene .key{background-color:#8cb7db}.sarangi-container.serene .key.black-key{background-color:#3b6991}.sarangi-container.serene{background-color:#d2e4f0}.sarangi-container.vibrant .key{background-color:#a59006}.sarangi-container.vibrant .key.black-key{background-color:#d88500}.sarangi-container.vibrant{background-color:#666808}.sarangi-container.mystic .key{background-color:#9b59b6}.sarangi-container.mystic .key.black-key{background-color:#5c2e8c}.sarangi-container.mystic{background-color:#3c2a5b}.sarangi-container.sunset .key{background-color:#a3e080}.sarangi-container.sunset .key.black-key{background-color:#6cc06b}.sarangi-container.sunset{background-color:#1a6017}.sarangi-wrapper.wooden .instructions{background-color:#251206;color:#d0ab9a}.sarangi-wrapper.wooden .note{color:#886855}.sarangi-wrapper.wooden .key-like-text{color:#332a19}.sarangi-wrapper.earthy .instructions{background-color:#fff;color:#0f140e}.sarangi-wrapper.earthy .note{color:#18140e}.sarangi-wrapper.earthy .key-like-text{color:#37352f}.sarangi-wrapper.classic .instructions{color:#5d432f}.sarangi-wrapper.classic .note{color:#412b18}.sarangi-wrapper.classic .key-like-text{color:#472614}.sarangi-wrapper.serene .instructions{background-color:#b4cada;color:#2e4a7d}.sarangi-wrapper.serene .note{color:#1f3657}.sarangi-wrapper.serene .key-like-text{color:#8ca5b7}.sarangi-wrapper.vibrant .instructions{color:#4a5e16}.sarangi-wrapper.vibrant .note{color:#666808}.sarangi-wrapper.vibrant .key-like-text{color:#9c9a1f}.sarangi-wrapper.mystic .instructions{background-color:#27153a;color:#bfa0d4}.sarangi-wrapper.mystic .note{color:#7e5f9b}.sarangi-wrapper.mystic .key-like-text{color:#21113c}.sarangi-wrapper.sunset .instructions{background-color:#1b9a2e;color:#2c3e2f}.sarangi-wrapper.sunset .note{color:#1a6017}.sarangi-wrapper.sunset .key-like-text{color:#ed9f24}.logger-container{background-color:#f5f5f5;border-radius:0 0 18px 18px;border-top:2px solid #0000001a;display:flex;justify-content:center;padding:20px 0;width:100%}.logger{align-items:center;display:flex;flex-direction:column;font-family:Arial,sans-serif;gap:5px}.logger h3{margin-bottom:10px}.notes-log{display:flex;flex-wrap:wrap;gap:10px}.notes-log span{background-color:#f4f4f4;border-radius:5px;box-shadow:2px 2px 5px #0000001a;font-size:14px;font-weight:700;padding:5px 10px}.error-boundary{background-color:#fff5f5;border:2px solid #ff6b6b;border-radius:8px;color:#c92a2a;margin:20px;padding:20px;text-align:center}.error-reset-button{background-color:#364fc7;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;margin-top:15px;padding:10px 20px;transition:background-color .2s}.error-reset-button:hover{background-color:#2b3f9e}body{background-color:#f0f0f0;font-family:Arial,sans-serif;margin:0}.app{align-items:center;display:flex;flex-direction:column;padding:20px}
/*# sourceMappingURL=main.7efd98fa.css.map*/