:root {
	--transition-easeInExpo: cubic-bezier(0.7, 0, 0.84, 0);
	--transition-easeOutExpo-x1: 0.16;
	--transition-easeOutExpo-x2: 0.3;
	--transition-easeOutExpo: cubic-bezier(var(--transition-easeOutExpo-x1), 1, var(--transition-easeOutExpo-x2), 1);
	--transition-easeInOutExpo-x1: 0.87;
	--transition-easeInOutExpo-x2: 0.13;
	--transition-easeInOutExpo: cubic-bezier(var(--transition-easeInOutExpo-x1), 0, var(--transition-easeInOutExpo-x2), 1);
	--transition-blob: var(--transition-easeInOutExpo);

	--pressable-transitionInDuration: 0.125s;
	--pressable-transitionOutDuration: 0.2s;
	--pressable-pressed-scale: 0.99;
	--pressable-pressed-opacity: 0.8;

	--separator-width: 1px;

	/* Main canvas + default cards (dark: deep purple) */
	--background-primary: light-dark(#F8EDFF, #110c1f);
	/* Elevated panels, tabs, modals (dark: slightly lifted purple) */
	--background-secondary: light-dark(#FFFFFF80, #1c1038);
	--background-tertiary: light-dark(#eeeff4, #251544);
	--navigation-borderColor: light-dark(#100B1D66, #f1eef733);

	--accent: var(--accent-color);
	--accent-color: light-dark(#3D2B6E, #f078c8);
	--accent-backgroundColor: light-dark(#fbdcf2, #3d0a32);
	--text-primary: light-dark(#130A2B, #F5F2F7);
	--text-secondary: light-dark(#130A2B, #B6AEC1);
	--border-color: light-dark(#cecece, color-mix(in srgb, #c9a8e8 22%, #130a2b));
	--icon-navigation-borderColor: light-dark(#100B1D80, #F1EEF780);

	/* Opaque hue sources. Both roles below derive from these, so a hue change is one edit. */
	--rating-pass-base: #B5ED9D;
	--rating-partial-base: #FFCC73;
	--rating-fail-base: #FB6682;
	--rating-neutral-base: #BDC3C7;

	/* Fill role: blobs, pies, badge backgrounds, borders. Light values are hand-tuned per hue. */
	--rating-pass: light-dark(oklch(from var(--rating-pass-base) 0.873 0.154 h), var(--rating-pass-base));
	--rating-partial: light-dark(oklch(from var(--rating-partial-base) 0.862 0.151 h), var(--rating-partial-base));
	--rating-fail: light-dark(oklch(from var(--rating-fail-base) 0.770 0.169 h), var(--rating-fail-base));
	--rating-neutral: light-dark(oklch(from var(--rating-neutral-base) 0.697 0.013 h), var(--rating-neutral-base));

	/* Text role: uniform L 0.52 clears WCAG AA (4.5:1) against --background-primary for every hue. */
	--rating-pass-text: light-dark(oklch(from var(--rating-pass-base) 0.52 c h), var(--rating-pass-base));
	--rating-partial-text: light-dark(oklch(from var(--rating-partial-base) 0.52 c h), var(--rating-partial-base));
	--rating-fail-text: light-dark(oklch(from var(--rating-fail-base) 0.52 c h), var(--rating-fail-base));
	--rating-neutral-text: light-dark(oklch(from var(--rating-neutral-base) 0.52 c h), var(--rating-neutral-base));

	--rating-unrated: light-dark(oklch(0.75 0.02 244.87 / 0.45), oklch(0.72 0.015 264.61 / 0.35));
	--rating-unrated-backdropFilter: blur(6px);

	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'%3E%3Cpath d='m.5 1 1 1 1-1' fill='none' stroke='black' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
	--fontFamily-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	--fontFamily-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	--safeArea-insetTop: env(safe-area-inset-top, 0px);
	--safeArea-insetBottom: env(safe-area-inset-bottom, 0px);
	--safeArea-insetLeft: env(safe-area-inset-left, 0px);
	--safeArea-insetRight: env(safe-area-inset-right, 0px);
}

:nth-child(1) {
	--i: 0;
}
:nth-child(2) {
	--i: 1;
}
:nth-child(3) {
	--i: 2;
}
:nth-child(4) {
	--i: 3;
}
:nth-child(5) {
	--i: 4;
}
:nth-child(6) {
	--i: 5;
}
:nth-child(7) {
	--i: 6;
}
:nth-child(8) {
	--i: 7;
}
:nth-child(9) {
	--i: 8;
}
:nth-child(10) {
	--i: 9;
}
:nth-child(11) {
	--i: 10;
}
:nth-child(12) {
	--i: 11;
}
:nth-child(13) {
	--i: 12;
}
:nth-child(14) {
	--i: 13;
}
:nth-child(15) {
	--i: 14;
}
:nth-child(16) {
	--i: 15;
}
:nth-child(17) {
	--i: 16;
}
:nth-child(18) {
	--i: 17;
}
:nth-child(19) {
	--i: 18;
}
:nth-child(20) {
	--i: 19;
}

@font-face {
	font-family: 'Noto Color Emoji';
	src: local('Noto Color Emoji');
	/* The unicode range for emoji characters: */
	unicode-range: [\U0001F3FB-\U0001F3FF\U0001F600\U0001F603\U0001F604\U0001F601\U0001F606\U0001F605\U0001F923\U0001F602\U0001F642\U0001F643\U0001FAE0\U0001F609\U0001F60A\U0001F607\U0001F970\U0001F60D\U0001F929\U0001F618\U0001F617\u263A\U0001F61A\U0001F619\U0001F972\U0001F60B\U0001F61B\U0001F61C\U0001F92A\U0001F61D\U0001F911\U0001F917\U0001F92D\U0001FAE2\U0001FAE3\U0001F92B\U0001F914\U0001FAE1\U0001F910\U0001F928\U0001F610\U0001F611\U0001F636\U0001FAE5\U0001F60F\U0001F612\U0001F644\U0001F62C\U0001F925\U0001FAE8\U0001F60C\U0001F614\U0001F62A\U0001F924\U0001F634\U0001F637\U0001F912\U0001F915\U0001F922\U0001F92E\U0001F927\U0001F975\U0001F976\U0001F974\U0001F635\U0001F92F\U0001F920\U0001F973\U0001F978\U0001F60E\U0001F913\U0001F9D0\U0001F615\U0001FAE4\U0001F61F\U0001F641\u2639\U0001F62E\U0001F62F\U0001F632\U0001F633\U0001F97A\U0001F979\U0001F626-\U0001F628\U0001F630\U0001F625\U0001F622\U0001F62D\U0001F631\U0001F616\U0001F623\U0001F61E\U0001F613\U0001F629\U0001F62B\U0001F971\U0001F624\U0001F621\U0001F620\U0001F92C\U0001F608\U0001F47F\U0001F480\u2620\U0001F4A9\U0001F921\U0001F479-\U0001F47B\U0001F47D\U0001F47E\U0001F916\U0001F63A\U0001F638\U0001F639\U0001F63B-\U0001F63D\U0001F640\U0001F63F\U0001F63E\U0001F648-\U0001F64A\U0001F48C\U0001F498\U0001F49D\U0001F496\U0001F497\U0001F493\U0001F49E\U0001F495\U0001F49F\u2763\U0001F494\u2764\U0001FA77\U0001F9E1\U0001F49B\U0001F49A\U0001F499\U0001FA75\U0001F49C\U0001F90E\U0001F5A4\U0001FA76\U0001F90D\U0001F48B\U0001F4AF\U0001F4A2\U0001F4A5\U0001F4AB\U0001F4A6\U0001F4A8\U0001F573\U0001F4AC\U0001F5E8\U0001F5EF\U0001F4AD\U0001F4A4\U0001F44B\U0001F91A\U0001F590\u270B\U0001F596\U0001FAF1-\U0001FAF4\U0001FAF7\U0001FAF8\U0001F44C\U0001F90C\U0001F90F\u270C\U0001F91E\U0001FAF0\U0001F91F\U0001F918\U0001F919\U0001F448\U0001F449\U0001F446\U0001F595\U0001F447\u261D\U0001FAF5\U0001F44D\U0001F44E\u270A\U0001F44A\U0001F91B\U0001F91C\U0001F44F\U0001F64C\U0001FAF6\U0001F450\U0001F932\U0001F91D\U0001F64F\u270D\U0001F485\U0001F933\U0001F4AA\U0001F9BE\U0001F9BF\U0001F9B5\U0001F9B6\U0001F442\U0001F9BB\U0001F443\U0001F9E0\U0001FAC0\U0001FAC1\U0001F9B7\U0001F9B4\U0001F440\U0001F441\U0001F445\U0001F444\U0001FAE6\U0001F476\U0001F9D2\U0001F466\U0001F467\U0001F9D1\U0001F471\U0001F468\U0001F9D4\U0001F469\U0001F9D3\U0001F474\U0001F475\U0001F64D\U0001F64E\U0001F645\U0001F646\U0001F481\U0001F64B\U0001F9CF\U0001F647\U0001F926\U0001F937\U0001F46E\U0001F575\U0001F482\U0001F977\U0001F477\U0001FAC5\U0001F934\U0001F478\U0001F473\U0001F472\U0001F9D5\U0001F935\U0001F470\U0001F930\U0001FAC3\U0001FAC4\U0001F931\U0001F47C\U0001F385\U0001F936\U0001F9B8\U0001F9B9\U0001F9D9-\U0001F9DF\U0001F9CC\U0001F486\U0001F487\U0001F6B6\U0001F9CD\U0001F9CE\U0001F3C3\U0001F483\U0001F57A\U0001F574\U0001F46F\U0001F9D6\U0001F9D7\U0001F93A\U0001F3C7\u26F7\U0001F3C2\U0001F3CC\U0001F3C4\U0001F6A3\U0001F3CA\u26F9\U0001F3CB\U0001F6B4\U0001F6B5\U0001F938\U0001F93C-\U0001F93E\U0001F939\U0001F9D8\U0001F6C0\U0001F6CC\U0001F46D\U0001F46B\U0001F46C\U0001F48F\U0001F491\U0001F5E3\U0001F464\U0001F465\U0001FAC2\U0001F46A\U0001F463\U0001F9B0\U0001F9B1\U0001F9B3\U0001F9B2\U0001F435\U0001F412\U0001F98D\U0001F9A7\U0001F436\U0001F415\U0001F9AE\U0001F429\U0001F43A\U0001F98A\U0001F99D\U0001F431\U0001F408\U0001F981\U0001F42F\U0001F405\U0001F406\U0001F434\U0001FACE\U0001FACF\U0001F40E\U0001F984\U0001F993\U0001F98C\U0001F9AC\U0001F42E\U0001F402-\U0001F404\U0001F437\U0001F416\U0001F417\U0001F43D\U0001F40F\U0001F411\U0001F410\U0001F42A\U0001F42B\U0001F999\U0001F992\U0001F418\U0001F9A3\U0001F98F\U0001F99B\U0001F42D\U0001F401\U0001F400\U0001F439\U0001F430\U0001F407\U0001F43F\U0001F9AB\U0001F994\U0001F987\U0001F43B\U0001F428\U0001F43C\U0001F9A5\U0001F9A6\U0001F9A8\U0001F998\U0001F9A1\U0001F43E\U0001F983\U0001F414\U0001F413\U0001F423-\U0001F427\U0001F54A\U0001F985\U0001F986\U0001F9A2\U0001F989\U0001F9A4\U0001FAB6\U0001F9A9\U0001F99A\U0001F99C\U0001FABD\U0001FABF\U0001F438\U0001F40A\U0001F422\U0001F98E\U0001F40D\U0001F432\U0001F409\U0001F995\U0001F996\U0001F433\U0001F40B\U0001F42C\U0001F9AD\U0001F41F-\U0001F421\U0001F988\U0001F419\U0001F41A\U0001FAB8\U0001FABC\U0001F40C\U0001F98B\U0001F41B-\U0001F41D\U0001FAB2\U0001F41E\U0001F997\U0001FAB3\U0001F577\U0001F578\U0001F982\U0001F99F\U0001FAB0\U0001FAB1\U0001F9A0\U0001F490\U0001F338\U0001F4AE\U0001FAB7\U0001F3F5\U0001F339\U0001F940\U0001F33A-\U0001F33C\U0001F337\U0001FABB\U0001F331\U0001FAB4\U0001F332-\U0001F335\U0001F33E\U0001F33F\u2618\U0001F340-\U0001F343\U0001FAB9\U0001FABA\U0001F344\U0001F347-\U0001F34D\U0001F96D\U0001F34E-\U0001F353\U0001FAD0\U0001F95D\U0001F345\U0001FAD2\U0001F965\U0001F951\U0001F346\U0001F954\U0001F955\U0001F33D\U0001F336\U0001FAD1\U0001F952\U0001F96C\U0001F966\U0001F9C4\U0001F9C5\U0001F95C\U0001FAD8\U0001F330\U0001FADA\U0001FADB\U0001F35E\U0001F950\U0001F956\U0001FAD3\U0001F968\U0001F96F\U0001F95E\U0001F9C7\U0001F9C0\U0001F356\U0001F357\U0001F969\U0001F953\U0001F354\U0001F35F\U0001F355\U0001F32D\U0001F96A\U0001F32E\U0001F32F\U0001FAD4\U0001F959\U0001F9C6\U0001F95A\U0001F373\U0001F958\U0001F372\U0001FAD5\U0001F963\U0001F957\U0001F37F\U0001F9C8\U0001F9C2\U0001F96B\U0001F371\U0001F358-\U0001F35D\U0001F360\U0001F362-\U0001F365\U0001F96E\U0001F361\U0001F95F-\U0001F961\U0001F980\U0001F99E\U0001F990\U0001F991\U0001F9AA\U0001F366-\U0001F36A\U0001F382\U0001F370\U0001F9C1\U0001F967\U0001F36B-\U0001F36F\U0001F37C\U0001F95B\u2615\U0001FAD6\U0001F375\U0001F376\U0001F37E\U0001F377-\U0001F37B\U0001F942\U0001F943\U0001FAD7\U0001F964\U0001F9CB\U0001F9C3\U0001F9C9\U0001F9CA\U0001F962\U0001F37D\U0001F374\U0001F944\U0001F52A\U0001FAD9\U0001F3FA\U0001F30D-\U0001F310\U0001F5FA\U0001F5FE\U0001F9ED\U0001F3D4\u26F0\U0001F30B\U0001F5FB\U0001F3D5\U0001F3D6\U0001F3DC-\U0001F3DF\U0001F3DB\U0001F3D7\U0001F9F1\U0001FAA8\U0001FAB5\U0001F6D6\U0001F3D8\U0001F3DA\U0001F3E0-\U0001F3E6\U0001F3E8-\U0001F3ED\U0001F3EF\U0001F3F0\U0001F492\U0001F5FC\U0001F5FD\u26EA\U0001F54C\U0001F6D5\U0001F54D\u26E9\U0001F54B\u26F2\u26FA\U0001F301\U0001F303\U0001F3D9\U0001F304-\U0001F307\U0001F309\u2668\U0001F3A0\U0001F6DD\U0001F3A1\U0001F3A2\U0001F488\U0001F3AA\U0001F682-\U0001F68A\U0001F69D\U0001F69E\U0001F68B-\U0001F68E\U0001F690-\U0001F699\U0001F6FB\U0001F69A-\U0001F69C\U0001F3CE\U0001F3CD\U0001F6F5\U0001F9BD\U0001F9BC\U0001F6FA\U0001F6B2\U0001F6F4\U0001F6F9\U0001F6FC\U0001F68F\U0001F6E3\U0001F6E4\U0001F6E2\u26FD\U0001F6DE\U0001F6A8\U0001F6A5\U0001F6A6\U0001F6D1\U0001F6A7\u2693\U0001F6DF\u26F5\U0001F6F6\U0001F6A4\U0001F6F3\u26F4\U0001F6E5\U0001F6A2\u2708\U0001F6E9\U0001F6EB\U0001F6EC\U0001FA82\U0001F4BA\U0001F681\U0001F69F-\U0001F6A1\U0001F6F0\U0001F680\U0001F6F8\U0001F6CE\U0001F9F3\u231B\u23F3\u231A\u23F0-\u23F2\U0001F570\U0001F55B\U0001F567\U0001F550\U0001F55C\U0001F551\U0001F55D\U0001F552\U0001F55E\U0001F553\U0001F55F\U0001F554\U0001F560\U0001F555\U0001F561\U0001F556\U0001F562\U0001F557\U0001F563\U0001F558\U0001F564\U0001F559\U0001F565\U0001F55A\U0001F566\U0001F311-\U0001F31C\U0001F321\u2600\U0001F31D\U0001F31E\U0001FA90\u2B50\U0001F31F\U0001F320\U0001F30C\u2601\u26C5\u26C8\U0001F324-\U0001F32C\U0001F300\U0001F308\U0001F302\u2602\u2614\u26F1\u26A1\u2744\u2603\u26C4\u2604\U0001F525\U0001F4A7\U0001F30A\U0001F383\U0001F384\U0001F386\U0001F387\U0001F9E8\u2728\U0001F388-\U0001F38B\U0001F38D-\U0001F391\U0001F9E7\U0001F380\U0001F381\U0001F397\U0001F39F\U0001F3AB\U0001F396\U0001F3C6\U0001F3C5\U0001F947-\U0001F949\u26BD\u26BE\U0001F94E\U0001F3C0\U0001F3D0\U0001F3C8\U0001F3C9\U0001F3BE\U0001F94F\U0001F3B3\U0001F3CF\U0001F3D1\U0001F3D2\U0001F94D\U0001F3D3\U0001F3F8\U0001F94A\U0001F94B\U0001F945\u26F3\u26F8\U0001F3A3\U0001F93F\U0001F3BD\U0001F3BF\U0001F6F7\U0001F94C\U0001F3AF\U0001FA80\U0001FA81\U0001F52B\U0001F3B1\U0001F52E\U0001FA84\U0001F3AE\U0001F579\U0001F3B0\U0001F3B2\U0001F9E9\U0001F9F8\U0001FA85\U0001FAA9\U0001FA86\u2660\u2665\u2666\u2663\u265F\U0001F0CF\U0001F004\U0001F3B4\U0001F3AD\U0001F5BC\U0001F3A8\U0001F9F5\U0001FAA1\U0001F9F6\U0001FAA2\U0001F453\U0001F576\U0001F97D\U0001F97C\U0001F9BA\U0001F454-\U0001F456\U0001F9E3-\U0001F9E6\U0001F457\U0001F458\U0001F97B\U0001FA71-\U0001FA73\U0001F459\U0001F45A\U0001FAAD\U0001F45B-\U0001F45D\U0001F6CD\U0001F392\U0001FA74\U0001F45E\U0001F45F\U0001F97E\U0001F97F\U0001F460\U0001F461\U0001FA70\U0001F462\U0001FAAE\U0001F451\U0001F452\U0001F3A9\U0001F393\U0001F9E2\U0001FA96\u26D1\U0001F4FF\U0001F484\U0001F48D\U0001F48E\U0001F507-\U0001F50A\U0001F4E2\U0001F4E3\U0001F4EF\U0001F514\U0001F515\U0001F3BC\U0001F3B5\U0001F3B6\U0001F399-\U0001F39B\U0001F3A4\U0001F3A7\U0001F4FB\U0001F3B7\U0001FA97\U0001F3B8-\U0001F3BB\U0001FA95\U0001F941\U0001FA98\U0001FA87\U0001FA88\U0001F4F1\U0001F4F2\u260E\U0001F4DE-\U0001F4E0\U0001F50B\U0001FAAB\U0001F50C\U0001F4BB\U0001F5A5\U0001F5A8\u2328\U0001F5B1\U0001F5B2\U0001F4BD-\U0001F4C0\U0001F9EE\U0001F3A5\U0001F39E\U0001F4FD\U0001F3AC\U0001F4FA\U0001F4F7-\U0001F4F9\U0001F4FC\U0001F50D\U0001F50E\U0001F56F\U0001F4A1\U0001F526\U0001F3EE\U0001FA94\U0001F4D4-\U0001F4DA\U0001F4D3\U0001F4D2\U0001F4C3\U0001F4DC\U0001F4C4\U0001F4F0\U0001F5DE\U0001F4D1\U0001F516\U0001F3F7\U0001F4B0\U0001FA99\U0001F4B4-\U0001F4B8\U0001F4B3\U0001F9FE\U0001F4B9\u2709\U0001F4E7-\U0001F4E9\U0001F4E4-\U0001F4E6\U0001F4EB\U0001F4EA\U0001F4EC-\U0001F4EE\U0001F5F3\u270F\u2712\U0001F58B\U0001F58A\U0001F58C\U0001F58D\U0001F4DD\U0001F4BC\U0001F4C1\U0001F4C2\U0001F5C2\U0001F4C5\U0001F4C6\U0001F5D2\U0001F5D3\U0001F4C7-\U0001F4CE\U0001F587\U0001F4CF\U0001F4D0\u2702\U0001F5C3\U0001F5C4\U0001F5D1\U0001F512\U0001F513\U0001F50F-\U0001F511\U0001F5DD\U0001F528\U0001FA93\u26CF\u2692\U0001F6E0\U0001F5E1\u2694\U0001F4A3\U0001FA83\U0001F3F9\U0001F6E1\U0001FA9A\U0001F527\U0001FA9B\U0001F529\u2699\U0001F5DC\u2696\U0001F9AF\U0001F517\u26D3\U0001FA9D\U0001F9F0\U0001F9F2\U0001FA9C\u2697\U0001F9EA-\U0001F9EC\U0001F52C\U0001F52D\U0001F4E1\U0001F489\U0001FA78\U0001F48A\U0001FA79\U0001FA7C\U0001FA7A\U0001FA7B\U0001F6AA\U0001F6D7\U0001FA9E\U0001FA9F\U0001F6CF\U0001F6CB\U0001FA91\U0001F6BD\U0001FAA0\U0001F6BF\U0001F6C1\U0001FAA4\U0001FA92\U0001F9F4\U0001F9F7\U0001F9F9-\U0001F9FB\U0001FAA3\U0001F9FC\U0001FAE7\U0001FAA5\U0001F9FD\U0001F9EF\U0001F6D2\U0001F6AC\u26B0\U0001FAA6\u26B1\U0001F9FF\U0001FAAC\U0001F5FF\U0001FAAA\U0001F3E7\U0001F6AE\U0001F6B0\u267F\U0001F6B9-\U0001F6BC\U0001F6BE\U0001F6C2-\U0001F6C5\u26A0\U0001F6B8\u26D4\U0001F6AB\U0001F6B3\U0001F6AD\U0001F6AF\U0001F6B1\U0001F6B7\U0001F4F5\U0001F51E\u2622\u2623\u2B06\u2197\u27A1\u2198\u2B07\u2199\u2B05\u2196\u2195\u2194\u21A9\u21AA\u2934\u2935\U0001F503\U0001F504\U0001F519-\U0001F51D\U0001F6D0\u269B\U0001F549\u2721\u2638\u262F\u271D\u2626\u262A\u262E\U0001F54E\U0001F52F\U0001FAAF\u2648-\u2653\u26CE\U0001F500-\U0001F502\u25B6\u23E9\u23ED\u23EF\u25C0\u23EA\u23EE\U0001F53C\u23EB\U0001F53D\u23EC\u23F8-\u23FA\u23CF\U0001F3A6\U0001F505\U0001F506\U0001F4F6\U0001F6DC\U0001F4F3\U0001F4F4\u2640\u2642\u26A7\u2716\u2795-\u2797\U0001F7F0\u267E\u203C\u2049\u2753-\u2755\u2757\u3030\U0001F4B1\U0001F4B2\u2695\u267B\u269C\U0001F531\U0001F4DB\U0001F530\u2B55\u2705\u2611\u2714\u274C\u274E\u27B0\u27BF\u303D\u2733\u2734\u2747\u00A9\u00AE\u2122\U0001F51F-\U0001F524\U0001F170\U0001F18E\U0001F171\U0001F191-\U0001F193\u2139\U0001F194\u24C2\U0001F195\U0001F196\U0001F17E\U0001F197\U0001F17F\U0001F198-\U0001F19A\U0001F201\U0001F202\U0001F237\U0001F236\U0001F22F\U0001F250\U0001F239\U0001F21A\U0001F232\U0001F251\U0001F238\U0001F234\U0001F233\u3297\u3299\U0001F23A\U0001F235\U0001F534\U0001F7E0-\U0001F7E2\U0001F535\U0001F7E3\U0001F7E4\u26AB\u26AA\U0001F7E5\U0001F7E7-\U0001F7E9\U0001F7E6\U0001F7EA\U0001F7EB\u2B1B\u2B1C\u25FC\u25FB\u25FE\u25FD\u25AA\u25AB\U0001F536-\U0001F53B\U0001F4A0\U0001F518\U0001F533\U0001F532\U0001F3C1\U0001F6A9\U0001F38C\U0001F3F4\U0001F3F3\U0001F1E6-\U0001F1FF];
}

:root {
	scroll-behavior: smooth;
	overflow: hidden;

	font-family: var(--fontFamily-avenir), 'Noto Color Emoji';
	font-size: min(3.2vw, 16px);
	/* Disable iOS Safari text autosizing, which inflates some code snippets but not others */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	     text-size-adjust: 100%;

	color-scheme: light dark;
	&:has(#theme-toggle:checked) {
		color-scheme: dark;
		@media (prefers-color-scheme: dark) {
			color-scheme: light;
		}
	}
	color: var(--text-primary);
	background-color: var(--background-primary);
	outline-color: var(--accent);

	transition-property: background-color, color;

	/* Block panning the root (content scrolls in `[data-scroll-container]`), but keep pinch zoom */
	touch-action: pinch-zoom;
}

:not(pre) > code {
	overflow-wrap: anywhere;
}

/* Physical transforms follow the native inline direction of each direction owner. */
:root,
[dir] {
	---inlineDirection: 1;
	&:dir(rtl) {
		---inlineDirection: -1;
	}
}

label:has(> input) {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 0;
	gap: 0;
	background-color: var(--background-primary);
	border: 1px solid var(--border-color);
	border-radius: 999em;
	color: inherit;
	font: inherit;
	font-size: smaller;
	line-height: 1;
	transition-property: opacity, scale;
	transition-duration: var(--pressable-transitionOutDuration);

	&:active {
		opacity: var(--pressable-pressed-opacity);
		scale: var(--pressable-pressed-scale);
		transition-duration: var(--pressable-transitionInDuration);
	}

	&:has(> input:focus-visible) {
		outline: 2px solid var(--accent);
		outline-offset: -1px;
	}

	> input {
		min-inline-size: 0;
		border: 0;
		background: transparent;
		font: inherit;
		outline: 0;
	}
}

*,
::before,
::after,
[popover] {
	box-sizing: border-box;
	border: none;
	outline-color: inherit;
	margin: 0;
	padding: 0;
	transition-property: none;
	transition-behavior: allow-discrete;
	transition-duration: inherit;
	transition-timing-function: inherit;
	interpolate-size: allow-keywords;

	scroll-behavior: smooth;
}

:root,
::before,
::after,
[popover] {
	transition-duration: 0.25s;
	transition-timing-function: var(--transition-easeOutExpo);
}

[popover] {
	background-color: transparent;
}

::details-content {
	transition-duration: 0.25s;
	transition-timing-function: var(--transition-easeOutExpo);
	transition-behavior: allow-discrete;
}
::picker(select) {
	transition-duration: 0.25s;
	transition-timing-function: var(--transition-easeOutExpo);
	transition-behavior: allow-discrete;
}
::scroll-marker {
	transition-duration: 0.25s;
	transition-timing-function: var(--transition-easeOutExpo);
	transition-behavior: allow-discrete;
}

hr {
	margin-inline: 10%;
	border: none;
	border-top: var(--separator-width) solid var(--border-color);
}

strong {
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6,
[data-badge],
.navigation-items {
	font-family: var(--fontFamily-spaceGrotesk), 'Noto Color Emoji';
}

code,
pre {
	font-family: var(--fontFamily-monospace);
}

:not(pre) > code {
	font-size: 0.875em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-box: trim-both auto;
	text-wrap: balance;
	overflow-wrap: break-word;
}
/**
 * `data-*` attribute style primitives for Walletbeat.
 *
 * After editing annotations, regenerate editor hints by running `pnpm run generate:css-attributes`.
 */

/**
 * Visually hides an element while retaining its content in the accessibility tree and its accessible name.
 *
 * ### Applied to
 * - Any element whose text is replaced visually by an icon or other presentation.
 *
 * ### Examples
 * - Keep an icon-only control's name available to assistive technology:
 *   ```html
 *   <button type="button"><span data-visually-hidden>Open menu</span>☰</button>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-visually-hidden]`
 */
[data-visually-hidden] {
	inline-size: 1px;
	block-size: 1px;

	position: absolute;

	margin: -1px;

	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/**
 * Shared link styling with optional camouflaged mode. `<a>` gets accent link chrome by default (no `[data-link]`). Add `[data-link]` on non-anchor elements when you want the same treatment; on `<a>`, use `[data-link]` only for non-default modes such as `camouflaged`.
 *
 * ### Tokens
 * - `camouflaged`, `contents`.
 *
 * ### CSS Variables
 * - `--text-primary`
 * - `--accent`
 * - `--accent-textColor`: legible text override for scopes whose accent supplies rating fills or borders.
 *
 * ### Examples
 * - Default link (`<a>` — no `[data-link]`):
 *   ```html
 *   <a href="https://example.com/article">Read the article</a>
 *   ```
 * - `camouflaged` (inherits text color until hover):
 *   ```html
 *   <a data-link="camouflaged" href="#footnote">Footnote</a>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-link]`
 */
[data-link],
a {
	color: var(--accent-textColor, color-mix(in oklch, var(--text-primary) 33%, var(--accent)));
	text-decoration: none;
	font-weight: 600;

	transition-property: color, border-color, -webkit-text-decoration;

	transition-property: color, text-decoration, border-color;

	transition-property: color, text-decoration, border-color, -webkit-text-decoration;

	&:hover {
		text-decoration: underline;
	}

	&:has(svg) {
		text-decoration: none;
		border-block-end: 1px solid transparent;

		&:hover {
			text-decoration: none;
			border-block-end-color: currentColor;
		}
	}

	&[data-link~='camouflaged'] {
		color: inherit;

		&:hover {
			color: var(--accent-textColor, color-mix(in oklch, var(--text-primary) 33%, var(--accent)));
			text-decoration: none;
		}
	}

	&[data-link~='contents'] {
		display: contents;

		> * {
			grid-area: inherit;
		}
	}
}

/**
 * Canonical same-page destination identity consumed by destination-scope interaction publishers. Associated non-link paint owners share the identity without acquiring interactive semantics. Source links declare their own and ancestor destination membership separately with `[data-pressable-targets]`.
 *
 * ### Applied to
 * - Native `<a>` receives local inactive feedback defaults, independently of surrounding destinations.
 * - `[data-pressable-name]` opts into shared destination interaction and current feedback.
 *
 * ### CSS Variables
 * - `--link-current`, `--link-current-sources`: current destination timeline and own or ancestor destinations.
 * - `--link-timelines`: destination timeline names at their closest shared scope.
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-pressable-name]`
 */
:where(a),
[data-pressable-name] {
	---link-active: 0;
	---link-interacting: 0;
	---link-current: 0;
}
[data-pressable-name] {
	/**
	 * ## [data-pressable-current]
	 * Current feedback is owned by each named peer unless it explicitly consumes an ancestor's identical destination state.
	 *
	 * ### Placement
	 * On a named peer inside an ancestor publishing the same destination identity.
	 *
	 * ### Tokens
	 * - `inherit`: inherit current and active feedback without creating a second current animation; native interaction remains local.
	 *
	 * ### Source
	 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-pressable-current]`
	 */
	&[data-pressable-current="inherit"] {
		---link-active: inherit;
		---link-current: inherit;
		---link-currentAnimationName: none;
	}
	&:is(a):is(:hover, :focus-visible, :active),
	&[data-pressable-state~="interacting"] {
		---link-active: 1;
		---link-interacting: 1;
		&:is(a):not([data-link~="camouflaged"]) { text-decoration: underline; }
	}
	/**
	 * ## [data-pressable-state]
	 * Positive peer membership derived from native interaction and canonical destination relationships. Removing a token restores independently owned current/timeline presentation.
	 *
	 * ### Placement
	 * Published by the destination scope on named peers; related group surfaces may consume the relationship without becoming interactive.
	 *
	 * ### Tokens
	 * - `interacting`: a hovered, focused or pressed source includes this destination.
	 * - `pressed`: a natively active source includes this destination; anchors share its press feedback.
	 * - `exact`: an interacting or interested source has this exact destination identity.
	 * - `related`: the semantic group contains an interacting or interested source.
	 *
	 * ### Source
	 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-pressable-state]`
	 */
	&:is(a)[data-pressable-state~="pressed"] {
		transition-duration: var(--pressable-transitionInDuration);
		opacity: var(--pressable-pressed-opacity);
		scale: var(--pressable-pressed-scale);
	}
}
@supports (animation-timeline: scroll()) and (timeline-scope: --link)
	and (color: if(style(---link-active: 1): red; else: blue)) {
	@property ---link-currentAnimationName {
		syntax: '*';
		inherits: false;
		initial-value: none;
	}
	@scope (:root) to (details:not([open]) > :not(summary)) {
		[data-pressable-name] {
			---link-currentAnimationName: link-current;
			@supports (color: if(style(--link-current: none): red; style(--link-current): green; else: blue)) {
				---link-currentAnimationName: if(style(--link-current: none): none; style(--link-current): link-current; else: none);
			}
			animation: auto linear both var(---link-currentAnimationName);
			animation-timeline: var(--link-current, none);
		}
	}
	/**
	 * ## [data-pressable-targets]
	 *
	 * Space-separated canonical destination memberships published by a source link. The own destination and its ancestor destinations remain distinct from the paint owner's single `[data-pressable-name]` identity, so interacting with a child highlights its parent without highlighting its siblings.
	 *
	 * ### CSS Variables
	 * - `--link-current-sources`: native current timelines corresponding to the destination memberships.
	 *
	 * ### Source
	 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-pressable-targets]`
	 */
	a[data-pressable-targets] {
		---link-current-source: none;
		view-timeline-name: var(---link-current-source);
		&:not([data-link~="camouflaged"]) {
			-webkit-text-decoration: if(style(---link-active: 1): underline; else: none);
			        text-decoration: if(style(---link-active: 1): underline; else: none);
		}
	}
}
@keyframes link-current {
	from, to { ---link-active: 1; ---link-current: 1; }
}

/**
 * Shared button and form-control surface for native controls and optional `[data-input]` wrappers. Native `<button>`, `<select>`, `<input>`, and checkbox or radio `<label>`s use this chrome automatically. Add `[data-input]` on a wrapper or extra element when you want the same look outside those tags.
 *
 * ### Applied to
 * - `<button>`
 * - `<select>`
 * - `<input>`
 * - `<label>` wrapping checkbox or radio inputs
 *
 * ### Examples
 * - Native control (no `[data-input]`):
 *   ```html
 *   <button type="button">Save</button>
 *   ```
 *   ```html
 *   <select>
 *     <option>First</option>
 *     <option>Second</option>
 *   </select>
 *   ```
 * - Non-control host that should look like a control:
 *   ```html
 *   <span data-input role="button" tabindex="0">Custom</span>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-input]`
 */
[data-input],
select,
button,
input,
label:has(> input:is([type="checkbox"], [type="radio"])) {
	cursor: pointer;

	display: inline-flex;
	align-items: center;
	padding: 0.66em;
	gap: 0.5em;

	-webkit-appearance: none;

	   -moz-appearance: none;

	        appearance: none;
	background-color: var(--background-primary);
	border: 1px solid var(--border-color);
	border-radius: 0.5em;
	&:is(select) {
		border-radius: 999em;
	}
	color: inherit;

	font: inherit;
	font-size: smaller;
	line-height: 1;

	:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}
}

/* iOS zooms the page when a text field under 16px gets focus. */
@supports (-webkit-touch-callout: none) {
	input:not([type='checkbox'], [type='radio'], [type='range']),
	select,
	textarea {
		font-size: max(16px, 1em);
	}
}

option,
label:has(> input:is([type="checkbox"], [type="radio"])) {
	padding: 0.6em 0.8em;
}

@property ---pressable-opacity {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

/**
 * Consistent press-state feedback across interactive elements. Dims and scales slightly while active so press feedback matches across controls and custom targets.
 * Native summaries own their feedback; breadcrumb summaries delegate it to their foreground row.
 *
 * ### Tokens
 * - `to-containing`
 *
 * ### CSS Variables
 * - `--pressable-transitionOutDuration`
 * - `--pressable-transitionInDuration`
 * - `--pressable-pressed-opacity`
 * - `--pressable-pressed-scale`
 *
 * ### Examples
 * - `to-containing` (press feedback covers the containing block — useful on block-level links):
 *   ```html
 *   <a data-pressable="to-containing" href="#section">
 *     Jump to section
 *   </a>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-pressable]`
 */
[data-pressable],
[role='button'],
:where(
	summary:not([data-sticky-breadcrumb~="position"]:has(> header > [data-row])),
	summary[data-sticky-breadcrumb~="position"] > header > [data-row],
	a,
	select,
	option,
	button,
	input,
	label:has(> input:is([type="checkbox"], [type="radio"]), button),
	::scroll-marker
) {
	position: relative;

	&[data-pressable~='to-containing'] {
		position: static;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
		}
	}

	transition-property: opacity, scale, ---pressable-opacity;
	transition-duration: var(--pressable-transitionOutDuration);

	&:is(:active, summary[data-sticky-breadcrumb~="position"]:active:where(:not(:has(:where([data-pressable], [role="button"], summary, a, select, option, button, input, label:has(> input:is([type="checkbox"], [type="radio"]), button)):active))) > header > [data-row]):is(
			label:has(> input:is([type="checkbox"], [type="radio"]), button),
			:not(
				:has(
					:where(
						[data-pressable],
						[role="button"],
						:where(
							summary,
							a,
							select,
							option,
							button,
							input,
							label:has(> input:is([type="checkbox"], [type="radio"]), button)
						)
					):active
				)
			)
		) {
		transition-duration: var(--pressable-transitionInDuration);
		opacity: var(--pressable-pressed-opacity);
		---pressable-opacity: var(--pressable-pressed-opacity);
		scale: var(--pressable-pressed-scale);
	}
}
::scroll-marker:active {
	transition-duration: var(--pressable-transitionInDuration);
	opacity: var(--pressable-pressed-opacity);
	scale: var(--pressable-pressed-scale);
}

@property ---icon-renderedSize {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

/**
 * ## [data-icon-metrics]
 * Expose one icon's generated outline metrics on its closest layout owner without rendering a glyph.
 *
 * ### Placement
 * - On a composition that reserves space for a descendant icon with the same identifier.
 *
 * ### Examples
 * ```html
 * <header data-column="span-start" data-icon-metrics="security">
 *   <div data-row><a data-row href="#security"><span data-icon="wbicons-complex security"></span>Security</a></div>
 *   <p>Supporting description.</p>
 * </header>
 * ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-icon-metrics]`
 */
[data-icon-metrics] {}

/**
 * ## [data-icon]
 *
 * Shared icon primitive for font icons, inline SVGs, and image icons. Font icons select detailed glyphs above 32px and simple glyphs otherwise; `emoji` preserves platform emoji. Add source-specific tokens such as `wbicons-simple`; add `circle` when the icon should render in a circular control; add `shadow` for image icons (e.g. wallet logos) that need a theme-aware halo to stay legible on both backgrounds.
 *
 * ### Tokens
 * - shape: `circle`, `filled`
 * - color: `accent`
 * - source: `wbicons-simple`, `wbicons-complex`, `emoji`
 * - effect: `shadow`, `grayscale`
 *
 * ### CSS Variables
 * - `--icon-scale`: scale supplied by a transformed container (default `1`); style-range queries include it in icon detail selection
 * - `--icon-content`
 * - `--icon-size`
 * - `--icon-navigation-borderColor`
 * - `--icon-navigation-color`
 * - `--icon-grayscale-filter` — filter applied by `grayscale`; set to `none` to show the icon in color.
 *
 * ### Examples
 * ```html
 * <span data-icon="&#x21b5;"></span>
 * <span data-icon="wbicons-complex security"></span>
 * <button data-icon="circle" type="button"><svg aria-hidden="true">...</svg></button>
 * <span data-icon="shadow"><img src="/images/wallets/rabby.svg" alt="Rabby" /></span>
 * <span data-icon="grayscale"><img src="/images/wallets/rabby.svg" alt="" /></span>
 * ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-icon]`
 */
[data-icon] {
	--icon-content: attr(data-icon);

	&:is([data-icon~="wbicons-simple"], [data-icon~="wbicons-complex"]):not([data-icon~="emoji"]) {
		container-type: inline-size;
		&::before {
			---icon-renderedSize: calc(var(--icon-size, 1em) * var(--icon-scale, 1));
			font-family: var(--fontFamily-wbicons-simple);
			---icon-ink-minX: var(---icon-ink-minX-simple, 0);
			---icon-ink-maxX: var(---icon-ink-maxX-simple, 1);
			---icon-ink-height: var(---icon-ink-height-simple, 1);
			---icon-ink-top: var(---icon-ink-top-simple, 0);
			@container (width > 32px) {
				font-family: var(--fontFamily-wbicons-complex);
				---icon-ink-minX: var(---icon-ink-minX-complex, 0);
				---icon-ink-maxX: var(---icon-ink-maxX-complex, 1);
			---icon-ink-height: var(---icon-ink-height-complex, 1);
			---icon-ink-top: var(---icon-ink-top-complex, 0);
			}
			@supports (font-family: if(style(---icon-renderedSize > 32px): serif; else: sans-serif)) {
				font-family: if(style(---icon-renderedSize > 32px): var(--fontFamily-wbicons-complex); else: var(--fontFamily-wbicons-simple));
				---icon-ink-minX: if(style(---icon-renderedSize > 32px): var(---icon-ink-minX-complex, 0); else: var(---icon-ink-minX-simple, 0));
				---icon-ink-maxX: if(style(---icon-renderedSize > 32px): var(---icon-ink-maxX-complex, 1); else: var(---icon-ink-maxX-simple, 1));
				---icon-ink-height: if(style(---icon-renderedSize > 32px): var(---icon-ink-height-complex, 1); else: var(---icon-ink-height-simple, 1));
				---icon-ink-top: if(style(---icon-renderedSize > 32px): var(---icon-ink-top-complex, 0); else: var(---icon-ink-top-simple, 0));
			}
		}
	}

	&[data-icon~="accent"] {
		color: var(--accent);
	}

	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--icon-size, 1em);
	block-size: var(--icon-size, 1em);
	line-height: 1;
	flex-shrink: 0;

	> span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	> :is(img, svg),
	> span > :is(img, svg) {
		border-radius: 0;
		inline-size: 100%;
		block-size: 100%;
	}

	&::before {
		line-height: 1;
	}

	&:is(:empty)::before {
		content: var(--icon-content);
	}

	&[data-icon~="circle"] {
		inline-size: var(--icon-size, 2rem);
		block-size: var(--icon-size, 2rem);
		border-radius: 999em;
		border: 1px solid var(--icon-navigation-borderColor);
		padding: 0;
		color: var(--icon-navigation-color);

		> :is(img, svg),
		> span > :is(img, svg) {
			inline-size: calc(var(--icon-size, 2rem) * 0.55);
			block-size: calc(var(--icon-size, 2rem) * 0.55);
		}

		&[data-stack] {
			display: inline-grid;
			place-items: center;
		}
	}

	&[data-icon~='filled'] {
		background-color: var(--accent);
		border-color: transparent;
	}

	&[data-icon~='shadow'] {
		> :is(img, svg),
		> span > :is(img, svg) {
			-o-object-fit: contain;
			   object-fit: contain;
			border-radius: 0.25em;
			filter: drop-shadow(0 0 4.66667px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)));
		}
	}

	&[data-icon~='grayscale'] {
		> :is(img, svg),
		> span > :is(img, svg) {
			filter: var(--icon-grayscale-filter, grayscale(1) opacity(0.8));
			transition-property: filter;
		}
	}
}

span svg {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;

	&[fill='none'] {
		stroke: currentColor;
	}

	&:not([fill='none']) {
		fill: currentColor;
	}
}

/**
 * Overlay direct children in one shared grid cell (`grid-area: stack`). Presence only (no tokens).
 *
 * ### Examples
 * - Badge over media:
 *   ```html
 *   <div data-stack>
 *     <img src="cover.jpg" alt="" />
 *     <span>New</span>
 *   </div>
 *   ```
 * - Image, overlay, caption in one cell:
 *   ```html
 *   <div data-stack>
 *     <img src="hero.png" alt="" />
 *     <div class="overlay"></div>
 *     <p>Caption</p>
 *   </div>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-stack]`
 */
[data-stack] {
	display: grid;
	grid: 'stack';

	& > *,
	&::before,
	&::after {
		grid-area: stack;
	}
}

/**
 * ## [data-column]
 * Vertical flex layout with alignment and gap tokens. `span-start` lets the first row’s leading
 * icon span supporting copy; an extreme first-row aspect ratio moves that copy to full width.
 * The first row remains a real box, independent of the supporting copy’s length.
 * It can sit directly in the column or inside a header that owns compact sticky paint.
 *
 * ### Applied to
 * - `[data-card]`
 *
 * ### Tokens
 * - alignment: `start`, `center`, `end`
 * - spacing: `gap-0`, `gap-1`, `gap-2`, `gap-3`, `gap-4`, `gap-5`, `gap-6`, `gap-7`, `gap-8`
 * - composition: `span-start`
 *
 * ### CSS Variables
 * - `--column-sizeTimelinePrefix`: optional unique local measurement-clock prefix; defaults to `--column`
 * - `--column-wrapRatio`: first-row ratio below which copy spans the full width; defaults to 4
 * - `--column-supportFontSize`: supporting text and end-cluster size; defaults to 1rem
 * - `--column-supportLineHeight`: supporting text line height; defaults to 1rlh
 * - `--column-spanSize`: icon span override; defaults to the heading and supporting line heights plus their gap
 * - `--column-supportGap`: gap between the first row and supporting copy; defaults to 0.5rem
 * - `--column-iconGap`: inline gap after the leading icon; defaults to 0.625rem
 *
 * ### Examples
 * - Default column grid (`1em` gap, start-aligned content):
 *   ```html
 *   <section data-column>
 *     <h2>Overview</h2>
 *     <p>Supporting copy.</p>
 *   </section>
 *   ```
 * - Start-aligned items, tighter gap (`gap-2`):
 *   ```html
 *   <section data-column="start gap-2">
 *     <h2>Overview</h2>
 *     <p>Supporting copy.</p>
 *   </section>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-column]`
 */
@property --card-borderWidth {
	syntax: '<length>';
	inherits: true;
	initial-value: 2px;
}

@property ---column-gap {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

[data-column],
[data-card] {
	display: flex;
	flex-direction: column;

	> * {
		min-inline-size: 0;
	}

	&[data-row] {
		flex-direction: row;
	}

	---column-gap: 0.5em;
	gap: var(---column-gap);
	align-content: start;

	&[data-column~="start"] {
		align-items: start;
		justify-items: start;
	}
	&[data-column~="center"] {
		align-items: center;
		justify-items: center;
	}
	&[data-column~="end"] {
		align-items: end;
		justify-items: end;
	}

	&[data-column~="gap-0"] {
		---column-gap: 0em;
	}
	&[data-column~="gap-1"] {
		---column-gap: 0.25em;
	}
	&[data-column~="gap-2"] {
		---column-gap: 0.5em;
	}
	&[data-column~="gap-3"] {
		---column-gap: 0.75em;
	}
	&[data-column~="gap-4"] {
		---column-gap: 1em;
	}
	&[data-column~="gap-5"] {
		---column-gap: 1.25em;
	}
	&[data-column~="gap-6"] {
		---column-gap: 1.5em;
	}
	&[data-column~="gap-7"] {
		---column-gap: 1.75em;
	}
	&[data-column~="gap-8"] {
		---column-gap: 2em;
	}

	/**
	 * ## [data-column-item]
	 *
	 * Size and align a column child.
	 *
	 * ### Placement
	 * - Direct children of `[data-column]` or `[data-card]`.
	 *
	 * ### Tokens
	 * - growth: `flexible`
	 * - basis: `basis-1`, `basis-2`, `basis-3`, `basis-4`
	 * - alignment: `start`, `center`, `end`, `baseline`
	 *
	 * ### Examples
	 * ```html
	 * <section data-column>
	 *   <div data-column-item="flexible">Main</div>
	 * </section>
	 * ```
	 *
	 * ### Source
	 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-column-item]`
	 */
	[data-column-item~="flexible"] {
		flex: 1;
	}

	[data-column-item~="basis-1"] {
		flex-basis: 16ch;
	}
	[data-column-item~="basis-2"] {
		flex-basis: 22ch;
	}
	[data-column-item~="basis-3"] {
		flex-basis: 28ch;
	}
	[data-column-item~="basis-4"] {
		flex-basis: 34ch;
	}

	[data-column-item~="start"] {
		align-self: start;
	}
	[data-column-item~="center"] {
		align-self: center;
	}
	[data-column-item~="end"] {
		align-self: end;
	}
	[data-column-item~="baseline"] {
		align-self: baseline;
	}
}

@property ---column-spanSize {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

@property ---column-compactIconSize {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

@property ---column-iconSize {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

[data-column~="span-start"] {
	---column-inlineTimeline: --column-inline-size;
	---column-blockTimeline: --column-block-size;
	---column-sizeTimelines: var(---column-inlineTimeline), var(---column-blockTimeline);
	@supports (view-timeline-name: ident("--column" "-inline-size")) {
		---column-inlineTimeline: ident(var(--column-sizeTimelinePrefix, --column) "-inline-size");
		---column-blockTimeline: ident(var(--column-sizeTimelinePrefix, --column) "-block-size");
	}
	---column-spanSize: var(
		--column-spanSize,
		calc(1lh + var(--column-supportLineHeight, 1rlh) + var(--column-supportGap, 0.5rem))
	);
	---column-break: 0;
	---column-iconSize: calc((1 - var(---column-break)) * var(---column-spanSize) + var(---column-break) * 1.5lh);
	---column-iconHeight: 1;
	---column-iconTop: 0;
	---column-iconAdvance: 1;
	---column-iconWidth: calc(var(---column-spanSize) * var(---column-iconAdvance) / var(---column-iconHeight));
	@supports (font-family: if(style(---column-spanSize > 32px): serif; else: sans-serif)) {
		---column-iconHeight: if(style(---column-spanSize > 32px): var(---icon-ink-height-complex, 1); else: var(---icon-ink-height-simple, 1));
		---column-iconTop: if(style(---column-spanSize > 32px): var(---icon-ink-top-complex, 0); else: var(---icon-ink-top-simple, 0));
		---column-iconAdvance: if(style(---column-spanSize > 32px): var(---icon-ink-advance-complex, 1); else: var(---icon-ink-advance-simple, 1));
	}
	&[data-icon-metrics] {
		---breadcrumb-iconCorrection: calc(var(--stickyBreadcrumb-iconRatio, calc(1.5lh / 1em)) * 1em - var(---column-iconSize));
		---column-compactIconSize: calc((var(---column-iconSize) + var(---breadcrumb-iconCorrection)) * var(--stickyBreadcrumb-scale, 1));
		---column-compactIconRatio: 1;
		@supports (font-family: if(style(---column-spanSize > 32px): serif; else: sans-serif)) {
			---column-compactIconRatio: if(style(---column-compactIconSize > 32px): calc(var(---icon-ink-advance-complex, 1) / var(---icon-ink-height-complex, 1)); else: calc(var(---icon-ink-advance-simple, 1) / var(---icon-ink-height-simple, 1)));
		}
		---breadcrumb-iconInlineCorrection: calc((var(---column-iconSize) + var(---breadcrumb-iconCorrection)) * var(---column-compactIconRatio) - var(---column-iconWidth));
	}
	---column-gap: var(--column-supportGap, 0.5rem);

	> [data-row],
	> :is(header, [data-sticky]) > [data-row] {
		gap: var(---column-gap);
		flex-wrap: wrap;

		&:has(> [data-sticky-breadcrumb~="end"]) {
			-moz-column-gap: calc(var(---column-gap) + var(--stickyBreadcrumb-endClearance, 0px));
			     column-gap: calc(var(---column-gap) + var(--stickyBreadcrumb-endClearance, 0px));
		}

		@container style(--stickyBreadcrumb-clearance: circle) and style(---breadcrumb-clearance-supported: 1) {
			&:has(> [data-sticky-breadcrumb~="end"]) {
				-moz-column-gap: calc(var(---column-gap) + max(0px, calc(var(--stickyBreadcrumb-clearanceInlineRadius, var(--stickyBreadcrumb-clearanceRadius, 0px)) / cos(1.40625deg) + var(--stickyBreadcrumb-clearanceInlineOffset, 0px))));
				     column-gap: calc(var(---column-gap) + max(0px, calc(var(--stickyBreadcrumb-clearanceInlineRadius, var(--stickyBreadcrumb-clearanceRadius, 0px)) / cos(1.40625deg) + var(--stickyBreadcrumb-clearanceInlineOffset, 0px))));
			}
		}

		a[data-row] {
			gap: var(--column-iconGap, 0.625rem);
		}

		/* Wrapped companions stay in the title column; the first link retains the icon slot. */
		[data-sticky-breadcrumb~="item"][data-row~="wrap"]:has(> a > [data-icon]) {
			padding-inline-start: calc(var(---column-iconWidth) + var(--column-iconGap, 0.625rem));
			> a:first-child {
				margin-inline-start: calc(-1 * (var(---column-iconWidth) + var(--column-iconGap, 0.625rem)));
			}
		}

		> [data-row-item~="flexible"] {
			flex-basis: max-content;
		}

		[data-icon] {
			--icon-size: var(---column-spanSize);
			line-height: inherit;
			block-size: 1lh;
			align-items: start;
			justify-content: start;

			&::before {
				font-size: var(---column-iconSize);
			}
			&:is([data-icon~="wbicons-simple"], [data-icon~="wbicons-complex"]):not([data-icon~="emoji"], [data-icon~="circle"]) {
				inline-size: var(---column-iconWidth);
				/* Natural glyph size derives from layout independently of the detail-selection scale. */
				&::before {
					font-size: calc(var(---column-iconSize) / var(---column-iconHeight));
					transform: translateY(calc(-1em * var(---column-iconTop)));
					---icon-leadingInset: var(---icon-ink-minX, 0);
				}
				&:dir(rtl)::before {
					---icon-leadingInset: calc(1 - var(---icon-ink-maxX, 1));
				}
			}
		}

		> :not([data-icon], [data-row-item~="flexible"]) {
			font-size: var(--column-supportFontSize, 1rem);
		}
	}

	> :not([data-row], header, [data-sticky]) {
		font-size: var(--column-supportFontSize, 1rem);
		line-height: var(--column-supportLineHeight, 1rlh);
	}

	&:has(> [data-row] [data-icon], > :is(header, [data-sticky]) > [data-row] [data-icon]) > :not([data-row], header, [data-sticky]) {
		margin-inline-start: calc(
			(1 - var(---column-break)) * (var(---column-iconWidth) + var(--column-iconGap, 0.625rem))
		);
	}
}

@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) and
	(width: anchor-size(--column-firstRow inline)) and (timeline-scope: --column-size) {
	@property ---column-inlineFraction {
		syntax: '<number>';
		inherits: true;
		initial-value: 1;
	}
	@property ---column-blockFraction {
		syntax: '<number>';
		inherits: true;
		initial-value: 1;
	}
	@keyframes column-inline-size {
		from {
			---column-inlineFraction: 0;
		}
		to {
			---column-inlineFraction: 1;
		}
	}
	@keyframes column-block-size {
		from {
			---column-blockFraction: 0;
		}
		to {
			---column-blockFraction: 1;
		}
	}

	[data-column~="span-start"] {
		anchor-scope: --column-firstRow;
		timeline-scope: var(---column-sizeTimelines);
		animation:
			column-inline-size auto linear both,
			column-block-size auto linear both;
		animation-timeline: var(---column-sizeTimelines);
		/* At viewport start, a fixed size probe has view progress V / (V + D). */
		---column-break: clamp(
			0,
			sign(
				var(--column-wrapRatio, 4) - (100vw * (1 / var(---column-inlineFraction) - 1)) /
					max(1px, 100vw * (1 / var(---column-blockFraction) - 1))
			),
			1
		);

		> [data-row],
		> :is(header, [data-sticky]) > [data-row] {
			anchor-name: --column-firstRow;
		}

		&:not([data-sticky-breadcrumb~="position"]) {
			&::before,
			&::after {
				content: '';
				position: fixed;
				inset: 0 auto auto 0;
				block-size: 1px;
				visibility: hidden;
				pointer-events: none;
				view-timeline-axis: inline;
				view-timeline-inset: 0;
			}
			&::before {
				inline-size: anchor-size(--column-firstRow inline);
				view-timeline-name: var(---column-inlineTimeline);
			}
			&::after {
				inline-size: anchor-size(--column-firstRow block);
				view-timeline-name: var(---column-blockTimeline);
			}
		}
	}
}

/**
 * ## [data-row], [data-badge]
 * Flex row primitive: alignment, gap, and wrap on `[data-row]`, `[data-badge]`, and `<summary>` without an explicit `[data-column]`. Child `[data-row-item]` tokens are documented on the nested row-item rule below; badge size tokens stay on `[data-badge]`.
 *
 * ### Placement
 * - On `[data-row]`, `[data-badge]`, or `<summary>` when it is the flex row container (not on `[data-row-item]` children).
 *
 * ### Tokens
 * - container: `start`, `center`, `end`
 * - cross-axis: `align-start`, `align-center`, `align-end`
 * - gap: `gap-0` … `gap-8`
 * - wrap: `wrap`, `wrap-first-last`
 *
 * ### Examples
 * - Default row (`space-between`, `1em` gap):
 *   ```html
 *   <div data-row>
 *     <span>Label</span>
 *     <span>Value</span>
 *   </div>
 *   ```
 * - Centered main axis, tighter gap, wrap:
 *   ```html
 *   <div data-row="center gap-2 wrap">
 *     <span>Label</span>
 *     <span>Value</span>
 *   </div>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-row]`
 */
[data-row],
[data-badge],
summary:where(:not([data-column])) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;

	> * {
		min-inline-size: 0;
	}

	&[data-row~='wrap'],
	&:where(summary) {
		flex-wrap: wrap;
	}

	&[data-row~='start'] {
		justify-content: start;
	}
	&[data-row~='center'] {
		justify-content: center;
	}
	&[data-row~='end'] {
		justify-content: end;
	}

	&[data-row~='align-start'] {
		align-items: start;
	}
	&[data-row~='align-center'] {
		align-items: center;
	}
	&[data-row~='align-end'] {
		align-items: end;
	}

	&[data-row~="gap-0"] {
		gap: 0em;
	}
	&[data-row~="gap-1"] {
		gap: 0.25em;
	}
	&[data-row~="gap-2"] {
		gap: 0.5em;
	}
	&[data-row~="gap-3"] {
		gap: 0.75em;
	}
	&[data-row~="gap-4"] {
		gap: 1em;
	}
	&[data-row~="gap-5"] {
		gap: 1.25em;
	}
	&[data-row~="gap-6"] {
		gap: 1.5em;
	}
	&[data-row~="gap-8"] {
		gap: 2em;
	}

	/**
	 * Flex row child: basis, flex growth, and wrap-axis alignment tokens read by the parent `[data-row]` / `[data-badge]` / `<summary>` flex shell.
	 *
	 * ### Placement
	 * - Direct child of `[data-row]`, `[data-badge]`, or `<summary>` when that parent establishes the row flex container.
	 *
	 * ### Tokens
	 * - growth: `flexible`
	 * - basis: `basis-1`..`basis-6`, `basis-full`
	 * - wrap alignment: `wrap-start`, `wrap-center`, `wrap-end`
	 *
	 * ### Examples
	 * - `basis-3` + `flexible`:
	 *   ```html
	 *   <div data-row>
	 *     <span data-row-item="basis-3 flexible">Sidebar</span>
	 *     <span>Main</span>
	 *   </div>
	 *   ```
	 * - `wrap-end` on a wrapped row:
	 *   ```html
	 *   <div data-row="wrap">
	 *     <span>Title</span>
	 *     <span data-row-item="wrap-end">Action</span>
	 *   </div>
	 *   ```
	 *
	 * ### Source
	 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-row-item]`
	 */
	> [data-row-item~='flexible'] {
		flex: 1;
	}

	> [data-row-item~='basis-1'] {
		flex-basis: 16ch;
	}
	> [data-row-item~='basis-2'] {
		flex-basis: 22ch;
	}
	> [data-row-item~='basis-3'] {
		flex-basis: 28ch;
	}
	> [data-row-item~='basis-4'] {
		flex-basis: 34ch;
	}
	> [data-row-item~='basis-5'] {
		flex-basis: 40ch;
	}
	> [data-row-item~='basis-6'] {
		flex-basis: 46ch;
	}
	> [data-row-item~='basis-full'] {
		flex-basis: 100%;
	}

	> [data-row-item~='wrap-start'],
	&[data-row~='wrap-first-last'] > :first-child {
		margin-inline-end: auto;
	}
	> [data-row-item~='wrap-center'] {
		margin-inline: auto;
	}
	> [data-row-item~='wrap-end'],
	&[data-row~='wrap-first-last'] > :last-child {
		margin-inline-start: auto;
	}
}

/**
 * Card surface: tone, radius, padding, and accent border via tokens. Card surface variables sit on the same column grid defaults as `[data-column]` / `[data-card]`.
 *
 * ### Tokens
 * - tone: `secondary`
 * - radius: `radius-1`, `radius-2`, `radius-3`, `radius-4`, `radius-6`, `radius-8`
 * - padding: `padding-0` … `padding-8`
 * - border: `border-accent`
 *
 * ### CSS Variables
 * - `--card-backgroundColor`
 * - `--card-radius`
 * - `--card-padding`
 * - `--card-borderWidth`: accent border width; defaults to 2px
 *
 * ### Examples
 * - Default surface (primary background, `0.5em` radius, `1em` padding — omit tokens):
 *   ```html
 *   <article data-card>
 *     <h2>Card title</h2>
 *     <p>Card body.</p>
 *   </article>
 *   ```
 * - Secondary tone, larger padding, accent border (omit radius when default `radius-4` / `0.5em` is fine):
 *   ```html
 *   <article data-card="secondary padding-6 border-accent">
 *     <h2>Card title</h2>
 *     <p>Card body.</p>
 *   </article>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-card]`
 */
[data-card] {
	/* Inputs */
	--card-backgroundColor: var(--background-primary);
	--card-radius: 0.5em;
	--card-padding: 1em;

	/* Rules */
	background-color: var(--card-backgroundColor);
	border-radius: var(--card-radius);
	padding: var(--card-padding);

	&[data-card~='secondary'] {
		--card-backgroundColor: var(--background-secondary);
		border-color: var(--border-color);
	}

	&[data-card~='radius-1'] {
		--card-radius: 0.125em;
	}
	&[data-card~='radius-2'] {
		--card-radius: 0.25em;
	}
	&[data-card~='radius-3'] {
		--card-radius: 0.375em;
	}
	&[data-card~='radius-4'] {
		--card-radius: 0.5em;
	}
	&[data-card~='radius-6'] {
		--card-radius: 0.75em;
	}
	&[data-card~='radius-8'] {
		--card-radius: 1em;
	}

	&[data-card~='padding-0'] {
		--card-padding: 0em;
	}
	&[data-card~='padding-1'] {
		--card-padding: 0.25em;
	}
	&[data-card~='padding-2'] {
		--card-padding: 0.5em;
	}
	&[data-card~='padding-3'] {
		--card-padding: 0.75em;
	}
	&[data-card~='padding-4'] {
		--card-padding: 1em;
	}
	&[data-card~='padding-5'] {
		--card-padding: 1.25em;
	}
	&[data-card~='padding-6'] {
		--card-padding: 1.5em;
	}
	&[data-card~='padding-7'] {
		--card-padding: 1.75em;
	}
	&[data-card~='padding-8'] {
		--card-padding: 2em;
	}

	&[data-card~="border-accent"] {
		border: var(--card-borderWidth) solid color-mix(in srgb, var(--accent) 90%, transparent);
	}
}

/**
 * Compact badge / chip surface with explicit size modifiers. Without a size token, text size is inherited and no badge padding is added.
 *
 * ### Tokens
 * - `small`, `medium`, `large`
 *
 * ### CSS Variables
 * - `--badge-borderWidth`: border width shared with intrinsic border-box measurement
 * - `--badge-backgroundColor`
 * - `--badge-borderColor`
 * - `--badge-textColor`
 *
 * ### Examples
 * - Default (inherited text size, no added padding):
 *   ```html
 *   <span data-badge>Status</span>
 *   ```
 * - `small`:
 *   ```html
 *   <span data-badge="small">Status</span>
 *   ```
 * - `large`:
 *   ```html
 *   <span data-badge="large">Status</span>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-badge]`
 */
[data-badge] {
	--badge-borderWidth: 1px;
	--badge-backgroundColor: color-mix(in srgb, var(--accent) 33%, transparent);
	--badge-borderColor: color-mix(in srgb, var(--accent) 40%, transparent);
	--badge-textColor: currentColor;
	--badge-backdropFilter: none;

	display: inline-flex;
	max-inline-size: 100%;
	gap: 0.15em;
	flex-shrink: 0;
	flex-basis: auto;

	border-radius: 0.375em;
	background-color: var(--badge-backgroundColor);
	border: var(--badge-borderWidth) solid var(--badge-borderColor);
	backdrop-filter: none;

	@media (prefers-reduced-transparency: no-preference) {
		backdrop-filter: var(--badge-backdropFilter);
	}

	color: var(--badge-textColor);
	font-weight: 600;
	line-height: 1;

	&[data-badge~='small'] {
		font-size: 0.75em;
		padding: 0.4em 0.5em;
	}
	&[data-badge~='medium'] {
		font-size: 0.875em;
		padding: 0.45em 0.6em;
	}
	&[data-badge~='large'] {
		font-size: 1em;
		padding: 0.5em 0.7em;
	}

	> img,
	svg {
		width: 1.15em;
		height: 1.15em;
		vertical-align: -0.2em;

		&:first-child {
			margin-inline-end: 0.25em;
		}
	}

	a:has(> &:only-child) {
		flex-shrink: 0;
		flex-basis: auto;
	}
}

/**
 * Semantic tag / chip with category-based color families tied to theme variables. Omit a category token for the neutral palette; add one for a themed family.
 *
 * ### Tokens
 * - `wallet-type`, `account-type`, `eip`, `eip-status`, `manufacture-type`, `eoa`
 *
 * ### CSS Variables
 * - `--tag-backgroundColor`
 * - `--tag-textColor`
 * - `--tag-borderColor`
 * - `--tag-hover-backgroundColor`
 * - `--tag-hover-textColor`
 * - `--tag-hover-borderColor`
 *
 * ### Examples
 * - Neutral palette (omit category token):
 *   ```html
 *   <span data-tag>Label</span>
 *   ```
 * - `eip` family:
 *   ```html
 *   <button type="button" data-tag="eip">EIP-7702</button>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-tag]`
 */
[data-tag] {
	--tag-backgroundColor: light-dark(rgba(108, 36, 224, 0.08), rgba(108, 36, 224, 0.12));
	--tag-textColor: light-dark(var(--accent), rgb(187, 147, 255));
	--tag-borderColor: light-dark(rgba(108, 36, 224, 0.2), rgba(108, 36, 224, 0.3));
	--tag-hover-backgroundColor: light-dark(rgba(108, 36, 224, 0.12), rgba(108, 36, 224, 0.16));
	--tag-hover-textColor: light-dark(var(--accent), rgb(187, 147, 255));
	--tag-hover-borderColor: light-dark(rgba(108, 36, 224, 0.3), rgba(108, 36, 224, 0.4));

	font-size: 0.66em;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4em 0.66em;
	border-radius: 9999px;

	background-color: var(--tag-backgroundColor);
	color: var(--tag-textColor);
	border: 1px solid var(--tag-borderColor);
	font-weight: 500;
	line-height: 1;

	cursor: pointer;
	transition-property: background-color, border-color, color, transform, box-shadow;

	&:is(button) {
		/* WCAG 2.5.8 minimum target size */
		min-block-size: 24px;

		&:hover {
			background-color: var(--tag-hover-backgroundColor);
			color: var(--tag-hover-textColor);
			border-color: var(--tag-hover-borderColor);
			transform: translateY(-1px);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}

		&:active {
			transform: translateY(0);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		}
	}

	/* Light text is dark enough for 4.5:1 contrast on the light background. */
	&[data-tag~='wallet-type'] {
		--tag-backgroundColor: light-dark(oklch(0.95 0 0), oklch(0.25 0 0));
		--tag-textColor: light-dark(oklch(0.5 0 0), oklch(0.8 0 0));
		--tag-borderColor: light-dark(oklch(0.9 0 0), oklch(0.4 0 0));
		--tag-hover-backgroundColor: light-dark(oklch(0.92 0 0), oklch(0.3 0 0));
		--tag-hover-textColor: light-dark(oklch(0.45 0 0), oklch(0.85 0 0));
		--tag-hover-borderColor: light-dark(oklch(0.85 0 0), oklch(0.5 0 0));
	}

	&[data-tag~='account-type'] {
		--tag-backgroundColor: light-dark(oklch(0.95 0.03 145), oklch(0.25 0.05 145));
		--tag-textColor: light-dark(oklch(0.5 0.15 145), oklch(0.7 0.25 145));
		--tag-borderColor: light-dark(oklch(0.9 0.06 145), oklch(0.4 0.08 145));
		--tag-hover-backgroundColor: light-dark(oklch(0.92 0.05 145), oklch(0.3 0.07 145));
		--tag-hover-textColor: light-dark(oklch(0.45 0.18 145), oklch(0.85 0.15 145));
		--tag-hover-borderColor: light-dark(oklch(0.85 0.08 145), oklch(0.5 0.1 145));
	}

	&[data-tag~='eip'] {
		--tag-backgroundColor: light-dark(oklch(0.95 0.03 300), oklch(0.25 0.05 300));
		--tag-textColor: light-dark(oklch(0.5 0.15 300), oklch(0.7 0.25 300));
		--tag-borderColor: light-dark(oklch(0.9 0.06 300), oklch(0.4 0.08 300));
		--tag-hover-backgroundColor: light-dark(oklch(0.92 0.05 300), oklch(0.3 0.07 300));
		--tag-hover-textColor: light-dark(oklch(0.45 0.18 300), oklch(0.85 0.15 300));
		--tag-hover-borderColor: light-dark(oklch(0.85 0.08 300), oklch(0.5 0.1 300));
	}

	&[data-tag~='eip-status'] {
		--tag-backgroundColor: light-dark(oklch(0.95 0.03 250), oklch(0.25 0.05 250));
		--tag-textColor: light-dark(oklch(0.5 0.15 250), oklch(0.7 0.25 250));
		--tag-borderColor: light-dark(oklch(0.9 0.06 250), oklch(0.4 0.08 250));
		--tag-hover-backgroundColor: light-dark(oklch(0.92 0.05 250), oklch(0.3 0.07 250));
		--tag-hover-textColor: light-dark(oklch(0.45 0.18 250), oklch(0.85 0.15 250));
		--tag-hover-borderColor: light-dark(oklch(0.85 0.08 250), oklch(0.5 0.1 250));
	}

	&[data-tag~='manufacture-type'] {
		--tag-backgroundColor: light-dark(oklch(0.95 0.03 290), oklch(0.25 0.05 290));
		--tag-textColor: light-dark(oklch(0.5 0.15 290), oklch(0.7 0.25 290));
		--tag-borderColor: light-dark(oklch(0.9 0.06 290), oklch(0.4 0.08 290));
		--tag-hover-backgroundColor: light-dark(oklch(0.92 0.05 290), oklch(0.3 0.07 290));
		--tag-hover-textColor: light-dark(oklch(0.45 0.18 290), oklch(0.85 0.15 290));
		--tag-hover-borderColor: light-dark(oklch(0.85 0.08 290), oklch(0.5 0.1 290));
	}

	&[data-tag~='eoa'] {
		--tag-backgroundColor: light-dark(oklch(0.95 0.03 145), oklch(0.25 0.05 145));
		--tag-textColor: light-dark(oklch(0.5 0.15 145), oklch(0.7 0.25 145));
		--tag-borderColor: light-dark(oklch(0.9 0.06 145), oklch(0.4 0.08 145));
		--tag-hover-backgroundColor: light-dark(oklch(0.92 0.05 145), oklch(0.3 0.07 145));
		--tag-hover-textColor: light-dark(oklch(0.45 0.18 145), oklch(0.85 0.15 145));
		--tag-hover-borderColor: light-dark(oklch(0.85 0.08 145), oklch(0.5 0.1 145));
	}
}

/**
 * List layout: grid gap and marker column on `[data-list]`, `ul`, or `ol`. Per-row spacing and custom markers are documented on the list-item child rule below.
 *
 * ### Placement
 * - On the list host: `[data-list]`, `ul`, or `ol` (including inside `[data-card]`).
 *
 * ### Tokens
 * - list gap: `gap-0` … `gap-6`
 *
 * ### CSS Variables
 * - `--list-markerGap`
 * - `--list-gap`
 * - `--list-marker-inlineSize`
 *
 * ### Examples
 * - Native list (`ul` / `ol` use the same rules as `[data-list]` — omit `[data-list]` when defaults suffice):
 *   ```html
 *   <ul>
 *     <li>First item</li>
 *     <li>Second item</li>
 *   </ul>
 *   ```
 * - Tighter list gap (`gap-0`; default without a token is `0.5lh`):
 *   ```html
 *   <ul data-list="gap-0">
 *     <li>First</li>
 *     <li>Second</li>
 *   </ul>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-list]`
 */
[data-list],
ul,
ol {
	/* Inputs */
	--list-markerGap: 0.66em;
	--list-gap: 0.5lh;
	--list-marker-inlineSize: 1.15em;

	/* Rules */
	&:not([data-list~="unstyled"]) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		---column-gap: var(--list-gap);
		gap: var(---column-gap);
		list-style-type: disc;
		list-style-position: outside;
		padding-inline-start: var(--list-marker-inlineSize);
	}

	&[data-list~="unstyled"] {
		list-style-type: none;
		list-style-position: inside;
		padding-inline-start: 0;

		> li,
		> [data-list-item] {
			list-style-type: none;
			padding-inline-start: 0;
		}
	}

	&[data-card] {
		padding-inline-start: calc(var(--card-padding) + var(--list-marker-inlineSize));
	}

	&[data-list~='gap-0'] {
		--list-gap: 0;
	}
	&[data-list~='gap-1'] {
		--list-gap: 0.25lh;
	}
	&[data-list~='gap-2'] {
		--list-gap: 0.5lh;
	}
	&[data-list~='gap-3'] {
		--list-gap: 0.75lh;
	}
	&[data-list~='gap-4'] {
		--list-gap: 1lh;
	}
	&[data-list~='gap-5'] {
		--list-gap: 1.25lh;
	}
	&[data-list~='gap-6'] {
		--list-gap: 1.5lh;
	}

	/**
	 * List row: per-item vertical rhythm (`[data-list-item]` gap tokens), marker column (`::before` / `[data-list-item-marker]`), and padding that pairs with `[data-list]` / `[data-card]` list padding. `[data-list-item-marker]` renders literal marker text.
	 *
	 * ### Placement
	 * - Direct child of `[data-list]`, `ul`, or `ol` — use native `<li>` or `[data-list-item]` for the same rules.
	 * - `[data-list-item-marker]` is an optional attribute on that same row when you want a custom marker string (otherwise the default bullet glyph applies).
	 *
	 * ### Tokens
	 * - item vertical gap: `gap-0` … `gap-6` on `[data-list-item]`
	 * - marker: the displayed marker string via `[data-list-item-marker]` (not space-separated tokens)
	 *
	 * ### CSS Variables
	 * - `--listItem-gap` (per row, driven by `[data-list-item]`)
	 *
	 * ### Examples
	 * - Per-row vertical rhythm (`gap-4` between blocks inside one item — omit `[data-list-item]` when default `gap-1` / `0.25lh` is fine):
	 *   ```html
	 *   <ul>
	 *     <li data-list-item="gap-4">
	 *       <p>Lead</p>
	 *       <p>Detail</p>
	 *     </li>
	 *   </ul>
	 *   ```
	 * - Custom marker string (`[data-list-item-marker]`):
	 *   ```html
	 *   <ul>
	 *     <li data-list-item-marker="*">First step</li>
	 *     <li data-list-item-marker="1.">Second step</li>
	 *   </ul>
	 *   ```
	 *
	 * ### Source
	 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-list-item]`
	 */
	&:not([data-list~="unstyled"]) > :is(li, [data-list-item]) {
		position: relative;
		--listItem-gap: 0.25lh;

		&[data-list-item~='gap-0'] {
			--listItem-gap: 0;
		}
		&[data-list-item~='gap-1'] {
			--listItem-gap: 0.25lh;
		}
		&[data-list-item~='gap-2'] {
			--listItem-gap: 0.5lh;
		}
		&[data-list-item~='gap-3'] {
			--listItem-gap: 0.75lh;
		}
		&[data-list-item~='gap-4'] {
			--listItem-gap: 1lh;
		}
		&[data-list-item~='gap-5'] {
			--listItem-gap: 1.25lh;
		}
		&[data-list-item~='gap-6'] {
			--listItem-gap: 1.5lh;
		}

		/* &::marker {
			content: '●' ' ';
			font-size: 1em;
		}
		&[data-list-item-marker]::marker {
			content: attr(data-list-item-marker);
			font-size: 0.875em;
		}

		@supports not selector(::before::marker) { */
		&::marker {
			color: transparent;
		}

		&::before {
			position: absolute;
			margin-inline-start: calc(-1 * var(--list-marker-inlineSize) - var(--list-markerGap));
			width: var(--list-marker-inlineSize);

			content: '●';
			font-family: var(--list-marker-fontFamily, inherit);
			font-size: 1em;
			text-align: center;
		}
		/**
		 * ## [data-list-item-marker]
		 *
		 * Custom literal marker text for a list item.
		 *
		 * ### Source
		 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-list-item-marker]`
		 */
		&[data-list-item-marker]::before {
			content: attr(data-list-item-marker);
		}
		/* } */

		padding-inline-start: var(--list-markerGap);

		> * + * {
			margin-top: var(--listItem-gap);
		}
	}
}

/**
 * ## [data-sticky-breadcrumb]
 *
 * Native sticky breadcrumbs use independent source and metadata dimensions to compose compact rows.
 * A source retains its intrinsic layout box while its real item receives paint transforms.
 * Compose the position with `data-sticky` for explicit backdrop placement.
 * Without measured geometry, breadcrumb containers retain normal document flow.
 *
 * ### Placement
 * - A scope contains its position (directly or inside details), followed by content and a flow marker.
 * - The entry flow marker contains measure elements for independent item and row size clocks.
 * - Source, item, support and end roles belong inside that position; nested scopes inherit the parent row.
 * - Closed summaries retain their own end-content dimensions and destination clocks; sticky motion and arrival measurements apply only to open disclosures.
 *
 * ### Tokens
 * - `scope`: natural section and animation-start fragment target containing a position and its following content
 * - `clearance`: combines with `scope` to measure and route an end cluster around a circular obstacle; arrival currently requires zero inline displacement
 * - `root`: starts a breadcrumb hierarchy
 * - `position`: native heading/focus container coordinating its sticky foreground and natural measurements
 * - `source`: untransformed intrinsic reservation for the item
 * - `item`: transformed real heading identity and native controls
 * - `support`: supporting copy; direct summary support stays in ordinary flow below the compact foreground
 * - `fade`: combines with support for paragraph content that fades during its final line's passage behind the occupied sticky rows; existing direct children own opacity only
 * - `end`: independently sized in-flow metadata
 * - `flow`: non-sticky clock for foreground arrival and heading-start snap target; support copy does not extend the clock's subject
 * - `approach`: direct child of a destination scope providing a compact-heading approach clock ending at leading-edge contact
 * - `exit`: combines with `flow` to mark the departure start and end from the section bottom
 * - `size`: source/row/end size exports use paired, transform-independent horizontal clocks; source exporters share sticky participation while row and end exporters retain visible closed summaries.
 * - `size-export`: empty absolute size container; combine with `size-source`, `size-row` or `size-end` at the corresponding natural owner.
 * - `measure`: hidden dimension probes inside the flow marker
 * - `item-size`: combines with `measure` in a root flow marker; its local scroll container exports compact item width and natural item height to the shared layout owner
 *
 * - `contents`: on a transparent `end` cluster, existing children and marker own its paint motion; omit on a painted leaf end
 *
 * ### CSS Variables
 * - `--stickyBreadcrumb-itemInlineTimeline`, `--stickyBreadcrumb-itemBlockTimeline`: source dimension clocks; local names by default, entry-derived names when globally scoped
 * - `--stickyBreadcrumb-endInlineTimeline`, `--stickyBreadcrumb-endBlockTimeline`: metadata dimension clocks; local names by default, entry-derived names when globally scoped
 * - `--stickyBreadcrumb-entryTimeline`: unique native heading view timeline required for an animated scope; `auto` at an item forces its compact presentation
 * - `--stickyBreadcrumb-approachTimeline`: unique view timeline for an optional approach marker; `exit-crossing -100% exit-crossing 0%` spans one heading row before contact
 * - `--stickyBreadcrumb-endPaintAnimation`, `--stickyBreadcrumb-endPaintTimeline`, `--stickyBreadcrumb-endPaintRange`: end paint motion; `contents` directs it to existing children and marker while retaining native cluster size and timeline ownership
 * - `--stickyBreadcrumb-entryRange`: shared arrival range from the container's leading-edge contact through trailing-edge contact; defaults to `exit-crossing 0% contain 100%`
 * - `--stickyBreadcrumb-scale`: compact identity scale; defaults to 1
 * - `--stickyBreadcrumb-iconRatio`: compact glyph size relative to heading text; defaults to 1.5 line heights
 * - `--stickyBreadcrumb-iconScale`: final painted icon scale relative to its source; derived for glyphs, configurable on images
 * - `--stickyBreadcrumb-gap`: compact item gap; defaults to 1rem
 * - `--stickyBreadcrumb-markerSize`: physical separator slot between adjacent headings; defaults to 0px
 * - `--stickyBreadcrumb-paddingBlock`: compact row padding; defaults to 0.5rem
 * - `--stickyBreadcrumb-minBlockSize`: minimum compact identity height; defaults to 0px
 * - `--stickyBreadcrumb-forceRow`: starts a row when 1
 * - `--stickyBreadcrumb-easing`: scale and fade curve; omitted preserves their individual defaults. Rounded arrival retains standard InOutExpo pacing
 * - `--stickyBreadcrumb-inlineEasing`: horizontal motion and scaling override; defaults to the shared curve or OutExpo
 * - `--stickyBreadcrumb-exitAnimation`: scope input for row and backdrop departure animations; `none` retains the row while its support content keeps scrolling
 * - `--stickyBreadcrumb-availableInlineSize`: available compact row width; defaults to 100cqi
 * - `--stickyBreadcrumb-insetBlockStart`: initial hierarchy inset
 * - `--stickyBreadcrumb-sourcePaddingBlock`, `--stickyBreadcrumb-sourcePaddingInline`: padding at the real position owner
 *
 * - `--stickyBreadcrumb-endClearance`: nonnegative maximum inline paint displacement reserved by the real title/end row when analytic clearance is unavailable; defaults to 0px
 * - `--stickyBreadcrumb-clearance`: `circle` enables circle clearance for the scope; omitted retains ordinary end motion
 * - `--stickyBreadcrumb-clearanceInlineOffset`: signed inline offset of the end relative to the obstacle center; defaults to 0px
 * - `--stickyBreadcrumb-clearanceGap`: block lead for a tangent-continuous rounded dodge; defaults to 0px (sharp contact for positive inline offsets); positive offsets require a positive gap for continuous arrival
 * - `--stickyBreadcrumb-clearanceRadius`, `--stickyBreadcrumb-clearanceCenterBlock`: vertical obstacle radius and block center in viewport coordinates
 * - `--stickyBreadcrumb-clearanceInlineRadius`: optional horizontal radius; defaults to the vertical radius
 *
 * ### Examples
 * - Native heading and its natural-flow boundary:
 *   ```html
 *   <section id="section" data-sticky-container data-sticky-breadcrumb="scope" style="--stickyBreadcrumb-entryTimeline: --section-entry">
 *     <header data-sticky="block block-start backdrop-after backdrop-stuck" data-sticky-breadcrumb="position">
 *       <div data-row data-sticky="block block-start backdrop-self backdrop-always">
 *         <div data-sticky-breadcrumb="source" data-row-item="flexible">
 *           <a data-sticky-breadcrumb="item" href="#section"><h2>Section</h2></a>
 *         </div>
 *       </div>
 *     </header>
 *     <div>Section content</div>
 *     <span data-sticky-breadcrumb="flow" aria-hidden="true"><span data-sticky-breadcrumb="measure"></span></span>
 *     <span data-sticky-breadcrumb="flow exit" aria-hidden="true"></span>
 *   </section>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-sticky-breadcrumb]`
 */
[data-sticky-breadcrumb~="scope"]
	:is(
		a[data-sticky-breadcrumb~="item"],
		[data-sticky-breadcrumb~="item"] > a:first-child,
		h1 > a:first-child,
		h4 > a:first-child
	) {
	position: relative;
	display: flex;
	align-items: center;

	&::before {
		content: '#' / '';
		position: absolute;
		inset-inline-end: 100%;
		inline-size: -moz-max-content;
		inline-size: max-content;
		padding-inline-end: 0.66rem;
		font-family: var(--fontFamily-avenir), 'Noto Color Emoji';
		font-size: var(--stickyBreadcrumb-markerSize);
		line-height: calc(1 / 0.7);

		transition-property: opacity;
	}

	&:not(:hover, :focus-visible)::before {
		opacity: 0;
	}
}

[data-sticky-breadcrumb~="flow"] {
	display: none;
}

[data-sticky-breadcrumb~="scope"] {
	--sticky-position: relative;
	--sticky-offset: auto;
	---breadcrumb-itemActive: 0;
	&[data-sticky-container],
	:is(
		[data-card],
		[data-scroll-item~="snap-block-start"],
		[id][data-sticky-container]:has(> [data-sticky])
	) {
		scroll-snap-align: start;
		scroll-margin-block-start: var(---breadcrumb-blockEnd, var(--sticky-insetBlockStart));
	}
	&[data-sticky-breadcrumb~="root"] {
		scroll-margin-block-start: var(--sticky-insetBlockStart);
	}
}

[data-sticky-breadcrumb~="support"] {
	position: relative;
	z-index: 0;
	pointer-events: auto;
}

[data-sticky-breadcrumb~="position"] > [data-sticky-breadcrumb~="support"] {
	font-size: var(--column-supportFontSize, 1rem);
	line-height: var(--column-supportLineHeight, 1rlh);
}
[data-sticky-breadcrumb~="size-export"] {
	display: none;
}

@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) and
	(width: anchor-size(--breadcrumb-source inline)) and (timeline-scope: --breadcrumb-size) and
	(color: if(style(---breadcrumb-wrap: 1): red)) {
	[data-sticky-breadcrumb~="scope"] {
		--sticky-position: sticky;
		--sticky-offset: initial;
	}
	/* Scope descendant clocks above their animation targets. Local clocks derive unique names from their arrival identity. */
	@supports (timeline-scope: all) and (view-timeline-name: ident("a" "b")) {
		body {
			timeline-scope: all;
		}
	}
	@property ---breadcrumb-itemWidth {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-naturalItemHeight {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-itemHeight {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-sourceRowWidth {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-sourceRowHeight {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-sourceEndWrap {
		syntax: '<number>';
		inherits: true;
		initial-value: 0;
	}
	@function --breadcrumb-clearance-supported() returns <number> {
		result: 1;
	}
	@function --breadcrumb-ease-time(--t <number>) returns <number> {
		result: calc(
			3 * pow(1 - var(--t), 2) * var(--t) * var(--transition-easeInOutExpo-x1) + 3 *
				(1 - var(--t)) * pow(var(--t), 2) * var(--transition-easeInOutExpo-x2) + pow(var(--t), 3)
		);
	}
	@function --breadcrumb-ease-distance(--t <number>) returns <number> {
		result: calc(3 * pow(var(--t), 2) - 2 * pow(var(--t), 3));
	}
	@function --breadcrumb-cover-position(--v <length>) returns <percentage> {
		result: calc(
			(
					1 + var(--v) /
						(var(---breadcrumb-clearance-flow-height) + var(---breadcrumb-clearance-view-size))
				) *
				50%
		);
	}
	@function --breadcrumb-circle-clearance(
			--y <length>,
			--height <length>,
			--center <length>,
			--radius <length>,
			--offset <length>,
			--inline-radius <length>: var(--radius),
			--distance <length>: max(0px, abs(var(--y) + var(--height) / 2 - var(--center)) - var(--height) / 2)
		)
		returns <number> {
		result: if(style(--radius: 0px): 0; else: calc(
			max(
					0px,
					var(--offset) +
						sqrt(max(0, pow(var(--radius) / 1px, 2) - pow(var(--distance) / 1px, 2))) * 1px * var(--inline-radius) / var(--radius)
				) /
				1px * clamp(0, sign(calc(var(--radius) - var(--distance))), 1)
		));
	}
	@function --breadcrumb-clearance-join(--axis <number>, --gap <length>, --positive-offset <number>: clamp(0, sign(var(---breadcrumb-clearance-inlineOffset)), 1)) returns <length> {
		--radius: var(---breadcrumb-clearance-arc-radius);
		--inline-radius: var(---breadcrumb-clearance-arc-inlineRadius);
		--k: max(-1, calc(var(---breadcrumb-clearance-inlineOffset) / var(--inline-radius)));
		--positive: max(0, var(--k));
		--negative: min(0, var(--k));
		--g: calc(var(--gap) / var(--radius));
		--d: sqrt(calc((1 - var(--negative)) * (1 + var(--negative))));
		--h: calc(var(--d) + var(--g) / 2);
		--q: sqrt(calc(pow(var(--positive), 2) + var(--g) * (var(--d) + var(--g) / 4)));
		--c: if(style(--positive-offset: 0): calc((1 - var(--k)) * (1 + var(--k)) / (var(--h) - var(--k) * var(--q))); else: calc((var(--h) + var(--k) * var(--q)) / (pow(var(--h), 2) + pow(var(--k), 2))));
		--s: if(style(--positive-offset: 0): sqrt(max(0, calc((1 - var(--c)) * (1 + var(--c))))); else: calc(var(--g) * (1 + var(--g) / 4) / (var(--h) * var(--q) + var(--k))));
		result: if(style(---breadcrumb-clearance-arc-radius: 0px) or style(---breadcrumb-clearance-arc-inlineRadius: 0px) or style(--gap: 0px): 0px; style(--axis: 0): calc(var(--radius) * var(--c)); style(--positive-offset: 0): calc(var(--inline-radius) * (var(--d) - var(--c)) * (var(--d) + var(--c)) / (var(--s) - var(--k))); else: calc(var(--inline-radius) * (var(--k) + var(--s))));
	}
	@function --breadcrumb-rounded-clearance(
		--y <length>, --height <length>, --center <length>, --radius <length>,
		--offset <length>, --inline-radius <length>, --gap <length>,
		--distance <length>: max(0px, abs(var(--y) + var(--height) / 2 - var(--center)) - var(--height) / 2),
		--z <number>: max(0, calc((var(---breadcrumb-clearance-contact) + var(--gap) - var(--distance)) / 1px)),
		--u <number>: if(style(--radius: 0px) or style(--inline-radius: 0px) or style(--gap: 0px): 0; else: clamp(0, calc(2 * var(--z) / (var(--gap) / 1px + sqrt(pow(var(--gap) / 1px, 2) + 4 * (var(---breadcrumb-clearance-contact) - var(---breadcrumb-clearance-joinBlock)) / 1px * var(--z)))), 1))
	) returns <number> {
		--circle: --breadcrumb-circle-clearance(var(--y), var(--height), var(--center), var(--radius), var(--offset), var(--inline-radius), var(--distance));
		/* The quadratic joins the native path to the ellipse along its supporting tangent. */
		result: if(style(--radius: 0px) or style(--inline-radius: 0px) or style(--gap: 0px): var(--circle); else: max(var(--circle), calc(var(---breadcrumb-clearance-joinInline) / 1px * pow(var(--u), 2))));
	}
	@function --breadcrumb-clearance-contact() returns <length> {
		result: if(style(---breadcrumb-clearance-arc-inlineRadius: 0px): 0px; else: calc(
			sqrt(
					max(
						0,
						pow(var(---breadcrumb-clearance-arc-radius) / 1px, 2) -
							pow(min(0px, var(---breadcrumb-clearance-inlineOffset)) * var(---breadcrumb-clearance-arc-radius) / var(---breadcrumb-clearance-arc-inlineRadius) / 1px, 2)
					)
				) *
				1px
		));
	}
	@function --breadcrumb-clearance-distance(--angle <angle>) returns <length> {
		result: calc((var(---breadcrumb-clearance-contact) + var(--stickyBreadcrumb-clearanceGap, 0px)) * cos(var(--angle)));
	}
	@function --breadcrumb-clearance-stop(--y <length>, --v <length>) {
		result: --breadcrumb-rounded-clearance(
				var(--y),
				var(---breadcrumb-clearance-arc-height),
				var(---breadcrumb-clearance-arc-centerY),
				var(---breadcrumb-clearance-arc-radius),
				var(---breadcrumb-clearance-inlineOffset),
				var(---breadcrumb-clearance-arc-inlineRadius), var(--stickyBreadcrumb-clearanceGap, 0px)
			)
			--breadcrumb-cover-position(var(--v));
	}
	@function --breadcrumb-clearance-flow-point(--x <number>, --distance <length>, --edge <number>) {
		result: var(--x) --breadcrumb-cover-position(calc(
			var(---breadcrumb-clearance-native-a) - var(---breadcrumb-clearance-arc-centerY) -
			(1 - 2 * var(--edge)) * var(--distance) + var(--edge) * var(---breadcrumb-clearance-arc-height)
		));
	}
	@function --breadcrumb-clearance-cap-stop(--u <number>, --edge <number>) {
		result: --breadcrumb-clearance-flow-point(
			calc(var(---breadcrumb-clearance-joinInline) / 1px * pow(var(--u), 2)),
			calc(var(---breadcrumb-clearance-contact) + var(--stickyBreadcrumb-clearanceGap, 0px) -
				var(--stickyBreadcrumb-clearanceGap, 0px) * var(--u) -
				(var(---breadcrumb-clearance-contact) - var(---breadcrumb-clearance-joinBlock)) * pow(var(--u), 2)),
			var(--edge)
		);
	}
	@function --breadcrumb-clearance-tangent-stop(
		--index <number>, --edge <number>,
		--start <angle>: acos(clamp(0, calc(var(---breadcrumb-clearance-joinBlock) / var(---breadcrumb-clearance-arc-radius)), 1)),
		--alpha <angle>: calc(var(--start) + (90deg - var(--start)) * pow(var(--index) / 16, 2)),
		--beta <angle>: calc(var(--start) + (90deg - var(--start)) * pow((var(--index) + 1) / 16, 2)),
		--middle <angle>: calc((var(--alpha) + var(--beta)) / 2),
		--half <angle>: calc((var(--beta) - var(--alpha)) / 2)
	) {
		result: --breadcrumb-clearance-flow-point(
			max(0, calc((var(---breadcrumb-clearance-inlineOffset) + var(---breadcrumb-clearance-arc-inlineRadius) * sin(var(--middle)) / cos(var(--half))) / 1px)),
			calc(var(---breadcrumb-clearance-arc-radius) * cos(var(--middle)) / cos(var(--half))),
			var(--edge)
		);
	}
	@function --breadcrumb-clearance-flow-stop(--angle <angle>, --edge <number>) {
		--y: calc(
			var(---breadcrumb-clearance-arc-centerY) + (1 - 2 * var(--edge)) *
				--breadcrumb-clearance-distance(var(--angle)) -
				var(--edge) * var(---breadcrumb-clearance-arc-height)
		);
		result: --breadcrumb-clearance-stop(
			var(--y),
			calc(var(---breadcrumb-clearance-native-a) - var(--y))
		);
	}
	@function --breadcrumb-clearance-flow-easing(--gap <length>: var(--stickyBreadcrumb-clearanceGap, 0px)) {
		result: if(style(---breadcrumb-clearance-arc-radius: 0px): linear(0, 0); style(--gap: 0px): linear(
						0 0%,
						0
							--breadcrumb-cover-position(
								calc(
									var(---breadcrumb-clearance-view-size) / 2 - var(---breadcrumb-clearance-contact) - var(--stickyBreadcrumb-clearanceGap, 0px)
								)
							),
						--breadcrumb-clearance-flow-stop(2.8125deg, 0),
						--breadcrumb-clearance-flow-stop(5.625deg, 0),
						--breadcrumb-clearance-flow-stop(8.4375deg, 0),
						--breadcrumb-clearance-flow-stop(11.25deg, 0),
						--breadcrumb-clearance-flow-stop(14.0625deg, 0),
						--breadcrumb-clearance-flow-stop(16.875deg, 0),
						--breadcrumb-clearance-flow-stop(19.6875deg, 0),
						--breadcrumb-clearance-flow-stop(22.5deg, 0),
						--breadcrumb-clearance-flow-stop(25.3125deg, 0),
						--breadcrumb-clearance-flow-stop(28.125deg, 0),
						--breadcrumb-clearance-flow-stop(30.9375deg, 0),
						--breadcrumb-clearance-flow-stop(33.75deg, 0),
						--breadcrumb-clearance-flow-stop(36.5625deg, 0),
						--breadcrumb-clearance-flow-stop(39.375deg, 0),
						--breadcrumb-clearance-flow-stop(42.1875deg, 0),
						--breadcrumb-clearance-flow-stop(45deg, 0),
						--breadcrumb-clearance-flow-stop(47.8125deg, 0),
						--breadcrumb-clearance-flow-stop(50.625deg, 0),
						--breadcrumb-clearance-flow-stop(53.4375deg, 0),
						--breadcrumb-clearance-flow-stop(56.25deg, 0),
						--breadcrumb-clearance-flow-stop(59.0625deg, 0),
						--breadcrumb-clearance-flow-stop(61.875deg, 0),
						--breadcrumb-clearance-flow-stop(64.6875deg, 0),
						--breadcrumb-clearance-flow-stop(67.5deg, 0),
						--breadcrumb-clearance-flow-stop(70.3125deg, 0),
						--breadcrumb-clearance-flow-stop(73.125deg, 0),
						--breadcrumb-clearance-flow-stop(75.9375deg, 0),
						--breadcrumb-clearance-flow-stop(78.75deg, 0),
						--breadcrumb-clearance-flow-stop(81.5625deg, 0),
						--breadcrumb-clearance-flow-stop(84.375deg, 0),
						--breadcrumb-clearance-flow-stop(87.1875deg, 0),
						--breadcrumb-clearance-flow-stop(90deg, 0),
						--breadcrumb-clearance-flow-stop(90deg, 1),
						--breadcrumb-clearance-flow-stop(87.1875deg, 1),
						--breadcrumb-clearance-flow-stop(84.375deg, 1),
						--breadcrumb-clearance-flow-stop(81.5625deg, 1),
						--breadcrumb-clearance-flow-stop(78.75deg, 1),
						--breadcrumb-clearance-flow-stop(75.9375deg, 1),
						--breadcrumb-clearance-flow-stop(73.125deg, 1),
						--breadcrumb-clearance-flow-stop(70.3125deg, 1),
						--breadcrumb-clearance-flow-stop(67.5deg, 1),
						--breadcrumb-clearance-flow-stop(64.6875deg, 1),
						--breadcrumb-clearance-flow-stop(61.875deg, 1),
						--breadcrumb-clearance-flow-stop(59.0625deg, 1),
						--breadcrumb-clearance-flow-stop(56.25deg, 1),
						--breadcrumb-clearance-flow-stop(53.4375deg, 1),
						--breadcrumb-clearance-flow-stop(50.625deg, 1),
						--breadcrumb-clearance-flow-stop(47.8125deg, 1),
						--breadcrumb-clearance-flow-stop(45deg, 1),
						--breadcrumb-clearance-flow-stop(42.1875deg, 1),
						--breadcrumb-clearance-flow-stop(39.375deg, 1),
						--breadcrumb-clearance-flow-stop(36.5625deg, 1),
						--breadcrumb-clearance-flow-stop(33.75deg, 1),
						--breadcrumb-clearance-flow-stop(30.9375deg, 1),
						--breadcrumb-clearance-flow-stop(28.125deg, 1),
						--breadcrumb-clearance-flow-stop(25.3125deg, 1),
						--breadcrumb-clearance-flow-stop(22.5deg, 1),
						--breadcrumb-clearance-flow-stop(19.6875deg, 1),
						--breadcrumb-clearance-flow-stop(16.875deg, 1),
						--breadcrumb-clearance-flow-stop(14.0625deg, 1),
						--breadcrumb-clearance-flow-stop(11.25deg, 1),
						--breadcrumb-clearance-flow-stop(8.4375deg, 1),
						--breadcrumb-clearance-flow-stop(5.625deg, 1),
						--breadcrumb-clearance-flow-stop(2.8125deg, 1),
						0
							--breadcrumb-cover-position(
								calc(
									var(---breadcrumb-clearance-view-size) / 2 +
										var(---breadcrumb-clearance-arc-height) + var(---breadcrumb-clearance-contact) + var(--stickyBreadcrumb-clearanceGap, 0px)
								)
							),
						0 100%
													); else: linear(
			0 0%,
			--breadcrumb-clearance-cap-stop(0, 0),
			--breadcrumb-clearance-cap-stop(0.125, 0),
			--breadcrumb-clearance-cap-stop(0.25, 0),
			--breadcrumb-clearance-cap-stop(0.375, 0),
			--breadcrumb-clearance-cap-stop(0.5, 0),
			--breadcrumb-clearance-cap-stop(0.625, 0),
			--breadcrumb-clearance-cap-stop(0.75, 0),
			--breadcrumb-clearance-cap-stop(0.875, 0),
			--breadcrumb-clearance-cap-stop(1, 0),
			--breadcrumb-clearance-tangent-stop(0, 0),
			--breadcrumb-clearance-tangent-stop(1, 0),
			--breadcrumb-clearance-tangent-stop(2, 0),
			--breadcrumb-clearance-tangent-stop(3, 0),
			--breadcrumb-clearance-tangent-stop(4, 0),
			--breadcrumb-clearance-tangent-stop(5, 0),
			--breadcrumb-clearance-tangent-stop(6, 0),
			--breadcrumb-clearance-tangent-stop(7, 0),
			--breadcrumb-clearance-tangent-stop(8, 0),
			--breadcrumb-clearance-tangent-stop(9, 0),
			--breadcrumb-clearance-tangent-stop(10, 0),
			--breadcrumb-clearance-tangent-stop(11, 0),
			--breadcrumb-clearance-tangent-stop(12, 0),
			--breadcrumb-clearance-tangent-stop(13, 0),
			--breadcrumb-clearance-tangent-stop(14, 0),
			--breadcrumb-clearance-tangent-stop(15, 0),
			--breadcrumb-clearance-flow-point(max(0, calc((var(---breadcrumb-clearance-inlineOffset) + var(---breadcrumb-clearance-arc-inlineRadius)) / 1px)), 0px, 0),
			--breadcrumb-clearance-flow-point(max(0, calc((var(---breadcrumb-clearance-inlineOffset) + var(---breadcrumb-clearance-arc-inlineRadius)) / 1px)), 0px, 1),
			--breadcrumb-clearance-tangent-stop(15, 1),
			--breadcrumb-clearance-tangent-stop(14, 1),
			--breadcrumb-clearance-tangent-stop(13, 1),
			--breadcrumb-clearance-tangent-stop(12, 1),
			--breadcrumb-clearance-tangent-stop(11, 1),
			--breadcrumb-clearance-tangent-stop(10, 1),
			--breadcrumb-clearance-tangent-stop(9, 1),
			--breadcrumb-clearance-tangent-stop(8, 1),
			--breadcrumb-clearance-tangent-stop(7, 1),
			--breadcrumb-clearance-tangent-stop(6, 1),
			--breadcrumb-clearance-tangent-stop(5, 1),
			--breadcrumb-clearance-tangent-stop(4, 1),
			--breadcrumb-clearance-tangent-stop(3, 1),
			--breadcrumb-clearance-tangent-stop(2, 1),
			--breadcrumb-clearance-tangent-stop(1, 1),
			--breadcrumb-clearance-tangent-stop(0, 1),
			--breadcrumb-clearance-cap-stop(1, 1),
			--breadcrumb-clearance-cap-stop(0.875, 1),
			--breadcrumb-clearance-cap-stop(0.75, 1),
			--breadcrumb-clearance-cap-stop(0.625, 1),
			--breadcrumb-clearance-cap-stop(0.5, 1),
			--breadcrumb-clearance-cap-stop(0.375, 1),
			--breadcrumb-clearance-cap-stop(0.25, 1),
			--breadcrumb-clearance-cap-stop(0.125, 1),
			--breadcrumb-clearance-cap-stop(0, 1),
			0 100%
		));
	}
	@function --breadcrumb-clearance-pre(--angle <angle>) {
		--y: max(
			calc(var(---breadcrumb-clearance-native-a) - var(---breadcrumb-clearance-view-size)),
			calc(
				var(---breadcrumb-clearance-arc-centerY) + --breadcrumb-clearance-distance(var(--angle))
			)
		);
		result: --breadcrumb-clearance-stop(
			var(--y),
			calc(var(---breadcrumb-clearance-native-a) - var(--y))
		);
	}
	@function --breadcrumb-clearance-post(--t <number>) {
		--v: calc(
			var(---breadcrumb-clearance-view-size) +
				(var(---breadcrumb-clearance-arrival-end) - var(---breadcrumb-clearance-view-size)) *
				--breadcrumb-ease-time(var(--t))
		);
		--y: calc(
			max(
					var(---breadcrumb-clearance-arc-baseY),
					var(---breadcrumb-clearance-native-a) - var(--v)
				) +
				var(---breadcrumb-clearance-arc-deltaY) * --breadcrumb-ease-distance(var(--t))
		);
		result: --breadcrumb-clearance-stop(var(--y), var(--v));
	}
	@function --breadcrumb-clearance-final() returns <number> {
		--y: calc(
			max(
					var(---breadcrumb-clearance-arc-baseY),
					var(---breadcrumb-clearance-native-a) - var(---breadcrumb-clearance-arrival-end)
				) +
				var(---breadcrumb-clearance-arc-deltaY)
		);
		result: --breadcrumb-rounded-clearance(
			var(--y),
			var(---breadcrumb-clearance-arc-height),
			var(---breadcrumb-clearance-arc-centerY),
			var(---breadcrumb-clearance-arc-radius),
			var(---breadcrumb-clearance-inlineOffset),
			var(---breadcrumb-clearance-arc-inlineRadius), var(--stickyBreadcrumb-clearanceGap, 0px)
		);
	}

	@property ---breadcrumb-clearance-contact {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-joinBlock {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-joinInline {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}

	@property ---breadcrumb-clearance-inlineOffset {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-arc-inlineRadius {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-arc-radius {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-arc-centerY {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-arc-baseY {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-arc-height {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-arc-deltaY {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-flow-fraction {
		syntax: '<number>';
		inherits: false;
		initial-value: 1;
	}
	@property ---breadcrumb-clearance-flow-height {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-view-size {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@property ---breadcrumb-clearance-native-a {
		syntax: '<length>';
		inherits: false;
		initial-value: 0px;
	}
	@keyframes breadcrumb-clearance-measure {
		from {
			---breadcrumb-clearance-flow-fraction: 0;
		}
		to {
			---breadcrumb-clearance-flow-fraction: 1;
		}
	}
	@keyframes breadcrumb-clearance-inline {
		from {
			transform: translateX(0px);
		}
		to {
			transform: translateX(calc(-1 * var(---inlineDirection) * 1px));
		}
	}
	@keyframes breadcrumb-clearance-block {
		from {
			translate: 0px 0px;
		}
		to {
			translate: 0px var(---breadcrumb-clearance-arc-deltaY);
		}
	}
	@property ---breadcrumb-endWidth {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-endHeight {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-endGap {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-availableInlineSize {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-width {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-height {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-compactItemHeight {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-trialMargin {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-rowHeight {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-inlineStart {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-endProgress {
		syntax: '<number>';
		inherits: false;
		initial-value: 1;
	}
	@property --stickyBreadcrumb-scale {
		syntax: '<number>';
		inherits: true;
		initial-value: 1;
	}
	@property ---breadcrumb-glyph-threshold {
		syntax: '<percentage>';
		inherits: true;
		initial-value: 100%;
	}
	@property ---breadcrumb-iconTranslateBlock {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-iconCorrection {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-itemInline {
		syntax: '<number>';
		inherits: false;
		initial-value: 1;
	}
	@property ---breadcrumb-itemBlock {
		syntax: '<number>';
		inherits: false;
		initial-value: 1;
	}
	@property ---breadcrumb-endInline {
		syntax: '<number>';
		inherits: false;
		initial-value: 1;
	}
	@property ---breadcrumb-endBlock {
		syntax: '<number>';
		inherits: false;
		initial-value: 1;
	}
	@property ---breadcrumb-inlineEnd {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-blockStart {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-blockEnd {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---breadcrumb-wrap {
		syntax: '<number>';
		inherits: true;
		initial-value: 1;
	}
	@property ---breadcrumb-entry {
		syntax: '<number>';
		inherits: true;
		initial-value: 0;
	}
	@property --stickyBreadcrumb-sourcePaddingBlock {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property --stickyBreadcrumb-sourcePaddingInline {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@keyframes breadcrumb-item-inline {
		from {
			---breadcrumb-itemInline: 0;
		}
		to {
			---breadcrumb-itemInline: 1;
		}
	}
	@keyframes breadcrumb-item-block {
		from {
			---breadcrumb-itemBlock: 0;
		}
		to {
			---breadcrumb-itemBlock: 1;
		}
	}
	@keyframes breadcrumb-end-inline {
		from {
			---breadcrumb-endInline: 0;
		}
		to {
			---breadcrumb-endInline: 1;
		}
	}
	@keyframes breadcrumb-end-block {
		from {
			---breadcrumb-endBlock: 0;
		}
		to {
			---breadcrumb-endBlock: 1;
		}
	}
	@keyframes breadcrumb-backdrop {
		from {
			opacity: 0;
			visibility: hidden;
		}
		to {
			opacity: var(---pressable-opacity);
			visibility: visible;
		}
	}
	@keyframes breadcrumb-fade {
		from { opacity: 0; }
		to { opacity: var(---pressable-opacity); }
	}
	@keyframes breadcrumb-interactivity {
		from { interactivity: auto; }
		to { interactivity: inert; }
	}
	@keyframes breadcrumb-surface {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	[data-sticky-breadcrumb~="support"][data-sticky-breadcrumb~="fade"] > * {
		animation: breadcrumb-surface auto var(--stickyBreadcrumb-easing, linear) reverse both;
		animation-timeline: view(block var(---breadcrumb-blockEnd, var(--sticky-insetBlockStart)) 0px);
		animation-range: exit calc(100% - 1lh) exit 100%;
		@media (prefers-reduced-motion: reduce) {
			animation-timing-function: linear(0 0% 50%, 1 50% 100%);
		}
	}
	@keyframes breadcrumb-surface-exit {
		from { filter: opacity(0); }
		to { filter: opacity(1); }
	}
	@keyframes breadcrumb-support-scroll {
		from {
			translate: 0 0;
		}
		to {
			translate: 0 -100vh;
		}
	}
	/* Departing foreground stays above ordinary flow and below current rows. */
	@keyframes breadcrumb-exit-layer {
		from,
		to {
			z-index: 1;
		}
	}
	/* Keep the compact row in place while its taller natural box leaves the sticky constraint. */
	@keyframes breadcrumb-position-exit {
		from {
			translate: 0 0;
		}
		to {
			translate: 0 max(0px, calc(100% + var(--sticky-insetBlockStart) - var(---breadcrumb-blockEnd)));
		}
	}
	/* Quarter-ellipse samples use the shared InOutExpo pacing; only translation is animated. */
	@keyframes breadcrumb-arrival {
		0% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0) calc(var(---breadcrumb-arrivalBlock) * 0);
		}
		22.5999% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.0490677) calc(var(---breadcrumb-arrivalBlock) * 0.00120454);
		}
		29.6809% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.0980171) calc(var(---breadcrumb-arrivalBlock) * 0.00481527);
		}
		34.2607% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.14673) calc(var(---breadcrumb-arrivalBlock) * 0.0108235);
		}
		37.5724% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.19509) calc(var(---breadcrumb-arrivalBlock) * 0.0192147);
		}
		40.0938% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.24298) calc(var(---breadcrumb-arrivalBlock) * 0.0299687);
		}
		42.0706% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.290285) calc(var(---breadcrumb-arrivalBlock) * 0.0430597);
		}
		43.6497% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.33689) calc(var(---breadcrumb-arrivalBlock) * 0.0584559);
		}
		44.9278% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.382683) calc(var(---breadcrumb-arrivalBlock) * 0.0761205);
		}
		45.9731% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.427555) calc(var(---breadcrumb-arrivalBlock) * 0.0960107);
		}
		46.8364% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.471397) calc(var(---breadcrumb-arrivalBlock) * 0.118079);
		}
		47.5573% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.514103) calc(var(---breadcrumb-arrivalBlock) * 0.142271);
		}
		48.1678% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.55557) calc(var(---breadcrumb-arrivalBlock) * 0.16853);
		}
		48.6949% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.595699) calc(var(---breadcrumb-arrivalBlock) * 0.196792);
		}
		49.1621% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.634393) calc(var(---breadcrumb-arrivalBlock) * 0.22699);
		}
		49.5906% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.671559) calc(var(---breadcrumb-arrivalBlock) * 0.259049);
		}
		50% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.707107) calc(var(---breadcrumb-arrivalBlock) * 0.292893);
		}
		50.4094% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.740951) calc(var(---breadcrumb-arrivalBlock) * 0.328441);
		}
		50.8379% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.77301) calc(var(---breadcrumb-arrivalBlock) * 0.365607);
		}
		51.3051% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.803208) calc(var(---breadcrumb-arrivalBlock) * 0.404301);
		}
		51.8322% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.83147) calc(var(---breadcrumb-arrivalBlock) * 0.44443);
		}
		52.4427% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.857729) calc(var(---breadcrumb-arrivalBlock) * 0.485897);
		}
		53.1636% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.881921) calc(var(---breadcrumb-arrivalBlock) * 0.528603);
		}
		54.0269% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.903989) calc(var(---breadcrumb-arrivalBlock) * 0.572445);
		}
		55.0722% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.92388) calc(var(---breadcrumb-arrivalBlock) * 0.617317);
		}
		56.3503% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.941544) calc(var(---breadcrumb-arrivalBlock) * 0.66311);
		}
		57.9294% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.95694) calc(var(---breadcrumb-arrivalBlock) * 0.709715);
		}
		59.9062% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.970031) calc(var(---breadcrumb-arrivalBlock) * 0.75702);
		}
		62.4276% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.980785) calc(var(---breadcrumb-arrivalBlock) * 0.80491);
		}
		65.7393% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.989177) calc(var(---breadcrumb-arrivalBlock) * 0.85327);
		}
		70.3191% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.995185) calc(var(---breadcrumb-arrivalBlock) * 0.901983);
		}
		77.4001% {
			translate: calc(var(---breadcrumb-arrivalInline) * 0.998795) calc(var(---breadcrumb-arrivalBlock) * 0.950932);
		}
		100% {
			translate: calc(var(---breadcrumb-arrivalInline) * 1) calc(var(---breadcrumb-arrivalBlock) * 1);
		}
	}
	@keyframes breadcrumb-arrival-step {
		from { translate: 0px 0px; }
		to { translate: var(---breadcrumb-arrivalInline) var(---breadcrumb-arrivalBlock); }
	}
	@keyframes breadcrumb-end-progress {
		from {
			---breadcrumb-endProgress: 0;
		}
		to {
			---breadcrumb-endProgress: 1;
		}
	}
	@keyframes breadcrumb-item-motion {
		from {
			transform: scale(1);
		}
		to {
			transform: scale(calc(1 + var(---breadcrumb-itemActive) * (var(--stickyBreadcrumb-scale) - 1)));
		}
	}
	/* Relative child scales preserve the compact text/icon ratios without 3D projection. */
	@keyframes breadcrumb-marker-hash {
		from { opacity: var(---breadcrumb-markerHover, 0); }
		to { opacity: 0; }
	}
	@keyframes breadcrumb-marker-motion {
		from { transform: scale(1); }
		to { transform: scale(calc(1 / var(--stickyBreadcrumb-scale))); }
	}
	@keyframes breadcrumb-icon-motion {
		from {
			transform: translateY(0px) scale(1) translateX(0px) translateY(calc(-1em * var(---column-iconTop, 0)));
		}
		to {
			transform: translateY(calc(var(---breadcrumb-iconTranslateBlock, 0px) / var(--stickyBreadcrumb-scale)))
				scale(calc(var(--stickyBreadcrumb-iconScale, 1) / var(--stickyBreadcrumb-scale)))
				translateX(calc(-1em * var(---icon-leadingInset, 0) * var(---inlineDirection))) translateY(calc(-1em * var(---icon-ink-top, 0)));
		}
	}
	@keyframes breadcrumb-icon-detail {
		from { --icon-scale: 1; }
		to { --icon-scale: calc((var(---column-iconSize) + var(---breadcrumb-iconCorrection)) * var(--stickyBreadcrumb-scale) / var(--icon-size)); }
	}
	@keyframes breadcrumb-icon-complex {
		from {
			opacity: var(---breadcrumb-iconComplexFrom);
		}
		to {
			opacity: var(---breadcrumb-iconComplexTo);
		}
	}
	@keyframes breadcrumb-icon-simple {
		from {
			opacity: calc(1 - var(---breadcrumb-iconComplexFrom));
		}
		to {
			opacity: calc(1 - var(---breadcrumb-iconComplexTo));
		}
	}
	@keyframes breadcrumb-text-motion {
		from {
			transform: translateX(0px);
		}
		to {
			transform: translateX(calc(var(---breadcrumb-itemActive) * var(---inlineDirection) * var(---breadcrumb-iconInlineCorrection, var(---breadcrumb-iconCorrection))));
		}
	}
	/* Before / arriving / compact are discrete states; native properties own visual progress. */
	@keyframes breadcrumb-entry {
		from {
			---breadcrumb-entry: 0.5;
		}
		to {
			---breadcrumb-entry: 1;
		}
	}
	/* Fragment targets retain their parent inset even when their disclosure is closed. */
	[data-sticky-breadcrumb~="scope"] {
		---breadcrumb-parentBlockEnd: var(---breadcrumb-blockEnd);
		scroll-snap-align: start;
		scroll-margin-block-start: var(---breadcrumb-parentBlockEnd);
	}

	[data-sticky-breadcrumb~="end"] {
		--stickyBreadcrumb-endPaintAnimation: none;
		--stickyBreadcrumb-endPaintTimeline: var(--stickyBreadcrumb-entryTimeline);
		--stickyBreadcrumb-endPaintRange: var(--stickyBreadcrumb-entryRange);
		---breadcrumb-endPaintEasing: linear;
		&[data-badge] {
			background-image: linear-gradient(var(--badge-backgroundColor), var(--badge-backgroundColor));
			background-color: var(--background-primary);
		}
		@media (prefers-reduced-motion: reduce) {
			---breadcrumb-arrivalAnimation: breadcrumb-arrival-step;
			---breadcrumb-endPaintEasing: steps(1, end);
		}
		&:not(:where([data-sticky-breadcrumb~="contents"])),
		&[data-sticky-breadcrumb~="contents"] > :not([data-sticky-breadcrumb~="size-export"]),
		&[data-sticky-breadcrumb~="contents"]:not(:has(> [data-collapsible-marker]))::after {
			animation: var(--stickyBreadcrumb-endPaintAnimation);
			animation-timeline: var(--stickyBreadcrumb-endPaintTimeline);
			animation-range: var(--stickyBreadcrumb-endPaintRange);
		}
	}

	/* Visible destinations retain their clocks independently of sticky participation. */
	@scope (:root) to (details:not([open]) > :not(summary)) {
		/* Measure both dimensions horizontally so vertical scrolling cannot tick size clocks. */
		:is([data-sticky-breadcrumb~="scope"], [data-sticky-breadcrumb~="measure"])::before,
		:is([data-sticky-breadcrumb~="scope"], [data-sticky-breadcrumb~="measure"])::after,
		[data-sticky-breadcrumb~="measure"],
		[data-sticky-breadcrumb~="flow"]::before {
			position: fixed;
			inset: 0 auto auto 0;
			block-size: 1px;
			visibility: hidden;
			pointer-events: none;
			view-timeline-axis: inline;
			view-timeline-inset: 0;
		}
		[data-sticky-breadcrumb~="measure"] {
			&::before,
			&::after {
				content: if(style(---breadcrumb-hasEnd: 1): '' ; else: none);
			}
			&::before {
				inline-size: anchor-size(--breadcrumb-end inline, 0px);
				view-timeline-name: var(--stickyBreadcrumb-endInlineTimeline);
			}
			&::after {
				inline-size: anchor-size(--breadcrumb-end block, 0px);
				view-timeline-name: var(--stickyBreadcrumb-endBlockTimeline);
			}
		}
		[data-sticky-breadcrumb~="measure"] {
			inline-size: anchor-size(--column-firstRow inline, 0px);
			view-timeline-name: var(---breadcrumb-rowInlineTimeline);
		}
		[data-sticky-breadcrumb~="scope"] {
			---breadcrumb-hasEnd: 0;
			---breadcrumb-rowInlineTimeline: --breadcrumb-row-inline;
			---breadcrumb-rowBlockTimeline: --breadcrumb-row-block;
			---breadcrumb-sourceRowWidth: round(up, calc(100vw * (1 / var(---column-inlineFraction, 1) - 1)), 0.0625px);
			---breadcrumb-sourceRowHeight: round(nearest, calc(100vw * (1 / var(---column-blockFraction, 1) - 1)), 0.0625px);
			&:has(
				> [data-sticky-breadcrumb~="position"] [data-sticky-breadcrumb~="end"],
				> details > [data-sticky-breadcrumb~="position"] [data-sticky-breadcrumb~="end"]
			) {
				---breadcrumb-hasEnd: 1;
			}
			--stickyBreadcrumb-endInlineTimeline: --breadcrumb-end-inline;
			--stickyBreadcrumb-endBlockTimeline: --breadcrumb-end-block;
			---breadcrumb-endTimelines: var(--stickyBreadcrumb-endInlineTimeline), var(--stickyBreadcrumb-endBlockTimeline);
			---breadcrumb-endAnimationNames:
				if(style(---breadcrumb-hasEnd: 0): none; else: breadcrumb-end-inline),
				if(style(---breadcrumb-hasEnd: 0): none; else: breadcrumb-end-block);
			---breadcrumb-sizeAnimationNames: var(---breadcrumb-endAnimationNames), column-inline-size, column-block-size;
			---breadcrumb-sizeTimelines: var(---breadcrumb-endTimelines), var(---breadcrumb-rowInlineTimeline), var(---breadcrumb-rowBlockTimeline);
			---breadcrumb-sizeDirections: normal, normal, normal, normal;
			timeline-scope: var(---breadcrumb-sizeTimelines);
			@supports (timeline-scope: all) and (view-timeline-name: ident("a" "b")) {
				timeline-scope: none;
				---breadcrumb-rowInlineTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-row-inline");
				---breadcrumb-rowBlockTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-row-block");
				--stickyBreadcrumb-endInlineTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-end-inline");
				--stickyBreadcrumb-endBlockTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-end-block");
			}
			animation: none auto linear both;
			animation-name: var(---breadcrumb-sizeAnimationNames);
			animation-direction: var(---breadcrumb-sizeDirections);
			animation-timeline: var(---breadcrumb-sizeTimelines);
			---breadcrumb-endWidth: round(up, calc(100vw * (1 / var(---breadcrumb-endInline) - 1)), 0.0625px);
			---breadcrumb-endHeight: round(nearest, calc(100vw * (1 / var(---breadcrumb-endBlock) - 1)), 0.0625px);
			&:has(> details:not([open])) {
				---breadcrumb-endPositionTimeline: --breadcrumb-end-position;
				---breadcrumb-endFlowTimeline: --breadcrumb-end-flow;
				---breadcrumb-endFlowSupported: --breadcrumb-clearance-supported();
				---breadcrumb-sizeAnimationNames:
					var(---breadcrumb-endAnimationNames), column-inline-size, column-block-size,
					if(style(---breadcrumb-hasEnd: 1) and style(---breadcrumb-endFlowSupported: 1) and style(--collapsible-markerMotion: clearance): clearance-inline-measure; else: none);
				---breadcrumb-sizeTimelines: var(---breadcrumb-endTimelines), var(---breadcrumb-rowInlineTimeline), var(---breadcrumb-rowBlockTimeline), var(---breadcrumb-endPositionTimeline);
				---breadcrumb-sizeDirections: normal, normal, normal, normal, normal;
				timeline-scope: var(---breadcrumb-sizeTimelines), var(---breadcrumb-endFlowTimeline);
				@supports (timeline-scope: all) and (view-timeline-name: ident("a" "b")) {
					timeline-scope: none;
					---breadcrumb-endPositionTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-end-position");
					---breadcrumb-endFlowTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-end-flow");
				}
				---breadcrumb-endViewportInlineEnd: calc(
					(100vw + var(---breadcrumb-endWidth)) *
						(0.5 + var(---inlineDirection) * (0.5 - var(---clearance-inlineFraction)))
				);
				&[data-sticky-breadcrumb~="size"] {
					---breadcrumb-sizeAnimationNames: var(---breadcrumb-endAnimationNames), column-inline-size, column-block-size,
						if(style(---breadcrumb-hasEnd: 1) and style(---breadcrumb-endFlowSupported: 1) and style(--collapsible-markerMotion: clearance): clearance-inline-measure; else: none);
					---breadcrumb-sizeRanges: var(---breadcrumb-endSizeRanges), exit-crossing 0% exit-crossing 100%, exit-crossing 0% exit-crossing 100%, cover 0% cover 100%;
					---breadcrumb-sizeTimelines: var(--stickyBreadcrumb-endInlineTimeline), var(--stickyBreadcrumb-endBlockTimeline), var(---breadcrumb-rowInlineTimeline), var(---breadcrumb-rowBlockTimeline), var(---breadcrumb-endPositionTimeline);
					---breadcrumb-sizeDirections: reverse, reverse, reverse, reverse, normal;
				}
			}
			--stickyBreadcrumb-minBlockSize: 0px;
			---breadcrumb-sourceBorderWidth: 0px;
			position: relative;
			anchor-scope:
				--breadcrumb-source, --breadcrumb-end, --breadcrumb-position, --breadcrumb-compact, --column-firstRow;
			&[data-card~="border-accent"] {
				---breadcrumb-sourceBorderWidth: var(--card-borderWidth);
			}
			> [data-sticky-breadcrumb~="position"],
			> details > [data-sticky-breadcrumb~="position"] {
				anchor-name: --breadcrumb-position;
				&[data-column~="span-start"],
				&:is(summary):not(:has(> [data-sticky-breadcrumb~="support"])) > [data-column~="span-start"] {
					---column-break: clamp(0, sign(var(--column-wrapRatio, 4) - var(---breadcrumb-sourceRowWidth) / max(1px, var(---breadcrumb-sourceRowHeight))), 1);
				}
				&:is(summary):has(> [data-column~="span-start"]) {
					align-items: start;
					&:not(:has(> [data-sticky-breadcrumb~="support"])) > [data-column~="span-start"] {
						animation: none;
					}
					> [data-column~="span-start"] {
						timeline-scope: none;
						anchor-scope: none;
						&::before,
						&::after {
							content: none;
						}
					}
				}
				anchor-scope: none;
				&:is(details:not([open]) > summary) {
					--sticky-zIndex: 1;
					z-index: var(--sticky-zIndex);
					position: relative;
				}
				[data-sticky-breadcrumb~="source"] {
					anchor-name: --breadcrumb-source;
				}
				[data-sticky-breadcrumb~="end"] {
					anchor-name: --breadcrumb-end;
				}
			}
			> [data-sticky-breadcrumb~="flow"]:not([data-sticky-breadcrumb~="exit"]) {
				&::before {
					content: '';
					inline-size: anchor-size(--column-firstRow block, 0px);
					view-timeline-name: var(---breadcrumb-rowBlockTimeline);
				}
				display: block;
				position: absolute;
				pointer-events: none;
				inset-inline-start: 0;
				inset-block-start: calc(-1 * (var(---breadcrumb-parentBlockEnd) + var(---breadcrumb-sourceBorderWidth)));
				inline-size: 1px;
				block-size: calc(anchor-size(--breadcrumb-position block) + var(---breadcrumb-parentBlockEnd) + var(---breadcrumb-sourceBorderWidth));
				view-timeline-name: var(--stickyBreadcrumb-entryTimeline);
				view-timeline-axis: block;
				view-timeline-inset: 0 calc(100vh - var(---breadcrumb-blockEnd));
			}
			> [data-sticky-breadcrumb~="approach"] {
				position: absolute;
				pointer-events: none;
				inset-inline-start: 0;
				inset-block-start: calc(-1 * (var(---breadcrumb-parentBlockEnd) + var(---breadcrumb-sourceBorderWidth)));
				inline-size: 1px;
				block-size: max(calc(anchor-size(--breadcrumb-source block) * var(--stickyBreadcrumb-scale)), var(--stickyBreadcrumb-minBlockSize));
				view-timeline: var(--stickyBreadcrumb-approachTimeline) block;
				view-timeline-inset: 0;
			}
			&[data-sticky-breadcrumb~="size"] {
				---breadcrumb-endSizeRanges: exit-crossing 0% exit-crossing 100%, exit-crossing 0% exit-crossing 100%;
				---breadcrumb-sizeAnimationNames: var(---breadcrumb-endAnimationNames), column-inline-size, column-block-size;
				---breadcrumb-sizeRanges: var(---breadcrumb-endSizeRanges), exit-crossing 0% exit-crossing 100%, exit-crossing 0% exit-crossing 100%;
				---breadcrumb-sizeTimelines: var(--stickyBreadcrumb-endInlineTimeline), var(--stickyBreadcrumb-endBlockTimeline), var(---breadcrumb-rowInlineTimeline), var(---breadcrumb-rowBlockTimeline);
				animation-range: var(---breadcrumb-sizeRanges);
				---breadcrumb-sizeDirections: reverse, reverse, reverse, reverse;
			}

		}
	}

	/* Native disclosure state bounds sticky participation, including its visible summary. */
	@scope (:root) to (details:not([open]), [data-sticky-breadcrumb~="scope"]:has(> details:not([open]))) {
		[data-sticky-breadcrumb~="position"]
			:is(a[data-sticky-breadcrumb~="item"], [data-sticky-breadcrumb~="item"] > a:first-child, [data-sticky-breadcrumb~="item"] > h1 > a:first-child) {
			---breadcrumb-markerWrap: var(---breadcrumb-wrap);
			---breadcrumb-markerHover: 0;
			&:is(:hover, :focus-visible) { ---breadcrumb-markerHover: 1; }

			&::before,
			&::after {
				transform-origin: calc(50% + 50% * var(---inlineDirection)) 50%;
				animation: breadcrumb-marker-motion auto var(---breadcrumb-inlineEasing) both, breadcrumb-marker-hash auto var(--stickyBreadcrumb-easing, steps(1, start)) both;
				animation-timeline: var(--stickyBreadcrumb-entryTimeline);
				animation-range: var(--stickyBreadcrumb-entryRange);
				@media (prefers-reduced-motion: reduce) { animation-timing-function: steps(1, end), steps(1, start); }
			}
			&::before {
				animation-name: breadcrumb-marker-motion, if(style(---breadcrumb-markerWrap: 1): none; else: breadcrumb-marker-hash);
			}
			&::after {
				content: '›' / '';
				position: absolute;
				inset-inline-end: 100%;
				inline-size: calc(var(--stickyBreadcrumb-markerSize) + var(--stickyBreadcrumb-gap, 1rem));
				padding: 0;
				font-family: var(--fontFamily-avenir), 'Noto Color Emoji';
				font-size: var(--stickyBreadcrumb-markerSize);
				line-height: calc(1 / 0.7);
				text-align: center;
				pointer-events: none;
				opacity: 0;
				animation-name: breadcrumb-marker-motion, if(style(---breadcrumb-markerWrap: 1): none; else: breadcrumb-surface);
			}
		}

		[data-sticky-breadcrumb~="scope"] {
			--stickyBreadcrumb-entryRange: exit-crossing 0% contain 100%;
			/* Only the visual row departs; supporting content retains its ordinary opacity. */
			--stickyBreadcrumb-exitAnimation: breadcrumb-backdrop auto var(--stickyBreadcrumb-easing, var(--transition-easeInExpo)) reverse both;
			@supports (interactivity: inert) {
				--stickyBreadcrumb-exitAnimation:
					breadcrumb-fade auto var(--stickyBreadcrumb-easing, var(--transition-easeInExpo)) reverse both,
					breadcrumb-interactivity auto steps(1, end) both;
			}
			---breadcrumb-exitLayerAnimation: if(
				style(--stickyBreadcrumb-exitAnimation: none): none;
				else: breadcrumb-exit-layer auto steps(1, start) forwards
			);
			--stickyBreadcrumb-itemInlineTimeline: --breadcrumb-item-inline;
			--stickyBreadcrumb-itemBlockTimeline: --breadcrumb-item-block;
			---breadcrumb-exitTimeline: --breadcrumb-exit;
			---breadcrumb-clearance-sizeTimeline: --breadcrumb-clearance-size;
			---breadcrumb-clearance-supported: 0;
			---breadcrumb-itemTimelines: var(--stickyBreadcrumb-itemInlineTimeline), var(--stickyBreadcrumb-itemBlockTimeline);
			---breadcrumb-sizeTimelines:
				var(---breadcrumb-itemTimelines), var(---breadcrumb-endTimelines),
				var(---breadcrumb-rowInlineTimeline), var(---breadcrumb-rowBlockTimeline), var(---breadcrumb-clearance-sizeTimeline);
			container-type: inline-size;
			timeline-scope: var(---breadcrumb-sizeTimelines), var(--stickyBreadcrumb-entryTimeline);
			@supports (timeline-scope: all) and (view-timeline-name: ident("a" "b")) {
				--stickyBreadcrumb-itemInlineTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-item-inline");
				--stickyBreadcrumb-itemBlockTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-item-block");
				---breadcrumb-exitTimeline: ident(var(--stickyBreadcrumb-entryTimeline) "-exit");
				timeline-scope: none;
			}
			---breadcrumb-sizeDirections: normal, normal, normal, normal, normal, normal, normal;
			view-timeline: var(---breadcrumb-exitTimeline) block;
			view-timeline-inset: 0;
			---breadcrumb-sizeAnimationNames:
				breadcrumb-item-inline, breadcrumb-item-block,
				var(---breadcrumb-endAnimationNames),
				column-inline-size, column-block-size,
				if(
					style(--stickyBreadcrumb-clearance: circle) and
						style(---breadcrumb-clearance-supported: 1): breadcrumb-clearance-measure; else: none
				);

			&[data-sticky-breadcrumb~="clearance"] {
				---breadcrumb-clearance-supported: --breadcrumb-clearance-supported();
				@container style(--stickyBreadcrumb-clearance: circle) {
					---breadcrumb-clearance-flow-height: round(
						nearest,
						calc(100vw * (1 / var(---breadcrumb-clearance-flow-fraction) - 1)),
						0.0625px
					);
					@supports (timeline-scope: all) and (view-timeline-name: ident('a' 'b')) {
						---breadcrumb-clearance-sizeTimeline: ident(
							var(--stickyBreadcrumb-entryTimeline) '-clearance-size'
						);
					}
					> [data-sticky-breadcrumb~="flow"]:not([data-sticky-breadcrumb~="exit"])::after {
						content: if(style(---breadcrumb-clearance-supported: 1): '' ; else: none);
						position: fixed;
						inset: 0 auto auto 0;
						visibility: hidden;
						pointer-events: none;
						inline-size: anchor-size(--breadcrumb-position block);
						block-size: 1px;
						view-timeline: var(---breadcrumb-clearance-sizeTimeline) inline;
						view-timeline-inset: 0;
					}
				}
			}
			/* Sizes belong to the scope; changing arrival progress belongs to its heading. */
			/* Stable subpixel sizes suppress timeline reconstruction noise; outward widths preserve fit decisions. */
			---breadcrumb-itemWidth: round(up, calc(100vw * (1 / var(---breadcrumb-itemInline) - 1)), 0.0625px);
			---breadcrumb-itemHeight: round(nearest, calc(100vw * (1 / var(---breadcrumb-itemBlock) - 1)), 0.0625px);
			---breadcrumb-parentInlineEnd: var(---breadcrumb-inlineEnd);
			---breadcrumb-parentBlockStart: var(---breadcrumb-blockStart);
			--stickyBreadcrumb-forceRow: 0;
			&[data-sticky-breadcrumb~="root"] {
				--stickyBreadcrumb-forceRow: 1;
				---breadcrumb-parentInlineEnd: 0px;
				---breadcrumb-parentBlockStart: var(--stickyBreadcrumb-insetBlockStart, 0px);
				---breadcrumb-parentBlockEnd: var(--stickyBreadcrumb-insetBlockStart, 0px);
				---breadcrumb-sizeAnimationNames: column-inline-size;
				---breadcrumb-sizeTimelines: var(---breadcrumb-rowInlineTimeline);
				---breadcrumb-sizeDirections: reverse;
				animation-range: exit-crossing 0% exit-crossing 100%;
				---breadcrumb-itemWidth: inherit;
				---breadcrumb-itemHeight: inherit;
				---column-blockFraction: calc(100vw / (100vw + var(---breadcrumb-naturalItemHeight)));
				---breadcrumb-sourceRowHeight: var(---breadcrumb-itemHeight);

				&::before,
				&::after,
				> [data-sticky-breadcrumb~="flow"]::before {
					content: none;
					view-timeline-name: none;
				}
				> [data-sticky-breadcrumb~="flow"] > [data-sticky-breadcrumb~="measure"] {
					/* Exit-crossing at local zero reads native dimensions independently of rounded scrollport bounds. */
					direction: ltr;
					writing-mode: horizontal-tb;
					overflow: hidden;
					view-timeline-name: none;
					&::before,
					&::after {
						box-sizing: content-box;
						position: absolute;
						inset: 0 auto auto 0;
						padding: 0;
						border: 0;
						margin: 0;
					}
					&::before {
						content: '';
						inset-inline-start: -100%;
						inline-size: calc(100% + 100vw);
						view-timeline-name: var(---breadcrumb-rowInlineTimeline);
					}
					&[data-sticky-breadcrumb~="item-size"] {
						inline-size: anchor-size(--breadcrumb-compact inline, 0px);
						block-size: anchor-size(--breadcrumb-source block, 0px);
						&::before {
							view-timeline-name: var(--stickyBreadcrumb-itemInlineTimeline);
						}
						&::after {
							content: '';
							inline-size: 1px;
							inset-block-start: -100%;
							block-size: calc(100% + 100vw);
							view-timeline: var(--stickyBreadcrumb-itemBlockTimeline) block;
						}
					}
				}

			}
			&::before {
				content: '';
				inline-size: anchor-size(--breadcrumb-compact inline);
				view-timeline-name: var(--stickyBreadcrumb-itemInlineTimeline);
			}
			&::after {
				content: '';
				inline-size: anchor-size(--breadcrumb-source block);
				view-timeline-name: var(--stickyBreadcrumb-itemBlockTimeline);
			}
			> * {
				---breadcrumb-endGap: calc(var(---breadcrumb-hasEnd) * var(--stickyBreadcrumb-gap, 1rem));
				---breadcrumb-availableInlineSize: min(
					var(--stickyBreadcrumb-availableInlineSize, 100cqi),
					calc(100cqi - var(--stickyBreadcrumb-sourcePaddingInline))
				);
				---breadcrumb-compactItemHeight: max(
					calc(var(---breadcrumb-itemHeight) * var(--stickyBreadcrumb-scale)),
					var(--stickyBreadcrumb-minBlockSize)
				);
				&[data-sticky-breadcrumb~="approach"] {
					block-size: var(---breadcrumb-compactItemHeight);
				}
				---breadcrumb-fitWrap: clamp(
					0,
					sign(
						var(--stickyBreadcrumb-sourcePaddingInline) + var(---breadcrumb-itemWidth) +
							var(---breadcrumb-endWidth) + var(---breadcrumb-endGap) - var(---breadcrumb-availableInlineSize)
					),
					1
				);
				---breadcrumb-sourceEndWrap: clamp(0, sign(var(---breadcrumb-sourceRowHeight) - max(var(---breadcrumb-itemHeight), var(---breadcrumb-endHeight)) - var(--column-supportGap, 0.5rem) / 2), 1);
				---breadcrumb-inlineWidth: calc(var(---breadcrumb-itemWidth) + var(---breadcrumb-endWidth) + var(---breadcrumb-endGap));
				---breadcrumb-trialWrap: max(var(--stickyBreadcrumb-forceRow), clamp(0, sign(var(---breadcrumb-parentInlineEnd) + var(---breadcrumb-inlineWidth) - var(---breadcrumb-availableInlineSize)), 1));
				---breadcrumb-trialBlockStart: calc((1 - var(---breadcrumb-trialWrap)) * var(---breadcrumb-parentBlockStart) + var(---breadcrumb-trialWrap) * var(---breadcrumb-parentBlockEnd));
				---breadcrumb-trialRowHeight: max(var(---breadcrumb-compactItemHeight), var(---breadcrumb-endHeight), calc(var(---breadcrumb-parentBlockEnd) - var(---breadcrumb-trialBlockStart) - 2 * var(--stickyBreadcrumb-paddingBlock, 0.5rem)));
				---breadcrumb-trialEndY: calc(var(---breadcrumb-trialBlockStart) + var(--stickyBreadcrumb-paddingBlock, 0.5rem) + (var(---breadcrumb-trialRowHeight) - var(---breadcrumb-endHeight)) / 2);
				---breadcrumb-nativeEndY: calc(var(---breadcrumb-parentBlockEnd) + var(--stickyBreadcrumb-sourcePaddingBlock) + (1 + var(---breadcrumb-sourceEndWrap)) * (var(---breadcrumb-sourceRowHeight) - var(---breadcrumb-endHeight)) / 2);
				---breadcrumb-endWrap: var(---breadcrumb-fitWrap);
				@container style(--stickyBreadcrumb-clearance: circle) and style(---breadcrumb-clearance-supported: 1) {
					---breadcrumb-trialMargin: if(style(---breadcrumb-sourceEndWrap: 0): 0px; else: calc(
						var(---breadcrumb-sourceRowWidth) - var(---breadcrumb-endWidth) - var(---breadcrumb-endGap) -
						((1 - var(---breadcrumb-trialWrap)) * var(---breadcrumb-parentInlineEnd) + var(---breadcrumb-trialWrap) * var(--stickyBreadcrumb-sourcePaddingInline) + var(---breadcrumb-itemWidth) - (1 - var(---breadcrumb-trialWrap)) * var(---breadcrumb-sourceBorderWidth)) -
						--breadcrumb-circle-clearance(max(var(--stickyBreadcrumb-clearanceCenterBlock), min(var(---breadcrumb-nativeEndY), var(---breadcrumb-trialEndY))), 0px, var(--stickyBreadcrumb-clearanceCenterBlock), calc(var(--stickyBreadcrumb-clearanceRadius) / cos(1.40625deg)), var(--stickyBreadcrumb-clearanceInlineOffset, 0px), calc(var(--stickyBreadcrumb-clearanceInlineRadius, var(--stickyBreadcrumb-clearanceRadius)) / cos(1.40625deg))) * 1px
					));
					---breadcrumb-endWrap: max(var(---breadcrumb-fitWrap), calc(var(---breadcrumb-sourceEndWrap) * (1 - clamp(0, sign(var(---breadcrumb-trialMargin)), 1))));

				}

				---breadcrumb-width: calc(
					(1 - var(---breadcrumb-endWrap)) *
						(var(---breadcrumb-itemWidth) + var(---breadcrumb-endWidth) + var(---breadcrumb-endGap)) +
						var(---breadcrumb-endWrap) *
						max(var(---breadcrumb-itemWidth), var(---breadcrumb-endWidth))
				);

				---breadcrumb-height: calc(
					(1 - var(---breadcrumb-endWrap)) *
						max(var(---breadcrumb-compactItemHeight), var(---breadcrumb-endHeight)) +
						var(---breadcrumb-endWrap) *
						(
							var(---breadcrumb-compactItemHeight) + var(---breadcrumb-endHeight) +
								var(---breadcrumb-endGap)
						)
				);
				---breadcrumb-wrap: max(
					var(--stickyBreadcrumb-forceRow),
					clamp(
						0,
						sign(
							var(---breadcrumb-parentInlineEnd) + var(---breadcrumb-width) -
								var(---breadcrumb-availableInlineSize)
						),
						1
					)
				);
				---breadcrumb-inlineStart: calc(
					(1 - var(---breadcrumb-wrap)) * var(---breadcrumb-parentInlineEnd) +
						var(---breadcrumb-wrap) * var(--stickyBreadcrumb-sourcePaddingInline)
				);
				---breadcrumb-inlineEnd: calc(
					var(---breadcrumb-inlineStart) + var(---breadcrumb-width) +
						var(--stickyBreadcrumb-gap, 1rem) + var(--stickyBreadcrumb-markerSize, 0px)
				);
				---breadcrumb-blockStart: calc(
					(1 - var(---breadcrumb-wrap)) * var(---breadcrumb-parentBlockStart) +
						var(---breadcrumb-wrap) * var(---breadcrumb-parentBlockEnd)
				);
				---breadcrumb-blockEnd: max(
					var(---breadcrumb-parentBlockEnd),
					calc(
						var(---breadcrumb-blockStart) + var(---breadcrumb-height) + 2 *
							var(--stickyBreadcrumb-paddingBlock, 0.5rem)
					)
				);
				---breadcrumb-rowHeight: calc(
					var(---breadcrumb-blockEnd) - var(---breadcrumb-blockStart) - 2 *
						var(--stickyBreadcrumb-paddingBlock, 0.5rem)
				);
			}
			> [data-sticky-breadcrumb~="flow"] {
				&[data-sticky-breadcrumb~="exit"] {
					position: absolute;
					pointer-events: none;
					inset-inline-start: 0;
					inline-size: 1px;
					inset-block-start: calc(100% + var(---breadcrumb-sourceBorderWidth) - var(---breadcrumb-blockEnd) - var(---breadcrumb-rowHeight));
					block-size: var(---breadcrumb-rowHeight);
					view-timeline-name: none;
					display: if(style(--stickyBreadcrumb-exitAnimation: none): none; else: block);
				}
			}
			> [data-sticky-breadcrumb~="position"],
			> details > [data-sticky-breadcrumb~="position"] {
				/* Each level owns its state before its local arrival clock starts. */
				---breadcrumb-entry: 0;
				---breadcrumb-itemActive: 1;
				&:not([data-icon-metrics]) {
					---breadcrumb-iconCorrection: 0px;
				}
				---breadcrumb-inlineEasing: var(--stickyBreadcrumb-inlineEasing, var(--stickyBreadcrumb-easing, var(--transition-easeOutExpo)));
				--sticky-insetBlockStart: if(
					style(---breadcrumb-wrap: 0): var(---breadcrumb-parentBlockEnd)
						;else: var(---breadcrumb-blockStart)
				);
				inset-block-start: var(--sticky-offset, var(--sticky-insetBlockStart));
				--sticky-zIndex: 2;
				&:not(:is([data-sticky-breadcrumb~="position"][data-column~="span-start"]:has(> [data-sticky~="backdrop-before"]), summary:is([data-column~="span-start"], :has(> [data-sticky-breadcrumb~="support"])))) {
					position: var(--sticky-position, sticky);
					z-index: var(--sticky-zIndex);
				}
				pointer-events: none;
				&:is(summary) {
					pointer-events: if(style(---breadcrumb-entry: 0): auto; else: none);
				}
				animation:
					breadcrumb-entry auto steps(1, end) forwards,
					breadcrumb-position-exit auto linear both,
					var(---breadcrumb-exitLayerAnimation),
					if(style(---collapsible-markerMeasure: none): none; else: var(---collapsible-markerMeasure) auto linear both);
				@media (prefers-reduced-motion: reduce) {
					animation-timing-function: steps(1, end), linear, steps(1, start), linear;
				}
				animation-timeline:
					var(--stickyBreadcrumb-entryTimeline),
					view(block var(--sticky-insetBlockStart) 0px),
					var(---breadcrumb-exitTimeline), if(style(---collapsible-markerMeasure: none): auto; else: var(--collapsible-markerInlineTimeline, --collapsible-marker-inline));
				animation-range:
					var(--stickyBreadcrumb-entryRange),
					exit 0% exit calc(100% + var(--sticky-insetBlockStart) - var(---breadcrumb-blockEnd)),
					var(---breadcrumb-exitRange),
					cover 0% cover 100%;

				---breadcrumb-exitRange: exit calc(100% - var(---breadcrumb-blockEnd) - var(---breadcrumb-rowHeight)) exit calc(100% - var(---breadcrumb-blockEnd));

				> :not([data-row], [data-column~="span-start"], [data-sticky], [data-sticky-breadcrumb~="source"], [data-sticky-breadcrumb~="support"]),
				> [data-column~="span-start"] > :not([data-row], [data-sticky], [data-sticky-breadcrumb~="support"]) {
					/* Ordinary supporting flow paints below the sticky foreground and its backdrop. */
					position: relative;
					z-index: -2;
					pointer-events: none;
					> * {
						pointer-events: auto;
						animation: breadcrumb-support-scroll auto linear both;
						animation-timeline: var(--stickyBreadcrumb-entryTimeline);
						animation-range:
							contain calc(var(---breadcrumb-parentBlockEnd) + var(---breadcrumb-sourceBorderWidth) - var(--sticky-insetBlockStart))
								contain calc(var(---breadcrumb-parentBlockEnd) + var(---breadcrumb-sourceBorderWidth) - var(--sticky-insetBlockStart) + 100vh);
					}
				}

				[data-row]:has(> [data-sticky-breadcrumb~="source"]),
				[data-sticky-breadcrumb~="source"]:not([data-row] > [data-sticky-breadcrumb~="source"]) {
					animation:
						auto linear both var(---link-currentAnimationName, none),
						var(--stickyBreadcrumb-exitAnimation);
					animation-timeline:
						var(--link-current, none), var(---breadcrumb-exitTimeline), var(---breadcrumb-exitTimeline);
					animation-range: normal, var(---breadcrumb-exitRange), var(---breadcrumb-exitRange);
				}
				[data-sticky-breadcrumb~="source"] {
					display: flex;
					flex: 0 1 auto;
					min-inline-size: 0;
					max-inline-size: 100%;
					/* Resolve compact width here, where the source line metrics are owned. */
					&::before {
						content: '';
						position: absolute;
						inset: 0 auto auto 0;
						visibility: hidden;
						pointer-events: none;
						anchor-name: --breadcrumb-compact;
						inline-size: calc(
							(anchor-size(--breadcrumb-source inline) + var(---breadcrumb-iconInlineCorrection, var(---breadcrumb-iconCorrection))) *
								var(--stickyBreadcrumb-scale)
						);
					}
				}
				[data-sticky-breadcrumb~="item"] {
					min-inline-size: 0;
					max-inline-size: 100%;
					flex-grow: 0;
					flex-basis: auto;
					inline-size: -moz-fit-content;
					inline-size: fit-content;
					pointer-events: auto;
					transform-origin: calc(50% - 50% * var(---inlineDirection)) 0;
					> [data-icon] ~ *,
					> img ~ *,
					> h1 > a > img ~ *,
					> a:has(> [data-icon]) ~ *,
					> a > [data-icon] ~ *,
					[data-icon]::before,
					> img,
					> h1 > a > img {
						animation: breadcrumb-text-motion auto var(---breadcrumb-inlineEasing) both;
						animation-timeline: var(--stickyBreadcrumb-entryTimeline);
						animation-range: var(--stickyBreadcrumb-entryRange);
						@media (prefers-reduced-motion: reduce) {
							animation-timing-function: steps(1, end);
						}
					}
					[data-icon]::before,
					> img,
					> h1 > a > img {
						animation-name: breadcrumb-icon-motion;
					}
					[data-icon] {
						/* Resolve native line height before the glyph changes its font size. */
						---breadcrumb-iconTranslateBlock: calc(
							(1lh - var(---column-iconSize) - var(---breadcrumb-iconCorrection)) *
								var(--stickyBreadcrumb-scale) / 2
						);
					}

					[data-icon~="circle"]:is([data-icon~="wbicons-simple"], [data-icon~="wbicons-complex"]):not([data-icon~="emoji"])::before {
						animation-name: breadcrumb-icon-motion, if(style(---breadcrumb-entry: 0): none; else: breadcrumb-icon-detail);
					}

					[data-icon]::before {
						transform-origin: calc(50% - 50% * var(---inlineDirection)) 0;
						--stickyBreadcrumb-iconScale: calc(
							(var(---column-iconSize) + var(---breadcrumb-iconCorrection)) *
								var(--stickyBreadcrumb-scale) / (1em * var(---icon-ink-height, 1))
						);
					}
					[data-icon]:is([data-icon~="wbicons-simple"], [data-icon~="wbicons-complex"]):not(
							[data-icon~="emoji"],
							[data-icon~="circle"]
						) {
						---breadcrumb-iconComplexFrom: if(style(---column-iconSize > 32px): 1; else: 0);
						---breadcrumb-iconComplexTo: if(style(---column-compactIconSize > 32px): 1; else: 0);
						---breadcrumb-glyph-child-scale: calc(
							(var(---column-iconSize) + var(---breadcrumb-iconCorrection)) / var(---column-iconSize)
						);
						/* Solve the composed parent/child scale at 32px, then invert the shared Expo curve. */
						---breadcrumb-glyph-a: calc(
							(var(--stickyBreadcrumb-scale) - 1) * (var(---breadcrumb-glyph-child-scale) - 1)
						);
						---breadcrumb-glyph-b: calc(
							var(--stickyBreadcrumb-scale) + var(---breadcrumb-glyph-child-scale) - 2
						);
						---breadcrumb-glyph-d: calc(32px / var(---column-iconSize) - 1);
						---breadcrumb-glyph-e: calc(
							2 * var(---breadcrumb-glyph-d) /
								(
									var(---breadcrumb-glyph-b) -
										sqrt(
											pow(var(---breadcrumb-glyph-b), 2) + 4 * var(---breadcrumb-glyph-a) *
												var(---breadcrumb-glyph-d)
										)
								)
						);
						---breadcrumb-glyph-usesInOut: if(style(---breadcrumb-inlineEasing: var(--transition-easeInOutExpo)): 1; else: 0);
						---breadcrumb-glyph-u: if(
							style(---breadcrumb-glyph-usesInOut: 1): calc(0.5 - sin(asin(1 - 2 * clamp(0, var(---breadcrumb-glyph-e), 1)) / 3));
							else: calc(1 - pow(1 - clamp(0, var(---breadcrumb-glyph-e), 1), 1 / 3))
						);
						---breadcrumb-glyph-threshold: if(
							style(---column-iconSize > 32px) and
								style(---column-compactIconSize <= 32px): calc(
									(
											3 * if(style(---breadcrumb-glyph-usesInOut: 1): var(--transition-easeInOutExpo-x1); else: var(--transition-easeOutExpo-x1)) * pow(1 - var(---breadcrumb-glyph-u), 2) *
												var(---breadcrumb-glyph-u) + 3 * if(style(---breadcrumb-glyph-usesInOut: 1): var(--transition-easeInOutExpo-x2); else: var(--transition-easeOutExpo-x2)) *
												(1 - var(---breadcrumb-glyph-u)) * pow(var(---breadcrumb-glyph-u), 2) +
												pow(var(---breadcrumb-glyph-u), 3)
										) *
										100%
								)
								; else: 100%
						);

						position: relative;

						&::before,
						&::after {
							---icon-leadingInset: var(---icon-ink-minX);
							---column-iconTop: var(---icon-ink-top);
							--stickyBreadcrumb-iconScale: calc(
								var(---breadcrumb-glyph-child-scale) * var(--stickyBreadcrumb-scale)
							);
							content: var(--icon-content);
							position: absolute;
							inset-block-start: 0;
							inset-inline-start: 0;
							inline-size: auto;
							block-size: auto;
							pointer-events: none;
							line-height: 1;
							font-size: calc(var(---column-iconSize) / var(---icon-ink-height));
							transform-origin: calc(50% - 50% * var(---inlineDirection)) 0;
							animation:
								breadcrumb-icon-motion auto var(---breadcrumb-inlineEasing) both,
								breadcrumb-icon-complex auto
									linear(
										0 0%,
										0 var(---breadcrumb-glyph-threshold),
										1 var(---breadcrumb-glyph-threshold),
										1 100%
									)
									both;
							animation-timeline: var(--stickyBreadcrumb-entryTimeline);
							animation-range: var(--stickyBreadcrumb-entryRange);
						}
						&::before {
							font-family: var(--fontFamily-wbicons-complex);
							---icon-ink-height: var(---icon-ink-height-complex);
							---icon-ink-top: var(---icon-ink-top-complex);
							---icon-ink-minX: var(---icon-ink-minX-complex);
							---icon-ink-maxX: var(---icon-ink-maxX-complex);
						}
						&::after {
							font-family: var(--fontFamily-wbicons-simple);
							---icon-ink-height: var(---icon-ink-height-simple);
							---icon-ink-top: var(---icon-ink-top-simple);
							---icon-ink-minX: var(---icon-ink-minX-simple);
							---icon-ink-maxX: var(---icon-ink-maxX-simple);
							animation-name: breadcrumb-icon-motion, breadcrumb-icon-simple;
						}
						&:dir(rtl)::before,
						&:dir(rtl)::after {
							---icon-leadingInset: calc(1 - var(---icon-ink-maxX));
						}
						@media (prefers-reduced-motion: reduce) {
							&::before,
							&::after {
								animation-timing-function: steps(1, end), steps(1, end);
							}
						}
					}
				}
				[data-sticky-breadcrumb~="end"] {
					pointer-events: auto;
				}

				[data-sticky-breadcrumb~="item"] {
					---breadcrumb-translateInline: calc(
							var(---inlineDirection) *
								(var(---breadcrumb-inlineStart) - var(--stickyBreadcrumb-sourcePaddingInline) -
									(1 - var(---breadcrumb-wrap)) * var(---breadcrumb-sourceBorderWidth))
						);
					---breadcrumb-translateBlock: calc(
							(
								var(--stickyBreadcrumb-paddingBlock, 0.5rem) -
									var(--stickyBreadcrumb-sourcePaddingBlock) + var(---breadcrumb-blockStart) -
									var(--sticky-insetBlockStart) + (1 - var(---breadcrumb-endWrap)) *
									(
										var(---breadcrumb-rowHeight) - var(---breadcrumb-itemHeight) *
											var(--stickyBreadcrumb-scale)
									) /
									2 - (1 - var(---breadcrumb-sourceEndWrap)) *
									(var(---breadcrumb-sourceRowHeight) - var(---breadcrumb-itemHeight)) / 2
							)
						);
					---breadcrumb-arrivalInline: var(---breadcrumb-translateInline);
					---breadcrumb-arrivalBlock: var(---breadcrumb-translateBlock);
					animation:
						breadcrumb-item-motion auto var(---breadcrumb-inlineEasing) both,
						var(---breadcrumb-arrivalAnimation, breadcrumb-arrival) auto linear both;
					animation-timeline: var(--stickyBreadcrumb-entryTimeline);
					animation-range: var(--stickyBreadcrumb-entryRange);
					@media (prefers-reduced-motion: reduce) {
						---breadcrumb-arrivalAnimation: breadcrumb-arrival-step;
						animation-timing-function: steps(1, end);
					}
				}
				[data-sticky-breadcrumb~="end"] {
					---breadcrumb-endTranslateInline: calc(
						var(---inlineDirection) *
							(
								var(---breadcrumb-inlineStart) + var(---breadcrumb-width) -
									var(---breadcrumb-sourceRowWidth) - var(--stickyBreadcrumb-sourcePaddingInline) -
									(1 - var(---breadcrumb-wrap)) * var(---breadcrumb-sourceBorderWidth)
							)
					);
					:where(summary) & {
						---breadcrumb-endTranslateInline: 0px;
					}
					---breadcrumb-endTranslateBlock: calc(
						var(--stickyBreadcrumb-paddingBlock, 0.5rem) -
							var(--stickyBreadcrumb-sourcePaddingBlock) + var(---breadcrumb-blockStart) -
							var(--sticky-insetBlockStart) + (1 + var(---breadcrumb-endWrap)) *
							(var(---breadcrumb-rowHeight) - var(---breadcrumb-endHeight)) / 2 -
							(1 + var(---breadcrumb-sourceEndWrap)) *
							(var(---breadcrumb-sourceRowHeight) - var(---breadcrumb-endHeight)) / 2
					);
					---breadcrumb-arrivalInline: var(---breadcrumb-endTranslateInline);
					---breadcrumb-arrivalBlock: var(---breadcrumb-endTranslateBlock);
					--stickyBreadcrumb-endPaintAnimation: var(---breadcrumb-arrivalAnimation, breadcrumb-arrival) auto var(---breadcrumb-endPaintEasing) both;
					@container style(--stickyBreadcrumb-clearance: circle) and style(---breadcrumb-clearance-supported: 1) {
						---breadcrumb-clearance-view-size: var(---breadcrumb-blockEnd);
						---breadcrumb-clearance-arrival-end: max(
							var(---breadcrumb-clearance-flow-height), var(---breadcrumb-clearance-view-size)
						);
						---breadcrumb-clearance-arc-deltaY: var(---breadcrumb-endTranslateBlock);
						---breadcrumb-clearance-arc-centerY: var(--stickyBreadcrumb-clearanceCenterBlock);
						---breadcrumb-clearance-arc-radius: calc(
							var(--stickyBreadcrumb-clearanceRadius) / cos(1.40625deg)
						);
						---breadcrumb-clearance-arc-inlineRadius: calc(var(--stickyBreadcrumb-clearanceInlineRadius, var(--stickyBreadcrumb-clearanceRadius)) / cos(1.40625deg));
						---breadcrumb-clearance-inlineOffset: var(
							--stickyBreadcrumb-clearanceInlineOffset,
							0px
						);
						---breadcrumb-clearance-arc-height: var(---breadcrumb-endHeight);
						---breadcrumb-clearance-arc-baseY: calc(
							var(--sticky-insetBlockStart) + var(--stickyBreadcrumb-sourcePaddingBlock) +
								(1 + var(---breadcrumb-sourceEndWrap)) *
								(var(---breadcrumb-sourceRowHeight) - var(---breadcrumb-endHeight)) / 2
						);
						---breadcrumb-clearance-native-a: calc(
							var(---breadcrumb-blockEnd) + var(---breadcrumb-parentBlockEnd) +
								var(---breadcrumb-sourceBorderWidth) + var(--stickyBreadcrumb-sourcePaddingBlock) +
								(1 + var(---breadcrumb-sourceEndWrap)) *
								(var(---breadcrumb-sourceRowHeight) - var(---breadcrumb-endHeight)) / 2
						);

						---breadcrumb-clearance-contact: --breadcrumb-clearance-contact();
						---breadcrumb-clearance-joinBlock: --breadcrumb-clearance-join(0, var(--stickyBreadcrumb-clearanceGap, 0px));
						---breadcrumb-clearance-joinInline: --breadcrumb-clearance-join(1, var(--stickyBreadcrumb-clearanceGap, 0px));
						---breadcrumb-clearance-preStops:
							0
								--breadcrumb-cover-position(
									min(
										var(---breadcrumb-clearance-view-size),
										calc(
											var(---breadcrumb-clearance-native-a) -
												var(---breadcrumb-clearance-arc-centerY) - var(---breadcrumb-clearance-contact) - var(--stickyBreadcrumb-clearanceGap, 0px)
										)
									)
								),
							--breadcrumb-clearance-pre(2.8125deg), --breadcrumb-clearance-pre(5.625deg),
							--breadcrumb-clearance-pre(8.4375deg), --breadcrumb-clearance-pre(11.25deg),
							--breadcrumb-clearance-pre(14.0625deg), --breadcrumb-clearance-pre(16.875deg),
							--breadcrumb-clearance-pre(19.6875deg), --breadcrumb-clearance-pre(22.5deg),
							--breadcrumb-clearance-pre(25.3125deg), --breadcrumb-clearance-pre(28.125deg),
							--breadcrumb-clearance-pre(30.9375deg), --breadcrumb-clearance-pre(33.75deg),
							--breadcrumb-clearance-pre(36.5625deg), --breadcrumb-clearance-pre(39.375deg),
							--breadcrumb-clearance-pre(42.1875deg), --breadcrumb-clearance-pre(45deg),
							--breadcrumb-clearance-pre(47.8125deg), --breadcrumb-clearance-pre(50.625deg),
							--breadcrumb-clearance-pre(53.4375deg), --breadcrumb-clearance-pre(56.25deg),
							--breadcrumb-clearance-pre(59.0625deg), --breadcrumb-clearance-pre(61.875deg),
							--breadcrumb-clearance-pre(64.6875deg), --breadcrumb-clearance-pre(67.5deg),
							--breadcrumb-clearance-pre(70.3125deg), --breadcrumb-clearance-pre(73.125deg),
							--breadcrumb-clearance-pre(75.9375deg), --breadcrumb-clearance-pre(78.75deg),
							--breadcrumb-clearance-pre(81.5625deg), --breadcrumb-clearance-pre(84.375deg),
							--breadcrumb-clearance-pre(87.1875deg), --breadcrumb-clearance-pre(90deg);
						---breadcrumb-endPaintEasing: var(--transition-easeInOutExpo);
						---breadcrumb-clearance-full-x-easing: linear(
							0 0%,
							var(---breadcrumb-clearance-preStops),
							--breadcrumb-clearance-post(0),
							--breadcrumb-clearance-post(0.015625),
							--breadcrumb-clearance-post(0.03125),
							--breadcrumb-clearance-post(0.046875),
							--breadcrumb-clearance-post(0.0625),
							--breadcrumb-clearance-post(0.078125),
							--breadcrumb-clearance-post(0.09375),
							--breadcrumb-clearance-post(0.109375),
							--breadcrumb-clearance-post(0.125),
							--breadcrumb-clearance-post(0.140625),
							--breadcrumb-clearance-post(0.15625),
							--breadcrumb-clearance-post(0.171875),
							--breadcrumb-clearance-post(0.1875),
							--breadcrumb-clearance-post(0.203125),
							--breadcrumb-clearance-post(0.21875),
							--breadcrumb-clearance-post(0.234375),
							--breadcrumb-clearance-post(0.25),
							--breadcrumb-clearance-post(0.265625),
							--breadcrumb-clearance-post(0.28125),
							--breadcrumb-clearance-post(0.296875),
							--breadcrumb-clearance-post(0.3125),
							--breadcrumb-clearance-post(0.328125),
							--breadcrumb-clearance-post(0.34375),
							--breadcrumb-clearance-post(0.359375),
							--breadcrumb-clearance-post(0.375),
							--breadcrumb-clearance-post(0.390625),
							--breadcrumb-clearance-post(0.40625),
							--breadcrumb-clearance-post(0.421875),
							--breadcrumb-clearance-post(0.4375),
							--breadcrumb-clearance-post(0.453125),
							--breadcrumb-clearance-post(0.46875),
							--breadcrumb-clearance-post(0.484375),
							--breadcrumb-clearance-post(0.5),
							--breadcrumb-clearance-post(0.515625),
							--breadcrumb-clearance-post(0.53125),
							--breadcrumb-clearance-post(0.546875),
							--breadcrumb-clearance-post(0.5625),
							--breadcrumb-clearance-post(0.578125),
							--breadcrumb-clearance-post(0.59375),
							--breadcrumb-clearance-post(0.609375),
							--breadcrumb-clearance-post(0.625),
							--breadcrumb-clearance-post(0.640625),
							--breadcrumb-clearance-post(0.65625),
							--breadcrumb-clearance-post(0.671875),
							--breadcrumb-clearance-post(0.6875),
							--breadcrumb-clearance-post(0.703125),
							--breadcrumb-clearance-post(0.71875),
							--breadcrumb-clearance-post(0.734375),
							--breadcrumb-clearance-post(0.75),
							--breadcrumb-clearance-post(0.765625),
							--breadcrumb-clearance-post(0.78125),
							--breadcrumb-clearance-post(0.796875),
							--breadcrumb-clearance-post(0.8125),
							--breadcrumb-clearance-post(0.828125),
							--breadcrumb-clearance-post(0.84375),
							--breadcrumb-clearance-post(0.859375),
							--breadcrumb-clearance-post(0.875),
							--breadcrumb-clearance-post(0.890625),
							--breadcrumb-clearance-post(0.90625),
							--breadcrumb-clearance-post(0.921875),
							--breadcrumb-clearance-post(0.9375),
							--breadcrumb-clearance-post(0.953125),
							--breadcrumb-clearance-post(0.96875),
							--breadcrumb-clearance-post(0.984375),
							--breadcrumb-clearance-post(1),
							--breadcrumb-clearance-final() 100%
						);

						@media (prefers-reduced-motion: reduce) {
							---breadcrumb-endPaintEasing: steps(1, end);
							---breadcrumb-clearance-full-x-easing: linear(
								0 0%,
								var(---breadcrumb-clearance-preStops),
								--breadcrumb-clearance-stop(
									max(
										var(---breadcrumb-clearance-arc-baseY),
										calc(
											var(---breadcrumb-clearance-native-a) -
												var(---breadcrumb-clearance-arrival-end)
										)
									),
									var(---breadcrumb-clearance-arrival-end)
								),
								--breadcrumb-clearance-final()
									--breadcrumb-cover-position(var(---breadcrumb-clearance-arrival-end)),
								--breadcrumb-clearance-final() 100%
							);
						}

						animation: breadcrumb-clearance-inline auto var(---breadcrumb-clearance-full-x-easing)
							both;
						animation-timeline: var(--stickyBreadcrumb-entryTimeline);
						animation-range: cover -100% cover 100%;
						--stickyBreadcrumb-endPaintAnimation: breadcrumb-clearance-block auto
							var(---breadcrumb-endPaintEasing) both;
						--stickyBreadcrumb-endPaintRange: var(--stickyBreadcrumb-entryRange);
						&[data-sticky-breadcrumb~="contents"] {
							animation: none;
							--stickyBreadcrumb-endPaintRange: cover -100% cover 100%, var(--stickyBreadcrumb-entryRange);
							--stickyBreadcrumb-endPaintAnimation:
								breadcrumb-clearance-inline auto var(---breadcrumb-clearance-full-x-easing) both,
								breadcrumb-clearance-block auto var(---breadcrumb-endPaintEasing) both;
						}
						&:not([data-sticky-breadcrumb~="contents"]) {
							animation-name: breadcrumb-clearance-inline, breadcrumb-clearance-block;
							animation-range: cover -100% cover 100%, var(--stickyBreadcrumb-entryRange);
							animation-timing-function: var(---breadcrumb-clearance-full-x-easing), var(---breadcrumb-endPaintEasing);
						}
						> *,
						&::after {
							---breadcrumb-clearance-arc-deltaY: inherit;
						}
					}
				}
			}
			&[data-sticky-breadcrumb~="size"] {
				---breadcrumb-sizeTimelines: var(--stickyBreadcrumb-itemInlineTimeline), var(--stickyBreadcrumb-itemBlockTimeline), var(--stickyBreadcrumb-endInlineTimeline), var(--stickyBreadcrumb-endBlockTimeline),
					var(---breadcrumb-rowInlineTimeline), var(---breadcrumb-rowBlockTimeline), var(---breadcrumb-clearance-sizeTimeline);
				---breadcrumb-sizeAnimationNames: breadcrumb-item-inline, breadcrumb-item-block, var(---breadcrumb-endAnimationNames), column-inline-size, column-block-size,
					if(style(--stickyBreadcrumb-clearance: circle) and style(---breadcrumb-clearance-supported: 1): breadcrumb-clearance-measure; else: none);
				---breadcrumb-sizeRanges: exit-crossing 0% exit-crossing 100%, exit-crossing 0% exit-crossing 100%, var(---breadcrumb-endSizeRanges), exit-crossing 0% exit-crossing 100%, exit-crossing 0% exit-crossing 100%, cover 0% cover 100%;
				---breadcrumb-sizeDirections: reverse, reverse, reverse, reverse, reverse, reverse, normal;
			}
		}

		[data-sticky-breadcrumb~="scope"]:has(> [data-sticky-breadcrumb~="position"][data-column~="span-start"] > [data-sticky~="backdrop-before"], > details > summary[data-column~="span-start"], > details > summary > [data-sticky-breadcrumb~="support"]) {
			---breadcrumb-sourceGap: var(--stickyBreadcrumb-sourcePaddingBlock);
			&:has(> [data-sticky-breadcrumb~="position"] > [data-sticky-breadcrumb~="support"], > details > summary > [data-sticky-breadcrumb~="support"]) {
				---breadcrumb-sourceGap: var(--column-supportGap, 0.5rem);
			}

			display: grid;
			grid-template: calc(var(---breadcrumb-sourceRowHeight) + var(--stickyBreadcrumb-sourcePaddingBlock) + var(---breadcrumb-sourceGap)) auto auto / minmax(0, 1fr);

			> [data-column]:not(details, [data-sticky-breadcrumb~="position"]) {
				grid-area: 3 / 1 / 4 / 2;
			}
			> details {
				display: grid;
				grid-area: 1 / 1 / 4 / 2;
				grid-template-rows: subgrid;
				&::details-content {
					grid-area: 3 / 1 / 4 / 2;
				}
			}
			> [data-sticky-breadcrumb~="position"][data-column~="span-start"]:has(> [data-sticky~="backdrop-before"]),
			> details > summary:is([data-column~="span-start"], :has(> [data-sticky-breadcrumb~="support"])) {
				display: grid;
				grid-area: 1 / 1 / 4 / 2;
				grid-template: subgrid / minmax(0, 1fr);
				position: static;
				&:not(summary) {
					container-type: normal;
				}
				&:not(summary)::before,
				&:not(summary)::after {
					content: none;
				}
				pointer-events: none;
				padding-block: 0;
				&:is(summary) {
					padding-inline: 0;
				}
				gap: 0;
				z-index: auto;
				anchor-name: none;
				animation-name: breadcrumb-entry, var(---collapsible-markerMeasure);
				animation-timing-function: steps(1, end), linear;
				animation-timeline: var(--stickyBreadcrumb-entryTimeline), if(style(---collapsible-markerMeasure: none): auto; else: var(--collapsible-markerInlineTimeline, --collapsible-marker-inline));
				animation-range:
					var(--stickyBreadcrumb-entryRange),
					cover 0% cover 100%;
				> [data-sticky] {
					animation: var(---breadcrumb-exitLayerAnimation);
					animation-timeline: var(---breadcrumb-exitTimeline);
					animation-range: var(---breadcrumb-exitRange);
					grid-area: 1 / 1 / 2 / 2;
					align-self: start;
					inset-block-start: var(--sticky-offset, var(--sticky-insetBlockStart));
					padding-block-start: var(--stickyBreadcrumb-sourcePaddingBlock);
					padding-inline: var(--stickyBreadcrumb-sourcePaddingInline);
					pointer-events: auto;
					:where(summary) > & {
						pointer-events: if(style(---breadcrumb-entry: 0): auto; else: none);
					}
					&[data-row] {
						gap: var(---column-gap);
					}
				}
				> [data-sticky-breadcrumb~="support"] {
					grid-area: 2 / 1 / 3 / 2;
					padding-inline: var(--stickyBreadcrumb-sourcePaddingInline);
					padding-block-end: var(--stickyBreadcrumb-sourcePaddingBlock);
				}
				&:focus-visible {
					outline: none;
					> [data-sticky] {
						outline: auto;
					}
				}
			}
			> [data-sticky-breadcrumb~="flow"]:not([data-sticky-breadcrumb~="exit"]) {
				position: relative;
				/* Foreground geometry owns arrival; supporting copy retains ordinary flow. */
				grid-area: 1 / 1 / 2 / 2;
				align-self: stretch;
				inset-block-start: 0;
				margin-block-start: calc(-1 * (var(---breadcrumb-parentBlockEnd) + var(---breadcrumb-sourceBorderWidth)));
				block-size: auto;
				anchor-name: --breadcrumb-position;
			}
		}


		[data-sticky-breadcrumb~="scope"] {
			[data-sticky-container]:not([data-sticky-breadcrumb]):has(> summary[data-sticky~="block-start"]) {
				---breadcrumb-nativeBlockTimeline: --sticky-block-size;
				@supports (timeline-scope: all) and (view-timeline-name: ident("--sticky-block-size-" attr(id))) {
					---breadcrumb-nativeBlockTimeline: ident("--sticky-block-size-" attr(id));
				}
				---breadcrumb-parentBlockEnd: var(---breadcrumb-blockEnd);
				anchor-scope: --sticky-start;
				timeline-scope: var(---breadcrumb-nativeBlockTimeline);
				---breadcrumb-itemHeight: round(nearest, calc(100vw * (1 / var(---breadcrumb-itemBlock) - 1)), 0.0625px);
				animation: breadcrumb-item-block auto linear both;
				animation-timeline: var(---breadcrumb-nativeBlockTimeline);
				> summary[data-sticky~="block-start"] {
					anchor-name: --sticky-start;
				}
				&::before {
					content: '';
					position: fixed;
					inset: 0 auto auto 0;
					inline-size: anchor-size(--sticky-start block);
					block-size: 1px;
					visibility: hidden;
					pointer-events: none;
					view-timeline-name: var(---breadcrumb-nativeBlockTimeline);
					view-timeline-axis: inline;
					view-timeline-inset: 0;
				}
				> :not(summary) {
					---breadcrumb-blockEnd: calc(
						var(---breadcrumb-parentBlockEnd) + var(---breadcrumb-itemHeight)
					);
				}
			}
		}

		/* Nested sticky content begins at the last occupied breadcrumb row. */
		[data-sticky-breadcrumb~="scope"]
			[data-sticky-container]
			> [data-sticky]:not([data-sticky-breadcrumb]) {
			--sticky-insetBlockStart: var(---breadcrumb-blockEnd);
		}

		[data-sticky-breadcrumb~="scope"] {
			&[data-card] {
				--stickyBreadcrumb-sourcePaddingBlock: var(--card-padding);
				--stickyBreadcrumb-sourcePaddingInline: var(--card-padding);
				> summary[data-sticky], > details > summary[data-sticky] {
					--card-padding: var(--stickyBreadcrumb-sourcePaddingBlock);
				}
			}
		}
	}
	@scope ([data-sticky-breadcrumb~="scope"][data-sticky-breadcrumb~="size"]) to ([data-sticky-breadcrumb~="scope"]) {
		:scope::before,:scope::after,:scope>[data-sticky-breadcrumb~="flow"]:not([data-sticky-breadcrumb~="exit"])::before,:scope>[data-sticky-breadcrumb~="flow"]>[data-sticky-breadcrumb~="measure"]::before,:scope>[data-sticky-breadcrumb~="flow"]>[data-sticky-breadcrumb~="measure"]::after {
			content: none;
			view-timeline-name: none
		}
		:scope>[data-sticky-breadcrumb~="flow"]>[data-sticky-breadcrumb~="measure"] {
			inline-size: 0;
			view-timeline-name: none
		}
		:scope > [data-sticky-breadcrumb~="position"] [data-sticky-breadcrumb~="source"]::before,
		:scope > details > [data-sticky-breadcrumb~="position"] [data-sticky-breadcrumb~="source"]::before {
			content: none;
			view-timeline-name: none
		}
		:has(> [data-sticky-breadcrumb~="size-export"]) {
			---breadcrumb-sizeBorderWidth: 0px;
			position: relative;
			&[data-badge] {
				---breadcrumb-sizeBorderWidth: var(--badge-borderWidth);
			}
		}
		[data-sticky-breadcrumb~="size-export"] {
			display: block;
			position: absolute;
			inset: calc(-1 * var(---breadcrumb-sizeBorderWidth));
			inset-block-end: calc(-1px - var(---breadcrumb-sizeBorderWidth));
			inset-inline-end: calc(-1px - var(---breadcrumb-sizeBorderWidth));
			overflow: hidden;
			container-type: size;
			writing-mode: horizontal-tb;
			direction: ltr;
			visibility: hidden;
			pointer-events: none;
			/* The content box measures the owner; padding keeps subpixel scrollports active. */
			padding: 0 1px 1px 0;
			border: 0;
			margin: 0;
			animation: none;
			transform: none;
			translate: none;
			scale: none;
			rotate: none;
			&::before,&::after {
				---breadcrumb-measuredSize: 100cqi;
				content: '';
				position: absolute;
				inset: 0 auto auto calc(-1 * var(---breadcrumb-measuredSize));
				block-size: 1px;
				inline-size: calc(var(---breadcrumb-measuredSize) + 100vw);
				view-timeline-axis: inline;
				view-timeline-inset: 0;
				padding: 0;
				border: 0
			}
			&::after {
				---breadcrumb-measuredSize: 100cqb
			}
			&[data-sticky-breadcrumb~="size-source"]::before {
				---breadcrumb-measuredSize: round(up, calc((100cqi + var(---breadcrumb-iconInlineCorrection,var(---breadcrumb-iconCorrection)))*var(--stickyBreadcrumb-scale)), 0.0625px)
			}
		}
	}
	@scope (:root) to (details:not([open]),[data-sticky-breadcrumb~="scope"]:has(>details:not([open]))) {
		@scope ([data-sticky-breadcrumb~="scope"][data-sticky-breadcrumb~="size"]) to ([data-sticky-breadcrumb~="scope"]) {
			[data-sticky-breadcrumb~="size-source"]::before {
				view-timeline-name: var(--stickyBreadcrumb-itemInlineTimeline)
			}
			[data-sticky-breadcrumb~="size-source"]::after {
				view-timeline-name: var(--stickyBreadcrumb-itemBlockTimeline)
			}
		}
	}
	@scope (:root) to (details:not([open])>:not(summary)) {
		@scope ([data-sticky-breadcrumb~="scope"][data-sticky-breadcrumb~="size"]) to ([data-sticky-breadcrumb~="scope"]) {
			[data-sticky-breadcrumb~="size-row"]::before {
				view-timeline-name: var(---breadcrumb-rowInlineTimeline)
			}
			[data-sticky-breadcrumb~="size-row"]::after {
				view-timeline-name: var(---breadcrumb-rowBlockTimeline)
			}
			[data-sticky-breadcrumb~="size-end"]::before {
				view-timeline-name: var(--stickyBreadcrumb-endInlineTimeline)
			}
			[data-sticky-breadcrumb~="size-end"]::after {
				view-timeline-name: var(--stickyBreadcrumb-endBlockTimeline)
			}
		}
	}
}

/**
 * Mandatory scroll snapping on the owning scroll viewport.
 *
 * ### Placement
 * - On the element whose overflow scrolls; does not establish overflow or containment.
 *
 * ### Tokens
 * - `block`, `inline`: snapping axis; defaults to both axes.
 * - `unless-hovered`: release snapping while the scroll viewport is hovered.
 *
 * ### Examples
 * - Follow snap targets until the pointer enters the scroll viewport:
 *   ```html
 *   <nav data-scroll-container="block" data-scroll-snap="block unless-hovered">
 *     <a href="#section" style="scroll-snap-align: start">Section</a>
 *   </nav>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-scroll-snap]`
 */
[data-scroll-snap] {
	scroll-snap-type: both mandatory;

	&[data-scroll-snap~="block"] {
		scroll-snap-type: block mandatory;
	}
	&[data-scroll-snap~="inline"] {
		scroll-snap-type: inline mandatory;
	}
	&[data-scroll-snap~="unless-hovered"]:hover {
		scroll-snap-type: none;
	}
}

/**
 * ## [data-scroll-container]
 *
 * Scroll / sticky coordination: scroll container axis, nested sticky scopes, sticky items, and scroll
 * item attachment, overflow, and snap helpers. `[data-scroll-container]` sets scroll axes and scroll-state container queries. Nest `[data-sticky-container]` / `[data-sticky]` for sticky insets; use `[data-scroll-item]` on children for snap and padding tricks.
 * Measured `--scrollContainer-sizeInline` and `--scrollContainer-sizeBlock` outputs expose the owning
 * scroll viewport dimensions to descendants; they are not authored sizing inputs.
 *
 * ### Placement
 * - On scroll viewport roots and nested scroll regions that participate in the sticky inset chain (`[data-scroll-container]`).
 *
 * ### Tokens
 * - scroll container: `block`, `inline`
 * - sticky: `block`, `block-start`, `block-end`, `inline`, `inline-start`, `inline-end`, `background`, `background-always`, `backdrop-self`, `backdrop-before`, `backdrop-after`, `backdrop-stuck`, `backdrop-always`, `backdrop-none`
 * - scroll item: `inline-detached`, `inline-attached`, `padding-match-start`, `padding-match-end`, `underflow-start|center|end`, `overflow-start|center|end`, `snap-block-start|end`, `snap-prose`, `block-size-max`, `inline-size-max`
 *
 * ### CSS Variables
 * - `--scrollContainer-perspective`: perspective applied to the scroll region.
 * - `--scrollContainer-scrollPaddingBlockStart`, `--scrollContainer-scrollPaddingBlockEnd`
 * - `--scrollContainer-scrollPaddingInlineStart`, `--scrollContainer-scrollPaddingInlineEnd`
 *
 * ### Examples
 * - Default (both axes scrollable; omit `block` / `inline` when this matches your layout):
 *   ```html
 *   <main data-scroll-container>
 *     <section>
 *       <p>Content</p>
 *     </section>
 *   </main>
 *   ```
 * - Vertical scroll region (`block`):
 *   ```html
 *   <main data-scroll-container="block">
 *     <section>
 *       <p>Panel</p>
 *     </section>
 *   </main>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-scroll-container]`
 */
@property --scrollContainer-sizeInline {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}
@property --scrollContainer-sizeBlock {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}
[data-scroll-container] {
	/* Inputs */
	--scrollContainer-sizeBlock: 100cqb;
	--scrollContainer-sizeInline: 100cqi;
	--scrollContainer-perspective: 900px;
	--scrollContainer-scrollPaddingBlockStart: calc(
		var(--sticky0-insetBlockStart) + var(--sticky0-paddingBlockStart)
	);
	--scrollContainer-scrollPaddingBlockEnd: calc(
		var(--sticky0-insetBlockEnd) + var(--sticky0-paddingBlockEnd)
	);
	--scrollContainer-scrollPaddingInlineStart: calc(
		var(--sticky0-insetInlineStart) + var(--sticky0-paddingInlineStart)
	);
	--scrollContainer-scrollPaddingInlineEnd: calc(
		var(--sticky0-insetInlineEnd) + var(--sticky0-paddingInlineEnd)
	);

	/* Rules */
	&:has(details:not([open]) > summary:focus) {
		overflow-anchor: none;
	}
	overscroll-behavior: none;
	scrollbar-gutter: stable;
	scrollbar-width: none;
	touch-action: pan-x pan-y pinch-zoom;
	perspective: var(--scrollContainer-perspective);
	scroll-padding-block: var(--scrollContainer-scrollPaddingBlockStart)
		var(--scrollContainer-scrollPaddingBlockEnd);
	scroll-padding-inline: var(--scrollContainer-scrollPaddingInlineStart)
		var(--scrollContainer-scrollPaddingInlineEnd);

	&:not([data-scroll-container~='block']):not([data-scroll-container~='inline']) {
		container-type: size;
		container-type: scroll-state size;
		overflow: auto auto;
	}
	&[data-scroll-container~='block'] {
		container-type: inline-size;
		container-type: scroll-state inline-size;
		overflow-y: auto;
	}
	&[data-scroll-container~='inline'] {
		container-type: block-size;
		container-type: scroll-state block-size;
		min-inline-size: 0;
		max-inline-size: 100%;
		overflow-x: auto;
	}

	&::-webkit-scrollbar {
		display: none;
	}

	/* Derived */
	--sticky-level: 0;

	--sticky0-insetBlockStart: var(--sticky-marginBlockStart);
	--sticky0-insetBlockEnd: var(--sticky-marginBlockEnd);
	--sticky0-insetInlineStart: var(--sticky-marginInlineStart);
	--sticky0-insetInlineEnd: var(--sticky-marginInlineEnd);

	--sticky0-paddingBlockStart: var(--sticky-paddingBlockStart);
	--sticky0-paddingBlockEnd: var(--sticky-paddingBlockEnd);
	--sticky0-paddingInlineStart: var(--sticky-paddingInlineStart);
	--sticky0-paddingInlineEnd: var(--sticky-paddingInlineEnd);

	--sticky0-sizeBlock: calc(
		var(--scrollContainer-sizeBlock) - var(--sticky0-insetBlockStart) - var(--sticky0-insetBlockEnd)
	);
	--sticky0-sizeInline: calc(
		var(--scrollContainer-sizeInline) - var(--sticky0-insetInlineStart) -
			var(--sticky0-insetInlineEnd)
	);

	--sticky-insetBlockStart: var(--sticky0-insetBlockStart);
	--sticky-insetBlockEnd: var(--sticky0-insetBlockEnd);
	--sticky-insetInlineStart: var(--sticky0-insetInlineStart);
	--sticky-insetInlineEnd: var(--sticky0-insetInlineEnd);

	--sticky-sizeBlock: var(--sticky0-sizeBlock);
	--sticky-sizeInline: var(--sticky0-sizeInline);

	/* Resolve viewport units against this scroller before nested size containers intervene. */
	> * {
		--scrollContainer-sizeInline: 100cqi;
		--scrollContainer-sizeBlock: 100cqb;
		--sticky0-sizeInline: calc(
			var(--scrollContainer-sizeInline) - var(--sticky0-insetInlineStart) -
				var(--sticky0-insetInlineEnd)
		);
		--sticky0-sizeBlock: calc(
			var(--scrollContainer-sizeBlock) - var(--sticky0-insetBlockStart) -
				var(--sticky0-insetBlockEnd)
		);
		--sticky-sizeInline: var(--sticky0-sizeInline);
		--sticky-sizeBlock: var(--sticky0-sizeBlock);
	}

	@scope (&) to ([data-scroll-container] > *) {
		@scope (&) to (:scope [data-scroll-container] > *, :scope [data-sticky-container] [data-sticky-container]) {
			:scope [data-sticky-container] {
				--sticky-level: 1;

				--sticky1-insetBlockStart: calc(
					var(--sticky0-insetBlockStart) + var(--sticky0-paddingBlockStart) +
						var(--sticky-marginBlockStart)
				);
				--sticky1-insetBlockEnd: calc(
					var(--sticky0-insetBlockEnd) + var(--sticky0-paddingBlockEnd) + var(--sticky-marginBlockEnd)
				);
				--sticky1-insetInlineStart: calc(
					var(--sticky0-insetInlineStart) + var(--sticky0-paddingInlineStart) +
						var(--sticky-marginInlineStart)
				);
				--sticky1-insetInlineEnd: calc(
					var(--sticky0-insetInlineEnd) + var(--sticky0-paddingInlineEnd) +
						var(--sticky-marginInlineEnd)
				);

				--sticky1-paddingBlockStart: var(--sticky-paddingBlockStart);
				--sticky1-paddingBlockEnd: var(--sticky-paddingBlockEnd);
				--sticky1-paddingInlineStart: var(--sticky-paddingInlineStart);
				--sticky1-paddingInlineEnd: var(--sticky-paddingInlineEnd);

				--sticky1-sizeBlock: calc(
					var(--scrollContainer-sizeBlock) - var(--sticky1-insetBlockStart) -
						var(--sticky1-insetBlockEnd)
				);
				--sticky1-sizeInline: calc(
					var(--scrollContainer-sizeInline) - var(--sticky1-insetInlineStart) -
						var(--sticky1-insetInlineEnd)
				);

				--sticky-insetBlockStart: var(--sticky1-insetBlockStart);
				--sticky-insetBlockEnd: var(--sticky1-insetBlockEnd);
				--sticky-insetInlineStart: var(--sticky1-insetInlineStart);
				--sticky-insetInlineEnd: var(--sticky1-insetInlineEnd);

				--sticky-sizeBlock: var(--sticky1-sizeBlock);
				--sticky-sizeInline: var(--sticky1-sizeInline);
			}
		}
		@scope (&) to (:scope [data-scroll-container] > *, :scope [data-sticky-container] [data-sticky-container] [data-sticky-container]) {
			:scope [data-sticky-container] [data-sticky-container] {
				--sticky-level: 2;

				--sticky2-insetBlockStart: calc(
					var(--sticky1-insetBlockStart) + var(--sticky1-paddingBlockStart) +
						var(--sticky-marginBlockStart)
				);
				--sticky2-insetBlockEnd: calc(
					var(--sticky1-insetBlockEnd) + var(--sticky1-paddingBlockEnd) +
						var(--sticky-marginBlockEnd)
				);
				--sticky2-insetInlineStart: calc(
					var(--sticky1-insetInlineStart) + var(--sticky1-paddingInlineStart) +
						var(--sticky-marginInlineStart)
				);
				--sticky2-insetInlineEnd: calc(
					var(--sticky1-insetInlineEnd) + var(--sticky1-paddingInlineEnd) +
						var(--sticky-marginInlineEnd)
				);

				--sticky2-paddingBlockStart: var(--sticky-paddingBlockStart);
				--sticky2-paddingBlockEnd: var(--sticky-paddingBlockEnd);
				--sticky2-paddingInlineStart: var(--sticky-paddingInlineStart);
				--sticky2-paddingInlineEnd: var(--sticky-paddingInlineEnd);

				--sticky2-sizeBlock: calc(
					var(--scrollContainer-sizeBlock) - var(--sticky2-insetBlockStart) -
						var(--sticky2-insetBlockEnd)
				);
				--sticky2-sizeInline: calc(
					var(--scrollContainer-sizeInline) - var(--sticky2-insetInlineStart) -
						var(--sticky2-insetInlineEnd)
				);

				--sticky-insetBlockStart: var(--sticky2-insetBlockStart);
				--sticky-insetBlockEnd: var(--sticky2-insetBlockEnd);
				--sticky-insetInlineStart: var(--sticky2-insetInlineStart);
				--sticky-insetInlineEnd: var(--sticky2-insetInlineEnd);

				--sticky-sizeBlock: var(--sticky2-sizeBlock);
				--sticky-sizeInline: var(--sticky2-sizeInline);
			}
		}
		@scope (&) to (:scope [data-scroll-container] > *, :scope [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container]) {
			:scope [data-sticky-container] [data-sticky-container] [data-sticky-container] {
				--sticky-level: 3;

				--sticky3-insetBlockStart: calc(
					var(--sticky2-insetBlockStart) + var(--sticky2-paddingBlockStart) +
						var(--sticky-marginBlockStart)
				);
				--sticky3-insetBlockEnd: calc(
					var(--sticky2-insetBlockEnd) + var(--sticky2-paddingBlockEnd) +
						var(--sticky-marginBlockEnd)
				);
				--sticky3-insetInlineStart: calc(
					var(--sticky2-insetInlineStart) + var(--sticky2-paddingInlineStart) +
						var(--sticky-marginInlineStart)
				);
				--sticky3-insetInlineEnd: calc(
					var(--sticky2-insetInlineEnd) + var(--sticky2-paddingInlineEnd) +
						var(--sticky-marginInlineEnd)
				);

				--sticky3-paddingBlockStart: var(--sticky-paddingBlockStart);
				--sticky3-paddingBlockEnd: var(--sticky-paddingBlockEnd);
				--sticky3-paddingInlineStart: var(--sticky-paddingInlineStart);
				--sticky3-paddingInlineEnd: var(--sticky-paddingInlineEnd);

				--sticky3-sizeBlock: calc(
					var(--scrollContainer-sizeBlock) - var(--sticky3-insetBlockStart) -
						var(--sticky3-insetBlockEnd)
				);
				--sticky3-sizeInline: calc(
					var(--scrollContainer-sizeInline) - var(--sticky3-insetInlineStart) -
						var(--sticky3-insetInlineEnd)
				);

				--sticky-insetBlockStart: var(--sticky3-insetBlockStart);
				--sticky-insetBlockEnd: var(--sticky3-insetBlockEnd);
				--sticky-insetInlineStart: var(--sticky3-insetInlineStart);
				--sticky-insetInlineEnd: var(--sticky3-insetInlineEnd);

				--sticky-sizeBlock: var(--sticky3-sizeBlock);
				--sticky-sizeInline: var(--sticky3-sizeInline);
			}
		}
		@scope (&) to (:scope [data-scroll-container] > *, :scope [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container]) {
			:scope [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container] {
				--sticky-level: 4;

				--sticky4-insetBlockStart: calc(
					var(--sticky3-insetBlockStart) + var(--sticky3-paddingBlockStart) +
						var(--sticky-marginBlockStart)
				);
				--sticky4-insetBlockEnd: calc(
					var(--sticky3-insetBlockEnd) + var(--sticky3-paddingBlockEnd) +
						var(--sticky-marginBlockEnd)
				);
				--sticky4-insetInlineStart: calc(
					var(--sticky3-insetInlineStart) + var(--sticky3-paddingInlineStart) +
						var(--sticky-marginInlineStart)
				);
				--sticky4-insetInlineEnd: calc(
					var(--sticky3-insetInlineEnd) + var(--sticky3-paddingInlineEnd) +
						var(--sticky-marginInlineEnd)
				);

				--sticky4-paddingBlockStart: var(--sticky-paddingBlockStart);
				--sticky4-paddingBlockEnd: var(--sticky-paddingBlockEnd);
				--sticky4-paddingInlineStart: var(--sticky-paddingInlineStart);
				--sticky4-paddingInlineEnd: var(--sticky-paddingInlineEnd);

				--sticky4-sizeBlock: calc(
					var(--scrollContainer-sizeBlock) - var(--sticky4-insetBlockStart) -
						var(--sticky4-insetBlockEnd)
				);
				--sticky4-sizeInline: calc(
					var(--scrollContainer-sizeInline) - var(--sticky4-insetInlineStart) -
						var(--sticky4-insetInlineEnd)
				);

				--sticky-insetBlockStart: var(--sticky4-insetBlockStart);
				--sticky-insetBlockEnd: var(--sticky4-insetBlockEnd);
				--sticky-insetInlineStart: var(--sticky4-insetInlineStart);
				--sticky-insetInlineEnd: var(--sticky4-insetInlineEnd);

				--sticky-sizeBlock: var(--sticky4-sizeBlock);
				--sticky-sizeInline: var(--sticky4-sizeInline);
			}
		}
		@scope (&) to (:scope [data-scroll-container] > *, :scope [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container]) {
			:scope [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container] [data-sticky-container] {
				--sticky-level: 5;

				--sticky5-insetBlockStart: calc(
					var(--sticky4-insetBlockStart) + var(--sticky4-paddingBlockStart) +
						var(--sticky-marginBlockStart)
				);
				--sticky5-insetBlockEnd: calc(
					var(--sticky4-insetBlockEnd) + var(--sticky4-paddingBlockEnd) +
						var(--sticky-marginBlockEnd)
				);
				--sticky5-insetInlineStart: calc(
					var(--sticky4-insetInlineStart) + var(--sticky4-paddingInlineStart) +
						var(--sticky-marginInlineStart)
				);
				--sticky5-insetInlineEnd: calc(
					var(--sticky4-insetInlineEnd) + var(--sticky4-paddingInlineEnd) +
						var(--sticky-marginInlineEnd)
				);

				--sticky5-paddingBlockStart: var(--sticky-paddingBlockStart);
				--sticky5-paddingBlockEnd: var(--sticky-paddingBlockEnd);
				--sticky5-paddingInlineStart: var(--sticky-paddingInlineStart);
				--sticky5-paddingInlineEnd: var(--sticky-paddingInlineEnd);

				--sticky5-sizeBlock: calc(
					var(--scrollContainer-sizeBlock) - var(--sticky5-insetBlockStart) -
						var(--sticky5-insetBlockEnd)
				);
				--sticky5-sizeInline: calc(
					var(--scrollContainer-sizeInline) - var(--sticky5-insetInlineStart) -
						var(--sticky5-insetInlineEnd)
				);

				--sticky-insetBlockStart: var(--sticky5-insetBlockStart);
				--sticky-insetBlockEnd: var(--sticky5-insetBlockEnd);
				--sticky-insetInlineStart: var(--sticky5-insetInlineStart);
				--sticky-insetInlineEnd: var(--sticky5-insetInlineEnd);

				--sticky-sizeBlock: var(--sticky5-sizeBlock);
				--sticky-sizeInline: var(--sticky5-sizeInline);
			}
		}
	}

	/**
	 * Sticky inset scope inside `[data-scroll-container]`: `isolation: isolate`, margin/padding inputs for the sticky math chain, and defaults for scroll-item “inline detached” clamp variables. Nest to deepen `--sticky-level` (`--sticky1-*` … `--sticky5-*`); descendants `[data-sticky]` and `[data-scroll-item]` consume the resolved insets and sizes.
	 *
	 * ### Placement
	 * - Anywhere under an ancestor `[data-scroll-container]` that should define a nested sticky/scroll-item scope (often wrapping a column that contains `[data-sticky]` and `[data-scroll-item]`).
	 *
	 * ### CSS Variables
	 * - `--sticky-marginBlockStart`, `--sticky-marginBlockEnd`, `--sticky-marginInlineStart`, `--sticky-marginInlineEnd`
	 * - `--sticky-paddingBlockStart`, `--sticky-paddingBlockEnd`, `--sticky-paddingInlineStart`, `--sticky-paddingInlineEnd`
	 * - `--scrollItem-inlineDetached-maxSize`, `--scrollItem-inlineDetached-paddingStart`, `--scrollItem-inlineDetached-maxPaddingMatchStart`, `--scrollItem-inlineDetached-paddingEnd`, `--scrollItem-inlineDetached-maxPaddingMatchEnd`
	 *
	 * ### Examples
	 * - Nested sticky scope (pair with an ancestor `[data-scroll-container]` in real pages):
	 *   ```html
	 *   <aside data-sticky-container>
	 *     <nav data-sticky="block-start">Sidebar</nav>
	 *   </aside>
	 *   ```
	 *
	 * ### Source
	 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-sticky-container]`
	 */
	&[data-sticky-container],
	[data-sticky-container] {
		/* Inputs */
		--sticky-marginBlockStart: 0px;
		--sticky-marginBlockEnd: 0px;
		--sticky-marginInlineStart: 0px;
		--sticky-marginInlineEnd: 0px;
		--sticky-paddingBlockStart: 0px;
		--sticky-paddingBlockEnd: 0px;
		--sticky-paddingInlineStart: 0px;
		--sticky-paddingInlineEnd: 0px;

		--scrollItem-inlineDetached-maxSize: var(--sticky-sizeInline);
		--scrollItem-inlineDetached-paddingStart: 1.5rem;
		--scrollItem-inlineDetached-maxPaddingMatchStart: 2rem;
		--scrollItem-inlineDetached-paddingEnd: 1.5rem;
		--scrollItem-inlineDetached-maxPaddingMatchEnd: 2rem;

		/* Rules */
		isolation: isolate;

		&:has(> [data-scroll-item~='inline-attached']) {
			inline-size: -moz-min-content;
			inline-size: min-content;
			min-inline-size: var(--sticky-sizeInline);
		}

		/**
		 * Sticky panel: `position: sticky` with scroll-state container queries for optional item backgrounds and frosted backdrop. Space-separated attribute tokens select block vs inline axis, which edges stick, and background visibility; max sizes use `--scrollContainer-size*` minus resolved sticky insets from ancestor containers.
		 *
		 * ### Placement
		 * - On the element that should stick, inside a subtree bounded by `[data-sticky-container]` (and under `[data-scroll-container]`).
		 *
		 * ### Tokens
		 * - axis: `block`, `inline`
		 * - block edges: `block-start`, `block-end`
		 * - inline edges: `inline-start`, `inline-end`
		 * - background: `background`, `background-always`
		 * - backdrop placement: `backdrop-self`, `backdrop-before`, `backdrop-after`
		 * - backdrop condition: `backdrop-always`, `backdrop-stuck`, `backdrop-none`
		 *   Backdrop conditions require an explicit backdrop placement token.
		 *
		 * ### CSS Variables
		 * - `--sticky-backgroundColor`
		 * - `--sticky-background`: optional complete background override; use `none` for filter-only surfaces; reduced transparency uses the shared color fallback.
		 * - `--sticky-backdropFilter`
		 * - `--sticky-zIndex`: foreground stacking layer; defaults to `1`.
		 * - `--sticky-offset`: optional inset override for all sticky axes; `auto` retains ordinary-flow offsets.
		 * - `--sticky-position`: positioning participation; defaults to `sticky`; `relative` preserves local containing blocks in normal flow.
		 *
		 * ### Examples
		 * - Default sticky on both axes (omit axis and edge tokens):
		 *   ```html
		 *   <header data-sticky>
		 *     <h1>Title</h1>
		 *   </header>
		 *   ```
		 * - `block-start` (narrow column sidebar):
		 *   ```html
		 *   <nav data-sticky="block-start">Sections</nav>
		 *   ```
		 *
		 * ### Source
		 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-sticky]`
		 */
		[data-sticky] {
			/* Inputs */
			--sticky-backgroundColor: light-dark(#f8edff3c, #130a2b3c);
			--sticky-backdropFilter: blur(20px);
			---sticky-background: linear-gradient(
					var(--sticky-backgroundColor),
					var(--sticky-backgroundColor)
				)
				var(--background-primary);
			---sticky-backdropFilter: none;

			@media (prefers-reduced-transparency: no-preference) {
				---sticky-background: var(--sticky-background, var(--sticky-backgroundColor));
				---sticky-backdropFilter: var(--sticky-backdropFilter);
			}

			&[data-card] {
				--sticky-backgroundColor: var(--card-backgroundColor);
			}

			/* Rules */
			z-index: var(--sticky-zIndex, 1);
			container-type: scroll-state;

			position: var(--sticky-position, sticky);

			&:is(details:not([open]) *) {
				position: relative;
				inset: auto;
				container-type: normal;
				&:not([data-sticky-breadcrumb~="position"]) {
					z-index: auto;
				}
				&[data-sticky~="backdrop-self"] {
					background: none;
					backdrop-filter: none;
				}
				&[data-sticky~="backdrop-before"]::before,
				&[data-sticky~="backdrop-after"]::after {
					content: none;
				}
			}

			&:not([data-sticky~="block"], [data-sticky~="inline"]),
			&[data-sticky~="block"] {
				inset-block-start: var(--sticky-offset, var(--sticky-insetBlockStart));
				inset-block-end: var(--sticky-offset, var(--sticky-insetBlockEnd));

				max-block-size: calc(
					var(--scrollContainer-sizeBlock) - var(--sticky-insetBlockStart) -
						var(--sticky-insetBlockEnd)
				);

				&[data-sticky~='block-start'] {
					inset-block-end: auto;
				}

				&[data-sticky~='block-end'] {
					inset-block-start: auto;
				}
			}
			&:not([data-sticky~="block"], [data-sticky~="inline"]),
			&[data-sticky~="inline"] {
				inset-inline-start: var(--sticky-offset, var(--sticky-insetInlineStart));
				inset-inline-end: var(--sticky-offset, var(--sticky-insetInlineEnd));

				max-inline-size: calc(
					var(--scrollContainer-sizeInline) - var(--sticky-insetInlineStart) -
						var(--sticky-insetInlineEnd)
				);

				&[data-sticky~='inline-start'] {
					inset-inline-end: auto;
				}

				&[data-sticky~='inline-end'] {
					inset-inline-start: auto;
				}
			}

			&:where(:not([data-sticky~="backdrop-none"])) {
				&:where([data-sticky~="backdrop-always"]) {
					&:where([data-sticky~="backdrop-self"]),
					&:where([data-sticky~="backdrop-before"])::before,
					&:where([data-sticky~="backdrop-after"])::after {
						background: var(---sticky-background);
						backdrop-filter: var(---sticky-backdropFilter);
					}
				}
				&:where([data-sticky~="backdrop-stuck"]) {
					&:where([data-sticky~="backdrop-self"]),
					&:where([data-sticky~="backdrop-before"])::before,
					&:where([data-sticky~="backdrop-after"])::after {
						@supports not (container-type: scroll-state) {
							background: var(---sticky-background);
							backdrop-filter: var(---sticky-backdropFilter);
						}
						@container not scroll-state(stuck: none) {
							background: var(---sticky-background);
							backdrop-filter: var(---sticky-backdropFilter);
						}
					}
				}


				&:where([data-sticky~="backdrop-before"])::before,
				&:where([data-sticky~="backdrop-after"])::after {
					content: '';
					z-index: -1;
					position: absolute;
					inset: 0;
					border-radius: inherit;
				}
				&:is([data-sticky-breadcrumb~="position"], :is([data-sticky-breadcrumb~="position"][data-column~="span-start"]:has(> [data-sticky~="backdrop-before"]), summary:is([data-column~="span-start"], :has(> [data-sticky-breadcrumb~="support"]))) > [data-sticky])[data-sticky~="backdrop-stuck"]:not(details:not([open]) *) {
					---breadcrumb-surfaceBlockStart: var(---breadcrumb-blockStart);
					&:is(:is([data-sticky-breadcrumb~="position"][data-column~="span-start"]:has(> [data-sticky~="backdrop-before"]), summary:is([data-column~="span-start"], :has(> [data-sticky-breadcrumb~="support"]))) > [data-sticky]) {
						---breadcrumb-surfaceBlockStart: var(--sticky-insetBlockStart);
					}
					@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) and
						(width: anchor-size(--breadcrumb-source inline)) and (timeline-scope: --breadcrumb-size)
						and (color: if(style(---breadcrumb-wrap: 1): red)) {
						&:is(summary)[data-sticky~="backdrop-before"]::before,
						&:is(summary)[data-sticky~="backdrop-after"]::after {
							pointer-events: auto;
						}
						&[data-sticky~="backdrop-before"]::before,
						&[data-sticky~="backdrop-after"]::after {
							/* Arrival and row bounds belong to this breadcrumb, including native-query fallbacks. */
							inset: auto;
							inset-block-start: 0;
							inset-inline-start: 0;
							inline-size: 100%;
							block-size: calc(var(---breadcrumb-blockEnd) - var(---breadcrumb-surfaceBlockStart));
							background: var(---sticky-background);
							backdrop-filter: var(---sticky-backdropFilter);
							opacity: 0;
							visibility: hidden;

						}
						&:is(summary) {
							&[data-sticky~="backdrop-before"]::before,
							&[data-sticky~="backdrop-after"]::after {
								@container style(---breadcrumb-wrap: 1) {
									animation: breadcrumb-backdrop auto var(--stickyBreadcrumb-easing, var(--transition-easeOutExpo)) both;
									animation-timeline: var(--stickyBreadcrumb-entryTimeline);
									animation-range: var(--stickyBreadcrumb-entryRange);
									@container style(---breadcrumb-entry: 1) {
										opacity: 1;
										visibility: visible;
										animation: var(--stickyBreadcrumb-exitAnimation);
										animation-timeline: var(---breadcrumb-exitTimeline);
										animation-range: var(---breadcrumb-exitRange);
									}
								}
							}
						}
						&:not(summary) {
							&[data-sticky~="backdrop-before"]::before,
							&[data-sticky~="backdrop-after"]::after {
								visibility: visible;
								pointer-events: none;
								@container style(---breadcrumb-wrap: 1) {
									animation: breadcrumb-surface auto var(--stickyBreadcrumb-easing, var(--transition-easeOutExpo)) both,
										if(style(--stickyBreadcrumb-exitAnimation: none): none; else: breadcrumb-surface-exit auto var(--stickyBreadcrumb-easing, var(--transition-easeInExpo)) reverse forwards);
									animation-timeline: var(--stickyBreadcrumb-entryTimeline), var(---breadcrumb-exitTimeline);
									animation-range: var(--stickyBreadcrumb-entryRange), var(---breadcrumb-exitRange);
								}
							}
						}
						&:is(summary > [data-sticky]) {
							&[data-sticky~="backdrop-before"]::before,
							&[data-sticky~="backdrop-after"]::after {
								pointer-events: if(style(---breadcrumb-wrap: 1) and style(---breadcrumb-entry: 1): auto; else: none);
							}
						}


					}
				}
			}
		}

		/**
		 * Scroll/sticky subtree helpers on children of `[data-sticky-container]`: wide figures (`inline-detached` + padding match), attached rows, scroll snap, max intrinsic sizes, and overflow alignment. Many rules read `--sticky-sizeInline` and padding variables from the enclosing sticky layout.
		 *
		 * ### Placement
		 * - On descendants inside `[data-sticky-container]` that need snap, bleed, or overflow alignment (not on the scroll root itself).
		 *
		 * ### Tokens
		 * - width / bleed: `inline-detached`, `inline-attached`, `padding-match-start`, `padding-match-end`
		 * - `flow`: retain inline-detached sizing in normal flow without a sticky stacking context
		 * - attached alignment: `underflow-start`, `underflow-center`, `underflow-end`, `overflow-start`, `overflow-center`, `overflow-end`
		 * - snap / size: `snap-block-start`, `snap-block-end`, `snap-prose`, `block-size-max`, `inline-size-max`
		 * - `snap-prose`: direct children and all nested paragraphs/list items clear the enclosing sticky inset by half their inherited column/list gap.
		 *
		 * ### Examples
		 * - Bleed + block-end padding match (`inline-detached` + `padding-match-end`):
		 *   ```html
		 *   <section data-scroll-item="inline-detached padding-match-end">
		 *     <figure>
		 *       <img src="figure.png" alt="" />
		 *     </figure>
		 *   </section>
		 *   ```
		 * - Scroll snap at block start:
		 *   ```html
		 *   <section data-scroll-item="snap-block-start">
		 *     <h2>Panel</h2>
		 *   </section>
		 *   ```
		 *
		 * ### Source
		 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-scroll-item]`
		 */
		[data-scroll-item] {
			&[data-scroll-item~='inline-detached'] {
				/* Rules */
				--scrollItem-paddingInlineStart: max(
					var(--scrollItem-inlineDetached-paddingStart),
					(var(--sticky-sizeInline) - var(--scrollItem-inlineDetached-maxSize)) / 2
				);
				--scrollItem-paddingInlineEnd: max(
					var(--scrollItem-inlineDetached-paddingEnd),
					(var(--sticky-sizeInline) - var(--scrollItem-inlineDetached-maxSize)) / 2
				);
				--scrollItem-paddingInlineMatch: min(
					var(--scrollItem-paddingInlineStart),
					var(--scrollItem-paddingInlineEnd)
				);

				position: var(--sticky-position, sticky);
				inset-inline-start: var(--sticky-offset, var(--sticky-insetInlineStart));
				inset-inline-end: var(--sticky-offset, var(--sticky-insetInlineEnd));

				&[data-scroll-item~="flow"] {
					position: relative;
					inset-inline: auto;
				}

				inline-size: var(--sticky-sizeInline);
				padding-inline-start: var(--scrollItem-paddingInlineStart);
				padding-inline-end: var(--scrollItem-paddingInlineEnd);

				&[data-sticky-container] {
					--sticky-paddingInlineStart: var(--scrollItem-paddingInlineStart);
					--sticky-paddingInlineEnd: var(--scrollItem-paddingInlineEnd);
				}

				&[data-scroll-item~="padding-match-start"] {
					padding-block-start: min(
						var(--scrollItem-paddingInlineMatch),
						var(--scrollItem-inlineDetached-maxPaddingMatchStart)
					);
				}

				&[data-scroll-item~="padding-match-end"] {
					padding-block-end: min(
						var(--scrollItem-paddingInlineMatch),
						var(--scrollItem-inlineDetached-maxPaddingMatchEnd)
					);
				}

				[data-scroll-item~='inline-detached'] {
					inline-size: auto;
					max-inline-size: calc(
						100% + var(--scrollItem-paddingInlineStart) + var(--scrollItem-paddingInlineEnd)
					);
					margin-inline-start: calc(-1 * var(--scrollItem-paddingInlineStart));
					margin-inline-end: calc(-1 * var(--scrollItem-paddingInlineEnd));
				}
			}
			&[data-scroll-item~='inline-attached'] {
				display: grid;
				inline-size: -moz-max-content;
				inline-size: max-content;
				min-inline-size: var(--sticky-sizeInline);

				&[data-scroll-item~='underflow-start'] {
					justify-content: safe start;
				}
				&[data-scroll-item~='underflow-center'] {
					justify-content: safe center;
				}
				&[data-scroll-item~='underflow-end'] {
					justify-content: safe end;
				}

				&[data-scroll-item~='overflow-start'] {
					position: var(--sticky-position, sticky);
					inset-inline-end: var(--sticky-offset, var(--sticky-insetInlineEnd));
					margin-inline-start: auto;
				}
				&[data-scroll-item~='overflow-center'] {
					margin-inline: auto;
				}
				&[data-scroll-item~='overflow-end'] {
					position: var(--sticky-position, sticky);
					inset-inline-start: var(--sticky-offset, var(--sticky-insetInlineStart));
					margin-inline-end: auto;
				}
			}

			&[data-scroll-item~="snap-block-start"],
			&[data-scroll-item~="snap-prose"] > [data-sticky-container] {
				scroll-snap-align: start;
				scroll-margin-block-start: var(---breadcrumb-blockEnd, var(--sticky-insetBlockStart));
			}
			&[data-scroll-item~="snap-prose"] > :not([data-sticky-container]),
			&[data-scroll-item~="snap-prose"] :is(p, li):not([data-sticky-container]) {
				scroll-snap-align: start;
				scroll-margin-block-start: calc(var(--sticky-insetBlockStart) + var(--sticky-paddingBlockStart) + var(---column-gap) / 2);
				[data-sticky-breadcrumb~="scope"] :is(&) {
					scroll-margin-block-start: calc(var(
						---breadcrumb-blockEnd,
						calc(var(--sticky-insetBlockStart) + var(--sticky-paddingBlockStart))
					) + var(---column-gap) / 2);
				}
			}
			&[data-scroll-item~='snap-block-end'] {
				scroll-snap-align: end;
			}

			&[data-scroll-item~='block-size-max'] {
				block-size: -moz-max-content;
				block-size: max-content;
			}

			&[data-scroll-item~='inline-size-max'] {
				inline-size: -moz-max-content;
				inline-size: max-content;
			}
		}
	}
}

[data-sticky-breadcrumb~="scope"][data-sticky-container]:not([data-sticky-breadcrumb~="root"]) {
	--scrollItem-inlineDetached-maxSize: inherit;
	--scrollItem-inlineDetached-paddingStart: inherit;
	--scrollItem-inlineDetached-maxPaddingMatchStart: inherit;
	--scrollItem-inlineDetached-paddingEnd: inherit;
	--scrollItem-inlineDetached-maxPaddingMatchEnd: inherit;
}

@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) and
	(width: anchor-size(--breadcrumb-source inline)) and (timeline-scope: --breadcrumb-size) and
	(color: if(style(---breadcrumb-wrap: 1): red)) {
	[data-sticky-breadcrumb~="scope"][data-sticky-container] {
		isolation: auto;
	}
	[data-sticky-breadcrumb~="scope"] [data-sticky-breadcrumb~="position"] {
		> [data-sticky~="block"][data-sticky~="block-start"]:not(:is([data-sticky-breadcrumb~="position"][data-column~="span-start"]:has(> [data-sticky~="backdrop-before"]), summary:is([data-column~="span-start"], :has(> [data-sticky-breadcrumb~="support"]))) > [data-sticky]),
		> [data-column] > [data-sticky~="block"][data-sticky~="block-start"] {
			position: static;
			inset: auto;
			z-index: auto;
			container-type: normal;
			max-block-size: none;
			background: none;
			backdrop-filter: none;
			&:has(> [data-sticky-breadcrumb~="size-export"]) {
				position: relative;
			}
			:where(summary) & {
				pointer-events: if(style(---breadcrumb-entry: 0): auto; else: none);
			}
		}
	}
}

@property ---collapsible-markerMeasure {
	syntax: '*';
	inherits: false;
	initial-value: none;
}
@property ---clearance-inlineFraction {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}
@property ---breadcrumb-endViewportInlineEnd {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}
@property ---collapsible-markerInlineEnd {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}
@keyframes clearance-inline-measure {
	from {
		---clearance-inlineFraction: 0;
	}
	to {
		---clearance-inlineFraction: 1;
	}
}

[data-sticky-breadcrumb~="scope"][id],
details[id] {
	@supports (view-timeline-name: ident("a" "b")) {
		--collapsible-markerInlineTimeline: ident("--collapsible-marker-" attr(id));
	}
}

/**
 * Shared disclosure / accordion styling for native `<details>` and optional `[data-collapsible]` wrappers. Disclosure animation and summary chevron apply to `<details>`. `[data-collapsible]` documents the hook and can mark optional wrappers if you add them in markup.
 *
 * ### Applied to
 * - `<details>`
 *
 * ### CSS Variables
 * - `--collapsible-summaryPaddingBlock`: block-axis padding on the native summary of a card disclosure; configure on the summary, defaults to `--card-padding`; inline and body padding retain the card value
 * - `--collapsible-markerInlineTimeline`: local marker measurement clock; inherited from the nearest identified disclosure or breadcrumb scope, with an explicit local override for repeated anonymous owners
 * - `--collapsible-markerMotion`: `clearance` enables caller-configured motion at the actual native marker owner and closed breadcrumb end clusters; open end clusters retain their arrival motion
 * - `--collapsible-markerClearanceRadius`, `--collapsible-markerClearanceCenterInline`, `--collapsible-markerClearanceCenterBlock`: obstacle ink radius and logical viewport center; the native marker owns its measured inline end and line height
 * - `--collapsible-markerAnimation`, `--collapsible-markerTimeline`, `--collapsible-markerRange`: native marker effect and its scroll timeline; independent disclosure rotation is preserved
 *
 * ### Examples
 * - Native disclosure (`details` picks up animation and summary chrome — omit `[data-collapsible]` when you do not need the hook):
 *   ```html
 *   <details>
 *     <summary>More</summary>
 *     <div><p>Hidden body.</p></div>
 *   </details>
 *   ```
 * - `[data-collapsible]` + `[data-card]` padding split between summary and body:
 *   ```html
 *   <details data-card="padding-6">
 *     <summary data-row="wrap wrap-first-last">Title row</summary>
 *     <div><p>Body</p></div>
 *   </details>
 *   ```
 *
 * ### Source
 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-collapsible]`
 */
[data-collapsible],
details {
	---collapsible-markerSupported: --breadcrumb-clearance-supported();
	&::details-content {
		display: grid;
		block-size: auto;
		min-block-size: 0;
		overflow: clip;
		content-visibility: visible;
		transition-property: none;
	}

	&:not([open]) {
		&::details-content {
			display: none;
			block-size: 0;
			content-visibility: hidden;
		}
	}
	@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
		&::details-content {
			transition-property: block-size, padding-block-end, content-visibility;
			@media (prefers-reduced-motion: reduce) {
				transition-duration: 0s;
			}
		}
		&:not([open])::details-content {
			display: grid;
		}
	}

	> :where(summary) {
		---summary-markerRotation: 0deg;
		cursor: zoom-in;

		> :only-child {
			flex: 1;
		}

		&::-webkit-details-marker {
			display: none;
		}

		/* The existing end cluster owns the marker when the content row wraps. */
		&:not(
			:has(
				> [data-row] > [data-row-item~="wrap-end"],
				> :is([data-column~="span-start"], header) > [data-row] > [data-row-item~="wrap-end"]
			)
		),
		> [data-row] > [data-row-item~="wrap-end"],
		> :is([data-column~="span-start"], header) > [data-row] > [data-row-item~="wrap-end"] {
			---collapsible-markerInlineSize: 0.75em;
			&::after {
				content: '';
			}
			&:has(> [data-collapsible-marker])::after {
				content: none;
			}
			/**
			 * ## [data-collapsible-marker]
			 * Decorative disclosure chevron with an independent paint owner. Replaces its parent's automatic marker while sharing native summary rotation and glyph styling.
			 *
			 * ### Placement
			 * - An `aria-hidden="true"` final child of a native summary's breadcrumb `end contents` cluster. Its children own the open arrival motion while the cluster retains intrinsic measurement and curve production.
			 *
			 * ### Examples
			 * - An explicit marker in a native summary's end cluster:
			 *   ```html
			 *   <details>
			 *     <summary><div data-row><h3>Details</h3><span data-row-item="wrap-end" data-sticky-breadcrumb="end contents"><span data-collapsible-marker aria-hidden="true"></span></span></div></summary>
			 *   </details>
			 *   ```
			 *
			 * ### Source
			 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-collapsible-marker]`
			 */
			&::after,
			> [data-collapsible-marker] {
			flex-shrink: 0;
			inline-size: var(---collapsible-markerInlineSize);
			block-size: 1lh;

			background-color: currentColor;
			-webkit-mask: var(--icon-chevron) no-repeat center;
			        mask: var(--icon-chevron) no-repeat center;
			opacity: 0.66;

			rotate: x var(---summary-markerRotation);
			transition-property: rotate;
		}
	}
	}

	&[open] > summary {
		---summary-markerRotation: 180deg;
		cursor: zoom-out;
	}
}



@scope (:root) to (details:not([open]) > :not(summary)) {
	:is([data-collapsible], details) > :where(summary) {
		&:not(
			:has(
				> [data-row] > [data-row-item~="wrap-end"],
				> :is([data-column~="span-start"], header) > [data-row] > [data-row-item~="wrap-end"]
			)
		),
		> [data-row] > [data-row-item~="wrap-end"],
		> :is([data-column~="span-start"], header) > [data-row] > [data-row-item~="wrap-end"] {
			&:not([data-sticky-breadcrumb~="end"]) {
				@container style(--collapsible-markerMotion: clearance) {
					@container style(---collapsible-markerSupported: 1) {
						---collapsible-markerMeasure: clearance-inline-measure;
						timeline-scope: var(--collapsible-markerInlineTimeline, --collapsible-marker-inline);
						---collapsible-markerInlineEnd: calc(
							(100vw + var(---collapsible-markerInlineSize)) *
								(0.5 + var(---inlineDirection) * (0.5 - var(---clearance-inlineFraction)))
						);
						&:not([data-sticky-breadcrumb~="position"]),
						&:is(details:not([open]) > summary) {
							animation: var(---collapsible-markerMeasure) auto linear both;
							animation-timeline: var(--collapsible-markerInlineTimeline, --collapsible-marker-inline);
							animation-range: cover 0% cover 100%;
						}
		}

					&::after {
						animation: var(--collapsible-markerAnimation);
						animation-timeline: var(--collapsible-markerTimeline);
						animation-range: var(--collapsible-markerRange);
						@container style(---collapsible-markerSupported: 1) {
							view-timeline: var(--collapsible-markerInlineTimeline, --collapsible-marker-inline) inline;
							view-timeline-inset: 0;
							---collapsible-markerInlineEnd: inherit;
							---breadcrumb-clearance-arc-height: 1lh;
							transform: translateX(0px);
							animation: breadcrumb-clearance-inline auto var(---breadcrumb-clearance-flowEasing) none;
							animation-timeline: view(
								block
									calc(
										var(---breadcrumb-clearance-arc-centerY) -
											var(---breadcrumb-clearance-view-size) / 2
									)
									calc(
										100vh - var(---breadcrumb-clearance-arc-centerY) -
											var(---breadcrumb-clearance-view-size) / 2
									)
							);
							animation-range:
								exit-crossing calc(100% - 2 * (var(---breadcrumb-clearance-view-size) + var(---breadcrumb-clearance-flow-height)))
								exit-crossing 100%;
						}
					}
				}
			}
		}
	}
	@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) and
	(width: anchor-size(--breadcrumb-source inline)) and (timeline-scope: --breadcrumb-size) and
	(color: if(style(---breadcrumb-wrap: 1): red)) {
		@container style(--collapsible-markerMotion: clearance) {
			@container style(---collapsible-markerSupported: 1) {
				:is(details, [data-collapsible]) > summary:not(:has(
					> [data-row] > [data-row-item~="wrap-end"],
					> :is([data-column~="span-start"], header) > [data-row] > [data-row-item~="wrap-end"]
				)):not([data-sticky-breadcrumb~="end"])::after,
				:is(details, [data-collapsible]) > summary > [data-row] > [data-row-item~="wrap-end"]:not([data-sticky-breadcrumb~="end"])::after,
				:is(details, [data-collapsible]) > summary > :is([data-column~="span-start"], header) > [data-row] > [data-row-item~="wrap-end"]:not([data-sticky-breadcrumb~="end"])::after,
				details:not([open]) > summary [data-sticky-breadcrumb~="end"] {
					---breadcrumb-clearance-arc-inlineRadius: calc(var(--collapsible-markerClearanceRadius) / cos(1.40625deg));
					---breadcrumb-clearance-arc-radius: var(---breadcrumb-clearance-arc-inlineRadius);
					---breadcrumb-clearance-inlineOffset: calc(var(---collapsible-markerInlineEnd) - var(--collapsible-markerClearanceCenterInline));
					---breadcrumb-clearance-arc-centerY: var(--collapsible-markerClearanceCenterBlock);
					---breadcrumb-clearance-flow-height: var(---breadcrumb-clearance-arc-height);
					---breadcrumb-clearance-view-size: calc(2 * (var(---breadcrumb-clearance-arc-radius) + var(--stickyBreadcrumb-clearanceGap, 0px)));
					---breadcrumb-clearance-native-a: calc(
						var(---breadcrumb-clearance-arc-centerY) + var(---breadcrumb-clearance-view-size) / 2
					);
					---breadcrumb-clearance-contact: --breadcrumb-clearance-contact();
					---breadcrumb-clearance-joinBlock: --breadcrumb-clearance-join(0, var(--stickyBreadcrumb-clearanceGap, 0px));
					---breadcrumb-clearance-joinInline: --breadcrumb-clearance-join(1, var(--stickyBreadcrumb-clearanceGap, 0px));
					---breadcrumb-clearance-flowEasing: --breadcrumb-clearance-flow-easing();
				}
				details:not([open]) > summary [data-sticky-breadcrumb~="end"] {
					---collapsible-markerInlineEnd: var(---breadcrumb-endViewportInlineEnd);
					---breadcrumb-clearance-arc-height: var(---breadcrumb-endHeight);
					--stickyBreadcrumb-endPaintAnimation: breadcrumb-clearance-inline auto var(---breadcrumb-clearance-flowEasing) none;
					--stickyBreadcrumb-endPaintTimeline: var(---breadcrumb-endFlowTimeline);
					--stickyBreadcrumb-endPaintRange:
						exit-crossing calc(100% - 2 * (var(---breadcrumb-clearance-view-size) + var(---breadcrumb-clearance-flow-height)))
						exit-crossing 100%;
					view-timeline-name: var(---breadcrumb-endPositionTimeline), var(---breadcrumb-endFlowTimeline);
					view-timeline-axis: inline, block;
					view-timeline-inset: 0,
						calc(var(---breadcrumb-clearance-arc-centerY) - var(---breadcrumb-clearance-view-size) / 2)
						calc(100vh - var(---breadcrumb-clearance-arc-centerY) - var(---breadcrumb-clearance-view-size) / 2);
					&:not(:where([data-sticky-breadcrumb~="contents"])),
					&[data-sticky-breadcrumb~="contents"] > :not([data-sticky-breadcrumb~="size-export"]),
					&[data-sticky-breadcrumb~="contents"]:not(:has(> [data-collapsible-marker]))::after {
						transform: translateX(0px);
					}
				}
			}
		}
	}
}

/* A card can own either the disclosure itself or its existing outer scope. */
[data-card]:is(details, [data-collapsible], :has(> details)) {
	padding: 0;
	gap: 0 !important;
	> details {
		border-radius: inherit;
	}
	> summary,
	> details > summary {
		padding: var(--card-padding);
		padding-block: var(--collapsible-summaryPaddingBlock, var(--card-padding));
	}
	&:is(details, [data-collapsible]):has(> summary + :not(:last-child))::details-content,
	> details:has(> summary + :not(:last-child))::details-content,
	> summary + :last-child,
	> details > summary + :last-child {
		padding: var(--card-padding);
		padding-block-start: 0;
	}
	&:is(details, [data-collapsible]):has(> summary + :not(:last-child)):not([open])::details-content,
	> details:has(> summary + :not(:last-child)):not([open])::details-content {
		padding-block-end: 0;
	}
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	/**
	 * ## [data-safari]
	 *
	 * Workarounds for unsupported features in Safari.
	 *
	 * ### Source
	 * @see [src/styles/css-attributes.css](./css-attributes.css) `[data-safari]`
	 */
	[data-safari] {
		/* @media queries not yet supported in .svg files */
		&[data-safari~='invert-lightness'] {
			transition-property: filter, outline-color;

			:root:is([style*="color-scheme: dark;"], :has(#theme-toggle:checked)) & {
				filter: invert() hue-rotate(0.5turn);
				outline-color: hsl(from var(--accent) calc(h + 0.5turn) s l);
			}

			@media (prefers-color-scheme: dark) {
				:root:has(#theme-toggle:checked) & {
					filter: none;
					outline-color: inherit;
				}
				:root:not([style*="color-scheme: light;"]):not(:has(#theme-toggle:checked)) & {
					filter: invert() hue-rotate(0.5turn);
					outline-color: hsl(from var(--accent) calc(h + 0.5turn) s l);
				}
			}
		}
	}
}
[data-icon~='wbicons-complex'] {
	font-family: var(--fontFamily-wbicons-complex);
	font-style: normal;
	font-weight: 400;
}

[data-icon~='wbicons-simple'] {
	font-family: var(--fontFamily-wbicons-simple);
	font-style: normal;
	font-weight: 400;
}

[data-icon~='wbicons-complex'], [data-icon~='wbicons-simple'] {
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;

	&::before {
		content: var(--icon-content);
		font-size: var(--icon-size, 1em);
	}

	&[data-icon~='circle']::before {
		font-size: calc(var(--icon-size, 2rem) * 0.55);
	}

	&[data-icon~='emoji'] {
		font-family: var(--fontFamily-emoji);
	}

	&[data-icon~='about'] {
		--icon-content: 'ℹ️';
	}

	&[data-icon~='account_abstraction'] {
		--icon-content: '👤';
	}

	&[data-icon~='account_portability'] {
		--icon-content: '🧳';
	}

	&[data-icon~='account_recovery'] {
		--icon-content: '🛟';
	}

	&[data-icon~='account_type'] {
		--icon-content: '🪪';
	}

	&[data-icon~='account_unruggability'] {
		--icon-content: '🪚';
	}

	&[data-icon~='address_resolution'] {
		--icon-content: '📇';
	}

	&[data-icon~='app_isolation'] {
		--icon-content: '🏝️';
	}

	&[data-icon~='browser_integration'] {
		--icon-content: '🌐';
	}

	&[data-icon~='bug'] {
		--icon-content: '🐞';
	}

	&[data-icon~='by_rating'] {
		--icon-content: '⭐';
	}

	&[data-icon~='by_wallet'] {
		--icon-content: '👛';
	}

	&[data-icon~='chain_abstraction'] {
		--icon-content: '🌉';
	}

	&[data-icon~='chain_verification'] {
		--icon-content: '⚓';
	}

	&[data-icon~='checklist'] {
		--icon-content: '📋';
	}

	&[data-icon~='code_repository'] {
		--icon-content: '🐙';
	}

	&[data-icon~='contribute'] {
		--icon-content: '🤝';
	}

	&[data-icon~='dark_light_mode'] {
		--icon-content: '🌗';
	}

	&[data-icon~='discuss'] {
		--icon-content: '💬';
	}

	&[data-icon~='donation'] {
		--icon-content: '🎁';
	}

	&[data-icon~='duress_resistance'] {
		--icon-content: '🔧';
	}

	&[data-icon~='ecosystem'] {
		--icon-content: '🌳';
	}

	&[data-icon~='eip_trackers'] {
		--icon-content: '📌';
	}

	&[data-icon~='faq'] {
		--icon-content: '❓';
	}

	&[data-icon~='fee_transparency'] {
		--icon-content: '💸';
	}

	&[data-icon~='free_and_open_source_license'] {
		--icon-content: '❤️';
	}

	&[data-icon~='funding_transparency'] {
		--icon-content: '💰';
	}

	&[data-icon~='graduate'] {
		--icon-content: '🎓';
	}

	&[data-icon~='hardware_wallet_interoperability'] {
		--icon-content: '🧱';
	}

	&[data-icon~='hardware_wallet_support'] {
		--icon-content: '🗝️';
	}

	&[data-icon~='l1_provider_independence'] {
		--icon-content: '🏠';
	}

	&[data-icon~='multi_address_privacy'] {
		--icon-content: '🖇️';
	}

	&[data-icon~='newsletter'] {
		--icon-content: '📰';
	}

	&[data-icon~='orderflow_transparency'] {
		--icon-content: '🔀';
	}

	&[data-icon~='passkey_verification'] {
		--icon-content: '🫆';
	}

	&[data-icon~='permissions_management'] {
		--icon-content: '🔑';
	}

	&[data-icon~='poo'] {
		--icon-content: '💩';
	}

	&[data-icon~='privacy'] {
		--icon-content: '😎';
	}

	&[data-icon~='privacy_hygiene'] {
		--icon-content: '🧼';
	}

	&[data-icon~='private_token_transfers'] {
		--icon-content: '📨';
	}

	&[data-icon~='question_mark'] {
		--icon-content: '❔';
	}

	&[data-icon~='release_process_transparency'] {
		--icon-content: '📦';
	}

	&[data-icon~='repository'] {
		--icon-content: '🐱';
	}

	&[data-icon~='scam_prevention'] {
		--icon-content: '🚨';
	}

	&[data-icon~='security'] {
		--icon-content: '🔒';
	}

	&[data-icon~='security_audits'] {
		--icon-content: '📜';
	}

	&[data-icon~='self_sovereignty'] {
		--icon-content: '🏰';
	}

	&[data-icon~='sharpener'] {
		--icon-content: '✏️';
	}

	&[data-icon~='stage_0'] {
		--icon-content: '🌱';
	}

	&[data-icon~='stage_0_5'] {
		--icon-content: '🌿';
	}

	&[data-icon~='stage_1'] {
		--icon-content: '🪴';
	}

	&[data-icon~='stage_2'] {
		--icon-content: '🌾';
	}

	&[data-icon~='stage_none'] {
		--icon-content: '🏜️';
	}

	&[data-icon~='stages'] {
		--icon-content: '🌸';
	}

	&[data-icon~='transaction_batching'] {
		--icon-content: '🧺';
	}

	&[data-icon~='transaction_inclusion'] {
		--icon-content: '📡';
	}

	&[data-icon~='transaction_legibility'] {
		--icon-content: '🧾';
	}

	&[data-icon~='transparency'] {
		--icon-content: '🕵️';
	}

	&[data-icon~='user_privacy'] {
		--icon-content: '🕶️';
	}

	&[data-icon~='wallet_address_privacy'] {
		--icon-content: '🔗';
	}

	&[data-icon~='wallet_browser'] {
		--icon-content: '🧩';
	}

	&[data-icon~='wallet_desktop'] {
		--icon-content: '🖥️';
	}

	&[data-icon~='wallet_embedded'] {
		--icon-content: '🧬';
	}

	&[data-icon~='wallet_hardware'] {
		--icon-content: '📟';
	}

	&[data-icon~='wallet_mobile'] {
		--icon-content: '📱';
	}

	&[data-icon~='wallet_software'] {
		--icon-content: '💻';
	}

	&[data-icon~='wallet_test'] {
		--icon-content: '🧪';
	}

	&[data-icon~='about'] {
		--icon-content: 'ℹ️';
	}

	&[data-icon~='account_abstraction'] {
		--icon-content: '👤';
	}

	&[data-icon~='account_portability'] {
		--icon-content: '🧳';
	}

	&[data-icon~='account_recovery'] {
		--icon-content: '🛟';
	}

	&[data-icon~='account_type'] {
		--icon-content: '🪪';
	}

	&[data-icon~='account_unruggability'] {
		--icon-content: '🪚';
	}

	&[data-icon~='address_resolution'] {
		--icon-content: '📇';
	}

	&[data-icon~='app_isolation'] {
		--icon-content: '🏝️';
	}

	&[data-icon~='browser_integration'] {
		--icon-content: '🌐';
	}

	&[data-icon~='bug'] {
		--icon-content: '🐞';
	}

	&[data-icon~='by_rating'] {
		--icon-content: '⭐';
	}

	&[data-icon~='by_wallet'] {
		--icon-content: '👛';
	}

	&[data-icon~='chain_abstraction'] {
		--icon-content: '🌉';
	}

	&[data-icon~='chain_verification'] {
		--icon-content: '⚓';
	}

	&[data-icon~='checklist'] {
		--icon-content: '📋';
	}

	&[data-icon~='code_repository'] {
		--icon-content: '🐙';
	}

	&[data-icon~='contribute'] {
		--icon-content: '🤝';
	}

	&[data-icon~='dark_light_mode'] {
		--icon-content: '🌗';
	}

	&[data-icon~='discuss'] {
		--icon-content: '💬';
	}

	&[data-icon~='donation'] {
		--icon-content: '🎁';
	}

	&[data-icon~='duress_resistance'] {
		--icon-content: '🔧';
	}

	&[data-icon~='ecosystem'] {
		--icon-content: '🌳';
	}

	&[data-icon~='eip_trackers'] {
		--icon-content: '📌';
	}

	&[data-icon~='faq'] {
		--icon-content: '❓';
	}

	&[data-icon~='fee_transparency'] {
		--icon-content: '💸';
	}

	&[data-icon~='free_and_open_source_license'] {
		--icon-content: '❤️';
	}

	&[data-icon~='funding_transparency'] {
		--icon-content: '💰';
	}

	&[data-icon~='graduate'] {
		--icon-content: '🎓';
	}

	&[data-icon~='hardware_wallet_interoperability'] {
		--icon-content: '🧱';
	}

	&[data-icon~='hardware_wallet_support'] {
		--icon-content: '🗝️';
	}

	&[data-icon~='l1_provider_independence'] {
		--icon-content: '🏠';
	}

	&[data-icon~='multi_address_privacy'] {
		--icon-content: '🖇️';
	}

	&[data-icon~='newsletter'] {
		--icon-content: '📰';
	}

	&[data-icon~='orderflow_transparency'] {
		--icon-content: '🔀';
	}

	&[data-icon~='passkey_verification'] {
		--icon-content: '🫆';
	}

	&[data-icon~='permissions_management'] {
		--icon-content: '🔑';
	}

	&[data-icon~='poo'] {
		--icon-content: '💩';
	}

	&[data-icon~='privacy'] {
		--icon-content: '😎';
	}

	&[data-icon~='privacy_hygiene'] {
		--icon-content: '🧼';
	}

	&[data-icon~='private_token_transfers'] {
		--icon-content: '📨';
	}

	&[data-icon~='question_mark'] {
		--icon-content: '❔';
	}

	&[data-icon~='release_process_transparency'] {
		--icon-content: '📦';
	}

	&[data-icon~='repository'] {
		--icon-content: '🐱';
	}

	&[data-icon~='scam_prevention'] {
		--icon-content: '🚨';
	}

	&[data-icon~='security'] {
		--icon-content: '🔒';
	}

	&[data-icon~='security_audits'] {
		--icon-content: '📜';
	}

	&[data-icon~='self_sovereignty'] {
		--icon-content: '🏰';
	}

	&[data-icon~='sharpener'] {
		--icon-content: '✏️';
	}

	&[data-icon~='stage_0'] {
		--icon-content: '🌱';
	}

	&[data-icon~='stage_0_5'] {
		--icon-content: '🌿';
	}

	&[data-icon~='stage_1'] {
		--icon-content: '🪴';
	}

	&[data-icon~='stage_2'] {
		--icon-content: '🌾';
	}

	&[data-icon~='stage_none'] {
		--icon-content: '🏜️';
	}

	&[data-icon~='stages'] {
		--icon-content: '🌸';
	}

	&[data-icon~='transaction_batching'] {
		--icon-content: '🧺';
	}

	&[data-icon~='transaction_inclusion'] {
		--icon-content: '📡';
	}

	&[data-icon~='transaction_legibility'] {
		--icon-content: '🧾';
	}

	&[data-icon~='transparency'] {
		--icon-content: '🕵️';
	}

	&[data-icon~='user_privacy'] {
		--icon-content: '🕶️';
	}

	&[data-icon~='wallet_address_privacy'] {
		--icon-content: '🔗';
	}

	&[data-icon~='wallet_browser'] {
		--icon-content: '🧩';
	}

	&[data-icon~='wallet_desktop'] {
		--icon-content: '🖥️';
	}

	&[data-icon~='wallet_embedded'] {
		--icon-content: '🧬';
	}

	&[data-icon~='wallet_hardware'] {
		--icon-content: '📟';
	}

	&[data-icon~='wallet_mobile'] {
		--icon-content: '📱';
	}

	&[data-icon~='wallet_software'] {
		--icon-content: '💻';
	}

	&[data-icon~='wallet_test'] {
		--icon-content: '🧪';
	}
}
[data-icon~='about'],
[data-icon-metrics='about'] {
	---icon-ink-minX-complex: 0.152;
	---icon-ink-maxX-complex: 0.848;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='account_abstraction'],
[data-icon-metrics='account_abstraction'] {
	---icon-ink-minX-complex: 0.001;
	---icon-ink-maxX-complex: 0.999;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='account_portability'],
[data-icon-metrics='account_portability'] {
	---icon-ink-minX-complex: 0.007;
	---icon-ink-maxX-complex: 0.993;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='account_recovery'],
[data-icon-metrics='account_recovery'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.758;
	---icon-ink-top-complex: 0.121;
	---icon-ink-advance-complex: 1;
}

[data-icon~='account_type'],
[data-icon-metrics='account_type'] {
	---icon-ink-minX-complex: 0.32;
	---icon-ink-maxX-complex: 0.68;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='account_unruggability'],
[data-icon-metrics='account_unruggability'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.637;
	---icon-ink-top-complex: 0.182;
	---icon-ink-advance-complex: 1;
}

[data-icon~='address_resolution'],
[data-icon-metrics='address_resolution'] {
	---icon-ink-minX-complex: 0.08994140625;
	---icon-ink-maxX-complex: 0.9101666667;
	---icon-ink-height-complex: 1.000272727;
	---icon-ink-top-complex: -0.0002727272727;
	---icon-ink-advance-complex: 1;
}

[data-icon~='app_isolation'],
[data-icon-metrics='app_isolation'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.958;
	---icon-ink-top-complex: 0.021;
	---icon-ink-advance-complex: 1;
}

[data-icon~='browser_integration'],
[data-icon-metrics='browser_integration'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.941;
	---icon-ink-top-complex: 0.029;
	---icon-ink-advance-complex: 1;
}

[data-icon~='bug'],
[data-icon-metrics='bug'] {
	---icon-ink-minX-complex: -0.0003333333333;
	---icon-ink-maxX-complex: 1.000255319;
	---icon-ink-height-complex: 0.7353333333;
	---icon-ink-top-complex: 0.1326666667;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='by_rating'],
[data-icon-metrics='by_rating'] {
	---icon-ink-minX-complex: 0.002;
	---icon-ink-maxX-complex: 0.998;
	---icon-ink-height-complex: 0.999;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='by_wallet'],
[data-icon-metrics='by_wallet'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.89;
	---icon-ink-top-complex: 0.055;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='chain_abstraction'],
[data-icon-metrics='chain_abstraction'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.658;
	---icon-ink-top-complex: 0.171;
	---icon-ink-advance-complex: 1;
}

[data-icon~='chain_verification'],
[data-icon-metrics='chain_verification'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.832;
	---icon-ink-top-complex: 0.084;
	---icon-ink-advance-complex: 1;
}

[data-icon~='checklist'],
[data-icon-metrics='checklist'] {
	---icon-ink-minX-complex: 0.236;
	---icon-ink-maxX-complex: 0.764;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='code_repository'],
[data-icon-metrics='code_repository'] {
	---icon-ink-minX-complex: 0.095;
	---icon-ink-maxX-complex: 0.905;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='contribute'],
[data-icon-metrics='contribute'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 0.9999302326;
	---icon-ink-height-complex: 0.9178365316;
	---icon-ink-top-complex: 0.04092537313;
	---icon-ink-advance-complex: 1;
}

[data-icon~='dark_light_mode'],
[data-icon-metrics='dark_light_mode'] {
	---icon-ink-minX-complex: 0.077;
	---icon-ink-maxX-complex: 0.923;
	---icon-ink-height-complex: 1.000375;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='discuss'],
[data-icon-metrics='discuss'] {
	---icon-ink-minX-complex: 0.169;
	---icon-ink-maxX-complex: 0.83004;
	---icon-ink-height-complex: 0.9999230769;
	---icon-ink-top-complex: 0.00007692307692;
	---icon-ink-advance-complex: 1;
}

[data-icon~='donation'],
[data-icon-metrics='donation'] {
	---icon-ink-minX-complex: 0.151;
	---icon-ink-maxX-complex: 0.8495;
	---icon-ink-height-complex: 1.00016;
	---icon-ink-top-complex: -0.00016;
	---icon-ink-advance-complex: 1;
}

[data-icon~='duress_resistance'],
[data-icon-metrics='duress_resistance'] {
	---icon-ink-minX-complex: 0.001;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.992;
	---icon-ink-top-complex: 0.004;
	---icon-ink-advance-complex: 1;
}

[data-icon~='ecosystem'],
[data-icon-metrics='ecosystem'] {
	---icon-ink-minX-complex: 0.017;
	---icon-ink-maxX-complex: 0.984;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='eip_trackers'],
[data-icon-metrics='eip_trackers'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.984;
	---icon-ink-top-complex: 0.008;
	---icon-ink-advance-complex: 1;
}

[data-icon~='faq'],
[data-icon-metrics='faq'] {
	---icon-ink-minX-complex: 0.0428125;
	---icon-ink-maxX-complex: 0.9578846154;
	---icon-ink-height-complex: 0.9943684211;
	---icon-ink-top-complex: -0.0003684210526;
	---icon-ink-advance-complex: 1;
}

[data-icon~='fee_transparency'],
[data-icon-metrics='fee_transparency'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 0.999;
	---icon-ink-height-complex: 0.974;
	---icon-ink-top-complex: 0.013;
	---icon-ink-advance-complex: 1;
}

[data-icon~='free_and_open_source_license'],
[data-icon-metrics='free_and_open_source_license'] {
	---icon-ink-minX-complex: 0.129;
	---icon-ink-maxX-complex: 0.871;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='funding_transparency'],
[data-icon-metrics='funding_transparency'] {
	---icon-ink-minX-complex: 0.1;
	---icon-ink-maxX-complex: 0.899;
	---icon-ink-height-complex: 0.998;
	---icon-ink-top-complex: 0.001;
	---icon-ink-advance-complex: 1;
}

[data-icon~='graduate'],
[data-icon-metrics='graduate'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.8672462185;
	---icon-ink-top-complex: 0.06638235294;
	---icon-ink-advance-complex: 1;
}

[data-icon~='hardware_wallet_interoperability'],
[data-icon-metrics='hardware_wallet_interoperability'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.926;
	---icon-ink-top-complex: 0.037;
	---icon-ink-advance-complex: 1;
}

[data-icon~='hardware_wallet_support'],
[data-icon-metrics='hardware_wallet_support'] {
	---icon-ink-minX-complex: 0.006;
	---icon-ink-maxX-complex: 0.994;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='l1_provider_independence'],
[data-icon-metrics='l1_provider_independence'] {
	---icon-ink-minX-complex: 0.0001428571429;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.6041428571;
	---icon-ink-top-complex: 0.19775;
	---icon-ink-advance-complex: 1;
}

[data-icon~='multi_address_privacy'],
[data-icon-metrics='multi_address_privacy'] {
	---icon-ink-minX-complex: 0.114;
	---icon-ink-maxX-complex: 0.886;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='newsletter'],
[data-icon-metrics='newsletter'] {
	---icon-ink-minX-complex: -0.00007692307692;
	---icon-ink-maxX-complex: 0.9999473684;
	---icon-ink-height-complex: 0.7325294118;
	---icon-ink-top-complex: 0.134;
	---icon-ink-advance-complex: 1;
}

[data-icon~='orderflow_transparency'],
[data-icon-metrics='orderflow_transparency'] {
	---icon-ink-minX-complex: 0.001;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 1.000628205;
	---icon-ink-top-complex: -0.0001666666667;
	---icon-ink-advance-complex: 1;
}

[data-icon~='passkey_verification'],
[data-icon-metrics='passkey_verification'] {
	---icon-ink-minX-complex: 0.047;
	---icon-ink-maxX-complex: 0.953;
	---icon-ink-height-complex: 0.999;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='permissions_management'],
[data-icon-metrics='permissions_management'] {
	---icon-ink-minX-complex: 0.03;
	---icon-ink-maxX-complex: 0.97;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='poo'],
[data-icon-metrics='poo'] {
	---icon-ink-minX-complex: -0.0002222222222;
	---icon-ink-maxX-complex: 1.00080531;
	---icon-ink-height-complex: 0.9464;
	---icon-ink-top-complex: 0.0266;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='privacy'],
[data-icon-metrics='privacy'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.8885921569;
	---icon-ink-top-complex: 0.05546666667;
	---icon-ink-advance-complex: 1;
}

[data-icon~='privacy_hygiene'],
[data-icon-metrics='privacy_hygiene'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.986;
	---icon-ink-top-complex: 0.007;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='private_token_transfers'],
[data-icon-metrics='private_token_transfers'] {
	---icon-ink-minX-complex: 0.037;
	---icon-ink-maxX-complex: 0.963;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='question_mark'],
[data-icon-metrics='question_mark'] {
	---icon-ink-minX-complex: 0.196;
	---icon-ink-maxX-complex: 0.804;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='release_process_transparency'],
[data-icon-metrics='release_process_transparency'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.904;
	---icon-ink-top-complex: 0.048;
	---icon-ink-advance-complex: 1;
}

[data-icon~='repository'],
[data-icon-metrics='repository'] {
	---icon-ink-minX-complex: 0.1727471264;
	---icon-ink-maxX-complex: 0.82725;
	---icon-ink-height-complex: 1.000687407;
	---icon-ink-top-complex: -0.00028;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='scam_prevention'],
[data-icon-metrics='scam_prevention'] {
	---icon-ink-minX-complex: 0.028;
	---icon-ink-maxX-complex: 0.972;
	---icon-ink-height-complex: 0.998;
	---icon-ink-top-complex: 0.001;
	---icon-ink-advance-complex: 1;
}

[data-icon~='security'],
[data-icon-metrics='security'] {
	---icon-ink-minX-complex: 0.209;
	---icon-ink-maxX-complex: 0.791;
	---icon-ink-height-complex: 0.999;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='security_audits'],
[data-icon-metrics='security_audits'] {
	---icon-ink-minX-complex: 0.118;
	---icon-ink-maxX-complex: 0.882;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='self_sovereignty'],
[data-icon-metrics='self_sovereignty'] {
	---icon-ink-minX-complex: 0.1385428571;
	---icon-ink-maxX-complex: 0.861;
	---icon-ink-height-complex: 1.000204301;
	---icon-ink-top-complex: -0.0002043010753;
	---icon-ink-advance-complex: 1;
}

[data-icon~='sharpener'],
[data-icon-metrics='sharpener'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.8916923077;
	---icon-ink-top-complex: 0.05423076923;
	---icon-ink-advance-complex: 1;
}

[data-icon~='stage_0'],
[data-icon-metrics='stage_0'] {
	---icon-ink-minX-complex: 0.1387777778;
	---icon-ink-maxX-complex: 0.8613636364;
	---icon-ink-height-complex: 1.000553571;
	---icon-ink-top-complex: -0.0004285714286;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='stage_0_5'],
[data-icon-metrics='stage_0_5'] {
	---icon-ink-minX-complex: 0.2236;
	---icon-ink-maxX-complex: 0.7763333333;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='stage_1'],
[data-icon-metrics='stage_1'] {
	---icon-ink-minX-complex: 0.25;
	---icon-ink-maxX-complex: 0.7503333333;
	---icon-ink-height-complex: 1.000272727;
	---icon-ink-top-complex: -0.0002727272727;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='stage_2'],
[data-icon-metrics='stage_2'] {
	---icon-ink-minX-complex: -0.0002307692308;
	---icon-ink-maxX-complex: 1.000142857;
	---icon-ink-height-complex: 0.865;
	---icon-ink-top-complex: 0.068;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='stage_none'],
[data-icon-metrics='stage_none'] {
	---icon-ink-minX-complex: 0.1423421053;
	---icon-ink-maxX-complex: 0.8582857143;
	---icon-ink-height-complex: 0.9991904762;
	---icon-ink-top-complex: -0.0001904761905;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='stages'],
[data-icon-metrics='stages'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.958;
	---icon-ink-top-complex: 0.021;
	---icon-ink-advance-complex: 1;
}

[data-icon~='transaction_batching'],
[data-icon-metrics='transaction_batching'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.8;
	---icon-ink-top-complex: 0.1;
	---icon-ink-advance-complex: 1;
}

[data-icon~='transaction_inclusion'],
[data-icon-metrics='transaction_inclusion'] {
	---icon-ink-minX-complex: 0.01;
	---icon-ink-maxX-complex: 0.99;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='transaction_legibility'],
[data-icon-metrics='transaction_legibility'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.677;
	---icon-ink-top-complex: 0.161;
	---icon-ink-advance-complex: 1;
}

[data-icon~='transparency'],
[data-icon-metrics='transparency'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.786;
	---icon-ink-top-complex: 0.107;
	---icon-ink-advance-complex: 1;
}

[data-icon~='user_privacy'],
[data-icon-metrics='user_privacy'] {
	---icon-ink-minX-complex: 0.158;
	---icon-ink-maxX-complex: 0.843;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='wallet_address_privacy'],
[data-icon-metrics='wallet_address_privacy'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 0.999;
	---icon-ink-height-complex: 0.968;
	---icon-ink-top-complex: 0.016;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='wallet_browser'],
[data-icon-metrics='wallet_browser'] {
	---icon-ink-minX-complex: 0.005;
	---icon-ink-maxX-complex: 0.9948461538;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='wallet_desktop'],
[data-icon-metrics='wallet_desktop'] {
	---icon-ink-minX-complex: 0.147;
	---icon-ink-maxX-complex: 0.853;
	---icon-ink-height-complex: 1.000636364;
	---icon-ink-top-complex: -0.0006363636364;
	---icon-ink-advance-complex: 1;
}

[data-icon~='wallet_embedded'],
[data-icon-metrics='wallet_embedded'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.721375;
	---icon-ink-top-complex: 0.13925;
	---icon-ink-advance-complex: 1;
}

[data-icon~='wallet_hardware'],
[data-icon-metrics='wallet_hardware'] {
	---icon-ink-minX-complex: 0;
	---icon-ink-maxX-complex: 1;
	---icon-ink-height-complex: 0.9136;
	---icon-ink-top-complex: 0.0434;
	---icon-ink-advance-complex: 1;
}

[data-icon~='wallet_mobile'],
[data-icon-metrics='wallet_mobile'] {
	---icon-ink-minX-complex: 0.283;
	---icon-ink-maxX-complex: 0.717;
	---icon-ink-height-complex: 1;
	---icon-ink-top-complex: 0;
	---icon-ink-advance-complex: 1;
}

[data-icon~='wallet_software'],
[data-icon-metrics='wallet_software'] {
	---icon-ink-minX-complex: 0.114;
	---icon-ink-maxX-complex: 0.886;
	---icon-ink-height-complex: 0.991125;
	---icon-ink-top-complex: -0.000125;
	---icon-ink-advance-complex: 0.999;
}

[data-icon~='wallet_test'],
[data-icon-metrics='wallet_test'] {
	---icon-ink-minX-complex: 0.1788181818;
	---icon-ink-maxX-complex: 0.8212666667;
	---icon-ink-height-complex: 1.000538462;
	---icon-ink-top-complex: -0.0005384615385;
	---icon-ink-advance-complex: 1;
}

[data-icon~='about'],
[data-icon-metrics='about'] {
	---icon-ink-minX-simple: -0.0005555555556;
	---icon-ink-maxX-simple: 1.00052;
	---icon-ink-height-simple: 0.784;
	---icon-ink-top-simple: 0.108;
	---icon-ink-advance-simple: 1;
}

[data-icon~='account_abstraction'],
[data-icon-metrics='account_abstraction'] {
	---icon-ink-minX-simple: 0.001;
	---icon-ink-maxX-simple: 1.000125;
	---icon-ink-height-simple: 0.878;
	---icon-ink-top-simple: 0.061;
	---icon-ink-advance-simple: 1;
}

[data-icon~='account_portability'],
[data-icon-metrics='account_portability'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.888;
	---icon-ink-top-simple: 0.056;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='account_recovery'],
[data-icon-metrics='account_recovery'] {
	---icon-ink-minX-simple: -0.00008888888889;
	---icon-ink-maxX-simple: 1.000505882;
	---icon-ink-height-simple: 0.9900738095;
	---icon-ink-top-simple: 0.00495;
	---icon-ink-advance-simple: 1;
}

[data-icon~='account_type'],
[data-icon-metrics='account_type'] {
	---icon-ink-minX-simple: 0.2744545455;
	---icon-ink-maxX-simple: 0.7260392157;
	---icon-ink-height-simple: 1.000382979;
	---icon-ink-top-simple: -0.0003829787234;
	---icon-ink-advance-simple: 1;
}

[data-icon~='account_unruggability'],
[data-icon-metrics='account_unruggability'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.712125;
	---icon-ink-top-simple: 0.144;
	---icon-ink-advance-simple: 1;
}

[data-icon~='address_resolution'],
[data-icon-metrics='address_resolution'] {
	---icon-ink-minX-simple: 0.007650793651;
	---icon-ink-maxX-simple: 0.99196;
	---icon-ink-height-simple: 1.000539889;
	---icon-ink-top-simple: -0.00009090909091;
	---icon-ink-advance-simple: 1;
}

[data-icon~='app_isolation'],
[data-icon-metrics='app_isolation'] {
	---icon-ink-minX-simple: -0.00002380952381;
	---icon-ink-maxX-simple: 1.000010753;
	---icon-ink-height-simple: 0.9670102564;
	---icon-ink-top-simple: 0.01658974359;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='browser_integration'],
[data-icon-metrics='browser_integration'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 1;
}

[data-icon~='bug'],
[data-icon-metrics='bug'] {
	---icon-ink-minX-simple: -0.0003333333333;
	---icon-ink-maxX-simple: 1.000255319;
	---icon-ink-height-simple: 0.7353333333;
	---icon-ink-top-simple: 0.1326666667;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='by_rating'],
[data-icon-metrics='by_rating'] {
	---icon-ink-minX-simple: 0.002;
	---icon-ink-maxX-simple: 0.998;
	---icon-ink-height-simple: 0.999;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='by_wallet'],
[data-icon-metrics='by_wallet'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.89;
	---icon-ink-top-simple: 0.055;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='chain_abstraction'],
[data-icon-metrics='chain_abstraction'] {
	---icon-ink-minX-simple: -0.00025;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.7673298246;
	---icon-ink-top-simple: 0.1160701754;
	---icon-ink-advance-simple: 1;
}

[data-icon~='chain_verification'],
[data-icon-metrics='chain_verification'] {
	---icon-ink-minX-simple: -0.0003846153846;
	---icon-ink-maxX-simple: 1.000315789;
	---icon-ink-height-simple: 0.8326665541;
	---icon-ink-top-simple: 0.0833875;
	---icon-ink-advance-simple: 1;
}

[data-icon~='checklist'],
[data-icon-metrics='checklist'] {
	---icon-ink-minX-simple: 0.135;
	---icon-ink-maxX-simple: 0.8653809524;
	---icon-ink-height-simple: 1.000045455;
	---icon-ink-top-simple: -0.00004545454545;
	---icon-ink-advance-simple: 1;
}

[data-icon~='code_repository'],
[data-icon-metrics='code_repository'] {
	---icon-ink-minX-simple: 0.07158823529;
	---icon-ink-maxX-simple: 0.9278125;
	---icon-ink-height-simple: 1.00005;
	---icon-ink-top-simple: -0.00005;
	---icon-ink-advance-simple: 1;
}

[data-icon~='contribute'],
[data-icon-metrics='contribute'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 0.9999302326;
	---icon-ink-height-simple: 0.9178365316;
	---icon-ink-top-simple: 0.04092537313;
	---icon-ink-advance-simple: 1;
}

[data-icon~='dark_light_mode'],
[data-icon-metrics='dark_light_mode'] {
	---icon-ink-minX-simple: 0.0634025974;
	---icon-ink-maxX-simple: 0.938;
	---icon-ink-height-simple: 1.002;
	---icon-ink-top-simple: -0.001;
	---icon-ink-advance-simple: 1;
}

[data-icon~='discuss'],
[data-icon-metrics='discuss'] {
	---icon-ink-minX-simple: 0.169;
	---icon-ink-maxX-simple: 0.83004;
	---icon-ink-height-simple: 0.9999230769;
	---icon-ink-top-simple: 0.00007692307692;
	---icon-ink-advance-simple: 1;
}

[data-icon~='donation'],
[data-icon-metrics='donation'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.7320816327;
	---icon-ink-top-simple: 0.1339183673;
	---icon-ink-advance-simple: 1;
}

[data-icon~='duress_resistance'],
[data-icon-metrics='duress_resistance'] {
	---icon-ink-minX-simple: 0.002;
	---icon-ink-maxX-simple: 1.000037037;
	---icon-ink-height-simple: 0.9814641711;
	---icon-ink-top-simple: 0.009418181818;
	---icon-ink-advance-simple: 1;
}

[data-icon~='ecosystem'],
[data-icon-metrics='ecosystem'] {
	---icon-ink-minX-simple: 0.01536363636;
	---icon-ink-maxX-simple: 0.985;
	---icon-ink-height-simple: 1.0002;
	---icon-ink-top-simple: -0.0002;
	---icon-ink-advance-simple: 1;
}

[data-icon~='eip_trackers'],
[data-icon-metrics='eip_trackers'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.984;
	---icon-ink-top-simple: 0.008;
	---icon-ink-advance-simple: 1;
}

[data-icon~='faq'],
[data-icon-metrics='faq'] {
	---icon-ink-minX-simple: 0.0428125;
	---icon-ink-maxX-simple: 0.9578846154;
	---icon-ink-height-simple: 0.9943684211;
	---icon-ink-top-simple: -0.0003684210526;
	---icon-ink-advance-simple: 1;
}

[data-icon~='fee_transparency'],
[data-icon-metrics='fee_transparency'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1.000260417;
	---icon-ink-height-simple: 0.9758780488;
	---icon-ink-top-simple: 0.00712195122;
	---icon-ink-advance-simple: 1;
}

[data-icon~='free_and_open_source_license'],
[data-icon-metrics='free_and_open_source_license'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1.000166667;
	---icon-ink-height-simple: 0.908;
	---icon-ink-top-simple: 0.046;
	---icon-ink-advance-simple: 1;
}

[data-icon~='funding_transparency'],
[data-icon-metrics='funding_transparency'] {
	---icon-ink-minX-simple: 0.1187692308;
	---icon-ink-maxX-simple: 0.88064;
	---icon-ink-height-simple: 1.00052381;
	---icon-ink-top-simple: -0.0005238095238;
	---icon-ink-advance-simple: 1;
}

[data-icon~='graduate'],
[data-icon-metrics='graduate'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1.000529412;
	---icon-ink-height-simple: 0.8641428571;
	---icon-ink-top-simple: 0.06785714286;
	---icon-ink-advance-simple: 1;
}

[data-icon~='hardware_wallet_interoperability'],
[data-icon-metrics='hardware_wallet_interoperability'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.8585106383;
	---icon-ink-top-simple: 0.0704893617;
	---icon-ink-advance-simple: 1;
}

[data-icon~='hardware_wallet_support'],
[data-icon-metrics='hardware_wallet_support'] {
	---icon-ink-minX-simple: 0.005;
	---icon-ink-maxX-simple: 0.9963846154;
	---icon-ink-height-simple: 0.9997394444;
	---icon-ink-top-simple: -0.00004166666667;
	---icon-ink-advance-simple: 1;
}

[data-icon~='l1_provider_independence'],
[data-icon-metrics='l1_provider_independence'] {
	---icon-ink-minX-simple: 0.001;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.685875;
	---icon-ink-top-simple: 0.157125;
	---icon-ink-advance-simple: 1;
}

[data-icon~='multi_address_privacy'],
[data-icon-metrics='multi_address_privacy'] {
	---icon-ink-minX-simple: 0.123;
	---icon-ink-maxX-simple: 0.877;
	---icon-ink-height-simple: 0.9981;
	---icon-ink-top-simple: -0.0001;
	---icon-ink-advance-simple: 1;
}

[data-icon~='newsletter'],
[data-icon-metrics='newsletter'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.848;
	---icon-ink-top-simple: 0.076;
	---icon-ink-advance-simple: 1;
}

[data-icon~='orderflow_transparency'],
[data-icon-metrics='orderflow_transparency'] {
	---icon-ink-minX-simple: 0.0005;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.8917966102;
	---icon-ink-top-simple: 0.05420338983;
	---icon-ink-advance-simple: 1;
}

[data-icon~='passkey_verification'],
[data-icon-metrics='passkey_verification'] {
	---icon-ink-minX-simple: 0.187;
	---icon-ink-maxX-simple: 0.813;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 1;
}

[data-icon~='permissions_management'],
[data-icon-metrics='permissions_management'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.9116153846;
	---icon-ink-top-simple: 0.04438461538;
	---icon-ink-advance-simple: 1;
}

[data-icon~='poo'],
[data-icon-metrics='poo'] {
	---icon-ink-minX-simple: -0.0002222222222;
	---icon-ink-maxX-simple: 1.00080531;
	---icon-ink-height-simple: 0.9464;
	---icon-ink-top-simple: 0.0266;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='privacy'],
[data-icon-metrics='privacy'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.6739189189;
	---icon-ink-top-simple: 0.163;
	---icon-ink-advance-simple: 1;
}

[data-icon~='privacy_hygiene'],
[data-icon-metrics='privacy_hygiene'] {
	---icon-ink-minX-simple: -0.0001176470588;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.8984375;
	---icon-ink-top-simple: 0.051;
	---icon-ink-advance-simple: 1;
}

[data-icon~='private_token_transfers'],
[data-icon-metrics='private_token_transfers'] {
	---icon-ink-minX-simple: 0.1066734694;
	---icon-ink-maxX-simple: 0.8931954023;
	---icon-ink-height-simple: 1.00078022;
	---icon-ink-top-simple: -0.0007802197802;
	---icon-ink-advance-simple: 1;
}

[data-icon~='question_mark'],
[data-icon-metrics='question_mark'] {
	---icon-ink-minX-simple: 0.185;
	---icon-ink-maxX-simple: 0.815641791;
	---icon-ink-height-simple: 1.000033333;
	---icon-ink-top-simple: -0.00003333333333;
	---icon-ink-advance-simple: 1;
}

[data-icon~='release_process_transparency'],
[data-icon-metrics='release_process_transparency'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.969;
	---icon-ink-top-simple: 0.016;
	---icon-ink-advance-simple: 1;
}

[data-icon~='repository'],
[data-icon-metrics='repository'] {
	---icon-ink-minX-simple: 0.1358095238;
	---icon-ink-maxX-simple: 0.8644444444;
	---icon-ink-height-simple: 1.00035023;
	---icon-ink-top-simple: -0.00006451612903;
	---icon-ink-advance-simple: 1;
}

[data-icon~='scam_prevention'],
[data-icon-metrics='scam_prevention'] {
	---icon-ink-minX-simple: 0.02347265625;
	---icon-ink-maxX-simple: 0.976725;
	---icon-ink-height-simple: 0.994;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='security'],
[data-icon-metrics='security'] {
	---icon-ink-minX-simple: 0.133;
	---icon-ink-maxX-simple: 0.867;
	---icon-ink-height-simple: 1.000352941;
	---icon-ink-top-simple: -0.0003529411765;
	---icon-ink-advance-simple: 1;
}

[data-icon~='security_audits'],
[data-icon-metrics='security_audits'] {
	---icon-ink-minX-simple: 0.129;
	---icon-ink-maxX-simple: 0.871;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 1;
}

[data-icon~='self_sovereignty'],
[data-icon-metrics='self_sovereignty'] {
	---icon-ink-minX-simple: 0.01025;
	---icon-ink-maxX-simple: 0.9894516129;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 1;
}

[data-icon~='sharpener'],
[data-icon-metrics='sharpener'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.8959411765;
	---icon-ink-top-simple: 0.05205882353;
	---icon-ink-advance-simple: 1;
}

[data-icon~='stage_0'],
[data-icon-metrics='stage_0'] {
	---icon-ink-minX-simple: 0.141;
	---icon-ink-maxX-simple: 0.859;
	---icon-ink-height-simple: 1.000764706;
	---icon-ink-top-simple: -0.0007647058824;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='stage_0_5'],
[data-icon-metrics='stage_0_5'] {
	---icon-ink-minX-simple: 0.216;
	---icon-ink-maxX-simple: 0.784;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='stage_1'],
[data-icon-metrics='stage_1'] {
	---icon-ink-minX-simple: 0.253;
	---icon-ink-maxX-simple: 0.747;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 1;
}

[data-icon~='stage_2'],
[data-icon-metrics='stage_2'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.922;
	---icon-ink-top-simple: 0.039;
	---icon-ink-advance-simple: 1;
}

[data-icon~='stage_none'],
[data-icon-metrics='stage_none'] {
	---icon-ink-minX-simple: 0.1457096774;
	---icon-ink-maxX-simple: 0.8540357143;
	---icon-ink-height-simple: 1.000230769;
	---icon-ink-top-simple: -0.0002307692308;
	---icon-ink-advance-simple: 1;
}

[data-icon~='stages'],
[data-icon-metrics='stages'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.958;
	---icon-ink-top-simple: 0.021;
	---icon-ink-advance-simple: 1;
}

[data-icon~='transaction_batching'],
[data-icon-metrics='transaction_batching'] {
	---icon-ink-minX-simple: 0.006;
	---icon-ink-maxX-simple: 1.000451613;
	---icon-ink-height-simple: 0.6634513806;
	---icon-ink-top-simple: 0.1684897959;
	---icon-ink-advance-simple: 1;
}

[data-icon~='transaction_inclusion'],
[data-icon-metrics='transaction_inclusion'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.806;
	---icon-ink-top-simple: 0.097;
	---icon-ink-advance-simple: 1;
}

[data-icon~='transaction_legibility'],
[data-icon-metrics='transaction_legibility'] {
	---icon-ink-minX-simple: -0.0004444444444;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.6944444444;
	---icon-ink-top-simple: 0.1525555556;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='transparency'],
[data-icon-metrics='transparency'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.7594444444;
	---icon-ink-top-simple: 0.12;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='user_privacy'],
[data-icon-metrics='user_privacy'] {
	---icon-ink-minX-simple: 0.077;
	---icon-ink-maxX-simple: 0.9227894737;
	---icon-ink-height-simple: 0.9997;
	---icon-ink-top-simple: -0.0002;
	---icon-ink-advance-simple: 0.999;
}

[data-icon~='wallet_address_privacy'],
[data-icon-metrics='wallet_address_privacy'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1.000263158;
	---icon-ink-height-simple: 0.9006098758;
	---icon-ink-top-simple: 0.04994871795;
	---icon-ink-advance-simple: 1;
}

[data-icon~='wallet_browser'],
[data-icon-metrics='wallet_browser'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1.000510638;
	---icon-ink-height-simple: 0.9975098039;
	---icon-ink-top-simple: 0.001490196078;
	---icon-ink-advance-simple: 1;
}

[data-icon~='wallet_desktop'],
[data-icon-metrics='wallet_desktop'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1;
	---icon-ink-height-simple: 0.882;
	---icon-ink-top-simple: 0.059;
	---icon-ink-advance-simple: 1;
}

[data-icon~='wallet_embedded'],
[data-icon-metrics='wallet_embedded'] {
	---icon-ink-minX-simple: -0.0001176470588;
	---icon-ink-maxX-simple: 0.9995263158;
	---icon-ink-height-simple: 0.9899611111;
	---icon-ink-top-simple: 0.005138888889;
	---icon-ink-advance-simple: 1;
}

[data-icon~='wallet_hardware'],
[data-icon-metrics='wallet_hardware'] {
	---icon-ink-minX-simple: 0.286;
	---icon-ink-maxX-simple: 0.7141;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 1;
}

[data-icon~='wallet_mobile'],
[data-icon-metrics='wallet_mobile'] {
	---icon-ink-minX-simple: 0.221;
	---icon-ink-maxX-simple: 0.779;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 1;
}

[data-icon~='wallet_software'],
[data-icon-metrics='wallet_software'] {
	---icon-ink-minX-simple: 0;
	---icon-ink-maxX-simple: 1.000055556;
	---icon-ink-height-simple: 0.752;
	---icon-ink-top-simple: 0.124;
	---icon-ink-advance-simple: 1;
}

[data-icon~='wallet_test'],
[data-icon-metrics='wallet_test'] {
	---icon-ink-minX-simple: 0.1731234568;
	---icon-ink-maxX-simple: 0.8265818182;
	---icon-ink-height-simple: 1;
	---icon-ink-top-simple: 0;
	---icon-ink-advance-simple: 0.999;
}
/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}
	.background-blobs.svelte-1t7yqk4 {
		position: fixed;
		pointer-events: none;
		overflow: hidden;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background: var(--background-primary);
		z-index: -1000;
	}

	.background-blob.svelte-1t7yqk4 {
		position: absolute;
		top: -50vh;
		left: -50vw;
		z-index: var(--blob-z-index);

		@media (max-width: 600px) and (pointer: coarse) {
			display: none;
		}
	}

	/* Each blob layer animates between its `from` and `to` values. */
	.background-blob.svelte-1t7yqk4 .opacity:where(.svelte-1t7yqk4) {
		animation: svelte-1t7yqk4-blob-opacity var(--opacity-duration) var(--transition-blob) 0s alternate infinite;
	}
	@keyframes svelte-1t7yqk4-blob-opacity {
		from {
			opacity: var(--opacity-from);
		}
		to {
			opacity: var(--opacity-to);
		}
	}

	.background-blob.svelte-1t7yqk4 .translation-x:where(.svelte-1t7yqk4) {
		animation: svelte-1t7yqk4-blob-translation-x var(--translation-x-duration) var(--transition-blob) 0s alternate infinite;
	}
	@keyframes svelte-1t7yqk4-blob-translation-x {
		from {
			transform: translateX(var(--translation-x-from));
		}
		to {
			transform: translateX(var(--translation-x-to));
		}
	}

	.background-blob.svelte-1t7yqk4 .translation-y:where(.svelte-1t7yqk4) {
		animation: svelte-1t7yqk4-blob-translation-y var(--translation-y-duration) var(--transition-blob) 0s alternate infinite;
	}
	@keyframes svelte-1t7yqk4-blob-translation-y {
		from {
			transform: translateY(var(--translation-y-from));
		}
		to {
			transform: translateY(var(--translation-y-to));
		}
	}

	.background-blob.svelte-1t7yqk4 .rotation:where(.svelte-1t7yqk4) {
		animation: svelte-1t7yqk4-blob-rotation var(--rotation-duration) var(--transition-blob) 0s alternate infinite;
	}
	@keyframes svelte-1t7yqk4-blob-rotation {
		from {
			transform: rotate(var(--rotation-from));
		}
		to {
			transform: rotate(var(--rotation-to));
		}
	}

	.background-blob.svelte-1t7yqk4 .scale-x:where(.svelte-1t7yqk4) {
		animation: svelte-1t7yqk4-blob-scale-x var(--scale-x-duration) var(--transition-blob) 0s alternate infinite;
	}
	@keyframes svelte-1t7yqk4-blob-scale-x {
		from {
			transform: scaleX(var(--scale-x-from));
		}
		to {
			transform: scaleX(var(--scale-x-to));
		}
	}

	.background-blob.svelte-1t7yqk4 .scale-y:where(.svelte-1t7yqk4) {
		animation: svelte-1t7yqk4-blob-scale-y var(--scale-y-duration) var(--transition-blob) 0s alternate infinite;
	}
	@keyframes svelte-1t7yqk4-blob-scale-y {
		from {
			transform: scaleY(var(--scale-y-from));
		}
		to {
			transform: scaleY(var(--scale-y-to));
		}
	}

	.background-blob.svelte-1t7yqk4 .hue:where(.svelte-1t7yqk4) {
		animation: svelte-1t7yqk4-blob-hue var(--hue-duration) var(--transition-blob) 0s alternate infinite;
	}
	@keyframes svelte-1t7yqk4-blob-hue {
		from {
			filter: hue-rotate(var(--hue-from));
		}
		to {
			filter: hue-rotate(var(--hue-to));
		}
	}

	/*
	 * The blob animations stay paused on their first frame. A moving
	 * full-viewport background has to be re-composited on every frame, together
	 * with every `backdrop-filter` above it. Remove this rule to let the blobs drift.
	 */
	.background-blob.svelte-1t7yqk4 :is(.opacity:where(.svelte-1t7yqk4), .translation-x:where(.svelte-1t7yqk4), .translation-y:where(.svelte-1t7yqk4), .rotation:where(.svelte-1t7yqk4), .scale-x:where(.svelte-1t7yqk4), .scale-y:where(.svelte-1t7yqk4), .hue:where(.svelte-1t7yqk4)) {
		animation-play-state: paused;
	}

	.background-blob.svelte-1t7yqk4 .blob:where(.svelte-1t7yqk4) {
		width: 100vw;
		height: 100vh;
		background: radial-gradient(
			ellipse 50vw 50vh at center,
			color-mix(in srgb, light-dark(var(--blob-light-theme-color), var(--blob-dark-theme-color)) 100%, transparent 0%)   0%,
			color-mix(in srgb, light-dark(var(--blob-light-theme-color), var(--blob-dark-theme-color)) 0%,   transparent 100%) 100%
		);
	}

	.background-blob.svelte-1t7yqk4 .blob:where(.svelte-1t7yqk4)::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
		background-repeat: repeat;
		opacity: 0.1337;
		pointer-events: none;
		mix-blend-mode: overlay;
	}

	.background-dither.svelte-1t7yqk4 {
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 0px;
		right: 0px;
		z-index: -1001; /* Above blobs */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
		background-repeat: repeat;
		opacity: 0.05;
		pointer-events: none;
		mix-blend-mode: overlay;
		filter: blur(1.1337px);

		@media (max-width: 600px) and (pointer: coarse) {
			display: none;
		}
	}
footer[data-astro-cid-3tuvcr6j] {
  --footer-backgroundColor: light-dark(#f8e6ff, #080412);
  --footer-color: light-dark(#2d123d, #fff);
  --footer-mutedColor: color-mix(in oklch, var(--footer-color) 68%, transparent);
  --icon-navigation-borderColor: color-mix(in oklch, var(--footer-color) 42%, transparent);
  --icon-navigation-color: var(--footer-color);
  background-color: var(--footer-backgroundColor);
  color: var(--footer-color);
  padding: 1.5rem;
  text-align: center;

  & img {
    display: block;
    block-size: 2.5rem;
    inline-size: auto;
  }

  & p {
    color: var(--footer-mutedColor);
    font-size: .8125rem;
    line-height: 1.4;
  }

  & .disclaimer {
    margin: 0;
    max-inline-size: 42rem;
    margin-inline: auto;
  }
}
:root:has([data-sticky-breadcrumb~="root"]) {
  direction: ltr;

  & body:dir(rtl) {
    direction: rtl;
  }
}

#layout[data-astro-cid-ju4pidww] {
  &:has(#nav-menu:is(:popover-open, [data-closing])) {
    overflow: hidden;
  }

  --navigation-desktop-inlineSize: min(20rem, 320px);
  --navigation-mobile-blockSize: 4.16rem;
  --navigation-controlInsetInline: .75rem;
  inline-size: 100%;
  block-size: 100dvh;
  padding: var(--safeArea-insetTop) var(--safeArea-insetRight) var(--safeArea-insetBottom)
			var(--safeArea-insetLeft);
  display: grid;
  align-items: start;
  gap: var(--separator-width);

  &[data-scroll-container] {
    --sticky-paddingBlockStart: var(--safeArea-insetTop);
    --sticky-paddingBlockEnd: var(--safeArea-insetBottom);
    --sticky-paddingInlineStart: var(--safeArea-insetLeft);
    --sticky-paddingInlineEnd: var(--safeArea-insetRight);
  }

  @media (width > 1024px) {
    grid-template: "Nav Content" minmax(0, 1fr)
				/ var(--navigation-desktop-inlineSize) minmax(0, 1fr);

    &[data-sticky-container] {
      --sticky-marginInlineStart: var(--separator-width);
      --sticky-paddingInlineStart: var(--navigation-desktop-inlineSize);
    }
  }

  @media (width <= 1024px) {
    grid-template: "Nav" var(--navigation-mobile-blockSize)
				"Content" minmax(0, 1fr)
				/ minmax(0, 1fr);

    &[data-sticky-container] {
      --sticky-marginBlockStart: var(--separator-width);
      --sticky-paddingBlockStart: var(--navigation-mobile-blockSize);
    }
  }

  & > .skip-link[data-astro-cid-ju4pidww] {
    position: fixed;
    z-index: 3;
    inset: calc(var(--safeArea-insetTop) + 1rem) auto auto 50%;
    translate: -50%;
    transition-property: translate, opacity;

    &:not(:focus-visible) {
      opacity: 0;
      translate: -50% -150%;
    }
  }

  & > nav[data-astro-cid-ju4pidww] {
    grid-area: Nav;
    box-shadow: 0 0 0 var(--separator-width) var(--border-color);
  }

  & > #content[data-astro-cid-ju4pidww] {
    grid-area: Content;
    align-self: stretch;
    min-block-size: 0;
    min-inline-size: 0;

    @media (width <= 1024px) and (prefers-reduced-motion: no-preference) {
      &:not(:has([data-sticky-breadcrumb~="root"])) {
        transform-style: preserve-3d;
        transform: translateZ(0);
        transition-property: transform;

        nav[data-astro-cid-ju4pidww]:has( > #nav-menu:is(:popover-open, [data-closing])) ~ & {
          transform: translateZ(-2.5rem);
        }
      }
    }
  }
}
@property --navigation-mobile-blockSize {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property ---navigation-logoFraction {
		syntax: '<number>';
		inherits: false;
		initial-value: 1;
	}
	@property ---navigation-controlsFraction {
		syntax: '<number>';
		inherits: false;
		initial-value: 1;
	}
	@keyframes navigation-logo-size {
		from {
			---navigation-logoFraction: 0;
		}
		to {
			---navigation-logoFraction: 1;
		}
	}
	@keyframes navigation-controls-size {
		from {
			---navigation-controlsFraction: 0;
		}
		to {
			---navigation-controlsFraction: 1;
		}
	}
	@property ---wallet-chainWrap {
		syntax: '<number>';
		inherits: true;
		initial-value: 0;
	}
	@keyframes wallet-scroll-entry {
		from {
			translate: 0 0;
		}
		to {
			translate: calc(
					var(---inlineDirection) * (var(---wallet-chainWrap) - 1) *
						(
							var(---breadcrumb-itemWidth) + var(--stickyBreadcrumb-markerSize) +
								var(--stickyBreadcrumb-gap, 1rem)
						) /
						2
				)
				calc(-1 * var(---wallet-chainWrap) * var(--navigation-mobile-blockSize));
		}
	}
	#layout:has([data-sticky-breadcrumb~="root"]) {
		---wallet-name-flow-font-size: 2.25rem;
		---wallet-compact-h1: 1.5rem;
		--stickyBreadcrumb-markerSize: 1.25rem;
		timeline-scope: --wallet-end-inline, --wallet-end-block;
	}
	/* The site logo and wallet identity share native widths and arrival at Layout. */
	@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) and
		(width: anchor-size(--breadcrumb-source inline)) and (timeline-scope: --breadcrumb-size) and
		(color: if(style(---breadcrumb-wrap: 1): red; else: blue)) {
		#layout:has([data-sticky-breadcrumb~="root"]) {
			timeline-scope:
				--wallet-end-inline, --wallet-end-block, --wallet-item-inline, --wallet-item-block;
			@supports (timeline-scope: all) and (view-timeline-name: ident('a' 'b')) {
				timeline-scope: --wallet-end-inline, --wallet-end-block;
			}
			animation:
				breadcrumb-item-inline auto linear reverse both,
				breadcrumb-item-block auto linear reverse both;
			animation-timeline: --wallet-item-inline, --wallet-item-block;
			animation-range: exit-crossing 0% exit-crossing 100%;
			---breadcrumb-itemWidth: round(
				up,
				calc(100vw * (1 / var(---breadcrumb-itemInline) - 1)),
				0.0625px
			);
			---breadcrumb-naturalItemHeight: calc(100vw * (1 / var(---breadcrumb-itemBlock) - 1));
			---breadcrumb-itemHeight: round(nearest, var(---breadcrumb-naturalItemHeight), 0.0625px);
		}
		@media (width <= 1024px) {
			#layout:has([data-sticky-breadcrumb~="root"]) {
				/* Both-ended Expo reaches its midpoint at 25% so identity text clears before rising. */
				---navigation-entryEasing: linear(
					0,
					0.000977 2.5%,
					0.001953 5%,
					0.003906 7.5%,
					0.007812 10%,
					0.015625 12.5%,
					0.03125 15%,
					0.0625 17.5%,
					0.125 20%,
					0.25 22.5%,
					0.5 25%,
					0.75 32.5%,
					0.875 40%,
					0.9375 47.5%,
					0.96875 55%,
					0.984375 62.5%,
					0.992188 70%,
					0.996094 77.5%,
					0.998047 85%,
					0.999023 92.5%,
					1
				);
				--navigation-mobile-blockSize: max(
					4.16rem,
					calc(
						var(---breadcrumb-naturalItemHeight) * var(---wallet-compact-h1) /
							var(---wallet-name-flow-font-size) + 2 * var(--stickyBreadcrumb-paddingBlock, 0.5rem)
					)
				);
				timeline-scope:
					--navigation-logo-inline, --navigation-controls-inline, --wallet-item-inline,
					--wallet-item-block, --wallet-end-inline, --wallet-end-block, --wallet-entry;
				@supports (timeline-scope: all) and (view-timeline-name: ident('a' 'b')) {
					timeline-scope: --wallet-entry;
				}
			}
			#layout:has([data-sticky-breadcrumb~="root"])::before,
			#layout:has([data-sticky-breadcrumb~="root"])::after {
				content: '';
				position: fixed;
				inset: 0 auto auto 0;
				visibility: hidden;
				pointer-events: none;
				block-size: 1px;
				view-timeline-axis: inline;
				view-timeline-inset: 0;
			}
			#layout:has([data-sticky-breadcrumb~="root"])::before {
				inline-size: anchor-size(--navigation-logo inline);
				view-timeline-name: --navigation-logo-inline;
			}
			#layout:has([data-sticky-breadcrumb~="root"])::after {
				inline-size: anchor-size(--navigation-controls inline);
				view-timeline-name: --navigation-controls-inline;
			}
			#layout:has([data-sticky-breadcrumb~="root"])
				[data-sticky-breadcrumb~="root"]
				> [data-sticky-breadcrumb~="position"]
				[data-sticky-breadcrumb~="source"] {
				animation:
					navigation-logo-size auto linear both,
					navigation-controls-size auto linear both;
				animation-timeline: --navigation-logo-inline, --navigation-controls-inline;
			}
			#layout:has([data-sticky-breadcrumb~="root"]) #nav > header > menu {
				anchor-name: --navigation-controls;
			}
			#layout:has([data-sticky-breadcrumb~="root"])
				[data-sticky-breadcrumb~="root"][data-sticky-breadcrumb~="scope"] {
				--stickyBreadcrumb-insetBlockStart: 0px;
				---breadcrumb-parentBlockEnd: var(--navigation-mobile-blockSize);
			}
			#layout:has([data-sticky-breadcrumb~="root"])
				[data-sticky-breadcrumb~="root"]
				> [data-sticky-breadcrumb~="position"] {
				--sticky-insetBlockStart: var(--navigation-mobile-blockSize);
				--stickyBreadcrumb-inlineEasing: var(---navigation-entryEasing);
			}
			/* The navigation owns the surface shared by the mobile identity row. */
			#layout:has([data-sticky-breadcrumb~="root"])
				[data-sticky-breadcrumb~="root"]
				> [data-sticky-breadcrumb~="position"]::after {
				display: none;
			}
			#layout:has([data-sticky-breadcrumb~="root"]) [data-sticky-breadcrumb~="root"] > * {
				---breadcrumb-blockStart: var(--stickyBreadcrumb-insetBlockStart);
				---breadcrumb-blockEnd: var(--navigation-mobile-blockSize);
				---breadcrumb-width: var(---breadcrumb-itemWidth);
				---breadcrumb-height: var(---breadcrumb-compactItemHeight);
			}
			#layout:has([data-sticky-breadcrumb~="root"]) #nav > header {
				animation:
					navigation-logo-size auto linear both,
					navigation-controls-size auto linear both,
					breadcrumb-end-inline auto linear both;
				animation-timeline:
					--navigation-logo-inline, --navigation-controls-inline, --wallet-end-inline;
				---breadcrumb-itemWidth: inherit;
				---breadcrumb-endWidth: round(
					up,
					calc(100vw * (1/var(---breadcrumb-endInline) - 1)),
					0.0625px
				);
			}
			#layout:has([data-sticky-breadcrumb~="root"]) #nav > header,
			#layout:has([data-sticky-breadcrumb~="root"])
				[data-sticky-breadcrumb~="root"]
				> [data-sticky-breadcrumb~="position"]
				[data-sticky-breadcrumb~="source"] {
				/* Navigation measurements belong to their two consumers, not the page subtree. */
				---navigation-logoInlineSize: calc(100vw * (1 / var(---navigation-logoFraction) - 1));
				---wallet-chainWrap: clamp(
					0,
					sign(
						var(---navigation-logoInlineSize) + var(--stickyBreadcrumb-markerSize) +
							var(--stickyBreadcrumb-gap, 1rem) + var(---breadcrumb-itemWidth) + 2 *
							(
								var(--navigation-controlInsetInline) +
									max(
										calc(100vw * (1 / var(---navigation-controlsFraction) - 1)),
										2rem + 0.5rem + var(---breadcrumb-endWidth)
									)
							) -
							100vw
					),
					1
				);
			}
			#layout:has([data-sticky-breadcrumb~="root"]) #nav {
				--sticky-zIndex: 2;
			}
			#layout:has([data-sticky-breadcrumb~="root"]) {
				#nav > header > .logo {
					anchor-name: --navigation-logo;
					animation: wallet-scroll-entry auto var(---navigation-entryEasing) both;
					animation-timeline: --wallet-entry;
					animation-range: contain 0% contain 100%;
					@media (prefers-reduced-motion: reduce) {
						animation-timing-function: steps(1, end);
					}
				}
				&:is(
						[data-wallet-toc-state="open"],
						[data-wallet-toc-state="closing"],
						:has(#nav-menu:is(:popover-open, [data-closing]))
					)
					#nav
					> header
					> .logo {
					animation-range: cover calc(0% - var(--safeArea-insetTop)) cover
						calc(0% - var(--safeArea-insetTop));
				}
			}
			#layout:has([data-sticky-breadcrumb~="root"])
				[data-sticky-breadcrumb~="root"]
				> [data-sticky-breadcrumb~="position"]
				[data-sticky-breadcrumb~="item"] {
				---breadcrumb-translateInline: calc(
					var(---inlineDirection) *
						(
							(
									100vw - var(---breadcrumb-itemWidth) + (1 - var(---wallet-chainWrap)) *
										(
											var(---navigation-logoInlineSize) + var(--stickyBreadcrumb-markerSize) +
												var(--stickyBreadcrumb-gap, 1rem)
										)
								) /
								2 - var(--scrollItem-paddingInlineStart)
						)
				);
				---breadcrumb-translateBlock: calc(
					-1 * var(--sticky-insetBlockStart) +
						(
							(
									var(--navigation-mobile-blockSize) - var(---breadcrumb-itemHeight) *
										var(--stickyBreadcrumb-scale)
								) /
								2 - var(--stickyBreadcrumb-sourcePaddingBlock) -
								(1 - var(---breadcrumb-sourceEndWrap)) *
								(var(---breadcrumb-sourceRowHeight) - var(---breadcrumb-itemHeight)) / 2
						)
				);
			}
			#layout:is(
					[data-wallet-toc-state="open"],
					[data-wallet-toc-state="closing"],
					:has(#nav-menu:is(:popover-open, [data-closing]))
				)
				[data-sticky-breadcrumb~="root"]
				> [data-sticky-breadcrumb~="position"] {
				:is([data-sticky-breadcrumb~="item"], [data-sticky-breadcrumb~="end"]) {
					---breadcrumb-entry: 1;
				}
				[data-sticky-breadcrumb~="item"] {
					--stickyBreadcrumb-entryRange: cover calc(0% - var(--safeArea-insetTop)) cover
						calc(0% - var(--safeArea-insetTop));
				}
			}

			#layout:has([data-sticky-breadcrumb~="root"])
				[data-sticky-breadcrumb~="root"]
				> [data-sticky-breadcrumb~="position"]
				.wallet-name {
				---breadcrumb-markerWrap: var(---wallet-chainWrap);
			}
		}
	}
	.navigation-items.svelte-22d1ne {
		--navItem-gap: 0.5rem;
		--navItem-paddingBlock: 0.45rem;
		--navItem-paddingInline: 0.45rem;
		--navItem-rowGap: 0.5em;
		--navItem-radius: 0.5em;
		--navItem-current-backgroundColor: color-mix(in oklch, var(--accent) 25%, transparent);
		--navItem-hover-backgroundColor: color-mix(
			in oklch,
			var(--accent) 15%,
			var(--background-primary)
		);
		--navItem-current-hover-backgroundColor: color-mix(
			in oklch,
			var(--accent) 30%,
			var(--background-primary) 20%
		);
		--navIcon-size: 1.25em;

		--nav-submenu-gap: 0.33rem;
		--nav-search-blockSize: 0rem;

		&:has(> search:where(.svelte-22d1ne)) {
			--nav-search-blockSize: 3rem;
		}

		search:where(.svelte-22d1ne) {
			@media (max-width: 1024px) {
				order: 1;
			}

			label:where(.svelte-22d1ne) {
				border-color: var(--icon-navigation-borderColor);

				> .search-icon:where(.svelte-22d1ne) {
					padding-inline-start: 1em;
					color: var(--text-secondary);

					svg {
						inline-size: 1rem;
						block-size: 1rem;
					}
				}

				> kbd:where(.svelte-22d1ne) {
					color: var(--text-secondary);
					-webkit-user-select: none;
					   -moz-user-select: none;
					        user-select: none;
					padding-inline-end: 1em;
					font-size: smaller;

					input:where(.svelte-22d1ne):not(:-moz-placeholder) ~ & {
						display: none;
					}

					input:where(.svelte-22d1ne):not(:placeholder-shown) ~ & {
						display: none;
					}

					@media (max-aspect-ratio: 1/2) {
						display: none;
					}
				}
			}
		}

		menu:where(.svelte-22d1ne) {
			font-size: 0.975em;
			list-style: none;
			margin: 0;
			padding: 0;

			&[data-navigation-depth="0"] {
				--icon-navigation-borderColor: currentColor;
				--navIcon-size: 2em;

				&[data-sticky-container] {
					--sticky-marginBlockStart: var(--nav-search-blockSize);

					@media (max-width: 1024px) {
						--sticky-marginBlockStart: 0px;
						--sticky-marginBlockEnd: var(--nav-search-blockSize);
					}
				}
			}
			&[data-navigation-depth="1"] {
				--navIcon-size: 1.5em;
			}
			&[data-navigation-depth="2"] {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
			}

			&:is([data-navigation-depth="1"]:where(.svelte-22d1ne), [data-navigation-depth="2"]:where(.svelte-22d1ne))[data-sticky-container] {
				--sticky-marginBlockStart: calc(
					var(--nav-submenu-parentIconSize) + 2 * var(--navItem-paddingBlock) + var(--nav-submenu-gap)
				);
				--sticky-marginBlockEnd: var(--navItem-gap);
			}

			details:where(.svelte-22d1ne) {
				--nav-submenu-parentIconSize: var(--navIcon-size);
			}

			a:where(.svelte-22d1ne) {
				color: var(--text-primary);

				&:hover {
					color: var(--accent);
					text-decoration: none;
				}
			}

			.navigation-item-after:where(.svelte-22d1ne) {
				flex: none;
				margin-inline-start: auto;
			}

			li:where(.svelte-22d1ne) > details:where(.svelte-22d1ne) > summary:where(.svelte-22d1ne),
			li:where(.svelte-22d1ne) > a:where(.svelte-22d1ne) {
				--icon-size: var(--navIcon-size);

				---backgroundColor: transparent;
				---color: inherit;

				&:is(:where(.svelte-22d1ne):hover, :where(.svelte-22d1ne):focus-visible, :where(.svelte-22d1ne):focus-within, :where(.svelte-22d1ne):interest-source, [data-pressable-state~="interacting"]:where(.svelte-22d1ne)),
				&:is(details[data-pressable-state~="interacting"]:where(.svelte-22d1ne) > summary:where(.svelte-22d1ne)) {
					---backgroundColor: var(--navItem-hover-backgroundColor);
					---color: var(--accent);
					--icon-grayscale-filter: none;
				}

				&:is(a:where(.svelte-22d1ne))[aria-current="page"],
				&:is(summary:where(.svelte-22d1ne)):is(
						:where(.svelte-22d1ne):has(a[aria-current="page"]:where(.svelte-22d1ne)),
						:where(.svelte-22d1ne):not(details:where(.svelte-22d1ne):open > &):has(~ menu:where(.svelte-22d1ne) a[aria-current="page"]:where(.svelte-22d1ne))
					) {
					---backgroundColor: var(--navItem-current-backgroundColor);
					--icon-grayscale-filter: none;

					&:hover,
					&:focus-visible,
					&:focus-within {
						---backgroundColor: var(--navItem-current-hover-backgroundColor);
					}
				}

				---startRadius: var(--navItem-radius);
				---endRadius: var(--navItem-radius);

				&:is(a:where(.svelte-22d1ne)):has(> [data-icon~="circle"]:where(.svelte-22d1ne)),
				&:is(summary:where(.svelte-22d1ne)):has(> a:where(.svelte-22d1ne) > [data-icon~="circle"]:where(.svelte-22d1ne)) {
					---startRadius: 1.5rem;
				}

				&:not([data-sticky]) {
					background-color: var(---backgroundColor);
				}
				&[data-sticky] {
					--sticky-backgroundColor: var(---backgroundColor);
					--sticky-backdropFilter: blur(16px);

					&[data-sticky~="backdrop-stuck"][data-sticky~="backdrop-before"]::before {
						background-color: var(---backgroundColor);
					}
				}

				border-radius: var(---startRadius) var(---endRadius) var(---endRadius) var(---startRadius);
				padding: var(--navItem-paddingBlock) var(--navItem-paddingInline);

				color: var(---color);
				font-weight: 500;

				transition-property: opacity, scale, background-color, color;

				mark {
					font-weight: 600;
					text-decoration: underline;
					background-color: transparent;
					color: inherit;
				}
			}

			summary:where(.svelte-22d1ne) {
				&::after {
					margin-inline-start: auto;
				}

				details:where(.svelte-22d1ne):not([open]) > &::after {
					transform: perspective(100px) rotateX(180deg) rotate(-90deg);
				}

				> a:where(.svelte-22d1ne) {
					border-radius: inherit;
					flex: 0 auto;
				}
			}

			menu:where(.svelte-22d1ne) {
				margin-block-start: var(--nav-submenu-gap);
				margin-inline-start: calc(var(--nav-submenu-parentIconSize) + var(--navItem-rowGap));

				position: relative;
				padding-inline-start: 0;

				&::before {
					content: '';
					position: absolute;
					inset-block: 0;
					inset-inline-start: calc(
						var(--navItem-paddingInline) - var(--nav-submenu-parentIconSize) / 2 -
							var(--navItem-rowGap)
					);
					inline-size: 1px;
					background-color: var(--border-color);
				}
			}

			+ menu:where(.svelte-22d1ne) {
				margin-block-start: auto;
			}
		}
	}
	@supports (color: if(style(---link-current: 1): red)) {
		.navigation-items.svelte-22d1ne :is(a[data-pressable-name]:where(.svelte-22d1ne), details[data-pressable-name]:where(.svelte-22d1ne) > summary:where(.svelte-22d1ne)) {
			---backgroundColor: if(style(---link-current: 1): var(--navItem-current-backgroundColor); else: transparent);
			--icon-grayscale-filter: if(style(---link-current: 1): none; else: grayscale(1) opacity(0.8));

			&:is(:where(.svelte-22d1ne):hover, :where(.svelte-22d1ne):focus-visible, :where(.svelte-22d1ne):focus-within, [data-pressable-state~="interacting"]:where(.svelte-22d1ne)),
			&:is(details[data-pressable-state~="interacting"]:where(.svelte-22d1ne) > summary:where(.svelte-22d1ne)) {
				---backgroundColor: if(style(---link-current: 1): var(--navItem-current-hover-backgroundColor); else: var(--navItem-hover-backgroundColor));
				--icon-grayscale-filter: none;
			}
		}
	}

nav[data-astro-cid-chc7nsxx] {
  &:not(:has( > #nav-menu:popover-open)) > #nav-menu[data-astro-cid-chc7nsxx][data-scroll-container] {
    overscroll-behavior: auto;
  }

  width: 100%;
  height: 100dvh;

  &[data-sticky][data-sticky] {
    --sticky-offset: 0px;
    --sticky-backgroundColor: color-mix(in oklch, var(--background-primary) 90%, transparent);
  }

  & > header[data-astro-cid-chc7nsxx] {
    block-size: var(--navigation-mobile-blockSize);
    box-shadow: inset 0 calc(-1 * var(--separator-width)) 0 var(--border-color);
    padding: 1rem;

    & .logo {
      display: flex;
      text-decoration: none;

      & img {
        display: block;
        width: auto;
        height: 2.35rem;
      }
    }

    & menu {
      & li {
        display: contents;
      }

      & button {
        & svg {
          transition-property: color;
        }
      }

      & label:has( > #theme-toggle) {
        & > input[data-astro-cid-chc7nsxx] {
          position: absolute;
          inset: 0;
          inline-size: 100%;
          block-size: 100%;
          opacity: 0;
        }

        & > span[data-astro-cid-chc7nsxx]:first-of-type {
          color: light-dark(currentColor, #0000);
        }

        & > [data-astro-cid-chc7nsxx]:last-child {
          color: light-dark(#0000, currentColor);
        }
      }
    }
  }

  & #nav-menu {
    --sticky-offset: initial;
    inline-size: 100%;
    position: relative;
    z-index: 0;
    align-content: stretch;
    min-block-size: 0;
    padding: 1rem .75rem;
  }
}

@media (width > 1024px) {
  nav[data-astro-cid-chc7nsxx]:not(:has( > #nav-menu:popover-open)) li[data-astro-cid-chc7nsxx]:has(#menu-toggle) {
    display: none;
  }
}

@media (width <= 1024px) {
  #nav[data-astro-cid-chc7nsxx] {
    --navigation-menu-maskFade: 9rem;
    block-size: var(--navigation-mobile-blockSize);
    height: var(--navigation-mobile-blockSize);

    & > header[data-astro-cid-chc7nsxx] {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;

      & .logo {
        grid-area: 1 / 2;
        justify-self: center;
      }

      & menu {
        grid-area: 1 / 1;
        justify-self: start;
      }
    }

    & #nav-menu {
      & .navigation-note {
        display: block;
        order: 3;
        margin-block-start: 1rem;
      }
    }

    & #nav-menu {
      position: fixed;
      inset: var(--navigation-mobile-blockSize) 0 0;
      block-size: auto;
      filter: blur();
      -webkit-mask-image: linear-gradient(to bottom,
					black calc(100% - var(--navigation-menu-maskFade)),
					transparent);
      mask-image: linear-gradient(to bottom,
					black calc(100% - var(--navigation-menu-maskFade)),
					transparent);
      -webkit-mask-position: top;
      mask-position: top;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% calc(100% + var(--navigation-menu-maskFade));
      mask-size: 100% calc(100% + var(--navigation-menu-maskFade));
      opacity: 1;
      translate: 0;
      transition-property: filter, opacity, translate, display, overlay, -webkit-mask-size;
      transition-property: filter, opacity, translate, mask-size, display, overlay;
      transition-property: filter, opacity, translate, mask-size, display, overlay, -webkit-mask-size;
      transition-behavior: allow-discrete;
      transform-style: preserve-3d;
    }

    & .navigation-items > label[data-astro-cid-chc7nsxx] {
      transition-property: translate;
    }

    &:not(:has( > #nav-menu:popover-open)) {
      & #nav-menu {
        display: none;
        filter: blur(.375rem);
        interactivity: inert;
        -webkit-mask-size: 100% 0;
        mask-size: 100% 0;
        opacity: 0;
        translate: 0 -.75rem 1.25rem;
        pointer-events: none;
      }

      & .navigation-items > label[data-astro-cid-chc7nsxx] {
        transition-delay: 0s;
        translate: 0 1.75rem 1.25rem;
      }
    }

    &:has( > #nav-menu:popover-open) {
      & .navigation-items > label[data-astro-cid-chc7nsxx] {
        transition-delay: 80ms;
      }

      @starting-style {
        & #nav-menu {
          filter: blur(.375rem);
          -webkit-mask-size: 100% 0;
          mask-size: 100% 0;
          opacity: 0;
          translate: 0 -.75rem 1.25rem;
        }

        & .navigation-items > label[data-astro-cid-chc7nsxx] {
          translate: 0 1.75rem 1.25rem;
        }
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    nav[data-astro-cid-chc7nsxx], nav[data-astro-cid-chc7nsxx] #nav-menu[data-astro-cid-chc7nsxx] {
      translate: 0;
    }
  }
}

@media (width <= 1024px) {
  body:has([data-sticky-breadcrumb~="root"]) #nav[data-astro-cid-chc7nsxx] > header[data-astro-cid-chc7nsxx] {
    anchor-name: --navigation-row;
  }
}