@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Piazzolla:ital,opsz,wght@0,8..30,100..900;1,8..30,100..900&display=swap";:root{--controls-width: 250px}.app{display:grid;grid-template-columns:auto 1fr;width:100%;height:100%}.grid-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100vh}.wrapper{position:relative;display:grid;width:max-content;height:max-content;max-width:calc(100% - (var(--pg-padding) * 2));max-height:calc(100% - (var(--pg-padding) * 2));gap:0;justify-content:center;align-items:center}.controls{display:flex;flex-direction:column;justify-content:flex-start;gap:1.5rem;align-items:center;width:var(--controls-width);height:100%;background-color:#f7f7f7;padding:var(--pg-padding) 2rem;font-size:.8rem;overflow-y:auto}.controls label{display:flex;justify-content:space-between}.slider-group{width:100%}.radio-group{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%}.radio-group>label,.radio-group .options{grid-column:1 / -1}.radio-group:not(.color-picker) .options label:has(input:checked){background-color:var(--gray-90);border-color:var(--gray-90);color:#fff}.radio-group:not(.color-picker) .options label{background-color:#fff;border-radius:.25rem;border:1px solid var(--gray-10)}.radio-group:not(.color-picker) .options label:hover{cursor:pointer;background-color:var(--gray-10);border-color:var(--gray-20)}.options{display:grid;grid-template-columns:subgrid;gap:.5rem;width:100%}.options input,.options span{position:absolute;opacity:0;pointer-events:none}.options label{position:relative;display:flex;justify-content:center;align-items:center;width:100%;aspect-ratio:1}.options label svg{max-width:100%;max-height:100%;margin:.5rem;aspect-ratio:1}.options label svg.color-wheel{margin:0;width:100%;height:100%}.options label:hover{cursor:pointer}.color-picker svg{border:5px solid white;overflow:hidden;border-radius:50%}.color-picker .options label:hover svg{border-color:var(--gray-20)}.color-picker label:has(input:checked):before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:60%;border-radius:50%;background-color:var(--gray-90);border:1px solid var(--gray-50);opacity:.8}.color-picker label:has(input:checked):after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:10px;border:2px solid white;border-top-width:0;border-left-width:0;transform:rotate(45deg);margin-top:-6px;margin-left:-3px}.color-picker label:has(input:checked) svg{border-width:0}.button{display:flex;justify-content:center;align-items:center;gap:.75rem;padding:.5rem 1rem;border-radius:.25rem;background-color:var(--gray-90);color:#fff;font:inherit;white-space:nowrap}.button svg{width:1rem;height:1rem;fill:currentColor}.button:hover{background-color:var(--gray-70);cursor:pointer}.button:focus-visible{outline:2px solid var(--gray-90);outline-offset:2px}.swatches{display:grid;grid-template-columns:repeat(5,1fr);width:100%;height:100%;border-radius:.125rem;overflow:hidden}.swatch{height:100%}:root{--range-thumb-size: 15px;--range-track-height: 6px;--range-thumb-color: var(--gray-90);--range-track-color: var(--gray-30);--range-thumb-radius: 4px;--range-track-radius: 3px}input[type=range]{width:100%;margin:5px 0;background-color:transparent;-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:var(--range-track-color);border:0;border-radius:var(--range-track-radius);width:100%;height:var(--range-track-height);cursor:pointer}input[type=range]::-webkit-slider-thumb{margin-top:-3px;width:var(--range-thumb-size);height:var(--range-thumb-size);background:var(--range-thumb-color);border:0;border-radius:var(--range-thumb-radius);cursor:pointer;-webkit-appearance:none}input[type=range]:focus::-webkit-slider-runnable-track{background:var(--range-track-color)}input[type=range]::-moz-range-track{background:var(--range-track-color);border:0;border-radius:var(--range-track-radius);width:100%;height:var(--range-track-height);cursor:pointer}input[type=range]::-moz-range-thumb{width:var(--range-thumb-size);height:var(--range-thumb-size);background:var(--range-thumb-color);border:0;border-radius:var(--range-thumb-radius);cursor:pointer}:root{--gray-0: #ffffff;--gray-1: #fbfcfd;--gray-2: #f7f9fa;--gray-3: #f5f6f7;--gray-4: #f1f3f6;--gray-5: #edeff0;--gray-10: #dfe1e2;--gray-20: #c6cace;--gray-30: #a9aeb1;--gray-40: #8d9297;--gray-50: #71767a;--gray-60: #565c65;--gray-70: #3d4551;--gray-80: #2d2e2f;--gray-90: #1c1d1f;--gray-100: #000000;--blue-5: #e8f5ff;--blue-10: #cfe8ff;--blue-20: #a1d3ff;--blue-30: #58b4ff;--blue-40: #2491ff;--blue-50: #0076da;--blue-60: #005ea2;--blue-70: #0b4778;--blue-80: #112f4e;--yellow: #eacb2a;--pink: #f1aaaa;--font-stack-mono: "IBM Plex Mono", Andale Mono, monaco, Consolas, Lucida Console, monospace;--font-stack-serif: "Piazzolla", Book Antiqua, Palatino, Palatino Linotype, Palatino LT STD, Georgia, serif;--text-color: var(--gray-90);--line-height: 1.5em;--pg-padding: 4rem}.serif{font-family:var(--font-stack-serif);font-optical-sizing:auto;font-weight:400;font-style:normal}.mono{font-family:var(--font-stack-mono);font-weight:400;font-style:normal}.mono-bold{font-family:var(--font-stack-mono);font-weight:700;font-style:normal}*,*:before,*:after{box-sizing:border-box}html,body{width:100vw;height:100vh;margin:0;font-size:16px;font-family:var(--font-stack-mono)}body{font-family:monospace;background:#fff}#root{width:100%;height:100%}.rule{border-top:1px solid var(--gray-60);width:100%;height:1px;margin:.5rem 0;opacity:.25}