Commit
Author: Adam Argyle [atom@argyleink.com]
Hash: 192a5a06beafbb9219ad1bf271dede6fcd79deec
Timestamp: Fri, 17 Sep 2021 05:17:43 +0000 (3 years ago)

+68 -70 +/-13 browse
wrapped in where, new build
1diff --git a/easings.css b/easings.css
2index 358945a..ef3c071 100644
3--- a/easings.css
4+++ b/easings.css
5 @@ -1 +1 @@
6- 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);--easein-1:cubic-bezier(.25,0,1,1);--easein-2:cubic-bezier(.50,0,1,1);--easein-3:cubic-bezier(.70,0,1,1);--easein-4:cubic-bezier(.90,0,1,1);--easein-5:cubic-bezier(1,0,1,1);--easeout-1:cubic-bezier(0,0,.75,1);--easeout-2:cubic-bezier(0,0,.50,1);--easeout-3:cubic-bezier(0,0,.3,1);--easeout-4:cubic-bezier(0,0,.1,1);--easeout-5:cubic-bezier(0,0,0,1);--easeinout-1:cubic-bezier(.1,0,.9,1);--easeinout-2:cubic-bezier(.3,0,.7,1);--easeinout-3:cubic-bezier(.5,0,.5,1);--easeinout-4:cubic-bezier(.7,0,.3,1);--easeinout-5:cubic-bezier(.9,0,.1,1);--ease-elastic:cubic-bezier(.2,.9,.4,1.25);--ease-squish:cubic-bezier(0.68,-0.55,0.27,1.55);--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)}
7\ No newline at end of file
8+ 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(.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-inout-1:cubic-bezier(.1,0,.9,1);--ease-inout-2:cubic-bezier(.3,0,.7,1);--ease-inout-3:cubic-bezier(.5,0,.5,1);--ease-inout-4:cubic-bezier(.7,0,.3,1);--ease-inout-5:cubic-bezier(.9,0,.1,1);--ease-elastic:cubic-bezier(.2,.9,.4,1.25);--ease-squish:cubic-bezier(0.68,-0.55,0.27,1.55);--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)}
9\ No newline at end of file
10 diff --git a/package.json b/package.json
11index 965a041..610b8dd 100644
12--- a/package.json
13+++ b/package.json
14 @@ -2,7 +2,7 @@
15 "name": "open-props",
16 "author": "Adam Argyle",
17 "license": "ISC",
18- "version": "0.0.10",
19+ "version": "0.0.11",
20 "repository": {
21 "type": "git",
22 "url": "https://github.com/argyleink/open-props"
23 diff --git a/props.css b/props.css
24index c2e2c85..a866d46 100644
25--- a/props.css
26+++ b/props.css
27 @@ -1 +1 @@
28- 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-thin:100;--font-semilight:200;--font-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--font-black:900;--font-leading-00:.95;--font-leading-0:1.1;--font-leading-1:1.25;--font-leading-2:1.375;--font-leading-3:1.5;--font-leading-4:1.75;--font-leading-5:2;--font-relative-leading-1:calc(1rem + 1.1ch);--font-relative-leading-2:calc(1rem + 1.25ch);--font-relative-leading-3:calc(1rem + 1.5ch);--font-relative-leading-4:calc(1rem + 2ch);--font-relative-leading-5:calc(1rem + 2.5ch);--font-relative-leading-6:calc(1rem + 3ch);--font-tracking-00:-.05em;--font-tracking-1:.025em;--font-tracking-2:.025em;--font-tracking-3:.05em;--font-tracking-4:.1em;--font-size-000:.5rem;--font-size-00:.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-00:clamp(.75rem,1.5vw,1rem);--font-size-fluid-1:clamp(1rem,2vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,3vw,2.5rem);--font-size-fluid-3:clamp(2rem,4vw,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:2.5rem;--size-9:3rem;--size-10:3.5rem;--size-11:4rem;--size-12:5rem;--size-13:7rem;--size-14:9rem;--size-15:10rem;--size-fluid-1:clamp(.5rem,1vw,.5 * 1.5rem);--size-fluid-2:clamp(.75rem,1.5vw,.75 * 1.5rem);--size-fluid-3:clamp(1rem,2vw,1 * 1.5rem);--size-fluid-4:clamp(1.5rem,3vw,1.5 * 1.5rem);--size-fluid-5:clamp(2rem,4vw,2 * 1.5rem);--size-fluid-6:clamp(3rem,6vw,3 * 1.5rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:45rem;--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);--easein-1:cubic-bezier(.25,0,1,1);--easein-2:cubic-bezier(.50,0,1,1);--easein-3:cubic-bezier(.70,0,1,1);--easein-4:cubic-bezier(.90,0,1,1);--easein-5:cubic-bezier(1,0,1,1);--easeout-1:cubic-bezier(0,0,.75,1);--easeout-2:cubic-bezier(0,0,.50,1);--easeout-3:cubic-bezier(0,0,.3,1);--easeout-4:cubic-bezier(0,0,.1,1);--easeout-5:cubic-bezier(0,0,0,1);--easeinout-1:cubic-bezier(.1,0,.9,1);--easeinout-2:cubic-bezier(.3,0,.7,1);--easeinout-3:cubic-bezier(.5,0,.5,1);--easeinout-4:cubic-bezier(.7,0,.3,1);--easeinout-5:cubic-bezier(.9,0,.1,1);--ease-elastic:cubic-bezier(.2,.9,.4,1.25);--ease-squish:cubic-bezier(0.68,-0.55,0.27,1.55);--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);--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%;--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 20px -10px 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%));--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){html{--shadow-strength:35%;--shadow:220 5% 0%}}html{--aspect-box:1;--aspect-landscape:4/3;--aspect-portrait:3/4;--aspect-widescreen:16/9;--aspect-ultrawide:18/5;--golden-ratio: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;--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;--gradient-1:linear-gradient(#091e3a,#2f80ed,#2d9ee0);--gradient-2:linear-gradient(#9400d3,indigo);--gradient-3:linear-gradient(#c84e89,#f15f79);--gradient-4:linear-gradient(#00f5a0,#00d9f5);--gradient-5:linear-gradient(#f7941e,#72c6ef,#00a651);--gradient-6:linear-gradient(#f7941e,#004e8f);--gradient-7:linear-gradient(#72c6ef,#004e8f);--gradient-8:linear-gradient(#fd8112,#0085ca);--gradient-9:linear-gradient(#bf5ae0,#a811da);--gradient-10:linear-gradient(#00416a,#e4e5e6);--gradient-11:linear-gradient(#fbed96,#abecd6);--gradient-12:linear-gradient(#ffe000,#799f0c);--gradient-13:linear-gradient(#f7f8f8,#acbb78);--gradient-14:linear-gradient(#00416a,#799f0c,#ffe000);--gradient-15:linear-gradient(#334d50,#cbcaa5);--gradient-16:linear-gradient(#0052d4,#4364f7,#6fb1fc);--gradient-17:linear-gradient(#5433ff,#20bdff,#a5fecb);--gradient-18:linear-gradient(#799f0c,#acbb78);--gradient-19:linear-gradient(#ffe259,#ffa751);--gradient-20:linear-gradient(#00416a,#e4e5e6);--gradient-21:linear-gradient(#ffe000,#799f0c);--gradient-22:linear-gradient(#acb6e5,#86fde8);--gradient-23:linear-gradient(#536976,#292e49);--gradient-24:linear-gradient(#bbd2c5,#536976,#292e49);--gradient-25:linear-gradient(#b79891,#94716b);--gradient-26:linear-gradient(#9796f0,#fbc7d4);--gradient-27:linear-gradient(#bbd2c5,#536976);--gradient-28:linear-gradient(#076585,#fff);--gradient-29:linear-gradient(#00467f,#a5cc82);--gradient-30:linear-gradient(#000c40,#607d8b);--conic-gradient-1:conic-gradient(from 90deg at bottom right,cyan,#639);--conic-gradient-2:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--conic-gradient-3:conic-gradient(from 90deg at 40%,at -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--conic-gradient-3:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--conic-gradient-4:conic-gradient(at bottom left,#ff1493,cyan);--conic-gradient-5:conic-gradient(from 90deg at 25%,at -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--conic-gradient-5:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--conic-gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--conic-gradient-7:conic-gradient(at top right,lime,cyan);--conic-gradient-8:conic-gradient(from -.5turn at bottom right,#ff1493,cyan,#639);--conic-gradient-9:conic-gradient(at top right,#708090,#fff);--conic-gradient-10:conic-gradient(from .5turn at 50%,at 110%,#fff,orange);--conic-gradient-10:conic-gradient(from .5turn at 50% 110%,#fff,orange);--conic-gradient-11:conic-gradient(from .5turn at center left,lime,cyan);--conic-gradient-12:conic-gradient(from -90deg at 50%,at -25%,blue,#8a2be2);--conic-gradient-12:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--conic-gradient-13:conic-gradient(from .5turn at top right,#8fbc8f,#2f4f4f);--conic-gradient-14:conic-gradient(from 90deg at 50%,at 0%,#111,50%,#222,#111);--conic-gradient-14:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--conic-gradient-15:conic-gradient(at top right,#e0ffff,#add8e6);--conic-gradient-16:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--conic-gradient-17:conic-gradient(from -90deg at 50%,at 105%,#fff,orchid);--conic-gradient-17:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--conic-gradient-18:conic-gradient(from -90deg at 25%,at 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--conic-gradient-18:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--conic-gradient-19:conic-gradient(from -90deg at bottom center,#ffefd5,#ffdab9);--conic-gradient-20:conic-gradient(from -270deg at 50%,at -5%,#ff0,#9acd32);--conic-gradient-20:conic-gradient(from -270deg at 50% -5%,#ff0,#9acd32);--conic-gradient-21:conic-gradient(from -90deg at 75%,at -25%,sienna,purple);--conic-gradient-21:conic-gradient(from -90deg at 75% -25%,sienna,purple);--conic-gradient-22:conic-gradient(from 90deg at 50%,at 125%,#20b2aa,#135da5,#0d0895,indigo,indigo,#0d0895,#135da5,#20b2aa);--conic-gradient-22:conic-gradient(from 90deg at 50% 125%,#20b2aa,#135da5,#0d0895,indigo,indigo,#0d0895,#135da5,#20b2aa);--conic-gradient-23:conic-gradient(from -270deg at 110%,at 50%,#5f9ea0,#006400);--conic-gradient-23:conic-gradient(from -270deg at 110% 50%,#5f9ea0,#006400);--conic-gradient-24:conic-gradient(from -270deg at 75%,at 110%,#f0f,#fffaf0);--conic-gradient-24:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--conic-gradient-25:conic-gradient(from -270deg at 75%,at 110%,#191970,#7cfc00);--conic-gradient-25:conic-gradient(from -270deg at 75% 110%,#191970,#7cfc00);--conic-gradient-26:conic-gradient(from .5turn at bottom left,#ff1493,#639);--conic-gradient-27:conic-gradient(from 90deg at 50%,at 125%,#1f005c,#003298,#005ac6,#007fdc,#00a2d3,#00c4ae,#00e474,#0f0,#1f005c,#003298,#005ac6,#007fdc,#00a2d3,#00c4ae,#00e474,#0f0);--conic-gradient-27:conic-gradient(from 90deg at 50% 125%,#1f005c,#003298,#005ac6,#007fdc,#00a2d3,#00c4ae,#00e474,#0f0,#1f005c,#003298,#005ac6,#007fdc,#00a2d3,#00c4ae,#00e474,#0f0);--conic-gradient-28:conic-gradient(at 0%,at 0%,snow,#fff);--conic-gradient-28:conic-gradient(at 0% 0%,snow,#fff);--conic-gradient-29:conic-gradient(from .5turn at 0%,at 0%,#00c476,10%,#82b0ff,90%,#00c476);--conic-gradient-29:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--conic-gradient-30:conic-gradient(at 125%,at 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--conic-gradient-30:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-slide-up:slide-up .5s var(--ease-3);--animation-slide-down:slide-down .5s var(--ease-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--easeout-3) infinite;--animation-blink:blink 1s var(--easeout-3) infinite}@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes slide-up{0%{transform:translateY(100%)}}@keyframes slide-down{0%{transform:translateY(-100%)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}html{--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--border-radius-1:2px;--border-radius-2:5px;--border-radius-3:1rem;--border-radius-4:2rem;--border-radius-5:4rem;--border-radius-6:8rem;--border-radius-round:1e5px;--border-radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--border-radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%}
29\ No newline at end of file
30+ html{--isLTR:1;--isRTL:-1}html[dir=rtl]{--isLTR:-1;--isRTL:1}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-thin:100;--font-semilight:200;--font-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--font-black:900;--font-leading-00:.95;--font-leading-0:1.1;--font-leading-1:1.25;--font-leading-2:1.375;--font-leading-3:1.5;--font-leading-4:1.75;--font-leading-5:2;--font-relative-leading-1:calc(1rem + 1.1ch);--font-relative-leading-2:calc(1rem + 1.25ch);--font-relative-leading-3:calc(1rem + 1.5ch);--font-relative-leading-4:calc(1rem + 2ch);--font-relative-leading-5:calc(1rem + 2.5ch);--font-relative-leading-6:calc(1rem + 3ch);--font-tracking-00:-.05em;--font-tracking-1:.025em;--font-tracking-2:.025em;--font-tracking-3:.05em;--font-tracking-4:.1em;--font-size-000:.5rem;--font-size-00:.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-00:clamp(.75rem,1.5vw,1rem);--font-size-fluid-1:clamp(1rem,2vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,3vw,2.5rem);--font-size-fluid-3:clamp(2rem,4vw,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:2.5rem;--size-9:3rem;--size-10:3.5rem;--size-11:4rem;--size-12:5rem;--size-13:7rem;--size-14:9rem;--size-15:10rem;--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(3rem,5vw,4rem);--size-fluid-6:clamp(4rem,6vw,5rem);--size-fluid-7:clamp(5rem,7vw,6rem);--size-fluid-8:clamp(6rem,8vw,7rem);--size-fluid-9:clamp(7rem,9vw,8rem);--size-fluid-10:clamp(8rem,10vw,10rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:45rem;--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-inout-1:cubic-bezier(.1,0,.9,1);--ease-inout-2:cubic-bezier(.3,0,.7,1);--ease-inout-3:cubic-bezier(.5,0,.5,1);--ease-inout-4:cubic-bezier(.7,0,.3,1);--ease-inout-5:cubic-bezier(.9,0,.1,1);--ease-elastic:cubic-bezier(.2,.9,.4,1.25);--ease-squish:cubic-bezier(0.68,-0.55,0.27,1.55);--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);--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%;--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 20px -10px 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%));--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){html{--shadow-strength:35%;--shadow:220 5% 0%}}html{--aspect-box:1;--aspect-landscape:4/3;--aspect-portrait:3/4;--aspect-widescreen:16/9;--aspect-ultrawide:18/5;--golden-ratio: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;--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;--gradient-1:linear-gradient(#091e3a,#2f80ed,#2d9ee0);--gradient-2:linear-gradient(#9400d3,indigo);--gradient-3:linear-gradient(#c84e89,#f15f79);--gradient-4:linear-gradient(#00f5a0,#00d9f5);--gradient-5:linear-gradient(#f7941e,#72c6ef,#00a651);--gradient-6:linear-gradient(#f7941e,#004e8f);--gradient-7:linear-gradient(#72c6ef,#004e8f);--gradient-8:linear-gradient(#fd8112,#0085ca);--gradient-9:linear-gradient(#bf5ae0,#a811da);--gradient-10:linear-gradient(#00416a,#e4e5e6);--gradient-11:linear-gradient(#fbed96,#abecd6);--gradient-12:linear-gradient(#ffe000,#799f0c);--gradient-13:linear-gradient(#f7f8f8,#acbb78);--gradient-14:linear-gradient(#00416a,#799f0c,#ffe000);--gradient-15:linear-gradient(#334d50,#cbcaa5);--gradient-16:linear-gradient(#0052d4,#4364f7,#6fb1fc);--gradient-17:linear-gradient(#5433ff,#20bdff,#a5fecb);--gradient-18:linear-gradient(#799f0c,#acbb78);--gradient-19:linear-gradient(#ffe259,#ffa751);--gradient-20:linear-gradient(#00416a,#e4e5e6);--gradient-21:linear-gradient(#ffe000,#799f0c);--gradient-22:linear-gradient(#acb6e5,#86fde8);--gradient-23:linear-gradient(#536976,#292e49);--gradient-24:linear-gradient(#bbd2c5,#536976,#292e49);--gradient-25:linear-gradient(#b79891,#94716b);--gradient-26:linear-gradient(#9796f0,#fbc7d4);--gradient-27:linear-gradient(#bbd2c5,#536976);--gradient-28:linear-gradient(#076585,#fff);--gradient-29:linear-gradient(#00467f,#a5cc82);--gradient-30:linear-gradient(#000c40,#607d8b);--conic-gradient-1:conic-gradient(from 90deg at bottom right,cyan,#639);--conic-gradient-2:conic-gradient(from .5turn at bottom center,#add8e6,#fff);--conic-gradient-3:conic-gradient(from 90deg at 40%,at -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--conic-gradient-3:conic-gradient(from 90deg at 40% -25%,gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--conic-gradient-4:conic-gradient(at bottom left,#ff1493,cyan);--conic-gradient-5:conic-gradient(from 90deg at 25%,at -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--conic-gradient-5:conic-gradient(from 90deg at 25% -10%,#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--conic-gradient-6:conic-gradient(from -90deg at top left,#000,#fff);--conic-gradient-7:conic-gradient(at top right,lime,cyan);--conic-gradient-8:conic-gradient(from -.5turn at bottom right,#ff1493,cyan,#639);--conic-gradient-9:conic-gradient(at top right,#708090,#fff);--conic-gradient-10:conic-gradient(from .5turn at 50%,at 110%,#fff,orange);--conic-gradient-10:conic-gradient(from .5turn at 50% 110%,#fff,orange);--conic-gradient-11:conic-gradient(from .5turn at center left,lime,cyan);--conic-gradient-12:conic-gradient(from -90deg at 50%,at -25%,blue,#8a2be2);--conic-gradient-12:conic-gradient(from -90deg at 50% -25%,blue,#8a2be2);--conic-gradient-13:conic-gradient(from .5turn at top right,#8fbc8f,#2f4f4f);--conic-gradient-14:conic-gradient(from 90deg at 50%,at 0%,#111,50%,#222,#111);--conic-gradient-14:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111);--conic-gradient-15:conic-gradient(at top right,#e0ffff,#add8e6);--conic-gradient-16:conic-gradient(from -135deg at -10% center,orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--conic-gradient-17:conic-gradient(from -90deg at 50%,at 105%,#fff,orchid);--conic-gradient-17:conic-gradient(from -90deg at 50% 105%,#fff,orchid);--conic-gradient-18:conic-gradient(from -90deg at 25%,at 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--conic-gradient-18:conic-gradient(from -90deg at 25% 115%,red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--conic-gradient-19:conic-gradient(from -90deg at bottom center,#ffefd5,#ffdab9);--conic-gradient-20:conic-gradient(from -270deg at 50%,at -5%,#ff0,#9acd32);--conic-gradient-20:conic-gradient(from -270deg at 50% -5%,#ff0,#9acd32);--conic-gradient-21:conic-gradient(from -90deg at 75%,at -25%,sienna,purple);--conic-gradient-21:conic-gradient(from -90deg at 75% -25%,sienna,purple);--conic-gradient-22:conic-gradient(from 90deg at 50%,at 125%,#20b2aa,#135da5,#0d0895,indigo,indigo,#0d0895,#135da5,#20b2aa);--conic-gradient-22:conic-gradient(from 90deg at 50% 125%,#20b2aa,#135da5,#0d0895,indigo,indigo,#0d0895,#135da5,#20b2aa);--conic-gradient-23:conic-gradient(from -270deg at 110%,at 50%,#5f9ea0,#006400);--conic-gradient-23:conic-gradient(from -270deg at 110% 50%,#5f9ea0,#006400);--conic-gradient-24:conic-gradient(from -270deg at 75%,at 110%,#f0f,#fffaf0);--conic-gradient-24:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0);--conic-gradient-25:conic-gradient(from -270deg at 75%,at 110%,#191970,#7cfc00);--conic-gradient-25:conic-gradient(from -270deg at 75% 110%,#191970,#7cfc00);--conic-gradient-26:conic-gradient(from .5turn at bottom left,#ff1493,#639);--conic-gradient-27:conic-gradient(from 90deg at 50%,at 125%,#1f005c,#003298,#005ac6,#007fdc,#00a2d3,#00c4ae,#00e474,#0f0,#1f005c,#003298,#005ac6,#007fdc,#00a2d3,#00c4ae,#00e474,#0f0);--conic-gradient-27:conic-gradient(from 90deg at 50% 125%,#1f005c,#003298,#005ac6,#007fdc,#00a2d3,#00c4ae,#00e474,#0f0,#1f005c,#003298,#005ac6,#007fdc,#00a2d3,#00c4ae,#00e474,#0f0);--conic-gradient-28:conic-gradient(at 0%,at 0%,snow,#fff);--conic-gradient-28:conic-gradient(at 0% 0%,snow,#fff);--conic-gradient-29:conic-gradient(from .5turn at 0%,at 0%,#00c476,10%,#82b0ff,90%,#00c476);--conic-gradient-29:conic-gradient(from .5turn at 0% 0%,#00c476,10%,#82b0ff,90%,#00c476);--conic-gradient-30:conic-gradient(at 125%,at 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--conic-gradient-30:conic-gradient(at 125% 50%,#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-slide-up:slide-up .5s var(--ease-3);--animation-slide-down:slide-down .5s var(--ease-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--easeout-3) infinite;--animation-blink:blink 1s var(--easeout-3) infinite}@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes slide-up{0%{transform:translateY(100%)}}@keyframes slide-down{0%{transform:translateY(-100%)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}html{--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--border-radius-1:2px;--border-radius-2:5px;--border-radius-3:1rem;--border-radius-4:2rem;--border-radius-5:4rem;--border-radius-6:8rem;--border-radius-round:1e5px;--border-radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--border-radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%}
31\ No newline at end of file
32 diff --git a/reset.css b/reset.css
33index 442a16b..2a0f024 100644
34--- a/reset.css
35+++ b/reset.css
36 @@ -1 +1 @@
37- html{--brand:var(--pink-6);--text-1:var(--gray-9);--text-2:var(--gray-8);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);color-scheme:light}@media (dynamic-range:high){html{--brand:color(display-p3 1 0 1)}}@media (prefers-color-scheme:dark){html{--brand:var(--pink-4);--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);color-scheme:dark}}html{background-color:var(--surface-1);color:var(--text-2)}dt,h1,h2,h3,h4,h5,h6{color:var(--text-1)}a[href]{color:var(--brand)}html{accent-color:var(--brand);scrollbar-color:var(--brand) Canvas}::selection{background-color:var(--brand);color:color-contrast(var(--brand))}:focus-visible{outline-color:var(--brand)}::marker{color:var(--brand)}:is(::-webkit-calendar-picker-indicator,::-webkit-clear-button,::-webkit-inner-spin-button,::-webkit-outer-spin-button){color:var(--brand)}*,:after,:before{box-sizing:border-box}*{background-origin:border-box;background-repeat:no-repeat;margin:0}:not(fieldset){border-style:solid;border-width:0}html{block-size:100%;font-family:var(--font-sans);line-height:var(--font-leading-3)}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{min-block-size:100%}h1,h2,h3,h4,h5,h6{font-weight:var(--font-black);line-height:var(--font-relative-leading-2)}h1{font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}h2{font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}h3{font-size:var(--font-size-5)}h4{font-size:var(--font-size-4)}h5{font-size:var(--font-size-3)}dt,h3,h4,h5,h6{max-inline-size:var(--size-header-3)}dl,h6,ol,p,ul{font-size:var(--font-size-2)}[tabindex],a[href],area,button,input,label,select,summary,textarea{cursor:pointer;touch-action:manipulation}a{color:var(--text-1)}a[href]{text-decoration-color:var(--text-1)}a:not(:hover){text-decoration:inherit}button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,svg,video{block-size:auto;max-inline-size:100%}button,input,select,textarea{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}textarea{resize:block}svg{stroke:none;fill:currentColor}svg:not([fill]){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}svg:not([width]){inline-size:var(--size-10)}code,kbd,pre,samp{font-family:var(--font-mono)}:not(pre)>code,kbd{white-space:nowrap}pre{max-inline-size:max-content;min-inline-size:0;white-space:pre}:not(pre)>code{background:var(--surface-2);border-radius:var(--border-radius-2);padding:var(--size-1) var(--size-2)}ol,ul{padding-inline-start:var(--size-8)}li{padding-inline-start:var(--size-2)}dd,figcaption,li{max-inline-size:var(--size-content-2)}p{max-inline-size:var(--size-content-3)}dt,summary{font-weight:var(--font-bold)}dt:not(:first-of-type){margin-block-start:var(--size-5)}small{font-size:max(.5em,var(--font-size-00));max-inline-size:var(--size-content-1)}hr{background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}figure{display:grid;gap:var(--size-2);place-items:center}figure>figcaption{font-size:var(--font-size-1)}blockquote{border-inline-start-width:var(--border-size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}summary{background:var(--surface-3);margin:calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}details,summary{border-radius:var(--border-radius-2)}details{background:var(--surface-2);padding-block:var(--size-2);padding-inline:var(--size-3)}details[open]>summary{border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}
38\ No newline at end of file
39+ :where(html){--brand:var(--pink-6);--text-1:var(--gray-9);--text-2:var(--gray-8);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);color-scheme:light}@media (dynamic-range:high){:where(html){--brand:color(display-p3 1 0 1)}}@media (prefers-color-scheme:dark){:where(html){--brand:var(--pink-4);--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);color-scheme:dark}}:where(html){background-color:var(--surface-1);color:var(--text-2)}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--brand)}:where(html){accent-color:var(--brand);scrollbar-color:var(--brand) Canvas}::selection{background-color:var(--brand);color:color-contrast(var(--brand))}:focus-visible{outline-color:var(--brand)}::marker{color:var(--brand)}:is(::-webkit-calendar-picker-indicator,::-webkit-clear-button,::-webkit-inner-spin-button,::-webkit-outer-spin-button){color:var(--brand)}:where(*,:before,:after){box-sizing:border-box}*{background-origin:border-box;background-repeat:no-repeat;margin:0}:where(:not(fieldset)){border-style:solid;border-width:0}:where(html){block-size:100%;font-family:var(--font-sans);line-height:var(--font-leading-3)}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}:where(body){min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--font-black);line-height:var(--font-relative-leading-2)}: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]){cursor:pointer;touch-action:manipulation}:where(a){margin-block:calc(var(--size-1)*-1);margin-inline:calc(var(--size-1)*-1);padding-block:var(--size-1);padding-inline:var(--size-1)}:where(a):where([href]){text-decoration-color:var(--text-1)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(button){-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select){color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(input){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){padding-block:var(--size-1);padding-inline:var(--size-2)}: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){max-inline-size:max-content;min-inline-size:0;white-space:pre}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--border-radius-2);padding:var(--size-1) var(--size-2)}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--border-radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--border-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-bold)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-00));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--border-radius-2);margin:calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--border-radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details):where([open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border-radius:var(--border-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)}
40\ No newline at end of file
41 diff --git a/sizes.css b/sizes.css
42index ba6a1c7..740b6a1 100644
43--- a/sizes.css
44+++ b/sizes.css
45 @@ -1 +1 @@
46- 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:2.5rem;--size-9:3rem;--size-10:3.5rem;--size-11:4rem;--size-12:5rem;--size-13:7rem;--size-14:9rem;--size-15:10rem;--size-fluid-1:clamp(.5rem,1vw,.5 * 1.5rem);--size-fluid-2:clamp(.75rem,1.5vw,.75 * 1.5rem);--size-fluid-3:clamp(1rem,2vw,1 * 1.5rem);--size-fluid-4:clamp(1.5rem,3vw,1.5 * 1.5rem);--size-fluid-5:clamp(2rem,4vw,2 * 1.5rem);--size-fluid-6:clamp(3rem,6vw,3 * 1.5rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:45rem}
47\ No newline at end of file
48+ 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:2.5rem;--size-9:3rem;--size-10:3.5rem;--size-11:4rem;--size-12:5rem;--size-13:7rem;--size-14:9rem;--size-15:10rem;--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(3rem,5vw,4rem);--size-fluid-6:clamp(4rem,6vw,5rem);--size-fluid-7:clamp(5rem,7vw,6rem);--size-fluid-8:clamp(6rem,8vw,7rem);--size-fluid-9:clamp(7rem,9vw,8rem);--size-fluid-10:clamp(8rem,10vw,10rem);--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:45rem}
49\ No newline at end of file
50 diff --git a/src/extra/brand.css b/src/extra/brand.css
51index 5c2100b..af7561c 100644
52--- a/src/extra/brand.css
53+++ b/src/extra/brand.css
54 @@ -1,6 +1,6 @@
55 @import "theme.css";
56
57- html {
58+ :where(html) {
59 scrollbar-color: var(--brand) Canvas;
60 accent-color: var(--brand);
61 }
62 diff --git a/src/extra/reset.css b/src/extra/reset.css
63index b96f3a6..bd11a28 100644
64--- a/src/extra/reset.css
65+++ b/src/extra/reset.css
66 @@ -1,19 +1,19 @@
67 @import "brand.css";
68
69- *, ::before, ::after { box-sizing: border-box; }
70+ :where(*, ::before, ::after) { box-sizing: border-box; }
71
72 * {
73 background-origin: border-box;
74 background-repeat: no-repeat;
75 margin: 0;
76
77- &:not(fieldset) {
78+ &:where(:not(fieldset)) {
79 border-width: 0;
80 border-style: solid;
81 }
82 }
83
84- html {
85+ :where(html) {
86 block-size: 100%;
87 font-family: var(--font-sans);
88 line-height: var(--font-leading-3);
89 @@ -23,180 +23,178 @@ html {
90 }
91 }
92
93- body { min-block-size: 100% }
94+ :where(body) { min-block-size: 100% }
95
96- h1, h2, h3, h4, h5, h6 {
97+ :where(h1, h2, h3, h4, h5, h6) {
98 line-height: var(--font-relative-leading-2);
99 font-weight: var(--font-black);
100 }
101
102- h1 {
103+ :where(h1) {
104 font-size: var(--font-size-8);
105 max-inline-size: var(--size-header-1);
106 }
107
108- h2 {
109+ :where(h2) {
110 font-size: var(--font-size-6);
111 max-inline-size: var(--size-header-2);
112 }
113
114- h3 { font-size: var(--font-size-5) }
115- h4 { font-size: var(--font-size-4) }
116- h5 { font-size: var(--font-size-3) }
117+ :where(h3) { font-size: var(--font-size-5) }
118+ :where(h4) { font-size: var(--font-size-4) }
119+ :where(h5) { font-size: var(--font-size-3) }
120
121- h3, h4, h5, h6, dt {
122+ :where(h3, h4, h5, h6, dt) {
123 max-inline-size: var(--size-header-3);
124 }
125
126- p, ul, ol, dl, h6 {
127+ :where(p, ul, ol, dl, h6) {
128 font-size: var(--font-size-2);
129 }
130
131- a, u, ins, abbr {
132+ :where(a, u, ins, abbr) {
133 text-underline-offset: 1px;
134 }
135
136- a[href], area, button, input, label[for], select, summary, textarea, [tabindex] {
137+ :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]) {
138 cursor: pointer;
139 touch-action: manipulation;
140 }
141
142- a {
143- color: var(--text-1);
144+ :where(a) {
145 padding-inline: var(--size-1);
146 margin-inline: calc(var(--size-1) * -1);
147 padding-block: var(--size-1);
148 margin-block: calc(var(--size-1) * -1);
149
150- &[href] {
151+ &:where([href]) {
152 text-decoration-color: var(--text-1);
153 }
154
155- &:not(:hover) {
156+ &:where(:not(:hover)) {
157 text-decoration: inherit;
158 }
159 }
160
161- button {
162+ :where(button) {
163 user-select: none;
164 -webkit-tap-highlight-color: transparent;
165 -webkit-touch-callout: none;
166 }
167
168- img, svg, video, canvas, audio, iframe, embed, object {
169+ :where(img, svg, video, canvas, audio, iframe, embed, object) {
170 display: block;
171 vertical-align: middle;
172 }
173
174- img, svg, video {
175+ :where(img, svg, video) {
176 max-inline-size: 100%;
177 block-size: auto;
178 }
179
180- input, button, textarea, select {
181+ :where(input, button, textarea, select) {
182 font: inherit;
183 font-size: inherit;
184 color: inherit;
185 letter-spacing: inherit;
186 }
187
188- input {
189+ :where(input) {
190 padding-inline: var(--size-2);
191 padding-block: var(--size-1);
192 }
193
194- select {
195+ :where(select) {
196 padding-inline: var(--size-2);
197 padding-block: var(--size-1);
198 }
199
200- textarea { resize: block }
201+ :where(textarea) { resize: block }
202
203- input[type="checkbox"],
204- input[type="radio"] {
205+ :where(input[type="checkbox"], input[type="radio"]) {
206 block-size: var(--size-3);
207 inline-size: var(--size-3);
208 }
209
210- svg {
211+ :where(svg) {
212 stroke: none;
213 fill: currentColor;
214
215- &:not([fill]) {
216+ &:where(:not([fill])) {
217 stroke: currentColor;
218 fill: none;
219 stroke-linecap: round;
220 stroke-linejoin: round;
221 }
222
223- &:not([width]) {
224+ &:where(:not([width])) {
225 inline-size: var(--size-10);
226 }
227 }
228
229- code, kbd, samp, pre { font-family: var(--font-mono) }
230- :not(pre) > code, kbd { white-space: nowrap }
231+ :where(code, kbd, samp, pre) { font-family: var(--font-mono) }
232+ :where(:not(pre) > code, kbd) { white-space: nowrap }
233
234- pre {
235+ :where(pre) {
236 white-space: pre;
237 min-inline-size: 0;
238 max-inline-size: max-content;
239 }
240
241- :not(pre) > code {
242+ :where(:not(pre) > code) {
243 padding: var(--size-1) var(--size-2);
244 background: var(--surface-2);
245 border-radius: var(--border-radius-2);
246 }
247
248- kbd, var {
249+ :where(kbd, var) {
250 padding: var(--size-1) var(--size-2);
251 border-width: var(--border-size-1);
252 border-color: var(--surface-4);
253 border-radius: var(--border-radius-2);
254 }
255
256- mark {
257+ :where(mark) {
258 border-radius: var(--border-radius-2);
259 padding-inline: var(--size-1);
260 }
261
262- ol, ul { padding-inline-start: var(--size-8) }
263- li { padding-inline-start: var(--size-2) }
264- li, dd, figcaption { max-inline-size: var(--size-content-2) }
265- p { max-inline-size: var(--size-content-3) }
266- dt, summary { font-weight: var(--font-bold) }
267+ :where(ol, ul) { padding-inline-start: var(--size-8) }
268+ :where(li) { padding-inline-start: var(--size-2) }
269+ :where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
270+ :where(p) { max-inline-size: var(--size-content-3) }
271+ :where(dt, summary) { font-weight: var(--font-bold) }
272
273- dt:not(:first-of-type) {
274+ :where(dt:not(:first-of-type)) {
275 margin-block-start: var(--size-5);
276 }
277
278- small {
279+ :where(small) {
280 font-size: max(.5em, var(--font-size-00));
281 max-inline-size: var(--size-content-1);
282 }
283
284- hr {
285+ :where(hr) {
286 margin-block: var(--size-fluid-5);
287 height: var(--border-size-2);
288 background-color: var(--surface-3);
289 }
290
291- figure {
292+ :where(figure) {
293 display: grid;
294 gap: var(--size-2);
295 place-items: center;
296
297- & > figcaption {
298+ & > :where(figcaption) {
299 font-size: var(--font-size-1);
300 }
301 }
302
303- blockquote, :not(blockquote) > cite {
304+ :where(blockquote, :not(blockquote) > cite) {
305 border-inline-start-width: var(--border-size-3);
306 }
307
308- blockquote {
309+ :where(blockquote) {
310 display: grid;
311 gap: var(--size-3);
312 padding-block: var(--size-3);
313 @@ -204,44 +202,44 @@ blockquote {
314 max-inline-size: var(--size-content-2);
315 }
316
317- :not(blockquote) > cite {
318+ :where(:not(blockquote) > cite) {
319 padding-inline-start: var(--size-2);
320 }
321
322- summary {
323+ :where(summary) {
324 background: var(--surface-3);
325 padding: var(--size-2) var(--size-3);
326 margin: calc(var(--size-3) * -1);
327 border-radius: var(--border-radius-2);
328 }
329
330- details {
331+ :where(details) {
332 padding-inline: var(--size-3);
333 padding-block: var(--size-2);
334 background: var(--surface-2);
335 border-radius: var(--border-radius-2);
336
337- &[open] > summary {
338+ &:where([open] > summary) {
339 margin-bottom: var(--size-2);
340 border-end-start-radius: 0;
341 border-end-end-radius: 0;
342 }
343 }
344
345- fieldset {
346+ :where(fieldset) {
347 border-radius: var(--border-radius-2);
348 }
349
350- del {
351+ :where(del) {
352 background: var(--red-9);
353 color: var(--red-2);
354 }
355
356- ins {
357+ :where(ins) {
358 background: var(--green-9);
359 color: var(--green-1);
360 }
361
362- abbr {
363+ :where(abbr) {
364 text-decoration-color: var(--blue-5);
365 }
366\ No newline at end of file
367 diff --git a/src/extra/theme.css b/src/extra/theme.css
368index cda8140..ec3eb61 100644
369--- a/src/extra/theme.css
370+++ b/src/extra/theme.css
371 @@ -2,15 +2,15 @@
372 @import "theme.light.css";
373 @import "theme.dark.css";
374
375- html {
376+ :where(html) {
377 color: var(--text-2);
378 background-color: var(--surface-1);
379 }
380
381- h1, h2, h3, h4, h5, h6, dt {
382+ :where(h1, h2, h3, h4, h5, h6, dt) {
383 color: var(--text-1);
384 }
385
386- a[href] {
387+ :where(a[href]) {
388 color: var(--brand);
389 }
390\ No newline at end of file
391 diff --git a/src/extra/theme.dark.css b/src/extra/theme.dark.css
392index b001764..fec9275 100644
393--- a/src/extra/theme.dark.css
394+++ b/src/extra/theme.dark.css
395 @@ -1,5 +1,5 @@
396 @media (--OSdark) {
397- html {
398+ :where(html) {
399 color-scheme: dark;
400
401 --brand: var(--pink-4);
402 diff --git a/src/extra/theme.light.css b/src/extra/theme.light.css
403index 831e4b0..02cbab2 100644
404--- a/src/extra/theme.light.css
405+++ b/src/extra/theme.light.css
406 @@ -1,4 +1,4 @@
407- html {
408+ :where(html) {
409 color-scheme: light;
410
411 --brand: var(--pink-6);
412 diff --git a/src/extra/utilities.css b/src/extra/utilities.css
413index 992e459..da78e7e 100644
414--- a/src/extra/utilities.css
415+++ b/src/extra/utilities.css
416 @@ -1,4 +1,4 @@
417- :where(.visually-hidden, .sr-only) {
418+ :is(.visually-hidden, .sr-only) {
419 inline-size: 0;
420 block-size: 0;
421 overflow: hidden;
422 diff --git a/src/props.supports.css b/src/props.supports.css
423index 8d62572..2c80cac 100644
424--- a/src/props.supports.css
425+++ b/src/props.supports.css
426 @@ -2,7 +2,7 @@
427 @custom-media --firefoxONLY (-moz-appearance: none);
428 @custom-media --chromeONLY (-webkit-tap-highlight-color: black);
429
430- html {
431+ :where(html) {
432 --isLTR: 1;
433 --isRTL: -1;
434
435 diff --git a/supports.css b/supports.css
436index 75e7339..a81a354 100644
437--- a/supports.css
438+++ b/supports.css
439 @@ -1 +1 @@
440- @custom-media --safariONLY (-webkit-hyphens: none);@custom-media --firefoxONLY (-moz-appearance: none);@custom-media --chromeONLY (-webkit-tap-highlight-color: black);
441\ No newline at end of file
442+ @custom-media --safariONLY (-webkit-hyphens: none);@custom-media --firefoxONLY (-moz-appearance: none);@custom-media --chromeONLY (-webkit-tap-highlight-color: black);:where(html){--isLTR:1;--isRTL:-1}[dir=rtl] :where(html){--isLTR:-1;--isRTL:1}
443\ No newline at end of file