lism-css 0.8.4 → 0.9.0

package/config/__prop_list.js

@@ -1,4 +1,4 @@
-const PROPS = {
+const _PROPS = {
 	// size
 	// mask
 	// mski: { style: 'maskImage' },

package/config/defaults/__props-memo.js

@@ -1,12 +1,12 @@
 /**
-	--size-　→ --szー
+	--size- → --szー
 	トークンはハイフン二つ
 
-	globalトークン、　--target--　→ --target-　かな
-	→　--(\w)+?-- で検索。
+	globalトークン、 --target-- → --target- かな
+	→ --(\w)+?-- で検索。
 
 
-・flow, container →　l--、　frame→is--では？
+・flow, container → l--、 frame→is--では？
 ・普通のクラス設計、BEMにもどす
 
  */

package/config/defaults/props.ts

@@ -91,10 +91,10 @@ export default {
 
 	// bg
 	bg: { prop: 'background', bp: 1 },
-	// bgi: { prop: 'backgroundImage' },
-	// bgr: { prop: 'backgroundRepeat', utils: { no: 'no-repeat' } },
-	// bgp: { prop: 'backgroundPosition', presets: ['center'] },
-	// bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
+	bgi: { prop: 'backgroundImage' },
+	bgr: { prop: 'backgroundRepeat', presets: ['no-repeat'] },
+	bgp: { prop: 'backgroundPosition', presets: ['center'] },
+	bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
 	// bga: { prop: 'backgroundAttachment' }, // fixed
 	// bgo: { prop: 'backgroundOrigin' }, // border, padding, content
 	// bgblend: { prop: 'backgroundBlendMode' },

package/config/defaults/states.ts

@@ -6,7 +6,7 @@ export default {
 	isWrapper: {
 		className: 'is--wrapper',
 		preset: ['s', 'l'],
-		presetClass: '-content',
+		presetClass: '-contentSize',
 		customVar: '--contentSize',
 		tokenKey: 'sz',
 	},
@@ -15,16 +15,15 @@ export default {
 	isSide: 'is--side',
 	isSkipFlow: 'is--skipFlow',
 	isVertical: 'is--vertical',
-	hasGutter: 'has--gutter',
+	setGutter: 'set--gutter',
 
 	// set class
-	setShadow: 'set-shadow',
-	setHov: 'set-hov',
-	setTransition: 'set-transition',
-	setSnap: 'set-snap',
+	setShadow: 'set--shadow',
+	setHov: 'set--hov',
+	setTransition: 'set--transition',
 	setMask: {
-		// 'set-mask',
-		className: 'set-mask',
+		// 'set--mask',
+		className: 'set--mask',
 		setStyles: (propVal: string) => {
 			// minify化
 			// propVal = minifyHtml(propVal);
@@ -37,7 +36,9 @@ export default {
 			};
 		},
 	},
-	setPlain: 'set-plain',
-	// setRevert: 'set-revert',
-	setInnerRs: 'set-innerRs',
+	setPlain: 'set--plain',
+	// setRevert: 'set--revert',
+	setInnerRs: 'set--innerRs',
+	setBp: 'set--bp',
+	setCqUnit: 'set--cqUnit',
 } as const;

package/dist/components/LinkBox/script.d.ts

@@ -1 +1,4 @@
+/**
+ * altKey押下時の処理 テスト用
+ */
 export default function enableSelectTextWithAltKeyAtLinkBox(): void;

package/dist/components/Lism/Lism.stories.d.ts

@@ -629,7 +629,7 @@ declare const meta: {
                 category: string;
             };
         };
-        hasGutter: {
+        setGutter: {
             control: "boolean";
             table: {
                 category: string;

package/dist/components/index.js

@@ -1,50 +1,50 @@
 import { default as o } from "./HTML/index.js";
-import { default as t } from "./Lism/index.js";
-import { default as l } from "./Dummy/index.js";
-import { default as m } from "./Container/index.js";
-import { default as u } from "./Wrapper/index.js";
-import { default as x } from "./Layer/index.js";
-import { default as n } from "./LinkBox/index.js";
-import { default as c } from "./Box/index.js";
-import { default as L } from "./Flow/index.js";
+import { default as t } from "./Box/index.js";
+import { default as l } from "./Center/index.js";
+import { default as m } from "./Cluster/index.js";
+import { default as u } from "./Columns/index.js";
+import { default as x } from "./Container/index.js";
+import { default as n } from "./atomic/Decorator/index.js";
+import { default as c } from "./atomic/Divider/index.js";
+import { default as L } from "./Dummy/index.js";
 import { default as D } from "./Flex/index.js";
-import { default as k } from "./Cluster/index.js";
-import { default as y } from "./Stack/index.js";
-import { default as h } from "./Grid/index.js";
-import { default as G } from "./FluidCols/index.js";
-import { default as I } from "./SwitchCols/index.js";
-import { default as W } from "./SideMain/index.js";
-import { default as g } from "./Center/index.js";
-import { default as q } from "./Columns/index.js";
-import { default as A } from "./Frame/index.js";
-import { default as J } from "./atomic/Decorator/index.js";
-import { default as N } from "./atomic/Divider/index.js";
-import { default as P } from "./atomic/Icon/index.js";
-import { default as R } from "./atomic/Media/index.js";
-import { default as V } from "./atomic/Spacer/index.js";
+import { default as k } from "./Flow/index.js";
+import { default as y } from "./FluidCols/index.js";
+import { default as h } from "./Frame/index.js";
+import { default as G } from "./Grid/index.js";
+import { default as I } from "./atomic/Icon/index.js";
+import { default as W } from "./Layer/index.js";
+import { default as g } from "./LinkBox/index.js";
+import { default as q } from "./Lism/index.js";
+import { default as A } from "./atomic/Media/index.js";
+import { default as J } from "./SideMain/index.js";
+import { default as N } from "./atomic/Spacer/index.js";
+import { default as P } from "./Stack/index.js";
+import { default as R } from "./SwitchCols/index.js";
+import { default as V } from "./Wrapper/index.js";
 export {
-  c as Box,
-  g as Center,
-  k as Cluster,
-  q as Columns,
-  m as Container,
-  J as Decorator,
-  N as Divider,
-  l as Dummy,
+  t as Box,
+  l as Center,
+  m as Cluster,
+  u as Columns,
+  x as Container,
+  n as Decorator,
+  c as Divider,
+  L as Dummy,
   D as Flex,
-  L as Flow,
-  G as FluidCols,
-  A as Frame,
-  h as Grid,
+  k as Flow,
+  y as FluidCols,
+  h as Frame,
+  G as Grid,
   o as HTML,
-  P as Icon,
-  x as Layer,
-  n as LinkBox,
-  t as Lism,
-  R as Media,
-  W as SideMain,
-  V as Spacer,
-  y as Stack,
-  I as SwitchCols,
-  u as Wrapper
+  I as Icon,
+  W as Layer,
+  g as LinkBox,
+  q as Lism,
+  A as Media,
+  J as SideMain,
+  N as Spacer,
+  P as Stack,
+  R as SwitchCols,
+  V as Wrapper
 };

package/dist/config/default-config.d.ts

@@ -205,6 +205,21 @@ declare const _default: {
             readonly prop: "background";
             readonly bp: 1;
         };
+        readonly bgi: {
+            readonly prop: "backgroundImage";
+        };
+        readonly bgr: {
+            readonly prop: "backgroundRepeat";
+            readonly presets: readonly ["no-repeat"];
+        };
+        readonly bgp: {
+            readonly prop: "backgroundPosition";
+            readonly presets: readonly ["center"];
+        };
+        readonly bgsz: {
+            readonly prop: "backgroundSize";
+            readonly presets: readonly ["cover", "contain"];
+        };
         readonly bgc: {
             readonly prop: "backgroundColor";
             readonly presets: readonly ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"];
@@ -811,7 +826,7 @@ declare const _default: {
         readonly isWrapper: {
             readonly className: "is--wrapper";
             readonly preset: readonly ["s", "l"];
-            readonly presetClass: "-content";
+            readonly presetClass: "-contentSize";
             readonly customVar: "--contentSize";
             readonly tokenKey: "sz";
         };
@@ -820,19 +835,20 @@ declare const _default: {
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
         readonly isVertical: "is--vertical";
-        readonly hasGutter: "has--gutter";
-        readonly setShadow: "set-shadow";
-        readonly setHov: "set-hov";
-        readonly setTransition: "set-transition";
-        readonly setSnap: "set-snap";
+        readonly setGutter: "set--gutter";
+        readonly setShadow: "set--shadow";
+        readonly setHov: "set--hov";
+        readonly setTransition: "set--transition";
         readonly setMask: {
-            readonly className: "set-mask";
+            readonly className: "set--mask";
             readonly setStyles: (propVal: string) => {
                 '--maskImg': string;
             };
         };
-        readonly setPlain: "set-plain";
-        readonly setInnerRs: "set-innerRs";
+        readonly setPlain: "set--plain";
+        readonly setInnerRs: "set--innerRs";
+        readonly setBp: "set--bp";
+        readonly setCqUnit: "set--cqUnit";
     };
 };
 export default _default;

package/dist/config/defaults/props.d.ts

@@ -193,6 +193,21 @@ declare const _default: {
         readonly prop: "background";
         readonly bp: 1;
     };
+    readonly bgi: {
+        readonly prop: "backgroundImage";
+    };
+    readonly bgr: {
+        readonly prop: "backgroundRepeat";
+        readonly presets: readonly ["no-repeat"];
+    };
+    readonly bgp: {
+        readonly prop: "backgroundPosition";
+        readonly presets: readonly ["center"];
+    };
+    readonly bgsz: {
+        readonly prop: "backgroundSize";
+        readonly presets: readonly ["cover", "contain"];
+    };
     readonly bgc: {
         readonly prop: "backgroundColor";
         readonly presets: readonly ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"];

package/dist/config/defaults/props.js

@@ -67,10 +67,10 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   "max-ysz": { prop: "maxBlockSize", token: "sz" },
   // bg
   bg: { prop: "background", bp: 1 },
-  // bgi: { prop: 'backgroundImage' },
-  // bgr: { prop: 'backgroundRepeat', utils: { no: 'no-repeat' } },
-  // bgp: { prop: 'backgroundPosition', presets: ['center'] },
-  // bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
+  bgi: { prop: "backgroundImage" },
+  bgr: { prop: "backgroundRepeat", presets: ["no-repeat"] },
+  bgp: { prop: "backgroundPosition", presets: ["center"] },
+  bgsz: { prop: "backgroundSize", presets: ["cover", "contain"] },
   // bga: { prop: 'backgroundAttachment' }, // fixed
   // bgo: { prop: 'backgroundOrigin' }, // border, padding, content
   // bgblend: { prop: 'backgroundBlendMode' },

package/dist/config/defaults/states.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
     readonly isWrapper: {
         readonly className: "is--wrapper";
         readonly preset: readonly ["s", "l"];
-        readonly presetClass: "-content";
+        readonly presetClass: "-contentSize";
         readonly customVar: "--contentSize";
         readonly tokenKey: "sz";
     };
@@ -12,18 +12,19 @@ declare const _default: {
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
     readonly isVertical: "is--vertical";
-    readonly hasGutter: "has--gutter";
-    readonly setShadow: "set-shadow";
-    readonly setHov: "set-hov";
-    readonly setTransition: "set-transition";
-    readonly setSnap: "set-snap";
+    readonly setGutter: "set--gutter";
+    readonly setShadow: "set--shadow";
+    readonly setHov: "set--hov";
+    readonly setTransition: "set--transition";
     readonly setMask: {
-        readonly className: "set-mask";
+        readonly className: "set--mask";
         readonly setStyles: (propVal: string) => {
             '--maskImg': string;
         };
     };
-    readonly setPlain: "set-plain";
-    readonly setInnerRs: "set-innerRs";
+    readonly setPlain: "set--plain";
+    readonly setInnerRs: "set--innerRs";
+    readonly setBp: "set--bp";
+    readonly setCqUnit: "set--cqUnit";
 };
 export default _default;

package/dist/config/defaults/states.js

@@ -4,7 +4,7 @@ const a = {
   isWrapper: {
     className: "is--wrapper",
     preset: ["s", "l"],
-    presetClass: "-content",
+    presetClass: "-contentSize",
     customVar: "--contentSize",
     tokenKey: "sz"
   },
@@ -13,15 +13,14 @@ const a = {
   isSide: "is--side",
   isSkipFlow: "is--skipFlow",
   isVertical: "is--vertical",
-  hasGutter: "has--gutter",
+  setGutter: "set--gutter",
   // set class
-  setShadow: "set-shadow",
-  setHov: "set-hov",
-  setTransition: "set-transition",
-  setSnap: "set-snap",
+  setShadow: "set--shadow",
+  setHov: "set--hov",
+  setTransition: "set--transition",
   setMask: {
-    // 'set-mask',
-    className: "set-mask",
+    // 'set--mask',
+    className: "set--mask",
     setStyles: (e) => {
       let s = e;
       return s.startsWith("<svg") && (s = t(e, "base64")), {
@@ -29,9 +28,11 @@ const a = {
       };
     }
   },
-  setPlain: "set-plain",
-  // setRevert: 'set-revert',
-  setInnerRs: "set-innerRs"
+  setPlain: "set--plain",
+  // setRevert: 'set--revert',
+  setInnerRs: "set--innerRs",
+  setBp: "set--bp",
+  setCqUnit: "set--cqUnit"
 };
 export {
   a as default

package/dist/config/index.d.ts

@@ -205,6 +205,21 @@ export declare const CONFIG: {
             readonly prop: "background";
             readonly bp: 1;
         };
+        readonly bgi: {
+            readonly prop: "backgroundImage";
+        };
+        readonly bgr: {
+            readonly prop: "backgroundRepeat";
+            readonly presets: readonly ["no-repeat"];
+        };
+        readonly bgp: {
+            readonly prop: "backgroundPosition";
+            readonly presets: readonly ["center"];
+        };
+        readonly bgsz: {
+            readonly prop: "backgroundSize";
+            readonly presets: readonly ["cover", "contain"];
+        };
         readonly bgc: {
             readonly prop: "backgroundColor";
             readonly presets: readonly ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"];
@@ -811,7 +826,7 @@ export declare const CONFIG: {
         readonly isWrapper: {
             readonly className: "is--wrapper";
             readonly preset: readonly ["s", "l"];
-            readonly presetClass: "-content";
+            readonly presetClass: "-contentSize";
             readonly customVar: "--contentSize";
             readonly tokenKey: "sz";
         };
@@ -820,19 +835,20 @@ export declare const CONFIG: {
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
         readonly isVertical: "is--vertical";
-        readonly hasGutter: "has--gutter";
-        readonly setShadow: "set-shadow";
-        readonly setHov: "set-hov";
-        readonly setTransition: "set-transition";
-        readonly setSnap: "set-snap";
+        readonly setGutter: "set--gutter";
+        readonly setShadow: "set--shadow";
+        readonly setHov: "set--hov";
+        readonly setTransition: "set--transition";
         readonly setMask: {
-            readonly className: "set-mask";
+            readonly className: "set--mask";
             readonly setStyles: (propVal: string) => {
                 '--maskImg': string;
             };
         };
-        readonly setPlain: "set-plain";
-        readonly setInnerRs: "set-innerRs";
+        readonly setPlain: "set--plain";
+        readonly setInnerRs: "set--innerRs";
+        readonly setBp: "set--bp";
+        readonly setCqUnit: "set--cqUnit";
     };
 };
 export declare const TOKENS: {
@@ -1042,6 +1058,21 @@ export declare const PROPS: {
         readonly prop: "background";
         readonly bp: 1;
     };
+    readonly bgi: {
+        readonly prop: "backgroundImage";
+    };
+    readonly bgr: {
+        readonly prop: "backgroundRepeat";
+        readonly presets: readonly ["no-repeat"];
+    };
+    readonly bgp: {
+        readonly prop: "backgroundPosition";
+        readonly presets: readonly ["center"];
+    };
+    readonly bgsz: {
+        readonly prop: "backgroundSize";
+        readonly presets: readonly ["cover", "contain"];
+    };
     readonly bgc: {
         readonly prop: "backgroundColor";
         readonly presets: readonly ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"];
@@ -1648,7 +1679,7 @@ export declare const STATES: {
     readonly isWrapper: {
         readonly className: "is--wrapper";
         readonly preset: readonly ["s", "l"];
-        readonly presetClass: "-content";
+        readonly presetClass: "-contentSize";
         readonly customVar: "--contentSize";
         readonly tokenKey: "sz";
     };
@@ -1657,19 +1688,20 @@ export declare const STATES: {
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
     readonly isVertical: "is--vertical";
-    readonly hasGutter: "has--gutter";
-    readonly setShadow: "set-shadow";
-    readonly setHov: "set-hov";
-    readonly setTransition: "set-transition";
-    readonly setSnap: "set-snap";
+    readonly setGutter: "set--gutter";
+    readonly setShadow: "set--shadow";
+    readonly setHov: "set--hov";
+    readonly setTransition: "set--transition";
     readonly setMask: {
-        readonly className: "set-mask";
+        readonly className: "set--mask";
         readonly setStyles: (propVal: string) => {
             '--maskImg': string;
         };
     };
-    readonly setPlain: "set-plain";
-    readonly setInnerRs: "set-innerRs";
+    readonly setPlain: "set--plain";
+    readonly setInnerRs: "set--innerRs";
+    readonly setBp: "set--bp";
+    readonly setCqUnit: "set--cqUnit";
 };
 export declare const BREAK_POINTS: readonly ["sm", "md", "lg", "xl"];
 export declare const BREAK_POINTS_ALL: readonly ["base", "sm", "md", "lg", "xl"];

package/dist/config/index.js

@@ -1,12 +1,12 @@
 import r from "./default-config.js";
 import s from "lism-css/config.js";
-import { arrayConvertToSet as e, objDeepMerge as n } from "./helper.js";
-let t = n(r, s);
-typeof window < "u" && window._LISM_CSS_CONFIG_ && (t = n(t, window._LISM_CSS_CONFIG_));
+import { objDeepMerge as e, arrayConvertToSet as n } from "./helper.js";
+let t = e(r, s);
+typeof window < "u" && window._LISM_CSS_CONFIG_ && (t = e(t, window._LISM_CSS_CONFIG_));
 const S = t, { tokens: o, props: c, states: i } = S, C = {
   color: [...o.c.values, ...o.palette.values],
   ...o
-}, m = e(structuredClone(C)), p = e(structuredClone(c)), u = i, l = ["sm", "md", "lg", "xl"], a = ["base", ...l];
+}, m = n(structuredClone(C)), p = n(structuredClone(c)), u = i, l = ["sm", "md", "lg", "xl"], a = ["base", ...l];
 export {
   l as BREAK_POINTS,
   a as BREAK_POINTS_ALL,

package/dist/css/base/set.css

@@ -1 +1 @@
-.set-shadow,:root{--sh--5:var(--sh-inset) var(--shsz--5) var(--shc);--sh--10:var(--sh-inset) var(--shsz--10) var(--shc);--sh--20:var(--sh-inset) var(--shsz--20) var(--shc);--sh--30:var(--sh-inset) var(--shsz--30) var(--shc);--sh--40:var(--sh-inset) var(--shsz--40) var(--shc);--sh--50:var(--sh-inset) var(--shsz--50) var(--shc);--bxsh--10:var(--sh--5),var(--sh--10);--bxsh--20:var(--sh--10),var(--sh--20);--bxsh--30:var(--sh--20),var(--sh--30);--bxsh--40:var(--sh--30),var(--sh--40);--bxsh--50:var(--sh--40),var(--sh--50)}:root{--_is_sm:unset;--_is_md:unset}@container (min-width: 480px){.set-bp{--_is_sm: }}@container (min-width: 800px){.set-bp{--_is_md: }}@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-transition{transition:var(--hov-duration,.25s) var(--hov-ease,linear) var(--hov-delay,0s);transition-property:var(--hov-prop,all)}.set-snap{scroll-snap-type:var(--snapType,both mandatory)}.set-snap>*{scroll-snap-align:var(--snapAlign,start);scroll-snap-stop:var(--snapStop,normal)}.set-innerRs{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set-plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}
+.set--cqUnit{--REM:var(--REM--cq);font-size:var(--REM--cq);--fz--base:var(--REM);--hl-unit:calc(var(--REM)*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);--s-unit:calc(var(--REM)*0.5);--s5:calc(var(--s-unit)*0.5);--s10:var(--s-unit);--s15:calc(var(--s-unit)*1.5);--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)}:root{--_is_sm:unset;--_is_md:unset}@container (min-width: 480px){.set--bp{--_is_sm: }}@container (min-width: 800px){.set--bp{--_is_md: }}@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--transition{transition:var(--hov-duration,.25s) var(--hov-ease,linear) var(--hov-delay,0s);transition-property:var(--hov-prop,all)}.set--innerRs{--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}.set--gutter{padding-inline:var(--gutter-size)}

package/dist/css/base.css

@@ -1 +1 @@
-@property --sz--container{syntax:"<length-percentage>";initial-value:100cqi;inherits:true}:root{--sz--xl:1600px;--sz--l:1280px;--sz--m:56rem;--sz--s:42rem;--sz--xs:32rem;--sz--min:18rem;--black:#000;--white:#fff;--L:60%;--C:0.22;--red:oklch(var(--L) var(--C) 20);--orange:oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52);--yellow:oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84);--green:oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);--blue:oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260);--purple:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292);--pink:oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348);--gray:oklch(calc(var(--L) - 4%) 0.04 256);--brand:#1e5f8c;--accent:#d94a6a;--base:#fcfcfd;--base-2:#f1f2f3;--text:#141415;--text-2:#4d4f56;--link:oklch(50% 0.3 240);--divider:#dedfe3;--o--n10:0.75;--o--n20:0.5;--o--n30:0.25;--bdrs--5:2px;--bdrs--10:0.25rem;--bdrs--20:0.5rem;--bdrs--30:1rem;--bdrs--40:1.5rem;--bdrs--50:2rem;--bdrs--99:99rem;--sh-inset: ;--shc:rgba(20,20,21,.05);--shsz--5:0px 2px 4px;--shsz--10:1px 3px 6px;--shsz--20:1px 5px 10px;--shsz--30:2px 8px 16px;--shsz--40:3px 13px 26px;--shsz--50:5px 21px 42px;--ar--og:1.91/1;--gutter-size:var(--s30);--vertical-mode:vertical-rl;--REM:clamp(0.95rem,0.915rem + 0.15vw,1.05rem);--REM--cq:clamp(0.95rem,0.9rem + 0.22vw,1.05rem);--fz--5xl:4em;--fz--4xl:2.667em;--fz--3xl:2em;--fz--2xl:1.6em;--fz--xl:1.333em;--fz--l:1.143em;--fz--m:1em;--fz--s:0.889em;--fz--xs:0.8em;--fz--2xs:0.727em;--ff--base:-apple-system,"BlinkMacSystemFont","Hiragino Sans",sans-serif,"Segoe UI Emoji";--ff--accent:"Garamond","Baskerville","Times New Roman",serif;--ff--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--fw--thin:100;--fw--light:300;--fw--normal:400;--fw--medium:500;--fw--bold:700;--fw--black:900;--lts--base:normal;--lts--s:-0.05em;--lts--l:0.05em}@property --hl{syntax:"<length>";inherits:true;initial-value:.25rem}.set-cqUnit,:root{--fz--base:var(--REM);--hl-unit:calc(var(--REM)*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);--s-unit:calc(var(--REM)*0.5);--s5:calc(var(--s-unit)*0.5);--s10:var(--s-unit);--s15:calc(var(--s-unit)*1.5);--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)}.set-cqUnit{--REM:var(--REM--cq);font-size:var(--REM--cq)}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)}*,.set-plain{line-height:calc(1em + var(--hl)*2)}:is(h1,h2,h3,h4,h5,h6){font-family:var(--heading-ff,inherit);font-weight:var(--heading-fw,bolder)}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)}:is(ul,ol):not([class]),:is(ul,ol)[class^="-"]{list-style:revert;padding-inline-start:var(--s30)}a{color:var(--link-c,var(--link));-webkit-text-decoration:var(--link-td,underline);text-decoration:var(--link-td,underline);text-decoration-color:var(--link-td-color,currentColor);text-decoration-thickness:var(--link-td-thickness,auto)}small{--hl:var(--hl--s);font-size:var(--fz--xs)}b,strong{font-weight:var(--fw--bold)}sub,sup{font-size:80%;line-height:1.2}caption,figcaption,legend{font-size:var(--fz--s)}code,kbd,samp,var{font-family:var(--ff--mono)}dt{font-weight:var(--fw--bold)}dd+dt{margin-block-start:var(--s15)}blockquote{background-color:var(--base-2);padding:var(--s30)}hr{block-size:0;border:none;border-block-start:1px solid var(--divider)}th{background-color:var(--th--bgc,transparent);color:var(--th--c,inherit)}td,th{min-inline-size:var(--cell-min-w,initial);padding:var(--cell-p,var(--s5) var(--s10))}::file-selector-button,button,input,select,textarea{background-color:var(--base);border:1px solid var(--divider);border-radius:var(--bdrs--10);padding:var(--s5) var(--s10)}button{background-color:var(--base-2)}:disabled{opacity:var(--o--n20)}:focus-visible{outline-offset:var(--focus-offset,0)}.set-shadow,:root{--sh--5:var(--sh-inset) var(--shsz--5) var(--shc);--sh--10:var(--sh-inset) var(--shsz--10) var(--shc);--sh--20:var(--sh-inset) var(--shsz--20) var(--shc);--sh--30:var(--sh-inset) var(--shsz--30) var(--shc);--sh--40:var(--sh-inset) var(--shsz--40) var(--shc);--sh--50:var(--sh-inset) var(--shsz--50) var(--shc);--bxsh--10:var(--sh--5),var(--sh--10);--bxsh--20:var(--sh--10),var(--sh--20);--bxsh--30:var(--sh--20),var(--sh--30);--bxsh--40:var(--sh--30),var(--sh--40);--bxsh--50:var(--sh--40),var(--sh--50)}:root{--_is_sm:unset;--_is_md:unset}@container (min-width: 480px){.set-bp{--_is_sm: }}@container (min-width: 800px){.set-bp{--_is_md: }}@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-transition{transition:var(--hov-duration,.25s) var(--hov-ease,linear) var(--hov-delay,0s);transition-property:var(--hov-prop,all)}.set-snap{scroll-snap-type:var(--snapType,both mandatory)}.set-snap>*{scroll-snap-align:var(--snapAlign,start);scroll-snap-stop:var(--snapStop,normal)}.set-innerRs{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set-plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}
+@property --sz--container{syntax:"<length-percentage>";initial-value:100cqi;inherits:true}:root{--sz--xl:1600px;--sz--l:1280px;--sz--m:56rem;--sz--s:42rem;--sz--xs:32rem;--sz--min:18rem;--black:#000;--white:#fff;--L:60%;--C:0.22;--red:oklch(var(--L) var(--C) 20);--orange:oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52);--yellow:oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84);--green:oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);--blue:oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260);--purple:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292);--pink:oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348);--gray:oklch(calc(var(--L) - 4%) 0.04 256);--brand:#1e5f8c;--accent:#d94a6a;--base:#fcfcfd;--base-2:#f1f2f3;--text:#141415;--text-2:#4d4f56;--link:oklch(50% 0.3 240);--divider:#dedfe3;--o--n10:0.75;--o--n20:0.5;--o--n30:0.25;--bdrs--5:2px;--bdrs--10:0.25rem;--bdrs--20:0.5rem;--bdrs--30:1rem;--bdrs--40:1.5rem;--bdrs--50:2rem;--bdrs--99:99rem;--sh-inset: ;--shc:rgba(20,20,21,.05);--shsz--5:0px 2px 4px;--shsz--10:1px 3px 6px;--shsz--20:1px 5px 10px;--shsz--30:2px 8px 16px;--shsz--40:3px 13px 26px;--shsz--50:5px 21px 42px;--ar--og:1.91/1;--gutter-size:var(--s30);--vertical-mode:vertical-rl;--REM:clamp(0.95rem,0.915rem + 0.15vw,1.05rem);--REM--cq:clamp(0.95rem,0.9rem + 0.22vw,1.05rem);--fz--5xl:4em;--fz--4xl:2.667em;--fz--3xl:2em;--fz--2xl:1.6em;--fz--xl:1.333em;--fz--l:1.143em;--fz--m:1em;--fz--s:0.889em;--fz--xs:0.8em;--fz--2xs:0.727em;--ff--base:-apple-system,"BlinkMacSystemFont","Hiragino Sans",sans-serif,"Segoe UI Emoji";--ff--accent:"Garamond","Baskerville","Times New Roman",serif;--ff--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--fw--thin:100;--fw--light:300;--fw--normal:400;--fw--medium:500;--fw--bold:700;--fw--black:900;--lts--base:normal;--lts--s:-0.05em;--lts--l:0.05em;--fz--base:var(--REM);--hl-unit:calc(var(--REM)*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);--s-unit:calc(var(--REM)*0.5);--s5:calc(var(--s-unit)*0.5);--s10:var(--s-unit);--s15:calc(var(--s-unit)*1.5);--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)}@property --hl{syntax:"<length>";inherits:true;initial-value:.25rem}.set--shadow,:root{--sh--5:var(--sh-inset) var(--shsz--5) var(--shc);--sh--10:var(--sh-inset) var(--shsz--10) var(--shc);--sh--20:var(--sh-inset) var(--shsz--20) var(--shc);--sh--30:var(--sh-inset) var(--shsz--30) var(--shc);--sh--40:var(--sh-inset) var(--shsz--40) var(--shc);--sh--50:var(--sh-inset) var(--shsz--50) var(--shc);--bxsh--10:var(--sh--5),var(--sh--10);--bxsh--20:var(--sh--10),var(--sh--20);--bxsh--30:var(--sh--20),var(--sh--30);--bxsh--40:var(--sh--30),var(--sh--40);--bxsh--50:var(--sh--40),var(--sh--50)}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(--heading-ff,inherit);font-weight:var(--heading-fw,bolder)}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)}:is(ul,ol):where(:not([class])),:is(ul,ol):where([class^="-"]){list-style:revert;padding-inline-start:var(--s30)}a{color:var(--link-c,var(--link));-webkit-text-decoration:var(--link-td,underline);text-decoration:var(--link-td,underline);text-decoration-color:var(--link-td-color,currentColor);text-decoration-thickness:var(--link-td-thickness,auto)}small{--hl:var(--hl--s);font-size:var(--fz--xs)}b,strong{font-weight:var(--fw--bold)}sub,sup{font-size:80%;line-height:1.2}caption,figcaption,legend{font-size:var(--fz--s)}code,kbd,samp,var{font-family:var(--ff--mono)}dt{font-weight:var(--fw--bold)}dd+dt{margin-block-start:var(--s15)}blockquote{background-color:var(--base-2);padding:var(--s30)}hr{block-size:0;border:none;border-block-start:1px solid var(--divider)}th{background-color:var(--th--bgc,transparent);color:var(--th--c,inherit)}td,th{min-inline-size:var(--cell-min-w,initial);padding:var(--cell-p,var(--s5) var(--s10))}::file-selector-button,button,input,select,textarea{background-color:var(--base);border:1px solid var(--divider);border-radius:var(--bdrs--10);padding:var(--s5) var(--s10)}button{background-color:var(--base-2)}:disabled{opacity:var(--o--n20)}:focus-visible{outline-offset:var(--focus-offset,0)}.set--cqUnit{--REM:var(--REM--cq);font-size:var(--REM--cq);--fz--base:var(--REM);--hl-unit:calc(var(--REM)*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);--s-unit:calc(var(--REM)*0.5);--s5:calc(var(--s-unit)*0.5);--s10:var(--s-unit);--s15:calc(var(--s-unit)*1.5);--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)}:root{--_is_sm:unset;--_is_md:unset}@container (min-width: 480px){.set--bp{--_is_sm: }}@container (min-width: 800px){.set--bp{--_is_md: }}@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--transition{transition:var(--hov-duration,.25s) var(--hov-ease,linear) var(--hov-delay,0s);transition-property:var(--hov-prop,all)}.set--innerRs{--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}.set--gutter{padding-inline:var(--gutter-size)}