.dual-range-input{--dri-height: 1.5rem;--dri-thumb-width: 1.25rem;--dri-thumb-height: 1.25rem;--dri-thumb-color: #ddd;--dri-thumb-hover-color: #a8d5ff;--dri-thumb-active-color: #4eaaff;--dri-thumb-border-color: rgba(0, 0, 0, .1);--dri-thumb-border-hover-color: var(--dri-thumb-border-color);--dri-thumb-border-active-color: var(--dri-thumb-border-color);--dri-thumb-border-radius: 1rem;--dri-thumb-border-width: 1px;--dri-track-height: .25rem;--dri-track-border-radius: 1rem;--dri-track-color: #ccc;--dri-track-filled-color: #0084ff;--dri-track-filled-gradient-mid-color: var(--dri-track-filled-color);--dri-track-filled-gradient-end-color: var(--dri-track-filled-color);display:flex;height:var(--dri-height);max-width:100%;width:100%;box-sizing:border-box;padding-inline-end:calc(var(--dri-thumb-width) * 2)}.dual-range-input:has(input:focus-visible){outline:2px solid var(--dri-thumb-active-color);outline-offset:4px;border-radius:2px}.dual-range-input input{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;background:none;border-radius:0;flex-basis:calc(50% + var(--dri-thumb-width));flex-shrink:0;font-size:inherit;height:100%;margin:0;min-width:var(--dri-thumb-width);outline:none}.dual-range-input input::-moz-range-track{background-color:var(--dri-track-color);background-repeat:no-repeat;box-sizing:border-box;height:var(--dri-track-height)}.dual-range-input input:first-child::-moz-range-track{border-start-start-radius:var(--dri-track-border-radius);border-end-start-radius:var(--dri-track-border-radius);background-image:linear-gradient(to right,var(--dri-track-color) var(--dri-gradient-position),var(--dri-track-filled-color) var(--dri-gradient-position),var(--dri-track-filled-gradient-mid-color))}[dir=rtl] .dual-range-input input:first-child::-moz-range-track{background-image:linear-gradient(to left,var(--dri-track-color) var(--dri-gradient-position),var(--dri-track-filled-color) var(--dri-gradient-position),var(--dri-track-filled-gradient-mid-color))}.dual-range-input input:last-child::-moz-range-track{border-start-end-radius:var(--dri-track-border-radius);border-end-end-radius:var(--dri-track-border-radius);background-image:linear-gradient(to right,var(--dri-track-filled-gradient-mid-color),var(--dri-track-filled-gradient-end-color) var(--dri-gradient-position),var(--dri-track-color) var(--dri-gradient-position))}[dir=rtl] .dual-range-input input:last-child::-moz-range-track{background-image:linear-gradient(to left,var(--dri-track-filled-gradient-mid-color),var(--dri-track-filled-gradient-end-color) var(--dri-gradient-position),var(--dri-track-color) var(--dri-gradient-position))}.dual-range-input input::-moz-range-thumb{-webkit-appearance:none;appearance:none;background-color:var(--dri-thumb-color);border-radius:var(--dri-thumb-border-radius);border:var(--dri-thumb-border-width) solid var(--dri-thumb-border-color);box-shadow:none;box-sizing:border-box;height:var(--dri-thumb-height);width:var(--dri-thumb-width);max-width:99.99%}.dual-range-input input:not([data-ready=true])::-moz-range-thumb{opacity:0}.dual-range-input input:hover::-moz-range-thumb{background-color:var(--dri-thumb-hover-color);border-color:var(--dri-thumb-border-hover-color)}.dual-range-input input:active::-moz-range-thumb{background-color:var(--dri-thumb-active-color);border-color:var(--dri-thumb-border-active-color)}.dual-range-input input:focus-visible::-moz-range-thumb{background-color:var(--dri-thumb-active-color);border-color:var(--dri-thumb-border-active-color)}.dual-range-input input::-webkit-slider-runnable-track{background-color:var(--dri-track-color);background-repeat:no-repeat;box-sizing:border-box;height:var(--dri-track-height)}.dual-range-input input:first-child::-webkit-slider-runnable-track{border-start-start-radius:var(--dri-track-border-radius);border-end-start-radius:var(--dri-track-border-radius);background-image:linear-gradient(to right,var(--dri-track-color) var(--dri-gradient-position),var(--dri-track-filled-color) var(--dri-gradient-position),var(--dri-track-filled-gradient-mid-color))}[dir=rtl] .dual-range-input input:first-child::-webkit-slider-runnable-track{background-image:linear-gradient(to left,var(--dri-track-color) var(--dri-gradient-position),var(--dri-track-filled-color) var(--dri-gradient-position),var(--dri-track-filled-gradient-mid-color))}.dual-range-input input:last-child::-webkit-slider-runnable-track{border-start-end-radius:var(--dri-track-border-radius);border-end-end-radius:var(--dri-track-border-radius);background-image:linear-gradient(to right,var(--dri-track-filled-gradient-mid-color),var(--dri-track-filled-gradient-end-color) var(--dri-gradient-position),var(--dri-track-color) var(--dri-gradient-position))}[dir=rtl] .dual-range-input input:last-child::-webkit-slider-runnable-track{background-image:linear-gradient(to left,var(--dri-track-filled-gradient-mid-color),var(--dri-track-filled-gradient-end-color) var(--dri-gradient-position),var(--dri-track-color) var(--dri-gradient-position))}.dual-range-input input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--dri-thumb-color);border-radius:var(--dri-thumb-border-radius);border:var(--dri-thumb-border-width) solid var(--dri-thumb-border-color);box-shadow:none;box-sizing:border-box;height:var(--dri-thumb-height);width:var(--dri-thumb-width);margin-top:calc(var(--dri-track-height) / 2);transform:translateY(-50%)}.dual-range-input input:not([data-ready=true])::-webkit-slider-thumb{opacity:0}.dual-range-input input:hover::-webkit-slider-thumb{background-color:var(--dri-thumb-hover-color);border-color:var(--dri-thumb-border-hover-color)}.dual-range-input input:active::-webkit-slider-thumb{background-color:var(--dri-thumb-active-color);border-color:var(--dri-thumb-border-active-color)}.dual-range-input input:focus-visible::-webkit-slider-thumb{background-color:var(--dri-thumb-active-color);border-color:var(--dri-thumb-border-active-color)}.ctrls{--ctrls-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--ctrls-radius: 4px;--ctrls-label-width: 5rem;--ctrls-width: 22rem;--ctrls-font-size: .75rem;--ctrls-c: .25;--ctrls-h: 245;--ctrls-theme: oklch(.65 var(--ctrls-c) var(--ctrls-h));--ctrls-theme-oklch: .65 var(--ctrls-c) var(--ctrls-h);--ctrls-gray-50: #f1f1f1;--ctrls-gray-100: #e3e3e3;--ctrls-gray-200: #c7c7c7;--ctrls-gray-300: #acacac;--ctrls-gray-400: #929292;--ctrls-gray-500: #787878;--ctrls-scrollbar-thumb-bg: var(--ctrls-gray-400);--ctrls-bg: oklch(.99 .005 var(--ctrls-h) / .8);--ctrls-text: oklch(.01 .3 var(--ctrls-h));--ctrls-text-muted: oklch(.5 .005 var(--ctrls-h));--ctrls-border: oklch(.925 .01 var(--ctrls-h));--ctrls-input-border: oklch(.925 .01 var(--ctrls-h));--ctrls-input-wrapper-bg: white;--ctrls-btn-bg: white;--ctrls-btn-hover-bg: oklch(.95 .01 var(--ctrls-h) / .5);--ctrls-btn-hover-text: var(--ctrls-theme);--ctrls-btn-selected-bg: var(--ctrls-theme);--ctrls-btn-selected-text: white;--ctrls-input-bg: white;--ctrls-range-track-bg: var(--ctrls-gray-100);--ctrls-range-track-active-bg: var(--ctrls-theme);--ctrls-range-thumb-bg: var(--ctrls-gray-100);--ctrls-range-thumb-border: var(--ctrls-gray-200);--ctrls-range-thumb-hover-bg: var(--ctrls-gray-200);--ctrls-range-thumb-hover-border: var(--ctrls-gray-300);--ctrls-range-thumb-active-bg: var(--ctrls-theme);--ctrls-range-thumb-radius: 4px;--ctrls-checkbox-bg: white;--ctrls-checkbox-radius: 4px;--ctrls-checkbox-hover-text: var(--ctrls-gray-200);--ctrls-checkbox-checked-bg: var(--ctrls-theme);--ctrls-checkbox-checked-text: var(--ctrls-gray-50);--ctrls-checkbox-checked-hover-bg: oklch(.5 var(--ctrls-c) var(--ctrls-h));--ctrls-easing-border: var(--ctrls-gray-200);--ctrls-ctrls__easing-handle-bg: var(--ctrls-gray-50);--ctrls-ctrls__easing-handle-border: var(--ctrls-gray-300)}@media (prefers-color-scheme: dark){.ctrls--system-theme{--ctrls-c: .3;--ctrls-theme-oklch: .55 calc(var(--ctrls-c) - .1) var(--ctrls-h);--ctrls-theme: oklch(.55 calc(var(--ctrls-c) - .1) var(--ctrls-h));--ctrls-gray-50: #e1e1e1;--ctrls-gray-100: #d3d3d3;--ctrls-gray-200: #b7b7b7;--ctrls-gray-300: #9c9c9c;--ctrls-gray-400: #828282;--ctrls-gray-500: #686868;--ctrls-scrollbar-thumb-bg: #5f5f5f;--ctrls-bg: oklch(.27 .003 var(--ctrls-h) / .8);--ctrls-text: oklch(.95 .005 var(--ctrls-h));--ctrls-text-muted: oklch(.75 .005 var(--ctrls-h));--ctrls-border: oklch(.35 .01 var(--ctrls-h));--ctrls-input-border: transparent;--ctrls-input-wrapper-bg: oklch(.22 .002 var(--ctrls-h));--ctrls-btn-bg: oklch(.2 .001 var(--ctrls-h));--ctrls-btn-hover-bg: oklch(.1 .001 var(--ctrls-h));--ctrls-input-bg: var(--ctrls-input-wrapper-bg);--ctrls-checkbox-checked-hover-bg: oklch( .45 calc(var(--ctrls-c) - .1) var(--ctrls-h) )}}.ctrls--dark-theme{--ctrls-c: .3;--ctrls-theme-oklch: .55 calc(var(--ctrls-c) - .1) var(--ctrls-h);--ctrls-theme: oklch(.55 calc(var(--ctrls-c) - .1) var(--ctrls-h));--ctrls-gray-50: #e1e1e1;--ctrls-gray-100: #d3d3d3;--ctrls-gray-200: #b7b7b7;--ctrls-gray-300: #9c9c9c;--ctrls-gray-400: #828282;--ctrls-gray-500: #686868;--ctrls-scrollbar-thumb-bg: #5f5f5f;--ctrls-bg: oklch(.27 .003 var(--ctrls-h) / .8);--ctrls-text: oklch(.95 .005 var(--ctrls-h));--ctrls-text-muted: oklch(.75 .005 var(--ctrls-h));--ctrls-border: oklch(.35 .01 var(--ctrls-h));--ctrls-input-border: transparent;--ctrls-input-wrapper-bg: oklch(.22 .002 var(--ctrls-h));--ctrls-btn-bg: oklch(.2 .001 var(--ctrls-h));--ctrls-btn-hover-bg: oklch(.1 .001 var(--ctrls-h));--ctrls-input-bg: var(--ctrls-input-wrapper-bg);--ctrls-checkbox-checked-hover-bg: oklch( .45 calc(var(--ctrls-c) - .1) var(--ctrls-h) )}.ctrls{box-sizing:border-box;font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:"wdth" 100;font-family:var(--ctrls-font);font-size:var(--ctrls-font-size);color:var(--ctrls-text);border-radius:min(var(--ctrls-radius) + 8px,24px);border:1px solid var(--ctrls-border);padding:.5rem;display:grid;gap:.5rem;background-color:var(--ctrls-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);scrollbar-width:thin;scrollbar-color:var(--ctrls-scrollbar-thumb-bg) transparent;overflow:auto;max-width:var(--ctrls-width)}.ctrls *,.ctrls *:before,.ctrls *:after{box-sizing:border-box;padding:0;margin:0}.ctrls button,.ctrls input{font-family:inherit;font-size:inherit;color:inherit}.ctrls svg{display:block;overflow:visible}.ctrls__btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.25rem;border-radius:var(--ctrls-radius);transition:color .5s,background-color .5s}.ctrls__btn:focus-visible,.ctrls__btn:hover{color:var(--ctrls-btn-hover-text)}.ctrls__btn svg{width:1rem;transition:transform .5s,color .5s}.ctrls__btn path{transition:opacity .5s}.ctrls__btn--lg{margin-left:var(--ctrls-label-width);padding:.5rem 1rem;background:var(--ctrls-btn-bg);border:1px solid var(--ctrls-input-border);font-weight:700}.ctrls__btn--lg:focus-visible,.ctrls__btn--lg:hover{color:var(--ctrls-theme);background:var(--ctrls-btn-hover-bg)}.ctrls__btn--lg:focus-visible svg,.ctrls__btn--lg:hover svg{transform:rotate(.5turn)}.ctrls__btn--lg:focus-visible path:nth-child(2),.ctrls__btn--lg:focus-visible path:nth-child(4),.ctrls__btn--lg:hover path:nth-child(2),.ctrls__btn--lg:hover path:nth-child(4){opacity:0}.ctrls__control{display:grid;grid-template-columns:var(--ctrls-label-width) minmax(0,1fr);align-items:center;border-radius:var(--ctrls-radius)}.ctrls__control-label{color:var(--ctrls-text-muted);font-weight:700;-webkit-hyphens:auto;hyphens:auto;padding-right:.25rem}.ctrls__control-right{flex:auto 1 1}.ctrls button:focus-visible{outline:2px solid var(--ctrls-theme);outline-offset:2px}.ctrls__control--range .ctrls__control-right,.ctrls__control--dual-range .ctrls__control-right{border:1px solid var(--ctrls-input-border);background:var(--ctrls-input-wrapper-bg);border-radius:var(--ctrls-radius)}.ctrls__control--boolean input{opacity:0;pointer-events:none;position:absolute;left:-1000vw}.ctrls__boolean-checkmark{appearance:none;width:1.125rem;height:1.125rem;color:transparent;background:var(--ctrls-checkbox-bg);border-radius:var(--ctrls-checkbox-radius);border:1px solid var(--ctrls-input-border);display:grid;place-items:center}.ctrls__boolean-checkmark svg{width:.875rem;height:.875rem;stroke-width:4px}.ctrls__boolean-input:checked+.ctrls__boolean-checkmark{background:var(--ctrls-checkbox-checked-bg);color:var(--ctrls-checkbox-checked-text);border-color:transparent}label:hover .ctrls__boolean-input:checked+.ctrls__boolean-checkmark{background:var(--ctrls-checkbox-checked-hover-bg)}label:hover .ctrls__boolean-input:not(:checked)+.ctrls__boolean-checkmark{color:var(--ctrls-checkbox-hover-text)}.ctrls__boolean-input:focus-visible+.ctrls__boolean-checkmark{outline:2px solid var(--ctrls-theme);outline-offset:2px}.ctrls__range-input{width:100%;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;display:block;background:none;border-radius:0;flex-basis:calc(50% + var(--dri-thumb-width));flex-shrink:0;height:1.75rem;margin:0;min-width:var(--dri-thumb-width);outline:none;border-radius:var(--ctrls-radius);padding:.5rem}.ctrls__range-input:focus-visible{outline:2px solid var(--ctrls-theme);outline-offset:2px}.ctrls__range-input::-moz-range-track{background-color:var(--ctrls-range-track-bg);background-repeat:no-repeat;box-sizing:border-box;height:.25rem;border-radius:100px;background-image:linear-gradient(to right,var(--ctrls-range-track-active-bg) var(--gradient-position),var(--ctrls-range-track-bg) var(--gradient-position))}.ctrls__range-input::-moz-range-thumb{-webkit-appearance:none;appearance:none;background-color:var(--ctrls-range-thumb-bg);border-radius:var(--ctrls-range-thumb-radius);border:1px solid var(--ctrls-range-thumb-border);box-shadow:none;box-sizing:border-box;height:1rem;width:1.25rem;max-width:99.99%}.ctrls__range-input:hover::-moz-range-thumb{background-color:var(--ctrls-range-thumb-hover-bg);border-color:var(--ctrls-range-thumb-hover-border)}.ctrls__range-input:active::-moz-range-thumb{background-color:var(--ctrls-range-thumb-active-bg);border-color:transparent}.ctrls__range-input::-webkit-slider-runnable-track{background-color:var(--ctrls-range-track-bg);background-repeat:no-repeat;box-sizing:border-box;height:.25rem;border-radius:100px;background-image:linear-gradient(to right,var(--ctrls-range-track-active-bg) var(--gradient-position),var(--ctrls-range-track-bg) var(--gradient-position))}.ctrls__range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--ctrls-range-thumb-bg);border-radius:var(--ctrls-range-thumb-radius);border:1px solid var(--ctrls-range-thumb-border);box-shadow:none;box-sizing:border-box;height:1rem;width:1.25rem;margin-top:.125rem;transform:translateY(-50%)}.ctrls__range-input:hover::-webkit-slider-thumb{background-color:var(--ctrls-range-thumb-hover-bg);border-color:var(--ctrls-range-thumb-hover-border)}.ctrls__control-right .dual-range-input{padding-inline:.5rem calc(var(--dri-thumb-width) * 2 + .5rem)}.ctrls__control-right .dual-range-input:has(input:focus-visible){border-radius:var(--ctrls-radius)}.ctrls__control-right .dual-range-input{--dri-track-color: var(--ctrls-range-track-bg);--dri-track-filled-color: var(--ctrls-range-track-active-bg);--dri-height: 1.75rem;--dri-thumb-width: 1.25rem;--dri-thumb-height: 1rem;--dri-thumb-border-radius: var(--ctrls-range-thumb-radius);--dri-thumb-color: var(--ctrls-range-thumb-bg);--dri-thumb-hover-color: var(--ctrls-range-thumb-hover-bg);--dri-thumb-active-color: var(--ctrls-range-thumb-active-bg);--dri-thumb-border-color: var(--ctrls-range-thumb-border);--dri-thumb-border-hover-color: var(--ctrls-range-thumb-hover-border);--dri-thumb-border-active-color: transparent}.ctrls__control-right .dual-range-input:has(input:focus-visible){outline-offset:2px}.ctrls__radio-label{display:block;text-align:center;cursor:pointer;padding:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s,background-color .25s;border-radius:var(--ctrls-radius);border:1px solid var(--ctrls-input-border);background:var(--ctrls-btn-bg)}.ctrls__radio-label:focus-visible,.ctrls__radio-label:hover{background:var(--ctrls-btn-hover-bg);color:var(--ctrls-theme)}.ctrls__radio-label input{opacity:0;pointer-events:none;position:absolute;left:-1000vw}.ctrls__radio-label:has(input:checked){background:var(--ctrls-btn-selected-bg);color:var(--ctrls-btn-selected-text);border-color:transparent}.ctrls__radio-label:has(input:focus-visible){outline:2px solid var(--ctrls-theme);outline-offset:2px}.ctrls__control--seed .ctrls__control-right{display:flex;gap:.25rem}.ctrls__seed-input{background-color:var(--ctrls-input-bg);border:1px solid var(--ctrls-input-border);padding:0 .5rem;height:1.75rem;border-radius:var(--ctrls-radius);width:0;flex-grow:1}.ctrls__seed-input:focus{outline:2px solid var(--ctrls-theme);outline-offset:2px}.ctrls__seed-new-button{padding:0 .375rem;flex-shrink:0}.ctrls__seed-new-button:focus-visible svg,.ctrls__seed-new-button:hover svg{transform:rotate(.5turn)}.ctrls__easing-wrapper{padding:.5rem;border:1px solid var(--ctrls-input-border);background:var(--ctrls-input-wrapper-bg);border-radius:min(var(--ctrls-radius),12px);margin-bottom:.25rem}.ctrls__easing{position:relative;margin-top:.5rem}.ctrls__easing path,.ctrls__easing line{vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}.ctrls__easing-ticks{height:.375rem;width:100%}.ctrls__easing-ticks line{stroke:var(--ctrls-easing-border);stroke-linecap:round;vector-effect:non-scaling-stroke}.easing-borders{stroke:var(--ctrls-easing-border);stroke-dasharray:1 3}.ctrls__easing-path{stroke-width:2px;stroke:var(--ctrls-theme)}.ctrls__easing-line{stroke:var(--ctrls-easing-border);stroke-dasharray:3}.ctrls__easing-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.25rem}.ctrls__easing-buttons button{overflow:hidden;cursor:pointer;display:grid;align-content:center;text-align:center;border:1px solid var(--ctrls-input-border);border-radius:var(--ctrls-radius);background:var(--ctrls-btn-bg);padding:.25rem;transition:color .25s,background-color .25s}.ctrls__easing-buttons button:focus-visible,.ctrls__easing-buttons button:hover{background:var(--ctrls-btn-hover-bg);color:var(--ctrls-theme)}.ctrls__control--radio .ctrls__control-right{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.25rem}.ctrls__easing-handle{background:none;touch-action:none;position:absolute;transform:translate(-50%,-50%);display:block;width:2rem;height:2rem;border-radius:50%;cursor:grab;font-size:0;color:transparent;transition:border .25s;border:.75rem solid transparent}.ctrls__easing-handle:after{content:"";display:block;background-color:var(--ctrls-ctrls__easing-handle-bg);border:1px solid var(--ctrls-ctrls__easing-handle-border);height:100%;width:100%;border-radius:50%}.ctrls__easing-handle:hover,.ctrls__easing-handle:focus-visible{border-color:oklch(var(--ctrls-theme-oklch)/.1)}.ctrls__easing-handle:hover:after,.ctrls__easing-handle:focus-visible:after{background-color:var(--ctrls-theme);border:1px solid var(--ctrls-theme)}:root{--ctp-rosewater: #dc8a78;--ctp-flamingo: #dd7878;--ctp-pink: #ea76cb;--ctp-mauve: #8839ef;--ctp-red: #d20f39;--ctp-maroon: #e64553;--ctp-peach: #fe640b;--ctp-yellow: #df8e1d;--ctp-green: #40a02b;--ctp-teal: #179299;--ctp-sky: #04a5e5;--ctp-sapphire: #209fb5;--ctp-blue: #1e66f5;--ctp-lavender: #7287fd;--ctp-text: #4c4f69;--ctp-subtext1: #5c5f77;--ctp-subtext0: #6c6f85;--ctp-overlay2: #7c7f93;--ctp-overlay1: #8c8fa1;--ctp-overlay0: #9ca0b0;--ctp-surface2: #acb0be;--ctp-surface1: #bcc0cc;--ctp-surface0: #ccd0da;--ctp-base: #eff1f5;--ctp-mantle: #e6e9ef;--ctp-crust: #dce0e8}code.hljs{color:var(--ctp-text)}code .hljs-keyword{color:var(--ctp-mauve)}code .hljs-built_in{color:var(--ctp-red)}code .hljs-type{color:var(--ctp-yellow)}code .hljs-literal,code .hljs-number{color:var(--ctp-peach)}code .hljs-operator{color:var(--ctp-sky)}code .hljs-punctuation{color:var(--ctp-subtext1)}code .hljs-property{color:var(--ctp-teal)}code .hljs-regexp{color:var(--ctp-pink)}code .hljs-string,code .hljs-char.escape_{color:var(--ctp-green)}code .hljs-subst{color:var(--ctp-subtext0)}code .hljs-symbol{color:var(--ctp-flamingo)}code .hljs-variable,code .hljs-variable.language_{color:var(--ctp-mauve)}code .hljs-variable.constant_{color:var(--ctp-peach)}code .hljs-title{color:var(--ctp-blue)}code .hljs-title.class_{color:var(--ctp-yellow)}code .hljs-title.function_{color:var(--ctp-blue)}code .hljs-params{color:var(--ctp-text)}code .hljs-comment{color:var(--ctp-overlay2)}code .hljs-doctag{color:var(--ctp-red)}code .hljs-meta{color:var(--ctp-peach)}code .hljs-section{color:var(--ctp-blue)}code .hljs-tag{color:var(--ctp-teal)}code .hljs-name{color:var(--ctp-mauve)}code .hljs-attr{color:var(--ctp-blue)}code .hljs-attribute{color:var(--ctp-green)}code .hljs-bullet{color:var(--ctp-teal)}code .hljs-code{color:var(--ctp-green)}code .hljs-emphasis{color:var(--ctp-red);font-style:italic}code .hljs-strong{color:var(--ctp-red);font-weight:700}code .hljs-formula{color:var(--ctp-teal)}code .hljs-link{color:var(--ctp-sapphire);font-style:italic}code .hljs-quote{color:var(--ctp-green);font-style:italic}code .hljs-selector-tag{color:var(--ctp-yellow)}code .hljs-selector-id{color:var(--ctp-blue)}code .hljs-selector-class{color:var(--ctp-teal)}code .hljs-selector-attr{color:var(--ctp-mauve)}code .hljs-selector-pseudo{color:var(--ctp-teal)}code .hljs-template-tag,code .hljs-template-variable{color:var(--ctp-flamingo)}@media (prefers-color-scheme: dark){:root{--ctp-rosewater: #f4dbd6;--ctp-flamingo: #f0c6c6;--ctp-pink: #f5bde6;--ctp-mauve: #c6a0f6;--ctp-red: #ed8796;--ctp-maroon: #ee99a0;--ctp-peach: #f5a97f;--ctp-yellow: #eed49f;--ctp-green: #a6da95;--ctp-teal: #8bd5ca;--ctp-sky: #91d7e3;--ctp-sapphire: #7dc4e4;--ctp-blue: #8aadf4;--ctp-lavender: #b7bdf8;--ctp-text: #cad3f5;--ctp-subtext1: #b8c0e0;--ctp-subtext0: #a5adcb;--ctp-overlay2: #939ab7;--ctp-overlay1: #8087a2;--ctp-overlay0: #6e738d;--ctp-surface2: #5b6078;--ctp-surface1: #494d64;--ctp-surface0: #363a4f;--ctp-base: #24273a;--ctp-mantle: #1e2030;--ctp-crust: #181926}}*{box-sizing:border-box;padding:0;margin:0}:root{--bg: #fdfeff;--text: #505155;--text-dark: #202125;--text-light: #707175;--text-footer: #a0a1a5;--headers: var(--text-dark);--link-color: oklch(.65 .25 var(--h));--border-color: #eee;--shadow: rgba(0 0 0 / .05);--hero-border-oklch: .9 .09 var(--h);--hero-border: oklch(var(--hero-border-oklch));--hero-bg: oklch(.99 .01 var(--h));--hero-fill: oklch(.9 .1 var(--h));--code-background: #f7f8fb;--code-base-color: #4c4f69;--code-key: #1e2685}@media (prefers-color-scheme: dark){:root{--bg: #101115;--text: #bdbebf;--text-dark: #f3f4f5;--text-light: #adaeaf;--text-footer: #707175;--headers: var(--text-dark);--link-color: oklch(.6 .25 var(--h));--border-color: #222222;--shadow: rgba(255 255 255 / .1);--hero-border-oklch: .3 .2 var(--h);--hero-bg: oklch(.1 .1 var(--h));--hero-fill: oklch(.35 .1 var(--h));--code-background: #16171b;--code-base-color: #cdd6f4;--code-key: #aab4ea}}body{background:var(--bg);color:var(--text);font-family:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;line-height:1.5;padding:0 0 2rem;-webkit-font-smoothing:antialiased}@media (min-width: 600px){body{padding:2rem}}h1,h2,h3,h4,h5{line-height:1.2;color:var(--headers)}h2,h3,h4,h5{padding-top:1.5em}h1{font-size:2rem}@media (min-width: 900px){h1{font-size:2.5rem}}h2{font-size:1.75rem}@media (min-width: 900px){h2{font-size:2rem}}a{--link-text-color: var(--text-dark);color:var(--link-text-color);text-decoration-color:var(--link-color);text-decoration-thickness:2px;text-underline-offset:2px}a:hover{color:var(--link-color)}a:focus-visible{outline:2px solid var(--link-color);outline-offset:2px;text-decoration:none}p{max-width:36em}p code,li code{color:var(--code-key);padding:.125rem .25rem;font-size:.875rem;border-radius:4px;background-color:var(--code-background)}ul,ol{padding-left:1.25em}li+li{margin-top:.125rem}pre{max-width:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;color:var(--code-base-color);padding:1rem;border-radius:8px;background-color:var(--code-background);border:1px solid var(--border-color)}.app{max-width:50rem;margin:0 auto;display:grid}@media (min-width: 900px){.app{max-width:60rem;grid-template-columns:10rem 1fr;grid-template-areas:"nav header" "nav content" "nav footer";gap:0 2rem}}.nav{display:flex;padding:0 1.5rem;margin-top:1.5rem;gap:.25rem 1rem;flex-wrap:wrap;justify-content:center}@media (min-width: 600px){.nav{order:-1;width:fit-content;border-radius:100px;display:flex;justify-content:center;padding:.5rem 1.5rem;margin:-.5rem auto .5rem;position:sticky;top:.5rem;z-index:10;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}@media (min-width: 900px){.nav{gap:0;top:2rem;flex-direction:column}}.nav__link{text-decoration:none;font-weight:700;color:var(--text-light);border:1px solid transparent;border-radius:8px}@media (min-width: 600px){.nav__link{padding:.125rem 0}}.nav__link:hover{color:var(--link-color)}.nav__link--top{color:var(--headers)}@media (min-width: 900px){.nav__link--top{font-size:1.5rem}}.nav__link--light{display:none;font-weight:400;padding-left:.75rem;opacity:.75}@media (min-width: 900px){.nav__link--light{display:block}}.hero{position:relative;border-bottom:1px solid var(--hero-border);padding:1.5rem;display:grid;place-items:center;overflow:hidden}@media (min-width: 600px){.hero{border-radius:16px;border:1px solid var(--hero-border);padding:2rem}}@media (min-width: 900px){.hero{padding:3rem}}.hero__content{width:100%;max-width:45rem;display:grid;gap:1rem}@media (min-width: 600px){.hero__content{grid-template-columns:1fr 20rem;gap:2rem;align-items:center}}.hero__content h1{margin-bottom:.5rem}.hero__text{max-width:22rem}.hero__text>*{display:inline-block;padding:1rem;border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid oklch(var(--hero-border-oklch)/.5)}.hero .ctrls{box-shadow:2px 2px 4px var(--shadow)}.grid{position:absolute;inset:0;z-index:-1;width:100%;height:100%;background-color:var(--hero-bg)}.grid__hex{fill:var(--hero-fill)}.content{display:grid;gap:1rem;padding:0 1.5rem}@media (min-width: 600px){.content{padding:0}}@media (min-width: 900px){.content{grid-area:content}}.example{padding:1rem;border-radius:8px;display:grid;gap:1rem;background-color:var(--code-background);border:1px solid var(--border-color)}@media (min-width: 600px){.example{grid-template-columns:1fr 20rem;gap:2rem;align-items:center}}.example .ctrls{--ctrls-h: var(--h)}.example pre{padding:0;border:none;background-color:transparent}.footer{color:var(--text-footer);padding:0 1.5rem;margin-top:4rem}.footer a{--link-text-color: var(--text-light)}@media (min-width: 600px){.footer{padding:0;margin-top:6rem}}@media (min-width: 900px){.footer{grid-area:footer}}