.piano-keyboard-view{display:grid;gap:.75rem}.piano-keyboard-view__status{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.piano-keyboard-view__status p{margin:0}.piano-keyboard-view__viewport{border:1px solid rgba(17,24,39,.24);border-radius:8px;overflow-x:auto;padding:.75rem;background-color:#f7fafc}.piano-keyboard-view__keyboard{height:11rem;min-width:100%;position:relative}.piano-keyboard-view__key{border-style:solid;border-width:var(--piano-key-border-width, 1px);border-color:var(--piano-key-border-color, #111827);box-sizing:border-box;display:flex;justify-content:center;position:absolute;top:0}.piano-keyboard-view__key span{font-size:.68rem;line-height:1}.piano-keyboard-view__key strong{border-radius:999px;font-size:.68rem;min-width:1.1rem;padding:.12rem;text-align:center}.piano-keyboard-view__key--white{align-items:flex-end;background:var(--piano-white-key-bg, #ffffff);color:#111827;height:100%;padding:.45rem .15rem;z-index:1}.piano-keyboard-view__key--white[data-piano-texture=ivory-classic]{background:linear-gradient(180deg,var(--piano-white-key-bg, #fbfaf5) 0%,#eae6d6 100%)}.piano-keyboard-view__key--white[data-piano-texture=ivory-aged]{background:linear-gradient(180deg,var(--piano-white-key-bg, #f6f1d1) 0%,#dad4b5 100%)}.piano-keyboard-view__key--white[data-piano-texture=ivory-cream]{background:linear-gradient(180deg,var(--piano-white-key-bg, #fffdf5) 0%,#f2f0e0 100%)}.piano-keyboard-view__key--white[data-piano-texture=ivory-bright]{background:linear-gradient(180deg,var(--piano-white-key-bg, #f5f5f5) 0%,#eeeeee 100%)}.piano-keyboard-view__key--white[data-piano-texture=ivory-satin]{background:linear-gradient(180deg,var(--piano-white-key-bg, #f2f2f2) 0%,#dddddd 100%)}.piano-keyboard-view__key--white[data-piano-texture=warm]{background:linear-gradient(180deg,var(--piano-white-key-bg, #fff7ed) 0%,#ffedd5 100%)}.piano-keyboard-view__key--black{align-items:center;background-color:var(--piano-black-key-bg, #111827);color:#fff;flex-direction:column;gap:.3rem;height:62%;padding:.35rem .1rem;z-index:2}.piano-keyboard-view__key--active.piano-keyboard-view__key--white{background:#bfe6d0;box-shadow:inset 0 -.35rem #20744a}.piano-keyboard-view__key--active.piano-keyboard-view__key--black{background:#246b4a;box-shadow:inset 0 0 0 2px #8de0b1}.piano-keyboard-view__key--selected{outline:3px solid #d8b87f;outline-offset:-3px}.piano-keyboard-view__active-notes [data-piano-note-selected=true]{font-weight:800;text-decoration:underline}.piano-keyboard-view__active-notes h3{margin:0 0 .35rem}.piano-keyboard-view__active-notes ul{margin:0;padding-left:1.25rem}.hyper-piano-container{position:absolute;inset:0;pointer-events:none;z-index:10}.hyper-black-key{position:absolute;pointer-events:auto;cursor:pointer;box-sizing:border-box;border:0;--bk-active-foot-color: #1fb7b7;--bk-active-overglow: 67;--bk-active-glint-left: 79;--bk-active-glint-top: 30;--bk-active-glint-right: 100;--bk-active-shadow-depth: 76;--bk-active-bevel-opacity: 6;--bk-active-foot-brightness: 37;--bk-overglow-intensity: 34;--bk-overglow-width: 28;--bk-glint-left-alpha: 31;--bk-glint-right-alpha: 29;--bk-edge-left: 16;--bk-edge-right: 82;--bk-bevel-height: 26px;--bk-bevel-brightness: 110;--bk-glint-y: 0;--bk-cristal-brightness: 47;--bk-glass-rotate: 0deg;--bk-glass-y: 0px;--bk-glass-x: 0px;--bk-glass-horns: 3;--bk-skirt-flare: 16.5;--bk-flare: -16.5%;--bk-flare-clip: 12.4%;--bk-shadow-x: -6px;--bk-shadow-y: -2px;--bk-shadow-blur: 8px;--bk-shadow-spread: -2px;--bk-occlusion-opacity: .94;--bk-occlusion-range: 40px;--bk-bevel-scale-x: .65;border-radius:0 0 3px 3px;background-color:#111;background-image:radial-gradient(ellipse calc(var(--bk-overglow2-width, 10) * 1px) calc(var(--bk-overglow2-height, 40) * 1px) at calc(var(--bk-overglow2-x, 0) * 1px) calc(var(--bk-overglow2-y, 0) * 1px),rgba(255,255,255,calc(var(--bk-overglow2-intensity, 0) / 100)) 0% calc(var(--bk-overglow-hardness, 0) * 1%),#05050500),radial-gradient(ellipse calc(var(--bk-overglow-width, 25) * 1px) calc(var(--bk-overglow-height, 100) * 1px) at calc(var(--bk-overglow-x, 0) * 1px) calc(var(--bk-overglow-y, 0) * 1px),rgba(255,255,255,calc(var(--bk-overglow-intensity, 68) / 100)) 0% calc(var(--bk-overglow-hardness, 0) * 1%),#05050500),linear-gradient(to bottom,rgba(0,0,0,var(--bk-occlusion-opacity, 1)) 0%,rgba(0,0,0,0) var(--bk-occlusion-range, 21px)),linear-gradient(to bottom,transparent calc(100% - calc(var(--bk-glint-y, 25) * 1px)),rgba(255,255,255,.1) calc(100% - calc(var(--bk-glint-y, 25) * 1px) + 1px),rgba(0,0,0,.8) calc(100% - calc(var(--bk-glint-y, 25) * 1px) + 2px),rgba(0,0,0,1) 100%),linear-gradient(to right,#111111 0%,#111111 calc(var(--bk-edge-left, 3) * 1% - 2%),rgba(255,255,255,calc(var(--bk-glint-left-alpha, 58) / 100)) calc(var(--bk-edge-left, 3) * 1% - .5%),rgba(255,255,255,calc(var(--bk-glint-left-alpha, 58) / 100)) calc(var(--bk-edge-left, 3) * 1% + .5%),rgba(200,210,220,.1) calc(var(--bk-edge-left, 3) * 1% + 5%),var(--bk-surface-left, #222222) calc(var(--bk-edge-left, 3) * 1% + 12%),var(--bk-surface-right, #0a0a0a) calc(var(--bk-edge-right, 98) * 1% - 15%),#000000 calc(var(--bk-edge-right, 98) * 1% - 3%),rgba(255,255,255,calc(var(--bk-glint-right-alpha, 40) / 100)) calc(var(--bk-edge-right, 98) * 1% - .5%),rgba(255,255,255,calc(var(--bk-glint-right-alpha, 40) / 100)) calc(var(--bk-edge-right, 98) * 1% + .5%),#000000 calc(var(--bk-edge-right, 98) * 1% + 3%),#000000 100%);box-shadow:inset 1px 0 rgba(255,255,255,calc(var(--bk-glint-left-alpha, 58) / 200)),inset -1px 0 rgba(255,255,255,calc(var(--bk-glint-right-alpha, 86) / 200)),var(--bk-shadow-x, -6px) var(--bk-shadow-y, -2px) var(--bk-shadow-blur, 6px) var(--bk-shadow-spread, -2px) var(--bk-shadow-color, rgba(0,0,0,.4))}.hyper-black-key:before{content:"";position:absolute;left:var(--bk-flare, -5%);right:var(--bk-flare, -5%);bottom:calc(var(--bk-border-bottom, 0px) + var(--bk-glass-y, 0px));height:var(--bk-bevel-height, 27px);border-radius:0 0 4px 4px;pointer-events:none;z-index:2;clip-path:polygon(var(--bk-flare-clip, 4.54%) 0,calc(100% - var(--bk-flare-clip, 4.54%)) 0,100% 100%,0 100%);background-color:transparent;filter:brightness(calc(var(--bk-bevel-brightness, 125) * 1%));transform:scaleX(var(--bk-bevel-scale-x, 1));transform-origin:bottom center;background-image:radial-gradient(ellipse calc(var(--bk-glass-horn-width, 5) * 1px) calc(var(--bk-glass-horns, 39) * 1px) at 15% 0%,rgba(255,255,255,.7) 0%,transparent 100%),radial-gradient(ellipse calc(var(--bk-glass-horn-width, 5) * .8px) calc(var(--bk-glass-horns, 39) * .8px) at 85% 0%,rgba(255,255,255,.3) 0%,transparent 100%),linear-gradient(to bottom,var(--bk-bevel-top-edge, #444444) 0%,var(--bk-bevel-bottom-edge, #050505) 100%),linear-gradient(to right,#111111 0%,#444444 calc(var(--bk-edge-left, 3) * 1% - 2%),rgba(200,210,220,.1) calc(var(--bk-edge-left, 3) * 1% - .5%),rgba(200,210,220,.1) calc(var(--bk-edge-left, 3) * 1% + .5%),transparent calc(var(--bk-edge-left, 3) * 1% + 6%),transparent calc(var(--bk-edge-right, 98) * 1% - 15%),#000000 calc(var(--bk-edge-right, 98) * 1% - 3%),#222222 calc(var(--bk-edge-right, 98) * 1% - .5%),#222222 calc(var(--bk-edge-right, 98) * 1% + .5%),#000000 calc(var(--bk-edge-right, 98) * 1% + 3%),#000000 100%);box-shadow:inset 0 1px #fff3,inset 2px 0 3px -1px #ffffff1a,inset -2px 0 3px -1px #ffffff0d}.hyper-black-key.pressed,.hyper-black-key:active{transform:translateY(var(--bk-press-depth, 4px));background-image:linear-gradient(to bottom,#000,#0000 40px),linear-gradient(to bottom,transparent calc(100% - 22px),rgba(255,255,255,.05) calc(100% - 20px),rgba(0,0,0,.9) calc(100% - 18px),rgba(0,0,0,1) 100%),linear-gradient(to right,#0a0a0acc 0% 10%,#646e7833 25%,#1e1e1ecc 45%,#050505f2),linear-gradient(to right,#0a0a0a,#151515 30%,#000);box-shadow:inset 1px 0 1px #fff3,inset 3px 0 3px #00000080,inset -2px 0 3px #000,3px 2px 6px #000c}.hyper-black-key.active{--bk-surface-left: color-mix(in srgb, var(--bk-active-foot-color) 84%, #0b676b);--bk-surface-right: color-mix(in srgb, var(--bk-active-foot-color) 82%, #095d60);--bk-active-edge-outer: color-mix(in srgb, var(--bk-active-foot-color) 72%, #084f52);--bk-active-edge-inner: color-mix(in srgb, var(--bk-active-foot-color) 88%, #0d7074);--bk-active-center-soft: color-mix(in srgb, var(--bk-active-foot-color) 96%, white);--bk-active-center: color-mix(in srgb, var(--bk-active-foot-color) 98%, white);--bk-bevel-top-edge: var(--bk-active-foot-color);--bk-bevel-bottom-edge: var(--bk-active-foot-color);background-image:radial-gradient(ellipse calc(var(--bk-overglow2-width, 10) * 1px) calc(var(--bk-overglow2-height, 40) * 1px) at calc(var(--bk-overglow2-x, 0) * 1px) calc(var(--bk-overglow2-y, 0) * 1px),color-mix(in srgb,color-mix(in srgb,var(--bk-active-foot-color) 72%,white) calc(var(--bk-overglow2-intensity, 0) * .06 * 1%),transparent) 0%,color-mix(in srgb,color-mix(in srgb,var(--bk-active-foot-color) 72%,white) calc(var(--bk-overglow2-intensity, 0) * .06 * 1%),transparent) calc(var(--bk-overglow-hardness, 0) * 1%),transparent 100%),radial-gradient(ellipse calc(var(--bk-overglow-width, 25) * 1px) calc(var(--bk-overglow-height, 100) * 1px) at calc(var(--bk-overglow-x, 0) * 1px) calc(var(--bk-overglow-y, 0) * 1px),color-mix(in srgb,color-mix(in srgb,var(--bk-active-foot-color) 74%,white) calc(var(--bk-active-overglow, 68) * .1 * 1%),transparent) 0%,color-mix(in srgb,color-mix(in srgb,var(--bk-active-foot-color) 74%,white) calc(var(--bk-active-overglow, 68) * .1 * 1%),transparent) calc(var(--bk-overglow-hardness, 0) * 1%),transparent 100%),linear-gradient(to bottom,color-mix(in srgb,color-mix(in srgb,var(--bk-active-foot-color) 50%,black) calc(var(--bk-active-shadow-depth, 100) * 1%),transparent) 0%,transparent var(--bk-occlusion-range, 21px)),linear-gradient(to bottom,transparent calc(100% - calc(var(--bk-glint-y, 25) * 1px)),color-mix(in srgb,color-mix(in srgb,var(--bk-active-foot-color) 72%,white) calc(var(--bk-active-glint-top, 60) * .32 * 1%),transparent) calc(100% - calc(var(--bk-glint-y, 25) * 1px) + 1px),color-mix(in srgb,color-mix(in srgb,var(--bk-active-foot-color) 74%,black) calc(var(--bk-active-shadow-depth, 100) * .22%),transparent) calc(100% - calc(var(--bk-glint-y, 25) * 1px) + 2px),color-mix(in srgb,color-mix(in srgb,var(--bk-active-foot-color) 72%,black) calc(var(--bk-active-shadow-depth, 100) * .3%),transparent) 100%),linear-gradient(to right,var(--bk-active-edge-outer) 0%,var(--bk-active-edge-outer) calc(var(--bk-edge-left, 3) * 1% - 2%),color-mix(in srgb,white 12%,var(--bk-active-foot-color)) calc(var(--bk-edge-left, 3) * 1% - .5%),color-mix(in srgb,white 8%,var(--bk-active-foot-color)) calc(var(--bk-edge-left, 3) * 1% + .5%),var(--bk-active-edge-inner) calc(var(--bk-edge-left, 3) * 1% + 5%),var(--bk-surface-left) calc(var(--bk-edge-left, 3) * 1% + 12%),var(--bk-active-center-soft) 42%,var(--bk-active-center) 50%,var(--bk-active-center-soft) 58%,var(--bk-surface-right) calc(var(--bk-edge-right, 98) * 1% - 12%),color-mix(in srgb,white 7%,var(--bk-active-foot-color)) calc(var(--bk-edge-right, 98) * 1% - .5%),color-mix(in srgb,white 5%,var(--bk-active-foot-color)) calc(var(--bk-edge-right, 98) * 1% + .5%),color-mix(in srgb,var(--bk-active-foot-color) 84%,#0a5a5d) calc(var(--bk-edge-right, 98) * 1% + 3%),color-mix(in srgb,var(--bk-active-foot-color) 80%,#084f52) 100%);box-shadow:inset 0 -1px color-mix(in srgb,var(--bk-active-foot-color) 78%,black),inset 1px 0 0 -1px #ffffff2e,inset -1px 0 0 -1px #ffffff14,var(--bk-shadow-x, -6px) var(--bk-shadow-y, -2px) var(--bk-shadow-blur, 6px) var(--bk-shadow-spread, -2px) var(--bk-shadow-color, rgba(0,50,50,.5))}.hyper-black-key.active:before{border-radius:0 0 4px 4px;background-color:color-mix(in srgb,var(--bk-active-foot-color) calc(82% * var(--bk-active-foot-brightness, 90) / 100),#0b6266);background-image:radial-gradient(ellipse calc(var(--bk-glass-horn-width, 5) * 1px) calc(var(--bk-glass-horns, 39) * 1px) at 15% 0%,color-mix(in srgb,white calc(10% * var(--bk-active-foot-brightness, 90) / 100),var(--bk-active-foot-color)) 0%,transparent 100%),radial-gradient(ellipse calc(var(--bk-glass-horn-width, 5) * .8px) calc(var(--bk-glass-horns, 39) * .8px) at 85% 0%,color-mix(in srgb,white calc(6% * var(--bk-active-foot-brightness, 90) / 100),var(--bk-active-foot-color)) 0%,transparent 100%),linear-gradient(to bottom right,color-mix(in srgb,white calc(var(--bk-active-glint-top, 60) * .12%),transparent) 0%,transparent 60%),linear-gradient(to bottom left,color-mix(in srgb,white calc(var(--bk-active-glint-top, 60) * .08%),transparent) 0%,transparent 60%),linear-gradient(to bottom,color-mix(in srgb,white calc(var(--bk-active-bevel-opacity, 20) * .45%),var(--bk-active-foot-color)),color-mix(in srgb,var(--bk-active-foot-color) calc(80% * var(--bk-active-foot-brightness, 90) / 100),#0b6165)),linear-gradient(to right,color-mix(in srgb,var(--bk-active-foot-color) 82%,#0a5b5e),color-mix(in srgb,var(--bk-active-foot-color) 84%,#0a5f62) calc(var(--bk-edge-left, 3) * 1% - 2%),color-mix(in srgb,white calc(var(--bk-active-bevel-opacity, 20) * .16%),var(--bk-active-foot-color)) calc(var(--bk-edge-left, 3) * 1% - .5%),color-mix(in srgb,white calc(var(--bk-active-bevel-opacity, 20) * .12%),var(--bk-active-foot-color)) calc(var(--bk-edge-left, 3) * 1% + .5%),color-mix(in srgb,var(--bk-active-foot-color) 90%,white) calc(var(--bk-edge-left, 3) * 1% + 6%),color-mix(in srgb,var(--bk-active-foot-color) calc(86% * var(--bk-active-foot-brightness, 90) / 100),#0b6569) calc(var(--bk-edge-left, 3) * 1% + 12%),color-mix(in srgb,var(--bk-active-foot-color) calc(84% * var(--bk-active-foot-brightness, 90) / 100),#0a5c60) calc(var(--bk-edge-right, 98) * 1% - 12%),color-mix(in srgb,white 5%,var(--bk-active-foot-color)) calc(var(--bk-edge-right, 98) * 1% - .5%),color-mix(in srgb,white 3%,var(--bk-active-foot-color)) calc(var(--bk-edge-right, 98) * 1% + .5%),color-mix(in srgb,var(--bk-active-foot-color) 80%,#0a595c) calc(var(--bk-edge-right, 98) * 1% + 3%),color-mix(in srgb,var(--bk-active-foot-color) 78%,#084d50));box-shadow:inset 0 1px color-mix(in srgb,white calc(var(--bk-active-bevel-opacity, 20) * .35%),transparent),inset 2px 0 2px -3px color-mix(in srgb,white calc(var(--bk-active-bevel-opacity, 20) * .12%),transparent),inset -1px 0 2px -3px color-mix(in srgb,white calc(var(--bk-active-bevel-opacity, 20) * .06%),transparent)}.hyper-black-key.muted{--bk-muted-edge-outer: #3d4145;--bk-muted-edge-inner: #4f555a;--bk-muted-surface-left: #5d6368;--bk-muted-surface-right: #53595e;--bk-muted-center-soft: #61676c;--bk-muted-center: #646a6f;background-color:#585f64;background-image:radial-gradient(ellipse 12px 68px at 50% 18%,rgba(255,255,255,.015) 0%,transparent 68%),linear-gradient(to bottom,#ffffff12,#ffffff04 10%,#0000000f 22%,#0000 40%),linear-gradient(to bottom,transparent calc(100% - 22px),rgba(255,255,255,.035) calc(100% - 20px),rgba(0,0,0,.14) calc(100% - 17px),rgba(0,0,0,.28) 100%),linear-gradient(to right,var(--bk-muted-edge-outer) 0%,var(--bk-muted-edge-outer) calc(var(--bk-edge-left, 3) * 1% - 2%),rgba(255,255,255,.11) calc(var(--bk-edge-left, 3) * 1% - .5%),rgba(255,255,255,.055) calc(var(--bk-edge-left, 3) * 1% + .5%),var(--bk-muted-edge-inner) calc(var(--bk-edge-left, 3) * 1% + 5%),var(--bk-muted-surface-left) calc(var(--bk-edge-left, 3) * 1% + 12%),var(--bk-muted-center-soft) 42%,color-mix(in srgb,var(--bk-muted-center) 98%,white) 50%,var(--bk-muted-center-soft) 58%,var(--bk-muted-surface-right) calc(var(--bk-edge-right, 98) * 1% - 12%),rgba(255,255,255,.05) calc(var(--bk-edge-right, 98) * 1% - .5%),rgba(255,255,255,.02) calc(var(--bk-edge-right, 98) * 1% + .5%),#4f555a calc(var(--bk-edge-right, 98) * 1% + 3%),#474c50 100%);box-shadow:inset 0 1px #ffffff1f,inset 0 -1px #0000003d,inset 1px 0 0 -1px #ffffff24,inset -1px 0 0 -1px #ffffff0d,var(--bk-shadow-x, -6px) var(--bk-shadow-y, -2px) var(--bk-shadow-blur, 6px) var(--bk-shadow-spread, -2px) #00000047}.hyper-black-key.muted:before{background-color:#51575c;background-image:radial-gradient(ellipse calc(var(--bk-glass-horn-width, 5) * 1px) calc(var(--bk-glass-horns, 39) * 1px) at 15% 0%,rgba(255,255,255,.08) 0%,transparent 100%),radial-gradient(ellipse calc(var(--bk-glass-horn-width, 5) * .8px) calc(var(--bk-glass-horns, 39) * .8px) at 85% 0%,rgba(255,255,255,.04) 0%,transparent 100%),linear-gradient(to bottom,#6a7075,#4c5257),linear-gradient(to right,#494e53,#555b60 calc(var(--bk-edge-left, 3) * 1% - 2%),#ffffff14 calc(var(--bk-edge-left, 3) * 1% - .5%),#ffffff0d calc(var(--bk-edge-left, 3) * 1% + .5%),#61676c calc(var(--bk-edge-left, 3) * 1% + 6%),#676d72 calc(var(--bk-edge-left, 3) * 1% + 12%),#5f656a calc(var(--bk-edge-right, 98) * 1% - 12%),#ffffff0a calc(var(--bk-edge-right, 98) * 1% - .5%),#ffffff08 calc(var(--bk-edge-right, 98) * 1% + .5%),#585e63 calc(var(--bk-edge-right, 98) * 1% + 3%),#4d5257);box-shadow:inset 0 1px #ffffff14,inset 2px 0 2px -3px #ffffff0a,inset -1px 0 2px -3px #ffffff0a}.piano-black-key-brightness-panel{position:fixed;z-index:1100;top:5.5rem;right:1rem;display:grid;gap:.75rem;width:min(22rem,calc(100vw - 2rem));border:1px solid rgb(148 163 184 / 30%);border-radius:.5rem;padding:.85rem;color:#e5edf7;background:#101827;box-shadow:0 18px 46px #00000057}.piano-black-key-brightness-panel header,.piano-black-key-brightness-panel__control{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.piano-black-key-brightness-panel strong{color:#f8fafc;font-size:.72rem;letter-spacing:.06em}.piano-black-key-brightness-panel section{display:grid;gap:.65rem;color:#cbd5e1;font-size:.72rem;font-weight:650}.piano-black-key-brightness-panel__control input[type=range]{flex:1 1 auto;min-width:0;accent-color:#22d3ee}.piano-black-key-brightness-panel__control output{min-width:3rem;color:#67e8f9;font-variant-numeric:tabular-nums;text-align:right}.piano-black-key-brightness-panel button{justify-self:start;border:1px solid rgb(148 163 184 / 35%);border-radius:.35rem;padding:.35rem .55rem;color:#dbeafe;background:#172033;font:inherit;font-size:.66rem;font-weight:650;cursor:pointer}.piano-black-key-brightness-panel header button{justify-self:auto}