@keyframes fadeInColor{0%{background-color:#000}}.Color{display:flex;flex-direction:column;flex:1;text-align:center;color:#fff}.Color .Color-swatch{flex:1;background-color:#111;background-image:linear-gradient(45deg,#222 25%,transparent 25%),linear-gradient(-45deg,#222 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#222 75%),linear-gradient(-45deg,transparent 75%,#222 75%);background-size:30px 31px;background-position:15px 0,15px 15px,0 15px,0 0;position:relative}.Color .Color-swatch input[type=color]{position:absolute;left:0;width:100%;height:100%;border:none;outline:none;padding:0;background-color:#000;visibility:hidden}.Color .Color-swatch label{display:flex;padding-top:50%;min-height:10rem;transition:background-color .5s ease-out;animation:fadeInColor .5s ease-out;cursor:pointer;overflow:hidden}@media(max-width:850px){.Color .Color-swatch label{min-height:6rem}}.Color .Color-swatch label span{visibility:hidden}.Color .Color-settings{background-color:var(--color-neutral-darker);padding:var(--space-xxs) var(--space-xs);display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative}@media screen and (max-width:850px){.Color .Color-settings{padding:.3rem;display:block;font-size:.8em}}.Color .Color-settings input{display:inline-block;background-color:transparent;border:none;text-transform:uppercase;color:inherit;font:inherit;width:5rem;font-size:.9em;line-height:var(--space-sm)}.Color .Color-settings input:focus{outline:none}@media screen and (max-width:850px){.Color .Color-settings input{width:100%;text-align:center}}.Color .Color-settings .Color-format{display:inline-block;font-weight:700;margin-right:.2em;font-size:1.2em;color:var(--color-neutral-lighter);vertical-align:middle;line-height:var(--space-sm)}@media screen and (max-width:850px){.Color .Color-settings .Color-format{line-height:1;font-size:.9em}}.Color .Color-reset{background-color:transparent;border:none;cursor:pointer;fill:#fff;position:absolute;bottom:3rem;outline:none;opacity:.5;background-color:rgba(from var(--color-neutral-darker) r g b / .8);border-radius:15px;width:30px;height:30px;padding:5px}.Color .Color-reset svg{width:20px;height:20px}.Color .Color-range{display:flex;position:absolute;left:0;right:0;bottom:100%;padding:var(--space-xs) var(--space);opacity:0;transform:translateY(5px);transition:opacity .2s ease-out,transform .2s ease-out}.Color .Color-range input{flex:1}@media screen and (max-width:850px){.Color .Color-range{padding:var(--space-sm) var(--space-xs)}}.Editable{display:inline-block;padding:1em}.Editable-input{display:inline-block}.Editable-button{background:transparent;border:none;width:12px;height:12px;margin:0 .3em;vertical-align:top;cursor:pointer}.Editable-button:hover path{fill:var(--color-primary-light)}.ColorGroup{position:relative;box-shadow:0 2px 10px rgba(#000,.2)}.ColorGroup .ColorGroup-title{text-align:center;font-size:1em;margin:0;position:absolute;top:var(--space-xs);left:0;right:0;z-index:1;padding:.3em 0;opacity:0;transform:translateY(-5px);transition:opacity .2s,transform .2s;pointer-events:none}.ColorGroup .ColorGroup-title .Editable{display:inline-block;background-color:rgb(from var(--color-neutral-darker) r g b / .5);color:#fff;padding:.2rem var(--space-sm) .3rem;border-radius:2em;pointer-events:all;font-size:.85em;text-transform:capitalize;line-height:1}.ColorGroup .ColorGroup-colors{position:relative;flex-direction:row;display:flex}.ColorGroup:hover .ColorGroup-title{opacity:1;transform:translateY(0)}.ColorGroup:hover .Color-range{transform:translateY(0)}.ColorGroup:hover .Color-reset,.ColorGroup:hover .Color-range,.ColorGroup:hover .Color label span{opacity:1}.ColorGroup:hover .ColorGroup-remove{pointer-events:all;opacity:1;transform:translate(0)}.ColorGroup-footer{text-align:center;padding:var(--space-sm) 0}.ColorGroup-remove{position:absolute;right:var(--space-sm);top:var(--space-sm);width:26px;height:26px;border-radius:50%;background-color:rgba(#000,.3);border:none;outline:none;display:flex;align-items:center;justify-content:center;transition:background-color .2s,opacity .2s,transform .2s;cursor:pointer;opacity:0;transform:translate(5px);pointer-events:none}.ColorGroup-remove:hover{background-color:rgba(#000,.8)}.ColorGroup-add{box-sizing:content-box;border:none;background:none;margin:var(--space-sm) var(--space);padding:var(--space-sm) var(--space-sm);cursor:pointer;outline:none;border-radius:10em;position:relative;background:var(--color-neutral);box-shadow:0 2px 10px rgba(#000,.3);transition:background-color .2s,transform .2s,box-shadow .2s}.ColorGroup-add svg{width:20px;height:20px;position:relative;z-index:2}.ColorGroup-add svg path{transition:fill .2s}.ColorGroup-add:hover,.ColorGroup-add:focus{background:var(--color-primary-light);box-shadow:0 4px 15px rgba(#000,.3);transform:translateY(-2px)}.Output{font-size:.85rem}.Output-title{margin:var(--space-sm) 0 0;padding:.5rem var(--space);letter-spacing:.1em;font-size:.85em;text-transform:uppercase}.Output-options{display:flex;flex-direction:row;padding:.5rem var(--space)}.Output-options button{display:inline-block;flex:1;text-align:center;padding:var(--space-xs) var(--space-sm);background-color:var(--color-neutral-light);color:#fff;text-transform:uppercase;border:none;cursor:pointer;transition:background-color .2s;outline:none;border:1px solid var(--color-neutral-darker);border-left:none;border-radius:0}.Output-options button:first-child{border-radius:4px 0 0 4px;border-left:1px solid var(--color-neutral-darker)}.Output-options button:last-child{border-radius:0 4px 4px 0}.Output-options button:hover,.Output-options button:focus{background-color:var(--color-neutral)}.Output-options button.is-active{background-color:var(--color-primary)}.Output-code{padding:var(--space)}.Output-code pre{font-family:Fira Code,monospace;margin:0;line-height:1.6;overflow:auto;font-size:.9em}.Output-code .prefix{color:var(--color-primary-lighter)}.Output-code .comment{color:var(--color-neutral-lighter)}body{margin:0;padding:0;font-family:Fira Code,sans-serif;background-color:var(--color-neutral-dark);color:#fff}::selection{background-color:var(--color-primary-light);color:#fff}.App{position:absolute;inset:0;display:flex;flex-direction:column}.App .App-main{flex:1;display:grid;grid-template-columns:auto 20rem}@media screen and (max-width:850px){.App .App-main{display:flex;flex-direction:column}}.App .App-export{border-left:1px solid var(--color-neutral-light);z-index:2}@media screen and (max-width:850px){.App .App-export{border:none;border-top:1px solid var(--color-neutral-light)}}.App .App-footer{border-top:1px solid var(--color-neutral-light);padding:.75rem 1rem;font-size:.875rem;display:flex;align-items:center;gap:1rem;justify-content:space-between}.App .App-footer p{margin:0}.App .App-footer img{display:block}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--space: 1.5rem;--space-xxs: calc(var(--space) / 6);--space-xs: calc(var(--space) / 4);--space-sm: calc(var(--space) / 2);--space-lg: calc(var(--space) * 2);--space-xl: calc(var(--space) * 4);--space-xxl: calc(var(--space) * 6);--color-neutral-lighter: hsl(210, 20%, 54%);--color-neutral-light: hsl(210, 16%, 24%);--color-neutral: hsl(210, 15%, 18%);--color-neutral-dark: hsl(210, 17%, 12%);--color-neutral-darker: hsl(210, 18%, 9%);--color-primary-lighter: #55A0D3;--color-primary-light: #2A88C8;--color-primary: #0071bd;--color-primary-dark: #005E9D;--color-primary-darker: #004B7E;--breakpoint: 850px}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#212426;color:#fff}*{box-sizing:border-box}input[type=range]{--colorOne: #555;--colorTwo: #999;appearance:none;margin:var(--space-xs) 0;width:100%}input[type=range]::-webkit-slider-runnable-track{width:100%;height:3px;cursor:pointer;background:var(--color-neutral-darker);border-radius:2px}input[type=range]::-moz-range-track{width:100%;height:3px;cursor:pointer;background:var(--color-neutral-darker);border-radius:2px}input[type=range]::-webkit-slider-thumb{box-shadow:0 1px 3px var(--color-neutral-darker);border:1px solid var(--color-neutral-darker);height:18px;width:18px;border-radius:10px;background:var(--color-primary);background:linear-gradient(to left,#555,#555 50%,#999 50%,#999);background:linear-gradient(to left,var(--colorOne),var(--colorOne) 50%,var(--colorTwo) 50%,var(--colorTwo));cursor:pointer;-webkit-appearance:none;margin-top:-8px}input[type=range]::-moz-range-thumb{box-shadow:0 1px 3px var(--color-neutral-darker);border:1px solid var(--color-neutral-darker);height:18px;width:18px;border-radius:10px;background:var(--color-primary);background:linear-gradient(to left,#555,#555 50%,#999 50%,#999);background:linear-gradient(to left,var(--colorOne),var(--colorOne) 50%,var(--colorTwo) 50%,var(--colorTwo));cursor:pointer;appearance:none;margin-top:-8px}