:root{--bg:#222}.vinyl-item:after{content:"";background-image:var(--texture-url,none);mix-blend-mode:screen;opacity:.8;pointer-events:none;border-radius:inherit;z-index:2;will-change:opacity;background-position:50%;background-size:cover;width:100%;height:100%;transition:opacity .2s;position:absolute;top:0;left:0}.box.is-active .vinyl-item:after{opacity:0;transform:translateY(-100%)}.vinyl-item[data-texture=none]:after{display:none}body{background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;overflow:hidden}.vinyl-carousel-wrapper{cursor:grab;perspective:1500px;perspective-origin:50%;place-items:center;width:100vw;height:100vh;display:grid;position:relative;overflow:hidden}.vinyl-carousel-wrapper:active{cursor:grabbing}.boxes{transform-style:preserve-3d;will-change:transform;-webkit-user-select:none;user-select:none;align-items:center;gap:40px;display:flex;position:relative;transform:translateZ(0)}.box{cursor:pointer;will-change:transform,filter;backface-visibility:hidden;width:220px;height:220px;transform-style:preserve-3d;flex-shrink:0;position:relative;transform:translateZ(0)}.vinyl-item{will-change:transform;backface-visibility:hidden;background-color:#0b0b0b;background-image:repeating-linear-gradient(45deg,#ffffff03 0 1px,#00000003 1px 2px);border:0 solid #000000db;border-radius:3px;place-items:center;width:100%;height:100%;padding:0;transition:filter .3s ease-in-out;display:grid;position:relative;overflow:hidden;transform:translateZ(0)}.vvinyl-item:before{content:"";border-radius:inherit;pointer-events:none;mix-blend-mode:screen;filter:blur(.6px);background:linear-gradient(#ffffff1f 0%,#ffffff05 20%,#fff0 50%);width:14%;height:100%;position:absolute;top:0;left:8%;transform:skew(-10deg)}.vvinyl-item:after{content:"";pointer-events:none;mix-blend-mode:screen;background:radial-gradient(#ffffff0f,#ff00);border-radius:50%;width:38%;height:30%;position:absolute;top:6%;right:6%;transform:translateZ(10px)}.vinyl-item img{object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;backface-visibility:hidden;border-radius:4px;width:100%;height:100%;display:block;transform:translateZ(.1px)}.controls{pointer-events:none;z-index:9999;opacity:0;visibility:hidden;pointer-events:none;gap:24px;width:auto;display:flex;position:absolute;bottom:15vh;left:50%;transform:translate(-50%)}.controls button{cursor:pointer;color:#333;pointer-events:all;background-color:#ffffffeb;border:none;border-radius:50%;place-items:center;width:52px;height:52px;transition:transform .18s,background-color .18s;display:grid;box-shadow:0 6px 18px #0000001f}.controls button:hover{background-color:#fff;transform:scale(1.06)}.controls button svg{fill:currentColor;width:28px;height:28px}.box.reflection-mirror .vinyl-item{-webkit-box-reflect:below 1px linear-gradient(to top,#00000080 0%,#00000059 10%,#0003 20%,#0000001a 30%,#0000000d 40%,transparent 60%)}.box.reflection-realistic .vinyl-item{filter:url(#realistic-shadow);-webkit-box-reflect:none}.box.reflection-none .vinyl-item{-webkit-box-reflect:none;filter:none}
.keyboard-wrapper{z-index:100;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}.keyboard,.keyboard:before,.keyboard:after{transition:background-color .3s,box-shadow .3s}.keyboard,.keyboard__key-lines{display:flex}.keyboard{background-color:#ccc;background-image:linear-gradient(90deg,#1a1a1a66,#1a1a1a00);border-radius:.75em;align-items:center;width:13em;height:6em;padding:.2em;position:relative;transform:scale(.75);box-shadow:-.5em -.5em .75em #0009,inset 0 0 0 1px #ababab}.keyboard:before,.keyboard:after{content:"";background-color:#e6e6e6;display:block;position:absolute;top:100%}.keyboard:before{width:1em;height:40em;left:calc(50% - .5em);box-shadow:.5em .5em .75em #0009,inset .25em 0 .25em #1a1a1a33,inset .25em 1.25em .5em #1a1a1a80}.keyboard:after{border-radius:0 0 .25em .25em;width:1.5em;height:1.25em;left:calc(50% - .75em);box-shadow:inset .375em .25em .5em #1a1a1a80}.keyboard__cmd{width:1em;height:1em;display:block}.keyboard__key{color:gray;cursor:pointer;appearance:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-color:#f2f2f2;border:none;border-radius:.5em;outline:#0000;width:5em;height:5em;margin:0 .375em;padding:.75em;transition:background-color .3s,box-shadow .15s,color .3s;position:relative;box-shadow:-.4em -.25em .25em #00000040,0 0 0 .1em #0000004d,inset .04em .04em .04em #0006,inset -.1em -.1em .04em #fffc}.keyboard__key--meta,.keyboard__key--wide{width:6.5em}.keyboard__key--hidden{display:none}.keyboard__key--disabled{opacity:.4;cursor:not-allowed;color:#b3b3b3}.keyboard__key:not(.keyboard__key--disabled):active,.keyboard__key:not(.keyboard__key--disabled).active{box-shadow:0 0 .2em #0003,0 0 0 .1em #0006,inset 0 -.05em #0009,inset -.05em -.15em .05em #fffc}.keyboard__key:not(.keyboard__key--disabled):hover{color:#0080ff;background-color:#ebf5ff}.keyboard__key-line{font-size:2em;font-weight:500;line-height:1}.keyboard__key-line--small{font-size:.875em}.keyboard__key-line--tr{margin:0 0 auto auto}.keyboard__key-line--br{margin:auto 0 0 auto}.keyboard__key-hint{opacity:.6;text-transform:uppercase;letter-spacing:.05em;margin-top:.25em;font-size:.65em;display:block}.keyboard__key-lines{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .15s;display:flex}.keyboard__key:not(.keyboard__key--disabled):active .keyboard__key-lines,.keyboard__key:not(.keyboard__key--disabled).active .keyboard__key-lines{transform:translateY(-1px)}.keyboard__key:before{content:"";border-radius:.5em;width:100%;height:100%;transition:box-shadow .3s;display:block;position:absolute;top:0;left:0;box-shadow:0 0 0 .5em #0d4ef200}.keyboard__key:not(.keyboard__key--disabled):focus-visible:before{box-shadow:0 0 0 .5em #0d4ef280}@media (prefers-color-scheme:dark){.keyboard__key{color:#e6e6e6;background-color:#262626;box-shadow:-.4em -.25em .25em #00000040,0 0 0 .1em #0000004d,inset .04em .04em .04em #0006,inset -.1em -.1em .04em #ffffff0d}.keyboard__key:not(.keyboard__key--disabled):active,.keyboard__key:not(.keyboard__key--disabled).active{box-shadow:0 0 .2em #0003,0 0 0 .1em #0006,inset 0 -.05em #0006,inset -.05em -.15em .05em #ffffff0d}.keyboard__key:not(.keyboard__key--disabled):hover{color:#66b3ff;background-color:#0a335c}}