*{box-sizing:border-box}@font-face{font-family:Pragmatica;src:url(/assets/PragmaticaCondBlack-BdgSBtt3.otf) format("opentype")}:root{--border-width: 5px;--border-color: #435058;--medium-color: #BFB7B6;--text-color: #435058;--accent-color: #E4572E;--background-color: #F1F2EE;--standard-border: var(--border-width) solid var(--border-color)}body{font-family:sans-serif;background-color:var(--background-color);color:var(--text-color);margin:0}header{border-top:var(--standard-border);padding:0 1rem;margin-bottom:1rem}h1{text-transform:uppercase;font-weight:900;display:table;border-bottom:5px dotted var(--accent-color);padding-bottom:2px;margin-bottom:1.5rem;font-family:Pragmatica}a{color:var(--accent-color)}hr{border:0;border-bottom:var(--standard-border);margin:1rem 0}main{display:flex;flex-wrap:wrap}form{border:var(--standard-border);flex:1 0 320px;display:flex;flex-direction:column}fieldset{border:0;border-bottom:var(--standard-border);padding:1rem;margin:0}fieldset legend{display:block;font-family:Pragmatica;font-size:1.2rem;padding:0;transform:translateY(50%)}.field{width:100%;max-width:25rem;display:flex;flex-wrap:wrap;margin:.5rem 0;align-items:center}.field label{flex:0 1 6rem}input[type=text]{width:100%;max-width:12rem;border:0;padding:.25rem .25rem .1rem;color:var(--text-color);border-bottom:var(--border-width) solid var(--medium-color);border-radius:0}input[type=text]:focus{border-color:var(--accent-color);outline:0}input[type=range]{-webkit-appearance:none;background-color:transparent;width:100%;max-width:8.5rem;--height: 5px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;border-radius:100%;background-color:var(--accent-color);margin-top:calc(var(--height) * -1)}input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 .25rem #e4572e40}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;background-color:var(--medium-color);height:var(--height)}input[type=range]+input[type=number]{width:2.75rem;margin-left:.5rem;border:0;padding:.25rem}form button{display:block;width:100%;padding:1rem;font-size:1.2rem;font-family:Pragmatica;color:var(--text-color);background-color:var(--accent-color);border:0;border-top:var(--standard-border);cursor:pointer;margin-top:calc(var(--border-width) * -1);margin-bottom:0}form button:hover,form button:active{color:var(--background-color);background-color:var(--border-color)}input[type=color]{-webkit-appearance:none;border:0;padding:0;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:var(--standard-border)}.field--toggle{--toggle-width: 5rem}.field--toggle label{display:flex;align-items:center;flex-basis:calc(var(--toggle-width) + 6rem)}.field--toggle label>span{display:block;flex:0 1 6rem}.toggle{color:var(--background-color);font-size:.8rem;font-family:Pragmatica;display:flex;cursor:pointer;width:var(--toggle-width);position:relative;overflow:hidden}.toggle input{margin:0;position:absolute;width:100%;height:100%}.toggle span{flex:1;text-align:center;display:block;padding:.1rem .25rem;line-height:1.2rem;z-index:1}.toggle input:after{content:"";visibility:visible;display:block;z-index:0;position:absolute;right:0;width:50%;height:100%;box-shadow:0 0 0 calc(var(--toggle-width) / 2) var(--medium-color);background:var(--accent-color)}.toggle input:checked:after{left:0}.toggle input:focus:after,.toggle input:focus:active{box-shadow:0 0 0 calc(var(--toggle-width) / 2) #b3a9a8;background-color:#d9481c}.dropzone{border-bottom:var(--standard-border);flex-grow:1;display:flex;flex-direction:column}.dropzone label{padding:2rem;background-color:transparent;text-align:center;cursor:pointer;font-family:Pragmatica;flex:1;display:flex;align-items:center;justify-content:center}.dropzone label span{display:none;border-bottom:5px dotted var(--medium-color)}.dropzone label span.drag-enabled{display:block}@media screen and (max-width:640px){.dropzone label span.drag-enabled{display:none}.dropzone label span.drag-disabled{display:block}}.dropzone--active label{background-color:var(--medium-color)}.preview{flex:1 1 320px;max-width:100vh}.preview svg{display:block}.preview canvas{position:absolute;left:-1000px}footer{padding:1rem;display:flex;align-items:center}footer p{font-size:.8rem}.btn--remix{padding:.5rem .75rem;font-size:1rem;line-height:1rem;font-weight:500;height:2.75rem;align-items:center;cursor:pointer;background:transparent;border:var(--standard-border);box-sizing:border-box;text-decoration:none;white-space:nowrap;margin-left:auto;font-family:Pragmatica;color:var(--text-color)}.btn--remix img{margin-right:.5rem}.btn--remix:hover{background-color:var(--medium-color)}