*{box-sizing:border-box}body{margin:0}main{width:min(100% - 2rem,80rem);margin-inline:auto}.layout{grid-template-columns:minmax(0,1fr) minmax(24rem,32rem);align-items:start;gap:2rem;display:grid}.preview,.options{min-width:0}.preview{position:sticky;top:1rem}canvas{width:100%;height:auto;image-rendering:pixelated;display:block}form,fieldset{gap:1rem;display:grid}fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}fieldset p{min-width:0;margin:0}fieldset .wide{grid-column:1/-1}label{justify-content:space-between;gap:1rem;margin-block-end:.25rem;display:flex}input:not([type=color]){width:100%}@media (max-width:52rem){.layout{grid-template-columns:minmax(0,1fr)}.preview{position:static}}@media (max-width:32rem){fieldset{grid-template-columns:minmax(0,1fr)}}