:root{color-scheme:dark;font-family:"Microsoft YaHei",system-ui,sans-serif;background:#08090d;color:#eee}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#25243a,#08090d 65%)}
main{display:grid;gap:14px;justify-items:center;padding:20px}canvas{display:block;width:min(96vw,calc((100dvh - 120px)*4/3),960px);height:auto;background:#000;box-shadow:0 12px 50px #000;border:1px solid #45405c;outline:none;image-rendering:auto}
canvas:fullscreen{width:100vw;height:100vh;object-fit:contain;border:0}
canvas:focus{border-color:#9e8cff}#loading{width:min(96vw,640px);display:grid;gap:7px;text-align:center}progress{width:100%;height:10px}#detail{font-size:13px;color:#b8b3c8;min-height:1.4em}
body.running #loading{opacity:.25;transition:opacity .5s}body.running #loading:hover{opacity:1}