#scratch { font-family: sans-serif; overflow: hidden; margin: 0; padding: 0; display: none; height: 100%; width: 100%; }
#scratch.show { display: block; }
#scratch [hidden] { display: none !important; }
#scratch #app, #scratch #loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#scratch #loading { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: default; user-select: none; -webkit-user-select: none; background-color: #000000; }
#scratch #logo, #scratch #loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block }
#scratch #logo { background: url('logo.png') no-repeat top / contain; width: 312px; height: 88px; padding-bottom: 90px; }
#scratch #loading-bar { height: 18px; width: 141px; margin-top: 30px; background-color: transparent; }
#scratch #progress-bar-empty { background: url('progress-empty.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block; border-radius: 3px; }
#scratch #progress-bar-full { background: url('progress-full.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block; border-radius: 3px; margin-top: -18px; }
#scratch #link { position: absolute; left: 50%; top: 50%; margin-top: 150px; width: 728px; height: 90px; transform: translate(-50%, -50%); border: 0; }
#scratch .sc-canvas { cursor: auto; position: absolute !important; left: 0 !important; }