@font-face{font-family:Rubik;src:url('./assets/Rubik.ttf');font-weight:300 900;font-display:swap}@font-face{font-family:Symbols;src:url('./assets/Symbols.ttf');font-weight:550;font-display:block}
:root{font-family:Rubik,Arial,sans-serif;color:#343647;background:#c7c7ca;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{height:100dvh;min-height:400px;display:flex;flex-direction:column}.stage{position:relative;flex:1;min-height:240px}canvas{display:block;width:100%;height:100%;position:absolute;inset:0;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}button,select{font:inherit;color:inherit;touch-action:manipulation}button{cursor:pointer;border:1px solid #8b8b9a33;background:#e0e0e47a;border-radius:24px;min-height:40px;padding:9px 14px;font-size:12px;white-space:nowrap}button:hover{background:#eeeef2}button:active{background:#d8d7e4}:focus-visible{outline:3px solid #6454cb;outline-offset:3px}nav{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}nav button[aria-pressed=true]{background:#47405e;color:white;border-color:transparent}nav button i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:var(--brand)}.controls{padding:16px 24px 22px;display:flex;flex-direction:column;gap:12px;align-items:center}.material-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px}.material-controls label{font-size:11px;color:#555663;margin-left:9px}select{font-size:12px;border:0;background:#dedee466;border-radius:20px;min-height:40px;padding:8px 10px}#cycle[aria-pressed=true]{color:#443485;background:#ddd8ee}#error{position:absolute;inset:30%;line-height:1.5;color:#8d294c;font-size:14px}[hidden]{display:none!important}@media(max-width:700px){.controls{padding:10px 12px 18px;gap:8px}nav{flex-wrap:nowrap;overflow:auto;justify-content:flex-start;max-width:100%;padding:4px}button{padding:9px 12px}.material-controls{gap:4px}.material-controls label{margin-left:2px}main{min-height:440px}}