[{"data":1,"prerenderedAt":625},["ShallowReactive",2],{"code-html-\u003C!-- ❌ Class in variable — CSS not gener":3,"code-html-\u003C!-- ✅ Literal class — CSS generated nor":4,"code-html-\u003C!-- ❌ v-for + dynamic binding -->\n\u003Cscri":5,"code-html-\u003C!-- ✅ Conditionals also as full strings":6,"code-js-\u002F\u002F ❌ Class generated by string concatena":7,"code-js-\u002F\u002F ✅ Use full class names as literals\nco":8,"code-html-\u003C!-- ⚠️ Which applies, w100px or w200px?":9,"code-html-\u003C!-- Add !important with i suffix -->\n\u003Cd":10,"code-css-html {\n  font-size: 10px;\n}\n\n\u002F* Now rem ":11,"nav":12},"\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- ❌ Class in variable — CSS not generated -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">script\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> setup\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#E5C07B\"> boxStyle\u003C\u002Fspan>\u003Cspan style=\"color:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\"> \"w100px h100px bg6366F1 br8px\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">script\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> :class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"boxStyle\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- ✅ Literal class — CSS generated normally -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"w100px h100px bg6366F1 br8px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- ❌ v-for + dynamic binding -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">script\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> setup\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#E5C07B\"> items\u003C\u002Fspan>\u003Cspan style=\"color:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  { \u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">cls\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"bg6366F1 br8px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  { \u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">cls\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"bg34D399 br12px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">script\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> v-for\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"item in items\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D19A66\">     :class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"item.cls\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- ✅ Conditionals also as full strings -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> :class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"active\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#98C379\">  ? 'bg6366F1 cFFFFFF'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#98C379\">  : 'bg27272A c71717A'\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- ✅ This way both class sets are\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">     present as literals in source and detected -->\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F ❌ Class generated by string concatenation\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#E5C07B\"> size\u003C\u002Fspan>\u003Cspan style=\"color:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> 16\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#E5C07B\"> cls\u003C\u002Fspan>\u003Cspan style=\"color:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\"> `fs\u003C\u002Fspan>\u003Cspan style=\"color:#C678DD\">${\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">size\u003C\u002Fspan>\u003Cspan style=\"color:#C678DD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">px`\u003C\u002Fspan>\u003Cspan style=\"color:#7F848E;font-style:italic\">  \u002F\u002F \"fs16px\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F → No \"fs16px\" literal in source\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F ❌ Class generated by function\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#C678DD\">function\u003C\u002Fspan>\u003Cspan style=\"color:#61AFEF\"> getBg\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75;font-style:italic\">color\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#C678DD\">  return\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\"> `bg\u003C\u002Fspan>\u003Cspan style=\"color:#C678DD\">${\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">color\u003C\u002Fspan>\u003Cspan style=\"color:#C678DD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#61AFEF\">getBg\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"FF0000\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">)  \u003C\u002Fspan>\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F \"bgFF0000\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F → No \"bgFF0000\" literal in source\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F ✅ Use full class names as literals\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#E5C07B\"> cls\u003C\u002Fspan>\u003Cspan style=\"color:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\"> isLarge\u003C\u002Fspan>\u003Cspan style=\"color:#C678DD\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\"> 'fs2rem'\u003C\u002Fspan>\u003Cspan style=\"color:#C678DD\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\"> 'fs1-4rem'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F → Both 'fs2rem' and 'fs1-4rem' are detected\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F ✅ List as literals in map object\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#E5C07B\"> sizeMap\u003C\u002Fspan>\u003Cspan style=\"color:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  sm\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">'fs1-2rem p8px'\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  md\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">'fs1-4rem p12px'\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  lg\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">'fs1-6rem p16px'\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F\u002F → All values exist as literals and are detected\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- ⚠️ Which applies, w100px or w200px? -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"w100px w200px bg18181B p16px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  Determined by declaration order in CSS file\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  (Not by order in HTML class attribute)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- ✅ Use only one class per property -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"w200px bg18181B p16px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  Specify only one clearly\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- Add !important with i suffix -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"w100pxi bg6366F1 p16px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  width: 100px !important\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- Override external library styles -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"external-component df jcc aici\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  Force layout with display: flex !important\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">html\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  font-size: \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">10\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* Now rem calculations are intuitive *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* 1.6rem = 16px *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* 2rem = 20px *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* 2.4rem = 24px *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* 10rem = 100px *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[13,22,46,88,136,166,199,229,289,301,346,361,391,403,418,439,448,460,469,481,493,568,583,598],{"title":14,"items":15},"Display",[16,19],{"label":17,"to":18},"display","\u002Fdocs\u002Fdisplay",{"label":20,"to":21},"visibility","\u002Fdocs\u002Fvisibility",{"title":23,"items":24},"Position",[25,28,31,34,37,40,43],{"label":26,"to":27},"bottom","\u002Fdocs\u002Fbottom",{"label":29,"to":30},"inset","\u002Fdocs\u002Finset",{"label":32,"to":33},"left","\u002Fdocs\u002Fleft",{"label":35,"to":36},"position","\u002Fdocs\u002Fposition",{"label":38,"to":39},"right","\u002Fdocs\u002Fright",{"label":41,"to":42},"top","\u002Fdocs\u002Ftop",{"label":44,"to":45},"z-index","\u002Fdocs\u002Fz-index",{"title":47,"items":48},"Flexbox",[49,52,55,58,61,64,67,70,73,76,79,82,85],{"label":50,"to":51},"align-content","\u002Fdocs\u002Falign-content",{"label":53,"to":54},"align-items","\u002Fdocs\u002Falign-items",{"label":56,"to":57},"align-self","\u002Fdocs\u002Falign-self",{"label":59,"to":60},"flex","\u002Fdocs\u002Fflex",{"label":62,"to":63},"flex-basis","\u002Fdocs\u002Fflex-basis",{"label":65,"to":66},"flex-direction","\u002Fdocs\u002Fflex-direction",{"label":68,"to":69},"flex-grow","\u002Fdocs\u002Fflex-grow",{"label":71,"to":72},"flex-shrink","\u002Fdocs\u002Fflex-shrink",{"label":74,"to":75},"flex-wrap","\u002Fdocs\u002Fflex-wrap",{"label":77,"to":78},"justify-content","\u002Fdocs\u002Fjustify-content",{"label":80,"to":81},"justify-items","\u002Fdocs\u002Fjustify-items",{"label":83,"to":84},"justify-self","\u002Fdocs\u002Fjustify-self",{"label":86,"to":87},"order","\u002Fdocs\u002Forder",{"title":89,"items":90},"Grid",[91,94,97,100,103,106,109,112,115,118,121,124,127,130,133],{"label":92,"to":93},"column-gap","\u002Fdocs\u002Fcolumn-gap",{"label":95,"to":96},"gap","\u002Fdocs\u002Fgap",{"label":98,"to":99},"grid-auto-columns","\u002Fdocs\u002Fgrid-auto-columns",{"label":101,"to":102},"grid-auto-flow","\u002Fdocs\u002Fgrid-auto-flow",{"label":104,"to":105},"grid-auto-rows","\u002Fdocs\u002Fgrid-auto-rows",{"label":107,"to":108},"grid-column-end","\u002Fdocs\u002Fgrid-column-end",{"label":110,"to":111},"grid-column-start","\u002Fdocs\u002Fgrid-column-start",{"label":113,"to":114},"grid-row-end","\u002Fdocs\u002Fgrid-row-end",{"label":116,"to":117},"grid-row-start","\u002Fdocs\u002Fgrid-row-start",{"label":119,"to":120},"grid-template-columns","\u002Fdocs\u002Fgrid-template-columns",{"label":122,"to":123},"grid-template-rows","\u002Fdocs\u002Fgrid-template-rows",{"label":125,"to":126},"place-content","\u002Fdocs\u002Fplace-content",{"label":128,"to":129},"place-items","\u002Fdocs\u002Fplace-items",{"label":131,"to":132},"place-self","\u002Fdocs\u002Fplace-self",{"label":134,"to":135},"row-gap","\u002Fdocs\u002Frow-gap",{"title":137,"items":138},"Sizing",[139,142,145,148,151,154,157,160,163],{"label":140,"to":141},"aspect-ratio","\u002Fdocs\u002Faspect-ratio",{"label":143,"to":144},"box-sizing","\u002Fdocs\u002Fbox-sizing",{"label":146,"to":147},"height","\u002Fdocs\u002Fheight",{"label":149,"to":150},"max-height","\u002Fdocs\u002Fmax-height",{"label":152,"to":153},"max-width","\u002Fdocs\u002Fmax-width",{"label":155,"to":156},"min-height","\u002Fdocs\u002Fmin-height",{"label":158,"to":159},"min-width","\u002Fdocs\u002Fmin-width",{"label":161,"to":162},"object-fit","\u002Fdocs\u002Fobject-fit",{"label":164,"to":165},"width","\u002Fdocs\u002Fwidth",{"title":167,"items":168},"Spacing",[169,172,175,178,181,184,187,190,193,196],{"label":170,"to":171},"margin","\u002Fdocs\u002Fmargin",{"label":173,"to":174},"margin-bottom","\u002Fdocs\u002Fmargin-bottom",{"label":176,"to":177},"margin-left","\u002Fdocs\u002Fmargin-left",{"label":179,"to":180},"margin-right","\u002Fdocs\u002Fmargin-right",{"label":182,"to":183},"margin-top","\u002Fdocs\u002Fmargin-top",{"label":185,"to":186},"padding","\u002Fdocs\u002Fpadding",{"label":188,"to":189},"padding-bottom","\u002Fdocs\u002Fpadding-bottom",{"label":191,"to":192},"padding-left","\u002Fdocs\u002Fpadding-left",{"label":194,"to":195},"padding-right","\u002Fdocs\u002Fpadding-right",{"label":197,"to":198},"padding-top","\u002Fdocs\u002Fpadding-top",{"title":200,"items":201},"Typography",[202,205,208,211,214,217,220,223,226],{"label":203,"to":204},"font-kerning","\u002Fdocs\u002Ffont-kerning",{"label":206,"to":207},"font-size","\u002Fdocs\u002Ffont-size",{"label":209,"to":210},"font-style","\u002Fdocs\u002Ffont-style",{"label":212,"to":213},"font-variant","\u002Fdocs\u002Ffont-variant",{"label":215,"to":216},"font-weight","\u002Fdocs\u002Ffont-weight",{"label":218,"to":219},"letter-spacing","\u002Fdocs\u002Fletter-spacing",{"label":221,"to":222},"line-height","\u002Fdocs\u002Fline-height",{"label":224,"to":225},"text-indent","\u002Fdocs\u002Ftext-indent",{"label":227,"to":228},"word-spacing","\u002Fdocs\u002Fword-spacing",{"title":230,"items":231},"Text",[232,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286],{"label":233,"to":234},"direction","\u002Fdocs\u002Fdirection",{"label":236,"to":237},"hyphens","\u002Fdocs\u002Fhyphens",{"label":239,"to":240},"line-clamp","\u002Fdocs\u002Fline-clamp",{"label":242,"to":243},"overflow-wrap","\u002Fdocs\u002Foverflow-wrap",{"label":245,"to":246},"tab-size","\u002Fdocs\u002Ftab-size",{"label":248,"to":249},"text-align","\u002Fdocs\u002Ftext-align",{"label":251,"to":252},"text-align-last","\u002Fdocs\u002Ftext-align-last",{"label":254,"to":255},"text-decoration","\u002Fdocs\u002Ftext-decoration",{"label":257,"to":258},"text-decoration-style","\u002Fdocs\u002Ftext-decoration-style",{"label":260,"to":261},"text-decoration-thickness","\u002Fdocs\u002Ftext-decoration-thickness",{"label":263,"to":264},"text-justify","\u002Fdocs\u002Ftext-justify",{"label":266,"to":267},"text-orientation","\u002Fdocs\u002Ftext-orientation",{"label":269,"to":270},"text-overflow","\u002Fdocs\u002Ftext-overflow",{"label":272,"to":273},"text-transform","\u002Fdocs\u002Ftext-transform",{"label":275,"to":276},"text-underline-offset","\u002Fdocs\u002Ftext-underline-offset",{"label":278,"to":279},"vertical-align","\u002Fdocs\u002Fvertical-align",{"label":281,"to":282},"white-space","\u002Fdocs\u002Fwhite-space",{"label":284,"to":285},"word-break","\u002Fdocs\u002Fword-break",{"label":287,"to":288},"writing-mode","\u002Fdocs\u002Fwriting-mode",{"title":290,"items":291},"Color",[292,295,298],{"label":293,"to":294},"color","\u002Fdocs\u002Fcolor",{"label":296,"to":297},"color-scheme","\u002Fdocs\u002Fcolor-scheme",{"label":299,"to":300},"opacity","\u002Fdocs\u002Fopacity",{"title":302,"items":303},"Border",[304,307,310,313,316,319,322,325,328,331,334,337,340,343],{"label":305,"to":306},"border","\u002Fdocs\u002Fborder",{"label":308,"to":309},"border-bottom","\u002Fdocs\u002Fborder-bottom",{"label":311,"to":312},"border-bottom-width","\u002Fdocs\u002Fborder-bottom-width",{"label":314,"to":315},"border-collapse","\u002Fdocs\u002Fborder-collapse",{"label":317,"to":318},"border-color","\u002Fdocs\u002Fborder-color",{"label":320,"to":321},"border-left","\u002Fdocs\u002Fborder-left",{"label":323,"to":324},"border-left-width","\u002Fdocs\u002Fborder-left-width",{"label":326,"to":327},"border-radius","\u002Fdocs\u002Fborder-radius",{"label":329,"to":330},"border-right","\u002Fdocs\u002Fborder-right",{"label":332,"to":333},"border-right-width","\u002Fdocs\u002Fborder-right-width",{"label":335,"to":336},"border-spacing","\u002Fdocs\u002Fborder-spacing",{"label":338,"to":339},"border-top","\u002Fdocs\u002Fborder-top",{"label":341,"to":342},"border-top-width","\u002Fdocs\u002Fborder-top-width",{"label":344,"to":345},"border-width","\u002Fdocs\u002Fborder-width",{"title":347,"items":348},"Outline",[349,352,355,358],{"label":350,"to":351},"outline","\u002Fdocs\u002Foutline",{"label":353,"to":354},"outline-offset","\u002Fdocs\u002Foutline-offset",{"label":356,"to":357},"outline-style","\u002Fdocs\u002Foutline-style",{"label":359,"to":360},"outline-width","\u002Fdocs\u002Foutline-width",{"title":362,"items":363},"Background",[364,367,370,373,376,379,382,385,388],{"label":365,"to":366},"background","\u002Fdocs\u002Fbackground",{"label":368,"to":369},"background-attachment","\u002Fdocs\u002Fbackground-attachment",{"label":371,"to":372},"background-blend-mode","\u002Fdocs\u002Fbackground-blend-mode",{"label":374,"to":375},"background-clip","\u002Fdocs\u002Fbackground-clip",{"label":377,"to":378},"background-color","\u002Fdocs\u002Fbackground-color",{"label":380,"to":381},"background-origin","\u002Fdocs\u002Fbackground-origin",{"label":383,"to":384},"background-position","\u002Fdocs\u002Fbackground-position",{"label":386,"to":387},"background-repeat","\u002Fdocs\u002Fbackground-repeat",{"label":389,"to":390},"background-size","\u002Fdocs\u002Fbackground-size",{"title":392,"items":393},"Shadow",[394,397,400],{"label":395,"to":396},"box-shadow","\u002Fdocs\u002Fbox-shadow",{"label":398,"to":399},"text-shadow","\u002Fdocs\u002Ftext-shadow",{"label":401,"to":402},"text-stroke","\u002Fdocs\u002Ftext-stroke",{"title":404,"items":405},"Transition",[406,409,412,415],{"label":407,"to":408},"transition","\u002Fdocs\u002Ftransition",{"label":410,"to":411},"transition-delay","\u002Fdocs\u002Ftransition-delay",{"label":413,"to":414},"transition-property","\u002Fdocs\u002Ftransition-property",{"label":416,"to":417},"transition-timing-function","\u002Fdocs\u002Ftransition-timing-function",{"title":419,"items":420},"Transform",[421,424,427,430,433,436],{"label":422,"to":423},"backface-visibility","\u002Fdocs\u002Fbackface-visibility",{"label":425,"to":426},"perspective","\u002Fdocs\u002Fperspective",{"label":428,"to":429},"perspective-origin","\u002Fdocs\u002Fperspective-origin",{"label":431,"to":432},"transform","\u002Fdocs\u002Ftransform",{"label":434,"to":435},"transform-origin","\u002Fdocs\u002Ftransform-origin",{"label":437,"to":438},"transform-style","\u002Fdocs\u002Ftransform-style",{"title":440,"items":441},"Filter",[442,445],{"label":443,"to":444},"backdrop-filter","\u002Fdocs\u002Fbackdrop-filter",{"label":446,"to":447},"filter","\u002Fdocs\u002Ffilter",{"title":449,"items":450},"Overflow",[451,454,457],{"label":452,"to":453},"overflow","\u002Fdocs\u002Foverflow",{"label":455,"to":456},"overflow-x","\u002Fdocs\u002Foverflow-x",{"label":458,"to":459},"overflow-y","\u002Fdocs\u002Foverflow-y",{"title":461,"items":462},"Float & Clear",[463,466],{"label":464,"to":465},"clear","\u002Fdocs\u002Fclear",{"label":467,"to":468},"float","\u002Fdocs\u002Ffloat",{"title":470,"items":471},"Table",[472,475,478],{"label":473,"to":474},"caption-side","\u002Fdocs\u002Fcaption-side",{"label":476,"to":477},"empty-cells","\u002Fdocs\u002Fempty-cells",{"label":479,"to":480},"table-layout","\u002Fdocs\u002Ftable-layout",{"title":482,"items":483},"List",[484,487,490],{"label":485,"to":486},"list-style-image","\u002Fdocs\u002Flist-style-image",{"label":488,"to":489},"list-style-position","\u002Fdocs\u002Flist-style-position",{"label":491,"to":492},"list-style-type","\u002Fdocs\u002Flist-style-type",{"title":494,"items":495},"Interaction",[496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565],{"label":497,"to":498},"appearance","\u002Fdocs\u002Fappearance",{"label":500,"to":501},"cursor","\u002Fdocs\u002Fcursor",{"label":503,"to":504},"overscroll-behavior","\u002Fdocs\u002Foverscroll-behavior",{"label":506,"to":507},"overscroll-behavior-x","\u002Fdocs\u002Foverscroll-behavior-x",{"label":509,"to":510},"overscroll-behavior-y","\u002Fdocs\u002Foverscroll-behavior-y",{"label":512,"to":513},"pointer-events","\u002Fdocs\u002Fpointer-events",{"label":515,"to":516},"resize","\u002Fdocs\u002Fresize",{"label":518,"to":519},"scroll-behavior","\u002Fdocs\u002Fscroll-behavior",{"label":521,"to":522},"scroll-margin","\u002Fdocs\u002Fscroll-margin",{"label":524,"to":525},"scroll-margin-bottom","\u002Fdocs\u002Fscroll-margin-bottom",{"label":527,"to":528},"scroll-margin-left","\u002Fdocs\u002Fscroll-margin-left",{"label":530,"to":531},"scroll-margin-right","\u002Fdocs\u002Fscroll-margin-right",{"label":533,"to":534},"scroll-margin-top","\u002Fdocs\u002Fscroll-margin-top",{"label":536,"to":537},"scroll-padding","\u002Fdocs\u002Fscroll-padding",{"label":539,"to":540},"scroll-padding-bottom","\u002Fdocs\u002Fscroll-padding-bottom",{"label":542,"to":543},"scroll-padding-left","\u002Fdocs\u002Fscroll-padding-left",{"label":545,"to":546},"scroll-padding-right","\u002Fdocs\u002Fscroll-padding-right",{"label":548,"to":549},"scroll-padding-top","\u002Fdocs\u002Fscroll-padding-top",{"label":551,"to":552},"scroll-snap-align","\u002Fdocs\u002Fscroll-snap-align",{"label":554,"to":555},"scroll-snap-stop","\u002Fdocs\u002Fscroll-snap-stop",{"label":557,"to":558},"scroll-snap-type","\u002Fdocs\u002Fscroll-snap-type",{"label":560,"to":561},"scrollbar-width","\u002Fdocs\u002Fscrollbar-width",{"label":563,"to":564},"touch-action","\u002Fdocs\u002Ftouch-action",{"label":566,"to":567},"user-select","\u002Fdocs\u002Fuser-select",{"title":569,"items":570},"Animation",[571,574,577,580],{"label":572,"to":573},"animation-direction","\u002Fdocs\u002Fanimation-direction",{"label":575,"to":576},"animation-fill-mode","\u002Fdocs\u002Fanimation-fill-mode",{"label":578,"to":579},"animation-iteration-count","\u002Fdocs\u002Fanimation-iteration-count",{"label":581,"to":582},"animation-play-state","\u002Fdocs\u002Fanimation-play-state",{"title":584,"items":585},"Column",[586,589,592,595],{"label":587,"to":588},"column-fill","\u002Fdocs\u002Fcolumn-fill",{"label":590,"to":591},"column-rule-width","\u002Fdocs\u002Fcolumn-rule-width",{"label":593,"to":594},"column-span","\u002Fdocs\u002Fcolumn-span",{"label":596,"to":597},"column-width","\u002Fdocs\u002Fcolumn-width",{"title":599,"items":600},"Misc",[601,604,607,610,613,616,619,622],{"label":602,"to":603},"all","\u002Fdocs\u002Fall",{"label":605,"to":606},"contain","\u002Fdocs\u002Fcontain",{"label":608,"to":609},"content","\u002Fdocs\u002Fcontent",{"label":611,"to":612},"content-visibility","\u002Fdocs\u002Fcontent-visibility",{"label":614,"to":615},"image-rendering","\u002Fdocs\u002Fimage-rendering",{"label":617,"to":618},"isolation","\u002Fdocs\u002Fisolation",{"label":620,"to":621},"mix-blend-mode","\u002Fdocs\u002Fmix-blend-mode",{"label":623,"to":624},"will-change","\u002Fdocs\u002Fwill-change",1775651701654]