*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080b10;color:#e9ecee;font-family:"Microsoft YaHei",sans-serif}body{display:grid;place-items:center;min-height:100vh;padding:18px}main{width:min(100%,560px)}.film{position:relative;width:min(100%,calc((100vh - 135px)*9/16));margin:auto;box-shadow:0 20px 100px #0009;background:#10141b;border:1px solid #ffffff12;overflow:hidden;border-radius:12px}canvas{display:block;width:100%;height:auto}button{cursor:pointer;font:inherit;border:0}#start{position:absolute;inset:0;background:#080b1055;color:white;font-size:52px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;backdrop-filter:blur(3px)}#start span{font-size:21px}#start small{font-size:13px;color:#c4cbd5}#start[hidden]{display:none}.controls{display:flex;align-items:center;gap:10px;margin:16px 0}.controls button{background:#202630;color:#fff;border-radius:7px;padding:9px 11px;font-size:12px;white-space:nowrap}input{width:100%;min-width:35px;accent-color:#ff9161}output{white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums;color:#abb5c5}.caption{font-size:14px;margin:0;color:#f9a57f}.caption span{float:right;font-size:11px;color:#7a8799}.render body{display:block;padding:0}.render main,.render .film{width:1080px;max-width:none;border:0;border-radius:0;box-shadow:none}.render .controls,.render .caption,.render #start{display:none}.film:fullscreen{height:100vh;width:auto;border-radius:0;display:flex;justify-content:center;background:#000}.film:fullscreen canvas{height:100vh;width:auto}@media(max-width:480px){body{padding:10px}.controls{gap:5px}.controls button{padding:9px 7px}.caption span{font-size:10px}}