firefly-compiler 0.5.39 → 0.5.41

package/fireflysite/Styles.ff

@@ -1,567 +1,567 @@
-import Css from ff:lux
-
-mobileMediaQuery: String = "@media only screen and (max-width: 840px)"
-mobileOrTabletMediaQuery: String = "@media only screen and (max-width: 1140px)"
-
-pageCss: CssClass = CssClass(
-    [
-        Css.display("flex")
-        Css.flexDirection("column")
-        Css.minHeight("100vh")
-        Css.fontFamily("'Firefly Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif")
-        Css.textRendering("optimizeLegibility")
-    ]
-    [
-        CssNest("*:focus-visible", [
-            Css.outline("2px solid #ecc45e")
-            Css.outlineOffset("2px")
-        ], [])
-    ]
-    []
-)
-
-whiteLinkCss: CssClass = CssClass(
-    [
-        Css.color("#000000")
-        Css.textDecoration("none")
-        Css.fontWeight("600")
-    ]
-    [
-        CssNest("&:hover", [Css.textDecoration("underline")], [])
-        CssNest("&[aria-current='page']", [Css.color("#000000")], [])
-    ]
-    []
-)
-
-greenLinkCss: CssClass = CssClass(
-    [
-        Css.color("#4ec9b0")
-        Css.textDecoration("none")
-    ]
-    [
-        CssNest("&:hover", [Css.textDecoration("underline")], [])
-    ]
-    []
-)
-
-searchInputCss: CssClass = CssClass(
-    [
-        Css.appearance("none")
-        Css.boxSizing("border-box")
-        Css.marginLeft("20px")
-        Css.marginRight("25px")
-        Css.width("calc(100% - 20px - 25px)")
-        Css.display("flex")
-        Css.border("none")
-        Css.borderBottom("2px solid #000000")
-        Css.backgroundColor("#ffffff50")
-        Css.color("#000000")
-        Css.height("34px")
-        Css.fontSize("16px")
-        Css.borderRadius("0")
-        Css.paddingLeft("5px")
-        Css.paddingRight("5px")
-        Css.paddingTop("0")
-        Css.paddingBottom("0")
-        Css.marginBottom("20px")
-    ]
-    [
-        CssNest("&::placeholder", [
-            Css.color("#000000")
-            Css.opacity("unset")
-            Css.fontSize("16px")
-        ], [])
-        CssNest("&:focus::placeholder", [
-            Css.opacity("0")
-        ], [])
-    ]
-    []
-)
-
-guideCss: CssClass = CssClass(
-    [
-        Css.display("flex")
-        Css.minHeight("100vh")
-    ]
-    []
-    []
-)
-
-guideTopbarCss: CssClass = CssClass(
-    [
-        Css.display("none")
-        Css.justifyContent("space-between")
-        Css.alignItems("center")
-        Css.backgroundColor("#ecc45e")
-        Css.color("#000000")
-        Css.position("fixed")
-        Css.top("0")
-        Css.left("0")
-        Css.right("0")
-        Css.height("76px")
-    ]
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.display("flex")
-        ], [])
-    ]
-    []
-)
-
-guideTopbarLogoCss: CssClass = CssClass(
-    [
-        Css.display("flex")
-        Css.gap("20px")
-        Css.alignItems("center")
-        Css.justifyContent("center")
-        Css.fontSize("25px")
-        Css.letterSpacing("5px")
-        Css.textTransform("uppercase")
-        Css.color("inherit")
-        Css.textDecoration("none")
-        Css.height("70px")
-        Css.paddingLeft("20px")
-    ]
-    [
-        CssNest("&>img", [Css.width("70px")], [])
-    ]
-    []
-)
-
-guideTopbarButtonCss: CssClass = CssClass(
-    [
-        Css.display("none")
-        Css.appearance("none")
-        Css.border("none")
-        Css.outline("none")
-        Css.background("""url('data:image/svg+xml,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_788_122)"><rect x="4" y="9" width="25" height="2" rx="1" fill="%23000000"/><rect x="4" y="17" width="25" height="2" rx="1" fill="%23000000"/><rect x="4" y="25" width="25" height="2" rx="1" fill="%23000000"/></g><defs><clipPath id="clip0_788_122"><rect width="50" height="50" fill="white"/></clipPath></defs></svg>') no-repeat center""")
-        Css.backgroundSize("60px 60px")
-        Css.backgroundPosition("20px 16px")
-        Css.fontSize("20px")
-        Css.cursor("pointer")
-        Css.webkitTapHighlightColor("transparent")
-        Css.padding("0")
-        Css.margin("0")
-        Css.height("76px")
-        Css.width("76px")
-        Css.marginLeft("auto")
-    ]
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.display("block")
-        ], [])
-    ]
-    []
-)
-
-guideSidebarButtonCss: CssClass = CssClass(
-    [
-        Css.position("fixed")
-        Css.bottom("-68px")
-        Css.right("-65px")
-        Css.width("70px")
-        Css.height("70px")
-        Css.padding("0")
-        Css.boxSizing("border-box")
-        Css.background("""url('data:image/svg+xml,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_788_122)"><rect x="4" y="9" width="30" height="3" rx="1" fill="%23ecc45e"/><rect x="4" y="17" width="21" height="3" rx="1" fill="%23ecc45e"/><rect x="4" y="25" width="13" height="3" rx="1" fill="%23ecc45e"/></g><defs><clipPath id="clip0_788_122"><rect width="50" height="50" fill="white"/></clipPath></defs></svg>') no-repeat center""")
-        Css.backgroundSize("70px 70px")
-        Css.appearance("none")
-        Css.border("none")
-        Css.outline("none")
-        Css.transformOrigin("top left")
-        Css.transform("rotate(180deg) scale(0, 0)")
-        Css.transition("100ms transform")
-    ]
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.display("block")
-            Css.transform("rotate(180deg) scale(1, 1)")
-        ], [])        
-    ]
-    []
-)
-
-guideSidebarButtonOpenCss: CssClass = CssClass(
-    []
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.transform("rotate(180deg) scale(0, 1)")
-        ], [])
-    ]
-    []
-)
-
-guideSidebarBackdropCss: CssClass = CssClass(
-    [
-        Css.display("none")
-        Css.position("fixed")
-        Css.top("0")
-        Css.bottom("0px")
-        Css.left("0")
-        Css.right("0px")
-        Css.backgroundColor("rgba(20, 20, 0, 0.6)")
-        Css.touchAction("none")
-    ]
-    []
-    []
-)
-
-guideSidebarBackdropOpenCss: CssClass = CssClass(
-    []
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.display("block")
-        ], [])
-    ]
-    []
-)
-
-guideSidebarCss: CssClass = CssClass(
-    [
-        Css.position("fixed")
-        Css.top("0")
-        Css.bottom("0")
-        Css.left("0")
-        Css.width("300px")
-        Css.boxSizing("border-box")
-        Css.paddingTop("10px")
-        Css.backgroundColor("#ecc45e")
-        Css.overflowY("auto")
-        Css.transition("200ms transform")
-        Css.scrollbarWidth("thin")
-        Css.scrollbarColor("#333333 #ecc45e")
-    ]
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.order("2")
-            Css.width("calc(100% - 50px)")
-            Css.maxWidth("300px")
-            Css.minHeight("auto")
-            Css.height("auto")
-            Css.paddingTop("20px")
-            Css.paddingBottom("20px")
-            Css.transform("translateX(-110%)")
-            Css.outline("1px solid rgba(0, 0, 0, 0.15)")
-        ], [])
-        CssNest("& *:focus-visible", [
-            Css.outline("2px solid #000000")
-            Css.outlineOffset("2px")
-        ], [])
-    ]
-    []
-)
-
-guideSidebarOpenCss: CssClass = CssClass(
-    []
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.transform("translateX(0)")
-        ], [])
-    ]
-    []
-)
-
-guideSidebarLogoCss: CssClass = CssClass(
-    [
-        Css.display("flex")
-        Css.gap("20px")
-        Css.alignItems("center")
-        Css.justifyContent("center")
-        Css.fontSize("30px")
-        Css.letterSpacing("5px")
-        Css.textTransform("uppercase")
-        Css.color("inherit")
-        Css.textDecoration("none")
-        Css.height("100px")
-    ]
-    [
-        CssNest("&>img", [Css.width("100px")], [])
-        CssNest("&>div", [Css.width("145px")], [])
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.display("none")
-        ], [])
-    ]
-    []
-)
-
-guideSidebarUl1Css: CssClass = CssClass(
-    [
-        Css.display("flex")
-        Css.flexDirection("column")
-        Css.gap("35px")
-        Css.listStyle("none")
-        Css.margin("0px")
-        Css.padding("20px")
-        Css.opacity("0.85")
-        Css.transition("100ms opacity")
-    ]
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.opacity("1.00")
-        ], [])
-        CssNest("&:hover", [
-            Css.opacity("1.00")
-        ], [])
-    ]
-    []
-)
-
-guideSidebarLi1Css: CssClass = CssClass(
-    [
-        Css.listStyle("none")
-        Css.fontSize("17px")
-    ]
-    []
-    []
-)
-
-guideSidebarUl2Css: CssClass = CssClass(
-    [
-        Css.display("flex")
-        Css.flexDirection("column")
-        Css.gap("15px")
-        Css.listStyle("none")
-        Css.margin("0px")
-        Css.paddingLeft("15px")
-        Css.paddingTop("20px")
-        Css.paddingRight("0")
-        Css.paddingBottom("5px")
-        Css.fontSize("17px")
-    ]
-    []
-    []
-)
-
-guideSidebarLi2Css: CssClass = CssClass(
-    [
-        Css.listStyle("none")
-    ]
-    []
-    []
-)
-
-guideMainCss: CssClass = CssClass(
-    [
-        Css.flex("1")
-        Css.display("flex")
-        Css.justifyContent("center")
-        Css.marginLeft("300px")
-        Css.paddingLeft("20px")
-        Css.paddingRight("calc(max(20px, 25vw - 300px))")
-        Css.paddingTop("80px")
-        Css.paddingBottom("80px")
-        Css.position("relative")
-        Css.boxSizing("content-box")
-        Css.color("#333333")
-        Css.fontWeight("500")
-    ]
-    [
-        CssNest(mobileOrTabletMediaQuery, [
-            Css.marginLeft("0")
-            Css.paddingLeft("20px")
-            Css.paddingRight("20px")
-            Css.paddingTop("120px")
-            Css.paddingBottom("70px")
-        ], [])
-    ]
-    []
-)
-
-guideDocumentCss: CssClass = CssClass(
-    [
-        Css.maxWidth("800px")
-        Css.width("100%")
-        Css.fontSize("17px")
-        Css.lineHeight("1.7")
-    ]
-    []
-    []
-)
-
-guideSplitCss: CssClass = CssClass(
-    [
-        Css.display("flex")
-        Css.gap("30px")
-        Css.justifyContent("space-between")
-        Css.alignItems("stretch")
-        Css.marginTop("170px")
-        Css.marginBottom("170px")
-    ]
-    [
-        CssNest("&>div:first-child", [
-            Css.width("calc(345px - 15px)")
-            Css.paddingTop("10px")
-            Css.paddingBottom("15px")
-        ], [])
-        CssNest("&>div:last-child", [
-            Css.width("calc(455px - 15px)")
-        ], [])
-        CssNest("&>div>:first-child", [
-            Css.marginTop("0")
-        ], [])
-        CssNest("&>div>:last-child", [
-            Css.marginBottom("0")
-        ], [])
-        CssNest("&>div>pre", [
-            Css.overflowX("hidden")
-            Css.minHeight("100%")
-        ], [])
-        CssNest(mobileMediaQuery, [
-            Css.flexDirection("column")
-        ], [
-            CssNest("&>div:first-child", [
-                Css.width("auto")
-            ], [])
-            CssNest("&>div:last-child", [
-                Css.width("auto")
-            ], [])
-            CssNest("&>div>pre", [
-                Css.overflowX("auto")
-            ], [])
-        ])
-    ]
-    []
-)
-
-guideSplitHeadingCss: CssClass = CssClass(
-    [
-        Css.fontSize("23px")
-        Css.fontWeight("600")
-        Css.margin("0")
-    ]
-    [
-        CssNest(mobileMediaQuery, [
-            Css.fontSize("21px")
-        ], [])
-    ]
-    []
-)
-
-guideH1Css: CssClass = CssClass(
-    [
-        Css.fontSize("32px")
-        Css.fontWeight("600")
-        Css.marginTop("0px")
-    ]
-    [
-        CssNest(mobileMediaQuery, [
-            Css.fontSize("26px")
-        ], [])
-    ]
-    []
-)
-
-guideH2Css: CssClass = CssClass(
-    [
-        Css.fontSize("28px")
-        Css.fontWeight("600")
-        Css.marginTop("70px")
-    ]
-    [
-        CssNest(mobileMediaQuery, [
-            Css.fontSize("23px")
-        ], [])
-    ]
-    []
-)
-
-guideCodeCss: CssClass = CssClass(
-    [
-        Css.fontFamily("'Firefly Mono', monospace")
-        Css.fontSize("15px")
-        Css.lineHeight("1.3")
-        Css.color("#000000")
-        Css.whiteSpace("pre-wrap")
-        Css.wordBreak("break-all")
-    ]
-    [
-        CssNest(mobileMediaQuery, [
-            Css.fontSize("14px")
-            Css.lineHeight("1.4")
-        ], [])
-        CssNest("pre>&", [
-            Css.color("#4ec9b0")
-            Css.whiteSpace("pre")
-        ], [])
-    ]
-    []
-)
-
-guideCodeBlockCss: CssClass = CssClass(
-    [
-        Css.lineHeight("1.3")
-        Css.background("#1f1f1f")
-        Css.padding("20px 25px")
-        Css.margin("30px 0")
-        Css.borderRadius("5px")
-        Css.boxSizing("border-box")
-        Css.overflowX("auto")
-        Css.maxWidth("100%")
-    ]
-    [
-        CssNest(mobileMediaQuery, [
-            Css.maxWidth("calc(100vw)")
-            Css.marginLeft("-20px")
-            Css.marginRight("-20px")
-            Css.borderRadius("0")
-            Css.borderLeft("none")
-            Css.borderRight("none")
-            Css.padding("20px 20px")
-            Css.lineHeight("1.4")
-        ], [])
-    ]
-    []
-)
-
-guideLinkCss: CssClass = CssClass(
-    [
-        Css.color("#000000")
-        Css.textDecoration("2px #ecc45e underline")
-        Css.fontWeight("600")
-    ]
-    [
-        CssNest("&:hover", [
-            Css.textDecoration("2px #ecc45e underline")
-        ], [])
-    ]
-    []
-)
-
-guideNextButtonCss: CssClass = CssClass(
-    [
-        Css.marginTop("100px")
-    ]
-    []
-    []
-)
-
-guideButtonCss: CssClass = CssClass(
-    [
-        Css.padding("15px 30px")
-        Css.borderRadius("5px")
-        Css.background("#ecc45e")
-        Css.color("#000000")
-        Css.border("2px solid black")
-        Css.textDecoration("none")
-        Css.fontSize("17px")
-        Css.fontWeight("600")
-    ]
-    [
-        CssNest(mobileMediaQuery, [
-            Css.fontSize("15px")
-        ], [])
-        CssNest("&::after", [
-            Css.content("' →'")
-        ], [])
-    ]
-    []
-)
-
-codeCommentCss: CssClass = CssClass([Css.color("#757c8a")], [], [])
-codeStringCss: CssClass = CssClass([Css.color("#ce9178")], [], [])
-codeNumberCss: CssClass = CssClass([Css.color("#b5cea8")], [], [])
-codeKeywordCss: CssClass = CssClass([Css.color("#569cd6")], [], [])
-codeTypeCss: CssClass = CssClass([Css.color("#4ec9b0")], [], [])
-codeVariableCss: CssClass = CssClass([Css.color("#9cdcfe")], [], [])
-codeCallCss: CssClass = CssClass([Css.color("#dcdcaa")], [], [])
-codeOtherCss: CssClass = CssClass([Css.color("#cccccc")], [], [])
+import Css from ff:lux
+
+mobileMediaQuery: String = "@media only screen and (max-width: 840px)"
+mobileOrTabletMediaQuery: String = "@media only screen and (max-width: 1140px)"
+
+pageCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.flexDirection("column")
+        Css.minHeight("100vh")
+        Css.fontFamily("'Firefly Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif")
+        Css.textRendering("optimizeLegibility")
+    ]
+    [
+        CssNest("*:focus-visible", [
+            Css.outline("2px solid #ecc45e")
+            Css.outlineOffset("2px")
+        ], [])
+    ]
+    []
+)
+
+whiteLinkCss: CssClass = CssClass(
+    [
+        Css.color("#000000")
+        Css.textDecoration("none")
+        Css.fontWeight("600")
+    ]
+    [
+        CssNest("&:hover", [Css.textDecoration("underline")], [])
+        CssNest("&[aria-current='page']", [Css.color("#000000")], [])
+    ]
+    []
+)
+
+greenLinkCss: CssClass = CssClass(
+    [
+        Css.color("#4ec9b0")
+        Css.textDecoration("none")
+    ]
+    [
+        CssNest("&:hover", [Css.textDecoration("underline")], [])
+    ]
+    []
+)
+
+searchInputCss: CssClass = CssClass(
+    [
+        Css.appearance("none")
+        Css.boxSizing("border-box")
+        Css.marginLeft("20px")
+        Css.marginRight("25px")
+        Css.width("calc(100% - 20px - 25px)")
+        Css.display("flex")
+        Css.border("none")
+        Css.borderBottom("2px solid #000000")
+        Css.backgroundColor("#ffffff50")
+        Css.color("#000000")
+        Css.height("34px")
+        Css.fontSize("16px")
+        Css.borderRadius("0")
+        Css.paddingLeft("5px")
+        Css.paddingRight("5px")
+        Css.paddingTop("0")
+        Css.paddingBottom("0")
+        Css.marginBottom("20px")
+    ]
+    [
+        CssNest("&::placeholder", [
+            Css.color("#000000")
+            Css.opacity("unset")
+            Css.fontSize("16px")
+        ], [])
+        CssNest("&:focus::placeholder", [
+            Css.opacity("0")
+        ], [])
+    ]
+    []
+)
+
+guideCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.minHeight("100vh")
+    ]
+    []
+    []
+)
+
+guideTopbarCss: CssClass = CssClass(
+    [
+        Css.display("none")
+        Css.justifyContent("space-between")
+        Css.alignItems("center")
+        Css.backgroundColor("#ecc45e")
+        Css.color("#000000")
+        Css.position("fixed")
+        Css.top("0")
+        Css.left("0")
+        Css.right("0")
+        Css.height("76px")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("flex")
+        ], [])
+    ]
+    []
+)
+
+guideTopbarLogoCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.gap("20px")
+        Css.alignItems("center")
+        Css.justifyContent("center")
+        Css.fontSize("25px")
+        Css.letterSpacing("5px")
+        Css.textTransform("uppercase")
+        Css.color("inherit")
+        Css.textDecoration("none")
+        Css.height("70px")
+        Css.paddingLeft("20px")
+    ]
+    [
+        CssNest("&>img", [Css.width("70px")], [])
+    ]
+    []
+)
+
+guideTopbarButtonCss: CssClass = CssClass(
+    [
+        Css.display("none")
+        Css.appearance("none")
+        Css.border("none")
+        Css.outline("none")
+        Css.background("""url('data:image/svg+xml,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_788_122)"><rect x="4" y="9" width="25" height="2" rx="1" fill="%23000000"/><rect x="4" y="17" width="25" height="2" rx="1" fill="%23000000"/><rect x="4" y="25" width="25" height="2" rx="1" fill="%23000000"/></g><defs><clipPath id="clip0_788_122"><rect width="50" height="50" fill="white"/></clipPath></defs></svg>') no-repeat center""")
+        Css.backgroundSize("60px 60px")
+        Css.backgroundPosition("20px 16px")
+        Css.fontSize("20px")
+        Css.cursor("pointer")
+        Css.webkitTapHighlightColor("transparent")
+        Css.padding("0")
+        Css.margin("0")
+        Css.height("76px")
+        Css.width("76px")
+        Css.marginLeft("auto")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("block")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarButtonCss: CssClass = CssClass(
+    [
+        Css.position("fixed")
+        Css.bottom("-68px")
+        Css.right("-65px")
+        Css.width("70px")
+        Css.height("70px")
+        Css.padding("0")
+        Css.boxSizing("border-box")
+        Css.background("""url('data:image/svg+xml,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_788_122)"><rect x="4" y="9" width="30" height="3" rx="1" fill="%23ecc45e"/><rect x="4" y="17" width="21" height="3" rx="1" fill="%23ecc45e"/><rect x="4" y="25" width="13" height="3" rx="1" fill="%23ecc45e"/></g><defs><clipPath id="clip0_788_122"><rect width="50" height="50" fill="white"/></clipPath></defs></svg>') no-repeat center""")
+        Css.backgroundSize("70px 70px")
+        Css.appearance("none")
+        Css.border("none")
+        Css.outline("none")
+        Css.transformOrigin("top left")
+        Css.transform("rotate(180deg) scale(0, 0)")
+        Css.transition("100ms transform")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("block")
+            Css.transform("rotate(180deg) scale(1, 1)")
+        ], [])        
+    ]
+    []
+)
+
+guideSidebarButtonOpenCss: CssClass = CssClass(
+    []
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.transform("rotate(180deg) scale(0, 1)")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarBackdropCss: CssClass = CssClass(
+    [
+        Css.display("none")
+        Css.position("fixed")
+        Css.top("0")
+        Css.bottom("0px")
+        Css.left("0")
+        Css.right("0px")
+        Css.backgroundColor("rgba(20, 20, 0, 0.6)")
+        Css.touchAction("none")
+    ]
+    []
+    []
+)
+
+guideSidebarBackdropOpenCss: CssClass = CssClass(
+    []
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("block")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarCss: CssClass = CssClass(
+    [
+        Css.position("fixed")
+        Css.top("0")
+        Css.bottom("0")
+        Css.left("0")
+        Css.width("300px")
+        Css.boxSizing("border-box")
+        Css.paddingTop("10px")
+        Css.backgroundColor("#ecc45e")
+        Css.overflowY("auto")
+        Css.transition("200ms transform")
+        Css.scrollbarWidth("thin")
+        Css.scrollbarColor("#333333 #ecc45e")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.order("2")
+            Css.width("calc(100% - 50px)")
+            Css.maxWidth("300px")
+            Css.minHeight("auto")
+            Css.height("auto")
+            Css.paddingTop("20px")
+            Css.paddingBottom("20px")
+            Css.transform("translateX(-110%)")
+            Css.outline("1px solid rgba(0, 0, 0, 0.15)")
+        ], [])
+        CssNest("& *:focus-visible", [
+            Css.outline("2px solid #000000")
+            Css.outlineOffset("2px")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarOpenCss: CssClass = CssClass(
+    []
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.transform("translateX(0)")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarLogoCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.gap("20px")
+        Css.alignItems("center")
+        Css.justifyContent("center")
+        Css.fontSize("30px")
+        Css.letterSpacing("5px")
+        Css.textTransform("uppercase")
+        Css.color("inherit")
+        Css.textDecoration("none")
+        Css.height("100px")
+    ]
+    [
+        CssNest("&>img", [Css.width("100px")], [])
+        CssNest("&>div", [Css.width("145px")], [])
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("none")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarUl1Css: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.flexDirection("column")
+        Css.gap("35px")
+        Css.listStyle("none")
+        Css.margin("0px")
+        Css.padding("20px")
+        Css.opacity("0.85")
+        Css.transition("100ms opacity")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.opacity("1.00")
+        ], [])
+        CssNest("&:hover", [
+            Css.opacity("1.00")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarLi1Css: CssClass = CssClass(
+    [
+        Css.listStyle("none")
+        Css.fontSize("17px")
+    ]
+    []
+    []
+)
+
+guideSidebarUl2Css: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.flexDirection("column")
+        Css.gap("15px")
+        Css.listStyle("none")
+        Css.margin("0px")
+        Css.paddingLeft("15px")
+        Css.paddingTop("20px")
+        Css.paddingRight("0")
+        Css.paddingBottom("5px")
+        Css.fontSize("17px")
+    ]
+    []
+    []
+)
+
+guideSidebarLi2Css: CssClass = CssClass(
+    [
+        Css.listStyle("none")
+    ]
+    []
+    []
+)
+
+guideMainCss: CssClass = CssClass(
+    [
+        Css.flex("1")
+        Css.display("flex")
+        Css.justifyContent("center")
+        Css.marginLeft("300px")
+        Css.paddingLeft("20px")
+        Css.paddingRight("calc(max(20px, 25vw - 300px))")
+        Css.paddingTop("80px")
+        Css.paddingBottom("80px")
+        Css.position("relative")
+        Css.boxSizing("content-box")
+        Css.color("#333333")
+        Css.fontWeight("500")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.marginLeft("0")
+            Css.paddingLeft("20px")
+            Css.paddingRight("20px")
+            Css.paddingTop("120px")
+            Css.paddingBottom("70px")
+        ], [])
+    ]
+    []
+)
+
+guideDocumentCss: CssClass = CssClass(
+    [
+        Css.maxWidth("800px")
+        Css.width("100%")
+        Css.fontSize("17px")
+        Css.lineHeight("1.7")
+    ]
+    []
+    []
+)
+
+guideSplitCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.gap("30px")
+        Css.justifyContent("space-between")
+        Css.alignItems("stretch")
+        Css.marginTop("170px")
+        Css.marginBottom("170px")
+    ]
+    [
+        CssNest("&>div:first-child", [
+            Css.width("calc(345px - 15px)")
+            Css.paddingTop("10px")
+            Css.paddingBottom("15px")
+        ], [])
+        CssNest("&>div:last-child", [
+            Css.width("calc(455px - 15px)")
+        ], [])
+        CssNest("&>div>:first-child", [
+            Css.marginTop("0")
+        ], [])
+        CssNest("&>div>:last-child", [
+            Css.marginBottom("0")
+        ], [])
+        CssNest("&>div>pre", [
+            Css.overflowX("hidden")
+            Css.minHeight("100%")
+        ], [])
+        CssNest(mobileMediaQuery, [
+            Css.flexDirection("column")
+        ], [
+            CssNest("&>div:first-child", [
+                Css.width("auto")
+            ], [])
+            CssNest("&>div:last-child", [
+                Css.width("auto")
+            ], [])
+            CssNest("&>div>pre", [
+                Css.overflowX("auto")
+            ], [])
+        ])
+    ]
+    []
+)
+
+guideSplitHeadingCss: CssClass = CssClass(
+    [
+        Css.fontSize("23px")
+        Css.fontWeight("600")
+        Css.margin("0")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("21px")
+        ], [])
+    ]
+    []
+)
+
+guideH1Css: CssClass = CssClass(
+    [
+        Css.fontSize("32px")
+        Css.fontWeight("600")
+        Css.marginTop("0px")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("26px")
+        ], [])
+    ]
+    []
+)
+
+guideH2Css: CssClass = CssClass(
+    [
+        Css.fontSize("28px")
+        Css.fontWeight("600")
+        Css.marginTop("70px")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("23px")
+        ], [])
+    ]
+    []
+)
+
+guideCodeCss: CssClass = CssClass(
+    [
+        Css.fontFamily("'Firefly Mono', monospace")
+        Css.fontSize("15px")
+        Css.lineHeight("1.3")
+        Css.color("#000000")
+        Css.whiteSpace("pre-wrap")
+        Css.wordBreak("break-all")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("14px")
+            Css.lineHeight("1.4")
+        ], [])
+        CssNest("pre>&", [
+            Css.color("#4ec9b0")
+            Css.whiteSpace("pre")
+        ], [])
+    ]
+    []
+)
+
+guideCodeBlockCss: CssClass = CssClass(
+    [
+        Css.lineHeight("1.3")
+        Css.background("#1f1f1f")
+        Css.padding("20px 25px")
+        Css.margin("30px 0")
+        Css.borderRadius("5px")
+        Css.boxSizing("border-box")
+        Css.overflowX("auto")
+        Css.maxWidth("100%")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.maxWidth("calc(100vw)")
+            Css.marginLeft("-20px")
+            Css.marginRight("-20px")
+            Css.borderRadius("0")
+            Css.borderLeft("none")
+            Css.borderRight("none")
+            Css.padding("20px 20px")
+            Css.lineHeight("1.4")
+        ], [])
+    ]
+    []
+)
+
+guideLinkCss: CssClass = CssClass(
+    [
+        Css.color("#000000")
+        Css.textDecoration("2px #ecc45e underline")
+        Css.fontWeight("600")
+    ]
+    [
+        CssNest("&:hover", [
+            Css.textDecoration("2px #ecc45e underline")
+        ], [])
+    ]
+    []
+)
+
+guideNextButtonCss: CssClass = CssClass(
+    [
+        Css.marginTop("100px")
+    ]
+    []
+    []
+)
+
+guideButtonCss: CssClass = CssClass(
+    [
+        Css.padding("15px 30px")
+        Css.borderRadius("5px")
+        Css.background("#ecc45e")
+        Css.color("#000000")
+        Css.border("2px solid black")
+        Css.textDecoration("none")
+        Css.fontSize("17px")
+        Css.fontWeight("600")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("15px")
+        ], [])
+        CssNest("&::after", [
+            Css.content("' →'")
+        ], [])
+    ]
+    []
+)
+
+codeCommentCss: CssClass = CssClass([Css.color("#757c8a")], [], [])
+codeStringCss: CssClass = CssClass([Css.color("#ce9178")], [], [])
+codeNumberCss: CssClass = CssClass([Css.color("#b5cea8")], [], [])
+codeKeywordCss: CssClass = CssClass([Css.color("#569cd6")], [], [])
+codeTypeCss: CssClass = CssClass([Css.color("#4ec9b0")], [], [])
+codeVariableCss: CssClass = CssClass([Css.color("#9cdcfe")], [], [])
+codeCallCss: CssClass = CssClass([Css.color("#dcdcaa")], [], [])
+codeOtherCss: CssClass = CssClass([Css.color("#cccccc")], [], [])