[{"data":1,"prerenderedAt":3773},["ShallowReactive",2],{"page-\u002Fcss\u002F22-exercises-and-projects":3},{"id":4,"title":5,"body":6,"description":3766,"extension":3767,"meta":3768,"navigation":78,"path":3769,"seo":3770,"stem":3771,"__hash__":3772},"content\u002Fcss\u002F22-exercises-and-projects.md","22 — Exercises & Projects: Production CSS Systems",{"type":7,"value":8,"toc":3755},"minimark",[9,13,38,43,49,918,922,1207,1753,1757,2161,2165,2773,2777,3168,3172,3544,3548,3600,3611,3615,3737,3741,3751],[10,11,5],"h1",{"id":12},"_22-exercises-projects-production-css-systems",[14,15,16,17,21,22,25,26,29,30,33,34,37],"p",{},"Seven projects progressing from a reusable reset to a full capstone landing page. Each applies the code-first patterns from chapters 1–21: ",[18,19,20],"code",{},"@layer"," architecture, BEM, fluid CSS, container queries, logical properties, ",[18,23,24],{},":focus-visible",", ",[18,27,28],{},"prefers-reduced-motion",", and ",[18,31,32],{},"transform","\u002F",[18,35,36],{},"opacity"," animations.",[39,40,42],"h2",{"id":41},"project-1-layered-reset-token-system","Project 1 — Layered Reset + Token System",[14,44,45,46,48],{},"A reusable ",[18,47,20],{}," reset + token + base system. Drop into any project.",[50,51,53],"code-wrapper",{"language":52},"css",[54,55,59],"pre",{"className":56,"code":57,"language":52,"meta":58,"style":58},"language-css shiki shiki-themes github-light github-dark","@layer reset, tokens, base, components, utilities;\n\n@layer reset {\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }  \u002F* responsive media *\u002F\n  input, button, textarea, select { font: inherit; }  \u002F* form elements inherit font *\u002F\n  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }  \u002F* prevent overflow from long words *\u002F\n}\n\n@layer tokens {\n  :root {\n    --c-bg: #fff; --c-fg: #333; --c-primary: oklch(0.62 0.18 245);\n    --font-sans: system-ui, -apple-system, sans-serif;\n    --space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 2rem;\n    --radius: 8px;\n  }\n  @media (prefers-color-scheme: dark) { :root { --c-bg: #1a1a1a; --c-fg: #eee; --c-primary: oklch(0.7 0.16 245); } }\n  [data-theme=\"dark\"] { --c-bg: #1a1a1a; --c-fg: #eee; }  \u002F* manual toggle *\u002F\n}\n\n@layer base {\n  body {\n    font-family: var(--font-sans);\n    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);  \u002F* fluid, bounded *\u002F\n    line-height: 1.5;  \u002F* unitless — scales per-element *\u002F\n    background: var(--c-bg); color: var(--c-fg);\n  }\n  h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.2; }\n  h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); line-height: 1.3; }\n  a { color: var(--c-primary); }\n  :focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }  \u002F* keyboard-only focus *\u002F\n}\n\n@layer utilities {\n  .u-stack > * + * { margin-block-start: var(--space-3); }  \u002F* lobotomized owl *\u002F\n}\n","",[18,60,61,73,80,88,147,203,239,288,294,299,307,316,363,387,439,455,461,513,551,556,561,569,577,595,641,658,688,693,746,796,817,860,865,870,878,913],{"__ignoreMap":58},[62,63,66,69],"span",{"class":64,"line":65},"line",1,[62,67,20],{"class":68},"svdQ7",[62,70,72],{"class":71},"ssxIu"," reset, tokens, base, components, utilities;\n",[62,74,76],{"class":64,"line":75},2,[62,77,79],{"emptyLinePlaceholder":78},true,"\n",[62,81,83,85],{"class":64,"line":82},3,[62,84,20],{"class":68},[62,86,87],{"class":71}," reset {\n",[62,89,91,95,97,100,104,106,108,111,114,118,121,124,127,130,132,135,137,140,142,144],{"class":64,"line":90},4,[62,92,94],{"class":93},"sk71V","  *",[62,96,25],{"class":71},[62,98,99],{"class":93},"*",[62,101,103],{"class":102},"sIsaT","::before",[62,105,25],{"class":71},[62,107,99],{"class":93},[62,109,110],{"class":102},"::after",[62,112,113],{"class":71}," { ",[62,115,117],{"class":116},"snvgF","box-sizing",[62,119,120],{"class":71},": ",[62,122,123],{"class":116},"border-box",[62,125,126],{"class":71},"; ",[62,128,129],{"class":116},"margin",[62,131,120],{"class":71},[62,133,134],{"class":116},"0",[62,136,126],{"class":71},[62,138,139],{"class":116},"padding",[62,141,120],{"class":71},[62,143,134],{"class":116},[62,145,146],{"class":71},"; }\n",[62,148,150,153,155,158,160,163,165,168,170,173,175,178,180,183,185,188,190,193,196,199],{"class":64,"line":149},5,[62,151,152],{"class":93},"  img",[62,154,25],{"class":71},[62,156,157],{"class":93},"picture",[62,159,25],{"class":71},[62,161,162],{"class":93},"video",[62,164,25],{"class":71},[62,166,167],{"class":93},"canvas",[62,169,25],{"class":71},[62,171,172],{"class":93},"svg",[62,174,113],{"class":71},[62,176,177],{"class":116},"display",[62,179,120],{"class":71},[62,181,182],{"class":116},"block",[62,184,126],{"class":71},[62,186,187],{"class":116},"max-inline-size",[62,189,120],{"class":71},[62,191,192],{"class":116},"100",[62,194,195],{"class":68},"%",[62,197,198],{"class":71},"; }  ",[62,200,202],{"class":201},"sdCPZ","\u002F* responsive media *\u002F\n",[62,204,206,209,211,214,216,219,221,224,226,229,231,234,236],{"class":64,"line":205},6,[62,207,208],{"class":93},"  input",[62,210,25],{"class":71},[62,212,213],{"class":93},"button",[62,215,25],{"class":71},[62,217,218],{"class":93},"textarea",[62,220,25],{"class":71},[62,222,223],{"class":93},"select",[62,225,113],{"class":71},[62,227,228],{"class":116},"font",[62,230,120],{"class":71},[62,232,233],{"class":116},"inherit",[62,235,198],{"class":71},[62,237,238],{"class":201},"\u002F* form elements inherit font *\u002F\n",[62,240,242,245,247,249,251,253,255,258,260,263,265,268,270,273,275,278,280,283,285],{"class":64,"line":241},7,[62,243,244],{"class":93},"  p",[62,246,25],{"class":71},[62,248,10],{"class":93},[62,250,25],{"class":71},[62,252,39],{"class":93},[62,254,25],{"class":71},[62,256,257],{"class":93},"h3",[62,259,25],{"class":71},[62,261,262],{"class":93},"h4",[62,264,25],{"class":71},[62,266,267],{"class":93},"h5",[62,269,25],{"class":71},[62,271,272],{"class":93},"h6",[62,274,113],{"class":71},[62,276,277],{"class":116},"overflow-wrap",[62,279,120],{"class":71},[62,281,282],{"class":116},"break-word",[62,284,198],{"class":71},[62,286,287],{"class":201},"\u002F* prevent overflow from long words *\u002F\n",[62,289,291],{"class":64,"line":290},8,[62,292,293],{"class":71},"}\n",[62,295,297],{"class":64,"line":296},9,[62,298,79],{"emptyLinePlaceholder":78},[62,300,302,304],{"class":64,"line":301},10,[62,303,20],{"class":68},[62,305,306],{"class":71}," tokens {\n",[62,308,310,313],{"class":64,"line":309},11,[62,311,312],{"class":102},"  :root",[62,314,315],{"class":71}," {\n",[62,317,319,323,325,328,330,333,335,338,340,343,345,348,351,354,357,360],{"class":64,"line":318},12,[62,320,322],{"class":321},"sCrzJ","    --c-bg",[62,324,120],{"class":71},[62,326,327],{"class":116},"#fff",[62,329,126],{"class":71},[62,331,332],{"class":321},"--c-fg",[62,334,120],{"class":71},[62,336,337],{"class":116},"#333",[62,339,126],{"class":71},[62,341,342],{"class":321},"--c-primary",[62,344,120],{"class":71},[62,346,347],{"class":116},"oklch",[62,349,350],{"class":71},"(",[62,352,353],{"class":116},"0.62",[62,355,356],{"class":116}," 0.18",[62,358,359],{"class":116}," 245",[62,361,362],{"class":71},");\n",[62,364,366,369,371,374,376,379,381,384],{"class":64,"line":365},13,[62,367,368],{"class":321},"    --font-sans",[62,370,120],{"class":71},[62,372,373],{"class":116},"system-ui",[62,375,25],{"class":71},[62,377,378],{"class":116},"-apple-system",[62,380,25],{"class":71},[62,382,383],{"class":116},"sans-serif",[62,385,386],{"class":71},";\n",[62,388,390,393,395,398,401,403,406,408,411,413,415,418,420,423,425,427,430,432,435,437],{"class":64,"line":389},14,[62,391,392],{"class":321},"    --space-1",[62,394,120],{"class":71},[62,396,397],{"class":116},".25",[62,399,400],{"class":68},"rem",[62,402,126],{"class":71},[62,404,405],{"class":321},"--space-2",[62,407,120],{"class":71},[62,409,410],{"class":116},".5",[62,412,400],{"class":68},[62,414,126],{"class":71},[62,416,417],{"class":321},"--space-3",[62,419,120],{"class":71},[62,421,422],{"class":116},"1",[62,424,400],{"class":68},[62,426,126],{"class":71},[62,428,429],{"class":321},"--space-4",[62,431,120],{"class":71},[62,433,434],{"class":116},"2",[62,436,400],{"class":68},[62,438,386],{"class":71},[62,440,442,445,447,450,453],{"class":64,"line":441},15,[62,443,444],{"class":321},"    --radius",[62,446,120],{"class":71},[62,448,449],{"class":116},"8",[62,451,452],{"class":68},"px",[62,454,386],{"class":71},[62,456,458],{"class":64,"line":457},16,[62,459,460],{"class":71},"  }\n",[62,462,464,467,470,473,475,478,480,483,485,487,489,492,494,496,498,500,502,505,508,510],{"class":64,"line":463},17,[62,465,466],{"class":68},"  @media",[62,468,469],{"class":71}," (prefers-color-scheme: dark) { ",[62,471,472],{"class":102},":root",[62,474,113],{"class":71},[62,476,477],{"class":321},"--c-bg",[62,479,120],{"class":71},[62,481,482],{"class":116},"#1a1a1a",[62,484,126],{"class":71},[62,486,332],{"class":321},[62,488,120],{"class":71},[62,490,491],{"class":116},"#eee",[62,493,126],{"class":71},[62,495,342],{"class":321},[62,497,120],{"class":71},[62,499,347],{"class":116},[62,501,350],{"class":71},[62,503,504],{"class":116},"0.7",[62,506,507],{"class":116}," 0.16",[62,509,359],{"class":116},[62,511,512],{"class":71},"); } }\n",[62,514,516,519,522,525,529,532,534,536,538,540,542,544,546,548],{"class":64,"line":515},18,[62,517,518],{"class":71},"  [",[62,520,521],{"class":102},"data-theme",[62,523,524],{"class":68},"=",[62,526,528],{"class":527},"sJ6F3","\"dark\"",[62,530,531],{"class":71},"] { ",[62,533,477],{"class":321},[62,535,120],{"class":71},[62,537,482],{"class":116},[62,539,126],{"class":71},[62,541,332],{"class":321},[62,543,120],{"class":71},[62,545,491],{"class":116},[62,547,198],{"class":71},[62,549,550],{"class":201},"\u002F* manual toggle *\u002F\n",[62,552,554],{"class":64,"line":553},19,[62,555,293],{"class":71},[62,557,559],{"class":64,"line":558},20,[62,560,79],{"emptyLinePlaceholder":78},[62,562,564,566],{"class":64,"line":563},21,[62,565,20],{"class":68},[62,567,568],{"class":71}," base {\n",[62,570,572,575],{"class":64,"line":571},22,[62,573,574],{"class":93},"  body",[62,576,315],{"class":71},[62,578,580,583,585,588,590,593],{"class":64,"line":579},23,[62,581,582],{"class":116},"    font-family",[62,584,120],{"class":71},[62,586,587],{"class":116},"var",[62,589,350],{"class":71},[62,591,592],{"class":321},"--font-sans",[62,594,362],{"class":71},[62,596,598,601,603,606,608,610,612,614,617,619,622,625,628,630,633,635,638],{"class":64,"line":597},24,[62,599,600],{"class":116},"    font-size",[62,602,120],{"class":71},[62,604,605],{"class":116},"clamp",[62,607,350],{"class":71},[62,609,422],{"class":116},[62,611,400],{"class":68},[62,613,25],{"class":71},[62,615,616],{"class":116},"0.9",[62,618,400],{"class":68},[62,620,621],{"class":321}," +",[62,623,624],{"class":116}," 0.5",[62,626,627],{"class":68},"vw",[62,629,25],{"class":71},[62,631,632],{"class":116},"1.125",[62,634,400],{"class":68},[62,636,637],{"class":71},");  ",[62,639,640],{"class":201},"\u002F* fluid, bounded *\u002F\n",[62,642,644,647,649,652,655],{"class":64,"line":643},25,[62,645,646],{"class":116},"    line-height",[62,648,120],{"class":71},[62,650,651],{"class":116},"1.5",[62,653,654],{"class":71},";  ",[62,656,657],{"class":201},"\u002F* unitless — scales per-element *\u002F\n",[62,659,661,664,666,668,670,672,675,678,680,682,684,686],{"class":64,"line":660},26,[62,662,663],{"class":116},"    background",[62,665,120],{"class":71},[62,667,587],{"class":116},[62,669,350],{"class":71},[62,671,477],{"class":321},[62,673,674],{"class":71},"); ",[62,676,677],{"class":116},"color",[62,679,120],{"class":71},[62,681,587],{"class":116},[62,683,350],{"class":71},[62,685,332],{"class":321},[62,687,362],{"class":71},[62,689,691],{"class":64,"line":690},27,[62,692,460],{"class":71},[62,694,696,699,701,704,706,708,710,712,714,716,718,720,722,725,727,729,732,734,736,739,741,744],{"class":64,"line":695},28,[62,697,698],{"class":93},"  h1",[62,700,113],{"class":71},[62,702,703],{"class":116},"font-size",[62,705,120],{"class":71},[62,707,605],{"class":116},[62,709,350],{"class":71},[62,711,434],{"class":116},[62,713,400],{"class":68},[62,715,25],{"class":71},[62,717,651],{"class":116},[62,719,400],{"class":68},[62,721,621],{"class":321},[62,723,724],{"class":116}," 2",[62,726,627],{"class":68},[62,728,25],{"class":71},[62,730,731],{"class":116},"3",[62,733,400],{"class":68},[62,735,674],{"class":71},[62,737,738],{"class":116},"line-height",[62,740,120],{"class":71},[62,742,743],{"class":116},"1.2",[62,745,146],{"class":71},[62,747,749,752,754,756,758,760,762,764,766,768,770,772,774,777,779,781,783,785,787,789,791,794],{"class":64,"line":748},29,[62,750,751],{"class":93},"  h2",[62,753,113],{"class":71},[62,755,703],{"class":116},[62,757,120],{"class":71},[62,759,605],{"class":116},[62,761,350],{"class":71},[62,763,651],{"class":116},[62,765,400],{"class":68},[62,767,25],{"class":71},[62,769,743],{"class":116},[62,771,400],{"class":68},[62,773,621],{"class":321},[62,775,776],{"class":116}," 1.5",[62,778,627],{"class":68},[62,780,25],{"class":71},[62,782,434],{"class":116},[62,784,400],{"class":68},[62,786,674],{"class":71},[62,788,738],{"class":116},[62,790,120],{"class":71},[62,792,793],{"class":116},"1.3",[62,795,146],{"class":71},[62,797,799,802,804,806,808,810,812,814],{"class":64,"line":798},30,[62,800,801],{"class":93},"  a",[62,803,113],{"class":71},[62,805,677],{"class":116},[62,807,120],{"class":71},[62,809,587],{"class":116},[62,811,350],{"class":71},[62,813,342],{"class":321},[62,815,816],{"class":71},"); }\n",[62,818,820,823,825,828,830,832,834,837,840,842,844,846,849,851,853,855,857],{"class":64,"line":819},31,[62,821,822],{"class":102},"  :focus-visible",[62,824,113],{"class":71},[62,826,827],{"class":116},"outline",[62,829,120],{"class":71},[62,831,434],{"class":116},[62,833,452],{"class":68},[62,835,836],{"class":116}," solid",[62,838,839],{"class":116}," var",[62,841,350],{"class":71},[62,843,342],{"class":321},[62,845,674],{"class":71},[62,847,848],{"class":116},"outline-offset",[62,850,120],{"class":71},[62,852,434],{"class":116},[62,854,452],{"class":68},[62,856,198],{"class":71},[62,858,859],{"class":201},"\u002F* keyboard-only focus *\u002F\n",[62,861,863],{"class":64,"line":862},32,[62,864,293],{"class":71},[62,866,868],{"class":64,"line":867},33,[62,869,79],{"emptyLinePlaceholder":78},[62,871,873,875],{"class":64,"line":872},34,[62,874,20],{"class":68},[62,876,877],{"class":71}," utilities {\n",[62,879,881,884,887,890,892,894,896,899,901,903,905,907,910],{"class":64,"line":880},35,[62,882,883],{"class":102},"  .u-stack",[62,885,886],{"class":68}," >",[62,888,889],{"class":93}," *",[62,891,621],{"class":68},[62,893,889],{"class":93},[62,895,113],{"class":71},[62,897,898],{"class":116},"margin-block-start",[62,900,120],{"class":71},[62,902,587],{"class":116},[62,904,350],{"class":71},[62,906,417],{"class":321},[62,908,909],{"class":71},"); }  ",[62,911,912],{"class":201},"\u002F* lobotomized owl *\u002F\n",[62,914,916],{"class":64,"line":915},36,[62,917,293],{"class":71},[39,919,921],{"id":920},"project-2-responsive-navbar-with-css-only-mobile-menu","Project 2 — Responsive Navbar with CSS-Only Mobile Menu",[50,923,925],{"language":924},"html",[54,926,929],{"className":927,"code":928,"language":924,"meta":58,"style":58},"language-html shiki shiki-themes github-light github-dark","\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav__logo\">MySite\u003C\u002Fdiv>\n  \u003Cinput type=\"checkbox\" id=\"nav-toggle\" class=\"nav__toggle\" hidden>\n  \u003Clabel for=\"nav-toggle\" class=\"nav__hamburger\" aria-label=\"Toggle menu\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Flabel>\n  \u003Cul class=\"nav__menu\">\n    \u003Cli>\u003Ca class=\"nav__link\" href=\"#\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca class=\"nav__link\" href=\"#\">About\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca class=\"nav__link\" href=\"#\">Contact\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n",[18,930,931,950,972,1007,1068,1084,1123,1156,1189,1198],{"__ignoreMap":58},[62,932,933,936,939,942,944,947],{"class":64,"line":65},[62,934,935],{"class":71},"\u003C",[62,937,938],{"class":93},"nav",[62,940,941],{"class":102}," class",[62,943,524],{"class":71},[62,945,946],{"class":527},"\"nav\"",[62,948,949],{"class":71},">\n",[62,951,952,955,958,960,962,965,968,970],{"class":64,"line":75},[62,953,954],{"class":71},"  \u003C",[62,956,957],{"class":93},"div",[62,959,941],{"class":102},[62,961,524],{"class":71},[62,963,964],{"class":527},"\"nav__logo\"",[62,966,967],{"class":71},">MySite\u003C\u002F",[62,969,957],{"class":93},[62,971,949],{"class":71},[62,973,974,976,979,982,984,987,990,992,995,997,999,1002,1005],{"class":64,"line":82},[62,975,954],{"class":71},[62,977,978],{"class":93},"input",[62,980,981],{"class":102}," type",[62,983,524],{"class":71},[62,985,986],{"class":527},"\"checkbox\"",[62,988,989],{"class":102}," id",[62,991,524],{"class":71},[62,993,994],{"class":527},"\"nav-toggle\"",[62,996,941],{"class":102},[62,998,524],{"class":71},[62,1000,1001],{"class":527},"\"nav__toggle\"",[62,1003,1004],{"class":102}," hidden",[62,1006,949],{"class":71},[62,1008,1009,1011,1014,1017,1019,1021,1023,1025,1028,1031,1033,1036,1039,1041,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066],{"class":64,"line":90},[62,1010,954],{"class":71},[62,1012,1013],{"class":93},"label",[62,1015,1016],{"class":102}," for",[62,1018,524],{"class":71},[62,1020,994],{"class":527},[62,1022,941],{"class":102},[62,1024,524],{"class":71},[62,1026,1027],{"class":527},"\"nav__hamburger\"",[62,1029,1030],{"class":102}," aria-label",[62,1032,524],{"class":71},[62,1034,1035],{"class":527},"\"Toggle menu\"",[62,1037,1038],{"class":71},">\u003C",[62,1040,62],{"class":93},[62,1042,1043],{"class":71},">\u003C\u002F",[62,1045,62],{"class":93},[62,1047,1038],{"class":71},[62,1049,62],{"class":93},[62,1051,1043],{"class":71},[62,1053,62],{"class":93},[62,1055,1038],{"class":71},[62,1057,62],{"class":93},[62,1059,1043],{"class":71},[62,1061,62],{"class":93},[62,1063,1043],{"class":71},[62,1065,1013],{"class":93},[62,1067,949],{"class":71},[62,1069,1070,1072,1075,1077,1079,1082],{"class":64,"line":149},[62,1071,954],{"class":71},[62,1073,1074],{"class":93},"ul",[62,1076,941],{"class":102},[62,1078,524],{"class":71},[62,1080,1081],{"class":527},"\"nav__menu\"",[62,1083,949],{"class":71},[62,1085,1086,1089,1092,1094,1097,1099,1101,1104,1107,1109,1112,1115,1117,1119,1121],{"class":64,"line":205},[62,1087,1088],{"class":71},"    \u003C",[62,1090,1091],{"class":93},"li",[62,1093,1038],{"class":71},[62,1095,1096],{"class":93},"a",[62,1098,941],{"class":102},[62,1100,524],{"class":71},[62,1102,1103],{"class":527},"\"nav__link\"",[62,1105,1106],{"class":102}," href",[62,1108,524],{"class":71},[62,1110,1111],{"class":527},"\"#\"",[62,1113,1114],{"class":71},">Home\u003C\u002F",[62,1116,1096],{"class":93},[62,1118,1043],{"class":71},[62,1120,1091],{"class":93},[62,1122,949],{"class":71},[62,1124,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1148,1150,1152,1154],{"class":64,"line":241},[62,1126,1088],{"class":71},[62,1128,1091],{"class":93},[62,1130,1038],{"class":71},[62,1132,1096],{"class":93},[62,1134,941],{"class":102},[62,1136,524],{"class":71},[62,1138,1103],{"class":527},[62,1140,1106],{"class":102},[62,1142,524],{"class":71},[62,1144,1111],{"class":527},[62,1146,1147],{"class":71},">About\u003C\u002F",[62,1149,1096],{"class":93},[62,1151,1043],{"class":71},[62,1153,1091],{"class":93},[62,1155,949],{"class":71},[62,1157,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1181,1183,1185,1187],{"class":64,"line":290},[62,1159,1088],{"class":71},[62,1161,1091],{"class":93},[62,1163,1038],{"class":71},[62,1165,1096],{"class":93},[62,1167,941],{"class":102},[62,1169,524],{"class":71},[62,1171,1103],{"class":527},[62,1173,1106],{"class":102},[62,1175,524],{"class":71},[62,1177,1111],{"class":527},[62,1179,1180],{"class":71},">Contact\u003C\u002F",[62,1182,1096],{"class":93},[62,1184,1043],{"class":71},[62,1186,1091],{"class":93},[62,1188,949],{"class":71},[62,1190,1191,1194,1196],{"class":64,"line":296},[62,1192,1193],{"class":71},"  \u003C\u002F",[62,1195,1074],{"class":93},[62,1197,949],{"class":71},[62,1199,1200,1203,1205],{"class":64,"line":301},[62,1201,1202],{"class":71},"\u003C\u002F",[62,1204,938],{"class":93},[62,1206,949],{"class":71},[50,1208,1209],{"language":52},[54,1210,1212],{"className":56,"code":1211,"language":52,"meta":58,"style":58},".nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; }\n.nav__menu { display: flex; gap: 2rem; list-style: none; }\n.nav__link { text-decoration: none; color: var(--c-fg); position: relative; }\n.nav__link::after {\n  content: \"\"; position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 2px;\n  background: var(--c-primary); transform: scaleX(0); transform-origin: inline-start;\n  transition: transform 0.3s ease;  \u002F* GPU-friendly: transform, not width *\u002F\n}\n.nav__link:hover::after { transform: scaleX(1); }\n\n@media (max-width: 768px) {\n  .nav__hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }\n  .nav__hamburger span { inline-size: 25px; block-size: 3px; background: var(--c-fg); }\n  .nav__menu {\n    position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; gap: 0;\n    background: var(--c-bg); padding: 1rem 2rem;\n    transform: scaleY(0); transform-origin: block-start;  \u002F* GPU animation, not height *\u002F\n    transition: transform 0.3s ease;\n  }\n  .nav__toggle:checked ~ .nav__menu { transform: scaleY(1); }  \u002F* CSS-only toggle via :checked ~ *\u002F\n}\n",[18,1213,1214,1264,1300,1338,1345,1395,1433,1455,1459,1478,1482,1503,1549,1593,1600,1646,1674,1702,1717,1721,1749],{"__ignoreMap":58},[62,1215,1216,1219,1221,1223,1225,1228,1230,1233,1235,1238,1240,1243,1245,1248,1250,1252,1254,1256,1258,1260,1262],{"class":64,"line":65},[62,1217,1218],{"class":102},".nav",[62,1220,113],{"class":71},[62,1222,177],{"class":116},[62,1224,120],{"class":71},[62,1226,1227],{"class":116},"flex",[62,1229,126],{"class":71},[62,1231,1232],{"class":116},"align-items",[62,1234,120],{"class":71},[62,1236,1237],{"class":116},"center",[62,1239,126],{"class":71},[62,1241,1242],{"class":116},"justify-content",[62,1244,120],{"class":71},[62,1246,1247],{"class":116},"space-between",[62,1249,126],{"class":71},[62,1251,139],{"class":116},[62,1253,120],{"class":71},[62,1255,422],{"class":116},[62,1257,400],{"class":68},[62,1259,724],{"class":116},[62,1261,400],{"class":68},[62,1263,146],{"class":71},[62,1265,1266,1269,1271,1273,1275,1277,1279,1282,1284,1286,1288,1290,1293,1295,1298],{"class":64,"line":75},[62,1267,1268],{"class":102},".nav__menu",[62,1270,113],{"class":71},[62,1272,177],{"class":116},[62,1274,120],{"class":71},[62,1276,1227],{"class":116},[62,1278,126],{"class":71},[62,1280,1281],{"class":116},"gap",[62,1283,120],{"class":71},[62,1285,434],{"class":116},[62,1287,400],{"class":68},[62,1289,126],{"class":71},[62,1291,1292],{"class":116},"list-style",[62,1294,120],{"class":71},[62,1296,1297],{"class":116},"none",[62,1299,146],{"class":71},[62,1301,1302,1305,1307,1310,1312,1314,1316,1318,1320,1322,1324,1326,1328,1331,1333,1336],{"class":64,"line":82},[62,1303,1304],{"class":102},".nav__link",[62,1306,113],{"class":71},[62,1308,1309],{"class":116},"text-decoration",[62,1311,120],{"class":71},[62,1313,1297],{"class":116},[62,1315,126],{"class":71},[62,1317,677],{"class":116},[62,1319,120],{"class":71},[62,1321,587],{"class":116},[62,1323,350],{"class":71},[62,1325,332],{"class":321},[62,1327,674],{"class":71},[62,1329,1330],{"class":116},"position",[62,1332,120],{"class":71},[62,1334,1335],{"class":116},"relative",[62,1337,146],{"class":71},[62,1339,1340,1343],{"class":64,"line":90},[62,1341,1342],{"class":102},".nav__link::after",[62,1344,315],{"class":71},[62,1346,1347,1350,1352,1355,1357,1359,1361,1364,1366,1369,1371,1373,1375,1378,1380,1382,1384,1387,1389,1391,1393],{"class":64,"line":149},[62,1348,1349],{"class":116},"  content",[62,1351,120],{"class":71},[62,1353,1354],{"class":527},"\"\"",[62,1356,126],{"class":71},[62,1358,1330],{"class":116},[62,1360,120],{"class":71},[62,1362,1363],{"class":116},"absolute",[62,1365,126],{"class":71},[62,1367,1368],{"class":116},"inset-block-end",[62,1370,120],{"class":71},[62,1372,134],{"class":116},[62,1374,126],{"class":71},[62,1376,1377],{"class":116},"inset-inline",[62,1379,120],{"class":71},[62,1381,134],{"class":116},[62,1383,126],{"class":71},[62,1385,1386],{"class":116},"block-size",[62,1388,120],{"class":71},[62,1390,434],{"class":116},[62,1392,452],{"class":68},[62,1394,386],{"class":71},[62,1396,1397,1400,1402,1404,1406,1408,1410,1412,1414,1417,1419,1421,1423,1426,1428,1431],{"class":64,"line":205},[62,1398,1399],{"class":116},"  background",[62,1401,120],{"class":71},[62,1403,587],{"class":116},[62,1405,350],{"class":71},[62,1407,342],{"class":321},[62,1409,674],{"class":71},[62,1411,32],{"class":116},[62,1413,120],{"class":71},[62,1415,1416],{"class":116},"scaleX",[62,1418,350],{"class":71},[62,1420,134],{"class":116},[62,1422,674],{"class":71},[62,1424,1425],{"class":116},"transform-origin",[62,1427,120],{"class":71},[62,1429,1430],{"class":116},"inline-start",[62,1432,386],{"class":71},[62,1434,1435,1438,1441,1444,1447,1450,1452],{"class":64,"line":241},[62,1436,1437],{"class":116},"  transition",[62,1439,1440],{"class":71},": transform ",[62,1442,1443],{"class":116},"0.3",[62,1445,1446],{"class":68},"s",[62,1448,1449],{"class":116}," ease",[62,1451,654],{"class":71},[62,1453,1454],{"class":201},"\u002F* GPU-friendly: transform, not width *\u002F\n",[62,1456,1457],{"class":64,"line":290},[62,1458,293],{"class":71},[62,1460,1461,1464,1466,1468,1470,1472,1474,1476],{"class":64,"line":296},[62,1462,1463],{"class":102},".nav__link:hover::after",[62,1465,113],{"class":71},[62,1467,32],{"class":116},[62,1469,120],{"class":71},[62,1471,1416],{"class":116},[62,1473,350],{"class":71},[62,1475,422],{"class":116},[62,1477,816],{"class":71},[62,1479,1480],{"class":64,"line":301},[62,1481,79],{"emptyLinePlaceholder":78},[62,1483,1484,1487,1490,1493,1495,1498,1500],{"class":64,"line":309},[62,1485,1486],{"class":68},"@media",[62,1488,1489],{"class":71}," (",[62,1491,1492],{"class":116},"max-width",[62,1494,120],{"class":71},[62,1496,1497],{"class":116},"768",[62,1499,452],{"class":68},[62,1501,1502],{"class":71},") {\n",[62,1504,1505,1508,1510,1512,1514,1516,1518,1521,1523,1526,1528,1530,1532,1535,1537,1539,1542,1544,1547],{"class":64,"line":318},[62,1506,1507],{"class":102},"  .nav__hamburger",[62,1509,113],{"class":71},[62,1511,177],{"class":116},[62,1513,120],{"class":71},[62,1515,1227],{"class":116},[62,1517,126],{"class":71},[62,1519,1520],{"class":116},"flex-direction",[62,1522,120],{"class":71},[62,1524,1525],{"class":116},"column",[62,1527,126],{"class":71},[62,1529,1281],{"class":116},[62,1531,120],{"class":71},[62,1533,1534],{"class":116},"5",[62,1536,452],{"class":68},[62,1538,126],{"class":71},[62,1540,1541],{"class":116},"cursor",[62,1543,120],{"class":71},[62,1545,1546],{"class":116},"pointer",[62,1548,146],{"class":71},[62,1550,1551,1553,1556,1558,1561,1563,1566,1568,1570,1572,1574,1576,1578,1580,1583,1585,1587,1589,1591],{"class":64,"line":365},[62,1552,1507],{"class":102},[62,1554,1555],{"class":93}," span",[62,1557,113],{"class":71},[62,1559,1560],{"class":116},"inline-size",[62,1562,120],{"class":71},[62,1564,1565],{"class":116},"25",[62,1567,452],{"class":68},[62,1569,126],{"class":71},[62,1571,1386],{"class":116},[62,1573,120],{"class":71},[62,1575,731],{"class":116},[62,1577,452],{"class":68},[62,1579,126],{"class":71},[62,1581,1582],{"class":116},"background",[62,1584,120],{"class":71},[62,1586,587],{"class":116},[62,1588,350],{"class":71},[62,1590,332],{"class":321},[62,1592,816],{"class":71},[62,1594,1595,1598],{"class":64,"line":389},[62,1596,1597],{"class":102},"  .nav__menu",[62,1599,315],{"class":71},[62,1601,1602,1605,1607,1609,1611,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644],{"class":64,"line":441},[62,1603,1604],{"class":116},"    position",[62,1606,120],{"class":71},[62,1608,1363],{"class":116},[62,1610,126],{"class":71},[62,1612,1613],{"class":116},"inset-block-start",[62,1615,120],{"class":71},[62,1617,192],{"class":116},[62,1619,195],{"class":68},[62,1621,126],{"class":71},[62,1623,1377],{"class":116},[62,1625,120],{"class":71},[62,1627,134],{"class":116},[62,1629,126],{"class":71},[62,1631,1520],{"class":116},[62,1633,120],{"class":71},[62,1635,1525],{"class":116},[62,1637,126],{"class":71},[62,1639,1281],{"class":116},[62,1641,120],{"class":71},[62,1643,134],{"class":116},[62,1645,386],{"class":71},[62,1647,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672],{"class":64,"line":457},[62,1649,663],{"class":116},[62,1651,120],{"class":71},[62,1653,587],{"class":116},[62,1655,350],{"class":71},[62,1657,477],{"class":321},[62,1659,674],{"class":71},[62,1661,139],{"class":116},[62,1663,120],{"class":71},[62,1665,422],{"class":116},[62,1667,400],{"class":68},[62,1669,724],{"class":116},[62,1671,400],{"class":68},[62,1673,386],{"class":71},[62,1675,1676,1679,1681,1684,1686,1688,1690,1692,1694,1697,1699],{"class":64,"line":463},[62,1677,1678],{"class":116},"    transform",[62,1680,120],{"class":71},[62,1682,1683],{"class":116},"scaleY",[62,1685,350],{"class":71},[62,1687,134],{"class":116},[62,1689,674],{"class":71},[62,1691,1425],{"class":116},[62,1693,120],{"class":71},[62,1695,1696],{"class":116},"block-start",[62,1698,654],{"class":71},[62,1700,1701],{"class":201},"\u002F* GPU animation, not height *\u002F\n",[62,1703,1704,1707,1709,1711,1713,1715],{"class":64,"line":515},[62,1705,1706],{"class":116},"    transition",[62,1708,1440],{"class":71},[62,1710,1443],{"class":116},[62,1712,1446],{"class":68},[62,1714,1449],{"class":116},[62,1716,386],{"class":71},[62,1718,1719],{"class":64,"line":553},[62,1720,460],{"class":71},[62,1722,1723,1726,1729,1732,1734,1736,1738,1740,1742,1744,1746],{"class":64,"line":558},[62,1724,1725],{"class":102},"  .nav__toggle:checked",[62,1727,1728],{"class":68}," ~",[62,1730,1731],{"class":102}," .nav__menu",[62,1733,113],{"class":71},[62,1735,32],{"class":116},[62,1737,120],{"class":71},[62,1739,1683],{"class":116},[62,1741,350],{"class":71},[62,1743,422],{"class":116},[62,1745,909],{"class":71},[62,1747,1748],{"class":201},"\u002F* CSS-only toggle via :checked ~ *\u002F\n",[62,1750,1751],{"class":64,"line":563},[62,1752,293],{"class":71},[39,1754,1756],{"id":1755},"project-3-grid-dashboard","Project 3 — Grid Dashboard",[50,1758,1759],{"language":52},[54,1760,1762],{"className":56,"code":1761,"language":52,"meta":58,"style":58},".dashboard {\n  display: grid;\n  grid-template-areas: \"header header\" \"sidebar main\" \"footer footer\";\n  grid-template-columns: 250px 1fr;\n  grid-template-rows: auto 1fr auto;\n  min-block-size: 100dvh;\n}\n@media (max-width: 768px) {\n  .dashboard { grid-template-columns: 1fr; grid-template-areas: \"header\" \"main\" \"footer\"; }\n  .sidebar { display: none; }\n}\n.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }\n.card { background: var(--c-bg); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; }\n.card__header {\n  padding: 1rem; color: white;\n  background: linear-gradient(135deg, var(--c-primary), color-mix(in oklch, var(--c-primary) 70%, purple));\n}\n",[18,1763,1764,1771,1783,1801,1821,1840,1854,1858,1874,1908,1923,1927,1984,2065,2072,2094,2157],{"__ignoreMap":58},[62,1765,1766,1769],{"class":64,"line":65},[62,1767,1768],{"class":102},".dashboard",[62,1770,315],{"class":71},[62,1772,1773,1776,1778,1781],{"class":64,"line":75},[62,1774,1775],{"class":116},"  display",[62,1777,120],{"class":71},[62,1779,1780],{"class":116},"grid",[62,1782,386],{"class":71},[62,1784,1785,1788,1790,1793,1796,1799],{"class":64,"line":82},[62,1786,1787],{"class":116},"  grid-template-areas",[62,1789,120],{"class":71},[62,1791,1792],{"class":527},"\"header header\"",[62,1794,1795],{"class":527}," \"sidebar main\"",[62,1797,1798],{"class":527}," \"footer footer\"",[62,1800,386],{"class":71},[62,1802,1803,1806,1808,1811,1813,1816,1819],{"class":64,"line":90},[62,1804,1805],{"class":116},"  grid-template-columns",[62,1807,120],{"class":71},[62,1809,1810],{"class":116},"250",[62,1812,452],{"class":68},[62,1814,1815],{"class":116}," 1",[62,1817,1818],{"class":68},"fr",[62,1820,386],{"class":71},[62,1822,1823,1826,1828,1831,1833,1835,1838],{"class":64,"line":149},[62,1824,1825],{"class":116},"  grid-template-rows",[62,1827,120],{"class":71},[62,1829,1830],{"class":116},"auto",[62,1832,1815],{"class":116},[62,1834,1818],{"class":68},[62,1836,1837],{"class":116}," auto",[62,1839,386],{"class":71},[62,1841,1842,1845,1847,1849,1852],{"class":64,"line":205},[62,1843,1844],{"class":116},"  min-block-size",[62,1846,120],{"class":71},[62,1848,192],{"class":116},[62,1850,1851],{"class":68},"dvh",[62,1853,386],{"class":71},[62,1855,1856],{"class":64,"line":241},[62,1857,293],{"class":71},[62,1859,1860,1862,1864,1866,1868,1870,1872],{"class":64,"line":290},[62,1861,1486],{"class":68},[62,1863,1489],{"class":71},[62,1865,1492],{"class":116},[62,1867,120],{"class":71},[62,1869,1497],{"class":116},[62,1871,452],{"class":68},[62,1873,1502],{"class":71},[62,1875,1876,1879,1881,1884,1886,1888,1890,1892,1895,1897,1900,1903,1906],{"class":64,"line":296},[62,1877,1878],{"class":102},"  .dashboard",[62,1880,113],{"class":71},[62,1882,1883],{"class":116},"grid-template-columns",[62,1885,120],{"class":71},[62,1887,422],{"class":116},[62,1889,1818],{"class":68},[62,1891,126],{"class":71},[62,1893,1894],{"class":116},"grid-template-areas",[62,1896,120],{"class":71},[62,1898,1899],{"class":527},"\"header\"",[62,1901,1902],{"class":527}," \"main\"",[62,1904,1905],{"class":527}," \"footer\"",[62,1907,146],{"class":71},[62,1909,1910,1913,1915,1917,1919,1921],{"class":64,"line":301},[62,1911,1912],{"class":102},"  .sidebar",[62,1914,113],{"class":71},[62,1916,177],{"class":116},[62,1918,120],{"class":71},[62,1920,1297],{"class":116},[62,1922,146],{"class":71},[62,1924,1925],{"class":64,"line":309},[62,1926,293],{"class":71},[62,1928,1929,1932,1934,1936,1938,1940,1942,1944,1946,1949,1951,1954,1956,1959,1961,1963,1965,1967,1969,1971,1974,1976,1978,1980,1982],{"class":64,"line":318},[62,1930,1931],{"class":102},".cards",[62,1933,113],{"class":71},[62,1935,177],{"class":116},[62,1937,120],{"class":71},[62,1939,1780],{"class":116},[62,1941,126],{"class":71},[62,1943,1883],{"class":116},[62,1945,120],{"class":71},[62,1947,1948],{"class":116},"repeat",[62,1950,350],{"class":71},[62,1952,1953],{"class":116},"auto-fit",[62,1955,25],{"class":71},[62,1957,1958],{"class":116},"minmax",[62,1960,350],{"class":71},[62,1962,1810],{"class":116},[62,1964,452],{"class":68},[62,1966,25],{"class":71},[62,1968,422],{"class":116},[62,1970,1818],{"class":68},[62,1972,1973],{"class":71},")); ",[62,1975,1281],{"class":116},[62,1977,120],{"class":71},[62,1979,651],{"class":116},[62,1981,400],{"class":68},[62,1983,146],{"class":71},[62,1985,1986,1989,1991,1993,1995,1997,1999,2001,2003,2006,2008,2011,2013,2015,2018,2020,2022,2025,2027,2030,2032,2035,2037,2039,2042,2044,2046,2048,2050,2053,2055,2058,2060,2063],{"class":64,"line":365},[62,1987,1988],{"class":102},".card",[62,1990,113],{"class":71},[62,1992,1582],{"class":116},[62,1994,120],{"class":71},[62,1996,587],{"class":116},[62,1998,350],{"class":71},[62,2000,477],{"class":321},[62,2002,674],{"class":71},[62,2004,2005],{"class":116},"border-radius",[62,2007,120],{"class":71},[62,2009,2010],{"class":116},"12",[62,2012,452],{"class":68},[62,2014,126],{"class":71},[62,2016,2017],{"class":116},"box-shadow",[62,2019,120],{"class":71},[62,2021,134],{"class":116},[62,2023,2024],{"class":116}," 4",[62,2026,452],{"class":68},[62,2028,2029],{"class":116}," 6",[62,2031,452],{"class":68},[62,2033,2034],{"class":116}," rgba",[62,2036,350],{"class":71},[62,2038,134],{"class":116},[62,2040,2041],{"class":71},",",[62,2043,134],{"class":116},[62,2045,2041],{"class":71},[62,2047,134],{"class":116},[62,2049,2041],{"class":71},[62,2051,2052],{"class":116},"0.1",[62,2054,674],{"class":71},[62,2056,2057],{"class":116},"overflow",[62,2059,120],{"class":71},[62,2061,2062],{"class":116},"hidden",[62,2064,146],{"class":71},[62,2066,2067,2070],{"class":64,"line":389},[62,2068,2069],{"class":102},".card__header",[62,2071,315],{"class":71},[62,2073,2074,2077,2079,2081,2083,2085,2087,2089,2092],{"class":64,"line":441},[62,2075,2076],{"class":116},"  padding",[62,2078,120],{"class":71},[62,2080,422],{"class":116},[62,2082,400],{"class":68},[62,2084,126],{"class":71},[62,2086,677],{"class":116},[62,2088,120],{"class":71},[62,2090,2091],{"class":116},"white",[62,2093,386],{"class":71},[62,2095,2096,2098,2100,2103,2105,2108,2111,2113,2115,2117,2119,2122,2125,2127,2130,2133,2135,2137,2139,2141,2144,2147,2149,2151,2154],{"class":64,"line":457},[62,2097,1399],{"class":116},[62,2099,120],{"class":71},[62,2101,2102],{"class":116},"linear-gradient",[62,2104,350],{"class":71},[62,2106,2107],{"class":116},"135",[62,2109,2110],{"class":68},"deg",[62,2112,25],{"class":71},[62,2114,587],{"class":116},[62,2116,350],{"class":71},[62,2118,342],{"class":321},[62,2120,2121],{"class":71},"), ",[62,2123,2124],{"class":116},"color-mix",[62,2126,350],{"class":71},[62,2128,2129],{"class":321},"in",[62,2131,2132],{"class":321}," oklch",[62,2134,25],{"class":71},[62,2136,587],{"class":116},[62,2138,350],{"class":71},[62,2140,342],{"class":321},[62,2142,2143],{"class":71},") ",[62,2145,2146],{"class":116},"70",[62,2148,195],{"class":68},[62,2150,25],{"class":71},[62,2152,2153],{"class":116},"purple",[62,2155,2156],{"class":71},"));\n",[62,2158,2159],{"class":64,"line":463},[62,2160,293],{"class":71},[39,2162,2164],{"id":2163},"project-4-glassmorphism-login-card","Project 4 — Glassmorphism Login Card",[50,2166,2167],{"language":52},[54,2168,2170],{"className":56,"code":2169,"language":52,"meta":58,"style":58},"body { min-block-size: 100dvh; display: grid; place-items: center; background: linear-gradient(135deg, #667eea, #764ba2); }\n.login {\n  background: rgba(255, 255, 255, 0.2);  \u002F* translucent so blur shows through *\u002F\n  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);  \u002F* Safari + standard *\u002F\n  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; padding: 2.5rem;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n  inline-size: min(400px, 90vw); color: white;\n  animation: fadeUp 0.6s ease both;  \u002F* both = forwards + backwards (start + end state) *\u002F\n}\n.login__input {\n  inline-size: 100%; padding: 0.75rem 1rem; margin-block-end: 1rem;\n  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px; color: white;\n  transition: border-color 0.3s, box-shadow 0.3s;\n}\n.login__input:focus-visible { outline: none; border-color: rgba(255,255,255,0.6); box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }\n@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n@media (prefers-reduced-motion: reduce) { .login { animation: none; } }  \u002F* a11y *\u002F\n",[18,2171,2172,2231,2238,2270,2307,2362,2401,2435,2458,2462,2469,2507,2564,2585,2605,2609,2685,2749],{"__ignoreMap":58},[62,2173,2174,2177,2179,2182,2184,2186,2188,2190,2192,2194,2196,2198,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221,2224,2226,2229],{"class":64,"line":65},[62,2175,2176],{"class":93},"body",[62,2178,113],{"class":71},[62,2180,2181],{"class":116},"min-block-size",[62,2183,120],{"class":71},[62,2185,192],{"class":116},[62,2187,1851],{"class":68},[62,2189,126],{"class":71},[62,2191,177],{"class":116},[62,2193,120],{"class":71},[62,2195,1780],{"class":116},[62,2197,126],{"class":71},[62,2199,2200],{"class":116},"place-items",[62,2202,120],{"class":71},[62,2204,1237],{"class":116},[62,2206,126],{"class":71},[62,2208,1582],{"class":116},[62,2210,120],{"class":71},[62,2212,2102],{"class":116},[62,2214,350],{"class":71},[62,2216,2107],{"class":116},[62,2218,2110],{"class":68},[62,2220,25],{"class":71},[62,2222,2223],{"class":116},"#667eea",[62,2225,25],{"class":71},[62,2227,2228],{"class":116},"#764ba2",[62,2230,816],{"class":71},[62,2232,2233,2236],{"class":64,"line":75},[62,2234,2235],{"class":102},".login",[62,2237,315],{"class":71},[62,2239,2240,2242,2244,2247,2249,2252,2254,2256,2258,2260,2262,2265,2267],{"class":64,"line":82},[62,2241,1399],{"class":116},[62,2243,120],{"class":71},[62,2245,2246],{"class":116},"rgba",[62,2248,350],{"class":71},[62,2250,2251],{"class":116},"255",[62,2253,25],{"class":71},[62,2255,2251],{"class":116},[62,2257,25],{"class":71},[62,2259,2251],{"class":116},[62,2261,25],{"class":71},[62,2263,2264],{"class":116},"0.2",[62,2266,637],{"class":71},[62,2268,2269],{"class":201},"\u002F* translucent so blur shows through *\u002F\n",[62,2271,2272,2275,2277,2280,2282,2285,2287,2289,2292,2294,2296,2298,2300,2302,2304],{"class":64,"line":90},[62,2273,2274],{"class":116},"  -webkit-backdrop-filter",[62,2276,120],{"class":71},[62,2278,2279],{"class":116},"blur",[62,2281,350],{"class":71},[62,2283,2284],{"class":116},"20",[62,2286,452],{"class":68},[62,2288,674],{"class":71},[62,2290,2291],{"class":116},"backdrop-filter",[62,2293,120],{"class":71},[62,2295,2279],{"class":116},[62,2297,350],{"class":71},[62,2299,2284],{"class":116},[62,2301,452],{"class":68},[62,2303,637],{"class":71},[62,2305,2306],{"class":201},"\u002F* Safari + standard *\u002F\n",[62,2308,2309,2312,2314,2316,2318,2320,2322,2324,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344,2347,2349,2351,2353,2355,2358,2360],{"class":64,"line":149},[62,2310,2311],{"class":116},"  border",[62,2313,120],{"class":71},[62,2315,422],{"class":116},[62,2317,452],{"class":68},[62,2319,836],{"class":116},[62,2321,2034],{"class":116},[62,2323,350],{"class":71},[62,2325,2251],{"class":116},[62,2327,25],{"class":71},[62,2329,2251],{"class":116},[62,2331,25],{"class":71},[62,2333,2251],{"class":116},[62,2335,25],{"class":71},[62,2337,1443],{"class":116},[62,2339,674],{"class":71},[62,2341,2005],{"class":116},[62,2343,120],{"class":71},[62,2345,2346],{"class":116},"16",[62,2348,452],{"class":68},[62,2350,126],{"class":71},[62,2352,139],{"class":116},[62,2354,120],{"class":71},[62,2356,2357],{"class":116},"2.5",[62,2359,400],{"class":68},[62,2361,386],{"class":71},[62,2363,2364,2367,2369,2371,2374,2376,2379,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399],{"class":64,"line":205},[62,2365,2366],{"class":116},"  box-shadow",[62,2368,120],{"class":71},[62,2370,134],{"class":116},[62,2372,2373],{"class":116}," 8",[62,2375,452],{"class":68},[62,2377,2378],{"class":116}," 32",[62,2380,452],{"class":68},[62,2382,2034],{"class":116},[62,2384,350],{"class":71},[62,2386,134],{"class":116},[62,2388,25],{"class":71},[62,2390,134],{"class":116},[62,2392,25],{"class":71},[62,2394,134],{"class":116},[62,2396,25],{"class":71},[62,2398,2052],{"class":116},[62,2400,362],{"class":71},[62,2402,2403,2406,2408,2411,2413,2416,2418,2420,2423,2425,2427,2429,2431,2433],{"class":64,"line":241},[62,2404,2405],{"class":116},"  inline-size",[62,2407,120],{"class":71},[62,2409,2410],{"class":116},"min",[62,2412,350],{"class":71},[62,2414,2415],{"class":116},"400",[62,2417,452],{"class":68},[62,2419,25],{"class":71},[62,2421,2422],{"class":116},"90",[62,2424,627],{"class":68},[62,2426,674],{"class":71},[62,2428,677],{"class":116},[62,2430,120],{"class":71},[62,2432,2091],{"class":116},[62,2434,386],{"class":71},[62,2436,2437,2440,2443,2446,2448,2450,2453,2455],{"class":64,"line":290},[62,2438,2439],{"class":116},"  animation",[62,2441,2442],{"class":71},": fadeUp ",[62,2444,2445],{"class":116},"0.6",[62,2447,1446],{"class":68},[62,2449,1449],{"class":116},[62,2451,2452],{"class":116}," both",[62,2454,654],{"class":71},[62,2456,2457],{"class":201},"\u002F* both = forwards + backwards (start + end state) *\u002F\n",[62,2459,2460],{"class":64,"line":296},[62,2461,293],{"class":71},[62,2463,2464,2467],{"class":64,"line":301},[62,2465,2466],{"class":102},".login__input",[62,2468,315],{"class":71},[62,2470,2471,2473,2475,2477,2479,2481,2483,2485,2488,2490,2492,2494,2496,2499,2501,2503,2505],{"class":64,"line":309},[62,2472,2405],{"class":116},[62,2474,120],{"class":71},[62,2476,192],{"class":116},[62,2478,195],{"class":68},[62,2480,126],{"class":71},[62,2482,139],{"class":116},[62,2484,120],{"class":71},[62,2486,2487],{"class":116},"0.75",[62,2489,400],{"class":68},[62,2491,1815],{"class":116},[62,2493,400],{"class":68},[62,2495,126],{"class":71},[62,2497,2498],{"class":116},"margin-block-end",[62,2500,120],{"class":71},[62,2502,422],{"class":116},[62,2504,400],{"class":68},[62,2506,386],{"class":71},[62,2508,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529,2531,2533,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562],{"class":64,"line":318},[62,2510,1399],{"class":116},[62,2512,120],{"class":71},[62,2514,2246],{"class":116},[62,2516,350],{"class":71},[62,2518,2251],{"class":116},[62,2520,25],{"class":71},[62,2522,2251],{"class":116},[62,2524,25],{"class":71},[62,2526,2251],{"class":116},[62,2528,25],{"class":71},[62,2530,2052],{"class":116},[62,2532,674],{"class":71},[62,2534,2535],{"class":116},"border",[62,2537,120],{"class":71},[62,2539,422],{"class":116},[62,2541,452],{"class":68},[62,2543,836],{"class":116},[62,2545,2034],{"class":116},[62,2547,350],{"class":71},[62,2549,2251],{"class":116},[62,2551,25],{"class":71},[62,2553,2251],{"class":116},[62,2555,25],{"class":71},[62,2557,2251],{"class":116},[62,2559,25],{"class":71},[62,2561,2264],{"class":116},[62,2563,362],{"class":71},[62,2565,2566,2569,2571,2573,2575,2577,2579,2581,2583],{"class":64,"line":365},[62,2567,2568],{"class":116},"  border-radius",[62,2570,120],{"class":71},[62,2572,449],{"class":116},[62,2574,452],{"class":68},[62,2576,126],{"class":71},[62,2578,677],{"class":116},[62,2580,120],{"class":71},[62,2582,2091],{"class":116},[62,2584,386],{"class":71},[62,2586,2587,2589,2592,2594,2596,2599,2601,2603],{"class":64,"line":389},[62,2588,1437],{"class":116},[62,2590,2591],{"class":71},": border-color ",[62,2593,1443],{"class":116},[62,2595,1446],{"class":68},[62,2597,2598],{"class":71},", box-shadow ",[62,2600,1443],{"class":116},[62,2602,1446],{"class":68},[62,2604,386],{"class":71},[62,2606,2607],{"class":64,"line":441},[62,2608,293],{"class":71},[62,2610,2611,2614,2616,2618,2620,2622,2624,2627,2629,2631,2633,2635,2637,2639,2641,2643,2645,2647,2649,2651,2653,2655,2658,2660,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683],{"class":64,"line":457},[62,2612,2613],{"class":102},".login__input:focus-visible",[62,2615,113],{"class":71},[62,2617,827],{"class":116},[62,2619,120],{"class":71},[62,2621,1297],{"class":116},[62,2623,126],{"class":71},[62,2625,2626],{"class":116},"border-color",[62,2628,120],{"class":71},[62,2630,2246],{"class":116},[62,2632,350],{"class":71},[62,2634,2251],{"class":116},[62,2636,2041],{"class":71},[62,2638,2251],{"class":116},[62,2640,2041],{"class":71},[62,2642,2251],{"class":116},[62,2644,2041],{"class":71},[62,2646,2445],{"class":116},[62,2648,674],{"class":71},[62,2650,2017],{"class":116},[62,2652,120],{"class":71},[62,2654,134],{"class":116},[62,2656,2657],{"class":116}," 0",[62,2659,2657],{"class":116},[62,2661,2662],{"class":116}," 3",[62,2664,452],{"class":68},[62,2666,2034],{"class":116},[62,2668,350],{"class":71},[62,2670,2251],{"class":116},[62,2672,2041],{"class":71},[62,2674,2251],{"class":116},[62,2676,2041],{"class":71},[62,2678,2251],{"class":116},[62,2680,2041],{"class":71},[62,2682,2264],{"class":116},[62,2684,816],{"class":71},[62,2686,2687,2690,2693,2695,2698,2700,2702,2704,2706,2708,2710,2712,2715,2717,2719,2721,2724,2727,2729,2731,2733,2735,2737,2739,2741,2743,2745,2747],{"class":64,"line":463},[62,2688,2689],{"class":68},"@keyframes",[62,2691,2692],{"class":321}," fadeUp",[62,2694,113],{"class":71},[62,2696,2697],{"class":102},"from",[62,2699,113],{"class":71},[62,2701,36],{"class":116},[62,2703,120],{"class":71},[62,2705,134],{"class":116},[62,2707,126],{"class":71},[62,2709,32],{"class":116},[62,2711,120],{"class":71},[62,2713,2714],{"class":116},"translateY",[62,2716,350],{"class":71},[62,2718,2284],{"class":116},[62,2720,452],{"class":68},[62,2722,2723],{"class":71},"); } ",[62,2725,2726],{"class":102},"to",[62,2728,113],{"class":71},[62,2730,36],{"class":116},[62,2732,120],{"class":71},[62,2734,422],{"class":116},[62,2736,126],{"class":71},[62,2738,32],{"class":116},[62,2740,120],{"class":71},[62,2742,2714],{"class":116},[62,2744,350],{"class":71},[62,2746,134],{"class":116},[62,2748,512],{"class":71},[62,2750,2751,2753,2756,2758,2760,2763,2765,2767,2770],{"class":64,"line":515},[62,2752,1486],{"class":68},[62,2754,2755],{"class":71}," (prefers-reduced-motion: reduce) { ",[62,2757,2235],{"class":102},[62,2759,113],{"class":71},[62,2761,2762],{"class":116},"animation",[62,2764,120],{"class":71},[62,2766,1297],{"class":116},[62,2768,2769],{"class":71},"; } }  ",[62,2771,2772],{"class":201},"\u002F* a11y *\u002F\n",[39,2774,2776],{"id":2775},"project-5-no-js-tooltip-system","Project 5 — No-JS Tooltip System",[50,2778,2779],{"language":52},[54,2780,2782],{"className":56,"code":2781,"language":52,"meta":58,"style":58},".tooltip { position: relative; display: inline-block; }\n.tooltip__content {\n  position: absolute; inset-block-end: 100%; inset-inline-start: 50%;\n  transform: translateX(-50%) translateY(8px) scale(0.9);  \u002F* start: offset + small *\u002F\n  background: #333; color: white; padding: 0.5rem 0.75rem; border-radius: 6px;\n  font-size: 0.875rem; white-space: nowrap; opacity: 0; visibility: hidden;\n  transition: opacity 0.2s, transform 0.2s; pointer-events: none; margin-block-end: 8px;\n}\n.tooltip__content::after {  \u002F* arrow via border trick *\u002F\n  content: \"\"; position: absolute; inset-block-start: 100%; inset-inline-start: 50%;\n  transform: translateX(-50%); border: 6px solid transparent; border-block-start-color: #333;\n}\n.tooltip:hover .tooltip__content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); }\n",[18,2783,2784,2808,2815,2848,2889,2934,2975,3014,3018,3029,3067,3107,3111],{"__ignoreMap":58},[62,2785,2786,2789,2791,2793,2795,2797,2799,2801,2803,2806],{"class":64,"line":65},[62,2787,2788],{"class":102},".tooltip",[62,2790,113],{"class":71},[62,2792,1330],{"class":116},[62,2794,120],{"class":71},[62,2796,1335],{"class":116},[62,2798,126],{"class":71},[62,2800,177],{"class":116},[62,2802,120],{"class":71},[62,2804,2805],{"class":116},"inline-block",[62,2807,146],{"class":71},[62,2809,2810,2813],{"class":64,"line":75},[62,2811,2812],{"class":102},".tooltip__content",[62,2814,315],{"class":71},[62,2816,2817,2820,2822,2824,2826,2828,2830,2832,2834,2836,2839,2841,2844,2846],{"class":64,"line":82},[62,2818,2819],{"class":116},"  position",[62,2821,120],{"class":71},[62,2823,1363],{"class":116},[62,2825,126],{"class":71},[62,2827,1368],{"class":116},[62,2829,120],{"class":71},[62,2831,192],{"class":116},[62,2833,195],{"class":68},[62,2835,126],{"class":71},[62,2837,2838],{"class":116},"inset-inline-start",[62,2840,120],{"class":71},[62,2842,2843],{"class":116},"50",[62,2845,195],{"class":68},[62,2847,386],{"class":71},[62,2849,2850,2853,2855,2858,2860,2863,2865,2867,2869,2871,2873,2875,2877,2880,2882,2884,2886],{"class":64,"line":90},[62,2851,2852],{"class":116},"  transform",[62,2854,120],{"class":71},[62,2856,2857],{"class":116},"translateX",[62,2859,350],{"class":71},[62,2861,2862],{"class":116},"-50",[62,2864,195],{"class":68},[62,2866,2143],{"class":71},[62,2868,2714],{"class":116},[62,2870,350],{"class":71},[62,2872,449],{"class":116},[62,2874,452],{"class":68},[62,2876,2143],{"class":71},[62,2878,2879],{"class":116},"scale",[62,2881,350],{"class":71},[62,2883,616],{"class":116},[62,2885,637],{"class":71},[62,2887,2888],{"class":201},"\u002F* start: offset + small *\u002F\n",[62,2890,2891,2893,2895,2897,2899,2901,2903,2905,2907,2909,2911,2914,2916,2919,2921,2923,2925,2927,2930,2932],{"class":64,"line":149},[62,2892,1399],{"class":116},[62,2894,120],{"class":71},[62,2896,337],{"class":116},[62,2898,126],{"class":71},[62,2900,677],{"class":116},[62,2902,120],{"class":71},[62,2904,2091],{"class":116},[62,2906,126],{"class":71},[62,2908,139],{"class":116},[62,2910,120],{"class":71},[62,2912,2913],{"class":116},"0.5",[62,2915,400],{"class":68},[62,2917,2918],{"class":116}," 0.75",[62,2920,400],{"class":68},[62,2922,126],{"class":71},[62,2924,2005],{"class":116},[62,2926,120],{"class":71},[62,2928,2929],{"class":116},"6",[62,2931,452],{"class":68},[62,2933,386],{"class":71},[62,2935,2936,2939,2941,2944,2946,2948,2951,2953,2956,2958,2960,2962,2964,2966,2969,2971,2973],{"class":64,"line":205},[62,2937,2938],{"class":116},"  font-size",[62,2940,120],{"class":71},[62,2942,2943],{"class":116},"0.875",[62,2945,400],{"class":68},[62,2947,126],{"class":71},[62,2949,2950],{"class":116},"white-space",[62,2952,120],{"class":71},[62,2954,2955],{"class":116},"nowrap",[62,2957,126],{"class":71},[62,2959,36],{"class":116},[62,2961,120],{"class":71},[62,2963,134],{"class":116},[62,2965,126],{"class":71},[62,2967,2968],{"class":116},"visibility",[62,2970,120],{"class":71},[62,2972,2062],{"class":116},[62,2974,386],{"class":71},[62,2976,2977,2979,2982,2984,2986,2989,2991,2993,2995,2998,3000,3002,3004,3006,3008,3010,3012],{"class":64,"line":241},[62,2978,1437],{"class":116},[62,2980,2981],{"class":71},": opacity ",[62,2983,2264],{"class":116},[62,2985,1446],{"class":68},[62,2987,2988],{"class":71},", transform ",[62,2990,2264],{"class":116},[62,2992,1446],{"class":68},[62,2994,126],{"class":71},[62,2996,2997],{"class":116},"pointer-events",[62,2999,120],{"class":71},[62,3001,1297],{"class":116},[62,3003,126],{"class":71},[62,3005,2498],{"class":116},[62,3007,120],{"class":71},[62,3009,449],{"class":116},[62,3011,452],{"class":68},[62,3013,386],{"class":71},[62,3015,3016],{"class":64,"line":290},[62,3017,293],{"class":71},[62,3019,3020,3023,3026],{"class":64,"line":296},[62,3021,3022],{"class":102},".tooltip__content::after",[62,3024,3025],{"class":71}," {  ",[62,3027,3028],{"class":201},"\u002F* arrow via border trick *\u002F\n",[62,3030,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053,3055,3057,3059,3061,3063,3065],{"class":64,"line":301},[62,3032,1349],{"class":116},[62,3034,120],{"class":71},[62,3036,1354],{"class":527},[62,3038,126],{"class":71},[62,3040,1330],{"class":116},[62,3042,120],{"class":71},[62,3044,1363],{"class":116},[62,3046,126],{"class":71},[62,3048,1613],{"class":116},[62,3050,120],{"class":71},[62,3052,192],{"class":116},[62,3054,195],{"class":68},[62,3056,126],{"class":71},[62,3058,2838],{"class":116},[62,3060,120],{"class":71},[62,3062,2843],{"class":116},[62,3064,195],{"class":68},[62,3066,386],{"class":71},[62,3068,3069,3071,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093,3096,3098,3101,3103,3105],{"class":64,"line":309},[62,3070,2852],{"class":116},[62,3072,120],{"class":71},[62,3074,2857],{"class":116},[62,3076,350],{"class":71},[62,3078,2862],{"class":116},[62,3080,195],{"class":68},[62,3082,674],{"class":71},[62,3084,2535],{"class":116},[62,3086,120],{"class":71},[62,3088,2929],{"class":116},[62,3090,452],{"class":68},[62,3092,836],{"class":116},[62,3094,3095],{"class":116}," transparent",[62,3097,126],{"class":71},[62,3099,3100],{"class":116},"border-block-start-color",[62,3102,120],{"class":71},[62,3104,337],{"class":116},[62,3106,386],{"class":71},[62,3108,3109],{"class":64,"line":318},[62,3110,293],{"class":71},[62,3112,3113,3116,3119,3121,3123,3125,3127,3129,3131,3133,3136,3138,3140,3142,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162,3164,3166],{"class":64,"line":365},[62,3114,3115],{"class":102},".tooltip:hover",[62,3117,3118],{"class":102}," .tooltip__content",[62,3120,113],{"class":71},[62,3122,36],{"class":116},[62,3124,120],{"class":71},[62,3126,422],{"class":116},[62,3128,126],{"class":71},[62,3130,2968],{"class":116},[62,3132,120],{"class":71},[62,3134,3135],{"class":116},"visible",[62,3137,126],{"class":71},[62,3139,32],{"class":116},[62,3141,120],{"class":71},[62,3143,2857],{"class":116},[62,3145,350],{"class":71},[62,3147,2862],{"class":116},[62,3149,195],{"class":68},[62,3151,2143],{"class":71},[62,3153,2714],{"class":116},[62,3155,350],{"class":71},[62,3157,134],{"class":116},[62,3159,2143],{"class":71},[62,3161,2879],{"class":116},[62,3163,350],{"class":71},[62,3165,422],{"class":116},[62,3167,816],{"class":71},[39,3169,3171],{"id":3170},"project-6-animated-loaders","Project 6 — Animated Loaders",[50,3173,3174],{"language":52},[54,3175,3177],{"className":56,"code":3176,"language":52,"meta":58,"style":58},".loader-spin { inline-size: 40px; block-size: 40px; border: 4px solid #eee; border-block-start-color: var(--c-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n\n.loader-dots { display: flex; gap: 0.5rem; }\n.loader-dots span { inline-size: 12px; block-size: 12px; background: var(--c-primary); border-radius: 50%; animation: pulse 1.4s ease-in-out infinite both; }\n.loader-dots span:nth-child(2) { animation-delay: 0.2s; }  \u002F* staggered via negative delay *\u002F\n.loader-dots span:nth-child(3) { animation-delay: 0.4s; }\n@keyframes pulse { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }\n\n@media (prefers-reduced-motion: reduce) { .loader-spin, .loader-dots span { animation: none; } }\n",[18,3178,3179,3263,3292,3296,3321,3390,3420,3445,3516,3520],{"__ignoreMap":58},[62,3180,3181,3184,3186,3188,3190,3193,3195,3197,3199,3201,3203,3205,3207,3209,3211,3214,3216,3218,3221,3223,3225,3227,3229,3231,3233,3235,3237,3239,3241,3243,3245,3247,3250,3253,3255,3258,3261],{"class":64,"line":65},[62,3182,3183],{"class":102},".loader-spin",[62,3185,113],{"class":71},[62,3187,1560],{"class":116},[62,3189,120],{"class":71},[62,3191,3192],{"class":116},"40",[62,3194,452],{"class":68},[62,3196,126],{"class":71},[62,3198,1386],{"class":116},[62,3200,120],{"class":71},[62,3202,3192],{"class":116},[62,3204,452],{"class":68},[62,3206,126],{"class":71},[62,3208,2535],{"class":116},[62,3210,120],{"class":71},[62,3212,3213],{"class":116},"4",[62,3215,452],{"class":68},[62,3217,836],{"class":116},[62,3219,3220],{"class":116}," #eee",[62,3222,126],{"class":71},[62,3224,3100],{"class":116},[62,3226,120],{"class":71},[62,3228,587],{"class":116},[62,3230,350],{"class":71},[62,3232,342],{"class":321},[62,3234,674],{"class":71},[62,3236,2005],{"class":116},[62,3238,120],{"class":71},[62,3240,2843],{"class":116},[62,3242,195],{"class":68},[62,3244,126],{"class":71},[62,3246,2762],{"class":116},[62,3248,3249],{"class":71},": spin ",[62,3251,3252],{"class":116},"0.8",[62,3254,1446],{"class":68},[62,3256,3257],{"class":116}," linear",[62,3259,3260],{"class":116}," infinite",[62,3262,146],{"class":71},[62,3264,3265,3267,3270,3272,3274,3276,3278,3280,3283,3285,3288,3290],{"class":64,"line":75},[62,3266,2689],{"class":68},[62,3268,3269],{"class":321}," spin",[62,3271,113],{"class":71},[62,3273,2726],{"class":102},[62,3275,113],{"class":71},[62,3277,32],{"class":116},[62,3279,120],{"class":71},[62,3281,3282],{"class":116},"rotate",[62,3284,350],{"class":71},[62,3286,3287],{"class":116},"360",[62,3289,2110],{"class":68},[62,3291,512],{"class":71},[62,3293,3294],{"class":64,"line":82},[62,3295,79],{"emptyLinePlaceholder":78},[62,3297,3298,3301,3303,3305,3307,3309,3311,3313,3315,3317,3319],{"class":64,"line":90},[62,3299,3300],{"class":102},".loader-dots",[62,3302,113],{"class":71},[62,3304,177],{"class":116},[62,3306,120],{"class":71},[62,3308,1227],{"class":116},[62,3310,126],{"class":71},[62,3312,1281],{"class":116},[62,3314,120],{"class":71},[62,3316,2913],{"class":116},[62,3318,400],{"class":68},[62,3320,146],{"class":71},[62,3322,3323,3325,3327,3329,3331,3333,3335,3337,3339,3341,3343,3345,3347,3349,3351,3353,3355,3357,3359,3361,3363,3365,3367,3369,3371,3373,3376,3379,3381,3384,3386,3388],{"class":64,"line":149},[62,3324,3300],{"class":102},[62,3326,1555],{"class":93},[62,3328,113],{"class":71},[62,3330,1560],{"class":116},[62,3332,120],{"class":71},[62,3334,2010],{"class":116},[62,3336,452],{"class":68},[62,3338,126],{"class":71},[62,3340,1386],{"class":116},[62,3342,120],{"class":71},[62,3344,2010],{"class":116},[62,3346,452],{"class":68},[62,3348,126],{"class":71},[62,3350,1582],{"class":116},[62,3352,120],{"class":71},[62,3354,587],{"class":116},[62,3356,350],{"class":71},[62,3358,342],{"class":321},[62,3360,674],{"class":71},[62,3362,2005],{"class":116},[62,3364,120],{"class":71},[62,3366,2843],{"class":116},[62,3368,195],{"class":68},[62,3370,126],{"class":71},[62,3372,2762],{"class":116},[62,3374,3375],{"class":71},": pulse ",[62,3377,3378],{"class":116},"1.4",[62,3380,1446],{"class":68},[62,3382,3383],{"class":116}," ease-in-out",[62,3385,3260],{"class":116},[62,3387,2452],{"class":116},[62,3389,146],{"class":71},[62,3391,3392,3394,3396,3399,3401,3403,3406,3409,3411,3413,3415,3417],{"class":64,"line":205},[62,3393,3300],{"class":102},[62,3395,1555],{"class":93},[62,3397,3398],{"class":102},":nth-child",[62,3400,350],{"class":71},[62,3402,434],{"class":116},[62,3404,3405],{"class":71},") { ",[62,3407,3408],{"class":116},"animation-delay",[62,3410,120],{"class":71},[62,3412,2264],{"class":116},[62,3414,1446],{"class":68},[62,3416,198],{"class":71},[62,3418,3419],{"class":201},"\u002F* staggered via negative delay *\u002F\n",[62,3421,3422,3424,3426,3428,3430,3432,3434,3436,3438,3441,3443],{"class":64,"line":241},[62,3423,3300],{"class":102},[62,3425,1555],{"class":93},[62,3427,3398],{"class":102},[62,3429,350],{"class":71},[62,3431,731],{"class":116},[62,3433,3405],{"class":71},[62,3435,3408],{"class":116},[62,3437,120],{"class":71},[62,3439,3440],{"class":116},"0.4",[62,3442,1446],{"class":68},[62,3444,146],{"class":71},[62,3446,3447,3449,3452,3454,3457,3459,3462,3464,3467,3469,3471,3473,3475,3477,3479,3481,3483,3485,3487,3490,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513],{"class":64,"line":290},[62,3448,2689],{"class":68},[62,3450,3451],{"class":321}," pulse",[62,3453,113],{"class":71},[62,3455,3456],{"class":102},"0%",[62,3458,25],{"class":71},[62,3460,3461],{"class":102},"80%",[62,3463,25],{"class":71},[62,3465,3466],{"class":102},"100%",[62,3468,113],{"class":71},[62,3470,32],{"class":116},[62,3472,120],{"class":71},[62,3474,2879],{"class":116},[62,3476,350],{"class":71},[62,3478,134],{"class":116},[62,3480,674],{"class":71},[62,3482,36],{"class":116},[62,3484,120],{"class":71},[62,3486,2913],{"class":116},[62,3488,3489],{"class":71},"; } ",[62,3491,3492],{"class":102},"40%",[62,3494,113],{"class":71},[62,3496,32],{"class":116},[62,3498,120],{"class":71},[62,3500,2879],{"class":116},[62,3502,350],{"class":71},[62,3504,422],{"class":116},[62,3506,674],{"class":71},[62,3508,36],{"class":116},[62,3510,120],{"class":71},[62,3512,422],{"class":116},[62,3514,3515],{"class":71},"; } }\n",[62,3517,3518],{"class":64,"line":296},[62,3519,79],{"emptyLinePlaceholder":78},[62,3521,3522,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542],{"class":64,"line":301},[62,3523,1486],{"class":68},[62,3525,2755],{"class":71},[62,3527,3183],{"class":102},[62,3529,25],{"class":71},[62,3531,3300],{"class":102},[62,3533,1555],{"class":93},[62,3535,113],{"class":71},[62,3537,2762],{"class":116},[62,3539,120],{"class":71},[62,3541,1297],{"class":116},[62,3543,3515],{"class":71},[39,3545,3547],{"id":3546},"project-7-capstone-landing-page","Project 7 — Capstone Landing Page",[14,3549,3550,3551,3553,3554,3556,3557,25,3559,3562,3563,3565,3566,3556,3568,3570,3571,3556,3573,3576,3577,3580,3581,25,3583,3585,3586,25,3589,25,3592,33,3594,3596,3597,3599],{},"Combines all skills. Requirements: reset + base (Project 1) with ",[18,3552,20],{},"; hero (full viewport, gradient, animated entrance, CTA buttons with hover); features grid (",[18,3555,1953],{}," + ",[18,3558,1958],{},[18,3560,3561],{},"drop-shadow"," for icon shadows, hover lift via ",[18,3564,32],{},"); pricing table (3 tiers, featured elevated via ",[18,3567,2017],{},[18,3569,2879],{},"); testimonials (scroll-snap carousel, CSS-only); footer (multi-column grid, collapses on mobile); navbar (Project 2); theming (",[18,3572,521],{},[18,3574,3575],{},"prefers-color-scheme",", CSS variables, ",[18,3578,3579],{},"color-mix()","); accessibility (",[18,3582,24],{},[18,3584,28],{},", semantic HTML, contrast); performance (",[18,3587,3588],{},"content-visibility: auto",[18,3590,3591],{},"font-display: swap",[18,3593,32],{},[18,3595,36],{}," only); i18n (logical properties throughout); architecture (BEM, ",[18,3598,20],{},").",[14,3601,3602,3606,3607,3610],{},[3603,3604,3605],"strong",{},"Bonus",": container queries for component responsiveness; ",[18,3608,3609],{},":has()"," for state-based styling (a pricing card with a \"popular\" badge); scroll-driven animation for a progress bar; view transition for theme toggle.",[39,3612,3614],{"id":3613},"production-checklist","Production Checklist",[50,3616,3618],{"language":3617},"markdown",[54,3619,3622],{"className":3620,"code":3621,"language":3617,"meta":58,"style":58},"language-markdown shiki shiki-themes github-light github-dark","- [ ] @layer architecture (reset, tokens, base, components, utilities)\n- [ ] CSS variables for all design tokens (OKLCH colors)\n- [ ] BEM naming (flat specificity, no nesting)\n- [ ] Flexbox for 1D, Grid for 2D\n- [ ] Responsive: auto-fit\u002Fminmax, clamp(), mobile-first media queries\n- [ ] Container queries for component contexts\n- [ ] Logical properties (i18n-ready, RTL)\n- [ ] :focus-visible for keyboard focus\n- [ ] prefers-reduced-motion respected\n- [ ] prefers-color-scheme + data-theme for dark mode\n- [ ] Animations use transform\u002Fopacity (not width\u002Fheight)\n- [ ] content-visibility: auto for long pages\n- [ ] font-display: swap for web fonts\n- [ ] Vendor prefixes via Autoprefixer\n- [ ] @supports for progressive enhancement\n- [ ] Semantic HTML, sufficient contrast\n",[18,3623,3624,3632,3639,3646,3653,3660,3667,3674,3681,3688,3695,3702,3709,3716,3723,3730],{"__ignoreMap":58},[62,3625,3626,3629],{"class":64,"line":65},[62,3627,3628],{"class":321},"-",[62,3630,3631],{"class":71}," [ ] @layer architecture (reset, tokens, base, components, utilities)\n",[62,3633,3634,3636],{"class":64,"line":75},[62,3635,3628],{"class":321},[62,3637,3638],{"class":71}," [ ] CSS variables for all design tokens (OKLCH colors)\n",[62,3640,3641,3643],{"class":64,"line":82},[62,3642,3628],{"class":321},[62,3644,3645],{"class":71}," [ ] BEM naming (flat specificity, no nesting)\n",[62,3647,3648,3650],{"class":64,"line":90},[62,3649,3628],{"class":321},[62,3651,3652],{"class":71}," [ ] Flexbox for 1D, Grid for 2D\n",[62,3654,3655,3657],{"class":64,"line":149},[62,3656,3628],{"class":321},[62,3658,3659],{"class":71}," [ ] Responsive: auto-fit\u002Fminmax, clamp(), mobile-first media queries\n",[62,3661,3662,3664],{"class":64,"line":205},[62,3663,3628],{"class":321},[62,3665,3666],{"class":71}," [ ] Container queries for component contexts\n",[62,3668,3669,3671],{"class":64,"line":241},[62,3670,3628],{"class":321},[62,3672,3673],{"class":71}," [ ] Logical properties (i18n-ready, RTL)\n",[62,3675,3676,3678],{"class":64,"line":290},[62,3677,3628],{"class":321},[62,3679,3680],{"class":71}," [ ] :focus-visible for keyboard focus\n",[62,3682,3683,3685],{"class":64,"line":296},[62,3684,3628],{"class":321},[62,3686,3687],{"class":71}," [ ] prefers-reduced-motion respected\n",[62,3689,3690,3692],{"class":64,"line":301},[62,3691,3628],{"class":321},[62,3693,3694],{"class":71}," [ ] prefers-color-scheme + data-theme for dark mode\n",[62,3696,3697,3699],{"class":64,"line":309},[62,3698,3628],{"class":321},[62,3700,3701],{"class":71}," [ ] Animations use transform\u002Fopacity (not width\u002Fheight)\n",[62,3703,3704,3706],{"class":64,"line":318},[62,3705,3628],{"class":321},[62,3707,3708],{"class":71}," [ ] content-visibility: auto for long pages\n",[62,3710,3711,3713],{"class":64,"line":365},[62,3712,3628],{"class":321},[62,3714,3715],{"class":71}," [ ] font-display: swap for web fonts\n",[62,3717,3718,3720],{"class":64,"line":389},[62,3719,3628],{"class":321},[62,3721,3722],{"class":71}," [ ] Vendor prefixes via Autoprefixer\n",[62,3724,3725,3727],{"class":64,"line":441},[62,3726,3628],{"class":321},[62,3728,3729],{"class":71}," [ ] @supports for progressive enhancement\n",[62,3731,3732,3734],{"class":64,"line":457},[62,3733,3628],{"class":321},[62,3735,3736],{"class":71}," [ ] Semantic HTML, sufficient contrast\n",[39,3738,3740],{"id":3739},"summary","Summary",[14,3742,3743,3744,3746,3747,3750],{},"You've applied the full CSS toolkit — from a layered reset and navbar to a grid dashboard, glassmorphism card, tooltips, loaders, and a capstone landing page. You can structure (",[18,3745,20],{},", BEM), layout (flex\u002Fgrid, responsive, container queries), theme (variables, dark mode, OKLCH), animate (transform\u002Fopacity), optimize (",[18,3748,3749],{},"content-visibility",", fonts), and ensure accessibility and i18n. This is a production-quality CSS foundation.",[3752,3753,3754],"style",{},"html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}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 .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":58,"searchDepth":75,"depth":75,"links":3756},[3757,3758,3759,3760,3761,3762,3763,3764,3765],{"id":41,"depth":75,"text":42},{"id":920,"depth":75,"text":921},{"id":1755,"depth":75,"text":1756},{"id":2163,"depth":75,"text":2164},{"id":2775,"depth":75,"text":2776},{"id":3170,"depth":75,"text":3171},{"id":3546,"depth":75,"text":3547},{"id":3613,"depth":75,"text":3614},{"id":3739,"depth":75,"text":3740},"Seven production-grade projects: a layered reset + token system, responsive navbar with CSS-only mobile menu, grid dashboard, glassmorphism card, no-JS tooltip system, animated loaders, and a capstone landing page. Code-first reference applying chapters 1-21.","md",{},"\u002Fcss\u002F22-exercises-and-projects",{"title":5,"description":3766},"css\u002F22-exercises-and-projects","S-n9FvW7dVKIxG4cNC3njM-duPXypudzFpkSa1wfGF8",1789924647606]