body{align-items:center;min-height:100%;display:flex;justify-content:center}:root{--app-fnt-fam: "Epunda Slab", serif;--app-title-weight: 500;--app-text-weight: 400;--app-control-weight: 600;--app-fnt: var(--app-text-weight) 16px/1.4 var(--app-fnt-fam);--app-empty-fnt: var(--app-title-weight) 48px/1.2 var(--app-fnt-fam);--app-title-fnt: var(--app-title-weight) 24px/1.2 var(--app-fnt-fam);--app-control-fnt: var(--app-control-weight) 16px/1.2 var(--app-fnt-fam)}:root{--app-brand: #E43D6C;--app-brand-accent: #FF9980;--app-brand-light: #f4eee9;--app-brand-lightest: #fff8f5;--app-brand-dark: #36222E;--app-brand-darkest: #262225;--app-z-toast: 1000;--app-margin: 32px;--app-max-width: calc(100vw - var(--app-margin) * 2);--app-gap-xs: 2px;--app-gap-s: 4px;--app-gap-m: 8px;--app-gap-l: 16px;--app-gap-xl: 24px;--app-pad-xs: 4px;--app-pad-s: 8px;--app-pad-m: 12px;--app-pad-l: 24px;--app-pad-xl: 48px;--app-rad-xs: 2px;--app-rad-s: 4px;--app-rad-m: 8px;--app-rad-l: 12px;--app-rad-xl: 24px;--app-control-size: 36px;--app-control-rad: var(--app-rad-m);--app-swatch-rad: var(--app-rad-l);--app-swatch-pad: var(--app-pad-s);--app-swatch-gap: var(--app-gap-l);--app-toast-rad: var(--app-rad-m);--app-toast-pad: var(--app-pad-xl);--app-toast-gap: var(--app-gap-l);--app-drop-shadow: 0 4px 12px var(--app-shadow);--app-inset-shadow: inset var(--app-drop-shadow);--app-focus-width: 3px;--app-transition: .3s}@media(max-width:599px){:root{--app-margin: 8px;--app-gap-l: 12px;--app-gap-xl: 16px;--app-pad-l: 16px;--app-pad-xl: 24px}}@media(prefers-color-scheme:light){:root{--app-bg: color-mix(in srgb, var(--app-brand-light) 90%, var(--app-brand-dark) 10%);--app-card-bg: var(--app-brand-light);--app-list-bg: var(--app-brand-lightest);--app-toast-bg: var(--app-brand-light);--app-control: var(--app-brand-accent);--app-control-text: var(--app-brand-lightest);--app-control-bg: var(--app-brand-lightest);--app-control-bd: color-mix(in srgb, var(--app-brand-dark), var(--app-brand-light));--app-control-hover-bg: color-mix(in srgb, var(--app-brand-accent) 20%, transparent);--app-title: var(--app-brand-dark);--app-icon: var(--app-brand);--app-link: var(--app-brand);--app-text: var(--app-brand-darkest);--app-quiet: color-mix(in srgb, var(--app-brand-dark) 30%, var(--app-brand-light));--app-loud: var(--app-brand);--app-placeholder: color-mix(in srgb, var(--app-brand-dark) 60%, transparent);--app-focus: var(--app-brand);--app-light: color-mix(in srgb, var(--app-brand-lightest) 90%, transparent);--app-shadow: color-mix(in srgb, var(--app-brand-dark) 20%, transparent)}}@media(prefers-color-scheme:dark){:root{--app-bg: var(--app-brand-dark);--app-card-bg: color-mix(in srgb, var(--app-brand-dark) 90%, var(--app-brand-light) 10%);--app-list-bg: var(--app-brand-darkest);--app-toast-bg: var(--app-brand-darkest);--app-control: var(--app-brand);--app-control-text: var(--app-brand-lightest);--app-control-bg: var(--app-brand-darkest);--app-control-bd: color-mix(in srgb, var(--app-brand-dark), var(--app-brand-light));--app-control-hover-bg: color-mix(in srgb, var(--app-brand) 20%, transparent);--app-title: var(--app-brand-light);--app-icon: var(--app-brand-accent);--app-link: var(--app-brand-accent);--app-text: var(--app-brand-lightest);--app-quiet: color-mix(in srgb, var(--app-brand-light) 30%, var(--app-brand-dark));--app-loud: var(--app-brand);--app-placeholder: color-mix(in srgb, var(--app-brand-light) 30%, transparent);--app-focus: var(--app-brand);--app-light: color-mix(in srgb, var(--app-brand-accent) 20%, transparent);--app-shadow: rgba(0, 0, 0, .6)}}*{box-sizing:border-box;font-optical-sizing:auto;font:inherit;border:none;margin:0;padding:0}:root{--app-logo: 256px;align-items:center;background:var(--app-bg);color:var(--app-text);font:var(--app-fnt);display:flex;justify-content:center;min-height:100%}body{min-height:100vh}.app{align-items:center;background:var(--app-bg);display:flex;flex-direction:column;gap:var(--app-gap-l);max-width:var(--app-max-width);padding:var(--app-margin)}.app-logo{box-sizing:content-box;align-self:center;height:var(--app-logo);width:var(--app-logo);margin:0 auto 16px;background:radial-gradient(circle closest-side,var(--app-light) 0%,transparent 100%);padding:calc(50vw - 128px);margin:calc(128px - 50vw)}@media(max-width:512px){:root{--app-logo: 50vw}}.app-swatches{align-items:center;justify-content:center;display:flex;flex-direction:column;gap:var(--app-swatch-gap);max-width:100%}.app-swatches--empty{align-items:center;color:var(--app-quiet);display:flex;font:var(--app-empty-fnt);font-size:18px;justify-content:center;margin-bottom:var(--app-margin);text-align:center}@media(min-width:600px){.app-swatches--empty{font-size:3vw}}@media(max-width:799px){.app-swatches--empty{min-height:50px}.app-swatches>.app-button{width:calc(100% - var(--app-swatch-rad) * 2)}}@media(min-width:800px){.app-swatches--empty{min-height:300px}.app-swatches{flex-direction:row}.app-swatches>.app-button{height:280px}}.app-swatch{--app-swatch-width: calc(90vw - var(--app-margin));align-items:center;display:flex;gap:var(--app-swatch-gap);justify-content:flex-start;padding:var(--app-swatch-pad);position:relative;transition:transform var(--app-transition),opacity var(--app-transition),margin var(--app-transition);width:var(--app-swatch-width)}.app-swatch *:focus{outline:none}.app-swatch .app-button:focus-visible{outline:var(--app-focus-width) solid var(--app-contrast)}.app-swatch__color{contain:paint;opacity:0;position:absolute;width:100%;height:100%;inset:0;z-index:0}.app-swatch__color-display{background-color:var(--app-swatch);border-radius:var(--app-swatch-rad);box-shadow:var(--app-drop-shadow);inset:-1px;position:absolute;pointer-events:none;z-index:1}.app-swatch__color:focus-visible+.app-swatch__color-display{outline:var(--app-focus-width) solid var(--app-contrast);outline-offset:calc(-2px - var(--app-focus-width))}.app-swatch__name{color:var(--app-contrast);flex:1 1 100%;overflow:hidden;text-overflow:ellipsis;position:relative;white-space:nowrap;max-width:100%;z-index:2}.app-swatch__text{background:color-mix(in srgb,var(--app-contrast) 10%,transparent);border-radius:calc(var(--app-swatch-rad) / 2);color:var(--app-contrast);padding:var(--app-swatch-pad) var(--app-pad-s);position:relative;width:6em;height:2em;text-align:center;text-transform:uppercase;z-index:2}.app-swatch__text::placeholder{color:var(--app-placeholder)}.app-swatch__text:focus-visible{outline:var(--app-focus-width) solid var(--app-contrast)}.app-swatch__remove{--app-icon: var(--app-contrast);--app-control-hover-bg: color-mix(in srgb, var(--app-contrast) 10%, transparent);z-index:2}@media(min-width:800px){.app-swatch{--app-swatch-width: 200px;height:300px;flex-direction:column-reverse}.app-swatch__name{display:flex;align-items:flex-end;white-space:wrap;text-align:center}.app-swatch__text{margin-bottom:var(--app-swatch-pad)}.app-swatch__remove{align-self:flex-end;flex:0 0 auto}}.app-swatch--dragging{transform:scale(0);opacity:0;margin:calc(0px - var(--app-swatch-gap) - var(--app-swatch-width))}.app-button{background:transparent;border:0;border-radius:var(--app-control-rad);font:var(--app-control-fnt);height:var(--app-control-size);outline:1px solid transparent;padding:0 var(--app-pad-m);position:relative;transition:outline var(--app-transition),outline-offset var(--app-transition),background var(--app-transition),color var(--app-transition)}.app-button:hover{z-index:2}.app-button:focus-visible{z-index:3;outline:3px solid var(--app-focus);outline-offset:-2px}.app-button--high{background:var(--app-control);color:var(--app-icon)}.app-button--high:focus-visible,.app-button--high:hover{background:color-mix(in srgb,var(--app-control),var(--app-brand-dark) 20%)}.app-button--low{color:var(--app-icon)}.app-button--low:hover{background:var(--app-control-hover-bg)}.app-swatches-toolbar{align-items:center;display:flex;gap:var(--app-swatch-gap);justify-content:space-between;max-width:30em;padding-bottom:var(--app-margin);width:100%}.app-swatches-toolbar__add{font-size:200%;margin:auto}.app-toast-container,.app-toast-container--opening,.app-toast-container--closing{align-items:center;background:color-mix(in srgb,var(--app-shadow) 70%,transparent);display:flex;inset:0;justify-content:center;opacity:0;position:fixed;pointer-events:none;transition:opacity var(--app-transition);z-index:var(--app-z-toast)}.app-toast{animation:app-toast var(--app-transition) ease;background:var(--app-toast-bg);border-radius:var(--app-toast-rad);box-shadow:var(--app-drop-shadow);padding:var(--app-toast-pad);overflow-x:hidden;overflow-y:auto;transition:transform var(--app-transition);transform:translateY(100px) scale(.8)}.app-toast-container--opening{pointer-events:all;opacity:1}.app-toast-container--opening .app-toast{transform:translateY(0) scale(1)}.app-toast-container--closing{opacity:0}.app-toast-container--closing .app-toast{transform:translateY(100px) scale(.8)}.app-toast__header{color:var(--app-title);font:var(--app-title-fnt);margin-bottom:var(--app-toast-gap);text-align:center}.app-toast__message{color:var(--app-text);white-space:pre}textarea.app-toast__message{background:var(--app-control-hover-bg);border:none;border-radius:var(--app-control-rad);field-sizing:content;width:calc(100% + var(--app-toast-gap) * 2);margin:0 calc(0px - var(--app-toast-gap)) calc(0px - var(--app-toast-gap));padding:var(--app-toast-gap)}textarea.app-toast__message:focus-visible{z-index:3;outline:3px solid var(--app-focus);outline-offset:-2px}