:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#111918;color:#e5eee9}*{box-sizing:border-box}body{margin:0}main{max-width:1500px;margin:auto;padding:18px 24px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}small{letter-spacing:.15em;color:#8faaa0;font-size:10px}h1{font-size:23px;font-weight:500;margin:3px 0}#status{font-size:13px;color:#b8cabe}#stage{position:relative;background:#071111;border-radius:12px;overflow:hidden;display:flex;justify-content:center;max-height:calc(100vh - 240px);min-height:240px}canvas{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;outline:none;touch-action:none}#loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;background:#101c18ed}#loading[hidden]{display:none}#loading span{color:#8da498;font-size:12px}progress{width:min(340px,70%);height:5px;accent-color:#94c4ac}nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:12px}button,select{font:inherit;font-size:13px;color:#dcece2;background:#243b32;border:1px solid #3b5549;border-radius:7px;padding:9px 14px;cursor:pointer}button:hover{background:#345342}button:disabled{opacity:.4;cursor:default}label{margin-left:auto;font-size:12px;color:#a4b8ac}label select{margin-left:8px}.timeline{display:flex;gap:18px;align-items:center;margin-top:12px;font-size:12px;color:#9fb4a7}input[type=range]{flex:1;accent-color:#99cbb0}.help{font-size:12px;color:#96ad9f;margin:12px 0}footer{display:flex;align-items:center;gap:15px;flex-wrap:wrap;color:#91aa9c;font-size:12px}footer button{padding:5px 10px;font-size:11px}details{width:100%}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}#stage:fullscreen{max-height:none;min-height:100vh;border-radius:0}#stage:fullscreen canvas{height:100vh;width:100vw}@media(max-width:700px){main{padding:12px}header{align-items:start}#stage{max-height:none;min-height:180px}label{margin-left:0}.help{line-height:1.6}}