:root{--color-1: #271f36;--color-2: #46354b;--color-3: #674d5e;--color-4: #886771;--color-5: #c6a398;--color-6: #fbe8ca;--color-border: var(--color-1);--color-bg: var(--color-2);--color-fg: var(--color-3);--color-text: var(--color-6)}.spacing-gap{display:block;width:calc(4px * var(--gap-factor, 4));height:calc(4px * var(--gap-factor, 4))}.App{background-color:var(--color-bg);min-height:100vh;width:100%;color:var(--color-text);padding:10px}.vbox,.hbox{display:flex}.vbox.vbox,.hbox.vbox{flex-flow:column nowrap}.vbox.hbox,.hbox.hbox{flex-flow:row nowrap}.vbox.gap,.hbox.gap{gap:4px}.color-tile{width:50px;height:50px;--transform: scale(1)}.color-tile *,.color-tile:after{display:block;width:100%;height:100%}.color-tile.pressed{--transform: scale(.5)}.color-tile.pressed:after{transition:none}.color-tile.pressed .root{transition:none}:hover .color-tile.pressed .root :is(.left,.right,.top,.bottom){-webkit-backdrop-filter:invert(0);backdrop-filter:invert(0);transition:none}.color-tile:after{content:"";position:relative;transform:var(--transform);transition:transform 1s cubic-bezier(0,0,0,1.1);top:-100%;z-index:-1;box-shadow:var(--color-border) 2px 2px,var(--color-border) -2px 2px,var(--color-border) 2px -2px,var(--color-border) -2px -2px}@keyframes brightness{0%{filter:brightness(0)}to{filter:brightness(1)}}@keyframes scale{0%{transform:scaleX(1)}1%{transform:scaleX(5)}to{filter:scaleX(1)}}.color-tile .root{position:relative;transform:var(--transform);--w: 0px;transition:transform 1s cubic-bezier(0,0,0,1.1)}.pressed .color-tile .root{transition:transform .1s cubic-bezier(0,0,0,1.1)}.color-tile .root>:is(.left,.right,.top,.bottom){position:absolute;transition:all 1s cubic-bezier(0,0,0,1.1);-webkit-backdrop-filter:invert(0) grayscale(0);backdrop-filter:invert(0) grayscale(0)}.color-tile .root:hover{--w: 8px}.color-tile .root:hover>:is(.left,.right,.top,.bottom){transition:all .1s cubic-bezier(0,0,0,1.1);-webkit-backdrop-filter:invert(1) grayscale(1);backdrop-filter:invert(1) grayscale(1)}.color-tile .root>.top{position:absolute;height:var(--w);top:0}.color-tile .root>.bottom{position:absolute;height:var(--w);bottom:0}.color-tile .root>.left{position:absolute;width:var(--w);top:var(--w);height:calc(100% - var(--w) * 2);left:0}.color-tile .root>.right{position:absolute;width:var(--w);top:var(--w);height:calc(100% - var(--w) * 2);right:0}.color-palette{isolation:isolate;display:inline-flex;flex-flow:row wrap;margin:4px}input[type=number],select,button{margin:4px;color:var(--color-text);border-width:1px;border-style:solid;border-radius:.25rem;border-color:var(--color-border);background-color:var(--color-fg)}button{filter:brightness(100%);transform:scale(1);transition:all 1s cubic-bezier(0,0,0,1.1)}button.pressed{filter:brightness(50%);transform:scale(.9);transition:none}code{background-color:var(--color-fg);transition:filter 1s cubic-bezier(0,0,0,1.1),background-color .5s cubic-bezier(0,0,0,1.1);filter:brightness(100%);border:solid 1px var(--color-border);padding:.5px 4px;border-radius:.5rem;margin:.5px}code.pressed{filter:brightness(500%);transition:none}input[type=range]{border:solid 1px var(--color-border);background-color:var(--color-fg);border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:18px}input[type=range]::-webkit-slider-thumb{display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:22px;width:10px;border-radius:.25rem;border:solid 1px var(--color-border);background-color:var(--color-text);color:#fff}input[type=range]::-moz-range-thumb{display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:22px;width:10px;border-radius:.25rem;border:solid 1px var(--color-border);background-color:var(--color-text);color:#fff}input[type=color]{padding:0 2px;width:50px;background-color:transparent;border:none}.color-picker{isolation:isolate;position:relative;margin:4px 8px;flex-basis:50px}.color-picker .color-tile{pointer-events:none;position:absolute;top:0;left:0;height:100%}.color-picker input[type=color]{position:absolute;padding:0;top:0;left:0;height:100%}@media print{.color-tile,.color-tile>*{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}}.pretty *{box-sizing:border-box}.pretty input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inline-block;margin-right:1em;white-space:nowrap;line-height:1}.pretty input{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;z-index:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{-webkit-user-select:none;user-select:none;position:initial;display:inline-block;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state label:before,.pretty .state label:after{content:"";width:calc(1em + 2px);height:calc(1em + 2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid transparent;z-index:0;position:absolute;left:0;top:calc(-8% - (100% - 1em));background-color:transparent}.pretty.p-switch{margin:8px 0}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:"";pointer-events:none;border:1px solid var(--color-border);border-radius:60px;width:2em;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc(-16% - (100% - 1em));z-index:0;transition:all .1s cubic-bezier(.075,.82,.165,1)}.pretty.p-switch .state label{text-indent:2.5em}.pretty.p-switch .state label:before,.pretty.p-switch .state label:after{transition:all .1s cubic-bezier(.075,.82,.165,1);border-radius:100%;left:0;border-color:transparent;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:var(--color-text)}.pretty.p-switch.p-fill input:checked~.state:before{border-color:var(--color-border);background-color:var(--color-fg)!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:var(--color-text)!important;left:1em}:root{font-family:monospace;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{font-family:monospace;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid var(--color-border);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer}