[{"data":1,"prerenderedAt":13},["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>",[],1775225737830]