xmlking · January 29, 2025 17:40
diff --git a/app.js b/app.js
 /*********************************************************************
 * Web AI Agent for Flights designed and coded by Jason Mayes 2025.
 *--------------------------------------------------------------------
 * Connect with me on social if questions or comments:
 *
 * LinkedIn: https://www.linkedin.com/in/webai/
 * Twitter / X: https://x.com/jason_mayes
 * Github: https://github.com/jasonmayes
 * CodePen: https://codepen.io/jasonmayes
 *********************************************************************/

 //import {FilesetResolver, LlmInference} from 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai';

 const AI = window["@aibrow/web"].default;

 /**************************************************************
 * DOM References and defaults
 **************************************************************/
 const SIDE_PANEL_LLM_WRITE_SPACE = document.getElementById(
  "sidePanelInterface"
 );
 const PRELOADER = document.getElementById("preloader");
 const CHAT = document.getElementById("chat");
 const FLIGHTS_TRIP_TYPE = document.getElementById("tripType");
 const FLIGHTS_PASSENGER_COUNT = document.getElementById("passengerCount");
 const FLIGHTS_TRIP_CLASS = document.getElementById("tripClass");
 const FLIGHTS_DESTINATIONS = document.getElementById("destinations");
 const FLIGHTS_SEARCH = document.getElementById("search");
 const SEARCH_RESULTS_AREA = document.getElementById("searchResults");
 const HCI_PERSONA_TEXTBOX = document.getElementById("hciPersona");
 const FAKE_API_PERSONA_TEXTBOX = document.getElementById("fakeAPIPersona");
 const CHAT_BTN = document.getElementById("chatBtn");
 const ERASE_MEMORY_BTN = document.getElementById("eraseMemorytBtn");
 const TALK_TO_AGENT_BTN = document.getElementById("talkToAgent");

 /**************************************************************
 * Web AI Gemma 2 LLM code.
 **************************************************************/

 const CHAT_GRAMMAR = {
  type: "object",
  properties: {
    passengerCount: { type: "integer" },
    seatClass: {
      type: "string",
      enum: ["economy", "premium economy", "business", "first"]
    },
    legs: {
      type: "array",
      minItems: 1,
      maxItems: 2,
      items: {
        type: "object",
        properties: {
          departureLocation: { type: "string" },
          destinationLocation: { type: "string" },
          departureDate: { type: "string" },
          returnDate: { type: "string" }
        },
        required: [
          "departureLocation",
          "destinationLocation",
          "departureDate",
          "returnDate"
        ],
        additionalProperties: false
      }
    },
    followUpQuestion: { type: "string" }
  },
  required: ["passengerCount", "seatClass", "legs"],
  additionalProperties: false
 };
 const API_GRAMMAR = {
  type: "object",
  properties: {
    results: {
      type: "array",
      minItems: 5,
      items: {
        type: "object",
        properties: {
          airline: { type: "string" },
          flightNumber: { type: "string" },
          departingTime: { type: "string" },
          departingAirport: { type: "string" },
          arrivingTime: { type: "string" },
          arrivingAirport: { type: "string" },
          numberOfFlightChanges: { type: "number" },
          flightDuration: { type: "string" },
          aircraftType: { type: "string" },
          cost: { type: "number" }
        },
        required: [
          "airline",
          "flightNumber",
          "departingTime",
          "departingAirport",
          "arrivingTime",
          "arrivingAirport",
          "numberOfFlightChanges",
          "flightDuration",
          "aircraftType",
          "cost"
        ],
        additionalProperties: false
      }
    }
  },
  required: ["results"],
  additionalProperties: false
 };
 const MODEL_NAME = "gemma-2-2b-instruct-q4-k-m";

 const CHAT_PERSONA_NAME = "chatPersona";
 const API_PERSONA_NAME = "apiPersona";
 const CHAT_PERSONA_HISTORY = [];
 const API_PERSONA_HISTORY = [];

 let agentBusy = false;
 let llmInference = undefined;
 let lastGeneratedResponse = "";
 let activePersona = "";

 async function initLLM(modelUrl) {
  if (!AI.aibrow) {
    return;
  }
  // Lazily create a new LLM instance to force the model to download. Really we should listen on the download events
  const sess = await AI.aibrow.languageModel.create({ model: MODEL_NAME });
  await sess.destroy();

  PRELOADER.classList.remove("animate__fadeIn");
  PRELOADER.classList.add("animate__fadeOut");
  setTimeout(function () {
    PRELOADER.setAttribute("class", "removed");
  }, 1000);
 }

 function formToObj() {
  return {
    passengerCount: parseInt(FLIGHTS_PASSENGER_COUNT.value),
    seatClass:
      FLIGHTS_TRIP_CLASS.options[FLIGHTS_TRIP_CLASS.selectedIndex].text,
    legs: Array.from(FLIGHTS_DESTINATIONS.children).map((el) => ({
      departureLocation: el.children[0].value,
      destinationLocation: el.children[1].value,
      departureDate: el.children[2].value,
      returnDate: el.children[3].value
    }))
  };
 }

 function ObjToForm(obj) {
  agentSetPassengerCount(obj.passengerCount);
  agentSetSeatClass(obj.seatClass);
  agentSetTravelLegs(obj.legs);
 }

 async function executeAgent(task, personaName) {
  if (agentBusy) {
    console.warn("Can not process request as agent busy!");
    return;
  }

  try {
    agentBusy = true;

    let systemPrompt;

    switch (personaName) {
      case CHAT_PERSONA_NAME: {
        SEARCH_RESULTS_AREA.innerHTML =
          "<h2>Analysing user input</h2><p>This may take a moment. Please respond with any extra information the agent may ask you. Please wait.</p>";
        SEARCH_RESULTS_AREA.setAttribute("class", "preSearch");
        const sess = await AI.aibrow.languageModel.create({
          model: MODEL_NAME,
          grammar: CHAT_GRAMMAR,
          initialPrompts: CHAT_PERSONA_HISTORY,
          systemPrompt: `
 You are a travel bot API who needs to book flights for people and your task is to fill the JSON object from the users input so we can search for a flight.
 The user will give you some free text and you should do your best to update the JSON object. The current JSON object is:

 ${JSON.stringify(formToObj())}

 If you need more information or any fields are blank, use the \`followUpQuestion\` field to ask the user for more information & ask for more than one thing at a time, be friendly, but don't use emojis. If you have all the information you need, leave the \`followUpQuestion\` field blank.
 `
        });
        const prompt = `${task || "I need to book a flight"}`;
        CHAT_PERSONA_HISTORY.push({ role: "user", content: prompt });
        const stream = await sess.promptStreaming(prompt);
        let last;
        for await (const chunk of stream) {
          SIDE_PANEL_LLM_WRITE_SPACE.innerText = chunk;
          last = chunk;
        }
        last = JSON.parse(last);
        ObjToForm(last);
        if (last.followUpQuestion) {
          CHAT_PERSONA_HISTORY.push({
            role: "assistant",
            content: last.followUpQuestion
          });
          let utterance = new SpeechSynthesisUtterance(last.followUpQuestion);
          speechSynthesis.speak(utterance);
        } else {
          setTimeout(() => {
            executeAgent("", API_PERSONA_NAME);
          }, 1);
        }

        break;
      }
      case API_PERSONA_NAME: {
        SEARCH_RESULTS_AREA.innerHTML =
          "<h2>Please wait - generating pretend search results emulating an API call - watch progess in the left hand panel!</h2><p>This may take a moment. In a real world situation you would just call some API which would be faster but I want to demonstrate how capable this tiny model is.</p>";
        SEARCH_RESULTS_AREA.setAttribute("class", "preSearch");
        const sess = await AI.aibrow.languageModel.create({
          model: MODEL_NAME,
          grammar: API_GRAMMAR,
          initialPrompts: CHAT_PERSONA_HISTORY,
          systemPrompt: `
 You are pretending to be the Google flights API. A user will ask you to generate example flight search results by giving you a specified JSON object, generate at least 5 pretend but realistic flight results using the JSON object information provided by the user and respond as detailed below.
 The user will give you some free text that was had with a travel bot, then finally the JSON object with the flight details.
 `
        });
        const stream = await sess.promptStreaming(JSON.stringify(formToObj()));
        let last;
        for await (const chunk of stream) {
          SIDE_PANEL_LLM_WRITE_SPACE.innerText = chunk;
          last = chunk;
        }
        last = JSON.parse(last);
        displaySearchResults(last);
        break;
      }
    }
  } finally {
    agentBusy = false;
  }
 }

 // Try localhost first. Kick off LLM load right away.
 initLLM();

 /**************************************************************
 * Web app business logic - the typical code the web app would
 * have used without any Agents to get stuff done
 ***************************************************************/

 // Here we are using the LLM to generate fake search results
 // too but this would traditionally be an API call to some server DB.
 FLIGHTS_SEARCH.addEventListener("click", function () {
  // Use API persona.
  //let context = CHAT_PERSONA_HISTORY[CHAT_PERSONA_HISTORY.length -1];
  executeAgent("", CHAT_PERSONA_NAME); //twbtwb
 });

 // Call the agent from our app logic to execute user demand.
 CHAT_BTN.addEventListener("click", function () {
  SIDE_PANEL_LLM_WRITE_SPACE.innerText = "";
  executeAgent(CHAT.value, CHAT_PERSONA_NAME, CHAT_PERSONA_HISTORY);
  CHAT.value = "";
 });

 window.SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;
 const SPEECH_RECOGNITION = new window.SpeechRecognition();
 SPEECH_RECOGNITION.continuous = true;
 SPEECH_RECOGNITION.interimResults = true;
 SPEECH_RECOGNITION.addEventListener("result", function (data) {
  for (const result of data.results) {
    if (result.isFinal) {
      console.log(result[0].transcript);
      executeAgent(result[0].transcript, CHAT_PERSONA_NAME);
    }
  }
 });

 function speechDeactivated() {
  TALK_TO_AGENT_BTN.setAttribute("class", "");
  // Allow 1s grace for speech recognition to finish.
  setTimeout(function () {
    SPEECH_RECOGNITION.stop();
  }, 1000);
 }

 TALK_TO_AGENT_BTN.addEventListener("mousedown", function () {
  this.setAttribute("class", "activated");
  SPEECH_RECOGNITION.start();
 });
 TALK_TO_AGENT_BTN.addEventListener("mouseup", speechDeactivated);
 TALK_TO_AGENT_BTN.addEventListener("focusout", speechDeactivated);

 // As this is a demo we also allow the clearning of agent memory to start fresh.
 ERASE_MEMORY_BTN.addEventListener("click", function () {
  CHAT_PERSONA_HISTORY.splice(0);
  CHAT_PERSONA_HISTORY.push(agentPersonas[CHAT_PERSONA_NAME]);

  API_PERSONA_HISTORY.splice(0);
  API_PERSONA_HISTORY.push(agentPersonas[API_PERSONA_NAME]);

  SIDE_PANEL_LLM_WRITE_SPACE.innerText = "";
 });

 // Web Dev designs a suitable Agent persona to work with
 // the exposed functions below.
 function setupAgentPersonas() {
  // In this demo we set defaults in the HTML itself so
  // you can play around later. Also append current date for smarts.
  const today = new Date();
  const dateStr =
    today.getDate() + "/" + today.getMonth() + 1 + "/" + today.getFullYear();

  let personas = {
    [CHAT_PERSONA_NAME]:
      HCI_PERSONA_TEXTBOX.value + "\n The current date is: " + dateStr,
    [API_PERSONA_NAME]: FAKE_API_PERSONA_TEXTBOX.value
  };

  return personas;
 }

 function agentPersonaChange() {
  agentPersonas = setupAgentPersonas();

  // Overwrite persona in current persona chat histories too.
  CHAT_PERSONA_HISTORY[0] = agentPersonas[CHAT_PERSONA_NAME];
  API_PERSONA_HISTORY[0] = agentPersonas[API_PERSONA_NAME];

  SIDE_PANEL_LLM_WRITE_SPACE.innerText = "";
 }

 let agentPersonas = setupAgentPersonas();
 HCI_PERSONA_TEXTBOX.addEventListener("keyup", agentPersonaChange);
 FAKE_API_PERSONA_TEXTBOX.addEventListener("keyup", agentPersonaChange);
 CHAT_PERSONA_HISTORY.push(agentPersonas[CHAT_PERSONA_NAME]);
 API_PERSONA_HISTORY.push(agentPersonas[API_PERSONA_NAME]);

 /**
 *  Web App Agent Functions it can call.
 *
 *  This is a develeoper decision what to expose so
 *  they always stay in control of what functions to
 *  expose to agent. This also means they can control
 *  the UX when an agent does something vs a human eg
 *  perform actions faster but could still educate user
 *  watching on how GUI is used to learn from the agent
 * behaviour.
 **/

 function agentSearch() {
  FLIGHTS_SEARCH.click();
 }

 function agentSetTripType(value) {
  if (value === "oneway") {
    FLIGHTS_TRIP_TYPE.selectedIndex = 1;
  } else if (value === "multitrip") {
    FLIGHTS_TRIP_TYPE.selectedIndex = 2;
  } else {
    FLIGHTS_TRIP_TYPE.selectedIndex = 0;
  }
 }

 function agentSetPassengerCount(value) {
  let n = parseInt(value);
  FLIGHTS_PASSENGER_COUNT.selectedIndex = n - 1;
 }

 function agentSetSeatClass(value) {
  if (value === "first" || value === "first class") {
    FLIGHTS_TRIP_CLASS.selectedIndex = 3;
  } else if (value === "business" || value === "business class") {
    FLIGHTS_TRIP_CLASS.selectedIndex = 2;
  } else if (value === "premium economy") {
    FLIGHTS_TRIP_CLASS.selectedIndex = 1;
  } else {
    FLIGHTS_TRIP_CLASS.selectedIndex = 0;
  }

  FLIGHTS_TRIP_CLASS.classList.add("animate__tada");
  setTimeout(function () {
    FLIGHTS_TRIP_CLASS.classList.remove("animate__tada");
  }, 200);
 }

 function agentSetTravelLegs(values) {
  FLIGHTS_DESTINATIONS.innerHTML = "";
  for (let n = 0; n < values.length; n++) {
    const LI = document.createElement("li");

    const TRIP_FROM = document.createElement("input");
    TRIP_FROM.setAttribute(
      "class",
      "tripElement tripFrom animate__animated animate__tada"
    );
    TRIP_FROM.setAttribute("type", "text");
    TRIP_FROM.value = values[n].departureLocation;

    const TRIP_TO = document.createElement("input");
    TRIP_TO.setAttribute(
      "class",
      "tripElement tripTo animate__animated animate__tada"
    );
    TRIP_TO.setAttribute("type", "text");
    TRIP_TO.value = values[n].destinationLocation;

    const TRIP_DEPART = document.createElement("input");
    TRIP_DEPART.setAttribute(
      "class",
      "tripElement tripDepart animate__animated animate__tada"
    );
    TRIP_DEPART.setAttribute("type", "text");
    TRIP_DEPART.value = values[n].departureDate;

    const TRIP_RETURN = document.createElement("input");
    TRIP_RETURN.setAttribute("type", "text");
    TRIP_RETURN.value = values[n].returnDate;
    if (values[n].return === "oneway" || values[n].return === "undefined") {
      TRIP_RETURN.setAttribute("class", "tripElement tripReturn removed");
      agentSetTripType("oneway");
    } else {
      TRIP_RETURN.setAttribute(
        "class",
        "tripElement tripReturn animate__animated animate__tada"
      );
    }

    LI.appendChild(TRIP_FROM);
    LI.appendChild(TRIP_TO);
    LI.appendChild(TRIP_DEPART);
    LI.appendChild(TRIP_RETURN);

    FLIGHTS_DESTINATIONS.appendChild(LI);
  }
 }

 function refreshUserSearchData(answerObj) {
  agentSetPassengerCount(answerObj.passengerCount);
  agentSetSeatClass(answerObj.seatClass);
  agentSetTravelLegs(answerObj.legs);
 }

 function displaySearchResults(data) {
  document.body.setAttribute("class", "search");

  SEARCH_RESULTS_AREA.innerHTML = "";

  const TABLE = document.createElement("table");

  for (let n = 0; n < data.results.length; n++) {
    const TR = document.createElement("tr");

    const TD_AIRLINE = document.createElement("td");
    TD_AIRLINE.innerText = data.results[n].airline;
    TD_AIRLINE.setAttribute("class", "rowAirline");
    TR.appendChild(TD_AIRLINE);

    const TD_FLIGHT_NUM = document.createElement("td");
    TD_FLIGHT_NUM.innerText = data.results[n].flightNumber;
    TD_FLIGHT_NUM.setAttribute("class", "rowFlightNum");
    TR.appendChild(TD_FLIGHT_NUM);

    const TD_TIMING = document.createElement("td");
    TD_TIMING.innerText =
      data.results[n].departingTime + " - " + data.results[n].arrivingTime;
    TD_TIMING.setAttribute("class", "rowTiming");
    TR.appendChild(TD_TIMING);

    const TD_DEPART_AIRPORT = document.createElement("td");
    TD_DEPART_AIRPORT.innerText = data.results[n].departingAirport;
    TD_DEPART_AIRPORT.setAttribute("class", "rowDepartAirport");
    TR.appendChild(TD_DEPART_AIRPORT);

    const TD_ARRIVE_AIRPORT = document.createElement("td");
    TD_ARRIVE_AIRPORT.innerText = data.results[n].arrivingAirport;
    TD_ARRIVE_AIRPORT.setAttribute("class", "rowArriveAirport");
    TR.appendChild(TD_ARRIVE_AIRPORT);

    const TD_STOPS = document.createElement("td");
    TD_STOPS.innerText = data.results[n].numberOfFlightChanges + " changes";
    TD_STOPS.setAttribute("class", "rowStops");
    TR.appendChild(TD_STOPS);

    const TD_DURATION = document.createElement("td");
    TD_DURATION.innerText = data.results[n].flightDuration;
    TD_DURATION.setAttribute("class", "rowDuration");
    TR.appendChild(TD_DURATION);

    const TD_AIRCRAFT_MAKE = document.createElement("td");
    TD_AIRCRAFT_MAKE.innerText = data.results[n].aircraftType;
    TD_AIRCRAFT_MAKE.setAttribute("class", "rowMake");
    TR.appendChild(TD_AIRCRAFT_MAKE);

    const TD_COST = document.createElement("td");
    TD_COST.innerText = data.results[n].cost;
    TD_COST.setAttribute("class", "rowCost");
    TR.appendChild(TD_COST);

    TABLE.appendChild(TR);
  }
  SEARCH_RESULTS_AREA.setAttribute("class", "searchComplete");
  SEARCH_RESULTS_AREA.appendChild(TABLE);
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web AI Flights Agent Demo</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
 <script type="module" src="https://cdn.jsdelivr.net/npm/@aibrow/[email protected]"></script>
 <header>
  <h1>#WebAI Flights</h1>
  <svg id="talkToAgent" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
    <path d="M680-560q-33 0-56.5-23T600-640v-160q0-34 23.5-57t56.5-23q34 0 57 23t23 57v160q0 34-23 57t-57 23ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h320v80H200v640h440v-80h80v80q0 33-23.5 56.5T640-80H200Zm80-160v-80h280v80H280Zm0-120v-80h200v80H280Zm440 40h-80v-104q-77-14-128.5-74.5T460-640h80q0 58 41 99t99 41q59 0 99.5-41t40.5-99h80q0 81-51 141.5T720-424v104Z" />
  </svg>
  <div id="bookForm">
    <select id="tripType" class="animate__animated">
      <option value="roundtrip">Round trip</option>
      <option value="oneway">One-way</option>
      <option value="multi">Multi-city</option>
    </select>

    <select id="passengerCount" class="animate__animated">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>

    <select id="tripClass" class="animate__animated">
      <option value="economy">Economy</option>
      <option value="premium economy">Premium Economy</option>
      <option value="business">Business</option>
      <option value="first">First</option>
    </select>

    <ul id="destinations">
      <li>
        <input class="tripElement tripFrom" type="text" />
        <input class="tripElement tripTo" type="text" />
        <input class="tripElement tripDepart" type="text" placeholder="Depart DD/MM/YY" />
        <input class="tripElement tripReturn" type="text" placeholder="Return" />
      </li>
    </ul>
    <button id="search" type="button">Search Flights</button>
  </div>
  <div id="searchResults"></div>
 </header>

 <section>
  <h2>How to use this demo?</h2>
  <p>Use the special Web AI Agent microphone button on the right of the form above in a push to talk style. That means when you click on the button and hold it will listen to your voice, and when you let go, it stops listening. Think what you want to say before you push the button so you speak fluently for best results. Let go when you have finished talking!</p>
  <p>For example to get started click and hold the button and try saying this: "I want to book a flight from San Francisco to New York" and then let go of the button. You will then start to see the Agent's inner thinking on the left side panel as it thinks about what you said. The Web AI agent will realise you didnt give it enough information so it will ask you further questions (make sure your speakers are on to hear). Just respond to its follow up questions using the button again each time. Once enough data is given dummy flight search results will be generated and shown - this takes a bit longer so be patient.</p>
  <p>Top tip: You can even get creative and change your mind about things later - for example once you have some search results, try asking it to change the destination! You can even ask it to suggest destination if you dont know where to go like "Change the destination to somewhere cold in europe?" - have fun!</p>

  <h2>Where can I learn more about Web AI?</h2>
  <p> Glad you asked - check out <a href="https://goo.gle/Learn-WebAI" target="_blank">this YouTube course</a> that goes from zero to hero!</p>
  <p>
 </section>

 <footer>
  <p>Created by <a href="https://www.linkedin.com/in/WebAI" target="_blank">Jason Mayes</a>, Web AI Lead, Google, 2025.</p>
  <p>Note: This is not an official Google product. This is a demonstration of how Web AI Agents could be applied in the future.</p>
 </footer>

 <div id="sidePanel" class="animate__animated animate__bounceInRight">
  <h2>Agent configuration</h2>
  <h3>HCI Persona</h3>
  <textarea id="hciPersona">You are a travel bot who needs to book flights for people based on key rules below. Read what text the user sends you carefully along with your last JSON object generation to pick out any missing data you need from that text so that you can call the website's search function below. Dont ask for any other information from the user that is not specified below even if it similar themed question and dont make up values yourself unless the user asks you for a suggestion. You may use a defined default value below if the user does not specify it.

 The function to perform a flights search is described in JS Doc format below and only needs the specified parameter values to be filled out. Sensible defaults you can use are also explained in the documentation below:

 /**
 * Function perform a flights search
 * @param departureLocation {string} - Where the flight will depart from
 * @param departureDate {string} - Date of departure in the format DD-MMM-YYYY
 * @param destinationLocation {string} - Where the flight will fly to
 * @param returnDate {string} - Date to fly back in the format DD-MMM-YYYY. This field is optional. If this not specified by the user assume a one way trip, in which case write "oneway" in this field value.
 * @param passengerCount {number} - How many people are travelling? If unknown use 1 person as default.
 * @param seatClass {string} -  Must be one of: "economy", "premium economy", "business class", or "first class". If the user does not mention any use "economy" as the default.
 **/

 For each request from the user respond with a single JSON object containing what you learnt from what they told you and use the value "undefined" for anything you could not figure out. For example:

 User says: "I would like to book a flight to London"

 You reply with:

 ```json
 {
  "legs": [{
    "departureLocation": "undefined",
    "destinationLocation": "London",
    "departureDate": "undefined",
    "returnDate": "undefined"
  }],
  "passengerCount": "1",
  "seatClass": "economy",
  "followUpQuestion": "Where are you departing from and when? Is that a one way trip?",
  "results": []
 }
 ```

 Note that the legs property is an array. This allows you to have multiple flight details in the array if they need a multi legged flight to many destinations.

 Also note you asked a "followUpQuestion" because some of the object properties you need to fillout are still undefined. Only ask follow up questions about the properties that are set to "undefined". Stay on track and the text you write here should always be a question asking about that proprety value that is missing and double check you are not asking something you already know the answer to in the JSON object.

 Here is another example JSON object you may have written for some different user input:

 ```json
 {
  "legs": [{
    "departureLocation": "undefined",
    "destinationLocation": "London",
    "departureDate": "20-Apr-2025",
    "returnDate": "25-May-2025"
  }],
  "passengerCount": "1",
  "seatClass": "economy",
  "followUpQuestion": "Where are you departing from?",
  "results": []
 }
 ```
 As "departureLocation" is "undefined", you proivide a question in the "followUpQuestion" property to clarify the missing data.

 Dont ask a follow up question if all search properties are specified, instead use "none" string as shown here if everything else is known and not set to "undefined":

 ```json
 {
  "legs": [{
    "departureLocation": "San Francisco"
    "destinationLocation": "London",
    "departureDate": "10-Jan-2026",
    "returnDate": "18-Jan-2026"
  }],
  "passengerCount": "1",
  "seatClass": "economy",
  "followUpQuestion": "none",
  "results": []
 }
 ```
 Only use "none" if no other property is set to "undefined". This is important.
 </textarea>

  <h3>Flights API Impersonator Persona</h3>
  <textarea id="fakeAPIPersona">
 You are pretending to be the Google flights API. A user will ask you to generate example flight search results by giving you a specified JSON object, generate at least 5 pretend but realistic flight results using the JSON object information provided by the user and respond as detailed below. Never change the original user's data in the JSON object - copy it exactly and only add data to the results property.

 Flight results you generate should be different every time you are asked especially if any JSON object properties change from earlier conversations. Use the users latest provided JSON data to generate a new array of objects with different values containing the following properties:

 * airline
 * flight number
 * departing time
 * departing airport short code
 * arriving time
 * arriving airport short code
 * number of flight changes
 * flight duration in hours and minutes
 * aircraft type like Boeing 737
 * cost using integers only

 Insert those newly generated objects into the users provided JSON object under the property named "results" and be sure to keep the format exactly as shown. For example if a user sends you the following JSON object:

 ```json
 {
  "legs": [{
    "departureLocation": "Seattle"
    "destinationLocation": "Paris",
    "departureDate": "20-Nov-2025",
    "returnDate": "29-Nov-2025"
  }],
  "passengerCount": "1",
  "seatClass": "business",
  "followUpQuestion": "none",
  "results": []
 }
 ```

 You would add and fill out the results property as if you were estimating flight costs and details for 1 person travelling in economy class and were asking to fly from San Francisco to London, as shown below, keep everything else the same as shown:

 ```json
 {
  "legs": [{
    "departureLocation": "Seattle"
    "destinationLocation": "Paris",
    "departureDate": "20-Nov-2025",
    "returnDate": "29-Nov-2025"
  }],
  "passengerCount": "1",
  "seatClass": "business",
  "followUpQuestion": "none",
  "results": [
  {"airline": "Air France", "flightNumber": "AF456", "departingTime": "10:00 AM", "departingAirport": "SEA", "arrivingTime": "6:00 PM", "arrivingAirport": "CDG", "numberOfFlightChanges": "0", "flightDuration": "10h 30m", "aircraftType": "Airbus A380", "cost": "4500"},
  {"airline": "Lufthansa", "flightNumber": "LH123", "departingTime": "8:00 AM", "departingAirport": "SEA", "arrivingTime": "4:00 PM", "arrivingAirport": "CDG", "numberOfFlightChanges": "0", "flightDuration": "9h 30m", "aircraftType": "Boeing 747", "cost": "5000"},
  {"airline": "British Airways", "flightNumber": "BA145", "departingTime": "11:00 AM", "departingAirport": "SEA", "arrivingTime": "6:00 PM", "arrivingAirport": "CDG", "numberOfFlightChanges": "0", "flightDuration": "9h 30m", "aircraftType": "Boeing 777", "cost": "4000"},
  {"airline": "Emirates", "flightNumber": "EK217", "departingTime": "1:00 PM", "departingAirport": "SEA", "arrivingTime": "10:00 PM", "arrivingAirport": "CDG", "numberOfFlightChanges": "0", "flightDuration": "11h 30m", "aircraftType": "Boeing 777", "cost": "6000"},
  {"airline": "Qatar Airways", "flightNumber": "QR189", "departingTime": "1:00 PM", "departingAirport": "SEA", "arrivingTime": "10:00 PM", "arrivingAirport": "CDG", "numberOfFlightChanges": "0", "flightDuration": "11h 30m", "aircraftType": "Boeing 777", "cost": "5500"}
  ]
 }
 ```

 Do not respond with any other explanation data only the JSON object as shown but be sure to add results every time with different airline names, aircraft types, durations, times and airports. Results should never be empty. Be sure to check that your JSON object written is valid. Generate at least 5 example flights or more in your response. You must always specify the results property in your response!
 </textarea>
  <h3>Simulate chat</h3>
  <textarea id="chat">I would like to book a flight from Seattle to Paris on 20th November 2025 returning on 29th November just for myself flying business class.</textarea>
  <button id="chatBtn">Send</button>
  <button id="eraseMemorytBtn">Clear Memory</button>
 </div>

 <div id="nerdyRenderPanel">
  <h2>Agent thinking output</h2>
  <p id="sidePanelInterface">Agent thinking for the curious folk will show here</p>
  <h2>How does this work?</h2>
  <p>This demo, created by Jason Mayes at Google, uses Web AI large language models to power this experience to provide Agent like behaviours. That means the AI model is downloaded to your machine in the browser and run entirely locally - so no calls to the cloud - keeping costs to zero and your privacy is preserved.</p>
  <p>Specifically the Google Gemma 2, 2B parameter model, is downloaded and executed powered by the MediaPipe Web LLM library.</p>
 </div>

 <div id="preloader" class="animate__animated animate__fadeIn">
  <section class="animate__animated animate__pulse animate__infinite">
    <h2>Please install the AiBrow extension</h2>
    <a style="display: block; margin: 0 auto;" href="https://chromewebstore.google.com/detail/aibrow-local-ai-for-your/bbkbjiehfkggfkbampigbbakecijicdm">
      <img style="width:250px;" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAfAAAACWCAYAAAAhdtoVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAJq5JREFUeNrsnQuUXEWZx6vn/UhCSCZoECYJkCCgJwMbnrL4ADmLcFj2sCzKUViQXREQhANHFBaEQzzZxRUJopyzIUhcUIy6wopRILxMCAssTI4LmIRHJoEQYSaSSaYn8+ztf3Wqp2513Xvrdt/uuT3z/3naDN331q1bt2796/uq6ishCCGEEFJ1pPB/G1/fnGFREEIIIdXBgkPmpurUf8w/eA5LhBBCCEk4m97okv/WsCgIIYSQ6oMCTgghhFDACSGEEEIBJ4QQQggFnBBCCKGAE0IIIYQCTgghhBAKOCGEEEIBJ4QQQggFnBBCCCEUcEIIIYQCTgghhBAKOCGEEEIo4IQQQgihgBNCCCEUcEIIIYRQwAkhhBBCASeEEEIo4IQQQgihgBNCCCGEAk4IIYRQwAkhhBBCASeEEEIIBZwQQgiZpNSVM/GRkRHR19fHUg4gk8kkMl+tra2irq6OD4gQQijg1StmE0mYXWlqaqKAE0LIZBVwkEqlnAXP9VhSfvgsCCEk2XAMnNY3IYQQCjghhBBCJo2A02IlhBBCaIETQgghFHBa34QQQggFnOJNCCGExMC4LfRNkngjL8PDwxW5X6yt5hItQgghVSfgSRLuoaEhsWfPHtHY0CBqasrsjNgr2rjmwMCADJRSX1/PGkgIISSZAp5UN/ng4KC0hA866KCKRxyDtb9t2zaZh4Zs54EQQgiJyqSchT46OipFu729fVzChapr19bWyrwQQgghFHAHEKP9Qx/60LjnY/bs2TIvhBBCCAXcgcbGxkRs1IE8IC+EEEIIBdyBlubm5OSlpYW1kBBCCAXchZEEjTtzDJwQQkgxTMoNnzELPAnblyIPWFZG/PnTho3i1w8/kv/vKy67RLS0JMODkk73i6V33S3zeOopnxHnff6c/G9Lbrtd/tt+4AGe74thy9a3xQM/W1l0eqWeH/VaKJN0Oi3OOvMMWS5JQD0PcN21V/HFIhTwagWi2dfXJ6ZMmTKu+UAeKODBPPr4E1IgFS91dooTTzg+cXnD30cduVB89NAF+Y5HfB2FdEnplXp+FH798G9Ed3eP/BudhqQIeKXunxAKeAXo7e2V/7a2tlbcEoflDfHeuXMno7KFWLgvvbzeK5qPPZEYASfJAOL8pw2b5N8nfuI40TZzJguFUMAnMhBOCCisk+bm5vJHYtsLxrz7+/tlEJdKXbNaWfPsuoLv4KLt7ulJRCMN6zInHjkXurK+JzNwm+MZ4b0qp6veK+CbpOUPPnrofAo4oYBPBiCgWIe9a9euWKzqKJ0HireDgK9d5xEG1UjDCq+UOASBsXiOp3rBGPt3l9zKgiCkEhrGIsgJaimfqGmQcGDF4aNEQR9LfalzPQuIEEILnEVAkggmhSlO/exnpLWLSWIYE8ckKfyL/85b68+uy36/Q/6N7yH6vpa9dqw+ZgrXPKx71XFQID2Mu9tmv6sZ8m1tM5zH5ou5jgnc9igjzBMo5nxbemuefS4/AS13TzOz6R0XaWgA97Zm7XPyb7iz1bm27/Ec1HfKoxFlKEI9R32CGu5BjYcHPRPb/bqUX1zlRAgFnExYXnq5c6xh7ejIN7BqUhuscF3AIWTKxb5l61a53MxPYJYtX+ERDCUGmDWtC6IplkjT7BiMjb0ucBLwsOsgveuuvdq3A4LvsUzLnNwXls8glt27wjNckWdDbhgD5XzxhRc4dQwgbKpMMOyRF3Dte5Q5ysDswOSe+/psp+r47PXODy/Ltc8VzC7X78P2TCC26HSpvBSIc/Z8lL95r/qSQb9ycs03IXFBF3qJJHW3tWoGIqcEDuKhGlPdOkKDqYug3lBDBGwCqX4bs7g6ZHr4DqKun4PGXxdBCNCS274nOwDFgsbfdh3dcsNvuI5N3FTZqHtA3v3y6Xd+mHhD4JAm/tXLDOIVp3dFHx4xLVfkx9ZBiQNMrlPibbtX5GvZvfcVnIcy1cXbdi7yjfIkhBY4mcTW93qrMCvRVYKjrwmHmMECUr9B6GxrkD2uec36zl8vm8Z5556T7yhAsJf+4O69M6v7pfVWrJUF1+vYfXitWuUZgEgob4LNi6DEH9btWWee7hWe5ffl84m/b7np+tCOkiov5AP50b0ayEsuKEv/XtfxutiW8OUmAI55GsyOC66l58UGJjJCkFGu6j7wnUrTFqZYlR+O0+sH6oUKdiOHabSVDnjmKl/IN56L3umQHcCs6CNtaYnTnU5ogdP6noyg4dQtTLMRR+OYb3Qfe8L3N5tLGCKkxi51yxUNMj7KBaq7T9GI6y5V3bUfFaSNWes2lzSugzwoiy7IAoX46OKtLFnkU50PwQmzYs0Id2ZZo4z0ToR+fKmYbn4pjJdfYu3E+aGsd33ZmPrO9Ex46kn2OZudO/y32XkZE/fV+b9RxqY44zx0qGydREJogZNJaX3D2jZRbksIsbkm3PwNH70R1y1gTF4zG2E1sUpNcBu75vxsOgfmreNSyAlLLi3TzY28HtWxMC8AZv6l0Gfvzy+6GUQQwq7G+M15Ajqy7PZ2ZpTo+0UrU2WKD+6/1FC2Nre56sTg+3JHTTM7P/qzUfVP1QF9OAa/+0W1059Tudz/hFDAaX0nGtN6sVl9+m5y5ppwXcCQlnJ356K6deaFznQF41i4rUsV6DCCJrGZQCxsIhNEbsLfir0i5D9er/+WGze/3Sn/mCBYqnvY1jGrJH6BXmwWu97JgnAvuc2tc5GUYEOEAk5IRdCtQil2tpnRFkHUBRwC1tKyckyw9wo4xsuVaJribZuVrC9/ChLCqOKtOhe6aGCs1vU6YaLgah27TnIjxYFnSQEnFHBa35PW+nZBxUtXruLcuHlHfpa6mnilj5djXbluKenibU5iU8fAQi1FyJEXNUkq6DpqIlsUq9y8jpMV2jbDkxd9/kAQcP9PVsxxcpYToYBTvMle9AliYduG6vGvzRnLaGjzM9Wz4g5rWlmc5qQnXZRhDdtmmON43W1fnHdha15cMabsd53QMupcHxhGVhf/oPLTr4VOAWdN+wnxmFs93d/PciIUcEJM9LXfcjJXiKUDC0cJuJpopAQL5+Njm4kdtL2lX+OMNOJ0OfsJtdoYJQh0OOCp8LsP3ZsQVIa4V5SX8mDgurb7V8u78Bs8F0l3C6NjF6fIepeLdYot2XK3jZWrcoL3hzuikUrBZWS0vhNifWtrvz8RvtbYXGJm7lymu8lV2rB8g0QNaZhCrdb4loq+JhnWuHkdtebaBYi0eb8qUphKNxfeM7gcTz3l5Pzftihj0u3/YC5imr5OOmnowwFxz2BX8QVsZWyKN77Hs4lzuR0htMAp3olGX/stBdwxWIgeWhUuc90q1SezBaWrLz3DsTfevDi/hti21KtYdK9AqdfJBWpZIcf1kQbKz1zi5hJsBjP2pVW5N08Y51dLvMw0c0vUzkhk/dFn3iPPl15xteww4T7iCG2KuQoqhgA+6tmpJW/68AjKCccTQgucTDrrWw+dGoYeWlXfvWzMQvcuVzLXfivM8XYVU1wP9xkltrgfF190Qeh1glz8Oat5zIWrLGN9rbKMqHbR+c5uZDMwiV+aQfHZxxt1z3oHJ7fhTWcsywJV9DX9/lXcer2Tg46gLY46IeWiFv/3tSu+/u2ZM6bHnjj22u7v76/6QpqM1jcsmNra2opc693t2+WYNoTk2GMWeeJLh7HPPtPy5+Jv/dz29gPylhjE20/UcB6ui0lK8qONxX/6UyeJr37ly6K+oT5/HW86qdx3H51vzDwu/B7X+fQnTxI7e3s918kFZzlZXPCl82Tj39bWtvfcBTnXe0rk7+PjHztcnHP238n/3rmzV6alRObYY46WeS24T+18M5/19fXSRazK7d3tf/Z4DeT9//PF7s9Ev9ah88fO8/vecr69nMM8HLlzRColr4P0Z8/+8FgZqucRlG5AHuWzy5YFvpMdhJ6egnJCdL0odZeQYtnxl53izqXfv1luTr3x9c2Z+QfPif0ig4ODoqenp6oLarK6ziEiDQ0NfFMIISRhbHqjSyw4ZG6KLnSKN++dEEKqEE5ic2B442s5UUunxcjbXdZjag9oF6mW1lyhLjiMhUYIIYQCXilGe7rFyNYuMbTxVTG8pUuKdcYa+SoTZLrKf1IYQz5wblbY54j6Qw/L/j1H1MycReubEEIIBTwOhjr/NyvYr8l/R3vedxCwcPFW1vrwhlflZ2D1KnkaBLz+yEVS0Os7FrH2EUIIoYBHAVb2ntW/F0PrXyywsOMQb7/T0EEYeHyV/MBCh4g3nXKatM4JIYQQCrgPg+v+kBXu30kBt2tw5VzH6DgMrn1afiDgTZ89TTSc8MlxLyO6zwkhhAKeKOHu/+9f5V3kxQlXadZ3mEegb/ndov/hX4rmM89OhJATQgihgCdauMdNvC3njXa/nxXyH2WF/BdZIf/7igs5rW9CCKGA5wVhdHS04jc18vYW0b/y/vzyr2ANTYZ46yeNZIV8d1bI69Y+LZr/4UsVGyOngBNCCAVcglCczc2VjQu85ze/EkOrHpI3VtfaUpz4uogwfsz4/5Yp5jzzeyxp+/dbRd0ZZ2Ut8nMqKrg1NYzxQwghk1bAKykEcD/vWvqvYmTLZpEKNzVd7NHi08gI3zxkMpnI19sDb8Lzz4qpV10vambtVxEBT6VSfDsIISTBTAgza/Cl58XOG6+R4h2uy+UXbxGjeKtrDXe9JT741pVi8MXnWGsJIYRU/yS29AP3ij2PPlIZ4S6LeLtfK5PuE7tu/45o+pszRcsXvzxpKim2bPzThk3yb7X3stpRCrtGYScqbuFIiDvYNja3ZWxa/o0d1bATG/7Flr6EAl52+pbdJQbWPJl48S75ugZ7Vj0kMn27RetXrpywFRPbNf764Ud893SGqOtgS8yzzjxdtM20b+eItLB/s+K6a6+KtF0lGZ86cM03bsj/N54Xnlu5ufSKqz17of9w6fdiTX/Jbbfn62+l7kl/b5bdu0Lul+73PuGezzrzjNC96QkFvDjJy1qivUtuCneZO1u95RXvUlznfgw8s1oMd70ppt3wnfwmKhMFU2xdWLN2nfyg0Tnv8+fwzZ4AoDMGixAWohIZCGs5vS24lt5hPOrIjkn3XuH+H/jZSlkWF194Pitigqm6MXAn8Yb4VUq8Q08t3XXu99tI11ui99ZvyTKZCKDhuPHmxYGNDBrvtraZvr8/+vgTMg2b1U6qD9NLYnpeymGheq8/f0KU45pn1/m+V34dInSIYa0HlZX6qE4WoQVeunhXUriLHveOZwa5EvFqt8QhuEtu+15BQ4DG5cQTjpcuclhjOnCxYhwPoq27BJEG0rrlpuv5hk8AAcfz1UXDZYwWdWPN2uc0S3phQf1xE/DqH2ZRFrXHu5HtBJ937jmessR7A5HHO6WL+FEdC61ljqEAvZwqORRAqlDA0w/82C7eka3cBIt3JvpvEPH0imWi9ZIrq7aBsYm3GofzsxDgYsXv+JjuwVM/y/G7iYApHK4WOERIrw8QdBd3sJ4+RM5vTkW1Wd+6RwodmeuuvbrgvcL3V1x2ibS6IdwKlCMntiWTqnGhWyesRXKVK+GcWOKtksSYePony6qyEqKB0MUbDQsaEkxKcx3vxLEXX5RroPEvrHYy8UQc9QRiHCpamgDlBL3TSbw9498dE0O0zE4P5ogEvVfo6MCixjHoHF9x+SWshLTAi2dgzVNj4l30eLTjeWHpFz1hrXzirdiz6mFRO2eeaDzp5KqpgGiMdRdprgG5oKgeP0QbDc9EsJrIGHimulsXghTUQUOdMr05EGakEVSv1FJF/boTAXM+iMt9oRPc0tzC5ZkU8NKAyzx9//LxF+5yinecL+uKZaJuzkFSyKvD+vau4UePvxR3XbHinZt9nN7rAWhxGi91SdMlHf3aIK517brlFZYmGnmssY8jD94lSaWXZeFEtk2BAq6Lvef7zjABjzb+jY6CPvciruem14c43PhmnnCfYfdWqU5wucoQ9Tndnw69D7PeV9uwSaIFHJPWdv/HnUXOso4gmOMt3pn4NkyRZXb398W0f0n+pDa8PLqrU60/rXQH4tHHVxdYKXiRIRJwzdvAuKI+SUpN4MH3jz72hMcCRFrfXXJrQcMVtM4dooeJe0FrcdVSH3U8XKNywtKDK63pQrxwjN5AoTHX0zGPx/NwnfwFT4pNPPFcsRwraJ1+ELg+ylA19GHj4Kb7fEzYO4UIGAf3dngOsAoJyhT3iedsrqV2fW5+QuZXH1RdDJoPEsWDgedtGwN3QZ+45u10bC34DXXNVnek1y37jqBDZStDl/v1q/u2Z4PnYc5/UHMkbPW+1PpKAd9L/3/93C08ajmFu2TxLiEPRa49H+l6U/T/8gHR8qV/SnTlMxtivDSVctmpJWt+y1/QAORm5HZaG7vu7h2e/CO9pXfdbRUXsxFDA4MGKGipG/KFY9AgYT6ArSHEMfr11Ox7v3TRaOF43A/SMycrhR3vR1g6qqOGT7HzEyBCa7rX5Z+Nn3fDdJ/rwh/kRrfVRVt54xnbRMd8brl7vcCp84M8Lbv3Pt/npuoi6o1fXQgC96vPQkceb7xlcX6su5R3Vn/G5m+6VylK3Xe5X1vd93s2+lJAXBdl7eel0esr3n10DJI8nyaxk9he6HlDbF77u4jCnUTxLu+4t9+PGA8ffu2PiRZwUzwrOWnIr/dty6NL8Asc49e46dYYrKxly1c4r1NHg2SboW8TriDxNjsayEeQ6JrH+6UbJt4Fx2fv3Zzz4CRCHW6z0c2GGUulPL93rvcRpk2+jb7eOQoSb+vxIRPu8HtQ+RZTFwos2qwVaXq2cmndLjuxchlmT0/Z3zkIcjnqPvATb2lNd3Tk6zLSCxJvs+4jv8g3LfCI3ND5U7Hfopnijqf/HI+1HbNwl1W8YwKu9Ol33FM1Fnh7+wEVu7bufkPjBksEY2ZbtrxdIO5o4LAsLcidposS0lKWDVyL6m9zaZOyEOGqw9gf8oIywXH60h/V8Hx3yWJfD4XeeMHiQqcB10V6a559ziOyysKxHa9iZHuWYGWPf6mzs8ASsXUC4K488YTjZFrSGs6WJ8pGf9awwHCvUaw/W0AXm5tazw/KVq3/Vs/Tz40eNP6da8i9FrIa7sFx6rmhE6APx8jOzw/uDoxHoD835Fc9B70u6HVLdahuufH6SN4q1DFYxGbnSXkM8MF1T/zEcYEWp14uZvhV1GGveLZ4joUYmnXfdr+2uo8y9Hv/bGGVcSzuF3lQ5WTrtKs5N6ru4301h8BU2STRnZ5IAf/Rxt+LbekdYtusJrFm/xZx4rZ0aaIdVTDHW7xLtL4Vo++/J/p/+VPRfPYXRDVQ6RfEXA8ro7xl84CX1ez5Y7zbbzxcb8Tg8rMJk3LdmQ0NLES9IVbij990i1qNbYetZYbLTxc2lR7u1QzmofKgp4nj1PivfjwaVr1hz60eWO1Jy3SPoyzxQQNZuLb4kWzZuwt4TiB0IV5vtWb1Z6asdtyjuhfl6g2K8Ga62CF6erq2ddSqnFH2et3BvxCkMDcsronVFy51AaKPPIXVR1vdUM/CZq2qqGooKz/XsR6s5R8v/qpWJgcGBnIxI7oF3S86y+j4qDJUlnBYoBi5jv3yS6ztiJqjodcnc2hI1X3ct15fcX3U1ySGlU2cC33XUL/4yZvP5P/7zo59xZh7vEiLu6LinUmEeCvkxicTJNRqnKgX2GbF4DsznrpLABE/8c65br2Tk3AcGgQ/K8omEmhQglydSkBs2L7HNfwaJXMCkXn/sFL0+4E1GiRS5nhrMeE3zXFpM0+mqEP4bIJsHhc2+1zvqATVG/U7xr7NsgoTHlPMbHXBL09RwL1hQiU6W34z8pVgwsUeh2vdnFQWdr8QYLOM8YyC8gJrHuf4GQHwQnnrY/D8BHSs9ZDNePeSGJ45cRb4T956RvQOjRXUuy114t7Dp4sLX/2gfBa3g3BjRnfdnHnyk2qd4v1tpE/UDG4WtQNvidRouvJWeSADoqbrN2L0sHOp2nrjnhWbIBekCmTh+tJCLIJcwvqMdWWtungITj3lZI87G+ITRaTNe9LFKixaHawqdbxZDvpYcs6dHG4NIn/69XEvUSZkQXD0soDLWi9z032u0jY3RUHe9Q5a0Prv3Jab/c71Rj035FV1FMI6Kuj8uKSJOqZbhWHr2sPqPz4ynWznEvXT7MjgvzFGHuS+dqFgXkJIIBm9E6273YO8YGFBn/S64bJlqgpio3uhXMP4TloBN61vxcr508RpXbvFh/uGKyrcEOumk04WDYuOE7Wz9nOyymuG3xd1fS+I+l1PidqsqDv3EEpxyYecl6lZJXaOnpH9N1nLymQPd8PYf7uum44Dl/FXXcDC0wve9MJcouTaIGJMUhetIDGI2rioyT1BomG7fzT6pgvWb3mR9zxv51Zff+uCcu0rQcV4tmrQ/dznegdLNcbmLPbCsdwDfMsbx7rcq2kt+q29zi1ZcntumFugCxHyVqqg5PcayH6QZ5SRLriu7mvXuo933nXuQ65+rjDSOT3y+1wwO76/v8j6+jYFPMz63jVUaPHsrq+RVvg3X+iO10L1OQWi3XL2F0JF2xRvMFo3Swzu8zn5gZg3/mVlVsyfHDfxlh6C0T7R1Ptb0T89WdtsmiKGBr1SAh73crUoFkqUyVtmuq6zoOMoA30SUpDw2pYQuVCMS1Jf06y2/sR9+LnP9c6Nbk1BCJUV7h3/7gi817h33TInfkWpN3HPHEddwzCQmi2uC2ApnWv9OUd5T9TOgy51Pkq6SK+Y98i2LG68SdQYuM36VqyaM0V0zmoqFL7I8dCF7zB1/eEfFzPuWCamXnJlUeJtAjHvn3Wp2N3+QzHSfMS4iLeisfeRxFU+szdrupknKn7CGOipINY6o8TXz32uN/D6d2oIIGz70CRvSxtnZ85r6R9fsOzMdelVnJ3XqMJc9vKuwFK7qrXAH9r6gtX61lm6cIZY/tg7xV/ERwsxvj3l/Iul5e3C5uxzTA/ktLe1MSXmzAwWWQh53+xvS7d6U8+PpUVcSfFWVnjD7qfE4JRPJaby2SJsVdKNXi0NQbka6tga/L1Lx8rdkbEJAOoMlh8Guc/1fJpu9LD456aXolhXchRLuxwdOxUy1Nl9bcw3iDrc4UeQG7xSoukXIa4aO9KJEfDV2//oI0VjYrRper1YNXeKOG3z7liEWxbAnHlZi/vr8l8bfYNCvPhWSryyTYhXt6XE+7vs6c2aKsTh+2fk55OH2i84NPVTYrRxrmh67y454a084u1PQ/r5RAm46u3rDQXW2070fby3bHFvDM0GLAmNiE2MKrXxh21CmlkmfuOUNje6GbXNtPhwr7r1GVec/GKE0fQWuFinuL9ciNvcbmxBsQTMznVcngh93kIUQbbNtYgDpDtRNqpJhAv9nfQOKeAZy/8KrPCOGXJM3Fm4Q8R7+r98xyreEO5fvJgSX7u/RvzwyZR4eoO/eAP8hmN+9GSNuOje2uy5NTINk5GGuSK9/7fFSFbIyyPe/ufWZwUc4/JJwlyuhAbHXDMaBYzfYeZs0lyfeoPhuiVmTmSeC2xYxwM1Nqnwi+duazjjeC56Wao10Xre/BpnmxvdM/5tsdwLwuA6Rp1zvU81m9ytbkevCyqErSp71yh4Zv0sZc6I+byc93Tv7Iylk2ie5xpZLa76OuEF/Int7iE/Id7Lj5geLtohGqjE27bhx2//mBPulVkB7xuIpqs4BOeslOJfK9MqOKamNSviN/uIeHnEW/0GEU8Sct3shRcUNDoQ8agvjwpTGhYTfDwwrUIzKpW/9bTaybqs+P1oYucqDGg4L73iavlsS5kMVjCZyxOFriPkOXRYz/MTCLWcUL8Hl84XYo1fc90NslzC6iE8UGHHyIAwxsY/LnXBnMznGkLYXLteyhCAmU9bQCGbeJrHYUVGHHkwO31+IHDSNdddL/ORxPHvxAj46u3/F+l4LCvb3loXWbQVEO1pV19fIN6wmG9+uEbct9Yi3EVsWIY07ltbI9M0rXGIeP+Hv2Es7SqveIOGhAm4ernMNcxorNAIuvTW1dIec7kVXsCkYK4flqElAzop0hNhhO9UISIT4Tkx1pCj7IMaRT2mvHy2Ny8uulEMEq6wePpB5/ot88JafF1Y9ChhNlSkM3xkmNKQepjzOt0XWBfQIfV6rtzm69hC1obFA8dzNJ+lTTx1D0BQoBXUfd1jozYe8d28xRLXv9RQpmb7IjecCbDEc7sNrst3TlFfk8i4j4Fj4toLPa9HPm/xojZx51Pbi7qmbZY5BPaWrNBu7o5uEIcdgrHzmx+qETedOSpaG8e+l7PU97tMtGz/tzKKt/HA97wiJ7QlbU243A6wv78gZjeEWca07ljosYZyk3Lelu5bW2Mqtxg8NznL5pSnAQ2X3klBwxcWC12dn6T7URtk6J0mtYYYjSUmlrU0t8gxXjMWu2pQS2mQ9UApUaxSc+Kk/r2fmxh51aOJKUGFMKk42hAdGa7TiKMNXILc4F5u3LrYWhdMMVUxxF1B0CB9WEnFU1exz9VzUOPlZtngHm3Pqr39QM+94l1V+cI19PtGJD597bW6XzMWuhlPPv/uXFRaGFNcw6wz8IKpEMGqkyPLvHN9QX2t9DbHVSPgz0cQb33J1suzGsUfPtIi/vqddKTzmz55smhcdFy4eMe354mcbL65OyUtcVPEh1uPkZPbQteKxyjuEPGhlmMSVxnxkqOhMDf8UC4v1/E7W5zlJHka9PvAvYW508PCd44XaKAhXHpjp+Jph4moGaq2mAbZFPAw97lupZt1KehcFePejE3vUichPEEdFb0z4VoXkJcodUGFJjWtWtdnZQ5x6c/f7HDrbm+1kYx6XigL/f7M4/3A/cbhecJ9LOn27nGAOhQ2B6GY/d0rxbi70Df0bvMVW/NjsnThvs7CjQ9c5lPPL9wj2yPeEVzxruKtUCJusqftwhIs4kzk3+o8EeKSBRoFzEIvZsIKGkO87FEbuEp7GtCQueZPxXhO6tI6dLqiNG5o1M243sV2hmzC7II5LpwTmPmhQiZjbTuuAlBWY9gmJip4ikt9KKUu4Jyo75V6VkExy4Ms4wI3fLYsotb9YtuCoI5wlHkkqNtJ3MQkORZ49yaHnb3svNtaJye0XfTKB6EWu3yAn/vbgnFvzDT3iHdMwm2Kty7iK1+sEecsGh07Liveg9PPEI07Hiy7eCsLPMnkGsur8lthyvE1n+Ukataxcmf6NwYzPA2Byxpkc6eiUtPTGzKci0l3fjO4lZs0KPZ21IY86vHmPQZ1SlD2ueVK630tZrV1YxyoXc70snNNW8XCNsdYXc7DRiC4T3MJml4fYc2jI+pnNZr1Cnm5pf163/qAuoB6YK7YKKbM1Hvl96xU/tWWsC51GS5/tWWsek+RTktzs2/dx1CDOUwU5X6L7dAqD0ZQGejesqQvN5NTpDe+vjkz/+A5sSc+PDwsdu8OXrN97KpvhgZwCWLK0Kj48WPv5uOk+3UGINxtd97jEXAs/br8/ppIw89RrW4/7vriiFw7ns/faJ+Y0vXVsSAvZRJv+WuqRXwwJ9hVN3XqVFFXl5xIuyoQhfmiJ3GP3qjkQoKmtcbpwMR6EFwo2Oe9yu/HtU7GtUbcG5u9pazel0peywaGYMw90Sv9ToftRpdENr3RJRYcMjc1ri001n+XIt4Ay8ruOXwf8a3nuwOPazz6uALre+ULqYpY3ba0fv5CjbjsM14rHOPhbmPhJUx4w1BCpk/UDL8nRuv2E9VC0PreameiRZ6bqM+pUnWykuU33s9K7RnP+loc4zoGvq1/R/E6pH1+O3eKeHm/pmAB1yauwUp/rzcjA6+Mh3iDp1RgGI2h1mNiyI3blqVJC+hCCCGkigQcFngxgm2TKERoC6Lhr471TIZ7ekON8zVdhDtTxHKzp4w8DIcKeDzinRPw91j7CSGEAh6fgGd8PmFsmt4g46TbRK3+8I8VfPvi5tKFO4rVbTvseUs4dN9dy2IUb1BLC5wQQijgpRBVqIO440gVJ92bYsNhH/cclx7MzQYvVbgzJQZ5QR48Ed9ghTd/rOziTQghhAJeEq/tfCe2tOAa31WXEvccsU/Bb+bkNVO8o3YeMjFOfNvcY+SlpiU+8Q4gfDc0QgghFHAfdg0XPwPdL8jLz+dPk+vDdermziuwwIsV7lJc5raD0oYFPtowLz7xDsis+3I1Qgghk07AR0ZGYrWwg6Ky6Sw+ui3Y6s1a4OUQbmd7OOPvDaiEeFf62RFCCKkyAR8dHS0qyppLGNUgXp7VJJ75SEss9xBFuKOKd/EHlVe8Ud54doQQQiapgCOS1+DgYCShzsQ06Wrpwhma+ez9raUx/BqxW90+B7rkpZLiDfDMkhSFjRBCSIUFvL6+XoZTrTwZ8W5rrVh+eG5C22jaO947d2Z8wp0p8cC5prc/cGy6/OIN8Mzw7AghhExSAQfNzc2+In7YPh+JTbBti9EeXJCb0DbS9aZh9ZYm3KVa3TqtDd7/rh18qyLiPdIwz1e8m5ub+WYQQshkF/Dp06fLDU1srvGp9aWMU4evHseacOxWNvL+e4YFnhEtDWOiHVW4MzEdiH3B57YZEdKG3quI5Z2pbbUkk5HPat999+WbQQghk13Aa2pqxOzZs8XOnTtLcKcXE5stB+Kk/8/7mwq+P3pupqgcxGmeHz3PEiGt/5VoV43RbY5ntP/++8tnRgghZJILOGhsbJQiji0Td+3aJQYGBqS1d8zMQ0JEOo74bELcfsBQ1gr/c6h4xiLcEdaJm3lAfPKxGOUuCRVfNkNNR8hngGeBZ4JnA/HGsyKEEJJ8KjbVGMLQ3t4uent7RV9fn/zs7NkhUrsGyn7t12uF+M/X14nTUyfmv5s3VYjptTWiZ3dpVnTUw5XmzpwixEFTR0W3tgtqfe9qkd4xEkunJUzcd9f/RTTsm5bWNoY5pk2bxreBEEKqCBlFZOPrmzPzD57D0iCEEEISzqY3usSCQ+amONhJCCGEVCEUcEIIIYQCTgghhBAKOCGEEEIo4IQQQggFnBBCCCEUcEIIIYRQwAkhhBAKOCGEEEIo4IQQQgihgBNCCCEUcEIIIYRQwAkhhBBCASeEEEIIBZwQQgihgBNCCCGEAk4IIYQQCjghhBBCASeEEEIIBZwQQgghFHBCCCGEAk4IIYQQCjghhBBCKOCEEELIJKVO/bHpjS6WBiGEEEIIIYQQUi7+X4ABAMFjeBETWIg8AAAAAElFTkSuQmCC" />
    </a>
  </section>
 </div>
 <script src="js/app.js" type="module"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 button,
 hr,
 input {
  overflow: visible;
 }
 progress,
 sub,
 sup {
  vertical-align: baseline;
 }
 [type="checkbox"],
 [type="radio"],
 legend {
  box-sizing: border-box;
  padding: 0;
 }
 html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
 }
 body {
  margin: 0;
 }
 details,
 main {
  display: block;
 }
 h1 {
  font-size: 2em;
  margin: 0.67em 0;
 }
 hr {
  box-sizing: content-box;
  height: 0;
 }
 code,
 kbd,
 pre,
 samp {
  font-family: monospace, monospace;
  font-size: 1em;
 }
 a {
  background-color: transparent;
 }
 abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
 }
 b,
 strong {
  font-weight: bolder;
 }
 small {
  font-size: 80%;
 }
 sub,
 sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
 }
 sub {
  bottom: -0.25em;
 }
 sup {
  top: -0.5em;
 }
 img {
  border-style: none;
 }
 button,
 input,
 optgroup,
 select,
 textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
 }
 button,
 select {
  text-transform: none;
 }
 [type="button"],
 [type="reset"],
 [type="submit"],
 button {
  -webkit-appearance: button;
 }
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner,
 button::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring,
 button:-moz-focusring {
  outline: ButtonText dotted 1px;
 }
 fieldset {
  padding: 0.35em 0.75em 0.625em;
 }
 legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
 }
 textarea {
  overflow: auto;
 }
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
  height: auto;
 }
 [type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
 }
 [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
 }
 ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
 }
 summary {
  display: list-item;
 }
 [hidden],
 template {
  display: none;
 }

 /** Custom CSS for this Web AI Flight Agent project by Jason Mayes 2025 **/
 body {
  background-color: #202124;
  color: #e8eaed;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 0;
  margin: 0;
  min-width: 1900px;
 }

 header,
 section,
 footer {
  max-width: 1000px;
  min-height: 500px;
  margin: 0 auto;
  padding: 0;
  display: block;
  background-position: top left;
  background-size: auto;
  display: block;
 }

 header {
  background-image: url("https://assets.codepen.io/48236/flightshead.svg");
  background-repeat: no-repeat;
  position: relative;
 }

 section {
  padding: 0 16px;
  min-height: 100px;
  max-width: 940px;
 }

 footer {
  background-color: #8ab4f8;
  padding: 5px 16px;
  min-height: auto;
  max-width: 940px;
  text-align: center;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: #222;
  margin-top: 30px;
 }

 footer a {
  color: #1531cf;
  font-weight: bold;
 }

 h1 {
  font-size: 32pt;
  text-align: center;
  margin: 0;
  padding-top: 200px;
  transition: padding-top 300ms;
 }

 h2 {
  font-size: 18pt;
  color: #aaa;
 }

 h3 {
  font-size: 16pt;
 }

 p {
  font-size: 11pt;
 }

 section p {
  color: #999;
 }

 a {
  color: #8ab4f8;
 }

 a:hover {
  color: #aecbfa;
 }

 ::selection {
  background: #aecbfa;
 }

 table {
  width: calc(100% - 32px);
  border: 1px solid #5f6368;
  margin: 16px;
  border-radius: 8px;
 }

 tr {
  border: 1px solid #5f6368;
  display: block;
  min-height: 85px;
  color: #fff;
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
 }

 tr:before {
  content: "\2708";
  font-size: 200%;
  padding: 22px;
  position: absolute;
 }

 td {
  position: absolute;
  top: 20px;
 }

 thead {
  display: none;
 }

 select {
  background-color: #36373a;
  color: #cae0e6;
  border: none;
  padding: 5px 10px;
 }

 input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: transparent;
  border: 1px solid #5f6368;
  border-radius: 4px;
  box-sizing: border-box;
  color: #e8eaed;
  outline: none;
  padding: 8px 16px;
  width: 100%;
 }

 ul#destinations {
  margin: 0;
  padding: 0;
 }

 ul#destinations li {
  list-style: none;
 }

 input.tripElement {
  width: 24%;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
 }

 input.tripDeparture {
  margin-left: 15px;
 }

 button {
  background-color: #8ab4f8;
  border: 1px solid #222;
  padding: 10px 15px 10px 35px;
  background-repeat: no-repeat;
  background-position: 7px;
  font-size: 10pt;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 300ms;
 }

 button#search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' focusable='false' class=' NMm5M'%3E%3Cpath d='M20.49 19l-5.73-5.73C15.53 12.2 16 10.91 16 9.5A6.5 6.5 0 1 0 9.5 16c1.41 0 2.7-.47 3.77-1.24L19 20.49 20.49 19zM5 9.5C5 7.01 7.01 5 9.5 5S14 7.01 14 9.5 11.99 14 9.5 14 5 11.99 5 9.5z'%3E%3C/path%3E%3C/svg%3E");
  position: absolute;
  bottom: -20px;
  width: 150px;
  left: calc(50% - 75px);
 }

 #talkToAgent {
  position: absolute;
  right: 22px;
  width: 60px;
  height: 60px;
  top: 284px;
  border: 3px solid #4184f2;
  border-radius: 60px;
  padding: 20px;
  background-color: #333;
  cursor: pointer;
  transition: background-color 300ms, top 300ms;
  z-index: 10;
  overflow: hidden;
 }

 body.search #talkToAgent {
  top: 100px;
 }

 #talkToAgent:hover {
  background-color: #666;
 }

 #talkToAgent.activated {
  background-color: #ea4335;
  background-image: url("https://assets.codepen.io/48236/loader.svg");
  background-size: cover;
 }

 #searchResults {
  opacity: 0;
  transition: opacity 1000ms;
 }

 #searchResults.preSearch {
  padding: 75px 40px 100px 40px;
  text-align: center;
  min-height: 100px;
  background-image: url("https://assets.codepen.io/48236/loader.svg");
  background-size: cover;
  background-position: 0px 150px;
  opacity: 1;
 }

 #searchResults.searchComplete {
  opacity: 1;
 }

 #sidePanel,
 #nerdyRenderPanel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(100% - 20px);
  width: 400px;
  background-color: #4184f2;
  padding: 5px 20px;
  filter: drop-shadow(-8px 2px 3px #111111);
  font-size: 18pt;
  overflow-y: auto;
  transition: left 300ms ease-in-out;
 }

 #nerdyRenderPanel {
  left: 0;
  background-color: #26272a;
 }

 #nerdyRenderPanel h2 {
  color: #999;
 }

 #nerdyRenderPanel p {
  color: #666;
 }

 #sidePanel:hover {
  left: calc(100% - 440px);
  background-image: none;
 }

 #sidePanel {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect fill='%23000000' stroke='%23000000' stroke-width='29' width='30' height='30' x='25' y='85'%3E%3Canimate attributeName='opacity' calcMode='spline' dur='2' values='1;0;1;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.4'%3E%3C/animate%3E%3C/rect%3E%3Crect fill='%23000000' stroke='%23000000' stroke-width='29' width='30' height='30' x='85' y='85'%3E%3Canimate attributeName='opacity' calcMode='spline' dur='2' values='1;0;1;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.2'%3E%3C/animate%3E%3C/rect%3E%3Crect fill='%23000000' stroke='%23000000' stroke-width='29' width='30' height='30' x='145' y='85'%3E%3Canimate attributeName='opacity' calcMode='spline' dur='2' values='1;0;1;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='0'%3E%3C/animate%3E%3C/rect%3E%3C/svg%3E");
  background-size: 1px;
  background-position-x: -50%;
 }

 #sidePanel textarea {
  font-size: 10pt;
  width: 100%;
  height: 150px;
 }

 #preloader {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(60, 64, 67, 0.9);
  background-image: url("https://assets.codepen.io/48236/loader.svg");
  filter: grayscale(1);
  z-index: 1000;
 }

 #preloader h2,
 #preloader p {
  color: #fff;
  top: 0px;
  position: absolute;
  text-align: center;
  width: calc(100% - 40px);
 }

 #preloader p {
  top: 40px;
  font-size: 13pt;
 }

 #preloader iframe {
  position: absolute;
  bottom: 20px;
  filter: grayscale(0);
 }

 #preloader section {
  position: absolute;
  top: calc(50% - 225px);
  left: calc(50% - 300px);
  width: 600px;
  height: 450px;
  padding: 20px;
  background-color: #8ab4f8;
  font-size: 16pt;
  display: flex;
  align-items: center;
  text-align: center;
  border: 3px solid #efefef;
 }

 #sidePanel button {
  padding: 10px;
 }

 #bookForm {
  background-color: #36373a;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  margin: 20px 16px;
  min-height: 80px;
  padding: 8px 16px 48px;
  position: relative;
  transition: min-height 300ms;
 }

 #passengerCount {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' focusable='false' fill='%239aa0a6'%3E%3Cpath d='M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 9c2.7 0 5.8 1.29 6 2v1H6v-.99c.2-.72 3.3-2.01 6-2.01m0-11C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z'%3E%3C/path%3E%3C/svg%3E");
  background-position: left;
  background-repeat: no-repeat;
  padding-left: 23px;
  margin-left: 10px;
 }

 input.tripElement {
  background-position: 10px;
  background-repeat: no-repeat;
  padding-left: 30px;
  background-clip: border-box;
  height: 45px;
 }

 input.tripFrom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' focusable='false' fill='%239aa0a6'%3E%3Cpath d='M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z'%3E%3C/path%3E%3C/svg%3E");
 }

 input.tripTo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' focusable='false' fill='%239aa0a6'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zM7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9z'%3E%3C/path%3E%3Ccircle cx='12' cy='9' r='2.5'%3E%3C/circle%3E%3C/svg%3E");
  background-position: 5px;
 }

 input.tripDepart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' focusable='false' fill='%239aa0a6'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3Cpath d='M8 11c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm4 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm4 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z'%3E%3C/path%3E%3C/svg%3E");
  background-position: 5px;
  padding-left: 35px;
 }

 .removed {
  display: none;
 }

 body.search h1 {
  padding-top: 20px;
 }

 body.search #search {
  opacity: 0;
 }

 body.search #bookForm {
  min-height: 70px;
 }

 .rowTiming {
  left: 80px;
 }

 .rowDuration {
  left: calc((100% / 8) * 5.5);
 }

 .rowStops {
  left: calc((100% / 8) * 4);
 }

 .rowCost {
  left: calc((100% / 8) * 7);
 }

 .rowCost:before {
  content: "\0024";
  margin-right: 2px;
 }

 .rowAirline,
 .rowDepartAirport,
 .rowArriveAirport,
 .rowMake {
  left: 80px;
  top: 50px;
  font-size: 10pt;
  color: #9aa0a6;
 }

 .rowDepartAirport {
  left: calc((100% / 8) * 4);
 }

 .rowArriveAirport {
  left: calc(((100% / 8) * 4) + 30px);
 }

 .rowArriveAirport:before {
  content: "\00BB";
  margin-right: 6px;
 }

 .rowMake {
  left: calc((100% / 8) * 2.35);
 }

 .rowFlightNum {
  left: calc((100% / 8) * 2.35);
 }

 @charset "UTF-8"; /*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
 :root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
 }
 .animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 }
 .animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
 }
 .animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
 }
 .animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
 }
 .animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
 }
 .animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
 }
 .animate__animated.animate__delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
 }
 .animate__animated.animate__delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
 }
 .animate__animated.animate__delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
 }
 .animate__animated.animate__delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
 }
 .animate__animated.animate__faster {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
 }
 .animate__animated.animate__fast {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
 }
 .animate__animated.animate__slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
 }
 .animate__animated.animate__slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
 }
 @media (prefers-reduced-motion: reduce), print {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
  .animate__animated[class*="Out"] {
    opacity: 0;
  }
 }
 @-webkit-keyframes bounce {
  0%,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
 }
 @keyframes bounce {
  0%,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
 }
 .animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
 }
 @-webkit-keyframes flash {
  0%,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
 }
 @keyframes flash {
  0%,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
 }
 .animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
 }
 @-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 }
 @keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 }
 .animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
 }
 @-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 }
 @keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 }
 .animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
 }
 @-webkit-keyframes shakeX {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
 }
 @keyframes shakeX {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
 }
 .animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
 }
 @-webkit-keyframes shakeY {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
 }
 @keyframes shakeY {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
 }
 .animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
 }
 @-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
 }
 @keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
 }
 .animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
 }
 @-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
 }
 @keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
 }
 .animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
 }
 @-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 }
 @keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 }
 .animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
 }
 @-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
 }
 @-webkit-keyframes jello {
  0%,
  11.1%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
 }
 @keyframes jello {
  0%,
  11.1%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
 }
 .animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
 }
 @-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
 }
 @keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
 }
 .animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
 }
 @-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
 }
 @keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
 }
 .animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
 }
 @-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
 }
 @keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
 }
 .animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
 }
 @-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
 }
 @keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
 }
 .animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
 }
 @-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
 }
 @keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
 }
 .animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
 }
 @-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
 }
 @keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
 }
 .animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
 }
 @-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
 }
 @keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
 }
 .animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
 }
 @-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
 }
 @keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
 }
 .animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
 }
 @-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
 }
 @keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
 }
 .animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
 }
 @-webkit-keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 }
 @keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
 }
 .animate__bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
 }
 @-webkit-keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
 }
 @-webkit-keyframes bounceInLeft {
  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes bounceInLeft {
  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
 }
 @-webkit-keyframes bounceInRight {
  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes bounceInRight {
  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
 }
 @-webkit-keyframes bounceInUp {
  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes bounceInUp {
  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
 }
 @-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
 }
 @keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
 }
 .animate__bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
 }
 @-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
 }
 @keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
 }
 .animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
 }
 @-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
 }
 @keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
 }
 .animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
 }
 @-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
 }
 @keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
 }
 .animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
 }
 @-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
 }
 @keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
 }
 .animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
 }
 @-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
 @keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
 .animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
 }
 @-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
 }
 @-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
 }
 @-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
 }
 @-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
 }
 @-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
 }
 @-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
 }
 @-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
 }
 @-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
 }
 @-webkit-keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
 }
 @-webkit-keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
 }
 @-webkit-keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
 }
 @-webkit-keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
 }
 @-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
 }
 @keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
 }
 .animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
 }
 @-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 }
 @keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 }
 .animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
 }
 @-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
 }
 @keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
 }
 .animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
 }
 @-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
 }
 @keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
 }
 .animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
 }
 @-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
 }
 @keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
 }
 .animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
 }
 @-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
 }
 @keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
 }
 .animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
 }
 @-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
 }
 @keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
 }
 .animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
 }
 @-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
 }
 @keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
 }
 .animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
 }
 @-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
 }
 @keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
 }
 .animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
 }
 @-webkit-keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
 }
 @keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
 }
 .animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
 }
 @-webkit-keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
 }
 @keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
 }
 .animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
 }
 @-webkit-keyframes fadeOutBottomRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
 }
 @keyframes fadeOutBottomRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
 }
 .animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
 }
 @-webkit-keyframes fadeOutBottomLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
 }
 @keyframes fadeOutBottomLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
 }
 .animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
 }
 @-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0)
      rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px)
      rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px)
      rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95)
      translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0)
      rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
 }
 @keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0)
      rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px)
      rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px)
      rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95)
      translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0)
      rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
 }
 .animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
 }
 @-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
 }
 @keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
 }
 .animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
 }
 @-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
 }
 @keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
 }
 .animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
 }
 @-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
 }
 @keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
 }
 .animate__flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
 }
 @-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
 }
 @keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
 }
 .animate__flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
 }
 @-webkit-keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
 }
 @-webkit-keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
 }
 @-webkit-keyframes lightSpeedOutRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
 }
 @keyframes lightSpeedOutRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
 }
 .animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
 }
 @-webkit-keyframes lightSpeedOutLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
 }
 @keyframes lightSpeedOutLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
 }
 .animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
 }
 @-webkit-keyframes rotateIn {
  0% {
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 @keyframes rotateIn {
  0% {
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 .animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
 }
 @-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 @keyframes rotateInDownLeft {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 .animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
 }
 @-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 @keyframes rotateInDownRight {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 .animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
 }
 @-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 @keyframes rotateInUpLeft {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 .animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
 }
 @-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 @keyframes rotateInUpRight {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
 }
 .animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
 }
 @-webkit-keyframes rotateOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
 }
 @keyframes rotateOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
 }
 .animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
 }
 @-webkit-keyframes rotateOutDownLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
 }
 @keyframes rotateOutDownLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
 }
 .animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
 }
 @-webkit-keyframes rotateOutDownRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
 }
 @keyframes rotateOutDownRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
 }
 .animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
 }
 @-webkit-keyframes rotateOutUpLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
 }
 @keyframes rotateOutUpLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
 }
 .animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
 }
 @-webkit-keyframes rotateOutUpRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
 }
 @keyframes rotateOutUpRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
 }
 .animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
 }
 @-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,
  80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
 }
 @keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,
  80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
 }
 .animate__hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
 }
 @-webkit-keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
 }
 @keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
 }
 .animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
 }
 @-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
 }
 @-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
 }
 @keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
 }
 .animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
 }
 @-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
 }
 @keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
 }
 .animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
 }
 @-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 @keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 .animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
 }
 @-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 @keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 .animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
 }
 @-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 @keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 .animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
 }
 @-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 @keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 .animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
 }
 @-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
 }
 @keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
 }
 .animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
 }
 @-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 @keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 .animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
 }
 @-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
 }
 @keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
 }
 .animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
 }
 @-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
 }
 @keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
 }
 .animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
 }
 @-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 @keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
 }
 .animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
 }
 @-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
 }
 @-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
 }
 @-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
 }
 @-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 @keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
 }
 .animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
 }
 @-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 }
 @keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 }
 .animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
 }
 @-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
 }
 @keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
 }
 .animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
 }
 @-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
 }
 @keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
 }
 .animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
 }
 @-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
 }
 @keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
 }
 .animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
 }
	/*********************************************************************
	* Web AI Agent for Flights designed and coded by Jason Mayes 2025.
	*--------------------------------------------------------------------
	* Connect with me on social if questions or comments:
	*
	* LinkedIn: https://www.linkedin.com/in/webai/
	* Twitter / X: https://x.com/jason_mayes
	* Github: https://github.com/jasonmayes
	* CodePen: https://codepen.io/jasonmayes
	*********************************************************************/

	//import {FilesetResolver, LlmInference} from 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai';

	const AI = window["@aibrow/web"].default;

	/**************************************************************
	* DOM References and defaults
	**************************************************************/
	const SIDE_PANEL_LLM_WRITE_SPACE = document.getElementById(
	"sidePanelInterface"
	);
	const PRELOADER = document.getElementById("preloader");
	const CHAT = document.getElementById("chat");
	const FLIGHTS_TRIP_TYPE = document.getElementById("tripType");
	const FLIGHTS_PASSENGER_COUNT = document.getElementById("passengerCount");
	const FLIGHTS_TRIP_CLASS = document.getElementById("tripClass");
	const FLIGHTS_DESTINATIONS = document.getElementById("destinations");
	const FLIGHTS_SEARCH = document.getElementById("search");
	const SEARCH_RESULTS_AREA = document.getElementById("searchResults");
	const HCI_PERSONA_TEXTBOX = document.getElementById("hciPersona");
	const FAKE_API_PERSONA_TEXTBOX = document.getElementById("fakeAPIPersona");
	const CHAT_BTN = document.getElementById("chatBtn");
	const ERASE_MEMORY_BTN = document.getElementById("eraseMemorytBtn");
	const TALK_TO_AGENT_BTN = document.getElementById("talkToAgent");

	/**************************************************************
	* Web AI Gemma 2 LLM code.
	**************************************************************/

	const CHAT_GRAMMAR = {
	type: "object",
	properties: {
	passengerCount: { type: "integer" },
	seatClass: {
	type: "string",
	enum: ["economy", "premium economy", "business", "first"]
	},
	legs: {
	type: "array",
	minItems: 1,
	maxItems: 2,
	items: {
	type: "object",
	properties: {
	departureLocation: { type: "string" },
	destinationLocation: { type: "string" },
	departureDate: { type: "string" },
	returnDate: { type: "string" }
	},
	required: [
	"departureLocation",
	"destinationLocation",
	"departureDate",
	"returnDate"
	],
	additionalProperties: false
	}
	},
	followUpQuestion: { type: "string" }
	},
	required: ["passengerCount", "seatClass", "legs"],
	additionalProperties: false
	};
	const API_GRAMMAR = {
	type: "object",
	properties: {
	results: {
	type: "array",
	minItems: 5,
	items: {
	type: "object",
	properties: {
	airline: { type: "string" },
	flightNumber: { type: "string" },
	departingTime: { type: "string" },
	departingAirport: { type: "string" },
	arrivingTime: { type: "string" },
	arrivingAirport: { type: "string" },
	numberOfFlightChanges: { type: "number" },
	flightDuration: { type: "string" },
	aircraftType: { type: "string" },
	cost: { type: "number" }
	},
	required: [
	"airline",
	"flightNumber",
	"departingTime",
	"departingAirport",
	"arrivingTime",
	"arrivingAirport",
	"numberOfFlightChanges",
	"flightDuration",
	"aircraftType",
	"cost"
	],
	additionalProperties: false
	}
	}
	},
	required: ["results"],
	additionalProperties: false
	};
	const MODEL_NAME = "gemma-2-2b-instruct-q4-k-m";

	const CHAT_PERSONA_NAME = "chatPersona";
	const API_PERSONA_NAME = "apiPersona";
	const CHAT_PERSONA_HISTORY = [];
	const API_PERSONA_HISTORY = [];

	let agentBusy = false;
	let llmInference = undefined;
	let lastGeneratedResponse = "";
	let activePersona = "";

	async function initLLM(modelUrl) {
	if (!AI.aibrow) {
	return;
	}
	// Lazily create a new LLM instance to force the model to download. Really we should listen on the download events
	const sess = await AI.aibrow.languageModel.create({ model: MODEL_NAME });
	await sess.destroy();

	PRELOADER.classList.remove("animate__fadeIn");
	PRELOADER.classList.add("animate__fadeOut");
	setTimeout(function () {
	PRELOADER.setAttribute("class", "removed");
	}, 1000);
	}

	function formToObj() {
	return {
	passengerCount: parseInt(FLIGHTS_PASSENGER_COUNT.value),
	seatClass:
	FLIGHTS_TRIP_CLASS.options[FLIGHTS_TRIP_CLASS.selectedIndex].text,
	legs: Array.from(FLIGHTS_DESTINATIONS.children).map((el) => ({
	departureLocation: el.children[0].value,
	destinationLocation: el.children[1].value,
	departureDate: el.children[2].value,
	returnDate: el.children[3].value
	}))
	};
	}

	function ObjToForm(obj) {
	agentSetPassengerCount(obj.passengerCount);
	agentSetSeatClass(obj.seatClass);
	agentSetTravelLegs(obj.legs);
	}

	async function executeAgent(task, personaName) {
	if (agentBusy) {
	console.warn("Can not process request as agent busy!");
	return;
	}

	try {
	agentBusy = true;

	let systemPrompt;

	switch (personaName) {
	case CHAT_PERSONA_NAME: {
	SEARCH_RESULTS_AREA.innerHTML =
	"<h2>Analysing user input</h2><p>This may take a moment. Please respond with any extra information the agent may ask you. Please wait.</p>";
	SEARCH_RESULTS_AREA.setAttribute("class", "preSearch");
	const sess = await AI.aibrow.languageModel.create({
	model: MODEL_NAME,
	grammar: CHAT_GRAMMAR,
	initialPrompts: CHAT_PERSONA_HISTORY,
	systemPrompt: `
	You are a travel bot API who needs to book flights for people and your task is to fill the JSON object from the users input so we can search for a flight.
	The user will give you some free text and you should do your best to update the JSON object. The current JSON object is:

	${JSON.stringify(formToObj())}

	If you need more information or any fields are blank, use the \`followUpQuestion\` field to ask the user for more information & ask for more than one thing at a time, be friendly, but don't use emojis. If you have all the information you need, leave the \`followUpQuestion\` field blank.
	`
	});
	const prompt = `${task \|\| "I need to book a flight"}`;
	CHAT_PERSONA_HISTORY.push({ role: "user", content: prompt });
	const stream = await sess.promptStreaming(prompt);
	let last;
	for await (const chunk of stream) {
	SIDE_PANEL_LLM_WRITE_SPACE.innerText = chunk;
	last = chunk;
	}
	last = JSON.parse(last);
	ObjToForm(last);
	if (last.followUpQuestion) {
	CHAT_PERSONA_HISTORY.push({
	role: "assistant",
	content: last.followUpQuestion
	});
	let utterance = new SpeechSynthesisUtterance(last.followUpQuestion);
	speechSynthesis.speak(utterance);
	} else {
	setTimeout(() => {
	executeAgent("", API_PERSONA_NAME);
	}, 1);
	}

	break;
	}
	case API_PERSONA_NAME: {
	SEARCH_RESULTS_AREA.innerHTML =
	"<h2>Please wait - generating pretend search results emulating an API call - watch progess in the left hand panel!</h2><p>This may take a moment. In a real world situation you would just call some API which would be faster but I want to demonstrate how capable this tiny model is.</p>";
	SEARCH_RESULTS_AREA.setAttribute("class", "preSearch");
	const sess = await AI.aibrow.languageModel.create({
	model: MODEL_NAME,
	grammar: API_GRAMMAR,
	initialPrompts: CHAT_PERSONA_HISTORY,
	systemPrompt: `
	You are pretending to be the Google flights API. A user will ask you to generate example flight search results by giving you a specified JSON object, generate at least 5 pretend but realistic flight results using the JSON object information provided by the user and respond as detailed below.
	The user will give you some free text that was had with a travel bot, then finally the JSON object with the flight details.
	`
	});
	const stream = await sess.promptStreaming(JSON.stringify(formToObj()));
	let last;
	for await (const chunk of stream) {
	SIDE_PANEL_LLM_WRITE_SPACE.innerText = chunk;
	last = chunk;
	}
	last = JSON.parse(last);
	displaySearchResults(last);
	break;
	}
	}
	} finally {
	agentBusy = false;
	}
	}

	// Try localhost first. Kick off LLM load right away.
	initLLM();

	/**************************************************************
	* Web app business logic - the typical code the web app would
	* have used without any Agents to get stuff done
	***************************************************************/

	// Here we are using the LLM to generate fake search results
	// too but this would traditionally be an API call to some server DB.
	FLIGHTS_SEARCH.addEventListener("click", function () {
	// Use API persona.
	//let context = CHAT_PERSONA_HISTORY[CHAT_PERSONA_HISTORY.length -1];
	executeAgent("", CHAT_PERSONA_NAME); //twbtwb
	});

	// Call the agent from our app logic to execute user demand.
	CHAT_BTN.addEventListener("click", function () {
	SIDE_PANEL_LLM_WRITE_SPACE.innerText = "";
	executeAgent(CHAT.value, CHAT_PERSONA_NAME, CHAT_PERSONA_HISTORY);
	CHAT.value = "";
	});

	window.SpeechRecognition =
	window.SpeechRecognition \|\| window.webkitSpeechRecognition;
	const SPEECH_RECOGNITION = new window.SpeechRecognition();
	SPEECH_RECOGNITION.continuous = true;
	SPEECH_RECOGNITION.interimResults = true;
	SPEECH_RECOGNITION.addEventListener("result", function (data) {
	for (const result of data.results) {
	if (result.isFinal) {
	console.log(result[0].transcript);
	executeAgent(result[0].transcript, CHAT_PERSONA_NAME);
	}
	}
	});

	function speechDeactivated() {
	TALK_TO_AGENT_BTN.setAttribute("class", "");
	// Allow 1s grace for speech recognition to finish.
	setTimeout(function () {
	SPEECH_RECOGNITION.stop();
	}, 1000);
	}

	TALK_TO_AGENT_BTN.addEventListener("mousedown", function () {
	this.setAttribute("class", "activated");
	SPEECH_RECOGNITION.start();
	});
	TALK_TO_AGENT_BTN.addEventListener("mouseup", speechDeactivated);
	TALK_TO_AGENT_BTN.addEventListener("focusout", speechDeactivated);

	// As this is a demo we also allow the clearning of agent memory to start fresh.
	ERASE_MEMORY_BTN.addEventListener("click", function () {
	CHAT_PERSONA_HISTORY.splice(0);
	CHAT_PERSONA_HISTORY.push(agentPersonas[CHAT_PERSONA_NAME]);

	API_PERSONA_HISTORY.splice(0);
	API_PERSONA_HISTORY.push(agentPersonas[API_PERSONA_NAME]);

	SIDE_PANEL_LLM_WRITE_SPACE.innerText = "";
	});

	// Web Dev designs a suitable Agent persona to work with
	// the exposed functions below.
	function setupAgentPersonas() {
	// In this demo we set defaults in the HTML itself so
	// you can play around later. Also append current date for smarts.
	const today = new Date();
	const dateStr =
	today.getDate() + "/" + today.getMonth() + 1 + "/" + today.getFullYear();

	let personas = {
	[CHAT_PERSONA_NAME]:
	HCI_PERSONA_TEXTBOX.value + "\n The current date is: " + dateStr,
	[API_PERSONA_NAME]: FAKE_API_PERSONA_TEXTBOX.value
	};

	return personas;
	}

	function agentPersonaChange() {
	agentPersonas = setupAgentPersonas();

	// Overwrite persona in current persona chat histories too.
	CHAT_PERSONA_HISTORY[0] = agentPersonas[CHAT_PERSONA_NAME];
	API_PERSONA_HISTORY[0] = agentPersonas[API_PERSONA_NAME];

	SIDE_PANEL_LLM_WRITE_SPACE.innerText = "";
	}

	let agentPersonas = setupAgentPersonas();
	HCI_PERSONA_TEXTBOX.addEventListener("keyup", agentPersonaChange);
	FAKE_API_PERSONA_TEXTBOX.addEventListener("keyup", agentPersonaChange);
	CHAT_PERSONA_HISTORY.push(agentPersonas[CHAT_PERSONA_NAME]);
	API_PERSONA_HISTORY.push(agentPersonas[API_PERSONA_NAME]);

	/**
	* Web App Agent Functions it can call.
	*
	* This is a develeoper decision what to expose so
	* they always stay in control of what functions to
	* expose to agent. This also means they can control
	* the UX when an agent does something vs a human eg
	* perform actions faster but could still educate user
	* watching on how GUI is used to learn from the agent
	* behaviour.
	**/

	function agentSearch() {
	FLIGHTS_SEARCH.click();
	}

	function agentSetTripType(value) {
	if (value === "oneway") {
	FLIGHTS_TRIP_TYPE.selectedIndex = 1;
	} else if (value === "multitrip") {
	FLIGHTS_TRIP_TYPE.selectedIndex = 2;
	} else {
	FLIGHTS_TRIP_TYPE.selectedIndex = 0;
	}
	}

	function agentSetPassengerCount(value) {
	let n = parseInt(value);
	FLIGHTS_PASSENGER_COUNT.selectedIndex = n - 1;
	}

	function agentSetSeatClass(value) {
	if (value === "first" \|\| value === "first class") {
	FLIGHTS_TRIP_CLASS.selectedIndex = 3;
	} else if (value === "business" \|\| value === "business class") {
	FLIGHTS_TRIP_CLASS.selectedIndex = 2;
	} else if (value === "premium economy") {
	FLIGHTS_TRIP_CLASS.selectedIndex = 1;
	} else {
	FLIGHTS_TRIP_CLASS.selectedIndex = 0;
	}

	FLIGHTS_TRIP_CLASS.classList.add("animate__tada");
	setTimeout(function () {
	FLIGHTS_TRIP_CLASS.classList.remove("animate__tada");
	}, 200);
	}

	function agentSetTravelLegs(values) {
	FLIGHTS_DESTINATIONS.innerHTML = "";
	for (let n = 0; n < values.length; n++) {
	const LI = document.createElement("li");

	const TRIP_FROM = document.createElement("input");
	TRIP_FROM.setAttribute(
	"class",
	"tripElement tripFrom animate__animated animate__tada"
	);
	TRIP_FROM.setAttribute("type", "text");
	TRIP_FROM.value = values[n].departureLocation;

	const TRIP_TO = document.createElement("input");
	TRIP_TO.setAttribute(
	"class",
	"tripElement tripTo animate__animated animate__tada"
	);
	TRIP_TO.setAttribute("type", "text");
	TRIP_TO.value = values[n].destinationLocation;

	const TRIP_DEPART = document.createElement("input");
	TRIP_DEPART.setAttribute(
	"class",
	"tripElement tripDepart animate__animated animate__tada"
	);
	TRIP_DEPART.setAttribute("type", "text");
	TRIP_DEPART.value = values[n].departureDate;

	const TRIP_RETURN = document.createElement("input");
	TRIP_RETURN.setAttribute("type", "text");
	TRIP_RETURN.value = values[n].returnDate;
	if (values[n].return === "oneway" \|\| values[n].return === "undefined") {
	TRIP_RETURN.setAttribute("class", "tripElement tripReturn removed");
	agentSetTripType("oneway");
	} else {
	TRIP_RETURN.setAttribute(
	"class",
	"tripElement tripReturn animate__animated animate__tada"
	);
	}

	LI.appendChild(TRIP_FROM);
	LI.appendChild(TRIP_TO);
	LI.appendChild(TRIP_DEPART);
	LI.appendChild(TRIP_RETURN);

	FLIGHTS_DESTINATIONS.appendChild(LI);
	}
	}

	function refreshUserSearchData(answerObj) {
	agentSetPassengerCount(answerObj.passengerCount);
	agentSetSeatClass(answerObj.seatClass);
	agentSetTravelLegs(answerObj.legs);
	}

	function displaySearchResults(data) {
	document.body.setAttribute("class", "search");

	SEARCH_RESULTS_AREA.innerHTML = "";

	const TABLE = document.createElement("table");

	for (let n = 0; n < data.results.length; n++) {
	const TR = document.createElement("tr");

	const TD_AIRLINE = document.createElement("td");
	TD_AIRLINE.innerText = data.results[n].airline;
	TD_AIRLINE.setAttribute("class", "rowAirline");
	TR.appendChild(TD_AIRLINE);

	const TD_FLIGHT_NUM = document.createElement("td");
	TD_FLIGHT_NUM.innerText = data.results[n].flightNumber;
	TD_FLIGHT_NUM.setAttribute("class", "rowFlightNum");
	TR.appendChild(TD_FLIGHT_NUM);

	const TD_TIMING = document.createElement("td");
	TD_TIMING.innerText =
	data.results[n].departingTime + " - " + data.results[n].arrivingTime;
	TD_TIMING.setAttribute("class", "rowTiming");
	TR.appendChild(TD_TIMING);

	const TD_DEPART_AIRPORT = document.createElement("td");
	TD_DEPART_AIRPORT.innerText = data.results[n].departingAirport;
	TD_DEPART_AIRPORT.setAttribute("class", "rowDepartAirport");
	TR.appendChild(TD_DEPART_AIRPORT);

	const TD_ARRIVE_AIRPORT = document.createElement("td");
	TD_ARRIVE_AIRPORT.innerText = data.results[n].arrivingAirport;
	TD_ARRIVE_AIRPORT.setAttribute("class", "rowArriveAirport");
	TR.appendChild(TD_ARRIVE_AIRPORT);

	const TD_STOPS = document.createElement("td");
	TD_STOPS.innerText = data.results[n].numberOfFlightChanges + " changes";
	TD_STOPS.setAttribute("class", "rowStops");
	TR.appendChild(TD_STOPS);

	const TD_DURATION = document.createElement("td");
	TD_DURATION.innerText = data.results[n].flightDuration;
	TD_DURATION.setAttribute("class", "rowDuration");
	TR.appendChild(TD_DURATION);

	const TD_AIRCRAFT_MAKE = document.createElement("td");
	TD_AIRCRAFT_MAKE.innerText = data.results[n].aircraftType;
	TD_AIRCRAFT_MAKE.setAttribute("class", "rowMake");
	TR.appendChild(TD_AIRCRAFT_MAKE);

	const TD_COST = document.createElement("td");
	TD_COST.innerText = data.results[n].cost;
	TD_COST.setAttribute("class", "rowCost");
	TR.appendChild(TD_COST);

	TABLE.appendChild(TR);
	}
	SEARCH_RESULTS_AREA.setAttribute("class", "searchComplete");
	SEARCH_RESULTS_AREA.appendChild(TABLE);
	}