.article{min-width:0}.article>h1{margin-top:32px}.article canvas,.article svg.material{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:640/360;border-radius:8px;background:#f6f6f5}.article [hidden]{display:none!important}label{display:block;font-size:14px;margin:16px 0 6px}textarea{width:100%;font:inherit;font-size:16px;padding:12px;border:1px solid #aaa;border-radius:6px;resize:vertical;box-sizing:border-box}input[type=range]{width:100%;min-height:32px}button{font:inherit;font-size:14px;padding:8px 14px;background:white;border:1px solid #aaa;border-radius:6px;cursor:pointer}.controls{display:flex;align-items:center;gap:16px;margin-top:12px}output,.development-status,.engine-transcript,.caption{font-size:14px;line-height:1.6}.material-control{display:flex;align-items:center;gap:14px;font-size:13px}.material-control label{margin:0}.material-control input{min-width:0}.article a:focus-visible,.article button:focus-visible,.article input:focus-visible,.article textarea:focus-visible{outline:2px solid #3153aa;outline-offset:4px}
/* The character renderer uses square coordinates; preserve its proportions. */
.article canvas.engine-stage{aspect-ratio:1 / 1;max-width:460px;margin-inline:auto}