._app_1k9rv_1{position:relative;width:100%;display:flex;flex-direction:column;--app-padding: 20px;--toolbar-size: 60px;padding:var(--app-padding);box-sizing:border-box;-webkit-user-select:none;user-select:none}._app_1k9rv_1:not(._isVertical_1k9rv_13){padding-top:calc(var(--app-padding) + var(--toolbar-size))}._app_1k9rv_1:not(._isVertical_1k9rv_13) ._toolbar_1k9rv_16{left:var(--app-padding);top:var(--app-padding);right:var(--app-padding)}._app_1k9rv_1._isVertical_1k9rv_13{padding-left:calc(var(--app-padding) + var(--toolbar-size))}._app_1k9rv_1._isVertical_1k9rv_13 ._toolbar_1k9rv_16{transform:translate(-50%,-50%) rotate(-90deg) translate(-50%,50%);left:var(--app-padding);top:var(--app-padding);width:calc(100 * var(--vh, 1vh) - var(--app-padding) * 2)}._toolbar_1k9rv_16{position:absolute}._pianoContainer_1k9rv_35{flex:1 1 0;display:flex;gap:var(--app-padding)}._app_1k9rv_1:not(._isVertical_1k9rv_13) ._pianoContainer_1k9rv_35{flex-direction:column}._piano_1k9rv_35{flex:1 1 0}._spinner_hx7su_1{width:var(--size, 32px);height:var(--size, 32px);border:3px solid transparent;border-radius:50%;background-image:linear-gradient(var(--color-bg),var(--color-bg)),linear-gradient(to right,var(--color-fg),transparent);background-origin:border-box;background-clip:content-box,border-box;animation:_rotation_hx7su_1 1s linear infinite}@keyframes _rotation_hx7su_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._container_ou9xo_1{position:relative}._container_ou9xo_1,._loading_ou9xo_6{border-radius:12px;overflow:hidden;position:relative}._container_ou9xo_1:after,._loading_ou9xo_6:after{content:"";pointer-events:none;border-radius:inherit;position:absolute;left:0;top:0;right:0;bottom:0;box-shadow:0 0 0 2px var(--color-border) inset}._loading_ou9xo_6{padding:40px;box-sizing:border-box;display:flex;place-content:center;place-items:center}._piano_ou9xo_32{position:absolute;left:0;top:0;display:flex;align-items:stretch;width:100%;height:100%;touch-action:none;image-rendering:pixelated}._iconButton_11xa1_1{display:flex;align-items:center;justify-content:center;width:40px;height:40px}@layer reset{._iconButton_11xa1_1{appearance:none;padding:0;border:0;cursor:pointer;background-color:transparent;color:unset;font-size:unset;line-height:unset;font-family:unset;text-align:unset}}._iconButton_11xa1_1[disabled]{cursor:not-allowed;opacity:.3}._iconButton_11xa1_1._isChecked_11xa1_26{position:relative;isolation:isolate;background:var(--color-bg)}._iconButton_11xa1_1._isChecked_11xa1_26:after{content:"";position:absolute;inset:4px;border-radius:6px;background:white;mix-blend-mode:difference}._root_1bes3_1{background:var(--color-bg);color:var(--color-fg);z-index:1;border:0;position:fixed;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:0;display:flex;flex-direction:column;transform:translateZ(0)}._root_1bes3_1._isVertical_1bes3_17{left:50%;top:50%;width:100svh;height:100svw;transform:translate(-50%,-50%) rotate(-90deg)}._toolbar_1bes3_25{padding:var(--app-padding) var(--app-padding) 8px var(--app-padding)}._grid_1bes3_29{overflow-x:scroll;padding:0 var(--app-padding) var(--app-padding) var(--app-padding);display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fit,minmax(20px,40px));grid-auto-columns:180px;flex:1;font-size:16px;line-height:20px}._category_1bes3_41,._instrument_1bes3_42{display:flex;align-items:center;gap:8px;padding:0 8px}._category_1bes3_41{font-weight:700}._instrument_1bes3_42{position:relative;border-radius:6px}@layer reset{._instrument_1bes3_42{appearance:none;padding:0;border:0;cursor:pointer;background-color:transparent;color:unset;font-size:unset;line-height:unset;font-family:unset;text-align:unset}}._instrument_1bes3_42._isSelected_1bes3_71{color:var(--color-bg);background-color:var(--color-fg)}._iconSpace_1bes3_76{width:24px;height:24px}._toolbar_13omd_1{display:flex;align-items:center}._scrollbar_13omd_6{position:relative;height:32px;flex:1 1 0;margin:0 16px;border-radius:6px;box-shadow:0 0 0 2px var(--color-border);overflow:hidden;touch-action:none;display:flex;align-items:stretch;background:var(--color-bg);transform:translateZ(0)}._scrollbar_13omd_6 ._octaveLabel_13omd_20{position:relative;display:flex;text-align:center;place-items:end;place-content:center;flex:1 1 0;font-size:12px;font-weight:700}._scrollbar_13omd_6 ._octaveLabel_13omd_20+._octaveLabel_13omd_20:before{content:"";position:absolute;pointer-events:none;left:0;bottom:0;height:8px;width:2px;background:var(--color-border)}._scrollbar_13omd_6 ._octaveLabel_13omd_20 ._octaveLabelBlackKey_13omd_40{pointer-events:none;position:absolute;left:50%;top:0;width:10%;height:50%;border-bottom-left-radius:2px;border-bottom-right-radius:2px;background-color:var(--color-toolbar-black-key);transform:translate(-50%)}._scrollbar_13omd_6 ._octaveLabel_13omd_20 ._octaveLabelBlackKey_13omd_40:nth-child(1){left:14.2857142857%}._scrollbar_13omd_6 ._octaveLabel_13omd_20 ._octaveLabelBlackKey_13omd_40:nth-child(2){left:28.5714285714%}._scrollbar_13omd_6 ._octaveLabel_13omd_20 ._octaveLabelBlackKey_13omd_40:nth-child(3){left:57.1428571429%}._scrollbar_13omd_6 ._octaveLabel_13omd_20 ._octaveLabelBlackKey_13omd_40:nth-child(4){left:71.4285714286%}._scrollbar_13omd_6 ._octaveLabel_13omd_20 ._octaveLabelBlackKey_13omd_40:nth-child(5){left:85.7142857143%}._scrollbar_13omd_6 ._thumb_13omd_67{position:absolute;left:0;width:0;height:100%;box-sizing:border-box;top:0;border-radius:0;background-color:var(--color-toolbar-thumb-diff);pointer-events:none;mix-blend-mode:difference}:root{user-select:none;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}:root,body{margin:0}:root{--color-bg: #fafafa;--color-fg: #222;--color-border: #222;--color-key-border: #222;--color-key-white: #fafafa;--color-key-white-pressed: hsl(190, 65%, 75%);--color-key-white-highlight: hsl(260, 65%, 75%);--color-key-white-label: #888;--color-key-black: #222;--color-key-black-pressed: hsl(190, 45%, 35%);--color-key-black-highlight: hsl(260, 45%, 35%);--color-key-black-label: #444;--color-toolbar-thumb-diff: #fff;--color-toolbar-black-key: rgba(0, 0, 0, .3)}:root[theme=dark]{--color-bg: #000;--color-fg: #ccc;--color-border: #444;--color-key-border: #444;--color-key-white: #222;--color-key-white-pressed: hsl(190, 35%, 20%);--color-key-white-highlight: hsl(260, 35%, 20%);--color-key-white-label: #444;--color-key-black: #000;--color-key-black-pressed: hsl(190, 35%, 20%);--color-key-black-highlight: hsl(260, 35%, 20%);--color-key-black-label: #444;--color-toolbar-thumb-diff: rgba(255, 255, 255, .2);--color-toolbar-black-key: rgba(204, 204, 204, .2)}#root{background-color:var(--color-bg);color:var(--color-fg);display:flex;height:calc(var(--vh, 1vh) * 100);box-sizing:border-box;-webkit-touch-callout:none}