// Generated by purs version 0.13.6
"use strict";
var Control_Applicative = require("../Control.Applicative/index.js");
var Control_Bind = require("../Control.Bind/index.js");
var Data_Array = require("../Data.Array/index.js");
var Data_Eq = require("../Data.Eq/index.js");
var Data_Foldable = require("../Data.Foldable/index.js");
var Data_Functor = require("../Data.Functor/index.js");
var Data_HeytingAlgebra = require("../Data.HeytingAlgebra/index.js");
var Data_Int = require("../Data.Int/index.js");
var Data_Maybe = require("../Data.Maybe/index.js");
var Data_Monoid = require("../Data.Monoid/index.js");
var Data_Ord = require("../Data.Ord/index.js");
var Data_Semigroup = require("../Data.Semigroup/index.js");
var Data_Show = require("../Data.Show/index.js");
var Data_String_CodePoints = require("../Data.String.CodePoints/index.js");
var Data_String_Common = require("../Data.String.Common/index.js");
var Data_Symbol = require("../Data.Symbol/index.js");
var JSS = require("../JSS/index.js");
var Random_LCG = require("../Random.LCG/index.js");
var Random_PseudoRandom = require("../Random.PseudoRandom/index.js");
var React_Basic = require("../React.Basic/index.js");
var React_Basic_DOM = require("../React.Basic.DOM/index.js");
var React_Basic_DOM_Internal = require("../React.Basic.DOM.Internal/index.js");
var React_Basic_DOM_SVG = require("../React.Basic.DOM.SVG/index.js");
var React_Basic_Hooks = require("../React.Basic.Hooks/index.js");
var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
var Record_Extra = require("../Record.Extra/index.js");
var Type_Equality = require("../Type.Equality/index.js");
var Yoga_DOM_Hook = require("../Yoga.DOM.Hook/index.js");
var Yoga_Scroll_Hook = require("../Yoga.Scroll.Hook/index.js");
var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
var textToTspans = function (classes) {
    return function (scrolled) {
        return function (x) {
            return function (str) {
                var words = function (line) {
                    var split = Data_String_Common.split(" ")(line);
                    return split;
                };
                var scrolledString = (function () {
                    var len = Data_Int.toNumber(Data_String_CodePoints.length(str));
                    var charactersToTake = Data_Int.round(scrolled * (1.0 / 0.5) * len);
                    return Data_String_CodePoints.take(charactersToTake)(str);
                })();
                var lines = Data_String_Common.split("\x0a")(scrolledString);
                var keywords = [ "module", "\u2237", "::", "forall", "\u2200", "do", "where", "let", "in", "instance", "class", "data", "=", "|", "type", "newtype", "derive", "if", "then", "else", "import" ];
                var isTypeName = function (s) {
                    var inRange = function (c1) {
                        return function (c2) {
                            return Data_Ord.between(Data_String_CodePoints.ordCodePoint)(Data_String_CodePoints.codePointFromChar(c1))(Data_String_CodePoints.codePointFromChar(c2));
                        };
                    };
                    var isLetter = (function () {
                        var $539 = Data_Maybe.maybe(false)(Data_HeytingAlgebra.disj(Data_HeytingAlgebra.heytingAlgebraFunction(Data_HeytingAlgebra.heytingAlgebraBoolean))(inRange("a")("z"))(inRange("A")("Z")));
                        return function ($540) {
                            return $539(Data_Array.head(Data_String_CodePoints.toCodePointArray($540)));
                        };
                    })();
                    var firstLetter = Data_String_CodePoints.take(1)(s);
                    return Data_String_Common.toUpper(firstLetter) === firstLetter && isLetter(firstLetter);
                };
                var cursor = React_Basic_DOM_SVG.tspan()({
                    dx: "0",
                    dy: "0",
                    children: [ React_Basic_DOM.text("\u2588") ],
                    className: classes.cursor,
                    id: "landing-page-cursor"
                });
                var classNameForWord = function (v) {
                    if (Data_Foldable.elem(Data_Foldable.foldableArray)(Data_Eq.eqString)(v)(keywords)) {
                        return classes.keyword;
                    };
                    if (isTypeName(v)) {
                        return classes.typeName;
                    };
                    return "";
                };
                var toTspan = function (v) {
                    return function (line) {
                        var v1 = Data_Array.uncons(words(line));
                        if (v1 instanceof Data_Maybe.Nothing) {
                            return {
                                distance: v.distance + 1.2,
                                acc: v.acc
                            };
                        };
                        if (v1 instanceof Data_Maybe.Just && (v1.value0.head === "" && v1.value0.tail.length === 0)) {
                            return {
                                distance: v.distance + 1.2,
                                acc: v.acc
                            };
                        };
                        if (v1 instanceof Data_Maybe.Just) {
                            var mkNewElems = function (v2) {
                                return function (v3) {
                                    if (v3 === "") {
                                        return {
                                            prefix: v2.prefix + " ",
                                            spans: v2.spans
                                        };
                                    };
                                    return {
                                        prefix: " ",
                                        spans: Data_Array.snoc(v2.spans)(React_Basic_DOM_SVG.tspan()({
                                            children: [ React_Basic_DOM.text(v2.prefix + v3) ],
                                            className: classNameForWord(v3)
                                        }))
                                    };
                                };
                            };
                            var newElems = (function (v2) {
                                return v2.spans;
                            })(Data_Foldable.foldl(Data_Foldable.foldableArray)(mkNewElems)({
                                prefix: " ",
                                spans: [  ]
                            })(v1.value0.tail));
                            var first = React_Basic_DOM_SVG.tspan()({
                                x: Data_Show.show(Data_Show.showNumber)(x),
                                dy: Data_Show.show(Data_Show.showNumber)(v.distance) + "em",
                                children: [ React_Basic_DOM.text(v1.value0.head) ]
                            });
                            var pimped = Data_Array.cons(first)(newElems);
                            return {
                                distance: 1.2,
                                acc: Data_Semigroup.append(Data_Semigroup.semigroupArray)(v.acc)(pimped)
                            };
                        };
                        throw new Error("Failed pattern match at Yoga.SVG.Image (line 399, column 36 - line 429, column 44): " + [ v1.constructor.name ]);
                    };
                };
                return Data_Semigroup.append(Data_Semigroup.semigroupArray)((Data_Foldable.foldl(Data_Foldable.foldableArray)(toTspan)({
                    distance: 0.0,
                    acc: [  ]
                })(lines)).acc)([ cursor ]);
            };
        };
    };
};
var stars = function (className) {
    return function (classes) {
        var opacities = Random_PseudoRandom.randomRs(Random_PseudoRandom.randomNumber)(0.5)(0.9)(30)(Random_LCG.mkSeed(92));
        var radiuses = Random_PseudoRandom.randomRs(Random_PseudoRandom.randomNumber)(0.1)(1.3)(30)(Random_LCG.mkSeed(15));
        var xs = Random_PseudoRandom.randomRs(Random_PseudoRandom.randomNumber)(0.0)(800.0)(30)(Random_LCG.mkSeed(84));
        var ys = Random_PseudoRandom.randomRs(Random_PseudoRandom.randomNumber)(-20.0)(200.0)(30)(Random_LCG.mkSeed(4398));
        var classNames = Data_Functor.mapFlipped(Data_Functor.functorArray)(Random_PseudoRandom.randomRs(Random_PseudoRandom.randomInt)(1)(50)(30)(Random_LCG.mkSeed(3)))(function (v) {
            if (v === 1) {
                return classes.twinklingStar1;
            };
            if (v === 2) {
                return classes.twinklingStar2;
            };
            if (v === 3) {
                return classes.twinklingStar2;
            };
            return "";
        });
        var zipped = Data_Array.zip(xs)(Data_Array.zip(ys)(Data_Array.zip(radiuses)(Data_Array.zip(classNames)(opacities))));
        var children = Control_Bind.bind(Control_Bind.bindArray)(zipped)(function (v) {
            return Control_Applicative.pure(Control_Applicative.applicativeArray)(React_Basic_DOM_SVG.circle()({
                cx: Data_Show.show(Data_Show.showNumber)(v.value0),
                cy: Data_Show.show(Data_Show.showNumber)(v.value1.value0),
                r: Data_Show.show(Data_Show.showNumber)(v.value1.value1.value0),
                fill: "#eeefff",
                className: v.value1.value1.value1.value0,
                opacity: Data_Show.show(Data_Show.showNumber)(v.value1.value1.value1.value1 - v.value1.value0 / 200.0)
            }));
        });
        return React_Basic_DOM_SVG.g()({
            fillOpacity: ".67",
            children: children,
            className: className
        });
    };
};
var mountains = function (isLight) {
    return function (scrolled) {
        return React_Basic_DOM_SVG.g()({
            transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 70.0) + ")"),
            children: [ React_Basic_DOM_SVG.path()({
                d: "M476.098 218.299l81.644 216.765H352.334l123.764-216.765z",
                fill: (function () {
                    if (isLight) {
                        return "#4560a0";
                    };
                    return "#04102d";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M476.098 218.299l21.823 203.477 81.177-8.706-103-194.771z",
                fill: (function () {
                    if (isLight) {
                        return "#5e84ba";
                    };
                    return "#250849";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M369.627 308.648l88.326 125.788H252.546l117.081-125.788z",
                fill: (function () {
                    if (isLight) {
                        return "#4560a0";
                    };
                    return "#04102d";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M326.11 338.332l68.193 96.732H188.896l137.214-96.732zM508.168 243.792l163.526 204.747H415.051l93.117-204.747z",
                fill: (function () {
                    if (isLight) {
                        return "#4560a0";
                    };
                    return "#04102d";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M508.168 245.355l63.395 75.115-54.953 46.379-8.442-121.494zM369.612 308.648l54.182 77.687-58.981 41.135 4.799-118.822zM326.184 338.326l16.813 23.99-16.887 11.835.074-35.825z",
                fill: (function () {
                    if (isLight) {
                        return "#5e84ba";
                    };
                    return "#250849";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M633.647 230.42L809.34 435.064H457.953L633.647 230.42z",
                fill: (function () {
                    if (isLight) {
                        return "#4560a0";
                    };
                    return "#04102d";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M633.647 230.42L735.22 475.549l86.041-35.653L633.647 230.42z",
                fill: (function () {
                    if (isLight) {
                        return "#5e84ba";
                    };
                    return "#250849";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M643.625 254.384c-.571.219-.745.283-1.863.82-2.864 1.395-6.079 3.209-9.184 2.64-6.187-1.134-10.854-6.283-16.725-6.738l17.786-20.729 9.986 24.007z",
                fill: (function () {
                    if (isLight) {
                        return "#d9d9d9";
                    };
                    return "#655578";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M654.229 253.4c-.494-.028-.875-.013-.875-.013-3.255-.486-6.617-.192-9.677.982l-.052.02-9.978-23.97 20.582 22.981z",
                fill: (function () {
                    if (isLight) {
                        return "#fff";
                    };
                    return "#9d779e";
                })()
            }) ]
        });
    };
};
var lightDefs = React_Basic_DOM_SVG.defs()({
    children: [ React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear2",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(0 451.564 -803.856 0 398.9 -3.513)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#68adfc"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".34",
            stopColor: "#cbe0f8"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#d2cbf8"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear4",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "scale(293.8304) rotate(83.86 -.11 .484)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#bde8f7"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#86b6fe"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear5",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "scale(219.3256) rotate(84.988 -.028 1.133)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#bde8f7"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#86b6fe"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear6",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "rotate(90 -6.304 321.409) scale(123.585)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#bde8f7"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#86b6fe"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear7",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "scale(132.4342) rotate(68.9 -1.112 2.415)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#bde8f7"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#86b6fe"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear8",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "rotate(90 -88.788 166.635) scale(190.951)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#bde8f7"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#86b6fe"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear9",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(314.21 0 0 9.97478 340.83 431.758)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#a9abc1"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".11",
            stopColor: "#65687d"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".5",
            stopColor: "#c3c5d2"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".89",
            stopColor: "#64677c"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#a4a7c2"
        }) ]
    }), React_Basic_DOM_SVG.radialGradient()({
        id: "_Radial3",
        cx: "0",
        cy: "0",
        r: "1",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(647.316 0 0 309.935 720.558 355.142)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#cfcfcf",
            stopOpacity: ".65"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#fff552",
            stopOpacity: "0"
        }) ]
    }) ]
});
var laptop = function (classes) {
    return function (scrolled) {
        return React_Basic_DOM_SVG.g()({
            children: [ React_Basic_DOM_SVG.path()({
                d: "M606.064 273.603c0-6.261-5.076-11.337-11.337-11.337H399.673c-6.261 0-11.337 5.076-11.337 11.337v151.521a5.001 5.001 0 005 5h207.728a5.004 5.004 0 003.536-1.464 5.004 5.004 0 001.464-3.536V273.603z",
                fill: "#657390"
            }), React_Basic_DOM_SVG.path()({
                d: "M606.064 273.603c0-6.261-5.076-11.337-11.337-11.337H399.673c-6.261 0-11.337 5.076-11.337 11.337v151.521a5.001 5.001 0 005 5h207.728a5.004 5.004 0 003.536-1.464 5.004 5.004 0 001.464-3.536V273.603z",
                fill: "#657390"
            }), React_Basic_DOM_SVG.path()({
                d: "M599.193 275.905a5.528 5.528 0 00-5.526-5.526H400.604a5.528 5.528 0 00-5.526 5.526v141.039a5.528 5.528 0 005.526 5.526h193.063a5.528 5.528 0 005.526-5.526V275.905z",
                fill: "#130c2b",
                className: classes.laptopBackground
            }), React_Basic_DOM_SVG.path()({
                d: "M655.04 427.228a.458.458 0 00-.457-.457H340.83v4.975a5 5 0 005 5h304.21a5 5 0 005-5v-4.518z",
                className: classes.laptopBody
            }), React_Basic_DOM_SVG.circle()({
                cx: "497.178",
                cy: "267.001",
                r: "1.238",
                fillOpacity: ".45"
            }), React_Basic_DOM_SVG.circle()({
                cx: "500.009",
                cy: "267.001",
                r: ".527",
                fillOpacity: ".45"
            }), React_Basic_DOM_SVG.circle()({
                cx: "494.263",
                cy: "267.001",
                r: ".527",
                fill: "#102708",
                fillOpacity: ".45"
            }), React_Basic_DOM_SVG.text()({
                x: "407",
                y: "290",
                className: classes.screenText,
                children: textToTspans(classes)(scrolled)(407.0)(Data_Foldable.intercalate(Data_Foldable.foldableArray)(Data_Monoid.monoidString)("\x0a")([ "hoistJoker ", "\x09\u2237  \u2200 f g a b", "\x09.  (f ~> g)", "\x09-> Joker f a b", "\x09-> Joker g a b", "hoistJoker f (Joker a) =", "\x09 Joker (f a)" ]))
            }) ]
        });
    };
};
var darkDefs = React_Basic_DOM_SVG.defs()({
    children: [ React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear2",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(0 451.564 -803.856 0 398.9 -3.513)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#000434"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".28",
            stopColor: "#171043"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".68",
            stopColor: "#573774"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#b8734e"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear4",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(-.53832 -17.3125 1.44013 -.04478 749.812 228.864)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#e59f77"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".47",
            stopColor: "#a46075"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#914d74"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear5",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "scale(293.8304) rotate(83.86 -.11 .484)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#08001b"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#571547"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear6",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "scale(219.3256) rotate(84.988 -.028 1.133)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#000418"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#571548"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear7",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(46.7869 123.585 -71.5547 27.0893 259.972 327.713)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#000418"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#571548"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear8",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "rotate(90 -6.304 321.409) scale(123.585)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#3a0843"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#9f5c6a"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear9",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "scale(101.643) rotate(28.107 -6.187 4.945)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#2c1d2f"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#480445"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear10",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "scale(-106.68957) rotate(-86.136 -1.645 -.807)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#2c1d2f"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#480445"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear11",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(20.5602 0 -184.503 0 11.25 272.442)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#000624"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#4f1557"
        }) ]
    }), React_Basic_DOM_SVG.linearGradient()({
        id: "_Linear12",
        x1: "0",
        y1: "0",
        x2: "1",
        y2: "0",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(314.21 0 0 9.97478 340.83 431.758)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#a9abc1"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".11",
            stopColor: "#65687d"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".5",
            stopColor: "#c3c5d2"
        }), React_Basic_DOM_SVG.stop()({
            offset: ".89",
            stopColor: "#64677c"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#a4a7c2"
        }) ]
    }), React_Basic_DOM_SVG.radialGradient()({
        id: "_Radial3",
        cx: "0",
        cy: "0",
        r: "1",
        gradientUnits: "userSpaceOnUse",
        gradientTransform: "matrix(330.479 0 0 252.189 174.599 310.24)",
        children: [ React_Basic_DOM_SVG.stop()({
            offset: "0",
            stopColor: "#f60",
            stopOpacity: ".3"
        }), React_Basic_DOM_SVG.stop()({
            offset: "1",
            stopColor: "#fff552",
            stopOpacity: "0"
        }) ]
    }) ]
});
var defs = function (v) {
    if (v) {
        return lightDefs;
    };
    return darkDefs;
};
var buildings = function (isLight) {
    return function (scrolled) {
        return React_Basic_DOM_SVG.g()({
            transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 30.0) + ")"),
            children: [ React_Basic_DOM_SVG.path()({
                d: "M195.171 451.298V159.153H92.709v292.145h102.462z",
                fill: (function () {
                    if (isLight) {
                        return "url(#_Linear4)";
                    };
                    return "url(#_Linear5)";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M289.755 451.298V232.811h-57.232v218.487h57.232z",
                fill: (function () {
                    if (isLight) {
                        return "url(#_Linear5)";
                    };
                    return "url(#_Linear6)";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M207.557 451.298V232.811h25.314v218.487h-25.314zM92.709 451.298V159.153h25.314v292.145H92.709z",
                fill: (function () {
                    if (isLight) {
                        return "#b4dbfb";
                    };
                    return "#130425";
                })()
            }), React_Basic_DOM_SVG.path()({
                d: "M323.451 451.298V327.713h-71.555v123.585h71.555z",
                fill: (function () {
                    if (isLight) {
                        return "url(#_Linear6)";
                    };
                    return "url(#_Linear7)";
                })(),
                transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 60.0) + ")")
            }), React_Basic_DOM_SVG.path()({
                d: "M323.451 451.298V327.713h-16.692v123.585h16.692z",
                fill: (function () {
                    if (isLight) {
                        return "url(#_Linear7)";
                    };
                    return "url(#_Linear8)";
                })(),
                transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 60.0) + ")")
            }), React_Basic_DOM_SVG.path()({
                d: "M272.498 451.298v-95.771H135.943v95.771h136.555z",
                fill: (function () {
                    if (isLight) {
                        return "url(#_Linear8)";
                    };
                    return "url(#_Linear9)";
                })(),
                transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 100.0) + ")")
            }), React_Basic_DOM_SVG.path()({
                d: "M173.526 451.298v-95.771h-37.583v95.771h37.583z",
                fill: (function () {
                    if (isLight) {
                        return "#b4dbfb";
                    };
                    return "#2e1232";
                })(),
                transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 100.0) + ")")
            }), React_Basic_DOM_SVG.path()({
                d: "M85.122 451.298V272.442h-97.675v178.856h97.675z",
                fill: (function () {
                    if (isLight) {
                        return "#b4dbfb";
                    };
                    return "url(#_Linear10)";
                })(),
                transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 100.0) + ")")
            }), React_Basic_DOM_SVG.path()({
                d: "M66.649 456.944V272.442H-3.028v184.502h69.677z",
                fill: (function () {
                    if (isLight) {
                        return "#b4dbfb";
                    };
                    return "url(#_Linear11)";
                })(),
                transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 100.0) + ")")
            }) ]
        });
    };
};
var mkLandingPageBackground = function __do() {
    var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "@keyframes animatedCursor";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "@keyframes movingCloud1";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "@keyframes movingCloud2";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "@keyframes rotateStars";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "@keyframes twinkle";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "@keyframes twinkleFast";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "cursor";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "keyword";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "laptopBackground";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "laptopBody";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "lightEllipsis";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "movingCloud1";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "movingCloud2";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "movingCloud3";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "screenText";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "stars";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "twinklingStar1";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "twinklingStar2";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "twinklingStar3";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "typeName";
    }))()(Record_Extra.mapRecordNil)()())()())()())()())()())()())()())()())()())()())()())()())()())()())()())()())()())()())()())()())(JSS.jssClasses()(function (v) {
        return {
            laptopBackground: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
                fill: v.backgroundColour
            }),
            lightEllipsis: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "cx";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "cy";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "rx";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "ry";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))()())({
                cx: (function () {
                    if (v.isLight) {
                        return "721";
                    };
                    return "175";
                })(),
                cy: (function () {
                    if (v.isLight) {
                        return "355";
                    };
                    return "310";
                })(),
                rx: (function () {
                    if (v.isLight) {
                        return "647";
                    };
                    return "330";
                })(),
                ry: (function () {
                    if (v.isLight) {
                        return "310";
                    };
                    return "252";
                })()
            }),
            laptopBody: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
                fill: (function () {
                    if (v.isLight) {
                        return "url(#_Linear9)";
                    };
                    return "url(#_Linear12)";
                })()
            }),
            screenText: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fontFamily";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fontSize";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
                fontFamily: v.codeFontFamily,
                fontSize: "0.85em",
                fill: v.textColour
            }),
            keyword: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
                fill: v.green
            }),
            typeName: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
                fill: v.pink
            }),
            "@keyframes animatedCursor": JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "0%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "opacity";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "50%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "opacity";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsNil)))()())({
                "0%": {
                    opacity: "0.0"
                },
                "50%": {
                    opacity: "1.0"
                }
            }),
            cursor: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animation";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())({
                animation: "$animatedCursor 0.5s linear infinite",
                animationDirection: "alternate"
            }),
            "@keyframes movingCloud1": JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "0%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transform";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "100%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transform";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsNil)))()())({
                "0%": {
                    transform: "translate3d(-140%, 4%, 0)"
                },
                "100%": {
                    transform: "translate3d(70%, -4%, 0)"
                }
            }),
            movingCloud1: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animation";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDelay";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())({
                animation: "$movingCloud1 200s linear infinite",
                animationDelay: "-150s"
            }),
            "@keyframes movingCloud2": JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "0%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transform";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "100%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transform";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsNil)))()())({
                "0%": {
                    transform: "translate3d(-10%, 0%, 0)"
                },
                "100%": {
                    transform: "translate3d(10%, 0%, 0)"
                }
            }),
            movingCloud2: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animation";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())({
                animation: "$movingCloud2 120s linear infinite",
                animationDirection: "alternate"
            }),
            movingCloud3: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animation";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDelay";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
                animation: "$movingCloud2 120s linear infinite",
                animationDelay: "-120s",
                animationDirection: "alternate"
            }),
            "@keyframes twinkle": JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "0%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "100%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "50%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "70%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsNil)))))()())({
                "0%": {
                    fill: "rgba(250, 250, 250, 0.2)"
                },
                "50%": {
                    fill: "rgba(250, 250, 250, 0.7)"
                },
                "70%": {
                    fill: "rgba(250, 250, 250, 0.4)"
                },
                "100%": {
                    fill: "rgba(250, 250, 250, 1.0)"
                }
            }),
            "@keyframes twinkleFast": JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "0%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "100%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsNil)))()())({
                "0%": {
                    fill: "rgba(250, 250, 250, 0.7)"
                },
                "100%": {
                    fill: "rgba(250, 250, 250, 0.78)"
                }
            }),
            twinklingStar1: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animation";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))()())({
                animation: "$twinkleFast 0.2s ease-in-out infinite",
                animationDirection: "alternate"
            }),
            twinklingStar2: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animation";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDelay";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
                animation: "$twinkle 8s ease-in-out infinite",
                animationDelay: "4s",
                animationDirection: "alternate"
            }),
            twinklingStar3: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animation";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDelay";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
                animation: "$twinkle 4s ease-in-out infinite",
                animationDelay: "3s",
                animationDirection: "alternate"
            }),
            "@keyframes rotateStars": JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "0%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transform";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "100%";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transform";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsNil)))()())({
                "0%": {
                    transform: "rotate(0deg) scale(1,1)"
                },
                "100%": {
                    transform: "rotate(1deg) scale(1.01, 1.01)"
                }
            }),
            stars: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animation";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "animationDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transformOrigin";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))()())({
                animation: "$rotateStars 30s linear infinite",
                transformOrigin: "top center",
                animationDirection: "alternate"
            })
        };
    }))();
    return React_Basic_Hooks.component()()()("LandingPageBackground")(function (v) {
        return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(Yoga_Theme_Styles.useTheme)(function (theme) {
            return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
                return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(Yoga_Scroll_Hook.useScrollYPosition)(function (scrollY) {
                    return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(Yoga_DOM_Hook.useBoundingBox)(function (v1) {
                        var scrolled = (function () {
                            if (v1.value0 instanceof Data_Maybe.Nothing) {
                                return 0.0;
                            };
                            if (v1.value0 instanceof Data_Maybe.Just) {
                                return scrollY / v1.value0.value0.height;
                            };
                            throw new Error("Failed pattern match at Yoga.SVG.Image (line 140, column 18 - line 142, column 39): " + [ v1.value0.constructor.name ]);
                        })();
                        return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic.element(React_Basic_DOM_Internal.unsafeCreateDOMComponent("svg"))({
                            ref: v1.value1,
                            viewBox: "0 0 800 447",
                            preserveAspectRatio: "xMidYMax slice",
                            xmlns: "http://www.w3.org/2000/svg",
                            fillRule: "evenodd",
                            clipRule: "evenodd",
                            strokeLinejoin: "round",
                            strokeMiterlimit: "2",
                            className: v.className,
                            children: [ React_Basic_DOM_SVG.path()({
                                fill: "none",
                                d: "M0 0h800v447H0z"
                            }), React_Basic_DOM_SVG.clipPath()({
                                id: "a",
                                children: [ React_Basic_DOM_SVG.path()({
                                    d: "M0 0h800v447H0z"
                                }) ]
                            }), React_Basic_DOM_SVG.g()({
                                clipPath: "url(#a)",
                                children: [ React_Basic_DOM_SVG.path()({
                                    d: "M800.828 448.051V-3.513H-3.028v451.564h803.856z",
                                    fill: "url(#_Linear2)"
                                }), React_Basic_DOM_SVG.ellipse()({
                                    className: classes.lightEllipsis,
                                    fill: "url(#_Radial3)"
                                }), stars(classes.stars)(classes), React_Basic_DOM_SVG.path()({
                                    d: "M610.291 177.316c-35.879-.428-84.67-.691-138.392-.689-38.684.002-74.811.141-105.402.38-49.14-2.745-80.877-9.954-80.877-14.718 0-1.333 2.655.335 7.294-.896 96.772-.175 171.302-1.213 171.302-2.464 0-1.107-59.462-3.372-140.106-3.687 38.487-2.059 102.543-4.972 173.823-4.972 11.996 0 23.761.07 35.216.206 20.76-4.638 60.945-2.784 107.07-2.784 36.08 0 68.525-.075 90.882 2.983 32.491.899 72.142-1.186 114.922-.379 38.68.729 74.805 1.273 105.395 1.613 49.101 3.673 80.599 8.516 80.54 13.279-.016 1.334-2.504 2.58-7.158 3.723-96.763-1.654-171.297-2.024-171.312-.774-.013 1.108 58.473 3.15 139.105 4.989-38.514 3.085-101.653 4.38-172.925 3.033-11.995-.227-23.757-.52-35.209-.872-20.815 4.245-61.034 6.631-107.154 5.759-24.754-.468-47.786-1.809-67.014-3.73z",
                                    fill: (function () {
                                        if (theme.isLight) {
                                            return "#ddf0fb";
                                        };
                                        return "#240c3c";
                                    })(),
                                    className: classes.movingCloud1,
                                    transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 20.0) + ")")
                                }), React_Basic_DOM_SVG.path()({
                                    d: "M609.299 171.607c-35.88-.338-84.67-.545-138.392-.543-38.684.001-74.812.111-105.402.299-49.141-2.166-80.694-5.519-80.694-9.279 0-1.052 2.472-2.073 7.111-3.045 96.772-.137 171.302-.957 171.302-1.944-.001-.874-58.506-1.614-139.15-1.862 38.471-3.009 101.587-4.973 172.867-4.973 11.996 0 23.761.055 35.216.162 20.76-3.66 60.945-6.143 107.07-6.143 36.08 0 68.525 1.519 90.882 3.933 32.491.709 72.142 1.432 114.922 2.069 38.68.575 74.805 1.005 105.395 1.272 49.101 2.9 80.598 6.722 80.54 10.482-.017 1.052-2.505 2.036-7.158 2.938-96.763-1.305-171.297-1.597-171.312-.611-.014.875 58.473 2.486 139.104 3.938-38.514 2.435-101.653 3.457-172.924 2.394a3771.84 3771.84 0 01-35.21-.688c-20.814 3.35-61.033 5.234-107.153 4.545-24.754-.369-47.786-1.428-67.014-2.944z",
                                    fill: (function () {
                                        if (theme.isLight) {
                                            return "#d8effd";
                                        };
                                        return "#120b38";
                                    })(),
                                    className: classes.movingCloud1,
                                    transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 20.0) + ")")
                                }), React_Basic_DOM_SVG.path()({
                                    d: "M684.234 222.269c-12.108-1.642-29.721-2.832-29.76-5.218-.063-3.861 34.226-4.225 76.6-3.504 42.375.721 75.9-2.707 76.956 1.008 2.476 8.704-12.549 8.552-32.56 10.141-12.403-.58-28.24.216-44.434.479-16.193.263-35.197-1.331-46.802-2.906z",
                                    fill: (function () {
                                        if (theme.isLight) {
                                            return "#d8effd";
                                        };
                                        return "url(#_Linear4)";
                                    })(),
                                    className: classes.movingCloud2,
                                    transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 20.0) + ")")
                                }), React_Basic_DOM_SVG.path()({
                                    d: "M130.064 213.821c42.381 0 76.789.237 76.789 4.224 0 3.986-14.408 4.223-56.789 4.223-42.38 0-96.788.208-96.788-4.223s34.408-4.224 76.788-4.224z",
                                    fill: (function () {
                                        if (theme.isLight) {
                                            return "#d8effd";
                                        };
                                        return "#a7847d";
                                    })(),
                                    className: classes.movingCloud3,
                                    transform: "translate(0 " + (Data_Show.show(Data_Show.showNumber)(scrolled * 20.0) + ")")
                                }), mountains(theme.isLight)(scrolled), buildings(theme.isLight)(scrolled), React_Basic_DOM_SVG.path()({
                                    fill: theme.backgroundColour,
                                    d: "M-3.028 431.298h826.844v20.006H-3.028z"
                                }), laptop(classes)(scrolled) ]
                            }), defs(theme.isLight) ]
                        }));
                    });
                });
            });
        });
    })();
};
module.exports = {
    mkLandingPageBackground: mkLandingPageBackground,
    laptop: laptop,
    buildings: buildings,
    mountains: mountains,
    textToTspans: textToTspans,
    defs: defs,
    lightDefs: lightDefs,
    darkDefs: darkDefs,
    stars: stars
};