.inlinecalculator.calc-type-tool.synthesizer-player{width:100%;max-width:980px;min-height:0;box-shadow:none;background:0 0;border:0;border-radius:0;margin:10px auto 24px;padding:14px 18px 20px;display:block}.synthesizer-toolbar,.synthesizer-setting-fields{flex-wrap:wrap;min-width:0;display:flex}.synthesizer-toolbar{margin:0}.synthesizer-stage{width:100%;min-width:0}.synthesizer-keyboard{gap:0;width:100%;min-width:0;display:flex}.synthesizer-octave{width:50%;min-width:0;display:flex;position:relative}.synthesizer-player .synthesizer-key{appearance:none;box-sizing:border-box;min-width:0;font:inherit;cursor:pointer;border-radius:0 0 5px 5px;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 0 12px;display:flex;position:relative}.synthesizer-player .synthesizer-key.is-white{color:#434c58;z-index:1;background:#fff;border:1px solid #d0d9e0;border-right-width:0;width:14.2857%;height:190px}.synthesizer-player .synthesizer-key.is-white:last-child{border-right-width:1px}.synthesizer-player .synthesizer-key.is-black{z-index:2;color:#f0f4f8;background:#303844;border:1px solid #303844;width:8%;height:116px;margin-left:-4%;position:absolute;top:0}.synthesizer-key .synthesizer-note{margin-bottom:7px;font-size:12px;line-height:1.3}.synthesizer-key kbd{font:inherit;color:#85909d;font-size:11px;line-height:1}.synthesizer-key.is-black kbd{color:#d7dfe8}.synthesizer-player .synthesizer-key.is-white:hover{background:#edf5fc}.synthesizer-player .synthesizer-key.is-white.is-active,.synthesizer-player .synthesizer-key.is-white:active{background:#bfdafa}.synthesizer-player .synthesizer-key.is-black.is-active,.synthesizer-player .synthesizer-key.is-black:active{background:#346ca3}.synthesizer-key:focus-visible{outline-offset:-3px;outline:2px solid #438dcc}.synthesizer-key:disabled{opacity:.5;cursor:default}.synthesizer-note-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-height:46px;margin:16px 0 22px;display:flex}.synthesizer-last-note{color:#505d6c;font-variant-numeric:tabular-nums;min-height:24px;font-size:16px}.synthesizer-stop{color:#455568;font:inherit;cursor:pointer;background:#edf2f7;border:0;border-radius:8px;padding:9px 12px;font-size:14px}.synthesizer-stop:hover:enabled{background:#dce9f4}.synthesizer-stop:active:enabled{background:#c9ddec}.synthesizer-stop:disabled{opacity:.55;cursor:default}.synthesizer-stop:focus-visible{outline-offset:2px;outline:2px solid #438dcc}.synthesizer-settings{margin:0}.synthesizer-settings summary{color:#465568;cursor:pointer;padding:8px 5px;font-size:16px;font-weight:600}.synthesizer-setting-fields{margin-top:10px}.synthesizer-player .synthesizer-error{color:#8a2538;margin:10px 5px 16px;font-size:15px}@media (width<=800px){.inlinecalculator.calc-type-tool.synthesizer-player{padding:0 0 18px}.synthesizer-panel{padding:16px 10px 10px}}@media (width<=600px){.synthesizer-keyboard{flex-direction:column;gap:16px}.synthesizer-octave{width:100%}.synthesizer-player .synthesizer-key.is-white{height:168px}.synthesizer-player .synthesizer-key.is-black{height:102px}.synthesizer-note-row{gap:8px}.synthesizer-last-note{width:100%}}@media (width>=601px){.synthesizer-octave:first-child .synthesizer-key.is-white:last-child{border-right-width:0}}.synthesizer-panel{background:#e9f0f5;border-radius:16px 16px 0 0;padding:18px 22px 12px}.synthesizer-toolbar>label,.synthesizer-toolbar>.label{margin-top:0;margin-bottom:14px}.synthesizer-settings summary{padding:10px 82px 10px 5px;font-size:14px;position:relative}.synthesizer-wave-preview{color:#637c92;width:64px;position:absolute;top:8px;right:5px}.synthesizer-wave-preview svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linejoin:round;width:64px;height:24px;display:block}.synthesizer-player .synthesizer-key.is-white{box-shadow:inset 0 -4px #e2e8ed}.synthesizer-player .synthesizer-key.is-black{background:linear-gradient(#35404c,#222b35);box-shadow:inset 0 -4px #151d26,0 2px 3px #23313a20}.synthesizer-player .synthesizer-key.is-white.is-active,.synthesizer-player .synthesizer-key.is-white:active{box-shadow:inset 0 3px 8px #33577526}.synthesizer-player .synthesizer-key.is-black:hover{background:#445264}.synthesizer-player .synthesizer-key.is-black.is-active,.synthesizer-player .synthesizer-key.is-black:active{background:#346ca3;box-shadow:inset 0 3px 6px #18344f}.synthesizer-key .synthesizer-note{font-size:13px;font-weight:600}@media (width<=800px){.synthesizer-panel{padding:16px 10px 10px}}