app.js

/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),r=new WeakMap;let o=class{constructor(e,t,r){if(this._$cssResult$=!0,r!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=r.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&r.set(i,e))}return e}toString(){return this.cssText}};const a=(i,r)=>{if(t)i.adoptedStyleSheets=r.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const t of r){const r=document.createElement("style"),o=e.litNonce;void 0!==o&&r.setAttribute("nonce",o),r.textContent=t.cssText,i.appendChild(r)}},s=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new o("string"==typeof e?e:e+"",void 0,i))(t)})(e):e
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */,{is:n,defineProperty:c,getOwnPropertyDescriptor:l,getOwnPropertyNames:d,getOwnPropertySymbols:h,getPrototypeOf:p}=Object,g=globalThis,u=g.trustedTypes,m=u?u.emptyScript:"",b=g.reactiveElementPolyfillSupport,w=(e,t)=>e,f={toAttribute(e,t){switch(t){case Boolean:e=e?m:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},x=(e,t)=>!n(e,t),y={attribute:!0,type:String,converter:f,reflect:!1,useDefault:!1,hasChanged:x};Symbol.metadata??=Symbol("metadata"),g.litPropertyMetadata??=new WeakMap;let v=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=y){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(e,i,t);void 0!==r&&c(this.prototype,e,r)}}static getPropertyDescriptor(e,t,i){const{get:r,set:o}=l(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const a=r?.call(this);o?.call(this,t),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??y}static _$Ei(){if(this.hasOwnProperty(w("elementProperties")))return;const e=p(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(w("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(w("properties"))){const e=this.properties,t=[...d(e),...h(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(s(e))}else void 0!==e&&t.push(s(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return a(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){const i=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,i);if(void 0!==r&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(t,i.type);this._$Em=e,null==o?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null}}_$AK(e,t){const i=this.constructor,r=i._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=i.getPropertyOptions(r),o="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:f;this._$Em=r,this[r]=o.fromAttribute(t,e.type)??this._$Ej?.get(r)??null,this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){const r=this.constructor,o=this[e];if(i??=r.getPropertyOptions(e),!((i.hasChanged??x)(o,t)||i.useDefault&&i.reflect&&o===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:r,wrapped:o},a){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,a??t??this[e]),!0!==o||void 0!==a)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e){const{wrapped:e}=i,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,i,r)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(e){}firstUpdated(e){}};v.elementStyles=[],v.shadowRootOptions={mode:"open"},v[w("elementProperties")]=new Map,v[w("finalized")]=new Map,b?.({ReactiveElement:v}),(g.reactiveElementVersions??=[]).push("2.1.0");
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const k=globalThis,_=k.trustedTypes,$=_?_.createPolicy("lit-html",{createHTML:e=>e}):void 0,C="$lit$",S=`lit$${Math.random().toFixed(9).slice(2)}$`,A="?"+S,z=`<${A}>`,E=document,T=()=>E.createComment(""),P=e=>null===e||"object"!=typeof e&&"function"!=typeof e,M=Array.isArray,I="[ \t\n\f\r]",j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,B=/>/g,O=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),L=/'/g,H=/"/g,U=/^(?:script|style|textarea|title)$/i,N=(e=>(t,...i)=>({_$litType$:e,strings:t,values:i}))(1),q=Symbol.for("lit-noChange"),D=Symbol.for("lit-nothing"),W=new WeakMap,G=E.createTreeWalker(E,129);function F(e,t){if(!M(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==$?$.createHTML(t):t}const V=(e,t)=>{const i=e.length-1,r=[];let o,a=2===t?"<svg>":3===t?"<math>":"",s=j;for(let t=0;t<i;t++){const i=e[t];let n,c,l=-1,d=0;for(;d<i.length&&(s.lastIndex=d,c=s.exec(i),null!==c);)d=s.lastIndex,s===j?"!--"===c[1]?s=R:void 0!==c[1]?s=B:void 0!==c[2]?(U.test(c[2])&&(o=RegExp("</"+c[2],"g")),s=O):void 0!==c[3]&&(s=O):s===O?">"===c[0]?(s=o??j,l=-1):void 0===c[1]?l=-2:(l=s.lastIndex-c[2].length,n=c[1],s=void 0===c[3]?O:'"'===c[3]?H:L):s===H||s===L?s=O:s===R||s===B?s=j:(s=O,o=void 0);const h=s===O&&e[t+1].startsWith("/>")?" ":"";a+=s===j?i+z:l>=0?(r.push(n),i.slice(0,l)+C+i.slice(l)+S+h):i+S+(-2===l?t:h)}return[F(e,a+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),r]};class Y{constructor({strings:e,_$litType$:t},i){let r;this.parts=[];let o=0,a=0;const s=e.length-1,n=this.parts,[c,l]=V(e,t);if(this.el=Y.createElement(c,i),G.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(r=G.nextNode())&&n.length<s;){if(1===r.nodeType){if(r.hasAttributes())for(const e of r.getAttributeNames())if(e.endsWith(C)){const t=l[a++],i=r.getAttribute(e).split(S),s=/([.?@])?(.*)/.exec(t);n.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?Z:"?"===s[1]?ee:"@"===s[1]?te:X}),r.removeAttribute(e)}else e.startsWith(S)&&(n.push({type:6,index:o}),r.removeAttribute(e));if(U.test(r.tagName)){const e=r.textContent.split(S),t=e.length-1;if(t>0){r.textContent=_?_.emptyScript:"";for(let i=0;i<t;i++)r.append(e[i],T()),G.nextNode(),n.push({type:2,index:++o});r.append(e[t],T())}}}else if(8===r.nodeType)if(r.data===A)n.push({type:2,index:o});else{let e=-1;for(;-1!==(e=r.data.indexOf(S,e+1));)n.push({type:7,index:o}),e+=S.length-1}o++}}static createElement(e,t){const i=E.createElement("template");return i.innerHTML=e,i}}function J(e,t,i=e,r){if(t===q)return t;let o=void 0!==r?i._$Co?.[r]:i._$Cl;const a=P(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,r)),void 0!==r?(i._$Co??=[])[r]=o:i._$Cl=o),void 0!==o&&(t=J(e,o._$AS(e,t.values),o,r)),t}class Q{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,r=(e?.creationScope??E).importNode(t,!0);G.currentNode=r;let o=G.nextNode(),a=0,s=0,n=i[0];for(;void 0!==n;){if(a===n.index){let t;2===n.type?t=new K(o,o.nextSibling,this,e):1===n.type?t=new n.ctor(o,n.name,n.strings,this,e):6===n.type&&(t=new ie(o,this,e)),this._$AV.push(t),n=i[++s]}a!==n?.index&&(o=G.nextNode(),a++)}return G.currentNode=E,r}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class K{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,r){this.type=2,this._$AH=D,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=J(this,e,t),P(e)?e===D||null==e||""===e?(this._$AH!==D&&this._$AR(),this._$AH=D):e!==this._$AH&&e!==q&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>M(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==D&&P(this._$AH)?this._$AA.nextSibling.data=e:this.T(E.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,r="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=Y.createElement(F(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===r)this._$AH.p(t);else{const e=new Q(r,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=W.get(e.strings);return void 0===t&&W.set(e.strings,t=new Y(e)),t}k(e){M(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,r=0;for(const o of e)r===t.length?t.push(i=new K(this.O(T()),this.O(T()),this,this.options)):i=t[r],i._$AI(o),r++;r<t.length&&(this._$AR(i&&i._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class X{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,r,o){this.type=1,this._$AH=D,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=D}_$AI(e,t=this,i,r){const o=this.strings;let a=!1;if(void 0===o)e=J(this,e,t,0),a=!P(e)||e!==this._$AH&&e!==q,a&&(this._$AH=e);else{const r=e;let s,n;for(e=o[0],s=0;s<o.length-1;s++)n=J(this,r[i+s],t,s),n===q&&(n=this._$AH[s]),a||=!P(n)||n!==this._$AH[s],n===D?e=D:e!==D&&(e+=(n??"")+o[s+1]),this._$AH[s]=n}a&&!r&&this.j(e)}j(e){e===D?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Z extends X{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===D?void 0:e}}class ee extends X{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==D)}}class te extends X{constructor(e,t,i,r,o){super(e,t,i,r,o),this.type=5}_$AI(e,t=this){if((e=J(this,e,t,0)??D)===q)return;const i=this._$AH,r=e===D&&i!==D||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==D&&(i===D||r);r&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class ie{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){J(this,e)}}const re=k.litHtmlPolyfillSupport;re?.(Y,K),(k.litHtmlVersions??=[]).push("3.3.0");const oe=globalThis;
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */let ae=class extends v{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{const r=i?.renderBefore??t;let o=r._$litPart$;if(void 0===o){const e=i?.renderBefore??null;r._$litPart$=o=new K(t.insertBefore(T(),e),e,void 0,i??{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return q}};ae._$litElement$=!0,ae.finalized=!0,oe.litElementHydrateSupport?.({LitElement:ae});const se=oe.litElementPolyfillSupport;
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
function ne(e,t,i){return e?t(e):i?.(e)}se?.({LitElement:ae}),(oe.litElementVersions??=[]).push("4.2.0");class ce extends ae{createRenderRoot(){return this}}const le=[{id:"new-button",text:"New",variant:"primary",iconPosition:"-24px 0px"},{id:"home-button",text:"Home",variant:"secondary",iconPosition:"-48px -24px"},{id:"recipes-button",text:"Recipes",variant:"secondary",iconPosition:"0px -24px"},{id:"ingredients-button",text:"Ingredients",variant:"secondary",iconPosition:"-72px -24px"},{id:"favorites-button",text:"Favorites",variant:"secondary",iconPosition:"0px 0px"},{id:"chef-tips-button",text:"Chefs Tips",variant:"secondary",iconPosition:"0px -48px"},{id:"blog-button",text:"Blog",variant:"secondary",iconPosition:"-24px -48px"},{id:"shop-button",text:"Shop",variant:"secondary",iconPosition:"-24px -24px"},{id:"events-button",text:"Events",variant:"secondary",iconPosition:"-48px -48px"},{id:"faq-button",text:"FAQ",variant:"secondary",iconPosition:"-72px -48px"},{id:"profile-button",text:"Profile",variant:"secondary",iconPosition:"-48px 0px"},{id:"report-button",text:"Report",variant:"secondary",iconPosition:"-72px 0px"}];customElements.define("ribbon-button",class extends ce{static properties={text:{type:String},variant:{type:String},iconPosition:{type:String}};constructor(){super(),this.text="Button",this.variant="secondary",this.iconPosition="0px 0px"}render(){const e="primary"===this.variant?"bg-orange-400 hover:bg-orange-500":"bg-teal-600 hover:bg-teal-800";return N`
            <button class="${e} mx-1 inline-flex items-center rounded-md px-2 py-1 text-sm font-semibold text-white shadow-md ring-1 ring-inset ring-gray-300">
                <!-- Heroicons are MIT licensed. See https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
                <span class="h-6 w-6" style="background: url(./public/images/icons-outline.webp); background-position: ${this.iconPosition};"></span>
                <span class="text-white">${this.text}</span>
            </button>
        `}});customElements.define("app-ribbon",class extends ce{static properties={buttons:{type:Array},visibleButtons:{type:Array}};constructor(){super(),this.buttons=le,this.visibleButtons=this.buttons,this._resizeObserver=new ResizeObserver((e=>{for(const t of e)t.contentBoxSize&&t.contentBoxSize[0]?this._updateVisibleButtons(t.contentBoxSize[0].inlineSize):this._updateVisibleButtons(t.contentRect.width)}))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this._resizeObserver.observe(this)}firstUpdated(){this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_updateVisibleButtons(e){const t=[{minWidth:1134,buttons:12},{minWidth:1069,buttons:11},{minWidth:985,buttons:10},{minWidth:905,buttons:9},{minWidth:818,buttons:8},{minWidth:735,buttons:7},{minWidth:660,buttons:6},{minWidth:540,buttons:5},{minWidth:440,buttons:4},{minWidth:318,buttons:3}].find((t=>e>=t.minWidth)),i=t?t.buttons:2;this.visibleButtons.length!==i&&(this.visibleButtons=this.buttons.slice(0,i))}_getVisibleButtonsTemplate(){return this.visibleButtons.map(((e,t)=>N`
                <ribbon-button id="${e.id}" text="${e.text}" variant="${e.variant}" iconPosition="${e.iconPosition}"></ribbon-button>
                ${ne(0===t,(()=>N`<div class="mx-0.5 h-6 border-l border-gray-300"></div>`))}
            `))}render(){return N`
            <nav class="mt-1 flex items-center justify-between p-1">
                <div class="flex flex-nowrap items-baseline overflow-x-hidden">${this._getVisibleButtonsTemplate()}</div>
                <div class="3xl:hidden">
                    <button class="mx-1 inline-flex rounded-md bg-gray-200 px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-300">
                        <!-- Heroicons are MIT licensed. See https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
                        <span class="h-6 w-6" style="background: url(./public/images/icons-outline.webp); background-position: -96px 0px;"></span>
                    </button>
                </div>
            </nav>
        `}});const de=[{user:"How do I make a simple tomato sauce? Could you provide a detailed step-by-step guide?"},{bot:"Certainly! To make a simple tomato sauce, start by heating two tablespoons of olive oil in a large saucepan over medium heat. Once the oil is hot, add four minced garlic cloves and sauté them until they become fragrant and slightly golden. Next, pour in one can of crushed tomatoes and stir the mixture. Season the sauce with a teaspoon of salt and a handful of fresh basil leaves. Allow the sauce to simmer gently on low heat for about 20 minutes, stirring occasionally to prevent sticking. Once the sauce has thickened and the flavors have melded together, it's ready to be served. Enjoy your homemade tomato sauce!"},{user:"Can I add meat to the tomato sauce? If so, what type and how should I incorporate it?"},{bot:"Absolutely! Adding meat can enhance the flavor and texture of your tomato sauce. You can use ground beef, pork, or sausage based on your preference. Start by browning one pound of your chosen meat in a separate skillet over medium-high heat until it's fully cooked and no longer pink. Drain any excess fat, then add the cooked meat to your simmering tomato sauce. Let the mixture cook together for an additional 10-15 minutes to allow the flavors to combine thoroughly. This will give your sauce a rich and hearty quality."},{user:"How long does the tomato sauce last in the refrigerator, and what are the best storage practices?"},{bot:"Your homemade tomato sauce should stay fresh in the refrigerator for about 5 to 7 days when stored properly. To maximize its shelf life, place the sauce in an airtight container to prevent exposure to air and contaminants. It's also a good idea to let the sauce cool to room temperature before refrigerating. For longer storage, consider freezing the sauce in freezer-safe containers or bags, where it can last for several months."},{user:"Do you have any tips for making the tomato sauce spicier without overpowering the other flavors?"},{bot:"Certainly! To add some heat to your tomato sauce without overwhelming it, you can incorporate a few red pepper flakes or finely chopped fresh chili peppers while sautéing the garlic. Start with about half a teaspoon of red pepper flakes and adjust according to your preferred spice level. Alternatively, you can add a dash of hot sauce or a pinch of cayenne pepper towards the end of the cooking process to better control the heat intensity. This will give your sauce a pleasant kick while maintaining its overall flavor balance."},{user:"Is it possible to freeze the tomato sauce, and if so, what is the best method for freezing and later reheating it?"},{bot:"Yes, you can definitely freeze your tomato sauce for future use. To freeze the sauce, allow it to cool completely and then transfer it into airtight, freezer-safe containers or heavy-duty freezer bags. Make sure to leave some space at the top of the container to allow for expansion as the sauce freezes. Label the containers with the date for easy reference. When you're ready to use the sauce, thaw it in the refrigerator overnight and reheat it on the stove over low heat, stirring occasionally until it's warmed through. This method helps preserve the sauce's flavor and consistency."},{user:"What is the best way to reheat the tomato sauce to maintain its texture and flavor?"},{bot:"The best way to reheat tomato sauce is on the stovetop. Pour the sauce into a saucepan and heat it over low to medium heat, stirring occasionally to ensure even heating and to prevent the sauce from sticking to the bottom of the pan. If the sauce has thickened too much after refrigeration or freezing, you can add a small amount of water, broth, or wine to adjust the consistency. Heating the sauce gradually helps maintain its rich flavor and smooth texture without scorching."},{user:"Can I use fresh tomatoes instead of canned ones for the sauce? If so, what is the recommended preparation method?"},{bot:"Yes, you can use fresh tomatoes to make tomato sauce. Start by selecting ripe, flavorful tomatoes for the best results. To prepare them, you'll need to blanch the tomatoes by scoring the bottoms with an 'X' and plunging them into boiling water for about 30 seconds. Immediately transfer the tomatoes to a bowl of ice water to halt the cooking process. Once cooled, peel off the skins, remove the seeds if desired, and crush or chop the tomatoes before adding them to your sauce. Fresh tomatoes can give your sauce a vibrant and fresh taste, especially during peak tomato season."},{user:"What types of pasta pair best with tomato sauce to complement its flavors and texture?"},{bot:"Spaghetti is a classic choice that works wonderfully with tomato sauce, offering a satisfying bite and good sauce adherence. Penne is another excellent option due to its tubular shape, which holds onto the sauce inside and out. Rigatoni, with its larger size and ridged surface, also pairs well, providing a hearty and substantial combination with the rich tomato sauce. Additionally, fusilli or farfalle can be great choices if you prefer something different, as their shapes can capture the sauce effectively."},{user:"Can I incorporate additional vegetables into the tomato sauce for extra flavor and nutrition? If so, which vegetables work best?"},{bot:"Absolutely! Adding vegetables can enhance both the flavor and nutritional value of your tomato sauce. Bell peppers add sweetness and a slight crunch when cooked, while onions provide a savory depth. Mushrooms contribute an earthy richness and umami flavor that complements the tomatoes. Zucchini or eggplant can add substance and texture. To incorporate these vegetables, sauté them along with the garlic at the beginning of the cooking process until they're softened before adding the tomatoes. This will allow their flavors to meld seamlessly into the sauce."},{user:"What techniques can I use to make the tomato sauce thicker without altering its basic flavor profile?"},{bot:"To thicken your tomato sauce without changing its flavor, you can let it simmer uncovered for a longer period, which allows excess moisture to evaporate and the sauce to reduce naturally. Alternatively, you can add tomato paste, which not only thickens the sauce but also intensifies the tomato flavor without introducing new tastes. Another method is to incorporate a slurry made from cornstarch or flour mixed with a small amount of water; add this gradually while stirring until you reach the desired consistency. Be sure to cook the sauce for a few more minutes after adding a slurry to eliminate any raw starch taste."},{user:"Is it advisable to add wine to the tomato sauce for enhanced flavor? If so, how should it be incorporated into the cooking process?"},{bot:"Yes, adding wine can significantly enhance the depth and complexity of your tomato sauce's flavor. To incorporate wine, pour in a splash of red wine—about half a cup—after sautéing the garlic and before adding the crushed tomatoes. Allow the wine to simmer and reduce for a few minutes, which helps to cook off the alcohol while concentrating the flavors. This addition will impart a rich, robust character to the sauce, complementing the acidity of the tomatoes and the overall savory profile of the dish."}],he=2;
/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */class pe{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const ge=(e,t)=>{const i=e._$AN;if(void 0===i)return!1;for(const e of i)e._$AO?.(t,!1),ge(e,t);return!0},ue=e=>{let t,i;do{if(void 0===(t=e._$AM))break;i=t._$AN,i.delete(e),e=t}while(0===i?.size)},me=e=>{for(let t;t=e._$AM;e=t){let i=t._$AN;if(void 0===i)t._$AN=i=new Set;else if(i.has(e))break;i.add(e),fe(t)}};function be(e){void 0!==this._$AN?(ue(this),this._$AM=e,me(this)):this._$AM=e}function we(e,t=!1,i=0){const r=this._$AH,o=this._$AN;if(void 0!==o&&0!==o.size)if(t)if(Array.isArray(r))for(let e=i;e<r.length;e++)ge(r[e],!1),ue(r[e]);else null!=r&&(ge(r,!1),ue(r));else ge(this,e)}const fe=e=>{e.type==he&&(e._$AP??=we,e._$AQ??=be)};class xe extends pe{constructor(){super(...arguments),this._$AN=void 0}_$AT(e,t,i){super._$AT(e,t,i),me(this),this.isConnected=e._$AU}_$AO(e,t=!0){e!==this.isConnected&&(this.isConnected=e,e?this.reconnected?.():this.disconnected?.()),t&&(ge(this,e),ue(this))}setValue(e){if((e=>void 0===e.strings)
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */(this._$Ct))this._$Ct._$AI(e,this);else{const t=[...this._$Ct._$AH];t[this._$Ci]=e,this._$Ct._$AI(t,this,0)}}disconnected(){}reconnected(){}}
/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */class ye{}const ve=new WeakMap,ke=(e=>(...t)=>({_$litDirective$:e,values:t}))(class extends xe{render(e){return D}update(e,[t]){const i=t!==this.G;return i&&void 0!==this.G&&this.rt(void 0),(i||this.lt!==this.ct)&&(this.G=t,this.ht=e.options?.host,this.rt(this.ct=e.element)),D}rt(e){if(this.isConnected||(e=void 0),"function"==typeof this.G){const t=this.ht??globalThis;let i=ve.get(t);void 0===i&&(i=new WeakMap,ve.set(t,i)),void 0!==i.get(this.G)&&this.G.call(this.ht,void 0),i.set(this.G,e),void 0!==e&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return"function"==typeof this.G?ve.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});customElements.define("chat-messages",class extends ce{static properties={messages:{type:Array}};constructor(){super(),this.messages=[],this.scrollContainerRef=new ye}updated(e){e.has("messages")&&this._scrollToLastMessage()}_scrollToLastMessage(){const e=this.scrollContainerRef.value;e&&e.scrollTo({top:e.scrollHeight,behavior:"instant"})}_getMessagesTemplate(){return this.messages.map((e=>N`
                <li class="${e.user?"justify-end":"justify-start"} flex items-start">
                    ${e.user?N` <div class="flex items-center space-x-2">
                              <div class="text-pretty rounded-md bg-teal-600 px-3 py-2 text-xs text-white lg:text-base">
                                  ${e.user} ${ne(e.imageUrl,(()=>N`<img src="${e.imageUrl}" alt="${e.imageAlt}" class="mt-2 h-32 w-full rounded-md" />`))}
                              </div>
                              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-teal-600" fill="currentColor" viewBox="0 0 24 24">
                                  <circle cx="12" cy="8" r="4" />
                                  <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />
                              </svg>
                          </div>`:N`
                              <div class="flex items-center space-x-2">
                                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
                                      <rect x="6" y="4" width="12" height="12" rx="2" />
                                      <circle cx="9" cy="10" r="1" />
                                      <circle cx="15" cy="10" r="1" />
                                      <path d="M8 16h8" />
                                  </svg>
                                  <div class="text-pretty rounded-md bg-gray-200 px-3 py-2 text-xs text-gray-900 lg:text-base">
                                      ${e.bot} ${ne(e.imageUrl,(()=>N`<img src="${e.imageUrl}" alt="${e.imageAlt}" class="mt-2 h-32 w-full rounded-md" />`))}
                                  </div>
                              </div>
                          `}
                </li>
            `))}render(){return N`
            <ul ${ke(this.scrollContainerRef)} class="flex max-h-[345px] flex-1 flex-col space-y-4 overflow-y-auto p-2">
                ${this._getMessagesTemplate()}
            </ul>
        `}});customElements.define("chat-input",class extends ce{static properties={value:{type:String},placeholder:{type:String}};constructor(){super(),this.value="",this.placeholder="Type your message..."}_handleKeyDown(e){"Enter"!==e.key||e.shiftKey||(e.preventDefault(),this.dispatchEvent(new CustomEvent("send-chat")))}_sendMessage(){this.value.trim()&&this.dispatchEvent(new CustomEvent("send-chat"))}render(){return N`
            <div class="min-h-12 flex items-center border-t border-gray-200 p-1">
                <label for="chat-input" class="sr-only">Chat Input</label>
                <textarea
                    id="chat-input"
                    name="chat-input"
                    class="block w-full resize-none rounded-md border border-gray-300 px-3 py-1 text-gray-900 focus:outline-none focus:ring-2 focus:ring-teal-500"
                    placeholder="${this.placeholder}"
                    .value="${this.value}"
                    rows="1"
                    @keydown="${this._handleKeyDown}"
                >
                </textarea>
                <button @click="${this._sendMessage}" class="ml-2 rounded-md bg-teal-500 px-3 py-1 text-white hover:bg-teal-600 focus:outline-none">Send</button>
            </div>
        `}});const _e=new CSSStyleSheet;_e.replaceSync('*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}h1{font-size:1.125rem;line-height:1.75rem}:is(h2,h3){font-size:1rem;line-height:1.5rem}:is(h1,h2,h3,h4){--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1));font-weight:700}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.absolute{position:absolute}.relative{position:relative}.bottom-2{bottom:.5rem}.left-2{left:.5rem}.right-2{right:.5rem}.top-1\\/2{top:50%}.z-10{z-index:10}.m-auto{margin:auto}.my-1{margin-top:.25rem}.mb-1,.mb-\\[0\\.25rem\\],.my-1{margin-bottom:.25rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.grid{display:grid}.h-12{height:3rem}.h-32{height:8rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\\[440px\\]{height:440px}.h-full{height:100%}.max-h-\\[345px\\]{max-height:345px}.min-h-12{min-height:3rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-none{animation:none}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.text-pretty{text-wrap:pretty}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-orange-500\\/50{background-color:rgba(249,115,22,.5)}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity,1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-teal-600\\/50{background-color:rgba(13,148,136,.5)}.bg-teal-600\\/75{background-color:rgba(13,148,136,.75)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-orange-100{--tw-gradient-to:#ffedd5 var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-\\[0\\.2rem\\]{padding:.2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-\\[0\\.675rem\\]{font-size:.675rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-teal-600\\/75{color:rgba(13,148,136,.75)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-orange-500:hover{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}.hover\\:bg-teal-100:hover{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity,1))}.hover\\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-teal-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(20 184 166/var(--tw-ring-opacity,1))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}@media (min-width:640px){.sm\\:sticky{position:sticky}.sm\\:w-full{width:100%}}@media (min-width:768px){.md\\:fixed{position:fixed}.md\\:w-1\\/3{width:33.333333%}}@media (min-width:1024px){.lg\\:text-base{font-size:1rem;line-height:1.5rem}}@media (min-width:1280px){.xl\\:p-8{padding:2rem}}');class $e extends ae{static properties={_isExpanded:{type:Boolean},_isLoaded:{type:Boolean},_currentChat:{type:String},messages:{type:Array},_showOptions:{type:Boolean}};constructor(){super(),this._isExpanded=!0,this._isLoaded=!1,this._currentChat="",this.messages=[],this._showOptions=!0}connectedCallback(){super.connectedCallback(),a(this.shadowRoot,[_e])}_toggleExpand(){this._isExpanded=!this._isExpanded,this._showOptions=this._isExpanded}_resumePreviousChat(){this._isLoaded=!0,this._showOptions=!1,this.messages=de}_startNewChat(){this._isLoaded=!0,this.messages=[],this._showOptions=!1}_handleSendChat(){this._currentChat.trim()&&(this.messages=[...this.messages,{user:this._currentChat},{bot:"Here's the image for you!",imageUrl:"./public/images/tomato-soup.webp",imageAlt:"Tomato Soup"}],this._currentChat="")}_handleInputChange(e){this._currentChat=e.target.value}_getOptionsTemplate(){return N`
            <div class="flex flex-1 flex-col items-center justify-center gap-4 self-center p-4">
                <button id="resume-previous-chat-btn" @click="${this._resumePreviousChat}" class="w-full rounded-md bg-teal-600/50 px-4 py-2 text-white hover:bg-teal-600 focus:outline-none">Resume Previous Chat</button>
                <button @click="${this._startNewChat}" class="w-full rounded-md bg-orange-500/50 px-4 py-2 text-white hover:bg-orange-500 focus:outline-none">Start a New Conversation</button>
            </div>
        `}_getChatTemplate(){return N`
            <div class="flex flex-1 flex-col">
                <chat-messages class="flex-1 overflow-y-auto" .messages="${this.messages}"></chat-messages>
                <chat-input .value="${this._currentChat}" @input="${this._handleInputChange}" @send-chat="${this._handleSendChat}"></chat-input>
            </div>
        `}_getContentTemplate(){return this._isExpanded?this._showOptions?this._getOptionsTemplate():this._getChatTemplate():D}render(){return N`
            <div id="chat-window" class="${this._isExpanded?"h-[440px]":"h-12"} bottom-2 right-2 m-auto flex flex-col rounded-lg border-2 border-solid bg-gray-50 shadow-lg sm:sticky sm:w-full md:fixed md:w-1/3">
                <div class="${this._isExpanded?"rounded-t-lg":"rounded-lg"} flex items-center justify-between bg-teal-600/75 px-4 py-2 text-white shadow-md">
                    <p class="text-lg font-semibold">Chef AI</p>
                    <button id="expand-chat-btn" @click="${this._toggleExpand}" class="rounded-full bg-white px-2 py-1 text-sm text-teal-600/75 hover:bg-teal-100 focus:outline-none">${this._isExpanded?"Collapse":"Expand"}</button>
                </div>
                ${this._getContentTemplate()}
            </div>
        `}}customElements.define("chat-window",$e);const Ce=[{title:"Urban Eats",distance:"0.8",rating:"4.2"},{title:"Flavor Town",distance:"1.2",rating:"4.5"},{title:"Culinary Haven",distance:"2.0",rating:"4.7"},{title:"Savory Delights",distance:"2.3",rating:"4.8"},{title:"Gourmet Paradise",distance:"1.5",rating:"4.6"},{title:"Taste Haven",distance:"1.8",rating:"4.9"},{title:"Bistro Bliss",distance:"2.1",rating:"4.4"},{title:"Epicurean Escape",distance:"2.5",rating:"4.3"},{title:"Dine Divine",distance:"1.0",rating:"4.5"},{title:"Feast Fiesta",distance:"2.2",rating:"4.6"},{title:"Gastronomy Galore",distance:"1.7",rating:"4.7"},{title:"Cuisine Corner",distance:"2.4",rating:"4.8"},{title:"Bistro Bonanza",distance:"1.9",rating:"4.5"},{title:"Palate Pleasures",distance:"2.6",rating:"4.6"},{title:"Gourmet Garden",distance:"1.3",rating:"4.7"},{title:"Savor Station",distance:"2.7",rating:"4.8"}];customElements.define("restaurant-card",class extends ce{static properties={title:{type:String},distance:{type:String},rating:{type:String}};constructor(){super(),this.title="Urban Eats",this.distance="0.8",this.rating="4.2"}render(){return N`
            <div class="flex h-full flex-col justify-center rounded-lg bg-gradient-to-br from-white to-orange-100 p-[0.2rem] shadow-md">
                <div class="mb-1 text-xs font-bold">${this.title}</div>
                <div class="mb-[0.25rem] text-[0.675rem] text-gray-600">${this.distance} miles</div>
                <div class="text-[0.675rem] text-gray-400">${this.rating} stars</div>
            </div>
        `}});class Se extends ae{static properties={_isChatExpanded:{type:Boolean},_currentIndex:{type:Number},chatWindow:{type:Object}};constructor(){super(),this._restaurants=Ce,this._isChatExpanded=!0,this._currentIndex=0,this._resizeObserver=new ResizeObserver((e=>{for(const t of e){const e=t.contentBoxSize&&t.contentBoxSize[0]?t.contentBoxSize[0].blockSize:t.contentRect.height;this._isChatExpanded=e>350,this._currentIndex=0,this.updateCarousel()}}))}connectedCallback(){if(super.connectedCallback(),a(this.shadowRoot,[_e]),this.hasUpdated&&this.chatWindow){const e=this.chatWindow.shadowRoot.querySelector("#chat-window");e&&this._resizeObserver.observe(e)}}firstUpdated(){if(this.chatWindow){const e=this.chatWindow.shadowRoot.querySelector("#chat-window");e&&this._resizeObserver.observe(e)}}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}handleChatResize(e){this._isChatExpanded=e.detail.isExpanded,this._currentIndex=0,this.updateCarousel()}previousCard(){this._currentIndex>0&&(this._currentIndex--,this.updateCarousel())}nextCard(){this._currentIndex<this._restaurants.length-1&&(this._currentIndex++,this.updateCarousel())}updateCarousel(){const e=this.shadowRoot.querySelector(".card-row");e&&(e.style.transform=`translateX(-${100*this._currentIndex}%)`,e.style.transition="none"),this.requestUpdate()}_getExpandedTemplate(){return N`
            <div class="relative w-full overflow-hidden">
                <button
                    class="absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform animate-none cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
                    @click="${this.previousCard}"
                    ?disabled="${0===this._currentIndex}"
                >
                    &lt;
                </button>
                <div class="card-row flex w-full">
                    ${this._restaurants.map((e=>N` <restaurant-card title="${e.title}" distance="${e.distance}" rating="${e.rating}" class="box-border w-full flex-none p-2"></restaurant-card> `))}
                </div>
                <button
                    id="next-restaurant-btn"
                    class="absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform animate-none cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
                    @click="${this.nextCard}"
                    ?disabled="${this._currentIndex===this._restaurants.length-1}"
                >
                    &gt;
                </button>
            </div>
        `}_getGridTemplate(){return N` <div class="grid grid-cols-2 gap-4">${this._restaurants.map((e=>N` <restaurant-card title="${e.title}" distance="${e.distance}" rating="${e.rating}"></restaurant-card> `))}</div> `}render(){return N`
            <div class="p-1 xl:p-8">
                <h4 class="my-1 mb-1 text-base font-semibold text-gray-700">Restaurants Near You</h4>
                ${this._isChatExpanded?this._getExpandedTemplate():this._getGridTemplate()}
            </div>
        `}}customElements.define("information-window",Se);const Ae=[{text:"Spaghetti Carbonara",description:"Italian pasta with eggs, cheese, pancetta, and pepper.",time:"20 mins",calories:"500 cals",servingSize:"4 servs",image:"./public/images/spaghetti-carbonara.webp",tags:["pasta","Italian"],ingredients:["200g spaghetti","100g pancetta","2 large eggs","50g pecorino cheese","50g parmesan","Black pepper","Salt"],steps:["Cook the spaghetti.","Fry the pancetta.","Mix eggs and cheese.","Combine everything with pasta."]},{text:"Chicken Alfredo",description:"Creamy Alfredo sauce with tender chicken over fettuccine.",time:"30 mins",calories:"600 cals",servingSize:"4 servs",image:"./public/images/chicken-alfredo.webp",tags:["pasta","Italian"],ingredients:["200g fettuccine","2 chicken breasts","100g butter","200ml heavy cream","50g parmesan","Garlic","Salt","Pepper"],steps:["Cook the fettuccine.","Cook the chicken.","Make the Alfredo sauce.","Combine everything."]},{text:"Vegetable Stir Fry",description:"A quick and healthy stir fry with a mix of fresh vegetables.",time:"15 mins",calories:"300 cals",servingSize:"2 servs",image:"./public/images/vegetable-stir-fry.webp",tags:["vegetarian","stir fry"],ingredients:["1 bell pepper","1 carrot","100g broccoli","2 tbsp soy sauce","1 tbsp olive oil","Garlic","Ginger"],steps:["Chop the vegetables.","Heat the oil.","Stir fry the vegetables.","Add soy sauce and serve."]},{text:"Beef Tacos",description:"Delicious beef tacos with fresh toppings and a squeeze of lime.",time:"25 mins",calories:"400 cals",servingSize:"3 servs",image:"./public/images/beef-tacos.webp",tags:["tacos","Mexican"],ingredients:["300g ground beef","Taco shells","1 onion","1 tomato","Lettuce","Cheese","Taco seasoning"],steps:["Cook the beef with seasoning.","Prepare the toppings.","Assemble the tacos.","Serve with lime."]},{text:"Margherita Pizza",description:"A simple and classic pizza topped with fresh tomatoes, mozzarella, and basil.",time:"40 mins",calories:"700 cals",servingSize:"4 servs",image:"./public/images/margherita-pizza.webp",tags:["pizza","Italian"],ingredients:["Pizza dough","Tomato sauce","200g mozzarella","Fresh basil","Olive oil","Salt"],steps:["Prepare the dough.","Spread the sauce.","Add cheese and basil.","Bake the pizza."]},{text:"Caesar Salad",description:"A fresh and crunchy salad with romaine lettuce, croutons, and Caesar dressing.",time:"10 mins",calories:"250 cals",servingSize:"2 servs",image:"./public/images/caesar-salad.webp",tags:["salad","healthy"],ingredients:["Romaine lettuce","Croutons","Caesar dressing","Parmesan cheese","Lemon juice","Salt","Pepper"],steps:["Chop the lettuce.","Add croutons and cheese.","Toss with dressing.","Serve immediately."]},{text:"Chocolate Chip Cookies",description:"Classic chocolate chip cookies with a crispy edge and chewy center.",time:"25 mins",calories:"150 cals",servingSize:"12 servs",image:"./public/images/chocolate-chip-cookies.webp",tags:["dessert","cookies"],ingredients:["200g flour","100g butter","100g sugar","1 egg","1 tsp vanilla extract","100g chocolate chips","1 tsp baking soda","Salt"],steps:["Preheat the oven to 180°C.","Mix butter and sugar.","Add egg and vanilla.","Mix in dry ingredients.","Fold in chocolate chips.","Bake for 10-12 minutes."]},{text:"Greek Salad",description:"A refreshing salad with cucumbers, tomatoes, olives, and feta cheese.",time:"15 mins",calories:"200 cals",servingSize:"4 servs",image:"./public/images/greek-salad.webp",tags:["salad","Greek"],ingredients:["2 cucumbers","4 tomatoes","1 red onion","100g feta cheese","Olives","Olive oil","Lemon juice","Oregano","Salt","Pepper"],steps:["Chop the vegetables.","Mix with olives and feta.","Dress with olive oil and lemon juice.","Season with oregano, salt, and pepper."]},{text:"Pancakes",description:"Fluffy pancakes perfect for a weekend breakfast.",time:"20 mins",calories:"350 cals",servingSize:"4 servs",image:"./public/images/pancakes.webp",tags:["breakfast","pancakes"],ingredients:["200g flour","2 tbsp sugar","2 tsp baking powder","1/2 tsp salt","1 egg","300ml milk","2 tbsp melted butter"],steps:["Mix dry ingredients.","Whisk in wet ingredients.","Cook on a hot griddle until bubbles form.","Flip and cook until golden brown."]},{text:"Tomato Soup",description:"A comforting tomato soup made with fresh tomatoes and basil.",time:"30 mins",calories:"150 cals",servingSize:"4 servs",image:"./public/images/tomato-soup.webp",tags:["soup","vegetarian"],ingredients:["1kg tomatoes","1 onion","2 cloves garlic","500ml vegetable broth","Fresh basil","Olive oil","Salt","Pepper"],steps:["Sauté onions and garlic.","Add tomatoes and broth.","Simmer for 20 minutes.","Blend until smooth.","Season with salt and pepper.","Garnish with basil."]},{text:"Lemon Drizzle Cake",description:"A moist and tangy lemon cake with a sweet drizzle.",time:"45 mins",calories:"400 cals",servingSize:"8 servs",image:"./public/images/lemon-drizzle-cake.webp",tags:["dessert","cake"],ingredients:["200g flour","200g sugar","200g butter","4 eggs","2 lemons","100g powdered sugar","1 tsp baking powder","Salt"],steps:["Preheat the oven to 180°C.","Mix butter and sugar.","Add eggs one at a time.","Fold in dry ingredients and lemon zest.","Bake for 35-40 minutes.","Mix lemon juice and powdered sugar for drizzle.","Pour over the cake while warm."]},{text:"Garlic Bread",description:"Crispy and buttery garlic bread, perfect as a side dish.",time:"15 mins",calories:"200 cals",servingSize:"4 servs",image:"./public/images/garlic-bread.webp",tags:["side","bread"],ingredients:["1 baguette","100g butter","4 cloves garlic","Parsley","Salt"],steps:["Preheat the oven to 200°C.","Mix softened butter with minced garlic and parsley.","Slice the baguette and spread the garlic butter.","Wrap in foil and bake for 10-12 minutes."]},{text:"Thai Green Curry",description:"A spicy and flavorful curry with coconut milk, vegetables, and your choice of protein.",time:"35 mins",calories:"450 cals",servingSize:"4 servs",image:"./public/images/thai-green-curry.webp",tags:["curry","Thai"],ingredients:["400ml coconut milk","2 tbsp green curry paste","200g chicken breast","1 bell pepper","100g snap peas","1 tbsp fish sauce","Basil leaves","Jasmine rice"],steps:["Cook the jasmine rice.","Sauté green curry paste until fragrant.","Add chicken and cook until browned.","Pour in coconut milk and simmer.","Add vegetables and cook until tender.","Stir in fish sauce and basil leaves.","Serve over jasmine rice."]},{text:"Beef Stroganoff",description:"Tender beef strips in a creamy mushroom and onion sauce, served over egg noodles.",time:"40 mins",calories:"550 cals",servingSize:"4 servs",image:"./public/images/beef-stroganoff.webp",tags:["beef","comfort"],ingredients:["500g beef sirloin","200g mushrooms","1 onion","2 cloves garlic","200ml sour cream","2 tbsp flour","Beef broth","Egg noodles","Parsley"],steps:["Cook the egg noodles according to package instructions.","Sauté onions and garlic until translucent.","Add beef strips and cook until browned.","Add mushrooms and cook until softened.","Stir in flour and cook for 1 minute.","Pour in beef broth and simmer until sauce thickens.","Stir in sour cream and heat through.","Serve over egg noodles and garnish with parsley."]},{text:"Shrimp Paella",description:"A classic Spanish rice dish with shrimp, saffron, and a mix of fresh vegetables.",time:"50 mins",calories:"600 cals",servingSize:"4 servs",image:"./public/images/shrimp-paella.webp",tags:["seafood","rice"],ingredients:["300g shrimp","2 cups paella rice","1 onion","1 bell pepper","2 tomatoes","4 cloves garlic","1 tsp saffron threads","4 cups chicken broth","Peas","Lemon wedges"],steps:["Sauté onions and garlic until fragrant.","Add bell pepper and cook until softened.","Stir in tomatoes and cook for 5 minutes.","Add paella rice and saffron, stirring to coat the grains.","Pour in chicken broth and bring to a boil.","Reduce heat and simmer until rice is nearly cooked.","Add shrimp and peas, cooking until shrimp are pink and rice is tender.","Garnish with lemon wedges and serve."]},{text:"Quinoa Stuffed Peppers",description:"Colorful bell peppers filled with a savory mixture of quinoa, vegetables, and cheese.",time:"45 mins",calories:"350 cals",servingSize:"4 servs",image:"./public/images/quinoa-stuffed-peppers.webp",tags:["vegetarian","healthy"],ingredients:["4 bell peppers","1 cup quinoa","2 cups vegetable broth","1 zucchini","1 onion","2 cloves garlic","1 can black beans","1 cup corn","1 tsp cumin","1 tsp paprika","1 cup shredded cheese","Cilantro"],steps:["Preheat the oven to 375°F (190°C).","Cook quinoa in vegetable broth according to package instructions.","Sauté onions and garlic until translucent.","Add zucchini, black beans, corn, cumin, and paprika, cooking until vegetables are tender.","Mix cooked quinoa with the vegetable mixture.","Cut the tops off bell peppers and remove seeds.","Stuff each pepper with the quinoa mixture and place in a baking dish.","Top with shredded cheese and bake for 25-30 minutes.","Garnish with cilantro and serve warm."]}];class ze extends ce{static properties={recipe:{type:Object},isExpanded:{type:Boolean},isCompactMode:{type:Boolean},index:{type:Number}};constructor(){super(),this.recipe={text:"Recipe Card",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",time:"5 mins",calories:"200 cals",servingSize:"2 servs",tags:["DeliciousRecipes","HomeCooking"],ingredients:["Ingredient 1","Ingredient 2","Ingredient 3"],steps:["Step 1","Step 2","Step 3"]},this.isExpanded=!1,this.isCompactMode=!1,this.index=0}_getPillColor(e){const t={orange:{tags:["italian","pizza","pancakes","breakfast"],classes:"bg-orange-100 text-orange-800 border-orange-200"},red:{tags:["mexican","tacos","beef"],classes:"bg-red-100 text-red-800 border-red-200"},yellow:{tags:["thai","cookies","curry"],classes:"bg-yellow-100 text-yellow-800 border-yellow-200"},green:{tags:["salad","vegetarian","stir fry"],classes:"bg-green-100 text-green-800 border-green-200"},amber:{tags:["soup","bread","comfort"],classes:"bg-amber-100 text-amber-800 border-amber-200"},blue:{tags:["greek","pasta"],classes:"bg-blue-100 text-blue-800 border-blue-200"},pink:{tags:["dessert"],classes:"bg-pink-100 text-pink-800 border-pink-200"},rose:{tags:["cake"],classes:"bg-rose-100 text-rose-800 border-rose-200"},purple:{tags:["spanish"],classes:"bg-purple-100 text-purple-800 border-purple-200"},cyan:{tags:["seafood"],classes:"bg-cyan-100 text-cyan-800 border-cyan-200"},emerald:{tags:["healthy"],classes:"bg-emerald-100 text-emerald-800 border-emerald-200"},gray:{tags:["side"],classes:"bg-gray-100 text-gray-800 border-gray-200"}},i=e.toLowerCase();for(const e of Object.values(t))if(e.tags.includes(i))return e.classes;return"bg-slate-100 text-slate-800 border-slate-200"}_toggleExpand(){this.isExpanded=!this.isExpanded,this.dispatchEvent(new CustomEvent("toggle-expand",{bubbles:!0,composed:!0,detail:{index:this.index,isExpanded:this.isExpanded}}))}_getStepsTemplate(){return this.recipe.steps.map(((e,t)=>N`
                <li class="flex items-center space-x-2 text-xs">
                    <span class="flex h-6 w-6 items-center justify-center rounded-full bg-orange-200 font-bold text-orange-800">${t+1}</span>
                    <span>${e}</span>
                </li>
            `))}_getExpandedTemplate(){return N`
            <div class="flex justify-between p-2">
                <div>
                    <h4 class="text-xs font-semibold text-gray-700">Ingredients:</h4>
                    <ul class="list-inside list-disc space-y-1 pl-4 text-xs text-gray-600">
                        ${this.recipe.ingredients.map((e=>N`<li>${e}</li>`))}
                    </ul>
                </div>
                <div class="text-xs">
                    <h4 class="font-semibold text-gray-700">Steps:</h4>
                    <ol class="list-inside list-decimal space-y-1 pl-4 text-gray-600">
                        ${this._getStepsTemplate()}
                    </ol>
                </div>
            </div>
        `}_compactCard(){return N`
            <div class="relative overflow-hidden rounded-lg bg-white shadow-sm hover:shadow-md">
                <div class="flex items-center space-x-3 p-3">
                    <img src="${this.recipe.image}" alt="${this.recipe.text}" class="h-16 w-16 flex-shrink-0 rounded-lg object-cover" />
                    <div class="min-w-0 flex-1">
                        <h3 class="truncate text-sm font-medium text-gray-900">${this.recipe.text}</h3>
                        <div class="mt-1 flex items-center space-x-2 text-xs text-gray-500">
                            <span>${this.recipe.time}</span>
                            <span>•</span>
                            <span>${this.recipe.calories}</span>
                            <span>•</span>
                            <span>${this.recipe.servingSize}</span>
                        </div>
                        <p class="mt-1 truncate text-xs text-gray-600">${this.recipe.description}</p>
                        <!-- Tags in compact mode -->
                        <div class="mt-2 flex flex-wrap gap-1">${this.recipe.tags.map((e=>N`<span class="${this._getPillColor(e)} inline-block rounded-full border px-2 py-0.5 text-xs font-medium">${e}</span> `))}</div>
                    </div>
                    <button class="show-more-btn flex-shrink-0 text-sm text-blue-500 hover:text-blue-700" @click="${this._toggleExpand}">${this.isExpanded?"Less":"More"}</button>
                </div>
                ${ne(this.isExpanded,(()=>this._getExpandedTemplate()))}
            </div>
        `}_gridCard(){return N`
            <div class="grid-rows-subgrid row-span-6 grid rounded-lg bg-gradient-to-br from-blue-50 to-green-50 text-left shadow-md">
                <img src="${this.recipe.image}" alt="${this.recipe.text}" class="row-start-1 h-24 w-full rounded-t-lg object-cover" />
                <h3 class="row-start-2 px-1 text-sm">${this.recipe.text}</h3>
                <div class="max-w-40 row-start-3 flex justify-between px-2 pb-2 pt-0.5 text-xs text-gray-400">
                    <p>${this.recipe.time}</p>
                    |
                    <p>${this.recipe.calories}</p>
                    |
                    <p>${this.recipe.servingSize}</p>
                </div>
                <p class="text-pretty row-start-4 truncate px-2 py-1 text-xs text-gray-600">${this.recipe.description}</p>
                <div class="absolute -top-4 left-0 right-0 flex justify-center space-x-2 p-2">
                    ${this.recipe.tags.map((e=>N`<span class="${this._getPillColor(e)} inline-flex items-center rounded-full border p-1 text-xs font-medium">${e}</span> `))}
                </div>
                ${ne(this.isExpanded,(()=>this._getExpandedTemplate()))}
                <button @click="${this._toggleExpand}" class="show-more-btn w-28 justify-self-end border-none bg-transparent p-1 text-sm text-blue-400 hover:text-blue-900">${this.isExpanded?"Show Less":"Show More..."}</button>
            </div>
        `}render(){return this.isCompactMode?this._compactCard():this._gridCard()}}customElements.define("recipe-card",ze);class Ee extends ce{static properties={_expandedCardIndices:{type:Array},recipes:{type:Array},isCompactLayout:{type:Boolean}};constructor(){super(),this._expandedCardIndices=[],this.recipes=Ae,this.isCompactLayout=!1,this._compactQuery=window.matchMedia("(max-width: 640px)"),this._boundHandleLayoutChange=this._handleLayoutChange.bind(this)}connectedCallback(){super.connectedCallback(),this._compactQuery&&this._boundHandleLayoutChange&&(this._compactQuery.addEventListener("change",this._boundHandleLayoutChange),this.isCompactLayout=this._compactQuery.matches)}disconnectedCallback(){super.disconnectedCallback(),this._compactQuery&&this._boundHandleLayoutChange&&this._compactQuery.removeEventListener("change",this._boundHandleLayoutChange)}async _handleLayoutChange(e){this.isCompactLayout=e.matches,await this.updateComplete,window.dispatchEvent(new CustomEvent("resize-work-complete"))}_handleToggleExpand(e){const{index:t,isExpanded:i}=e.detail;this._expandedCardIndices=i?[...this._expandedCardIndices,t]:this._expandedCardIndices.filter((e=>e!==t))}_getRecipeCardsTemplate(){return this.recipes.map(((e,t)=>{const i=this._expandedCardIndices.includes(t),r=this.isCompactLayout?"relative rounded-lg bg-white text-left shadow-md hover:shadow-lg":(i?"col-span-2 lg:col-span-2":"")+" grid-rows-subgrid relative row-span-6 mt-1 grid gap-0 rounded-lg bg-white text-left shadow-md hover:shadow-lg";return N` <recipe-card class="${r}" .recipe="${e}" .isExpanded="${i}" .isCompactMode="${this.isCompactLayout}" .index="${t}" @toggle-expand="${this._handleToggleExpand}"></recipe-card> `}))}render(){const e=this.isCompactLayout?"grid grid-cols-1 gap-3 py-2 pl-2 pr-4":"grid grid-cols-2 gap-5 py-2 pl-2 pr-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xl:gap-6";return N` <div class="${e}" @toggle-expand="${this._handleToggleExpand}">${this._getRecipeCardsTemplate()}</div> `}}customElements.define("recipe-grid",Ee);const Te=[{image:"./public/images/pancakes.webp",alt:"Pancakes"},{image:"./public/images/greek-salad.webp",alt:"Greek Salad"},{image:"./public/images/beef-tacos.webp",alt:"Beef Tacos"},{image:"./public/images/tomato-soup.webp",alt:"Tomato Soup"},{image:"./public/images/chocolate-cake.webp",alt:"Chocolate Cake"},{image:"./public/images/spaghetti-carbonara.webp",alt:"Spaghetti Carbonara"},{image:"./public/images/homemade-pizza.webp",alt:"Homemade Pizza"},{image:"./public/images/vegetarian-stir-fry.webp",alt:"Vegetarian Stir Fry"},{image:"./public/images/chicken-alfredo.webp",alt:"Chicken Alfredo"},{image:"./public/images/margherita-pizza.webp",alt:"Margherita Pizza"},{image:"./public/images/caesar-salad.webp",alt:"Caesar Salad"},{image:"./public/images/chocolate-chip-cookies.webp",alt:"Chocolate Chip Cookies"},{image:"./public/images/vegan-burger.webp",alt:"Vegan Burger"},{image:"./public/images/sushi-platter.webp",alt:"Sushi Platter"},{image:"./public/images/ramen-noodles.webp",alt:"Ramen Noodles"},{image:"./public/images/fruit-salad.webp",alt:"Fruit Salad"}];customElements.define("recipe-carousel",class extends ce{static properties={carouselItems:{type:Array},_currentIndex:{type:Number},_carouselWidth:{type:Number}};constructor(){super(),this.carouselItems=Te,this._currentIndex=0,this._carouselWidth=0,this._resizeObserver=new ResizeObserver((e=>{for(const t of e)t.contentBoxSize&&t.contentBoxSize[0]?this._carouselWidth=t.contentBoxSize[0].inlineSize:this._carouselWidth=t.contentRect.width}))}connectedCallback(){if(super.connectedCallback(),this.hasUpdated){const e=this.querySelector(".carousel");e&&this._resizeObserver.observe(e)}}firstUpdated(){const e=this.querySelector(".carousel");e&&this._resizeObserver.observe(e)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}previousItem(){const e=this.querySelector(".carousel");if(e){const t=this._getItemsPerView();e.scrollBy({left:-e.clientWidth/t,behavior:"instant"}),this._currentIndex=Math.max(this._currentIndex-1,0)}}nextItem(){const e=this.querySelector(".carousel");if(e){const t=this._getItemsPerView();e.scrollBy({left:e.clientWidth/t,behavior:"instant"}),this._currentIndex=Math.min(this._currentIndex+1,this.carouselItems.length-t)}}_getItemsPerView(){return this._carouselWidth>=800?5:3}_getCarouselItemsTemplate(){return this.carouselItems.map((e=>N`
                <div class="carousel-item mr-4 h-36 w-1/3 flex-none snap-center overflow-hidden rounded-lg xl:w-1/5">
                    <img src="${e.image}" alt="${e.alt}" class="h-full w-full rounded-t-lg object-cover drop-shadow-xl" />
                </div>
            `))}render(){return N`
            <div class="box-border w-full bg-gray-100 shadow-md">
                <div class="relative flex w-full gap-4 overflow-hidden">
                    <button
                        @click="${this.previousItem}"
                        class="absolute left-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 transform items-center justify-center rounded-full border-2 border-solid border-orange-300 bg-white bg-opacity-100 p-2 text-black shadow-md hover:bg-orange-300 disabled:cursor-not-allowed disabled:opacity-50"
                        ?disabled="${0===this._currentIndex}"
                        aria-label="Previous Recipe"
                    >
                        &lt;
                    </button>
                    <div class="px-5 pb-1">
                        <div class="carousel scrollbar-hide flex w-full snap-x overflow-x-scroll scroll-auto">${this._getCarouselItemsTemplate()}</div>
                    </div>
                    <button
                        id="next-item-carousel-btn"
                        @click="${this.nextItem}"
                        class="absolute right-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 transform items-center justify-center rounded-full border-2 border-solid border-orange-300 bg-white bg-opacity-100 p-2 text-black hover:bg-orange-300 disabled:cursor-not-allowed disabled:opacity-50"
                        ?disabled="${this._currentIndex===this.carouselItems.length-this._getItemsPerView()}"
                        aria-label="Next Recipe"
                    >
                        &gt;
                    </button>
                </div>
            </div>
        `}});customElements.define("section-heading",class extends ce{static properties={title:{type:String},subtitle:{type:String}};render(){return N`
            <h2 class="has-[+p]:mb-1 text-left leading-9 tracking-tight">${this.title}</h2>
            ${ne(this.subtitle,(()=>N`<p class="pl-1 text-sm text-gray-600">${this.subtitle}</p>`))}
        `}});customElements.define("main-content",class extends ce{render(){return N`<div class="grid h-full grow content-center gap-1 p-4">
            <section-heading title="Featured Recipes"></section-heading>
            <recipe-carousel></recipe-carousel>
            <section-heading title="Delicious Recipes" subtitle="Explore a variety of recipes to satisfy your culinary cravings."></section-heading>
            <recipe-grid></recipe-grid>
        </div>`}});const Pe=[{text:"How to Make Spaghetti Carbonara",description:"A step-by-step guide to making classic spaghetti carbonara."},{text:"Baking the Perfect Chocolate Cake",description:"Learn the secrets to baking a moist and delicious chocolate cake."},{text:"Grilling Tips for Beginners",description:"Essential tips and tricks for mastering the grill."},{text:"Making Homemade Pizza",description:"How to make delicious homemade pizza from scratch."},{text:"Vegetarian Stir-Fry Recipe",description:"A quick and easy vegetarian stir-fry recipe."},{text:"How to Make Chicken Alfredo",description:"Step-by-step instructions for making creamy chicken alfredo."},{text:"Beef Tacos Recipe",description:"Learn how to make delicious beef tacos with fresh toppings."},{text:"Margherita Pizza Recipe",description:"A guide to making classic Margherita pizza with fresh ingredients."},{text:"Caesar Salad Preparation",description:"How to prepare a fresh and crunchy Caesar salad."},{text:"Perfecting French Toast",description:"Tips and tricks for making the perfect French toast."},{text:"How to Make Sushi",description:"A beginner's guide to making sushi at home."},{text:"Classic Beef Stew Recipe",description:"How to make a hearty and delicious beef stew."},{text:"Vegan Chocolate Mousse",description:"A simple recipe for a rich and creamy vegan chocolate mousse."},{text:"Homemade Ice Cream",description:"Learn how to make creamy homemade ice cream with various flavors."}];customElements.define("video-card",class extends ce{static properties={text:{type:String},description:{type:String}};constructor(){super(),this.text="Modern Video Title",this.description="A brief description of the video content goes here."}render(){return N`
            <div class="rounded-lg bg-white shadow-md">
                <video controls class="w-full rounded-t-lg object-cover">
                    <source type="video/mp4" />
                    <p>Your browser doesn't support HTML video.</p>
                </video>
                <div class="p-4">
                    <h3 class="text-base font-medium text-gray-900">${this.text}</h3>
                    <p class="mt-2 text-sm text-gray-600">${this.description}</p>
                </div>
            </div>
        `}});customElements.define("video-grid",class extends ce{static properties={videos:{type:Array}};constructor(){super(),this.videos=Pe}async _onContentVisibilityChange(e){await this.updateComplete,window.dispatchEvent(new CustomEvent("video-grid-content-visibility-complete"))}_getVideoCardsTemplate(){return this.videos.map((e=>N`<video-card text="${e.text}" description="${e.description}"></video-card>`))}render(){return N`
            <div class="flex flex-col p-2">
                <section-heading title="Videos" subtitle="Watch and learn from our collection of cooking videos."></section-heading>
                <div class="content-auto grid grid-cols-1 gap-6 p-4 lg:grid-cols-2 xl:gap-7" @contentvisibilityautostatechange=${this._onContentVisibilityChange}>${this._getVideoCardsTemplate()}</div>
            </div>
        `}});const Me=[{title:"10 Quick and Easy Weeknight Dinners",description:"Discover a collection of recipes that are perfect for busy weeknights. These dishes are quick to prepare and delicious to eat.",author:"Jane Doe",date:"2024-10-01",image:"./public/images/week-night-dinners.webp",tags:["quick","easy","weeknight","dinner"]},{title:"The Ultimate Guide to Baking Bread at Home",description:"Learn the art of baking bread with this comprehensive guide. From sourdough to whole wheat, we've got you covered.",author:"John Smith",date:"2024-09-15",image:"./public/images/bread-at-home.webp",tags:["baking","bread","guide"]},{title:"5 Healthy Smoothie Recipes to Start Your Day",description:"Kickstart your morning with these nutritious and delicious smoothie recipes. Perfect for a quick breakfast on the go.",author:"Emily Johnson",date:"2024-08-20",image:"./public/images/5-healthy-smoothie.webp",tags:["healthy","smoothie","breakfast"]},{title:"Exploring the Flavors of Mediterranean Cuisine",description:"Dive into the rich and diverse flavors of Mediterranean cuisine. Explore recipes that are both healthy and flavorful.",author:"Michael Brown",date:"2024-07-30",image:"./public/images/mediterranean-cuisine.webp",tags:["Mediterranean","cuisine","healthy"]},{title:"Vegan Desserts That Will Satisfy Your Sweet Tooth",description:"Indulge in these delicious vegan desserts that are sure to satisfy your sweet cravings. Perfect for any occasion.",author:"Sarah Lee",date:"2024-06-25",image:"./public/images/vegan-desserts.webp",tags:["vegan","desserts","sweet"]},{title:"Mastering the Art of French Cooking",description:"A deep dive into the techniques and recipes that define French cuisine. Perfect for both beginners and experienced cooks.",author:"Julia Child",date:"2024-05-10",image:"./public/images/mastering-art-of-french-cooking.webp",tags:["French","cooking","techniques"]},{title:"Top 10 Superfoods You Should Include in Your Diet",description:"Discover the top superfoods that can boost your health and well-being. Learn how to incorporate them into your daily meals.",author:"Dr. Mark Hyman",date:"2024-04-05",image:"./public/images/superfoods-you-should-include.webp",tags:["superfoods","health","nutrition"]},{title:"A Beginner's Guide to Meal Prepping",description:"Learn the basics of meal prepping and how it can save you time and money. Includes tips and recipes to get you started.",author:"Rachel Ray",date:"2024-03-15",image:"./public/images/meal-prepping.webp",tags:["meal prepping","guide","tips"]},{title:"The Best Comfort Foods for a Cozy Night In",description:"Indulge in these comforting recipes that are perfect for a cozy night at home. From mac and cheese to chicken pot pie, we've got you covered.",author:"Ina Garten",date:"2024-02-20",image:"./public/images/best-comfort-food.webp",tags:["comfort food","cozy","recipes"]},{title:"Innovative Plant-Based Protein Recipes",description:"Discover creative plant-based protein recipes that are both tasty and nutritious. Perfect for a healthy lifestyle.",author:"Laura Green",date:"2024-06-10",image:"./public/images/plant-based-protein.webp",tags:["plant-based","protein","recipes"]},{title:"Gluten-Free Baking Essentials",description:"Master gluten-free baking with these essential tips and recipes. Enjoy delicious baked goods without the gluten.",author:"Mark Taylor",date:"2024-05-22",image:"./public/images/gluten-free-baking.webp",tags:["gluten-free","baking","essentials"]},{title:"Seasonal Salads for Every Occasion",description:"Refresh your meals with these seasonal salad recipes. Perfect for any occasion and packed with fresh ingredients.",author:"Samantha Lee",date:"2024-04-18",image:"./public/images/seasonal-salads.webp",tags:["seasonal","salads","recipes"]},{title:"Decadent Low-Carb Desserts",description:"Indulge in these delicious low-carb desserts that satisfy your sweet tooth without the extra carbs.",author:"Kevin White",date:"2024-03-30",image:"./public/images/low-carb-desserts.webp",tags:["low-carb","desserts","decadent"]}];customElements.define("article-card",class extends ce{static properties={title:{type:String},description:{type:String},author:{type:String},date:{type:String},image:{type:String},tags:{type:Array}};constructor(){super(),this.title="Vegan Desserts That Will Satisfy Your Sweet Tooth",this.description="Indulge in these delicious vegan desserts that are sure to satisfy your sweet cravings. Perfect for any occasion.",this.author="Sarah Lee",this.date="2023-06-25",this.image="./public/images/placeholder-image-150.svg",this.tags=["vegan","desserts","sweet"]}render(){const e=this.tags.map((e=>N`<span class="inline-flex items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-orange-500/10">${e}</span>`));return N`
            <div class="grid-cols-subgrid col-span-2 grid gap-4 rounded-lg bg-gradient-to-br from-blue-50 to-green-50 shadow-md hover:shadow-lg">
                <div class="flex flex-col justify-around p-4 xl:p-6">
                    <div>
                        <h3 class="lg:text-lg">${this.title}</h3>
                        <p class="mt-6 text-sm text-gray-600 lg:text-base">${this.description}</p>
                    </div>
                    <div class="flex flex-col gap-2">
                        <div class="text-sm text-gray-500">
                            <p>By <b>${this.author}</b> on ${this.date}</p>
                        </div>
                        <div class="flex flex-wrap gap-2">${e}</div>
                    </div>
                </div>
                <div class="flex">
                    <img src="${this.image}" alt="${this.title}" class="w-full object-cover" />
                </div>
            </div>
        `}});customElements.define("article-grid",class extends ce{static properties={articles:{type:Array}};constructor(){super(),this.articles=Me}_getArticlesTemplate(){return this.articles.map((e=>N`<article-card class="grid-cols-subgrid col-span-2 grid" title="${e.title}" description="${e.description}" author="${e.author}" image="${e.image}" .tags="${e.tags}"></article-card>`))}render(){return N`
            <div class="p-2">
                <section-heading title="Articles" subtitle="Read insightful articles about food, cooking tips, and more."></section-heading>
                <div class="content-auto grid grid-cols-2 gap-6 p-4 xl:grid-cols-4 xl:gap-7">${this._getArticlesTemplate()}</div>
            </div>
        `}});customElements.define("newsletter-signup",class extends ce{render(){return N`
            <div class="mt-8 rounded-lg bg-gray-100 p-4 shadow-md">
                <section-heading title="Stay Updated" subtitle="Sign up for our newsletter to receive the latest recipes and updates."></section-heading>
                <form class="mt-4">
                    <label for="email" class="sr-only">Enter your email</label>
                    <input id="email" type="email" placeholder="Enter your email" class="w-full rounded-md border border-gray-300 p-2" />
                    <button type="submit" class="mt-2 w-full rounded-md bg-orange-500 p-2 text-white hover:bg-orange-600">Subscribe</button>
                </form>
            </div>
        `}});const Ie=[{quote:"Always use fresh ingredients for the best flavor.",author:"Chef Alex Thompson"},{quote:"Don't be afraid to experiment with new recipes and ingredients.",author:"Chef Jamie Smith"},{quote:"Keep your knives sharp to make food prep easier.",author:"Chef Jordan Lee"},{quote:"Taste as you cook and adjust the seasoning as needed.",author:"Chef Taylor Brown"},{quote:"Clean as you go to make cleanup easier.",author:"Chef Morgan Davis"},{quote:"Have fun and enjoy the process of cooking!",author:"Chef Casey Johnson"},{quote:"Use a thermometer to ensure your meat is cooked to the right temperature.",author:"Chef Riley Adams"},{quote:"Let your meat rest before slicing to retain its juices.",author:"Chef Avery Martinez"},{quote:"Use the right pan for the job to achieve the best results.",author:"Chef Cameron White"},{quote:"Don't overcrowd the pan to ensure even cooking.",author:"Chef Jordan Taylor"},{quote:"Prep all your ingredients before you start cooking to stay organized.",author:"Chef Sydney Clark"},{quote:"Use fresh herbs to add a burst of flavor to your dishes.",author:"Chef Peyton Brooks"},{quote:"Invest in good quality cookware for better performance.",author:"Chef Quinn Parker"},{quote:"Season your food at every stage of cooking for depth of flavor.",author:"Chef Reese Morgan"},{quote:"Learn to balance flavors like sweet, salty, sour, and bitter.",author:"Chef Taylor Bailey"}];customElements.define("chef-tips",class extends ce{static properties={chefTips:{}};constructor(){super(),this.chefTips=Ie}_getChefTipsTemplate(){return this.chefTips.map((e=>N`
                <blockquote class="rounded-lg bg-gray-100 p-4 shadow-md">
                    <p class="italic text-gray-700">"${e.quote}"</p>
                    <footer class="mt-2 text-right text-sm text-gray-500">- ${e.author}</footer>
                </blockquote>
            `))}render(){return N`
            <div class="p-4">
                <section-heading title="Chef's Tips"></section-heading>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:gap-6">${this._getChefTipsTemplate()}</div>
            </div>
        `}});const je=new CSSStyleSheet;je.replaceSync('*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}h1{font-size:1.125rem;line-height:1.75rem}:is(h2,h3){font-size:1rem;line-height:1.5rem}:is(h1,h2,h3,h4){--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1));font-weight:700}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:1720px){.container{max-width:1720px}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.absolute{position:absolute}.relative{position:relative}.-top-4{top:-1rem}.left-0{left:0}.right-0{right:0}.top-1\\/2{top:50%}.z-10{z-index:10}.col-span-2{grid-column:span 2/span 2}.row-span-6{grid-row:span 6/span 6}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.row-start-4{grid-row-start:4}.mx-0\\.5{margin-left:.125rem;margin-right:.125rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.ml-2{margin-left:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-16{height:4rem}.h-24{height:6rem}.h-32{height:8rem}.h-36{height:9rem}.h-6{height:1.5rem}.h-full{height:100%}.max-h-\\[345px\\]{max-height:345px}.min-h-12{min-height:3rem}.w-1\\/3{width:33.333333%}.w-10{width:2.5rem}.w-16{width:4rem}.w-28{width:7rem}.w-6{width:1.5rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-40{max-width:10rem}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-\\[content\\]{flex-basis:content}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize-none{resize:none}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-center{scroll-snap-align:center}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-subgrid{grid-template-columns:subgrid}.grid-rows-subgrid{grid-template-rows:subgrid}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.justify-self-end{justify-self:end}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.scroll-auto{scroll-behavior:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-pretty{text-wrap:pretty}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-cyan-200{--tw-border-opacity:1;border-color:rgb(165 243 252/var(--tw-border-opacity,1))}.border-emerald-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity,1))}.border-orange-300{--tw-border-opacity:1;border-color:rgb(253 186 116/var(--tw-border-opacity,1))}.border-pink-200{--tw-border-opacity:1;border-color:rgb(251 207 232/var(--tw-border-opacity,1))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-rose-200{--tw-border-opacity:1;border-color:rgb(254 205 211/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-cyan-100{--tw-bg-opacity:1;background-color:rgb(207 250 254/var(--tw-bg-opacity,1))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-orange-200{--tw-bg-opacity:1;background-color:rgb(254 215 170/var(--tw-bg-opacity,1))}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity,1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}.bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 231 243/var(--tw-bg-opacity,1))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-rose-100{--tw-bg-opacity:1;background-color:rgb(255 228 230/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity,1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100{background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-opacity-100,.bg-yellow-100{--tw-bg-opacity:1}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from:#eff6ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,246,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-green-50{--tw-gradient-to:#f0fdf4 var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-4{padding-right:1rem}.pt-0\\.5{padding-top:.125rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-7{line-height:1.75rem}.leading-9{line-height:2.25rem}.tracking-tight{letter-spacing:-.025em}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-cyan-800{--tw-text-opacity:1;color:rgb(21 94 117/var(--tw-text-opacity,1))}.text-emerald-800{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity,1))}.text-pink-800{--tw-text-opacity:1;color:rgb(157 23 77/var(--tw-text-opacity,1))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-rose-800{--tw-text-opacity:1;color:rgb(159 18 57/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-gray-300{--tw-ring-opacity:1;--tw-ring-color:rgb(209 213 219/var(--tw-ring-opacity,1))}.ring-orange-500\\/10{--tw-ring-color:rgba(249,115,22,.1)}.drop-shadow-xl{--tw-drop-shadow:drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08))}.drop-shadow-xl,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.content-auto{content-visibility:auto}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.hover\\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\\:bg-orange-300:hover{--tw-bg-opacity:1;background-color:rgb(253 186 116/var(--tw-bg-opacity,1))}.hover\\:bg-orange-500:hover{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}.hover\\:bg-orange-600:hover{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.hover\\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.hover\\:bg-teal-800:hover{--tw-bg-opacity:1;background-color:rgb(17 94 89/var(--tw-bg-opacity,1))}.hover\\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.hover\\:text-blue-900:hover{--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\\:shadow-lg:hover,.hover\\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-teal-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(20 184 166/var(--tw-ring-opacity,1))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.has-\\[\\+p\\]\\:mb-1:has(+p){margin-bottom:.25rem}@media (min-width:640px){.sm\\:col-span-2{grid-column:span 2/span 2}.sm\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.md\\:col-start-3{grid-column-start:3}.md\\:row-start-1{grid-row-start:1}.md\\:row-end-6{grid-row-end:6}.md\\:block{display:block}.md\\:basis-full{flex-basis:100%}.md\\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){.lg\\:col-span-2{grid-column:span 2/span 2}.lg\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\\:text-base{font-size:1rem;line-height:1.5rem}.lg\\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1280px){.xl\\:w-1\\/5{width:20%}.xl\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\\:gap-6{gap:1.5rem}.xl\\:gap-7{gap:1.75rem}.xl\\:p-6{padding:1.5rem}}@media (min-width:1720px){.\\33xl\\:hidden{display:none}}');customElements.define("cooking-app",class extends ae{connectedCallback(){super.connectedCallback(),a(this.shadowRoot,[je])}firstUpdated(){const e=this.shadowRoot.querySelector("chat-window"),t=this.shadowRoot.querySelector("information-window");e&&t&&(t.chatWindow=e)}render(){return N`
            <div class="grid h-full grid-cols-1 gap-1 bg-white md:grid-cols-3">
                <div class="flex flex-col sm:col-span-2">
                    <h1 class="leading-7 tracking-tight">Cook Book</h1>
                    <app-ribbon></app-ribbon>
                    <main-content></main-content>
                </div>
                <div class="flex w-full flex-col md:col-start-3 md:row-start-1 md:row-end-6 md:grid-cols-1">
                    <div class="flex md:block">
                        <chat-window class="w-full md:basis-full"></chat-window>
                        <div class="hidden grow-0 basis-[content] text-center md:block">
                            <information-window></information-window>
                        </div>
                    </div>
                </div>
                <video-grid class="sm:col-span-2"></video-grid>
                <article-grid class="sm:col-span-2"></article-grid>
                <chef-tips class="sm:col-span-2"></chef-tips>
                <newsletter-signup class="flex justify-center p-4 sm:col-span-2"></newsletter-signup>
            </div>
        `}});