:root { color-scheme: dark; font-family: system-ui, "Microsoft YaHei", sans-serif; color: #f2efe6; background: #0b0d11; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main { width: min(100% - 40px, 1600px); margin: auto; }
header { padding: 12px 0; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
a { color: #ceba8e; }
h1 { font-size: 22px; margin: 6px 0; }
h1 span { font-size: 12px; color: #9fa8b4; font-weight: 400; margin-left: 12px; }
.scope { font-size: 13px; margin: 5px 0 10px; color: #aeb6c1; }
p { line-height: 1.7; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; }
button { border: 1px solid #45484d; border-radius: 3px; background: #20242b; color: inherit; padding: 8px 16px; font: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid #ceba8e; outline-offset: 3px; }
#stage { background: #09090c; aspect-ratio: 16 / 9; width: min(100%, calc((100vh - 32px) * 16 / 9)); margin-inline: auto; }
canvas { display: block; width: 100%; height: 100%; }
#stage:fullscreen { display: grid; place-items: center; }
#stage:fullscreen canvas { width: 100vw; height: 100vh; }
@media (max-aspect-ratio: 1/1) { #stage { aspect-ratio: 9 / 11; width: min(100%, calc((100vh - 32px) * 9 / 11)); } }
progress { width: 100%; accent-color: #ceba8e; margin-bottom: 12px; }
#status { font-size: 13px; margin: 8px 0; }
.help { color: #aeb6c1; font-size: 14px; }
@media (max-width: 650px) { header { flex-direction: column; } header, main { width: calc(100% - 24px); } }