:root{--accent-color: oklch(.4 .1 240);--background-color: oklch(.9 0 0);--button-color: oklch(.98 0 0);--button-border-color: oklch(1 0 0 / .6);--shadow-color: oklch(.6 0 0 / .6);--slider-progress-color: oklch(.6 0 0);--text-color: oklch(.1 0 0);--ui-font-size: clamp(.8rem, 1.25vw, 1.1rem)}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:radial-gradient(#d7dbff1a 0% 60%,#d7dbff40),linear-gradient(135deg,#edffff1a,#edffff99);background:radial-gradient(#d7dbff1a 0% 60%,#d7dbff40),linear-gradient(135deg,color(xyz 0.883 1.017 1.215 / 0.102),color(xyz 0.883 1.017 1.215 / 0.6));display:grid;height:100dvh;font-family:Helvetica,Arial,system-ui,sans-serif;place-items:center}@media(max-width:900px){body{padding:0}}#root{background:linear-gradient(#f8f8f8) padding-box,linear-gradient(to bottom,#fff,#aeaeaecc) border-box;border:1px solid transparent;border-radius:1rem;box-shadow:0 0 1rem #808080cc;display:grid;grid-template-columns:2fr 1fr;width:clamp(700px,70dvw,900px)}@media(max-width:900px){#root{border:none;border-radius:0;grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:100dvh;width:100dvw}}.button{background:var(--button-color);border-radius:2rem;border:1px solid var(--button-border-color);box-shadow:0 .125rem .25rem var(--shadow-color);color:var(--text-color);cursor:pointer;font-size:var(--ui-font-size);padding:.5rem;transition:all .2s ease;z-index:100}@media(max-width:900px){.button{width:48%}}.button:hover{background:#fcfcfcb3;box-shadow:0 .125rem .5rem var(--shadow-color)}@media(min-width:901px){.button:hover{transform:scale(1.01)}}.color-picker{align-items:center;display:flex;flex-direction:row;font-size:var(--ui-font-size);gap:.5rem;height:20px;justify-content:space-between;user-select:none;-webkit-user-select:none}.slider-input{--size: 1.25rem;--size-m: 1.5rem;appearance:none;background:linear-gradient(to right,var(--slider-progress-color) 0%,var(--slider-progress-color) 0% var(--progress),var(--background-color) var(--progress),var(--background-color) 100%);border-radius:calc(var(--size) * .25);cursor:pointer;height:var(--size)}.slider-input::-webkit-slider-runnable-track{background:transparent;border-radius:calc(var(--size) * .25);box-shadow:inset 0 0 2px var(--shadow-color);height:var(--size);width:100%}.slider-input::-moz-range-track{background:transparent;border-radius:calc(var(--size) * .25);box-shadow:inset 0 0 2px var(--shadow-color);height:var(--size);width:100%}.slider-input::-webkit-slider-thumb{appearance:none;background:#fff;border:1px solid var(--accent-color);border-radius:25%;box-shadow:1px 0 1px var(--shadow-color);height:var(--size);transform:translateY(0);width:var(--size)}@media(max-width:900px){.slider-input::-webkit-slider-thumb{height:var(--size-m);transform:translateY(-2px);width:var(--size-m)}}.slider-input::-moz-range-thumb{appearance:none;background:#fff;border:1px solid var(--accent-color);border-radius:25%;box-shadow:0 1px 1px var(--shadow-color);height:var(--size);width:var(--size)}@media(max-width:900px){.slider-input::-moz-range-thumb{height:var(--size-m);width:var(--size-m)}}.slider-input:focus{outline:none}.label-value{background:#eee;border-radius:.25rem;box-shadow:inset 0 0 2px var(--shadow-color);padding:.2rem .5rem;text-align:right;width:4rem}.sidebar{--gap: 1.25rem}.sidebar,.small-controls{display:flex;flex-direction:column;gap:var(--gap);margin:1rem}@media(max-width:900px){.sidebar,.small-controls{column-gap:1rem;row-gap:.5rem}}.small-controls{margin:0;width:100%}@media(max-width:900px){.small-controls{align-items:center;flex-direction:row;justify-content:space-between}}.small-controls .control{gap:0}h2{font-size:var(--ui-font-size)}@media(max-width:900px){h2{display:none}}h2:nth-child(2){border-block-start:1px solid oklch(0 0 0 / .2);padding-block-start:var(--gap)}.spacer{flex-grow:1}.buttons{display:flex;flex-direction:column;gap:.75rem}@media(max-width:900px){.buttons{flex-direction:row;justify-content:space-between}}.switch{--size: 1.25rem;display:flex;align-items:center;gap:calc(var(--size) / 2);width:100%}@media(max-width:900px){.switch{--size: 1.5rem}}.switch input{display:none}.switch .toggle{background-color:#ccc;border-radius:var(--size);box-shadow:inset 0 0 2px var(--shadow-color);cursor:pointer;height:calc(var(--size) + 2px);inset:0;transition:.4s;width:calc(var(--size) * 2)}.switch .toggle:before{background-color:#fff;border-radius:50%;border:1px solid var(--accent-color);bottom:.25rem;box-shadow:1px 0 1px var(--shadow-color);content:"";display:inline-block;height:var(--size);transition:.2s;width:var(--size)}.switch input:checked+.toggle{background-color:var(--accent-color)}.switch input:checked+.toggle:before{box-shadow:-1px 0 1px oklch(from var(--shadow-color) .2 c h);transform:translate(var(--size))}.canvas *{border-radius:1rem}@media(max-width:900px){.canvas *{border-radius:0}}.canvas-wrapper{aspect-ratio:1 / 1;margin:0 auto;max-width:600px}.viewport{margin:.5rem}@media(max-width:900px){.viewport{margin:0}}.control{display:flex;flex-direction:row;gap:.5rem}@media(max-width:900px){.control{margin-block-end:1rem}}.control .control-label{align-items:center;cursor:pointer;display:flex;flex-grow:1;font-size:var(--ui-font-size);justify-content:space-between;user-select:none;-webkit-user-select:none;width:2.25rem}.control .control-input{display:flex;flex-grow:10}