[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"summary-04a639b65acfaeb8-fixing-iframe-transparency-issues-on-dark-mode-sit-summary":3,"summaries-facets-categories":155,"summary-related-04a639b65acfaeb8-fixing-iframe-transparency-issues-on-dark-mode-sit-summary":4034},{"id":4,"title":5,"ai":6,"body":13,"categories":126,"created_at":128,"date_modified":128,"description":71,"extension":129,"faq":128,"featured":130,"kicker_label":128,"meta":131,"navigation":137,"path":138,"published_at":139,"question":128,"scraped_at":140,"seo":141,"sitemap":142,"source_id":143,"source_name":144,"source_type":145,"source_url":146,"stem":147,"tags":148,"thumbnail_url":128,"tldr":152,"tweet":128,"unknown_tags":153,"__hash__":154},"summaries\u002Fsummaries\u002F04a639b65acfaeb8-fixing-iframe-transparency-issues-on-dark-mode-sit-summary.md","Fixing Iframe Transparency Issues on Dark-Mode Sites",{"provider":7,"model":8,"input_tokens":9,"output_tokens":10,"processing_time_ms":11,"cost_usd":12},"openrouter","google\u002Fgemini-3.1-flash-lite",4037,449,3514,0.00168275,{"type":14,"value":15,"toc":120},"minimark",[16,21,34,38,53,58,65,113,116],[17,18,20],"h2",{"id":19},"the-root-cause-browser-default-color-schemes","The Root Cause: Browser Default Color-Schemes",[22,23,24,25,29,30,33],"p",{},"When you inject an iframe into a host page, it inherits the browser's default rendering behavior. If the host site uses ",[26,27,28],"code",{},"color-scheme: dark",", the browser may force the iframe to render with a default light background to ensure readability, even if you have explicitly set ",[26,31,32],{},"background: transparent"," on your CSS elements. This results in a jarring white rectangle appearing over the user's dark-themed dashboard, despite DevTools reporting that your background colors are transparent.",[17,35,37],{"id":36},"the-css-fix-explicitly-setting-color-scheme","The CSS Fix: Explicitly Setting Color-Scheme",[22,39,40,41,44,45,48,49,52],{},"The solution is to explicitly define the ",[26,42,43],{},"color-scheme"," property on the root element of your iframe's content. By setting ",[26,46,47],{},"color-scheme: light dark;"," or specifically ",[26,50,51],{},"color-scheme: light;"," within the iframe's CSS, you instruct the browser to stop forcing its default light-mode rendering on your component.",[54,55,57],"h3",{"id":56},"implementation-example","Implementation Example",[22,59,60,61,64],{},"To implement this in a React application, apply the property to your root container or the ",[26,62,63],{},"html"," element:",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-css shiki shiki-themes github-light github-dark",":root {\n  color-scheme: light; \u002F* Forces the iframe to ignore host dark-mode defaults *\u002F\n}\n","css","",[26,73,74,87,107],{"__ignoreMap":71},[75,76,79,83],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"sScJk",":root",[75,84,86],{"class":85},"sVt8B"," {\n",[75,88,90,94,97,100,103],{"class":77,"line":89},2,[75,91,93],{"class":92},"sj4cs","  color-scheme",[75,95,96],{"class":85},": ",[75,98,99],{"class":92},"light",[75,101,102],{"class":85},"; ",[75,104,106],{"class":105},"sJ8bj","\u002F* Forces the iframe to ignore host dark-mode defaults *\u002F\n",[75,108,110],{"class":77,"line":109},3,[75,111,112],{"class":85},"}\n",[22,114,115],{},"By setting this property, you ensure that the iframe's background remains transparent as intended, allowing the host page's dark theme to show through without the browser injecting an unwanted white layer. This approach is lightweight, requiring only a few lines of CSS to resolve a common cross-site rendering conflict.",[117,118,119],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":71,"searchDepth":89,"depth":89,"links":121},[122,123],{"id":19,"depth":89,"text":20},{"id":36,"depth":89,"text":37,"children":124},[125],{"id":56,"depth":109,"text":57},[127],"Design & Frontend",null,"md",false,{"content_references":132,"triage":133},[],{"relevance":109,"novelty":89,"quality":134,"actionability":134,"composite":135,"reasoning":136},4,3.25,"Category: Design & Frontend. The article addresses a specific issue related to UI\u002FUX design in the context of iframes on dark-mode sites, which is relevant for frontend developers. It provides a practical CSS solution to a common problem, making it actionable for the audience.",true,"\u002Fsummaries\u002F04a639b65acfaeb8-fixing-iframe-transparency-issues-on-dark-mode-sit-summary","2026-05-20 17:43:31","2026-05-20 19:00:32",{"title":5,"description":71},{"loc":138},"04a639b65acfaeb8","Level Up Coding","article","https:\u002F\u002Flevelup.gitconnected.com\u002Fhow-to-make-chrome-extension-iframes-transparent-on-dark-mode-sites-css-color-scheme-fix-09e6e8162ba3?source=rss----5517fd7b58a6---4","summaries\u002F04a639b65acfaeb8-fixing-iframe-transparency-issues-on-dark-mode-sit-summary",[149,150,151,70],"frontend","ui-ux","chrome-extension","Chrome extension iframes often render a white background on dark-mode sites because the browser defaults to a light color-scheme. Setting 'color-scheme: light dark' or 'only light' on the iframe's root element forces the browser to respect your intended transparency.",[151,70],"NmZEIOjwnrvlI1dNrVEP-dqsAA1MJZCF2aaSftBgKVA",[156,159,162,165,168,171,173,175,177,179,181,183,186,188,190,192,194,196,198,200,202,204,206,208,210,212,215,217,219,222,224,226,229,231,233,235,237,239,241,243,245,247,249,251,254,256,258,260,262,264,266,268,270,272,274,276,278,280,282,284,286,288,290,292,294,296,298,300,302,304,306,308,310,312,314,316,318,320,322,324,326,328,330,332,334,336,338,340,342,344,346,348,350,352,354,356,358,360,362,364,366,368,370,372,374,376,378,380,382,384,386,388,390,392,394,396,398,400,402,404,406,408,410,412,414,416,418,420,422,424,426,428,430,432,434,436,438,440,442,444,446,448,450,452,454,456,458,460,462,464,466,468,470,472,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654,656,658,660,662,664,666,668,670,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,702,704,706,708,710,712,714,716,718,720,722,724,726,728,730,732,734,736,738,740,742,744,746,748,750,752,754,756,758,760,762,764,766,768,770,772,774,776,778,780,782,784,786,788,790,792,794,796,798,800,802,804,806,808,810,812,814,816,818,820,822,824,826,828,830,832,834,836,838,840,842,844,846,848,850,852,854,856,858,860,862,864,866,868,870,872,874,876,878,880,882,884,886,888,890,892,894,896,898,900,902,904,906,908,910,912,914,916,918,920,922,924,926,928,930,932,934,936,938,940,942,944,946,948,950,952,954,956,958,960,962,964,966,968,970,972,974,976,978,980,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224,1226,1228,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700,1702,1704,1706,1708,1710,1712,1714,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1746,1748,1750,1752,1754,1756,1758,1760,1762,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1924,1926,1928,1930,1932,1934,1936,1938,1940,1942,1944,1946,1948,1950,1952,1954,1956,1958,1960,1962,1964,1966,1968,1970,1972,1974,1976,1978,1980,1982,1984,1986,1988,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038,2040,2042,2044,2046,2048,2050,2052,2054,2056,2058,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134,2136,2138,2140,2142,2144,2146,2148,2150,2152,2154,2156,2158,2160,2162,2164,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184,2186,2188,2190,2192,2194,2196,2198,2200,2202,2204,2206,2208,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228,2230,2232,2234,2236,2238,2240,2242,2244,2246,2248,2250,2252,2254,2256,2258,2260,2262,2264,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310,2312,2314,2316,2318,2320,2322,2324,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356,2358,2360,2362,2364,2366,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394,2396,2398,2400,2402,2404,2406,2408,2410,2412,2414,2416,2418,2420,2422,2424,2426,2428,2430,2432,2434,2436,2438,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458,2460,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502,2504,2506,2508,2510,2512,2514,2516,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568,2570,2572,2574,2576,2578,2580,2582,2584,2586,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624,2626,2628,2630,2632,2634,2636,2638,2640,2642,2644,2646,2648,2650,2652,2654,2656,2658,2660,2662,2664,2666,2668,2670,2672,2674,2676,2678,2680,2682,2684,2686,2688,2690,2692,2694,2696,2698,2700,2702,2704,2706,2708,2710,2712,2714,2716,2718,2720,2722,2724,2726,2728,2730,2732,2734,2736,2738,2740,2742,2744,2746,2748,2750,2752,2754,2756,2758,2760,2762,2764,2766,2768,2770,2772,2774,2776,2778,2780,2782,2784,2786,2788,2790,2792,2794,2796,2798,2800,2802,2804,2806,2808,2810,2812,2814,2816,2818,2820,2822,2824,2826,2828,2830,2832,2834,2836,2838,2840,2842,2844,2846,2848,2850,2852,2854,2856,2858,2860,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896,2898,2900,2902,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974,2976,2978,2980,2982,2984,2986,2988,2990,2992,2994,2996,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024,3026,3028,3030,3032,3034,3036,3038,3040,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3066,3068,3070,3072,3074,3076,3078,3080,3082,3084,3086,3088,3090,3092,3094,3096,3098,3100,3102,3104,3106,3108,3110,3112,3114,3116,3118,3120,3122,3124,3126,3128,3130,3132,3134,3136,3138,3140,3142,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200,3202,3204,3206,3208,3210,3212,3214,3216,3218,3220,3222,3224,3226,3228,3230,3232,3234,3236,3238,3240,3242,3244,3246,3248,3250,3252,3254,3256,3258,3260,3262,3264,3266,3268,3270,3272,3274,3276,3278,3280,3282,3284,3286,3288,3290,3292,3294,3296,3298,3300,3302,3304,3306,3308,3310,3312,3314,3316,3318,3320,3322,3324,3326,3328,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348,3350,3352,3354,3356,3358,3360,3362,3364,3366,3368,3370,3372,3374,3376,3378,3380,3382,3384,3386,3388,3390,3392,3394,3396,3398,3400,3402,3404,3406,3408,3410,3412,3414,3416,3418,3420,3422,3424,3426,3428,3430,3432,3434,3436,3438,3440,3442,3444,3446,3448,3450,3452,3454,3456,3458,3460,3462,3464,3466,3468,3470,3472,3474,3476,3478,3480,3482,3484,3486,3488,3490,3492,3494,3496,3498,3500,3502,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3574,3576,3578,3580,3582,3584,3586,3588,3590,3592,3594,3596,3598,3600,3602,3604,3606,3608,3610,3612,3614,3616,3618,3620,3622,3624,3626,3628,3630,3632,3634,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678,3680,3682,3684,3686,3688,3690,3692,3694,3696,3698,3700,3702,3704,3706,3708,3710,3712,3714,3716,3718,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3746,3748,3750,3752,3754,3756,3758,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778,3780,3782,3784,3786,3788,3790,3792,3794,3796,3798,3800,3802,3804,3806,3808,3810,3812,3814,3816,3818,3820,3822,3824,3826,3828,3830,3832,3834,3836,3838,3840,3842,3844,3846,3848,3850,3852,3854,3856,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878,3880,3882,3884,3886,3888,3890,3892,3894,3896,3898,3900,3902,3904,3906,3908,3910,3912,3914,3916,3918,3920,3922,3924,3926,3928,3930,3932,3934,3936,3938,3940,3942,3944,3946,3948,3950,3952,3954,3956,3958,3960,3962,3964,3966,3968,3970,3972,3974,3976,3978,3980,3982,3984,3986,3988,3990,3992,3994,3996,3998,4000,4002,4004,4006,4008,4010,4012,4014,4016,4018,4020,4022,4024,4026,4028,4030,4032],{"categories":157},[158],"Developer Productivity",{"categories":160},[161],"Business & SaaS",{"categories":163},[164],"AI & LLMs",{"categories":166},[167],"AI Automation",{"categories":169},[170],"Product Strategy",{"categories":172},[164],{"categories":174},[158],{"categories":176},[161],{"categories":178},[],{"categories":180},[164],{"categories":182},[],{"categories":184},[185],"AI News & Trends",{"categories":187},[167],{"categories":189},[167],{"categories":191},[185],{"categories":193},[167],{"categories":195},[167],{"categories":197},[164],{"categories":199},[164],{"categories":201},[164],{"categories":203},[185],{"categories":205},[164],{"categories":207},[164],{"categories":209},[],{"categories":211},[127],{"categories":213},[214],"Data Science & Visualization",{"categories":216},[185],{"categories":218},[],{"categories":220},[221],"Software Engineering",{"categories":223},[164],{"categories":225},[167],{"categories":227},[228],"Marketing & Growth",{"categories":230},[127],{"categories":232},[164],{"categories":234},[167],{"categories":236},[],{"categories":238},[],{"categories":240},[127],{"categories":242},[167],{"categories":244},[158],{"categories":246},[221],{"categories":248},[127],{"categories":250},[164],{"categories":252},[253],"DevOps & Cloud",{"categories":255},[167],{"categories":257},[185],{"categories":259},[],{"categories":261},[],{"categories":263},[167],{"categories":265},[221],{"categories":267},[],{"categories":269},[161],{"categories":271},[],{"categories":273},[],{"categories":275},[167],{"categories":277},[164],{"categories":279},[167],{"categories":281},[164],{"categories":283},[164],{"categories":285},[],{"categories":287},[221],{"categories":289},[],{"categories":291},[],{"categories":293},[221],{"categories":295},[],{"categories":297},[221],{"categories":299},[164],{"categories":301},[164],{"categories":303},[228],{"categories":305},[127],{"categories":307},[127],{"categories":309},[164],{"categories":311},[167],{"categories":313},[221],{"categories":315},[164],{"categories":317},[164],{"categories":319},[167],{"categories":321},[167],{"categories":323},[214],{"categories":325},[185],{"categories":327},[167],{"categories":329},[228],{"categories":331},[167],{"categories":333},[170],{"categories":335},[221],{"categories":337},[],{"categories":339},[167],{"categories":341},[],{"categories":343},[167],{"categories":345},[221],{"categories":347},[253],{"categories":349},[127],{"categories":351},[164],{"categories":353},[],{"categories":355},[],{"categories":357},[167],{"categories":359},[],{"categories":361},[164],{"categories":363},[],{"categories":365},[158],{"categories":367},[221],{"categories":369},[161],{"categories":371},[164],{"categories":373},[185],{"categories":375},[164],{"categories":377},[],{"categories":379},[164],{"categories":381},[],{"categories":383},[221],{"categories":385},[214],{"categories":387},[],{"categories":389},[164],{"categories":391},[127],{"categories":393},[],{"categories":395},[127],{"categories":397},[167],{"categories":399},[],{"categories":401},[164],{"categories":403},[167],{"categories":405},[185],{"categories":407},[161],{"categories":409},[164],{"categories":411},[],{"categories":413},[167],{"categories":415},[164],{"categories":417},[170],{"categories":419},[],{"categories":421},[164],{"categories":423},[167],{"categories":425},[167],{"categories":427},[],{"categories":429},[214],{"categories":431},[164],{"categories":433},[],{"categories":435},[158],{"categories":437},[161],{"categories":439},[164],{"categories":441},[167],{"categories":443},[221],{"categories":445},[164],{"categories":447},[],{"categories":449},[],{"categories":451},[164],{"categories":453},[164],{"categories":455},[],{"categories":457},[127],{"categories":459},[],{"categories":461},[164],{"categories":463},[],{"categories":465},[167],{"categories":467},[164],{"categories":469},[127],{"categories":471},[],{"categories":473},[164],{"categories":475},[164],{"categories":477},[161],{"categories":479},[167],{"categories":481},[164],{"categories":483},[127],{"categories":485},[167],{"categories":487},[],{"categories":489},[],{"categories":491},[185],{"categories":493},[],{"categories":495},[164],{"categories":497},[161,228],{"categories":499},[],{"categories":501},[164],{"categories":503},[167],{"categories":505},[],{"categories":507},[],{"categories":509},[164],{"categories":511},[],{"categories":513},[164],{"categories":515},[253],{"categories":517},[],{"categories":519},[185],{"categories":521},[127],{"categories":523},[],{"categories":525},[185],{"categories":527},[185],{"categories":529},[164],{"categories":531},[228],{"categories":533},[],{"categories":535},[161],{"categories":537},[167],{"categories":539},[],{"categories":541},[164,253],{"categories":543},[164],{"categories":545},[164],{"categories":547},[164],{"categories":549},[167],{"categories":551},[164,221],{"categories":553},[214],{"categories":555},[164],{"categories":557},[228],{"categories":559},[167],{"categories":561},[167],{"categories":563},[],{"categories":565},[167],{"categories":567},[164],{"categories":569},[164,161],{"categories":571},[],{"categories":573},[127],{"categories":575},[127],{"categories":577},[],{"categories":579},[],{"categories":581},[185],{"categories":583},[],{"categories":585},[158],{"categories":587},[221],{"categories":589},[164],{"categories":591},[127],{"categories":593},[167],{"categories":595},[221],{"categories":597},[185],{"categories":599},[127],{"categories":601},[],{"categories":603},[164],{"categories":605},[164],{"categories":607},[164],{"categories":609},[164],{"categories":611},[185],{"categories":613},[158],{"categories":615},[164],{"categories":617},[167],{"categories":619},[253],{"categories":621},[127],{"categories":623},[167],{"categories":625},[],{"categories":627},[],{"categories":629},[127],{"categories":631},[185],{"categories":633},[214],{"categories":635},[],{"categories":637},[164],{"categories":639},[164],{"categories":641},[161],{"categories":643},[164],{"categories":645},[164],{"categories":647},[185],{"categories":649},[],{"categories":651},[167],{"categories":653},[221],{"categories":655},[],{"categories":657},[164],{"categories":659},[164],{"categories":661},[167],{"categories":663},[],{"categories":665},[],{"categories":667},[164],{"categories":669},[],{"categories":671},[161],{"categories":673},[167],{"categories":675},[167],{"categories":677},[],{"categories":679},[158],{"categories":681},[164],{"categories":683},[161],{"categories":685},[185],{"categories":687},[158],{"categories":689},[],{"categories":691},[],{"categories":693},[],{"categories":695},[185],{"categories":697},[185],{"categories":699},[],{"categories":701},[],{"categories":703},[161],{"categories":705},[],{"categories":707},[],{"categories":709},[158],{"categories":711},[],{"categories":713},[228],{"categories":715},[167],{"categories":717},[161],{"categories":719},[167],{"categories":721},[221],{"categories":723},[],{"categories":725},[170],{"categories":727},[127],{"categories":729},[221],{"categories":731},[164],{"categories":733},[167],{"categories":735},[161],{"categories":737},[164],{"categories":739},[],{"categories":741},[],{"categories":743},[221],{"categories":745},[214],{"categories":747},[170],{"categories":749},[167],{"categories":751},[164],{"categories":753},[],{"categories":755},[253],{"categories":757},[],{"categories":759},[167],{"categories":761},[],{"categories":763},[158],{"categories":765},[],{"categories":767},[164],{"categories":769},[164],{"categories":771},[127],{"categories":773},[228],{"categories":775},[167],{"categories":777},[],{"categories":779},[158],{"categories":781},[],{"categories":783},[185],{"categories":785},[164,253],{"categories":787},[164],{"categories":789},[185],{"categories":791},[164],{"categories":793},[161],{"categories":795},[164],{"categories":797},[],{"categories":799},[164],{"categories":801},[161],{"categories":803},[],{"categories":805},[221],{"categories":807},[127],{"categories":809},[185],{"categories":811},[214],{"categories":813},[158],{"categories":815},[164],{"categories":817},[167],{"categories":819},[221],{"categories":821},[],{"categories":823},[],{"categories":825},[170],{"categories":827},[],{"categories":829},[164],{"categories":831},[],{"categories":833},[127],{"categories":835},[221],{"categories":837},[127],{"categories":839},[164],{"categories":841},[127],{"categories":843},[],{"categories":845},[],{"categories":847},[185],{"categories":849},[167],{"categories":851},[164],{"categories":853},[164],{"categories":855},[164],{"categories":857},[161],{"categories":859},[164],{"categories":861},[],{"categories":863},[221],{"categories":865},[221],{"categories":867},[161],{"categories":869},[],{"categories":871},[164],{"categories":873},[164],{"categories":875},[161],{"categories":877},[185],{"categories":879},[228],{"categories":881},[164],{"categories":883},[167],{"categories":885},[],{"categories":887},[127],{"categories":889},[],{"categories":891},[164],{"categories":893},[164],{"categories":895},[],{"categories":897},[161],{"categories":899},[167],{"categories":901},[],{"categories":903},[253],{"categories":905},[214],{"categories":907},[221],{"categories":909},[228],{"categories":911},[164],{"categories":913},[221],{"categories":915},[167],{"categories":917},[],{"categories":919},[],{"categories":921},[167],{"categories":923},[158],{"categories":925},[167],{"categories":927},[170],{"categories":929},[161],{"categories":931},[],{"categories":933},[164],{"categories":935},[170],{"categories":937},[164],{"categories":939},[164],{"categories":941},[228],{"categories":943},[164],{"categories":945},[127],{"categories":947},[167],{"categories":949},[],{"categories":951},[],{"categories":953},[253],{"categories":955},[221],{"categories":957},[],{"categories":959},[167],{"categories":961},[164],{"categories":963},[127,164],{"categories":965},[158],{"categories":967},[],{"categories":969},[164],{"categories":971},[158],{"categories":973},[127],{"categories":975},[167],{"categories":977},[221],{"categories":979},[],{"categories":981},[164],{"categories":983},[],{"categories":985},[],{"categories":987},[164],{"categories":989},[158],{"categories":991},[],{"categories":993},[167],{"categories":995},[170],{"categories":997},[164],{"categories":999},[164],{"categories":1001},[164],{"categories":1003},[127],{"categories":1005},[167],{"categories":1007},[253],{"categories":1009},[127],{"categories":1011},[167],{"categories":1013},[164],{"categories":1015},[164],{"categories":1017},[164],{"categories":1019},[221],{"categories":1021},[],{"categories":1023},[185],{"categories":1025},[],{"categories":1027},[170],{"categories":1029},[167],{"categories":1031},[127],{"categories":1033},[164],{"categories":1035},[167],{"categories":1037},[221],{"categories":1039},[127],{"categories":1041},[167],{"categories":1043},[185],{"categories":1045},[],{"categories":1047},[164],{"categories":1049},[127],{"categories":1051},[164],{"categories":1053},[158],{"categories":1055},[185],{"categories":1057},[164],{"categories":1059},[228],{"categories":1061},[164],{"categories":1063},[167],{"categories":1065},[164],{"categories":1067},[167],{"categories":1069},[167],{"categories":1071},[164],{"categories":1073},[167],{"categories":1075},[127],{"categories":1077},[164],{"categories":1079},[],{"categories":1081},[],{"categories":1083},[221],{"categories":1085},[],{"categories":1087},[158],{"categories":1089},[253],{"categories":1091},[164],{"categories":1093},[],{"categories":1095},[158],{"categories":1097},[161],{"categories":1099},[228],{"categories":1101},[],{"categories":1103},[161],{"categories":1105},[],{"categories":1107},[164],{"categories":1109},[],{"categories":1111},[],{"categories":1113},[],{"categories":1115},[],{"categories":1117},[164],{"categories":1119},[167],{"categories":1121},[253],{"categories":1123},[158],{"categories":1125},[221],{"categories":1127},[164],{"categories":1129},[221],{"categories":1131},[170],{"categories":1133},[164],{"categories":1135},[228],{"categories":1137},[161],{"categories":1139},[164],{"categories":1141},[164],{"categories":1143},[164],{"categories":1145},[164,158],{"categories":1147},[221],{"categories":1149},[221],{"categories":1151},[127],{"categories":1153},[164],{"categories":1155},[],{"categories":1157},[],{"categories":1159},[],{"categories":1161},[221],{"categories":1163},[214],{"categories":1165},[185],{"categories":1167},[127],{"categories":1169},[],{"categories":1171},[164],{"categories":1173},[164],{"categories":1175},[],{"categories":1177},[167],{"categories":1179},[164],{"categories":1181},[],{"categories":1183},[167],{"categories":1185},[164],{"categories":1187},[161],{"categories":1189},[],{"categories":1191},[158],{"categories":1193},[164],{"categories":1195},[158],{"categories":1197},[164],{"categories":1199},[221],{"categories":1201},[228],{"categories":1203},[167],{"categories":1205},[164,127],{"categories":1207},[185],{"categories":1209},[164],{"categories":1211},[127],{"categories":1213},[],{"categories":1215},[221],{"categories":1217},[253],{"categories":1219},[127],{"categories":1221},[167],{"categories":1223},[],{"categories":1225},[],{"categories":1227},[],{"categories":1229},[],{"categories":1231},[221],{"categories":1233},[167],{"categories":1235},[167],{"categories":1237},[253],{"categories":1239},[164],{"categories":1241},[164],{"categories":1243},[167],{"categories":1245},[164],{"categories":1247},[164],{"categories":1249},[],{"categories":1251},[127],{"categories":1253},[],{"categories":1255},[],{"categories":1257},[167],{"categories":1259},[],{"categories":1261},[],{"categories":1263},[228],{"categories":1265},[228],{"categories":1267},[167],{"categories":1269},[221],{"categories":1271},[],{"categories":1273},[164],{"categories":1275},[164],{"categories":1277},[221],{"categories":1279},[127],{"categories":1281},[127],{"categories":1283},[167],{"categories":1285},[158],{"categories":1287},[164],{"categories":1289},[127],{"categories":1291},[127],{"categories":1293},[167],{"categories":1295},[167],{"categories":1297},[164],{"categories":1299},[],{"categories":1301},[],{"categories":1303},[164],{"categories":1305},[167],{"categories":1307},[185],{"categories":1309},[221],{"categories":1311},[164],{"categories":1313},[158],{"categories":1315},[164],{"categories":1317},[],{"categories":1319},[167],{"categories":1321},[167],{"categories":1323},[],{"categories":1325},[164],{"categories":1327},[158],{"categories":1329},[164],{"categories":1331},[158],{"categories":1333},[158],{"categories":1335},[],{"categories":1337},[],{"categories":1339},[167],{"categories":1341},[185],{"categories":1343},[167],{"categories":1345},[164],{"categories":1347},[164],{"categories":1349},[185],{"categories":1351},[214],{"categories":1353},[170],{"categories":1355},[185],{"categories":1357},[127],{"categories":1359},[],{"categories":1361},[],{"categories":1363},[185],{"categories":1365},[],{"categories":1367},[],{"categories":1369},[],{"categories":1371},[],{"categories":1373},[221],{"categories":1375},[214],{"categories":1377},[],{"categories":1379},[164],{"categories":1381},[164],{"categories":1383},[214],{"categories":1385},[221],{"categories":1387},[],{"categories":1389},[],{"categories":1391},[167],{"categories":1393},[185],{"categories":1395},[185],{"categories":1397},[167],{"categories":1399},[158],{"categories":1401},[164,253],{"categories":1403},[],{"categories":1405},[127],{"categories":1407},[158],{"categories":1409},[167],{"categories":1411},[127],{"categories":1413},[],{"categories":1415},[167],{"categories":1417},[167],{"categories":1419},[164],{"categories":1421},[228],{"categories":1423},[221],{"categories":1425},[127],{"categories":1427},[],{"categories":1429},[167],{"categories":1431},[164],{"categories":1433},[167],{"categories":1435},[167],{"categories":1437},[167],{"categories":1439},[228],{"categories":1441},[164],{"categories":1443},[167],{"categories":1445},[164],{"categories":1447},[],{"categories":1449},[228],{"categories":1451},[185],{"categories":1453},[167],{"categories":1455},[],{"categories":1457},[],{"categories":1459},[164],{"categories":1461},[167],{"categories":1463},[185],{"categories":1465},[167],{"categories":1467},[167],{"categories":1469},[],{"categories":1471},[164],{"categories":1473},[],{"categories":1475},[],{"categories":1477},[167],{"categories":1479},[],{"categories":1481},[],{"categories":1483},[214],{"categories":1485},[164],{"categories":1487},[214],{"categories":1489},[185],{"categories":1491},[164],{"categories":1493},[164],{"categories":1495},[167],{"categories":1497},[164],{"categories":1499},[],{"categories":1501},[],{"categories":1503},[253],{"categories":1505},[164],{"categories":1507},[],{"categories":1509},[],{"categories":1511},[158],{"categories":1513},[],{"categories":1515},[],{"categories":1517},[164],{"categories":1519},[],{"categories":1521},[],{"categories":1523},[221],{"categories":1525},[185],{"categories":1527},[228],{"categories":1529},[161],{"categories":1531},[164],{"categories":1533},[164],{"categories":1535},[161],{"categories":1537},[],{"categories":1539},[127],{"categories":1541},[167],{"categories":1543},[161],{"categories":1545},[164],{"categories":1547},[164],{"categories":1549},[158],{"categories":1551},[],{"categories":1553},[158],{"categories":1555},[164],{"categories":1557},[228],{"categories":1559},[167],{"categories":1561},[185],{"categories":1563},[161],{"categories":1565},[164],{"categories":1567},[164],{"categories":1569},[167],{"categories":1571},[],{"categories":1573},[164],{"categories":1575},[158],{"categories":1577},[164],{"categories":1579},[164],{"categories":1581},[],{"categories":1583},[185],{"categories":1585},[164],{"categories":1587},[],{"categories":1589},[161],{"categories":1591},[161],{"categories":1593},[164],{"categories":1595},[],{"categories":1597},[],{"categories":1599},[],{"categories":1601},[164],{"categories":1603},[185],{"categories":1605},[],{"categories":1607},[253],{"categories":1609},[164],{"categories":1611},[],{"categories":1613},[164],{"categories":1615},[164],{"categories":1617},[164],{"categories":1619},[164,253],{"categories":1621},[164],{"categories":1623},[164],{"categories":1625},[127],{"categories":1627},[167],{"categories":1629},[],{"categories":1631},[167],{"categories":1633},[167],{"categories":1635},[164],{"categories":1637},[164],{"categories":1639},[164],{"categories":1641},[158],{"categories":1643},[158],{"categories":1645},[221],{"categories":1647},[127],{"categories":1649},[167],{"categories":1651},[],{"categories":1653},[164],{"categories":1655},[185],{"categories":1657},[164],{"categories":1659},[161],{"categories":1661},[],{"categories":1663},[253],{"categories":1665},[127],{"categories":1667},[127],{"categories":1669},[167],{"categories":1671},[185],{"categories":1673},[167],{"categories":1675},[164],{"categories":1677},[],{"categories":1679},[164],{"categories":1681},[],{"categories":1683},[],{"categories":1685},[164],{"categories":1687},[164],{"categories":1689},[164],{"categories":1691},[167],{"categories":1693},[164],{"categories":1695},[164],{"categories":1697},[],{"categories":1699},[214],{"categories":1701},[167],{"categories":1703},[],{"categories":1705},[],{"categories":1707},[164],{"categories":1709},[185],{"categories":1711},[],{"categories":1713},[127],{"categories":1715},[253],{"categories":1717},[185],{"categories":1719},[221],{"categories":1721},[221],{"categories":1723},[185],{"categories":1725},[185],{"categories":1727},[253],{"categories":1729},[],{"categories":1731},[185],{"categories":1733},[164],{"categories":1735},[158],{"categories":1737},[164],{"categories":1739},[185],{"categories":1741},[],{"categories":1743},[221],{"categories":1745},[214],{"categories":1747},[164],{"categories":1749},[185],{"categories":1751},[221],{"categories":1753},[167],{"categories":1755},[185],{"categories":1757},[253],{"categories":1759},[167],{"categories":1761},[164],{"categories":1763},[164],{"categories":1765},[164],{"categories":1767},[],{"categories":1769},[161],{"categories":1771},[],{"categories":1773},[],{"categories":1775},[164],{"categories":1777},[164],{"categories":1779},[164],{"categories":1781},[164],{"categories":1783},[],{"categories":1785},[214],{"categories":1787},[158],{"categories":1789},[],{"categories":1791},[164],{"categories":1793},[164],{"categories":1795},[253],{"categories":1797},[253],{"categories":1799},[],{"categories":1801},[167],{"categories":1803},[185],{"categories":1805},[185],{"categories":1807},[164],{"categories":1809},[167],{"categories":1811},[],{"categories":1813},[127],{"categories":1815},[164],{"categories":1817},[164],{"categories":1819},[],{"categories":1821},[164],{"categories":1823},[],{"categories":1825},[221],{"categories":1827},[253],{"categories":1829},[164],{"categories":1831},[221],{"categories":1833},[161],{"categories":1835},[164],{"categories":1837},[],{"categories":1839},[167],{"categories":1841},[158],{"categories":1843},[158],{"categories":1845},[],{"categories":1847},[164],{"categories":1849},[127],{"categories":1851},[167],{"categories":1853},[],{"categories":1855},[164],{"categories":1857},[164],{"categories":1859},[167],{"categories":1861},[],{"categories":1863},[167],{"categories":1865},[221],{"categories":1867},[],{"categories":1869},[164],{"categories":1871},[],{"categories":1873},[164],{"categories":1875},[],{"categories":1877},[164],{"categories":1879},[164],{"categories":1881},[],{"categories":1883},[164],{"categories":1885},[185],{"categories":1887},[164],{"categories":1889},[164],{"categories":1891},[158],{"categories":1893},[164],{"categories":1895},[185],{"categories":1897},[167],{"categories":1899},[],{"categories":1901},[164],{"categories":1903},[127],{"categories":1905},[228],{"categories":1907},[164],{"categories":1909},[],{"categories":1911},[],{"categories":1913},[],{"categories":1915},[158],{"categories":1917},[185],{"categories":1919},[167],{"categories":1921},[164],{"categories":1923},[127],{"categories":1925},[167],{"categories":1927},[],{"categories":1929},[167],{"categories":1931},[],{"categories":1933},[164],{"categories":1935},[167],{"categories":1937},[164],{"categories":1939},[],{"categories":1941},[164],{"categories":1943},[164],{"categories":1945},[185],{"categories":1947},[127],{"categories":1949},[167],{"categories":1951},[127],{"categories":1953},[161],{"categories":1955},[],{"categories":1957},[],{"categories":1959},[164],{"categories":1961},[158],{"categories":1963},[185],{"categories":1965},[],{"categories":1967},[127],{"categories":1969},[],{"categories":1971},[221],{"categories":1973},[221],{"categories":1975},[127],{"categories":1977},[],{"categories":1979},[164],{"categories":1981},[],{"categories":1983},[228],{"categories":1985},[164],{"categories":1987},[253],{"categories":1989},[221],{"categories":1991},[],{"categories":1993},[167],{"categories":1995},[164],{"categories":1997},[158],{"categories":1999},[167],{"categories":2001},[167],{"categories":2003},[164],{"categories":2005},[],{"categories":2007},[158],{"categories":2009},[164],{"categories":2011},[161],{"categories":2013},[221],{"categories":2015},[127],{"categories":2017},[],{"categories":2019},[],{"categories":2021},[],{"categories":2023},[167],{"categories":2025},[127],{"categories":2027},[185],{"categories":2029},[164],{"categories":2031},[185],{"categories":2033},[127],{"categories":2035},[],{"categories":2037},[127],{"categories":2039},[185],{"categories":2041},[161],{"categories":2043},[221],{"categories":2045},[164],{"categories":2047},[185],{"categories":2049},[228],{"categories":2051},[],{"categories":2053},[],{"categories":2055},[214],{"categories":2057},[164,221],{"categories":2059},[185],{"categories":2061},[164],{"categories":2063},[167],{"categories":2065},[164],{"categories":2067},[167],{"categories":2069},[164],{"categories":2071},[164],{"categories":2073},[],{"categories":2075},[221],{"categories":2077},[164],{"categories":2079},[214],{"categories":2081},[167],{"categories":2083},[228],{"categories":2085},[253],{"categories":2087},[],{"categories":2089},[158],{"categories":2091},[167],{"categories":2093},[167],{"categories":2095},[221],{"categories":2097},[164],{"categories":2099},[164],{"categories":2101},[],{"categories":2103},[],{"categories":2105},[],{"categories":2107},[253],{"categories":2109},[185],{"categories":2111},[164],{"categories":2113},[164],{"categories":2115},[164],{"categories":2117},[],{"categories":2119},[214],{"categories":2121},[161],{"categories":2123},[],{"categories":2125},[167],{"categories":2127},[253],{"categories":2129},[],{"categories":2131},[127],{"categories":2133},[127],{"categories":2135},[],{"categories":2137},[221],{"categories":2139},[164],{"categories":2141},[127],{"categories":2143},[164],{"categories":2145},[],{"categories":2147},[185],{"categories":2149},[164],{"categories":2151},[164],{"categories":2153},[127],{"categories":2155},[167],{"categories":2157},[185],{"categories":2159},[],{"categories":2161},[167],{"categories":2163},[127],{"categories":2165},[164],{"categories":2167},[],{"categories":2169},[164],{"categories":2171},[164],{"categories":2173},[253],{"categories":2175},[185],{"categories":2177},[214],{"categories":2179},[214],{"categories":2181},[],{"categories":2183},[],{"categories":2185},[],{"categories":2187},[167],{"categories":2189},[221],{"categories":2191},[221],{"categories":2193},[164],{"categories":2195},[],{"categories":2197},[],{"categories":2199},[164],{"categories":2201},[],{"categories":2203},[167],{"categories":2205},[164],{"categories":2207},[],{"categories":2209},[164],{"categories":2211},[161],{"categories":2213},[164],{"categories":2215},[228],{"categories":2217},[167],{"categories":2219},[164],{"categories":2221},[164],{"categories":2223},[164],{"categories":2225},[221],{"categories":2227},[],{"categories":2229},[185],{"categories":2231},[167],{"categories":2233},[],{"categories":2235},[185],{"categories":2237},[167],{"categories":2239},[167],{"categories":2241},[],{"categories":2243},[161],{"categories":2245},[167],{"categories":2247},[],{"categories":2249},[164],{"categories":2251},[158],{"categories":2253},[185],{"categories":2255},[253],{"categories":2257},[167],{"categories":2259},[167],{"categories":2261},[158],{"categories":2263},[],{"categories":2265},[164],{"categories":2267},[],{"categories":2269},[],{"categories":2271},[127],{"categories":2273},[164,161],{"categories":2275},[164],{"categories":2277},[],{"categories":2279},[158],{"categories":2281},[214],{"categories":2283},[164],{"categories":2285},[221],{"categories":2287},[164],{"categories":2289},[167],{"categories":2291},[164],{"categories":2293},[164],{"categories":2295},[185],{"categories":2297},[167],{"categories":2299},[],{"categories":2301},[],{"categories":2303},[167],{"categories":2305},[164],{"categories":2307},[253],{"categories":2309},[],{"categories":2311},[164],{"categories":2313},[167],{"categories":2315},[],{"categories":2317},[167],{"categories":2319},[164],{"categories":2321},[228],{"categories":2323},[214],{"categories":2325},[167],{"categories":2327},[164],{"categories":2329},[253],{"categories":2331},[],{"categories":2333},[164],{"categories":2335},[228],{"categories":2337},[127],{"categories":2339},[164],{"categories":2341},[164],{"categories":2343},[],{"categories":2345},[228],{"categories":2347},[185],{"categories":2349},[164],{"categories":2351},[164],{"categories":2353},[158],{"categories":2355},[],{"categories":2357},[],{"categories":2359},[127],{"categories":2361},[164],{"categories":2363},[214],{"categories":2365},[228],{"categories":2367},[228],{"categories":2369},[185],{"categories":2371},[],{"categories":2373},[],{"categories":2375},[164],{"categories":2377},[164],{"categories":2379},[164],{"categories":2381},[],{"categories":2383},[164,221],{"categories":2385},[185],{"categories":2387},[167],{"categories":2389},[221],{"categories":2391},[164],{"categories":2393},[158],{"categories":2395},[],{"categories":2397},[],{"categories":2399},[158],{"categories":2401},[221],{"categories":2403},[228],{"categories":2405},[164],{"categories":2407},[],{"categories":2409},[127,164],{"categories":2411},[253],{"categories":2413},[158],{"categories":2415},[],{"categories":2417},[161],{"categories":2419},[161],{"categories":2421},[164],{"categories":2423},[164],{"categories":2425},[221],{"categories":2427},[167],{"categories":2429},[185],{"categories":2431},[228],{"categories":2433},[127],{"categories":2435},[164],{"categories":2437},[164],{"categories":2439},[164],{"categories":2441},[158],{"categories":2443},[164],{"categories":2445},[167],{"categories":2447},[185],{"categories":2449},[],{"categories":2451},[],{"categories":2453},[214],{"categories":2455},[221],{"categories":2457},[164],{"categories":2459},[127],{"categories":2461},[164],{"categories":2463},[214],{"categories":2465},[164],{"categories":2467},[164],{"categories":2469},[164],{"categories":2471},[167],{"categories":2473},[167],{"categories":2475},[164,161],{"categories":2477},[],{"categories":2479},[127],{"categories":2481},[],{"categories":2483},[164],{"categories":2485},[185],{"categories":2487},[158],{"categories":2489},[158],{"categories":2491},[167],{"categories":2493},[164],{"categories":2495},[164],{"categories":2497},[161],{"categories":2499},[221],{"categories":2501},[228],{"categories":2503},[164],{"categories":2505},[],{"categories":2507},[185],{"categories":2509},[164],{"categories":2511},[164],{"categories":2513},[164],{"categories":2515},[164],{"categories":2517},[185],{"categories":2519},[221],{"categories":2521},[221],{"categories":2523},[164],{"categories":2525},[164],{"categories":2527},[167],{"categories":2529},[185],{"categories":2531},[164],{"categories":2533},[127],{"categories":2535},[164],{"categories":2537},[164],{"categories":2539},[253],{"categories":2541},[164],{"categories":2543},[170],{"categories":2545},[167],{"categories":2547},[164],{"categories":2549},[185],{"categories":2551},[167],{"categories":2553},[228],{"categories":2555},[164],{"categories":2557},[],{"categories":2559},[164],{"categories":2561},[],{"categories":2563},[],{"categories":2565},[],{"categories":2567},[161],{"categories":2569},[164],{"categories":2571},[167],{"categories":2573},[185],{"categories":2575},[185],{"categories":2577},[185],{"categories":2579},[185],{"categories":2581},[],{"categories":2583},[158],{"categories":2585},[167],{"categories":2587},[185],{"categories":2589},[164],{"categories":2591},[158],{"categories":2593},[167],{"categories":2595},[164],{"categories":2597},[164,167],{"categories":2599},[167],{"categories":2601},[253],{"categories":2603},[185],{"categories":2605},[185],{"categories":2607},[167],{"categories":2609},[164],{"categories":2611},[],{"categories":2613},[185],{"categories":2615},[228],{"categories":2617},[158],{"categories":2619},[164],{"categories":2621},[164],{"categories":2623},[],{"categories":2625},[221],{"categories":2627},[],{"categories":2629},[158],{"categories":2631},[167],{"categories":2633},[185],{"categories":2635},[164],{"categories":2637},[185],{"categories":2639},[158],{"categories":2641},[185],{"categories":2643},[185],{"categories":2645},[],{"categories":2647},[161],{"categories":2649},[167],{"categories":2651},[185],{"categories":2653},[185],{"categories":2655},[185],{"categories":2657},[185],{"categories":2659},[185],{"categories":2661},[185],{"categories":2663},[185],{"categories":2665},[185],{"categories":2667},[185],{"categories":2669},[185],{"categories":2671},[214],{"categories":2673},[158],{"categories":2675},[164],{"categories":2677},[164],{"categories":2679},[],{"categories":2681},[164,158],{"categories":2683},[],{"categories":2685},[167],{"categories":2687},[185],{"categories":2689},[167],{"categories":2691},[164],{"categories":2693},[164],{"categories":2695},[164],{"categories":2697},[164],{"categories":2699},[164],{"categories":2701},[167],{"categories":2703},[161],{"categories":2705},[],{"categories":2707},[127],{"categories":2709},[185],{"categories":2711},[164],{"categories":2713},[],{"categories":2715},[],{"categories":2717},[167],{"categories":2719},[127],{"categories":2721},[164],{"categories":2723},[],{"categories":2725},[164],{"categories":2727},[],{"categories":2729},[228],{"categories":2731},[164],{"categories":2733},[],{"categories":2735},[],{"categories":2737},[185],{"categories":2739},[158],{"categories":2741},[164],{"categories":2743},[161],{"categories":2745},[164],{"categories":2747},[161],{"categories":2749},[127],{"categories":2751},[],{"categories":2753},[185],{"categories":2755},[],{"categories":2757},[127],{"categories":2759},[164],{"categories":2761},[228],{"categories":2763},[],{"categories":2765},[228],{"categories":2767},[],{"categories":2769},[],{"categories":2771},[167],{"categories":2773},[],{"categories":2775},[161],{"categories":2777},[158],{"categories":2779},[127],{"categories":2781},[221],{"categories":2783},[],{"categories":2785},[],{"categories":2787},[164],{"categories":2789},[158],{"categories":2791},[228],{"categories":2793},[],{"categories":2795},[167],{"categories":2797},[167],{"categories":2799},[185],{"categories":2801},[221],{"categories":2803},[164],{"categories":2805},[167],{"categories":2807},[164],{"categories":2809},[167],{"categories":2811},[164],{"categories":2813},[170],{"categories":2815},[185],{"categories":2817},[],{"categories":2819},[228],{"categories":2821},[],{"categories":2823},[221],{"categories":2825},[167],{"categories":2827},[],{"categories":2829},[164],{"categories":2831},[167],{"categories":2833},[161],{"categories":2835},[158],{"categories":2837},[164],{"categories":2839},[127],{"categories":2841},[221],{"categories":2843},[221],{"categories":2845},[164],{"categories":2847},[214],{"categories":2849},[164],{"categories":2851},[167],{"categories":2853},[161],{"categories":2855},[127],{"categories":2857},[167],{"categories":2859},[164],{"categories":2861},[164],{"categories":2863},[167],{"categories":2865},[185],{"categories":2867},[],{"categories":2869},[158],{"categories":2871},[164],{"categories":2873},[167],{"categories":2875},[164],{"categories":2877},[164],{"categories":2879},[],{"categories":2881},[127],{"categories":2883},[161],{"categories":2885},[185],{"categories":2887},[164],{"categories":2889},[164],{"categories":2891},[127],{"categories":2893},[164],{"categories":2895},[228],{"categories":2897},[214],{"categories":2899},[164],{"categories":2901},[185],{"categories":2903},[164],{"categories":2905},[167],{"categories":2907},[253],{"categories":2909},[164],{"categories":2911},[167],{"categories":2913},[214],{"categories":2915},[],{"categories":2917},[167],{"categories":2919},[221],{"categories":2921},[127],{"categories":2923},[164],{"categories":2925},[158],{"categories":2927},[161],{"categories":2929},[221],{"categories":2931},[164],{"categories":2933},[],{"categories":2935},[167],{"categories":2937},[167],{"categories":2939},[164],{"categories":2941},[214],{"categories":2943},[],{"categories":2945},[185],{"categories":2947},[],{"categories":2949},[185],{"categories":2951},[164],{"categories":2953},[167],{"categories":2955},[167],{"categories":2957},[167],{"categories":2959},[],{"categories":2961},[185],{"categories":2963},[],{"categories":2965},[164],{"categories":2967},[164],{"categories":2969},[],{"categories":2971},[127],{"categories":2973},[167],{"categories":2975},[228],{"categories":2977},[158],{"categories":2979},[],{"categories":2981},[164],{"categories":2983},[],{"categories":2985},[158],{"categories":2987},[185],{"categories":2989},[221],{"categories":2991},[164],{"categories":2993},[164],{"categories":2995},[164],{"categories":2997},[221],{"categories":2999},[185],{"categories":3001},[127],{"categories":3003},[164],{"categories":3005},[164],{"categories":3007},[164],{"categories":3009},[185],{"categories":3011},[164],{"categories":3013},[185],{"categories":3015},[185],{"categories":3017},[167],{"categories":3019},[167],{"categories":3021},[221],{"categories":3023},[185],{"categories":3025},[167],{"categories":3027},[164],{"categories":3029},[221],{"categories":3031},[127],{"categories":3033},[],{"categories":3035},[167],{"categories":3037},[],{"categories":3039},[],{"categories":3041},[],{"categories":3043},[161],{"categories":3045},[164],{"categories":3047},[167],{"categories":3049},[158],{"categories":3051},[167],{"categories":3053},[228],{"categories":3055},[],{"categories":3057},[167],{"categories":3059},[],{"categories":3061},[158],{"categories":3063},[167],{"categories":3065},[],{"categories":3067},[167],{"categories":3069},[164],{"categories":3071},[185],{"categories":3073},[164],{"categories":3075},[167],{"categories":3077},[185],{"categories":3079},[167],{"categories":3081},[221],{"categories":3083},[127],{"categories":3085},[158],{"categories":3087},[],{"categories":3089},[167],{"categories":3091},[127],{"categories":3093},[253],{"categories":3095},[185],{"categories":3097},[164],{"categories":3099},[127],{"categories":3101},[158],{"categories":3103},[],{"categories":3105},[167],{"categories":3107},[164],{"categories":3109},[167],{"categories":3111},[164],{"categories":3113},[],{"categories":3115},[167],{"categories":3117},[170],{"categories":3119},[185],{"categories":3121},[167],{"categories":3123},[161],{"categories":3125},[],{"categories":3127},[164],{"categories":3129},[170],{"categories":3131},[164],{"categories":3133},[167],{"categories":3135},[185],{"categories":3137},[158],{"categories":3139},[253],{"categories":3141},[164],{"categories":3143},[164],{"categories":3145},[164],{"categories":3147},[185],{"categories":3149},[161],{"categories":3151},[164],{"categories":3153},[127],{"categories":3155},[185],{"categories":3157},[253],{"categories":3159},[164],{"categories":3161},[],{"categories":3163},[],{"categories":3165},[164],{"categories":3167},[253],{"categories":3169},[214],{"categories":3171},[167],{"categories":3173},[167],{"categories":3175},[185],{"categories":3177},[164],{"categories":3179},[158],{"categories":3181},[127],{"categories":3183},[167],{"categories":3185},[164],{"categories":3187},[228],{"categories":3189},[164],{"categories":3191},[167],{"categories":3193},[],{"categories":3195},[164],{"categories":3197},[164],{"categories":3199},[185],{"categories":3201},[158],{"categories":3203},[],{"categories":3205},[164],{"categories":3207},[164],{"categories":3209},[221],{"categories":3211},[127],{"categories":3213},[164,167],{"categories":3215},[228,161],{"categories":3217},[164],{"categories":3219},[],{"categories":3221},[167],{"categories":3223},[],{"categories":3225},[221],{"categories":3227},[164],{"categories":3229},[],{"categories":3231},[164],{"categories":3233},[185],{"categories":3235},[],{"categories":3237},[167],{"categories":3239},[164],{"categories":3241},[],{"categories":3243},[127],{"categories":3245},[167],{"categories":3247},[164],{"categories":3249},[158],{"categories":3251},[167],{"categories":3253},[164],{"categories":3255},[],{"categories":3257},[253],{"categories":3259},[228],{"categories":3261},[161],{"categories":3263},[161],{"categories":3265},[158],{"categories":3267},[158],{"categories":3269},[164],{"categories":3271},[167],{"categories":3273},[164],{"categories":3275},[164],{"categories":3277},[158],{"categories":3279},[164],{"categories":3281},[228],{"categories":3283},[185],{"categories":3285},[164],{"categories":3287},[167],{"categories":3289},[164],{"categories":3291},[],{"categories":3293},[221],{"categories":3295},[],{"categories":3297},[221],{"categories":3299},[167],{"categories":3301},[158],{"categories":3303},[],{"categories":3305},[253],{"categories":3307},[164],{"categories":3309},[],{"categories":3311},[185],{"categories":3313},[167],{"categories":3315},[221],{"categories":3317},[164],{"categories":3319},[167],{"categories":3321},[221],{"categories":3323},[167],{"categories":3325},[185],{"categories":3327},[158],{"categories":3329},[185],{"categories":3331},[221],{"categories":3333},[164],{"categories":3335},[127],{"categories":3337},[164],{"categories":3339},[164],{"categories":3341},[164],{"categories":3343},[164],{"categories":3345},[164],{"categories":3347},[167],{"categories":3349},[164],{"categories":3351},[167],{"categories":3353},[164],{"categories":3355},[158],{"categories":3357},[164],{"categories":3359},[167],{"categories":3361},[127],{"categories":3363},[158],{"categories":3365},[167],{"categories":3367},[127],{"categories":3369},[],{"categories":3371},[164],{"categories":3373},[164],{"categories":3375},[221],{"categories":3377},[],{"categories":3379},[167],{"categories":3381},[228],{"categories":3383},[164],{"categories":3385},[185],{"categories":3387},[228],{"categories":3389},[167],{"categories":3391},[161],{"categories":3393},[161],{"categories":3395},[164],{"categories":3397},[158],{"categories":3399},[],{"categories":3401},[167],{"categories":3403},[164],{"categories":3405},[],{"categories":3407},[158],{"categories":3409},[164],{"categories":3411},[167],{"categories":3413},[167],{"categories":3415},[],{"categories":3417},[221],{"categories":3419},[221],{"categories":3421},[228],{"categories":3423},[127],{"categories":3425},[],{"categories":3427},[164],{"categories":3429},[167],{"categories":3431},[158],{"categories":3433},[164],{"categories":3435},[221],{"categories":3437},[158],{"categories":3439},[185],{"categories":3441},[185],{"categories":3443},[],{"categories":3445},[185],{"categories":3447},[167],{"categories":3449},[127],{"categories":3451},[214],{"categories":3453},[164],{"categories":3455},[],{"categories":3457},[185],{"categories":3459},[221],{"categories":3461},[161],{"categories":3463},[164],{"categories":3465},[158],{"categories":3467},[253],{"categories":3469},[158],{"categories":3471},[],{"categories":3473},[],{"categories":3475},[185],{"categories":3477},[],{"categories":3479},[167],{"categories":3481},[167],{"categories":3483},[167],{"categories":3485},[],{"categories":3487},[164],{"categories":3489},[],{"categories":3491},[185],{"categories":3493},[158],{"categories":3495},[127],{"categories":3497},[164],{"categories":3499},[185],{"categories":3501},[185],{"categories":3503},[],{"categories":3505},[185],{"categories":3507},[158],{"categories":3509},[164],{"categories":3511},[],{"categories":3513},[167],{"categories":3515},[167],{"categories":3517},[158],{"categories":3519},[],{"categories":3521},[],{"categories":3523},[],{"categories":3525},[127],{"categories":3527},[167],{"categories":3529},[164],{"categories":3531},[],{"categories":3533},[],{"categories":3535},[],{"categories":3537},[127],{"categories":3539},[],{"categories":3541},[164],{"categories":3543},[158],{"categories":3545},[],{"categories":3547},[],{"categories":3549},[127],{"categories":3551},[164],{"categories":3553},[185],{"categories":3555},[],{"categories":3557},[228],{"categories":3559},[185],{"categories":3561},[228],{"categories":3563},[164],{"categories":3565},[],{"categories":3567},[],{"categories":3569},[167],{"categories":3571},[],{"categories":3573},[],{"categories":3575},[167],{"categories":3577},[164],{"categories":3579},[],{"categories":3581},[167],{"categories":3583},[185],{"categories":3585},[164],{"categories":3587},[228],{"categories":3589},[214],{"categories":3591},[167],{"categories":3593},[167],{"categories":3595},[],{"categories":3597},[],{"categories":3599},[],{"categories":3601},[185],{"categories":3603},[],{"categories":3605},[],{"categories":3607},[127],{"categories":3609},[158],{"categories":3611},[],{"categories":3613},[161],{"categories":3615},[228],{"categories":3617},[164],{"categories":3619},[221],{"categories":3621},[158],{"categories":3623},[214],{"categories":3625},[161],{"categories":3627},[221],{"categories":3629},[221],{"categories":3631},[],{"categories":3633},[],{"categories":3635},[167],{"categories":3637},[158],{"categories":3639},[127],{"categories":3641},[158],{"categories":3643},[167],{"categories":3645},[253],{"categories":3647},[164],{"categories":3649},[158],{"categories":3651},[167],{"categories":3653},[],{"categories":3655},[164],{"categories":3657},[185],{"categories":3659},[221],{"categories":3661},[],{"categories":3663},[127],{"categories":3665},[185],{"categories":3667},[158],{"categories":3669},[167],{"categories":3671},[164],{"categories":3673},[161],{"categories":3675},[167,253],{"categories":3677},[167],{"categories":3679},[221],{"categories":3681},[164],{"categories":3683},[164],{"categories":3685},[214],{"categories":3687},[228],{"categories":3689},[167],{"categories":3691},[],{"categories":3693},[167],{"categories":3695},[164],{"categories":3697},[161],{"categories":3699},[],{"categories":3701},[],{"categories":3703},[164],{"categories":3705},[214],{"categories":3707},[164],{"categories":3709},[],{"categories":3711},[185],{"categories":3713},[],{"categories":3715},[185],{"categories":3717},[158],{"categories":3719},[221],{"categories":3721},[164],{"categories":3723},[167],{"categories":3725},[164],{"categories":3727},[164],{"categories":3729},[228],{"categories":3731},[221],{"categories":3733},[],{"categories":3735},[185],{"categories":3737},[164],{"categories":3739},[],{"categories":3741},[164],{"categories":3743},[167],{"categories":3745},[164],{"categories":3747},[167],{"categories":3749},[164],{"categories":3751},[164],{"categories":3753},[164],{"categories":3755},[164],{"categories":3757},[161],{"categories":3759},[],{"categories":3761},[170],{"categories":3763},[185],{"categories":3765},[164],{"categories":3767},[],{"categories":3769},[221],{"categories":3771},[164],{"categories":3773},[164],{"categories":3775},[164],{"categories":3777},[167],{"categories":3779},[185],{"categories":3781},[164],{"categories":3783},[164],{"categories":3785},[164],{"categories":3787},[161],{"categories":3789},[167],{"categories":3791},[127],{"categories":3793},[],{"categories":3795},[214],{"categories":3797},[164],{"categories":3799},[],{"categories":3801},[185],{"categories":3803},[228],{"categories":3805},[],{"categories":3807},[],{"categories":3809},[185],{"categories":3811},[185],{"categories":3813},[228],{"categories":3815},[158],{"categories":3817},[167],{"categories":3819},[167],{"categories":3821},[164],{"categories":3823},[161],{"categories":3825},[],{"categories":3827},[],{"categories":3829},[185],{"categories":3831},[214],{"categories":3833},[221],{"categories":3835},[167],{"categories":3837},[127],{"categories":3839},[214],{"categories":3841},[214],{"categories":3843},[],{"categories":3845},[185],{"categories":3847},[164],{"categories":3849},[164],{"categories":3851},[221],{"categories":3853},[],{"categories":3855},[185],{"categories":3857},[185],{"categories":3859},[185],{"categories":3861},[],{"categories":3863},[167],{"categories":3865},[164],{"categories":3867},[],{"categories":3869},[158],{"categories":3871},[161],{"categories":3873},[],{"categories":3875},[164],{"categories":3877},[164],{"categories":3879},[],{"categories":3881},[221],{"categories":3883},[],{"categories":3885},[],{"categories":3887},[],{"categories":3889},[],{"categories":3891},[164],{"categories":3893},[185],{"categories":3895},[],{"categories":3897},[],{"categories":3899},[164],{"categories":3901},[164],{"categories":3903},[164],{"categories":3905},[214],{"categories":3907},[164],{"categories":3909},[214],{"categories":3911},[],{"categories":3913},[214],{"categories":3915},[214],{"categories":3917},[253],{"categories":3919},[167],{"categories":3921},[221],{"categories":3923},[],{"categories":3925},[],{"categories":3927},[214],{"categories":3929},[221],{"categories":3931},[221],{"categories":3933},[221],{"categories":3935},[],{"categories":3937},[158],{"categories":3939},[221],{"categories":3941},[221],{"categories":3943},[158],{"categories":3945},[221],{"categories":3947},[161],{"categories":3949},[221],{"categories":3951},[221],{"categories":3953},[221],{"categories":3955},[214],{"categories":3957},[185],{"categories":3959},[185],{"categories":3961},[164],{"categories":3963},[221],{"categories":3965},[214],{"categories":3967},[253],{"categories":3969},[214],{"categories":3971},[214],{"categories":3973},[214],{"categories":3975},[],{"categories":3977},[161],{"categories":3979},[],{"categories":3981},[253],{"categories":3983},[221],{"categories":3985},[221],{"categories":3987},[221],{"categories":3989},[167],{"categories":3991},[185,161],{"categories":3993},[214],{"categories":3995},[],{"categories":3997},[],{"categories":3999},[214],{"categories":4001},[],{"categories":4003},[214],{"categories":4005},[185],{"categories":4007},[167],{"categories":4009},[],{"categories":4011},[221],{"categories":4013},[164],{"categories":4015},[127],{"categories":4017},[],{"categories":4019},[164],{"categories":4021},[],{"categories":4023},[185],{"categories":4025},[158],{"categories":4027},[214],{"categories":4029},[],{"categories":4031},[221],{"categories":4033},[185],[4035,4542,4693,4838],{"id":4036,"title":4037,"ai":4038,"body":4044,"categories":4514,"created_at":128,"date_modified":128,"description":71,"extension":129,"faq":128,"featured":130,"kicker_label":128,"meta":4515,"navigation":137,"path":4530,"published_at":128,"question":128,"scraped_at":4531,"seo":4532,"sitemap":4533,"source_id":4534,"source_name":4535,"source_type":145,"source_url":4536,"stem":4537,"tags":4538,"thumbnail_url":128,"tldr":4539,"tweet":128,"unknown_tags":4540,"__hash__":4541},"summaries\u002Fsummaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary.md","CSS Scroll-Driven Animations via Animation Timeline API",{"provider":7,"model":4039,"input_tokens":4040,"output_tokens":4041,"processing_time_ms":4042,"cost_usd":4043},"x-ai\u002Fgrok-4.1-fast",8497,1663,18977,0.00250825,{"type":14,"value":4045,"toc":4509},[4046,4050,4057,4144,4155,4196,4199,4203,4218,4264,4274,4328,4347,4354,4392,4395,4399,4410,4494,4506],[17,4047,4049],{"id":4048},"map-scroll-progress-to-keyframe-animations","Map Scroll Progress to Keyframe Animations",[22,4051,4052,4053,4056],{},"Drive CSS keyframe animations with an element's viewport position instead of duration by adding ",[26,4054,4055],{},"animation-timeline: view()",". This scrubs through keyframes from 0% (element bottom enters viewport) to 100% (element top exits viewport). For example:",[66,4058,4060],{"className":68,"code":4059,"language":70,"meta":71,"style":71},"@keyframes fadeIn {\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n}\n.elem {\n  animation: fadeIn;\n  animation-timeline: view();\n}\n",[26,4061,4062,4074,4093,4109,4113,4121,4130,4139],{"__ignoreMap":71},[75,4063,4064,4068,4072],{"class":77,"line":78},[75,4065,4067],{"class":4066},"szBVR","@keyframes",[75,4069,4071],{"class":4070},"s4XuR"," fadeIn",[75,4073,86],{"class":85},[75,4075,4076,4079,4082,4085,4087,4090],{"class":77,"line":89},[75,4077,4078],{"class":81},"  0%",[75,4080,4081],{"class":85}," { ",[75,4083,4084],{"class":92},"opacity",[75,4086,96],{"class":85},[75,4088,4089],{"class":92},"0",[75,4091,4092],{"class":85},"; }\n",[75,4094,4095,4098,4100,4102,4104,4107],{"class":77,"line":109},[75,4096,4097],{"class":81},"  100%",[75,4099,4081],{"class":85},[75,4101,4084],{"class":92},[75,4103,96],{"class":85},[75,4105,4106],{"class":92},"1",[75,4108,4092],{"class":85},[75,4110,4111],{"class":77,"line":134},[75,4112,112],{"class":85},[75,4114,4116,4119],{"class":77,"line":4115},5,[75,4117,4118],{"class":81},".elem",[75,4120,86],{"class":85},[75,4122,4124,4127],{"class":77,"line":4123},6,[75,4125,4126],{"class":92},"  animation",[75,4128,4129],{"class":85},": fadeIn;\n",[75,4131,4133,4136],{"class":77,"line":4132},7,[75,4134,4135],{"class":92},"  animation-timeline",[75,4137,4138],{"class":85},": view();\n",[75,4140,4142],{"class":77,"line":4141},8,[75,4143,112],{"class":85},[22,4145,4146,4147,4150,4151,4154],{},"Scrolling advances the animation proportionally to the element's viewport coverage, measured as a percentage (100% at full entry, 0% at full exit). Apply standard timing functions like ",[26,4148,4149],{},"cubic-bezier(0.15, 0.75, 0.35, 1)"," for ease-out effects or ",[26,4152,4153],{},"linear()"," for springs:",[66,4156,4158],{"className":68,"code":4157,"language":70,"meta":71,"style":71},".box {\n  animation: spin var(--spring);\n  animation-timeline: view();\n}\n",[26,4159,4160,4167,4186,4192],{"__ignoreMap":71},[75,4161,4162,4165],{"class":77,"line":78},[75,4163,4164],{"class":81},".box",[75,4166,86],{"class":85},[75,4168,4169,4171,4174,4177,4180,4183],{"class":77,"line":89},[75,4170,4126],{"class":92},[75,4172,4173],{"class":85},": spin ",[75,4175,4176],{"class":92},"var",[75,4178,4179],{"class":85},"(",[75,4181,4182],{"class":4070},"--spring",[75,4184,4185],{"class":85},");\n",[75,4187,4188,4190],{"class":77,"line":109},[75,4189,4135],{"class":92},[75,4191,4138],{"class":85},[75,4193,4194],{"class":77,"line":134},[75,4195,112],{"class":85},[22,4197,4198],{},"This leverages existing keyframe knowledge—no new syntax for basics—while avoiding JavaScript for simple scroll effects.",[17,4200,4202],{"id":4201},"control-animation-timing-with-ranges","Control Animation Timing with Ranges",[22,4204,4205,4206,4209,4210,4213,4214,4217],{},"Override default ",[26,4207,4208],{},"cover"," range (full viewport traversal) using ",[26,4211,4212],{},"animation-range"," to start\u002Fend at specific points. ",[26,4215,4216],{},"contain"," triggers only when fully in viewport, ideal for complete animations like offscreen slides:",[66,4219,4221],{"className":68,"code":4220,"language":70,"meta":71,"style":71},".shape {\n  animation: slideIn backwards;\n  animation-timeline: view();\n  animation-range: contain;\n}\n",[26,4222,4223,4230,4243,4249,4260],{"__ignoreMap":71},[75,4224,4225,4228],{"class":77,"line":78},[75,4226,4227],{"class":81},".shape",[75,4229,86],{"class":85},[75,4231,4232,4234,4237,4240],{"class":77,"line":89},[75,4233,4126],{"class":92},[75,4235,4236],{"class":85},": slideIn ",[75,4238,4239],{"class":92},"backwards",[75,4241,4242],{"class":85},";\n",[75,4244,4245,4247],{"class":77,"line":109},[75,4246,4135],{"class":92},[75,4248,4138],{"class":85},[75,4250,4251,4254,4256,4258],{"class":77,"line":134},[75,4252,4253],{"class":92},"  animation-range",[75,4255,96],{"class":85},[75,4257,4216],{"class":92},[75,4259,4242],{"class":85},[75,4261,4262],{"class":77,"line":4115},[75,4263,112],{"class":85},[22,4265,4266,4269,4270,4273],{},[26,4267,4268],{},"entry"," animates during top-to-bottom entry (perfect for fade-ins on images), ",[26,4271,4272],{},"exit"," during top-edge exit (fade-outs). Combine via comma-separated values:",[66,4275,4277],{"className":68,"code":4276,"language":70,"meta":71,"style":71},"img {\n  animation: fadeIn linear, fadeOut linear;\n  animation-timeline: view(), view();\n  animation-range: entry, exit;\n}\n",[26,4278,4279,4287,4304,4317,4324],{"__ignoreMap":71},[75,4280,4281,4285],{"class":77,"line":78},[75,4282,4284],{"class":4283},"s9eBZ","img",[75,4286,86],{"class":85},[75,4288,4289,4291,4294,4297,4300,4302],{"class":77,"line":89},[75,4290,4126],{"class":92},[75,4292,4293],{"class":85},": fadeIn ",[75,4295,4296],{"class":92},"linear",[75,4298,4299],{"class":85},", fadeOut ",[75,4301,4296],{"class":92},[75,4303,4242],{"class":85},[75,4305,4306,4308,4311,4314],{"class":77,"line":109},[75,4307,4135],{"class":92},[75,4309,4310],{"class":85},": view(), ",[75,4312,4313],{"class":92},"view",[75,4315,4316],{"class":85},"();\n",[75,4318,4319,4321],{"class":77,"line":134},[75,4320,4253],{"class":92},[75,4322,4323],{"class":85},": entry, exit;\n",[75,4325,4326],{"class":77,"line":4115},[75,4327,112],{"class":85},[22,4329,4330,4331,4334,4335,4338,4339,4342,4343,4346],{},"For precision, use percentages: ",[26,4332,4333],{},"animation-range: cover 0% cover 50%"," starts at first pixel entry, ends at viewport midpoint. Long-form ",[26,4336,4337],{},"animation-range-start: cover 0%; animation-range-end: cover 50%;"," offers clarity. Mix ranges like ",[26,4340,4341],{},"contain 0%"," to ",[26,4344,4345],{},"exit 50%"," for extended effects.",[22,4348,4349,4350,4353],{},"Use ",[26,4351,4352],{},"scroll()"," timeline for global progress, like fixed reading indicators:",[66,4355,4357],{"className":68,"code":4356,"language":70,"meta":71,"style":71},".readingIndicator {\n  animation: expand linear;\n  animation-timeline: scroll();\n}\n",[26,4358,4359,4366,4377,4388],{"__ignoreMap":71},[75,4360,4361,4364],{"class":77,"line":78},[75,4362,4363],{"class":81},".readingIndicator",[75,4365,86],{"class":85},[75,4367,4368,4370,4373,4375],{"class":77,"line":89},[75,4369,4126],{"class":92},[75,4371,4372],{"class":85},": expand ",[75,4374,4296],{"class":92},[75,4376,4242],{"class":85},[75,4378,4379,4381,4383,4386],{"class":77,"line":109},[75,4380,4135],{"class":92},[75,4382,96],{"class":85},[75,4384,4385],{"class":92},"scroll",[75,4387,4316],{"class":85},[75,4389,4390],{"class":77,"line":134},[75,4391,112],{"class":85},[22,4393,4394],{},"This scales a bar from 0 to total page scroll distance, though scrollbars often suffice.",[17,4396,4398],{"id":4397},"link-timelines-between-elements","Link Timelines Between Elements",[22,4400,4401,4402,4405,4406,4409],{},"Decouple tracking from animation: name a ",[26,4403,4404],{},"view-timeline"," on the trigger element, reference it elsewhere via ",[26,4407,4408],{},"timeline-scope"," on a shared ancestor.",[66,4411,4413],{"className":68,"code":4412,"language":70,"meta":71,"style":71},"main {\n  timeline-scope: --tracked-elem;\n}\n.content {\n  view-timeline: --tracked-elem;\n}\n.square {\n  animation: fadeIn backwards, fadeOut forwards;\n  animation-timeline: --tracked-elem, --tracked-elem;\n  animation-range: entry, exit;\n}\n",[26,4414,4415,4422,4430,4434,4441,4448,4452,4459,4474,4482,4489],{"__ignoreMap":71},[75,4416,4417,4420],{"class":77,"line":78},[75,4418,4419],{"class":4283},"main",[75,4421,86],{"class":85},[75,4423,4424,4427],{"class":77,"line":89},[75,4425,4426],{"class":92},"  timeline-scope",[75,4428,4429],{"class":85},": --tracked-elem;\n",[75,4431,4432],{"class":77,"line":109},[75,4433,112],{"class":85},[75,4435,4436,4439],{"class":77,"line":134},[75,4437,4438],{"class":81},".content",[75,4440,86],{"class":85},[75,4442,4443,4446],{"class":77,"line":4115},[75,4444,4445],{"class":92},"  view-timeline",[75,4447,4429],{"class":85},[75,4449,4450],{"class":77,"line":4123},[75,4451,112],{"class":85},[75,4453,4454,4457],{"class":77,"line":4132},[75,4455,4456],{"class":81},".square",[75,4458,86],{"class":85},[75,4460,4461,4463,4465,4467,4469,4472],{"class":77,"line":4141},[75,4462,4126],{"class":92},[75,4464,4293],{"class":85},[75,4466,4239],{"class":92},[75,4468,4299],{"class":85},[75,4470,4471],{"class":92},"forwards",[75,4473,4242],{"class":85},[75,4475,4477,4479],{"class":77,"line":4476},9,[75,4478,4135],{"class":92},[75,4480,4481],{"class":85},": --tracked-elem, --tracked-elem;\n",[75,4483,4485,4487],{"class":77,"line":4484},10,[75,4486,4253],{"class":92},[75,4488,4323],{"class":85},[75,4490,4492],{"class":77,"line":4491},11,[75,4493,112],{"class":85},[22,4495,4496,4497,4499,4500,4502,4503,4505],{},"Scroll on ",[26,4498,4438],{}," fades sticky ",[26,4501,4456],{},", even if not descendants—",[26,4504,4408],{}," propagates the named timeline. Limit: names are scoped to creator and descendants unless elevated.",[117,4507,4508],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":71,"searchDepth":89,"depth":89,"links":4510},[4511,4512,4513],{"id":4048,"depth":89,"text":4049},{"id":4201,"depth":89,"text":4202},{"id":4397,"depth":89,"text":4398},[127],{"content_references":4516,"triage":4527},[4517,4522],{"type":4518,"title":4519,"url":4520,"context":4521},"other","Whimsical Animations","https:\u002F\u002Fwhimsy.joshwcomeau.com\u002F","recommended",{"type":4523,"title":4524,"url":4525,"context":4526},"tool","Lipsum.com","https:\u002F\u002Fwww.lipsum.com\u002F","mentioned",{"relevance":134,"novelty":109,"quality":134,"actionability":134,"composite":4528,"reasoning":4529},3.8,"Category: Design & Frontend. The article provides practical insights into using the Animation Timeline API for scroll-driven animations, which directly addresses the needs of designers and developers looking to enhance UI\u002FUX. It includes specific code examples and techniques that can be immediately applied in projects.","\u002Fsummaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary","2026-05-03 17:02:04",{"title":4037,"description":71},{"loc":4530},"0541a873071e8673","Josh W. Comeau","https:\u002F\u002Fwww.joshwcomeau.com\u002Fanimation\u002Fscroll-driven-animations\u002F","summaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary",[149,150,70],"Replace time-based keyframes with scroll progress using animation-timeline: view() to trigger animations as elements enter\u002Fexit viewport; customize ranges like entry\u002Fexit for precise control without JavaScript.",[70],"H-OMxl4xx30p7NefpUpuI0olBbU-dSy34fNFMO-yhMk",{"id":4543,"title":4544,"ai":4545,"body":4550,"categories":4668,"created_at":128,"date_modified":128,"description":71,"extension":129,"faq":128,"featured":130,"kicker_label":128,"meta":4669,"navigation":137,"path":4676,"published_at":4677,"question":128,"scraped_at":4678,"seo":4679,"sitemap":4680,"source_id":4681,"source_name":4682,"source_type":4683,"source_url":4684,"stem":4685,"tags":4686,"thumbnail_url":4688,"tldr":4689,"tweet":4690,"unknown_tags":4691,"__hash__":4692},"summaries\u002Fsummaries\u002F7b3daa1294a0b558-5-underrated-css-properties-for-better-ui-control-summary.md","5 Underrated CSS Properties for Better UI Control",{"provider":7,"model":8,"input_tokens":4546,"output_tokens":4547,"processing_time_ms":4548,"cost_usd":4549},8135,605,3537,0.00294125,{"type":14,"value":4551,"toc":4664},[4552,4556,4613,4617],[17,4553,4555],{"id":4554},"advanced-layout-and-content-control","Advanced Layout and Content Control",[4557,4558,4559,4587],"ul",{},[4560,4561,4562,4566,4567,4570,4571,4574,4575,4578,4579,4582,4583,4586],"li",{},[4563,4564,4565],"strong",{},"CSS Counters:"," Use ",[26,4568,4569],{},"counter-reset"," on a parent element and ",[26,4572,4573],{},"counter-increment"," on children to generate dynamic numbering without manual HTML updates. This is ideal for lists or sections that may change order. You can use the ",[26,4576,4577],{},"content"," property in a ",[26,4580,4581],{},"::before"," pseudo-element to display the counter, and even add ",[26,4584,4585],{},"alt"," text to the content string to ensure the visual numbering is ignored by screen readers if it is purely decorative.",[4560,4588,4589,4592,4593,4596,4597,4600,4601,4604,4605,4608,4609,4612],{},[4563,4590,4591],{},"Multi-Column Layouts:"," The ",[26,4594,4595],{},"column-width"," property allows text to flow into columns automatically based on a minimum width (e.g., ",[26,4598,4599],{},"15ch","). By combining this with ",[26,4602,4603],{},"column-count",", you can set a maximum number of columns (e.g., ",[26,4606,4607],{},"3 15ch","), ensuring the layout remains responsive without becoming overly narrow or wide. Use ",[26,4610,4611],{},"break-inside: avoid"," on child elements like cards to prevent awkward content splits across columns.",[17,4614,4616],{"id":4615},"typography-and-interaction-refinements","Typography and Interaction Refinements",[4557,4618,4619,4628,4638],{},[4560,4620,4621,4592,4624,4627],{},[4563,4622,4623],{},"User-Select:",[26,4625,4626],{},"user-select: none"," property prevents users from highlighting text. While historically used to prevent accidental selection during drag-and-drop, it is now most useful for UI elements like buttons where text selection is unnecessary and potentially distracting. Use this sparingly to avoid frustrating users who may want to copy text.",[4560,4629,4630,4633,4634,4637],{},[4563,4631,4632],{},"Tabular Numbers:"," When displaying numerical data in non-monospace fonts, ",[26,4635,4636],{},"font-variant-numeric: tabular-nums"," forces numbers to have uniform widths. This prevents layout shifting and improves readability in tables or dashboards where vertical alignment of digits is critical.",[4560,4639,4640,4643,4644,4647,4648,4651,4652,4655,4656,4659,4660,4663],{},[4563,4641,4642],{},"Text Decoration Styling:"," Modern CSS allows granular control over underlines beyond simple toggling. You can use ",[26,4645,4646],{},"text-decoration-thickness"," to adjust the weight of the line, ",[26,4649,4650],{},"text-underline-offset"," to control the distance from the text, and ",[26,4653,4654],{},"text-decoration-style"," (e.g., ",[26,4657,4658],{},"wavy",", ",[26,4661,4662],{},"dotted",") to change the appearance. These properties are animatable, making them excellent for interactive hover states on links.",{"title":71,"searchDepth":89,"depth":89,"links":4665},[4666,4667],{"id":4554,"depth":89,"text":4555},{"id":4615,"depth":89,"text":4616},[127],{"content_references":4670,"triage":4674},[4671],{"type":4523,"title":4672,"url":4673,"context":4521},"CSS Demystified","https:\u002F\u002Fcssdemystified.com\u002F",{"relevance":134,"novelty":109,"quality":134,"actionability":134,"composite":4528,"reasoning":4675},"Category: Design & Frontend. The article provides practical CSS properties that can enhance UI control, addressing the audience's need for actionable design techniques. It includes specific examples like using CSS counters and multi-column layouts, which are directly applicable to building better user interfaces.","\u002Fsummaries\u002F7b3daa1294a0b558-5-underrated-css-properties-for-better-ui-control-summary","2026-05-20 13:00:02","2026-05-20 15:00:20",{"title":4544,"description":71},{"loc":4676},"7b3daa1294a0b558","Kevin Powell","video","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=1qduzphMJHs","summaries\u002F7b3daa1294a0b558-5-underrated-css-properties-for-better-ui-control-summary",[149,150,4687,70],"web-performance","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F1qduzphMJHs\u002Fhqdefault.jpg","Improve your CSS layouts and typography with these five practical properties: counters for auto-numbering, user-select for interaction control, tabular-nums for data alignment, multi-column for responsive text, and advanced text-decoration styling.","A quick, practical overview of five CSS properties that solve specific layout or styling headaches:\n\n* [CSS Counters](https:\u002F\u002Fyoutu.be\u002FtnSzkAiiQ4w) — using `counter-reset` and `counter-increment` to auto-number elements.\n* `user-select: none` — preventing text selection on UI elements like buttons.\n* `font-variant-numeric: tabular-nums` — forcing numbers to align vertically by giving them uniform widths.\n* [CSS Multi-column](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=nJfrThH92WU) — creating responsive text columns without complex grid or flex layouts.\n* [Text decoration styling](https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fgap-decorations-stable) — using properties like `text-decoration-thickness` and `text-underline-offset` for better link styling.",[70],"lXIxRmUcPKDMnBBccowHFFU6lfOsfsrB-RXm63IrwVY",{"id":4694,"title":4695,"ai":4696,"body":4701,"categories":4796,"created_at":128,"date_modified":128,"description":71,"extension":129,"faq":128,"featured":130,"kicker_label":128,"meta":4797,"navigation":137,"path":4823,"published_at":4824,"question":128,"scraped_at":4825,"seo":4826,"sitemap":4827,"source_id":4828,"source_name":4682,"source_type":4683,"source_url":4829,"stem":4830,"tags":4831,"thumbnail_url":4833,"tldr":4834,"tweet":4835,"unknown_tags":4836,"__hash__":4837},"summaries\u002Fsummaries\u002Fd64f00928ca0913f-bulletproof-css-color-systems-with-contrast-color-summary.md","Bulletproof CSS Color Systems with contrast-color()",{"provider":7,"model":4039,"input_tokens":4697,"output_tokens":4698,"processing_time_ms":4699,"cost_usd":4700},7048,1824,25620,0.00181475,{"type":14,"value":4702,"toc":4791},[4703,4707,4722,4725,4729,4748,4762,4766,4784],[17,4704,4706],{"id":4705},"auto-contrast-text-without-manual-declarations","Auto-Contrast Text Without Manual Declarations",[22,4708,4709,4710,4713,4714,4717,4718,4721],{},"CSS ",[26,4711,4712],{},"contrast-color()"," automatically selects white or black text for optimal readability against any background, eliminating hardcoded colors. Apply it like ",[26,4715,4716],{},"color: contrast-color(var(--bg-color));"," on buttons or components. For a neutral-900 background (near white), text switches to black; on rebecca-purple or firebrick hover states, it flips to white. This works because the function computes contrast against the exact background var passed in, ensuring WCAG-compliant ratios without extra logic. Limitation: it only chooses between white or black—no custom palettes yet, unlike the deprecated ",[26,4719,4720],{},"color-contrast()"," spec which allowed fallback lists.",[22,4723,4724],{},"Trade-off: Binary choice simplifies implementation but may not suit branded designs needing specific accents; monitor browser support as it's nearing baseline availability.",[17,4726,4728],{"id":4727},"private-properties-for-themed-fallbacks","Private Properties for Themed Fallbacks",[22,4730,4731,4732,4735,4736,4739,4740,4743,4744,4747],{},"Define private custom properties (prefixed with ",[26,4733,4734],{},"_",") to create robust theming layers: ",[26,4737,4738],{},"--_button-surface: var(--button-surface, white);",". The underscore makes it 'private'—ignored by consumers—while providing fallbacks. Set backgrounds as ",[26,4741,4742],{},"background-color: var(--_button-surface);"," and ",[26,4745,4746],{},"color: contrast-color(var(--_button-surface));",".",[22,4749,4750,4751,4743,4754,4757,4758,4761],{},"For variants, override publicly: ",[26,4752,4753],{},"[data-theme=\"primary\"] { --button-surface: var(--primary); }",[26,4755,4756],{},"[data-theme=\"accent\"] { --button-surface: var(--accent); }",". Hover uses ",[26,4759,4760],{},"--_button-surface-hover: var(--button-surface-hover, firebrick);",". This cascades cleanly: undefined vars fall back (e.g., to white\u002Ffirebrick), then theme overrides propagate, auto-adjusting text contrast. Benefits: Centralizes color logic in CSS vars, scales to web components, and avoids repetition across states.",[17,4763,4765],{"id":4764},"dynamic-hovers-and-lightdark-mode-integration","Dynamic Hovers and Light\u002FDark Mode Integration",[22,4767,4768,4769,4772,4773,4776,4777,4780,4781,4783],{},"Generate hover states with ",[26,4770,4771],{},"color-mix(in srgb, var(--primary) 50%, var(--neutral-100));",", blending theme colors with neutrals for subtle shifts (e.g., 20-90% mix ratios control darkening\u002Flightening). Pair with ",[26,4774,4775],{},"light-dark()"," on neutrals: ",[26,4778,4779],{},"--neutral-900: light-dark(black, white);"," ensures hovers adapt—dark mode darkens primaries, light mode lightens them—while ",[26,4782,4712],{}," flips text accordingly.",[22,4785,4786,4787,4790],{},"Example outcomes: Primary button hovers darken via neutral mix; accent follows suit. Toggle ",[26,4788,4789],{},"prefers-color-scheme"," in dev tools to test: neutrals swap, mixes recompute, text contrasts update live. This builds 'bulletproof' systems handling arbitrary themes without breakage, ideal for design systems where colors evolve.",{"title":71,"searchDepth":89,"depth":89,"links":4792},[4793,4794,4795],{"id":4705,"depth":89,"text":4706},{"id":4727,"depth":89,"text":4728},{"id":4764,"depth":89,"text":4765},[127],{"content_references":4798,"triage":4821},[4799,4802,4805,4809,4812,4815,4818],{"type":4518,"title":4800,"url":4801,"context":4521},"light-dark() video","https:\u002F\u002Fyoutube.com\u002Fshorts\u002F1-yzpfTTGIg",{"type":4518,"title":4803,"url":4804,"context":4521},"color-mix() video","https:\u002F\u002Fyoutu.be\u002FI9zHX-jSKpA",{"type":4806,"title":4807,"url":4808,"context":4526},"event","CSS Day","https:\u002F\u002Fcssday.nl\u002F",{"type":4806,"title":4810,"url":4811,"context":4526},"ZurichJS","https:\u002F\u002Fconf.zurichjs.com\u002F",{"type":4523,"title":4813,"url":4814,"context":4526},"CodePen","https:\u002F\u002Fcodepen.io\u002F",{"type":4523,"title":4816,"url":4817,"context":4526},"Zed","https:\u002F\u002Fzed.dev\u002F",{"type":4523,"title":4819,"url":4820,"context":4526},"VS Code","https:\u002F\u002Fcode.visualstudio.com\u002F",{"relevance":134,"novelty":109,"quality":134,"actionability":134,"composite":4528,"reasoning":4822},"Category: Design & Frontend. The article provides practical insights into using CSS functions for creating accessible color systems, addressing a specific pain point for designers and developers in maintaining readability across themes. It includes actionable techniques like using `contrast-color()` and private properties for theming, which can be directly applied in frontend development.","\u002Fsummaries\u002Fd64f00928ca0913f-bulletproof-css-color-systems-with-contrast-color-summary","2026-05-13 13:00:38","2026-05-13 19:00:32",{"title":4695,"description":71},{"loc":4823},"d64f00928ca0913f","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=JEJbSGtZxOw","summaries\u002Fd64f00928ca0913f-bulletproof-css-color-systems-with-contrast-color-summary",[149,4832,150,70],"design-systems","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FJEJbSGtZxOw\u002Fhqdefault.jpg","Use contrast-color() to auto-pick white or black text for any background, combined with private custom properties for fallbacks and color-mix() for dynamic hovers that adapt to light\u002Fdark modes.","Explains CSS `contrast-color()` for auto-switching text to black\u002Fwhite against any background, with a button demo starting basic then scaling to themeable vars via Lea Verou's private-property pattern (`--_button-surface`). References prior [light-dark()](https:\u002F\u002Fyoutube.com\u002Fshorts\u002F1-yzpfTTGIg) and [color-mix()](https:\u002F\u002Fyoutu.be\u002FI9zHX-jSKpA) videos.",[70],"U9Alj68lZz3PISIslY_1G8DZAUuS17WYG1jXGzjLs4s",{"id":4839,"title":4840,"ai":4841,"body":4846,"categories":4999,"created_at":128,"date_modified":128,"description":71,"extension":129,"faq":128,"featured":130,"kicker_label":128,"meta":5000,"navigation":137,"path":5011,"published_at":5012,"question":128,"scraped_at":5013,"seo":5014,"sitemap":5015,"source_id":5016,"source_name":4682,"source_type":145,"source_url":5017,"stem":5018,"tags":5019,"thumbnail_url":128,"tldr":5021,"tweet":128,"unknown_tags":5022,"__hash__":5023},"summaries\u002Fsummaries\u002Fa5398448b0fad357-recreate-css-battles-251-253-in-15min-with-divs-sh-summary.md","Recreate CSS Battles 251-253 in 15min with Divs, Shadows, Borders",{"provider":7,"model":4039,"input_tokens":4842,"output_tokens":4843,"processing_time_ms":4844,"cost_usd":4845},9519,1788,37716,0.0027753,{"type":14,"value":4847,"toc":4994},[4848,4852,4867,4874,4878,4904,4907,4911,4954,4991],[17,4849,4851],{"id":4850},"precise-measurement-and-centering-speeds-up-puzzle-solving","Precise Measurement and Centering Speeds Up Puzzle Solving",[22,4853,4854,4855,4858,4859,4862,4863,4866],{},"Start by using CSS Battle's measurement tool for exact pixel values—e.g., widths from 150-310px become 160px, heights 30-130px become 100px. Center elements universally with ",[26,4856,4857],{},"margin-inline: auto"," on divs, avoiding per-element tweaks. Set ",[26,4860,4861],{},"body { background: #exact-color; display: grid; place-items: center; }"," for vertical centering. Position relative on containers enables absolute pseudos without magic numbers; e.g., ",[26,4864,4865],{},"left: 190px"," for protrusions aligns faster than trial-error. This shaved seconds off Battle 1, hitting 100% match in 5:40 after one submit (99.7% → adjust middleL width 140px, bottom 160px).",[22,4868,4869,4870,4873],{},"Trade-off: Short class names (#top, #middle, #middleL, #bottom) type faster than semantic ones, but add ",[26,4871,4872],{},"border: 2px solid"," temporarily to visualize bounds—remove post-alignment to avoid outline diffs.",[17,4875,4877],{"id":4876},"layered-blocks-via-stacked-divs-and-pseudo-overlays","Layered Blocks via Stacked Divs and Pseudo Overlays",[22,4879,4880,4881,4884,4885,4888,4889,4892,4893,4896,4897,4899,4900,4903],{},"For Battle 251 (chunky red\u002Fblue stack with side tab): Use 4 nested divs in ",[26,4882,4883],{},".container",". Heights: top 100px, middle\u002FmiddleL 20px\u002F40px, bottom 60px; widths all ~150px (top\u002Fmiddle 150px, middleL 150px, bottom 160px post-tweak). ",[26,4886,4887],{},"border-radius: 100vw 100vw 0 0"," on top for semicircle. Pseudo ",[26,4890,4891],{},"::after"," on top: ",[26,4894,4895],{},"content: ''; position: absolute; left: 190px; width: 20px; height: 100%; background: #lighter-blue"," creates overhang. All share ",[26,4898,4857],{},". Alternative: ",[26,4901,4902],{},"position: relative; inset: 0; margin-inline: auto"," on pseudo skips manual left positioning.",[22,4905,4906],{},"Outcome: Reliable for irregular stacks; scales to complex shapes without extra HTML.",[17,4908,4910],{"id":4909},"rings-and-diamonds-box-shadows-borders-body-pseudos","Rings and Diamonds: Box-Shadows, Borders, Body Pseudos",[22,4912,4913,4914,4659,4917,4920,4921,4924,4925,4928,4929,4659,4932,4659,4935,4938,4939,4941,4942,4945,4946,4949,4950,4953],{},"Battle 252 (purple ring with yellow\u002Fred shadows + teal cap): Outer div (220px aspect-ratio:1, ",[26,4915,4916],{},"border-radius: 100vw",[26,4918,4919],{},"margin: auto",") holds inner grid (80px height, ",[26,4922,4923],{},"place-items: center","). Three ",[26,4926,4927],{},"box-shadow","s simulate rings: ",[26,4930,4931],{},"0 0 0 20px #red",[26,4933,4934],{},"0 0 0 50px #yellow",[26,4936,4937],{},"0 0 0 70px #purple"," (drop last if unneeded). ",[26,4940,4891],{}," on outer (",[26,4943,4944],{},"height: 50%; width: 100%; top: 0; position: absolute; overflow: hidden",") clips teal half-circle. Got 99.9%—pixel diffs on edges common; fix via ",[26,4947,4948],{},"rgb(0 0 0 \u002F 0)"," over ",[26,4951,4952],{},"transparent"," avoids trailing comma issues.",[22,4955,4956,4957,4960,4961,4964,4965,4968,4969,4972,4973,4743,4976,4978,4979,4982,4983,4986,4987,4990],{},"Battle 253 (diamond bar with circular ends): Single 170px div (",[26,4958,4959],{},"aspect-ratio: 1",", rotate ",[26,4962,4963],{},"-45deg","), ",[26,4966,4967],{},"border: 40px transparent solid; border-top-color: #blue; border-bottom-color: #blue",". Background fills center. Caps via ",[26,4970,4971],{},"::before, ::after"," on ",[26,4974,4975],{},"body",[26,4977,63],{}," (nesting): 40px circles (",[26,4980,4981],{},"aspect-ratio: 1; border-radius: 100vw","), positioned absolutely—e.g., body::before left:75px top:125px; html::before left:180px top:235px; afters at left:175px\u002F285px top:25px\u002F130px. ",[26,4984,4985],{},"z-index: 99999"," layers over rotation. Flex on body (",[26,4988,4989],{},"align-items: center",") centers vertically.",[22,4992,4993],{},"Trade-off: Body\u002Fhtml pseudos handle rotation offsets but require 4 rules (2 per); SVGs easier but disallowed. Total time ~15min across three.",{"title":71,"searchDepth":89,"depth":89,"links":4995},[4996,4997,4998],{"id":4850,"depth":89,"text":4851},{"id":4876,"depth":89,"text":4877},{"id":4909,"depth":89,"text":4910},[127],{"content_references":5001,"triage":5008},[5002,5005,5006,5007],{"type":4523,"title":5003,"url":5004,"context":4526},"CSS Battles","https:\u002F\u002Fcssbattle.dev\u002Fbattle\u002F38",{"type":4523,"title":4813,"url":4814,"context":4526},{"type":4523,"title":4816,"url":4817,"context":4526},{"type":4523,"title":4819,"url":4820,"context":4526},{"relevance":109,"novelty":89,"quality":134,"actionability":109,"composite":5009,"reasoning":5010},3.05,"Category: Design & Frontend. The article provides practical CSS techniques for solving specific design challenges, which aligns with the interests of the target audience. However, it lacks broader application to AI-powered product development and does not address pain points related to integrating AI into design workflows.","\u002Fsummaries\u002Fa5398448b0fad357-recreate-css-battles-251-253-in-15min-with-divs-sh-summary","2026-05-06 13:00:44","2026-05-06 16:12:54",{"title":4840,"description":71},{"loc":5011},"51a321e76d6f8b1b","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=MVsG4agTS94","summaries\u002Fa5398448b0fad357-recreate-css-battles-251-253-in-15min-with-divs-sh-summary",[149,150,5020,70],"coding","Kevin Powell solves CSS Battles 251-253 live under time pressure: stacked divs\u002Fpseudos (5:40, 100%), ring shadows (4:16, 99.9%), rotated border diamond + cap circles. Measure precisely, center with margin-inline:auto, use body\u002Fhtml pseudos for overlays.",[70],"MhdsVntYYwFhwJpwt35_O3MFr1Z6hBzKYocVGlr4Vao"]