@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";body,button,input{font-variant-ligatures:none;font-family:"Press Start 2P",system-ui}body{color:#463;background-color:#d0e0c0;margin:0;padding:0}p{margin:0}button{appearance:none;color:#d0e0c0;background-color:#463;border:2px solid #463;border-radius:.5em}button:hover{color:#463;background-color:#d0e0c0}#frame,#loaded,#resized-canvas,#dithered-canvas,#crop-button{display:none}form{flex-direction:column;gap:1em;display:flex}form>button{height:3em}cropper-canvas{aspect-ratio:1.14286;width:400px;max-width:calc(100vw - 4em)}label{flex-wrap:wrap;justify-content:stretch;align-items:center;display:flex}label>span{flex:.01 0 20em}label>input{flex:1 0 15em;max-width:min(30em,100vw - 4em);overflow:hidden}.colours{border:none;grid-template-rows:repeat(4,2em);grid-template-columns:5em auto;gap:.5em;padding:0;display:grid}.colours>legend{position:absolute;left:-10000vmax}.colours>label{position:relative}.colours>label:has([type=color]){grid-column:1/2}.colours>label:has(#threshold-0){grid-area:1/2/2/3}.colours>label:has(#threshold-1){grid-area:2/2/3/3}.colours>label:has(#threshold-2){grid-area:3/2/4/3}.colours>label:has(#threshold-3){grid-area:4/2/5/3}.colours>label>span{position:absolute;left:-10000vmax}.colours>label>input{offset:0;width:100%;position:absolute}#preview-canvas{image-rendering:pixelated}#printout{flex-wrap:wrap;gap:1em;display:flex}#printout>.card{display:inline-block}#printout>.card>img{image-rendering:pixelated}@media screen{#outer-container{flex-wrap:wrap;justify-content:center;align-items:start;gap:2em;width:calc(100vw - 4em);min-height:100svh;padding:2em;display:flex}#outer-container>*{flex:0 25em}#printout-column{flex-direction:column;gap:2em;display:flex}#printout-column>button{height:3em}#printout{aspect-ratio:.707107;background:var(--colour,white);border-radius:.2em;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(3,1fr);gap:0;padding:1em;display:grid;overflow:hidden;box-shadow:0 .05em .2em #000}#printout>.card{text-align:center;width:100%;position:relative;overflow:hidden}#printout>.card>img{mix-blend-mode:multiply;width:90%}#printout>.card>button{font-size:0;position:absolute;top:.5rem;right:.5rem}#printout>.card>button:after{content:"×";font-size:1rem}}@media print{form,button,label,p{display:none}#printout{gap:0}#printout>.card{text-align:center;break-inside:avoid;border:1px solid #000;width:5.5cm;height:5cm;padding-top:.2cm;display:inline-block}#printout>.card>img{width:48.8mm;height:44mm}}