@font-face{font-family:Molle;font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/molle/v25/E21n_dL5hOXFhWEsbz8sVg.woff2)format("woff2")}:root{--color-white:oklch(100% 0 0);--color-black:oklch(0% 0 0);--page-color-background:oklch(94.2816% .00995 267.36);--page-color-section:oklch(91.1753% .01757 264.48);--page-color-heading:oklch(31.4005% .02826 267.76);--page-color-body:oklch(43.7443% .03754 263.22);--page-color-prompt:oklch(51.2552% .0428 269.94);--page-color-shadow:oklch(29.0266% .03893 265.42);--control-color-track:oklch(84.4056% .02093 264.46);--control-color-thumb:oklch(61.2904% .02885 266.46);--control-color-thumb-hover:oklch(55.5173% .0296 266.41);--control-color-border:oklch(79.0803% .02434 264.43);--control-color-border-hover:oklch(69.1439% .02837 264.37);--focus-color-ring:oklch(21.0084% .03176 264.66);color:var(--color-black);background:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty;font:500 16px/1.5 DM Sans,system-ui,Segoe UI,Roboto,sans-serif}body{margin:0}h1,h2{letter-spacing:.02em;text-wrap:balance;margin:0;font-family:Molle,cursive;font-size:4rem;font-style:italic;font-weight:400}#root,.app{min-height:100vh}.app{background:var(--page-color-background);color:var(--page-color-heading)}.site-footer{text-align:center;background:var(--page-color-section);padding:2rem}.site-footer p{color:var(--page-color-body);margin:0;font-size:.875rem;line-height:1.6}.site-footer a{color:inherit;text-decoration:underline}.site-footer__copy{vertical-align:middle;border:1px solid var(--control-color-border);background:var(--page-color-background);color:var(--page-color-heading);font:inherit;cursor:pointer;border-radius:.5rem;align-items:center;gap:.35rem;margin-inline:.15rem;padding:.2rem .65rem .2rem .5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;font-weight:500;line-height:1.4;display:inline-flex}.site-footer__copy svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.site-footer__copy:hover{border-color:var(--control-color-border-hover);background:var(--control-color-track)}.site-footer__copy:focus{outline:none}.site-footer__copy:focus-visible{box-shadow:0 0 0 .1875rem var(--page-color-section), 0 0 0 .3125rem var(--focus-color-ring)}@media (width<=42rem){.site-footer{padding-inline:1.25rem}}.dn-switch{--h:120px;--w:calc(var(--h) * 2.2);--pad:calc(var(--h) * .08);--knob:calc(var(--h) - var(--pad) * 1.8);--bevel:calc(var(--h) * .025);--travel:calc(var(--w) - var(--pad) * 2 - var(--knob));--ring-step:calc(var(--h) * .24);--dur:.6s;--ease:cubic-bezier(.45, .05, .2, 1);--dn-color-white:oklch(100% 0 0);--dn-color-black:oklch(0% 0 0);--dn-color-ink:oklch(20.1151% .06199 264.8);--dn-color-focus-ring:oklch(21.0084% .03176 264.66);--dn-color-focus-halo:oklch(98.4152% .00341 247.86);--dn-color-day-track:oklch(65.8176% .14287 247.94);--dn-color-night-track:oklch(24.8289% .03076 275.74);--dn-gradient-day-sky:linear-gradient(90deg, oklch(61.8189% .1508 250.34) 0%, oklch(69.2818% .13448 245.87) 55%, oklch(78.2303% .10159 242.59) 100%);--dn-gradient-night-sky:linear-gradient(90deg, oklch(22.0539% .02399 273.43) 0%, oklch(27.4403% .03757 274.97) 60%, oklch(31.9091% .04172 274.38) 100%);--dn-color-stars:var(--dn-color-white);--dn-color-cloud-shadow:oklch(42.6461% .11146 254.77);--dn-color-cloud-back:oklch(84.5737% .06947 240.83);--dn-color-cloud-front:oklch(90.8748% .03889 247.06);--dn-gradient-sun-face:linear-gradient(180deg, oklch(89.4007% .15424 93.11) 0%, oklch(86.6336% .16672 88.99) 55%, oklch(84.4493% .16745 85.47) 100%) padding-box;--dn-gradient-sun-rim:conic-gradient(from 0deg, oklch(92.4638% .12539 95.92) 0deg, oklch(88.5528% .15704 91.66) 70deg, oklch(78.3038% .1638 77.04) 130deg, oklch(70.2294% .15137 70.84) 180deg, oklch(78.3038% .1638 77.04) 230deg, oklch(88.5528% .15704 91.66) 290deg, oklch(92.4638% .12539 95.92) 360deg) border-box;--dn-color-moon-crater:oklch(71.4574% .02635 265.52);--dn-color-moon-crater-shadow:oklch(56.9269% .03087 267.31);--dn-color-moon-crater-highlight:oklch(91.4799% .01044 261.79);--dn-color-moon-face:oklch(86.905% .01481 264.49);all:unset;box-sizing:content-box;width:var(--w);height:var(--h);padding:var(--bevel);border-radius:calc(var(--h) / 2 + var(--bevel));background:conic-gradient(from 0deg, oklch(from var(--dn-color-ink) l c h / 30%) 0deg, oklch(from var(--dn-color-ink) l c h / 12%) 70deg, oklch(from var(--dn-color-white) l c h / 50%) 130deg, oklch(from var(--dn-color-white) l c h / 90%) 180deg, oklch(from var(--dn-color-white) l c h / 50%) 230deg, oklch(from var(--dn-color-ink) l c h / 12%) 290deg, oklch(from var(--dn-color-ink) l c h / 30%) 360deg);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.dn-switch:before{content:"";position:absolute;inset:min(0px,50% - 22px)}.dn-switch:focus-visible{outline:3px solid var(--dn-color-focus-ring);outline-offset:3px;box-shadow:0 0 0 6px var(--dn-color-focus-halo)}.dn-switch:disabled{cursor:not-allowed;opacity:.6}.dn-switch__track{border-radius:calc(var(--h) / 2);isolation:isolate;background:var(--dn-color-day-track);width:100%;height:100%;transition:background-color var(--dur) var(--ease);display:block;position:relative;overflow:hidden}.dn-switch__inset{border-radius:inherit;pointer-events:none;z-index:1;box-shadow:inset 0 0 calc(var(--h) * .2) oklch(from var(--dn-color-ink) l c h / 42%), inset 0 calc(var(--h) * .16) calc(var(--h) * .1) oklch(from var(--dn-color-ink) l c h / 58%);transition:box-shadow var(--dur) var(--ease);position:absolute;inset:0}.dn-switch[data-state=night] .dn-switch__inset{box-shadow:inset 0 0 calc(var(--h) * .1) oklch(from var(--dn-color-black) l c h / 55%), inset 0 calc(var(--h) * .06) calc(var(--h) * .12) oklch(from var(--dn-color-black) l c h / 60%), inset 0 calc(var(--h) * -.02) calc(var(--h) * .05) oklch(from var(--dn-color-white) l c h / 8%)}.dn-switch[data-state=night] .dn-switch__track{background:var(--dn-color-night-track)}.dn-switch__sky{transition:opacity var(--dur) var(--ease);position:absolute;inset:0}.dn-switch__sky--day{background:var(--dn-gradient-day-sky);opacity:1}.dn-switch__sky--night{background:var(--dn-gradient-night-sky);opacity:0}.dn-switch[data-state=night] .dn-switch__sky--day{opacity:0}.dn-switch[data-state=night] .dn-switch__sky--night{opacity:1}.dn-switch__clouds,.dn-switch__stars{width:100%;height:100%;transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);display:block;position:absolute;inset:0}.dn-switch__clouds{opacity:1;transform:translateY(0)}.dn-switch__stars{opacity:0;transform:translateY(-40%)}.dn-switch[data-state=night] .dn-switch__clouds{opacity:0;transform:translateY(60%)}.dn-switch[data-state=night] .dn-switch__stars{opacity:1;transform:translateY(0)}.dn-switch__thumb{top:var(--pad);left:var(--pad);width:var(--knob);height:var(--knob);z-index:2;transition:transform var(--dur) var(--ease);will-change:transform;position:absolute;transform:translate(0)}.dn-switch[data-state=night] .dn-switch__thumb{transform:translateX(var(--travel))}.dn-switch__ring{background:oklch(from var(--dn-color-white) l c h / 7%);pointer-events:none;border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.dn-switch__ring--1{width:calc(var(--knob) + var(--ring-step) * 2);height:calc(var(--knob) + var(--ring-step) * 2)}.dn-switch__ring--2{width:calc(var(--knob) + var(--ring-step) * 4);height:calc(var(--knob) + var(--ring-step) * 4)}.dn-switch__ring--3{width:calc(var(--knob) + var(--ring-step) * 6);height:calc(var(--knob) + var(--ring-step) * 6)}.dn-switch__knob{box-shadow:0 calc(var(--h) * .05) calc(var(--h) * .12) oklch(from var(--dn-color-black) l c h / 35%), 0 calc(var(--h) * .01) calc(var(--h) * .03) oklch(from var(--dn-color-black) l c h / 25%);border-radius:50%;position:absolute;inset:0}.dn-switch__sun,.dn-switch__moon{transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);border-radius:50%;position:absolute;inset:0}.dn-switch__sun{border:calc(var(--h) * .03) solid transparent;background:var(--dn-gradient-sun-face), var(--dn-gradient-sun-rim);opacity:1}.dn-switch__moon{background:radial-gradient(circle at 30% 47.8%, var(--dn-color-moon-crater) 0 17%, transparent 18%), radial-gradient(circle at 30% 46%, var(--dn-color-moon-crater-shadow) 0 17%, transparent 18%), radial-gradient(circle at 30% 49.2%, var(--dn-color-moon-crater-highlight) 0 17%, transparent 18%), radial-gradient(circle at 62% 25%, var(--dn-color-moon-crater) 0 9%, transparent 10%), radial-gradient(circle at 62% 24%, var(--dn-color-moon-crater-shadow) 0 9%, transparent 10%), radial-gradient(circle at 62% 25.8%, var(--dn-color-moon-crater-highlight) 0 9%, transparent 10%), radial-gradient(circle at 68% 71.4%, var(--dn-color-moon-crater) 0 13%, transparent 14%), radial-gradient(circle at 68% 70%, var(--dn-color-moon-crater-shadow) 0 13%, transparent 14%), radial-gradient(circle at 68% 72.6%, var(--dn-color-moon-crater-highlight) 0 13%, transparent 14%), var(--dn-color-moon-face);box-shadow:inset 0 calc(var(--h) * -.05) 0 oklch(from var(--dn-color-black) l c h / 14%);opacity:0;transform:rotate(-90deg)}.dn-switch[data-state=night] .dn-switch__sun{opacity:0}.dn-switch[data-state=night] .dn-switch__moon{opacity:1;transform:rotate(0)}@media (prefers-reduced-motion:reduce){.dn-switch{--dur:0s}}@media (forced-colors:active){.dn-switch{box-shadow:none;background:buttonface;border:2px solid buttontext}.dn-switch:focus-visible{outline-offset:3px;box-shadow:none;outline:3px solid highlight}.dn-switch:disabled{opacity:1;border-style:dashed}.dn-switch__sky,.dn-switch__clouds,.dn-switch__stars,.dn-switch__ring,.dn-switch__inset,.dn-switch__sun,.dn-switch__moon{display:none}.dn-switch__track{background:canvas}.dn-switch__knob{box-shadow:none;background:buttontext}}.hero{box-sizing:border-box;text-align:center;grid-template-rows:1fr auto;min-height:78vh;padding:2rem;display:grid}.hero__content{place-content:center;gap:2.5rem;display:grid}.hero__row{flex-wrap:wrap;justify-content:center;align-items:center;gap:2.5rem;display:flex}.hero__item{justify-items:center;gap:.5rem;display:grid}.hero__item>span{font-size:.875rem;font-weight:500}.hero__code{background:var(--page-color-section);color:var(--page-color-body);white-space:nowrap;border-radius:.5rem;margin:0;padding:.4rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;font-weight:500;line-height:1.4}.hero__code code{font:inherit}.hero__prompt{color:var(--page-color-prompt);flex-direction:column;align-items:center;display:flex;transform:rotate(-2deg)}.hero__prompt svg{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;width:3.375rem;height:3.125rem;overflow:visible}.hero__prompt span{padding-bottom:1rem;font-family:Molle,cursive;font-size:1.5rem;font-style:italic;font-weight:200;line-height:1}.credit{color:var(--page-color-body);margin:0;font-size:.875rem;line-height:1.6}.credit a{color:inherit;text-decoration:underline}@media (width<=42rem){.hero{min-height:72vh}.hero__content{gap:1rem}}.info{background:var(--page-color-section);padding:clamp(4rem,8vw,7rem) 2rem}.info__inner{grid-template-columns:minmax(0,.75fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,6rem);width:100%;max-width:68rem;margin:0 auto;display:grid}.info__video{aspect-ratio:9/16;width:min(100%,22rem);box-shadow:0 .75rem 1.5rem oklch(from var(--page-color-shadow) l c h / 28%), 0 2rem 5rem oklch(from var(--page-color-shadow) l c h / 45%);border-radius:1.5rem;justify-self:center;overflow:hidden}.info__video iframe{border:0;width:100%;height:100%;display:block}.info__copy{max-width:34rem}.info__copy h2{letter-spacing:-.04em;margin:.5rem 0 1.5rem;font-size:clamp(2rem,5vw,3.5rem);line-height:1.05}.info__copy p{color:var(--page-color-body);margin:0 0 1rem;font-size:1.0625rem;line-height:1.75}@media (width<=42rem){.info{padding-inline:1.25rem}.info__inner{grid-template-columns:1fr}.info__copy{max-width:none}}.size-demo{background:var(--page-color-background);padding:clamp(4rem,8vw,7rem) 2rem}.size-demo__inner{grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:clamp(2.5rem,7vw,6rem);width:100%;max-width:68rem;margin:0 auto;display:grid}.size-demo__playground{align-content:center;place-self:center;justify-items:center;gap:2.5rem;display:grid}.size-demo__example{justify-items:center;gap:.5rem;width:100%;display:grid}.size-demo__example>span,.size-demo__example>label{font-size:.875rem;font-weight:500}.size-demo__copy{max-width:34rem}.size-demo__copy h2{letter-spacing:-.04em;margin:0 0 1.5rem;font-size:clamp(2rem,5vw,3.5rem);line-height:1.05}.size-demo__copy p{color:var(--page-color-body);margin:0 0 1rem;font-size:1.0625rem;line-height:1.75}.size-demo__copy a{color:inherit;text-decoration:underline}.size-demo__copy code{color:var(--page-color-heading);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9em;font-weight:600}.size-demo__stage{--max-h:120px;--bevel:calc(var(--max-h) * .025);box-sizing:content-box;width:calc(var(--max-h) * 2.2 + var(--bevel) * 2);height:calc(var(--max-h) + var(--bevel) * 2);place-items:center;display:grid}.size-demo__control{gap:.5rem;width:min(100%,18rem);display:grid}.size-demo__control-row{justify-content:center;align-items:baseline;display:flex}.size-demo__code{background:var(--page-color-section);color:var(--page-color-body);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:.5rem;margin:0;padding:.4rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;font-weight:500;line-height:1.4}.size-demo__code code{font:inherit}.size-demo__control input[type=range]{--track-h:.25rem;--thumb:1.125rem;appearance:none;width:100%;height:var(--thumb);cursor:pointer;background:0 0;margin:0}.size-demo__control input[type=range]::-webkit-slider-runnable-track{height:var(--track-h);background:var(--control-color-track);border-radius:999px}.size-demo__control input[type=range]::-moz-range-track{height:var(--track-h);background:var(--control-color-track);border-radius:999px}.size-demo__control input[type=range]::-webkit-slider-thumb{appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc((var(--track-h) - var(--thumb)) / 2);background:var(--control-color-thumb);border:0;border-radius:50%}.size-demo__control input[type=range]::-moz-range-thumb{width:var(--thumb);height:var(--thumb);background:var(--control-color-thumb);border:0;border-radius:50%}.size-demo__control input[type=range]:hover::-webkit-slider-thumb{background:var(--control-color-thumb-hover)}.size-demo__control input[type=range]:hover::-moz-range-thumb{background:var(--control-color-thumb-hover)}.size-demo__control input[type=range]:focus{outline:none}.size-demo__control input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 .1875rem var(--page-color-background), 0 0 0 .3125rem var(--focus-color-ring)}.size-demo__control input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 .1875rem var(--page-color-background), 0 0 0 .3125rem var(--focus-color-ring)}.size-demo__ticks{color:var(--page-color-body);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:.75rem;display:flex}@media (width<=42rem){.size-demo{padding-inline:1.25rem}.size-demo__inner{grid-template-columns:1fr}.size-demo__copy{max-width:none}}