:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--accent-color: oklch(.4 .1 240);--shadow-color: oklch(.6 0 0 / .6);--ui-font-size: .8rem}*{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:.5rem}}#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;height:30rem;width:45rem}@media(max-width:900px){#root{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:calc(100dvh - 1rem);width:calc(100dvw - 1rem)}}.color-picker{align-items:center;border-block-start:1px solid oklch(.9 0 0);display:flex;flex-direction:row;font-size:var(--ui-font-size);gap:.5rem;justify-content:space-between;margin-block-start:1.75rem;padding-block-start:1rem}.slider{display:flex;flex-direction:column;margin-block-end:1.25rem}@media(max-width:900px){.slider{margin-block-end:1.5rem}}.slider-input{appearance:none;background:linear-gradient(to right,var(--accent-color),var(--accent-color) var(--progress),oklch(.9 0 0) var(--progress),oklch(.9 0 0) 100%);border-radius:2px;cursor:pointer;height:.25rem;width:100%}.slider-input::-webkit-slider-runnable-track{background:transparent;border-radius:2px;box-shadow:inset 0 0 2px var(--shadow-color);height:.25rem;width:100%}.slider-input::-moz-range-track{background:transparent;border-radius:2px;box-shadow:inset 0 0 2px var(--shadow-color);height:.25rem;width:100%}.slider-input::-webkit-slider-thumb{appearance:none;background:#fff;border:1px solid var(--accent-color);border-radius:50%;box-shadow:0 1px 1px var(--shadow-color);height:1.2rem;transform:translateY(-40%);width:1.2rem}@media(max-width:900px){.slider-input::-webkit-slider-thumb{height:2rem;width:2rem}}.slider-input::-moz-range-thumb{appearance:none;background:#fff;border:1px solid var(--accent-color);border-radius:50%;box-shadow:0 1px 1px var(--shadow-color);height:1.2rem;width:1.2rem}@media(max-width:900px){.slider-input::-moz-range-thumb{height:2rem;width:2rem}}.slider-input:focus{outline:none}.slider-label{align-items:center;display:flex;font-size:var(--ui-font-size);justify-content:space-between;margin-block-end:.75rem;width:100%}@media(max-width:900px){.slider-label{margin-block-end:1rem}}.label-value{background:#eee;border-radius:.25rem;box-shadow:inset 0 0 2px var(--shadow-color);padding:.2rem .5rem;text-align:right;width:4rem}h2{border-block-end:1px solid oklch(0 0 0 / .2);font-size:.85rem;margin-block-end:1rem;padding-block-end:.25rem}.canvas{background:radial-gradient(#ffffff40 0% 50%,#dedede4d),#dedede33;border-radius:.75rem}.canvas *{border-radius:1rem}.sidebar{margin:1rem}.viewport{border-radius:.75rem;box-shadow:inset 0 0 2px var(--shadow-color);margin:.5rem}