.piano-black-keys-wrapper{position:absolute;top:0;left:0;width:95%;margin-left:2.5%;display:flex;height:0;z-index:5}.black-key-container,.black-key-spacer{display:flex;justify-content:center;align-items:flex-start;flex:1 1 0;min-width:0}.black-key-container.key-left{justify-content:flex-start}.black-key-container.key-right{justify-content:flex-end}.black-key-container.key--outer-2group.key-left{padding-left:2px;margin-right:-2px}.black-key-container.key--outer-2group.key-right{padding-right:2px;margin-left:-2px}.black-key-spacer{pointer-events:none}.black-key{position:relative;width:80%;height:110px;background:#000;border-radius:0 0 5px 5px;margin:0;z-index:5;box-sizing:border-box;pointer-events:auto;color:#fff;transition:background-color .05s,transform .05s}.piano-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;height:195px}.piano-scroll::-webkit-scrollbar{display:none}.piano-scroll{scrollbar-width:none}.piano{display:flex;width:100%;position:relative;-webkit-user-select:none;user-select:none}.key{display:flex;align-items:flex-end;justify-content:center;cursor:pointer;border-radius:0 0 5px 5px;box-shadow:0 5px 1px #20202033;font-family:Open Sans,sans-serif;transition:background-color .05s ease,box-shadow .05s ease,transform .05s ease}.white-key{border-top:1px solid rgba(32,32,32,.2);border-right:1px solid rgba(32,32,32,.3);border-bottom:1px solid rgba(32,32,32,.3)}.key[data-note=C3]{border-left:none;border-radius:0 0 5px}.key[data-note=B5]{border-right:1px solid transparent;border-radius:0 0 0 5px}.key:not(.black-key){position:relative;flex:1 1 0;min-width:0;height:190px;background:#fff;box-sizing:border-box}.key *{-webkit-user-select:none;user-select:none;pointer-events:none}.key.active{background-color:#d8d8d8;transform:translateY(5px);box-shadow:0 1px #20202033;animation:key-press 60ms ease-out}.black-key.active{background:#1a1a1a;transform:translateY(5px);box-shadow:0 2px #0009;animation:key-press 60ms ease-out}.black-key .key-label,.black-key .key-shortcut{display:flex;flex-direction:column;align-items:center;font-weight:600;color:#fff;font-size:14px;text-align:center;line-height:.93}.key-content-bottom{display:flex;align-items:center;justify-content:center;margin-bottom:11px}.black-key-content-bottom{margin-bottom:10px}.key .key-marked{position:absolute;bottom:11px;background-color:#72ac51;box-shadow:inset -1px -3px 4px #2020204d;width:20px;height:20px;border-radius:50%;pointer-events:none}@keyframes key-press{0%{filter:brightness(1)}40%{filter:brightness(.92)}to{filter:brightness(1)}}@media (max-width: 767px){.piano{min-width:750px}.piano-scroll{overscroll-behavior-x:contain}.key:not(.black-key){height:180px}.black-key{height:108px}}.piano-controls{display:flex;align-items:center;max-width:750px;padding-top:14px;padding-bottom:22px;padding-left:75px}.piano-controls button{font-family:Open Sans,sans-serif;font-size:14px;background:#f8f8f8;border-radius:4px;border:1px solid #eee;color:#000;transition:.25s ease;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;margin-right:8px;padding:8px 14px;height:37px}.piano-controls button.active{background-color:#e4e4e4;border-color:#dadada}.piano-controls button:hover{border-color:#dadada;box-shadow:0 5px 10px #0003}.piano-controls button:focus,.piano-controls button:focus-visible{outline:none;box-shadow:none}.drop-down *{box-sizing:border-box;-webkit-user-select:none;user-select:none}.drop-down{position:relative}.drop-down ul{min-width:90px;position:absolute;display:none;z-index:11;left:1px;padding-bottom:0;background-color:#fff;border-radius:4px;box-shadow:0 8px 16px #0003;overflow-y:auto}.drop-down ul.active{display:block}.drop-down ul li:first-child{border-radius:4px 4px 0 0}.drop-down ul li:last-child{border-radius:0 0 4px 4px}.drop-down ul li{font-size:13px;font-family:Open Sans,sans-serif;padding:10px 14px;cursor:pointer;text-align:left;white-space:nowrap}.drop-down ul li:hover{background-color:#e4e4e4;transition:all .25s ease}.switch{position:relative;display:inline-block;width:56px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#72ac51}input:focus+.slider{box-shadow:0 0 1px #72ac51}input:checked+.slider:before{transform:translate(28px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.modal-title{display:flex;align-items:center;justify-content:space-between;font-weight:600;color:#4e5056;height:60px;padding:0 20px;border-bottom:1px solid #eee;background-color:#f8f8f8;border-top-left-radius:4px;border-top-right-radius:4px}.modal-title svg{width:24px;height:24px;opacity:.8;transition:opacity .3s ease,transform .3s ease}.modal-title svg:hover{opacity:1;cursor:pointer;transition:opacity .3s ease,transform .3s ease}.modal-title span{cursor:pointer;display:inline-block}.modal-title svg{transform:translateY(1px)}.modal-section{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;border-bottom:1px solid #eee;-webkit-user-select:none;user-select:none}.modal-section:last-child{border-bottom:none}.modal-text{color:#4e5056;font-size:1em;font-weight:600;line-height:1.4}.modal-section .slider-container{position:relative;top:2px;display:flex;align-items:center;justify-content:space-around;padding:0 5px;gap:12px}.slider-value{min-width:5ch;text-align:center;font-variant-numeric:tabular-nums}.range{-webkit-appearance:none;appearance:none;width:180px;height:var(--slider-thumb-size, 23px);background:transparent;--min: 0;--max: 100;--value: 0;--fill: calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%);--slider-color: #72ac51;--slider-track: #e5e7eb;--slider-height: 13px;--slider-thumb-size: 23px;--slider-thumb-border: #ffffff}.range::-webkit-slider-runnable-track{height:var(--slider-height);border-radius:999px;background:linear-gradient(var(--slider-color) 0 0) 0 / var(--fill) 100% no-repeat,var(--slider-track)}.range::-webkit-slider-thumb{-webkit-appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:50%;background:var(--slider-color);border:2px solid var(--slider-thumb-border);margin-top:calc((var(--slider-height) - var(--slider-thumb-size)) / 2);box-shadow:0 0 0 2px #0000000d;cursor:pointer}.range::-moz-range-track{height:var(--slider-height);border-radius:999px;background:var(--slider-track)}.range::-moz-range-progress{height:var(--slider-height);border-radius:999px;background:var(--slider-color)}.range::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:50%;background:var(--slider-color);border:2px solid var(--slider-thumb-border);box-shadow:0 0 0 2px #0000000d;cursor:pointer}.range:focus{outline:none}.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #3b82f64d}.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #3b82f64d}@media (max-width: 1005px){.piano-controls{margin:0 auto;padding-left:30px;padding-right:30px}}@media (max-width: 767px){.piano-controls{padding-left:15px;padding-right:15px}}.record-button{display:flex;align-items:center;gap:6px;position:relative}.recording-live{display:inline-flex;align-items:center;gap:.4em;font-variant-numeric:tabular-nums}.recording-elapsed{min-width:3ch;text-align:left}.recording-dropdown{position:absolute;top:100%;min-width:120px;background:#fff;border-radius:4px;box-shadow:0 8px 16px #0003;z-index:1000}.recording-error{background:#ffebee;color:#c62828;padding:8px;border-radius:3px;margin-bottom:8px;font-size:12px}.recording-playing-indicator{animation:recording-pulse 1.5s infinite}@keyframes recording-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.default__page__title{padding-left:75px}article.default__content{padding:15px 0}.default__content{padding:15px 0}.chord-dictionary-title{padding-left:75px}.tools__page__content{padding:0 75px 30px}.article-info{padding-left:75px}@media (max-width: 1005px){.default__content,.content__right .finder,.contact__content{max-width:100%;padding:30px 0}.content__right{padding:0}.tools__page__content{padding:0 30px;width:750px;margin:auto}.default__page__title,.article-info{max-width:750px;margin:auto;padding:0 30px}}@media (max-width: 767px){.its_setting_page.default__content,article.default__content{padding:15px 0}.tools__page__content,.default__page__title{padding:0 15px}}@font-face{font-family:Musicca Unicode;src:url(../files/fonts/Musicca.woff2) format("woff2"),url(../files/fonts/Musicca.woff) format("woff"),url(../files/fonts/Musicca.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}.accidental{font-family:Musicca Unicode;font-size:13px;padding-left:1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}