@font-face{font-family:Nunito;src:url('Nunito-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('Nunito-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#191b1e}
canvas{display:block;width:100%;height:100%;outline:none}
#loading{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#191b1e;color:#fff;font:400 16px/1.5 Nunito,sans-serif;padding:24px;box-sizing:border-box}
#loading[hidden]{display:none}
.loading-content{width:min(100%,390px);text-align:center}
.loading-ball{width:56px;height:56px;margin-bottom:20px;animation:roll 4s linear infinite;will-change:transform}
#loading h1{font-size:30px;line-height:1.2;font-weight:800;margin:0 0 14px;text-wrap:balance}
#loading-detail{color:#cbd0d9;min-height:48px;margin:0 0 24px;text-wrap:pretty}
#loading-progress{height:10px;overflow:hidden;border-radius:5px;background:#393d45}
#loading-fill{height:100%;background:#ffda39;transform-origin:left;transform:scaleX(0)}
#loading-progress[data-busy] #loading-fill{width:35%;transform:translateX(-100%);animation:travel 1.5s ease-in-out infinite;will-change:transform}
#loading-numbers{display:flex;justify-content:space-between;gap:16px;margin:12px 0 0;min-height:24px;font-weight:800;font-variant-numeric:tabular-nums}
#loading-percent{color:#ffda39}
#loading-note{font-size:14px;color:#cbd0d9;margin:20px 0 0;min-height:42px}
#loading-reload{font:800 16px Nunito,sans-serif;color:#252936;background:#ffda39;border:0;border-radius:12px;padding:12px 24px;min-height:46px;margin-top:12px;cursor:pointer;box-shadow:0 4px 8px #0003}
#loading-reload:hover{background:#ffe477}
#loading-reload:focus-visible,#loading-error summary:focus-visible{outline:3px solid #fff;outline-offset:5px}
#loading-error{margin-top:20px;color:#cbd0d9;font-size:14px;text-align:left}
#loading-error summary{cursor:pointer}
#loading-error pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto;font-size:12px}
#loading ::selection{background:#ffda39;color:#191b1e}
@keyframes roll{to{transform:rotate(360deg)}}
@keyframes travel{to{transform:translateX(390%)}}
@media(prefers-reduced-motion:reduce){.loading-ball,#loading-progress[data-busy] #loading-fill{animation:none;will-change:auto}#loading-progress[data-busy] #loading-fill{transform:translateX(90%)}}
@media(max-height:420px){.loading-ball{width:36px;height:36px;margin-bottom:8px}#loading h1{font-size:24px}#loading-detail{min-height:0;margin-bottom:16px}#loading-note{margin-top:12px;min-height:0}}
