commit d182ead446f2b7560dbb8183a9f10764acf39edb
Author: Qx-blocks <convert.pierre@gmail.com>
Date:   Sun May 25 19:37:12 2025 +0200

    Update

diff --git a/.project b/.project
new file mode 100644
index 0000000..e2dd3e6
--- /dev/null
+++ b/.project
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>S8-mktg-aero</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.wst.common.project.facet.core.builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.validation.validationbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
+		<nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature>
+		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+	</natures>
+</projectDescription>
diff --git a/.settings/.jsdtscope b/.settings/.jsdtscope
new file mode 100644
index 0000000..b50aaf2
--- /dev/null
+++ b/.settings/.jsdtscope
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry excluding="**/node_modules/*|**/*.min.js|**/bower_components/*" kind="src" path="public"/>
+	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.JRE_CONTAINER"/>
+	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.WebProject">
+		<attributes>
+			<attribute name="hide" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.baseBrowserLibrary"/>
+	<classpathentry kind="output" path=""/>
+</classpath>
diff --git a/.settings/org.eclipse.core.resources.prefs b/.settings/org.eclipse.core.resources.prefs
new file mode 100644
index 0000000..99f26c0
--- /dev/null
+++ b/.settings/org.eclipse.core.resources.prefs
@@ -0,0 +1,2 @@
+eclipse.preferences.version=1
+encoding/<project>=UTF-8
diff --git a/.settings/org.eclipse.wst.common.component b/.settings/org.eclipse.wst.common.component
new file mode 100644
index 0000000..2548702
--- /dev/null
+++ b/.settings/org.eclipse.wst.common.component
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?><project-modules id="moduleCoreId" project-version="1.5.0">
+        
+    <wb-module deploy-name="S8-mktg-aero">
+                
+        <wb-resource deploy-path="/" source-path="/public"/>
+        <property name="context-root" value="S8-mktg-aero"/>
+            
+    </wb-module>
+    
+</project-modules>
diff --git a/.settings/org.eclipse.wst.common.project.facet.core.xml b/.settings/org.eclipse.wst.common.project.facet.core.xml
new file mode 100644
index 0000000..30f7719
--- /dev/null
+++ b/.settings/org.eclipse.wst.common.project.facet.core.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<faceted-project>
+  <fixed facet="wst.web"/>
+  <fixed facet="wst.jsdt.web"/>
+  <installed facet="wst.web" version="1.0"/>
+  <installed facet="wst.jsdt.web" version="1.0"/>
+</faceted-project>
diff --git a/.settings/org.eclipse.wst.jsdt.ui.superType.container b/.settings/org.eclipse.wst.jsdt.ui.superType.container
new file mode 100644
index 0000000..3bd5d0a
--- /dev/null
+++ b/.settings/org.eclipse.wst.jsdt.ui.superType.container
@@ -0,0 +1 @@
+org.eclipse.wst.jsdt.launching.baseBrowserLibrary
\ No newline at end of file
diff --git a/.settings/org.eclipse.wst.jsdt.ui.superType.name b/.settings/org.eclipse.wst.jsdt.ui.superType.name
new file mode 100644
index 0000000..05bd71b
--- /dev/null
+++ b/.settings/org.eclipse.wst.jsdt.ui.superType.name
@@ -0,0 +1 @@
+Window
\ No newline at end of file
diff --git a/aero/.DS_Store b/aero/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/aero/.DS_Store differ
diff --git a/aero/AeroElement.js b/aero/AeroElement.js
new file mode 100644
index 0000000..4b03166
--- /dev/null
+++ b/aero/AeroElement.js
@@ -0,0 +1,50 @@
+
+
+export const ON_CSS_LOADED = 0x12;
+
+export class AeroElement {
+
+
+    /**
+     * @type {boolean} current landscape painting option
+     */
+    isLandscape = false;
+
+    /**
+   * @type {number} current screen width painting option
+   */
+    screenWidth = 1920;
+
+    /**
+   * @type {number} current screen height painting option
+   */
+    screenHeight = 1080;
+
+
+    static isCSSLoading = false;
+
+
+   
+
+
+    /** CSS is loaded */
+    css_isLoaded = false;
+
+    constructor() {
+    }
+
+    
+    onOrientationChanged(isLandscape) {
+        /* To be overridden */
+        this.isLandscape = isLandscape;
+    }
+
+    onScreenResized(width, height) {
+        /* To be overridden */
+        this.screenWidth = width;
+        this.screenHeight = height;
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/aero/AeroMovie.css b/aero/AeroMovie.css
new file mode 100644
index 0000000..edef3ac
--- /dev/null
+++ b/aero/AeroMovie.css
@@ -0,0 +1,40 @@
+/* <aero-slide> */
+section[class^="aero-movie-"] {
+	margin: 0px 0px 0px 0px;
+	padding: 0px 0px 0px 0px;
+	width: 100%;
+}
+
+section[class^="aero-movie-"]>div.text {
+	margin: 0px 0px 0px 0px;
+	padding: 8px 16% 8px 16%;
+}
+
+
+/* <asset> */
+
+.aero-movie {
+	background-color: rgb(255, 255, 255);
+	width: 100%;
+	/*overflow: auto;*/
+}
+
+
+.aero-movie[loaded = "false"] {
+	aspect-ratio: 16 / 9;
+	background-color: aqua;
+	position: relative;
+}
+
+.aero-movie[loaded = "true"] {
+	height: fit-content;
+	background-color: white;
+	position: relative;
+}
+
+.aero-movie-video{
+	width: 100%;
+	/*overflow: auto;*/
+}
+
+
diff --git a/aero/AeroMovie.js b/aero/AeroMovie.js
new file mode 100644
index 0000000..00246a9
--- /dev/null
+++ b/aero/AeroMovie.js
@@ -0,0 +1,146 @@
+import { AeroElement } from "./AeroElement.js";
+
+import { WebPage } from "./WebPage.js";
+import { LoadHandler } from "./aero.js";
+import { createSpinner } from "./boot.js";
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export const LOW_RESOLUTION_TAG = "-low";
+export const HIGH_RESOLUTION_TAG = "-high";
+
+export class AeroMovie extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    props;
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    /** @type{boolean} */
+    hasAssetImage = false;
+
+    /** @type{boolean} */
+    isAssetImageLoaded = false;
+
+    /** @type{string} */
+    assetImagePath;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+
+    constructor(type, props) {
+        super();
+        this.type = type;
+        this.props = props;
+    }
+
+
+    initializeNodes(handler, state) {
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("aero-movie");
+        this.sectionNode.setAttribute("loaded", "false");
+        const spinnerNode = createSpinner();
+        this.sectionNode.appendChild(spinnerNode);
+
+        /* <video> */
+        this.videoNode = document.createElement("video");
+        this.videoNode.classList.add("aero-movie-video");
+        this.videoNode.setAttribute("muted", "");
+        // this.videoNode.setAttribute("playsinline", "");
+        this.videoNode.setAttribute("autoplay", "");
+        this.videoNode.setAttribute("loop", "");
+        //this.videoNode.setAttribute("controls", "");
+        // autoplay  
+
+        this.videoNode.playbackRate = 1.0;
+
+
+        const sourceNode = document.createElement("source");
+        sourceNode.src = this.props.sequence;
+        sourceNode.type = "video/mp4";
+        
+       
+        const _this = this;
+        this.videoNode.addEventListener('loadeddata', function() {
+            _this.sectionNode.setAttribute("loaded", "true");
+            _this.sectionNode.removeChild(spinnerNode);
+        }, false);
+
+        this.videoNode.appendChild(sourceNode);
+
+        this.sectionNode.appendChild(this.videoNode);
+
+        /* </video> */
+
+        return this.sectionNode;
+    }
+
+
+
+    render() {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+    }
+
+    draw() {
+
+    }
+
+
+    run() {
+        this.videoNode.play();
+    }
+
+    generateNextSourceNode() {
+        if (this.sequenceIndex >= this.sequences.length) { this.sequenceIndex = 0; }
+       
+    }
+
+
+}
diff --git a/aero/AeroUtilities.js b/aero/AeroUtilities.js
new file mode 100644
index 0000000..233a889
--- /dev/null
+++ b/aero/AeroUtilities.js
@@ -0,0 +1,81 @@
+
+
+
+
+export const AeroUtilities = {
+
+
+    /**
+     * 
+     * @param {*} target 
+     * @param {*} pathname 
+     * @param {*} onLoaded 
+     */
+    loadBackgroundImage : function(target, pathname, onLoaded) {
+
+        const backgroundImageBuffer = new Image();
+        
+        const _this = this;
+        backgroundImageBuffer.onload = function () {
+            
+            /* assign image from buffer */
+            target.style.backgroundImage = `url(${backgroundImageBuffer.src})`;
+    
+            /* notify handler */
+            if(onLoaded){ onLoaded(); }
+        };
+    
+        /* trigger loading */
+        backgroundImageBuffer.src = pathname;
+    },
+
+
+    getResourceFromOrigin : function(requestPath, responseType, responseCallback){
+        this.sendRequest_HTTP_GET(window.location.origin + requestPath, responseType, responseCallback);
+    },
+
+
+
+    /**
+     * 
+     * @param {string} requestPath 
+     * @param {string} responseType 
+     * @param {Function} responseCallback 
+     */
+    sendRequest_HTTP_GET : function(requestPath, responseType, responseCallback) {
+
+        /**
+                * Relies on browser cache for speeding things up
+                */
+        let xhr = new XMLHttpRequest();
+
+        // first line
+        xhr.open("GET", requestPath, true);
+        xhr.responseType = responseType;
+
+        // headers
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+        xhr.setRequestHeader('Access-Control-Allow-Origin', "*");
+        xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
+        xhr.setRequestHeader('Access-Control-Allow-Methods', 'X-Requested-With');
+        xhr.setRequestHeader('Access-Control-Allow-Headers', 'Cookie, Content-Type, Authorization, Content-Length, X-Requested-With');
+        xhr.setRequestHeader('Access-Control-Expose-Headers', 'Set-Cookie, X-Powered-By');
+
+
+        let _this = this;
+        // Hook the event that gets called as the request progresses
+        xhr.onreadystatechange = function () {
+            // If the request is "DONE" (completed or failed)
+            if (xhr.readyState == 4) {
+                // If we got HTTP status 200 (OK)
+                if (xhr.status == 200) {
+                    responseCallback(xhr.responseText);
+                }
+            }
+        };
+
+        // fire request
+        xhr.send(null);
+    }
+
+}
diff --git a/aero/CodeBlock.css b/aero/CodeBlock.css
new file mode 100644
index 0000000..5b3a742
--- /dev/null
+++ b/aero/CodeBlock.css
@@ -0,0 +1,25 @@
+
+
+.code-block-section {
+	background-color: rgb(63, 63, 63);
+	padding: 32px max(15%, 16px) 32px max(15%, 16px);
+}
+
+.code-block-window {
+	background-color: rgb(33, 23, 59);
+	border-radius: 8px;
+	padding: 16px 24px;
+	color: rgb(87, 211, 211);
+}
+
+.code-block-window pre {
+	margin: 0;
+	padding: 0;
+	overflow-x: scroll;
+	tab-size: 2;
+}
+
+.code-block-window code {
+	margin: 0;
+	padding: 0;
+}
diff --git a/aero/CodeBlock.js b/aero/CodeBlock.js
new file mode 100644
index 0000000..5f90267
--- /dev/null
+++ b/aero/CodeBlock.js
@@ -0,0 +1,85 @@
+import { AeroElement } from "./AeroElement.js";
+import { WebPage } from "./WebPage.js";
+
+
+// Using ES6 import syntax
+import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/highlight.min.js';
+//  and it's easy to individually load additional languages
+import java from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/java.min.js';
+import xml from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/xml.min.js';
+import { AeroUtilities } from "./AeroUtilities.js";
+
+
+
+
+export class CodeBlock extends AeroElement {
+
+    static isLanguageLoaded = false;
+
+
+    constructor(sourcePathname) {
+        super();
+        this.sourcePathname = sourcePathname;
+
+        if (!this.isLanguageLoaded) {
+
+            // Then register the languages you need
+            hljs.registerLanguage('java', java);
+            hljs.registerLanguage('xml', xml);
+            this.isLanguageLoaded = true;
+        }
+    }
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    build(page) {
+        //page.css_requireStylesheet("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/default.min.css");
+        page.css_requireStylesheet("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/atom-one-dark.css");
+
+        page.css_requireStylesheet("/aero/CodeBlock.css");
+
+      
+
+
+        const sectionNode = document.createElement("section");
+        sectionNode.classList.add("code-block-section");
+
+        const windowNode = document.createElement("div");
+        windowNode.classList.add("code-block-window");
+       // windowNode.classList.add("theme-atom-one-dark");
+
+        const preNode = document.createElement("pre");
+        //preNode.classList.add("theme-atom-one-dark");
+
+        const spanNode = document.createElement("span");
+        //spanNode.classList.add("language-java");
+       // spanNode.classList.add("hljs");
+        const codeNode = document.createElement("code");
+        //codeNode.innerHTML = highlightedCode;
+       
+
+        spanNode.appendChild(codeNode);
+        preNode.appendChild(spanNode);
+        windowNode.appendChild(preNode);
+        sectionNode.appendChild(windowNode);
+
+        AeroUtilities.getResourceFromOrigin(this.sourcePathname, "text", sourceCode => {
+            const highlightedSourceCode = hljs.highlight(sourceCode, { language: 'java' }).value;
+            codeNode.innerHTML = highlightedSourceCode;
+        })
+
+       
+        return (this.sectionNode = sectionNode);
+    }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        /* do nothing */
+    }
+}
\ No newline at end of file
diff --git a/aero/Deck.css b/aero/Deck.css
new file mode 100644
index 0000000..92ec6eb
--- /dev/null
+++ b/aero/Deck.css
@@ -0,0 +1,79 @@
+
+.aero-deck {
+	padding: 16px 8% 16px 8%;
+	display: flex;
+	flex-wrap: wrap;
+	background-color: rgb(128, 128, 128);
+}
+
+
+.aero-deck-card-space {
+	margin: 8px;
+}
+
+.aero-deck-card {
+	border-radius: 8px;
+	border: solid 2px rgb(200, 200, 200);
+}
+
+
+.aero-deck-card-photo {
+	margin: 0px 0px 0px 0px;
+	padding: 0px 0px 0px 0px;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	height: 160px;
+	width: 160px;
+	z-index: 2;
+	border-radius: 6px 6px 0px 0px;
+}
+
+.aero-deck-card-name {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 16px;
+	font-weight: bold;
+	width: 152px;
+	padding: 4px 4px 4px 4px;
+	background-color: white;
+	text-align: center;
+}
+
+.aero-deck-card-role {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 16px;
+	font-weight: normal;
+	width: 152px;
+	padding: 4px 4px 4px 4px;
+	background-color: white;
+	text-align: center;
+}
+
+.aero-deck-card-bio {
+	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 12px;
+	width: 144px;
+	padding: 8px 8px 8px 8px;
+	font-weight: normal;
+	background-color: white;
+	border-radius: 0px 0px 6px 6px;
+}
+
+
+
+
+@media (orientation : landscape) {
+	.aero-deck {
+		padding: 16px 10% 16px 10%;
+	}
+}
+
+@media (max-width: 480px) {
+	.aero-deck {
+		padding: 0px calc(50vw - 180px) 0px calc(50vw - 180px);
+	}
+}
+
+
diff --git a/aero/Deck.js b/aero/Deck.js
new file mode 100644
index 0000000..df8eb18
--- /dev/null
+++ b/aero/Deck.js
@@ -0,0 +1,100 @@
+import { AeroElement } from "./AeroElement.js";
+
+import { WebPage } from "./WebPage.js";
+
+
+/**
+ * aero-deck
+ */
+export class Deck extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    props;
+
+    constructor(props) {
+        super();
+        this.props = props;
+    }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     * @returns {HTMLElement}
+     */
+    build(page) {
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/Deck.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("aero-deck");
+
+        this.props.cards.forEach(cardProps => {
+            let cardSpaceNode = document.createElement("div");
+            cardSpaceNode.classList.add("aero-deck-card-space");
+
+            cardSpaceNode.appendChild(createCard(cardProps));
+
+            this.sectionNode.appendChild(cardSpaceNode);
+        });
+
+        /* return wrapper node */
+        return this.sectionNode;
+    }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+    }
+
+
+    getEnveloppe() {
+        return this.sectionNode;
+    }
+
+
+    isLoaded(){
+        return this.isInitialized;
+    }
+
+   
+}
+
+const createCard = function(props){
+
+    let cardNode = document.createElement("div");
+    cardNode.classList.add("aero-deck-card");
+
+    let photoNode = document.createElement("div");
+    photoNode.classList.add("aero-deck-card-photo");
+    photoNode.style.backgroundImage = `url('${props.photo}')`;
+    cardNode.appendChild(photoNode);
+    
+    let nameNode = document.createElement("div");
+    nameNode.classList.add("aero-deck-card-name");
+    nameNode.innerHTML = props.name;
+    cardNode.appendChild(nameNode);
+    
+    let roleNode = document.createElement("div");
+    roleNode.classList.add("aero-deck-card-role");
+    roleNode.innerHTML = props.role;
+    cardNode.appendChild(roleNode);
+
+    let bioNode = document.createElement("div");
+    bioNode.classList.add("aero-deck-card-bio");
+    bioNode.innerHTML = props.bio;
+    cardNode.appendChild(bioNode);
+
+    return cardNode;
+}
diff --git a/aero/Documentation.css b/aero/Documentation.css
new file mode 100644
index 0000000..3525f2c
--- /dev/null
+++ b/aero/Documentation.css
@@ -0,0 +1,301 @@
+/* <structure> */
+
+.aero-doc{
+	margin: 0px;
+	padding: 0px;
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+}
+
+.aero-doc-header {
+	margin: 0px;
+	padding: 8px;
+	width: 100%;
+	font-size: 16px;
+	font-weight: bold;
+	color: grey;
+	background-color: rgb(232, 238, 232);
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+}
+
+.aero-doc-main {
+	margin: 0px;
+	padding: 0px;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	background-color: white;
+	border-top: solid 1px rgb(169, 169, 169);
+}
+
+.aero-doc-table {
+	width: 24%;
+	padding: 8px 16px 8px 16px;
+}
+
+.aero-doc-content {
+	width: 76%;
+	padding: 8px 16px 8px 16px;
+	height: calc(100vh - 128px);
+	overflow-y: scroll;
+	border-left: solid 1px rgb(169, 169, 169);
+}
+
+.aero-doc-table > div {
+	padding: 6px 12px;
+	border-bottom: solid 1px rgb(225, 217, 255);
+}
+
+.aero-doc-table > div > a{
+	font-size: 24px;
+	font-weight: bold;
+	color: rgb(104, 106, 105);
+}
+
+
+@media (orientation : landscape) {
+
+	.aero-doc {
+		border-top: solid 1px rgb(169, 169, 169);
+	}
+
+	.aero-doc-content {
+		margin: 0px 0px 0px 0px;
+		padding: 16px 32px 16px 32px;
+	}
+}
+
+
+@media (orientation : portrait) {
+	.aero-doc-content {
+		margin: 0px 0px 0px 0px;
+		padding: 8px 16px 8px 16px;
+	}
+}
+
+
+
+
+
+
+/* <h1> */
+.aero-doc-h1 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-weight: lighter;
+	max-width: 92%;
+	padding: 8px;
+	border-radius: 4px;
+	margin: 0px;
+	z-index: 8;
+	text-align: left;
+}
+
+@media (orientation : landscape) {
+	.aero-doc-h1 {
+		font-size: 64px;
+		line-height: 64px;
+	}
+}
+
+@media (orientation : portrait) {
+	.aero-doc-h1 {
+		font-size: 48px;
+		line-height: 48px;
+	}
+}
+
+.aero-doc-h1>span.emphasis {
+	font-weight: bold;
+}
+
+.aero-doc-h1 {
+	padding: 32px 8px 16px 8px;
+}
+
+/* </h1> */
+
+
+/* <h2> */
+.aero-doc-h2 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 24px;
+	line-height: 24px;
+	font-weight: bold;
+	max-width: 92%;
+	padding: 16px 8px 8px 8px;
+	border-radius: 4px;
+	/*white-space: nowrap;*/
+	margin: 0px;
+	z-index: 6;
+	text-align: left;
+}
+
+@media (orientation : landscape) {
+	.aero-doc-h2 {
+		font-size: 24px;
+		line-height: 24px;
+	}
+}
+
+@media (orientation : portrait) {
+	.aero-doc-h2 {
+		font-size: 20px;
+		line-height: 20px;
+	}
+}
+
+/* </h2> */
+
+/* <p> */
+.aero-doc-p {
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	text-align: justify;
+	z-index: 4;
+	padding: 0px 0px 0px 0px;
+	padding: 6px 6px 6px 8px;
+	border-radius: 4px;
+	margin: 0px;
+}
+
+
+/* <p> */
+.aero-doc-p, .aero-doc-ul {
+	font-size: 16px;
+}
+
+.aero-doc-ul>li {
+	padding: 8px 8px 8px 16px;
+}
+
+
+@media (orientation : landscape) {
+	.aero-doc-p {
+		font-size: 16px;
+	}
+}
+
+@media (orientation : portrait) {
+	.aero-doc-p {
+		font-size: 13px;
+	}
+}
+
+/* </p> */
+
+.aero-slide>a {
+	position: absolute;
+	z-index: 10;
+	overflow: hidden;
+	padding: 12px 24px;
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	line-height: 16px;
+	white-space: nowrap;
+	vertical-align: middle;
+	cursor: pointer;
+	user-select: none;
+	background-repeat: repeat-x;
+	background-position: -1px -1px;
+	background-size: 110% 110%;
+	border: 1px solid rgba(240, 240, 255, 1.0);
+	border-radius: 8px;
+	appearance: none;
+	/* appearance */
+	color: #ffffff;
+	background-color: rgba(28, 77, 45, 0.16);
+	background-image: linear-gradient(-180deg, rgb(46 46 46/ 52%) 0%,
+			rgb(16 16 16/ 67%) 90%);
+	backdrop-filter: blur(2px);
+	text-decoration: none;
+}
+
+.aero-slide>a:hover {
+	background-color: #269f42;
+	background-image: linear-gradient(-180deg, #2fcb53 0%, #269f42 90%);
+	background-position: -.5em;
+	border-color: rgba(27, 31, 35, 0.5);
+	text-decoration: none;
+}
+
+.aero-slide>a:focus {
+	box-shadow: 0 0 0 0.2em rgba(52, 208, 88, 0.4);
+	text-decoration: none;
+}
+
+.aero-slide>a:active {
+	background-color: #279f43;
+	background-image: none;
+	border-color: rgba(27, 31, 35, 0.5);
+	box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+	text-decoration: none;
+}
+
+
+
+/* <themes> */
+.aero-doc[theme="light"] {
+	color: black;
+	/*background-color: rgba(255, 255, 255, 0.24);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.75);*/
+	/*text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);*/
+}
+
+.aero-doc[theme="dark"] {
+	color: white;
+	/*background-color: rgba(0, 0, 0, 0.16);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.75);*/
+}
+
+/* </themes> */
+
+
+/* <svg> */
+.aero-doc-pic-svg {
+	padding: 32px 16px 32px 16px;
+}
+
+.aero-doc-pic-svg svg {
+	fill: black;
+	stroke: black;
+}
+
+/* </svg> */
+
+
+
+/* <code> */
+
+
+.aero-doc-code-section {
+	padding: 24px max(5%, 16px) 24px max(5%, 16px);
+}
+
+.aero-doc-code-window {
+	background-color: rgb(33, 23, 59);
+	border-radius: 16px;
+	padding: 16px 32px;
+	color: rgb(87, 211, 211);
+	font-size: 13px;
+}
+
+.aero-doc-code-window pre {
+	margin: 0;
+	padding: 0;
+	overflow-x: scroll;
+	tab-size: 2;
+}
+
+.aero-doc-code-window code {
+	margin: 0;
+	padding: 0;
+}
\ No newline at end of file
diff --git a/aero/DocumentationV2.js b/aero/DocumentationV2.js
new file mode 100644
index 0000000..ad1da5d
--- /dev/null
+++ b/aero/DocumentationV2.js
@@ -0,0 +1,338 @@
+import { AeroElement } from "./AeroElement.js";
+import { AeroUtilities } from "./AeroUtilities.js";
+import { Icon } from "./Icon.js";
+import { WebPage } from "./WebPage.js";
+import { WebPageV2 } from "./WebPageV2.js";
+
+
+// Using ES6 import syntax
+import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/highlight.min.js';
+//  and it's easy to individually load additional languages
+import java from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/java.min.js';
+import xml from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/xml.min.js';
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export const LOW_RESOLUTION_TAG = "-low";
+export const HIGH_RESOLUTION_TAG = "-high";
+
+export class DocumentationV2 extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    /**
+     * @type{List<DocElement>}
+     */
+    elements = new Array();
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    /** @type{boolean} */
+    hasAssetImage = false;
+
+    /** @type{boolean} */
+    isAssetImageLoaded = false;
+
+    /** @type{string} */
+    assetImagePath;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+
+    /**
+     * 
+     * @param {WebPageV2} page 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources){
+        super();
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/Documentation.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("aero-doc");
+
+        this.headerNode = document.createElement("div");
+        this.headerNode.classList.add("aero-doc-header");
+        this.sectionNode.appendChild(this.headerNode);
+
+        this.mainNode = document.createElement("div");
+        this.mainNode.classList.add("aero-doc-main");
+
+        this.tableOfContentsNode = document.createElement("div");
+        this.tableOfContentsNode.classList.add("aero-doc-table");
+        this.mainNode.appendChild(this.tableOfContentsNode);
+
+        this.contentNode = document.createElement("div");
+        this.contentNode.classList.add("aero-doc-content");
+        this.mainNode.appendChild(this.contentNode);
+
+        this.sectionNode.appendChild(this.mainNode);
+
+
+        this.headerNode.innerHTML = "header zone";
+
+        let val;
+        this.arrangement = (val = sources.getAttribute("arrangement")) ? val : "std";
+        this.sectionNode.setAttribute("arrangement", this.arrangement);
+
+        /* <id> */
+        if (sources.id != undefined) {  this.sectionNode.id = sources.id; }
+        /* </id> */
+
+
+        /* <elements> */
+        let node = sources.firstChild;
+        let index = 2;
+        while(node){
+            let type = node.nodeName.toLowerCase();
+            switch(type){
+                case "h1" : this.elements.push(new DocHeader1(page, node, "doc-h1-"+(index++))); break;
+                case "h2" : this.elements.push(new DocHeader2(page, node)); break;
+                case "p" : this.elements.push(new DocParagraph(page, node)); break;
+                case "svg" : this.elements.push(new DocSVG(page, node)); break;
+                case "code" : this.elements.push(new DocCodeBlock(page, node)); break;
+            }
+
+            node = node.nextSibling;
+        }
+
+        this.elements.forEach(element => this.contentNode.appendChild(element.html_getNode()));
+        this.elements.forEach(element => element.html_appendTableEntry(this.tableOfContentsNode));
+        /* </elements> */
+    }
+
+
+    html_getNode(){ 
+        /* return wrapper node */
+        return this.sectionNode;
+    }
+
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+        else if (this.isInitialized && page.imageResolution == 1) {
+            this.redrawHighRes();
+        }
+    }
+
+    draw() {
+
+    }
+
+}
+
+export class DocElement {
+
+    constructor(sources) {
+    
+    }
+
+}
+
+export class DocHeader1 extends DocElement {
+
+    constructor(page, sources, id) {
+        super(sources);
+        this.id = id;
+        this.name = sources.innerHTML;
+
+        const headerNode = document.createElement("h1");
+        headerNode.id = id;
+        headerNode.classList.add("aero-doc-h1");
+        headerNode.innerHTML = this.name;
+        this.headerNode = headerNode;
+    }
+
+    html_getNode() { return this.headerNode; }
+   
+    html_appendTableEntry(tableOfContentsNode) { 
+        const entryNode = document.createElement("div");
+        const linkNode = document.createElement("a");
+        linkNode.href = "#"+this.id;
+        linkNode.innerHTML = this.name;
+        entryNode.appendChild(linkNode);
+        tableOfContentsNode.appendChild(entryNode);
+    }
+}
+
+
+export class DocHeader2 extends DocElement {
+
+    constructor(page, sources) {
+        super(sources);
+        const headerNode = document.createElement("h2"); 
+        headerNode.classList.add("aero-doc-h2");
+        headerNode.innerHTML = sources.innerHTML;
+        this.headerNode = headerNode;
+    }
+
+    html_getNode() { return this.headerNode; }
+    html_appendTableEntry() { /* nothing to add */}
+}
+
+
+export class DocParagraph extends DocElement {
+
+    constructor(page, sources) {
+        super(sources); 
+        const headerNode = document.createElement("p");
+        headerNode.classList.add("aero-doc-p");
+        headerNode.innerHTML = sources.innerHTML;
+        this.headerNode = headerNode;
+    }
+
+    html_getNode() { return this.headerNode; }
+    html_appendTableEntry() { /* nothing to add */}
+}
+
+
+export class DocSVG extends DocElement {
+
+    constructor(page, sources) {
+        super(sources);
+        this.pathname = sources.getAttribute("path");
+
+        const wrapperNode = document.createElement("div");
+        wrapperNode.classList.add("aero-doc-pic-svg");
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+    
+        let val;
+        const width = (val = sources.getAttribute("width")) ? parseInt(val) : 128;
+        const height = (val = sources.getAttribute("height")) ? parseInt(val) : 128;
+        this.icon = new Icon(this.pathname, { width: width, height: height }); 
+        wrapperNode.appendChild(this.icon.build());
+
+        this.wrapperNode = wrapperNode;
+    }
+
+    html_getNode() { return this.wrapperNode; }
+    html_appendTableEntry() { /* nothing to add */}
+
+}
+
+
+export class DocCodeBlock extends DocElement {
+
+    static isLanguageLoaded = false;
+
+    /**
+     * 
+     * @param {WebPageV2} page 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources){
+        super(sources);
+
+        this.sourcePathname = sources.getAttribute("path");
+
+        if (!this.isLanguageLoaded) {
+
+            // Then register the languages you need
+            hljs.registerLanguage('java', java);
+            hljs.registerLanguage('xml', xml);
+            this.isLanguageLoaded = true;
+        }
+
+        //page.css_requireStylesheet("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/default.min.css");
+        page.css_requireStylesheet("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/atom-one-dark.css");
+
+      
+        const wrapperNode = document.createElement("div");
+        wrapperNode.classList.add("aero-doc-code-section");
+
+        const windowNode = document.createElement("div");
+        windowNode.classList.add("aero-doc-code-window");
+       // windowNode.classList.add("theme-atom-one-dark");
+
+        const preNode = document.createElement("pre");
+        //preNode.classList.add("theme-atom-one-dark");
+
+        const spanNode = document.createElement("span");
+        //spanNode.classList.add("language-java");
+       // spanNode.classList.add("hljs");
+
+        const codeNode = document.createElement("code");
+        //codeNode.innerHTML = highlightedCode;
+       
+
+        spanNode.appendChild(codeNode);
+        preNode.appendChild(spanNode);
+        windowNode.appendChild(preNode);
+        wrapperNode.appendChild(windowNode);
+
+        AeroUtilities.getResourceFromOrigin(this.sourcePathname, "text", sourceCode => {
+            const highlightedSourceCode = hljs.highlight(sourceCode, { language: 'java' }).value;
+            codeNode.innerHTML = highlightedSourceCode;
+        })
+
+        this.wrapperNode = wrapperNode;
+    }
+
+
+    html_getNode() { return this.wrapperNode; }
+    html_appendTableEntry() { /* nothing to add */}
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        /* do nothing */
+    }
+}
diff --git a/aero/Footer.css b/aero/Footer.css
new file mode 100644
index 0000000..b36d31c
--- /dev/null
+++ b/aero/Footer.css
@@ -0,0 +1,130 @@
+/* <footer> */
+footer {
+	background-color: rgb(64, 64, 64);
+	width: 100%;
+	color: rgb(128, 128, 128);
+}
+
+/* </footer> */
+
+
+
+.aero-footer {
+	background: #2c3840;
+	color: #8aa0ae;
+	padding: 0;
+	margin: 0;
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 16px;
+	font-weight: bold;
+}
+
+.aero-footer .marketing-site-footer-menu-social a {
+	color: #fefefe;
+}
+
+.aero-footer .column-block {
+	margin-bottom: 30px;
+}
+
+.aero-footer-row {
+	margin-bottom: 1rem;
+	display: flex;
+	padding: 0 8% 0 8%;
+}
+
+.aero-footer-column {
+	padding: 0px 4% 0px 4%;
+}
+
+.aero-footer-social > a > img {
+	width: 64px;
+	height: 64px;
+	margin: 0px 20px 0px 20px;
+}
+
+@media screen and (max-width: 39.9375em) {
+	.aero-footer .columns {
+		margin-bottom: 2rem;
+	}
+}
+
+.marketing-site-footer-name {
+	color: #fefefe;
+	margin-bottom: 1rem;
+	font-size: 2rem;
+}
+
+.marketing-site-footer-title {
+	color: #fefefe;
+	margin-bottom: 1rem;
+	font-size: 1.25rem;
+}
+
+.marketing-site-footer-block {
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	margin-bottom: 1rem;
+}
+
+.marketing-site-footer-block .fa {
+	font-size: 2rem;
+	color: #020304;
+}
+
+.marketing-site-footer-block p {
+	margin-left: 1rem;
+	line-height: 1.125rem;
+}
+
+.aero-footer-bottom {
+	background: #020304;
+	padding: 8px 8% 8px 8%;
+	margin-bottom: 0;
+	color: white;
+}
+.aero-footer-bottom > a {
+	display: inline-block;
+	padding: 2px 8px 2px 8px;
+	margin: 0px 0px 0px 0px;
+	border-left: solid 1px #8aa0ae;
+	text-decoration: none;
+	color: rgb(128, 128, 128);
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+		font-size: 14px;
+		font-weight: normal;
+}
+
+.aero-footer-bottom > a:hover {
+	text-decoration: underline;
+}
+
+.marketing-site-footer-bottom .marketing-site-footer-bottom-links a {
+	color: #8aa0ae;
+}
+
+@media screen and (max-width: 63.9375em) {
+	.marketing-site-footer-bottom .marketing-site-footer-bottom-links {
+		-webkit-justify-content: center;
+		-ms-flex-pack: center;
+		justify-content: center;
+	}
+}
+
+@media screen and (max-width: 63.9375em) {
+	.marketing-site-footer-bottom {
+		text-align: center;
+	}
+}
+
+
+
+/* <icon> */
+
+.aero-footer-social-link {
+	width: 64px;
+	height: 64px;
+	margin: 0px 20px 0px 20px;
+}
\ No newline at end of file
diff --git a/aero/Footer.js b/aero/Footer.js
new file mode 100644
index 0000000..88f0bef
--- /dev/null
+++ b/aero/Footer.js
@@ -0,0 +1,48 @@
+import { AeroElement } from "./AeroElement.js";
+import { AeroUtilities } from "./AeroUtilities.js";
+
+
+export class Footer extends AeroElement {
+
+  /** @type{HTMLElement} */
+  footerNode;
+
+
+  props;
+
+  constructor(contentPathname, props) {
+    super();
+    this.contentPathname = contentPathname
+    this.props = props;
+  }
+
+  /**
+    * 
+    * @param {WebPage} page 
+    * @returns {HTMLElement}
+    */
+  build(page) {
+
+    /* CSS requirements */
+    page.css_requireStylesheet("/aero/Footer.css");
+
+    /* build nodes */
+    this.footerNode = document.createElement('footer');
+    this.footerNode.classList.add('aero-footer');
+
+    AeroUtilities.sendRequest_HTTP_GET(this.contentPathname, "text", content => {
+      this.footerNode.innerHTML = content;
+    });
+
+    /* return wrapper node */
+    return this.footerNode;
+  }
+
+  /**
+    * 
+    * @param {WebPage} page 
+    */
+  render(page) {
+
+  }
+}
\ No newline at end of file
diff --git a/aero/FooterV2.js b/aero/FooterV2.js
new file mode 100644
index 0000000..3776286
--- /dev/null
+++ b/aero/FooterV2.js
@@ -0,0 +1,46 @@
+import { AeroElement } from "./AeroElement.js";
+import { AeroUtilities } from "./AeroUtilities.js";
+import { WebPageV2 } from "./WebPageV2.js";
+
+
+export class FooterV2 extends AeroElement {
+
+  /** @type{HTMLElement} */
+  footerNode;
+
+
+  /**
+   * 
+   * @param {WebPageV2} page 
+   * @param {HTMLElement} sources 
+   */
+  constructor(page, sources) {
+    super();
+    /* CSS requirements */
+    page.css_requireStylesheet("/aero/Footer.css");
+
+    /* build nodes */
+    this.footerNode = document.createElement('footer');
+    this.footerNode.classList.add('aero-footer');
+
+    this.contentPathname = sources.getAttribute("path");
+
+    AeroUtilities.sendRequest_HTTP_GET(this.contentPathname, "text", content => {
+      this.footerNode.innerHTML = content;
+    });
+  }
+
+  html_getNode() {
+    /* return wrapper node */
+    return this.footerNode;
+  }
+
+
+  /**
+    * 
+    * @param {WebPageV2} page 
+    */
+  render(page) {
+
+  }
+}
\ No newline at end of file
diff --git a/aero/Grid.css b/aero/Grid.css
new file mode 100644
index 0000000..898e5db
--- /dev/null
+++ b/aero/Grid.css
@@ -0,0 +1,348 @@
+/* <aero-grid> */
+.aero-grid {
+	margin: 0px 0px 0px 0px;
+	padding: 0px 0px 0px 0px;
+	width: 100%;
+}
+
+.aero-grid > div.text {
+	margin: 0px 0px 0px 0px;
+	padding: 8px 16% 8px 16%;
+}
+
+
+/* <asset> */
+
+div.aero-grid-asset {
+	margin: 0px 0px 0px 0px;
+	padding: 8px 12% 8px 12%;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+	height: 600px;
+	z-index: 2;
+	/*overflow: auto;*/
+}
+
+@media (orientation : landscape) {
+	div.aero-grid-asset {
+		height: 600px;
+		padding: 8px 12% 8px 12%;
+	}
+}
+
+@media (orientation : portrait) {
+	div.aero-grid-asset {
+		height: 320px;
+		padding: 4px 0px 4px 0px;
+	}
+}
+
+
+/* <asset> */
+
+
+/* <metrics> */
+div.aero-grid[type = "metrics"] {
+	margin: 0px 0px 0px 0px;
+	padding: 8px 12% 8px 12%;
+	display: inline-flex;
+	background-color: black;
+	z-index: 2;
+	/*overflow: auto;*/
+}
+
+
+div.aero-grid-metrics-item {
+	flex: auto;
+	padding: 20px;
+}
+
+div.aero-grid-metrics-item * {
+	padding: 0px;
+	margin: 0px;
+}
+
+div.aero-grid-metrics-item-value>span {
+	vertical-align: baseline;
+	color: #9fffa5;
+}
+
+div.aero-grid-metrics-item-value>span.modifier {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 64px;
+	font-weight: normal;
+}
+
+div.aero-grid-metrics-item-value>span.number {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 64px;
+	font-weight: bold;
+	padding: 0px 4px 0px 4px;
+}
+
+div.aero-grid-metrics-item-value>span.unit {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 32px;
+	font-weight: bold;
+}
+
+div.aero-grid-metrics-item-parameter {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 16px;
+	font-weight: normal;
+	padding: 8px;
+	color: #6be8ea;
+}
+
+
+@media (orientation : landscape) {
+	/* default */
+
+	div.aero-grid-metrics-item {
+		border-left: 1px solid rgba(64, 64, 64, 0.92);
+	}
+
+	div.aero-grid[type = "metrics"]>div.aero-grid-metrics-item:first-child {
+		border-left: none;
+	}
+}
+
+@media (orientation : portrait) {
+	div.aero-grid[type="metrics"] {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	div.aero-grid-metrics-item {
+		border-top: 1px solid rgba(64, 64, 64, 0.92);
+	}
+
+	div.aero-grid[type = "metrics"] > div.aero-grid-metrics-item:first-child {
+		border-top: none;
+	}
+}
+
+
+/* </metrics> */
+
+/* <h1> */
+.aero-grid h1 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-weight: lighter;
+	max-width: 92%;
+	padding: 8px;
+	border-radius: 4px;
+	margin: 0px;
+	z-index: 8;
+	text-align: center;
+}
+
+@media (orientation : landscape) {
+	.aero-grid h1{
+		font-size: 64px;
+		line-height: 64px;
+	}
+}
+
+@media (orientation : portrait) {
+	aero-grid h1{
+		font-size: 48px;
+		line-height: 48px;
+	}
+}
+
+.aero-grid h1 > span.emphasis {
+	font-weight: bold;
+}
+
+/* </h1> */
+
+
+/* <h2> */
+.aero-grid h2 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 24px;
+	line-height: 24px;
+	font-weight: bold;
+	max-width: 92%;
+	padding: 8px;
+	border-radius: 4px;
+	/*white-space: nowrap;*/
+	margin: 0px;
+	z-index: 6;
+	text-align: center;
+}
+
+
+@media (orientation : landscape) {
+	.aero-grid h2 {
+		font-size: 24px;
+		line-height: 24px;
+	}
+}
+
+@media (orientation : portrait) {
+	.aero-grid h2 {
+		font-size: 20px;
+		line-height: 20px;
+	}
+}
+
+/* </h2> */
+
+.aero-grid p {
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	text-align: justify;
+	z-index: 4;
+	padding: 0px 0px 0px 0px;
+	padding: 6px 6px 6px 8px;
+	border-radius: 4px;
+	margin: 0px;
+}
+
+.aero-grid > a {
+	position: absolute;
+	z-index: 10;
+	overflow: hidden;
+	padding: 12px 24px;
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	line-height: 16px;
+	white-space: nowrap;
+	vertical-align: middle;
+	cursor: pointer;
+	user-select: none;
+	background-repeat: repeat-x;
+	background-position: -1px -1px;
+	background-size: 110% 110%;
+	border: 1px solid rgba(240, 240, 255, 1.0);
+	border-radius: 8px;
+	appearance: none;
+	/* appearance */
+	color: #ffffff;
+	background-color: rgba(28, 77, 45, 0.16);
+	background-image: linear-gradient(-180deg, rgb(46 46 46/ 52%) 0%,
+			rgb(16 16 16/ 67%) 90%);
+	backdrop-filter: blur(2px);
+	text-decoration: none;
+}
+
+.aero-grid > a:hover {
+	background-color: #269f42;
+	background-image: linear-gradient(-180deg, #2fcb53 0%, #269f42 90%);
+	background-position: -.5em;
+	border-color: rgba(27, 31, 35, 0.5);
+	text-decoration: none;
+}
+
+.aero-grid > a:focus {
+	box-shadow: 0 0 0 0.2em rgba(52, 208, 88, 0.4);
+	text-decoration: none;
+}
+
+.aero-grid > a:active {
+	background-color: #279f43;
+	background-image: none;
+	border-color: rgba(27, 31, 35, 0.5);
+	box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+	text-decoration: none;
+}
+
+@media (orientation : landscape) {}
+
+@media (orientation : portrait) {
+	.aero-grid  h1 {
+		font-size: 32px;
+		line-height: 32px;
+	}
+
+	.aero-grid h2 {
+		font-size: 18px;
+		line-height: 18px;
+	}
+
+	.aero-grid p {
+		font-size: 16px;
+	}
+}
+
+.aero-grid-paragraph {
+	font-size: 16px;
+	padding: 32px 0px 32px 0px;
+}
+
+/* </aero-grids> */
+
+/* <aero-grid-prime> */
+
+/* </aero-grid-prime> */
+
+
+
+/* <themes> */
+.aero-grid[theme = "light"] {
+	color: black;
+	/*background-color: rgba(255, 255, 255, 0.24);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.75);*/
+	/*text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);*/
+}
+
+.aero-grid[theme = "dark"] {
+	color: white;
+	/*background-color: rgba(0, 0, 0, 0.16);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.75);*/
+}
+
+/* </themes> */
+
+
+/* <backgrounds> */
+.background-color {
+	background-repeat: no-repeat;
+}
+
+
+.background-pic {
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+}
+/* </backgrounds> */
+
+.aero-grid-deck {
+	left: 50%;
+    position: relative;
+    transform: translateX(-50vw);
+    margin: 64px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, auto));
+    /* flex-wrap: wrap; */
+    gap: 32px;
+    align-items: center;
+}
+
+/* <cards> */
+
+.aero-grid-card {
+    width: 240px;
+	aspect-ratio: 2.5 / 3.5;
+    border: none;
+    border-radius: 16px;
+	box-shadow: 0px 0px 8px rgba(75, 75, 75, 0.532);
+}
+
+
+/* </cards> */
diff --git a/aero/Grid.js b/aero/Grid.js
new file mode 100644
index 0000000..c1b0f0f
--- /dev/null
+++ b/aero/Grid.js
@@ -0,0 +1,208 @@
+import { AeroElement } from "./AeroElement.js";
+import { WebPage } from "./WebPage.js";
+import { LoadHandler } from "./aero.js";
+
+import { AeroUtilities } from "./AeroUtilities.js";
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export class Grid extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    props;
+
+    /** @type {HTMLDivElement} */
+    deckNode;
+
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    constructor(type, props) {
+        super();
+        this.type = type;
+        this.props = props;
+    }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     * @param {*} state 
+     * @returns 
+     */
+    build(page) {
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/Grid.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("aero-grid");
+
+        this.setType(this.type);
+        this.setTheme(this.props.theme ? this.props.theme : "light");
+
+
+        /* <background> */
+        if (this.props.backgroundImage) {
+            this.sectionNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.sectionNode, this.props.backgroundImage);
+        }
+        else if (this.props.backgroundColor) {
+            this.sectionNode.classList.add("background-colo");
+            this.sectionNode.style.backgroundColor = this.props.backgroundColor;
+        }
+        /* </background> */
+
+        /* <deck> */
+
+        this.deckNode = document.createElement("div");
+        this.deckNode.classList.add("aero-grid-deck");
+
+        this.props.cards.forEach(card => this.deckNode.appendChild(card.build(page)));
+
+        this.sectionNode.appendChild(this.deckNode);
+
+
+        /* </deck> */
+
+        return this.sectionNode;
+    }
+
+
+    setType(type) {
+        this.sectionNode.setAttribute("type", type);
+    }
+
+    setTheme(theme) {
+        this.sectionNode.setAttribute("theme", theme);
+    }
+
+
+    render(state) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+    }
+
+    draw() {
+
+    }
+
+}
+
+
+export class GridCard extends AeroElement {
+
+    /** @type {HTMLDivElement } */
+    cardNode;
+
+    type;
+
+    props;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    constructor(type, props) {
+        super();
+        this.type = type;
+        this.props = props;
+    }
+
+    /**
+     * 
+     * @param {LoadHandler} handler 
+     * @param {*} state 
+     * @returns 
+     */
+    build(page) {
+        this.cardNode = document.createElement("div");
+        this.cardNode.classList.add("aero-grid-card");
+
+
+        /* <background> */
+        if (this.props.backgroundImage) {
+            this.cardNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.cardNode, this.props.backgroundImage);
+        }
+        else if (this.props.backgroundColor) {
+            this.cardNode.classList.add("background-color");
+            this.cardNode.style.backgroundColor = this.props.backgroundColor;
+        }
+        /* </background> */
+
+
+        this.setType(this.type);
+        this.setTheme(this.props.theme ? this.props.theme : "light");
+
+        return this.cardNode;
+    }
+
+
+    setType(type) {
+        this.cardNode.setAttribute("type", type);
+    }
+
+    setTheme(theme) {
+        this.cardNode.setAttribute("theme", theme);
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/aero/Header.css b/aero/Header.css
new file mode 100644
index 0000000..9605034
--- /dev/null
+++ b/aero/Header.css
@@ -0,0 +1,320 @@
+/* <header> */
+header {
+	background-color: rgb(255, 255, 255);
+	/*width: 100%;*/
+	width: 100vw;
+	color: black;
+}
+
+.aero-header-placeholder {
+	width: 100vw;
+	height: 64px;
+}
+
+.aero-header-flying {
+	width: 100vw;
+	height: 64px;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	z-index: 128;
+}
+
+.aero-header-bar {
+	height: 64px;
+}
+
+/* <placeholder> */
+header[theme="light"] > .aero-header-placeholder {
+	background-color: rgb(255, 255, 255);
+	color: black;
+}
+
+header[theme="dark"] > .aero-header-placeholder {
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+}
+/* </placeholder> */
+
+
+/* <flying> */
+header[theme="light"] > .aero-header-flying {
+	background-color: rgb(255, 255, 255);
+}
+
+header[theme="dark"] > .aero-header-flying {
+	background-color: rgb(0, 0, 0);
+}
+/* </flying> */
+
+
+/* <bar> */
+header[theme="light"] .aero-header-bar {
+	background-color: rgb(255, 255, 255);
+	color: black;
+	border-bottom: solid 1px rgba(192, 192, 192, 0.76);
+}
+
+header[theme="dark"] .aero-header-bar {
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+	border-bottom: solid 1px rgba(64, 64, 64, 0.76);
+}
+/* </bar> */
+
+
+header[theme="dark"] > .aero-header-bar, header[theme="dark"] > .aero-header-placeholder {
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+}
+
+
+
+.aero-header-menu>a {
+	color: rgb(64, 64, 64);
+	text-decoration: none;
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 14px;
+	font-weight: bold;
+}
+
+
+.menu-login {
+	width: 64px;
+	cursor: pointer;
+}
+
+.menu-login:hover>img {
+	fill: blue;
+}
+
+.menu-login>img>svg {
+	fill: black;
+}
+
+
+
+
+/* <nav> */
+
+@media (orientation : landscape) {
+	header {
+		height: 64px;
+	}
+
+	.aero-header-placeholder {
+		height: 64px;
+	}
+
+
+	.aero-header-logo {
+		width: 12%;
+		min-width: 64px;
+		cursor: pointer;
+	}
+
+	.aero-header-logo>img {
+		margin: 8px 16px 8px 16px;
+		height: 48px;
+		width: 48px;
+	}
+
+	.aero-header-bar {
+		height: 64px;
+		padding: 0px 4% 0px 4%;
+		display: flex;
+		flex-direction: row;
+	}
+
+	.aero-header-bar>* {
+		flex: auto;
+	}
+
+
+	nav {
+		z-index: 12;
+		width: 72%;
+	}
+
+	nav>ul {
+		margin: 0px 0px 0px 0px;
+		margin-inline-start: 0px;
+		padding-inline-start: 0px;
+	}
+
+	.aero-header-menu {
+		display: inline-block;
+		color: red;
+		text-decoration: none;
+		padding: 8px 12px 4px 12px;
+		line-height: 48px;
+		height: 48px;
+		cursor: pointer;
+	}
+
+	.aero-header-menu[selected] {
+		border-bottom: solid 4px rgb(224, 149, 0);
+	}
+
+	.aero-header-menu>a {
+		padding: 8px;
+		margin: 0px;
+		vertical-align: baseline;
+	}
+
+	header[theme="dark"] .aero-header-menu>a {
+		color: rgb(239, 239, 239);
+	}
+
+	.aero-header-menu:hover>a {
+		background-color: rgb(94, 53, 231);
+		border-radius: 4px;
+		color: rgb(255, 243, 249);
+	}
+
+
+
+	.aero-header-social {
+		width: 16%;
+		min-width: 64px;
+		/*overflow: hidden; */
+	}
+	
+
+
+	.aero-header-social-link>img {
+		margin: 16px;
+		width: 32px;
+		height: 32px;
+	}
+
+}
+
+
+@media (orientation : portrait) {
+	header {
+		height: 64px;
+	}
+
+	.aero-header-bar {
+		height: 64px;
+		padding: 0px 0px 0px 0px;
+	}
+
+	.aero-menu-icons-wrapper {
+		display: inline-block;
+		vertical-align: top;
+		display: flex;
+		height: 64px;
+	}
+
+	.menu-handler {
+		display: inline-block;
+		vertical-align: top;
+		padding: 0px;
+		margin: 0px 0px 0px 0px;
+		cursor: pointer;
+	}
+
+	.menu-handler>img {
+		margin: 14px 14px 14px 14px;
+		/*height: 48px;*/
+		width: 36px;
+	}
+
+	.aero-header-logo {
+		display: inline-block;
+		vertical-align: top;
+		width: 80px;
+		margin: 0px 0px 0px calc(50vw - 96px);
+	}
+
+	.aero-header-logo>img {
+		margin: 4px 0px 0px 0px;
+		width: 56px;
+	}
+
+
+	nav {
+		z-index: 12;
+		width: 80vw;
+		position: absolute;
+		top: 72px;
+		left: 50vw;
+		transform: translateX(-50%);
+		padding: 0px;
+		visibility: hidden;
+		color: rgb(64, 64, 64);
+		border: solid 1px rgb(192, 192, 192, 0.76);
+		background-color: rgba(232, 232, 232, 0.64);
+		backdrop-filter: blur(16px);
+		padding: 16px 0 16px 0;
+		border-radius: 12px;
+	}
+
+
+	@media screen and (max-width: 600px) {
+		nav {
+			width: calc(100% - 64px);
+		}
+	}
+
+	nav>ul {
+		margin: 0px 0px 0px 0px;
+		margin-inline-start: 0px;
+		padding-inline-start: 0px;
+	}
+
+	.aero-header-menu {
+		display: block;
+		color: red;
+		text-decoration: none;
+		padding: 12px 12px 12px 12px;
+	}
+
+	.aero-header-menu:first-child {
+		border-top: none;
+	}
+
+	.aero-header-menu:hover>a {
+		background-color: rgb(199, 204, 208);
+		border-radius: 4px;
+	}
+
+	.aero-header-menu[selected] {
+		border-left: solid 8px rgb(224, 149, 0);
+	}
+
+	.aero-header-menu>a {
+		font-weight: lighter;
+		line-height: 48px;
+		height: 48px;
+		font-size: 20px;
+		font-weight: bold;
+		/*padding: 0px;*/
+		padding: 8px 8px 8px 16px;
+		margin: 0px;
+		color: rgb(0, 0, 0);
+		vertical-align: baseline;
+	}
+
+	.aero-header-social {
+		display: inline-block;
+		vertical-align: top;
+		margin: 0px 0px 10px 0px;
+		margin-left: auto;
+	}
+
+	.aero-header-social-link>img {
+		margin: 16px;
+		width: 32px;
+		height: 32px;
+	}
+
+
+}
+
+/* </nav> */
+
+/* </header> */
\ No newline at end of file
diff --git a/aero/HeaderV2.js b/aero/HeaderV2.js
new file mode 100644
index 0000000..dc32bf2
--- /dev/null
+++ b/aero/HeaderV2.js
@@ -0,0 +1,402 @@
+import { AeroElement } from "./AeroElement.js";
+import { WebPage } from "./WebPage.js";
+import { clearChildNodes } from "./aero.js";
+
+/*
+export const MENUS = ["Home", "Technology", "Applications", "Team", "Contact"];
+export const HREF = ["/index.html", "/technology.html", "/applications.html", "/team.html", "/contact.html"];
+*/
+
+/**
+ * 
+ */
+export class HeaderV2 extends AeroElement {
+
+    /** @type{HTMLHeadElement} */
+    headerNode;
+
+     /**
+     * @type{Nav}
+     */
+    nav;
+
+     /**
+     * @type{Social}
+     */
+     social;
+
+    /**
+     * @type {boolean}
+     */
+    isNavVisible;
+
+
+    /**
+     * @type{String} 
+     * Color of the flat elements (icon/logo)
+     */
+    flatColor;
+
+    /**
+     * 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources) {
+        super();
+
+        this.flatColor = "black";
+        let val;
+        this.theme = (val = sources.getAttribute("theme")) ? val : "light";
+        switch (this.theme) {
+            default:
+            case "light": this.flatColor = "black"; break;
+            case "dark": this.flatColor = "white"; break;
+        }
+
+        this.logo = (val = sources.getAttribute("logo")) ? val : "light";
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/Header.css");
+
+        /* build nodes */
+        this.headerNode = document.createElement('header');
+        this.headerNode.setAttribute("theme", this.theme);
+        this.isLandscape = page.isLandscape;
+
+        /* build menus */
+        let node = sources.firstChild;
+        while (node) {
+            if (node.nodeName.toLowerCase() == "nav") { 
+                this.nav = new Nav(node);
+            }
+            else if (node.nodeName.toLowerCase() == "social") { 
+                this.social = new Social(node);
+            }
+
+            /* save next node */
+            node = node.nextSibling;
+        }
+
+        this.draw(page, sources);
+    }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     * @param {HTMLElement} sourceNode 
+     * 
+     * @returns {HTMLElement}
+     */
+    html_getNode() {
+
+        /* return wrapper node */
+        return this.headerNode;
+    }
+
+    load() { /* nothing to load here */ }
+
+    /**
+     * 
+     * @param {WebPage} page 
+     * @returns {}
+     */
+    render(page) {
+        if (page.isLandscape != this.isLandscape) { // repaint
+            this.isLandscape = page.isLandscape;
+            clearChildNodes(this.headerNode);
+            this.draw();
+        }
+    }
+
+    draw() {
+
+        const placeholderNode = document.createElement("div");
+        placeholderNode.classList.add("aero-header-placeholder");
+        this.headerNode.appendChild(placeholderNode);
+
+        const flyingNode = document.createElement("div");
+        flyingNode.classList.add("aero-header-flying");
+
+        const barNode = document.createElement("div");
+        barNode.classList.add("aero-header-bar");
+        if (this.isLandscape) {
+            this.drawLandscape(barNode);
+        }
+        else {
+            this.drawPortrait(barNode);
+        }
+        flyingNode.appendChild(barNode);
+        this.headerNode.appendChild(flyingNode);
+
+
+
+        let lastKnowScrollY = 0;
+        let deltaScrollY = 0;
+        let upwardDeltaScrollY = 0;
+        let ticking = false;
+        let barPositionY = 0;
+        let previousMove = 0; /* O :undefined, -1:upward, +1:downward */
+
+
+        const udpateBarPosition = function (y) { flyingNode.style.top = `${y}px`; }
+
+        window.addEventListener("scroll", function (e) {
+            deltaScrollY = window.scrollY - lastKnowScrollY;
+            lastKnowScrollY = window.scrollY;
+
+            if (deltaScrollY < 0) { /* going upward, deltaScrollY < 0  */
+                //if(previousMove != -1){ barPositionY = -68; }
+                barPositionY -= deltaScrollY;
+
+                //previousMove = -1;
+            }
+            else { /* downward, deltaScrollY > 0 */
+                barPositionY -= deltaScrollY;
+
+                //previousMove = 1;
+            }
+            if (barPositionY > 0) { barPositionY = 0; }
+            if (barPositionY < -65) { barPositionY = -65; }
+            console.log(`barPositionY: ${barPositionY}`);
+
+            if (!ticking) {
+                window.requestAnimationFrame(function () {
+                    udpateBarPosition(barPositionY);
+                    ticking = false;
+                });
+            }
+
+            ticking = true;
+        });
+    }
+
+
+    drawLandscape(barNode) {
+
+        /* <front-icon> */
+        let menuLogoNode = document.createElement("div");
+        menuLogoNode.classList.add("aero-header-logo");
+        let frontImgNode = document.createElement("img");
+        frontImgNode.src = this.logo;
+        frontImgNode.alt = "logo";
+        menuLogoNode.appendChild(frontImgNode);
+        barNode.appendChild(menuLogoNode);
+        /* </front-icon> */
+
+        /* <nav> */
+        const navNode = this.nav.html_getNode();
+        barNode.appendChild(navNode);
+        navNode.style.visibility = "visible";
+        this.isNavVisible = true; // visible by default in landscape
+        /* </nav> */
+
+        /* <login-icon> */
+        if(this.social){
+            barNode.appendChild(this.social.html_getNode());
+        }
+        
+        /* </login-icon> */
+    }
+
+
+    drawPortrait(barNode) {
+
+        let iconsWrapperNode = document.createElement("div");
+        iconsWrapperNode.classList.add("aero-menu-icons-wrapper");
+
+        /* <menu-handler-icon> */
+        let menuHandlerNode = document.createElement("div");
+        menuHandlerNode.classList.add("menu-handler");
+        let menuHandlerImgNode = document.createElement("img");
+        menuHandlerImgNode.src = `/icons/menu-${this.flatColor}.svg`;
+        menuHandlerImgNode.alt = "menu";
+        menuHandlerNode.appendChild(menuHandlerImgNode);
+        iconsWrapperNode.appendChild(menuHandlerNode);
+        /* </menu-handler-icon> */
+
+        /* <logo-icon> */
+        let menuLogoNode = document.createElement("div");
+        menuLogoNode.classList.add("aero-header-logo");
+        let frontImgNode = document.createElement("img");
+        frontImgNode.src = this.logo;
+        frontImgNode.alt = "logo";
+        menuLogoNode.appendChild(frontImgNode);
+        iconsWrapperNode.appendChild(menuLogoNode);
+        /* </logo-icon> */
+
+        barNode.appendChild(iconsWrapperNode);
+
+        let navNode = this.nav.html_getNode();
+
+        barNode.appendChild(navNode);
+
+        this.isNavVisible = false; // hidden by default in portrait
+        navNode.style.visibility = "hidden";
+        let _this = this;
+        menuHandlerNode.addEventListener("click", function () {
+            navNode.style.visibility = _this.isNavVisible ? "hidden" : "visible";
+            _this.isNavVisible = !_this.isNavVisible;
+        }, false);
+
+        /* <login-icon> */
+        iconsWrapperNode.appendChild(this.social.html_getNode());
+        /* </login-icon> */
+    }
+
+
+
+    buildNavNode() {
+
+        /* <nav> */
+        let navNode = document.createElement('nav');
+        let unorderedListNode = document.createElement('ul');
+        this.menus.forEach(menu => unorderedListNode.appendChild(menu.html_getNode()));
+        navNode.appendChild(unorderedListNode);
+        /* </nav> */
+
+        return navNode;
+    }
+
+
+    buildLoginNode() {
+        /* <login-icon> */
+        const loginNode = document.createElement("a");
+
+        loginNode.href = "https://app.alphaventor.com";
+
+        loginNode.classList.add("menu-login");
+        let loginImgNode = document.createElement("img");
+        loginImgNode.src = `/icons/login-${this.flatColor}.svg`;
+        loginImgNode.alt = "login";
+        loginNode.appendChild(loginImgNode);
+        return loginNode;
+        /* </login-icon> */
+    }
+
+    /**
+   * 
+   * @param {AeroWebPage} page 
+   */
+    link(page) {
+        this.page = page;
+        page.import_CSS("aero/AeroHeader.css");
+    }
+
+    isLoaded() {
+        return this.isInitialized;
+    }
+}
+
+
+
+class Nav {
+
+    /**
+     * @type{Array<Menu>}
+     */
+    menus = new Array();
+
+    constructor(sources){
+        let node = sources.firstChild;
+        while (node) {
+            if (node.nodeName.toLowerCase() == "menu") { 
+                this.menus.push(new Menu(node));
+            }
+
+            /* save next node */
+            node = node.nextSibling;
+        }
+
+          /* <nav> */
+          let navNode = document.createElement('nav');
+          let unorderedListNode = document.createElement('ul');
+          this.menus.forEach(menu => unorderedListNode.appendChild(menu.html_getNode()));
+          navNode.appendChild(unorderedListNode);
+          /* </nav> */
+  
+          this.navNode = navNode;
+    }
+
+    html_getNode(){ return this.navNode; }
+
+}
+
+
+class Menu {
+
+    constructor(source){
+        let listItemNode = document.createElement('li');
+        listItemNode.classList.add("aero-header-menu")
+
+        let isSelected = (source.getAttribute("selected") != undefined);
+        if (isSelected) {
+            listItemNode.setAttribute("selected", "");
+        }
+
+        let aNode = document.createElement("a");
+        aNode.href = isSelected ? "/" : source.getAttribute("to");
+        aNode.innerHTML = source.innerHTML;
+        listItemNode.appendChild(aNode);
+        this.listItemNode = listItemNode;
+    }
+
+
+    html_getNode(){
+        return this.listItemNode;
+    }
+
+}
+
+
+class Social {
+
+
+    /**
+     * @type{Array<Link>}
+     */
+    links = new Array();
+
+    constructor(sources){
+        let node = sources.firstChild;
+        while (node) {
+            if (node.nodeName.toLowerCase() == "a") { 
+                this.links.push(new Link(node));
+            }
+
+            /* save next node */
+            node = node.nextSibling;
+        }
+
+          /* <wrapper> */
+          let socialNode = document.createElement('div');
+          socialNode.classList.add("aero-header-social");
+          this.links.forEach(link => socialNode.appendChild(link.html_getNode()));
+          /* </wrapper> */
+  
+          this.socialNode = socialNode;
+    }
+
+    html_getNode(){ return this.socialNode; }
+}
+
+class Link {
+
+    constructor(sources){
+         /* <login-icon> */
+         const loginNode = document.createElement("a");
+
+         loginNode.href = sources.getAttribute("to");
+ 
+         loginNode.classList.add("aero-header-social-link");
+         let loginImgNode = document.createElement("img");
+         loginImgNode.src = sources.getAttribute("pic");
+         loginImgNode.alt = "login";
+         loginNode.appendChild(loginImgNode);
+         this.loginNode = loginNode;
+         /* </login-icon> */
+    }
+
+    html_getNode(){ return this.loginNode; }
+
+}
\ No newline at end of file
diff --git a/aero/Icon.js b/aero/Icon.js
new file mode 100644
index 0000000..5cf6c62
--- /dev/null
+++ b/aero/Icon.js
@@ -0,0 +1,45 @@
+import { AeroUtilities } from "./AeroUtilities.js";
+
+
+
+
+export class Icon {
+
+    constructor(pathname, props) {
+        this.pathname = pathname;
+        this.props = props;
+
+        this.width = props.width ? props.width : 64;
+        this.height = props.height ? props.height : 64;
+
+    }
+
+    build() {
+
+        this.wrapperNode = document.createElement("div");
+
+        AeroUtilities.getResourceFromOrigin(this.pathname, "text", responseText => {
+            this.wrapperNode.innerHTML = responseText;
+            let svgNode = this.wrapperNode.getElementsByTagName("svg")[0];
+            svgNode.setAttribute("width", this.width);
+            svgNode.setAttribute("height", this.height);
+            this.svgNode = svgNode;
+            this.isSVGNodeLoaded = true;
+        });
+
+        return this.wrapperNode;
+    }
+
+    getEnvelope(){ return this.wrapperNode; }
+
+}
+
+
+export function SVG_inject(target, pathname, width, height){
+    AeroUtilities.getResourceFromOrigin(pathname, "text", responseText => {
+        target.innerHTML = responseText;
+        const svgNode = target.getElementsByTagName("svg")[0];
+        svgNode.setAttribute("width", width ? width : 64);
+        svgNode.setAttribute("height", height ? height : 64);
+    });
+}
\ No newline at end of file
diff --git a/aero/ModalBox.css b/aero/ModalBox.css
new file mode 100644
index 0000000..fcff057
--- /dev/null
+++ b/aero/ModalBox.css
@@ -0,0 +1,141 @@
+/* modal box */
+
+
+.modalbox-overlay {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    background-color: #808080d9;
+    z-index: 64;
+}
+
+.modalbox {
+    position: absolute;
+    top: 50vh;
+    left: 50vw;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    background-color: rgb(240, 240, 240);
+    border-radius: 16px;
+    border: 1px solid grey;
+    box-shadow: rgba(64, 64, 64, 0.507) 0px 4px 16px;
+    display: flex;
+    flex-direction: row;
+    padding: 24px;
+    z-index: 68;
+}
+
+
+.modalbox-icon {
+    width: 120px;
+    margin: 24px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.modalbox-icon>svg {
+    fill: rgb(241, 241, 41);
+    filter: drop-shadow(0px 1px 4px rgb(0 0 0 / 0.4));
+}
+
+
+.modalbox-main {
+    font-family: Arial, Helvetica, sans-serif;
+    display: flex;
+    flex-direction: column;
+    padding: 0px;
+}
+
+.modalbox-main>div:last-child {
+    margin-top: auto;
+}
+
+.modalbox-message {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 80px;
+}
+
+.modalbox-message>h1 {
+    margin: 16px 8px 16px 8px;
+    font-size: 32px;
+    font-weight: bold;
+}
+
+.modalbox-message>p {
+    margin: 32px 8px 8px 8px;
+    font-size: 16px;
+    font-weight: normal;
+}
+
+.modalbox-validation {
+    padding: 8px;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    /* Pack items from the end */
+}
+
+.modalbox-validation>* {
+    margin: 2px 8px 2px 8px;
+    padding: 0px;
+}
+
+.modalbox-button {
+    border: solid 1px green;
+    padding: 12px 24px 12px 24px;
+    border-radius: 8px;
+    background-color: rgb(18, 173, 18);
+    color: white;
+    outline: solid 8px rgba(166, 213, 180, 0.588);
+    cursor: pointer;
+    font-size: 20px;
+}
+
+.modalbox-button:hover {
+    border: solid 1px rgb(1, 144, 1);
+    background-color: rgb(17, 197, 17);
+}
+
+
+
+
+/* <nav> */
+
+@media (orientation : landscape) {
+
+    .modalbox {
+        width: 600px;
+        padding: 24px;
+        flex-direction: row;
+    }
+
+
+    .modalbox-icon {
+        width: 120px;
+        margin: 24px;
+    }
+
+}
+
+@media (orientation : portrait) {
+    .modalbox {
+        width: 80vw;
+        padding: 5vw;
+        flex-direction: column;
+    }
+
+    .modalbox-icon {
+        height: 18vh;
+        margin: 4vw;
+        width: auto;
+        background-position: center;
+    }
+
+    .modalbox-button {
+        flex-shrink: 0;
+        flex-grow: 1;
+    }
+}
\ No newline at end of file
diff --git a/aero/ModalBox.js b/aero/ModalBox.js
new file mode 100644
index 0000000..8e53bde
--- /dev/null
+++ b/aero/ModalBox.js
@@ -0,0 +1,87 @@
+
+import { AeroElement } from "./AeroElement.js";
+
+
+export class ModalBox extends AeroElement {
+
+
+
+    /** @type{object} */
+    modalLayer;
+
+    /**
+     * @type {HTMLDivElement}
+     */
+    boxNode;
+
+
+
+    /**
+     * 
+     * @param {HTMLDivElement} parentNode 
+     */
+    constructor(props, onProceed) {
+        super();
+
+        this.wrapperNode = document.createElement("div");
+       
+        const overlayNode = document.createElement("div");
+        overlayNode.classList.add("modalbox-overlay");
+        this.wrapperNode.appendChild(overlayNode);
+
+        this.boxNode = document.createElement("div");
+        this.boxNode.classList.add("modalbox");
+
+
+        /* <left> */
+        this.iconNode = document.createElement("div");
+        this.iconNode.classList.add("modalbox-icon");
+        this.iconNode.style.backgroundImage = `url(${props.image})`;
+        this.boxNode.appendChild(this.iconNode);
+        /* </left> */
+       
+
+        /* <right> */
+        this.mainNode = document.createElement("div");
+        this.mainNode.classList.add("modalbox-main");        
+
+        /* <message> */
+        this.messageNode = document.createElement("div");
+        this.messageNode.classList.add("modalbox-message");
+
+        const titleNode = document.createElement("h1");
+        titleNode.innerHTML = props.title;
+        this.messageNode.appendChild(titleNode);
+
+        const explanationNode = document.createElement("p");
+        explanationNode.innerHTML = props.explanation;
+        this.messageNode.appendChild(explanationNode);
+        this.mainNode.appendChild(this.messageNode);
+        /* </message> */
+
+        this.controlsNode = document.createElement("div");
+        this.controlsNode.classList.add("modalbox-validation");
+        this.mainNode.appendChild(this.controlsNode);
+
+        this.buttonNode = document.createElement("div");
+        this.buttonNode.classList.add("modalbox-button");
+        this.buttonNode.innerHTML = "Proceed to Website";
+        this.buttonNode.addEventListener("click", function (event) {
+            event.stopPropagation();
+            onProceed();
+        }, false);
+        this.controlsNode.appendChild(this.buttonNode);
+        
+        this.boxNode.appendChild(this.mainNode);
+        /* </right> */
+        this.wrapperNode.appendChild(this.boxNode);
+    }
+
+
+
+    getEnvelope() {
+        return this.wrapperNode;
+    }
+
+
+}
\ No newline at end of file
diff --git a/aero/Slide.css b/aero/Slide.css
new file mode 100644
index 0000000..4c4877e
--- /dev/null
+++ b/aero/Slide.css
@@ -0,0 +1,344 @@
+/* <aero-slide> */
+.aero-slide {
+	margin: 0px 0px 0px 0px;
+	padding: 0px 0px 0px 0px;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	box-sizing: content-box;
+}
+
+/* <text> */
+
+.aero-slide-text {
+	margin: 0px 0px 0px 0px;
+	padding: 8px 16% 8px 16%;
+}
+
+
+@media (orientation : landscape) {
+	div.aero-slide-text {
+		margin: 0px 0px 0px 0px;
+		padding: 8px 16% 8px 16%;
+	}
+}
+
+
+@media (orientation : portrait) {
+	div.aero-slide-text {
+		margin: 0px 0px 0px 0px;
+		padding: 8px 4% 8px 4%;
+	}
+}
+
+/* <text> */
+
+
+/* <asset> */
+
+div.aero-slide-picture {
+	padding: 0px;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	z-index: 2;
+	aspect-ratio: 3 / 2;
+	/*overflow: auto;*/
+}
+
+@media (orientation : landscape) {
+	div.aero-slide-picture {
+		margin: 0px 20% 0px 20%;
+		width: 60%;
+	}
+
+	.aero-slide[type="hThird"]>.aero-slide-picture {
+		margin: 32px 32px 32px 32px;
+		background-size: contain;
+	}
+}
+
+@media (orientation : portrait) {
+	div.aero-slide-picture {
+		margin: 0px 4% 0px 4%;
+		width: 92%;
+	}
+
+	.aero-slide[type="hThird"]>.aero-slide-picture {
+		margin: 32px 32px 32px 32px;
+		background-size: contain;
+	}
+
+	.aero-slide[type="hThird"] {
+		display: flex;
+		flex-direction: row-reverse;
+		padding: 8px 16% 8px 16%;
+	}
+
+}
+
+/* <asset> */
+
+
+/* <arrangements> */
+@media (orientation : landscape) {
+
+
+	.aero-slide[arrangement="text-up"] {
+		flex-direction: column;
+	}
+
+	.aero-slide[arrangement="text-down"] {
+		flex-direction: column-reverse;
+	}
+
+	.aero-slide[arrangement="text-left"] {
+		flex-direction: row;
+	}
+
+	.aero-slide[arrangement="text-right"] {
+		flex-direction: row-reverse;
+	}
+
+}
+
+/* </arrangements> */
+
+
+
+
+
+
+
+/* <h1> */
+.aero-slide-text>h1 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-weight: lighter;
+	max-width: 92%;
+	padding: 8px;
+	border-radius: 4px;
+	margin: 0px;
+	z-index: 8;
+	text-align: left;
+}
+
+@media (orientation : landscape) {
+	.aero-slide-text>h1 {
+		font-size: 64px;
+		line-height: 64px;
+	}
+}
+
+@media (orientation : portrait) {
+	aero-slide-text>h1 {
+		font-size: 48px;
+		line-height: 48px;
+	}
+}
+
+.aero-slide-text>h1>span.emphasis {
+	font-weight: bold;
+}
+
+/* </h1> */
+
+
+/* <h2> */
+.aero-slide-text>h2 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 24px;
+	line-height: 24px;
+	font-weight: bold;
+	max-width: 92%;
+	padding: 8px;
+	border-radius: 4px;
+	/*white-space: nowrap;*/
+	margin: 0px;
+	z-index: 6;
+	text-align: left;
+}
+
+
+@media (orientation : landscape) {
+	.aero-slide-text>h2 {
+		font-size: 24px;
+		line-height: 24px;
+	}
+}
+
+@media (orientation : portrait) {
+	.aero-slide-text>h2 {
+		font-size: 20px;
+		line-height: 20px;
+	}
+}
+
+/* </h2> */
+
+.aero-slide-text>p {
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	text-align: left;
+	z-index: 4;
+	padding: 0px 0px 0px 0px;
+	padding: 6px 6px 6px 8px;
+	border-radius: 4px;
+	margin: 0px;
+}
+
+@media (orientation : landscape) {
+	.aero-slide-text>p {
+		font-size: 16px;
+	}
+}
+
+@media (orientation : portrait) {
+	.aero-slide-text>p {
+		font-size: 20px;
+	}
+}
+
+.aero-slide>a {
+	position: absolute;
+	z-index: 10;
+	overflow: hidden;
+	padding: 12px 24px;
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	line-height: 16px;
+	white-space: nowrap;
+	vertical-align: middle;
+	cursor: pointer;
+	user-select: none;
+	background-repeat: repeat-x;
+	background-position: -1px -1px;
+	background-size: 110% 110%;
+	border: 1px solid rgba(240, 240, 255, 1.0);
+	border-radius: 8px;
+	appearance: none;
+	/* appearance */
+	color: #ffffff;
+	background-color: rgba(28, 77, 45, 0.16);
+	background-image: linear-gradient(-180deg, rgb(46 46 46/ 52%) 0%,
+			rgb(16 16 16/ 67%) 90%);
+	backdrop-filter: blur(2px);
+	text-decoration: none;
+}
+
+.aero-slide>a:hover {
+	background-color: #269f42;
+	background-image: linear-gradient(-180deg, #2fcb53 0%, #269f42 90%);
+	background-position: -.5em;
+	border-color: rgba(27, 31, 35, 0.5);
+	text-decoration: none;
+}
+
+.aero-slide>a:focus {
+	box-shadow: 0 0 0 0.2em rgba(52, 208, 88, 0.4);
+	text-decoration: none;
+}
+
+.aero-slide>a:active {
+	background-color: #279f43;
+	background-image: none;
+	border-color: rgba(27, 31, 35, 0.5);
+	box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+	text-decoration: none;
+}
+
+@media (orientation : landscape) {}
+
+@media (orientation : portrait) {
+	.aero-slide h1 {
+		font-size: 32px;
+		line-height: 32px;
+	}
+
+	.aero-slide h2 {
+		font-size: 18px;
+		line-height: 18px;
+	}
+
+	.aero-slide p {
+		font-size: 16px;
+	}
+}
+
+.aero-slide-paragraph {
+	font-size: 16px;
+	padding: 32px 0px 32px 0px;
+}
+
+/* </aero-slides> */
+
+/* <aero-slide-prime> */
+
+/* </aero-slide-prime> */
+
+
+
+/* <themes> */
+.aero-slide[theme="light"] {
+	color: black;
+	/*background-color: rgba(255, 255, 255, 0.24);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.75);*/
+	/*text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);*/
+}
+
+.aero-slide[theme="dark"] {
+	color: white;
+	/*background-color: rgba(0, 0, 0, 0.16);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.75);*/
+}
+
+/* </themes> */
+
+
+/* <backgrounds> */
+div[class^="background-"] {
+	background-repeat: no-repeat;
+}
+
+.background-white {
+	background-color: white;
+}
+
+.background-blue {
+	background-color: blue;
+}
+
+.background-teal {
+	background-color: teal;
+}
+
+.background-black {
+	background-color: black;
+}
+
+.background-grey64 {
+	background-color: rgb(64, 64, 64);
+}
+
+.background-grey128 {
+	background-color: rgb(128, 128, 128);
+}
+
+.background-grey192 {
+	background-color: rgb(192, 192, 192);
+}
+
+.background-pic {
+	background-size: cover;
+	background-position: center;
+}
+
+
+/* </backgrounds> */
\ No newline at end of file
diff --git a/aero/Slide.js b/aero/Slide.js
new file mode 100644
index 0000000..f2aaa87
--- /dev/null
+++ b/aero/Slide.js
@@ -0,0 +1,309 @@
+import { AeroElement } from "./AeroElement.js";
+import { AeroUtilities } from "./AeroUtilities.js";
+import { WebPage } from "./WebPage.js";
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export const LOW_RESOLUTION_TAG = "-low";
+export const HIGH_RESOLUTION_TAG = "-high";
+
+export class Slide extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    props;
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    /** @type{boolean} */
+    hasAssetImage = false;
+
+    /** @type{boolean} */
+    isAssetImageLoaded = false;
+
+    /** @type{string} */
+    assetImagePath;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+    constructor(type, props) {
+        super();
+        this.type = type;
+        this.props = props;
+    }
+
+    /**
+     * 
+     * @param {WebPage} handler 
+     * @returns {HTMLElement}
+     */
+    build(page) {
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/Slide.css");
+        page.css_requireStylesheet("/aero/gradient-backgrounds.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("aero-slide");
+        this.sectionNode.setAttribute("type", this.type);
+        
+
+        this.setType(this.type);
+        this.setTheme(this.props.theme ? this.props.theme : "light");
+
+        if (this.props.arrangement) { this.setArrangement(this.props.arrangement); }
+
+        /* <id> */
+        if (this.props.id != undefined) {
+            this.sectionNode.id = this.props.id;
+        }
+        /* </id> */
+
+        
+        /* <background> */
+        if (this.props.background != undefined || this.props.backgroundColor != undefined) {
+            let backgroundParam = this.props.background;
+            switch (backgroundParam) {
+                case "black": this.sectionNode.classList.add("background-black"); break;
+                case "white": this.sectionNode.classList.add("background-white"); break;
+                case "grey64": this.sectionNode.classList.add("background-grey64"); break;
+                case "grey128": this.sectionNode.classList.add("background-grey128"); break;
+                case "grey192": this.sectionNode.classList.add("background-grey192"); break;
+            }
+        }
+        else if (this.props.backgroundGradient != undefined) {
+            this.sectionNode.classList.add("aero-background-gradient-" + this.props.backgroundGradient);
+        }
+        else if (this.props.backgroundImage != undefined) {
+            let backgroundImagePath = this.props.backgroundImage;
+            this.sectionNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.sectionNode, backgroundImagePath, () => this.render(page));
+
+        }
+        /* </background> */
+
+
+        /* <text> */
+        let textNode = document.createElement("div");
+        textNode.classList.add("aero-slide-text");
+
+        /* <h1> */
+        if (this.props.title != undefined) {
+            let h1Node = document.createElement("h1");
+            h1Node.innerHTML = this.props.title;
+            textNode.appendChild(h1Node);
+        }
+        /* </h1> */
+
+        /* <h2> */
+        if (this.props.subtitle != undefined) {
+            let h2Node = document.createElement("h2");
+            h2Node.innerHTML = this.props.subtitle;
+            textNode.appendChild(h2Node);
+        }
+        /* </h2> */
+
+        /* <p> */
+        if (this.props.paragraph != undefined) {
+            let pNode = document.createElement("p");
+            pNode.innerHTML = this.props.paragraph;
+            textNode.appendChild(pNode);
+        }
+        /* </p> */
+
+        this.sectionNode.appendChild(textNode);
+        /* </text> */
+
+        /* <metrics> */
+        if (this.props.metrics != undefined) { this.drawMetrics(this.props.metrics); }
+        /* <metrics> */
+
+
+        /* <asset> */
+        if (this.props.asset != undefined) {
+            let assetNode = document.createElement("div");
+            assetNode.classList.add("aero-slide-picture");
+            if (this.props.assetAspectRatio) { assetNode.style.aspectRatio = this.props.assetAspectRatio; }
+            let assetImagePath = this.props.asset;
+            AeroUtilities.loadBackgroundImage(assetNode, assetImagePath, () => { });
+            this.sectionNode.appendChild(assetNode);
+        }
+        /* </assset> */
+
+
+        /* return wrapper node */
+        return this.sectionNode;
+    }
+
+
+    setType(type) {
+        this.sectionNode.setAttribute("type", type);
+    }
+
+    setTheme(theme) {
+        this.sectionNode.setAttribute("theme", theme);
+    }
+
+    setArrangement(arrangement) {
+        this.sectionNode.setAttribute("arrangement", arrangement);
+    }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+        else if (this.isInitialized && page.imageResolution == 1) {
+            this.redrawHighRes();
+        }
+    }
+
+    draw() {
+
+
+
+    }
+
+    drawMetrics(script) {
+        /*
+        <div class="metrics-4">
+            <div class="metrics-item">
+                <div class="metrics-item-value">
+                    <span class="number">6000</span><span class="unit">kg</span>
+                </div>
+                <div class="metrics-item-parameter">Max nacelle weight</div>
+            </div>
+            <div class="metrics-item">
+                <div class="metrics-item-value">
+                    <span class="modifier">></span><span class="number">12</span><span
+                        class="unit">h</span>
+                </div>
+                <div class="metrics-item-parameter">Flight time (ECO MODE 250
+                    km/h, full load)</div>
+            </div>
+            <div class="metrics-item">
+                <div class="metrics-item-value">
+                    <span class="modifier">></span><span class="number">3000</span><span
+                        class="unit">km</span>
+                </div>
+                <div class="metrics-item-parameter">Range (ECO MODE 250 km/h,
+                    full load)</div>
+            </div>
+            <div class="metrics-item">
+                <div class="metrics-item-value">
+                    <span class="modifier">></span><span class="number">450</span><span
+                        class="unit">km/h</span>
+                </div>
+                <div class="metrics-item-parameter">Max speed</div>
+            </div>
+        </div>
+        */
+        let metricsNode = document.createElement("div");
+        metricsNode.classList.add(`aero-slide-metrics`);
+        script.forEach(metric => {
+            let metricsItemNode = document.createElement("div");
+            metricsItemNode.classList.add("aero-slide-metrics-item");
+
+            let metricsItemValueNode = document.createElement("div");
+            metricsItemValueNode.classList.add("aero-slide-metrics-item-value");
+
+            let content = "";
+            if (metric.modifier != undefined) {
+                content += `<span class="modifier">${metric.modifier}</span>`;
+            }
+            content += `<span class="number">${metric.number}</span>`;
+            content += `<span class="unit">${metric.unit}</span>`;
+            metricsItemValueNode.innerHTML = content;
+            metricsItemNode.appendChild(metricsItemValueNode);
+
+            let metricsItemParameterNode = document.createElement("div");
+            metricsItemParameterNode.classList.add("aero-slide-metrics-item-parameter");
+            metricsItemParameterNode.innerHTML = metric.parameter;
+            metricsItemNode.appendChild(metricsItemParameterNode);
+
+            metricsNode.appendChild(metricsItemNode);
+        })
+        this.sectionNode.appendChild(metricsNode);
+    }
+
+
+    redrawHighRes() {
+
+        if (this.hasBackgroundImage && this.backgroundImagePath.includes(LOW_RESOLUTION_TAG)) {
+            let highResPath = this.backgroundImagePath.replace(LOW_RESOLUTION_TAG, HIGH_RESOLUTION_TAG);
+            let highResImageBuffer = new Image();
+            let _this = this;
+            highResImageBuffer.onload = function () {
+                _this.sectionNode.style.backgroundImage = `url(${highResImageBuffer.src})`;
+                _this.isBackgroundImageLoaded = true;
+                _this.page.notifyElementHasBeenLoaded();
+            };
+            this.isBackgroundImageLoaded = false;
+            highResImageBuffer.src = highResPath; // trigger
+        }
+
+        if (this.hasAssetImage && this.assetImagePath.includes(LOW_RESOLUTION_TAG)) {
+            let highResPath = this.assetImagePath.replace(LOW_RESOLUTION_TAG, HIGH_RESOLUTION_TAG);
+            let highResImageBuffer = new Image();
+            let _this = this;
+            highResImageBuffer.onload = function () {
+                _this.assetNode.style.backgroundImage = `url(${highResImageBuffer.src})`;
+                _this.isAssetImageLoaded = true;
+                _this.page.notifyElementHasBeenLoaded();
+            };
+            this.isAssetImageLoaded = false;
+            highResImageBuffer.src = highResPath; // trigger
+        }
+    }
+
+}
diff --git a/aero/SlideV2.js b/aero/SlideV2.js
new file mode 100644
index 0000000..f0d59bf
--- /dev/null
+++ b/aero/SlideV2.js
@@ -0,0 +1,297 @@
+import { AeroElement } from "./AeroElement.js";
+import { AeroUtilities } from "./AeroUtilities.js";
+import { WebPage } from "./WebPage.js";
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export const LOW_RESOLUTION_TAG = "-low";
+export const HIGH_RESOLUTION_TAG = "-high";
+
+export class SlideV2 extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    props;
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    /** @type{boolean} */
+    hasAssetImage = false;
+
+    /** @type{boolean} */
+    isAssetImageLoaded = false;
+
+    /** @type{string} */
+    assetImagePath;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+
+    /**
+     * 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources) {
+        super();
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/Slide.css");
+        page.css_requireStylesheet("/aero/gradient-backgrounds.css");
+
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("aero-slide");
+
+        /* <id> */
+        this.id = sources.id;
+        if (this.id) { this.sectionNode.id = this.id; }
+        /* </id> */
+
+        let val;
+
+        /* <type> */
+        this.type = (val = sources.getAttribute("type")) ? val : "prime";
+        this.sectionNode.setAttribute("type", this.type);
+        /* </type> */
+
+        /* <theme> */
+        this.theme = (val = sources.getAttribute("theme")) ? val : "light";
+        this.sectionNode.setAttribute("theme", this.theme);
+        /* </theme> */
+
+
+        /* <arrangement> */
+        this.arrangement = (val = sources.getAttribute("arrangement")) ? val : "default";
+        this.sectionNode.setAttribute("arrangement", this.arrangement);
+        /* </arrangement> */
+
+
+        /* <background> */
+        if (sources.hasAttribute("backgroundColor")) {
+            this.sectionNode.style.backgroundColor = sources.getAttribute("backgroundColor");
+        }
+        else if (val = sources.getAttribute("backgroundGradient")) {
+            this.sectionNode.classList.add("aero-background-gradient-" + val);
+        }
+        else if (val = sources.getAttribute("backgroundImage")) {
+            this.sectionNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.sectionNode, val, () => this.render(page));
+        }
+        /* </background> */
+
+        /* <text> */
+        let textNode = document.createElement("div");
+        textNode.classList.add("aero-slide-text");
+
+        let sourceNode = sources.firstChild;
+        while (sourceNode) {
+
+            let type = sourceNode.nodeName.toLowerCase();
+            switch (type) {
+                case "h1": {
+                    let h1Node = document.createElement("h1");
+                    h1Node.innerHTML = sourceNode.innerHTML;
+                    textNode.appendChild(h1Node);
+                } break;
+
+                case "h2": {
+                    let h2Node = document.createElement("h2");
+                    h2Node.innerHTML = sourceNode.innerHTML;
+                    textNode.appendChild(h2Node);
+                } break;
+
+                case "p": {
+                    let pNode = document.createElement("p");
+                    pNode.innerHTML = sourceNode.innerHTML;
+                    textNode.appendChild(pNode);
+                } break;
+            }
+
+            sourceNode = sourceNode.nextSibling; /* next source node */
+        }
+
+        this.sectionNode.appendChild(textNode);
+        /* </text> */
+
+        /* <metrics> */
+        //if (sources.metrics != undefined) { this.drawMetrics(this.props.metrics); }
+        /* <metrics> */
+
+
+        /* <asset> */
+        
+        if (val = sources.getAttribute("asset")) {
+            let assetImagePath = val;
+            let assetNode = document.createElement("div");
+            assetNode.classList.add("aero-slide-picture");
+            if (val = sources.getAttribute("assetAspectRatio")) { assetNode.style.aspectRatio = val; }
+            AeroUtilities.loadBackgroundImage(assetNode, assetImagePath, () => { });
+            this.sectionNode.appendChild(assetNode);
+        }
+        /* </assset> */
+
+    }
+
+
+    html_getNode(){
+        return this.sectionNode;
+    }
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+        else if (this.isInitialized && page.imageResolution == 1) {
+            this.redrawHighRes();
+        }
+    }
+
+    draw() {
+
+
+
+    }
+
+    drawMetrics(script) {
+        /*
+        <div class="metrics-4">
+            <div class="metrics-item">
+                <div class="metrics-item-value">
+                    <span class="number">6000</span><span class="unit">kg</span>
+                </div>
+                <div class="metrics-item-parameter">Max nacelle weight</div>
+            </div>
+            <div class="metrics-item">
+                <div class="metrics-item-value">
+                    <span class="modifier">></span><span class="number">12</span><span
+                        class="unit">h</span>
+                </div>
+                <div class="metrics-item-parameter">Flight time (ECO MODE 250
+                    km/h, full load)</div>
+            </div>
+            <div class="metrics-item">
+                <div class="metrics-item-value">
+                    <span class="modifier">></span><span class="number">3000</span><span
+                        class="unit">km</span>
+                </div>
+                <div class="metrics-item-parameter">Range (ECO MODE 250 km/h,
+                    full load)</div>
+            </div>
+            <div class="metrics-item">
+                <div class="metrics-item-value">
+                    <span class="modifier">></span><span class="number">450</span><span
+                        class="unit">km/h</span>
+                </div>
+                <div class="metrics-item-parameter">Max speed</div>
+            </div>
+        </div>
+        */
+        let metricsNode = document.createElement("div");
+        metricsNode.classList.add(`aero-slide-metrics`);
+        script.forEach(metric => {
+            let metricsItemNode = document.createElement("div");
+            metricsItemNode.classList.add("aero-slide-metrics-item");
+
+            let metricsItemValueNode = document.createElement("div");
+            metricsItemValueNode.classList.add("aero-slide-metrics-item-value");
+
+            let content = "";
+            if (metric.modifier != undefined) {
+                content += `<span class="modifier">${metric.modifier}</span>`;
+            }
+            content += `<span class="number">${metric.number}</span>`;
+            content += `<span class="unit">${metric.unit}</span>`;
+            metricsItemValueNode.innerHTML = content;
+            metricsItemNode.appendChild(metricsItemValueNode);
+
+            let metricsItemParameterNode = document.createElement("div");
+            metricsItemParameterNode.classList.add("aero-slide-metrics-item-parameter");
+            metricsItemParameterNode.innerHTML = metric.parameter;
+            metricsItemNode.appendChild(metricsItemParameterNode);
+
+            metricsNode.appendChild(metricsItemNode);
+        })
+        this.sectionNode.appendChild(metricsNode);
+    }
+
+
+    redrawHighRes() {
+
+        if (this.hasBackgroundImage && this.backgroundImagePath.includes(LOW_RESOLUTION_TAG)) {
+            let highResPath = this.backgroundImagePath.replace(LOW_RESOLUTION_TAG, HIGH_RESOLUTION_TAG);
+            let highResImageBuffer = new Image();
+            let _this = this;
+            highResImageBuffer.onload = function () {
+                _this.sectionNode.style.backgroundImage = `url(${highResImageBuffer.src})`;
+                _this.isBackgroundImageLoaded = true;
+                _this.page.notifyElementHasBeenLoaded();
+            };
+            this.isBackgroundImageLoaded = false;
+            highResImageBuffer.src = highResPath; // trigger
+        }
+
+        if (this.hasAssetImage && this.assetImagePath.includes(LOW_RESOLUTION_TAG)) {
+            let highResPath = this.assetImagePath.replace(LOW_RESOLUTION_TAG, HIGH_RESOLUTION_TAG);
+            let highResImageBuffer = new Image();
+            let _this = this;
+            highResImageBuffer.onload = function () {
+                _this.assetNode.style.backgroundImage = `url(${highResImageBuffer.src})`;
+                _this.isAssetImageLoaded = true;
+                _this.page.notifyElementHasBeenLoaded();
+            };
+            this.isAssetImageLoaded = false;
+            highResImageBuffer.src = highResPath; // trigger
+        }
+    }
+
+}
diff --git a/aero/SpText.css b/aero/SpText.css
new file mode 100644
index 0000000..68d842c
--- /dev/null
+++ b/aero/SpText.css
@@ -0,0 +1,358 @@
+/* <aero-slide> */
+
+/* <text> */
+
+.sptext {
+	margin: 0px 0px 0px 0px;
+	padding: 8px 16% 8px 16%;
+}
+
+
+@media (orientation : landscape) {
+	.sptext {
+		margin: 0px 0px 0px 0px;
+		padding: 8px 16% 8px 16%;
+	}
+}
+
+
+@media (orientation : portrait) {
+	.sptext {
+		margin: 0px 0px 0px 0px;
+		padding: 8px 4% 8px 4%;
+	}
+}
+
+/* <text> */
+
+
+/* <asset> */
+
+div.aero-slide-picture {
+	padding: 0px;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	z-index: 2;
+	aspect-ratio: 3 / 2;
+	/*overflow: auto;*/
+}
+
+@media (orientation : landscape) {
+	div.aero-slide-picture {
+		margin: 0px 20% 0px 20%;
+		width: 60%;
+	}
+
+	.aero-slide[type="hThird"]>.aero-slide-picture {
+		margin: 32px 32px 32px 32px;
+		background-size: contain;
+	}
+}
+
+@media (orientation : portrait) {
+	div.aero-slide-picture {
+		margin: 0px 4% 0px 4%;
+		width: 92%;
+	}
+
+	.aero-slide[type="hThird"]>.aero-slide-picture {
+		margin: 32px 32px 32px 32px;
+		background-size: contain;
+	}
+
+	.aero-slide[type="hThird"] {
+		display: flex;
+		flex-direction: row-reverse;
+		padding: 8px 16% 8px 16%;
+	}
+
+}
+
+/* <asset> */
+
+
+/* <arrangements> */
+@media (orientation : landscape) {
+
+
+	.aero-slide[arrangement="text-up"] {
+		flex-direction: column;
+	}
+
+	.aero-slide[arrangement="text-down"] {
+		flex-direction: column-reverse;
+	}
+
+	.aero-slide[arrangement="text-left"] {
+		flex-direction: row;
+	}
+
+	.aero-slide[arrangement="text-right"] {
+		flex-direction: row-reverse;
+	}
+
+}
+
+/* </arrangements> */
+
+
+
+
+
+
+
+/* <h1> */
+.sptext>h1 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-weight: lighter;
+	max-width: 92%;
+	padding: 32px 8px 16px 8px;
+	border-radius: 4px;
+	margin: 0px;
+	z-index: 8;
+	text-align: left;
+}
+
+@media (orientation : landscape) {
+	.sptext>h1 {
+		font-size: 64px;
+		line-height: 64px;
+	}
+}
+
+@media (orientation : portrait) {
+	aero-slide-text>h1 {
+		font-size: 48px;
+		line-height: 48px;
+	}
+}
+
+.sptext>h1>span.emphasis {
+	font-weight: bold;
+}
+
+/* </h1> */
+
+
+/* <h2> */
+.sptext>h2 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 24px;
+	line-height: 24px;
+	font-weight: bold;
+	max-width: 92%;
+	padding: 16px 8px 8px 8px;
+	border-radius: 4px;
+	/*white-space: nowrap;*/
+	margin: 0px;
+	z-index: 6;
+	text-align: left;
+}
+
+
+@media (orientation : landscape) {
+	.sptext>h2 {
+		font-size: 24px;
+		line-height: 24px;
+	}
+}
+
+@media (orientation : portrait) {
+	.sptext>h2 {
+		font-size: 20px;
+		line-height: 20px;
+	}
+}
+
+/* </h2> */
+
+/* <p> */
+.sptext>p, .sptext>ul {
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 16px;
+	font-weight: normal;
+	text-align: justify;
+	z-index: 4;
+	padding: 12px 8px 12px 8px;
+	border-radius: 4px;
+	margin: 0px;
+}
+
+.sptext>ul>li {
+	padding: 8px 8px 8px 16px;
+}
+
+@media (orientation : landscape) {
+	.sptext>p, .sptext>ul {
+		font-size: 16px;
+	}
+}
+
+@media (orientation : portrait) {
+	.sptext>p, .sptext>ul {
+		font-size: 13px;
+	}
+}
+/* </p> */
+
+.aero-slide>a {
+	position: absolute;
+	z-index: 10;
+	overflow: hidden;
+	padding: 12px 24px;
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	line-height: 16px;
+	white-space: nowrap;
+	vertical-align: middle;
+	cursor: pointer;
+	user-select: none;
+	background-repeat: repeat-x;
+	background-position: -1px -1px;
+	background-size: 110% 110%;
+	border: 1px solid rgba(240, 240, 255, 1.0);
+	border-radius: 8px;
+	appearance: none;
+	/* appearance */
+	color: #ffffff;
+	background-color: rgba(28, 77, 45, 0.16);
+	background-image: linear-gradient(-180deg, rgb(46 46 46/ 52%) 0%,
+			rgb(16 16 16/ 67%) 90%);
+	backdrop-filter: blur(2px);
+	text-decoration: none;
+}
+
+.aero-slide>a:hover {
+	background-color: #269f42;
+	background-image: linear-gradient(-180deg, #2fcb53 0%, #269f42 90%);
+	background-position: -.5em;
+	border-color: rgba(27, 31, 35, 0.5);
+	text-decoration: none;
+}
+
+.aero-slide>a:focus {
+	box-shadow: 0 0 0 0.2em rgba(52, 208, 88, 0.4);
+	text-decoration: none;
+}
+
+.aero-slide>a:active {
+	background-color: #279f43;
+	background-image: none;
+	border-color: rgba(27, 31, 35, 0.5);
+	box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+	text-decoration: none;
+}
+
+@media (orientation : landscape) {}
+
+@media (orientation : portrait) {
+	.aero-slide h1 {
+		font-size: 32px;
+		line-height: 32px;
+	}
+
+	.aero-slide h2 {
+		font-size: 18px;
+		line-height: 18px;
+	}
+
+	.aero-slide p {
+		font-size: 16px;
+	}
+}
+
+.aero-slide-paragraph {
+	font-size: 16px;
+	padding: 32px 0px 32px 0px;
+}
+
+/* </aero-slides> */
+
+/* <aero-slide-prime> */
+
+/* </aero-slide-prime> */
+
+
+
+/* <themes> */
+.sptext[theme="light"] {
+	color: black;
+	/*background-color: rgba(255, 255, 255, 0.24);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.75);*/
+	/*text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);*/
+}
+
+.sptext[theme="dark"] {
+	color: white;
+	/*background-color: rgba(0, 0, 0, 0.16);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.75);*/
+}
+
+/* </themes> */
+
+
+/* <svg> */
+.sptext-pic-svg {
+	padding: 32px 16px 32px 16px;
+}
+
+.sptext[theme="light"] > .sptext-pic-svg svg {
+	fill: black;
+	stroke: black;
+}
+
+.sptext[theme="dark"] > .sptext-pic-svg svg {
+	fill: white;
+	stroke: white;
+}
+
+/* </svg> */
+
+/* <backgrounds> */
+div[class^="background-"] {
+	background-repeat: no-repeat;
+}
+
+.background-white {
+	background-color: white;
+}
+
+.background-blue {
+	background-color: blue;
+}
+
+.background-teal {
+	background-color: teal;
+}
+
+.background-black {
+	background-color: black;
+}
+
+.background-grey64 {
+	background-color: rgb(64, 64, 64);
+}
+
+.background-grey128 {
+	background-color: rgb(128, 128, 128);
+}
+
+.background-grey192 {
+	background-color: rgb(192, 192, 192);
+}
+
+.background-pic {
+	background-size: cover;
+	background-position: center;
+}
+
+
+/* </backgrounds> */
\ No newline at end of file
diff --git a/aero/SpText.js b/aero/SpText.js
new file mode 100644
index 0000000..5b3d473
--- /dev/null
+++ b/aero/SpText.js
@@ -0,0 +1,152 @@
+import { AeroElement } from "./AeroElement.js";
+import { AeroUtilities } from "./AeroUtilities.js";
+import { Icon } from "./Icon.js";
+import { WebPage } from "./WebPage.js";
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+
+export class SpText extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    props;
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    /** @type{boolean} */
+    hasAssetImage = false;
+
+    /** @type{boolean} */
+    isAssetImageLoaded = false;
+
+    /** @type{string} */
+    assetImagePath;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+    constructor(contentPathname, props) {
+        super();
+        this.contentPathname = contentPathname;
+        this.props = props;
+    }
+
+    /**
+     * 
+     * @param {WebPage} handler 
+     * @returns {HTMLElement}
+     */
+    build(page) {
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/SpText.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("sptext");
+        this.sectionNode.setAttribute("type", this.type);
+
+
+        this.setTheme(this.props.theme ? this.props.theme : "light");
+        if (this.props.arrangement) { this.setArrangement(this.props.arrangement); }
+
+        /* <id> */
+        if (this.props.id != undefined) {
+            this.sectionNode.id = this.props.id;
+        }
+        /* </id> */
+
+
+        /* <background> */
+        if (this.props.backgroundColor != undefined) {
+            this.sectionNode.style.backgroundColor = this.props.backgroundColor;
+        }
+        else if (this.props.backgroundGradient != undefined) {
+            this.sectionNode.classList.add("aero-background-gradient-" + this.props.backgroundGradient);
+        }
+        else if (this.props.backgroundImage != undefined) {
+            let backgroundImagePath = this.props.backgroundImage;
+            this.sectionNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.sectionNode, backgroundImagePath, () => this.render(page));
+
+        }
+        /* </background> */
+
+
+        /* <elements> */
+        AeroUtilities.sendRequest_HTTP_GET(this.contentPathname, "text", content => {
+            this.sectionNode.innerHTML = content;
+          });
+        /* </elements> */
+
+        /* return wrapper node */
+        return this.sectionNode;
+    }
+
+
+    setTheme(theme) {
+        this.sectionNode.setAttribute("theme", theme);
+    }
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+        else if (this.isInitialized && page.imageResolution == 1) {
+            this.redrawHighRes();
+        }
+    }
+
+    draw() {
+
+    }
+}
diff --git a/aero/SquareGrid.css b/aero/SquareGrid.css
new file mode 100644
index 0000000..05f34f5
--- /dev/null
+++ b/aero/SquareGrid.css
@@ -0,0 +1,498 @@
+/** */
+
+@media (width >= 620px) {
+
+	.square-grid-wrapper {
+		top: 0px;
+		left: 0px;
+		padding: 32px 32px 32px 32px;
+		background-color: white;
+		overflow-y: hidden;
+	}
+
+	.square-grid-deck {
+		display: grid;
+		/* flex-direction: row; */
+		/* flex-wrap: wrap; */
+		grid-template-columns: repeat(auto-fill, 256px);
+		/*grid-template-rows: repeat(auto-fill, 208px);*/
+		grid-gap: 32px 32px;
+		grid-auto-flow: row dense;
+		width: 100%;
+		justify-content: center;
+	}
+}
+
+
+@media (width < 620px) {
+
+	.square-grid-wrapper {
+		top: 0px;
+		left: 0px;
+		padding: 32px 0px 32px 0px;
+		background-color: white;
+		overflow-y: hidden;
+	}
+
+	.square-grid-deck {
+		display: grid;
+		/* flex-direction: row; */
+		/* flex-wrap: wrap; */
+		grid-template-columns: repeat(auto-fill, 44vw);
+		grid-template-rows: repeat(auto-fill, 44vw);
+		grid-gap: 4vw 4vw;
+		grid-auto-flow: row dense;
+		width: 100%;
+		justify-content: center;
+	}
+}
+
+
+/* all cards */
+
+.square-grid-card {
+	box-sizing: border-box;
+	position: relative;
+	padding: 8px;
+	margin: 0px;
+	border-radius: 16px;
+	box-shadow: 0px 0px 4px rgb(172, 172, 172);
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-weight: normal;
+	overflow: hidden;
+}
+
+
+.square-grid-card h1 {
+	font-size: 24px;
+	padding: 2px 0px;
+	margin: 8px 0px 4px 8px;
+	width: fit-content;
+	font-weight: bold;
+}
+
+
+.square-grid-card h2 {
+	font-size: 18px;
+	padding: 2px 0px;
+	margin: 6px 0px 4px 8px;
+	width: fit-content;
+	font-weight: bold;
+}
+
+.square-grid-card p {
+	font-size: 14px;
+	padding: 0px;
+	margin: 4px 16px 4px 8px;
+	width: fit-content;
+}
+
+
+.square-grid-card ul {
+	padding: 8px 0px 8px 16px;
+	margin: 0px;
+	width: fit-content;
+}
+
+.square-grid-card li {
+	font-size: 14px;
+	margin: 0px;
+	padding: 4px;
+	width: fit-content;
+	color: rgb(38, 5, 84);
+}
+
+
+
+@media (width <= 620px) {
+	.square-grid-card h1 {
+		font-size: 20px;
+	}
+	.square-grid-card h2 {
+		font-size: 16px;
+		font-weight: normal;
+	}
+	.square-grid-card p {
+		font-size: 12px;
+	}
+	.square-grid-card li {
+		font-size: 12px;
+	}
+}
+
+
+/* <size> */
+
+@media (width >= 620px) {
+	.square-grid-card[size="std"] {
+		grid-column: auto / span 1;
+		grid-row: auto / span 1;
+		width: 256px;
+		height: 256px;
+	}
+
+	.square-grid-card[size="large-horizontal"] {
+		grid-column: auto / span 2;
+		grid-row: auto / span 1;
+		width: 544px;
+		height: 256px;
+	}
+
+	.square-grid-card[size="large-vertical"] {
+		grid-column: auto / span 1;
+		grid-row: auto / span 2;
+		width: 256px;
+		height: 544px;
+	}
+
+	.square-grid-card[size="large-square"] {
+		grid-column: auto / span 2;
+		grid-row: auto / span 2;
+		width: 544px;
+		height: 544px;
+	}
+}
+
+@media (width < 620px) {
+
+	.square-grid-card[size="std"] {
+		grid-column: auto / span 1;
+		grid-row: auto / span 1;
+		width: 44vw;
+		height: 44vw;
+	}
+
+	.square-grid-card[size="large-horizontal"] {
+		grid-column: auto / span 2;
+		grid-row: auto / span 1;
+		width: 92vw;
+		height: 44vw;
+	}
+
+	.square-grid-card[size="large-vertical"] {
+		grid-column: auto / span 1;
+		grid-row: auto / span 2;
+		width: 44vw;
+		height: 92vw;
+	}
+
+	.square-grid-card[size="large-square"] {
+		grid-column: auto / span 2;
+		grid-row: auto / span 2;
+		width: 92vw;
+		height: 92vw;
+	}
+}
+
+/* </size> */
+
+
+/* <type> */
+
+.square-grid-card[type="create"] {
+	border-radius: 24px;
+	border: 8px dashed rgb(204, 204, 204);
+	background-color: white;
+	overflow: hidden;
+	color: rgb(200, 200, 200);
+}
+
+.square-grid-card[type="create"]:hover {
+	border-color: aqua;
+}
+
+
+
+.square-grid-card[type="access"] {
+	border: 1px solid rgb(182, 182, 182);
+	background-color: white;
+	background-image: url("/S8-pkgs-ui-carbide/collections/grids/pics/turbine-pic.png");
+	background-size: cover;
+	overflow: hidden;
+}
+
+.square-grid-card[type="access"]:hover {
+	outline: 8px solid rgb(203 223 255);
+}
+
+
+/* </type> */
+
+
+
+/* <theme> */
+.square-grid-card[theme="light"] {
+	border-color: rgb(204, 204, 204);
+}
+
+.square-grid-card[theme="light"] h1 {
+	color: rgb(36, 36, 36);
+}
+
+.square-grid-card[theme="light"] h2 {
+	color: rgb(36, 36, 36);
+}
+
+.square-grid-card[theme="light"] p {
+	color: rgb(36, 36, 36);
+	/*text-shadow: 0px 0px 4px white;*/
+}
+
+.square-grid-card[theme="light"] li {
+	color: rgb(38, 5, 84);
+	/*text-shadow: 0px 0px 4px white;*/
+}
+
+
+
+.square-grid-card[theme="dark"] {
+	border-color: rgb(80, 80, 80);
+}
+
+.square-grid-card[theme="dark"] h1 {
+	color: white;
+}
+
+.square-grid-card[theme="dark"] h2 {
+	color: white;
+}
+
+.square-grid-card[theme="dark"] p {
+	color: white;
+}
+
+.square-grid-card[theme="dark"] li {
+	color: rgb(253, 226, 255);
+	/*text-shadow: 0px 0px 4px white;*/
+}
+
+/* </theme> */
+
+
+.square-grid-card-group {
+	background-color: aliceblue;
+	font-size: 14px;
+	padding: 2px 8px;
+	/* margin-left: 8px; */
+	border-radius: 8px;
+	width: fit-content;
+}
+
+/* <link> */
+.square-grid-card-link {
+	color: white;
+	font-size: 14px;
+	font-weight: bold;
+    padding: 4px 12px 4px 4px;
+    margin: 16px 8px 8px 8px;
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+	background-color: #3862fbca;
+	/*background-image: linear-gradient(to right, #3525e5 0%, #3525e5  20%, #b214d2 100%);*/
+	border-radius: 20px;
+	cursor: pointer;
+	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.367);
+}
+
+.square-grid-card-link:hover {
+	background-color: #476bed;
+}
+
+.square-grid-card-link-pic {
+	width: 24px;
+	height: 24px;
+	margin: 0px;
+	padding: 0px;
+	background-size: auto;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
+.square-grid-card-link-pic > svg {
+	stroke: #ffffff;
+	fill: #ffffff;
+}
+
+.square-grid-card-link-text {
+	padding-bottom: 2px;
+	font-size: 14px;
+	margin-left: 8px;
+	color: #ffffff;
+}
+
+
+
+.square-grid-card-link:hover > .square-grid-card-link-pic >svg {
+	stroke: white;
+	fill: white;
+}
+
+.square-grid-card-link:hover > .square-grid-card-link-text{
+	color: white;
+}
+
+/* </link> */
+
+.square-grid-card-point {
+	font-size: 14px;
+	padding: 8px 16px 8px 8px;
+	margin: 4px;
+	width: fit-content;
+	display: flex;
+	flex-direction: row;
+	align-items: start;
+	gap: 16px;
+}
+
+.square-grid-card-point-icon {
+	width: 32px;
+	height: 32px;
+	margin: 0px;
+	padding: 0px;
+	background-size: auto;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
+
+.square-grid-card[theme="light"] .square-grid-card-point-icon>svg {
+	fill: black;
+	stroke: black;
+}
+
+.square-grid-card[theme="dark"] .square-grid-card-point-icon>svg {
+	fill: white;
+	stroke: white;
+}
+
+.square-grid-card-point-text {
+	border-left: solid 1px rgba(44, 44, 44, 0.906);
+	padding-left: 8px;
+}
+
+
+
+
+/* <create-card> */
+
+
+/* <mobile-hideable> */
+
+@media (width <= 620px) {
+	.square-grid-mobile-hideable {
+		display: none;
+	}
+}
+
+/* </mobile-hideable> */
+
+.square-grid-card-create-header {
+	font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
+	font-size: 128px;
+	font-weight: bold;
+	letter-spacing: -0.016em;
+	text-align: center;
+	margin-top: 4px;
+	margin-bottom: 4px;
+	color: rgb(200, 200, 200);
+}
+
+.square-grid-card-create-body {
+	font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
+	font-size: 12px;
+	font-weight: 400;
+	letter-spacing: -0.016em;
+	text-align: center;
+	margin-top: 4px;
+	margin-bottom: 4px;
+	color: rgb(200, 200, 200);
+}
+
+/* <create-card> */
+
+
+
+/* <repository-card> */
+
+
+.square-grid-card-access[selected] {
+	border: 2px solid #769ff4;
+	box-shadow: 0px 0px 4px rgb(103, 143, 167);
+}
+
+
+.square-grid-card-access-image {
+	height: 128px;
+	width: 100%;
+	background-image: url("/S8-pkgs-ui-carbide/collections/grids/pics/turbine-pic.png");
+	background-size: cover;
+	border-bottom: 1px solid rgb(182, 182, 182);
+}
+
+
+.square-grid-card-access-panel {
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 14px;
+	font-weight: 600;
+	letter-spacing: -0.016em;
+	text-align: left;
+	margin: 6px 8px 0px 8px;
+	max-height: 32px;
+	color: white;
+}
+
+.square-grid-card-access-panel>h1 {
+	width: fit-content;
+	font-size: 20px;
+	font-weight: 600;
+	letter-spacing: -0.016em;
+	text-align: left;
+	margin: 10px 2px 0px 2px;
+	padding: 2px 6px 2px 6px;
+}
+
+.square-grid-card-access-panel>h2 {
+	width: fit-content;
+	display: block;
+	font-size: 12px;
+	font-weight: 500;
+	letter-spacing: -0.016em;
+	text-align: left;
+	margin: 10px 8px 0px 8px;
+	padding: 2.25px 8px;
+	background-color: rgb(53, 53, 53);
+	border-radius: 9px;
+}
+
+.square-grid-card-access-panel>p {
+	width: fit-content;
+	font-size: 14px;
+	font-weight: 400;
+	letter-spacing: -0.016em;
+	text-align: left;
+	margin: 10px 8px 0px 8px;
+	padding: 0px;
+}
+
+.square-grid-card-access-info {
+	font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
+	font-size: 12px;
+	font-weight: 400;
+	letter-spacing: -0.016em;
+	text-align: left;
+	height: 32px;
+	margin: 6px 8px 12px 8px;
+	text-overflow: ellipsis;
+}
+
+
+.square-grid-card-access-popover-root {
+	height: 16px;
+	width: 16px;
+	position: relative;
+	margin-left: 72px;
+}
+
+/* </repository-card> */
\ No newline at end of file
diff --git a/aero/SquareGrid.js b/aero/SquareGrid.js
new file mode 100644
index 0000000..0828843
--- /dev/null
+++ b/aero/SquareGrid.js
@@ -0,0 +1,377 @@
+import { AeroElement } from "./AeroElement.js";
+import { WebPage } from "./WebPage.js";
+import { LoadHandler } from "./aero.js";
+
+import { AeroUtilities } from "./AeroUtilities.js";
+import { Icon } from "./Icon.js";
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export class SquareGrid extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    props;
+
+    /** @type {HTMLDivElement} */
+    deckNode;
+
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    constructor(type, props) {
+        super();
+        this.type = type;
+        this.props = props;
+    }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     * @param {*} state 
+     * @returns 
+     */
+    build(page) {
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/SquareGrid.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("square-grid-wrapper");
+
+        this.setType(this.type);
+        this.setTheme(this.props.theme ? this.props.theme : "light");
+
+
+        /* <background> */
+        if (this.props.backgroundImage) {
+            this.sectionNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.sectionNode, this.props.backgroundImage);
+        }
+        else if (this.props.backgroundColor) {
+            this.sectionNode.classList.add("background-colo");
+            this.sectionNode.style.backgroundColor = this.props.backgroundColor;
+        }
+        /* </background> */
+
+        /* <deck> */
+
+        this.deckNode = document.createElement("div");
+        this.deckNode.classList.add("square-grid-deck");
+
+        this.props.cards.forEach(card => this.deckNode.appendChild(card.build(page)));
+
+        this.sectionNode.appendChild(this.deckNode);
+
+
+        /* </deck> */
+
+        return this.sectionNode;
+    }
+
+
+    setType(type) {
+        this.sectionNode.setAttribute("type", type);
+    }
+
+    setTheme(theme) {
+        this.sectionNode.setAttribute("theme", theme);
+    }
+
+
+    render(state) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+    }
+
+    draw() {
+
+    }
+
+}
+
+
+export class SquareGridCard extends AeroElement {
+
+    /** @type {HTMLDivElement } */
+    cardNode;
+
+    type;
+
+    props;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    constructor(type, size, props) {
+        super();
+        this.type = type;
+        this.size = size;
+        this.props = props;
+    }
+
+    /**
+     * 
+     * @param {LoadHandler} handler 
+     * @param {*} state 
+     * @returns 
+     */
+    build(page) {
+        this.cardNode = document.createElement("div");
+        this.cardNode.classList.add("square-grid-card");
+        this.cardNode.setAttribute("size", this.size);
+
+        /* <background> */
+        if (this.props.backgroundImage) {
+            this.cardNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.cardNode, this.props.backgroundImage);
+        }
+        else if (this.props.backgroundColor) {
+            this.cardNode.classList.add("background-color");
+            this.cardNode.style.backgroundColor = this.props.backgroundColor;
+        }
+        /* </background> */
+
+
+
+        /* <elements> */
+        if (this.props.elements) {
+            this.props.elements.forEach(element => {
+                this.cardNode.appendChild(element.build(page));
+            });
+        }
+        /* </elements> */
+
+
+        this.setType(this.type);
+        this.setTheme(this.props.theme ? this.props.theme : "light");
+
+        return this.cardNode;
+    }
+
+
+    setType(type) {
+        this.cardNode.setAttribute("type", type);
+    }
+
+    setTheme(theme) {
+        this.cardNode.setAttribute("theme", theme);
+    }
+}
+
+export class SquareGridCardElement {
+    constructor(props) {
+        this.props = props;
+
+        this.isMobileHideable = props.isMobileHideable ? props.isMobileHideable : false;
+    }
+}
+
+
+
+
+
+export class SquareGridCardGroup extends SquareGridCardElement {
+
+    constructor(props) {
+        super(props);
+    }
+
+    build(page) {
+        /* <group> */
+
+        const groupNode = document.createElement("div");
+        groupNode.classList.add("square-grid-card-group");
+        groupNode.innerHTML = this.props.txt;
+
+        /* </group> */
+        return this.groupNode = groupNode;
+    }
+}
+
+
+
+export class SquareGridCardH1 extends SquareGridCardElement {
+
+    constructor(props) {
+        super(props);
+        this.txt = props.txt;
+    }
+
+    build(page) {
+        const headerNode = document.createElement("h1");
+        if (this.isMobileHideable) { headerNode.classList.add("square-grid-mobile-hideable"); }
+        headerNode.innerHTML = this.txt;
+        return this.headerNode = headerNode;
+    }
+}
+
+
+export class SquareGridCardH2 extends SquareGridCardElement {
+
+    constructor(props) {
+        super(props);
+        this.txt = props.txt;
+    }
+
+    build(page) {
+        const headerNode = document.createElement("h2");
+        if (this.isMobileHideable) { headerNode.classList.add("square-grid-mobile-hideable"); }
+        headerNode.innerHTML = this.txt;
+        return this.headerNode = headerNode;
+    }
+}
+
+
+
+export class SquareGridCardParagraph extends SquareGridCardElement {
+
+    constructor(props) {
+        super(props);
+
+        this.txt = props.txt;
+    }
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    build(page) {
+        const pNode = document.createElement("p");
+        if (this.isMobileHideable) { pNode.classList.add("square-grid-mobile-hideable"); }
+        pNode.innerHTML = this.txt;
+        return this.pNode = pNode;
+    }
+}
+
+
+
+export class SquareGridCardPoint extends SquareGridCardElement {
+
+    constructor(props) {
+        super(props);
+
+        this.iconPathname = props.icon;
+        this.text = props.text;
+    }
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    build(page) {
+        const pointNode = document.createElement("div");
+        pointNode.classList.add("square-grid-card-point");
+        if (this.isMobileHideable) { pointNode.classList.add("square-grid-mobile-hideable"); }
+
+        const linkIcon = new Icon(this.iconPathname, { width: 32, height: 32 });
+        linkIcon.build();
+        linkIcon.getEnvelope().classList.add("square-grid-card-point-icon");
+        pointNode.appendChild(linkIcon.getEnvelope());
+
+        const textNode = document.createElement("span");
+        textNode.classList.add("square-grid-card-point-text");
+        textNode.innerHTML = this.text;
+        pointNode.appendChild(textNode);
+
+        this.linkNode = pointNode;
+
+        return this.linkNode;
+    }
+}
+
+export class SquareGridCardLink extends SquareGridCardElement {
+
+    constructor(props) {
+        super(props);
+
+        this.iconPathname = props.icon;
+        this.text = props.text;
+        this.url = props.url;
+    }
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    build(page) {
+        const linkNode = document.createElement("div");
+        linkNode.classList.add("square-grid-card-link");
+        if (this.isMobileHideable) { linkNode.classList.add("square-grid-mobile-hideable"); }
+
+        const linkIcon = new Icon(this.iconPathname, { width: 24, height: 24 });
+        linkIcon.build();
+        linkIcon.getEnvelope().classList.add("square-grid-card-link-pic");
+        linkNode.appendChild(linkIcon.getEnvelope());
+
+        const spanNode = document.createElement("span");
+        spanNode.classList.add("square-grid-card-link-text");
+        spanNode.innerHTML = this.text;
+        linkNode.appendChild(spanNode);
+
+        linkNode.addEventListener("click", () => {window.location = this.url; }, false);
+
+        this.linkNode = linkNode;
+
+        return this.linkNode;
+    }
+
+
+}
\ No newline at end of file
diff --git a/aero/SquareGridV2.js b/aero/SquareGridV2.js
new file mode 100644
index 0000000..538cf61
--- /dev/null
+++ b/aero/SquareGridV2.js
@@ -0,0 +1,405 @@
+import { AeroElement } from "./AeroElement.js";
+
+import { AeroUtilities } from "./AeroUtilities.js";
+import { Icon } from "./Icon.js";
+import { WebPageV2 } from "./WebPageV2.js";
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export class SquareGridV2 extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    /**
+     * @type{List<SquareGridCard>}
+     */
+    cards = new Array();
+
+    /** @type {HTMLDivElement} */
+    deckNode;
+
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+
+    /**
+     * 
+     * @param {WebPageV2} page 
+     * @param {HTMLElement} sources 
+     * @returns 
+     */
+    constructor(page, sources) {
+        super();
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/SquareGrid.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("square-grid-wrapper");
+
+        let val;
+
+        this.type = (val = sources.getAttribute("type")) ? val : "std";
+        this.sectionNode.setAttribute("type", this.type);
+
+        this.theme = (val = sources.getAttribute("theme")) ? val : "light";
+        this.sectionNode.setAttribute("theme", this.theme);
+
+        /* <background> */
+        if (val = sources.getAttribute("backgroundImage")) {
+            this.sectionNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.sectionNode, val);
+        }
+        else if (val = sources.getAttribute("backgroundColor")) {
+            this.sectionNode.classList.add("background-color");
+            this.sectionNode.style.backgroundColor = val;
+        }
+        /* </background> */
+
+        /* <deck> */
+
+        this.deckNode = document.createElement("div");
+        this.deckNode.classList.add("square-grid-deck");
+
+        let node = sources.firstChild;
+        while(node){
+            let type = node.nodeName.toLowerCase();
+            if(type == "card"){
+                this.cards.push(new SquareGridCard(node));
+            }
+            node = node.nextSibling;
+        }
+        this.cards.forEach(card => this.deckNode.appendChild(card.html_getNode()));
+
+        this.sectionNode.appendChild(this.deckNode);
+
+
+        /* </deck> */
+
+    }
+
+    html_getNode(){
+        return this.sectionNode;
+    }
+
+
+    render(state) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+    }
+
+    draw() {
+
+    }
+
+}
+
+
+export class SquareGridCard extends AeroElement {
+
+    /** @type {HTMLDivElement } */
+    cardNode;
+
+    type;
+
+
+    /**
+     * @type{List<SquareGridCardElement>}
+     */
+    elements = new Array();
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    /**
+     * 
+     * @param {HTMLElement} sources 
+     */
+    constructor(sources) {
+        super();
+       
+        this.cardNode = document.createElement("div");
+        this.cardNode.classList.add("square-grid-card");
+
+        let val;
+        this.type = (val = sources.getAttribute("type")) ? val : "light";
+        this.cardNode.setAttribute("type", this.type);
+
+        this.theme = (val = sources.getAttribute("theme")) ? val : "light";
+        this.cardNode.setAttribute("theme", this.theme);
+
+        this.size = (val = sources.getAttribute("size")) ? val : "std";
+        this.cardNode.setAttribute("size", this.size);
+    
+
+        /* <background> */
+        if (val = sources.getAttribute("backgroundImage")) {
+            this.cardNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.cardNode, val);
+        }
+        else if (val = sources.getAttribute("backgroundColor")) {
+            this.cardNode.classList.add("background-color");
+            this.cardNode.style.backgroundColor = val;
+        }
+        /* </background> */
+
+        /* <elements> */
+        let node = sources.firstChild;
+        while(node){
+            let type = node.nodeName.toLowerCase();
+            switch(type){
+
+                case "hgroup" : { this.elements.push(new SquareGridCardGroup(node)); } break;
+                case "h1" : { this.elements.push(new SquareGridCardH1(node)); } break;
+                case "h2" : { this.elements.push(new SquareGridCardH2(node)); } break;
+                case "p" : { this.elements.push(new SquareGridCardParagraph(node)); } break;
+                case "a" : { this.elements.push(new SquareGridCardLink(node)); } break;
+                case "li" : { this.elements.push(new SquareGridCardPoint(node)); } break;
+                case "ul" : { this.elements.push(new SquareGridCardList(node)); } break;
+            }
+            node = node.nextSibling;
+        }
+        /* </elements> */
+        
+        this.elements.forEach(element => { this.cardNode.appendChild(element.html_getNode()); });
+    }
+
+    html_getNode(){
+        return this.cardNode;
+    }
+
+}
+
+export class SquareGridCardElement {
+    constructor(sources) {
+        this.isMobileHideable = sources.hasAttribute("isMobileHideable");
+    }
+}
+
+
+
+
+
+export class SquareGridCardGroup extends SquareGridCardElement {
+
+    constructor(sources) {
+        super(sources);
+
+        /* <group> */
+
+        const groupNode = document.createElement("div");
+        groupNode.classList.add("square-grid-card-group");
+        groupNode.innerHTML = sources.innerHTML;
+
+        /* </group> */
+        this.groupNode = groupNode;
+    }
+
+    html_getNode(){ return this.groupNode; }
+}
+
+
+
+export class SquareGridCardH1 extends SquareGridCardElement {
+
+    constructor(sources) {
+        super(sources);
+        const headerNode = document.createElement("h1");
+        if (this.isMobileHideable) { headerNode.classList.add("square-grid-mobile-hideable"); }
+        headerNode.innerHTML = sources.innerHTML;
+        this.headerNode = headerNode;
+    }
+
+    html_getNode(){ return this.headerNode; }
+}
+
+
+export class SquareGridCardH2 extends SquareGridCardElement {
+
+    constructor(sources) {
+        super(sources);
+        const headerNode = document.createElement("h2");
+        if (this.isMobileHideable) { headerNode.classList.add("square-grid-mobile-hideable"); }
+        headerNode.innerHTML = sources.innerHTML;
+        this.headerNode = headerNode;
+    }
+
+    html_getNode(){ return this.headerNode; }
+}
+
+
+
+export class SquareGridCardParagraph extends SquareGridCardElement {
+
+    constructor(sources) {
+        super(sources);
+        const pNode = document.createElement("p");
+        if (this.isMobileHideable) { pNode.classList.add("square-grid-mobile-hideable"); }
+       
+
+         /* <elements> */
+        let node = sources.firstChild, nextNode;
+        while(node){
+            nextNode = node.nextSibling;
+            pNode.appendChild(node);
+            node = nextNode;
+        }
+        /* </elements> */
+
+        this.pNode = pNode;
+    }
+
+    html_getNode(){ return this.pNode; }
+}
+
+
+
+export class SquareGridCardPoint extends SquareGridCardElement {
+
+    constructor(sources) {
+        super(sources);
+        this.iconPathname = sources.getAttribute("icon");
+  
+        const pointNode = document.createElement("div");
+        pointNode.classList.add("square-grid-card-point");
+        if (this.isMobileHideable) { pointNode.classList.add("square-grid-mobile-hideable"); }
+
+        const linkIcon = new Icon(this.iconPathname, { width: 32, height: 32 });
+        linkIcon.build();
+        linkIcon.getEnvelope().classList.add("square-grid-card-point-icon");
+        pointNode.appendChild(linkIcon.getEnvelope());
+
+        const textNode = document.createElement("span");
+        textNode.classList.add("square-grid-card-point-text");
+        textNode.innerHTML = sources.innerHTML;
+        pointNode.appendChild(textNode);
+
+        this.linkNode = pointNode;
+    }
+
+    html_getNode(){ return this.linkNode; }
+}
+
+export class SquareGridCardLink extends SquareGridCardElement {
+
+    /**
+     * 
+     * @param {HTMLElement} sources 
+     */
+    constructor(sources) {
+        super(sources);
+
+        this.iconPathname = sources.getAttribute("icon");
+        this.url = sources.getAttribute("href");
+    
+        const linkNode = document.createElement("div");
+        linkNode.classList.add("square-grid-card-link");
+        if (this.isMobileHideable) { linkNode.classList.add("square-grid-mobile-hideable"); }
+
+        
+        const linkIcon = new Icon(this.iconPathname, { width: 24, height: 24 });
+        linkIcon.build();
+        linkIcon.getEnvelope().classList.add("square-grid-card-link-pic");
+        linkNode.appendChild(linkIcon.getEnvelope());
+        
+        const spanNode = document.createElement("span");
+        spanNode.classList.add("square-grid-card-link-text");
+        spanNode.innerHTML = sources.innerHTML;
+        linkNode.appendChild(spanNode);
+
+        linkNode.addEventListener("click", () => {window.location = this.url; }, false);
+
+        this.linkNode = linkNode;
+    }
+
+    html_getNode(){ return this.linkNode; }
+
+}
+
+
+
+export class SquareGridCardList extends SquareGridCardElement {
+
+    constructor(sources) {
+        super(sources);
+        const listNode = document.createElement("ul");
+        if (this.isMobileHideable) { listNode.classList.add("square-grid-mobile-hideable"); }
+       
+
+         /* <elements> */
+         
+        let node = sources.firstChild;
+        while(node){
+            let type = node.nodeName.toLowerCase();
+            switch(type){
+                case "li" : { 
+                    const itemNode = document.createElement("li")
+                    itemNode.innerHTML = node.innerHTML;
+                    listNode.appendChild(itemNode);
+                } break;
+            }
+            node = node.nextSibling;
+        }
+        /* </elements> */
+
+        this.listNode = listNode;
+    }
+
+    html_getNode(){ return this.listNode; }
+}
\ No newline at end of file
diff --git a/aero/TextBlock.css b/aero/TextBlock.css
new file mode 100644
index 0000000..02d8a7b
--- /dev/null
+++ b/aero/TextBlock.css
@@ -0,0 +1,571 @@
+/* <aero-slide> */
+
+/* <text> */
+
+.textblock {
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	margin: 0px 0px 0px 0px;
+	padding: 8px 16% 8px 16%;
+}
+
+
+@media (orientation : landscape) {
+	.textblock {
+		margin: 0px 0px 0px 0px;
+		padding: 32px 16% 8px 16%;
+	}
+}
+
+
+@media (orientation : portrait) {
+	.textblock {
+		margin: 0px 0px 0px 0px;
+		padding: 16px 4% 8px 4%;
+	}
+}
+
+/* <text> */
+
+
+/* <asset> */
+
+div.aero-slide-picture {
+	padding: 0px;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	z-index: 2;
+	aspect-ratio: 3 / 2;
+	/*overflow: auto;*/
+}
+
+@media (orientation : landscape) {
+	div.aero-slide-picture {
+		margin: 0px 20% 0px 20%;
+		width: 60%;
+	}
+
+	.aero-slide[type="hThird"]>.aero-slide-picture {
+		margin: 32px 32px 32px 32px;
+		background-size: contain;
+	}
+}
+
+@media (orientation : portrait) {
+	div.aero-slide-picture {
+		margin: 0px 4% 0px 4%;
+		width: 92%;
+	}
+
+	.aero-slide[type="hThird"]>.aero-slide-picture {
+		margin: 32px 32px 32px 32px;
+		background-size: contain;
+	}
+
+	.aero-slide[type="hThird"] {
+		display: flex;
+		flex-direction: row-reverse;
+		padding: 8px 16% 8px 16%;
+	}
+
+}
+
+/* <asset> */
+
+
+/* <arrangements> */
+@media (orientation : landscape) {
+
+
+	.aero-slide[arrangement="text-up"] {
+		flex-direction: column;
+	}
+
+	.aero-slide[arrangement="text-down"] {
+		flex-direction: column-reverse;
+	}
+
+	.aero-slide[arrangement="text-left"] {
+		flex-direction: row;
+	}
+
+	.aero-slide[arrangement="text-right"] {
+		flex-direction: row-reverse;
+	}
+
+}
+
+/* </arrangements> */
+
+
+
+
+
+
+
+/* <h1> */
+.textblock>h1 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-weight: lighter;
+	max-width: 92%;
+	padding: 8px;
+	border-radius: 4px;
+	margin: 0px;
+	z-index: 8;
+	text-align: left;
+}
+
+.textblock>h1>span:first-child {
+	margin: 0px 16px 0px 0px;
+}
+
+.textblock[type="legal"]>h1 {
+	font-size: 32px;
+	color: #1635a5;
+	padding: 16px 8px 8px 8px;
+}
+
+@media (orientation : landscape) {
+	.textblock>h1 {
+		font-size: 64px;
+		line-height: 64px;
+	}
+}
+
+@media (orientation : portrait) {
+	aero-slide-text>h1 {
+		font-size: 48px;
+		line-height: 48px;
+	}
+}
+
+.textblock>h1>span.emphasis {
+	font-weight: bold;
+}
+
+
+
+.textblock[type="legal"]>h1 {
+	padding: 32px 8px 16px 8px;
+}
+
+/* </h1> */
+
+
+/* <h2> */
+.textblock>h2 {
+	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
+		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+	font-size: 24px;
+	line-height: 24px;
+	font-weight: bold;
+	max-width: 92%;
+	padding: 16px 8px 8px 8px;
+	border-radius: 4px;
+	/*white-space: nowrap;*/
+	margin: 0px;
+	z-index: 6;
+	text-align: left;
+}
+
+.textblock>h2>span:first-child {
+	margin: 0px 8px 0px 0px;
+}
+
+.textblock[type="legal"]>h2 {
+	font-size: 20px;
+	padding: 16px 8px 8px 8px;
+}
+
+@media (orientation : landscape) {
+	.textblock>h2 {
+		font-size: 24px;
+		line-height: 24px;
+	}
+}
+
+@media (orientation : portrait) {
+	.textblock>h2 {
+		font-size: 20px;
+		line-height: 20px;
+	}
+}
+
+/* </h2> */
+
+/* <p> */
+.textblock>p {
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	text-align: justify;
+	z-index: 4;
+	padding: 0px 0px 0px 0px;
+	padding: 6px 6px 6px 8px;
+	border-radius: 4px;
+	margin: 0px;
+}
+
+.textblock>p code, .textblock>ul code, .textblock>ol code{
+	font-weight: bold;
+	color: #1635a5;
+}
+
+
+
+/* <p> */
+.textblock[type="legal"]>p {
+	font-size: 16px;
+}
+
+.textblock[type="legal"]>ul>li {
+	padding: 8px 8px 8px 16px;
+}
+
+
+@media (orientation : landscape) {
+	.textblock>p {
+		font-size: 16px;
+	}
+}
+
+@media (orientation : portrait) {
+	.textblock>p {
+		font-size: 13px;
+	}
+}
+/* </p> */
+
+
+
+/* <ol> */
+.textblock>ol {
+	counter-reset: section;
+	margin: 8px 0px 0px 0px;
+    padding: 0px 0px 0px 24px;
+  }
+
+  .textblock>ol>li {
+	margin: 4px 0px 0px 0px;
+    padding: 4px;
+	text-align: justify;
+  }
+/* </ol> */
+
+/* <ul> */
+
+.textblock>ul>li {
+	font-size: 16px;
+	padding: 4px 8px;
+}
+
+.textblock[type="legal"]>ul {
+	font-size: 16px;
+    padding: 0px 0px 0px 24px;
+}
+
+.textblock[type="legal"]>ul>li {
+	padding: 8px 8px 8px 16px;
+	text-align: justify;
+}
+
+
+@media (orientation : landscape) {
+	.textblock>ul {
+		font-size: 16px;
+	}
+}
+
+@media (orientation : portrait) {
+	.textblock>ul {
+		font-size: 13px;
+	}
+}
+/* </ul> */
+
+/* <a> */
+
+.textblock-links {
+	display: flex;
+	flex-direction: row;
+	padding: 8px;
+}
+
+.textblock-link {
+	color: white;
+	font-size: 14px;
+	font-weight: bold;
+    padding: 4px;
+    margin: 8px;
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+	background-color: #3862fbca;
+	/*background-image: linear-gradient(to right, #3525e5 0%, #3525e5  20%, #b214d2 100%);*/
+	border-radius: 20px;
+	cursor: pointer;
+	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.367);
+	text-decoration: none;
+}
+
+.textblock-link:hover {
+	background-color: #476bed;
+}
+
+.textblock-link-pic {
+	width: 24px;
+	height: 24px;
+	margin: 0px;
+	padding: 0px;
+	background-size: auto;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
+.textblock-link-pic > svg {
+	stroke: #ffffff;
+	fill: #ffffff;
+}
+
+.textblock-link-text {
+	padding-bottom: 2px;
+	font-size: 14px;
+	margin-left: 8px;
+	color: #ffffff;
+}
+
+
+
+.textblock-link:hover > .textblock-link-pic >svg {
+	stroke: white;
+	fill: white;
+}
+
+.textblock-link:hover > .textblock-link-text{
+	color: white;
+}
+
+/* <a:styles> */
+
+.textblock-link[type="marketing"] {
+	padding: 12px 24px;
+	border-radius: 4px;
+}
+.textblock-link[type="marketing"]>.textblock-link-text {
+	font-size: 16px;
+	font-weight: bold;
+}
+
+/* </a:styles> */
+
+/* <a:color> */
+.textblock-link[color="resource"] {
+	color: white;
+	background-color: #3862fbca;
+}
+.textblock-link[color="resource"]:hover {
+	background-color: #7291ff;
+}
+
+.textblock-link[color="doc"] {
+	color: white;
+	background-color: #008925ca;
+}
+.textblock-link[color="doc"]:hover {
+	background-color: #02c035ca;
+}
+
+/* </a:color> */
+
+
+/* </a> */
+
+
+.aero-slide>a {
+	position: absolute;
+	z-index: 10;
+	overflow: hidden;
+	padding: 12px 24px;
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	font-size: 20px;
+	font-weight: normal;
+	line-height: 16px;
+	white-space: nowrap;
+	vertical-align: middle;
+	cursor: pointer;
+	user-select: none;
+	background-repeat: repeat-x;
+	background-position: -1px -1px;
+	background-size: 110% 110%;
+	border: 1px solid rgba(240, 240, 255, 1.0);
+	border-radius: 8px;
+	appearance: none;
+	/* appearance */
+	color: #ffffff;
+	background-color: rgba(28, 77, 45, 0.16);
+	background-image: linear-gradient(-180deg, rgb(46 46 46/ 52%) 0%,
+			rgb(16 16 16/ 67%) 90%);
+	backdrop-filter: blur(2px);
+	text-decoration: none;
+}
+
+.aero-slide>a:hover {
+	background-color: #269f42;
+	background-image: linear-gradient(-180deg, #2fcb53 0%, #269f42 90%);
+	background-position: -.5em;
+	border-color: rgba(27, 31, 35, 0.5);
+	text-decoration: none;
+}
+
+.aero-slide>a:focus {
+	box-shadow: 0 0 0 0.2em rgba(52, 208, 88, 0.4);
+	text-decoration: none;
+}
+
+.aero-slide>a:active {
+	background-color: #279f43;
+	background-image: none;
+	border-color: rgba(27, 31, 35, 0.5);
+	box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+	text-decoration: none;
+}
+
+@media (orientation : landscape) {}
+
+@media (orientation : portrait) {
+	.aero-slide h1 {
+		font-size: 32px;
+		line-height: 32px;
+	}
+
+	.aero-slide h2 {
+		font-size: 18px;
+		line-height: 18px;
+	}
+
+	.aero-slide p {
+		font-size: 16px;
+	}
+}
+
+.aero-slide-paragraph {
+	font-size: 16px;
+	padding: 32px 0px 32px 0px;
+}
+
+/* </aero-slides> */
+
+/* <aero-slide-prime> */
+
+/* </aero-slide-prime> */
+
+
+
+/* <themes> */
+.textblock[theme="light"] {
+	color: black;
+	/*background-color: rgba(255, 255, 255, 0.24);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.75);*/
+	/*text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);*/
+}
+
+.textblock[theme="dark"] {
+	color: white;
+	/*background-color: rgba(0, 0, 0, 0.16);*/
+	/*backdrop-filter: blur(12px);*/
+	/*text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.75);*/
+}
+
+/* </themes> */
+
+
+/* <svg> */
+.textblock-pic-svg {
+	padding: 32px 16px 32px 16px;
+}
+
+.textblock[theme="light"] > .textblock-pic-svg svg {
+	fill: black;
+	stroke: black;
+}
+
+.textblock[theme="dark"] > .textblock-pic-svg svg {
+	fill: white;
+	stroke: white;
+}
+
+/* </svg> */
+
+/* <backgrounds> */
+div[class^="background-"] {
+	background-repeat: no-repeat;
+}
+
+.background-white {
+	background-color: white;
+}
+
+.background-blue {
+	background-color: blue;
+}
+
+.background-teal {
+	background-color: teal;
+}
+
+.background-black {
+	background-color: black;
+}
+
+.background-grey64 {
+	background-color: rgb(64, 64, 64);
+}
+
+.background-grey128 {
+	background-color: rgb(128, 128, 128);
+}
+
+.background-grey192 {
+	background-color: rgb(192, 192, 192);
+}
+
+.background-pic {
+	background-size: cover;
+	background-position: center;
+}
+
+
+/* </backgrounds> */
+
+
+/* <code> */
+
+
+.txbk-code-section {
+	padding: 24px max(5%, 16px) 24px max(5%, 16px);
+}
+
+.txbk-code-window {
+	background-color: rgb(33, 23, 59);
+	border-radius: 16px;
+	padding: 16px 32px;
+	color: rgb(87, 211, 211);
+}
+
+.txbk-code-window pre {
+	margin: 0;
+	padding: 0;
+	overflow-x: hidden;
+	tab-size: 2;
+}
+
+.txbk-code-window code {
+	margin: 0;
+	padding: 0;
+}
diff --git a/aero/TextBlock.js b/aero/TextBlock.js
new file mode 100644
index 0000000..75302fa
--- /dev/null
+++ b/aero/TextBlock.js
@@ -0,0 +1,251 @@
+import { AeroElement } from "./AeroElement.js";
+import { AeroUtilities } from "./AeroUtilities.js";
+import { Icon } from "./Icon.js";
+import { WebPage } from "./WebPage.js";
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export const LOW_RESOLUTION_TAG = "-low";
+export const HIGH_RESOLUTION_TAG = "-high";
+
+export class TextBlock extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    props;
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    /** @type{boolean} */
+    hasAssetImage = false;
+
+    /** @type{boolean} */
+    isAssetImageLoaded = false;
+
+    /** @type{string} */
+    assetImagePath;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+    constructor(type, props) {
+        super();
+        this.type = type;
+        this.props = props;
+    }
+
+    /**
+     * 
+     * @param {WebPage} handler 
+     * @returns {HTMLElement}
+     */
+    build(page) {
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/TextBlock.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("textblock");
+        this.sectionNode.setAttribute("type", this.type);
+
+
+        this.setType(this.type);
+        this.setTheme(this.props.theme ? this.props.theme : "light");
+
+        if (this.props.arrangement) { this.setArrangement(this.props.arrangement); }
+
+        /* <id> */
+        if (this.props.id != undefined) {
+            this.sectionNode.id = this.props.id;
+        }
+        /* </id> */
+
+
+        /* <background> */
+        if (this.props.background != undefined || this.props.backgroundColor != undefined) {
+            let backgroundParam = this.props.background;
+            switch (backgroundParam) {
+                case "black": this.sectionNode.classList.add("background-black"); break;
+                case "white": this.sectionNode.classList.add("background-white"); break;
+                case "grey64": this.sectionNode.classList.add("background-grey64"); break;
+                case "grey128": this.sectionNode.classList.add("background-grey128"); break;
+                case "grey192": this.sectionNode.classList.add("background-grey192"); break;
+            }
+        }
+        else if (this.props.backgroundGradient != undefined) {
+            this.sectionNode.classList.add("aero-background-gradient-" + this.props.backgroundGradient);
+        }
+        else if (this.props.backgroundImage != undefined) {
+            let backgroundImagePath = this.props.backgroundImage;
+            this.sectionNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.sectionNode, backgroundImagePath, () => this.render(page));
+
+        }
+        /* </background> */
+
+
+        /* <elements> */
+        this.props.elements.forEach(element => this.sectionNode.appendChild(element.build(page)));
+        /* </elements> */
+
+        /* return wrapper node */
+        return this.sectionNode;
+    }
+
+
+    setType(type) {
+        this.sectionNode.setAttribute("type", type);
+    }
+
+    setTheme(theme) {
+        this.sectionNode.setAttribute("theme", theme);
+    }
+
+    setArrangement(arrangement) {
+        this.sectionNode.setAttribute("arrangement", arrangement);
+    }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+        else if (this.isInitialized && page.imageResolution == 1) {
+            this.redrawHighRes();
+        }
+    }
+
+    draw() {
+
+    }
+
+}
+
+export class TextBlockElement {
+
+    constructor(props) {
+        this.props = props ? props : {};
+    }
+
+}
+
+export class TxBkHeader1 extends TextBlockElement {
+
+    constructor(text, props) {
+        super(props);
+        this.text = text;
+    }
+
+    build(page) {
+        const headerNode = document.createElement("h1");
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+        headerNode.innerHTML = this.text;
+        return this.headerNode = headerNode;
+    }
+
+}
+
+
+export class TxBkHeader2 extends TextBlockElement {
+
+    constructor(text, props) {
+        super(props);
+        this.text = text;
+    }
+
+    build(page) {
+        const headerNode = document.createElement("h2");
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+        headerNode.innerHTML = this.text;
+        return this.headerNode = headerNode;
+    }
+
+}
+
+
+export class TxBkParagraph extends TextBlockElement {
+
+    constructor(text, props) {
+        super(props);
+        this.text = text;
+    }
+
+    build(page) {
+        const headerNode = document.createElement("p");
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+        headerNode.innerHTML = this.text;
+        return this.headerNode = headerNode;
+    }
+
+}
+
+
+export class TxBkSVG extends TextBlockElement {
+
+    constructor(pathname, props) {
+        super(props);
+        this.pathname = pathname;
+    }
+
+    build(page) {
+        const wrapperNode = document.createElement("div");
+        wrapperNode.classList.add("textblock-pic-svg");
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+       
+
+        this.icon = new Icon(this.pathname, this.props); 
+        wrapperNode.appendChild(this.icon.build());
+
+        return this.wrapperNode = wrapperNode;
+    }
+
+}
\ No newline at end of file
diff --git a/aero/TextBlockV2.js b/aero/TextBlockV2.js
new file mode 100644
index 0000000..42832bb
--- /dev/null
+++ b/aero/TextBlockV2.js
@@ -0,0 +1,537 @@
+import { AeroElement } from "./AeroElement.js";
+import { AeroUtilities } from "./AeroUtilities.js";
+import { Icon, SVG_inject } from "./Icon.js";
+import { WebPage } from "./WebPage.js";
+import { WebPageV2 } from "./WebPageV2.js";
+
+
+// Using ES6 import syntax
+import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/highlight.min.js';
+//  and it's easy to individually load additional languages
+import java from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/java.min.js';
+import xml from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/xml.min.js';
+
+
+
+
+
+/*
+    Turn this:
+        {
+        _type: "aero-slide-prime",
+        theme: "dark",
+        title: `The power of <b>tomorrow</b>`,
+        subtitle: "Hi There",
+        paragraph: `this is a very 
+        long text indeed that spread on multiple lines`,
+        background : {
+            _type : "pic",
+            source : "assets/truc0002.jpg"
+        }
+    },
+
+    into this:
+
+    <section class="aero-slide-prime aero-theme-dark background-black">
+        <div class="text">
+            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
+            <h2>The world's first H2-powered multirole heavy duty drone with
+                switchable nacelles</h2>
+        </div>
+        <div class="asset"
+            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
+        </div>
+    </section>
+*/
+
+
+
+export const LOW_RESOLUTION_TAG = "-low";
+export const HIGH_RESOLUTION_TAG = "-high";
+
+export class TextBlockV2 extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    type;
+
+    /**
+     * @type{List<TextBlockElement>}
+     */
+    elements = new Array();
+
+    /** @type{boolean} */
+    hasBackgroundImage = false;
+
+    /** @type{boolean} */
+    isBackgroundImageLoaded = false;
+
+    /** @type{string} */
+    backgroundImagePath;
+
+    /** @type{boolean} */
+    hasAssetImage = false;
+
+    /** @type{boolean} */
+    isAssetImageLoaded = false;
+
+    /** @type{string} */
+    assetImagePath;
+
+    /** @type {HTMLDivElement} */
+    assetNode;
+
+
+    /**
+     * 
+     * @param {WebPageV2} page 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources) {
+        super();
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/TextBlock.css");
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("textblock");
+
+        let val;
+        this.type = (val = sources.getAttribute("type")) ? val : "std";
+        this.sectionNode.setAttribute("type", this.type);
+
+        this.theme = (val = sources.getAttribute("theme")) ? val : "light";
+        this.sectionNode.setAttribute("theme", this.theme);
+
+        this.arrangement = (val = sources.getAttribute("arrangement")) ? val : "std";
+        this.sectionNode.setAttribute("arrangement", this.arrangement);
+
+        this.numbering = (val = sources.getAttribute("numbering")) ? val : "none";
+
+        /* <id> */
+        if (sources.id != undefined) { this.sectionNode.id = sources.id; }
+        /* </id> */
+
+
+        /* <background> */
+        if (val = sources.getAttribute("backgroundColor")) {
+            switch (val) {
+                case "black": this.sectionNode.classList.add("background-black"); break;
+                case "white": this.sectionNode.classList.add("background-white"); break;
+                case "grey64": this.sectionNode.classList.add("background-grey64"); break;
+                case "grey128": this.sectionNode.classList.add("background-grey128"); break;
+                case "grey192": this.sectionNode.classList.add("background-grey192"); break;
+            }
+        }
+        else if (val = sources.getAttribute("backgroundGradient")) {
+            /* ee */
+            page.css_requireStylesheet("/aero/gradient-backgrounds.css");
+            this.sectionNode.classList.add("aero-background-gradient-" + val);
+        }
+        else if (val = sources.getAttribute("backgroundImage")) {
+            this.sectionNode.classList.add("background-pic");
+            AeroUtilities.loadBackgroundImage(this.sectionNode, val, () => this.render(page));
+        }
+        /* </background> */
+
+
+        /* <elements> */
+        const numbering = {
+            type: this.numbering,
+            h1Number: 0,
+            h2Number: 0,
+            pNumber: 0
+        };
+
+        let node = sources.firstChild;
+        while (node) {
+            let type = node.nodeName.toLowerCase();
+            switch (type) {
+                case "h1": {
+                    numbering.h1Number++;
+                    this.elements.push(new TxBkHeader1(page, node, numbering));
+                    numbering.h2Number = 0;
+                } break;
+
+                case "h2": {
+                    numbering.h2Number++;
+                    this.elements.push(new TxBkHeader2(page, node, numbering));
+                    numbering.pNumber = 0;
+                } break;
+
+                case "p": this.elements.push(new TxBkParagraph(page, node)); break;
+                case "svg": this.elements.push(new TxBkSVG(page, node)); break;
+                case "snippet": this.elements.push(new TxBkCodeSnippet(page, node)); break;
+                case "ol": this.elements.push(new TxOrderedBkList(page, node)); break;
+                case "ul": this.elements.push(new TxUnorderedBkList(page, node)); break;
+                case "links": this.elements.push(new TxBkLinks(page, node)); break;
+            }
+
+            node = node.nextSibling;
+        }
+
+        this.elements.forEach(element => this.sectionNode.appendChild(element.html_getNode()));
+        /* </elements> */
+    }
+
+
+    html_getNode() {
+        /* return wrapper node */
+        return this.sectionNode;
+    }
+
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        if (!this.isInitialized) {
+            this.draw();
+            this.isInitialized = true;
+        }
+        else if (this.isInitialized && page.imageResolution == 1) {
+            this.redrawHighRes();
+        }
+    }
+
+    draw() {
+
+    }
+
+}
+
+export class TextBlockElement {
+
+    constructor(sources) {
+
+    }
+
+}
+
+export class TxBkHeader1 extends TextBlockElement {
+
+    constructor(page, sources, numbering) {
+        super(sources);
+        const headerNode = document.createElement("h1");
+        switch(numbering.type){
+            case "none" : {
+                headerNode.innerHTML = sources.innerHTML;
+            } break;
+            case "1.2.3" : {
+                const numberNode = document.createElement("span");
+                numberNode.innerHTML = `${numbering.h1Number}.`;
+                headerNode.appendChild(numberNode);
+
+                const textNode = document.createElement("span");
+                textNode.innerHTML = sources.innerHTML;
+                headerNode.appendChild(textNode);
+            } break;
+        }
+        
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+        
+        this.headerNode = headerNode;
+    }
+
+    html_getNode() { return this.headerNode; }
+}
+
+
+export class TxBkHeader2 extends TextBlockElement {
+
+    constructor(page, sources, numbering) {
+        super(sources);
+        const headerNode = document.createElement("h2");
+        switch(numbering.type){
+            case "none" : {
+                headerNode.innerHTML = sources.innerHTML;
+            } break;
+            case "1.2.3" : {
+                const numberNode = document.createElement("span");
+                numberNode.innerHTML = `${numbering.h1Number}.${numbering.h2Number}.`;
+                headerNode.appendChild(numberNode);
+
+                const textNode = document.createElement("span");
+                textNode.innerHTML = sources.innerHTML;
+                headerNode.appendChild(textNode);
+            } break;
+        }
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+        this.headerNode = headerNode;
+    }
+
+    html_getNode() { return this.headerNode; }
+}
+
+
+export class TxBkParagraph extends TextBlockElement {
+
+    constructor(page, sources) {
+        super(sources);
+        const headerNode = document.createElement("p");
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+        headerNode.innerHTML = sources.innerHTML;
+        this.headerNode = headerNode;
+    }
+
+    html_getNode() { return this.headerNode; }
+}
+
+
+export class TxBkSVG extends TextBlockElement {
+
+    constructor(page, sources) {
+        super(sources);
+        this.pathname = sources.getAttribute("path");
+
+        const wrapperNode = document.createElement("div");
+        wrapperNode.classList.add("textblock-pic-svg");
+        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
+
+        let val;
+        const width = (val = sources.getAttribute("width")) ? parseInt(val) : 128;
+        const height = (val = sources.getAttribute("height")) ? parseInt(val) : 128;
+        this.icon = new Icon(this.pathname, { width: width, height: height });
+        wrapperNode.appendChild(this.icon.build());
+
+        this.wrapperNode = wrapperNode;
+    }
+
+    html_getNode() { return this.wrapperNode; }
+
+}
+
+
+export class TxBkCodeSnippet extends TextBlockElement {
+
+    static isLanguageLoaded = false;
+
+    /**
+     * 
+     * @param {WebPageV2} page 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources) {
+        super(sources);
+
+        this.sourcePathname = sources.getAttribute("path");
+
+        if (!this.isLanguageLoaded) {
+
+            // Then register the languages you need
+            hljs.registerLanguage('java', java);
+            hljs.registerLanguage('xml', xml);
+            this.isLanguageLoaded = true;
+        }
+
+        //page.css_requireStylesheet("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/default.min.css");
+        page.css_requireStylesheet("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/atom-one-dark.css");
+
+
+        const wrapperNode = document.createElement("div");
+        wrapperNode.classList.add("txbk-code-section");
+
+        const windowNode = document.createElement("div");
+        windowNode.classList.add("txbk-code-window");
+        // windowNode.classList.add("theme-atom-one-dark");
+
+        const preNode = document.createElement("pre");
+        //preNode.classList.add("theme-atom-one-dark");
+
+        const spanNode = document.createElement("span");
+        //spanNode.classList.add("language-java");
+        // spanNode.classList.add("hljs");
+
+        const codeNode = document.createElement("code");
+        //codeNode.innerHTML = highlightedCode;
+
+
+        spanNode.appendChild(codeNode);
+        preNode.appendChild(spanNode);
+        windowNode.appendChild(preNode);
+        wrapperNode.appendChild(windowNode);
+
+        AeroUtilities.getResourceFromOrigin(this.sourcePathname, "text", sourceCode => {
+            const highlightedSourceCode = hljs.highlight(sourceCode, { language: 'java' }).value;
+            codeNode.innerHTML = highlightedSourceCode;
+        })
+
+        this.wrapperNode = wrapperNode;
+    }
+
+
+    html_getNode() { return this.wrapperNode; }
+
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+        /* do nothing */
+    }
+}
+
+
+
+export class TxOrderedBkList extends TextBlockElement {
+
+    constructor(page, sources) {
+        super(sources);
+        const listNode = document.createElement("ol");
+        //listNode.classList.add("textblock-list");
+        if (this.isMobileHideable) { listNode.classList.add("square-grid-mobile-hideable"); }
+        
+        let val;
+        this.type = (val = sources.getAttribute("type")) ? val : "1";
+        listNode.setAttribute("type", this.type);
+
+
+        /* <elements> */
+        let node = sources.firstChild;
+        while (node) {
+            let type = node.nodeName.toLowerCase();
+            switch (type) {
+                case "li": {
+                    const itemNode = document.createElement("li")
+                    itemNode.innerHTML = node.innerHTML;
+                    listNode.appendChild(itemNode);
+                } break;
+            }
+            node = node.nextSibling;
+        }
+        /* </elements> */
+
+        this.listNode = listNode;
+    }
+
+    html_getNode() { return this.listNode; }
+}
+
+
+
+export class TxUnorderedBkList extends TextBlockElement {
+
+    constructor(page, sources) {
+        super(sources);
+        const listNode = document.createElement("ul");
+        //listNode.classList.add("textblock-list");
+        if (this.isMobileHideable) { listNode.classList.add("square-grid-mobile-hideable"); }
+
+       
+        /* <elements> */
+        let node = sources.firstChild;
+        while (node) {
+            let type = node.nodeName.toLowerCase();
+            switch (type) {
+                case "li": {
+                    const itemNode = document.createElement("li")
+                    itemNode.innerHTML = node.innerHTML;
+                    listNode.appendChild(itemNode);
+                } break;
+            }
+            node = node.nextSibling;
+        }
+        /* </elements> */
+
+        this.listNode = listNode;
+    }
+
+    html_getNode() { return this.listNode; }
+}
+
+
+
+
+
+export class TxBkLinks extends TextBlockElement {
+
+
+
+    /**
+     * @type{List<Object>}
+     */
+    elements = new Array();
+
+    /**
+     * 
+     * @param {*} page 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources) {
+        super(sources);
+
+        const wrapperNode = document.createElement("div");
+        wrapperNode.classList.add("textblock-links");
+        if (this.isMobileHideable) { wrapperNode.classList.add("square-grid-mobile-hideable"); }
+
+        /* <elements> */
+        let node = sources.firstChild;
+        while (node) {
+            let type = node.nodeName.toLowerCase();
+            switch (type) {
+                case "a": this.elements.push(new TxBkAnchor(page, node)); break;
+            }
+            node = node.nextSibling;
+        }
+
+        this.elements.forEach(element => {
+            let cellNode = document.createElement("div");
+            cellNode.appendChild(element.html_getNode());
+            wrapperNode.appendChild(cellNode);
+        });
+        /* </elements> */
+
+        this.wrapperNode = wrapperNode;
+    }
+
+    html_getNode() { return this.wrapperNode; }
+
+}
+
+export class TxBkAnchor {
+
+    /**
+     * 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources) {
+
+        this.iconPathname = sources.getAttribute("icon");
+        this.url = sources.getAttribute("href");
+
+        this.type = sources.hasAttribute("type") ? sources.getAttribute("type") : "std";
+        this.color = sources.hasAttribute("color") ? sources.getAttribute("color") : "std";
+
+        const linkNode = document.createElement("a");
+        linkNode.setAttribute("type", this.type);
+        linkNode.setAttribute("color", this.color);
+        linkNode.classList.add("textblock-link");
+        if (this.isMobileHideable) { linkNode.classList.add("square-grid-mobile-hideable"); }
+
+        const picNode = document.createElement("span");
+        picNode.classList.add("textblock-link-pic");
+        SVG_inject(picNode, this.iconPathname, 24, 24);
+        linkNode.appendChild(picNode);
+
+        const textNode = document.createElement("span");
+        textNode.classList.add("textblock-link-text");
+        textNode.innerHTML = sources.innerHTML;
+        linkNode.appendChild(textNode);
+
+        let val;
+        if (val = sources.getAttribute("href")) { linkNode.href = val; }
+        /* download="proposed_file_name" */
+        if (val = sources.getAttribute("client-filename")) { linkNode.download = val; }
+
+
+        this.linkNode = linkNode;
+    }
+
+    html_getNode() { return this.linkNode; }
+
+}
\ No newline at end of file
diff --git a/aero/Video.css b/aero/Video.css
new file mode 100644
index 0000000..91b9194
--- /dev/null
+++ b/aero/Video.css
@@ -0,0 +1,13 @@
+
+
+.aero-video-wrapper {
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
+		sans-serif;
+	margin: 0px 0px 0px 0px;
+	padding: 0px;
+}
+
+
+.aero-video {
+	width: 100vw;
+}
diff --git a/aero/Video.js b/aero/Video.js
new file mode 100644
index 0000000..4743484
--- /dev/null
+++ b/aero/Video.js
@@ -0,0 +1,66 @@
+import { AeroElement } from "./AeroElement.js";
+import { WebPage } from "./WebPage.js";
+
+
+
+export class Video extends AeroElement {
+
+    /** @type {HTMLElement } */
+    sectionNode;
+
+    /**
+     * 
+     * @param {HTMLElement} sources 
+     */
+    constructor(page, sources) {
+        super();
+
+        /* CSS requirements */
+        page.css_requireStylesheet("/aero/Video.css");
+
+
+        /* build nodes */
+        this.sectionNode = document.createElement("section");
+        this.sectionNode.classList.add("aero-video-wrapper");
+
+        /*
+         <video loop autoplay muted class="VideoMain">
+        <source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
+    </video>
+    */
+
+        this.videoNode = document.createElement("video");
+        this.videoNode.classList.add("aero-video");
+        this.videoNode.setAttribute("loop", "");
+        this.videoNode.setAttribute("autoplay", "");
+        this.videoNode.setAttribute("muted", "");
+
+
+        let val;
+
+        /* <type> */
+        const vsrc = (val = sources.getAttribute("src")) ? val : null;
+
+        if (vsrc) {
+            this.sourceNode = document.createElement("source");
+            this.sourceNode.src = vsrc;
+            this.sourceNode.setAttribute("type", "video/mp4");
+        }
+
+        this.videoNode.appendChild(this.sourceNode);
+        this.sectionNode.appendChild(this.videoNode);
+    }
+
+
+    html_getNode() {
+        return this.sectionNode;
+    }
+
+    /**
+     * 
+     * @param {WebPage} page 
+     */
+    render(page) {
+    }
+
+}
diff --git a/aero/WebPage.css b/aero/WebPage.css
new file mode 100644
index 0000000..998d440
--- /dev/null
+++ b/aero/WebPage.css
@@ -0,0 +1,5 @@
+
+
+body {
+    background-color: black;
+}
\ No newline at end of file
diff --git a/aero/WebPage.js b/aero/WebPage.js
new file mode 100644
index 0000000..5bdc834
--- /dev/null
+++ b/aero/WebPage.js
@@ -0,0 +1,184 @@
+import { AeroElement } from "./AeroElement.js";
+
+export class WebPage {
+
+
+    props;
+
+    /**
+ * @type {Map<string, boolean>}
+ * // build stylesheets map
+ */
+    css_stylesheetsMap = new Map();
+
+
+    /** @type {HTMLBodyElement} */
+    bodyNode;
+
+    /** @type {HTMLDivElement} */
+    wrapperNode;
+
+    /** @type {HTMLDivElement} */
+    baseLayerNode;
+
+    /** @type {HTMLDivElement} */
+    topLayerNode;
+
+    /** @type {HTMLDivElement} */
+    veilNode;
+
+
+    /** @type {Array<AeroElement>} */
+    elements;
+
+
+    /** @type {MediaQueryList} */
+    orientationObserver;
+
+
+    /**
+     * @type {number}
+     * 0: load low resolution
+     * 1: load high resolution
+     */
+    imageResolution = 0;
+
+    isLandscape;
+
+    css_isStylesheetsLoadingCompleted = false;
+
+
+    constructor(elements, props) {
+        this.elements = elements;
+        this.props = props;
+
+        
+        /* CSS requirements */
+        this.css_requireStylesheet("/aero/WebPage.css");
+        this.css_requireStylesheet("/aero/ModalBox.css");
+    }
+
+
+
+    generateState() {
+        /* compute new state */
+        let state = {};
+        state.
+            state.imageResolution = this.imageResolution;
+        return state;
+    }
+
+
+    start() {
+
+
+        /* build */
+        this.baseLayerNode = document.querySelector("#base");
+
+        /* retrieve page info */
+        this.orientationObserver = window.matchMedia("(orientation: landscape)");
+        this.isLandscape = this.orientationObserver.matches;
+        this.imageResolution = 0;
+
+
+
+        /* orientation */
+        const page = this;
+        this.orientationObserver.addEventListener("change", function (event) {
+            page.isLandscape = page.orientationObserver.matches;
+            page.render();
+        }, false);
+
+
+        /* initialize all (base) components */
+        this.elements.forEach(element => this.baseLayerNode.appendChild(element.build(this)));
+
+        this.topLayerNode = document.querySelector("#overlay");
+
+        this.veilNode = document.querySelector("#veil");
+    }
+
+
+    hide() {
+        this.baseLayerNode.classList.add("hidden");
+        this.topLayerNode.classList.add("hidden");
+        this.veilNode.classList.remove("hidden");
+    }
+
+    show() {
+        this.baseLayerNode.classList.remove("hidden");
+        this.topLayerNode.classList.remove("hidden");
+        this.veilNode.classList.add("hidden");
+    }
+
+    render() {
+        //this.elements.forEach(element => element.render(this));
+    }
+
+    run() {
+        this.elements.forEach(element => { if (element.run) { element.run(); } });
+    }
+
+    notifyElementHasBeenLoaded() {
+        if (this.areAllElementsLoaded() && this.imageResolution == 0) {
+            this.imageResolution = 1;
+            this.render();
+        }
+    }
+
+    /**
+     * 
+     * @param {*} width 
+     * @param {*} height 
+     */
+    onScreenResized(width, height) {
+        this.elements.forEach(element => element.onScreenResized(width, height));
+    }
+
+
+    onUpdate() {
+        if (this.css_isStylesheetsLoadingCompleted) {
+            this.render();
+            this.show();
+        }
+    }
+
+    css_onStyleSheetLoaded() {
+
+        /* check if all css stylesheets have been loaded */
+        this.css_isStylesheetsLoadingCompleted = true;
+        this.css_stylesheetsMap.forEach(value => {
+            if (!value) { this.css_isStylesheetsLoadingCompleted = false; }
+        });
+
+        this.onUpdate();
+    }
+
+
+
+    /**
+     * Trigger css loading if necessary
+     * @param {} pathname 
+     */
+    css_requireStylesheet(pathname) {
+        if (!this.css_stylesheetsMap.has(pathname)) {
+            this.css_stylesheetsMap.set(pathname, false);
+
+            /** @type{HTMLLinkElement} */
+            const linkNode = document.createElement("link");
+            linkNode.type = "text/css";
+            linkNode.rel = "stylesheet";
+            linkNode.href = pathname;
+            linkNode.addEventListener("load", () => {
+                this.css_stylesheetsMap.set(pathname, true);
+                this.css_onStyleSheetLoaded();
+            });
+
+            /* append and trigger */
+            document.head.appendChild(linkNode);
+        }
+    }
+
+}
+
+
diff --git a/aero/WebPageV2.js b/aero/WebPageV2.js
new file mode 100644
index 0000000..e9c284c
--- /dev/null
+++ b/aero/WebPageV2.js
@@ -0,0 +1,303 @@
+import { AeroElement } from "./AeroElement.js";
+import { FooterV2 } from "./FooterV2.js";
+import { HeaderV2 } from "./HeaderV2.js";
+import { ModalBox } from "./ModalBox.js";
+import { SlideV2 } from "./SlideV2.js";
+import { SquareGridV2 } from "./SquareGridV2.js";
+import { TextBlockV2 } from "./TextBlockV2.js";
+import { DocumentationV2 } from "./DocumentationV2.js";
+import { Video } from "./Video.js";
+
+
+
+/**
+ * 
+ * @param {*} props 
+ */
+export const boot = function(){
+    const page = new WebPageV2();
+    page.start();
+}
+
+
+/**
+ * 
+ * @param {*} prefix 
+ * @param {HTMLElement} sourceNode
+ */
+export const buildPageElement = function (page, sourceNode) {
+    const type = sourceNode.nodeName.toLowerCase();
+    switch (type) {
+        case "header": return new HeaderV2(page, sourceNode);
+        case "slide": return new SlideV2(page, sourceNode);
+        case "square-grid": return new SquareGridV2(page, sourceNode);
+        case "text-block": return new TextBlockV2(page, sourceNode);
+        case "video": return new Video(page, sourceNode);
+        case "footer": return new FooterV2(page, sourceNode);
+        case "aero-doc": return new DocumentationV2(page, sourceNode);
+        default : return null;
+    }
+}
+
+
+const COOKIES_KEY = "has-cookies-already-been-displayed";
+
+
+export class WebPageV2 {
+
+    /**
+ * @type {Map<string, boolean>}
+ * // build stylesheets map
+ */
+    css_stylesheetsMap = new Map();
+
+
+    /** @type {HTMLBodyElement} */
+    bodyNode;
+
+    /** @type {HTMLDivElement} */
+    wrapperNode;
+
+    /** @type {HTMLDivElement} */
+    baseLayerNode;
+
+    /** @type {HTMLDivElement} */
+    topLayerNode;
+
+    /** @type {HTMLDivElement} */
+    veilNode;
+
+    /** @type {MediaQueryList} */
+    orientationObserver;
+
+
+    /** @type{Array<AeroElement>} */
+    elements = new Array();
+
+    /**
+     * @type {number}
+     * 0: load low resolution
+     * 1: load high resolution
+     */
+    imageResolution = 0;
+
+    isLandscape;
+
+    css_isStylesheetsLoadingCompleted = false;
+
+
+    constructor() {
+
+
+        /* CSS requirements */
+        this.css_requireStylesheet("/aero/WebPage.css");
+        this.css_requireStylesheet("/aero/ModalBox.css");
+
+        const sources = document.querySelector("#aero-page");
+        let node = sources.firstChild;
+        while (node) {
+            
+            const element = buildPageElement(this, node);
+
+            /** add element */
+            if(element !=null){ this.elements.push(element); }
+
+            /* save next node */
+            node = node.nextSibling;
+        }
+        document.body.removeChild(sources);
+        console.log("WEBPAGE loaded!");
+    }
+
+
+
+    generateState() {
+        /* compute new state */
+        let state = {};
+        state.
+            state.imageResolution = this.imageResolution;
+        return state;
+    }
+
+
+    start() {
+
+        /* create structure */
+        this.createStructure();
+
+        /** populate structure */
+        this.elements.forEach(element => this.baseLayerNode.appendChild(element.html_getNode()));
+
+        let val, hasBeenShown = (val = window.sessionStorage.getItem(COOKIES_KEY)) ? val : false;
+        
+        if (!hasBeenShown) {
+            const modalBox = new ModalBox({
+                image: "/icons/cookie.png",
+                title: "0 cookies : Total privacy",
+                explanation: "Zero cookie policy means that no tracking of any kind is used on this site."
+            }, () => {
+                this.topLayerNode.removeChild(modalBox.getEnvelope());
+
+                /* run */
+                page.run();
+            });
+            this.topLayerNode.appendChild(modalBox.getEnvelope());
+
+            window.sessionStorage.setItem(COOKIES_KEY, true);
+        }
+
+        /* retrieve page info */
+        this.orientationObserver = window.matchMedia("(orientation: landscape)");
+        this.isLandscape = this.orientationObserver.matches;
+        this.imageResolution = 0;
+
+        /* orientation */
+        const page = this;
+        this.orientationObserver.addEventListener("change", function (event) {
+            page.isLandscape = page.orientationObserver.matches;
+            page.render();
+        }, false);
+
+    }
+
+
+    hide() {
+        this.baseLayerNode.classList.add("hidden");
+        this.topLayerNode.classList.add("hidden");
+        this.veilNode.classList.remove("hidden");
+    }
+
+    show() {
+        this.baseLayerNode.classList.remove("hidden");
+        this.topLayerNode.classList.remove("hidden");
+        this.veilNode.classList.add("hidden");
+    }
+
+    render() {
+        this.elements.forEach(element => element.render(this));
+    }
+
+    run() {
+        this.elements.forEach(element => { if (element.run) { element.run(); } });
+    }
+
+    notifyElementHasBeenLoaded() {
+        if (this.areAllElementsLoaded() && this.imageResolution == 0) {
+            this.imageResolution = 1;
+            this.render();
+        }
+    }
+
+    /**
+     * 
+     * @param {*} width 
+     * @param {*} height 
+     */
+    onScreenResized(width, height) {
+        this.elements.forEach(element => element.onScreenResized(width, height));
+    }
+
+
+    onUpdate() {
+        if (this.css_isStylesheetsLoadingCompleted) {
+            this.render();
+            this.show();
+        }
+    }
+
+    css_onStyleSheetLoaded() {
+
+        /* check if all css stylesheets have been loaded */
+        this.css_isStylesheetsLoadingCompleted = true;
+        this.css_stylesheetsMap.forEach(value => {
+            if (!value) { this.css_isStylesheetsLoadingCompleted = false; }
+        });
+
+        this.onUpdate();
+    }
+
+
+
+    /**
+     * Trigger css loading if necessary
+     * @param {} pathname 
+     */
+    css_requireStylesheet(pathname) {
+        if (!this.css_stylesheetsMap.has(pathname)) {
+            this.css_stylesheetsMap.set(pathname, false);
+
+            /** @type{HTMLLinkElement} */
+            const linkNode = document.createElement("link");
+            linkNode.type = "text/css";
+            linkNode.rel = "stylesheet";
+            linkNode.href = pathname;
+            linkNode.addEventListener("load", () => {
+                this.css_stylesheetsMap.set(pathname, true);
+                this.css_onStyleSheetLoaded();
+            });
+
+            /* append and trigger */
+            document.head.appendChild(linkNode);
+        }
+    }
+
+
+    createStructure(){
+     /* <structure> */
+    
+        const bodyNode = document.body;
+    
+    
+        const wrapperNode = document.createElement("div");
+    
+        /* build */
+        const baseLayerNode = document.createElement("div");
+        baseLayerNode.classList.add("hidden");
+        baseLayerNode.id = "base";
+        wrapperNode.appendChild(baseLayerNode);
+        this.baseLayerNode = baseLayerNode;
+    
+        const topLayerNode = document.createElement("div");
+        topLayerNode.classList.add("hidden");
+        topLayerNode.id = "overlay";
+        wrapperNode.appendChild(topLayerNode);
+        this.topLayerNode = topLayerNode;
+    
+        const veilNode = document.createElement("div");
+        veilNode.id = "veil";
+        wrapperNode.appendChild(veilNode);
+        bodyNode.appendChild(wrapperNode);
+        this.veilNode = veilNode;
+
+        this.wrapperNode = wrapperNode;
+    
+        /* </structure> */
+    
+    
+    
+        veilNode.appendChild(this.createSpinner());
+    
+    }
+    
+    
+    createSpinner() {
+
+        //const iconPathname = this.iconPathname;
+    
+        const node = document.createElement("div");
+        node.className = "boot-loader";
+        node.innerHTML = `
+            <div class="boot-embedded-icon"></div>
+            <div class="boot-spinner">
+                <svg class="circular" viewBox="25 25 50 50">
+                    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
+                </svg>
+            </div>`;
+    
+            return node;
+    }
+
+
+}
+
+
diff --git a/aero/aero.js b/aero/aero.js
new file mode 100644
index 0000000..d0c4e56
--- /dev/null
+++ b/aero/aero.js
@@ -0,0 +1,167 @@
+
+import { AeroElement } from "./AeroElement.js";
+
+import { Deck } from "./Deck.js";
+import { Footer } from "./Footer.js";
+import { Grid, GridCard } from "./Grid.js";
+import { AeroMovie } from "./AeroMovie.js";
+import { Slide } from "./Slide.js";
+import { WebPage } from "./WebPage.js";
+import { SquareGrid, SquareGridCard, SquareGridCardGroup, SquareGridCardH1, SquareGridCardH2, SquareGridCardLink, SquareGridCardParagraph, SquareGridCardPoint } from "./SquareGrid.js";
+import { CodeBlock } from "./CodeBlock.js";
+import { TextBlock, TxBkHeader1, TxBkHeader2, TxBkParagraph, TxBkSVG } from "./TextBlock.js";
+import { SpText } from "./SpText.js";
+
+
+export const page = function (elements, props) {
+    return new WebPage(elements, props);
+}
+
+export const slide = function (type, props) {
+    return new Slide(type, props);
+}
+
+export const movie = function (type, props) {
+    return new AeroMovie(type, props);
+}
+
+export const deck = function (props) {
+    return new Deck(props);
+}
+
+export const grid = function (type, props) {
+    return new Grid(type, props);
+}
+
+export const gridCard = function (type, props) {
+    return new GridCard(type, props);
+}
+
+
+
+export const sqGrid = function (type, props) {
+    return new SquareGrid(type, props);
+}
+
+export const sqGridCard = function (type, size, props) {
+    return new SquareGridCard(type, size, props);
+}
+
+export const sqGridCardGroup = function (props) {
+    return new SquareGridCardGroup(props);
+}
+
+export const sqGridCardH1 = function (props) {
+    return new SquareGridCardH1(props);
+}
+
+export const sqGridCardH2 = function (props) {
+    return new SquareGridCardH2(props);
+}
+
+export const sqGridCardParagraph = function (props) {
+    return new SquareGridCardParagraph(props);
+}
+
+
+export const sqGridCardPoint = function (props) {
+    return new SquareGridCardPoint(props);
+}
+
+export const sqGridCardLink = function (props) {
+    return new SquareGridCardLink(props);
+}
+
+
+export const codeBlock = function (source) {
+    return new CodeBlock(source);
+}
+
+
+export const textBlock = function (type, props) { return new TextBlock(type, props); }
+export const txbkH1 = function (text, props) { return new TxBkHeader1(text, props); }
+export const txbkH2 = function (text, props) { return new TxBkHeader2(text, props); }
+export const txbkP = function (text, props) { return new TxBkParagraph(text, props); }
+export const txbkSVG = function (pathname, props) { return new TxBkSVG(pathname, props); }
+
+
+export const spText = function (contentPathname, props) { return new SpText(contentPathname, props); }
+
+
+export const footer = function (contentPathname, props) {
+    return new Footer(contentPathname, props);
+}
+
+export const footSocial = function (props) {
+    return new FooterSocialLink(props);
+}
+
+export const footLegal = function (props) {
+    return new FooterLegalLink(props);
+}
+
+
+
+/**
+ * 
+ */
+export class LoadHandler {
+
+    /**
+     * @type{Set<string>}
+     */
+    resources;
+
+    /**
+     * @param{function}
+     */
+    onLoaded = null;
+
+    index = 0;
+
+    constructor() {
+        this.resources = new Set();
+    }
+
+    generateId() {
+        return `generated-${this.index++}`;
+    }
+
+    registerLoading(name) {
+        this.resources.add(name);
+    }
+
+    notifyCompleted(name) {
+        this.resources.delete(name);
+        if (this.onLoaded != null && this.resources.size == 0) {
+            this.onLoaded();
+        }
+    }
+
+
+    listenCompleted(onLoaded) {
+        if (this.resources.size == 0) {
+            onLoaded();
+        }
+        else {
+            this.onLoaded = onLoaded;
+        }
+    }
+}
+
+
+
+
+
+
+/**
+ * @param{HTMLDivElement} enveloppeNode
+ */
+export function clearChildNodes(enveloppeNode) {
+    let child;
+    while ((child = enveloppeNode.firstChild)) {
+        enveloppeNode.removeChild(enveloppeNode.lastChild);
+    }
+}
+
+
diff --git a/aero/aeroV2.js b/aero/aeroV2.js
new file mode 100644
index 0000000..3c73212
--- /dev/null
+++ b/aero/aeroV2.js
@@ -0,0 +1,206 @@
+
+import { AeroElement } from "./AeroElement.js";
+
+import { Deck } from "./Deck.js";
+import { Footer } from "./Footer.js";
+import { Grid, GridCard } from "./Grid.js";
+import { Header } from "./Header.js";
+import { AeroMovie } from "./AeroMovie.js";
+import { Slide } from "./Slide.js";
+import { WebPage } from "./WebPage.js";
+import { SquareGrid, SquareGridCard, SquareGridCardGroup, SquareGridCardH1, SquareGridCardH2, SquareGridCardLink, SquareGridCardParagraph, SquareGridCardPoint } from "./SquareGrid.js";
+import { CodeBlock } from "./CodeBlock.js";
+import { TextBlock, TxBkHeader1, TxBkHeader2, TxBkParagraph, TxBkSVG } from "./TextBlock.js";
+import { SpText } from "./SpText.js";
+import { HeaderV2 } from "./HeaderV2.js";
+
+
+
+export const buildPage = function(){
+    const sourceNode = document.querySelector("#aero-source");
+    const page = new WebPage();
+    buildElements(page, sourceNode, buildElement);
+}
+
+export const buildElements = function(page, parentNode, buildFunction){
+    let sourceNode = parentNode.firstChild, nextNode;
+    while (sourceNode) {
+        /* save next node */
+        nextNode = sourceNode.nextSibling;
+
+        /* create new node and insert it before source node */
+        parentNode.insertBefore(buildFunction(page, sourceNode), sourceNode);
+
+        /* remove source node */
+        parentNode.removeChild(sourceNode);
+
+        /* roll over */
+        sourceNode = nextNode;
+    }
+}
+
+/**
+ * 
+ * @param {*} prefix 
+ * @param {HTMLElement} sourceNode
+ */
+export const buildElement = function (page, sourceNode) {
+    const type = sourceNode.nodeName.toLowerCase();
+    switch (type) {
+        case "aero-header": return new HeaderV2(page, sourceNode).html_getNode();
+        default : return sourceNode;
+    }
+}
+
+export const header = function (props) {
+    return new Header(props);
+}
+
+export const slide = function (type, props) {
+    return new Slide(type, props);
+}
+
+export const movie = function (type, props) {
+    return new AeroMovie(type, props);
+}
+
+export const deck = function (props) {
+    return new Deck(props);
+}
+
+export const grid = function (type, props) {
+    return new Grid(type, props);
+}
+
+export const gridCard = function (type, props) {
+    return new GridCard(type, props);
+}
+
+
+
+export const sqGrid = function (type, props) {
+    return new SquareGrid(type, props);
+}
+
+export const sqGridCard = function (type, size, props) {
+    return new SquareGridCard(type, size, props);
+}
+
+export const sqGridCardGroup = function (props) {
+    return new SquareGridCardGroup(props);
+}
+
+export const sqGridCardH1 = function (props) {
+    return new SquareGridCardH1(props);
+}
+
+export const sqGridCardH2 = function (props) {
+    return new SquareGridCardH2(props);
+}
+
+export const sqGridCardParagraph = function (props) {
+    return new SquareGridCardParagraph(props);
+}
+
+
+export const sqGridCardPoint = function (props) {
+    return new SquareGridCardPoint(props);
+}
+
+export const sqGridCardLink = function (props) {
+    return new SquareGridCardLink(props);
+}
+
+
+export const codeBlock = function (source) {
+    return new CodeBlock(source);
+}
+
+
+export const textBlock = function (type, props) { return new TextBlock(type, props); }
+export const txbkH1 = function (text, props) { return new TxBkHeader1(text, props); }
+export const txbkH2 = function (text, props) { return new TxBkHeader2(text, props); }
+export const txbkP = function (text, props) { return new TxBkParagraph(text, props); }
+export const txbkSVG = function (pathname, props) { return new TxBkSVG(pathname, props); }
+
+
+export const spText = function (contentPathname, props) { return new SpText(contentPathname, props); }
+
+
+export const footer = function (contentPathname, props) {
+    return new Footer(contentPathname, props);
+}
+
+export const footSocial = function (props) {
+    return new FooterSocialLink(props);
+}
+
+export const footLegal = function (props) {
+    return new FooterLegalLink(props);
+}
+
+
+
+/**
+ * 
+ */
+export class LoadHandler {
+
+    /**
+     * @type{Set<string>}
+     */
+    resources;
+
+    /**
+     * @param{function}
+     */
+    onLoaded = null;
+
+    index = 0;
+
+    constructor() {
+        this.resources = new Set();
+    }
+
+    generateId() {
+        return `generated-${this.index++}`;
+    }
+
+    registerLoading(name) {
+        this.resources.add(name);
+    }
+
+    notifyCompleted(name) {
+        this.resources.delete(name);
+        if (this.onLoaded != null && this.resources.size == 0) {
+            this.onLoaded();
+        }
+    }
+
+
+    listenCompleted(onLoaded) {
+        if (this.resources.size == 0) {
+            onLoaded();
+        }
+        else {
+            this.onLoaded = onLoaded;
+        }
+    }
+}
+
+
+
+
+
+
+/**
+ * @param{HTMLDivElement} enveloppeNode
+ */
+export function clearChildNodes(enveloppeNode) {
+    let child;
+    while ((child = enveloppeNode.firstChild)) {
+        enveloppeNode.removeChild(enveloppeNode.lastChild);
+    }
+}
+
+
diff --git a/aero/boot.css b/aero/boot.css
new file mode 100644
index 0000000..b4e905e
--- /dev/null
+++ b/aero/boot.css
@@ -0,0 +1,156 @@
+.hidden {
+	visibility: hidden;
+	height: 0px;
+	overflow: hidden;
+}
+
+
+body {
+	background-color: black;
+	padding: 0px;
+	margin: 0px;
+}
+
+body > div#aero-page {
+	display: none;
+}
+
+
+#base-layer {
+	z-index: 2;
+	background-color: rgb(255, 255, 255);
+	padding: 0px;
+	margin: 0px;
+}
+
+
+#overlay {
+	z-index: 64;
+	background-color: rgb(255, 255, 255);
+	position: absolute;
+	top: 0px;
+	bottom: 0px;
+	padding: 0px;
+	margin: 0px;
+}
+
+#veil {
+	z-index: 128;
+	background: rgb(89, 85, 85);
+	background: linear-gradient(0deg, rgba(89, 85, 85, 1) 25%, rgba(62, 60, 60, 1) 70%, rgba(66, 66, 66, 1) 100%);
+	position: absolute;
+	width: 100vw;
+	height: 100vh;
+	top: 0px;
+	bottom: 0px;
+	padding: 0px;
+	margin: 0px;
+}
+
+
+
+.boot-loader, .boot-spinner, .boot-embedded-icon {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+
+.boot-spinner, .boot-embedded-icon {
+	margin: 0px;
+	padding: 0px;
+}
+
+
+.boot-spinner {
+	width: 172px;
+	height: 172px;
+}
+
+
+.boot-embedded-icon {
+	width: 128px;
+	height: 128px;
+	background-image: url('/logos/S8-logo-v4-256px.png');
+	background-position: center;
+	background-size: contain;
+}
+
+
+
+.loader:before {
+	content: '';
+	display: block;
+	padding-top: 100%;
+}
+
+.circular {
+	-webkit-animation: rotate 2s linear infinite;
+	animation: rotate 2s linear infinite;
+	height: 100%;
+	-webkit-transform-origin: center center;
+	-ms-transform-origin: center center;
+	transform-origin: center center;
+	width: 100%;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: auto;
+}
+
+.path {
+	stroke-dasharray: 1, 200;
+	stroke-dashoffset: 0;
+	-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+	animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+	stroke-linecap: round;
+}
+
+
+
+@keyframes rotate {
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+
+@keyframes dash {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+	}
+
+	50% {
+		stroke-dasharray: 89, 200;
+		stroke-dashoffset: -35;
+	}
+
+	100% {
+		stroke-dasharray: 89, 200;
+		stroke-dashoffset: -124;
+	}
+}
+
+
+@keyframes color {
+	100%, 0% {
+		stroke: rgb(255, 73, 218);
+	}
+
+	40% {
+		stroke: #f22d8c;
+	}
+
+	66% {
+		stroke: #7f0fda;
+	}
+
+	80%, 90% {
+		stroke: #f9c909;
+	}
+}
\ No newline at end of file
diff --git a/aero/boot.js b/aero/boot.js
new file mode 100644
index 0000000..34d24ff
--- /dev/null
+++ b/aero/boot.js
@@ -0,0 +1,103 @@
+import { ModalBox } from "./ModalBox.js";
+import { WebPageV2 } from "./WebPageV2.js";
+
+
+
+
+export const bootV2 = function(props){
+    const page = new WebPageV2(props);
+    page.start();
+}
+
+
+/**
+ * 
+ * @param {*} pagePathname 
+ */
+export const boot = function (props) {
+
+    /* <structure> */
+
+    const pagePathname = props.page;
+    const hasCookiesModalBox = props.hasCookiesModalBox ? props.hasCookiesModalBox : false;
+    const iconPathname = props.iconPathname;
+
+    const bodyNode = document.body;
+
+
+    const wrapperNode = document.createElement("div");
+
+    /* build */
+    const baseLayerNode = document.createElement("div");
+    baseLayerNode.classList.add("hidden");
+    baseLayerNode.id = "base";
+    wrapperNode.appendChild(baseLayerNode);
+
+    const topLayerNode = document.createElement("div");
+    topLayerNode.classList.add("hidden");
+    topLayerNode.id = "overlay";
+    wrapperNode.appendChild(topLayerNode);
+
+    const veilNode = document.createElement("div");
+    veilNode.id = "veil";
+    wrapperNode.appendChild(veilNode);
+    bodyNode.appendChild(wrapperNode);
+
+    /* </structure> */
+
+
+
+    veilNode.appendChild(createSpinner());
+
+
+    /**
+     * import { WEB_PAGE } from './';
+window.WEB_PAGE = WEB_PAGE;
+     */
+
+
+
+    import(pagePathname).then((mod) => {
+
+        const page = mod.WEB_PAGE;
+
+        /* start page */
+        page.start();
+
+        console.log("WEBPAGE loaded!");
+
+        if (hasCookiesModalBox) {
+            const modalBox = new ModalBox({
+                image: "icons/cookie.png",
+                title: "0 cookies : Total privacy",
+                explanation: "Zero cookie policy means that no tracking of any kind is used on this site."
+            }, () => {
+                topLayerNode.removeChild(modalBox.getEnvelope());
+
+                /* run */
+                page.run();
+            });
+            topLayerNode.appendChild(modalBox.getEnvelope());
+        }
+
+    });
+
+
+}
+
+
+
+export const createSpinner = function (iconPathname) {
+
+    const node = document.createElement("div");
+    node.className = "boot-loader";
+    node.innerHTML = `
+        <div class="boot-embedded-icon"></div>
+        <div class="boot-spinner">
+            <svg class="circular" viewBox="25 25 50 50">
+                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
+            </svg>
+        </div>`;
+
+        return node;
+}
\ No newline at end of file
diff --git a/aero/content/AeroColor.js b/aero/content/AeroColor.js
new file mode 100644
index 0000000..2b1ad5b
--- /dev/null
+++ b/aero/content/AeroColor.js
@@ -0,0 +1,32 @@
+
+
+
+export class AeroColor {
+
+
+    static BLACK = new AeroColor(0, 0, 0);
+
+
+    constructor(red, green, blue, transparency = -2) {
+        super();
+        this.r = red;
+        this.g = green;
+        this.b = blue;
+        this.a = transparency;
+    }
+
+   
+    /**
+     * 
+     * @param {HTMLElement} target 
+     */
+    applyAsBackground(target) {
+        if(this.a > -1){
+            target.style.backgroundColor = `rgb(${this.r},${this.g},${this.b},${this.a})`;
+        }
+        else{
+            target.style.backgroundColor = `rgb(${this.r},${this.g},${this.b})`;
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/aero/content/AeroImage.js b/aero/content/AeroImage.js
new file mode 100644
index 0000000..b89cb03
--- /dev/null
+++ b/aero/content/AeroImage.js
@@ -0,0 +1,34 @@
+
+
+
+export class AeroImage {
+
+
+    constructor(pathname) {
+        super();
+        this.pathname = pathname;
+    }
+
+    /**
+     *  
+     */
+
+    applyAsBackground(target) {
+
+        const backgroundImageBuffer = new Image();
+
+        const _this = this;
+        backgroundImageBuffer.onload = function () {
+
+            /* assign image from buffer */
+            target.style.backgroundImage = `url(${backgroundImageBuffer.src})`;
+
+            /* notify handler */
+            if (onLoaded) { onLoaded(); }
+        };
+
+        /* trigger loading */
+        backgroundImageBuffer.src = pathname;
+    }
+
+}
\ No newline at end of file
diff --git a/aero/gradient-backgrounds.css b/aero/gradient-backgrounds.css
new file mode 100644
index 0000000..d51e257
--- /dev/null
+++ b/aero/gradient-backgrounds.css
@@ -0,0 +1,82 @@
+.aero-background-gradient-light0012 {
+    background:
+        radial-gradient(circle farthest-side at 50% 180%, white 15%, transparent 20%),
+        radial-gradient(closest-corner at 121% 84%, #ef5d5d 190%, transparent 307%),
+        radial-gradient(closest-side at 40% 77%, #fff64d 76%, transparent 185%),
+        linear-gradient(#9933ff 10%, transparent);
+}
+
+.aero-background-gradient-light0016 {
+    background:
+        linear-gradient(142deg, transparent, white),
+        linear-gradient(108deg, red, transparent),
+        linear-gradient(45deg, #fff722, #ff26f9);
+
+}
+
+
+
+.aero-background-gradient-dark0014 {
+    background:
+        radial-gradient(circle farthest-side at 50% 180%, rgb(85, 85, 85) 15%, transparent 20%),
+        radial-gradient(closest-corner at 121% 84%, #96125f 190%, transparent 307%),
+        radial-gradient(closest-side at 40% 77%, #908912 76%, transparent 185%),
+        linear-gradient(#5f209f 10%, transparent);
+}
+
+.aero-background-gradient-dark0016 {
+    background: linear-gradient(108deg, #05050e, transparent), linear-gradient(45deg, #FFF72D, #262bff);
+}
+
+
+
+.aero-background-gradient-light-tile00 {
+    background: linear-gradient(108deg, #fae7eb, white);
+}
+
+
+.aero-background-gradient-light-tile01 {
+    background: linear-gradient(108deg, #e0d4e7, white);
+}
+
+
+.aero-background-gradient-light-tile02 {
+    background: linear-gradient(108deg, #dbeef7, white);
+}
+
+
+.aero-background-gradient-light-tile03 {
+    background: linear-gradient(108deg, #d0edef, white);
+}
+
+
+.aero-background-gradient-light-tile04 {
+    background: linear-gradient(108deg, #b5f6cf, white);
+}
+
+
+.aero-background-gradient-light-tile05 {
+    background: linear-gradient(108deg, #e3e5ff, white);
+}
+
+
+.aero-background-gradient-light-tile06 {
+    background: linear-gradient(108deg, #faedcb, white);
+}
+
+
+.aero-background-gradient-light-tile07 {
+    background: linear-gradient(108deg, #fcd5ce, white);
+}
+
+
+.aero-background-gradient-wip {
+    background: repeating-linear-gradient(
+        45deg,
+        #e9e9e9,
+        #e4e4e4 32px,
+        #f8d2a0 32px,
+        #f8d2a0 64px
+    );
+}
+
diff --git a/aero/highlight.min.js b/aero/highlight.min.js
new file mode 100644
index 0000000..f43ba9a
--- /dev/null
+++ b/aero/highlight.min.js
@@ -0,0 +1,1213 @@
+/*!
+  Highlight.js v11.9.0 (git: f47103d4f1)
+  (c) 2006-2023 undefined and other contributors
+  License: BSD-3-Clause
+ */
+  var hljs=function(){"use strict";function e(n){
+    return n instanceof Map?n.clear=n.delete=n.set=()=>{
+    throw Error("map is read-only")}:n instanceof Set&&(n.add=n.clear=n.delete=()=>{
+    throw Error("set is read-only")
+    }),Object.freeze(n),Object.getOwnPropertyNames(n).forEach((t=>{
+    const a=n[t],i=typeof a;"object"!==i&&"function"!==i||Object.isFrozen(a)||e(a)
+    })),n}class n{constructor(e){
+    void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}
+    ignoreMatch(){this.isMatchIgnored=!0}}function t(e){
+    return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")
+    }function a(e,...n){const t=Object.create(null);for(const n in e)t[n]=e[n]
+    ;return n.forEach((e=>{for(const n in e)t[n]=e[n]})),t}const i=e=>!!e.scope
+    ;class r{constructor(e,n){
+    this.buffer="",this.classPrefix=n.classPrefix,e.walk(this)}addText(e){
+    this.buffer+=t(e)}openNode(e){if(!i(e))return;const n=((e,{prefix:n})=>{
+    if(e.startsWith("language:"))return e.replace("language:","language-")
+    ;if(e.includes(".")){const t=e.split(".")
+    ;return[`${n}${t.shift()}`,...t.map(((e,n)=>`${e}${"_".repeat(n+1)}`))].join(" ")
+    }return`${n}${e}`})(e.scope,{prefix:this.classPrefix});this.span(n)}
+    closeNode(e){i(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){
+    this.buffer+=`<span class="${e}">`}}const s=(e={})=>{const n={children:[]}
+    ;return Object.assign(n,e),n};class o{constructor(){
+    this.rootNode=s(),this.stack=[this.rootNode]}get top(){
+    return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){
+    this.top.children.push(e)}openNode(e){const n=s({scope:e})
+    ;this.add(n),this.stack.push(n)}closeNode(){
+    if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){
+    for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}
+    walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,n){
+    return"string"==typeof n?e.addText(n):n.children&&(e.openNode(n),
+    n.children.forEach((n=>this._walk(e,n))),e.closeNode(n)),e}static _collapse(e){
+    "string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{
+    o._collapse(e)})))}}class l extends o{constructor(e){super(),this.options=e}
+    addText(e){""!==e&&this.add(e)}startScope(e){this.openNode(e)}endScope(){
+    this.closeNode()}__addSublanguage(e,n){const t=e.root
+    ;n&&(t.scope="language:"+n),this.add(t)}toHTML(){
+    return new r(this,this.options).value()}finalize(){
+    return this.closeAllNodes(),!0}}function c(e){
+    return e?"string"==typeof e?e:e.source:null}function d(e){return b("(?=",e,")")}
+    function g(e){return b("(?:",e,")*")}function u(e){return b("(?:",e,")?")}
+    function b(...e){return e.map((e=>c(e))).join("")}function m(...e){const n=(e=>{
+    const n=e[e.length-1]
+    ;return"object"==typeof n&&n.constructor===Object?(e.splice(e.length-1,1),n):{}
+    })(e);return"("+(n.capture?"":"?:")+e.map((e=>c(e))).join("|")+")"}
+    function p(e){return RegExp(e.toString()+"|").exec("").length-1}
+    const _=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./
+    ;function h(e,{joinWith:n}){let t=0;return e.map((e=>{t+=1;const n=t
+    ;let a=c(e),i="";for(;a.length>0;){const e=_.exec(a);if(!e){i+=a;break}
+    i+=a.substring(0,e.index),
+    a=a.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?i+="\\"+(Number(e[1])+n):(i+=e[0],
+    "("===e[0]&&t++)}return i})).map((e=>`(${e})`)).join(n)}
+    const f="[a-zA-Z]\\w*",E="[a-zA-Z_]\\w*",y="\\b\\d+(\\.\\d+)?",N="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",w="\\b(0b[01]+)",v={
+    begin:"\\\\[\\s\\S]",relevance:0},O={scope:"string",begin:"'",end:"'",
+    illegal:"\\n",contains:[v]},k={scope:"string",begin:'"',end:'"',illegal:"\\n",
+    contains:[v]},x=(e,n,t={})=>{const i=a({scope:"comment",begin:e,end:n,
+    contains:[]},t);i.contains.push({scope:"doctag",
+    begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
+    end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0})
+    ;const r=m("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/)
+    ;return i.contains.push({begin:b(/[ ]+/,"(",r,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),i
+    },M=x("//","$"),S=x("/\\*","\\*/"),A=x("#","$");var C=Object.freeze({
+    __proto__:null,APOS_STRING_MODE:O,BACKSLASH_ESCAPE:v,BINARY_NUMBER_MODE:{
+    scope:"number",begin:w,relevance:0},BINARY_NUMBER_RE:w,COMMENT:x,
+    C_BLOCK_COMMENT_MODE:S,C_LINE_COMMENT_MODE:M,C_NUMBER_MODE:{scope:"number",
+    begin:N,relevance:0},C_NUMBER_RE:N,END_SAME_AS_BEGIN:e=>Object.assign(e,{
+    "on:begin":(e,n)=>{n.data._beginMatch=e[1]},"on:end":(e,n)=>{
+    n.data._beginMatch!==e[1]&&n.ignoreMatch()}}),HASH_COMMENT_MODE:A,IDENT_RE:f,
+    MATCH_NOTHING_RE:/\b\B/,METHOD_GUARD:{begin:"\\.\\s*"+E,relevance:0},
+    NUMBER_MODE:{scope:"number",begin:y,relevance:0},NUMBER_RE:y,
+    PHRASAL_WORDS_MODE:{
+    begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
+    },QUOTE_STRING_MODE:k,REGEXP_MODE:{scope:"regexp",begin:/\/(?=[^/\n]*\/)/,
+    end:/\/[gimuy]*/,contains:[v,{begin:/\[/,end:/\]/,relevance:0,contains:[v]}]},
+    RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",
+    SHEBANG:(e={})=>{const n=/^#![ ]*\//
+    ;return e.binary&&(e.begin=b(n,/.*\b/,e.binary,/\b.*/)),a({scope:"meta",begin:n,
+    end:/$/,relevance:0,"on:begin":(e,n)=>{0!==e.index&&n.ignoreMatch()}},e)},
+    TITLE_MODE:{scope:"title",begin:f,relevance:0},UNDERSCORE_IDENT_RE:E,
+    UNDERSCORE_TITLE_MODE:{scope:"title",begin:E,relevance:0}});function T(e,n){
+    "."===e.input[e.index-1]&&n.ignoreMatch()}function R(e,n){
+    void 0!==e.className&&(e.scope=e.className,delete e.className)}function D(e,n){
+    n&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",
+    e.__beforeBegin=T,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,
+    void 0===e.relevance&&(e.relevance=0))}function I(e,n){
+    Array.isArray(e.illegal)&&(e.illegal=m(...e.illegal))}function L(e,n){
+    if(e.match){
+    if(e.begin||e.end)throw Error("begin & end are not supported with match")
+    ;e.begin=e.match,delete e.match}}function B(e,n){
+    void 0===e.relevance&&(e.relevance=1)}const $=(e,n)=>{if(!e.beforeMatch)return
+    ;if(e.starts)throw Error("beforeMatch cannot be used with starts")
+    ;const t=Object.assign({},e);Object.keys(e).forEach((n=>{delete e[n]
+    })),e.keywords=t.keywords,e.begin=b(t.beforeMatch,d(t.begin)),e.starts={
+    relevance:0,contains:[Object.assign(t,{endsParent:!0})]
+    },e.relevance=0,delete t.beforeMatch
+    },z=["of","and","for","in","not","or","if","then","parent","list","value"],F="keyword"
+    ;function U(e,n,t=F){const a=Object.create(null)
+    ;return"string"==typeof e?i(t,e.split(" ")):Array.isArray(e)?i(t,e):Object.keys(e).forEach((t=>{
+    Object.assign(a,U(e[t],n,t))})),a;function i(e,t){
+    n&&(t=t.map((e=>e.toLowerCase()))),t.forEach((n=>{const t=n.split("|")
+    ;a[t[0]]=[e,j(t[0],t[1])]}))}}function j(e,n){
+    return n?Number(n):(e=>z.includes(e.toLowerCase()))(e)?0:1}const P={},K=e=>{
+    console.error(e)},H=(e,...n)=>{console.log("WARN: "+e,...n)},q=(e,n)=>{
+    P[`${e}/${n}`]||(console.log(`Deprecated as of ${e}. ${n}`),P[`${e}/${n}`]=!0)
+    },G=Error();function Z(e,n,{key:t}){let a=0;const i=e[t],r={},s={}
+    ;for(let e=1;e<=n.length;e++)s[e+a]=i[e],r[e+a]=!0,a+=p(n[e-1])
+    ;e[t]=s,e[t]._emit=r,e[t]._multi=!0}function W(e){(e=>{
+    e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,
+    delete e.scope)})(e),"string"==typeof e.beginScope&&(e.beginScope={
+    _wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope
+    }),(e=>{if(Array.isArray(e.begin)){
+    if(e.skip||e.excludeBegin||e.returnBegin)throw K("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),
+    G
+    ;if("object"!=typeof e.beginScope||null===e.beginScope)throw K("beginScope must be object"),
+    G;Z(e,e.begin,{key:"beginScope"}),e.begin=h(e.begin,{joinWith:""})}})(e),(e=>{
+    if(Array.isArray(e.end)){
+    if(e.skip||e.excludeEnd||e.returnEnd)throw K("skip, excludeEnd, returnEnd not compatible with endScope: {}"),
+    G
+    ;if("object"!=typeof e.endScope||null===e.endScope)throw K("endScope must be object"),
+    G;Z(e,e.end,{key:"endScope"}),e.end=h(e.end,{joinWith:""})}})(e)}function Q(e){
+    function n(n,t){
+    return RegExp(c(n),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(t?"g":""))
+    }class t{constructor(){
+    this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}
+    addRule(e,n){
+    n.position=this.position++,this.matchIndexes[this.matchAt]=n,this.regexes.push([n,e]),
+    this.matchAt+=p(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null)
+    ;const e=this.regexes.map((e=>e[1]));this.matcherRe=n(h(e,{joinWith:"|"
+    }),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex
+    ;const n=this.matcherRe.exec(e);if(!n)return null
+    ;const t=n.findIndex(((e,n)=>n>0&&void 0!==e)),a=this.matchIndexes[t]
+    ;return n.splice(0,t),Object.assign(n,a)}}class i{constructor(){
+    this.rules=[],this.multiRegexes=[],
+    this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){
+    if(this.multiRegexes[e])return this.multiRegexes[e];const n=new t
+    ;return this.rules.slice(e).forEach((([e,t])=>n.addRule(e,t))),
+    n.compile(),this.multiRegexes[e]=n,n}resumingScanAtSamePosition(){
+    return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,n){
+    this.rules.push([e,n]),"begin"===n.type&&this.count++}exec(e){
+    const n=this.getMatcher(this.regexIndex);n.lastIndex=this.lastIndex
+    ;let t=n.exec(e)
+    ;if(this.resumingScanAtSamePosition())if(t&&t.index===this.lastIndex);else{
+    const n=this.getMatcher(0);n.lastIndex=this.lastIndex+1,t=n.exec(e)}
+    return t&&(this.regexIndex+=t.position+1,
+    this.regexIndex===this.count&&this.considerAll()),t}}
+    if(e.compilerExtensions||(e.compilerExtensions=[]),
+    e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.")
+    ;return e.classNameAliases=a(e.classNameAliases||{}),function t(r,s){const o=r
+    ;if(r.isCompiled)return o
+    ;[R,L,W,$].forEach((e=>e(r,s))),e.compilerExtensions.forEach((e=>e(r,s))),
+    r.__beforeBegin=null,[D,I,B].forEach((e=>e(r,s))),r.isCompiled=!0;let l=null
+    ;return"object"==typeof r.keywords&&r.keywords.$pattern&&(r.keywords=Object.assign({},r.keywords),
+    l=r.keywords.$pattern,
+    delete r.keywords.$pattern),l=l||/\w+/,r.keywords&&(r.keywords=U(r.keywords,e.case_insensitive)),
+    o.keywordPatternRe=n(l,!0),
+    s&&(r.begin||(r.begin=/\B|\b/),o.beginRe=n(o.begin),r.end||r.endsWithParent||(r.end=/\B|\b/),
+    r.end&&(o.endRe=n(o.end)),
+    o.terminatorEnd=c(o.end)||"",r.endsWithParent&&s.terminatorEnd&&(o.terminatorEnd+=(r.end?"|":"")+s.terminatorEnd)),
+    r.illegal&&(o.illegalRe=n(r.illegal)),
+    r.contains||(r.contains=[]),r.contains=[].concat(...r.contains.map((e=>(e=>(e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((n=>a(e,{
+    variants:null},n)))),e.cachedVariants?e.cachedVariants:X(e)?a(e,{
+    starts:e.starts?a(e.starts):null
+    }):Object.isFrozen(e)?a(e):e))("self"===e?r:e)))),r.contains.forEach((e=>{t(e,o)
+    })),r.starts&&t(r.starts,s),o.matcher=(e=>{const n=new i
+    ;return e.contains.forEach((e=>n.addRule(e.begin,{rule:e,type:"begin"
+    }))),e.terminatorEnd&&n.addRule(e.terminatorEnd,{type:"end"
+    }),e.illegal&&n.addRule(e.illegal,{type:"illegal"}),n})(o),o}(e)}function X(e){
+    return!!e&&(e.endsWithParent||X(e.starts))}class V extends Error{
+    constructor(e,n){super(e),this.name="HTMLInjectionError",this.html=n}}
+    const J=t,Y=a,ee=Symbol("nomatch"),ne=t=>{
+    const a=Object.create(null),i=Object.create(null),r=[];let s=!0
+    ;const o="Could not find the language '{}', did you forget to load/include a language module?",c={
+    disableAutodetect:!0,name:"Plain text",contains:[]};let p={
+    ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,
+    languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",
+    cssSelector:"pre code",languages:null,__emitter:l};function _(e){
+    return p.noHighlightRe.test(e)}function h(e,n,t){let a="",i=""
+    ;"object"==typeof n?(a=e,
+    t=n.ignoreIllegals,i=n.language):(q("10.7.0","highlight(lang, code, ...args) has been deprecated."),
+    q("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),
+    i=e,a=n),void 0===t&&(t=!0);const r={code:a,language:i};x("before:highlight",r)
+    ;const s=r.result?r.result:f(r.language,r.code,t)
+    ;return s.code=r.code,x("after:highlight",s),s}function f(e,t,i,r){
+    const l=Object.create(null);function c(){if(!x.keywords)return void S.addText(A)
+    ;let e=0;x.keywordPatternRe.lastIndex=0;let n=x.keywordPatternRe.exec(A),t=""
+    ;for(;n;){t+=A.substring(e,n.index)
+    ;const i=w.case_insensitive?n[0].toLowerCase():n[0],r=(a=i,x.keywords[a]);if(r){
+    const[e,a]=r
+    ;if(S.addText(t),t="",l[i]=(l[i]||0)+1,l[i]<=7&&(C+=a),e.startsWith("_"))t+=n[0];else{
+    const t=w.classNameAliases[e]||e;g(n[0],t)}}else t+=n[0]
+    ;e=x.keywordPatternRe.lastIndex,n=x.keywordPatternRe.exec(A)}var a
+    ;t+=A.substring(e),S.addText(t)}function d(){null!=x.subLanguage?(()=>{
+    if(""===A)return;let e=null;if("string"==typeof x.subLanguage){
+    if(!a[x.subLanguage])return void S.addText(A)
+    ;e=f(x.subLanguage,A,!0,M[x.subLanguage]),M[x.subLanguage]=e._top
+    }else e=E(A,x.subLanguage.length?x.subLanguage:null)
+    ;x.relevance>0&&(C+=e.relevance),S.__addSublanguage(e._emitter,e.language)
+    })():c(),A=""}function g(e,n){
+    ""!==e&&(S.startScope(n),S.addText(e),S.endScope())}function u(e,n){let t=1
+    ;const a=n.length-1;for(;t<=a;){if(!e._emit[t]){t++;continue}
+    const a=w.classNameAliases[e[t]]||e[t],i=n[t];a?g(i,a):(A=i,c(),A=""),t++}}
+    function b(e,n){
+    return e.scope&&"string"==typeof e.scope&&S.openNode(w.classNameAliases[e.scope]||e.scope),
+    e.beginScope&&(e.beginScope._wrap?(g(A,w.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),
+    A=""):e.beginScope._multi&&(u(e.beginScope,n),A="")),x=Object.create(e,{parent:{
+    value:x}}),x}function m(e,t,a){let i=((e,n)=>{const t=e&&e.exec(n)
+    ;return t&&0===t.index})(e.endRe,a);if(i){if(e["on:end"]){const a=new n(e)
+    ;e["on:end"](t,a),a.isMatchIgnored&&(i=!1)}if(i){
+    for(;e.endsParent&&e.parent;)e=e.parent;return e}}
+    if(e.endsWithParent)return m(e.parent,t,a)}function _(e){
+    return 0===x.matcher.regexIndex?(A+=e[0],1):(D=!0,0)}function h(e){
+    const n=e[0],a=t.substring(e.index),i=m(x,e,a);if(!i)return ee;const r=x
+    ;x.endScope&&x.endScope._wrap?(d(),
+    g(n,x.endScope._wrap)):x.endScope&&x.endScope._multi?(d(),
+    u(x.endScope,e)):r.skip?A+=n:(r.returnEnd||r.excludeEnd||(A+=n),
+    d(),r.excludeEnd&&(A=n));do{
+    x.scope&&S.closeNode(),x.skip||x.subLanguage||(C+=x.relevance),x=x.parent
+    }while(x!==i.parent);return i.starts&&b(i.starts,e),r.returnEnd?0:n.length}
+    let y={};function N(a,r){const o=r&&r[0];if(A+=a,null==o)return d(),0
+    ;if("begin"===y.type&&"end"===r.type&&y.index===r.index&&""===o){
+    if(A+=t.slice(r.index,r.index+1),!s){const n=Error(`0 width match regex (${e})`)
+    ;throw n.languageName=e,n.badRule=y.rule,n}return 1}
+    if(y=r,"begin"===r.type)return(e=>{
+    const t=e[0],a=e.rule,i=new n(a),r=[a.__beforeBegin,a["on:begin"]]
+    ;for(const n of r)if(n&&(n(e,i),i.isMatchIgnored))return _(t)
+    ;return a.skip?A+=t:(a.excludeBegin&&(A+=t),
+    d(),a.returnBegin||a.excludeBegin||(A=t)),b(a,e),a.returnBegin?0:t.length})(r)
+    ;if("illegal"===r.type&&!i){
+    const e=Error('Illegal lexeme "'+o+'" for mode "'+(x.scope||"<unnamed>")+'"')
+    ;throw e.mode=x,e}if("end"===r.type){const e=h(r);if(e!==ee)return e}
+    if("illegal"===r.type&&""===o)return 1
+    ;if(R>1e5&&R>3*r.index)throw Error("potential infinite loop, way more iterations than matches")
+    ;return A+=o,o.length}const w=v(e)
+    ;if(!w)throw K(o.replace("{}",e)),Error('Unknown language: "'+e+'"')
+    ;const O=Q(w);let k="",x=r||O;const M={},S=new p.__emitter(p);(()=>{const e=[]
+    ;for(let n=x;n!==w;n=n.parent)n.scope&&e.unshift(n.scope)
+    ;e.forEach((e=>S.openNode(e)))})();let A="",C=0,T=0,R=0,D=!1;try{
+    if(w.__emitTokens)w.__emitTokens(t,S);else{for(x.matcher.considerAll();;){
+    R++,D?D=!1:x.matcher.considerAll(),x.matcher.lastIndex=T
+    ;const e=x.matcher.exec(t);if(!e)break;const n=N(t.substring(T,e.index),e)
+    ;T=e.index+n}N(t.substring(T))}return S.finalize(),k=S.toHTML(),{language:e,
+    value:k,relevance:C,illegal:!1,_emitter:S,_top:x}}catch(n){
+    if(n.message&&n.message.includes("Illegal"))return{language:e,value:J(t),
+    illegal:!0,relevance:0,_illegalBy:{message:n.message,index:T,
+    context:t.slice(T-100,T+100),mode:n.mode,resultSoFar:k},_emitter:S};if(s)return{
+    language:e,value:J(t),illegal:!1,relevance:0,errorRaised:n,_emitter:S,_top:x}
+    ;throw n}}function E(e,n){n=n||p.languages||Object.keys(a);const t=(e=>{
+    const n={value:J(e),illegal:!1,relevance:0,_top:c,_emitter:new p.__emitter(p)}
+    ;return n._emitter.addText(e),n})(e),i=n.filter(v).filter(k).map((n=>f(n,e,!1)))
+    ;i.unshift(t);const r=i.sort(((e,n)=>{
+    if(e.relevance!==n.relevance)return n.relevance-e.relevance
+    ;if(e.language&&n.language){if(v(e.language).supersetOf===n.language)return 1
+    ;if(v(n.language).supersetOf===e.language)return-1}return 0})),[s,o]=r,l=s
+    ;return l.secondBest=o,l}function y(e){let n=null;const t=(e=>{
+    let n=e.className+" ";n+=e.parentNode?e.parentNode.className:""
+    ;const t=p.languageDetectRe.exec(n);if(t){const n=v(t[1])
+    ;return n||(H(o.replace("{}",t[1])),
+    H("Falling back to no-highlight mode for this block.",e)),n?t[1]:"no-highlight"}
+    return n.split(/\s+/).find((e=>_(e)||v(e)))})(e);if(_(t))return
+    ;if(x("before:highlightElement",{el:e,language:t
+    }),e.dataset.highlighted)return void console.log("Element previously highlighted. To highlight again, first unset `dataset.highlighted`.",e)
+    ;if(e.children.length>0&&(p.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),
+    console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),
+    console.warn("The element with unescaped HTML:"),
+    console.warn(e)),p.throwUnescapedHTML))throw new V("One of your code blocks includes unescaped HTML.",e.innerHTML)
+    ;n=e;const a=n.textContent,r=t?h(a,{language:t,ignoreIllegals:!0}):E(a)
+    ;e.innerHTML=r.value,e.dataset.highlighted="yes",((e,n,t)=>{const a=n&&i[n]||t
+    ;e.classList.add("hljs"),e.classList.add("language-"+a)
+    })(e,t,r.language),e.result={language:r.language,re:r.relevance,
+    relevance:r.relevance},r.secondBest&&(e.secondBest={
+    language:r.secondBest.language,relevance:r.secondBest.relevance
+    }),x("after:highlightElement",{el:e,result:r,text:a})}let N=!1;function w(){
+    "loading"!==document.readyState?document.querySelectorAll(p.cssSelector).forEach(y):N=!0
+    }function v(e){return e=(e||"").toLowerCase(),a[e]||a[i[e]]}
+    function O(e,{languageName:n}){"string"==typeof e&&(e=[e]),e.forEach((e=>{
+    i[e.toLowerCase()]=n}))}function k(e){const n=v(e)
+    ;return n&&!n.disableAutodetect}function x(e,n){const t=e;r.forEach((e=>{
+    e[t]&&e[t](n)}))}
+    "undefined"!=typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",(()=>{
+    N&&w()}),!1),Object.assign(t,{highlight:h,highlightAuto:E,highlightAll:w,
+    highlightElement:y,
+    highlightBlock:e=>(q("10.7.0","highlightBlock will be removed entirely in v12.0"),
+    q("10.7.0","Please use highlightElement now."),y(e)),configure:e=>{p=Y(p,e)},
+    initHighlighting:()=>{
+    w(),q("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.")},
+    initHighlightingOnLoad:()=>{
+    w(),q("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.")
+    },registerLanguage:(e,n)=>{let i=null;try{i=n(t)}catch(n){
+    if(K("Language definition for '{}' could not be registered.".replace("{}",e)),
+    !s)throw n;K(n),i=c}
+    i.name||(i.name=e),a[e]=i,i.rawDefinition=n.bind(null,t),i.aliases&&O(i.aliases,{
+    languageName:e})},unregisterLanguage:e=>{delete a[e]
+    ;for(const n of Object.keys(i))i[n]===e&&delete i[n]},
+    listLanguages:()=>Object.keys(a),getLanguage:v,registerAliases:O,
+    autoDetection:k,inherit:Y,addPlugin:e=>{(e=>{
+    e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=n=>{
+    e["before:highlightBlock"](Object.assign({block:n.el},n))
+    }),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=n=>{
+    e["after:highlightBlock"](Object.assign({block:n.el},n))})})(e),r.push(e)},
+    removePlugin:e=>{const n=r.indexOf(e);-1!==n&&r.splice(n,1)}}),t.debugMode=()=>{
+    s=!1},t.safeMode=()=>{s=!0},t.versionString="11.9.0",t.regex={concat:b,
+    lookahead:d,either:m,optional:u,anyNumberOfTimes:g}
+    ;for(const n in C)"object"==typeof C[n]&&e(C[n]);return Object.assign(t,C),t
+    },te=ne({});te.newInstance=()=>ne({});var ae=te;const ie=e=>({IMPORTANT:{
+    scope:"meta",begin:"!important"},BLOCK_COMMENT:e.C_BLOCK_COMMENT_MODE,HEXCOLOR:{
+    scope:"number",begin:/#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/},
+    FUNCTION_DISPATCH:{className:"built_in",begin:/[\w-]+(?=\()/},
+    ATTRIBUTE_SELECTOR_MODE:{scope:"selector-attr",begin:/\[/,end:/\]/,illegal:"$",
+    contains:[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},CSS_NUMBER_MODE:{
+    scope:"number",
+    begin:e.NUMBER_RE+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",
+    relevance:0},CSS_VARIABLE:{className:"attr",begin:/--[A-Za-z_][A-Za-z0-9_-]*/}
+    }),re=["a","abbr","address","article","aside","audio","b","blockquote","body","button","canvas","caption","cite","code","dd","del","details","dfn","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","html","i","iframe","img","input","ins","kbd","label","legend","li","main","mark","menu","nav","object","ol","p","q","quote","samp","section","span","strong","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","ul","var","video"],se=["any-hover","any-pointer","aspect-ratio","color","color-gamut","color-index","device-aspect-ratio","device-height","device-width","display-mode","forced-colors","grid","height","hover","inverted-colors","monochrome","orientation","overflow-block","overflow-inline","pointer","prefers-color-scheme","prefers-contrast","prefers-reduced-motion","prefers-reduced-transparency","resolution","scan","scripting","update","width","min-width","max-width","min-height","max-height"],oe=["active","any-link","blank","checked","current","default","defined","dir","disabled","drop","empty","enabled","first","first-child","first-of-type","fullscreen","future","focus","focus-visible","focus-within","has","host","host-context","hover","indeterminate","in-range","invalid","is","lang","last-child","last-of-type","left","link","local-link","not","nth-child","nth-col","nth-last-child","nth-last-col","nth-last-of-type","nth-of-type","only-child","only-of-type","optional","out-of-range","past","placeholder-shown","read-only","read-write","required","right","root","scope","target","target-within","user-invalid","valid","visited","where"],le=["after","backdrop","before","cue","cue-region","first-letter","first-line","grammar-error","marker","part","placeholder","selection","slotted","spelling-error"],ce=["align-content","align-items","align-self","all","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-repeat","background-size","block-size","border","border-block","border-block-color","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-block-style","border-block-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline","border-inline-color","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-inline-style","border-inline-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-decoration-break","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","content-visibility","counter-increment","counter-reset","cue","cue-after","cue-before","cursor","direction","display","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","flow","font","font-display","font-family","font-feature-settings","font-kerning","font-language-override","font-size","font-size-adjust","font-smoothing","font-stretch","font-style","font-synthesis","font-variant","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-variation-settings","font-weight","gap","glyph-orientation-vertical","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphens","icon","image-orientation","image-rendering","image-resolution","ime-mode","inline-size","isolation","justify-content","left","letter-spacing","line-break","line-height","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","marks","mask","mask-border","mask-border-mode","mask-border-outset","mask-border-repeat","mask-border-slice","mask-border-source","mask-border-width","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","nav-down","nav-index","nav-left","nav-right","nav-up","none","normal","object-fit","object-position","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-wrap","overflow-x","overflow-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","pause","pause-after","pause-before","perspective","perspective-origin","pointer-events","position","quotes","resize","rest","rest-after","rest-before","right","row-gap","scroll-margin","scroll-margin-block","scroll-margin-block-end","scroll-margin-block-start","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-end","scroll-margin-inline-start","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-end","scroll-padding-block-start","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-end","scroll-padding-inline-start","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-align","scroll-snap-stop","scroll-snap-type","scrollbar-color","scrollbar-gutter","scrollbar-width","shape-image-threshold","shape-margin","shape-outside","speak","speak-as","src","tab-size","table-layout","text-align","text-align-all","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-transform","text-underline-position","top","transform","transform-box","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","vertical-align","visibility","voice-balance","voice-duration","voice-family","voice-pitch","voice-range","voice-rate","voice-stress","voice-volume","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","z-index"].reverse(),de=oe.concat(le)
+    ;var ge="[0-9](_*[0-9])*",ue=`\\.(${ge})`,be="[0-9a-fA-F](_*[0-9a-fA-F])*",me={
+    className:"number",variants:[{
+    begin:`(\\b(${ge})((${ue})|\\.)?|(${ue}))[eE][+-]?(${ge})[fFdD]?\\b`},{
+    begin:`\\b(${ge})((${ue})[fFdD]?\\b|\\.([fFdD]\\b)?)`},{
+    begin:`(${ue})[fFdD]?\\b`},{begin:`\\b(${ge})[fFdD]\\b`},{
+    begin:`\\b0[xX]((${be})\\.?|(${be})?\\.(${be}))[pP][+-]?(${ge})[fFdD]?\\b`},{
+    begin:"\\b(0|[1-9](_*[0-9])*)[lL]?\\b"},{begin:`\\b0[xX](${be})[lL]?\\b`},{
+    begin:"\\b0(_*[0-7])*[lL]?\\b"},{begin:"\\b0[bB][01](_*[01])*[lL]?\\b"}],
+    relevance:0};function pe(e,n,t){return-1===t?"":e.replace(n,(a=>pe(e,n,t-1)))}
+    const _e="[A-Za-z$_][0-9A-Za-z$_]*",he=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],fe=["true","false","null","undefined","NaN","Infinity"],Ee=["Object","Function","Boolean","Symbol","Math","Date","Number","BigInt","String","RegExp","Array","Float32Array","Float64Array","Int8Array","Uint8Array","Uint8ClampedArray","Int16Array","Int32Array","Uint16Array","Uint32Array","BigInt64Array","BigUint64Array","Set","Map","WeakSet","WeakMap","ArrayBuffer","SharedArrayBuffer","Atomics","DataView","JSON","Promise","Generator","GeneratorFunction","AsyncFunction","Reflect","Proxy","Intl","WebAssembly"],ye=["Error","EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"],Ne=["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],we=["arguments","this","super","console","window","document","localStorage","sessionStorage","module","global"],ve=[].concat(Ne,Ee,ye)
+    ;function Oe(e){const n=e.regex,t=_e,a={begin:/<[A-Za-z0-9\\._:-]+/,
+    end:/\/[A-Za-z0-9\\._:-]+>|\/>/,isTrulyOpeningTag:(e,n)=>{
+    const t=e[0].length+e.index,a=e.input[t]
+    ;if("<"===a||","===a)return void n.ignoreMatch();let i
+    ;">"===a&&(((e,{after:n})=>{const t="</"+e[0].slice(1)
+    ;return-1!==e.input.indexOf(t,n)})(e,{after:t})||n.ignoreMatch())
+    ;const r=e.input.substring(t)
+    ;((i=r.match(/^\s*=/))||(i=r.match(/^\s+extends\s+/))&&0===i.index)&&n.ignoreMatch()
+    }},i={$pattern:_e,keyword:he,literal:fe,built_in:ve,"variable.language":we
+    },r="[0-9](_?[0-9])*",s=`\\.(${r})`,o="0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*",l={
+    className:"number",variants:[{
+    begin:`(\\b(${o})((${s})|\\.)?|(${s}))[eE][+-]?(${r})\\b`},{
+    begin:`\\b(${o})\\b((${s})\\b|\\.)?|(${s})\\b`},{
+    begin:"\\b(0|[1-9](_?[0-9])*)n\\b"},{
+    begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b"},{
+    begin:"\\b0[bB][0-1](_?[0-1])*n?\\b"},{begin:"\\b0[oO][0-7](_?[0-7])*n?\\b"},{
+    begin:"\\b0[0-7]+n?\\b"}],relevance:0},c={className:"subst",begin:"\\$\\{",
+    end:"\\}",keywords:i,contains:[]},d={begin:"html`",end:"",starts:{end:"`",
+    returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,c],subLanguage:"xml"}},g={
+    begin:"css`",end:"",starts:{end:"`",returnEnd:!1,
+    contains:[e.BACKSLASH_ESCAPE,c],subLanguage:"css"}},u={begin:"gql`",end:"",
+    starts:{end:"`",returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,c],
+    subLanguage:"graphql"}},b={className:"string",begin:"`",end:"`",
+    contains:[e.BACKSLASH_ESCAPE,c]},m={className:"comment",
+    variants:[e.COMMENT(/\/\*\*(?!\/)/,"\\*/",{relevance:0,contains:[{
+    begin:"(?=@[A-Za-z]+)",relevance:0,contains:[{className:"doctag",
+    begin:"@[A-Za-z]+"},{className:"type",begin:"\\{",end:"\\}",excludeEnd:!0,
+    excludeBegin:!0,relevance:0},{className:"variable",begin:t+"(?=\\s*(-)|$)",
+    endsParent:!0,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]
+    }),e.C_BLOCK_COMMENT_MODE,e.C_LINE_COMMENT_MODE]
+    },p=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,d,g,u,b,{match:/\$\d+/},l]
+    ;c.contains=p.concat({begin:/\{/,end:/\}/,keywords:i,contains:["self"].concat(p)
+    });const _=[].concat(m,c.contains),h=_.concat([{begin:/\(/,end:/\)/,keywords:i,
+    contains:["self"].concat(_)}]),f={className:"params",begin:/\(/,end:/\)/,
+    excludeBegin:!0,excludeEnd:!0,keywords:i,contains:h},E={variants:[{
+    match:[/class/,/\s+/,t,/\s+/,/extends/,/\s+/,n.concat(t,"(",n.concat(/\./,t),")*")],
+    scope:{1:"keyword",3:"title.class",5:"keyword",7:"title.class.inherited"}},{
+    match:[/class/,/\s+/,t],scope:{1:"keyword",3:"title.class"}}]},y={relevance:0,
+    match:n.either(/\bJSON/,/\b[A-Z][a-z]+([A-Z][a-z]*|\d)*/,/\b[A-Z]{2,}([A-Z][a-z]+|\d)+([A-Z][a-z]*)*/,/\b[A-Z]{2,}[a-z]+([A-Z][a-z]+|\d)*([A-Z][a-z]*)*/),
+    className:"title.class",keywords:{_:[...Ee,...ye]}},N={variants:[{
+    match:[/function/,/\s+/,t,/(?=\s*\()/]},{match:[/function/,/\s*(?=\()/]}],
+    className:{1:"keyword",3:"title.function"},label:"func.def",contains:[f],
+    illegal:/%/},w={
+    match:n.concat(/\b/,(v=[...Ne,"super","import"],n.concat("(?!",v.join("|"),")")),t,n.lookahead(/\(/)),
+    className:"title.function",relevance:0};var v;const O={
+    begin:n.concat(/\./,n.lookahead(n.concat(t,/(?![0-9A-Za-z$_(])/))),end:t,
+    excludeBegin:!0,keywords:"prototype",className:"property",relevance:0},k={
+    match:[/get|set/,/\s+/,t,/(?=\()/],className:{1:"keyword",3:"title.function"},
+    contains:[{begin:/\(\)/},f]
+    },x="(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|"+e.UNDERSCORE_IDENT_RE+")\\s*=>",M={
+    match:[/const|var|let/,/\s+/,t,/\s*/,/=\s*/,/(async\s*)?/,n.lookahead(x)],
+    keywords:"async",className:{1:"keyword",3:"title.function"},contains:[f]}
+    ;return{name:"JavaScript",aliases:["js","jsx","mjs","cjs"],keywords:i,exports:{
+    PARAMS_CONTAINS:h,CLASS_REFERENCE:y},illegal:/#(?![$_A-z])/,
+    contains:[e.SHEBANG({label:"shebang",binary:"node",relevance:5}),{
+    label:"use_strict",className:"meta",relevance:10,
+    begin:/^\s*['"]use (strict|asm)['"]/
+    },e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,d,g,u,b,m,{match:/\$\d+/},l,y,{
+    className:"attr",begin:t+n.lookahead(":"),relevance:0},M,{
+    begin:"("+e.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",
+    keywords:"return throw case",relevance:0,contains:[m,e.REGEXP_MODE,{
+    className:"function",begin:x,returnBegin:!0,end:"\\s*=>",contains:[{
+    className:"params",variants:[{begin:e.UNDERSCORE_IDENT_RE,relevance:0},{
+    className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,
+    excludeEnd:!0,keywords:i,contains:h}]}]},{begin:/,/,relevance:0},{match:/\s+/,
+    relevance:0},{variants:[{begin:"<>",end:"</>"},{
+    match:/<[A-Za-z0-9\\._:-]+\s*\/>/},{begin:a.begin,
+    "on:begin":a.isTrulyOpeningTag,end:a.end}],subLanguage:"xml",contains:[{
+    begin:a.begin,end:a.end,skip:!0,contains:["self"]}]}]},N,{
+    beginKeywords:"while if switch catch for"},{
+    begin:"\\b(?!function)"+e.UNDERSCORE_IDENT_RE+"\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",
+    returnBegin:!0,label:"func.def",contains:[f,e.inherit(e.TITLE_MODE,{begin:t,
+    className:"title.function"})]},{match:/\.\.\./,relevance:0},O,{match:"\\$"+t,
+    relevance:0},{match:[/\bconstructor(?=\s*\()/],className:{1:"title.function"},
+    contains:[f]},w,{relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,
+    className:"variable.constant"},E,k,{match:/\$[(.]/}]}}
+    const ke=e=>b(/\b/,e,/\w$/.test(e)?/\b/:/\B/),xe=["Protocol","Type"].map(ke),Me=["init","self"].map(ke),Se=["Any","Self"],Ae=["actor","any","associatedtype","async","await",/as\?/,/as!/,"as","borrowing","break","case","catch","class","consume","consuming","continue","convenience","copy","default","defer","deinit","didSet","distributed","do","dynamic","each","else","enum","extension","fallthrough",/fileprivate\(set\)/,"fileprivate","final","for","func","get","guard","if","import","indirect","infix",/init\?/,/init!/,"inout",/internal\(set\)/,"internal","in","is","isolated","nonisolated","lazy","let","macro","mutating","nonmutating",/open\(set\)/,"open","operator","optional","override","postfix","precedencegroup","prefix",/private\(set\)/,"private","protocol",/public\(set\)/,"public","repeat","required","rethrows","return","set","some","static","struct","subscript","super","switch","throws","throw",/try\?/,/try!/,"try","typealias",/unowned\(safe\)/,/unowned\(unsafe\)/,"unowned","var","weak","where","while","willSet"],Ce=["false","nil","true"],Te=["assignment","associativity","higherThan","left","lowerThan","none","right"],Re=["#colorLiteral","#column","#dsohandle","#else","#elseif","#endif","#error","#file","#fileID","#fileLiteral","#filePath","#function","#if","#imageLiteral","#keyPath","#line","#selector","#sourceLocation","#warning"],De=["abs","all","any","assert","assertionFailure","debugPrint","dump","fatalError","getVaList","isKnownUniquelyReferenced","max","min","numericCast","pointwiseMax","pointwiseMin","precondition","preconditionFailure","print","readLine","repeatElement","sequence","stride","swap","swift_unboxFromSwiftValueWithType","transcode","type","unsafeBitCast","unsafeDowncast","withExtendedLifetime","withUnsafeMutablePointer","withUnsafePointer","withVaList","withoutActuallyEscaping","zip"],Ie=m(/[/=\-+!*%<>&|^~?]/,/[\u00A1-\u00A7]/,/[\u00A9\u00AB]/,/[\u00AC\u00AE]/,/[\u00B0\u00B1]/,/[\u00B6\u00BB\u00BF\u00D7\u00F7]/,/[\u2016-\u2017]/,/[\u2020-\u2027]/,/[\u2030-\u203E]/,/[\u2041-\u2053]/,/[\u2055-\u205E]/,/[\u2190-\u23FF]/,/[\u2500-\u2775]/,/[\u2794-\u2BFF]/,/[\u2E00-\u2E7F]/,/[\u3001-\u3003]/,/[\u3008-\u3020]/,/[\u3030]/),Le=m(Ie,/[\u0300-\u036F]/,/[\u1DC0-\u1DFF]/,/[\u20D0-\u20FF]/,/[\uFE00-\uFE0F]/,/[\uFE20-\uFE2F]/),Be=b(Ie,Le,"*"),$e=m(/[a-zA-Z_]/,/[\u00A8\u00AA\u00AD\u00AF\u00B2-\u00B5\u00B7-\u00BA]/,/[\u00BC-\u00BE\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u00FF]/,/[\u0100-\u02FF\u0370-\u167F\u1681-\u180D\u180F-\u1DBF]/,/[\u1E00-\u1FFF]/,/[\u200B-\u200D\u202A-\u202E\u203F-\u2040\u2054\u2060-\u206F]/,/[\u2070-\u20CF\u2100-\u218F\u2460-\u24FF\u2776-\u2793]/,/[\u2C00-\u2DFF\u2E80-\u2FFF]/,/[\u3004-\u3007\u3021-\u302F\u3031-\u303F\u3040-\uD7FF]/,/[\uF900-\uFD3D\uFD40-\uFDCF\uFDF0-\uFE1F\uFE30-\uFE44]/,/[\uFE47-\uFEFE\uFF00-\uFFFD]/),ze=m($e,/\d/,/[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]/),Fe=b($e,ze,"*"),Ue=b(/[A-Z]/,ze,"*"),je=["attached","autoclosure",b(/convention\(/,m("swift","block","c"),/\)/),"discardableResult","dynamicCallable","dynamicMemberLookup","escaping","freestanding","frozen","GKInspectable","IBAction","IBDesignable","IBInspectable","IBOutlet","IBSegueAction","inlinable","main","nonobjc","NSApplicationMain","NSCopying","NSManaged",b(/objc\(/,Fe,/\)/),"objc","objcMembers","propertyWrapper","requires_stored_property_inits","resultBuilder","Sendable","testable","UIApplicationMain","unchecked","unknown","usableFromInline","warn_unqualified_access"],Pe=["iOS","iOSApplicationExtension","macOS","macOSApplicationExtension","macCatalyst","macCatalystApplicationExtension","watchOS","watchOSApplicationExtension","tvOS","tvOSApplicationExtension","swift"]
+    ;var Ke=Object.freeze({__proto__:null,grmr_bash:e=>{const n=e.regex,t={},a={
+    begin:/\$\{/,end:/\}/,contains:["self",{begin:/:-/,contains:[t]}]}
+    ;Object.assign(t,{className:"variable",variants:[{
+    begin:n.concat(/\$[\w\d#@][\w\d_]*/,"(?![\\w\\d])(?![$])")},a]});const i={
+    className:"subst",begin:/\$\(/,end:/\)/,contains:[e.BACKSLASH_ESCAPE]},r={
+    begin:/<<-?\s*(?=\w+)/,starts:{contains:[e.END_SAME_AS_BEGIN({begin:/(\w+)/,
+    end:/(\w+)/,className:"string"})]}},s={className:"string",begin:/"/,end:/"/,
+    contains:[e.BACKSLASH_ESCAPE,t,i]};i.contains.push(s);const o={begin:/\$?\(\(/,
+    end:/\)\)/,contains:[{begin:/\d+#[0-9a-f]+/,className:"number"},e.NUMBER_MODE,t]
+    },l=e.SHEBANG({binary:"(fish|bash|zsh|sh|csh|ksh|tcsh|dash|scsh)",relevance:10
+    }),c={className:"function",begin:/\w[\w\d_]*\s*\(\s*\)\s*\{/,returnBegin:!0,
+    contains:[e.inherit(e.TITLE_MODE,{begin:/\w[\w\d_]*/})],relevance:0};return{
+    name:"Bash",aliases:["sh"],keywords:{$pattern:/\b[a-z][a-z0-9._-]+\b/,
+    keyword:["if","then","else","elif","fi","for","while","until","in","do","done","case","esac","function","select"],
+    literal:["true","false"],
+    built_in:["break","cd","continue","eval","exec","exit","export","getopts","hash","pwd","readonly","return","shift","test","times","trap","umask","unset","alias","bind","builtin","caller","command","declare","echo","enable","help","let","local","logout","mapfile","printf","read","readarray","source","type","typeset","ulimit","unalias","set","shopt","autoload","bg","bindkey","bye","cap","chdir","clone","comparguments","compcall","compctl","compdescribe","compfiles","compgroups","compquote","comptags","comptry","compvalues","dirs","disable","disown","echotc","echoti","emulate","fc","fg","float","functions","getcap","getln","history","integer","jobs","kill","limit","log","noglob","popd","print","pushd","pushln","rehash","sched","setcap","setopt","stat","suspend","ttyctl","unfunction","unhash","unlimit","unsetopt","vared","wait","whence","where","which","zcompile","zformat","zftp","zle","zmodload","zparseopts","zprof","zpty","zregexparse","zsocket","zstyle","ztcp","chcon","chgrp","chown","chmod","cp","dd","df","dir","dircolors","ln","ls","mkdir","mkfifo","mknod","mktemp","mv","realpath","rm","rmdir","shred","sync","touch","truncate","vdir","b2sum","base32","base64","cat","cksum","comm","csplit","cut","expand","fmt","fold","head","join","md5sum","nl","numfmt","od","paste","ptx","pr","sha1sum","sha224sum","sha256sum","sha384sum","sha512sum","shuf","sort","split","sum","tac","tail","tr","tsort","unexpand","uniq","wc","arch","basename","chroot","date","dirname","du","echo","env","expr","factor","groups","hostid","id","link","logname","nice","nohup","nproc","pathchk","pinky","printenv","printf","pwd","readlink","runcon","seq","sleep","stat","stdbuf","stty","tee","test","timeout","tty","uname","unlink","uptime","users","who","whoami","yes"]
+    },contains:[l,e.SHEBANG(),c,o,e.HASH_COMMENT_MODE,r,{match:/(\/[a-z._-]+)+/},s,{
+    match:/\\"/},{className:"string",begin:/'/,end:/'/},{match:/\\'/},t]}},
+    grmr_c:e=>{const n=e.regex,t=e.COMMENT("//","$",{contains:[{begin:/\\\n/}]
+    }),a="decltype\\(auto\\)",i="[a-zA-Z_]\\w*::",r="("+a+"|"+n.optional(i)+"[a-zA-Z_]\\w*"+n.optional("<[^<>]+>")+")",s={
+    className:"type",variants:[{begin:"\\b[a-z\\d_]*_t\\b"},{
+    match:/\batomic_[a-z]{3,6}\b/}]},o={className:"string",variants:[{
+    begin:'(u8?|U|L)?"',end:'"',illegal:"\\n",contains:[e.BACKSLASH_ESCAPE]},{
+    begin:"(u8?|U|L)?'(\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4,8}|[0-7]{3}|\\S)|.)",
+    end:"'",illegal:"."},e.END_SAME_AS_BEGIN({
+    begin:/(?:u8?|U|L)?R"([^()\\ ]{0,16})\(/,end:/\)([^()\\ ]{0,16})"/})]},l={
+    className:"number",variants:[{begin:"\\b(0b[01']+)"},{
+    begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)((ll|LL|l|L)(u|U)?|(u|U)(ll|LL|l|L)?|f|F|b|B)"
+    },{
+    begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"
+    }],relevance:0},c={className:"meta",begin:/#\s*[a-z]+\b/,end:/$/,keywords:{
+    keyword:"if else elif endif define undef warning error line pragma _Pragma ifdef ifndef include"
+    },contains:[{begin:/\\\n/,relevance:0},e.inherit(o,{className:"string"}),{
+    className:"string",begin:/<.*?>/},t,e.C_BLOCK_COMMENT_MODE]},d={
+    className:"title",begin:n.optional(i)+e.IDENT_RE,relevance:0
+    },g=n.optional(i)+e.IDENT_RE+"\\s*\\(",u={
+    keyword:["asm","auto","break","case","continue","default","do","else","enum","extern","for","fortran","goto","if","inline","register","restrict","return","sizeof","struct","switch","typedef","union","volatile","while","_Alignas","_Alignof","_Atomic","_Generic","_Noreturn","_Static_assert","_Thread_local","alignas","alignof","noreturn","static_assert","thread_local","_Pragma"],
+    type:["float","double","signed","unsigned","int","short","long","char","void","_Bool","_Complex","_Imaginary","_Decimal32","_Decimal64","_Decimal128","const","static","complex","bool","imaginary"],
+    literal:"true false NULL",
+    built_in:"std string wstring cin cout cerr clog stdin stdout stderr stringstream istringstream ostringstream auto_ptr deque list queue stack vector map set pair bitset multiset multimap unordered_set unordered_map unordered_multiset unordered_multimap priority_queue make_pair array shared_ptr abort terminate abs acos asin atan2 atan calloc ceil cosh cos exit exp fabs floor fmod fprintf fputs free frexp fscanf future isalnum isalpha iscntrl isdigit isgraph islower isprint ispunct isspace isupper isxdigit tolower toupper labs ldexp log10 log malloc realloc memchr memcmp memcpy memset modf pow printf putchar puts scanf sinh sin snprintf sprintf sqrt sscanf strcat strchr strcmp strcpy strcspn strlen strncat strncmp strncpy strpbrk strrchr strspn strstr tanh tan vfprintf vprintf vsprintf endl initializer_list unique_ptr"
+    },b=[c,s,t,e.C_BLOCK_COMMENT_MODE,l,o],m={variants:[{begin:/=/,end:/;/},{
+    begin:/\(/,end:/\)/},{beginKeywords:"new throw return else",end:/;/}],
+    keywords:u,contains:b.concat([{begin:/\(/,end:/\)/,keywords:u,
+    contains:b.concat(["self"]),relevance:0}]),relevance:0},p={
+    begin:"("+r+"[\\*&\\s]+)+"+g,returnBegin:!0,end:/[{;=]/,excludeEnd:!0,
+    keywords:u,illegal:/[^\w\s\*&:<>.]/,contains:[{begin:a,keywords:u,relevance:0},{
+    begin:g,returnBegin:!0,contains:[e.inherit(d,{className:"title.function"})],
+    relevance:0},{relevance:0,match:/,/},{className:"params",begin:/\(/,end:/\)/,
+    keywords:u,relevance:0,contains:[t,e.C_BLOCK_COMMENT_MODE,o,l,s,{begin:/\(/,
+    end:/\)/,keywords:u,relevance:0,contains:["self",t,e.C_BLOCK_COMMENT_MODE,o,l,s]
+    }]},s,t,e.C_BLOCK_COMMENT_MODE,c]};return{name:"C",aliases:["h"],keywords:u,
+    disableAutodetect:!0,illegal:"</",contains:[].concat(m,p,b,[c,{
+    begin:e.IDENT_RE+"::",keywords:u},{className:"class",
+    beginKeywords:"enum class struct union",end:/[{;:<>=]/,contains:[{
+    beginKeywords:"final class struct"},e.TITLE_MODE]}]),exports:{preprocessor:c,
+    strings:o,keywords:u}}},grmr_cpp:e=>{const n=e.regex,t=e.COMMENT("//","$",{
+    contains:[{begin:/\\\n/}]
+    }),a="decltype\\(auto\\)",i="[a-zA-Z_]\\w*::",r="(?!struct)("+a+"|"+n.optional(i)+"[a-zA-Z_]\\w*"+n.optional("<[^<>]+>")+")",s={
+    className:"type",begin:"\\b[a-z\\d_]*_t\\b"},o={className:"string",variants:[{
+    begin:'(u8?|U|L)?"',end:'"',illegal:"\\n",contains:[e.BACKSLASH_ESCAPE]},{
+    begin:"(u8?|U|L)?'(\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4,8}|[0-7]{3}|\\S)|.)",
+    end:"'",illegal:"."},e.END_SAME_AS_BEGIN({
+    begin:/(?:u8?|U|L)?R"([^()\\ ]{0,16})\(/,end:/\)([^()\\ ]{0,16})"/})]},l={
+    className:"number",variants:[{begin:"\\b(0b[01']+)"},{
+    begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)((ll|LL|l|L)(u|U)?|(u|U)(ll|LL|l|L)?|f|F|b|B)"
+    },{
+    begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"
+    }],relevance:0},c={className:"meta",begin:/#\s*[a-z]+\b/,end:/$/,keywords:{
+    keyword:"if else elif endif define undef warning error line pragma _Pragma ifdef ifndef include"
+    },contains:[{begin:/\\\n/,relevance:0},e.inherit(o,{className:"string"}),{
+    className:"string",begin:/<.*?>/},t,e.C_BLOCK_COMMENT_MODE]},d={
+    className:"title",begin:n.optional(i)+e.IDENT_RE,relevance:0
+    },g=n.optional(i)+e.IDENT_RE+"\\s*\\(",u={
+    type:["bool","char","char16_t","char32_t","char8_t","double","float","int","long","short","void","wchar_t","unsigned","signed","const","static"],
+    keyword:["alignas","alignof","and","and_eq","asm","atomic_cancel","atomic_commit","atomic_noexcept","auto","bitand","bitor","break","case","catch","class","co_await","co_return","co_yield","compl","concept","const_cast|10","consteval","constexpr","constinit","continue","decltype","default","delete","do","dynamic_cast|10","else","enum","explicit","export","extern","false","final","for","friend","goto","if","import","inline","module","mutable","namespace","new","noexcept","not","not_eq","nullptr","operator","or","or_eq","override","private","protected","public","reflexpr","register","reinterpret_cast|10","requires","return","sizeof","static_assert","static_cast|10","struct","switch","synchronized","template","this","thread_local","throw","transaction_safe","transaction_safe_dynamic","true","try","typedef","typeid","typename","union","using","virtual","volatile","while","xor","xor_eq"],
+    literal:["NULL","false","nullopt","nullptr","true"],built_in:["_Pragma"],
+    _type_hints:["any","auto_ptr","barrier","binary_semaphore","bitset","complex","condition_variable","condition_variable_any","counting_semaphore","deque","false_type","future","imaginary","initializer_list","istringstream","jthread","latch","lock_guard","multimap","multiset","mutex","optional","ostringstream","packaged_task","pair","promise","priority_queue","queue","recursive_mutex","recursive_timed_mutex","scoped_lock","set","shared_future","shared_lock","shared_mutex","shared_timed_mutex","shared_ptr","stack","string_view","stringstream","timed_mutex","thread","true_type","tuple","unique_lock","unique_ptr","unordered_map","unordered_multimap","unordered_multiset","unordered_set","variant","vector","weak_ptr","wstring","wstring_view"]
+    },b={className:"function.dispatch",relevance:0,keywords:{
+    _hint:["abort","abs","acos","apply","as_const","asin","atan","atan2","calloc","ceil","cerr","cin","clog","cos","cosh","cout","declval","endl","exchange","exit","exp","fabs","floor","fmod","forward","fprintf","fputs","free","frexp","fscanf","future","invoke","isalnum","isalpha","iscntrl","isdigit","isgraph","islower","isprint","ispunct","isspace","isupper","isxdigit","labs","launder","ldexp","log","log10","make_pair","make_shared","make_shared_for_overwrite","make_tuple","make_unique","malloc","memchr","memcmp","memcpy","memset","modf","move","pow","printf","putchar","puts","realloc","scanf","sin","sinh","snprintf","sprintf","sqrt","sscanf","std","stderr","stdin","stdout","strcat","strchr","strcmp","strcpy","strcspn","strlen","strncat","strncmp","strncpy","strpbrk","strrchr","strspn","strstr","swap","tan","tanh","terminate","to_underlying","tolower","toupper","vfprintf","visit","vprintf","vsprintf"]
+    },
+    begin:n.concat(/\b/,/(?!decltype)/,/(?!if)/,/(?!for)/,/(?!switch)/,/(?!while)/,e.IDENT_RE,n.lookahead(/(<[^<>]+>|)\s*\(/))
+    },m=[b,c,s,t,e.C_BLOCK_COMMENT_MODE,l,o],p={variants:[{begin:/=/,end:/;/},{
+    begin:/\(/,end:/\)/},{beginKeywords:"new throw return else",end:/;/}],
+    keywords:u,contains:m.concat([{begin:/\(/,end:/\)/,keywords:u,
+    contains:m.concat(["self"]),relevance:0}]),relevance:0},_={className:"function",
+    begin:"("+r+"[\\*&\\s]+)+"+g,returnBegin:!0,end:/[{;=]/,excludeEnd:!0,
+    keywords:u,illegal:/[^\w\s\*&:<>.]/,contains:[{begin:a,keywords:u,relevance:0},{
+    begin:g,returnBegin:!0,contains:[d],relevance:0},{begin:/::/,relevance:0},{
+    begin:/:/,endsWithParent:!0,contains:[o,l]},{relevance:0,match:/,/},{
+    className:"params",begin:/\(/,end:/\)/,keywords:u,relevance:0,
+    contains:[t,e.C_BLOCK_COMMENT_MODE,o,l,s,{begin:/\(/,end:/\)/,keywords:u,
+    relevance:0,contains:["self",t,e.C_BLOCK_COMMENT_MODE,o,l,s]}]
+    },s,t,e.C_BLOCK_COMMENT_MODE,c]};return{name:"C++",
+    aliases:["cc","c++","h++","hpp","hh","hxx","cxx"],keywords:u,illegal:"</",
+    classNameAliases:{"function.dispatch":"built_in"},
+    contains:[].concat(p,_,b,m,[c,{
+    begin:"\\b(deque|list|queue|priority_queue|pair|stack|vector|map|set|bitset|multiset|multimap|unordered_map|unordered_set|unordered_multiset|unordered_multimap|array|tuple|optional|variant|function)\\s*<(?!<)",
+    end:">",keywords:u,contains:["self",s]},{begin:e.IDENT_RE+"::",keywords:u},{
+    match:[/\b(?:enum(?:\s+(?:class|struct))?|class|struct|union)/,/\s+/,/\w+/],
+    className:{1:"keyword",3:"title.class"}}])}},grmr_csharp:e=>{const n={
+    keyword:["abstract","as","base","break","case","catch","class","const","continue","do","else","event","explicit","extern","finally","fixed","for","foreach","goto","if","implicit","in","interface","internal","is","lock","namespace","new","operator","out","override","params","private","protected","public","readonly","record","ref","return","scoped","sealed","sizeof","stackalloc","static","struct","switch","this","throw","try","typeof","unchecked","unsafe","using","virtual","void","volatile","while"].concat(["add","alias","and","ascending","async","await","by","descending","equals","from","get","global","group","init","into","join","let","nameof","not","notnull","on","or","orderby","partial","remove","select","set","unmanaged","value|0","var","when","where","with","yield"]),
+    built_in:["bool","byte","char","decimal","delegate","double","dynamic","enum","float","int","long","nint","nuint","object","sbyte","short","string","ulong","uint","ushort"],
+    literal:["default","false","null","true"]},t=e.inherit(e.TITLE_MODE,{
+    begin:"[a-zA-Z](\\.?\\w)*"}),a={className:"number",variants:[{
+    begin:"\\b(0b[01']+)"},{
+    begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)(u|U|l|L|ul|UL|f|F|b|B)"},{
+    begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"
+    }],relevance:0},i={className:"string",begin:'@"',end:'"',contains:[{begin:'""'}]
+    },r=e.inherit(i,{illegal:/\n/}),s={className:"subst",begin:/\{/,end:/\}/,
+    keywords:n},o=e.inherit(s,{illegal:/\n/}),l={className:"string",begin:/\$"/,
+    end:'"',illegal:/\n/,contains:[{begin:/\{\{/},{begin:/\}\}/
+    },e.BACKSLASH_ESCAPE,o]},c={className:"string",begin:/\$@"/,end:'"',contains:[{
+    begin:/\{\{/},{begin:/\}\}/},{begin:'""'},s]},d=e.inherit(c,{illegal:/\n/,
+    contains:[{begin:/\{\{/},{begin:/\}\}/},{begin:'""'},o]})
+    ;s.contains=[c,l,i,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,a,e.C_BLOCK_COMMENT_MODE],
+    o.contains=[d,l,r,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,a,e.inherit(e.C_BLOCK_COMMENT_MODE,{
+    illegal:/\n/})];const g={variants:[c,l,i,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]
+    },u={begin:"<",end:">",contains:[{beginKeywords:"in out"},t]
+    },b=e.IDENT_RE+"(<"+e.IDENT_RE+"(\\s*,\\s*"+e.IDENT_RE+")*>)?(\\[\\])?",m={
+    begin:"@"+e.IDENT_RE,relevance:0};return{name:"C#",aliases:["cs","c#"],
+    keywords:n,illegal:/::/,contains:[e.COMMENT("///","$",{returnBegin:!0,
+    contains:[{className:"doctag",variants:[{begin:"///",relevance:0},{
+    begin:"\x3c!--|--\x3e"},{begin:"</?",end:">"}]}]
+    }),e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{className:"meta",begin:"#",
+    end:"$",keywords:{
+    keyword:"if else elif endif define undef warning error line region endregion pragma checksum"
+    }},g,a,{beginKeywords:"class interface",relevance:0,end:/[{;=]/,
+    illegal:/[^\s:,]/,contains:[{beginKeywords:"where class"
+    },t,u,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{beginKeywords:"namespace",
+    relevance:0,end:/[{;=]/,illegal:/[^\s:]/,
+    contains:[t,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{
+    beginKeywords:"record",relevance:0,end:/[{;=]/,illegal:/[^\s:]/,
+    contains:[t,u,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{className:"meta",
+    begin:"^\\s*\\[(?=[\\w])",excludeBegin:!0,end:"\\]",excludeEnd:!0,contains:[{
+    className:"string",begin:/"/,end:/"/}]},{
+    beginKeywords:"new return throw await else",relevance:0},{className:"function",
+    begin:"("+b+"\\s+)+"+e.IDENT_RE+"\\s*(<[^=]+>\\s*)?\\(",returnBegin:!0,
+    end:/\s*[{;=]/,excludeEnd:!0,keywords:n,contains:[{
+    beginKeywords:"public private protected static internal protected abstract async extern override unsafe virtual new sealed partial",
+    relevance:0},{begin:e.IDENT_RE+"\\s*(<[^=]+>\\s*)?\\(",returnBegin:!0,
+    contains:[e.TITLE_MODE,u],relevance:0},{match:/\(\)/},{className:"params",
+    begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:n,relevance:0,
+    contains:[g,a,e.C_BLOCK_COMMENT_MODE]
+    },e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},m]}},grmr_css:e=>{
+    const n=e.regex,t=ie(e),a=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE];return{
+    name:"CSS",case_insensitive:!0,illegal:/[=|'\$]/,keywords:{
+    keyframePosition:"from to"},classNameAliases:{keyframePosition:"selector-tag"},
+    contains:[t.BLOCK_COMMENT,{begin:/-(webkit|moz|ms|o)-(?=[a-z])/
+    },t.CSS_NUMBER_MODE,{className:"selector-id",begin:/#[A-Za-z0-9_-]+/,relevance:0
+    },{className:"selector-class",begin:"\\.[a-zA-Z-][a-zA-Z0-9_-]*",relevance:0
+    },t.ATTRIBUTE_SELECTOR_MODE,{className:"selector-pseudo",variants:[{
+    begin:":("+oe.join("|")+")"},{begin:":(:)?("+le.join("|")+")"}]
+    },t.CSS_VARIABLE,{className:"attribute",begin:"\\b("+ce.join("|")+")\\b"},{
+    begin:/:/,end:/[;}{]/,
+    contains:[t.BLOCK_COMMENT,t.HEXCOLOR,t.IMPORTANT,t.CSS_NUMBER_MODE,...a,{
+    begin:/(url|data-uri)\(/,end:/\)/,relevance:0,keywords:{built_in:"url data-uri"
+    },contains:[...a,{className:"string",begin:/[^)]/,endsWithParent:!0,
+    excludeEnd:!0}]},t.FUNCTION_DISPATCH]},{begin:n.lookahead(/@/),end:"[{;]",
+    relevance:0,illegal:/:/,contains:[{className:"keyword",begin:/@-?\w[\w]*(-\w+)*/
+    },{begin:/\s/,endsWithParent:!0,excludeEnd:!0,relevance:0,keywords:{
+    $pattern:/[a-z-]+/,keyword:"and or not only",attribute:se.join(" ")},contains:[{
+    begin:/[a-z-]+(?=:)/,className:"attribute"},...a,t.CSS_NUMBER_MODE]}]},{
+    className:"selector-tag",begin:"\\b("+re.join("|")+")\\b"}]}},grmr_diff:e=>{
+    const n=e.regex;return{name:"Diff",aliases:["patch"],contains:[{
+    className:"meta",relevance:10,
+    match:n.either(/^@@ +-\d+,\d+ +\+\d+,\d+ +@@/,/^\*\*\* +\d+,\d+ +\*\*\*\*$/,/^--- +\d+,\d+ +----$/)
+    },{className:"comment",variants:[{
+    begin:n.either(/Index: /,/^index/,/={3,}/,/^-{3}/,/^\*{3} /,/^\+{3}/,/^diff --git/),
+    end:/$/},{match:/^\*{15}$/}]},{className:"addition",begin:/^\+/,end:/$/},{
+    className:"deletion",begin:/^-/,end:/$/},{className:"addition",begin:/^!/,
+    end:/$/}]}},grmr_go:e=>{const n={
+    keyword:["break","case","chan","const","continue","default","defer","else","fallthrough","for","func","go","goto","if","import","interface","map","package","range","return","select","struct","switch","type","var"],
+    type:["bool","byte","complex64","complex128","error","float32","float64","int8","int16","int32","int64","string","uint8","uint16","uint32","uint64","int","uint","uintptr","rune"],
+    literal:["true","false","iota","nil"],
+    built_in:["append","cap","close","complex","copy","imag","len","make","new","panic","print","println","real","recover","delete"]
+    };return{name:"Go",aliases:["golang"],keywords:n,illegal:"</",
+    contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{className:"string",
+    variants:[e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,{begin:"`",end:"`"}]},{
+    className:"number",variants:[{begin:e.C_NUMBER_RE+"[i]",relevance:1
+    },e.C_NUMBER_MODE]},{begin:/:=/},{className:"function",beginKeywords:"func",
+    end:"\\s*(\\{|$)",excludeEnd:!0,contains:[e.TITLE_MODE,{className:"params",
+    begin:/\(/,end:/\)/,endsParent:!0,keywords:n,illegal:/["']/}]}]}},
+    grmr_graphql:e=>{const n=e.regex;return{name:"GraphQL",aliases:["gql"],
+    case_insensitive:!0,disableAutodetect:!1,keywords:{
+    keyword:["query","mutation","subscription","type","input","schema","directive","interface","union","scalar","fragment","enum","on"],
+    literal:["true","false","null"]},
+    contains:[e.HASH_COMMENT_MODE,e.QUOTE_STRING_MODE,e.NUMBER_MODE,{
+    scope:"punctuation",match:/[.]{3}/,relevance:0},{scope:"punctuation",
+    begin:/[\!\(\)\:\=\[\]\{\|\}]{1}/,relevance:0},{scope:"variable",begin:/\$/,
+    end:/\W/,excludeEnd:!0,relevance:0},{scope:"meta",match:/@\w+/,excludeEnd:!0},{
+    scope:"symbol",begin:n.concat(/[_A-Za-z][_0-9A-Za-z]*/,n.lookahead(/\s*:/)),
+    relevance:0}],illegal:[/[;<']/,/BEGIN/]}},grmr_ini:e=>{const n=e.regex,t={
+    className:"number",relevance:0,variants:[{begin:/([+-]+)?[\d]+_[\d_]+/},{
+    begin:e.NUMBER_RE}]},a=e.COMMENT();a.variants=[{begin:/;/,end:/$/},{begin:/#/,
+    end:/$/}];const i={className:"variable",variants:[{begin:/\$[\w\d"][\w\d_]*/},{
+    begin:/\$\{(.*?)\}/}]},r={className:"literal",
+    begin:/\bon|off|true|false|yes|no\b/},s={className:"string",
+    contains:[e.BACKSLASH_ESCAPE],variants:[{begin:"'''",end:"'''",relevance:10},{
+    begin:'"""',end:'"""',relevance:10},{begin:'"',end:'"'},{begin:"'",end:"'"}]
+    },o={begin:/\[/,end:/\]/,contains:[a,r,i,s,t,"self"],relevance:0
+    },l=n.either(/[A-Za-z0-9_-]+/,/"(\\"|[^"])*"/,/'[^']*'/);return{
+    name:"TOML, also INI",aliases:["toml"],case_insensitive:!0,illegal:/\S/,
+    contains:[a,{className:"section",begin:/\[+/,end:/\]+/},{
+    begin:n.concat(l,"(\\s*\\.\\s*",l,")*",n.lookahead(/\s*=\s*[^#\s]/)),
+    className:"attr",starts:{end:/$/,contains:[a,o,r,i,s,t]}}]}},grmr_java:e=>{
+    const n=e.regex,t="[\xc0-\u02b8a-zA-Z_$][\xc0-\u02b8a-zA-Z_$0-9]*",a=t+pe("(?:<"+t+"~~~(?:\\s*,\\s*"+t+"~~~)*>)?",/~~~/g,2),i={
+    keyword:["synchronized","abstract","private","var","static","if","const ","for","while","strictfp","finally","protected","import","native","final","void","enum","else","break","transient","catch","instanceof","volatile","case","assert","package","default","public","try","switch","continue","throws","protected","public","private","module","requires","exports","do","sealed","yield","permits"],
+    literal:["false","true","null"],
+    type:["char","boolean","long","float","int","byte","short","double"],
+    built_in:["super","this"]},r={className:"meta",begin:"@"+t,contains:[{
+    begin:/\(/,end:/\)/,contains:["self"]}]},s={className:"params",begin:/\(/,
+    end:/\)/,keywords:i,relevance:0,contains:[e.C_BLOCK_COMMENT_MODE],endsParent:!0}
+    ;return{name:"Java",aliases:["jsp"],keywords:i,illegal:/<\/|#/,
+    contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{begin:/\w+@/,
+    relevance:0},{className:"doctag",begin:"@[A-Za-z]+"}]}),{
+    begin:/import java\.[a-z]+\./,keywords:"import",relevance:2
+    },e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{begin:/"""/,end:/"""/,
+    className:"string",contains:[e.BACKSLASH_ESCAPE]
+    },e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,{
+    match:[/\b(?:class|interface|enum|extends|implements|new)/,/\s+/,t],className:{
+    1:"keyword",3:"title.class"}},{match:/non-sealed/,scope:"keyword"},{
+    begin:[n.concat(/(?!else)/,t),/\s+/,t,/\s+/,/=(?!=)/],className:{1:"type",
+    3:"variable",5:"operator"}},{begin:[/record/,/\s+/,t],className:{1:"keyword",
+    3:"title.class"},contains:[s,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{
+    beginKeywords:"new throw return else",relevance:0},{
+    begin:["(?:"+a+"\\s+)",e.UNDERSCORE_IDENT_RE,/\s*(?=\()/],className:{
+    2:"title.function"},keywords:i,contains:[{className:"params",begin:/\(/,
+    end:/\)/,keywords:i,relevance:0,
+    contains:[r,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,me,e.C_BLOCK_COMMENT_MODE]
+    },e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},me,r]}},grmr_javascript:Oe,
+    grmr_json:e=>{const n=["true","false","null"],t={scope:"literal",
+    beginKeywords:n.join(" ")};return{name:"JSON",keywords:{literal:n},contains:[{
+    className:"attr",begin:/"(\\.|[^\\"\r\n])*"(?=\s*:)/,relevance:1.01},{
+    match:/[{}[\],:]/,className:"punctuation",relevance:0
+    },e.QUOTE_STRING_MODE,t,e.C_NUMBER_MODE,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],
+    illegal:"\\S"}},grmr_kotlin:e=>{const n={
+    keyword:"abstract as val var vararg get set class object open private protected public noinline crossinline dynamic final enum if else do while for when throw try catch finally import package is in fun override companion reified inline lateinit init interface annotation data sealed internal infix operator out by constructor super tailrec where const inner suspend typealias external expect actual",
+    built_in:"Byte Short Char Int Long Boolean Float Double Void Unit Nothing",
+    literal:"true false null"},t={className:"symbol",begin:e.UNDERSCORE_IDENT_RE+"@"
+    },a={className:"subst",begin:/\$\{/,end:/\}/,contains:[e.C_NUMBER_MODE]},i={
+    className:"variable",begin:"\\$"+e.UNDERSCORE_IDENT_RE},r={className:"string",
+    variants:[{begin:'"""',end:'"""(?=[^"])',contains:[i,a]},{begin:"'",end:"'",
+    illegal:/\n/,contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"',illegal:/\n/,
+    contains:[e.BACKSLASH_ESCAPE,i,a]}]};a.contains.push(r);const s={
+    className:"meta",
+    begin:"@(?:file|property|field|get|set|receiver|param|setparam|delegate)\\s*:(?:\\s*"+e.UNDERSCORE_IDENT_RE+")?"
+    },o={className:"meta",begin:"@"+e.UNDERSCORE_IDENT_RE,contains:[{begin:/\(/,
+    end:/\)/,contains:[e.inherit(r,{className:"string"}),"self"]}]
+    },l=me,c=e.COMMENT("/\\*","\\*/",{contains:[e.C_BLOCK_COMMENT_MODE]}),d={
+    variants:[{className:"type",begin:e.UNDERSCORE_IDENT_RE},{begin:/\(/,end:/\)/,
+    contains:[]}]},g=d;return g.variants[1].contains=[d],d.variants[1].contains=[g],
+    {name:"Kotlin",aliases:["kt","kts"],keywords:n,
+    contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{className:"doctag",
+    begin:"@[A-Za-z]+"}]}),e.C_LINE_COMMENT_MODE,c,{className:"keyword",
+    begin:/\b(break|continue|return|this)\b/,starts:{contains:[{className:"symbol",
+    begin:/@\w+/}]}},t,s,o,{className:"function",beginKeywords:"fun",end:"[(]|$",
+    returnBegin:!0,excludeEnd:!0,keywords:n,relevance:5,contains:[{
+    begin:e.UNDERSCORE_IDENT_RE+"\\s*\\(",returnBegin:!0,relevance:0,
+    contains:[e.UNDERSCORE_TITLE_MODE]},{className:"type",begin:/</,end:/>/,
+    keywords:"reified",relevance:0},{className:"params",begin:/\(/,end:/\)/,
+    endsParent:!0,keywords:n,relevance:0,contains:[{begin:/:/,end:/[=,\/]/,
+    endsWithParent:!0,contains:[d,e.C_LINE_COMMENT_MODE,c],relevance:0
+    },e.C_LINE_COMMENT_MODE,c,s,o,r,e.C_NUMBER_MODE]},c]},{
+    begin:[/class|interface|trait/,/\s+/,e.UNDERSCORE_IDENT_RE],beginScope:{
+    3:"title.class"},keywords:"class interface trait",end:/[:\{(]|$/,excludeEnd:!0,
+    illegal:"extends implements",contains:[{
+    beginKeywords:"public protected internal private constructor"
+    },e.UNDERSCORE_TITLE_MODE,{className:"type",begin:/</,end:/>/,excludeBegin:!0,
+    excludeEnd:!0,relevance:0},{className:"type",begin:/[,:]\s*/,end:/[<\(,){\s]|$/,
+    excludeBegin:!0,returnEnd:!0},s,o]},r,{className:"meta",begin:"^#!/usr/bin/env",
+    end:"$",illegal:"\n"},l]}},grmr_less:e=>{
+    const n=ie(e),t=de,a="[\\w-]+",i="("+a+"|@\\{"+a+"\\})",r=[],s=[],o=e=>({
+    className:"string",begin:"~?"+e+".*?"+e}),l=(e,n,t)=>({className:e,begin:n,
+    relevance:t}),c={$pattern:/[a-z-]+/,keyword:"and or not only",
+    attribute:se.join(" ")},d={begin:"\\(",end:"\\)",contains:s,keywords:c,
+    relevance:0}
+    ;s.push(e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,o("'"),o('"'),n.CSS_NUMBER_MODE,{
+    begin:"(url|data-uri)\\(",starts:{className:"string",end:"[\\)\\n]",
+    excludeEnd:!0}
+    },n.HEXCOLOR,d,l("variable","@@?"+a,10),l("variable","@\\{"+a+"\\}"),l("built_in","~?`[^`]*?`"),{
+    className:"attribute",begin:a+"\\s*:",end:":",returnBegin:!0,excludeEnd:!0
+    },n.IMPORTANT,{beginKeywords:"and not"},n.FUNCTION_DISPATCH);const g=s.concat({
+    begin:/\{/,end:/\}/,contains:r}),u={beginKeywords:"when",endsWithParent:!0,
+    contains:[{beginKeywords:"and not"}].concat(s)},b={begin:i+"\\s*:",
+    returnBegin:!0,end:/[;}]/,relevance:0,contains:[{begin:/-(webkit|moz|ms|o)-/
+    },n.CSS_VARIABLE,{className:"attribute",begin:"\\b("+ce.join("|")+")\\b",
+    end:/(?=:)/,starts:{endsWithParent:!0,illegal:"[<=$]",relevance:0,contains:s}}]
+    },m={className:"keyword",
+    begin:"@(import|media|charset|font-face|(-[a-z]+-)?keyframes|supports|document|namespace|page|viewport|host)\\b",
+    starts:{end:"[;{}]",keywords:c,returnEnd:!0,contains:s,relevance:0}},p={
+    className:"variable",variants:[{begin:"@"+a+"\\s*:",relevance:15},{begin:"@"+a
+    }],starts:{end:"[;}]",returnEnd:!0,contains:g}},_={variants:[{
+    begin:"[\\.#:&\\[>]",end:"[;{}]"},{begin:i,end:/\{/}],returnBegin:!0,
+    returnEnd:!0,illegal:"[<='$\"]",relevance:0,
+    contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,u,l("keyword","all\\b"),l("variable","@\\{"+a+"\\}"),{
+    begin:"\\b("+re.join("|")+")\\b",className:"selector-tag"
+    },n.CSS_NUMBER_MODE,l("selector-tag",i,0),l("selector-id","#"+i),l("selector-class","\\."+i,0),l("selector-tag","&",0),n.ATTRIBUTE_SELECTOR_MODE,{
+    className:"selector-pseudo",begin:":("+oe.join("|")+")"},{
+    className:"selector-pseudo",begin:":(:)?("+le.join("|")+")"},{begin:/\(/,
+    end:/\)/,relevance:0,contains:g},{begin:"!important"},n.FUNCTION_DISPATCH]},h={
+    begin:a+":(:)?"+`(${t.join("|")})`,returnBegin:!0,contains:[_]}
+    ;return r.push(e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,m,p,h,b,_,u,n.FUNCTION_DISPATCH),
+    {name:"Less",case_insensitive:!0,illegal:"[=>'/<($\"]",contains:r}},
+    grmr_lua:e=>{const n="\\[=*\\[",t="\\]=*\\]",a={begin:n,end:t,contains:["self"]
+    },i=[e.COMMENT("--(?!"+n+")","$"),e.COMMENT("--"+n,t,{contains:[a],relevance:10
+    })];return{name:"Lua",keywords:{$pattern:e.UNDERSCORE_IDENT_RE,
+    literal:"true false nil",
+    keyword:"and break do else elseif end for goto if in local not or repeat return then until while",
+    built_in:"_G _ENV _VERSION __index __newindex __mode __call __metatable __tostring __len __gc __add __sub __mul __div __mod __pow __concat __unm __eq __lt __le assert collectgarbage dofile error getfenv getmetatable ipairs load loadfile loadstring module next pairs pcall print rawequal rawget rawset require select setfenv setmetatable tonumber tostring type unpack xpcall arg self coroutine resume yield status wrap create running debug getupvalue debug sethook getmetatable gethook setmetatable setlocal traceback setfenv getinfo setupvalue getlocal getregistry getfenv io lines write close flush open output type read stderr stdin input stdout popen tmpfile math log max acos huge ldexp pi cos tanh pow deg tan cosh sinh random randomseed frexp ceil floor rad abs sqrt modf asin min mod fmod log10 atan2 exp sin atan os exit setlocale date getenv difftime remove time clock tmpname rename execute package preload loadlib loaded loaders cpath config path seeall string sub upper len gfind rep find match char dump gmatch reverse byte format gsub lower table setn insert getn foreachi maxn foreach concat sort remove"
+    },contains:i.concat([{className:"function",beginKeywords:"function",end:"\\)",
+    contains:[e.inherit(e.TITLE_MODE,{
+    begin:"([_a-zA-Z]\\w*\\.)*([_a-zA-Z]\\w*:)?[_a-zA-Z]\\w*"}),{className:"params",
+    begin:"\\(",endsWithParent:!0,contains:i}].concat(i)
+    },e.C_NUMBER_MODE,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,{className:"string",
+    begin:n,end:t,contains:[a],relevance:5}])}},grmr_makefile:e=>{const n={
+    className:"variable",variants:[{begin:"\\$\\("+e.UNDERSCORE_IDENT_RE+"\\)",
+    contains:[e.BACKSLASH_ESCAPE]},{begin:/\$[@%<?\^\+\*]/}]},t={className:"string",
+    begin:/"/,end:/"/,contains:[e.BACKSLASH_ESCAPE,n]},a={className:"variable",
+    begin:/\$\([\w-]+\s/,end:/\)/,keywords:{
+    built_in:"subst patsubst strip findstring filter filter-out sort word wordlist firstword lastword dir notdir suffix basename addsuffix addprefix join wildcard realpath abspath error warning shell origin flavor foreach if or and call eval file value"
+    },contains:[n]},i={begin:"^"+e.UNDERSCORE_IDENT_RE+"\\s*(?=[:+?]?=)"},r={
+    className:"section",begin:/^[^\s]+:/,end:/$/,contains:[n]};return{
+    name:"Makefile",aliases:["mk","mak","make"],keywords:{$pattern:/[\w-]+/,
+    keyword:"define endef undefine ifdef ifndef ifeq ifneq else endif include -include sinclude override export unexport private vpath"
+    },contains:[e.HASH_COMMENT_MODE,n,t,a,i,{className:"meta",begin:/^\.PHONY:/,
+    end:/$/,keywords:{$pattern:/[\.\w]+/,keyword:".PHONY"}},r]}},grmr_markdown:e=>{
+    const n={begin:/<\/?[A-Za-z_]/,end:">",subLanguage:"xml",relevance:0},t={
+    variants:[{begin:/\[.+?\]\[.*?\]/,relevance:0},{
+    begin:/\[.+?\]\(((data|javascript|mailto):|(?:http|ftp)s?:\/\/).*?\)/,
+    relevance:2},{
+    begin:e.regex.concat(/\[.+?\]\(/,/[A-Za-z][A-Za-z0-9+.-]*/,/:\/\/.*?\)/),
+    relevance:2},{begin:/\[.+?\]\([./?&#].*?\)/,relevance:1},{
+    begin:/\[.*?\]\(.*?\)/,relevance:0}],returnBegin:!0,contains:[{match:/\[(?=\])/
+    },{className:"string",relevance:0,begin:"\\[",end:"\\]",excludeBegin:!0,
+    returnEnd:!0},{className:"link",relevance:0,begin:"\\]\\(",end:"\\)",
+    excludeBegin:!0,excludeEnd:!0},{className:"symbol",relevance:0,begin:"\\]\\[",
+    end:"\\]",excludeBegin:!0,excludeEnd:!0}]},a={className:"strong",contains:[],
+    variants:[{begin:/_{2}(?!\s)/,end:/_{2}/},{begin:/\*{2}(?!\s)/,end:/\*{2}/}]
+    },i={className:"emphasis",contains:[],variants:[{begin:/\*(?![*\s])/,end:/\*/},{
+    begin:/_(?![_\s])/,end:/_/,relevance:0}]},r=e.inherit(a,{contains:[]
+    }),s=e.inherit(i,{contains:[]});a.contains.push(s),i.contains.push(r)
+    ;let o=[n,t];return[a,i,r,s].forEach((e=>{e.contains=e.contains.concat(o)
+    })),o=o.concat(a,i),{name:"Markdown",aliases:["md","mkdown","mkd"],contains:[{
+    className:"section",variants:[{begin:"^#{1,6}",end:"$",contains:o},{
+    begin:"(?=^.+?\\n[=-]{2,}$)",contains:[{begin:"^[=-]*$"},{begin:"^",end:"\\n",
+    contains:o}]}]},n,{className:"bullet",begin:"^[ \t]*([*+-]|(\\d+\\.))(?=\\s+)",
+    end:"\\s+",excludeEnd:!0},a,i,{className:"quote",begin:"^>\\s+",contains:o,
+    end:"$"},{className:"code",variants:[{begin:"(`{3,})[^`](.|\\n)*?\\1`*[ ]*"},{
+    begin:"(~{3,})[^~](.|\\n)*?\\1~*[ ]*"},{begin:"```",end:"```+[ ]*$"},{
+    begin:"~~~",end:"~~~+[ ]*$"},{begin:"`.+?`"},{begin:"(?=^( {4}|\\t))",
+    contains:[{begin:"^( {4}|\\t)",end:"(\\n)$"}],relevance:0}]},{
+    begin:"^[-\\*]{3,}",end:"$"},t,{begin:/^\[[^\n]+\]:/,returnBegin:!0,contains:[{
+    className:"symbol",begin:/\[/,end:/\]/,excludeBegin:!0,excludeEnd:!0},{
+    className:"link",begin:/:\s*/,end:/$/,excludeBegin:!0}]}]}},grmr_objectivec:e=>{
+    const n=/[a-zA-Z@][a-zA-Z0-9_]*/,t={$pattern:n,
+    keyword:["@interface","@class","@protocol","@implementation"]};return{
+    name:"Objective-C",aliases:["mm","objc","obj-c","obj-c++","objective-c++"],
+    keywords:{"variable.language":["this","super"],$pattern:n,
+    keyword:["while","export","sizeof","typedef","const","struct","for","union","volatile","static","mutable","if","do","return","goto","enum","else","break","extern","asm","case","default","register","explicit","typename","switch","continue","inline","readonly","assign","readwrite","self","@synchronized","id","typeof","nonatomic","IBOutlet","IBAction","strong","weak","copy","in","out","inout","bycopy","byref","oneway","__strong","__weak","__block","__autoreleasing","@private","@protected","@public","@try","@property","@end","@throw","@catch","@finally","@autoreleasepool","@synthesize","@dynamic","@selector","@optional","@required","@encode","@package","@import","@defs","@compatibility_alias","__bridge","__bridge_transfer","__bridge_retained","__bridge_retain","__covariant","__contravariant","__kindof","_Nonnull","_Nullable","_Null_unspecified","__FUNCTION__","__PRETTY_FUNCTION__","__attribute__","getter","setter","retain","unsafe_unretained","nonnull","nullable","null_unspecified","null_resettable","class","instancetype","NS_DESIGNATED_INITIALIZER","NS_UNAVAILABLE","NS_REQUIRES_SUPER","NS_RETURNS_INNER_POINTER","NS_INLINE","NS_AVAILABLE","NS_DEPRECATED","NS_ENUM","NS_OPTIONS","NS_SWIFT_UNAVAILABLE","NS_ASSUME_NONNULL_BEGIN","NS_ASSUME_NONNULL_END","NS_REFINED_FOR_SWIFT","NS_SWIFT_NAME","NS_SWIFT_NOTHROW","NS_DURING","NS_HANDLER","NS_ENDHANDLER","NS_VALUERETURN","NS_VOIDRETURN"],
+    literal:["false","true","FALSE","TRUE","nil","YES","NO","NULL"],
+    built_in:["dispatch_once_t","dispatch_queue_t","dispatch_sync","dispatch_async","dispatch_once"],
+    type:["int","float","char","unsigned","signed","short","long","double","wchar_t","unichar","void","bool","BOOL","id|0","_Bool"]
+    },illegal:"</",contains:[{className:"built_in",
+    begin:"\\b(AV|CA|CF|CG|CI|CL|CM|CN|CT|MK|MP|MTK|MTL|NS|SCN|SK|UI|WK|XC)\\w+"
+    },e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,e.C_NUMBER_MODE,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,{
+    className:"string",variants:[{begin:'@"',end:'"',illegal:"\\n",
+    contains:[e.BACKSLASH_ESCAPE]}]},{className:"meta",begin:/#\s*[a-z]+\b/,end:/$/,
+    keywords:{
+    keyword:"if else elif endif define undef warning error line pragma ifdef ifndef include"
+    },contains:[{begin:/\\\n/,relevance:0},e.inherit(e.QUOTE_STRING_MODE,{
+    className:"string"}),{className:"string",begin:/<.*?>/,end:/$/,illegal:"\\n"
+    },e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{className:"class",
+    begin:"("+t.keyword.join("|")+")\\b",end:/(\{|$)/,excludeEnd:!0,keywords:t,
+    contains:[e.UNDERSCORE_TITLE_MODE]},{begin:"\\."+e.UNDERSCORE_IDENT_RE,
+    relevance:0}]}},grmr_perl:e=>{const n=e.regex,t=/[dualxmsipngr]{0,12}/,a={
+    $pattern:/[\w.]+/,
+    keyword:"abs accept alarm and atan2 bind binmode bless break caller chdir chmod chomp chop chown chr chroot close closedir connect continue cos crypt dbmclose dbmopen defined delete die do dump each else elsif endgrent endhostent endnetent endprotoent endpwent endservent eof eval exec exists exit exp fcntl fileno flock for foreach fork format formline getc getgrent getgrgid getgrnam gethostbyaddr gethostbyname gethostent getlogin getnetbyaddr getnetbyname getnetent getpeername getpgrp getpriority getprotobyname getprotobynumber getprotoent getpwent getpwnam getpwuid getservbyname getservbyport getservent getsockname getsockopt given glob gmtime goto grep gt hex if index int ioctl join keys kill last lc lcfirst length link listen local localtime log lstat lt ma map mkdir msgctl msgget msgrcv msgsnd my ne next no not oct open opendir or ord our pack package pipe pop pos print printf prototype push q|0 qq quotemeta qw qx rand read readdir readline readlink readpipe recv redo ref rename require reset return reverse rewinddir rindex rmdir say scalar seek seekdir select semctl semget semop send setgrent sethostent setnetent setpgrp setpriority setprotoent setpwent setservent setsockopt shift shmctl shmget shmread shmwrite shutdown sin sleep socket socketpair sort splice split sprintf sqrt srand stat state study sub substr symlink syscall sysopen sysread sysseek system syswrite tell telldir tie tied time times tr truncate uc ucfirst umask undef unless unlink unpack unshift untie until use utime values vec wait waitpid wantarray warn when while write x|0 xor y|0"
+    },i={className:"subst",begin:"[$@]\\{",end:"\\}",keywords:a},r={begin:/->\{/,
+    end:/\}/},s={variants:[{begin:/\$\d/},{
+    begin:n.concat(/[$%@](\^\w\b|#\w+(::\w+)*|\{\w+\}|\w+(::\w*)*)/,"(?![A-Za-z])(?![@$%])")
+    },{begin:/[$%@][^\s\w{]/,relevance:0}]
+    },o=[e.BACKSLASH_ESCAPE,i,s],l=[/!/,/\//,/\|/,/\?/,/'/,/"/,/#/],c=(e,a,i="\\1")=>{
+    const r="\\1"===i?i:n.concat(i,a)
+    ;return n.concat(n.concat("(?:",e,")"),a,/(?:\\.|[^\\\/])*?/,r,/(?:\\.|[^\\\/])*?/,i,t)
+    },d=(e,a,i)=>n.concat(n.concat("(?:",e,")"),a,/(?:\\.|[^\\\/])*?/,i,t),g=[s,e.HASH_COMMENT_MODE,e.COMMENT(/^=\w/,/=cut/,{
+    endsWithParent:!0}),r,{className:"string",contains:o,variants:[{
+    begin:"q[qwxr]?\\s*\\(",end:"\\)",relevance:5},{begin:"q[qwxr]?\\s*\\[",
+    end:"\\]",relevance:5},{begin:"q[qwxr]?\\s*\\{",end:"\\}",relevance:5},{
+    begin:"q[qwxr]?\\s*\\|",end:"\\|",relevance:5},{begin:"q[qwxr]?\\s*<",end:">",
+    relevance:5},{begin:"qw\\s+q",end:"q",relevance:5},{begin:"'",end:"'",
+    contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"'},{begin:"`",end:"`",
+    contains:[e.BACKSLASH_ESCAPE]},{begin:/\{\w+\}/,relevance:0},{
+    begin:"-?\\w+\\s*=>",relevance:0}]},{className:"number",
+    begin:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",
+    relevance:0},{
+    begin:"(\\/\\/|"+e.RE_STARTERS_RE+"|\\b(split|return|print|reverse|grep)\\b)\\s*",
+    keywords:"split return print reverse grep",relevance:0,
+    contains:[e.HASH_COMMENT_MODE,{className:"regexp",variants:[{
+    begin:c("s|tr|y",n.either(...l,{capture:!0}))},{begin:c("s|tr|y","\\(","\\)")},{
+    begin:c("s|tr|y","\\[","\\]")},{begin:c("s|tr|y","\\{","\\}")}],relevance:2},{
+    className:"regexp",variants:[{begin:/(m|qr)\/\//,relevance:0},{
+    begin:d("(?:m|qr)?",/\//,/\//)},{begin:d("m|qr",n.either(...l,{capture:!0
+    }),/\1/)},{begin:d("m|qr",/\(/,/\)/)},{begin:d("m|qr",/\[/,/\]/)},{
+    begin:d("m|qr",/\{/,/\}/)}]}]},{className:"function",beginKeywords:"sub",
+    end:"(\\s*\\(.*?\\))?[;{]",excludeEnd:!0,relevance:5,contains:[e.TITLE_MODE]},{
+    begin:"-\\w\\b",relevance:0},{begin:"^__DATA__$",end:"^__END__$",
+    subLanguage:"mojolicious",contains:[{begin:"^@@.*",end:"$",className:"comment"}]
+    }];return i.contains=g,r.contains=g,{name:"Perl",aliases:["pl","pm"],keywords:a,
+    contains:g}},grmr_php:e=>{
+    const n=e.regex,t=/(?![A-Za-z0-9])(?![$])/,a=n.concat(/[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/,t),i=n.concat(/(\\?[A-Z][a-z0-9_\x7f-\xff]+|\\?[A-Z]+(?=[A-Z][a-z0-9_\x7f-\xff])){1,}/,t),r={
+    scope:"variable",match:"\\$+"+a},s={scope:"subst",variants:[{begin:/\$\w+/},{
+    begin:/\{\$/,end:/\}/}]},o=e.inherit(e.APOS_STRING_MODE,{illegal:null
+    }),l="[ \t\n]",c={scope:"string",variants:[e.inherit(e.QUOTE_STRING_MODE,{
+    illegal:null,contains:e.QUOTE_STRING_MODE.contains.concat(s)}),o,{
+    begin:/<<<[ \t]*(?:(\w+)|"(\w+)")\n/,end:/[ \t]*(\w+)\b/,
+    contains:e.QUOTE_STRING_MODE.contains.concat(s),"on:begin":(e,n)=>{
+    n.data._beginMatch=e[1]||e[2]},"on:end":(e,n)=>{
+    n.data._beginMatch!==e[1]&&n.ignoreMatch()}},e.END_SAME_AS_BEGIN({
+    begin:/<<<[ \t]*'(\w+)'\n/,end:/[ \t]*(\w+)\b/})]},d={scope:"number",variants:[{
+    begin:"\\b0[bB][01]+(?:_[01]+)*\\b"},{begin:"\\b0[oO][0-7]+(?:_[0-7]+)*\\b"},{
+    begin:"\\b0[xX][\\da-fA-F]+(?:_[\\da-fA-F]+)*\\b"},{
+    begin:"(?:\\b\\d+(?:_\\d+)*(\\.(?:\\d+(?:_\\d+)*))?|\\B\\.\\d+)(?:[eE][+-]?\\d+)?"
+    }],relevance:0
+    },g=["false","null","true"],u=["__CLASS__","__DIR__","__FILE__","__FUNCTION__","__COMPILER_HALT_OFFSET__","__LINE__","__METHOD__","__NAMESPACE__","__TRAIT__","die","echo","exit","include","include_once","print","require","require_once","array","abstract","and","as","binary","bool","boolean","break","callable","case","catch","class","clone","const","continue","declare","default","do","double","else","elseif","empty","enddeclare","endfor","endforeach","endif","endswitch","endwhile","enum","eval","extends","final","finally","float","for","foreach","from","global","goto","if","implements","instanceof","insteadof","int","integer","interface","isset","iterable","list","match|0","mixed","new","never","object","or","private","protected","public","readonly","real","return","string","switch","throw","trait","try","unset","use","var","void","while","xor","yield"],b=["Error|0","AppendIterator","ArgumentCountError","ArithmeticError","ArrayIterator","ArrayObject","AssertionError","BadFunctionCallException","BadMethodCallException","CachingIterator","CallbackFilterIterator","CompileError","Countable","DirectoryIterator","DivisionByZeroError","DomainException","EmptyIterator","ErrorException","Exception","FilesystemIterator","FilterIterator","GlobIterator","InfiniteIterator","InvalidArgumentException","IteratorIterator","LengthException","LimitIterator","LogicException","MultipleIterator","NoRewindIterator","OutOfBoundsException","OutOfRangeException","OuterIterator","OverflowException","ParentIterator","ParseError","RangeException","RecursiveArrayIterator","RecursiveCachingIterator","RecursiveCallbackFilterIterator","RecursiveDirectoryIterator","RecursiveFilterIterator","RecursiveIterator","RecursiveIteratorIterator","RecursiveRegexIterator","RecursiveTreeIterator","RegexIterator","RuntimeException","SeekableIterator","SplDoublyLinkedList","SplFileInfo","SplFileObject","SplFixedArray","SplHeap","SplMaxHeap","SplMinHeap","SplObjectStorage","SplObserver","SplPriorityQueue","SplQueue","SplStack","SplSubject","SplTempFileObject","TypeError","UnderflowException","UnexpectedValueException","UnhandledMatchError","ArrayAccess","BackedEnum","Closure","Fiber","Generator","Iterator","IteratorAggregate","Serializable","Stringable","Throwable","Traversable","UnitEnum","WeakReference","WeakMap","Directory","__PHP_Incomplete_Class","parent","php_user_filter","self","static","stdClass"],m={
+    keyword:u,literal:(e=>{const n=[];return e.forEach((e=>{
+    n.push(e),e.toLowerCase()===e?n.push(e.toUpperCase()):n.push(e.toLowerCase())
+    })),n})(g),built_in:b},p=e=>e.map((e=>e.replace(/\|\d+$/,""))),_={variants:[{
+    match:[/new/,n.concat(l,"+"),n.concat("(?!",p(b).join("\\b|"),"\\b)"),i],scope:{
+    1:"keyword",4:"title.class"}}]},h=n.concat(a,"\\b(?!\\()"),f={variants:[{
+    match:[n.concat(/::/,n.lookahead(/(?!class\b)/)),h],scope:{2:"variable.constant"
+    }},{match:[/::/,/class/],scope:{2:"variable.language"}},{
+    match:[i,n.concat(/::/,n.lookahead(/(?!class\b)/)),h],scope:{1:"title.class",
+    3:"variable.constant"}},{match:[i,n.concat("::",n.lookahead(/(?!class\b)/))],
+    scope:{1:"title.class"}},{match:[i,/::/,/class/],scope:{1:"title.class",
+    3:"variable.language"}}]},E={scope:"attr",
+    match:n.concat(a,n.lookahead(":"),n.lookahead(/(?!::)/))},y={relevance:0,
+    begin:/\(/,end:/\)/,keywords:m,contains:[E,r,f,e.C_BLOCK_COMMENT_MODE,c,d,_]
+    },N={relevance:0,
+    match:[/\b/,n.concat("(?!fn\\b|function\\b|",p(u).join("\\b|"),"|",p(b).join("\\b|"),"\\b)"),a,n.concat(l,"*"),n.lookahead(/(?=\()/)],
+    scope:{3:"title.function.invoke"},contains:[y]};y.contains.push(N)
+    ;const w=[E,f,e.C_BLOCK_COMMENT_MODE,c,d,_];return{case_insensitive:!1,
+    keywords:m,contains:[{begin:n.concat(/#\[\s*/,i),beginScope:"meta",end:/]/,
+    endScope:"meta",keywords:{literal:g,keyword:["new","array"]},contains:[{
+    begin:/\[/,end:/]/,keywords:{literal:g,keyword:["new","array"]},
+    contains:["self",...w]},...w,{scope:"meta",match:i}]
+    },e.HASH_COMMENT_MODE,e.COMMENT("//","$"),e.COMMENT("/\\*","\\*/",{contains:[{
+    scope:"doctag",match:"@[A-Za-z]+"}]}),{match:/__halt_compiler\(\);/,
+    keywords:"__halt_compiler",starts:{scope:"comment",end:e.MATCH_NOTHING_RE,
+    contains:[{match:/\?>/,scope:"meta",endsParent:!0}]}},{scope:"meta",variants:[{
+    begin:/<\?php/,relevance:10},{begin:/<\?=/},{begin:/<\?/,relevance:.1},{
+    begin:/\?>/}]},{scope:"variable.language",match:/\$this\b/},r,N,f,{
+    match:[/const/,/\s/,a],scope:{1:"keyword",3:"variable.constant"}},_,{
+    scope:"function",relevance:0,beginKeywords:"fn function",end:/[;{]/,
+    excludeEnd:!0,illegal:"[$%\\[]",contains:[{beginKeywords:"use"
+    },e.UNDERSCORE_TITLE_MODE,{begin:"=>",endsParent:!0},{scope:"params",
+    begin:"\\(",end:"\\)",excludeBegin:!0,excludeEnd:!0,keywords:m,
+    contains:["self",r,f,e.C_BLOCK_COMMENT_MODE,c,d]}]},{scope:"class",variants:[{
+    beginKeywords:"enum",illegal:/[($"]/},{beginKeywords:"class interface trait",
+    illegal:/[:($"]/}],relevance:0,end:/\{/,excludeEnd:!0,contains:[{
+    beginKeywords:"extends implements"},e.UNDERSCORE_TITLE_MODE]},{
+    beginKeywords:"namespace",relevance:0,end:";",illegal:/[.']/,
+    contains:[e.inherit(e.UNDERSCORE_TITLE_MODE,{scope:"title.class"})]},{
+    beginKeywords:"use",relevance:0,end:";",contains:[{
+    match:/\b(as|const|function)\b/,scope:"keyword"},e.UNDERSCORE_TITLE_MODE]},c,d]}
+    },grmr_php_template:e=>({name:"PHP template",subLanguage:"xml",contains:[{
+    begin:/<\?(php|=)?/,end:/\?>/,subLanguage:"php",contains:[{begin:"/\\*",
+    end:"\\*/",skip:!0},{begin:'b"',end:'"',skip:!0},{begin:"b'",end:"'",skip:!0
+    },e.inherit(e.APOS_STRING_MODE,{illegal:null,className:null,contains:null,
+    skip:!0}),e.inherit(e.QUOTE_STRING_MODE,{illegal:null,className:null,
+    contains:null,skip:!0})]}]}),grmr_plaintext:e=>({name:"Plain text",
+    aliases:["text","txt"],disableAutodetect:!0}),grmr_python:e=>{
+    const n=e.regex,t=/[\p{XID_Start}_]\p{XID_Continue}*/u,a=["and","as","assert","async","await","break","case","class","continue","def","del","elif","else","except","finally","for","from","global","if","import","in","is","lambda","match","nonlocal|10","not","or","pass","raise","return","try","while","with","yield"],i={
+    $pattern:/[A-Za-z]\w+|__\w+__/,keyword:a,
+    built_in:["__import__","abs","all","any","ascii","bin","bool","breakpoint","bytearray","bytes","callable","chr","classmethod","compile","complex","delattr","dict","dir","divmod","enumerate","eval","exec","filter","float","format","frozenset","getattr","globals","hasattr","hash","help","hex","id","input","int","isinstance","issubclass","iter","len","list","locals","map","max","memoryview","min","next","object","oct","open","ord","pow","print","property","range","repr","reversed","round","set","setattr","slice","sorted","staticmethod","str","sum","super","tuple","type","vars","zip"],
+    literal:["__debug__","Ellipsis","False","None","NotImplemented","True"],
+    type:["Any","Callable","Coroutine","Dict","List","Literal","Generic","Optional","Sequence","Set","Tuple","Type","Union"]
+    },r={className:"meta",begin:/^(>>>|\.\.\.) /},s={className:"subst",begin:/\{/,
+    end:/\}/,keywords:i,illegal:/#/},o={begin:/\{\{/,relevance:0},l={
+    className:"string",contains:[e.BACKSLASH_ESCAPE],variants:[{
+    begin:/([uU]|[bB]|[rR]|[bB][rR]|[rR][bB])?'''/,end:/'''/,
+    contains:[e.BACKSLASH_ESCAPE,r],relevance:10},{
+    begin:/([uU]|[bB]|[rR]|[bB][rR]|[rR][bB])?"""/,end:/"""/,
+    contains:[e.BACKSLASH_ESCAPE,r],relevance:10},{
+    begin:/([fF][rR]|[rR][fF]|[fF])'''/,end:/'''/,
+    contains:[e.BACKSLASH_ESCAPE,r,o,s]},{begin:/([fF][rR]|[rR][fF]|[fF])"""/,
+    end:/"""/,contains:[e.BACKSLASH_ESCAPE,r,o,s]},{begin:/([uU]|[rR])'/,end:/'/,
+    relevance:10},{begin:/([uU]|[rR])"/,end:/"/,relevance:10},{
+    begin:/([bB]|[bB][rR]|[rR][bB])'/,end:/'/},{begin:/([bB]|[bB][rR]|[rR][bB])"/,
+    end:/"/},{begin:/([fF][rR]|[rR][fF]|[fF])'/,end:/'/,
+    contains:[e.BACKSLASH_ESCAPE,o,s]},{begin:/([fF][rR]|[rR][fF]|[fF])"/,end:/"/,
+    contains:[e.BACKSLASH_ESCAPE,o,s]},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]
+    },c="[0-9](_?[0-9])*",d=`(\\b(${c}))?\\.(${c})|\\b(${c})\\.`,g="\\b|"+a.join("|"),u={
+    className:"number",relevance:0,variants:[{
+    begin:`(\\b(${c})|(${d}))[eE][+-]?(${c})[jJ]?(?=${g})`},{begin:`(${d})[jJ]?`},{
+    begin:`\\b([1-9](_?[0-9])*|0+(_?0)*)[lLjJ]?(?=${g})`},{
+    begin:`\\b0[bB](_?[01])+[lL]?(?=${g})`},{begin:`\\b0[oO](_?[0-7])+[lL]?(?=${g})`
+    },{begin:`\\b0[xX](_?[0-9a-fA-F])+[lL]?(?=${g})`},{begin:`\\b(${c})[jJ](?=${g})`
+    }]},b={className:"comment",begin:n.lookahead(/# type:/),end:/$/,keywords:i,
+    contains:[{begin:/# type:/},{begin:/#/,end:/\b\B/,endsWithParent:!0}]},m={
+    className:"params",variants:[{className:"",begin:/\(\s*\)/,skip:!0},{begin:/\(/,
+    end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:i,
+    contains:["self",r,u,l,e.HASH_COMMENT_MODE]}]};return s.contains=[l,u,r],{
+    name:"Python",aliases:["py","gyp","ipython"],unicodeRegex:!0,keywords:i,
+    illegal:/(<\/|\?)|=>/,contains:[r,u,{begin:/\bself\b/},{beginKeywords:"if",
+    relevance:0},l,b,e.HASH_COMMENT_MODE,{match:[/\bdef/,/\s+/,t],scope:{
+    1:"keyword",3:"title.function"},contains:[m]},{variants:[{
+    match:[/\bclass/,/\s+/,t,/\s*/,/\(\s*/,t,/\s*\)/]},{match:[/\bclass/,/\s+/,t]}],
+    scope:{1:"keyword",3:"title.class",6:"title.class.inherited"}},{
+    className:"meta",begin:/^[\t ]*@/,end:/(?=#)|$/,contains:[u,m,l]}]}},
+    grmr_python_repl:e=>({aliases:["pycon"],contains:[{className:"meta.prompt",
+    starts:{end:/ |$/,starts:{end:"$",subLanguage:"python"}},variants:[{
+    begin:/^>>>(?=[ ]|$)/},{begin:/^\.\.\.(?=[ ]|$)/}]}]}),grmr_r:e=>{
+    const n=e.regex,t=/(?:(?:[a-zA-Z]|\.[._a-zA-Z])[._a-zA-Z0-9]*)|\.(?!\d)/,a=n.either(/0[xX][0-9a-fA-F]+\.[0-9a-fA-F]*[pP][+-]?\d+i?/,/0[xX][0-9a-fA-F]+(?:[pP][+-]?\d+)?[Li]?/,/(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?[Li]?/),i=/[=!<>:]=|\|\||&&|:::?|<-|<<-|->>|->|\|>|[-+*\/?!$&|:<=>@^~]|\*\*/,r=n.either(/[()]/,/[{}]/,/\[\[/,/[[\]]/,/\\/,/,/)
+    ;return{name:"R",keywords:{$pattern:t,
+    keyword:"function if in break next repeat else for while",
+    literal:"NULL NA TRUE FALSE Inf NaN NA_integer_|10 NA_real_|10 NA_character_|10 NA_complex_|10",
+    built_in:"LETTERS letters month.abb month.name pi T F abs acos acosh all any anyNA Arg as.call as.character as.complex as.double as.environment as.integer as.logical as.null.default as.numeric as.raw asin asinh atan atanh attr attributes baseenv browser c call ceiling class Conj cos cosh cospi cummax cummin cumprod cumsum digamma dim dimnames emptyenv exp expression floor forceAndCall gamma gc.time globalenv Im interactive invisible is.array is.atomic is.call is.character is.complex is.double is.environment is.expression is.finite is.function is.infinite is.integer is.language is.list is.logical is.matrix is.na is.name is.nan is.null is.numeric is.object is.pairlist is.raw is.recursive is.single is.symbol lazyLoadDBfetch length lgamma list log max min missing Mod names nargs nzchar oldClass on.exit pos.to.env proc.time prod quote range Re rep retracemem return round seq_along seq_len seq.int sign signif sin sinh sinpi sqrt standardGeneric substitute sum switch tan tanh tanpi tracemem trigamma trunc unclass untracemem UseMethod xtfrm"
+    },contains:[e.COMMENT(/#'/,/$/,{contains:[{scope:"doctag",match:/@examples/,
+    starts:{end:n.lookahead(n.either(/\n^#'\s*(?=@[a-zA-Z]+)/,/\n^(?!#')/)),
+    endsParent:!0}},{scope:"doctag",begin:"@param",end:/$/,contains:[{
+    scope:"variable",variants:[{match:t},{match:/`(?:\\.|[^`\\])+`/}],endsParent:!0
+    }]},{scope:"doctag",match:/@[a-zA-Z]+/},{scope:"keyword",match:/\\[a-zA-Z]+/}]
+    }),e.HASH_COMMENT_MODE,{scope:"string",contains:[e.BACKSLASH_ESCAPE],
+    variants:[e.END_SAME_AS_BEGIN({begin:/[rR]"(-*)\(/,end:/\)(-*)"/
+    }),e.END_SAME_AS_BEGIN({begin:/[rR]"(-*)\{/,end:/\}(-*)"/
+    }),e.END_SAME_AS_BEGIN({begin:/[rR]"(-*)\[/,end:/\](-*)"/
+    }),e.END_SAME_AS_BEGIN({begin:/[rR]'(-*)\(/,end:/\)(-*)'/
+    }),e.END_SAME_AS_BEGIN({begin:/[rR]'(-*)\{/,end:/\}(-*)'/
+    }),e.END_SAME_AS_BEGIN({begin:/[rR]'(-*)\[/,end:/\](-*)'/}),{begin:'"',end:'"',
+    relevance:0},{begin:"'",end:"'",relevance:0}]},{relevance:0,variants:[{scope:{
+    1:"operator",2:"number"},match:[i,a]},{scope:{1:"operator",2:"number"},
+    match:[/%[^%]*%/,a]},{scope:{1:"punctuation",2:"number"},match:[r,a]},{scope:{
+    2:"number"},match:[/[^a-zA-Z0-9._]|^/,a]}]},{scope:{3:"operator"},
+    match:[t,/\s+/,/<-/,/\s+/]},{scope:"operator",relevance:0,variants:[{match:i},{
+    match:/%[^%]*%/}]},{scope:"punctuation",relevance:0,match:r},{begin:"`",end:"`",
+    contains:[{begin:/\\./}]}]}},grmr_ruby:e=>{
+    const n=e.regex,t="([a-zA-Z_]\\w*[!?=]?|[-+~]@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?)",a=n.either(/\b([A-Z]+[a-z0-9]+)+/,/\b([A-Z]+[a-z0-9]+)+[A-Z]+/),i=n.concat(a,/(::\w+)*/),r={
+    "variable.constant":["__FILE__","__LINE__","__ENCODING__"],
+    "variable.language":["self","super"],
+    keyword:["alias","and","begin","BEGIN","break","case","class","defined","do","else","elsif","end","END","ensure","for","if","in","module","next","not","or","redo","require","rescue","retry","return","then","undef","unless","until","when","while","yield","include","extend","prepend","public","private","protected","raise","throw"],
+    built_in:["proc","lambda","attr_accessor","attr_reader","attr_writer","define_method","private_constant","module_function"],
+    literal:["true","false","nil"]},s={className:"doctag",begin:"@[A-Za-z]+"},o={
+    begin:"#<",end:">"},l=[e.COMMENT("#","$",{contains:[s]
+    }),e.COMMENT("^=begin","^=end",{contains:[s],relevance:10
+    }),e.COMMENT("^__END__",e.MATCH_NOTHING_RE)],c={className:"subst",begin:/#\{/,
+    end:/\}/,keywords:r},d={className:"string",contains:[e.BACKSLASH_ESCAPE,c],
+    variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/`/,end:/`/},{
+    begin:/%[qQwWx]?\(/,end:/\)/},{begin:/%[qQwWx]?\[/,end:/\]/},{
+    begin:/%[qQwWx]?\{/,end:/\}/},{begin:/%[qQwWx]?</,end:/>/},{begin:/%[qQwWx]?\//,
+    end:/\//},{begin:/%[qQwWx]?%/,end:/%/},{begin:/%[qQwWx]?-/,end:/-/},{
+    begin:/%[qQwWx]?\|/,end:/\|/},{begin:/\B\?(\\\d{1,3})/},{
+    begin:/\B\?(\\x[A-Fa-f0-9]{1,2})/},{begin:/\B\?(\\u\{?[A-Fa-f0-9]{1,6}\}?)/},{
+    begin:/\B\?(\\M-\\C-|\\M-\\c|\\c\\M-|\\M-|\\C-\\M-)[\x20-\x7e]/},{
+    begin:/\B\?\\(c|C-)[\x20-\x7e]/},{begin:/\B\?\\?\S/},{
+    begin:n.concat(/<<[-~]?'?/,n.lookahead(/(\w+)(?=\W)[^\n]*\n(?:[^\n]*\n)*?\s*\1\b/)),
+    contains:[e.END_SAME_AS_BEGIN({begin:/(\w+)/,end:/(\w+)/,
+    contains:[e.BACKSLASH_ESCAPE,c]})]}]},g="[0-9](_?[0-9])*",u={className:"number",
+    relevance:0,variants:[{
+    begin:`\\b([1-9](_?[0-9])*|0)(\\.(${g}))?([eE][+-]?(${g})|r)?i?\\b`},{
+    begin:"\\b0[dD][0-9](_?[0-9])*r?i?\\b"},{begin:"\\b0[bB][0-1](_?[0-1])*r?i?\\b"
+    },{begin:"\\b0[oO][0-7](_?[0-7])*r?i?\\b"},{
+    begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*r?i?\\b"},{
+    begin:"\\b0(_?[0-7])+r?i?\\b"}]},b={variants:[{match:/\(\)/},{
+    className:"params",begin:/\(/,end:/(?=\))/,excludeBegin:!0,endsParent:!0,
+    keywords:r}]},m=[d,{variants:[{match:[/class\s+/,i,/\s+<\s+/,i]},{
+    match:[/\b(class|module)\s+/,i]}],scope:{2:"title.class",
+    4:"title.class.inherited"},keywords:r},{match:[/(include|extend)\s+/,i],scope:{
+    2:"title.class"},keywords:r},{relevance:0,match:[i,/\.new[. (]/],scope:{
+    1:"title.class"}},{relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,
+    className:"variable.constant"},{relevance:0,match:a,scope:"title.class"},{
+    match:[/def/,/\s+/,t],scope:{1:"keyword",3:"title.function"},contains:[b]},{
+    begin:e.IDENT_RE+"::"},{className:"symbol",
+    begin:e.UNDERSCORE_IDENT_RE+"(!|\\?)?:",relevance:0},{className:"symbol",
+    begin:":(?!\\s)",contains:[d,{begin:t}],relevance:0},u,{className:"variable",
+    begin:"(\\$\\W)|((\\$|@@?)(\\w+))(?=[^@$?])(?![A-Za-z])(?![@$?'])"},{
+    className:"params",begin:/\|/,end:/\|/,excludeBegin:!0,excludeEnd:!0,
+    relevance:0,keywords:r},{begin:"("+e.RE_STARTERS_RE+"|unless)\\s*",
+    keywords:"unless",contains:[{className:"regexp",contains:[e.BACKSLASH_ESCAPE,c],
+    illegal:/\n/,variants:[{begin:"/",end:"/[a-z]*"},{begin:/%r\{/,end:/\}[a-z]*/},{
+    begin:"%r\\(",end:"\\)[a-z]*"},{begin:"%r!",end:"![a-z]*"},{begin:"%r\\[",
+    end:"\\][a-z]*"}]}].concat(o,l),relevance:0}].concat(o,l)
+    ;c.contains=m,b.contains=m;const p=[{begin:/^\s*=>/,starts:{end:"$",contains:m}
+    },{className:"meta.prompt",
+    begin:"^([>?]>|[\\w#]+\\(\\w+\\):\\d+:\\d+[>*]|(\\w+-)?\\d+\\.\\d+\\.\\d+(p\\d+)?[^\\d][^>]+>)(?=[ ])",
+    starts:{end:"$",keywords:r,contains:m}}];return l.unshift(o),{name:"Ruby",
+    aliases:["rb","gemspec","podspec","thor","irb"],keywords:r,illegal:/\/\*/,
+    contains:[e.SHEBANG({binary:"ruby"})].concat(p).concat(l).concat(m)}},
+    grmr_rust:e=>{const n=e.regex,t={className:"title.function.invoke",relevance:0,
+    begin:n.concat(/\b/,/(?!let|for|while|if|else|match\b)/,e.IDENT_RE,n.lookahead(/\s*\(/))
+    },a="([ui](8|16|32|64|128|size)|f(32|64))?",i=["drop ","Copy","Send","Sized","Sync","Drop","Fn","FnMut","FnOnce","ToOwned","Clone","Debug","PartialEq","PartialOrd","Eq","Ord","AsRef","AsMut","Into","From","Default","Iterator","Extend","IntoIterator","DoubleEndedIterator","ExactSizeIterator","SliceConcatExt","ToString","assert!","assert_eq!","bitflags!","bytes!","cfg!","col!","concat!","concat_idents!","debug_assert!","debug_assert_eq!","env!","eprintln!","panic!","file!","format!","format_args!","include_bytes!","include_str!","line!","local_data_key!","module_path!","option_env!","print!","println!","select!","stringify!","try!","unimplemented!","unreachable!","vec!","write!","writeln!","macro_rules!","assert_ne!","debug_assert_ne!"],r=["i8","i16","i32","i64","i128","isize","u8","u16","u32","u64","u128","usize","f32","f64","str","char","bool","Box","Option","Result","String","Vec"]
+    ;return{name:"Rust",aliases:["rs"],keywords:{$pattern:e.IDENT_RE+"!?",type:r,
+    keyword:["abstract","as","async","await","become","box","break","const","continue","crate","do","dyn","else","enum","extern","false","final","fn","for","if","impl","in","let","loop","macro","match","mod","move","mut","override","priv","pub","ref","return","self","Self","static","struct","super","trait","true","try","type","typeof","unsafe","unsized","use","virtual","where","while","yield"],
+    literal:["true","false","Some","None","Ok","Err"],built_in:i},illegal:"</",
+    contains:[e.C_LINE_COMMENT_MODE,e.COMMENT("/\\*","\\*/",{contains:["self"]
+    }),e.inherit(e.QUOTE_STRING_MODE,{begin:/b?"/,illegal:null}),{
+    className:"string",variants:[{begin:/b?r(#*)"(.|\n)*?"\1(?!#)/},{
+    begin:/b?'\\?(x\w{2}|u\w{4}|U\w{8}|.)'/}]},{className:"symbol",
+    begin:/'[a-zA-Z_][a-zA-Z0-9_]*/},{className:"number",variants:[{
+    begin:"\\b0b([01_]+)"+a},{begin:"\\b0o([0-7_]+)"+a},{
+    begin:"\\b0x([A-Fa-f0-9_]+)"+a},{
+    begin:"\\b(\\d[\\d_]*(\\.[0-9_]+)?([eE][+-]?[0-9_]+)?)"+a}],relevance:0},{
+    begin:[/fn/,/\s+/,e.UNDERSCORE_IDENT_RE],className:{1:"keyword",
+    3:"title.function"}},{className:"meta",begin:"#!?\\[",end:"\\]",contains:[{
+    className:"string",begin:/"/,end:/"/}]},{
+    begin:[/let/,/\s+/,/(?:mut\s+)?/,e.UNDERSCORE_IDENT_RE],className:{1:"keyword",
+    3:"keyword",4:"variable"}},{
+    begin:[/for/,/\s+/,e.UNDERSCORE_IDENT_RE,/\s+/,/in/],className:{1:"keyword",
+    3:"variable",5:"keyword"}},{begin:[/type/,/\s+/,e.UNDERSCORE_IDENT_RE],
+    className:{1:"keyword",3:"title.class"}},{
+    begin:[/(?:trait|enum|struct|union|impl|for)/,/\s+/,e.UNDERSCORE_IDENT_RE],
+    className:{1:"keyword",3:"title.class"}},{begin:e.IDENT_RE+"::",keywords:{
+    keyword:"Self",built_in:i,type:r}},{className:"punctuation",begin:"->"},t]}},
+    grmr_scss:e=>{const n=ie(e),t=le,a=oe,i="@[a-z-]+",r={className:"variable",
+    begin:"(\\$[a-zA-Z-][a-zA-Z0-9_-]*)\\b",relevance:0};return{name:"SCSS",
+    case_insensitive:!0,illegal:"[=/|']",
+    contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,n.CSS_NUMBER_MODE,{
+    className:"selector-id",begin:"#[A-Za-z0-9_-]+",relevance:0},{
+    className:"selector-class",begin:"\\.[A-Za-z0-9_-]+",relevance:0
+    },n.ATTRIBUTE_SELECTOR_MODE,{className:"selector-tag",
+    begin:"\\b("+re.join("|")+")\\b",relevance:0},{className:"selector-pseudo",
+    begin:":("+a.join("|")+")"},{className:"selector-pseudo",
+    begin:":(:)?("+t.join("|")+")"},r,{begin:/\(/,end:/\)/,
+    contains:[n.CSS_NUMBER_MODE]},n.CSS_VARIABLE,{className:"attribute",
+    begin:"\\b("+ce.join("|")+")\\b"},{
+    begin:"\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b"
+    },{begin:/:/,end:/[;}{]/,relevance:0,
+    contains:[n.BLOCK_COMMENT,r,n.HEXCOLOR,n.CSS_NUMBER_MODE,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,n.IMPORTANT,n.FUNCTION_DISPATCH]
+    },{begin:"@(page|font-face)",keywords:{$pattern:i,keyword:"@page @font-face"}},{
+    begin:"@",end:"[{;]",returnBegin:!0,keywords:{$pattern:/[a-z-]+/,
+    keyword:"and or not only",attribute:se.join(" ")},contains:[{begin:i,
+    className:"keyword"},{begin:/[a-z-]+(?=:)/,className:"attribute"
+    },r,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,n.HEXCOLOR,n.CSS_NUMBER_MODE]
+    },n.FUNCTION_DISPATCH]}},grmr_shell:e=>({name:"Shell Session",
+    aliases:["console","shellsession"],contains:[{className:"meta.prompt",
+    begin:/^\s{0,3}[/~\w\d[\]()@-]*[>%$#][ ]?/,starts:{end:/[^\\](?=\s*$)/,
+    subLanguage:"bash"}}]}),grmr_sql:e=>{
+    const n=e.regex,t=e.COMMENT("--","$"),a=["true","false","unknown"],i=["bigint","binary","blob","boolean","char","character","clob","date","dec","decfloat","decimal","float","int","integer","interval","nchar","nclob","national","numeric","real","row","smallint","time","timestamp","varchar","varying","varbinary"],r=["abs","acos","array_agg","asin","atan","avg","cast","ceil","ceiling","coalesce","corr","cos","cosh","count","covar_pop","covar_samp","cume_dist","dense_rank","deref","element","exp","extract","first_value","floor","json_array","json_arrayagg","json_exists","json_object","json_objectagg","json_query","json_table","json_table_primitive","json_value","lag","last_value","lead","listagg","ln","log","log10","lower","max","min","mod","nth_value","ntile","nullif","percent_rank","percentile_cont","percentile_disc","position","position_regex","power","rank","regr_avgx","regr_avgy","regr_count","regr_intercept","regr_r2","regr_slope","regr_sxx","regr_sxy","regr_syy","row_number","sin","sinh","sqrt","stddev_pop","stddev_samp","substring","substring_regex","sum","tan","tanh","translate","translate_regex","treat","trim","trim_array","unnest","upper","value_of","var_pop","var_samp","width_bucket"],s=["create table","insert into","primary key","foreign key","not null","alter table","add constraint","grouping sets","on overflow","character set","respect nulls","ignore nulls","nulls first","nulls last","depth first","breadth first"],o=r,l=["abs","acos","all","allocate","alter","and","any","are","array","array_agg","array_max_cardinality","as","asensitive","asin","asymmetric","at","atan","atomic","authorization","avg","begin","begin_frame","begin_partition","between","bigint","binary","blob","boolean","both","by","call","called","cardinality","cascaded","case","cast","ceil","ceiling","char","char_length","character","character_length","check","classifier","clob","close","coalesce","collate","collect","column","commit","condition","connect","constraint","contains","convert","copy","corr","corresponding","cos","cosh","count","covar_pop","covar_samp","create","cross","cube","cume_dist","current","current_catalog","current_date","current_default_transform_group","current_path","current_role","current_row","current_schema","current_time","current_timestamp","current_path","current_role","current_transform_group_for_type","current_user","cursor","cycle","date","day","deallocate","dec","decimal","decfloat","declare","default","define","delete","dense_rank","deref","describe","deterministic","disconnect","distinct","double","drop","dynamic","each","element","else","empty","end","end_frame","end_partition","end-exec","equals","escape","every","except","exec","execute","exists","exp","external","extract","false","fetch","filter","first_value","float","floor","for","foreign","frame_row","free","from","full","function","fusion","get","global","grant","group","grouping","groups","having","hold","hour","identity","in","indicator","initial","inner","inout","insensitive","insert","int","integer","intersect","intersection","interval","into","is","join","json_array","json_arrayagg","json_exists","json_object","json_objectagg","json_query","json_table","json_table_primitive","json_value","lag","language","large","last_value","lateral","lead","leading","left","like","like_regex","listagg","ln","local","localtime","localtimestamp","log","log10","lower","match","match_number","match_recognize","matches","max","member","merge","method","min","minute","mod","modifies","module","month","multiset","national","natural","nchar","nclob","new","no","none","normalize","not","nth_value","ntile","null","nullif","numeric","octet_length","occurrences_regex","of","offset","old","omit","on","one","only","open","or","order","out","outer","over","overlaps","overlay","parameter","partition","pattern","per","percent","percent_rank","percentile_cont","percentile_disc","period","portion","position","position_regex","power","precedes","precision","prepare","primary","procedure","ptf","range","rank","reads","real","recursive","ref","references","referencing","regr_avgx","regr_avgy","regr_count","regr_intercept","regr_r2","regr_slope","regr_sxx","regr_sxy","regr_syy","release","result","return","returns","revoke","right","rollback","rollup","row","row_number","rows","running","savepoint","scope","scroll","search","second","seek","select","sensitive","session_user","set","show","similar","sin","sinh","skip","smallint","some","specific","specifictype","sql","sqlexception","sqlstate","sqlwarning","sqrt","start","static","stddev_pop","stddev_samp","submultiset","subset","substring","substring_regex","succeeds","sum","symmetric","system","system_time","system_user","table","tablesample","tan","tanh","then","time","timestamp","timezone_hour","timezone_minute","to","trailing","translate","translate_regex","translation","treat","trigger","trim","trim_array","true","truncate","uescape","union","unique","unknown","unnest","update","upper","user","using","value","values","value_of","var_pop","var_samp","varbinary","varchar","varying","versioning","when","whenever","where","width_bucket","window","with","within","without","year","add","asc","collation","desc","final","first","last","view"].filter((e=>!r.includes(e))),c={
+    begin:n.concat(/\b/,n.either(...o),/\s*\(/),relevance:0,keywords:{built_in:o}}
+    ;return{name:"SQL",case_insensitive:!0,illegal:/[{}]|<\//,keywords:{
+    $pattern:/\b[\w\.]+/,keyword:((e,{exceptions:n,when:t}={})=>{const a=t
+    ;return n=n||[],e.map((e=>e.match(/\|\d+$/)||n.includes(e)?e:a(e)?e+"|0":e))
+    })(l,{when:e=>e.length<3}),literal:a,type:i,
+    built_in:["current_catalog","current_date","current_default_transform_group","current_path","current_role","current_schema","current_transform_group_for_type","current_user","session_user","system_time","system_user","current_time","localtime","current_timestamp","localtimestamp"]
+    },contains:[{begin:n.either(...s),relevance:0,keywords:{$pattern:/[\w\.]+/,
+    keyword:l.concat(s),literal:a,type:i}},{className:"type",
+    begin:n.either("double precision","large object","with timezone","without timezone")
+    },c,{className:"variable",begin:/@[a-z0-9][a-z0-9_]*/},{className:"string",
+    variants:[{begin:/'/,end:/'/,contains:[{begin:/''/}]}]},{begin:/"/,end:/"/,
+    contains:[{begin:/""/}]},e.C_NUMBER_MODE,e.C_BLOCK_COMMENT_MODE,t,{
+    className:"operator",begin:/[-+*/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?/,
+    relevance:0}]}},grmr_swift:e=>{const n={match:/\s+/,relevance:0
+    },t=e.COMMENT("/\\*","\\*/",{contains:["self"]}),a=[e.C_LINE_COMMENT_MODE,t],i={
+    match:[/\./,m(...xe,...Me)],className:{2:"keyword"}},r={match:b(/\./,m(...Ae)),
+    relevance:0},s=Ae.filter((e=>"string"==typeof e)).concat(["_|0"]),o={variants:[{
+    className:"keyword",
+    match:m(...Ae.filter((e=>"string"!=typeof e)).concat(Se).map(ke),...Me)}]},l={
+    $pattern:m(/\b\w+/,/#\w+/),keyword:s.concat(Re),literal:Ce},c=[i,r,o],g=[{
+    match:b(/\./,m(...De)),relevance:0},{className:"built_in",
+    match:b(/\b/,m(...De),/(?=\()/)}],u={match:/->/,relevance:0},p=[u,{
+    className:"operator",relevance:0,variants:[{match:Be},{match:`\\.(\\.|${Le})+`}]
+    }],_="([0-9]_*)+",h="([0-9a-fA-F]_*)+",f={className:"number",relevance:0,
+    variants:[{match:`\\b(${_})(\\.(${_}))?([eE][+-]?(${_}))?\\b`},{
+    match:`\\b0x(${h})(\\.(${h}))?([pP][+-]?(${_}))?\\b`},{match:/\b0o([0-7]_*)+\b/
+    },{match:/\b0b([01]_*)+\b/}]},E=(e="")=>({className:"subst",variants:[{
+    match:b(/\\/,e,/[0\\tnr"']/)},{match:b(/\\/,e,/u\{[0-9a-fA-F]{1,8}\}/)}]
+    }),y=(e="")=>({className:"subst",match:b(/\\/,e,/[\t ]*(?:[\r\n]|\r\n)/)
+    }),N=(e="")=>({className:"subst",label:"interpol",begin:b(/\\/,e,/\(/),end:/\)/
+    }),w=(e="")=>({begin:b(e,/"""/),end:b(/"""/,e),contains:[E(e),y(e),N(e)]
+    }),v=(e="")=>({begin:b(e,/"/),end:b(/"/,e),contains:[E(e),N(e)]}),O={
+    className:"string",
+    variants:[w(),w("#"),w("##"),w("###"),v(),v("#"),v("##"),v("###")]
+    },k=[e.BACKSLASH_ESCAPE,{begin:/\[/,end:/\]/,relevance:0,
+    contains:[e.BACKSLASH_ESCAPE]}],x={begin:/\/[^\s](?=[^/\n]*\/)/,end:/\//,
+    contains:k},M=e=>{const n=b(e,/\//),t=b(/\//,e);return{begin:n,end:t,
+    contains:[...k,{scope:"comment",begin:`#(?!.*${t})`,end:/$/}]}},S={
+    scope:"regexp",variants:[M("###"),M("##"),M("#"),x]},A={match:b(/`/,Fe,/`/)
+    },C=[A,{className:"variable",match:/\$\d+/},{className:"variable",
+    match:`\\$${ze}+`}],T=[{match:/(@|#(un)?)available/,scope:"keyword",starts:{
+    contains:[{begin:/\(/,end:/\)/,keywords:Pe,contains:[...p,f,O]}]}},{
+    scope:"keyword",match:b(/@/,m(...je))},{scope:"meta",match:b(/@/,Fe)}],R={
+    match:d(/\b[A-Z]/),relevance:0,contains:[{className:"type",
+    match:b(/(AV|CA|CF|CG|CI|CL|CM|CN|CT|MK|MP|MTK|MTL|NS|SCN|SK|UI|WK|XC)/,ze,"+")
+    },{className:"type",match:Ue,relevance:0},{match:/[?!]+/,relevance:0},{
+    match:/\.\.\./,relevance:0},{match:b(/\s+&\s+/,d(Ue)),relevance:0}]},D={
+    begin:/</,end:/>/,keywords:l,contains:[...a,...c,...T,u,R]};R.contains.push(D)
+    ;const I={begin:/\(/,end:/\)/,relevance:0,keywords:l,contains:["self",{
+    match:b(Fe,/\s*:/),keywords:"_|0",relevance:0
+    },...a,S,...c,...g,...p,f,O,...C,...T,R]},L={begin:/</,end:/>/,
+    keywords:"repeat each",contains:[...a,R]},B={begin:/\(/,end:/\)/,keywords:l,
+    contains:[{begin:m(d(b(Fe,/\s*:/)),d(b(Fe,/\s+/,Fe,/\s*:/))),end:/:/,
+    relevance:0,contains:[{className:"keyword",match:/\b_\b/},{className:"params",
+    match:Fe}]},...a,...c,...p,f,O,...T,R,I],endsParent:!0,illegal:/["']/},$={
+    match:[/(func|macro)/,/\s+/,m(A.match,Fe,Be)],className:{1:"keyword",
+    3:"title.function"},contains:[L,B,n],illegal:[/\[/,/%/]},z={
+    match:[/\b(?:subscript|init[?!]?)/,/\s*(?=[<(])/],className:{1:"keyword"},
+    contains:[L,B,n],illegal:/\[|%/},F={match:[/operator/,/\s+/,Be],className:{
+    1:"keyword",3:"title"}},U={begin:[/precedencegroup/,/\s+/,Ue],className:{
+    1:"keyword",3:"title"},contains:[R],keywords:[...Te,...Ce],end:/}/}
+    ;for(const e of O.variants){const n=e.contains.find((e=>"interpol"===e.label))
+    ;n.keywords=l;const t=[...c,...g,...p,f,O,...C];n.contains=[...t,{begin:/\(/,
+    end:/\)/,contains:["self",...t]}]}return{name:"Swift",keywords:l,
+    contains:[...a,$,z,{beginKeywords:"struct protocol class extension enum actor",
+    end:"\\{",excludeEnd:!0,keywords:l,contains:[e.inherit(e.TITLE_MODE,{
+    className:"title.class",begin:/[A-Za-z$_][\u00C0-\u02B80-9A-Za-z$_]*/}),...c]
+    },F,U,{beginKeywords:"import",end:/$/,contains:[...a],relevance:0
+    },S,...c,...g,...p,f,O,...C,...T,R,I]}},grmr_typescript:e=>{
+    const n=Oe(e),t=_e,a=["any","void","number","boolean","string","object","never","symbol","bigint","unknown"],i={
+    beginKeywords:"namespace",end:/\{/,excludeEnd:!0,
+    contains:[n.exports.CLASS_REFERENCE]},r={beginKeywords:"interface",end:/\{/,
+    excludeEnd:!0,keywords:{keyword:"interface extends",built_in:a},
+    contains:[n.exports.CLASS_REFERENCE]},s={$pattern:_e,
+    keyword:he.concat(["type","namespace","interface","public","private","protected","implements","declare","abstract","readonly","enum","override"]),
+    literal:fe,built_in:ve.concat(a),"variable.language":we},o={className:"meta",
+    begin:"@"+t},l=(e,n,t)=>{const a=e.contains.findIndex((e=>e.label===n))
+    ;if(-1===a)throw Error("can not find mode to replace");e.contains.splice(a,1,t)}
+    ;return Object.assign(n.keywords,s),
+    n.exports.PARAMS_CONTAINS.push(o),n.contains=n.contains.concat([o,i,r]),
+    l(n,"shebang",e.SHEBANG()),l(n,"use_strict",{className:"meta",relevance:10,
+    begin:/^\s*['"]use strict['"]/
+    }),n.contains.find((e=>"func.def"===e.label)).relevance=0,Object.assign(n,{
+    name:"TypeScript",aliases:["ts","tsx","mts","cts"]}),n},grmr_vbnet:e=>{
+    const n=e.regex,t=/\d{1,2}\/\d{1,2}\/\d{4}/,a=/\d{4}-\d{1,2}-\d{1,2}/,i=/(\d|1[012])(:\d+){0,2} *(AM|PM)/,r=/\d{1,2}(:\d{1,2}){1,2}/,s={
+    className:"literal",variants:[{begin:n.concat(/# */,n.either(a,t),/ *#/)},{
+    begin:n.concat(/# */,r,/ *#/)},{begin:n.concat(/# */,i,/ *#/)},{
+    begin:n.concat(/# */,n.either(a,t),/ +/,n.either(i,r),/ *#/)}]
+    },o=e.COMMENT(/'''/,/$/,{contains:[{className:"doctag",begin:/<\/?/,end:/>/}]
+    }),l=e.COMMENT(null,/$/,{variants:[{begin:/'/},{begin:/([\t ]|^)REM(?=\s)/}]})
+    ;return{name:"Visual Basic .NET",aliases:["vb"],case_insensitive:!0,
+    classNameAliases:{label:"symbol"},keywords:{
+    keyword:"addhandler alias aggregate ansi as async assembly auto binary by byref byval call case catch class compare const continue custom declare default delegate dim distinct do each equals else elseif end enum erase error event exit explicit finally for friend from function get global goto group handles if implements imports in inherits interface into iterator join key let lib loop me mid module mustinherit mustoverride mybase myclass namespace narrowing new next notinheritable notoverridable of off on operator option optional order overloads overridable overrides paramarray partial preserve private property protected public raiseevent readonly redim removehandler resume return select set shadows shared skip static step stop structure strict sub synclock take text then throw to try unicode until using when where while widening with withevents writeonly yield",
+    built_in:"addressof and andalso await directcast gettype getxmlnamespace is isfalse isnot istrue like mod nameof new not or orelse trycast typeof xor cbool cbyte cchar cdate cdbl cdec cint clng cobj csbyte cshort csng cstr cuint culng cushort",
+    type:"boolean byte char date decimal double integer long object sbyte short single string uinteger ulong ushort",
+    literal:"true false nothing"},
+    illegal:"//|\\{|\\}|endif|gosub|variant|wend|^\\$ ",contains:[{
+    className:"string",begin:/"(""|[^/n])"C\b/},{className:"string",begin:/"/,
+    end:/"/,illegal:/\n/,contains:[{begin:/""/}]},s,{className:"number",relevance:0,
+    variants:[{begin:/\b\d[\d_]*((\.[\d_]+(E[+-]?[\d_]+)?)|(E[+-]?[\d_]+))[RFD@!#]?/
+    },{begin:/\b\d[\d_]*((U?[SIL])|[%&])?/},{begin:/&H[\dA-F_]+((U?[SIL])|[%&])?/},{
+    begin:/&O[0-7_]+((U?[SIL])|[%&])?/},{begin:/&B[01_]+((U?[SIL])|[%&])?/}]},{
+    className:"label",begin:/^\w+:/},o,l,{className:"meta",
+    begin:/[\t ]*#(const|disable|else|elseif|enable|end|externalsource|if|region)\b/,
+    end:/$/,keywords:{
+    keyword:"const disable else elseif enable end externalsource if region then"},
+    contains:[l]}]}},grmr_wasm:e=>{e.regex;const n=e.COMMENT(/\(;/,/;\)/)
+    ;return n.contains.push("self"),{name:"WebAssembly",keywords:{$pattern:/[\w.]+/,
+    keyword:["anyfunc","block","br","br_if","br_table","call","call_indirect","data","drop","elem","else","end","export","func","global.get","global.set","local.get","local.set","local.tee","get_global","get_local","global","if","import","local","loop","memory","memory.grow","memory.size","module","mut","nop","offset","param","result","return","select","set_global","set_local","start","table","tee_local","then","type","unreachable"]
+    },contains:[e.COMMENT(/;;/,/$/),n,{match:[/(?:offset|align)/,/\s*/,/=/],
+    className:{1:"keyword",3:"operator"}},{className:"variable",begin:/\$[\w_]+/},{
+    match:/(\((?!;)|\))+/,className:"punctuation",relevance:0},{
+    begin:[/(?:func|call|call_indirect)/,/\s+/,/\$[^\s)]+/],className:{1:"keyword",
+    3:"title.function"}},e.QUOTE_STRING_MODE,{match:/(i32|i64|f32|f64)(?!\.)/,
+    className:"type"},{className:"keyword",
+    match:/\b(f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|nearest|neg?|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|store(?:8|16|32)?|sqrt|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))\b/
+    },{className:"number",relevance:0,
+    match:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/
+    }]}},grmr_xml:e=>{
+    const n=e.regex,t=n.concat(/[\p{L}_]/u,n.optional(/[\p{L}0-9_.-]*:/u),/[\p{L}0-9_.-]*/u),a={
+    className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},i={begin:/\s/,
+    contains:[{className:"keyword",begin:/#?[a-z_][a-z1-9_-]+/,illegal:/\n/}]
+    },r=e.inherit(i,{begin:/\(/,end:/\)/}),s=e.inherit(e.APOS_STRING_MODE,{
+    className:"string"}),o=e.inherit(e.QUOTE_STRING_MODE,{className:"string"}),l={
+    endsWithParent:!0,illegal:/</,relevance:0,contains:[{className:"attr",
+    begin:/[\p{L}0-9._:-]+/u,relevance:0},{begin:/=\s*/,relevance:0,contains:[{
+    className:"string",endsParent:!0,variants:[{begin:/"/,end:/"/,contains:[a]},{
+    begin:/'/,end:/'/,contains:[a]},{begin:/[^\s"'=<>`]+/}]}]}]};return{
+    name:"HTML, XML",
+    aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],
+    case_insensitive:!0,unicodeRegex:!0,contains:[{className:"meta",begin:/<![a-z]/,
+    end:/>/,relevance:10,contains:[i,o,s,r,{begin:/\[/,end:/\]/,contains:[{
+    className:"meta",begin:/<![a-z]/,end:/>/,contains:[i,r,o,s]}]}]
+    },e.COMMENT(/<!--/,/-->/,{relevance:10}),{begin:/<!\[CDATA\[/,end:/\]\]>/,
+    relevance:10},a,{className:"meta",end:/\?>/,variants:[{begin:/<\?xml/,
+    relevance:10,contains:[o]},{begin:/<\?[a-z][a-z0-9]+/}]},{className:"tag",
+    begin:/<style(?=\s|>)/,end:/>/,keywords:{name:"style"},contains:[l],starts:{
+    end:/<\/style>/,returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",
+    begin:/<script(?=\s|>)/,end:/>/,keywords:{name:"script"},contains:[l],starts:{
+    end:/<\/script>/,returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{
+    className:"tag",begin:/<>|<\/>/},{className:"tag",
+    begin:n.concat(/</,n.lookahead(n.concat(t,n.either(/\/>/,/>/,/\s/)))),
+    end:/\/?>/,contains:[{className:"name",begin:t,relevance:0,starts:l}]},{
+    className:"tag",begin:n.concat(/<\//,n.lookahead(n.concat(t,/>/))),contains:[{
+    className:"name",begin:t,relevance:0},{begin:/>/,relevance:0,endsParent:!0}]}]}
+    },grmr_yaml:e=>{
+    const n="true false yes no null",t="[\\w#;/?:@&=+$,.~*'()[\\]]+",a={
+    className:"string",relevance:0,variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/
+    },{begin:/\S+/}],contains:[e.BACKSLASH_ESCAPE,{className:"template-variable",
+    variants:[{begin:/\{\{/,end:/\}\}/},{begin:/%\{/,end:/\}/}]}]},i=e.inherit(a,{
+    variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/[^\s,{}[\]]+/}]}),r={
+    end:",",endsWithParent:!0,excludeEnd:!0,keywords:n,relevance:0},s={begin:/\{/,
+    end:/\}/,contains:[r],illegal:"\\n",relevance:0},o={begin:"\\[",end:"\\]",
+    contains:[r],illegal:"\\n",relevance:0},l=[{className:"attr",variants:[{
+    begin:"\\w[\\w :\\/.-]*:(?=[ \t]|$)"},{begin:'"\\w[\\w :\\/.-]*":(?=[ \t]|$)'},{
+    begin:"'\\w[\\w :\\/.-]*':(?=[ \t]|$)"}]},{className:"meta",begin:"^---\\s*$",
+    relevance:10},{className:"string",
+    begin:"[\\|>]([1-9]?[+-])?[ ]*\\n( +)[^ ][^\\n]*\\n(\\2[^\\n]+\\n?)*"},{
+    begin:"<%[%=-]?",end:"[%-]?%>",subLanguage:"ruby",excludeBegin:!0,excludeEnd:!0,
+    relevance:0},{className:"type",begin:"!\\w+!"+t},{className:"type",
+    begin:"!<"+t+">"},{className:"type",begin:"!"+t},{className:"type",begin:"!!"+t
+    },{className:"meta",begin:"&"+e.UNDERSCORE_IDENT_RE+"$"},{className:"meta",
+    begin:"\\*"+e.UNDERSCORE_IDENT_RE+"$"},{className:"bullet",begin:"-(?=[ ]|$)",
+    relevance:0},e.HASH_COMMENT_MODE,{beginKeywords:n,keywords:{literal:n}},{
+    className:"number",
+    begin:"\\b[0-9]{4}(-[0-9][0-9]){0,2}([Tt \\t][0-9][0-9]?(:[0-9][0-9]){2})?(\\.[0-9]*)?([ \\t])*(Z|[-+][0-9][0-9]?(:[0-9][0-9])?)?\\b"
+    },{className:"number",begin:e.C_NUMBER_RE+"\\b",relevance:0},s,o,a],c=[...l]
+    ;return c.pop(),c.push(i),r.contains=c,{name:"YAML",case_insensitive:!0,
+    aliases:["yml"],contains:l}}});const He=ae;for(const e of Object.keys(Ke)){
+    const n=e.replace("grmr_","").replace("_","-");He.registerLanguage(n,Ke[e])}
+    return He}()
+    ;"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);
\ No newline at end of file
diff --git a/aero/icons/LinkedIn-icon.svg b/aero/icons/LinkedIn-icon.svg
new file mode 100644
index 0000000..46087a0
--- /dev/null
+++ b/aero/icons/LinkedIn-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="72" viewBox="0 0 72 72" width="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z" fill="#007EBB"/><path d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z" fill="#FFF"/></g></svg>
\ No newline at end of file
diff --git a/aero/icons/Twitter-icon.svg b/aero/icons/Twitter-icon.svg
new file mode 100644
index 0000000..d60af2b
--- /dev/null
+++ b/aero/icons/Twitter-icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204">
+  <path fill="#1d9bf0" d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"/>
+</svg>
\ No newline at end of file