body{margin:0;padding:0;overflow:hidden}#app{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw}#waveform{position:fixed;left:0;top:50%;width:100%;visibility:hidden}#average-size{visibility:hidden}.enter{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000;display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:#fff}.enter-button{border-radius:0;font-family:Times New Roman,Times,serif;cursor:pointer;text-decoration:underline;margin:0}.enter-text{font-family:Times New Roman,Times,serif;margin:0}.audio-player{position:absolute;top:0;left:0;visibility:hidden}.text-container{display:none;position:absolute;top:0;left:0;width:100%;height:100vh;font-size:18px;overflow-y:scroll;font-family:Times New Roman,Times,serif}#text-container{position:absolute;top:0;left:0;width:100%;height:auto;z-index:1;margin:0;padding:0;font-size:18px;will-change:transform;font-family:Times New Roman,Times,serif}#text-container p{margin:0}.text-container p{margin:0;position:absolute;top:0;left:0}.corner{position:absolute;top:5px;right:5px;width:300px}@media screen and (max-width: 600px){.corner{width:200px}}.pointer{position:absolute;bottom:0;left:0;width:150px;height:1px}.container{position:fixed;z-index:3;display:flex;justify-content:center;align-items:flex-start}.left{display:flex;flex-direction:column;align-items:flex-end}.top-left{display:flex;align-items:flex-end}.bottom-left{margin-top:16px}.top-right{position:relative;display:flex;height:155px;align-items:flex-start;justify-content:flex-end;flex-direction:column}.timeBorder{height:0;width:100px;visibility:hidden;position:fixed;bottom:30%;left:0;z-index:3;border:#000000 dashed 1px;transform-origin:left center;transform:scaleX(2)}.vertical-container{display:flex;flex-direction:column}.horizontal-container{display:flex}.scroll-vertical{width:16px;height:300px;overflow-y:scroll;overflow-x:hidden}.content{width:1px;height:600px}.scroll-horizontal{width:200px;height:16px;overflow-y:hidden;overflow-x:scroll}.scroll-horizontal .content{width:600px;height:1px}.first{width:130px}.first .content{width:350px}.second{height:155px}.second .content{height:400px}.third{width:146px}.third .content{width:800px}.fourth{position:absolute;width:290px;transform:translateY(155px)}.fifth{height:260px}.sixth{height:460px}.scroll-container::-webkit-scrollbar{width:16px}.scroll-container::-webkit-scrollbar-button:start:decrement,.scroll-container::-webkit-scrollbar-button:end:increment{display:block;width:16px;height:16px;border:1px solid #000000;background-color:#dedede;box-shadow:-1px -1px #787877 inset,1px 1px #fff inset}.scroll-container::-webkit-scrollbar-button:vertical:decrement{border-top:1px solid #000000;background:linear-gradient(#343463 10%,#a4a4d4 10%,#a4a4d4 90%,transparent 90%) 49% center / 1px 10px no-repeat,linear-gradient(transparent 10%,#343463 10%,#343463 20%,#a4a4d4 20%,#a4a4d4 90%,#343463 90%,#343463) 49% center / 3px 10px no-repeat,linear-gradient(transparent 20%,#343463 20%,#343463 30%,#a4a4d4 30%,#a4a4d4 50%,#343463 50%,#343463) 49% center / 5px 10px no-repeat,linear-gradient(transparent 30%,#343463 30%,#343463 40%,#a4a4d4 40%,#a4a4d4 50%,#343463 50%,#343463 60%,transparent 60%) 49% center / 7px 10px no-repeat,linear-gradient(transparent 40%,#343463 40%,#343463 60%,transparent 60%) 49% center / 9px 10px no-repeat,linear-gradient(transparent 50%,#343463 50%,#343463 60%,transparent 60%) 49% center / 11px 10px no-repeat,#dedede}.scroll-container::-webkit-scrollbar-button:vertical:increment{border-bottom:1px solid #000000;background:linear-gradient(to top,#343463 10%,#a4a4d4 10%,#a4a4d4 90%,transparent 90%) 49% center / 1px 10px no-repeat,linear-gradient(to top,transparent 10%,#343463 10%,#343463 20%,#a4a4d4 20%,#a4a4d4 90%,#343463 90%,#343463) 49% center / 3px 10px no-repeat,linear-gradient(to top,transparent 20%,#343463 20%,#343463 30%,#a4a4d4 30%,#a4a4d4 50%,#343463 50%,#343463) 49% center / 5px 10px no-repeat,linear-gradient(to top,transparent 30%,#343463 30%,#343463 40%,#a4a4d4 40%,#a4a4d4 50%,#343463 50%,#343463 60%,transparent 60%) 49% center / 7px 10px no-repeat,linear-gradient(to top,transparent 40%,#343463 40%,#343463 60%,transparent 60%) 49% center / 9px 10px no-repeat,linear-gradient(to top,transparent 50%,#343463 50%,#343463 60%,transparent 60%) 49% center / 11px 10px no-repeat,#dedede;height:15px;border-bottom:none}.scroll-container::-webkit-scrollbar-button:horizontal:decrement{background:linear-gradient(to right,#343463 10%,#a4a4d4 10%,#a4a4d4 90%,transparent 90%) center 49% / 10px 1px no-repeat,linear-gradient(to right,transparent 10%,#343463 10%,#343463 20%,#a4a4d4 20%,#a4a4d4 90%,#343463 90%,#343463) center 49% / 10px 3px no-repeat,linear-gradient(to right,transparent 20%,#343463 20%,#343463 30%,#a4a4d4 30%,#a4a4d4 50%,#343463 50%,#343463) center 49% / 10px 5px no-repeat,linear-gradient(to right,transparent 30%,#343463 30%,#343463 40%,#a4a4d4 40%,#a4a4d4 50%,#343463 50%,#343463 60%,transparent 60%) center 49% / 10px 7px no-repeat,linear-gradient(to right,transparent 40%,#343463 40%,#343463 60%,transparent 60%) center 49% / 10px 9px no-repeat,linear-gradient(to right,transparent 50%,#343463 50%,#343463 60%,transparent 60%) center 49% / 10px 11px no-repeat,#dedede}.scroll-container::-webkit-scrollbar-button:horizontal:increment{background:linear-gradient(to left,#343463 10%,#a4a4d4 10%,#a4a4d4 90%,transparent 90%) center 49% / 10px 1px no-repeat,linear-gradient(to left,transparent 10%,#343463 10%,#343463 20%,#a4a4d4 20%,#a4a4d4 90%,#343463 90%,#343463) center 49% / 10px 3px no-repeat,linear-gradient(to left,transparent 20%,#343463 20%,#343463 30%,#a4a4d4 30%,#a4a4d4 50%,#343463 50%,#343463) center 49% / 10px 5px no-repeat,linear-gradient(to left,transparent 30%,#343463 30%,#343463 40%,#a4a4d4 40%,#a4a4d4 50%,#343463 50%,#343463 60%,transparent 60%) center 49% / 10px 7px no-repeat,linear-gradient(to left,transparent 40%,#343463 40%,#343463 60%,transparent 60%) center 49% / 10px 9px no-repeat,linear-gradient(to left,transparent 50%,#343463 50%,#343463 60%,transparent 60%) center 49% / 10px 11px no-repeat,#dedede;width:15px;border-right:none}.scroll-container::-webkit-scrollbar-track{background:radial-gradient(circle at .5px .5px,#787877 .5px,transparent .5px) 0 / 4px 2px repeat,radial-gradient(circle at 2.5px 1.5px,#787877 .5px,transparent .5px) 0 / 4px 2px repeat,#dedede}.scroll-container::-webkit-scrollbar-track:vertical{border-left:1px solid #000000;border-right:1px solid #000000}.scroll-container::-webkit-scrollbar-track:horizontal{border-top:1px solid #000000;border-bottom:1px solid #000000}.scroll-container::-webkit-scrollbar-thumb{width:14px;box-shadow:-1px -1px #343463 inset,1px 1px #cdcdfc inset}.scroll-container::-webkit-scrollbar-thumb:vertical{border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #555655;background:linear-gradient(#a4a4d4 10%,#cdcdfc 10%,#cdcdfc 20%,#676796 20%,#676796 30%,#cdcdfc 30%,#cdcdfc 40%,#676796 40%,#676796 50%,#cdcdfc 50%,#cdcdfc 60%,#676796 60%,#676796 70%,#cdcdfc 70%,#cdcdfc 80%,#676796 80%,#676796 90%,#cdcdfc 90%) 49% center / 5px 10px no-repeat,#aaaaab}.scroll-container::-webkit-scrollbar-thumb:horizontal{border-top:1px solid #000000;border-bottom:1px solid #000000;border-left:1px solid #555655;background:linear-gradient(to right,#a4a4d4 10%,#cdcdfc 10%,#cdcdfc 20%,#676796 20%,#676796 30%,#cdcdfc 30%,#cdcdfc 40%,#676796 40%,#676796 50%,#cdcdfc 50%,#cdcdfc 60%,#676796 60%,#676796 70%,#cdcdfc 70%,#cdcdfc 80%,#676796 80%,#676796 90%,#cdcdfc 90%) center 49% / 10px 5px no-repeat,#aaaaab}.scroll-container::-webkit-scrollbar-corner{border-top:1px solid black;border-left:1px solid black}