#controls{width:268px}.grid{display:grid;grid-template-columns:42px repeat(var(--steps),1fr);gap:3px;align-items:center}.grid-label{font-size:10px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.cell{min-width:0;width:100%;aspect-ratio:1;padding:0;margin:0;border:1px solid rgba(120,165,255,.18);border-radius:3px;background:#0c142cbf;transition:background .12s ease,box-shadow .12s ease}.cell.accent{background:#18264ecc}.cell:hover{border-color:#8cb9ff73;background:#263c76d9}.cell.on{border-color:hsla(var(--hue),80%,70%,.75);background:hsl(var(--hue),72%,58%);box-shadow:0 0 8px hsla(var(--hue),90%,60%,.5)}.cell.on:hover{background:hsl(var(--hue),78%,66%)}.saved-row{display:flex;gap:4px;align-items:stretch}.saved-row+.saved-row{margin-top:4px}.saved-load{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.saved-delete{flex:0 0 auto;margin:0;padding:6px 9px;line-height:1;color:var(--muted)}.saved-delete:hover{border-color:#ff8ca080;background:#78283c99;color:var(--text)}.name-row{display:flex;gap:4px;margin-top:10px}.name-row input[type=text]{flex:1 1 auto;min-width:0;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:#060b1cd9;color:var(--text);font:inherit}.name-row input[type=text]::placeholder{color:#8ea3d48c}.name-row button{margin:0}.file-button{display:inline-block;padding:6px 12px;margin:0 6px 6px 0;border:1px solid var(--border);border-radius:7px;background:#142044b3;cursor:pointer;transition:background .15s ease,border-color .15s ease}.file-button:hover{background:#263c76cc;border-color:#8cb9ff66}.file-button input[type=file]{display:none}.note{margin:6px 0 0;color:var(--muted);font-size:11px}.control.inline{display:flex;align-items:center;gap:8px}.control.inline+.control.inline{margin-top:6px}.control.inline .label{flex:0 0 40px;font-size:11px;color:hsl(var(--hue),65%,70%)}.control.inline input[type=range]{flex:1 1 auto;min-width:0}.control.inline input[type=range]::-webkit-slider-thumb{background:hsl(var(--hue),72%,64%)}.control.inline input[type=range]::-moz-range-thumb{background:hsl(var(--hue),72%,64%)}.control.inline .value{flex:0 0 30px;text-align:right;font-size:11px}.prompt .lede{max-width:30em;padding:0 24px;text-align:center;color:var(--muted)}@media (max-width: 720px){#controls{width:calc(100vw - 32px)}}