:where(html){--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif: ui-serif,serif;--font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1: 100;--font-weight-2: 200;--font-weight-3: 300;--font-weight-4: 400;--font-weight-5: 500;--font-weight-6: 600;--font-weight-7: 700;--font-weight-8: 800;--font-weight-9: 900;--font-lineheight-00: .95;--font-lineheight-0: 1.1;--font-lineheight-1: 1.25;--font-lineheight-2: 1.375;--font-lineheight-3: 1.5;--font-lineheight-4: 1.75;--font-lineheight-5: 2;--font-letterspacing-0: -.05em;--font-letterspacing-1: .025em;--font-letterspacing-2: .05em;--font-letterspacing-3: .075em;--font-letterspacing-4: .15em;--font-letterspacing-5: .5em;--font-letterspacing-6: .75em;--font-letterspacing-7: 1em;--font-size-00: .5rem;--font-size-0: .75rem;--font-size-1: 1rem;--font-size-2: 1.1rem;--font-size-3: 1.25rem;--font-size-4: 1.5rem;--font-size-5: 2rem;--font-size-6: 2.5rem;--font-size-7: 3rem;--font-size-8: 3.5rem;--font-size-fluid-0: clamp(.75rem, 2vw, 1rem);--font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);--font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);--font-size-fluid-3: clamp(2rem, 9vw, 3.5rem)}:where(html){--size-000: -.5rem;--size-00: -.25rem;--size-1: .25rem;--size-2: .5rem;--size-3: 1rem;--size-4: 1.25rem;--size-5: 1.5rem;--size-6: 1.75rem;--size-7: 2rem;--size-8: 3rem;--size-9: 4rem;--size-10: 5rem;--size-11: 7.5rem;--size-12: 10rem;--size-13: 15rem;--size-14: 20rem;--size-15: 30rem;--size-fluid-1: clamp(.5rem, 1vw, 1rem);--size-fluid-2: clamp(1rem, 2vw, 1.5rem);--size-fluid-3: clamp(1.5rem, 3vw, 2rem);--size-fluid-4: clamp(2rem, 4vw, 3rem);--size-fluid-5: clamp(4rem, 5vw, 5rem);--size-fluid-6: clamp(5rem, 7vw, 7.5rem);--size-fluid-7: clamp(7.5rem, 10vw, 10rem);--size-fluid-8: clamp(10rem, 20vw, 15rem);--size-fluid-9: clamp(15rem, 30vw, 20rem);--size-fluid-10: clamp(20rem, 40vw, 30rem);--size-content-1: 20ch;--size-content-2: 45ch;--size-content-3: 60ch;--size-header-1: 20ch;--size-header-2: 25ch;--size-header-3: 35ch;--size-xxs: 240px;--size-xs: 360px;--size-sm: 480px;--size-md: 768px;--size-lg: 1024px;--size-xl: 1440px;--size-xxl: 1920px}:where(html){--ease-1: cubic-bezier(.25, 0, .5, 1);--ease-2: cubic-bezier(.25, 0, .4, 1);--ease-3: cubic-bezier(.25, 0, .3, 1);--ease-4: cubic-bezier(.25, 0, .2, 1);--ease-5: cubic-bezier(.25, 0, .1, 1);--ease-in-1: cubic-bezier(.25, 0, 1, 1);--ease-in-2: cubic-bezier(.5, 0, 1, 1);--ease-in-3: cubic-bezier(.7, 0, 1, 1);--ease-in-4: cubic-bezier(.9, 0, 1, 1);--ease-in-5: cubic-bezier(1, 0, 1, 1);--ease-out-1: cubic-bezier(0, 0, .75, 1);--ease-out-2: cubic-bezier(0, 0, .5, 1);--ease-out-3: cubic-bezier(0, 0, .3, 1);--ease-out-4: cubic-bezier(0, 0, .1, 1);--ease-out-5: cubic-bezier(0, 0, 0, 1);--ease-in-out-1: cubic-bezier(.1, 0, .9, 1);--ease-in-out-2: cubic-bezier(.3, 0, .7, 1);--ease-in-out-3: cubic-bezier(.5, 0, .5, 1);--ease-in-out-4: cubic-bezier(.7, 0, .3, 1);--ease-in-out-5: cubic-bezier(.9, 0, .1, 1);--ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);--ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);--ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);--ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);--ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);--ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);--ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);--ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);--ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);--ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);--ease-step-1: steps(2);--ease-step-2: steps(3);--ease-step-3: steps(4);--ease-step-4: steps(7);--ease-step-5: steps(10)}:where(html){--layer-1: 1;--layer-2: 2;--layer-3: 3;--layer-4: 4;--layer-5: 5;--layer-important: 2147483647}:where(html){--shadow-color: 220 3% 15%;--shadow-strength: 1%;--shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));--shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));--shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));--shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));--shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));--inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))}@media (prefers-color-scheme: dark){:where(html){--shadow-strength: 25%;--shadow-color: 220 40% 2%}}:where(html){--ratio-square: 1;--ratio-landscape: 4/3;--ratio-portrait: 3/4;--ratio-widescreen: 16/9;--ratio-ultrawide: 18/5;--ratio-golden: 1.618/1}:where(html){--gray-0: #f8f9fa;--gray-1: #f1f3f5;--gray-2: #e9ecef;--gray-3: #dee2e6;--gray-4: #ced4da;--gray-5: #adb5bd;--gray-6: #868e96;--gray-7: #495057;--gray-8: #343a40;--gray-9: #212529;--red-0: #fff5f5;--red-1: #ffe3e3;--red-2: #ffc9c9;--red-3: #ffa8a8;--red-4: #ff8787;--red-5: #ff6b6b;--red-6: #fa5252;--red-7: #f03e3e;--red-8: #e03131;--red-9: #c92a2a;--pink-0: #fff0f6;--pink-1: #ffdeeb;--pink-2: #fcc2d7;--pink-3: #faa2c1;--pink-4: #f783ac;--pink-5: #f06595;--pink-6: #e64980;--pink-7: #d6336c;--pink-8: #c2255c;--pink-9: #a61e4d;--grape-0: #f8f0fc;--grape-1: #f3d9fa;--grape-2: #eebefa;--grape-3: #e599f7;--grape-4: #da77f2;--grape-5: #cc5de8;--grape-6: #be4bdb;--grape-7: #ae3ec9;--grape-8: #9c36b5;--grape-9: #862e9c;--violet-0: #f3f0ff;--violet-1: #e5dbff;--violet-2: #d0bfff;--violet-3: #b197fc;--violet-4: #9775fa;--violet-5: #845ef7;--violet-6: #7950f2;--violet-7: #7048e8;--violet-8: #6741d9;--violet-9: #5f3dc4;--indigo-0: #edf2ff;--indigo-1: #dbe4ff;--indigo-2: #bac8ff;--indigo-3: #91a7ff;--indigo-4: #748ffc;--indigo-5: #5c7cfa;--indigo-6: #4c6ef5;--indigo-7: #4263eb;--indigo-8: #3b5bdb;--indigo-9: #364fc7;--blue-0: #e7f5ff;--blue-1: #d0ebff;--blue-2: #a5d8ff;--blue-3: #74c0fc;--blue-4: #4dabf7;--blue-5: #339af0;--blue-6: #228be6;--blue-7: #1c7ed6;--blue-8: #1971c2;--blue-9: #1864ab;--cyan-0: #e3fafc;--cyan-1: #c5f6fa;--cyan-2: #99e9f2;--cyan-3: #66d9e8;--cyan-4: #3bc9db;--cyan-5: #22b8cf;--cyan-6: #15aabf;--cyan-7: #1098ad;--cyan-8: #0c8599;--cyan-9: #0b7285;--teal-0: #e6fcf5;--teal-1: #c3fae8;--teal-2: #96f2d7;--teal-3: #63e6be;--teal-4: #38d9a9;--teal-5: #20c997;--teal-6: #12b886;--teal-7: #0ca678;--teal-8: #099268;--teal-9: #087f5b;--green-0: #ebfbee;--green-1: #d3f9d8;--green-2: #b2f2bb;--green-3: #8ce99a;--green-4: #69db7c;--green-5: #51cf66;--green-6: #40c057;--green-7: #37b24d;--green-8: #2f9e44;--green-9: #2b8a3e;--lime-0: #f4fce3;--lime-1: #e9fac8;--lime-2: #d8f5a2;--lime-3: #c0eb75;--lime-4: #a9e34b;--lime-5: #94d82d;--lime-6: #82c91e;--lime-7: #74b816;--lime-8: #66a80f;--lime-9: #5c940d;--yellow-0: #fff9db;--yellow-1: #fff3bf;--yellow-2: #ffec99;--yellow-3: #ffe066;--yellow-4: #ffd43b;--yellow-5: #fcc419;--yellow-6: #fab005;--yellow-7: #f59f00;--yellow-8: #f08c00;--yellow-9: #e67700;--orange-0: #fff4e6;--orange-1: #ffe8cc;--orange-2: #ffd8a8;--orange-3: #ffc078;--orange-4: #ffa94d;--orange-5: #ff922b;--orange-6: #fd7e14;--orange-7: #f76707;--orange-8: #e8590c;--orange-9: #d9480f}:where(html){--gradient-1: linear-gradient(to bottom right,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);--gradient-2: linear-gradient(to bottom right,#48005c, #8300e2, #a269ff);--gradient-3: radial-gradient( circle at top right, hsl(180 100% 50%), hsl(180 100% 50% / 0%) ), radial-gradient( circle at bottom left, hsl(328 100% 54%), hsl(328 100% 54% / 0%) );--gradient-4: linear-gradient(to bottom right,#00F5A0,#00D9F5);--gradient-5: conic-gradient(from -270deg at 75%, at 110%, fuchsia, floralwhite);--gradient-5: conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite);--gradient-6: conic-gradient(from -90deg at top left, black, white);--gradient-7: linear-gradient(to bottom right,#72C6EF,#004E8F);--gradient-8: conic-gradient(from 90deg at 50%, at 0%, #111, 50%, #222, #111);--gradient-8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);--gradient-9: conic-gradient(from .5turn at bottom center, lightblue, white);--gradient-10: conic-gradient(from 90deg at 40%, at -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);--gradient-10: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);--gradient-11: conic-gradient(at bottom left, deeppink, cyan);--gradient-12: conic-gradient(from 90deg at 25%, at -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);--gradient-12: conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);--gradient-13: radial-gradient(circle at 50%, at 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7);--gradient-13: radial-gradient(circle at 50% 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7);--gradient-14: conic-gradient(at top right, lime, cyan);--gradient-15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7);--gradient-16: radial-gradient(circle at 50%, at -250%, #374151, #111827, #000);--gradient-16: radial-gradient(circle at 50% -250%, #374151, #111827, #000);--gradient-17: conic-gradient(from -90deg at 50%, at -25%, blue, blueviolet);--gradient-17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet);--gradient-18: linear-gradient(0deg, hsla(0 100% 50% / 80%), hsla(0 100% 50% / 0) 75%), linear-gradient(60deg, hsla(60 100% 50% / 80%), hsla(60 100% 50% / 0) 75%), linear-gradient(120deg, hsla(120 100% 50% / 80%), hsla(120 100% 50% / 0) 75%), linear-gradient(180deg, hsla(180 100% 50% / 80%), hsla(180 100% 50% / 0) 75%), linear-gradient(240deg, hsla(240 100% 50% / 80%), hsla(240 100% 50% / 0) 75%), linear-gradient(300deg, hsla(300 100% 50% / 80%), hsla(300 100% 50% / 0) 75%) ;--gradient-19: linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20: conic-gradient(from -135deg at -10% center, #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4);--gradient-21: conic-gradient(from -90deg at 25%, at 115%, #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, #0000ff, #0000ff, #0000ff, #0000ff);--gradient-21: conic-gradient(from -90deg at 25% 115%, #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, #0000ff, #0000ff, #0000ff, #0000ff);--gradient-22: linear-gradient(to bottom right,#acb6e5,#86fde8);--gradient-23: linear-gradient(to bottom right,#536976,#292E49);--gradient-24: conic-gradient(from .5turn at 0%, at 0%, #00c476, 10%, #82b0ff, 90%, #00c476);--gradient-24: conic-gradient(from .5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476);--gradient-25: conic-gradient(at 125%, at 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7);--gradient-25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7);--gradient-26: linear-gradient(to bottom right,#9796f0,#fbc7d4);--gradient-27: conic-gradient(from .5turn at bottom left, deeppink, #639);--gradient-28: conic-gradient(from -90deg at 50%, at 105%, white, orchid);--gradient-28: conic-gradient(from -90deg at 50% 105%, white, orchid);--gradient-29: radial-gradient( circle at top right, hsl(250 100% 85%), hsl(250 100% 85% / 0%) ), radial-gradient( circle at bottom left, hsl(220 90% 75%), hsl(220 90% 75% / 0%) );--gradient-30: radial-gradient( circle at top right, hsl(150 100% 50%), hsl(150 100% 50% / 0%) ), radial-gradient( circle at bottom left, hsl(150 100% 84%), hsl(150 100% 84% / 0%) );--noise-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-4: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-5: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-filter-1: contrast(300%) brightness(100%);--noise-filter-2: contrast(200%) brightness(150%);--noise-filter-3: contrast(200%) brightness(250%);--noise-filter-4: contrast(200%) brightness(500%);--noise-filter-5: contrast(200%) brightness(1000%)}:where(html){--animation-fade-in: fade-in .5s var(--ease-3);--animation-fade-out: fade-out .5s var(--ease-3);--animation-scale-up: scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start));--animation-scale-down: scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start));--animation-slide-out-up: slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));--animation-slide-out-down: slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));--animation-slide-out-right: slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));--animation-slide-out-left: slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));--animation-slide-in-up: slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));--animation-slide-in-down: slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));--animation-slide-in-right: slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));--animation-slide-in-left: slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));--animation-shake-x: shake-x var(--shake-duration, 3s) var(--shake-easing, steps(1));--animation-shake-y: shake-y var(--shake-duration, 3s) var(--shake-easing, steps(1));--animation-spin: spin 2s var(--spin-easing, steps(4, jump-start)) infinite;--animation-ping: ping var(--ping-duration, 4s) var(--ping-easing, steps(4, jump-start)) infinite;--animation-blink: blink var(--blink-duration, 2s) var(--ease-out-3) infinite;--animation-float: float 3s var(--float-ease, steps(2, jump-start)) infinite;--animation-bounce: bounce var(--bounce-duration, 4s) var(--bounce-ease, steps(2)) infinite;--animation-pulse: pulse 2s var(--pulse-ease, steps(2, jump-start)) infinite}@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translate(100%)}}@keyframes slide-out-left{to{transform:translate(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translate(-100%)}}@keyframes slide-in-left{0%{transform:translate(100%)}}@keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-5%)}40%{transform:translate(5%)}60%{transform:translate(-5%)}80%{transform:translate(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{transform:scale(2);opacity:0}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-reduced-motion: no-preference){:where(html){--scale-duration: .5s;--scale-easing: var(--ease-3);--slide-duration: .5s;--slide-easing: var(--ease-3);--shake-duration: .75s;--shake-easing: var(--ease-out-5);--spin-easing: linear;--ping-duration: 5s;--ping-easing: var(--ease-out-3);--blink-duration: 1s;--float-ease: var(--ease-out-3);--bounce-duration: 2s;--bounce-ease: var(--ease-squish-2);--pulse-duration: 2s;--pulse-ease: var(--ease-out-3)}}:where(html){--border-size-1: 1px;--border-size-2: 2px;--border-size-3: 5px;--border-size-4: 10px;--border-size-5: 25px;--radius-1: 2px;--radius-2: 5px;--radius-3: 1rem;--radius-4: 2rem;--radius-5: 4rem;--radius-6: 8rem;--radius-round: 1e5px;--radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;--radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;--radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;--radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;--radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;--radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));--radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));--radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));--radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));--radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));--radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6))}:where(html){color-scheme:light;--brand: var(--pink-6);--link: var(--indigo-7);--link-visited: var(--grape-7);--text-1: var(--gray-9);--text-2: var(--gray-7);--surface-1: var(--gray-0);--surface-2: var(--gray-2);--surface-3: var(--gray-3);--surface-4: var(--gray-4) }@media (dynamic-range: high){:where(html){--link: color(display-p3 0 .5 1);--link-visited: color(display-p3 .6 .2 1) }}@media (prefers-color-scheme: dark){:where(html){color-scheme:dark;--brand: var(--pink-4);--link: var(--indigo-3);--link-visited: var(--grape-3);--text-1: var(--gray-1);--text-2: var(--gray-4);--surface-1: var(--gray-9);--surface-2: var(--gray-8);--surface-3: var(--gray-7);--surface-4: var(--gray-6)}}:where(html){color:var(--text-2);background-color:var(--surface-1)}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--link)}:where(a[href]):visited{color:var(--link-visited)}:focus-visible{outline-color:var(--link)}:where(html){--scrollbar-color: var(--gray-7);scrollbar-color:var(--scrollbar-color) transparent;accent-color:var(--brand);caret-color:var(--brand)}@media (prefers-color-scheme: light){:where(html){--scrollbar-color: var(--gray-4) }}*,:before,:after{box-sizing:border-box}*{background-origin:border-box;background-repeat:no-repeat;margin:0}*:where(:not(fieldset)){border-width:0;border-style:solid}:where(html){block-size:100%;font-family:var(--font-sans);line-height:var(--font-lineheight-3);-webkit-text-size-adjust:none}@media (prefers-reduced-motion: no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion: no-preference){:focus-visible{transition:outline-offset 145ms var(--ease-2)}:where(:not(:active)):focus-visible{transition-duration:.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(body){min-block-size:100%;scrollbar-gutter:stable both-edges}:where(h1,h2,h3,h4,h5,h6){line-height:var(--font-lineheight-1);font-weight:var(--font-weight-9)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(a){padding-inline:var(--size-1);margin-inline:calc(var(--size-1) * -1);padding-block:var(--size-1);margin-block:calc(var(--size-1) * -1)}:where(a):where([href]){text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){text-decoration-color:var(--grape-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){max-inline-size:100%;block-size:auto}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{font:inherit;font-size:inherit;color:inherit;letter-spacing:inherit}:where(input){padding-inline:var(--size-2);padding-block:var(--size-1)}:where(select){padding-inline:var(--size-2);padding-block:var(--size-1)}:where(textarea){resize:block}:where(input[type="checkbox"],input[type="radio"]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre) > code,kbd){white-space:nowrap}:where(pre){white-space:pre;min-inline-size:0;max-inline-size:max-content}:where(:not(pre) > code){padding:var(--size-1) var(--size-2);background:var(--surface-2);border-radius:var(--radius-2)}:where(kbd,var){padding:var(--size-1) var(--size-2);border-width:var(--border-size-1);border-color:var(--surface-4);border-radius:var(--radius-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){margin-block:var(--size-fluid-5);height:var(--border-size-2);background-color:var(--surface-3)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not(blockquote) > cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);padding-block:var(--size-3);padding-inline:var(--size-4);max-inline-size:var(--size-content-2)}:where(:not(blockquote) > cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);padding:var(--size-2) var(--size-3);margin:calc(var(--size-2) * -1) calc(var(--size-3) * -1);border-radius:var(--radius-2)}:where(details){padding-inline:var(--size-3);padding-block:var(--size-2);background:var(--surface-2);border-radius:var(--radius-2)}:where(details[open] > summary){margin-bottom:var(--size-2);border-end-start-radius:0;border-end-end-radius:0}:where(fieldset){border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){text-decoration-color:var(--blue-5)}:where(html){--gray-0-hsl: 210 17% 98%;--gray-1-hsl: 210 17% 95%;--gray-2-hsl: 210 16% 93%;--gray-3-hsl: 210 14% 89%;--gray-4-hsl: 210 14% 83%;--gray-5-hsl: 210 11% 71%;--gray-6-hsl: 210 7% 56%;--gray-7-hsl: 210 9% 31%;--gray-8-hsl: 210 10% 23%;--gray-9-hsl: 210 11% 15%}:root :not(pre)>code[class*=language-]{padding:var(--size-1) var(--size-2);box-shadow:var(--inner-shadow-0),var(--shadow-1);color:var(--text-1);white-space:nowrap;text-shadow:none}code.language-bash:before{content:"$ ";color:var(--cyan-1)}[data-theme=light] code.language-bash:before{color:var(--teal-6)}code[class*=language-],pre[class*=language-]{text-align:start;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;hyphens:none}pre[class*=language-]{padding-inline:var(--size-4);padding-block:var(--size-3);margin:var(--size-2) 0;overflow:auto;border-radius:var(--radius-conditional-2);border:var(--border-size-1) solid var(--surface-3);background:var(--surface-2)}@media (min-width: 1024px){pre[class*=language-]{padding-inline:var(--size-5);padding-block:var(--size-4)}}[data-theme=light] pre[class*=language-]{background:white}code.language-css{color:var(--indigo-1);text-shadow:0 0 10px var(--indigo-5),0 0 25px var(--indigo-7)}[data-theme=light] code.language-css{color:var(--indigo-9);text-shadow:0 0 15px var(--indigo-7);background:white}@media (dynamic-range: high){code.language-css{text-shadow:0 0 15px color(display-p3 0 0 1)}}.token:is(.property,.atrule > *){color:var(--text-1);text-shadow:0 1px 0 var(--surface-1)}[data-theme=light] .token:is(.property,.atrule > *){text-shadow:0 1px 0 var(--gray-3)}.token.selector{color:var(--text-2);text-shadow:none}.token:is(.string,.attr-value){color:var(--teal-0);text-shadow:0 0 10px var(--teal-5),0 0 25px var(--teal-7)}[data-theme=light] .token:is(.string,.attr-value){color:var(--grape-9);text-shadow:0 0 15px var(--grape-9)}@media (dynamic-range: high){.token:is(.string,.attr-value){text-shadow:0 0 15px color(display-p3 0 1 0)}}.token:is(.comment,.punctuation){color:var(--gray-5);text-shadow:none}[data-theme=light] .token:is(.comment,.punctuation){color:var(--gray-6)}:root{--max-inline-body: calc(100vw - (var(--size-8) * 2));--brand-bg-gradient: linear-gradient(to bottom, var(--grape-3), var(--violet-3), var(--indigo-3), var(--cyan-3)) }@media (max-width: 768px){:root{--max-inline-body: calc(100vw - (var(--size-3) * 2)) }}[data-theme=light] :root{--brand-bg-gradient: linear-gradient(to bottom, var(--grape-6), var(--violet-6), var(--indigo-6), var(--cyan-6)) }body{padding-block-start:var(--size-fluid-2);overflow-x:hidden;display:grid;justify-items:flex-start;grid-template-columns:var(--size-8) 1fr var(--size-8)}body>*{grid-column:2}body>.place-full{width:100%;grid-column:1 / -1}@media (max-width: 768px){body{grid-template-columns:var(--size-3) 1fr var(--size-3)}}:not(blockquote)>p{text-align:justify}section{display:grid;gap:var(--size-fluid-4);justify-items:flex-start;padding-block:var(--size-fluid-6)}section:not(:last-of-type){border-block-end-width:var(--border-size-1)}section:nth-of-type(1n){border-color:var(--orange-5)}section:nth-of-type(2n){border-color:var(--red-5)}section:nth-of-type(3n){border-color:var(--pink-5)}section:nth-of-type(4n){border-color:var(--grape-5)}section:nth-of-type(5n){border-color:var(--indigo-5)}section:nth-of-type(6n){border-color:var(--blue-5)}section:nth-of-type(7n){border-color:var(--green-5)}section:nth-of-type(8n){border-color:var(--violet-5)}section:nth-of-type(9n){border-color:var(--cyan-5)}section:nth-of-type(10n){border-color:var(--teal-5)}@supports not (-moz-appearance: none){h1,h2,h3,h4,h5,h6{background:var(--brand-bg-gradient) fixed;-webkit-background-clip:text;-webkit-text-fill-color:transparent}}header{display:grid;gap:var(--size-2)}nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--size-4);justify-self:stretch}nav>a[href]:not(:hover,:focus-visible){color:var(--text-1);text-decoration-color:var(--brand)}nav>a[href="/"]{margin-inline-end:auto;display:inline-flex;align-items:center;gap:var(--size-2)}nav>a[href="/"]:hover{text-decoration:none}nav>a[href="/"]>svg{inline-size:var(--size-9)}@media (max-width: 480px){nav>a[href="#getting-started"]{display:none}}.github-icon{fill:var(--nav-icon);stroke:none}:hover>.github-icon{fill:var(--nav-icon-hover)}footer{padding-block:var(--size-12);display:grid;grid-template-columns:minmax(min(100%,var(--size-content-3)),80%);gap:var(--size-8);justify-content:space-around;border-top-width:var(--border-size-1);border-color:var(--surface-3);background-color:var(--surface-2)}footer>a{justify-self:center}footer dl{display:flex;justify-content:space-around;gap:var(--size-fluid-6)}@media (max-width: 768px){footer dl{flex-direction:column;text-align:center}}footer dl>div{display:grid;place-self:center;place-items:center;flex-basis:var(--size-content-1);gap:var(--size-2)}footer dl dt{font-size:var(--font-size-0);text-transform:uppercase}section.hero{gap:var(--size-fluid-3) var(--size-10)}section.hero pre[class*=language-]{box-shadow:var(--shadow-6);margin-block:0}section.hero pre[class*=language-]:last-of-type{margin-block:var(--size-5) 0}@media (min-width: 1024px){section.hero{column-gap:var(--size-12)}}.hero>header{display:grid;gap:var(--size-5);grid-template-rows:auto 2fr auto;align-self:stretch}.hero>header .icon-quote{--_accent-1: var(--grape-5);--_accent-2: var(--grape-4) }[data-theme=light] .hero>header .icon-quote{--_accent-1: var(--orange-7);--_accent-2: var(--orange-5);--_bg: var(--orange-0);--_ink: var(--orange-9) }.hero>header small{color:var(--text-2);align-self:flex-end}.hero .subhead>h1{overflow:clip;font-size:var(--font-size-5)}@media (min-width: 360px){.hero .subhead>h1{font-size:var(--font-size-6)}}@media (min-width: 480px){.hero .subhead>h1{font-size:var(--font-size-7)}}@media (min-width: 768px){.hero .subhead>h1{font-size:var(--font-size-fluid-3)}}.hero .subhead>h1>*{background:var(--gradient-1) fixed;background-size:13ch 50%;-webkit-background-clip:text;-webkit-text-fill-color:transparent}[data-theme=dark] .hero .subhead>h1>*{background:var(--gradient-4) fixed;background-size:12ch 7ch;-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (prefers-reduced-motion: no-preference){.hero .subhead>h1>*{opacity:0;animation:var(--animation-fade-in) forwards,var(--animation-slide-in-up) forwards;animation-timing-function:var(--ease-out-5);animation-delay:.5s}.hero .subhead>h1>span{display:inline-block;animation-timing-function:var(--ease-out-5)}.hero .subhead>h1:last-of-type>span:first-child{animation-delay:.6s}.hero .subhead>h1:last-of-type>span:last-child{animation-delay:.7s}}blockquote{--_accent-1: var(--lime-5);--_accent-2: var(--lime-4);--_bg: var(--surface-2);--_ink: var(--text-1);color:var(--_ink);border-color:var(--_accent-2);background-color:var(--_bg);justify-self:flex-start}blockquote.icon-quote{display:grid;grid-template-columns:max-content 1fr;gap:var(--size-4);align-items:center;padding-inline-end:var(--size-6)}blockquote.icon-quote>svg{inline-size:var(--size-7);stroke:var(--_accent-2)}[data-theme=light] blockquote.icon-quote{--_bg: white;--_ink: var(--lime-9) }blockquote.icon-quote.indigo{--_accent-1: var(--indigo-5);--_accent-2: var(--indigo-4) }[data-theme=light] blockquote.icon-quote.indigo{--_bg: var(--indigo-0);--_ink: var(--indigo-9) }pre[class*=language-]{box-shadow:var(--shadow-4);inline-size:max-content;max-inline-size:var(--max-inline-body);justify-self:flex-start}[data-theme=dark] pre[class*=language-]{box-shadow:var(--shadow-3)}details pre[class*=language-]{background-color:var(--surface-3);max-inline-size:calc(var(--max-inline-body) + (var(--size-3) * 2))}#overview,.dogfood{border-block-end:none}.adaptive-glass{--glass-lightness: 100%;background:hsl(0 0% var(--glass-lightness) / 50%);backdrop-filter:blur(40px)}[data-theme=dark] .adaptive-glass{--glass-lightness: 0% }@supports not (backdrop-filter: blur(1px)){.adaptive-glass{background:hsl(0 0% var(--glass-lightness) / 90%)}}.demo-gallery>*{flex-basis:var(--size-content-2)}.demo-gallery figure{border-radius:var(--radius-3);overflow:hidden;box-shadow:var(--shadow-4);gap:0}.demo-gallery figure>figcaption{display:grid;grid:[stack] 1fr / [stack] 1fr;position:relative;inline-size:100%;max-inline-size:100%}.demo-gallery figure>figcaption>*{grid-area:stack}.demo-gallery figure>figcaption>img{position:absolute;inset:0;transform:scaleY(-1)}.demo-gallery figure>figcaption>div{z-index:1;padding-inline:var(--size-3);padding-block:var(--size-3) var(--size-4);display:grid;gap:var(--size-1)}[data-theme=dark] .demo-gallery figure>figcaption>div{text-shadow:0 1px 0 hsl(0 0% 0% / 20%)}.demo-gallery figure>figcaption h3{color:var(--gray-1);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset}[data-theme=light] .demo-gallery figure>figcaption h3{color:var(--gray-8)}.demo-gallery figure>figcaption h3>a{color:inherit}.demo-gallery figure>figcaption p{color:var(--gray-2)}[data-theme=light] .demo-gallery figure>figcaption p{color:var(--gray-7)}.module-list{position:sticky;z-index:var(--layer-1);bottom:0;overflow-x:auto;background-image:linear-gradient(to top,hsl(var(--gray-9-hsl) / 98%) 1ch,75%,hsl(var(--gray-9-hsl) / 0%));margin-block-start:var(--size-8);padding-block:var(--size-5) var(--size-2);padding-inline:var(--size-2) var(--size-4);display:flex;align-items:center;white-space:nowrap;gap:var(--size-4)}.module-list a[href]:not(:hover,:focus-visible){color:var(--text-1);text-decoration-color:var(--brand)}.module-list a.in-view{text-decoration:underline double;text-underline-offset:4px}[data-theme=light] .module-list{padding-block-start:var(--size-3);background:var(--surface-1)}.module-list>li{display:inline-flex}.just-for-gap{display:grid;gap:var(--size-4)}.just-for-sm-gap{display:grid;gap:var(--size-2)}.just-stretch{justify-self:stretch}.open-colors{display:flex;align-items:center;gap:var(--size-2)}.open-colors>h4{counter-reset:basic -1}.open-colors>h4:before{display:none}.op-logo{display:grid;font-weight:var(--font-weight-3);font-size:var(--font-size-2);color:var(--indigo-3);letter-spacing:var(--font-letterspacing-4)}@media (max-width: 360px){.op-logo{display:none}}[data-theme=light] .op-logo{color:var(--indigo-7)}.op-logo>span{line-height:.9;text-transform:uppercase}.op-logo>span:first-letter{font-weight:var(--font-weight-9)}.op-icon-p{stroke:var(--indigo-2)}a:hover .op-icon-p{stroke:var(--indigo-1)}[data-theme=light] .op-icon-p{stroke:var(--indigo-7)}[data-theme=light] a:hover .op-icon-p{stroke:var(--indigo-8)}.op-icon-o{stroke:var(--indigo-4)}a:hover .op-icon-o{stroke:var(--indigo-3)}[data-theme=light] .op-icon-o{stroke:var(--indigo-5)}[data-theme=light] a:hover .op-icon-o{stroke:var(--indigo-6)}.color-swatch{--size: var(--size-5);border-radius:var(--radius-round);box-shadow:var(--inner-shadow-0);inline-size:7%;block-size:var(--size);display:grid;place-content:center;color:#000;text-shadow:0 0 1px hsl(0 0% 0% / 40%)}.color-swatch:before{opacity:0;transition:opacity .4s var(--ease-out-3)}.color-swatch:nth-child(n+8):before{color:#fff}.color-swatch:is(:hover,:focus){transform:scale(1.5);transition-delay:0s;transition-timing-function:var(--ease-elastic-3)}.color-swatch:is(:hover,:focus):before{opacity:1}@media (prefers-reduced-motion: no-preference){.color-swatch{transition:transform 2s var(--ease-squish-5) 3s}.color-swatch:is(:hover,:focus){transition-duration:.1s}}@media (max-width: 768px){.color-swatch{--size: var(--size-3) }}@media (max-width: 360px){.color-swatch{--size: var(--size-2) }}.ui-gradients{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(var(--size-content-2),30vw);gap:var(--size-2);scroll-snap-type:x mandatory;padding-inline:var(--gap);scroll-padding-inline:var(--size-8)}@media (max-width: 768px){.ui-gradients{scroll-padding-inline:var(--size-3)}}.ui-gradients.noisy>*{background-size:cover;filter:var(--noise-filter-1)}.ui-gradients>*{scroll-snap-align:start;display:grid;justify-content:flex-start}.ui-gradients>*:before{font-size:var(--font-size-fluid-1);background:var(--surface-1);color:var(--text-1);box-shadow:var(--shadow-2);text-shadow:0 1px 0 hsl(0 0% 0% / 25%);inline-size:3ch;display:grid;place-content:center;margin:var(--size-3);aspect-ratio:var(--ratio-square);border-radius:var(--radius-round)}@media (max-width: 768px){.ui-gradients{grid-auto-columns:minmax(var(--size-content-1),30vw)}}.gradient-swatch{border-radius:var(--radius-2);aspect-ratio:var(--ratio-landscape)}.scroll-x-overflow{overflow-x:auto;overscroll-behavior-inline:contain;max-inline-size:calc(var(--max-inline-body) + calc(var(--size-8) * 2));margin-inline:calc(var(--size-8) * -1);padding-inline:var(--size-8);padding-block-end:var(--size-3)}@media (max-width: 768px){.scroll-x-overflow{max-inline-size:calc(var(--max-inline-body) + calc(var(--size-3) * 2));margin-inline:calc(var(--size-3) * -1);padding-inline:var(--size-3);scroll-padding-inline:var(--size-3)}}@media (max-width: 768px){:root body pre{overflow-x:auto;overscroll-behavior-inline:contain;border-radius:0;max-inline-size:calc(var(--max-inline-body) + calc(var(--size-7) * 2));margin-inline:calc(var(--size-8) * -1)}@media (max-width: 768px){:root body pre{max-inline-size:calc(var(--max-inline-body) + calc(var(--size-3) * 2));margin-inline:calc(var(--size-3) * -1)}}}.contain-pre{display:grid;justify-items:flex-start;grid-template-columns:1fr;gap:var(--size-5)}.contain-pre>div{justify-self:flex-start}.size-chart{display:grid;grid-template-columns:5ch 1fr;gap:0 var(--size-3)}.size-chart .size{color:var(--text-2);font-size:var(--font-size-0)}.size-chart .size>strong{color:var(--text-1);font-size:var(--font-size-1)}.yellow-badge{padding-inline:var(--size-1);border-width:var(--border-size-1);border-color:var(--yellow-6);color:var(--yellow-2);border-radius:var(--radius-round)}[data-theme=light] .yellow-badge{border-color:var(--orange-2);color:var(--orange-6)}.green-badge{padding-inline:var(--size-1);border-width:var(--border-size-1);border-color:var(--lime-6);color:var(--lime-2);border-radius:var(--radius-round)}[data-theme=light] .green-badge{border-color:var(--green-2);color:var(--green-6)}.font-sizes{display:grid;gap:var(--size-3)}.font-sizes pre{max-inline-size:var(--max-inline-body)}.font-demo{flex-grow:1;display:grid;gap:var(--size-2);align-content:center;align-self:stretch;text-align:center}.font-demo>.sample-text{margin-inline:auto}.letterspacing-demo{inline-size:min(var(--max-inline-body),var(--size-content-2))}.font-size-examples{inline-size:max-content;display:grid;gap:var(--size-2);grid-template-columns:max-content 1fr;align-items:center;justify-items:flex-start}@media (max-width: 768px){.font-size-examples{grid-template-columns:1fr;gap:var(--size-1)}.font-size-examples>code:not(:first-of-type){margin-block-start:var(--size-3)}}.var-examples{display:flex;flex-wrap:wrap;gap:var(--size-5);align-items:flex-start}.block-wrap{display:flex;flex-wrap:wrap;flex-basis:var(--size-content-2);gap:var(--size-5) var(--size-8);align-items:flex-start}.block-wrap .block-wrap{row-gap:var(--size-1)}@media (min-width: 1440px){.block-wrap{column-gap:var(--size-10)}}.dogfood{position:relative;background-image:var(--gradient-30)}@media (min-width: 1024px){.dogfood{background-image:none}.dogfood:before{content:"";position:absolute;z-index:-1;inset-block:1%;inset-inline:-15% 0;border-radius:var(--radius-blob-1);background-image:var(--gradient-30)}}[data-theme=light] .dogfood{background-image:var(--gradient-18)}@media (min-width: 768px){.dogfood{padding-inline:var(--size-fluid-4)}}@media (max-width: 768px){.dogfood pre{margin-inline:0!important}.dogfood header{padding-inline:var(--size-fluid-3)}}.dogfood h2{-webkit-text-fill-color:initial}.easing-samples{flex-basis:var(--size-content-3)}.checkmark-list{align-self:flex-start;display:grid;gap:var(--size-2);font-size:var(--font-size-fluid-1);font-weight:var(--font-weight-2);padding-inline-start:0}.checkmark-list>li{display:flex;align-items:center;gap:var(--size-3);padding-inline-start:0}.checkmark-list>li:nth-child(1) svg{stroke:var(--cyan-3)}[data-theme=light] .checkmark-list>li:nth-child(1) svg{stroke:var(--grape-8)}.checkmark-list>li:nth-child(2) svg{stroke:var(--teal-3)}[data-theme=light] .checkmark-list>li:nth-child(2) svg{stroke:var(--pink-7)}.checkmark-list>li:nth-child(3) svg{stroke:var(--green-3)}[data-theme=light] .checkmark-list>li:nth-child(3) svg{stroke:var(--orange-7)}.checkmark-list svg{block-size:var(--size-7);inline-size:auto}.bundle-sizes{gap:var(--size-8)}@media (min-width: 1024px){.bundle-sizes{column-gap:var(--size-12)}}.bundle-sizes .child-ref{display:flex;gap:var(--size-1);align-items:center}.bundle-sizes .child-ref>svg{margin-block-start:-.25em;inline-size:2ch;stroke-width:2px}.marketing-features{justify-items:center;text-align:center}.marketing-features.responsive-dl{gap:var(--size-11)}.marketing-features dt{font-size:var(--font-size-4)}.marketing-features dd{font-size:var(--font-size-fluid-1);max-inline-size:var(--size-header-2)}.marketing-features dt>svg{margin-inline:auto}.responsive-dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--size-8)}@media (max-width: 768px){.responsive-dl{grid-template-columns:1fr;justify-self:stretch}.responsive-dl:not(.bundle-sizes){justify-items:center;text-align:center}}@media (min-width: 1024px){.responsive-dl{column-gap:var(--size-12)}}.responsive-dl>div:nth-of-type(1) svg{color:var(--grape-5);border-color:var(--grape-3)}.responsive-dl>div:nth-of-type(2) svg{color:var(--orange-5);border-color:var(--orange-3)}.responsive-dl>div:nth-of-type(3) svg{color:var(--indigo-5);border-color:var(--indigo-3)}.responsive-dl>div:nth-of-type(4) svg{color:var(--red-5);border-color:var(--red-3)}.responsive-dl svg{inline-size:var(--size-fluid-7);border-width:var(--border-size-2);border-radius:var(--radius-round);padding:var(--size-2);margin-inline-start:calc(var(--size-1) * -1);margin-block-end:var(--size-3)}@media (max-width: 768px){.responsive-dl svg{margin-inline:auto}}.installation{display:grid;gap:var(--size-5)}.installation h5{margin-block-start:var(--size-5);border-bottom:var(--border-size-1) solid var(--violet-5)}[data-theme=light] .installation h5{color:var(--violet-6)}.aspect-demos{display:flex;flex-flow:row wrap;gap:var(--size-4)}.aspect-demos>div{block-size:var(--size-12);max-inline-size:var(--max-inline-body);border-width:var(--border-size-3);border-color:var(--surface-4);box-shadow:var(--shadow-3);display:grid;place-content:center}[data-theme=light] .aspect-demos>div{background:white}#about{justify-content:center}#about header{margin-block-end:var(--size-8)}#about :is(header,p){text-align:center;margin-inline:auto}.ease-demo{inline-size:min(var(--size-content-2),var(--max-inline-body));display:grid;grid-template-columns:50%;grid-auto-flow:row;gap:var(--size-1);align-items:flex-start;text-align:center;align-self:stretch;padding-block:var(--size-2)}.ease-demo.paused>div{animation-play-state:paused}.ease-demo>div{font-weight:var(--font-weight-6);padding-inline:var(--size-4);padding-block:var(--size-1);color:var(--surface-1);background:var(--brand-bg-gradient) fixed;border-radius:var(--radius-round);position:relative}@media (prefers-reduced-motion: no-preference){.ease-demo>div{animation:ping-pong 2s ease infinite}}[data-theme=light] .ease-demo>div{color:#fff}.ease-demo:is(.squish,.elastic){padding-inline-end:var(--size-6)}@keyframes ping-pong{40%,50%{left:calc(min(var(--size-content-2),var(--max-inline-body)) / 2)}0%,90%{left:0}}.font-family-grid{display:grid;gap:var(--size-2);justify-items:flex-start}.font-family-grid>div{display:grid;grid-template-columns:repeat(9,minmax(3rem,1fr));place-items:center;font-size:var(--font-size-5);color:var(--text-1)}@media (max-width: 768px){.font-family-grid>div{grid-template-columns:repeat(6,minmax(2rem,1fr));font-size:var(--font-size-3)}}#colors details h3{margin-block-start:var(--size-6)}.shadow-demos{display:flex;flex-flow:row wrap;gap:var(--size-5)}.shadow-demos>div{background:white;inline-size:var(--size-12);aspect-ratio:var(--ratio-square);border-radius:var(--radius-3);display:grid;place-content:center}.shadow-demos>div:before{counter-increment:basic;content:"Shadow " counter(basic)}[data-theme=dark] .shadow-demos>div{background:var(--surface-2)}.shadow-demos:nth-of-type(2){counter-reset:basic -1}.shadow-demos:nth-of-type(2)>div:before{content:"Inner Shadow " counter(basic)}.border-demos{display:flex;flex-flow:row wrap;gap:var(--size-5)}.border-demos>div{display:grid;place-content:center;inline-size:var(--size-fluid-6);aspect-ratio:var(--ratio-square);border-color:var(--indigo-5);border-width:var(--border-size-2);font-size:var(--font-size-4)}@media (min-width: 480px){.border-demos>div{inline-size:var(--size-12)}}.border-demos.blobbys>div{border:none;background:var(--brand-bg-gradient) fixed;color:var(--surface-1)}.animation-control-header{display:flex;align-items:center;gap:var(--size-5)}.play-button{appearance:none;background:none;padding:0;aspect-ratio:1;border-radius:var(--radius-round)}.play-button>svg{pointer-events:none;fill:currentColor;color:var(--green-3)}[data-theme=light] .play-button>svg{color:var(--green-6)}.play-button:hover>svg{color:var(--green-4)}[data-theme=light] .play-button:hover>svg{color:var(--green-7)}.play-button:active>svg{color:var(--green-5)}[data-theme=light] .play-button:active>svg{color:var(--green-8)}.animation-demo{display:flex;flex-flow:row wrap;gap:var(--size-4);align-items:flex-start}.animation-demo.of-pairs{gap:var(--size-8) var(--size-4)}.animation-demo .language-css{margin-block:0}.animation-demo-target{background-color:var(--surface-2);display:grid;place-items:center;padding-inline:var(--size-5);padding-block:var(--size-3);border-radius:var(--radius-2)}.animation-pair{display:grid;grid-template-columns:auto max-content;gap:var(--size-6) var(--size-3);align-items:flex-start;justify-items:flex-start}.animation-pair .block-wrap{row-gap:var(--size-1)}@media (max-width: 768px){.animation-pair{grid-template-columns:auto}}.sizes-demo{display:flex;gap:var(--size-2);flex-flow:row wrap}.sizes-demo>*{flex-shrink:0;background:var(--indigo-6);color:var(--indigo-0);block-size:var(--size-10);display:grid;place-content:center;font-size:var(--font-size-2)}.sizes-demo>*:before{font-size:var(--font-size-4)}.content-demo{display:flex;gap:var(--size-2);flex-flow:row wrap}.content-demo>*{text-align:start}.header-demo{display:flex;gap:var(--size-2);flex-flow:row wrap}.count-em:before{content:"";counter-reset:basic;position:absolute}.count-em>*:before{counter-increment:basic;content:counter(basic)}input[type=range]{--track-height: .5ex;--track-fill: 0%;--thumb-size: 3ex;--thumb-offset: -1.25ex;--thumb-highlight-size: 0px;--thumb-highlight-color: hsl(0 0% 100% / 20%);display:block;inline-size:100%;margin:1ex 0;appearance:none;-webkit-appearance:none;background:transparent;outline-offset:5px}@media (hover: none){input[type=range]{--thumb-size: 30px;--thumb-offset: -14px}}[data-theme=light] input[type=range]{--thumb-highlight-color: hsl(0 0% 0% / 20%) }input[type=range]::-webkit-slider-runnable-track{appearance:none;block-size:var(--track-height);border-radius:5ex;background:linear-gradient(to right,transparent var(--track-fill),var(--surface-3) 0%),var(--brand-bg-gradient) fixed}input[type=range]::-moz-range-track{appearance:none;block-size:var(--track-height);border-radius:5ex;background:linear-gradient(to right,transparent var(--track-fill),var(--surface-3) 0%),var(--brand-bg-gradient) fixed}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;cursor:ew-resize;border:3px solid var(--surface-1);block-size:var(--thumb-size);inline-size:var(--thumb-size);margin-block-start:var(--thumb-offset);border-radius:50%;background:var(--brand-bg-gradient) fixed;box-shadow:0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color)}@media (prefers-reduced-motion: no-preference){input[type=range]::-webkit-slider-thumb{transition:box-shadow .1s ease}}input[type=range]::-moz-range-thumb{appearance:none;cursor:ew-resize;border:3px solid var(--surface3);block-size:var(--thumb-size);inline-size:var(--thumb-size);margin-block-start:var(--thumb-offset);border-radius:50%;background:var(--brand-bg-gradient) fixed;box-shadow:0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color)}@media (prefers-reduced-motion: no-preference){input[type=range]::-moz-range-thumb{transition:box-shadow .1s ease}}input[type=range]:is(:hover,:active){--thumb-highlight-size: 10px}.media-query-chart{display:flex;gap:var(--size-2);flex-flow:row wrap}.media-query-chart>div{place-items:center;display:inline-flex;flex-flow:column nowrap;border:1px solid var(--surface-2);padding:var(--size-3);gap:var(--size-1)}.media-query-chart svg{stroke:none;fill:var(--indigo-5)}.hidden{display:none}.slide-fade-combo{--animation-slide-down-fade-out: var(--animation-fade-out) forwards, var(--animation-slide-out-down);animation-duration:1s!important}@media (prefers-reduced-motion: no-preference){.slide-fade-combo{animation-timing-function:var(--ease-3),var(--ease-squish-3)!important}}.shake-fade-combo{--animation-slide-left-fade-in-shake-y: var(--animation-shake-y), var(--animation-fade-in), var(--animation-slide-in-left)}.push-out-combo{--animation-push-out: var(--animation-scale-down), var(--animation-fade-out) }@media (prefers-reduced-motion: no-preference){.push-out-combo{animation-timing-function:var(--ease-squish-4),var(--ease-3)!important}}[data-theme=light]{color-scheme:light;--brand: var(--pink-6);--link: var(--indigo-7);--link-visited: var(--grape-7);--text-1: var(--gray-9);--text-2: var(--gray-7);--surface-1: var(--gray-0);--surface-2: var(--gray-2);--surface-3: var(--gray-3);--surface-4: var(--gray-4);--nav-icon: var(--gray-7);--nav-icon-hover: var(--gray-9);--shadow-color: 220 3% 15%;--shadow-strength: 1% }@media (dynamic-range: high){[data-theme=light]{--link: color(display-p3 0 .5 1);--link-visited: color(display-p3 .6 .2 1) }}[data-theme=dark]{color-scheme:dark;--brand: var(--pink-4);--link: var(--indigo-3);--link-visited: var(--grape-3);--text-1: var(--gray-1);--text-2: var(--gray-2);--surface-1: var(--gray-9);--surface-2: var(--gray-8);--surface-3: var(--gray-7);--surface-4: var(--gray-6);--nav-icon: var(--gray-5);--nav-icon-hover: var(--gray-2);--shadow-strength: 10%;--shadow-color: 220 40% 2%}.theme-toggle{background:none}#moon,#sun{fill:var(--nav-icon);stroke:none}:hover>svg>#moon,:hover>svg>#sun{fill:var(--nav-icon-hover)}#sun{transition:transform .5s var(--ease-4);transform-origin:center center}#sun-beams{--_opacity-dur: .15s;stroke:var(--nav-icon);stroke-width:2px;transform-origin:center center;transition:transform .5s var(--ease-elastic-4),opacity var(--_opacity-dur) var(--ease-3)}:hover>svg>#sun-beams{stroke:var(--nav-icon-hover)}#moon>circle{transition:transform .5s var(--ease-out-3)}[data-theme=light] #sun{transform:scale(.5)}[data-theme=light] #sun-beams{transform:rotate(.25turn);--_opacity-dur: .5s}[data-theme=dark] #moon>circle{transform:translate(-20px)}[data-theme=dark] #sun-beams{opacity:0}@media (max-width: 768px){.md-hidden{display:none}}.started-details{border-radius:var(--radius-conditional-2)}.started-details h6:not(:first-child),.started-details>div:not(:first-child) h6,.started-details>pre:first-of-type{margin-top:var(--size-7)}.started-details>ol{display:grid;padding-inline:0;margin:var(--size-5);gap:var(--size-3)}@media (max-width: 768px){.started-details[open]{margin-inline:calc(var(--size-3) * -1)}}#npm>pre,#cli>pre{margin-block:0}.license{display:flex;gap:var(--size-1)}.license>svg{stroke:none;fill:var(--text-1)}.prevent-justify-item-wrap{white-space:nowrap}