body.piano .mainInner,body.record .mainInner{position:static;margin:0;padding:0;max-height:100vh;overflow:visible;max-width:none}body.piano .wrapper,body.record .wrapper{position:relative;height:100vh;perspective:1000px;transform-style:preserve-3d}body.piano .wrapper .inner,body.record .wrapper .inner{position:fixed;bottom:50px;left:50px;background-color:rgba(0,0,0,.4);padding:20px;border-radius:5px;font-family:var(--font-eb-garamond);opacity:0;max-width:400px}body.piano .wrapper .inner .title,body.record .wrapper .inner .title{display:flex;align-items:center;gap:10px;margin-bottom:1.2em}body.piano .wrapper .inner .title .icon,body.piano .wrapper .inner .title img,body.record .wrapper .inner .title .icon,body.record .wrapper .inner .title img{opacity:0;transform:skewY(60deg) translate(5px,5px);filter:"blur(15px)"}body.piano .wrapper .inner .title .icon,body.record .wrapper .inner .title .icon{position:relative;top:1px}body.piano .wrapper .inner .title img,body.record .wrapper .inner .title img{width:14px}body.piano .wrapper .inner .title h1,body.record .wrapper .inner .title h1{letter-spacing:.1em;font-size:20px}body.piano .wrapper .inner .title h1 span,body.record .wrapper .inner .title h1 span{display:inline-block;opacity:0;transform:skewY(40deg) translate(5px,5px);filter:"blur(15px)"}body.piano .wrapper .inner p,body.record .wrapper .inner p{color:#ddd;font-size:14px;letter-spacing:.05em;opacity:0;translate:0 10px;filter:"blur(15px)"}body.piano .wrapper .inner p+p,body.record .wrapper .inner p+p{margin-top:1em}@media screen and (max-width:768px){body.piano .wrapper .inner,body.record .wrapper .inner{top:100svh;bottom:auto;left:5%;translate:0 -120%;padding:15px;max-width:90vw}body.piano .wrapper .inner .title h1,body.record .wrapper .inner .title h1{font-size:19px}}