body{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#000}.app{width:1920px;height:1080px;position:relative}h1{position:absolute;top:151.5px;left:50%;transform:translate(-50%) translateY(-50%);color:#fff;font-size:40px}.video-list{display:flex;column-gap:4.5px;position:absolute;top:303px;left:50%;transform:translate(-50%);background-size:1077px 450px}.video-wrapper{width:150px;height:450px;overflow:hidden;position:relative}.video-wrapper video{width:156px;height:456px;object-fit:fill;position:absolute;left:0;top:0}.start-video-wrapper{position:absolute;top:303px;left:50%;transform:translate(-50%);width:1077px;height:450px}@keyframes from-transparent{0%{opacity:0}to{opacity:1}}@keyframes to-transparent{0%{opacity:1}to{opacity:0}}@keyframes keydown{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.start-video{width:1077px;height:450px;object-fit:fill}.keyboard{position:absolute;left:50%;transform:translate(-50%);top:3045px;zoom:.3}.key-line{display:flex;width:656px;justify-content:space-between}.key-line:not(:first-child){margin-top:4px}.key-line:nth-child(6) .key:nth-child(1),.key-line:nth-child(6) .key:nth-child(2),.key-line:nth-child(6) .key:nth-child(3){width:50px}.key-line:nth-child(3) .key:nth-child(1),.key-line:nth-child(3) .key:nth-child(13){width:60px}.key-line:nth-child(4) .key:nth-child(1),.key-line:nth-child(5) .key:nth-child(12){width:70px}.key-line:nth-child(4) .key:nth-child(13),.key-line:nth-child(5) .key:nth-child(1){width:90px}.key-line:nth-child(2) .key:nth-child(13){width:80px}.key-line:nth-child(6) .key:nth-child(4){width:250px}.key{width:40px;height:40px;border:1px solid white;background-color:#000;border-radius:4px;opacity:.5}.press{background-color:#fff}audio{display:none}*{margin:0;padding:0;box-sizing:border-box}