@font-face{font-family:Balsamiq Sans;font-style:normal;font-weight:400;font-display:block;src:url(/fonts/BalsamiqSans-Regular.ttf) format("truetype")}@font-face{font-family:Balsamiq Sans;font-style:normal;font-weight:700;font-display:block;src:url(/fonts/BalsamiqSans-Bold.ttf) format("truetype")}html,body{margin:0;padding:0}*{box-sizing:border-box}p,h1{margin:0}textarea{height:100%;resize:none}:root{--colorSwatchWidth: 4rem;--colorSwatchHeight: 3rem;--errColor: #a74236;--linkColor: #3f74d3;--inputOutline: #ccc;--inputBg: #f2f2f2;--inputBgReadonly: #f8f8f8}:root{font-size:1rem;line-height:1.4;font-family:Balsamiq Sans,cursive}button,input,textarea,code{border:2px solid transparent;border-radius:.75em 1em;padding:.5rem .75rem;width:100%;font-family:monospace;font-size:inherit;line-height:inherit;background-color:var(--inputBg)}button{cursor:pointer}button.-active{border-color:var(--inputOutline)}input[type=range]{background-color:none;padding:0;margin:0;border:0}button,input:focus,textarea:focus{outline:none;border-color:var(--inputOutline);animation:1.5s blob;animation-iteration-count:infinite;animation-timing-function:steps(3,end)}@keyframes blob{0%{border-radius:.75em 1em}50%{border-radius:1em .75em}to{border-radius:.75em 1em}}button{font-family:inherit;width:auto;padding:.25rem .625rem;border-color:transparent}input:focus:read-only,textarea:focus:read-only,code{animation:none}input:read-only,textarea:read-only,code{background-color:var(--inputBgReadonly)}.column{display:flex;flex-direction:column}.column>:not(:last-child){margin-bottom:2rem}.column.-small>:not(:last-child){margin-bottom:1rem}.column.-tight>:not(:last-child){margin-bottom:0}.row{display:flex;align-items:center}.row.-equal>*{flex-grow:1;flex-basis:0}.row>:not(:last-child){margin-right:2rem}.row.-small>:not(:last-child){margin-right:1rem}.row.-tight>:not(:last-child){margin-right:0}.link{color:var(--linkColor);text-decoration:underline dashed}.body{padding:2rem;margin:0 auto;width:100rem;max-width:100%}.appHeader{font-size:2rem;text-align:center}.appHeader_title{font-size:8rem;font-weight:700;justify-content:center}.previewCol{width:calc(2 * var(--colorSwatchWidth));height:var(--colorSwatchHeight)}.errorMsg{color:var(--errColor)}.inputWithError{border-color:var(--errColor)}.equalFill{flex-grow:1;flex-basis:0}.previewSwatch{width:var(--colorSwatchWidth);height:var(--colorSwatchHeight)}.gridCenter{display:grid;justify-content:center;align-items:center}.componentInput{width:4.5rem}.header_hidden{opacity:.4}.columnCell{display:flex;justify-content:center;align-items:center;height:var(--colorSwatchHeight)}.appControls{display:grid;column-gap:2rem;grid-template-columns:auto 1fr auto}.appControls_colorComponent{display:grid;column-gap:1rem;grid-template-columns:auto 4.5rem}.nameCell{white-space:nowrap;height:var(--colorSwatchHeight);justify-content:start}.nameCell code{width:auto}