._inner_03bdb68{width:calc(var(--pan-k,1) * 100%);transform:translateX(calc(var(--pan-o,0) * -100%));position:relative}._window_03bdb68{position:relative}._window_03bdb68:before,._window_03bdb68:after{content:"";z-index:2;pointer-events:none;width:24px;position:absolute;top:0;bottom:0}._window_03bdb68:before{background:linear-gradient(to right, var(--pan-fade,var(--bg)), transparent);opacity:clamp(0, calc(var(--pan-o,0) * var(--pan-k,1) * 8), 1);left:0}._window_03bdb68:after{background:linear-gradient(to left, var(--pan-fade,var(--bg)), transparent);opacity:clamp(0, calc((var(--pan-k,1) * (1 - var(--pan-o,0)) - 1) * 8), 1);right:0}._keys_03bdb68[data-panned=true]{overflow-clip-margin:content-box;overflow-x:clip}._keys_03bdb68[data-layout=strip]{background:var(--ctl);--pan-fade:var(--ctl);border-radius:20px;margin-inline:-10px;padding:10px}._keys_03bdb68{margin:0;touch-action:none;-webkit-user-select:none;user-select:none;border:0;min-width:0;margin-top:6px;padding:0;position:relative}._slot_03bdb68{padding:0 2px;position:absolute;top:0}._slot_03bdb68[data-style=sharp]{z-index:1;padding:0}._key_03bdb68{background:var(--key-colour);width:100%;height:100%;color:var(--tile-ink);font:inherit;cursor:pointer;transition:transform 90ms var(--ease-out), filter 90ms;border:0;border-radius:0 0 18px 18px;flex-direction:column;justify-content:flex-start;align-items:center;gap:4px;padding:10px 0 0;font-size:19px;font-weight:800;display:flex;position:relative}._key_03bdb68:focus-visible{outline:3px solid var(--accent);outline-offset:3px}._key_03bdb68[data-pressed=true]{filter:brightness(1.12);transform:translateY(4px)scale(.97)}._key_03bdb68[data-target=true]{box-shadow:0 0 0 3px var(--ink)}._slot_03bdb68[data-style=natural] ._key_03bdb68{border-radius:0 0 var(--radius-key) var(--radius-key)}._slot_03bdb68[data-style=sharp] ._key_03bdb68{background:color-mix(in srgb, var(--key-colour) 80%, var(--bg));color:var(--tile-ink);border-radius:0 0 var(--radius-key) var(--radius-key);box-shadow:0 0 0 2px var(--bg);font-size:14px}._cap_03bdb68{opacity:.55;font-size:12px;font-weight:700}._slot_03bdb68[data-style=slide]{padding:0}._slot_03bdb68[data-style=slide] ._key_03bdb68{white-space:nowrap;border-radius:0;padding:0;overflow:visible}._slot_03bdb68[data-style=slide] ._key_03bdb68[data-pressed=true]{filter:none;transform:none}._slot_03bdb68[data-style=slide] ._key_03bdb68[data-pressed=true]:after{content:"";z-index:2;background:var(--ink);width:30px;height:30px;box-shadow:0 0 0 4px var(--key-colour), 0 3px 10px #0006;border-radius:50%;margin:-20.5px 0 0 -15px;position:absolute;top:50%;left:50%}._keys_03bdb68[data-layout=ribbon] ._inner_03bdb68,._keys_03bdb68[data-layout=slots] ._inner_03bdb68{border-radius:999px}._keys_03bdb68[data-layout=ribbon] ._inner_03bdb68:before,._keys_03bdb68[data-layout=slots] ._inner_03bdb68:before{content:"";z-index:-1;background:var(--ctl);pointer-events:none;border-radius:999px;position:absolute;inset:0}._keys_03bdb68[data-layout=ribbon] ._slot_03bdb68[data-style=slide] ._key_03bdb68,._keys_03bdb68[data-layout=slots] ._slot_03bdb68[data-style=slide] ._key_03bdb68{color:color-mix(in srgb, var(--ink) 70%, transparent);background:0 0;justify-content:flex-end;padding-bottom:5px;font-size:10px;font-weight:700}._keys_03bdb68[data-layout=ribbon] ._slot_03bdb68[data-style=slide] ._key_03bdb68:before,._keys_03bdb68[data-layout=slots] ._slot_03bdb68[data-style=slide] ._key_03bdb68:before{content:"";background:var(--key-colour);border-radius:50%;width:7px;height:7px;margin:-9px 0 0 -3.5px;position:absolute;top:50%;left:50%}._keys_03bdb68[data-layout=ribbon] ._slot_03bdb68[data-style=slide] ._key_03bdb68[data-accidental=true]:before,._keys_03bdb68[data-layout=slots] ._slot_03bdb68[data-style=slide] ._key_03bdb68[data-accidental=true]:before{opacity:.55;width:4px;height:4px;margin:-7.5px 0 0 -2px}._keys_03bdb68[data-layout=ribbon] ._slot_03bdb68[data-style=slide] ._cap_03bdb68,._keys_03bdb68[data-layout=slots] ._slot_03bdb68[data-style=slide] ._cap_03bdb68,._keys_03bdb68[data-slider=true] ._slot_03bdb68[data-style=slide] ._key_03bdb68[data-pressed=true]:after{display:none}._keys_03bdb68[data-slider=true] ._inner_03bdb68:after{content:"";z-index:2;top:50%;left:clamp(15px, calc(var(--knob,.5) * 100%), calc(100% - 15px));background:var(--ink);width:30px;height:30px;box-shadow:0 0 0 4px var(--accent), 0 3px 12px #0006;opacity:0;pointer-events:none;border-radius:50%;margin:-20.5px 0 0 -15px;transition:opacity 90ms,transform 90ms;position:absolute;transform:scale(.6)}._keys_03bdb68[data-slider=true][data-sliding=true] ._inner_03bdb68:after{opacity:1;transform:none}._heard_03bdb68{z-index:1;border:3px solid var(--accent);width:22px;height:22px;box-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);pointer-events:none;border-radius:50%;margin:-11px 0 0 -11px;transition:left 90ms linear;position:absolute;top:50%}._keys_03bdb68[data-layout=ribbon] ._slot_03bdb68[data-style=slide] ._key_03bdb68[data-target=true]:before,._keys_03bdb68[data-layout=slots] ._slot_03bdb68[data-style=slide] ._key_03bdb68[data-target=true]:before{opacity:1;width:16px;height:16px;box-shadow:0 0 0 3px var(--ink);margin:-13px 0 0 -8px}._keys_03bdb68[data-layout=slots][data-dense=true] ._slot_03bdb68[data-style=slide] ._key_03bdb68{letter-spacing:-.06em;font-size:9px}@media (max-width:480px){._keys_03bdb68[data-dense=true]:not([data-panned=true]) ._slot_03bdb68[data-style=note] ._key_03bdb68,._keys_03bdb68[data-dense=true]:not([data-panned=true]) ._slot_03bdb68[data-style=natural] ._key_03bdb68{letter-spacing:-.04em;font-size:12px}._keys_03bdb68[data-dense=true]:not([data-panned=true]) ._slot_03bdb68[data-style=sharp] ._key_03bdb68{letter-spacing:-.04em;font-size:11px}}@media (hover:none){._cap_03bdb68{display:none}}._burst_03bdb68{border-radius:inherit;pointer-events:none;animation:_burst_03bdb68 .42s var(--ease-out) forwards;position:absolute;inset:0}._burst_03bdb68[data-kind=hit]{box-shadow:0 0 0 0 var(--accent)}._burst_03bdb68[data-kind=wrong]{background:color-mix(in srgb, var(--rose) 55%, transparent);animation-name:_flash_03bdb68}@keyframes _burst_03bdb68{0%{box-shadow:0 0 0 0 var(--accent);opacity:1}to{opacity:0;box-shadow:0 0 0 14px #0000}}@keyframes _flash_03bdb68{0%{opacity:1}to{opacity:0}}._hit_03bdb68{z-index:3;pointer-events:none;width:0;height:0;position:absolute;top:0;left:50%}._flash_03bdb68{background:linear-gradient(to top, color-mix(in srgb, var(--key-colour) 45%, transparent), transparent);width:44px;height:360px;animation:.3s linear forwards _flash-lane_03bdb68;position:absolute;top:-360px;left:-22px}._ring_03bdb68{box-sizing:border-box;border:8px solid var(--key-colour);width:56px;height:56px;filter:drop-shadow(0 0 6px var(--key-colour));border-radius:50%;animation:.4s cubic-bezier(.215,.61,.355,1) forwards _ring-size_03bdb68,.4s linear forwards _ring-fade_03bdb68;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}._spark_03bdb68{background:var(--key-colour);width:12px;height:12px;filter:drop-shadow(0 0 5px var(--key-colour));border-radius:50%;animation:.55s cubic-bezier(.215,.61,.355,1) forwards _spark-fly_03bdb68,.55s linear forwards _spark-fade_03bdb68;position:absolute;top:-6px;left:-6px}._letter_03bdb68{color:var(--key-colour);white-space:nowrap;font-size:34px;font-weight:800;line-height:1;animation:.8s cubic-bezier(.215,.61,.355,1) forwards _letter-rise_03bdb68,.8s linear forwards _letter-fade_03bdb68;position:absolute;top:-43px;left:0;transform:translate(-50%,-100%)}@keyframes _flash-lane_03bdb68{0%{opacity:1}to{opacity:0}}@keyframes _ring-size_03bdb68{0%{width:56px;height:56px}to{width:168px;height:168px}}@keyframes _ring-fade_03bdb68{0%{opacity:1;border-width:8px;border-color:#fff}25%{border-color:var(--key-colour)}35%{opacity:1}to{opacity:0;border-width:2px}}@keyframes _spark-fly_03bdb68{0%{translate:0}to{translate:var(--dx) var(--dy)}}@keyframes _spark-fade_03bdb68{0%{opacity:1;background:#fff;scale:1}25%{background:var(--key-colour)}45%{opacity:1}to{opacity:0;scale:.5}}@keyframes _letter-rise_03bdb68{0%{transform:translate(-50%,-100%)}to{transform:translate(-50%,calc(-100% - 50px))}}@keyframes _letter-fade_03bdb68{0%{opacity:1}45%{opacity:1}to{opacity:0}}._perfect_03bdb68{box-sizing:border-box;filter:drop-shadow(0 0 10px #ffd166);border:6px solid #ffd166;border-radius:50%;width:70px;height:70px;animation:.75s cubic-bezier(.215,.61,.355,1) forwards _perfect-size_03bdb68,.75s linear forwards _perfect-fade_03bdb68;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}@keyframes _perfect-size_03bdb68{0%{width:70px;height:70px}to{width:230px;height:230px}}@keyframes _perfect-fade_03bdb68{0%{opacity:1;border-width:6px}40%{opacity:1}to{opacity:0;border-width:1px}}._key_03bdb68[data-shake=true]{animation:.42s ease-out _shake_03bdb68}@keyframes _shake_03bdb68{0%,to{translate:0}18%{translate:-5px}36%{translate:5px}54%{translate:-3px}72%{translate:2px}}._puff_03bdb68{box-sizing:border-box;background:radial-gradient(circle,#bec6ced9,#bec6ce00 70%);border-radius:50%;width:64px;height:64px;animation:.6s ease-out forwards _puff_03bdb68;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}._dust_03bdb68{background:#aab2ba;border-radius:50%;width:8px;height:8px;animation:.6s cubic-bezier(.215,.61,.355,1) forwards _spark-fly_03bdb68,.6s linear forwards _dust-fade_03bdb68;position:absolute;top:-3px;left:-3px}@keyframes _puff_03bdb68{0%{opacity:1;transform:translate(-50%,-50%)scale(.5)}to{opacity:0;transform:translate(-50%,-90%)scale(2.2)}}@keyframes _dust-fade_03bdb68{0%{opacity:.9}to{opacity:0}}._key_03bdb68[data-missed]{filter:grayscale()brightness(.75)}._key_03bdb68[data-missed=sad][data-flip=a]{animation:.45s ease-out _tremble-a_03bdb68}._key_03bdb68[data-missed=sad][data-flip=b]{animation:.45s ease-out _tremble-b_03bdb68}._key_03bdb68[data-missed=angry][data-flip=a]{animation:.9s ease-out _rage-a_03bdb68}._key_03bdb68[data-missed=angry][data-flip=b]{animation:.9s ease-out _rage-b_03bdb68}@keyframes _tremble-a_03bdb68{0%,to{translate:0}10%{translate:-2px}22%{translate:2px}34%{translate:-2px}46%{translate:1px}58%{translate:-1px}}@keyframes _tremble-b_03bdb68{0%,to{translate:0}10%{translate:-2px}22%{translate:2px}34%{translate:-2px}46%{translate:1px}58%{translate:-1px}}@keyframes _rage-a_03bdb68{0%,to{translate:0}6%{translate:-6px}12%{translate:6px}18%{translate:-6px}24%{translate:5px}30%{translate:-4px}36%{translate:4px}44%{translate:-3px}52%{translate:2px}}@keyframes _rage-b_03bdb68{0%,to{translate:0}6%{translate:-6px}12%{translate:6px}18%{translate:-6px}24%{translate:5px}30%{translate:-4px}36%{translate:4px}44%{translate:-3px}52%{translate:2px}}._sadDust_03bdb68{background:#c8cfd6;border-radius:50%;width:10px;height:10px;animation:.65s cubic-bezier(.3,0,.7,1) forwards _spark-fly_03bdb68,.65s linear forwards _dust-fade_03bdb68;position:absolute;top:-30px;left:-5px}._keys_03bdb68[data-effects=full] ._key_03bdb68[data-target=true]{animation:1.5s ease-in-out infinite alternate _breathe_03bdb68}@keyframes _breathe_03bdb68{0%{box-shadow:0 0 0 3px var(--ink), 0 0 0 0 color-mix(in srgb, var(--key-colour) 0%, transparent)}to{box-shadow:0 0 0 3px var(--ink), 0 0 22px 8px color-mix(in srgb, var(--key-colour) 75%, transparent)}}._trail_03bdb68{z-index:1;top:50%;left:clamp(15px, calc(var(--knob,.5) * 100%), calc(100% - 15px));background:var(--accent);opacity:0;pointer-events:none;border-radius:50%;width:24px;height:24px;margin:-17.5px 0 0 -12px;transition:left .12s linear;position:absolute}._trail_03bdb68[data-n="2"]{width:18px;height:18px;margin:-14.5px 0 0 -9px;transition-duration:.22s}._trail_03bdb68[data-n="3"]{width:12px;height:12px;margin:-11.5px 0 0 -6px;transition-duration:.34s}._keys_03bdb68[data-effects=full][data-sliding=true] ._trail_03bdb68[data-n="1"]{opacity:.5}._keys_03bdb68[data-effects=full][data-sliding=true] ._trail_03bdb68[data-n="2"]{opacity:.32}._keys_03bdb68[data-effects=full][data-sliding=true] ._trail_03bdb68[data-n="3"]{opacity:.18}@media (prefers-reduced-motion:reduce){._key_03bdb68{transition:none}._burst_03bdb68{animation-duration:1ms}._hit_03bdb68,._trail_03bdb68{display:none}._key_03bdb68[data-missed]{filter:none;animation:none}._key_03bdb68[data-shake=true],._keys_03bdb68[data-effects=full] ._key_03bdb68[data-target=true]{animation:none}}._noteName_03bdb68{opacity:.92;font-size:12px;font-weight:700}._track_2e3f1d9{touch-action:none;cursor:grab;height:20px;margin-bottom:4px;position:relative}._track_2e3f1d9:before{content:"";background:var(--ctl);border-radius:2px;height:4px;position:absolute;top:8px;left:0;right:0}._thumb_2e3f1d9{background:var(--muted);height:8px;top:6px;left:calc(var(--pan-o,0) * 100%);width:calc(100% / var(--pan-k,1));border-radius:4px;position:absolute}