lism-css 0.18.0 → 0.21.0

package/dist/config/index.d.ts

@@ -17,7 +17,7 @@ export declare const CONFIG: {
         };
         readonly c: {
             readonly pre: "--";
-            readonly values: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent"];
+            readonly values: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent", "neutral"];
         };
         readonly palette: {
             readonly pre: "--";
@@ -68,12 +68,13 @@ export declare const CONFIG: {
             readonly isVar: 1;
             readonly token: "hl";
             readonly tokenClass: 0;
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly lts: {
             readonly prop: "letterSpacing";
             readonly token: "lts";
             readonly tokenClass: 1;
+            readonly bp: 0;
         };
         readonly ta: {
             readonly prop: "textAlign";
@@ -95,7 +96,7 @@ export declare const CONFIG: {
         readonly d: {
             readonly prop: "display";
             readonly presets: readonly ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"];
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly o: {
             readonly prop: "opacity";
@@ -168,6 +169,11 @@ export declare const CONFIG: {
             readonly token: "sz";
             readonly bp: 1;
         };
+        readonly contentSize: {
+            readonly isVar: 1;
+            readonly presets: readonly ["s", "m", "l", "xl"];
+            readonly token: "sz";
+        };
         readonly sz: {
             readonly prop: "inlineSize";
             readonly token: "sz";
@@ -200,7 +206,7 @@ export declare const CONFIG: {
         };
         readonly bg: {
             readonly prop: "background";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly bgi: {
             readonly prop: "backgroundImage";
@@ -269,16 +275,16 @@ export declare const CONFIG: {
         readonly 'bd-y': {
             readonly prop: "borderBlock";
         };
-        readonly 'bd-x-s': {
+        readonly 'bd-s': {
             readonly prop: "borderInlineStart";
         };
-        readonly 'bd-x-e': {
+        readonly 'bd-e': {
             readonly prop: "borderInlineEnd";
         };
-        readonly 'bd-y-s': {
+        readonly 'bd-bs': {
             readonly prop: "borderBlockStart";
         };
-        readonly 'bd-y-e': {
+        readonly 'bd-be': {
             readonly prop: "borderBlockEnd";
         };
         readonly 'bd-t': {
@@ -345,6 +351,7 @@ export declare const CONFIG: {
         readonly pos: {
             readonly prop: "position";
             readonly presets: readonly ["static", "fixed", "sticky", "relative", "absolute"];
+            readonly bp: 1;
         };
         readonly z: {
             readonly prop: "zIndex";
@@ -397,19 +404,19 @@ export declare const CONFIG: {
             readonly prop: "insetBlock";
             readonly token: "space";
         };
-        readonly 'i-x-s': {
+        readonly 'i-s': {
             readonly prop: "insetInlineStart";
             readonly token: "space";
         };
-        readonly 'i-x-e': {
+        readonly 'i-e': {
             readonly prop: "insetInlineEnd";
             readonly token: "space";
         };
-        readonly 'i-y-s': {
+        readonly 'i-bs': {
             readonly prop: "insetBlockStart";
             readonly token: "space";
         };
-        readonly 'i-y-e': {
+        readonly 'i-be': {
             readonly prop: "insetBlockEnd";
             readonly token: "space";
         };
@@ -435,22 +442,22 @@ export declare const CONFIG: {
             readonly tokenClass: 1;
             readonly bp: 1;
         };
-        readonly 'px-s': {
+        readonly ps: {
             readonly prop: "paddingInlineStart";
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'px-e': {
+        readonly pe: {
             readonly prop: "paddingInlineEnd";
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'py-s': {
+        readonly pbs: {
             readonly prop: "paddingBlockStart";
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'py-e': {
+        readonly pbe: {
             readonly prop: "paddingBlockEnd";
             readonly token: "space";
             readonly bp: 1;
@@ -458,22 +465,22 @@ export declare const CONFIG: {
         readonly pl: {
             readonly prop: "paddingLeft";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly pr: {
             readonly prop: "paddingRight";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly pt: {
             readonly prop: "paddingTop";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly pb: {
             readonly prop: "paddingBottom";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly m: {
             readonly prop: "margin";
@@ -497,26 +504,26 @@ export declare const CONFIG: {
             readonly tokenClass: 1;
             readonly bp: 1;
         };
-        readonly 'mx-s': {
+        readonly ms: {
             readonly prop: "marginInlineStart";
             readonly presets: readonly ["auto"];
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'mx-e': {
+        readonly me: {
             readonly prop: "marginInlineEnd";
             readonly presets: readonly ["auto"];
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'my-s': {
+        readonly mbs: {
             readonly prop: "marginBlockStart";
             readonly token: "space";
             readonly bp: 1;
             readonly presets: readonly ["auto", "0"];
             readonly tokenClass: 1;
         };
-        readonly 'my-e': {
+        readonly mbe: {
             readonly prop: "marginBlockEnd";
             readonly presets: readonly ["auto"];
             readonly token: "space";
@@ -525,22 +532,22 @@ export declare const CONFIG: {
         readonly ml: {
             readonly prop: "marginLeft";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly mr: {
             readonly prop: "marginRight";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly mt: {
             readonly prop: "marginTop";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly mb: {
             readonly prop: "marginBottom";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly g: {
             readonly prop: "gap";
@@ -552,21 +559,21 @@ export declare const CONFIG: {
             };
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly cg: {
             readonly prop: "columnGap";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly rg: {
             readonly prop: "rowGap";
             readonly token: "space";
-            readonly bp: 1;
+            readonly bp: 0;
         };
         readonly cols: {
             readonly isVar: 1;
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly rows: {
             readonly isVar: 1;
@@ -608,17 +615,17 @@ export declare const CONFIG: {
         };
         readonly gta: {
             readonly prop: "gridTemplateAreas";
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gtc: {
             readonly prop: "gridTemplateColumns";
             readonly presets: readonly ["subgrid"];
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gtr: {
             readonly prop: "gridTemplateRows";
             readonly presets: readonly ["subgrid"];
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gaf: {
             readonly prop: "gridAutoFlow";
@@ -636,21 +643,21 @@ export declare const CONFIG: {
             readonly utils: {
                 readonly '1/1': "1 / 1";
             };
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gc: {
             readonly prop: "gridColumn";
             readonly utils: {
                 readonly '1/-1': "1 / -1";
             };
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gr: {
             readonly prop: "gridRow";
             readonly utils: {
                 readonly '1/-1': "1 / -1";
             };
-            readonly bp: 1;
+            readonly bp: "lg";
         };
         readonly gcs: {
             readonly prop: "gridColumnStart";
@@ -755,6 +762,7 @@ export declare const CONFIG: {
         readonly order: {
             readonly prop: "order";
             readonly presets: readonly ["0", "-1", "1"];
+            readonly bp: 1;
         };
         readonly ovw: {
             readonly prop: "overflowWrap";
@@ -784,13 +792,7 @@ export declare const CONFIG: {
     };
     traits: {
         readonly isContainer: "is--container";
-        readonly isWrapper: {
-            readonly className: "is--wrapper";
-            readonly preset: readonly ["s", "l"];
-            readonly presetClass: "-contentSize";
-            readonly customVar: "--contentSize";
-            readonly tokenKey: "sz";
-        };
+        readonly isWrapper: "is--wrapper";
         readonly isLayer: "is--layer";
         readonly isBoxLink: "is--boxLink";
         readonly isCoverLink: "is--coverLink";
@@ -820,7 +822,7 @@ export declare const TOKENS: {
     };
     readonly c: {
         readonly pre: "--";
-        readonly values: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent"];
+        readonly values: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent", "neutral"];
     };
     readonly palette: {
         readonly pre: "--";
@@ -828,7 +830,7 @@ export declare const TOKENS: {
     };
     readonly writing: readonly ["vertical"];
     readonly flow: readonly ["s", "l"];
-    readonly color: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent", "red", "blue", "green", "yellow", "purple", "orange", "pink", "gray", "white", "black", "keycolor"];
+    readonly color: readonly ["base", "base-2", "text", "text-2", "divider", "link", "brand", "accent", "neutral", "red", "blue", "green", "yellow", "purple", "orange", "pink", "gray", "white", "black", "keycolor"];
 };
 export declare const PROPS: {
     readonly f: {
@@ -872,12 +874,13 @@ export declare const PROPS: {
         readonly isVar: 1;
         readonly token: "hl";
         readonly tokenClass: 0;
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly lts: {
         readonly prop: "letterSpacing";
         readonly token: "lts";
         readonly tokenClass: 1;
+        readonly bp: 0;
     };
     readonly ta: {
         readonly prop: "textAlign";
@@ -899,7 +902,7 @@ export declare const PROPS: {
     readonly d: {
         readonly prop: "display";
         readonly presets: readonly ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"];
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly o: {
         readonly prop: "opacity";
@@ -972,6 +975,11 @@ export declare const PROPS: {
         readonly token: "sz";
         readonly bp: 1;
     };
+    readonly contentSize: {
+        readonly isVar: 1;
+        readonly presets: readonly ["s", "m", "l", "xl"];
+        readonly token: "sz";
+    };
     readonly sz: {
         readonly prop: "inlineSize";
         readonly token: "sz";
@@ -1004,7 +1012,7 @@ export declare const PROPS: {
     };
     readonly bg: {
         readonly prop: "background";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly bgi: {
         readonly prop: "backgroundImage";
@@ -1073,16 +1081,16 @@ export declare const PROPS: {
     readonly 'bd-y': {
         readonly prop: "borderBlock";
     };
-    readonly 'bd-x-s': {
+    readonly 'bd-s': {
         readonly prop: "borderInlineStart";
     };
-    readonly 'bd-x-e': {
+    readonly 'bd-e': {
         readonly prop: "borderInlineEnd";
     };
-    readonly 'bd-y-s': {
+    readonly 'bd-bs': {
         readonly prop: "borderBlockStart";
     };
-    readonly 'bd-y-e': {
+    readonly 'bd-be': {
         readonly prop: "borderBlockEnd";
     };
     readonly 'bd-t': {
@@ -1149,6 +1157,7 @@ export declare const PROPS: {
     readonly pos: {
         readonly prop: "position";
         readonly presets: readonly ["static", "fixed", "sticky", "relative", "absolute"];
+        readonly bp: 1;
     };
     readonly z: {
         readonly prop: "zIndex";
@@ -1201,19 +1210,19 @@ export declare const PROPS: {
         readonly prop: "insetBlock";
         readonly token: "space";
     };
-    readonly 'i-x-s': {
+    readonly 'i-s': {
         readonly prop: "insetInlineStart";
         readonly token: "space";
     };
-    readonly 'i-x-e': {
+    readonly 'i-e': {
         readonly prop: "insetInlineEnd";
         readonly token: "space";
     };
-    readonly 'i-y-s': {
+    readonly 'i-bs': {
         readonly prop: "insetBlockStart";
         readonly token: "space";
     };
-    readonly 'i-y-e': {
+    readonly 'i-be': {
         readonly prop: "insetBlockEnd";
         readonly token: "space";
     };
@@ -1239,22 +1248,22 @@ export declare const PROPS: {
         readonly tokenClass: 1;
         readonly bp: 1;
     };
-    readonly 'px-s': {
+    readonly ps: {
         readonly prop: "paddingInlineStart";
         readonly token: "space";
         readonly bp: 1;
     };
-    readonly 'px-e': {
+    readonly pe: {
         readonly prop: "paddingInlineEnd";
         readonly token: "space";
         readonly bp: 1;
     };
-    readonly 'py-s': {
+    readonly pbs: {
         readonly prop: "paddingBlockStart";
         readonly token: "space";
         readonly bp: 1;
     };
-    readonly 'py-e': {
+    readonly pbe: {
         readonly prop: "paddingBlockEnd";
         readonly token: "space";
         readonly bp: 1;
@@ -1262,22 +1271,22 @@ export declare const PROPS: {
     readonly pl: {
         readonly prop: "paddingLeft";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly pr: {
         readonly prop: "paddingRight";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly pt: {
         readonly prop: "paddingTop";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly pb: {
         readonly prop: "paddingBottom";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly m: {
         readonly prop: "margin";
@@ -1301,26 +1310,26 @@ export declare const PROPS: {
         readonly tokenClass: 1;
         readonly bp: 1;
     };
-    readonly 'mx-s': {
+    readonly ms: {
         readonly prop: "marginInlineStart";
         readonly presets: readonly ["auto"];
         readonly token: "space";
         readonly bp: 1;
     };
-    readonly 'mx-e': {
+    readonly me: {
         readonly prop: "marginInlineEnd";
         readonly presets: readonly ["auto"];
         readonly token: "space";
         readonly bp: 1;
     };
-    readonly 'my-s': {
+    readonly mbs: {
         readonly prop: "marginBlockStart";
         readonly token: "space";
         readonly bp: 1;
         readonly presets: readonly ["auto", "0"];
         readonly tokenClass: 1;
     };
-    readonly 'my-e': {
+    readonly mbe: {
         readonly prop: "marginBlockEnd";
         readonly presets: readonly ["auto"];
         readonly token: "space";
@@ -1329,22 +1338,22 @@ export declare const PROPS: {
     readonly ml: {
         readonly prop: "marginLeft";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly mr: {
         readonly prop: "marginRight";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly mt: {
         readonly prop: "marginTop";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly mb: {
         readonly prop: "marginBottom";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly g: {
         readonly prop: "gap";
@@ -1356,21 +1365,21 @@ export declare const PROPS: {
         };
         readonly token: "space";
         readonly tokenClass: 1;
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly cg: {
         readonly prop: "columnGap";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly rg: {
         readonly prop: "rowGap";
         readonly token: "space";
-        readonly bp: 1;
+        readonly bp: 0;
     };
     readonly cols: {
         readonly isVar: 1;
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly rows: {
         readonly isVar: 1;
@@ -1412,17 +1421,17 @@ export declare const PROPS: {
     };
     readonly gta: {
         readonly prop: "gridTemplateAreas";
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly gtc: {
         readonly prop: "gridTemplateColumns";
         readonly presets: readonly ["subgrid"];
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly gtr: {
         readonly prop: "gridTemplateRows";
         readonly presets: readonly ["subgrid"];
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly gaf: {
         readonly prop: "gridAutoFlow";
@@ -1440,21 +1449,21 @@ export declare const PROPS: {
         readonly utils: {
             readonly '1/1': "1 / 1";
         };
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly gc: {
         readonly prop: "gridColumn";
         readonly utils: {
             readonly '1/-1': "1 / -1";
         };
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly gr: {
         readonly prop: "gridRow";
         readonly utils: {
             readonly '1/-1': "1 / -1";
         };
-        readonly bp: 1;
+        readonly bp: "lg";
     };
     readonly gcs: {
         readonly prop: "gridColumnStart";
@@ -1559,6 +1568,7 @@ export declare const PROPS: {
     readonly order: {
         readonly prop: "order";
         readonly presets: readonly ["0", "-1", "1"];
+        readonly bp: 1;
     };
     readonly ovw: {
         readonly prop: "overflowWrap";
@@ -1588,13 +1598,7 @@ export declare const PROPS: {
 };
 export declare const TRAITS: {
     readonly isContainer: "is--container";
-    readonly isWrapper: {
-        readonly className: "is--wrapper";
-        readonly preset: readonly ["s", "l"];
-        readonly presetClass: "-contentSize";
-        readonly customVar: "--contentSize";
-        readonly tokenKey: "sz";
-    };
+    readonly isWrapper: "is--wrapper";
     readonly isLayer: "is--layer";
     readonly isBoxLink: "is--boxLink";
     readonly isCoverLink: "is--coverLink";

package/dist/css/base/set.css

@@ -1 +1 @@
-@media (any-hover:hover){.set--var\:hov:hover{--_notHov: }.set--var\:hov:not(:is(:hover,:focus-within)){--_isHov: }}@media (any-hover:none){.set--var\:hov{--_isHov: }}.set--var\:hov:is(:focus-visible,:focus-within){--_notHov: }.set--var\:bdrsInner{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set--plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;line-height:calc(1em + var(--hl)*2);margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}:is(ul,ol).set--revert{list-style:revert;padding-inline-start:var(--list-px-s,1.75em)}
+@media (any-hover:hover){.set--hov:hover{--_notHov: }.set--hov:not(:is(:hover,:focus-within)){--_isHov: }}@media (any-hover:none){.set--hov{--_isHov: }}.set--hov:is(:focus-visible,:focus-within){--_notHov: }.set--bdrsInner{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set--bleed{--bleed:max(var(--gutter-size),calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2))}.set--plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;line-height:calc(1em + var(--hl)*2);margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}:is(ul,ol).set--revert{list-style:revert;padding-inline-start:var(--list-ps,1.75em)}

package/dist/css/base.css

@@ -1 +1 @@
-@property --sz--bleed{syntax:"<length-percentage>";initial-value:100svi;inherits:true}:root{--sz--xl:1600px;--sz--l:1200px;--sz--m:880px;--sz--s:640px;--sz--xs:400px;--black:#000;--white:#fff;--L:60%;--C:0.2;--red:oklch(var(--L) var(--C) 20);--orange:oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48);--yellow:oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80);--green:oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 152);--blue:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264);--purple:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288);--pink:oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352);--gray:oklch(calc(var(--L) - 4%) 0.04 256);--brand:#1e5f8c;--accent:#d94a6a;--base:#fcfcfc;--base-2:#f2f2f3;--text:#141414;--text-2:#4e5155;--link:oklch(50% 0.3 240);--divider:#dfe0e2;--shadow:rgba(20,20,21,.12);--o--mp:0.9;--o--p:0.75;--o--pp:0.5;--o--ppp:0.25;--bdrs--10:0.25rem;--bdrs--20:0.5rem;--bdrs--30:1rem;--bdrs--40:1.5rem;--bdrs--99:99rem;--ar--og:1.91/1;--gutter-size:var(--s30);--fz--base:1rem;--fz-mol:8;--fz--5xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 6));--fz--4xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 5));--fz--3xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 4));--fz--2xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 3));--fz--xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 2));--fz--l:calc(1em*var(--fz-mol)/(var(--fz-mol) - 1));--fz--m:1em;--fz--s:calc(1em*var(--fz-mol)/(var(--fz-mol) + 1));--fz--xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 2));--fz--2xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 3));--ff--base:-apple-system,"BlinkMacSystemFont","Hiragino Sans",sans-serif,"Segoe UI Emoji";--ff--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--ff--accent:"Garamond","Baskerville","Times New Roman",serif;--fw--light:300;--fw--normal:400;--fw--bold:600;--lts--base:normal;--lts--s:-0.025em;--lts--l:0.05em;--lts--xl:0.1em;--hl-unit:calc(var(--fz--base)*0.125);--hl--xs:var(--hl-unit);--hl--s:calc(var(--hl-unit)*2);--hl--base:calc(var(--hl-unit)*3);--hl--l:calc(var(--hl-unit)*4)}@property --hl{syntax:"<length>";inherits:true;initial-value:.25rem}.set--var\:s,:root{--s-unit:calc(var(--fz--base)*0.5);--s10:var(--s-unit);--s20:calc(var(--s-unit)*2);--s30:calc(var(--s-unit)*3);--s40:calc(var(--s-unit)*5);--s50:calc(var(--s-unit)*8);--s60:calc(var(--s-unit)*13);--s70:calc(var(--s-unit)*21);--s80:calc(var(--s-unit)*34);--s5:calc(var(--s-unit)*0.5);--s15:calc(var(--s-unit)*1.5);--s25:calc(var(--s-unit)*2.5);--s35:calc(var(--s-unit)*4)}.set--var\:s{--s-unit:0.5em}:root{--shc:var(--shadow);--shsz--10:0px 1px 3px;--shsz--20:0px 2px 6px;--shsz--30:0px 4px 12px;--shsz--40:0px 8px 24px;--shsz--50:0px 16px 48px}.set--var\:bxsh,:root{--bxsh--10:var(--shsz--10) var(--shc);--bxsh--20:var(--shsz--20) var(--shc);--bxsh--30:var(--shsz--30) var(--shc);--bxsh--40:var(--shsz--40) var(--shc);--bxsh--50:var(--shsz--50) var(--shc)}body{--hl:var(--hl--base);background-color:var(--base);color:var(--text);font-family:var(--ff--base);font-size:var(--fz--base);letter-spacing:var(--lts--base);text-underline-offset:var(--under-offset,.125em)}*{line-height:calc(1em + var(--hl)*2)}:is(h1,h2,h3,h4,h5,h6){font-family:var(--headings-ff,inherit);font-weight:var(--headings-fw,var(--fw--bold))}h1{font-size:var(--fz--3xl)}h2{font-size:var(--fz--2xl)}h3{font-size:var(--fz--xl)}h4{font-size:var(--fz--l)}h5,h6{font-size:var(--fz--m)}a{color:var(--link-c,var(--link));-webkit-text-decoration:var(--link-td,underline);text-decoration:var(--link-td,underline)}small{--hl:var(--hl--s);font-size:var(--fz--xs)}b,strong{font-weight:var(--fw--bold)}sub,sup{--hl:var(--hl--xs);font-size:80%}code,kbd,samp,var{font-family:var(--ff--mono)}blockquote,q{font-style:italic}blockquote,pre{background-color:var(--base-2);padding:var(--s20)}caption,figcaption{font-size:var(--fz--s)}hr{block-size:0;border:none;border-block-start:1px solid var(--divider)}:is(ul,ol):where(:not([class])){list-style:revert;padding-inline-start:var(--list-px-s,1.75em)}dt{font-weight:var(--fw--bold)}dd+dt{margin-block-start:var(--s20)}table{--td-c:inherit;--td-bgc:transparent;--td-p:var(--s10) var(--s15);--td-min-sz:initial}td{background-color:var(--td-bgc);color:var(--td-c);min-inline-size:var(--td-min-sz);padding:var(--td-p)}th{background-color:var(--th-bgc,var(--td-bgc));color:var(--th-c,var(--td-c));min-inline-size:var(--th-min-sz,var(--td-min-sz));padding:var(--th-p,var(--td-p))}::file-selector-button,button,input:not([type=range]),select,textarea{background-color:var(--controls-bgc,var(--base-2));border:1px solid var(--controls-bdc,var(--divider));border-radius:var(--controls-bdrs,var(--bdrs--10));padding:var(--controls-p,var(--s5) var(--s10))}:disabled{opacity:var(--o--pp)}:focus-visible{outline-offset:var(--focus-offset,0)}@media (any-hover:hover){.set--var\:hov:hover{--_notHov: }.set--var\:hov:not(:is(:hover,:focus-within)){--_isHov: }}@media (any-hover:none){.set--var\:hov{--_isHov: }}.set--var\:hov:is(:focus-visible,:focus-within){--_notHov: }.set--var\:bdrsInner{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set--plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;line-height:calc(1em + var(--hl)*2);margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}:is(ul,ol).set--revert{list-style:revert;padding-inline-start:var(--list-px-s,1.75em)}
+@property --sz--bleed{syntax:"<length-percentage>";initial-value:100svi;inherits:true}:root{--sz--xl:1600px;--sz--l:1200px;--sz--m:880px;--sz--s:640px;--sz--xs:400px;--black:#000;--white:#fff;--L:60%;--C:0.2;--red:oklch(var(--L) var(--C) 20);--orange:oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48);--yellow:oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80);--green:oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 152);--blue:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264);--purple:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288);--pink:oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352);--gray:oklch(calc(var(--L) - 4%) calc(var(--C)/10) 240);--brand:#1e5f8c;--accent:#d94a6a;--base:#fcfcfc;--base-2:#f2f2f3;--text:#141414;--text-2:#4e5155;--link:oklch(50% 0.3 240);--divider:#dfe0e2;--shadow:rgba(20,20,21,.12);--neutral:#cbcccd;--o--mp:0.9;--o--p:0.75;--o--pp:0.5;--o--ppp:0.25;--bdrs--10:0.25rem;--bdrs--20:0.5rem;--bdrs--30:1rem;--bdrs--40:1.5rem;--bdrs--99:99rem;--ar--og:1.91/1;--gutter-size:var(--s30);--flow--base:var(--s30);--flow--s:var(--s20)}:root:where([lang=ja]){--flow--base:var(--s35)}@property --hl{syntax:"<length>";inherits:true;initial-value:.25rem}:root{--fz--base:1rem;--fz-mol:8;--fz--5xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 6));--fz--4xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 5));--fz--3xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 4));--fz--2xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 3));--fz--xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 2));--fz--l:calc(1em*var(--fz-mol)/(var(--fz-mol) - 1));--fz--m:1em;--fz--s:calc(1em*var(--fz-mol)/(var(--fz-mol) + 1));--fz--xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 2));--fz--2xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 3));--ff--base:-apple-system,"BlinkMacSystemFont","Hiragino Sans",sans-serif,"Segoe UI Emoji";--ff--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--ff--accent:"Garamond","Baskerville","Times New Roman",serif;--fw--light:300;--fw--normal:400;--fw--bold:600;--lts--base:normal;--lts--s:-0.025em;--lts--l:0.05em;--lts--xl:0.1em;--hl-unit:calc(var(--fz--base)*0.125);--hl--xs:var(--hl-unit);--hl--s:calc(var(--hl-unit)*2);--hl--base:calc(var(--hl-unit)*3);--hl--l:calc(var(--hl-unit)*4)}.set--s,:root{--s-unit:calc(var(--fz--base)*0.5);--s10:var(--s-unit);--s20:calc(var(--s-unit)*2);--s30:calc(var(--s-unit)*3);--s40:calc(var(--s-unit)*5);--s50:calc(var(--s-unit)*8);--s60:calc(var(--s-unit)*13);--s70:calc(var(--s-unit)*21);--s80:calc(var(--s-unit)*34);--s5:calc(var(--s-unit)*0.5);--s15:calc(var(--s-unit)*1.5);--s25:calc(var(--s-unit)*2.5);--s35:calc(var(--s-unit)*4)}.set--s{--s-unit:0.5em}:root{--shc:var(--shadow);--shsz--10:0px 1px 3px;--shsz--20:0px 2px 6px;--shsz--30:0px 4px 12px;--shsz--40:0px 8px 24px;--shsz--50:0px 16px 48px}.set--bxsh,:root{--bxsh--10:var(--shsz--10) var(--shc);--bxsh--20:var(--shsz--20) var(--shc);--bxsh--30:var(--shsz--30) var(--shc);--bxsh--40:var(--shsz--40) var(--shc);--bxsh--50:var(--shsz--50) var(--shc)}body{--hl:var(--hl--base);background-color:var(--base);color:var(--text);font-family:var(--ff--base);font-size:var(--fz--base);letter-spacing:var(--lts--base);text-underline-offset:var(--under-offset,.25em)}*{line-height:calc(1em + var(--hl)*2)}:is(h1,h2,h3,h4,h5,h6){font-family:var(--headings-ff,inherit);font-weight:var(--headings-fw,var(--fw--bold))}h1{font-size:var(--fz--3xl)}h2{font-size:var(--fz--2xl)}h3{font-size:var(--fz--xl)}h4{font-size:var(--fz--l)}h5,h6{font-size:var(--fz--m)}a{color:var(--link-c,var(--link));-webkit-text-decoration:var(--link-td,underline);text-decoration:var(--link-td,underline)}small{--hl:var(--hl--s);font-size:var(--fz--xs)}b,strong{font-weight:var(--fw--bold)}sub,sup{--hl:var(--hl--xs);font-size:80%}code,kbd,samp,var{font-family:var(--ff--mono);letter-spacing:normal}:where(blockquote>p)+p{margin-block-start:var(--s10)}blockquote,q{font-style:italic}blockquote,pre{background-color:var(--base-2);padding:var(--s20)}caption,figcaption{font-size:var(--fz--s)}hr{block-size:0;border:none;border-block-start:1px solid var(--divider)}:is(ul,ol):where(:not([class])){list-style:revert;padding-inline-start:var(--list-ps,1.75em)}dt{font-weight:var(--fw--bold)}dd+dt{margin-block-start:var(--s20)}table{--td-c:inherit;--td-bgc:transparent;--td-p:var(--s10) var(--s15);--td-min-sz:initial}td{background-color:var(--td-bgc);color:var(--td-c);min-inline-size:var(--td-min-sz);padding:var(--td-p)}th{background-color:var(--th-bgc,var(--td-bgc));color:var(--th-c,var(--td-c));min-inline-size:var(--th-min-sz,var(--td-min-sz));padding:var(--th-p,var(--td-p))}::file-selector-button,button,input:not([type=range]),select,textarea{background-color:var(--controls-bgc,var(--base-2));border:1px solid var(--controls-bdc,var(--divider));border-radius:var(--controls-bdrs,var(--bdrs--10));padding:var(--controls-p,var(--s5) var(--s10))}:disabled{opacity:var(--o--pp)}:focus-visible{outline-offset:var(--focus-offset,0)}@media (any-hover:hover){.set--hov:hover{--_notHov: }.set--hov:not(:is(:hover,:focus-within)){--_isHov: }}@media (any-hover:none){.set--hov{--_isHov: }}.set--hov:is(:focus-visible,:focus-within){--_notHov: }.set--bdrsInner{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set--bleed{--bleed:max(var(--gutter-size),calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2))}.set--plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;line-height:calc(1em + var(--hl)*2);margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}:is(ul,ol).set--revert{list-style:revert;padding-inline-start:var(--list-ps,1.75em)}