/* the props */ :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,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:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--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:max(.75rem, min(2vw, 1rem));--font-size-fluid-1:max(1rem, min(4vw, 1.5rem));--font-size-fluid-2:max(1.5rem, min(6vw, 2.5rem));--font-size-fluid-3:max(2rem, min(9vw, 3.5rem));--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:max(.5rem, min(1vw, 1rem));--size-fluid-2:max(1rem, min(2vw, 1.5rem));--size-fluid-3:max(1.5rem, min(3vw, 2rem));--size-fluid-4:max(2rem, min(4vw, 3rem));--size-fluid-5:max(4rem, min(5vw, 5rem));--size-fluid-6:max(5rem, min(7vw, 7.5rem));--size-fluid-7:max(7.5rem, min(10vw, 10rem));--size-fluid-8:max(10rem, min(20vw, 15rem));--size-fluid-9:max(15rem, min(30vw, 20rem));--size-fluid-10:max(20rem, min(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;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--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(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,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,.50,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-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-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);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--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%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--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;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--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;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--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;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--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;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--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;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--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;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--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;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--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;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--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;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--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;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--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;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--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;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--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,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left,#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right,#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--gradient-7:linear-gradient(to bottom right,#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left,#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--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% -250%,#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--gradient-18:linear-gradient(0deg,rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg,rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg,rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg,rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg,rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg,rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right,#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--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% 0%,#00c476,10%,#82b0ff,90%,#00c476);--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,#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--gradient-29:radial-gradient(circle at top right,#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left,#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right,#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left,#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%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%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--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)); --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: .050em; --font-letterspacing-3: .075em; --font-letterspacing-4: .150em; --font-letterspacing-5: .500em; --font-letterspacing-6: .750em; --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: max(.75rem, min(2vw, 1rem)); --font-size-fluid-1: max(1rem, min(4vw, 1.5rem)); --font-size-fluid-2: max(1.5rem, min(6vw, 2.5rem)); --font-size-fluid-3: max(2rem, min(9vw, 3.5rem)); --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: max(.5rem, min(1vw, 1rem)); --size-fluid-2: max(1rem, min(2vw, 1.5rem)); --size-fluid-3: max(1.5rem, min(3vw, 2rem)); --size-fluid-4: max(2rem, min(4vw, 3rem)); --size-fluid-5: max(4rem, min(5vw, 5rem)); --size-fluid-6: max(5rem, min(7vw, 7.5rem)); --size-fluid-7: max(7.5rem, min(10vw, 10rem)); --size-fluid-8: max(10rem, min(20vw, 15rem)); --size-fluid-9: max(15rem, min(30vw, 20rem)); --size-fluid-10: max(20rem, min(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; --size-relative-000: -.5ch; --size-relative-00: -.25ch; --size-relative-1: .25ch; --size-relative-2: .5ch; --size-relative-3: 1ch; --size-relative-4: 1.25ch; --size-relative-5: 1.5ch; --size-relative-6: 1.75ch; --size-relative-7: 2ch; --size-relative-8: 3ch; --size-relative-9: 4ch; --size-relative-10: 5ch; --size-relative-11: 7.5ch; --size-relative-12: 10ch; --size-relative-13: 15ch; --size-relative-14: 20ch; --size-relative-15: 30ch; --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(.50, 0, 1, 1); --ease-in-3: cubic-bezier(.70, 0, 1, 1); --ease-in-4: cubic-bezier(.90, 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, .50, 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-out-1: cubic-bezier(.5, .75, .75, 1.25); --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25); --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25); --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25); --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25); --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1); --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1); --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1); --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1); --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1); --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5); --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5); --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5); --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5); --ease-elastic-in-out-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); --ease-elastic-1: var(--ease-elastic-out-1); --ease-elastic-2: var(--ease-elastic-out-2); --ease-elastic-3: var(--ease-elastic-out-3); --ease-elastic-4: var(--ease-elastic-out-4); --ease-elastic-5: var(--ease-elastic-out-5); --ease-squish-1: var(--ease-elastic-in-out-1); --ease-squish-2: var(--ease-elastic-in-out-2); --ease-squish-3: var(--ease-elastic-in-out-3); --ease-squish-4: var(--ease-elastic-in-out-4); --ease-squish-5: var(--ease-elastic-in-out-5); --ease-spring-1: linear( 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 ); --ease-spring-2: linear( 0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1 ); --ease-spring-3: linear( 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1 ); --ease-spring-4: linear( 0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973, 0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%, 0.998 78.9%, 1 ); --ease-spring-5: linear( 0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%, 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1 ); --ease-bounce-1: linear( 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%, 0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879, 0.885, 0.895, 0.908 89.7%, 0.946, 1 ); --ease-bounce-2: linear( 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765, 1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788, 0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954, 0.973, 1 ); --ease-bounce-3: linear( 0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764, 1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672, 0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879, 0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957, 0.96, 0.968, 0.981, 1 ); --ease-bounce-4: linear( 0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81, 0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%, 0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%, 0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1 ); --ease-bounce-5: linear( 0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627, 0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892, 0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%, 0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943, 0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1 ); --layer-1: 1; --layer-2: 2; --layer-3: 3; --layer-4: 4; --layer-5: 5; --layer-important: 2147483647; --shadow-color: 220 3% 15%; --shadow-strength: 1%; --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001; --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%)), var(--inner-shadow-highlight); --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight); --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight); --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight); --ratio-square: 1; --ratio-landscape: 4/3; --ratio-portrait: 3/4; --ratio-widescreen: 16/9; --ratio-ultrawide: 18/5; --ratio-golden: 1.6180/1; --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; --gray-10: #16191d; --gray-11: #0d0f12; --gray-12: #030507; --stone-0: #f8fafb; --stone-1: #f2f4f6; --stone-2: #ebedef; --stone-3: #e0e4e5; --stone-4: #d1d6d8; --stone-5: #b1b6b9; --stone-6: #979b9d; --stone-7: #7e8282; --stone-8: #666968; --stone-9: #50514f; --stone-10: #3a3a37; --stone-11: #252521; --stone-12: #121210; --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; --red-10: #b02525; --red-11: #962020; --red-12: #7d1a1a; --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; --pink-10: #8c1941; --pink-11: #731536; --pink-12: #59102a; --purple-0: #f8f0fc; --purple-1: #f3d9fa; --purple-2: #eebefa; --purple-3: #e599f7; --purple-4: #da77f2; --purple-5: #cc5de8; --purple-6: #be4bdb; --purple-7: #ae3ec9; --purple-8: #9c36b5; --purple-9: #862e9c; --purple-10: #702682; --purple-11: #5a1e69; --purple-12: #44174f; --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; --violet-10: #5235ab; --violet-11: #462d91; --violet-12: #3a2578; --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; --indigo-10: #2f44ad; --indigo-11: #283a94; --indigo-12: #21307a; --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; --blue-10: #145591; --blue-11: #114678; --blue-12: #0d375e; --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; --cyan-10: #095c6b; --cyan-11: #074652; --cyan-12: #053038; --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; --teal-10: #066649; --teal-11: #054d37; --teal-12: #033325; --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; --green-10: #237032; --green-11: #1b5727; --green-12: #133d1b; --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; --lime-10: #4c7a0b; --lime-11: #3c6109; --lime-12: #2c4706; --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; --yellow-10: #b35c00; --yellow-11: #804200; --yellow-12: #663500; --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; --orange-10: #bf400d; --orange-11: #99330b; --orange-12: #802b09; --choco-0: #fff8dc; --choco-1: #fce1bc; --choco-2: #f7ca9e; --choco-3: #f1b280; --choco-4: #e99b62; --choco-5: #df8545; --choco-6: #d46e25; --choco-7: #bd5f1b; --choco-8: #a45117; --choco-9: #8a4513; --choco-10: #703a13; --choco-11: #572f12; --choco-12: #3d210d; --brown-0: #faf4eb; --brown-1: #ede0d1; --brown-2: #e0cab7; --brown-3: #d3b79e; --brown-4: #c5a285; --brown-5: #b78f6d; --brown-6: #a87c56; --brown-7: #956b47; --brown-8: #825b3a; --brown-9: #6f4b2d; --brown-10: #5e3a21; --brown-11: #4e2b15; --brown-12: #422412; --sand-0: #f8fafb; --sand-1: #e6e4dc; --sand-2: #d5cfbd; --sand-3: #c2b9a0; --sand-4: #aea58c; --sand-5: #9a9178; --sand-6: #867c65; --sand-7: #736a53; --sand-8: #5f5746; --sand-9: #4b4639; --sand-10: #38352d; --sand-11: #252521; --sand-12: #121210; --camo-0: #f9fbe7; --camo-1: #e8ed9c; --camo-2: #d2df4e; --camo-3: #c2ce34; --camo-4: #b5bb2e; --camo-5: #a7a827; --camo-6: #999621; --camo-7: #8c851c; --camo-8: #7e7416; --camo-9: #6d6414; --camo-10: #5d5411; --camo-11: #4d460e; --camo-12: #36300a; --jungle-0: #ecfeb0; --jungle-1: #def39a; --jungle-2: #d0e884; --jungle-3: #c2dd6e; --jungle-4: #b5d15b; --jungle-5: #a8c648; --jungle-6: #9bbb36; --jungle-7: #8fb024; --jungle-8: #84a513; --jungle-9: #7a9908; --jungle-10: #658006; --jungle-11: #516605; --jungle-12: #3d4d04; --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-4: linear-gradient(to bottom right,#00F5A0,#00D9F5); --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% 0%, #111, 50%, #222, #111); --gradient-9: conic-gradient(from .5turn at bottom center, lightblue, white); --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% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85); --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% -250%, #374151, #111827, #000); --gradient-17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet); --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% 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% 0%, #00c476, 10%, #82b0ff, 90%, #00c476); --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, rebeccapurple); --gradient-28: conic-gradient(from -90deg at 50% 105%, white, orchid); --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%); --animation-fade-in: fade-in .5s var(--ease-3); --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3); --animation-fade-out: fade-out .5s var(--ease-3); --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3); --animation-scale-up: scale-up .5s var(--ease-3); --animation-scale-down: scale-down .5s var(--ease-3); --animation-slide-out-up: slide-out-up .5s var(--ease-3); --animation-slide-out-down: slide-out-down .5s var(--ease-3); --animation-slide-out-right: slide-out-right .5s var(--ease-3); --animation-slide-out-left: slide-out-left .5s var(--ease-3); --animation-slide-in-up: slide-in-up .5s var(--ease-3); --animation-slide-in-down: slide-in-down .5s var(--ease-3); --animation-slide-in-right: slide-in-right .5s var(--ease-3); --animation-slide-in-left: slide-in-left .5s var(--ease-3); --animation-shake-x: shake-x .75s var(--ease-out-5); --animation-shake-y: shake-y .75s var(--ease-out-5); --animation-spin: spin 2s linear infinite; --animation-ping: ping 5s var(--ease-out-3) infinite; --animation-blink: blink 1s var(--ease-out-3) infinite; --animation-float: float 3s var(--ease-in-out-3) infinite; --animation-bounce: bounce 2s var(--ease-squish-2) infinite; --animation-pulse: pulse 2s var(--ease-out-3) infinite; --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)); /* --brand: your-brand-color-here; */ scrollbar-color: var(--scrollthumb-color) transparent; accent-color: var(--brand, var(--link)); caret-color: var(--brand, var(--link)); color: var(--text-1); background-color: var(--surface-1); --blue-0-hsl: 205 100% 95%; --blue-1-hsl: 206 100% 91%; --blue-2-hsl: 206 100% 82%; --blue-3-hsl: 206 96% 72%; --blue-4-hsl: 207 91% 64%; --blue-5-hsl: 207 86% 57%; --blue-6-hsl: 208 80% 52%; --blue-7-hsl: 208 77% 47%; --blue-8-hsl: 209 77% 43%; --blue-9-hsl: 209 75% 38%; --blue-10-hsl: 209 76% 32%; --blue-11-hsl: 209 75% 27%; --blue-12-hsl: 209 76% 21%; --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%; --gray-10-hsl: 214 14% 10%; --gray-11-hsl: 216 16% 6%; --gray-12-hsl: 210 40% 2%; color-scheme: light; --link: var(--indigo-7); --link-visited: var(--purple-7); --text-1: var(--gray-12); --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); --scrollthumb-color: var(--gray-7); block-size: 100%; font-family: var(--font-sans); line-height: var(--font-lineheight-3); -webkit-text-size-adjust: none /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */} @supports (color: hsl(0 0% 0% / 0)){ :where(html){ --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%) )} } @supports (color: hsla(0 0% 0% / 0)){ :where(html){ --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%) } } @supports (color: hsl(0 0% 0% / 0)){ :where(html){ --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%) )} } @media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467); --shadow-color: 220 40% 2%; --shadow-strength: 25%; --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007; color-scheme: dark; --link: var(--indigo-3); --link-visited: var(--purple-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); --scrollthumb-color: var(--gray-6); --shadow-strength: 10%; --shadow-color: 220 40% 2%}} @keyframes fade-in{to{opacity:1; opacity: 1}} @keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0;filter:brightness(1) blur(20px);opacity:0; opacity: 0; filter: brightness(1) blur(20px); opacity: 0; filter: brightness(1) blur(20px)}10%{filter:brightness(2) blur(10px);opacity:1;filter:brightness(.5) blur(10px);opacity:1; opacity: 1; filter: brightness(2) blur(10px); opacity: 1; filter: brightness(0.5) blur(10px)}to{filter:brightness(1) blur(0);opacity:1;filter:brightness(1) blur(0);opacity:1}} @keyframes fade-out{to{opacity:0; opacity: 0}} @keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0;filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1;filter:brightness(.5) blur(10px);opacity:1; opacity: 1; filter: brightness(2) blur(10px); opacity: 1; filter: brightness(0.5) blur(10px)}0%{filter:brightness(1) blur(0);opacity:1;filter:brightness(1) blur(0);opacity:1; opacity: 1; filter: brightness(1) blur(0); opacity: 1; filter: brightness(1) blur(0)}} @keyframes scale-up{to{transform:scale(1.25); transform: scale(1.25)}} @keyframes scale-down{to{transform:scale(.75); transform: scale(.75)}} @keyframes slide-out-up{to{transform:translateY(-100%); transform: translateY(-100%)}} @keyframes slide-out-down{to{transform:translateY(100%); transform: translateY(100%)}} @keyframes slide-out-right{to{transform:translateX(100%); transform: translateX(100%)}} @keyframes slide-out-left{to{transform:translateX(-100%); transform: translateX(-100%)}} @keyframes slide-in-up{0%{transform:translateY(100%)}} @keyframes slide-in-down{0%{transform:translateY(-100%)}} @keyframes slide-in-right{0%{transform:translateX(-100%)}} @keyframes slide-in-left{0%{transform:translateX(100%)}} @keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%); transform: translateX(-5%)}40%{transform:translateX(5%); transform: translateX(5%)}60%{transform:translateX(-5%); transform: translateX(-5%)}80%{transform:translateX(5%); transform: translateX(5%)}} @keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%); transform: translateY(-5%)}40%{transform:translateY(5%); transform: translateY(5%)}60%{transform:translateY(-5%); transform: translateY(-5%)}80%{transform:translateY(5%); transform: translateY(5%)}} @keyframes spin{to{transform:rotate(1turn); transform: rotate(1turn)}} @keyframes ping{90%,to{opacity:0;transform:scale(2)}} @keyframes blink{0%,to{opacity:1}50%{opacity:.5; opacity: .5}} @keyframes float{50%{transform:translateY(-25%); transform: translateY(-25%)}} @keyframes bounce{25%{transform:translateY(-20%); transform: translateY(-20%)}40%{transform:translateY(-3%); transform: translateY(-3%)}0%,60%,to{transform:translateY(0)}} @keyframes pulse{50%{transform:scale(.9); transform: scale(.9,.9)}} @media (prefers-color-scheme:dark){@keyframes fade-in-bloom{}} @media (prefers-color-scheme:dark){@keyframes fade-out-bloom{}} /* optional imports that use the props */ @media (prefers-color-scheme: dark) { } @keyframes fade-in { } @keyframes fade-in-bloom { 100% { opacity: 1; filter: brightness(1) blur(0); opacity: 1; filter: brightness(1) blur(0) } } @keyframes fade-out { } @keyframes fade-out-bloom { 100% { opacity: 0; filter: brightness(1) blur(20px); opacity: 0; filter: brightness(1) blur(20px) } } @keyframes scale-up { } @keyframes scale-down { } @keyframes slide-out-up { } @keyframes slide-out-down { } @keyframes slide-out-right { } @keyframes slide-out-left { } @keyframes slide-in-up { from { transform: translateY(100%) } } @keyframes slide-in-down { from { transform: translateY(-100%) } } @keyframes slide-in-right { from { transform: translateX(-100%) } } @keyframes slide-in-left { from { transform: translateX(100%) } } @keyframes shake-x { 0%, 100% { transform: translateX(0%) } } @keyframes shake-y { 0%, 100% { transform: translateY(0%) } } @keyframes spin { } @keyframes ping { 90%, 100% { transform: scale(2); opacity: 0; } } @keyframes blink { 0%, 100% { opacity: 1 } } @keyframes float { } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0) } } @keyframes pulse { } @media (prefers-color-scheme: dark) { @keyframes fade-in-bloom { } } @media (prefers-color-scheme: dark) { @keyframes fade-out-bloom { } } @media (dynamic-range: high) { @supports (color: color(display-p3 0 0 0)) { :where(html) { --link: rgb(0, 109, 247); --link-visited: rgb(164, 54, 255); } @media (color-gamut: p3){ :where(html) { --link: color(display-p3 .1 .4 1); --link-visited: color(display-p3 .6 .2 1); } } } } :where(html) :where(dialog) { background-color: var(--surface-1); } :where(html) :where(button,.btn) { --_highlight: var(--_highlight-light); --_bg: var(--_bg-light); --_ink-shadow: var(--_ink-shadow-light); } :where(html) :where(button,.btn) :where([type="reset"]) { --_text: var(--red-6); --_border: var(--red-3); } :where(html) [disabled]:where(button,input[type="button"],.btn) { --_text: var(--gray-6); } :where(html) [disabled]:where(button,input[type="submit"],.btn) { --_text: var(--gray-6); } :where(html) [disabled]:where(button,input[type="reset"],.btn) { --_text: var(--gray-6); } :where(html) :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) { background-color: var(--surface-2); } @media (prefers-color-scheme: dark) { } :where(a[href]) { color: var(--brand, var(--link)); } :where(a[href]):where(:visited) { color: var(--link-visited); } :focus-visible { outline-color: var(--brand, var(--link)); } *, ::before, ::after { box-sizing: border-box; } :where(:not(dialog)) { margin: 0; } :where(:not(fieldset, progress, meter)) { border-width: 0; border-style: solid; background-origin: border-box; background-repeat: no-repeat; } @media (prefers-reduced-motion: no-preference) { :where(html) { scroll-behavior: smooth; } } @media (prefers-reduced-motion: no-preference) { :where(: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%; } :where(h1, h2, h3, h4, h5, h6) { line-height: var(--font-lineheight-1); font-weight: var(--font-weight-9); text-wrap: balance; } :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; } @supports (-moz-appearance: none) { :where(a, u, ins, abbr) { text-underline-offset: 2px; } } :where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"])) { cursor: pointer; } :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } :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(--purple-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; } ::placeholder { color: var(--gray-7); opacity: .75; } :where(input:not([type="range"]), textarea) { padding-inline: var(--size-2); padding-block: var(--size-1); } :where(select) { padding-inline: var(--size-relative-4) 0; padding-block: .75ch; } :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) { background-color: var(--surface-2); border-radius: var(--radius-2); } :where(textarea) { resize: vertical } :where(input[type="checkbox"], input[type="radio"]) { block-size: var(--size-3); inline-size: var(--size-3); } :where(svg: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; writing-mode: lr; direction: ltr; } :where(:not(pre) > code) { padding: var(--size-1) var(--size-2); background: var(--surface-2); border-radius: var(--radius-2); writing-mode: lr; } :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); text-wrap: pretty; } :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); text-wrap: balance; } :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); border: var(--border-size-1) solid var(--surface-4); } :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(dialog) { background-color: var(--surface-1); color: inherit; border-radius: var(--radius-3); box-shadow: var(--shadow-6); } :where(dialog)::backdrop { backdrop-filter: blur(25px); } :where(html:has(dialog[open])) { overflow: hidden; } :where(menu) { padding-inline-start: 0; display: flex; gap: var(--size-3); } :where(sup) { font-size: .5em; } :where(table) { width: fit-content; border: 1px solid var(--surface-2); background: var(--surface-2); border-radius: var(--radius-3); --nice-inner-radius: calc(var(--radius-3) - 2px); } :where(table:not(:has(tfoot)) tr:last-child td:first-child) { border-bottom-left-radius: var(--nice-inner-radius); } :where(table:not(:has(tfoot)) tr:last-child td:last-child) { border-bottom-right-radius: var(--nice-inner-radius); } :where(table thead th:first-child) { border-top-left-radius: var(--nice-inner-radius); } :where(table thead th:last-child) { border-top-right-radius: var(--nice-inner-radius); } :where(tfoot th:first-of-type) { border-end-start-radius: var(--nice-inner-radius); } :where(tfoot th:last-of-type) { border-end-end-radius: var(--nice-inner-radius); } :where(th) { color: var(--text-1); background-color: var(--surface-2); } :where(table a:not(.does-not-exist):focus-visible) { outline-offset: -2px; } :where(table button:not(.does-not-exist):focus-visible) { outline-offset: -2px; } :where(table [contenteditable]:focus-visible) { outline-offset: -2px; } :where(td) { background: var(--surface-1); max-inline-size: var(--size-content-2); text-wrap: pretty; } :where(td,th) { text-align: left; padding: var(--size-2); } :where(td:not([align])) { text-align: center; } :where(th:not([align])) { text-align: center; } :where(thead) { border-collapse: collapse; } :where(table tr:hover td), :where(tbody tr:nth-child(even):hover td) { background-color: var(--gray-10); } @media (prefers-color-scheme: light) { :where(table tr:hover td), :where(tbody tr:nth-child(even):hover td) { background-color: white; } } :where(table > caption) { margin: var(--size-3); } :where(tfoot button) { padding-block: var(--size-1); padding-inline: var(--size-3); } @media (prefers-color-scheme: dark) { :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) { background-color: hsl(210 11% 10%); } :where(dialog) { background-color: var(--surface-2); } ::placeholder { color: var(--gray-6); } } :where( [data-theme="light"], .light, .light-theme ) { color-scheme: light; --link: var(--indigo-7); --link-visited: var(--purple-7); --text-1: var(--gray-12); --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); --scrollthumb-color: var(--gray-7); --shadow-color: 220 3% 15%; --shadow-strength: 1%; } @media (dynamic-range: high) { @supports (color: color(display-p3 0 0 0)) { :where( [data-theme="light"], .light, .light-theme ) { --link: rgb(0, 109, 247); --link-visited: rgb(164, 54, 255); } @media (color-gamut: p3){ :where( [data-theme="light"], .light, .light-theme ) { --link: color(display-p3 .1 .4 1); --link-visited: color(display-p3 .6 .2 1); } } } } :where( [data-theme="light"], .light, .light-theme ) :where(dialog) { background-color: var(--surface-1); } :where( [data-theme="light"], .light, .light-theme ) :where(button,.btn) { --_highlight: var(--_highlight-light); --_bg: var(--_bg-light); --_ink-shadow: var(--_ink-shadow-light); } :where( [data-theme="light"], .light, .light-theme ) :where(button,.btn):where([type="reset"]) { --_text: var(--red-6); --_border: var(--red-3); } :where( .light, .light-theme , [data-theme="light"]) [disabled]:where(button,input[type="button"],.btn) { --_text: var(--gray-6); } :where( .light, .light-theme , [data-theme="light"]) [disabled]:where(button,input[type="submit"],.btn) { --_text: var(--gray-6); } :where( .light, .light-theme , [data-theme="light"]) [disabled]:where(button,input[type="reset"],.btn) { --_text: var(--gray-6); } :where( [data-theme="light"], .light, .light-theme ) :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) { background-color: var(--surface-2); } :where( [data-theme="dark"], .dark, .dark-theme ) { color-scheme: dark; --link: var(--indigo-3); --link-visited: var(--purple-3); --text-1: var(--gray-0); --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); --scrollthumb-color: var(--gray-6); --shadow-strength: 10%; --shadow-color: 220 40% 2%; } :where( [data-theme="dark"], .dark, .dark-theme ) :where(dialog) { background-color: var(--surface-2); } :where( [data-theme="dark"], .dark, .dark-theme ) :where(button,.btn) { --_highlight: var(--_highlight-dark); --_bg: var(--_bg-dark); --_ink-shadow: var(--_ink-shadow-dark); } :where( [data-theme="dark"], .dark, .dark-theme ) :where(button,.btn):where([type="reset"]) { --_text: var(--red-2); --_border: var(--surface-3); } :where( .dark, .dark-theme , [data-theme="dark"]) [disabled]:where(button,input[type="button"],.btn) { --_text: var(--gray-5); } :where( .dark, .dark-theme , [data-theme="dark"]) [disabled]:where(button,input[type="submit"],.btn) { --_text: var(--gray-5); } :where( .dark, .dark-theme , [data-theme="dark"]) [disabled]:where(button,input[type="reset"],.btn) { --_text: var(--gray-5); } :where( [data-theme="dark"], .dark, .dark-theme ) :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) { background-color: hsl(210deg 11% 10%); } :where( [data-theme="dark"], .dark, .dark-theme ) :where([type="submit"]), :where( [data-theme="dark"], .dark, .dark-theme ) :where(form button:not([type="button"])), :where( [data-theme="dark"], .dark, .dark-theme ) :where([type="reset"]), :where( [data-theme="dark"], .dark, .dark-theme ) :where([disabled]) { --_bg: var(--surface-1); } /* TODO buttons exists on themes variations */ :where(button,input[type="button"],.btn) { --_accent: initial /* your color */; --_text: initial /* your text color */; --_size: initial /* your size */; --_bg-light: white; --_bg-dark: var(--surface-3); --_bg: var(--_bg-light); --_border: var(--surface-3); --_highlight-size: 0; --_highlight-light: hsl(var(--gray-5-hsl) / 25%); --_highlight-dark: hsl(var(--gray-12-hsl) / 25%); --_highlight: var(--_highlight-light); --_ink-shadow-light: 0 1px 0 var(--gray-3); --_ink-shadow-dark: 0 1px 0 var(--surface-1); --_ink-shadow: var(--_ink-shadow-light); --_icon-size: var(--size-relative-7); --_icon-color: var(--_accent, var(--link)); font-size: var(--_size); background: var(--_bg); color: var(--_text); border: var(--border-size-2) solid var(--_border); box-shadow: var(--shadow-2), 0 1px var(--surface-3), 0 0 0 var(--_highlight-size) var(--_highlight) ; text-shadow: var(--_ink-shadow); display: inline-flex; justify-content: center; align-items: center; text-align: center; gap: var(--size-2); font-weight: var(--font-weight-7); border-radius: var(--radius-2); padding-block: .75ch; padding-inline: var(--size-relative-6); user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; transition: border-color .5s var(--ease-3); } :where(button,input[type="submit"],.btn) { --_accent: initial /* your color */; --_text: initial /* your text color */; --_size: initial /* your size */; --_bg-light: white; --_bg-dark: var(--surface-3); --_bg: var(--_bg-light); --_border: var(--surface-3); --_highlight-size: 0; --_highlight-light: hsl(var(--gray-5-hsl) / 25%); --_highlight-dark: hsl(var(--gray-12-hsl) / 25%); --_highlight: var(--_highlight-light); --_ink-shadow-light: 0 1px 0 var(--gray-3); --_ink-shadow-dark: 0 1px 0 var(--surface-1); --_ink-shadow: var(--_ink-shadow-light); --_icon-size: var(--size-relative-7); --_icon-color: var(--_accent, var(--link)); font-size: var(--_size); background: var(--_bg); color: var(--_text); border: var(--border-size-2) solid var(--_border); box-shadow: var(--shadow-2), 0 1px var(--surface-3), 0 0 0 var(--_highlight-size) var(--_highlight) ; text-shadow: var(--_ink-shadow); display: inline-flex; justify-content: center; align-items: center; text-align: center; gap: var(--size-2); font-weight: var(--font-weight-7); border-radius: var(--radius-2); padding-block: .75ch; padding-inline: var(--size-relative-6); user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; transition: border-color .5s var(--ease-3); } :where(button,input[type="reset"],.btn) { --_accent: initial /* your color */; --_text: initial /* your text color */; --_size: initial /* your size */; --_bg-light: white; --_bg-dark: var(--surface-3); --_bg: var(--_bg-light); --_border: var(--surface-3); --_highlight-size: 0; --_highlight-light: hsl(var(--gray-5-hsl) / 25%); --_highlight-dark: hsl(var(--gray-12-hsl) / 25%); --_highlight: var(--_highlight-light); --_ink-shadow-light: 0 1px 0 var(--gray-3); --_ink-shadow-dark: 0 1px 0 var(--surface-1); --_ink-shadow: var(--_ink-shadow-light); --_icon-size: var(--size-relative-7); --_icon-color: var(--_accent, var(--link)); font-size: var(--_size); background: var(--_bg); color: var(--_text); border: var(--border-size-2) solid var(--_border); box-shadow: var(--shadow-2), 0 1px var(--surface-3), 0 0 0 var(--_highlight-size) var(--_highlight) ; text-shadow: var(--_ink-shadow); display: inline-flex; justify-content: center; align-items: center; text-align: center; gap: var(--size-2); font-weight: var(--font-weight-7); border-radius: var(--radius-2); padding-block: .75ch; padding-inline: var(--size-relative-6); user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; transition: border-color .5s var(--ease-3); } @media (prefers-color-scheme: dark) { :where(button,input[type="button"],.btn) { --_highlight: var(--_highlight-dark); --_bg: var(--_bg-dark); --_ink-shadow: var(--_ink-shadow-dark); } :where(button,input[type="submit"],.btn) { --_highlight: var(--_highlight-dark); --_bg: var(--_bg-dark); --_ink-shadow: var(--_ink-shadow-dark); } :where(button,input[type="reset"],.btn) { --_highlight: var(--_highlight-dark); --_bg: var(--_bg-dark); --_ink-shadow: var(--_ink-shadow-dark); } :where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button { --_highlight: var(--_highlight-dark); --_bg: var(--_bg-dark); --_ink-shadow: var(--_ink-shadow-dark); } } @media (prefers-reduced-motion: no-preference) { :where(button,input[type="button"],.btn) { transition: border-color .5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4); } :where(button,input[type="submit"],.btn) { transition: border-color .5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4); } :where(button,input[type="reset"],.btn) { transition: border-color .5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4); } :where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button { transition: border-color .5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4); } } /* disabled */ [disabled]:where(button,input[type="button"],.btn) { --_bg: none; --_text: var(--gray-6); cursor: not-allowed; box-shadow: var(--shadow-1); } [disabled]:where(button,input[type="submit"],.btn) { --_bg: none; --_text: var(--gray-6); cursor: not-allowed; box-shadow: var(--shadow-1); } [disabled]:where(button,input[type="reset"],.btn) { --_bg: none; --_text: var(--gray-6); cursor: not-allowed; box-shadow: var(--shadow-1); } @media (prefers-color-scheme: dark) { [disabled]:where(button,input[type="button"],.btn) { --_text: var(--gray-5); } [disabled]:where(button,input[type="submit"],.btn) { --_text: var(--gray-5); } [disabled]:where(button,input[type="reset"],.btn) { --_text: var(--gray-5); } } /* pressing */ :where(button,input[type="button"],.btn):where(:not(:active):hover) { --_highlight-size: var(--size-2); transition-duration: .25s; } :where(button,input[type="submit"],.btn):where(:not(:active):hover) { --_highlight-size: var(--size-2); transition-duration: .25s; } :where(button,input[type="reset"],.btn):where(:not(:active):hover) { --_highlight-size: var(--size-2); transition-duration: .25s; } /* icons */ :where(button,input[type="button"],.btn) > :where(svg) { flex-shrink: 0; filter: drop-shadow(var(--_ink-shadow)); block-size: var(--_icon-size); inline-size: var(--_icon-size); } :where(button,input[type="submit"],.btn) > :where(svg) { flex-shrink: 0; filter: drop-shadow(var(--_ink-shadow)); block-size: var(--_icon-size); inline-size: var(--_icon-size); } :where(button,input[type="reset"],.btn) > :where(svg) { flex-shrink: 0; filter: drop-shadow(var(--_ink-shadow)); block-size: var(--_icon-size); inline-size: var(--_icon-size); } :where(button,input[type="button"],.btn) > :where(svg > *) { stroke: var(--_icon-color); stroke-width: var(--border-size-2); } :where(button,input[type="submit"],.btn) > :where(svg > *) { stroke: var(--_icon-color); stroke-width: var(--border-size-2); } :where(button,input[type="reset"],.btn) > :where(svg > *) { stroke: var(--_icon-color); stroke-width: var(--border-size-2); } /* adaptive indigo text */ :where([type="submit"], form button:not([type],[disabled])) { --_text: var(--_accent, var(--link)); } /* red reset */ :where([type="reset"]) { --_text: var(--red-6); --_border: var(--red-3); } :where([type="reset"]):focus-visible { outline-color: var(--red-6); } @media (prefers-color-scheme: dark) { :where([type="reset"]) { --_text: var(--red-2); --_border: var(--surface-3); } } /* submit, form > button, reset matching hover border color */ :where( form button:not([type]),[type="submit"], [type="reset"]):hover:not([disabled]) { --_border: currentColor; } :where( form button:not([type]),[type="submit"], [type="reset"]):focus-visible:not([disabled]) { --_border: currentColor; } /* file input */ :where(input[type="file"]) { max-inline-size: 100%; padding: 0; cursor: auto; cursor: initial; align-self: flex-start; border-radius: var(--radius-2); border: var(--border-size-1) solid var(--surface-2); box-shadow: var(--inner-shadow-4); color: var(--text-2); } :where(input[type="file"])::-webkit-file-upload-button, :where(input[type="file"])::file-selector-button { margin-inline-end: var(--size-relative-6); cursor: pointer; --_accent: initial /* your color */; --_text: initial /* your text color */; --_size: initial /* your size */; --_bg-light: white; --_bg-dark: var(--surface-3); --_bg: var(--_bg-light); --_border: var(--surface-3); --_highlight-size: 0; --_highlight-light: hsl(var(--gray-5-hsl) / 25%); --_highlight-dark: hsl(var(--gray-12-hsl) / 25%); --_highlight: var(--_highlight-light); --_ink-shadow-light: 0 1px 0 var(--gray-3); --_ink-shadow-dark: 0 1px 0 var(--surface-1); --_ink-shadow: var(--_ink-shadow-light); --_icon-size: var(--size-relative-7); --_icon-color: var(--_accent, var(--link)); font-size: var(--_size); background: var(--_bg); color: var(--_text); border: var(--border-size-2) solid var(--_border); box-shadow: var(--shadow-2), 0 1px var(--surface-3), 0 0 0 var(--_highlight-size) var(--_highlight) ; text-shadow: var(--_ink-shadow); display: inline-flex; justify-content: center; align-items: center; text-align: center; gap: var(--size-2); font-weight: var(--font-weight-7); border-radius: var(--radius-2); padding-block: .75ch; padding-inline: var(--size-relative-6); user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; transition: border-color .5s var(--ease-3); } /* special dark theme styles */ @media (prefers-color-scheme: dark) { :where([type="submit"]), :where(form button:not([type="button"])), :where([type="reset"]), :where([disabled]) { --_bg: var(--surface-1); } } /* nav */ header { display: grid; gap: var(--size-2); } nav { padding: var(--size-1) var(--size-2); background-color: var(--surface-2); 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(--link); } nav > a[href="/"] { margin-inline-end: auto; display: inline-flex; align-items: center; gap: var(--size-2); } nav > a[href="/"]:hover { -webkit-text-decoration: none; text-decoration: none; } nav > a[href="/"] > svg { inline-size: var(--size-9); } @media (max-width: 479.98px) { nav > a[href="#getting-started"] { display: none; } } .github-icon { fill: var(--nav-icon); stroke: none; } :hover > .github-icon { fill: var(--nav-icon-hover); } /* no way out of this duplication afaik */ [data-theme="light"] { --nav-icon: var(--gray-7); --nav-icon-hover: var(--gray-9); } [data-theme="dark"] { --nav-icon: var(--gray-5); --nav-icon-hover: var(--gray-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 0.5s var(--ease-4); transform-origin: center center; } #sun-beams { --_opacity-dur: 0.15s; stroke: var(--nav-icon); stroke-width: 2px; transform-origin: center center; transition: transform 0.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 0.5s var(--ease-out-3); } [data-theme="light"] #sun { transform: scale(0.5); } [data-theme="light"] #sun-beams { transform: rotateZ(0.25turn); --_opacity-dur: 0.5s; } [data-theme="dark"] #moon > circle { transform: translateX(-20px); } [data-theme="dark"] #sun-beams { opacity: 0; } /* logo */ .edc-icon { height: calc(var(--font-size-2) * 3.3); } .edc-logo { display: grid; font-weight: var(--font-weight-3); font-size: var(--font-size-2); color: var(--indigo-3); letter-spacing: var(--font-letterspacing-2); } @media (max-width: 359.98px) { .edc-logo { display: none; } } [data-theme="light"] .edc-logo { color: var(--indigo-7); } .edc-logo > span { line-height: var(--font-lineheight-1); text-transform: uppercase; font-weight: var(--font-weight-3); } .edc-logo > span::first-letter, .edc-logo > span:first-of-type { font-weight: var(--font-weight-7); } .hero { display: flex; flex-direction: column; gap: var(--size-5); } .hero header { display: flex; gap: 2rem; } .hero header h1 { /* font-size: var(--font-size-3); */ /* opacity: 0; */ /* aopacity: 0; */ animation: var(--animation-fade-in) forwards, var(--animation-slide-in-up) forwards; animation-timing-function: var(--ease-out-5); animation-delay: 0.5s; } .hero article { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; } .multi-format > article { display: flex; align-items: center; } .multi-format > article div { flex: 1; } .multi-format > article div svg { width: 100%; } .multi-format p { font-size: var(--font-size-3); inline-size: 100%; } [data-theme="light"] :root { --brand-bg-gradient: linear-gradient( to bottom, var(--purple-6), var(--violet-6), var(--indigo-6), var(--cyan-6) ); } [data-theme="dark"] :root { --pagefind-ui-primary: yellow; --pagefind-ui-text: #eeeeee; --pagefind-ui-background: green; --pagefind-ui-border: #152028; --pagefind-ui-tag: #152028; } main { margin: 0 auto; min-height: 100vh; max-width: 80ch; } /* serach pagefind */ .pagefind-ui__drawer { position: absolute; }