*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#111;color:#eee}#app{display:flex;justify-content:center;align-items:flex-start}#app canvas{display:block;margin-top:.5rem}#ui{max-width:52rem;margin:0 auto;padding:.75rem 1rem;background:#1a1a1a;border-bottom:1px solid #333}#ui h1{margin:0 0 .25rem;font-size:1.25rem;font-weight:600}.hint{margin:.35rem 0 .75rem;color:#aaa;font-size:.9rem}.hint.small{font-size:.8rem;margin-top:.25rem}.hint code{font-size:.75rem;color:#8cf}.row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem}.row span{min-width:8rem}input[type=text]{flex:1;min-width:12rem;padding:.35rem .5rem;border:1px solid #444;border-radius:4px;background:#222;color:#eee}button,select{padding:.35rem .65rem;border-radius:4px;border:1px solid #555;background:#333;color:#eee;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:not(:disabled):hover{background:#444}