*{box-sizing:border-box}html,body{height:100%;color:#fff;background:#222;margin:0;font-family:sans-serif;line-height:1;overflow:hidden}h1{letter-spacing:.1em;color:#0064ff;margin:0 0 .5em;font-family:sans-serif;font-size:24px}h1 a{color:inherit;text-decoration:none}p{margin:0 0 .3em;font-size:.8em}a{color:#0064ff;font-weight:700;text-decoration:none}a:hover{color:#408cff}body{grid-template-rows:auto 1fr auto;grid-template-areas:"header""main";display:grid}.checkboard{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0/10px 10px}#app{height:100%;grid-template:"left preview right"1fr/352px 1fr 352px;grid-area:main;display:grid;position:relative;overflow:hidden}.Header{background:#111;grid-area:header;align-items:center;gap:8px;padding:16px 8px;display:flex}.Header>img{width:64px;height:64px}.Header-links{text-align:right;margin-left:auto}.PresetMenu{grid-area:left}.ConfigMenu{grid-area:right}.ConfigMenu-button{width:100%;font-size:18px}.Menu{background-color:#333;flex-direction:column;display:flex;overflow:hidden}.Menu-header{text-align:center;text-transform:uppercase;letter-spacing:.1em;color:#0064ff;padding:4px;font-family:sans-serif;font-size:24px}.Menu-footer{text-align:center;text-transform:uppercase;letter-spacing:.1em;color:#0064ff;flex-direction:column;gap:4px;padding:4px;font-family:sans-serif;font-size:24px;display:flex}.Menu-content{flex-grow:1;overflow:auto}.Menu-content::-webkit-scrollbar{width:8px}.Menu-content::-webkit-scrollbar-track{background-color:#222;border-radius:100px}.Menu-content::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:100px}.Menu-section{background:#444;border-radius:8px;flex-direction:column;margin:8px;display:flex;overflow:hidden}.Menu-sectionTitle{text-align:left;letter-spacing:.1em;background:#555;padding:4px 16px;font-family:sans-serif}.Menu-sectionContent{flex-direction:column;gap:4px;padding:4px;display:flex}.Button{cursor:pointer;appearance:none;color:#fff;text-align:center;vertical-align:middle;border:0;border-radius:5px;padding:6px;font-weight:700}.Button,.Button--primary{background:#0064ff}.Button:hover,.Button--primary:hover{color:#fff;background:#408cff}.Button--success{background:#00b552}.Button--success:hover{color:#fff;background:#00e868}.Button--danger{background:#ff4600}.Button--danger:hover{color:#fff;background:#ff7642}.Button--neutral{background:#555}.Button--neutral:hover{color:#fff;background:#777}.Button:disabled,.Button--success:disabled,.Button--danger:disabled{cursor:initial;color:#777;background:#333}.PaletteForm{background:#222;border-radius:8px;overflow:hidden}.PaletteForm-header{text-align:center;background-color:#111;padding:8px}.PaletteForm-content{padding:4px}.PaletteForm-item{width:32px;height:32px;color:#0000;appearance:none;cursor:pointer;background:#777;border:none;border-radius:8px;outline:none;margin:4px}.PaletteForm-footer{flex-direction:row;gap:4px;margin-top:4px;display:flex}.PaletteForm-button{flex-grow:1}.PaletteForm-item{opacity:.5}.PaletteForm-item:hover{opacity:1}.PaletteForm-item.is-active{opacity:1;background-color:#0064ff}.PaletteForm-item--type{width:64px;height:64px}.PaletteForm-item--type.PaletteForm-item--typeColor{background-color:#777}.PaletteForm-item--type.PaletteForm-item--typeColor:hover,.PaletteForm-item--type.PaletteForm-item--typeColor:focus,.PaletteForm-item--type.PaletteForm-item--typeColor.is-active{background-color:#0064ff}.PaletteForm-item--type.PaletteForm-item--typeLinear{background:linear-gradient(#444 0%,#fff 100%)}.PaletteForm-item--type.PaletteForm-item--typeLinear:hover,.PaletteForm-item--type.PaletteForm-item--typeLinear:focus,.PaletteForm-item--type.PaletteForm-item--typeLinear.is-active{background:linear-gradient(#0064ff 0%,#fff 100%)}.PaletteForm-item--type.PaletteForm-item--typeRadial{background:radial-gradient(#fff 0%,#444 100%)}.PaletteForm-item--type.PaletteForm-item--typeRadial:hover,.PaletteForm-item--type.PaletteForm-item--typeRadial:focus,.PaletteForm-item--type.PaletteForm-item--typeRadial.is-active{background:radial-gradient(#fff 0%,#0064ff 100%)}.PaletteForm-picker{width:64px;height:64px;color:#0000;appearance:none;cursor:pointer;background-color:#fff;border:none;border-radius:8px;outline:none;margin:4px;position:relative}.PaletteForm-swap{width:24px;height:24px;appearance:none;cursor:pointer;background:#ddd;border:0;border-radius:4px;padding:0}.PaletteForm-swap:hover{background:#eee}.PaletteForm-slider{height:64px;background:#777;border-radius:8px;flex-direction:column;flex-grow:1;justify-content:space-around;align-items:center;margin:4px;padding:8px;display:flex}.PaletteForm-sliderInput{color:#0064ff;width:100%}.PaletteForm-type,.PaletteForm-color,.PaletteForm-linear,.PaletteForm-radial{flex-direction:row;justify-content:center;align-items:center;display:flex}.PaletteList{width:100%;flex-flow:wrap;margin:0;padding:4px;list-style-type:none;display:flex}.PaletteList-item{border:2px solid #eee;border-radius:4px;margin:4px}.PaletteList-item.is-active{border-color:#0064ff}.PaletteList-itemButton{width:58px;height:58px;appearance:none;vertical-align:top;cursor:pointer;background:0 0;border:none;padding:0;font-family:monospace}.FilePicker{width:100%;flex-direction:column;display:flex;position:relative}.FilePicker-name{text-align:center;color: ;padding:4px}.FilePicker-wrapper{max-width:100%;width:100%;padding:50%;position:relative}.FilePicker{width:100%;flex-direction:column;gap:4px;display:flex}.FilePicker-input{width:100%;height:100%;opacity:0;z-index:2;position:absolute;top:0;left:0}.FilePicker-image{width:100%;height:100%;z-index:1;color:#000;background:#fff;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0;overflow:hidden}.FilePicker-image>img{max-width:100%;max-height:100%}.GeneralForm{width:100%;flex-direction:column;gap:4px;display:flex}.GeneralForm-field{background:#222;border-radius:8px;overflow:hidden}.GeneralForm-fieldLabel{text-align:center;background-color:#111;padding:8px}.GeneralForm-slider{height:48px;border-radius:8px;flex-direction:column;flex-grow:1;justify-content:space-around;align-items:center;padding:4px;display:flex}.GeneralForm-sliderInput{color:#0064ff;width:100%}.GeneralForm-type,.GeneralForm-color,.GeneralForm-linear,.GeneralForm-radial{flex-direction:row;justify-content:center;align-items:center;display:flex}.GeneralForm-buttonGroup{margin:4px;display:flex}.GeneralForm-buttonGroup>.Button{border-radius:0;flex-grow:1}.GeneralForm-buttonGroup>.Button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.GeneralForm-buttonGroup>.Button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.ShadowForm{width:100%;flex-direction:column;gap:4px;display:flex}.ShadowForm-field{background:#222;border-radius:8px;flex-direction:column;align-items:center;display:flex;overflow:hidden}.ShadowForm-fieldLabel{width:100%;text-align:center;background-color:#111;padding:8px}.ShadowForm-slider{width:100%;height:48px;border-radius:8px;flex-direction:column;flex-grow:1;justify-content:space-around;align-items:center;padding:4px;display:flex}.ShadowForm-sliderInput{color:#0064ff;width:100%}.ShadowForm-type,.ShadowForm-color,.ShadowForm-linear,.ShadowForm-radial{flex-direction:row;justify-content:center;align-items:center;display:flex}.ShadowForm-buttonGroup{margin:4px;display:flex}.ShadowForm-buttonGroup>.Button{border-radius:0;flex-grow:1}.ShadowForm-buttonGroup>.Button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.ShadowForm-buttonGroup>.Button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.ShadowForm-picker{width:64px;height:64px;color:#0000;appearance:none;cursor:pointer;background-color:#fff;border:none;border-radius:8px;outline:none;margin:4px;position:relative}.OpacityField{background:#222;border-radius:8px;flex-direction:column;align-items:center;display:flex;overflow:hidden}.OpacityField-label{width:100%;text-align:center;background-color:#111;padding:8px}.OpacityField-slider{width:100%;height:48px;border-radius:8px;flex-direction:column;flex-grow:1;justify-content:space-around;align-items:center;padding:4px;display:flex}.OpacityField-sliderInput{color:#0064ff;width:100%}.PresetList{width:100%;flex-flow:wrap;margin:0;padding:4px;list-style-type:none;display:flex}.PresetList-item{border:2px solid #eee;border-radius:4px;margin:4px}.PresetList-item.is-active{pointer-events:none;border-color:#0064ff}.PresetList-itemButton{width:90px;height:100%;appearance:none;vertical-align:top;cursor:pointer;border:none;flex-direction:column;justify-content:flex-start;align-items:center;padding:0;font-family:monospace;display:flex}.PresetList-itemPreview{width:100%;height:auto;image-rendering:pixelated}.PresetList-itemName{width:100%;background:#fff;flex-grow:1;font-size:12px}.Preview{flex-direction:column;grid-area:preview;justify-content:center;align-items:center;padding:16px;display:flex;overflow:hidden}.Preview-frame{max-width:100%;background:#fff;border-radius:8px;flex-shrink:1;padding:16px;box-shadow:0 0 16px #000}.Preview-image{max-width:100%;object-fit:contain;image-rendering:pixelated}.Preview-download{flex-grow:0;margin-top:8px}.Preview-zoom{margin:8px;font-size:18px}.Preview-frame--fit{width:100%;max-height:calc(100% - 96px)}.Preview-frame--fit .Preview-image{width:100%;height:auto;max-height:100%;max-width:auto}.Preview-frame--1 .Preview-image{image-rendering:auto}
/*# sourceMappingURL=index.c20a1691.css.map */