.xpr-roll{background:#0b0b12;position:relative;overflow:hidden}.xpr-canvas{width:100%;display:block}.xpr-keys{position:relative}.xpr-slip{background:linear-gradient(90deg,#ffffff0d 0%,#fff0 18%,#0000002e 100%),linear-gradient(#2b2018 0%,#1e1710 52%,#150f0a 100%);position:relative;box-shadow:inset 0 1px #0000008c}.xpr-name{white-space:nowrap;background:#0000008c;border-radius:2px;padding:0 4px;font:600 9px/13px ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;top:50%;transform:translate(-50%,-50%)}.xpr-key{isolation:isolate;will-change:transform;background:var(--key-face);box-shadow:var(--key-shade);transform-origin:50% 0;transform:perspective(var(--key-eye,340px))rotateX(0deg);transition:transform .12s cubic-bezier(.34,1.36,.64,1),box-shadow .12s linear,background .12s linear}.xpr-key[data-lit="1"]{background:var(--key-face-down);box-shadow:var(--key-shade-down);transform:perspective(var(--key-eye,340px))rotateX(calc(-1*var(--key-dip,3.4deg)));transition-duration:25ms;transition-timing-function:cubic-bezier(.3,.7,.5,1)}.xpr-key:after{content:"";border-radius:inherit;background:var(--flash,transparent);opacity:0;transition:opacity var(--flash-release,.32s)cubic-bezier(.22,.61,.36,1);pointer-events:none;z-index:1;mix-blend-mode:multiply;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0,#000000eb 30%,#000000b8 50%,#00000061 68%,#0000 88%);mask-image:linear-gradient(#000 0,#000000eb 30%,#000000b8 50%,#00000061 68%,#0000 88%)}.xpr-key[data-black="1"]:after{mix-blend-mode:screen}.xpr-key[data-lit="1"]:after{opacity:1;box-shadow:0 0 16px 2px var(--flash,transparent);transition-duration:25ms}[data-key-flash="0"] .xpr-key[data-lit="1"]:after{opacity:0}.xpr-label{z-index:3;text-align:center;color:#6b7280;pointer-events:none;transition:color var(--flash-release,.32s)cubic-bezier(.22,.61,.36,1);font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;bottom:2px;left:0;right:0}.xpr-key[data-lit="1"] .xpr-label{color:#0a0a12;transition-duration:25ms}@keyframes xpr-restrike-a{0%{transform:perspective(var(--key-eye,340px))rotateX(calc(-1*var(--key-dip,3.4deg)))}42%{transform:perspective(var(--key-eye,340px))rotateX(calc(-.34*var(--key-dip,3.4deg)))}to{transform:perspective(var(--key-eye,340px))rotateX(calc(-1*var(--key-dip,3.4deg)))}}@keyframes xpr-restrike-b{0%{transform:perspective(var(--key-eye,340px))rotateX(calc(-1*var(--key-dip,3.4deg)))}42%{transform:perspective(var(--key-eye,340px))rotateX(calc(-.34*var(--key-dip,3.4deg)))}to{transform:perspective(var(--key-eye,340px))rotateX(calc(-1*var(--key-dip,3.4deg)))}}.xpr-key[data-restrike=a]{animation:.105s cubic-bezier(.33,0,.3,1) xpr-restrike-a}.xpr-key[data-restrike=b]{animation:.105s cubic-bezier(.33,0,.3,1) xpr-restrike-b}