blue-chestnut-solar-expert 0.0.18 → 0.0.20

package/dist/stencil-library/p-02607fda.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["outputCss","EraserIcon","inline","size","render","h","key","xmlns","width","this","height","viewBox","fill","stroke","class","d","HouseIcon","Icon","name","renderRGB","rgb","mask","canvas","document","createElement","dw","dh","ctx","getContext","img","getImageData","y","x","rgbIdx","Math","floor","imgIdx","factor","data","round","rasters","putImageData","renderSolarPanel","solarPanel","panelWidth","panelHeight","azimuthAngle","pitchAngle","pixelPosition","cos","PI","horizontal","save","translate","rotate","fillStyle","fillRect","strokeStyle","lineWidth","strokeRect","restore","renderCombinedWithZoom","zoom","rgbCanvas","undefined","imgData","zoomedWidth","zoomedHeight","startX","startY","zoomedImgData","ImageData","i","zoomedX","zoomedY","zoomedI","DOTTED_LINE_COLOR","ROW_SPACING","COLUMN_SPACING","BORDER_INSET","DEFAULT_SUNNINESS","SOLAR_RADIATION","CONSUMPTION_PROFILES","mostly_at_home","mostly_away","projectPointPerpendicularToLine","lastPoint","secondLastPoint","dx","dy","perpDx","perpDy","perpLength","sqrt","normalizedPerpDx","normalizedPerpDy","vectorToMouse","projectionLength","drawPolygon","polygonCtx","polygonCanvas","polygon","shiftKeyPressed","mousePoint","strokeColor","fillColor","highlightedEdge","highlightColor","beginPath","points","forEach","point","index","moveTo","lineTo","closed","length","pointA","pointB","projectedPoint","drawPerpendicularDottedLine","startPoint","endPoint","drawCircle","radius","distance","pow","arc","dashPattern","setLineDash","isPointInPolygon","num_vertices","inside","p1","p2","min","max","x_intersection","polygonKeyboardCombinations","description","moveTool","ariaLabel","icon","cursor","keyboardShortcut","explanation","roofTool","keyboardCombinations","obstructionTool","deleteTool","markRoofEdgeTool","tools","DEFAULT_SOLAR_EXPERT_CONFIG","openRoofColor","closedRoofColor","openObstructionColor","closedObstructionColor","roofPolygonFillColor","obstructionPolygonFillColor","roofPolygonHoverFillColor","obstructionPolygonHoverFillColor","roofPolygonSelectedFillColor","obstructionPolygonSelectedFillColor","DEFAULT_SOLAR_PANEL_TYPE","widthMeters","heightMeters","kWattPeak","efficiency","price","getFillColor","selectedPolygon","hoveredPolygon","_id","config","isHovered","type","isSelected","byteToHex","push","toString","slice","unsafeStringify","arr","offset","toLowerCase","getRandomValues","rnds8","Uint8Array","rng","crypto","bind","Error","randomUUID","native","v4","options","buf","rnds","random","calculatePolygonArea","area","j","abs","azimuthToCardinal","azimuth","latLngToPixel","bounds","latLng","latToPixel","lat","south","north","lngToPixel","lng","west","east","longitude","latitude","getPixelInMeters","rgbTiff","latDiff","pixelHeight","pixelInMeters","projectPoint","angle","sin","projectPolygon","map","details","offsetPolygon","offsetX","offsetY","minX","minY","maxX","maxY","newPoints","equalsPoints","point1","point2","intersects","line1","line2","start","end","p3","p4","d1","d2","d3","d4","getBestFittingRoofSegment","roof","roofSegmentStats","polygonBounds","p","bestSegment","bestIoU","segment","sw","boundingBox","ne","segmentBounds","interLeft","interRight","interTop","interBottom","interWidth","interHeight","intersectionArea","polygonArea","segmentArea","unionArea","iou","generateGrid","minMax","anker","rowSpacing","columnSpacing","grid","widthCount","ceil","heightCount","widthOffset","heightOffset","row","positionedSolarPanel","panel","getSolarPanelLines","lines","solarPanelInObstacle","obstacle","nextPoint","border","line","solarPanelInPolygon","isPanelObstructed","obstacles","getSolarPanelsInPolygon","solarPanels","newRow","isObstructed","getOptimalSolarPosition","horizontalSolarPanel","verticalSolarPanel","numberOfPanels","solarPanelsInPolygon","numberOfPanelsInPolygon","reduce","acc","projectObstacles","inset","result","offsetObstacle","projectedObstacle","insetObstacle","insetPolygon","isClockwise","sum","curr","next","isClockwisePolygon","insetPoints","prev","v1","v2","perp1","perp2","length1","length2","bisector","bisectorLength","insetPoint","getOptimalSolarPositionFully","insetRoof","projectedOffset","projectedObstacles","horizontalSolarPanels","unprojectedPanels","flat","unprojectedPanel","offsetPosition","en","settings","language","borderInset","mapSelector","accept","chooseOnMap","solarExpert","searchPlaceholder","solarSystemForm","title","systemInformation","panelPeakPower","totalSystemPeakPower","electricityPrice","compensationRate","autonomy","costSavings","householdConsumptionTitle","consumptionProfileTitle","electricityCostsTitle","compensationRateTitle","resultsTitle","savingsDisclaimer","annualConsumption","email","nameError","emailError","consumptionProfiles","mostlyAtHome","mostlyAway","chart","consumption","production","consumptionProfile","relativeConsumption","hourOfDay","validEmailError","requestOffer","requestOfferButton","year","additionalComponents","heatPump","electricCar","battery","chargingTime","chargingTimeDay","chargingTimeNight","annualPriceIncrease","costSavings25Years","mapDraw","instructions","show","hide","parts","obstruction","delete","move","noPolygonSelected","noAddressSelected","information","calculateSolarPanels","markRoofEdge","panels","pitch","de","es","languageStrings","getLanguageStrings","lang","defaultLang","langStrings","mergedStrings","JSON","parse","stringify","deepMerge","target","source","Object","appendToMap","propName","value","items","get","set","includes","debounce","fn","ms","timeoutId","args","clearTimeout","setTimeout","isConnected","maybeElement","cleanupElements","keys","filter","stencilSubscription","getRenderingRef","elmsToUpdate","Map","dispose","clear","elm","elements","forceUpdate","reset","elms","unwrap","val","createObservableMap","defaultState","shouldUpdate","a","b","unwrappedState","states","entries","handlers","cb","oldValue","state","Proxy","_","ownKeys","Array","from","getOwnPropertyDescriptor","enumerable","configurable","has","on","eventName","callback","removeFromArray","onChange","unSet","newValue","unReset","use","subscriptions","unsubs","subscription","unsub","array","item","indexOf","createStore","radiusMeters","heatPumpM2Consumption","settingsVersion","isMobile","MapDraw","apiKey","showInstructions","showSettings","loadingState","draggedPointIndex","hoveredPointIndex","altKeyPressed","currentTool","roofPolygons","roofPolygonsSolarPanels","obstructionPolygons","buildingInsights","canvasElement","getCurrentPolygon","componentWillLoad","getBuildingImages","getBuildingInsights","componentDidLoad","requestAnimationFrame","rect","getBoundingClientRect","drawMap","sizeCanvas","sameLocation","center","clearRect","fetchSolarData","alert","maxPanels","solarPotential","maxArrayPanelsCount","approximatedPanels","positionedPanels","__","rotation","sunniness","buildingStats","sunshineQuantiles","convertToCanvasCoordinates","event","siteX","clientX","left","siteY","clientY","top","right","bottom","handleMouseMove","currentPolygon","distances","distanceA","distanceB","edgeLength","dist","edge","closestEdge","sort","newHoveredPointIndex","findIndex","newHoveredPolygon","values","drawPolygons","metersInPixels","convertedSolarPanel","deletePolygon","handleKeyDown","HTMLInputElement","shiftKey","altKey","pop","pressedKey","tool","find","t","handleKeyUp","handleMouseDown","contains","atan2","handleAzimuthChange","pointIndex","newPolygon","uuidv4","firstPoint","closePolygon","handleMouseUp","bestMatch","azimuthDegrees","pitchDegrees","scrollToCanvas","assignedRoofStats","stats","handlePitchChange","parseFloat","handleToolSelect","el","querySelector","scrollIntoView","behavior","handleSettingsClick","handleSettingsClose","handleSettingsSave","detail","id","onClick","onToolSelect","style","backgroundColor","aspectRatio","ref","selectEdgeTool","systemConfigs","onClose","onSave","MapSelector","isLoaded","autocomplete","marker","circle","inputElement","mapElement","loadGoogleMapsScript","loader","Loader","libraries","places","maps","Promise","all","importLibrary","initializeAutocomplete","initializeMap","error","console","Autocomplete","addListener","place","getPlace","geometry","location","setCenter","setZoom","mapTypeControl","streetViewControl","mapTypeId","mapId","tilt","e","updateMapLocation","google","Circle","strokeOpacity","strokeWeight","fillOpacity","handleRadiusChange","setRadius","handleAcceptPosition","log","placeholder","onInput","MoveIcon","OctagonMinusIcon","PolygonButtons","PolygonInformation","toFixed","onKeyDown","blur","SearchIcon","cx","cy","r","SettingsIcon","SettingsModal","tempSettings","close","handleClose","confirm","emit","handleSave","handleInputChange","x1","y1","x2","y2","selected","SolarExpert","Env","GOOGLE_MAPS_API_KEY","showMapSelector","test","navigator","userAgent","window","innerWidth","scrollToMapDraw","solarSystemFormElement","mapDrawElement","handleChooseOnMap","Fragment","SolarSystemForm","householdConsumption","electricCarChargingTime","updateSystemConfigs","recalculate","updateChart","norm","heatPumpDailyConsumption","heatPumpYearlyConsumption","electricCarDailyConsumption","electricCarYearlyConsumption","totalHouseholdConsumption","peakKwh","radiation","energyUsageOfProduction","soldEnergy","batteryCharge","hourlyCarConsumption","hourlyConsumption","energyDifference","remainingBatteryCapacity","energyToStore","energyNeeded","energyFromBattery","totalSavings","currentPrice","yearlySavings","validateForm","isValid","trim","emailRegex","handleRequestOffer","systemConfig","readOnly","readonly","parseInt","checked","htmlFor","step","disabled","color","ToolBox","toolStrings"],"sources":["src/output.css?tag=eraser-icon","src/components/icons/eraser.tsx","src/output.css?tag=house-icon","src/components/icons/house.tsx","src/output.css?tag=icon-selector","src/components/icons/icon.tsx","src/utils/visualize.ts","src/constants.ts","src/utils/render/projection.ts","src/utils/render/polygon.ts","src/utils/render/tools.ts","src/config.ts","src/utils/render/color.ts","../../node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/uuid/dist/esm-browser/native.js","../../node_modules/uuid/dist/esm-browser/v4.js","src/utils/utils.ts","src/utils/geometry/fitting.ts","src/utils/geometry/gridMatch.ts","src/utils/lang/english.ts","src/utils/lang/german.ts","src/utils/lang/spanish.ts","src/utils/lang/general.ts","../../node_modules/@stencil/store/dist/index.js","src/store.ts","src/output.css?tag=map-draw","src/components/map-draw/map-draw.tsx","src/output.css?tag=map-selector&encapsulation=shadow","src/components/map-draw/map-selector.tsx","src/output.css?tag=move-icon","src/components/icons/move.tsx","src/output.css?tag=octagon-minus-icon","src/components/icons/octagonMinus.tsx","src/output.css?tag=polygon-buttons","src/components/map-draw/polygon-buttons.tsx","src/output.css?tag=polygon-information&encapsulation=shadow","src/components/map-draw/polygon-information.tsx","src/output.css?tag=search-icon","src/components/icons/search.tsx","src/output.css?tag=settings-icon","src/components/icons/settings.tsx","src/output.css?tag=settings-modal","src/components/settings/settings.tsx","src/output.css?tag=solar-expert","src/components/solar-expert/solar-expert.tsx","src/output.css?tag=solar-system-form","src/components/solar-system-form/solar-system-form.tsx","src/output.css?tag=tool-box","src/components/map-draw/tool-box.tsx"],"sourcesContent":["/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"eraser-icon\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class EraserIcon {\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        return (\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width={this.size}\r\n                height={this.size}\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class={`lucide lucide-eraser-icon lucide-eraser ${\r\n                    this.inline ? \"inline-block\" : \"\"\r\n                }`}\r\n            >\r\n                <path d=\"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21\" />\r\n                <path d=\"M22 21H7\" />\r\n                <path d=\"m5 11 9 9\" />\r\n            </svg>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"house-icon\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class HouseIcon {\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        return (\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width={this.size}\r\n                height={this.size}\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class={`lucide lucide-house-icon lucide-house ${\r\n                    this.inline ? \"inline-block\" : \"\"\r\n                }`}\r\n            >\r\n                <path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\" />\r\n                <path d=\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />\r\n            </svg>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"icon-selector\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class Icon {\r\n    @Prop()\r\n    name: string;\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        if (this.name === \"search\") {\r\n            return <search-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"house\") {\r\n            return <house-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"move\") {\r\n            return <move-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"octagon-minus\") {\r\n            return <octagon-minus-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"eraser\") {\r\n            return <eraser-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"settings\") {\r\n            return <settings-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        return (\r\n            <div class={`${this.inline ? \"inline-block\" : \"\"}`}>\r\n                Icon {this.name}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n","/*\r\n Copyright 2023 Google LLC\r\n\r\n Licensed under the Apache License, Version 2.0 (the \"License\");\r\n you may not use this file except in compliance with the License.\r\n You may obtain a copy of the License at\r\n\r\n      https://www.apache.org/licenses/LICENSE-2.0\r\n\r\n Unless required by applicable law or agreed to in writing, software\r\n distributed under the License is distributed on an \"AS IS\" BASIS,\r\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n See the License for the specific language governing permissions and\r\n limitations under the License.\r\n */\r\n\r\n import { PositionedSolarPanel } from './geometry/fitting';\r\nimport type { Bounds, GeoTiff, InternalSolarPanelConfig } from './solar';\r\n\r\n // [START visualize_render_rgb]\r\n /**\r\n  * Renders an RGB GeoTiff image into an HTML canvas.\r\n  *\r\n  * The GeoTiff image must include 3 rasters (bands) which\r\n  * correspond to [Red, Green, Blue] in that order.\r\n  *\r\n  * @param  {GeoTiff} rgb   GeoTiff with RGB values of the image.\r\n  * @param  {GeoTiff} mask  Optional mask for transparency, defaults to opaque.\r\n  * @return {HTMLCanvasElement}  Canvas element with the rendered image.\r\n  */\r\n export function renderRGB(rgb: GeoTiff, mask?: GeoTiff, canvas?: HTMLCanvasElement | null): HTMLCanvasElement {\r\n   // Create an HTML canvas to draw the image.\r\n   // https://www.w3schools.com/tags/canvas_createimagedata.asp\r\n   if (!canvas) {\r\n    canvas = document.createElement('canvas');\r\n   }\r\n \r\n   // Set the canvas size to the mask size if it's available,\r\n   // otherwise set it to the RGB data layer size.\r\n   canvas.width = mask ? mask.width : rgb.width;\r\n   canvas.height = mask ? mask.height : rgb.height;\r\n \r\n   // Since the mask size can be different than the RGB data layer size,\r\n   // we calculate the \"delta\" between the RGB layer size and the canvas/mask\r\n   // size. For example, if the RGB layer size is the same as the canvas size,\r\n   // the delta is 1. If the RGB layer size is smaller than the canvas size,\r\n   // the delta would be greater than 1.\r\n   // This is used to translate the index from the canvas to the RGB layer.\r\n   const dw = rgb.width / canvas.width;\r\n   const dh = rgb.height / canvas.height;\r\n \r\n   // Get the canvas image data buffer.\r\n   const ctx = canvas.getContext('2d')!;\r\n   const img = ctx.getImageData(0, 0, canvas.width, canvas.height);\r\n \r\n   // Fill in every pixel in the canvas with the corresponding RGB layer value.\r\n   // Since Javascript doesn't support multidimensional arrays or tensors,\r\n   // everything is stored in flat arrays and we have to keep track of the\r\n   // indices for each row and column ourselves.\r\n   for (let y = 0; y < canvas.height; y++) {\r\n     for (let x = 0; x < canvas.width; x++) {\r\n       // RGB index keeps track of the RGB layer position.\r\n       // This is multiplied by the deltas since it might be a different\r\n       // size than the image size.\r\n       const rgbIdx = Math.floor(y * dh) * rgb.width + Math.floor(x * dw);\r\n       // Mask index keeps track of the mask layer position.\r\n       const maskIdx = y * canvas.width + x;\r\n \r\n       // Image index keeps track of the canvas image position.\r\n       // HTML canvas expects a flat array with consecutive RGBA values.\r\n       // Each value in the image buffer must be between 0 and 255.\r\n       // The Alpha value is the transparency of that pixel,\r\n       // if a mask was not provided, we default to 255 which is opaque.\r\n       const imgIdx = y * canvas.width * 4 + x * 4;\r\n       const factor = 0.8;\r\n       img.data[imgIdx + 0] = Math.round(rgb.rasters[0][rgbIdx] * factor); // Red\r\n       img.data[imgIdx + 1] = Math.round(rgb.rasters[1][rgbIdx] * factor); // Green\r\n       img.data[imgIdx + 2] = Math.round(rgb.rasters[2][rgbIdx] * factor); // Blue\r\n       img.data[imgIdx + 3] = mask // Alpha\r\n         ? mask.rasters[0][maskIdx] * 255\r\n         : 255;\r\n     }\r\n   }\r\n \r\n   // Draw the image data buffer into the canvas context.\r\n   ctx.putImageData(img, 0, 0);\r\n   return canvas;\r\n }\r\n // [END visualize_render_rgb]\r\n \r\n // [START visualize_render_palette]\r\n /**\r\n  * Renders a single value GeoTiff image into an HTML canvas.\r\n  *\r\n  * The GeoTiff image must include 1 raster (band) which contains\r\n  * the values we want to display.\r\n  *\r\n  * @param  {GeoTiff}  data    GeoTiff with the values of interest.\r\n  * @param  {GeoTiff}  mask    Optional mask for transparency, defaults to opaque.\r\n  * @param  {string[]} colors  Hex color palette, defaults to ['000000', 'ffffff'].\r\n  * @param  {number}   min     Minimum value of the data range, defaults to 0.\r\n  * @param  {number}   max     Maximum value of the data range, defaults to 1.\r\n  * @param  {number}   index   Raster index for the data, defaults to 0.\r\n  * @return {HTMLCanvasElement}  Canvas element with the rendered image.\r\n  */\r\n export function renderPalette({\r\n   data,\r\n   mask,\r\n   colors,\r\n   min,\r\n   max,\r\n   index,\r\n   canvas,\r\n }: {\r\n   data: GeoTiff;\r\n   mask?: GeoTiff;\r\n   colors?: string[];\r\n   min?: number;\r\n   max?: number;\r\n   index?: number;\r\n   canvas?: HTMLCanvasElement | null\t;\r\n }): HTMLCanvasElement {\r\n   // First create a palette from a list of hex colors.\r\n   const palette = createPalette(colors ?? ['000000', 'ffffff']);\r\n   // Normalize each value of our raster/band of interest into indices,\r\n   // such that they always map into a value within the palette.\r\n   const indices = data.rasters[index ?? 0]\r\n     .map((x) => normalize(x, max ?? 1, min ?? 0))\r\n     .map((x) => Math.round(x * (palette.length - 1)));\r\n   return renderRGB(\r\n     {\r\n       ...data,\r\n       // Map each index into the corresponding RGB values.\r\n       rasters: [\r\n         indices.map((i: number) => palette[i].r),\r\n         indices.map((i: number) => palette[i].g),\r\n         indices.map((i: number) => palette[i].b),\r\n       ],\r\n     },\r\n     mask,\r\n     canvas,\r\n   );\r\n }\r\n \r\n /**\r\n  * Creates an {r, g, b} color palette from a hex list of colors.\r\n  *\r\n  * Each {r, g, b} value is a number between 0 and 255.\r\n  * The created palette is always of size 256, regardless of the number of\r\n  * hex colors passed in. Inbetween values are interpolated.\r\n  *\r\n  * @param  {string[]} hexColors  List of hex colors for the palette.\r\n  * @return {{r, g, b}[]}         RGB values for the color palette.\r\n  */\r\n export function createPalette(hexColors: string[]): { r: number; g: number; b: number }[] {\r\n   // Map each hex color into an RGB value.\r\n   const rgb = hexColors.map(colorToRGB);\r\n   // Create a palette with 256 colors derived from our rgb colors.\r\n   const size = 256;\r\n   const step = (rgb.length - 1) / (size - 1);\r\n   return Array(size)\r\n     .fill(0)\r\n     .map((_, i) => {\r\n       // Get the lower and upper indices for each color.\r\n       const index = i * step;\r\n       const lower = Math.floor(index);\r\n       const upper = Math.ceil(index);\r\n       // Interpolate between the colors to get the shades.\r\n       return {\r\n         r: lerp(rgb[lower].r, rgb[upper].r, index - lower),\r\n         g: lerp(rgb[lower].g, rgb[upper].g, index - lower),\r\n         b: lerp(rgb[lower].b, rgb[upper].b, index - lower),\r\n       };\r\n     });\r\n }\r\n \r\n /**\r\n  * Convert a hex color into an {r, g, b} color.\r\n  *\r\n  * @param  {string} color  Hex color like 0099FF or #0099FF.\r\n  * @return {{r, g, b}}     RGB values for that color.\r\n  */\r\n export function colorToRGB(color: string): { r: number; g: number; b: number } {\r\n   const hex = color.startsWith('#') ? color.slice(1) : color;\r\n   return {\r\n     r: parseInt(hex.substring(0, 2), 16),\r\n     g: parseInt(hex.substring(2, 4), 16),\r\n     b: parseInt(hex.substring(4, 6), 16),\r\n   };\r\n }\r\n \r\n /**\r\n  * Normalizes a number to a given data range.\r\n  *\r\n  * @param  {number} x    Value of interest.\r\n  * @param  {number} max  Maximum value in data range, defaults to 1.\r\n  * @param  {number} min  Minimum value in data range, defaults to 0.\r\n  * @return {number}      Normalized value.\r\n  */\r\n export function normalize(x: number, max: number = 1, min: number = 0): number {\r\n   const y = (x - min) / (max - min);\r\n   return clamp(y, 0, 1);\r\n }\r\n \r\n /**\r\n  * Calculates the linear interpolation for a value within a range.\r\n  *\r\n  * @param  {number} x  Lower value in the range, when `t` is 0.\r\n  * @param  {number} y  Upper value in the range, when `t` is 1.\r\n  * @param  {number} t  \"Time\" between 0 and 1.\r\n  * @return {number}    Inbetween value for that \"time\".\r\n  */\r\n export function lerp(x: number, y: number, t: number): number {\r\n   return x + t * (y - x);\r\n }\r\n \r\n /**\r\n  * Clamps a value to always be within a range.\r\n  *\r\n  * @param  {number} x    Value to clamp.\r\n  * @param  {number} min  Minimum value in the range.\r\n  * @param  {number} max  Maximum value in the range.\r\n  * @return {number}      Clamped value.\r\n  */\r\n export function clamp(x: number, min: number, max: number): number {\r\n   return Math.min(Math.max(x, min), max);\r\n }\r\n // [END visualize_render_palette]\r\n \r\n export function rgbToColor({ r, g, b }: { r: number; g: number; b: number }): string {\r\n   const f = (x: number) => {\r\n     const hex = Math.round(x).toString(16);\r\n     return hex.length == 1 ? `0${hex}` : hex;\r\n   };\r\n   return `#${f(r)}${f(g)}${f(b)}`;\r\n }\r\n\r\n export function renderAzimuth(azimuth: number, ctx: CanvasRenderingContext2D) {\r\n  if (azimuth === undefined) {\r\n    return;\r\n  }\r\n  ctx.save();\r\n  ctx.moveTo(0, 0);\r\n  ctx.rotate((azimuth - 90) * Math.PI / 180);\r\n  ctx.translate(ctx.canvas.width-100, 100);\r\n  \r\n  // Set arrow style\r\n  ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\r\n  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';\r\n  ctx.lineWidth = 2;\r\n\r\n  ctx.moveTo(-50, 0);\r\n  ctx.lineTo(50,0);\r\n  ctx.lineTo(40,-10);\r\n  ctx.moveTo(50,0);\r\n  ctx.lineTo(40,10);\r\n  ctx.stroke();\r\n\r\n  ctx.moveTo(0, 0);\r\n  ctx.beginPath();\r\n  ctx.arc(0, 0, 50, 0, Math.PI * 2);\r\n  ctx.stroke();\r\n\r\n  // Arrow parameters\r\n  // const arrowLength = 100;\r\n  // const arrowHeadLength = 15;\r\n  // const arrowHeadAngle = Math.PI / 6; // 30 degrees\r\n\r\n  // // Convert azimuth to radians (subtract 90 degrees to align with standard compass)\r\n  // const angle = (azimuth - 90) * Math.PI / 180;\r\n\r\n  // // Calculate arrow end point\r\n  // const endX = arrowLength * Math.cos(angle);\r\n  // const endY = arrowLength * Math.sin(angle);\r\n\r\n  // // Draw main arrow line\r\n  // ctx.beginPath();\r\n  // ctx.moveTo(0, 0);\r\n  // ctx.lineTo(endX, endY);\r\n  // ctx.stroke();\r\n\r\n  // // Calculate arrowhead points\r\n  // const arrowHeadAngle1 = angle + Math.PI - arrowHeadAngle;\r\n  // const arrowHeadAngle2 = angle + Math.PI + arrowHeadAngle;\r\n\r\n  // const arrowHead1X = endX + arrowHeadLength * Math.cos(arrowHeadAngle1);\r\n  // const arrowHead1Y = endY + arrowHeadLength * Math.sin(arrowHeadAngle1);\r\n  // const arrowHead2X = endX + arrowHeadLength * Math.cos(arrowHeadAngle2);\r\n  // const arrowHead2Y = endY + arrowHeadLength * Math.sin(arrowHeadAngle2);\r\n\r\n  // // Draw arrowhead\r\n  // ctx.beginPath();\r\n  // ctx.moveTo(endX, endY);\r\n  // ctx.lineTo(arrowHead1X, arrowHead1Y);\r\n  // ctx.lineTo(arrowHead2X, arrowHead2Y);\r\n  // ctx.closePath();\r\n  // ctx.fill();\r\n\r\n  // ctx.translate(ctx.canvas.width/2, 50);\r\n\r\n  ctx.restore();\r\n\r\n  console.log(\"renderAzimuth\", azimuth);\r\n }\r\n\r\n export function renderSolarPanel(solarPanel: PositionedSolarPanel, ctx: CanvasRenderingContext2D, panelWidth: number, panelHeight: number, azimuthAngle: number, pitchAngle: number) {\r\n  const { x, y } = solarPanel.pixelPosition;\r\n  let width = panelWidth;\r\n  let height = panelHeight * Math.cos(pitchAngle * Math.PI / 180);\r\n  if (solarPanel.horizontal) {\r\n    width = panelHeight;\r\n    height = panelWidth * Math.cos(pitchAngle * Math.PI / 180);\r\n  }\r\n\r\n  // Save the current context state\r\n  ctx.save();\r\n    \r\n  // Translate to the panel's center point\r\n  ctx.translate(x, y);\r\n  \r\n  // Rotate by the azimuth angle (convert to radians)\r\n  ctx.rotate((azimuthAngle * Math.PI) / 180);\r\n  \r\n  // Draw panel rectangle centered at origin (since we translated)\r\n  ctx.fillStyle = 'rgba(0, 51, 204, 0.8)';\r\n  ctx.fillRect(-width/2, -height/2, width, height);\r\n  \r\n  // Draw panel border\r\n  ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\r\n  ctx.lineWidth = 1;\r\n  ctx.strokeRect(-width/2, -height/2, width, height);\r\n  \r\n  // Restore the context state\r\n  ctx.restore();\r\n}\r\n\r\n export function renderPanels({canvas, panelConfig, bounds, zoom, roofSegments}: \r\n  {canvas: HTMLCanvasElement | null, panelConfig: InternalSolarPanelConfig, bounds: Bounds, zoom: number, roofSegments: Record<number, { pitchDegrees: number; azimuthDegrees: number }>}): HTMLCanvasElement {\r\n    if (!canvas) {\r\n      canvas = document.createElement('canvas');\r\n    }\r\n    \r\n    const ctx = canvas.getContext(\"2d\")!;\r\n\r\n    // Calculate pre zoomed dimensions the canvas is already zoomed\r\n    const preZoomedWidth = Math.floor(canvas.width / zoom);\r\n    const preZoomedHeight = Math.floor(canvas.height / zoom);\r\n    const startX = Math.floor((preZoomedWidth - canvas.width) / 2);\r\n    const startY = Math.floor((preZoomedHeight - canvas.height) / 2);\r\n\r\n    // Calculate the scale factors to convert lat/lng to pixel coordinates\r\n    const latToPixel = (lat: number) => {\r\n      return preZoomedHeight * (1 - (lat - bounds.south) / (bounds.north - bounds.south)) - startY;\r\n    };\r\n    \r\n    const lngToPixel = (lng: number) => {\r\n      return preZoomedWidth * (lng - bounds.west) / (bounds.east - bounds.west) - startX;\r\n    };\r\n    \r\n    // Draw each panel\r\n    for (const panel of panelConfig.panels) {\r\n      // Convert panel center coordinates to pixel coordinates\r\n      const centerX = lngToPixel(panel.center.longitude);\r\n      const centerY = latToPixel(panel.center.latitude);\r\n      \r\n      // Calculate panel dimensions (assuming standard panel size)\r\n      const panelWidth = panel.orientation === 'LANDSCAPE' ? 19 : 10; // pixels\r\n      const panelHeight = panel.orientation === 'LANDSCAPE' ? 10 : 19;\r\n      \r\n      // Get the roof segment's azimuth angle for this panel\r\n      const roofSegment = roofSegments[panel.segmentIndex];\r\n      const azimuthAngle = roofSegment ? roofSegment.azimuthDegrees : 0;\r\n      \r\n      // Save the current context state\r\n      ctx.save();\r\n      \r\n      // Translate to the panel's center point\r\n      ctx.translate(centerX, centerY);\r\n      \r\n      // Rotate by the azimuth angle (convert to radians)\r\n      ctx.rotate((azimuthAngle * Math.PI) / 180);\r\n      \r\n      // Draw panel rectangle centered at origin (since we translated)\r\n      ctx.fillStyle = 'rgba(115, 143, 255, 1)';\r\n      ctx.fillRect(-panelWidth/2, -panelHeight/2, panelWidth, panelHeight);\r\n      \r\n      // Draw panel border\r\n      ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';\r\n      ctx.lineWidth = 1;\r\n      ctx.strokeRect(-panelWidth/2, -panelHeight/2, panelWidth, panelHeight);\r\n      \r\n      // Restore the context state\r\n      ctx.restore();\r\n    }\r\n    \r\n    return canvas;\r\n }\r\n \r\n export function renderCombinedWithZoom({\r\n    rgb,\r\n    zoom = 1,\r\n    canvas,\r\n}: {\r\n    rgb: GeoTiff;\r\n    zoom?: number;\r\n    canvas?: HTMLCanvasElement | null;\r\n}): HTMLCanvasElement {\r\n    // First render the RGB image\r\n    const rgbCanvas = renderRGB(rgb, undefined, canvas);\r\n    const ctx = rgbCanvas.getContext(\"2d\")!;\r\n    const imgData = ctx.getImageData(0, 0, rgbCanvas.width, rgbCanvas.height);\r\n\r\n    // Calculate the center portion to show based on zoom\r\n    const width = rgbCanvas.width;\r\n    const height = rgbCanvas.height;\r\n    const zoomedWidth = Math.floor(width * zoom);\r\n    const zoomedHeight = Math.floor(height * zoom);\r\n    const startX = Math.floor((width - zoomedWidth) / 2);\r\n    const startY = Math.floor((height - zoomedHeight) / 2);\r\n\r\n    // Create a new image data for the zoomed portion\r\n    const zoomedImgData = new ImageData(zoomedWidth, zoomedHeight);\r\n    \r\n    // Copy RGB data and apply palette where mask is non-zero\r\n    for (let y = 0; y < height; y++) {\r\n        for (let x = 0; x < width; x++) {\r\n            const i = (y * width + x) * 4;\r\n            \r\n            if (x >= startX && x < startX + zoomedWidth && \r\n                y >= startY && y < startY + zoomedHeight) {\r\n                // Calculate position in zoomed image\r\n                const zoomedX = x - startX;\r\n                const zoomedY = y - startY;\r\n                const zoomedI = (zoomedY * zoomedWidth + zoomedX) * 4;\r\n                \r\n                zoomedImgData.data[zoomedI] = imgData.data[i];\r\n                zoomedImgData.data[zoomedI + 1] = imgData.data[i + 1];\r\n                zoomedImgData.data[zoomedI + 2] = imgData.data[i + 2];\r\n                zoomedImgData.data[zoomedI + 3] = 255; // Alpha channel\r\n            }\r\n        }\r\n    }\r\n\r\n    // Resize canvas to match zoomed dimensions\r\n    rgbCanvas.width = zoomedWidth;\r\n    rgbCanvas.height = zoomedHeight;\r\n    \r\n    // Put the zoomed image data back to the canvas\r\n    ctx.putImageData(zoomedImgData, 0, 0);\r\n    return rgbCanvas;\r\n}\r\n ","\r\nconst OPEN_POLYGON_COLOR = \"red\"; //\"#ffffff\";\r\nconst CLOSED_POLYGON_COLOR = \"#fcba03\";\r\nconst DOTTED_LINE_COLOR = \"rgba(0, 0, 0, 0.5)\";\r\n\r\nconst ROW_SPACING = 1;\r\nconst COLUMN_SPACING = 1;\r\n\r\nconst BORDER_INSET = 0;\r\nconst DEFAULT_SUNNINESS = 600;\r\n\r\nconst SOLAR_RADIATION = [\r\n    0,\r\n    0,\r\n    0,\r\n    0,\r\n    0,\r\n    0, // 00:00 - 05:00 - 6\r\n    0,\r\n    0.1,\r\n    0.2, // 8\r\n    0.4, \r\n    0.8,\r\n    1, // 06:00 - 11:00 - 12\r\n    1,\r\n    1,\r\n    1,\r\n    0.7,\r\n    0.5,\r\n    0.3, // 12:00 - 17:00 - 18\r\n    0.16,\r\n    0.02,\r\n    0,\r\n    0,\r\n    0,\r\n    0, // 18:00 - 23:00 - 24\r\n];\r\nconst CONSUMPTION_PROFILES = {\r\n    mostly_at_home: [\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.15, // 00:00 - 05:00 - 6\r\n        0.23,\r\n        0.26,\r\n        0.16,\r\n        0.16,\r\n        0.15,\r\n        0.19, // 06:00 - 11:00 - 12\r\n        0.23,\r\n        0.24,\r\n        0.35,\r\n        0.28,\r\n        0.275,\r\n        0.8, // 12:00 - 17:00 - 18\r\n        0.78,\r\n        0.74,\r\n        0.75,\r\n        0.73,\r\n        0.26,\r\n        0.1, // 18:00 - 23:00 - 24\r\n    ],\r\n    mostly_away: [\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.15, // 00:00 - 05:00 - 6\r\n        0.29,\r\n        0.32,\r\n        0.25,\r\n        0.15,\r\n        0.12,\r\n        0.14, // 06:00 - 11:00 - 12\r\n        0.15,\r\n        0.12,\r\n        0.16,\r\n        0.21,\r\n        0.285,\r\n        1, // 12:00 - 17:00 - 18\r\n        0.81,\r\n        0.77,\r\n        0.79,\r\n        0.73,\r\n        0.26,\r\n        0.1, // 18:00 - 23:00 - 24\r\n    ],\r\n};\r\n\r\nexport { OPEN_POLYGON_COLOR, CLOSED_POLYGON_COLOR, DOTTED_LINE_COLOR, ROW_SPACING, COLUMN_SPACING, BORDER_INSET, DEFAULT_SUNNINESS, CONSUMPTION_PROFILES, SOLAR_RADIATION };\r\n","import { Point } from \"../../types/shapes\";\r\n\r\nexport function projectPointPerpendicularToLine({\r\n    x,\r\n    y,\r\n    lastPoint,\r\n    secondLastPoint,\r\n}: {\r\n    x: number;\r\n    y: number;\r\n    lastPoint: { x: number; y: number };\r\n    secondLastPoint: { x: number; y: number };\r\n}): Point {\r\n\r\n    // Calculate the direction vector of the last line\r\n    const dx = lastPoint.x - secondLastPoint.x;\r\n    const dy = lastPoint.y - secondLastPoint.y;\r\n\r\n    // Calculate perpendicular vector (rotate 90 degrees)\r\n    const perpDx = -dy;\r\n    const perpDy = dx;\r\n\r\n    // Normalize the perpendicular vector\r\n    const perpLength = Math.sqrt(perpDx * perpDx + perpDy * perpDy);\r\n    const normalizedPerpDx = perpDx / perpLength;\r\n    const normalizedPerpDy = perpDy / perpLength;\r\n\r\n    // Project the mouse point onto the perpendicular line\r\n    const vectorToMouse = {\r\n        x: x - lastPoint.x,\r\n        y: y - lastPoint.y,\r\n    };\r\n\r\n    // Calculate the projection length (dot product)\r\n    const projectionLength = vectorToMouse.x * normalizedPerpDx +\r\n        vectorToMouse.y * normalizedPerpDy;\r\n\r\n    // Calculate the new point position using the projected length\r\n    x = lastPoint.x + normalizedPerpDx * projectionLength;\r\n    y = lastPoint.y + normalizedPerpDy * projectionLength;\r\n    return { x, y };\r\n}\r\n","import { DOTTED_LINE_COLOR } from \"../../constants\";\r\nimport { Point, Polygon } from \"../../types/shapes\";\r\nimport { projectPointPerpendicularToLine } from \"./projection\";\r\n\r\nexport interface DrawPolygonProps {\r\n    polygonCtx: CanvasRenderingContext2D;\r\n    polygonCanvas: HTMLCanvasElement;\r\n    polygon: Polygon;\r\n    pixelInMeters: number;\r\n    shiftKeyPressed: boolean;\r\n    mousePoint: Point | null;\r\n    strokeColor: string;\r\n    highlightColor: string;\r\n    fillColor?: string;\r\n    highlightedEdge?: { pointA: Point; pointB: Point } | null;\r\n}\r\n\r\nexport interface Line{\r\n    start: Point;\r\n    end: Point;\r\n}\r\n\r\nexport interface DrawCircleProps {\r\n    ctx: CanvasRenderingContext2D;\r\n    x: number;\r\n    y: number;\r\n    radius: number;\r\n    strokeStyle?: string;\r\n    lineWidth?: number;\r\n}\r\n\r\nexport function drawPolygon({\r\n    polygonCtx, polygonCanvas, polygon, shiftKeyPressed, mousePoint, strokeColor, fillColor, highlightedEdge, highlightColor\r\n}: DrawPolygonProps) {\r\n    if (!polygonCtx || !polygonCanvas) return;\r\n\r\n    // Draw the polygon\r\n    polygonCtx.beginPath();\r\n    polygonCtx.strokeStyle = strokeColor;\r\n    polygonCtx.lineWidth = 2;\r\n\r\n    polygon.points.forEach((point, index) => {\r\n        if (index === 0) {\r\n            polygonCtx.moveTo(point.x, point.y);\r\n        } else {\r\n            polygonCtx.lineTo(point.x, point.y);\r\n        }\r\n    });\r\n\r\n    if (polygon.closed) {\r\n        polygonCtx.lineTo(polygon.points[0].x, polygon.points[0].y);\r\n        if (fillColor) {\r\n            polygonCtx.fillStyle = fillColor;\r\n            polygonCtx.fill();\r\n        }\r\n    }\r\n\r\n    if (polygon.points.length > 0) {\r\n        polygonCtx.stroke();\r\n    }\r\n\r\n    if (highlightedEdge && polygon.closed) {\r\n        polygonCtx.beginPath();\r\n        polygonCtx.strokeStyle = highlightColor;\r\n        polygonCtx.lineWidth = 2;\r\n        polygonCtx.moveTo(highlightedEdge.pointA.x, highlightedEdge.pointA.y);\r\n        polygonCtx.lineTo(highlightedEdge.pointB.x, highlightedEdge.pointB.y);\r\n        polygonCtx.stroke();\r\n        polygonCtx.strokeStyle = strokeColor;\r\n        polygonCtx.lineWidth = 1;\r\n    }\r\n\r\n    if (polygon.points.length > 1 && !polygon.closed && shiftKeyPressed) {\r\n        const projectedPoint = projectPointPerpendicularToLine({\r\n            x: mousePoint.x,\r\n            y: mousePoint.y,\r\n            lastPoint: polygon.points[polygon.points.length - 1],\r\n            secondLastPoint: polygon.points[polygon.points.length - 2],\r\n        });\r\n        drawPerpendicularDottedLine({\r\n            ctx: polygonCtx,\r\n            startPoint: projectedPoint,\r\n            endPoint: polygon.points[polygon.points.length - 1],\r\n            strokeStyle: DOTTED_LINE_COLOR,\r\n        });\r\n    }\r\n\r\n    if (shiftKeyPressed && polygon.points.length > 1 && !polygon.closed) {\r\n        const projectedPoint = projectPointPerpendicularToLine({\r\n            x: mousePoint.x,\r\n            y: mousePoint.y,\r\n            lastPoint: polygon.points[polygon.points.length - 1],\r\n            secondLastPoint: polygon.points[polygon.points.length - 2],\r\n        });\r\n        drawCircle({\r\n            ctx: polygonCtx,\r\n            x: projectedPoint.x,\r\n            y: projectedPoint.y,\r\n            radius: 5,\r\n            strokeStyle: DOTTED_LINE_COLOR,\r\n        });\r\n    }\r\n\r\n    // Draw circles around each point\r\n    polygon.points.forEach((point) => {\r\n        polygonCtx.beginPath();\r\n        const strokeStyle = strokeColor;\r\n        const distance = Math.sqrt(\r\n            Math.pow(point.x - mousePoint.x, 2) + Math.pow(point.y - mousePoint.y, 2)\r\n        );\r\n\r\n        // Highlight the point if it's being hovered or dragged\r\n        if (\r\n            distance < 10\r\n        ) {\r\n            drawCircle({\r\n                ctx: polygonCtx,\r\n                x: point.x,\r\n                y: point.y,\r\n                strokeStyle,\r\n                radius: 8,\r\n            });\r\n        } else {\r\n            drawCircle({\r\n                ctx: polygonCtx,\r\n                x: point.x,\r\n                y: point.y,\r\n                strokeStyle,\r\n                radius: 5,\r\n            });\r\n        }\r\n\r\n        polygonCtx.stroke();\r\n    });\r\n}\r\n\r\nexport function drawCircle({\r\n    ctx,\r\n    x,\r\n    y,\r\n    radius,\r\n    strokeStyle = \"black\",\r\n    lineWidth = 2\r\n}: DrawCircleProps) {\r\n    ctx.beginPath();\r\n    ctx.strokeStyle = strokeStyle;\r\n    ctx.lineWidth = lineWidth;\r\n    \r\n    ctx.arc(x, y, radius, 0, 2 * Math.PI);\r\n    ctx.stroke();\r\n}\r\n\r\nexport function drawPerpendicularDottedLine({\r\n    ctx,\r\n    startPoint,\r\n    endPoint,\r\n    dashPattern = [5, 5],\r\n    strokeStyle = \"black\",\r\n    lineWidth = 2\r\n}: {\r\n    ctx: CanvasRenderingContext2D;\r\n    startPoint: Point;\r\n    endPoint: Point;\r\n    dashPattern?: number[];\r\n    strokeStyle?: string;\r\n    lineWidth?: number;\r\n}) {\r\n    // Set up the line style\r\n    ctx.beginPath();\r\n    ctx.strokeStyle = strokeStyle;\r\n    ctx.lineWidth = lineWidth;\r\n    ctx.setLineDash(dashPattern);\r\n    \r\n    // Draw the dotted line\r\n    ctx.moveTo(startPoint.x, startPoint.y);\r\n    ctx.lineTo(endPoint.x, endPoint.y);\r\n    ctx.stroke();\r\n    \r\n    // Reset the line dash\r\n    ctx.setLineDash([]);\r\n}\r\n\r\nexport function isPointOnBorder(point: Point, polygon: Polygon): boolean {\r\n    if (!polygon.closed || polygon.points.length < 3) return false;\r\n\r\n    const x = point.x;\r\n    const y = point.y;\r\n\r\n    // For each edge of the polygon\r\n    for (let i = 0; i < polygon.points.length; i++) {\r\n        const p1 = polygon.points[i];\r\n        const p2 = polygon.points[(i + 1) % polygon.points.length];\r\n        // calculate the distance from point p1 to p2\r\n        const distance = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));\r\n        const distanceToPoint = Math.sqrt(Math.pow(p1.x - x, 2) + Math.pow(p1.y - y, 2));\r\n        const distanceFromPoint = Math.sqrt(Math.pow(p2.x - x, 2) + Math.pow(p2.y - y, 2));\r\n        if (distance === distanceToPoint + distanceFromPoint) {\r\n            return true;\r\n        }\r\n    }\r\n    return false;\r\n}\r\n\r\nexport function isPointInPolygon(point: Point, polygon: Polygon): boolean {\r\n    if (!polygon.closed || polygon.points.length < 3) return false;\r\n\r\n    const num_vertices = polygon.points.length;\r\n    const x = point.x;\r\n    const y = point.y;\r\n    let inside = false;\r\n\r\n    let p1 = polygon.points[0];\r\n    let p2: Point;\r\n\r\n    for (let i = 1; i <= num_vertices; i++) {\r\n        p2 = polygon.points[i % num_vertices];\r\n\r\n        if (y > Math.min(p1.y, p2.y)) {\r\n            if (y <= Math.max(p1.y, p2.y)) {\r\n                if (x <= Math.max(p1.x, p2.x)) {\r\n                    const x_intersection = ((y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x;\r\n\r\n                    if (p1.x === p2.x || x <= x_intersection) {\r\n                        inside = !inside;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        p1 = p2;\r\n    }\r\n\r\n    return inside;\r\n}","export type ToolType = \"move\" | \"roof\" | \"obstruction\" | \"delete\" | \"markRoofEdge\";\r\n\r\nexport interface KeyboardCombination {\r\n    key: string;\r\n    description: string;\r\n}\r\n\r\nexport interface Tool {\r\n    name: ToolType;\r\n    ariaLabel: string;\r\n    icon: string;\r\n    cursor: string;\r\n    keyboardShortcut?: string;\r\n    keyboardCombinations?: KeyboardCombination[];\r\n    explanation?: string;\r\n}\r\n\r\nconst polygonKeyboardCombinations: KeyboardCombination[] = [\r\n    {\r\n        key: \"shift\",\r\n        description: \"add one point on perpendicular line\",\r\n    },\r\n    // {\r\n    //     key: \"alt\",\r\n    //     description: \"add parallel line\",\r\n    // },\r\n];\r\n\r\nexport const moveTool: Tool = {\r\n    name: \"move\",\r\n    ariaLabel: \"Move\",\r\n    icon: \"move\",\r\n    cursor: \"move\",\r\n    keyboardShortcut: \"m\",\r\n    explanation: \"Move points of the active polygon\",\r\n}\r\n\r\nexport const roofTool: Tool = {\r\n    name: \"roof\",\r\n    ariaLabel: \"Roof Area\",\r\n    icon: \"house\",\r\n    cursor: \"crosshair\",\r\n    keyboardShortcut: \"r\",\r\n    keyboardCombinations: polygonKeyboardCombinations,\r\n    explanation: \"Draw the roof of the building\",\r\n}\r\n\r\nexport const obstructionTool: Tool = {\r\n    name: \"obstruction\",\r\n    ariaLabel: \"Obstruction\",\r\n    icon: \"octagon-minus\",\r\n    cursor: \"crosshair\",\r\n    keyboardShortcut: \"o\",\r\n    keyboardCombinations: polygonKeyboardCombinations,\r\n    explanation: \"Draw the obstruction of the building\",\r\n}\r\n\r\nexport const deleteTool: Tool = {\r\n    name: \"delete\",\r\n    ariaLabel: \"Delete\",\r\n    icon: \"eraser\",\r\n    cursor: \"default\",\r\n    keyboardShortcut: \"d\",\r\n    explanation: \"Delete the active polygon\",\r\n}\r\n\r\nexport const markRoofEdgeTool: Tool = {\r\n    name: \"markRoofEdge\",\r\n    ariaLabel: \"Mark Roof Edge\",\r\n    icon: \"arrow-down-left-and-up-right-to-center\",\r\n    cursor: \"pointer\",\r\n    explanation: \"Mark the edge of the roof\",\r\n}\r\n\r\nexport const tools: Tool[] = [\r\n    moveTool,\r\n    roofTool,\r\n    obstructionTool,\r\n    deleteTool,\r\n];\r\n","import { SolarPanelType } from \"./utils/solar\";\r\n\r\nexport interface SolarExpertConfig {\r\n    openRoofColor: string;\r\n    closedRoofColor: string;\r\n    openObstructionColor: string;\r\n    closedObstructionColor: string;\r\n    roofPolygonFillColor: string;\r\n    obstructionPolygonFillColor: string;\r\n    roofPolygonHoverFillColor: string;\r\n    obstructionPolygonHoverFillColor: string;\r\n    roofPolygonSelectedFillColor: string;\r\n    obstructionPolygonSelectedFillColor: string;\r\n    highlightColor: string;\r\n}\r\n\r\nexport const DEFAULT_SOLAR_EXPERT_CONFIG: SolarExpertConfig = {\r\n    openRoofColor: \"#d6eeff\",\r\n    closedRoofColor: \"#ffffff\",\r\n    openObstructionColor: \"#f57242\",\r\n    closedObstructionColor: \"rgba(255, 132, 107, 0.8)\",\r\n    roofPolygonFillColor: \"rgba(92, 187, 255, 0.5)\",\r\n    obstructionPolygonFillColor: \"rgba(255, 132, 107, 0.5)\",\r\n    roofPolygonHoverFillColor: \"rgba(92, 187, 255, 0.8)\",\r\n    obstructionPolygonHoverFillColor: \"rgba(255, 132, 107, 0.8)\",\r\n    roofPolygonSelectedFillColor: \"rgba(92, 187, 255, 0.7)\",\r\n    obstructionPolygonSelectedFillColor: \"rgba(255, 132, 107, 0.7)\",\r\n    highlightColor: \"rgba(0, 89, 255, 1)\",\r\n}\r\n\r\nexport const DEFAULT_SOLAR_PANEL_TYPE: SolarPanelType = {\r\n    widthMeters: 1.134,\r\n    heightMeters: 1.762,\r\n    kWattPeak: 0.455,\r\n    efficiency: 0.224,\r\n    price: 77.68,\r\n}\r\n","import { Polygon, SelectedPolygon } from \"../../types/shapes\";\r\nimport { SolarExpertConfig } from \"../../config\";\r\n\r\n\r\nexport function getFillColor(selectedPolygon: SelectedPolygon | null, hoveredPolygon: SelectedPolygon | null, _id: string, polygon: Polygon, config: SolarExpertConfig): string | undefined {\r\n    const isHovered = hoveredPolygon?.type === polygon.type && hoveredPolygon?._id === _id;\r\n    if (isHovered) {\r\n        return polygon.type === \"roof\" ? config.roofPolygonHoverFillColor : config.obstructionPolygonHoverFillColor;\r\n    }\r\n    \r\n    const isSelected = selectedPolygon?.type === polygon.type && selectedPolygon?._id === _id;\r\n\r\n    if (isSelected) {\r\n        return polygon.type === \"roof\" ? config.roofPolygonSelectedFillColor : config.obstructionPolygonSelectedFillColor;\r\n    }\r\n\r\n    if (polygon.type === \"roof\") {\r\n        return polygon.closed ? config.roofPolygonFillColor : undefined;\r\n    }\r\n    return polygon.closed ? config.obstructionPolygonFillColor : undefined;\r\n}\r\n","import validate from './validate.js';\n\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\nvar byteToHex = [];\nfor (var i = 0; i < 256; ++i) {\n  byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n  // Note: Be careful editing this code!  It's been tuned for performance\n  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n  //\n  // Note to future-self: No, you can't remove the `toLowerCase()` call.\n  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351\n  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n  var uuid = unsafeStringify(arr, offset);\n  // Consistency check for valid UUID.  If this throws, it's likely due to one\n  // of the following:\n  // - One or more input array values don't map to a hex octet (leading to\n  // \"undefined\" in the uuid)\n  // - Invalid input values for the RFC `version` or `variant` fields\n  if (!validate(uuid)) {\n    throw TypeError('Stringified UUID is invalid');\n  }\n  return uuid;\n}\nexport default stringify;","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\n\nvar getRandomValues;\nvar rnds8 = new Uint8Array(16);\nexport default function rng() {\n  // lazy load so that environments that need to polyfill have a chance to do so\n  if (!getRandomValues) {\n    // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n    if (!getRandomValues) {\n      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n    }\n  }\n  return getRandomValues(rnds8);\n}","var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default {\n  randomUUID\n};","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n  if (native.randomUUID && !buf && !options) {\n    return native.randomUUID();\n  }\n  options = options || {};\n  var rnds = options.random || (options.rng || rng)();\n\n  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n  rnds[6] = rnds[6] & 0x0f | 0x40;\n  rnds[8] = rnds[8] & 0x3f | 0x80;\n\n  // Copy bytes to buffer, if provided\n  if (buf) {\n    offset = offset || 0;\n    for (var i = 0; i < 16; ++i) {\n      buf[offset + i] = rnds[i];\n    }\n    return buf;\n  }\n  return unsafeStringify(rnds);\n}\nexport default v4;","import { Point } from \"../types/shapes\";\r\nimport { Bounds, GeoTiff, LatLng } from \"./solar\";\r\n\r\nexport function calculatePolygonArea(points: Point[]): number {\r\n  let area = 0;\r\n  for (let i = 0; i < points.length; i++) {\r\n      const j = (i + 1) % points.length;\r\n      area += points[i].x * points[j].y;\r\n      area -= points[j].x * points[i].y;\r\n  }\r\n  return Math.abs(area / 2);\r\n};\r\n\r\nexport function azimuthToCardinal(azimuth: number): string {\r\n  // Convert angle to cardinal direction\r\n  if (azimuth >= 337.5 || azimuth < 22.5) return \"North\";\r\n  if (azimuth >= 22.5 && azimuth < 67.5) return \"Northeast\";\r\n  if (azimuth >= 67.5 && azimuth < 112.5) return \"East\";\r\n  if (azimuth >= 112.5 && azimuth < 157.5) return \"Southeast\";\r\n  if (azimuth >= 157.5 && azimuth < 202.5) return \"South\";\r\n  if (azimuth >= 202.5 && azimuth < 247.5) return \"Southwest\";\r\n  if (azimuth >= 247.5 && azimuth < 292.5) return \"West\";\r\n  return \"Northwest\";\r\n}\r\n\r\nexport function calculatePolygonOrientation(points: Point[]): number {\r\n  if (points.length < 3) return 0;\r\n\r\n  // Calculate the average direction of the polygon\r\n  let totalAngle = 0;\r\n  for (let i = 0; i < points.length; i++) {\r\n      const j = (i + 1) % points.length;\r\n      const angle = Math.atan2(\r\n          points[j].y - points[i].y,\r\n          points[j].x - points[i].x,\r\n      );\r\n      totalAngle += angle;\r\n  }\r\n\r\n  const avgAngle = (totalAngle / points.length) * (180 / Math.PI);\r\n  const normalizedAngle = (avgAngle + 360) % 360;\r\n  return normalizedAngle;\r\n};\r\n\r\nexport function calculatePolygonAngle(points: Point[]): number {\r\n  if (points.length < 3) return 0;\r\n\r\n  // Calculate the average angle of the polygon\r\n  let totalAngle = 0;\r\n  for (let i = 0; i < points.length; i++) {\r\n      const j = (i + 1) % points.length;\r\n      const k = (i + 2) % points.length;\r\n\r\n      const v1 = {\r\n          x: points[j].x - points[i].x,\r\n          y: points[j].y - points[i].y,\r\n      };\r\n      const v2 = {\r\n          x: points[k].x - points[j].x,\r\n          y: points[k].y - points[j].y,\r\n      };\r\n\r\n      const dot = v1.x * v2.x + v1.y * v2.y;\r\n      const mag1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);\r\n      const mag2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);\r\n\r\n      const angle = Math.acos(dot / (mag1 * mag2));\r\n      totalAngle += angle;\r\n  }\r\n\r\n  return (totalAngle / points.length) * (180 / Math.PI);\r\n};\r\n\r\nexport function latLngToPixel(bounds: Bounds, canvas: HTMLCanvasElement, latLng: LatLng): Point {\r\n  const ctx = canvas.getContext('2d');\r\n  if (!ctx) {\r\n    throw new Error('Canvas context not found');\r\n  }\r\n  const latToPixel = (lat: number) => {\r\n    return canvas.height * (1 - (lat - bounds.south) / (bounds.north - bounds.south));\r\n  };\r\n      \r\n  const lngToPixel = (lng: number) => {\r\n    return canvas.width * (lng - bounds.west) / (bounds.east - bounds.west);\r\n  };\r\n\r\n  return {\r\n    x: lngToPixel(latLng.longitude),\r\n    y: latToPixel(latLng.latitude),\r\n  };\r\n}\r\n\r\nexport function getPixelInMeters(rgbTiff: GeoTiff): number {\r\n  const latDiff = rgbTiff.bounds.north - rgbTiff.bounds.south;\r\n  // const lngDiff = rgbTiff.bounds.east - rgbTiff.bounds.west;\r\n  // const pixelWidth = rgbTiff.width;\r\n  const pixelHeight = rgbTiff.height;\r\n  const pixelInMeters = latDiff * 111320 / pixelHeight;\r\n  // const latAvg = (rgbTiff.bounds.north + rgbTiff.bounds.south) / 2;\r\n  // const pixelInMetersLng = lngDiff * 111320 * Math.cos(latAvg * Math.PI / 180) / pixelWidth;\r\n  return pixelInMeters\r\n}","import { LineSegment, Polygon, SegmentMatch } from \"../../types/shapes\";\r\nimport { Bounds, LatLng, RoofSegmentSizeAndSunshineStats, SolarPanelType } from \"../solar\";\r\nimport { latLngToPixel } from \"../utils\";\r\nimport { Point } from \"../../types/shapes\";\r\nimport { isPointInPolygon, isPointOnBorder, Line } from \"../render/polygon\";\r\n\r\n\r\nexport interface SolarPanelSystemPart {\r\n    positionedPanels: PositionedSolarPanel[];\r\n    sunniness: number;\r\n}\r\n\r\nexport interface PositionedSolarPanel {\r\n    panel: SolarPanelType;\r\n    pixelPosition: {\r\n        x: number;\r\n        y: number;\r\n    };\r\n    horizontal: boolean;\r\n}\r\n\r\n/**\r\n * Get the intersections of a line parallel to the x-axis of the projected coordinate system with a polygon.\r\n * @param projectedPoint the point to draw the line from\r\n * @param projectedPolygon the polygon to get the intersections with\r\n * @returns the intersections of the line with the polygon\r\n */\r\nexport function getIntersections(projectedPoint: Point, projectedPolygon: Polygon): Point[] {\r\n    const intersections: Point[] = [];\r\n\r\n    if (projectedPolygon.points.length === 0) {\r\n        return intersections;\r\n    }\r\n    \r\n    // For each edge of the polygon\r\n    for (let i = 0; i < projectedPolygon.points.length; i++) {\r\n        const p1 = projectedPolygon.points[i];\r\n        const p2 = projectedPolygon.points[(i + 1) % projectedPolygon.points.length];\r\n        \r\n        // Calculate intersection point\r\n        const t = (projectedPoint.y - p1.y) / (p2.y - p1.y);\r\n        const x = p1.x + t * (p2.x - p1.x);\r\n        \r\n        if (t > 0 && t <= 1) {\r\n            intersections.push({ x, y: projectedPoint.y });\r\n        }\r\n        if (t === 0) {\r\n            intersections.push({ x: p1.x, y: projectedPoint.y });\r\n        }\r\n    }\r\n    \r\n    // Sort intersections by y-coordinate\r\n    return intersections.sort((a, b) => a.x - b.x);\r\n}\r\n\r\nexport function projectPoint(point: Point, azimuth: number): Point {\r\n    const angle = azimuth * (Math.PI / 180);\r\n    const x = point.x * Math.cos(angle) - point.y * Math.sin(angle);\r\n    const y = point.x * Math.sin(angle) + point.y * Math.cos(angle);\r\n    return { x, y };\r\n}\r\n\r\nexport function projectPolygon(polygon: Polygon, azimuth: number): Polygon {\r\n    return {\r\n        points: polygon.points.map((point) => projectPoint(point, azimuth)),\r\n        type: polygon.type,\r\n        closed: polygon.closed,\r\n        _id: polygon._id,\r\n        details: polygon.details,\r\n    };\r\n}\r\n\r\nexport function offsetPolygon(polygon: Polygon, offset?: {x: number, y: number}): {polygon: Polygon, offset: {x: number, y: number}} {\r\n    if (polygon.points.length === 0) {\r\n        return { polygon: polygon, offset: {x: 0, y: 0} };\r\n    }\r\n\r\n    let offsetX = 0;\r\n    let offsetY = 0;\r\n    if (!offset) {\r\n        const minX = Math.min(...polygon.points.map((point) => point.x));\r\n        const minY = Math.min(...polygon.points.map((point) => point.y));\r\n        const maxX = Math.max(...polygon.points.map((point) => point.x));\r\n        const maxY = Math.max(...polygon.points.map((point) => point.y));\r\n\r\n        offsetX = minX + (maxX - minX) / 2;\r\n        offsetY = minY + (maxY - minY) / 2;\r\n    }\r\n    else {\r\n        offsetX = offset.x;\r\n        offsetY = offset.y;\r\n    }\r\n\r\n    const newPoints = polygon.points.map((point) => ({\r\n        x: point.x - offsetX,\r\n        y: point.y - offsetY,\r\n    }));\r\n\r\n    return { polygon: { ...polygon, points: newPoints }, offset: {x: offsetX, y: offsetY} };\r\n}\r\n\r\nfunction equalsPoints(point1: Point, point2: Point): boolean {\r\n    return point1.x === point2.x && point1.y === point2.y;\r\n}\r\n\r\n/**\r\n * Checks if two lines intersect.\r\n * if the lines intersect in a start or end point they are not considered as intersecting\r\n * @param line1 The first line.\r\n * @param line2 The second line.\r\n * @returns True if the lines intersect, false otherwise.\r\n */\r\nexport function intersects(line1: Line, line2: Line): boolean {\r\n    // Get the points of each line\r\n    const p1 = line1.start;\r\n    const p2 = line1.end;\r\n    const p3 = line2.start;\r\n    const p4 = line2.end;\r\n\r\n    if (equalsPoints(p1, p3) || equalsPoints(p1, p4) || equalsPoints(p2, p3) || equalsPoints(p2, p4)) {\r\n        return false;\r\n    }\r\n\r\n    // Calculate the cross products\r\n    const d1 = (p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x);\r\n    const d2 = (p4.x - p3.x) * (p2.y - p3.y) - (p4.y - p3.y) * (p2.x - p3.x);\r\n    const d3 = (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x);\r\n    const d4 = (p2.x - p1.x) * (p4.y - p1.y) - (p2.y - p1.y) * (p4.x - p1.x);\r\n\r\n    // Check if the lines intersect\r\n    return (d1 * d2 < 0) && (d3 * d4 < 0);\r\n}\r\n\r\nexport function undoOffsetPolygon(polygon: Polygon, offset: {x: number, y: number}): Polygon {\r\n    return {\r\n        ...polygon,\r\n        points: polygon.points.map((point) => ({\r\n            x: point.x + offset.x,\r\n            y: point.y + offset.y,\r\n        })),\r\n    };\r\n}\r\n\r\nexport function segmentPolygon(polygon: Polygon) {\r\n    const segments: LineSegment[] = [];\r\n    const segmentsMap: Record<string, boolean> = {};\r\n\r\n    for (const point of polygon.points) {\r\n        const intersections = getIntersections(point, polygon);\r\n        for (const [index, intersection] of intersections.slice(0, -1).entries()) {\r\n            const nextIntersection = intersections[index + 1];\r\n            \r\n            const halfPoint = {\r\n                x: (intersection.x + nextIntersection.x) / 2,\r\n                y: (intersection.y + nextIntersection.y) / 2,\r\n            };\r\n\r\n            const isInner = isPointInPolygon(halfPoint, polygon);\r\n            const isOnBorder = isPointOnBorder(halfPoint, polygon);\r\n            const key = `${intersection.x}-${intersection.y}-${nextIntersection.x}-${nextIntersection.y}`;\r\n            \r\n            if (segmentsMap[key]) {\r\n                continue;\r\n            }\r\n            segments.push({ start: intersection, end: nextIntersection, type: isOnBorder ? \"border\" : (isInner ? \"inner\" : \"outer\") });\r\n            segmentsMap[key] = true;\r\n        }\r\n    }\r\n    return segments;\r\n}\r\n\r\n/**\r\n * for each segment this method will find all the following segments that are connected to it\r\n * \r\n * first the method subdivides the segments into y levels (all segments that have the same y coordinate are in the same level)\r\n * then it will check for each segment in each level if there is a following segment that is connected to it by checking it the \r\n * start point of the top segment to the end point of the bottom segment does not intersect with any of the polygon borders and the center point of the connection is in the polygon\r\n * \r\n * @param segments \r\n * @param roof \r\n * @returns \r\n */\r\nexport function matchSegments(segments: LineSegment[], roof: Polygon): {matches: SegmentMatch[], map: Record<string, LineSegment>} {\r\n    const matches: SegmentMatch[] = [];\r\n    const map: Record<string, LineSegment> = {};\r\n\r\n    for (const segment of segments) {\r\n        map[`${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`] = segment;\r\n    }\r\n    \r\n    // Group segments by y-coordinate (level)\r\n    const levels: Record<number, LineSegment[]> = {};\r\n    segments.forEach(segment => {\r\n        const y = segment.start.y;\r\n        if (!levels[y]) {\r\n            levels[y] = [];\r\n        }\r\n        levels[y].push(segment);\r\n    });\r\n\r\n    // Sort levels by y-coordinate\r\n    const sortedLevels = Object.keys(levels).map(Number).sort((a, b) => a - b);\r\n\r\n    // For each level except the last one\r\n    for (let i = 0; i < sortedLevels.length - 1; i++) {\r\n        const currentLevel = levels[sortedLevels[i]];\r\n        const nextLevel = levels[sortedLevels[i + 1]];\r\n\r\n        // For each segment in current level\r\n        for (const currentSegment of currentLevel) {\r\n            if (currentSegment.type === \"outer\") {\r\n                continue;\r\n            }\r\n            const matchedSegments: LineSegment[] = [];\r\n            \r\n            // For each segment in next level\r\n            for (const nextSegment of nextLevel) {\r\n                // Check if segments can be connected\r\n                const connectionStart = currentSegment.start;\r\n                const connectionEnd = nextSegment.end;\r\n\r\n                let intersected = false;\r\n                for (let i = 0; i < roof.points.length; i++) {\r\n                    const line = {\r\n                        start: roof.points[i],\r\n                        end: roof.points[(i + 1) % roof.points.length]\r\n                    };\r\n                    if (intersects(line, {start: connectionStart, end: connectionEnd})) {\r\n                        intersected = true;\r\n                        break;\r\n                    }\r\n                }\r\n\r\n                if (intersected) {\r\n                    continue;\r\n                }\r\n\r\n                // Check if center point of connection is inside polygon\r\n                const centerPoint = {\r\n                    x: (connectionStart.x + connectionEnd.x) / 2,\r\n                    y: (connectionStart.y + connectionEnd.y) / 2\r\n                };\r\n\r\n                if (isPointInPolygon(centerPoint, roof)) {\r\n                    matchedSegments.push(nextSegment);\r\n                }\r\n            }\r\n\r\n            if (matchedSegments.length > 0) {\r\n                matches.push({\r\n                    segment: `${currentSegment.start.x}-${currentSegment.start.y}-${currentSegment.end.x}-${currentSegment.end.y}`,\r\n                    matchedSegments: matchedSegments.map(segment => `${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`)\r\n                });\r\n            }\r\n        }\r\n    }\r\n\r\n    return {matches, map};\r\n}\r\n\r\n/**\r\n * Fits panels to a roof polygon.\r\n * \r\n * Starts with positioning a solar panel row (a rectangle with the height of the solar panel and the width in the direction of the perpendicular of\r\n * the azimuth of the roof) at each corner of the roof.\r\n * For each corner there are four possible cases (the width is the width of the whole roof in the direction of the perpendicular of the azimuth):\r\n * 1. The row has height of the solar panel height and sits below the point in the direction of the azimuth of the roof.\r\n * 2. The row has height of the solar panel height and sits above the point in the direction of the azimuth of the roof.\r\n * 3. The row has the height of the solar panel width (solar panels are rotated) and sits below the point in the direction of the azimuth of the roof.\r\n * 4. The row has the height of the solar panel width (solar panels are rotated) and sits above the point in the direction of the azimuth of the roof.\r\n * \r\n * For each of these cases the function then places the solar panel rows directly above and below the current row.\r\n * \r\n * after the function has positioned all the rows it places the solar panels in the spaces between the rows.\r\n * For each of the four scenarios of each corner the number of panels are counted and the optimal placement is chosen.\r\n * \r\n * @param roof - The roof polygon.\r\n * @param panelType - The type of panel to fit.\r\n * @param borderOffset - The offset of the panel from the border of the roof. If negative, the panel can be partially overhanging the roof.\r\n * @param azimuth - The azimuth of the roof.\r\n * @returns The positioned panels.\r\n */\r\nexport function fitPanelsToRoof(roof: Polygon, panelType: SolarPanelType, borderOffset: number = 0, azimuth: number = 0): PositionedSolarPanel[] {\r\n    if (!roof || !panelType || !roof.points || !roof.details) {\r\n        return [];\r\n    }\r\n    console.log(borderOffset, azimuth)\r\n    return [];\r\n    \r\n    // const minX = Math.min(...roof.points.map(p => p.x));\r\n    // const maxX = Math.max(...roof.points.map(p => p.x));\r\n    // const minY = Math.min(...roof.points.map(p => p.y));\r\n    // const maxY = Math.max(...roof.points.map(p => p.y));\r\n\r\n    // const projectedRoof = projectPolygon(roof, azimuth);\r\n    // const projectedOffsetRoof = offsetPolygon(projectedRoof);\r\n\r\n    // const segments = segmentPolygon(projectedOffsetRoof.polygon);\r\n    // const {matches, map} = matchSegments(segments, projectedOffsetRoof.polygon);\r\n    // const matchesMap: Record<string, LineSegment[]> = {};\r\n    // for (const match of matches) {\r\n    //     matchesMap[match.segment] = match.matchedSegments.map(segment => map[segment]);\r\n    // }\r\n\r\n    // let panels: PositionedSolarPanel[] = [];\r\n    // let undidPanels: PositionedSolarPanel[] = [];\r\n\r\n    // for (const segment of segments) {\r\n    //     if (segment.type === \"outer\") {\r\n    //         continue;\r\n    //     }\r\n\r\n    //     const matches = matchesMap[`${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`];\r\n    //     if (!matches || matches.length === 0) {\r\n    //         continue;\r\n    //     }\r\n\r\n    //     // Combine segments until we reach panel height\r\n    //     let combinedSegments: Array<Array<LineSegment>> = [[segment]];\r\n    //     let currentHeight = 0;\r\n    //     let currentMatches = matches;\r\n\r\n    //     // while (currentHeight < panelType.heightMeters && currentMatches.length > 0) {\r\n    //     //     const nextSegment = currentMatches[0];\r\n    //     //     combinedSegments.push(nextSegment);\r\n    //     //     currentHeight += Math.abs(nextSegment.start.y - segment.start.y);\r\n    //     //     currentMatches = matchesMap[`${nextSegment.start.x}-${nextSegment.start.y}-${nextSegment.end.x}-${nextSegment.end.y}`] || [];\r\n    //     // }\r\n\r\n    //     if (currentHeight < panelType.heightMeters) {\r\n    //         continue;\r\n    //     }\r\n\r\n    //     // Calculate minimum width\r\n    //     // let minEnd = Math.max(...combinedSegments.map(s => s.end.x));\r\n    //     // let maxStart = Math.min(...combinedSegments.map(s => s.start.x));\r\n    //     // let width = minEnd - maxStart;\r\n\r\n    //     // if (width >= panelType.widthMeters) {\r\n    //     //     // Find highest segment for starting position\r\n    //     //     const highestSegment = combinedSegments.reduce((prev, curr) => \r\n    //     //         curr.start.y < prev.start.y ? curr : prev\r\n    //     //     );\r\n\r\n    //     //     // Place panels in a grid\r\n    //     //     const panelSpacing = panelType.widthMeters + borderOffset;\r\n    //     //     const rowSpacing = panelType.heightMeters + borderOffset;\r\n    //     //     let currentX = maxStart;\r\n    //     //     let currentY = highestSegment.start.y;\r\n\r\n    //     //     while (currentX + panelType.widthMeters <= minEnd) {\r\n    //     //         while (currentY + panelType.heightMeters <= highestSegment.start.y + currentHeight) {\r\n    //     //             const panelCenter = {\r\n    //     //                 x: currentX + panelType.widthMeters / 2,\r\n    //     //                 y: currentY + panelType.heightMeters / 2\r\n    //     //             };\r\n\r\n    //     //             if (isPointInPolygon(panelCenter, projectedOffsetRoof.polygon)) {\r\n    //     //                 panels.push({\r\n    //     //                     panel: panelType,\r\n    //     //                     pixelPosition: panelCenter\r\n    //     //                 });\r\n    //     //             }\r\n\r\n    //     //             currentY += rowSpacing;\r\n    //     //         }\r\n    //     //         currentX += panelSpacing;\r\n    //     //         currentY = highestSegment.start.y;\r\n    //     //     }\r\n    //     // }\r\n    // }\r\n\r\n    // for (const panel of panels) {\r\n    //     const undoOffset = {\r\n    //         x: panel.pixelPosition.x + projectedOffsetRoof.offset.x,\r\n    //         y: panel.pixelPosition.y + projectedOffsetRoof.offset.y,\r\n    //     };\r\n    //     const projectedPanel = projectPoint(undoOffset, azimuth);\r\n    //     undidPanels.push({\r\n    //         panel: panel.panel,\r\n    //         pixelPosition: projectedPanel,\r\n    //     });\r\n    // }\r\n\r\n    // return panels;\r\n\r\n    // project the polygon points such that the azimuth is 0 degrees\r\n    // this means that the solar panel are aligned perfectly with the coordinate system\r\n    //\r\n    // 1. below point and height is height\r\n    // for each point do the following\r\n    // draw a line along the y-axis of the projected coordinate system (this is the perpendicular of the azimuth)\r\n    // find all the intersection of that line with the roof polygon\r\n    // get all points that are within the height of the solar panel in the direction of the azimuth\r\n    // \r\n\r\n    // for each point generate a line along the y-axis of the projected coordinate system (this is the perpendicular of the azimuth)\r\n    // find all points on that line that intersect with the roof polygon bounds\r\n    // if the number of points is even \r\n\r\n    // \r\n\r\n    // const positionedPanels: PositionedSolarPanel[] = [];\r\n    // let bestPanelCount = 0;\r\n    // let bestPanelArrangement: PositionedSolarPanel[] = [];\r\n\r\n    // // Get roof details\r\n    // const { azimuth } = roof.details;\r\n    // const perpendicularAzimuth = (azimuth + 90) % 360;\r\n\r\n    // for (const point of roof.points) {\r\n    //     const row = createPanelRow(point, false, false);\r\n    //     positionedPanels.push(...row);\r\n    // }\r\n\r\n    // Helper function to create a panel row\r\n    // const createPanelRow = (startPoint: Point, isRotated: boolean, isAbove: boolean): PositionedSolarPanel[] => {\r\n    //     const rowPanels: PositionedSolarPanel[] = [];\r\n    //     const panelWidth = isRotated ? panelType.heightMeters : panelType.widthMeters;\r\n    //     const panelHeight = isRotated ? panelType.widthMeters : panelType.heightMeters;\r\n\r\n    //     // Calculate row direction based on azimuth\r\n    //     const rowAngle = perpendicularAzimuth * (Math.PI / 180);\r\n    //     const rowDirX = Math.cos(rowAngle);\r\n    //     const rowDirY = Math.sin(rowAngle);\r\n\r\n    //     // Calculate panel spacing direction based on azimuth\r\n    //     const panelAngle = azimuth * (Math.PI / 180);\r\n    //     const panelDirX = Math.cos(panelAngle);\r\n    //     const panelDirY = Math.sin(panelAngle);\r\n\r\n    //     // Calculate row width (distance from start to end of roof in perpendicular direction)\r\n    //     let maxRowWidth = 0;\r\n    //     for (const point of roof.points) {\r\n    //         const dx = point.x - startPoint.x;\r\n    //         const dy = point.y - startPoint.y;\r\n    //         const width = Math.abs(dx * rowDirX + dy * rowDirY);\r\n    //         maxRowWidth = Math.max(maxRowWidth, width);\r\n    //     }\r\n\r\n    //     // Place panels along the row\r\n    //     const numPanels = Math.floor(maxRowWidth / panelWidth);\r\n    //     for (let i = 0; i < numPanels; i++) {\r\n    //         const panelX = startPoint.x + i * panelWidth * rowDirX;\r\n    //         const panelY = startPoint.y + i * panelWidth * rowDirY;\r\n\r\n    //         // Check if panel center is within roof polygon\r\n    //         const panelCenter = {\r\n    //             x: panelX + (panelWidth / 2) * rowDirX + (panelHeight / 2) * panelDirX,\r\n    //             y: panelY + (panelWidth / 2) * rowDirY + (panelHeight / 2) * panelDirY\r\n    //         };\r\n\r\n    //         if (isPointInPolygon(panelCenter, roof)) {\r\n    //             rowPanels.push({\r\n    //                 panel: panelType,\r\n    //                 pixelPosition: {\r\n    //                     x: panelCenter.x,\r\n    //                     y: panelCenter.y\r\n    //                 }\r\n    //             });\r\n    //         }\r\n    //     }\r\n\r\n    //     return rowPanels;\r\n    // };\r\n\r\n    // // Try each corner and arrangement\r\n    // for (const corner of roof.points) {\r\n    //     // Try all four arrangements for this corner\r\n    //     const arrangements = [\r\n    //         { isRotated: false, isAbove: false },\r\n    //         { isRotated: false, isAbove: true },\r\n    //         { isRotated: true, isAbove: false },\r\n    //         { isRotated: true, isAbove: true }\r\n    //     ];\r\n\r\n    //     for (const arrangement of arrangements) {\r\n    //         const currentPanels: PositionedSolarPanel[] = [];\r\n    //         const { isRotated, isAbove } = arrangement;\r\n\r\n    //         // Create initial row\r\n    //         const initialRow = createPanelRow(corner, isRotated, isAbove);\r\n    //         currentPanels.push(...initialRow);\r\n\r\n    //         // Add rows above and below\r\n    //         const panelHeight = isRotated ? panelType.widthMeters : panelType.heightMeters;\r\n    //         const rowSpacing = panelHeight + borderOffset;\r\n\r\n    //         // Calculate direction for adding rows\r\n    //         const rowAngle = azimuth * (Math.PI / 180);\r\n    //         const rowDirX = Math.cos(rowAngle);\r\n    //         const rowDirY = Math.sin(rowAngle);\r\n\r\n    //         // Add rows in both directions\r\n    //         let rowOffset = rowSpacing;\r\n    //         while (true) {\r\n    //             const newRowPoint = {\r\n    //                 x: corner.x + rowOffset * rowDirX,\r\n    //                 y: corner.y + rowOffset * rowDirY\r\n    //             };\r\n    //             const newRow = createPanelRow(newRowPoint, isRotated, isAbove);\r\n    //             if (newRow.length === 0) break;\r\n    //             currentPanels.push(...newRow);\r\n    //             rowOffset += rowSpacing;\r\n    //         }\r\n\r\n    //         rowOffset = -rowSpacing;\r\n    //         while (true) {\r\n    //             const newRowPoint = {\r\n    //                 x: corner.x + rowOffset * rowDirX,\r\n    //                 y: corner.y + rowOffset * rowDirY\r\n    //             };\r\n    //             const newRow = createPanelRow(newRowPoint, isRotated, isAbove);\r\n    //             if (newRow.length === 0) break;\r\n    //             currentPanels.push(...newRow);\r\n    //             rowOffset -= rowSpacing;\r\n    //         }\r\n\r\n    //         // Update best arrangement if this one has more panels\r\n    //         if (currentPanels.length > bestPanelCount) {\r\n    //             bestPanelCount = currentPanels.length;\r\n    //             bestPanelArrangement = currentPanels;\r\n    //         }\r\n    //     }\r\n    // }\r\n\r\n    // return bestPanelArrangement;\r\n}\r\n\r\n/**\r\n * Uses the bounding box of the roof and the roof segment bounding boxes to find the best fitting roof segment.\r\n * @param roof the roof shape\r\n * @param roofSegmentStats the stats of the roof segments\r\n * @returns the best fitting roof segment\r\n */\r\nexport function getBestFittingRoofSegment(roof: Polygon, roofSegmentStats: RoofSegmentSizeAndSunshineStats[], bounds: Bounds, canvas: HTMLCanvasElement): RoofSegmentSizeAndSunshineStats {\r\n    const polygonBounds = {\r\n        minX: Math.min(...roof.points.map((p) => p.x)),\r\n        maxX: Math.max(...roof.points.map((p) => p.x)),\r\n        minY: Math.min(...roof.points.map((p) => p.y)),\r\n        maxY: Math.max(...roof.points.map((p) => p.y)),\r\n    };\r\n\r\n    let bestSegment = null;\r\n    let bestIoU = 0;\r\n\r\n    for (const segment of roofSegmentStats) {\r\n        const sw = latLngToPixel(bounds, canvas, {\r\n            latitude: segment.boundingBox.sw.latitude,\r\n            longitude: segment.boundingBox.sw.longitude,\r\n        } as LatLng);\r\n        const ne = latLngToPixel(bounds, canvas, {\r\n            latitude: segment.boundingBox.ne.latitude,\r\n            longitude: segment.boundingBox.ne.longitude,\r\n        } as LatLng);\r\n        const segmentBounds = {\r\n            minX: sw.x,\r\n            maxX: ne.x,\r\n            minY: ne.y,\r\n            maxY: sw.y,\r\n        };\r\n\r\n        // Calculate intersection\r\n        const interLeft = Math.max(polygonBounds.minX, segmentBounds.minX);\r\n        const interRight = Math.min(polygonBounds.maxX, segmentBounds.maxX);\r\n        const interTop = Math.max(polygonBounds.minY, segmentBounds.minY);\r\n        const interBottom = Math.min(polygonBounds.maxY, segmentBounds.maxY);\r\n\r\n        const interWidth = interRight - interLeft;\r\n        const interHeight = interBottom - interTop;\r\n        let intersectionArea = 0;\r\n        if (interWidth > 0 && interHeight > 0) {\r\n            intersectionArea = interWidth * interHeight;\r\n        }\r\n\r\n        const polygonArea = (polygonBounds.maxX - polygonBounds.minX) * (polygonBounds.maxY - polygonBounds.minY);\r\n        const segmentArea = (segmentBounds.maxX - segmentBounds.minX) * (segmentBounds.maxY - segmentBounds.minY);\r\n        const unionArea = polygonArea + segmentArea - intersectionArea;\r\n        const iou = unionArea > 0 ? intersectionArea / unionArea : 0;\r\n\r\n        if (iou > bestIoU) {\r\n            bestIoU = iou;\r\n            bestSegment = segment;\r\n        }\r\n    }\r\n\r\n    return bestSegment;\r\n}\r\n","import { COLUMN_SPACING, ROW_SPACING } from \"../../constants\";\r\nimport { Point, Polygon } from \"../../types/shapes\";\r\nimport { isPointInPolygon, Line } from \"../render/polygon\";\r\nimport { SolarPanelType } from \"../solar\";\r\nimport { intersects, offsetPolygon, PositionedSolarPanel, projectPoint, projectPolygon } from \"./fitting\";\r\n\r\nexport interface MinMax {\r\n    minX: number;\r\n    maxX: number;\r\n    minY: number;\r\n    maxY: number;\r\n}\r\n\r\nexport function generateGrid(minMax: MinMax, solarPanel: SolarPanelType, horizontal: boolean, anker: Point, rowSpacing: number, columnSpacing: number): Array<Array<PositionedSolarPanel>> {\r\n    const grid: Array<Array<PositionedSolarPanel>> = [];\r\n    const width = horizontal ? solarPanel.heightMeters : solarPanel.widthMeters;\r\n    const widthCount = Math.ceil((minMax.maxX - minMax.minX) / width);\r\n    const height = horizontal ? solarPanel.widthMeters : solarPanel.heightMeters;\r\n    const heightCount = Math.ceil((minMax.maxY - minMax.minY) / height);\r\n\r\n    const widthOffset = width / 2;\r\n    const heightOffset = height / 2;\r\n\r\n    // calculate the starting point based on the anker\r\n    const startX = anker.x - (Math.ceil((anker.x - minMax.minX) / width) * width);\r\n    const startY = anker.y - (Math.ceil((anker.y - minMax.minY) / height) * height);\r\n\r\n    for (let i = 0; i < heightCount; i++) {\r\n        const row: Array<PositionedSolarPanel> = [];\r\n        for (let j = 0; j < widthCount; j++) {\r\n            const x = startX + j * width + j * columnSpacing + widthOffset;\r\n            const y = startY + i * height + i * rowSpacing + heightOffset;\r\n            const positionedSolarPanel: PositionedSolarPanel = {\r\n                panel: solarPanel,\r\n                pixelPosition: {\r\n                    x: x,\r\n                    y: y\r\n                },\r\n                horizontal: horizontal\r\n            }\r\n            row.push(positionedSolarPanel);\r\n        }\r\n        grid.push(row);\r\n    }\r\n    return grid;\r\n}\r\n\r\nfunction getSolarPanelLines(positionedSolarPanel: PositionedSolarPanel, horizontal: boolean): Array<Line> {\r\n    const width = horizontal ? positionedSolarPanel.panel.heightMeters : positionedSolarPanel.panel.widthMeters;\r\n    const height = horizontal ? positionedSolarPanel.panel.widthMeters : positionedSolarPanel.panel.heightMeters;\r\n    const p1 = {\r\n        x: positionedSolarPanel.pixelPosition.x - width / 2,\r\n        y: positionedSolarPanel.pixelPosition.y - height / 2\r\n    }\r\n    const p2 = {\r\n        x: positionedSolarPanel.pixelPosition.x - width / 2,\r\n        y: positionedSolarPanel.pixelPosition.y + height / 2\r\n    }\r\n    const p3 = {\r\n        x: positionedSolarPanel.pixelPosition.x + width / 2,\r\n        y: positionedSolarPanel.pixelPosition.y + height / 2\r\n    }\r\n    const p4 = {\r\n        x: positionedSolarPanel.pixelPosition.x + width / 2,\r\n        y: positionedSolarPanel.pixelPosition.y - height / 2\r\n    }\r\n    const lines = [\r\n        {\r\n            start: p1,\r\n            end: p2\r\n        },\r\n        {\r\n            start: p2,\r\n            end: p3\r\n        },\r\n        {\r\n            start: p3,\r\n            end: p4\r\n        },\r\n        {\r\n            start: p4,\r\n            end: p1\r\n        }\r\n    ]\r\n    return lines;\r\n}\r\n\r\n\r\nexport function solarPanelInObstacle(positionedSolarPanel: PositionedSolarPanel, obstacle: Polygon, horizontal: boolean): boolean {\r\n    const lines = getSolarPanelLines(positionedSolarPanel, horizontal);\r\n    if (isPointInPolygon(positionedSolarPanel.pixelPosition, obstacle)) {\r\n        return true;\r\n    }\r\n    for (let i = 0; i < obstacle.points.length; i++) {\r\n        const point = obstacle.points[i];\r\n        const nextPoint = obstacle.points[(i + 1) % obstacle.points.length];\r\n        const border = {\r\n            start: point,\r\n            end: nextPoint\r\n        }\r\n        for (const line of lines) {\r\n            if (intersects(line, border)) {\r\n                return true;\r\n            }\r\n        }\r\n    }\r\n    return false;\r\n}\r\n\r\nexport function solarPanelInPolygon(positionedSolarPanel: PositionedSolarPanel, polygon: Polygon, horizontal: boolean): boolean {\r\n    const lines = getSolarPanelLines(positionedSolarPanel, horizontal);\r\n\r\n    for (let i = 0; i < polygon.points.length; i++) {\r\n        const point = polygon.points[i];\r\n        const nextPoint = polygon.points[(i + 1) % polygon.points.length];\r\n        const border = {\r\n            start: point,\r\n            end: nextPoint\r\n        }\r\n        for (const line of lines) {\r\n            if (intersects(line, border)) {\r\n                return false;\r\n            }\r\n        }\r\n    }\r\n\r\n    return isPointInPolygon(positionedSolarPanel.pixelPosition, polygon);\r\n}\r\n\r\nexport interface Obstacle {\r\n    polygon: Polygon;\r\n    boundingBox: {\r\n        minX: number;\r\n        maxX: number;\r\n        minY: number;\r\n        maxY: number;\r\n    }\r\n}\r\n\r\nexport function isPanelObstructed(positionedSolarPanel: PositionedSolarPanel, obstacles: Obstacle[], horizontal: boolean): boolean {\r\n    for (const obstacle of obstacles) {\r\n        if (solarPanelInObstacle(positionedSolarPanel, obstacle.polygon, horizontal)) {\r\n            return true;\r\n        }\r\n    }\r\n    return false;\r\n}\r\n\r\nexport function getSolarPanelsInPolygon(grid: Array<Array<PositionedSolarPanel>>, polygon: Polygon, horizontal: boolean, obstacles: Obstacle[]): Array<Array<PositionedSolarPanel>> {\r\n    const solarPanels: Array<Array<PositionedSolarPanel>> = [];\r\n    for (const row of grid) {\r\n        let newRow: Array<PositionedSolarPanel> = [];\r\n        for (const positionedSolarPanel of row) {\r\n            const isObstructed = isPanelObstructed(positionedSolarPanel, obstacles, horizontal);\r\n            if (solarPanelInPolygon(positionedSolarPanel, polygon, horizontal) && !isObstructed) {\r\n                newRow.push(positionedSolarPanel);\r\n            }\r\n        }\r\n        solarPanels.push(newRow);\r\n    }\r\n    return solarPanels;\r\n}\r\n\r\nexport function getOptimalSolarPosition(roof: Polygon, obstacles: Obstacle[], solarPanel: SolarPanelType, angle: number): Array<Array<PositionedSolarPanel>> {\r\n    const minX = Math.min(...roof.points.map(p => p.x));\r\n    const maxX = Math.max(...roof.points.map(p => p.x));\r\n    const minY = Math.min(...roof.points.map(p => p.y));\r\n    const maxY = Math.max(...roof.points.map(p => p.y));\r\n    const minMax = {\r\n        minX: minX,\r\n        maxX: maxX,\r\n        minY: minY,\r\n        maxY: maxY\r\n    } as MinMax; \r\n\r\n    const horizontalSolarPanel = {\r\n        ...solarPanel,\r\n        widthMeters: solarPanel.widthMeters * Math.cos(angle * Math.PI / 180),\r\n        heightMeters: solarPanel.heightMeters\r\n    } as SolarPanelType;\r\n\r\n    const verticalSolarPanel = {\r\n        ...solarPanel,\r\n        widthMeters: solarPanel.widthMeters,\r\n        heightMeters: solarPanel.heightMeters * Math.cos(angle * Math.PI / 180)\r\n    } as SolarPanelType;\r\n\r\n    let solarPanels: Array<Array<PositionedSolarPanel>> = [];\r\n    let numberOfPanels = 0;\r\n    for (const point of roof.points) {\r\n        for (const horizontal of [false]) { // TODO removed true\r\n            const grid = generateGrid(minMax, horizontal ? horizontalSolarPanel : verticalSolarPanel, horizontal, point, ROW_SPACING, COLUMN_SPACING);\r\n            const solarPanelsInPolygon = getSolarPanelsInPolygon(grid, roof, horizontal, obstacles);\r\n\r\n            const numberOfPanelsInPolygon = solarPanelsInPolygon.reduce((acc, row) => acc + row.length, 0);\r\n            if (numberOfPanelsInPolygon > numberOfPanels) {\r\n                numberOfPanels = numberOfPanelsInPolygon;\r\n                solarPanels = solarPanelsInPolygon;\r\n            }\r\n        }\r\n        break;\r\n    }\r\n    return solarPanels;\r\n}\r\n\r\nfunction projectObstacles(obstacles: Polygon[], azimuth: number, offset: {x: number, y: number}, inset: number): Array<Obstacle> {\r\n    const result: Array<Obstacle> = [];\r\n    for (const obstacle of obstacles) {\r\n        const offsetObstacle = offsetPolygon(obstacle, offset);\r\n        const projectedObstacle = projectPolygon(offsetObstacle.polygon, -azimuth);\r\n        const insetObstacle = insetPolygon(projectedObstacle, -inset);\r\n\r\n        const minX = Math.min(...insetObstacle.points.map(p => p.x));\r\n        const maxX = Math.max(...insetObstacle.points.map(p => p.x));\r\n        const minY = Math.min(...insetObstacle.points.map(p => p.y));\r\n        const maxY = Math.max(...insetObstacle.points.map(p => p.y));\r\n        const boundingBox = {\r\n            minX: minX,\r\n            maxX: maxX,\r\n            minY: minY,\r\n            maxY: maxY\r\n        } as MinMax;\r\n        result.push({\r\n            polygon: projectedObstacle,\r\n            boundingBox: boundingBox\r\n        });\r\n    }\r\n    return result;\r\n}\r\n\r\nfunction isClockwise(points: Point[]): boolean {\r\n    let sum = 0;\r\n    for (let i = 0; i < points.length; i++) {\r\n        const curr = points[i];\r\n        const next = points[(i + 1) % points.length];\r\n        sum += (next.x - curr.x) * (next.y + curr.y);\r\n    }\r\n    return sum > 0;\r\n}\r\n\r\nexport function insetPolygon(polygon: Polygon, inset: number): Polygon {\r\n    const points = polygon.points;\r\n    const isClockwisePolygon = isClockwise(points);\r\n    inset = inset * Math.sqrt(2) * (isClockwisePolygon ? -1 : 1);\r\n    const insetPoints: Point[] = [];\r\n    \r\n    for (let i = 0; i < points.length; i++) {\r\n        const prev = points[(i - 1 + points.length) % points.length];\r\n        const curr = points[i];\r\n        const next = points[(i + 1) % points.length];\r\n        \r\n        // Calculate vectors for the two edges meeting at current point\r\n        const v1 = {\r\n            x: curr.x - prev.x,\r\n            y: curr.y - prev.y\r\n        };\r\n        const v2 = {\r\n            x: next.x - curr.x,\r\n            y: next.y - curr.y\r\n        };\r\n        \r\n        // Calculate perpendicular vectors (90 degrees clockwise)\r\n        const perp1 = {\r\n            x: -v1.y,\r\n            y: v1.x\r\n        };\r\n        const perp2 = {\r\n            x: -v2.y,\r\n            y: v2.x\r\n        };\r\n        \r\n        // Normalize the perpendicular vectors\r\n        const length1 = Math.sqrt(perp1.x * perp1.x + perp1.y * perp1.y);\r\n        const length2 = Math.sqrt(perp2.x * perp2.x + perp2.y * perp2.y);\r\n        \r\n        perp1.x /= length1;\r\n        perp1.y /= length1;\r\n        perp2.x /= length2;\r\n        perp2.y /= length2;\r\n        \r\n        // Calculate the bisector vector\r\n        const bisector = {\r\n            x: perp1.x + perp2.x,\r\n            y: perp1.y + perp2.y\r\n        };\r\n        \r\n        // Normalize the bisector\r\n        const bisectorLength = Math.sqrt(bisector.x * bisector.x + bisector.y * bisector.y);\r\n        bisector.x /= bisectorLength;\r\n        bisector.y /= bisectorLength;\r\n        \r\n        // Calculate the inset point\r\n        const insetPoint = {\r\n            x: curr.x + bisector.x * inset,\r\n            y: curr.y + bisector.y * inset\r\n        };\r\n        \r\n        insetPoints.push(insetPoint);\r\n    }\r\n    \r\n    return {\r\n        points: insetPoints,\r\n        type: polygon.type,\r\n        closed: polygon.closed,\r\n        _id: polygon._id,\r\n        details: polygon.details\r\n    };\r\n}\r\n\r\nexport function getOptimalSolarPositionFully(roof: Polygon, obstacles: Polygon[], solarPanel: SolarPanelType, azimuth: number, inset: number, angle: number): Array<PositionedSolarPanel> {\r\n    const insetRoof = insetPolygon(roof, inset);\r\n    const offset = offsetPolygon(insetRoof);\r\n    const projectedOffset = projectPolygon(offset.polygon, -azimuth);\r\n\r\n    const projectedObstacles = projectObstacles(obstacles, azimuth, offset.offset, inset);\r\n\r\n    const horizontalSolarPanels = getOptimalSolarPosition(projectedOffset, projectedObstacles, solarPanel, angle);\r\n    const unprojectedPanels: Array<PositionedSolarPanel> = [];\r\n\r\n    for (const panel of horizontalSolarPanels.flat()) {\r\n        const unprojectedPanel = projectPoint(panel.pixelPosition, azimuth);\r\n        const offsetPosition = {\r\n            x: unprojectedPanel.x + offset.offset.x,\r\n            y: unprojectedPanel.y + offset.offset.y\r\n        }\r\n        unprojectedPanels.push({\r\n            panel: panel.panel,\r\n            pixelPosition: offsetPosition,\r\n            horizontal: panel.horizontal\r\n        });\r\n    }\r\n    return unprojectedPanels;\r\n}","import { LanguageStrings } from \"../../types/lang\";\r\n\r\nexport const en: LanguageStrings = {\r\n    settings: {\r\n        language: \"Language\",\r\n        rowSpacing: \"Row Spacing\",\r\n        columnSpacing: \"Column Spacing\",\r\n        borderInset: \"Border Inset\",\r\n    },\r\n    mapSelector: {\r\n        explanation: \"Select your house on the map and adjust the radius of the circle to fully encompase your roof.\",\r\n        radius: \"Radius (meters)\",\r\n        accept: \"Accept\",\r\n        chooseOnMap: \"Choose on Map\",\r\n    },\r\n    solarExpert: {\r\n        searchPlaceholder: \"Search for your address\"\r\n    },\r\n    solarSystemForm: {\r\n        title: \"Solar System Configuration\",\r\n        systemInformation: \"System Information\",\r\n        numberOfPanels: \"Number of Solar Panels\",\r\n        panelPeakPower: \"Panel Peak Power (kW)\",\r\n        totalSystemPeakPower: \"Total System Peak Power (kW)\",\r\n        electricityPrice: \"Electricity Price (€/kWh)\",\r\n        compensationRate: \"Compensation Rate (€/kWh)\",\r\n        autonomy: \"Autonomy\",\r\n        costSavings: \"Cost Savings (€/year)\",\r\n        householdConsumptionTitle: \"Household Electricity Consumption\",\r\n        consumptionProfileTitle: \"Consumption Profile\",\r\n        electricityCostsTitle: \"Electricity Costs\",\r\n        compensationRateTitle: \"Compensation Rate\",\r\n        resultsTitle: \"Results\",\r\n        savingsDisclaimer: \"Disclaimer: The savings are based on the average electricity price in Spain.\",\r\n        annualConsumption: \"Annual Consumption (kWh)\",\r\n        name: \"Name\",\r\n        email: \"Email\",\r\n        nameError: \"Please enter your name\",\r\n        emailError: \"Please enter a valid email address\",\r\n        consumptionProfiles: {\r\n            mostlyAtHome: \"Mostly at home\",\r\n            mostlyAway: \"Mostly away\",\r\n        },\r\n        chart: {\r\n            consumption: \"Consumption\",\r\n            production: \"Production\",\r\n            consumptionProfile: \"Consumption Profile\",\r\n            relativeConsumption: \"Relative Consumption\",\r\n            hourOfDay: \"Hour of Day\",\r\n        },\r\n        validEmailError: \"Please enter a valid email address\",\r\n        requestOffer: \"Request Offer\",\r\n        requestOfferButton: \"Request Offer\",\r\n        year: \"year\",\r\n        additionalComponents: {\r\n            title: \"Additional Components\",\r\n            heatPump: \"Heat Pump\",\r\n            electricCar: \"Electric Car\",\r\n            battery: \"Battery\",\r\n            chargingTime: \"Charging Time\",\r\n            chargingTimeDay: \"Day (06:00 - 18:00)\",\r\n            chargingTimeNight: \"Night (18:00 - 06:00)\",\r\n        },\r\n        annualPriceIncrease: \"Annual Price Increase (%)\",\r\n        costSavings25Years: \"25-Year Savings\",\r\n    },\r\n    mapDraw: {\r\n        instructions: {\r\n            show: \"Show Instructions\",\r\n            hide: \"Hide Instructions\",\r\n            parts: {\r\n                roof: \"After you have searched and selected your address. Highlight the part of your roof that you want to add solar panels to. Mark each surface with a polygon with the roof tool\",\r\n                obstruction: \". If you have skylights or other obstructions where you don't want to add solar panels, mark those as well with the obstruction tool\",\r\n                delete: \". You can delete polygons with the delete tool\",\r\n                move: \". If you want to change the corners of a polygon, select the move tool\",\r\n                end: \", select the polygon you want to change and drag and drop the corners.\",\r\n            }\r\n        },\r\n        noPolygonSelected: \"No polygon selected\",\r\n        noAddressSelected: \"Please select an address\",\r\n        information: \"Information\",\r\n        calculateSolarPanels: \"Calculate Solar Panels\",\r\n        markRoofEdge: \"Mark lower roof edge\",\r\n        panels: \"Panels\",\r\n        area: \"Area\",\r\n        azimuth: \"Azimuth\",\r\n        pitch: \"Pitch\",\r\n        tools: {\r\n            roof: {\r\n                name: \"Roof\",\r\n                explanation: \"Draw the roof of the building\",\r\n                ariaLabel: \"Roof\",\r\n            },\r\n            obstruction: {\r\n                name: \"Obstruction\",\r\n                explanation: \"Draw the obstruction of the building\",\r\n                ariaLabel: \"Obstruction\",\r\n            },\r\n            delete: {\r\n                name: \"Delete\",\r\n                explanation: \"Delete the selected polygon\",\r\n                ariaLabel: \"Delete\",\r\n            },\r\n            move: {\r\n                name: \"Move\",\r\n                explanation: \"Move the selected polygon\",\r\n                ariaLabel: \"Move\",\r\n            },\r\n        },\r\n    }\r\n}","import { LanguageStrings } from \"../../types/lang\";\r\n\r\nexport const de: LanguageStrings = {\r\n    settings: {\r\n        language: \"Sprache\",\r\n        rowSpacing: \"Zeilenabstand\",\r\n        columnSpacing: \"Spaltenabstand\",\r\n        borderInset: \"Randabstand\",\r\n    },\r\n    mapSelector: {\r\n        explanation: \"Wählen Sie Ihre Adresse auf der Karte und passen Sie den Radius des Kreises an, um Ihr Dach vollständig zu erfassen.\",\r\n        radius: \"Radius (Meter)\",\r\n        accept: \"Akzeptieren\",\r\n        chooseOnMap: \"Auf der Karte auswählen\",\r\n    },\r\n    solarExpert: {\r\n        searchPlaceholder: \"Ihre Adresse\"\r\n    },\r\n    solarSystemForm: {\r\n        title: \"Solarsystem Konfiguration\",\r\n        systemInformation: \"System Information\",\r\n        numberOfPanels: \"Anzahl der Solarpanel\",\r\n        panelPeakPower: \"Panelleistung (kW)\",\r\n        totalSystemPeakPower: \"Maximale Anlagengröße (kWp)\",\r\n        electricityPrice: \"Strompreis (€/kWh)\",\r\n        compensationRate: \"Einspeisevergütung (€/kWh)\",\r\n        autonomy: \"Autonomie\",\r\n        costSavings: \"Einsparungen (€/Jahr)\",\r\n        householdConsumptionTitle: \"Haushaltsverbrauch\",\r\n        consumptionProfileTitle: \"Verbrauchprofil\",\r\n        electricityCostsTitle: \"Stromkosten\",\r\n        compensationRateTitle: \"Einspeisevergütung\",\r\n        resultsTitle: \"Ergebnisse\",\r\n        savingsDisclaimer: \"Disclaimer: Die Einsparungen basieren auf dem durchschnittlichen Strompreis in Deutschland.\",\r\n        annualConsumption: \"Jährlicher Verbrauch (kWh)\",\r\n        name: \"Name\",\r\n        email: \"Email\",\r\n        nameError: \"Bitte geben Sie Ihren Namen ein\",\r\n        emailError: \"Bitte geben Sie eine gültige E-Mail-Adresse ein\",\r\n        consumptionProfiles: {\r\n            mostlyAtHome: \"Hauptsächlich zu Hause\",\r\n            mostlyAway: \"Erwerbstätig\",\r\n        },\r\n        chart: {\r\n            consumption: \"Verbrauch\",\r\n            production: \"Produktion\",\r\n            consumptionProfile: \"Verbrauchprofil\",\r\n            relativeConsumption: \"Verbrauch\",\r\n            hourOfDay: \"Stunde des Tages\",\r\n        },\r\n        validEmailError: \"Bitte geben Sie eine gültige E-Mail-Adresse ein\",\r\n        requestOffer: \"Angebot anfordern\",\r\n        requestOfferButton: \"Angebot anfordern\",\r\n        year: \"Jahr\",\r\n        additionalComponents: {\r\n            title: \"Zusätzliches\",\r\n            heatPump: \"Wärmepumpe\",\r\n            electricCar: \"Elektroauto\",\r\n            battery: \"Batterie\",\r\n            chargingTime: \"Zeitpunkt der Ladung\",\r\n            chargingTimeDay: \"Tag (06:00 - 18:00)\",\r\n            chargingTimeNight: \"Nacht (18:00 - 06:00)\",\r\n        },\r\n        annualPriceIncrease: \"Jährliche Preissteigerung (%)\t\",\r\n        costSavings25Years: \"25-Jährige Einsparungen\",\r\n    },\r\n    mapDraw: {\r\n        instructions: {\r\n            show: \"Anleitung anzeigen\",\r\n            hide: \"Anleitung ausblenden\",\r\n            parts: {\r\n                roof: \"Nachdem Sie Ihre Adresse gesucht und ausgewählt haben. Markieren Sie die Teile Ihres Daches, auf denen Sie Solarpanelleisten hinzufügen möchten. Markieren Sie jede Oberfläche mit einem Polygon mit dem Dachwerkzeug\",\r\n                obstruction: \". Wenn Sie Dachfenster oder andere Hindernisse haben, auf denen Sie keine Solarpanele hinzufügen können, markieren Sie diese mit dem Hinderniswerkzeug\",\r\n                delete: \". Sie können Polygone mit dem Löschwerkzeug löschen\",\r\n                move: \". Wenn Sie die Ecken eines Polygons ändern möchten, wählen Sie das Verschiebewerkzeug\",\r\n                end: \", wählen Sie das Polygon, das Sie ändern möchten, und verschieben Sie die Ecken.\",\r\n            }\r\n        },\r\n        markRoofEdge: \"untere Dachkante markieren\",\r\n        noPolygonSelected: \"Kein Polygon ausgewählt\",\r\n        noAddressSelected: \"Bitte wählen Sie eine Adresse\",\r\n        information: \"Information\",\r\n        calculateSolarPanels: \"Berechnen Sie die Solarpanele\",\r\n        panels: \"Panele\",\r\n        area: \"Fläche\",\r\n        azimuth: \"Ausrichtung\",\r\n        pitch: \"Neigung\",\r\n        tools: {\r\n            roof: {\r\n                name: \"Dach\",\r\n                explanation: \"Zeichnen Sie das Dach des Gebäudes\",\r\n                ariaLabel: \"Dach\",\r\n            },\r\n            obstruction: {\r\n                name: \"Hindernis\",\r\n                explanation: \"Zeichnen Sie das Hindernis des Gebäudes\",\r\n                ariaLabel: \"Hindernis\",\r\n            },\r\n            delete: {\r\n                name: \"Löschen\",\r\n                explanation: \"Löschen Sie das ausgewählte Polygon\",\r\n                ariaLabel: \"Löschen\",\r\n            },\r\n            move: {\r\n                name: \"Verschieben\",\r\n                explanation: \"Verschieben Sie Punkte des ausgewählten Polygons\",\r\n                ariaLabel: \"Verschieben\",\r\n            },\r\n        },\r\n    }\r\n}","import { LanguageStrings } from \"../../types/lang\";\r\n\r\nexport const es: LanguageStrings = {\r\n    settings: {\r\n        language: \"Idioma\",\r\n        rowSpacing: \"Espaciado de filas\",\r\n        columnSpacing: \"Espaciado de columnas\",\r\n        borderInset: \"Espaciado de bordes\",\r\n    },\r\n    mapSelector: {\r\n        explanation: \"Selecciona tu casa en el mapa y ajusta el radio del círculo para cubrir completamente tu tejado.\",\r\n        radius: \"Radio (metros)\",\r\n        accept: \"Aceptar\",\r\n        chooseOnMap: \"Seleccionar en el mapa\",\r\n    },\r\n    solarExpert: {\r\n        searchPlaceholder: \"Buscar tu dirección\"\r\n    },\r\n    solarSystemForm: {\r\n        title: \"Configuración del sistema solar\",\r\n        systemInformation: \"Información del sistema\",\r\n        numberOfPanels: \"Número de paneles solares\",\r\n        panelPeakPower: \"Potencia pico del panel (kW)\",\r\n        totalSystemPeakPower: \"Potencia pico total del sistema (kW)\",\r\n        electricityPrice: \"Precio de la electricidad (€/kWh)\",\r\n        compensationRate: \"Tasa de compensación (€/kWh)\",\r\n        autonomy: \"Autonomía\",\r\n        costSavings: \"Ahorro (€/año)\",\r\n        householdConsumptionTitle: \"Consumo de la casa\",\r\n        consumptionProfileTitle: \"Perfil de consumo\",\r\n        electricityCostsTitle: \"Costes de la electricidad\",\r\n        compensationRateTitle: \"Tasa de compensación\",\r\n        resultsTitle: \"Resultados\",\r\n        savingsDisclaimer: \"Nota: Los ahorros se basan en el precio promedio de la electricidad en España.\",\r\n        annualConsumption: \"Consumo anual (kWh)\",\r\n        name: \"Nombre\",\r\n        email: \"Email\",\r\n        nameError: \"Por favor, ingrese su nombre\",\r\n        emailError: \"Por favor, ingrese una dirección de correo electrónico válida\",\r\n        consumptionProfiles: {\r\n            mostlyAtHome: \"Principalmente en casa\",\r\n            mostlyAway: \"Empleo\",\r\n        },\r\n        chart: {\r\n            consumption: \"Consumo\",\r\n            production: \"Producción\",\r\n            consumptionProfile: \"Perfil de consumo\",\r\n            relativeConsumption: \"Consumo\",\r\n            hourOfDay: \"Hora del día\",\r\n        },\r\n        validEmailError: \"Por favor, ingrese una dirección de correo electrónico válida\",\r\n        requestOffer: \"Solicitar una oferta\",\r\n        requestOfferButton: \"Solicitar oferta\",\r\n        year: \"Año\",\r\n        additionalComponents: {\r\n            title: \"Componentes adicionales\",\r\n            heatPump: \"Caldera\",\r\n            electricCar: \"Coche eléctrico\",\r\n            battery: \"Batería\",\r\n            chargingTime: \"Hora de carga\",\r\n            chargingTimeDay: \"Día (06:00 - 18:00)\",\r\n            chargingTimeNight: \"Noche (18:00 - 06:00)\",\r\n        },\r\n        annualPriceIncrease: \"Aumento anual del precio (%)\",\r\n        costSavings25Years: \"Ahorro en 25 años\",\r\n    },\r\n    mapDraw: {\r\n        instructions: {\r\n            show: \"Mostrar instrucciones\",\r\n            hide: \"Ocultar instrucciones\",\r\n            parts: {\r\n                roof: \"Después de buscar y seleccionar su dirección, resalte la parte del tejado donde desea añadir paneles solares. Marque cada superficie con un polígono con la herramienta de tejado\",\r\n                obstruction: \". Si tiene claraboyas u otras obstrucciones donde no desea añadir paneles solares, márquelas también con la herramienta de obstrucción\",\r\n                delete: \". Puede eliminar polígonos con la herramienta de eliminación\",\r\n                move: \". Si desea cambiar las esquinas de un polígono, seleccione la herramienta de movimiento\",\r\n                end: \", seleccione el polígono que desea modificar y arrastre y suelte los bordes.\",\r\n            }\r\n        },\r\n        markRoofEdge: \"Marcar borde inferior del tejado\",\r\n        noPolygonSelected: \"No se ha seleccionado un polígono\",\r\n        noAddressSelected: \"Por favor, seleccione una dirección\",\r\n        information: \"Información\",\r\n        calculateSolarPanels: \"Calcular paneles solares\",\r\n        panels: \"Paneles\",\r\n        area: \"Área\",\r\n        azimuth: \"Azimut\",\r\n        pitch: \"Inclinación\",\r\n        tools: {\r\n            roof: {\r\n                name: \"Tejado\",\r\n                explanation: \"Dibuje el tejado del edificio\",\r\n                ariaLabel: \"Tejado\",\r\n            },\r\n            obstruction: {\r\n                name: \"Obstrucción\",\r\n                explanation: \"Dibuje la obstrucción del edificio\",\r\n                ariaLabel: \"Obstrucción\",\r\n            },\r\n            delete: {\r\n                name: \"Eliminar\",\r\n                explanation: \"Elimine el polígono seleccionado\",\r\n                ariaLabel: \"Eliminar\",\r\n            },\r\n            move: {\r\n                name: \"Mover\",\r\n                explanation: \"Mueva los puntos del polígono seleccionado\",\r\n                ariaLabel: \"Mover\",\r\n            },\r\n        },\r\n    }\r\n}","import { Language, LanguageStrings } from \"../../types/lang\";\r\nimport { en } from \"./english\";\r\nimport { de } from \"./german\";\r\nimport { es } from \"./spanish\";\r\n\r\nconst languageStrings: Record<Language, LanguageStrings> = {\r\n    en: en,\r\n    es: es,\r\n    de: de,\r\n}\r\n\r\n\r\nexport function getLanguageStrings(lang: Language): LanguageStrings {\r\n    const defaultLang = languageStrings[\"en\"];\r\n    if (lang === \"en\") {\r\n        return defaultLang;\r\n    }\r\n    const langStrings = languageStrings[lang];\r\n    \r\n    // Deep merge the default language strings with the selected language strings\r\n    const mergedStrings = JSON.parse(JSON.stringify(defaultLang)); // Deep clone default\r\n    \r\n    function deepMerge(target: any, source: any) {\r\n        for (const key in source) {\r\n            if (source[key] instanceof Object && key in target) {\r\n                deepMerge(target[key], source[key]);\r\n            } else if (source[key] !== undefined) {\r\n                target[key] = source[key];\r\n            }\r\n        }\r\n    }\r\n    \r\n    deepMerge(mergedStrings, langStrings);\r\n    return mergedStrings;\r\n}\r\n","import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n    const items = map.get(propName);\n    if (!items) {\n        map.set(propName, [value]);\n    }\n    else if (!items.includes(value)) {\n        items.push(value);\n    }\n};\nconst debounce = (fn, ms) => {\n    let timeoutId;\n    return (...args) => {\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        timeoutId = setTimeout(() => {\n            timeoutId = 0;\n            fn(...args);\n        }, ms);\n    };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n    for (let key of map.keys()) {\n        map.set(key, map.get(key).filter(isConnected));\n    }\n}, 2_000);\nconst stencilSubscription = () => {\n    if (typeof getRenderingRef !== 'function') {\n        // If we are not in a stencil project, we do nothing.\n        // This function is not really exported by @stencil/core.\n        return {};\n    }\n    const elmsToUpdate = new Map();\n    return {\n        dispose: () => elmsToUpdate.clear(),\n        get: (propName) => {\n            const elm = getRenderingRef();\n            if (elm) {\n                appendToMap(elmsToUpdate, propName, elm);\n            }\n        },\n        set: (propName) => {\n            const elements = elmsToUpdate.get(propName);\n            if (elements) {\n                elmsToUpdate.set(propName, elements.filter(forceUpdate));\n            }\n            cleanupElements(elmsToUpdate);\n        },\n        reset: () => {\n            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n            cleanupElements(elmsToUpdate);\n        },\n    };\n};\n\nconst unwrap = (val) => (typeof val === 'function' ? val() : val);\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n    const unwrappedState = unwrap(defaultState);\n    let states = new Map(Object.entries(unwrappedState ?? {}));\n    const handlers = {\n        dispose: [],\n        get: [],\n        set: [],\n        reset: [],\n    };\n    const reset = () => {\n        // When resetting the state, the default state may be a function - unwrap it to invoke it.\n        // otherwise, the state won't be properly reset\n        states = new Map(Object.entries(unwrap(defaultState) ?? {}));\n        handlers.reset.forEach((cb) => cb());\n    };\n    const dispose = () => {\n        // Call first dispose as resetting the state would\n        // cause less updates ;)\n        handlers.dispose.forEach((cb) => cb());\n        reset();\n    };\n    const get = (propName) => {\n        handlers.get.forEach((cb) => cb(propName));\n        return states.get(propName);\n    };\n    const set = (propName, value) => {\n        const oldValue = states.get(propName);\n        if (shouldUpdate(value, oldValue, propName)) {\n            states.set(propName, value);\n            handlers.set.forEach((cb) => cb(propName, value, oldValue));\n        }\n    };\n    const state = (typeof Proxy === 'undefined'\n        ? {}\n        : new Proxy(unwrappedState, {\n            get(_, propName) {\n                return get(propName);\n            },\n            ownKeys(_) {\n                return Array.from(states.keys());\n            },\n            getOwnPropertyDescriptor() {\n                return {\n                    enumerable: true,\n                    configurable: true,\n                };\n            },\n            has(_, propName) {\n                return states.has(propName);\n            },\n            set(_, propName, value) {\n                set(propName, value);\n                return true;\n            },\n        }));\n    const on = (eventName, callback) => {\n        handlers[eventName].push(callback);\n        return () => {\n            removeFromArray(handlers[eventName], callback);\n        };\n    };\n    const onChange = (propName, cb) => {\n        const unSet = on('set', (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        });\n        // We need to unwrap the defaultState because it might be a function.\n        // Otherwise we might not be sending the right reset value.\n        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));\n        return () => {\n            unSet();\n            unReset();\n        };\n    };\n    const use = (...subscriptions) => {\n        const unsubs = subscriptions.reduce((unsubs, subscription) => {\n            if (subscription.set) {\n                unsubs.push(on('set', subscription.set));\n            }\n            if (subscription.get) {\n                unsubs.push(on('get', subscription.get));\n            }\n            if (subscription.reset) {\n                unsubs.push(on('reset', subscription.reset));\n            }\n            if (subscription.dispose) {\n                unsubs.push(on('dispose', subscription.dispose));\n            }\n            return unsubs;\n        }, []);\n        return () => unsubs.forEach((unsub) => unsub());\n    };\n    const forceUpdate = (key) => {\n        const oldValue = states.get(key);\n        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n    };\n    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\n    };\n};\nconst removeFromArray = (array, item) => {\n    const index = array.indexOf(item);\n    if (index >= 0) {\n        array[index] = array[array.length - 1];\n        array.length--;\n    }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n    const map = createObservableMap(defaultState, shouldUpdate);\n    map.use(stencilSubscription());\n    return map;\n};\n\nexport { createObservableMap, createStore };\n","import { createStore } from \"@stencil/store\";\r\nimport { Language } from \"./components\";\r\n\r\nexport interface Settings {\r\n    language: Language;\r\n    rowSpacing: number;\r\n    columnSpacing: number;\r\n    borderInset: number;\r\n    heatPumpM2Consumption: number;\r\n}\r\n\r\nexport interface State {\r\n    latitude: number | null;\r\n    longitude: number | null;\r\n    radiusMeters: number;\r\n    settings: Settings;\r\n    settingsVersion: number;\r\n    isMobile: boolean;\r\n}\r\n\r\nconst {state, onChange} = createStore<State>({\r\n    latitude: null,\r\n    longitude: null,\r\n    radiusMeters: 15,\r\n    settings: {\r\n        language: \"en\",\r\n        rowSpacing: 1,\r\n        columnSpacing: 1,\r\n        borderInset: 0.2,\r\n        heatPumpM2Consumption: 85,\r\n    },\r\n    settingsVersion: 1,\r\n    isMobile: false,\r\n});\r\n\r\nonChange(\"latitude\", (value) => {\r\n    state.latitude = value;\r\n});\r\n\r\nonChange(\"longitude\", (value) => {\r\n    state.longitude = value;\r\n});\r\n\r\nonChange(\"radiusMeters\", (value) => {\r\n    state.radiusMeters = value;\r\n});\r\n\r\nonChange(\"settings\", (value) => {\r\n    state.settings = value;\r\n});\r\n\r\nonChange(\"settingsVersion\", (value) => {\r\n    state.settingsVersion = value;\r\n});\r\n\r\nonChange(\"isMobile\", (value) => {\r\n    state.isMobile = value;\r\n});\r\n\r\nexport {state, onChange};\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import {\r\n    Component,\r\n    Element,\r\n    h,\r\n    Listen,\r\n    Prop,\r\n    State,\r\n    Watch,\r\n} from \"@stencil/core\";\r\n\r\nimport {\r\n    renderCombinedWithZoom,\r\n    renderSolarPanel,\r\n} from \"../../utils/visualize\";\r\nimport {\r\n    BuildingInsightsResponse,\r\n    GeoTiff,\r\n    SolarPanelType,\r\n} from \"../../utils/solar\";\r\nimport { fetchSolarData, getBuildingImages } from \"../../utils/api\";\r\nimport { drawPolygon, isPointInPolygon } from \"../../utils/render/polygon\";\r\nimport { projectPointPerpendicularToLine } from \"../../utils/render/projection\";\r\nimport { Point, Polygon, SelectedPolygon } from \"../../types/shapes\";\r\nimport {\r\n    deleteTool,\r\n    markRoofEdgeTool,\r\n    moveTool,\r\n    obstructionTool,\r\n    roofTool,\r\n    Tool,\r\n    tools,\r\n} from \"../../utils/render/tools\";\r\nimport {\r\n    DEFAULT_SOLAR_EXPERT_CONFIG,\r\n    DEFAULT_SOLAR_PANEL_TYPE,\r\n    SolarExpertConfig,\r\n} from \"../../config\";\r\nimport { getFillColor } from \"../../utils/render/color\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\nimport { calculatePolygonArea, getPixelInMeters } from \"../../utils/utils\";\r\nimport {\r\n    getBestFittingRoofSegment,\r\n    SolarPanelSystemPart,\r\n} from \"../../utils/geometry/fitting\";\r\nimport { getOptimalSolarPositionFully } from \"../../utils/geometry/gridMatch\";\r\nimport { BORDER_INSET, DEFAULT_SUNNINESS } from \"../../constants\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, Settings, state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"map-draw\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class MapDraw {\r\n    @Prop()\r\n    apiKey: string = \"\";\r\n    @Prop()\r\n    config: SolarExpertConfig = DEFAULT_SOLAR_EXPERT_CONFIG;\r\n    @Prop()\r\n    solarPanel: SolarPanelType = DEFAULT_SOLAR_PANEL_TYPE;\r\n\r\n    @State()\r\n    showInstructions: boolean = true;\r\n    @State()\r\n    showSettings: boolean = false;\r\n    @State()\r\n    zoom: number = 1;\r\n    @State()\r\n    loadingState: \"empty\" | \"loading\" | \"loaded\" = \"empty\";\r\n    @State()\r\n    rgbTiff: GeoTiff | null = null;\r\n    @State()\r\n    draggedPointIndex: number | null = null;\r\n    @State()\r\n    hoveredPointIndex: number | null = null;\r\n    @State()\r\n    hoveredPolygon: SelectedPolygon | null = null;\r\n    @State()\r\n    shiftKeyPressed: boolean = false;\r\n    @State()\r\n    altKeyPressed: boolean = false;\r\n    @State()\r\n    mousePoint: Point | null = null;\r\n    @State()\r\n    currentTool: Tool = roofTool;\r\n    @State()\r\n    roofPolygons: { [id: string]: Polygon } = {};\r\n    @State()\r\n    roofPolygonsSolarPanels: { [id: string]: SolarPanelSystemPart } = {};\r\n    @State()\r\n    obstructionPolygons: { [id: string]: Polygon } = {};\r\n    @State()\r\n    selectedPolygon: SelectedPolygon | null = null;\r\n    @State()\r\n    buildingInsights: BuildingInsightsResponse | null = null;\r\n    @State()\r\n    pixelInMeters: number = 0.2;\r\n    @State()\r\n    isMobile: boolean = false;\r\n    @State()\r\n    highlightedEdge: { pointA: Point; pointB: Point } | null = null;\r\n\r\n    @Element()\r\n    el: HTMLElement;\r\n    private canvasElement?: HTMLCanvasElement;\r\n    private polygonCanvas?: HTMLCanvasElement;\r\n    private polygonCtx?: CanvasRenderingContext2D;\r\n\r\n    private getCurrentPolygon(): Polygon | null {\r\n        if (!this.selectedPolygon) {\r\n            return null;\r\n        }\r\n        const { _id, type } = this.selectedPolygon;\r\n        return type === \"roof\"\r\n            ? this.roofPolygons[_id]\r\n            : this.obstructionPolygons[_id];\r\n    }\r\n\r\n    componentWillLoad() {\r\n        onChange(\"latitude\", () => {\r\n            this.getBuildingImages();\r\n            this.getBuildingInsights();\r\n        });\r\n        onChange(\"longitude\", () => {\r\n            this.getBuildingImages();\r\n            this.getBuildingInsights();\r\n        });\r\n    }\r\n\r\n    componentDidLoad() {\r\n        if (state.latitude && state.longitude) {\r\n            this.loadingState = \"loading\";\r\n            this.getBuildingInsights();\r\n            this.getBuildingImages();\r\n        }\r\n\r\n        requestAnimationFrame(() => {\r\n            if (this.canvasElement) {\r\n                const rect = this.canvasElement.getBoundingClientRect();\r\n                this.canvasElement.width = rect.width;\r\n                this.canvasElement.height = rect.height;\r\n                this.drawMap();\r\n            }\r\n        });\r\n    }\r\n\r\n    private sizeCanvas(width: number, height: number) {\r\n        if (this.canvasElement) {\r\n            this.canvasElement.width = width;\r\n            this.canvasElement.height = height;\r\n        }\r\n        if (this.polygonCanvas) {\r\n            this.polygonCanvas.width = width;\r\n            this.polygonCanvas.height = height;\r\n            this.polygonCtx = this.polygonCanvas.getContext(\"2d\");\r\n        }\r\n    }\r\n\r\n    async getBuildingInsights() {\r\n        if (!state.latitude || !state.longitude) {\r\n            return;\r\n        }\r\n        this.loadingState = \"loading\";\r\n\r\n        if (this.buildingInsights) {\r\n            const sameLocation =\r\n                this.buildingInsights.center.latitude === state.latitude &&\r\n                this.buildingInsights.center.longitude === state.longitude;\r\n            if (sameLocation) {\r\n                return;\r\n            }\r\n            this.obstructionPolygons = {};\r\n            this.roofPolygons = {};\r\n            this.selectedPolygon = null;\r\n            this.hoveredPolygon = null;\r\n            this.canvasElement.getContext(\"2d\")?.clearRect(\r\n                0,\r\n                0,\r\n                this.canvasElement.width,\r\n                this.canvasElement.height,\r\n            );\r\n            this.polygonCtx?.clearRect(\r\n                0,\r\n                0,\r\n                this.polygonCanvas.width,\r\n                this.polygonCanvas.height,\r\n            );\r\n            this.rgbTiff = null;\r\n        }\r\n        this.buildingInsights = await fetchSolarData(\r\n            state.latitude,\r\n            state.longitude,\r\n            this.apiKey,\r\n        );\r\n        if (!this.buildingInsights) {\r\n            alert(\"No building insights found. Please enter them manually.\");\r\n        }\r\n\r\n        // If on mobile, automatically calculate panels using Google API data\r\n        if (state.isMobile && this.buildingInsights) {\r\n            const maxPanels =\r\n                this.buildingInsights.solarPotential.maxArrayPanelsCount;\r\n            const approximatedPanels = Math.floor(maxPanels / 3); // Use one third of max panels\r\n\r\n            const positionedPanels = Array(approximatedPanels).fill(null)\r\n                .map((_, __) => ({\r\n                    panel: this.solarPanel,\r\n                    pixelPosition: {\r\n                        x: -1,\r\n                        y: -1,\r\n                    },\r\n                    horizontal: true,\r\n                    rotation: 0,\r\n                }));\r\n\r\n            this.roofPolygonsSolarPanels = {\r\n                ...this.roofPolygonsSolarPanels,\r\n                [\"mobile-panels\"]: {\r\n                    positionedPanels,\r\n                    sunniness:\r\n                        this.buildingInsights.solarPotential.buildingStats\r\n                            .sunshineQuantiles[5] ?? DEFAULT_SUNNINESS,\r\n                },\r\n            };\r\n        }\r\n    }\r\n\r\n    async getBuildingImages() {\r\n        if (!state.latitude || !state.longitude) {\r\n            return;\r\n        }\r\n        if (this.buildingInsights) {\r\n            const sameLocation =\r\n                this.buildingInsights.center.latitude === state.latitude &&\r\n                this.buildingInsights.center.longitude === state.longitude;\r\n            if (sameLocation) {\r\n                return;\r\n            }\r\n        }\r\n        this.rgbTiff = await getBuildingImages(\r\n            state.latitude,\r\n            state.longitude,\r\n            this.apiKey,\r\n            state.radiusMeters,\r\n        );\r\n        this.pixelInMeters = getPixelInMeters(this.rgbTiff);\r\n        this.loadingState = \"loaded\";\r\n    }\r\n\r\n    private convertToCanvasCoordinates(event: MouseEvent): Point {\r\n        const rect = this.polygonCanvas.getBoundingClientRect();\r\n        const siteX = event.clientX - rect.left;\r\n        const siteY = event.clientY - rect.top;\r\n        return {\r\n            x: siteX / (rect.right - rect.left) * this.canvasElement.width,\r\n            y: siteY / (rect.bottom - rect.top) * this.canvasElement.height,\r\n        };\r\n    }\r\n\r\n    @Watch(\"rgbTiff\")\r\n    @Watch(\"buildingInsights\")\r\n    @Watch(\"canvasElement\")\r\n    async drawMap() {\r\n        if (\r\n            !this.canvasElement || !this.rgbTiff || !this.buildingInsights\r\n        ) return;\r\n\r\n        this.sizeCanvas(this.rgbTiff.width, this.rgbTiff.height);\r\n\r\n        renderCombinedWithZoom({\r\n            rgb: this.rgbTiff,\r\n            zoom: this.zoom,\r\n            canvas: this.canvasElement,\r\n        });\r\n    }\r\n\r\n    @Listen(\"mousemove\", { target: \"document\" })\r\n    handleMouseMove(event: MouseEvent) {\r\n        if (state.isMobile) return; // Prevent interactions on mobile\r\n        if (!this.polygonCanvas || !this.polygonCtx) return;\r\n\r\n        // translate the website pixel coordinates to the canvas coordinates\r\n        const { x, y } = this.convertToCanvasCoordinates(event);\r\n        this.mousePoint = { x, y };\r\n\r\n        const currentPolygon = this.getCurrentPolygon();\r\n\r\n        if (this.currentTool.name === \"markRoofEdge\") {\r\n            let distances = [];\r\n            for (let i = 0; i < currentPolygon?.points.length; i++) {\r\n                const pointA = currentPolygon?.points[i];\r\n                const pointB = currentPolygon\r\n                    ?.points[(i + 1) % currentPolygon?.points.length];\r\n                const distanceA = Math.sqrt(\r\n                    Math.pow(x - pointA.x, 2) + Math.pow(y - pointA.y, 2),\r\n                );\r\n                const distanceB = Math.sqrt(\r\n                    Math.pow(x - pointB.x, 2) + Math.pow(y - pointB.y, 2),\r\n                );\r\n                const edgeLength = Math.sqrt(\r\n                    Math.pow(pointA.x - pointB.x, 2) +\r\n                        Math.pow(pointA.y - pointB.y, 2),\r\n                );\r\n                distances.push({\r\n                    dist: distanceA + distanceB - edgeLength,\r\n                    edge: { pointA, pointB },\r\n                });\r\n            }\r\n            const closestEdge = distances.sort((a, b) => a.dist - b.dist)[0];\r\n            if (closestEdge && (closestEdge.dist < 10)) {\r\n                this.highlightedEdge = closestEdge.edge;\r\n            }\r\n        }\r\n\r\n        // Check for point hover\r\n        const newHoveredPointIndex = currentPolygon?.points.findIndex(\r\n            (point) => {\r\n                const distance = Math.sqrt(\r\n                    Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2),\r\n                );\r\n                return distance < 10;\r\n            },\r\n        );\r\n\r\n        // Check for polygon hover\r\n        let newHoveredPolygon = null;\r\n        for (const polygon of Object.values(this.obstructionPolygons)) {\r\n            if (isPointInPolygon({ x, y }, polygon)) {\r\n                newHoveredPolygon = { _id: polygon._id, type: \"obstruction\" };\r\n                break;\r\n            }\r\n        }\r\n        // obstruction polygons get priority\r\n        if (!newHoveredPolygon) {\r\n            for (const polygon of Object.values(this.roofPolygons)) {\r\n                if (isPointInPolygon({ x, y }, polygon)) {\r\n                    newHoveredPolygon = { _id: polygon._id, type: \"roof\" };\r\n                    break;\r\n                }\r\n            }\r\n        }\r\n\r\n        // Only redraw if hover state changed\r\n        if (\r\n            this.hoveredPolygon ||\r\n            newHoveredPointIndex !== this.hoveredPointIndex ||\r\n            JSON.stringify(newHoveredPolygon) !==\r\n                JSON.stringify(this.hoveredPolygon)\r\n        ) {\r\n            this.hoveredPointIndex = newHoveredPointIndex;\r\n            this.hoveredPolygon = newHoveredPolygon;\r\n            this.drawPolygons();\r\n        }\r\n\r\n        // Handle dragging\r\n        if (\r\n            this.draggedPointIndex !== null && currentPolygon &&\r\n            this.currentTool.name === \"move\"\r\n        ) {\r\n            currentPolygon.points[this.draggedPointIndex] = { x, y };\r\n            // Recalculate area if this is a roof polygon\r\n            if (currentPolygon.type === \"roof\" && currentPolygon.closed) {\r\n                const metersInPixels = 1 / this.pixelInMeters;\r\n                const area = calculatePolygonArea(currentPolygon.points) /\r\n                    (metersInPixels * metersInPixels);\r\n                currentPolygon.details.area = area;\r\n            }\r\n            this.drawPolygons();\r\n        }\r\n\r\n        if (this.shiftKeyPressed) {\r\n            this.drawPolygons();\r\n        }\r\n    }\r\n\r\n    private drawPolygons() {\r\n        if (!this.polygonCanvas || !this.polygonCtx) return;\r\n\r\n        // Clear the canvas and redraw the map\r\n        this.polygonCtx.clearRect(\r\n            0,\r\n            0,\r\n            this.polygonCanvas.width,\r\n            this.polygonCanvas.height,\r\n        );\r\n\r\n        // draw roof polygons\r\n        for (const polygon of Object.values(this.roofPolygons)) {\r\n            const fillColor = getFillColor(\r\n                this.selectedPolygon,\r\n                this.hoveredPolygon,\r\n                polygon._id,\r\n                polygon,\r\n                this.config,\r\n            );\r\n\r\n            drawPolygon({\r\n                polygonCtx: this.polygonCtx,\r\n                polygonCanvas: this.polygonCanvas,\r\n                polygon,\r\n                strokeColor: polygon.closed\r\n                    ? this.config.closedRoofColor\r\n                    : this.config.openRoofColor,\r\n                fillColor,\r\n                pixelInMeters: this.pixelInMeters,\r\n                shiftKeyPressed: this.shiftKeyPressed,\r\n                mousePoint: this.mousePoint,\r\n                highlightColor: this.config.highlightColor,\r\n                highlightedEdge: this.highlightedEdge,\r\n            });\r\n\r\n            const solarPanels = this.roofPolygonsSolarPanels[polygon._id];\r\n            const convertedSolarPanel: SolarPanelType = {\r\n                ...this.solarPanel,\r\n                widthMeters: this.solarPanel.widthMeters / this.pixelInMeters,\r\n                heightMeters: this.solarPanel.heightMeters / this.pixelInMeters,\r\n            };\r\n            if (solarPanels) {\r\n                for (const panel of solarPanels.positionedPanels) {\r\n                    renderSolarPanel(\r\n                        panel,\r\n                        this.polygonCtx,\r\n                        convertedSolarPanel.widthMeters,\r\n                        convertedSolarPanel.heightMeters,\r\n                        polygon.details?.azimuth,\r\n                        polygon.details?.pitch,\r\n                    );\r\n                }\r\n            }\r\n        }\r\n\r\n        // draw obstruction polygons\r\n        for (const polygon of Object.values(this.obstructionPolygons)) {\r\n            const fillColor = getFillColor(\r\n                this.selectedPolygon,\r\n                this.hoveredPolygon,\r\n                polygon._id,\r\n                polygon,\r\n                this.config,\r\n            );\r\n\r\n            drawPolygon({\r\n                polygonCtx: this.polygonCtx,\r\n                polygonCanvas: this.polygonCanvas,\r\n                polygon,\r\n                pixelInMeters: this.pixelInMeters,\r\n                shiftKeyPressed: this.shiftKeyPressed,\r\n                mousePoint: this.mousePoint,\r\n                strokeColor: polygon.closed\r\n                    ? this.config.closedObstructionColor\r\n                    : this.config.openObstructionColor,\r\n                fillColor,\r\n                highlightColor: this.config.highlightColor,\r\n            });\r\n        }\r\n    }\r\n\r\n    private deletePolygon(_id: string) {\r\n        if (this.selectedPolygon?._id === _id) {\r\n            this.selectedPolygon = null;\r\n        }\r\n        if (this.roofPolygons[_id]) {\r\n            delete this.roofPolygons[_id];\r\n            delete this.roofPolygonsSolarPanels[_id];\r\n        }\r\n        if (this.obstructionPolygons[_id]) {\r\n            delete this.obstructionPolygons[_id];\r\n        }\r\n    }\r\n\r\n    @Listen(\"keydown\", { target: \"document\" })\r\n    handleKeyDown(event: KeyboardEvent) {\r\n        if (event.target instanceof HTMLInputElement) {\r\n            return;\r\n        }\r\n        // Handle shift key for perpendicular points\r\n        if (event.shiftKey && !this.shiftKeyPressed) {\r\n            this.shiftKeyPressed = true;\r\n            this.drawPolygons();\r\n            return;\r\n        }\r\n        if (event.altKey && !this.altKeyPressed) {\r\n            this.altKeyPressed = true;\r\n            return;\r\n        }\r\n        if (\r\n            (event.key === \"Delete\" || event.key === \"Backspace\") &&\r\n            this.selectedPolygon\r\n        ) {\r\n            const currentPolygon = this.getCurrentPolygon();\r\n            if (currentPolygon.closed) {\r\n                this.deletePolygon(currentPolygon._id);\r\n                this.drawPolygons();\r\n                return;\r\n            }\r\n            currentPolygon.points.pop();\r\n            this.drawPolygons();\r\n            return;\r\n        }\r\n\r\n        // Handle tool selection shortcuts\r\n        const pressedKey = event.key.toLowerCase();\r\n        const tool = tools.find((t) =>\r\n            t.keyboardShortcut?.toLowerCase() === pressedKey\r\n        );\r\n        if (tool) {\r\n            this.currentTool = tool;\r\n        }\r\n    }\r\n\r\n    @Listen(\"keyup\", { target: \"document\" })\r\n    handleKeyUp(event: KeyboardEvent) {\r\n        if (!event.shiftKey && this.shiftKeyPressed) {\r\n            this.shiftKeyPressed = false;\r\n            this.drawPolygons();\r\n        }\r\n        if (!event.altKey && this.altKeyPressed) {\r\n            this.altKeyPressed = false;\r\n        }\r\n    }\r\n\r\n    @Listen(\"mousedown\", { target: \"document\" })\r\n    handleMouseDown(event: MouseEvent) {\r\n        if (state.isMobile) return; // Prevent interactions on mobile\r\n        if (!this.polygonCanvas || !this.polygonCtx) return;\r\n        if (!this.polygonCanvas.contains(event.target as Node)) return;\r\n\r\n        let { x, y } = this.convertToCanvasCoordinates(event);\r\n\r\n        if (this.currentTool.name === \"markRoofEdge\") {\r\n            const x = this.highlightedEdge?.pointA.x -\r\n                this.highlightedEdge?.pointB.x;\r\n            const y = this.highlightedEdge?.pointA.y -\r\n                this.highlightedEdge?.pointB.y;\r\n            const azimuth = Math.atan2(-x, y) * (180 / Math.PI);\r\n            this.handleAzimuthChange({\r\n                target: {\r\n                    value: azimuth,\r\n                },\r\n            } as unknown as Event);\r\n            return;\r\n        }\r\n        if (this.currentTool.name === \"delete\") {\r\n            if (!this.hoveredPolygon) {\r\n                return;\r\n            }\r\n            const { _id, type } = this.hoveredPolygon;\r\n            if (type === \"roof\") {\r\n                delete this.roofPolygons[_id];\r\n                delete this.roofPolygonsSolarPanels[_id];\r\n            } else if (type === \"obstruction\") {\r\n                delete this.obstructionPolygons[_id];\r\n            }\r\n            this.hoveredPolygon = null;\r\n            if (this.selectedPolygon?._id === _id) {\r\n                this.selectedPolygon = null;\r\n            }\r\n            this.drawPolygons();\r\n            return;\r\n        }\r\n        if (this.currentTool.name === \"move\") {\r\n            // Check if we're clicking on a point of the selected polygon\r\n            if (this.selectedPolygon) {\r\n                const currentPolygon = this.getCurrentPolygon();\r\n                const pointIndex = currentPolygon?.points.findIndex((point) => {\r\n                    const distance = Math.sqrt(\r\n                        Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2),\r\n                    );\r\n                    return distance < 10;\r\n                });\r\n                if (pointIndex !== undefined && pointIndex !== -1) {\r\n                    this.draggedPointIndex = pointIndex;\r\n                    return;\r\n                }\r\n\r\n                if (this.hoveredPolygon) {\r\n                    this.selectedPolygon = this.hoveredPolygon;\r\n                    return;\r\n                }\r\n            }\r\n            this.selectedPolygon = null;\r\n            this.drawPolygons();\r\n            return;\r\n        }\r\n\r\n        if (!this.selectedPolygon || this.getCurrentPolygon()?.closed) {\r\n            // no polygon is active, create a new one\r\n            const newPolygon: Polygon = {\r\n                _id: uuidv4(),\r\n                points: [{ x, y }],\r\n                type: this.currentTool.name,\r\n                closed: false,\r\n            };\r\n            let _id;\r\n            if (this.currentTool.name === \"roof\") {\r\n                this.roofPolygons = {\r\n                    ...this.roofPolygons,\r\n                    [newPolygon._id]: newPolygon,\r\n                };\r\n                _id = newPolygon._id;\r\n            } else if (this.currentTool.name === \"obstruction\") {\r\n                this.obstructionPolygons = {\r\n                    ...this.obstructionPolygons,\r\n                    [newPolygon._id]: newPolygon,\r\n                };\r\n                _id = newPolygon._id;\r\n            }\r\n            this.selectedPolygon = { _id, type: this.currentTool.name };\r\n            this.drawPolygons();\r\n            return;\r\n        }\r\n\r\n        const { _id, type } = this.selectedPolygon;\r\n        const currentPolygon = type === \"roof\"\r\n            ? this.roofPolygons[_id]\r\n            : this.obstructionPolygons[_id];\r\n\r\n        if (currentPolygon.closed) {\r\n            return;\r\n        }\r\n\r\n        // If we have at least one point, check if we're clicking near the first point\r\n        if (currentPolygon.points.length > 2) {\r\n            const firstPoint = currentPolygon.points[0];\r\n            const distance = Math.sqrt(\r\n                Math.pow(x - firstPoint.x, 2) + Math.pow(y - firstPoint.y, 2),\r\n            );\r\n\r\n            if (distance < 10) {\r\n                this.closePolygon();\r\n                return;\r\n            }\r\n        }\r\n\r\n        // Handle shift key for perpendicular points\r\n        if (event.shiftKey && currentPolygon?.points.length >= 2) {\r\n            const projectedPoint = projectPointPerpendicularToLine({\r\n                x,\r\n                y,\r\n                lastPoint:\r\n                    currentPolygon.points[currentPolygon.points.length - 1],\r\n                secondLastPoint:\r\n                    currentPolygon.points[currentPolygon.points.length - 2],\r\n            });\r\n            x = projectedPoint.x;\r\n            y = projectedPoint.y;\r\n        }\r\n\r\n        currentPolygon.points = [...currentPolygon.points, { x, y }];\r\n        this.drawPolygons();\r\n    }\r\n\r\n    @Listen(\"mouseup\", { target: \"document\" })\r\n    handleMouseUp() {\r\n        this.draggedPointIndex = null;\r\n    }\r\n\r\n    private closePolygon() {\r\n        const currentPolygon = this.getCurrentPolygon();\r\n        if (\r\n            currentPolygon.points.length >= 3 &&\r\n            (this.currentTool.name === \"roof\" ||\r\n                this.currentTool.name === \"obstruction\")\r\n        ) {\r\n            currentPolygon.closed = true;\r\n        }\r\n\r\n        if (currentPolygon.type === \"roof\") {\r\n            // Calculate basic polygon details\r\n            const metersInPixels = 1 / this.pixelInMeters;\r\n            const area = calculatePolygonArea(currentPolygon.points) /\r\n                (metersInPixels * metersInPixels);\r\n            const bestMatch = getBestFittingRoofSegment(\r\n                currentPolygon,\r\n                this.buildingInsights?.solarPotential.roofSegmentStats,\r\n                this.rgbTiff.bounds,\r\n                this.canvasElement,\r\n            );\r\n\r\n            if (bestMatch) {\r\n                currentPolygon.details = {\r\n                    area,\r\n                    azimuth: bestMatch.azimuthDegrees,\r\n                    pitch: bestMatch.pitchDegrees,\r\n                };\r\n            } else {\r\n                currentPolygon.details = {\r\n                    area,\r\n                    azimuth: 0,\r\n                    pitch: 0,\r\n                };\r\n            }\r\n\r\n            this.scrollToCanvas();\r\n        }\r\n\r\n        this.drawPolygons();\r\n        this.currentTool = moveTool;\r\n    }\r\n\r\n    private calculateSolarPanels() {\r\n        const currentPolygon = this.getCurrentPolygon();\r\n\r\n        if (!currentPolygon.details) {\r\n            return;\r\n        }\r\n\r\n        if (this.roofPolygonsSolarPanels[currentPolygon._id]) {\r\n            delete this.roofPolygonsSolarPanels[currentPolygon._id];\r\n        }\r\n\r\n        const convertedSolarPanel: SolarPanelType = {\r\n            ...this.solarPanel,\r\n            widthMeters: this.solarPanel.widthMeters / this.pixelInMeters,\r\n            heightMeters: this.solarPanel.heightMeters / this.pixelInMeters,\r\n        };\r\n        const inset = BORDER_INSET / this.pixelInMeters;\r\n        const solarPanels = getOptimalSolarPositionFully(\r\n            currentPolygon,\r\n            Object.values(this.obstructionPolygons),\r\n            convertedSolarPanel,\r\n            currentPolygon.details?.azimuth,\r\n            inset,\r\n            currentPolygon.details?.pitch,\r\n        );\r\n        this.roofPolygonsSolarPanels = {\r\n            ...this.roofPolygonsSolarPanels,\r\n            [currentPolygon._id]: {\r\n                positionedPanels: solarPanels,\r\n                sunniness: currentPolygon.details?.assignedRoofStats?.stats\r\n                    .sunshineQuantiles[5] ??\r\n                    this.buildingInsights.solarPotential.buildingStats\r\n                        .sunshineQuantiles[5] ??\r\n                    DEFAULT_SUNNINESS,\r\n            },\r\n        };\r\n        this.drawPolygons();\r\n    }\r\n\r\n    private handlePitchChange(event: Event) {\r\n        const target = event.target as HTMLInputElement;\r\n        const pitch = parseFloat(target.value);\r\n        const currentPolygon = this.getCurrentPolygon();\r\n        if (currentPolygon) {\r\n            this.roofPolygons[currentPolygon._id].details.pitch = pitch;\r\n        }\r\n        if (\r\n            currentPolygon.type === \"roof\" &&\r\n            this.roofPolygonsSolarPanels[currentPolygon._id]\r\n        ) {\r\n            this.calculateSolarPanels();\r\n            return;\r\n        }\r\n    }\r\n\r\n    private handleAzimuthChange(event: Event) {\r\n        const target = event.target as HTMLInputElement;\r\n        const azimuth = parseFloat(target.value);\r\n        const currentPolygon = this.getCurrentPolygon();\r\n        if (currentPolygon) {\r\n            this.roofPolygons[currentPolygon._id].details.azimuth = azimuth;\r\n        }\r\n        if (\r\n            currentPolygon.type === \"roof\" &&\r\n            this.roofPolygonsSolarPanels[currentPolygon._id]\r\n        ) {\r\n            this.calculateSolarPanels();\r\n            return;\r\n        }\r\n    }\r\n\r\n    private handleToolSelect(tool: Tool) {\r\n        this.currentTool = tool;\r\n    }\r\n\r\n    private scrollToCanvas() {\r\n        const canvasElement = this.el.querySelector(\"#map-draw-canvas\");\r\n        if (canvasElement) {\r\n            canvasElement.scrollIntoView({ behavior: \"smooth\" });\r\n        }\r\n    }\r\n\r\n    private handleSettingsClick = () => {\r\n        this.showSettings = true;\r\n    };\r\n\r\n    private handleSettingsClose = () => {\r\n        this.showSettings = false;\r\n    };\r\n\r\n    private handleSettingsSave = (event: CustomEvent<Settings>) => {\r\n        state.settings = event.detail;\r\n        state.settingsVersion++;\r\n    };\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        const currentPolygon = this.getCurrentPolygon();\r\n        return (\r\n            <div\r\n                class=\"flex flex-col justify-center items-center w-full h-full gap-4\"\r\n                id=\"map-draw\"\r\n            >\r\n                {this.showInstructions && !state.isMobile && (\r\n                    <div class=\"w-full rounded-4xl p-4 bg-white\">\r\n                        {t.mapDraw.instructions.parts.roof}{\" \"}\r\n                        <button\r\n                            class=\"inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors\"\r\n                            onClick={() => this.handleToolSelect(roofTool)}\r\n                        >\r\n                            <icon-selector name=\"house\" inline={true} />\r\n                        </button>{\" \"}\r\n                        {t.mapDraw.instructions.parts.obstruction}{\" \"}\r\n                        <button\r\n                            class=\"inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors\"\r\n                            onClick={() =>\r\n                                this.handleToolSelect(obstructionTool)}\r\n                        >\r\n                            <icon-selector name=\"octagon-minus\" inline={true} />\r\n                        </button>{\" \"}\r\n                        {t.mapDraw.instructions.parts.delete}{\" \"}\r\n                        <button\r\n                            class=\"inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors\"\r\n                            onClick={() => this.handleToolSelect(deleteTool)}\r\n                        >\r\n                            <icon-selector name=\"eraser\" inline={true} />\r\n                        </button>{\" \"}\r\n                        {t.mapDraw.instructions.parts.move}{\" \"}\r\n                        <button\r\n                            class=\"inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors\"\r\n                            onClick={() => this.handleToolSelect(moveTool)}\r\n                        >\r\n                            <icon-selector name=\"move\" inline={true} />\r\n                        </button>{\" \"}\r\n                        {t.mapDraw.instructions.parts.end}\r\n                    </div>\r\n                )}\r\n                <div class=\"w-full flex flex-row justify-between items-center\">\r\n                    {!state.isMobile && (this.showInstructions\r\n                        ? (\r\n                            <button\r\n                                class=\"px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4\"\r\n                                onClick={() => this.showInstructions = false}\r\n                            >\r\n                                {t.mapDraw.instructions.hide}\r\n                            </button>\r\n                        )\r\n                        : (\r\n                            <button\r\n                                class=\"px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4\"\r\n                                onClick={() => this.showInstructions = true}\r\n                            >\r\n                                {t.mapDraw.instructions.show}\r\n                            </button>\r\n                        ))}\r\n                    <button\r\n                        class=\"flex items-center gap-2 bg-white p-2 rounded-4xl hover:bg-gray-300\"\r\n                        onClick={this.handleSettingsClick}\r\n                    >\r\n                        <settings-icon />\r\n                    </button>\r\n                </div>\r\n                <div class=\"w-full\">\r\n                    {!state.isMobile && (\r\n                        <tool-box\r\n                            currentTool={this.currentTool}\r\n                            onToolSelect={(tool) => this.handleToolSelect(tool)}\r\n                        />\r\n                    )}\r\n                </div>\r\n                {this.loadingState === \"empty\" && (\r\n                    <div class=\"w-full\">\r\n                        <p\r\n                            class=\"text-white text-center flex items-center justify-center rounded-4xl p-4 w-full\"\r\n                            style={{\r\n                                backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n                            }}\r\n                        >\r\n                            {t.mapDraw.noAddressSelected}\r\n                        </p>\r\n                    </div>\r\n                )}\r\n                {(state.latitude && state.longitude &&\r\n                    this.loadingState === \"loading\") && (\r\n                    <div class=\"flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl\">\r\n                        <div class=\"animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]\">\r\n                        </div>\r\n                    </div>\r\n                )}\r\n                <div class=\"flex items-start justify-center h-full w-full bg-[#f3ebda] rounded-4xl\">\r\n                    <div\r\n                        class=\"relative h-full flex items-center justify-center w-full rounded-4xl bg-[#271200]\"\r\n                        style={{\r\n                            aspectRatio: this.rgbTiff\r\n                                ? `${this.rgbTiff.width}/${this.rgbTiff.height}`\r\n                                : \"1/1\",\r\n                        }}\r\n                    >\r\n                        <canvas\r\n                            ref={(el) => this.canvasElement = el}\r\n                            class=\"absolute top-0 left-0 w-full h-full rounded-4xl\"\r\n                            id=\"map-draw-canvas\"\r\n                            style={{\r\n                                cursor: this.currentTool.cursor,\r\n                            }}\r\n                        >\r\n                        </canvas>\r\n                        <canvas\r\n                            ref={(el) => this.polygonCanvas = el}\r\n                            class=\"absolute top-0 left-0 w-full h-full rounded-4xl\"\r\n                            style={{\r\n                                cursor: this.currentTool.cursor,\r\n                            }}\r\n                        >\r\n                        </canvas>\r\n                        {currentPolygon?.details && (\r\n                            <button\r\n                                class=\"absolute bottom-4 right-4 px-4 py-2 bg-[#f3ebda] rounded-4xl hover:bg-[#ffffff] text-[#271200] transition-colors duration-200 z-10 text-xs\"\r\n                                onClick={() => this.calculateSolarPanels()}\r\n                            >\r\n                                {t.mapDraw.calculateSolarPanels}\r\n                            </button>\r\n                        )}\r\n                    </div>\r\n                </div>\r\n                {/* {currentPolygon?.closed && ( */}\r\n                <div class=\"w-full\">\r\n                    <polygon-buttons\r\n                        calculateSolarPanels={() => this.calculateSolarPanels()}\r\n                        selectEdgeTool={() =>\r\n                            this.handleToolSelect(markRoofEdgeTool)}\r\n                    />\r\n                </div>\r\n                {/* )} */}\r\n                {!state.isMobile && (\r\n                    <div class=\"w-full\">\r\n                        <polygon-information\r\n                            currentPolygon={currentPolygon}\r\n                            positionedPanels={currentPolygon\r\n                                ? this\r\n                                    .roofPolygonsSolarPanels[currentPolygon._id]\r\n                                    ?.positionedPanels\r\n                                : undefined}\r\n                            handleAzimuthChange={(event) =>\r\n                                this.handleAzimuthChange(event)}\r\n                            handlePitchChange={(event) =>\r\n                                this.handlePitchChange(event)}\r\n                            calculateSolarPanels={() =>\r\n                                this.calculateSolarPanels()}\r\n                        />\r\n                    </div>\r\n                )}\r\n                <div class=\"w-full\">\r\n                    <solar-system-form\r\n                        systemConfigs={this.roofPolygonsSolarPanels}\r\n                        roofPolygons={this.roofPolygons}\r\n                        obstructionPolygons={this.obstructionPolygons}\r\n                    />\r\n                </div>\r\n                {this.showSettings && (\r\n                    <settings-modal\r\n                        settings={state.settings}\r\n                        onClose={this.handleSettingsClose}\r\n                        onSave={this.handleSettingsSave}\r\n                    />\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, Element, h, Prop, State } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { state } from \"../../store\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\n\r\n@Component({\r\n    tag: \"map-selector\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: true,\r\n})\r\nexport class MapSelector {\r\n    @Element()\r\n    el!: HTMLElement;\r\n\r\n    @Prop()\r\n    apiKey: string = \"\";\r\n    @Prop()\r\n    language: Language = \"en\";\r\n\r\n    @State()\r\n    isLoaded: boolean = false;\r\n    @State()\r\n    autocomplete: google.maps.places.Autocomplete | null = null;\r\n    @State()\r\n    map: google.maps.Map | null = null;\r\n    @State()\r\n    marker: google.maps.marker.AdvancedMarkerElement | null = null;\r\n    @State()\r\n    circle: google.maps.Circle | null = null;\r\n    @State()\r\n    radius: number = 20;\r\n    @State()\r\n    latitude: number | null = null;\r\n    @State()\r\n    longitude: number | null = null;\r\n\r\n    private inputElement?: HTMLInputElement;\r\n    private mapElement?: HTMLDivElement;\r\n\r\n    componentWillLoad() {\r\n        this.loadGoogleMapsScript();\r\n    }\r\n\r\n    private async loadGoogleMapsScript() {\r\n        try {\r\n            const loader = new Loader({\r\n                apiKey: this.apiKey,\r\n                libraries: [\"places\", \"maps\", \"marker\"],\r\n            });\r\n\r\n            const [places, maps, _] = await Promise.all([\r\n                loader.importLibrary(\"places\"),\r\n                loader.importLibrary(\"maps\"),\r\n                loader.importLibrary(\"marker\"),\r\n            ]);\r\n\r\n            this.isLoaded = true;\r\n            this.initializeAutocomplete(places);\r\n            this.initializeMap(maps);\r\n        } catch (error) {\r\n            console.error(\"Error loading Google Maps: \", error);\r\n        }\r\n    }\r\n\r\n    private initializeAutocomplete(places: google.maps.PlacesLibrary) {\r\n        if (!this.inputElement || !this.isLoaded) return;\r\n        this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n        this.autocomplete.addListener(\"place_changed\", () => {\r\n            const place = this.autocomplete?.getPlace();\r\n            if (place?.geometry?.location) {\r\n                const lat = place.geometry.location.lat();\r\n                const lng = place.geometry.location.lng();\r\n\r\n                this.latitude = lat;\r\n                this.longitude = lng;\r\n\r\n                this.map?.setCenter({ lat, lng });\r\n                this.map?.setZoom(40);\r\n            }\r\n        });\r\n    }\r\n\r\n    private initializeMap(\r\n        maps: google.maps.MapsLibrary,\r\n    ) {\r\n        if (!this.mapElement || !this.isLoaded) return;\r\n\r\n        this.map = new maps.Map(this.mapElement, {\r\n            center: {\r\n                lat: state.latitude || 49.398531832926025,\r\n                lng: state.longitude || 8.671214102081551,\r\n            },\r\n            zoom: 15,\r\n            mapTypeControl: false,\r\n            streetViewControl: false,\r\n            mapTypeId: \"satellite\",\r\n            mapId: \"map\",\r\n            tilt: 0,\r\n        });\r\n        // this.updateMapLocation(state.latitude, state.longitude);\r\n\r\n        // Add click listener to map\r\n        this.map.addListener(\"click\", (e: google.maps.MapMouseEvent) => {\r\n            if (e.latLng) {\r\n                const lat = e.latLng.lat();\r\n                const lng = e.latLng.lng();\r\n\r\n                this.latitude = lat;\r\n                this.longitude = lng;\r\n\r\n                this.updateMapLocation(lat, lng);\r\n            }\r\n        });\r\n\r\n        // Initialize marker and circle if we have coordinates\r\n        if (state.latitude && state.longitude) {\r\n            this.updateMapLocation(state.latitude, state.longitude);\r\n        }\r\n    }\r\n\r\n    private updateMapLocation(lat: number, lng: number) {\r\n        if (!this.map) return;\r\n\r\n        // Update or create circle\r\n        if (this.circle) {\r\n            this.circle.setCenter({ lat, lng });\r\n        } else {\r\n            const circle = new google.maps.Circle({\r\n                strokeColor: \"#ffffff\",\r\n                strokeOpacity: 0.8,\r\n                strokeWeight: 2,\r\n                fillColor: \"rgba(255, 255, 255, 0.8)\",\r\n                fillOpacity: 0.35,\r\n                map: this.map,\r\n                center: { lat, lng },\r\n                radius: this.radius,\r\n            });\r\n            this.circle = circle;\r\n        }\r\n    }\r\n\r\n    private handleRadiusChange(e: Event) {\r\n        const value = parseFloat((e.target as HTMLInputElement).value);\r\n        this.radius = value;\r\n        if (this.circle) {\r\n            this.circle.setRadius(value);\r\n        }\r\n    }\r\n\r\n    private handleAcceptPosition() {\r\n        console.log(\r\n            \"Accepting position \",\r\n            this.latitude,\r\n            this.longitude,\r\n            this.radius,\r\n        );\r\n        if (this.latitude !== null && this.longitude !== null) {\r\n            state.latitude = this.latitude;\r\n            state.longitude = this.longitude;\r\n            state.radiusMeters = this.radius;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(this.language);\r\n        return (\r\n            <div class=\"map-selector flex flex-col gap-4 pb-4\">\r\n                <div class=\"relative\">\r\n                    <div class=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\r\n                        <search-icon />\r\n                    </div>\r\n                    <input\r\n                        ref={(el) => this.inputElement = el}\r\n                        type=\"text\"\r\n                        placeholder={t.solarExpert.searchPlaceholder}\r\n                        class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-4xl focus:ring-[#271200] bg-white\"\r\n                    />\r\n                </div>\r\n                <div\r\n                    class=\"w-full rounded-4xl p-4\"\r\n                    style={{\r\n                        backgroundColor: \"rgba(0, 0, 0, 0.1)\",\r\n                    }}\r\n                >\r\n                    {t.mapSelector.explanation}\r\n                </div>\r\n                <div class=\"flex items-center gap-4\">\r\n                    <label class=\"text-sm font-medium text-gray-700\">\r\n                        {t.mapSelector.radius}\r\n                    </label>\r\n                    <input\r\n                        type=\"range\"\r\n                        min=\"5\"\r\n                        max=\"100\"\r\n                        value={this.radius}\r\n                        onInput={(e) => this.handleRadiusChange(e)}\r\n                        class=\"w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white\"\r\n                    />\r\n                    <span class=\"text-sm text-gray-600\">{this.radius}m</span>\r\n                </div>\r\n\r\n                <div\r\n                    ref={(el) => this.mapElement = el}\r\n                    class=\"w-full h-[400px] rounded-4xl border border-gray-300\"\r\n                />\r\n\r\n                <button\r\n                    onClick={() => this.handleAcceptPosition()}\r\n                    class=\"w-full py-2 px-4 bg-[#271200] text-white rounded-4xl hover:bg-[#3a1b00] transition-colors\"\r\n                >\r\n                    {t.mapSelector.accept}\r\n                </button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"move-icon\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class MoveIcon {\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        return (\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width={this.size}\r\n                height={this.size}\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class={`lucide lucide-move-icon lucide-move ${\r\n                    this.inline ? \"inline-block\" : \"\"\r\n                }`}\r\n            >\r\n                <path d=\"M12 2v20\" />\r\n                <path d=\"m15 19-3 3-3-3\" />\r\n                <path d=\"m19 9 3 3-3 3\" />\r\n                <path d=\"M2 12h20\" />\r\n                <path d=\"m5 9-3 3 3 3\" />\r\n                <path d=\"m9 5 3-3 3 3\" />\r\n            </svg>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"octagon-minus-icon\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class OctagonMinusIcon {\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        return (\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width={this.size}\r\n                height={this.size}\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class={`lucide lucide-octagon-minus-icon lucide-octagon-minus ${\r\n                    this.inline ? \"inline-block\" : \"\"\r\n                }`}\r\n            >\r\n                <path d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\" />\r\n                <path d=\"M8 12h8\" />\r\n            </svg>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { state } from \"../../store\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\n\r\n@Component({\r\n    tag: \"polygon-buttons\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class PolygonButtons {\r\n    @Prop()\r\n    calculateSolarPanels: () => void;\r\n    @Prop()\r\n    selectEdgeTool: () => void;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        return (\r\n            <div class=\"flex w-full gap-2 justify-end\">\r\n                <button\r\n                    class=\"px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs bg-white\"\r\n                    onClick={() => this.selectEdgeTool()}\r\n                >\r\n                    {t.mapDraw.markRoofEdge}\r\n                </button>\r\n                <button\r\n                    class=\"px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs bg-[#ffffff] \"\r\n                    onClick={() => this.calculateSolarPanels()}\r\n                >\r\n                    {t.mapDraw.calculateSolarPanels}\r\n                </button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Polygon, SolarPanelSystemPart } from \"../../components\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { azimuthToCardinal } from \"../../utils/utils\";\r\n\r\n@Component({\r\n    tag: \"polygon-information\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: true,\r\n})\r\nexport class PolygonInformation {\r\n    @Prop()\r\n    currentPolygon: Polygon;\r\n    @Prop()\r\n    positionedPanels: SolarPanelSystemPart[] | undefined;\r\n    @Prop()\r\n    handleAzimuthChange: (event: Event) => void;\r\n    @Prop()\r\n    handlePitchChange: (event: Event) => void;\r\n    @Prop()\r\n    calculateSolarPanels: () => void;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        return (\r\n            <div class=\"flex gap-4 flex-row justify-center items-center w-full\">\r\n                <div class=\"w-full bg-[#f3ebda] rounded-4xl p-4\">\r\n                    <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n                        {t.mapDraw.information}\r\n                    </h3>\r\n                    {this.currentPolygon?.details\r\n                        ? (\r\n                            <div class=\"space-y-4\">\r\n                                <div>\r\n                                    <div class=\"grid grid-cols-2 gap-2\">\r\n                                        <div>\r\n                                            <h4 class=\"text-sm font-medium text-gray-600\">\r\n                                                {t.mapDraw.area}\r\n                                            </h4>\r\n                                            <p class=\"text-lg\">\r\n                                                {this.currentPolygon.details\r\n                                                    ?.area\r\n                                                    .toFixed(2)} m²\r\n                                            </p>\r\n                                        </div>\r\n                                        <div>\r\n                                            <div>\r\n                                                <h4 class=\"text-sm font-medium text-gray-600\">\r\n                                                    {t.mapDraw.panels}\r\n                                                </h4>\r\n                                                <p class=\"text-lg\">\r\n                                                    {this.positionedPanels\r\n                                                        ?.length ?? 0}\r\n                                                </p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div>\r\n                                    <h4 class=\"text-sm font-medium text-gray-600\">\r\n                                        {t.mapDraw.azimuth}\r\n                                    </h4>\r\n                                    <div class=\"flex gap-2 flex-row justify-start bg-white rounded-4xl p-2\">\r\n                                        <input\r\n                                            class=\"text-lg w-full\"\r\n                                            onKeyDown={(e) => {\r\n                                                if (e.key === \"Enter\") {\r\n                                                    this.handleAzimuthChange(\r\n                                                        e,\r\n                                                    );\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .blur();\r\n                                                }\r\n                                            }}\r\n                                            value={this.currentPolygon\r\n                                                .details\r\n                                                ?.azimuth}\r\n                                        />\r\n                                        ({azimuthToCardinal(\r\n                                            this.currentPolygon.details\r\n                                                ?.azimuth,\r\n                                        )})\r\n                                    </div>\r\n                                    <input\r\n                                        type=\"range\"\r\n                                        min=\"0\"\r\n                                        max=\"360\"\r\n                                        class=\"w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white\"\r\n                                        value={this.currentPolygon\r\n                                            .details?.azimuth}\r\n                                        onInput={(e) => {\r\n                                            const target = e\r\n                                                .target as HTMLInputElement;\r\n                                            const azimuth = parseFloat(\r\n                                                target.value,\r\n                                            );\r\n                                            this.currentPolygon.details\r\n                                                .azimuth = azimuth;\r\n                                            if (\r\n                                                this.currentPolygon\r\n                                                        .type ===\r\n                                                    \"roof\" &&\r\n                                                this.positionedPanels\r\n                                            ) {\r\n                                                this.calculateSolarPanels();\r\n                                            }\r\n                                        }}\r\n                                    />\r\n                                </div>\r\n                                <div>\r\n                                    <h4 class=\"text-sm font-medium text-gray-600 pl-2\">\r\n                                        {t.mapDraw.pitch}\r\n                                    </h4>\r\n                                    <div class=\"flex gap-2 flex-row justify-start bg-white rounded-4xl p-2\">\r\n                                        <input\r\n                                            class=\"text-lg w-full\"\r\n                                            onKeyDown={(e) => {\r\n                                                if (e.key === \"Enter\") {\r\n                                                    this.handlePitchChange(\r\n                                                        e,\r\n                                                    );\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .blur();\r\n                                                }\r\n                                            }}\r\n                                            value={this.currentPolygon\r\n                                                .details\r\n                                                ?.pitch}\r\n                                        />\r\n                                        °\r\n                                    </div>\r\n                                    <input\r\n                                        type=\"range\"\r\n                                        min=\"0\"\r\n                                        max=\"90\"\r\n                                        class=\"w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white\"\r\n                                        value={this.currentPolygon\r\n                                            .details?.pitch}\r\n                                        onInput={(e) => {\r\n                                            const target = e\r\n                                                .target as HTMLInputElement;\r\n                                            const pitch = parseFloat(\r\n                                                target.value,\r\n                                            );\r\n                                            this.currentPolygon.details\r\n                                                .pitch = pitch;\r\n                                            if (\r\n                                                this.currentPolygon\r\n                                                        .type ===\r\n                                                    \"roof\" &&\r\n                                                this.positionedPanels\r\n                                            ) {\r\n                                                this.calculateSolarPanels();\r\n                                            }\r\n                                        }}\r\n                                    />\r\n                                </div>\r\n                            </div>\r\n                        )\r\n                        : (\r\n                            <p class=\"text-gray-500 text-center\">\r\n                                {t.mapDraw.noPolygonSelected}\r\n                            </p>\r\n                        )}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"search-icon\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class SearchIcon {\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        return (\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width={this.size}\r\n                height={this.size}\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class={`lucide lucide-search-icon lucide-search ${\r\n                    this.inline ? \"inline-block\" : \"\"\r\n                }`}\r\n            >\r\n                <path d=\"m21 21-4.34-4.34\" />\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\" />\r\n            </svg>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"settings-icon\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class SettingsIcon {\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        return (\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width={this.size}\r\n                height={this.size}\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class={`lucide lucide-settings-icon lucide-settings ${\r\n                    this.inline ? \"inline-block\" : \"\"\r\n                }`}\r\n            >\r\n                <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\" />\r\n                <circle cx=\"12\" cy=\"12\" r=\"3\" />\r\n            </svg>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { Settings, state } from \"../../store\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Language } from \"../../types/lang\";\r\n\r\n@Component({\r\n    tag: \"settings-modal\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class SettingsModal {\r\n    @Prop()\r\n    settings: Settings;\r\n\r\n    @State()\r\n    private tempSettings: Settings;\r\n\r\n    @Event()\r\n    close: EventEmitter<void>;\r\n\r\n    @Event()\r\n    save: EventEmitter<Settings>;\r\n\r\n    componentWillLoad() {\r\n        this.tempSettings = { ...this.settings };\r\n    }\r\n\r\n    private handleClose = () => {\r\n        if (\r\n            JSON.stringify(this.tempSettings) !== JSON.stringify(this.settings)\r\n        ) {\r\n            if (\r\n                confirm(\r\n                    \"Are you sure you want to close without saving your changes?\",\r\n                )\r\n            ) {\r\n                this.close.emit();\r\n            }\r\n        } else {\r\n            this.close.emit();\r\n        }\r\n    };\r\n\r\n    private handleSave = () => {\r\n        this.save.emit(this.tempSettings);\r\n        this.close.emit();\r\n    };\r\n\r\n    private handleInputChange = (\r\n        key: keyof Settings,\r\n        value: number | Language,\r\n    ) => {\r\n        this.tempSettings = {\r\n            ...this.tempSettings,\r\n            [key]: value,\r\n        };\r\n    };\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        return (\r\n            <div class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\">\r\n                <div class=\"bg-[#f3ebda] rounded-4xl p-6 w-full max-w-md\">\r\n                    <div class=\"flex justify-between items-center mb-6\">\r\n                        <h2 class=\"text-xl font-semibold\">Settings</h2>\r\n                        <button\r\n                            class=\"p-2 hover:bg-gray-200 rounded-full transition-colors\"\r\n                            onClick={this.handleClose}\r\n                        >\r\n                            <svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"24\"\r\n                                height=\"24\"\r\n                                viewBox=\"0 0 24 24\"\r\n                                fill=\"none\"\r\n                                stroke=\"currentColor\"\r\n                                stroke-width=\"2\"\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                            >\r\n                                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n                                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <div class=\"space-y-4\">\r\n                        <div>\r\n                            <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                {t.settings.language}\r\n                            </label>\r\n                            <select\r\n                                class=\"w-full bg-white rounded-4xl p-2\"\r\n                                onInput={(e) =>\r\n                                    this.handleInputChange(\r\n                                        \"language\",\r\n                                        (e.target as HTMLSelectElement)\r\n                                            .value as Language,\r\n                                    )}\r\n                            >\r\n                                <option\r\n                                    value=\"en\"\r\n                                    selected={this.tempSettings.language ===\r\n                                        \"en\"}\r\n                                >\r\n                                    English\r\n                                </option>\r\n                                <option\r\n                                    value=\"es\"\r\n                                    selected={this.tempSettings.language ===\r\n                                        \"es\"}\r\n                                >\r\n                                    Español\r\n                                </option>\r\n                                <option\r\n                                    value=\"de\"\r\n                                    selected={this.tempSettings.language ===\r\n                                        \"de\"}\r\n                                >\r\n                                    Deutsch\r\n                                </option>\r\n                            </select>\r\n                        </div>\r\n\r\n                        <div>\r\n                            <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                {t.settings.rowSpacing}\r\n                            </label>\r\n                            <input\r\n                                type=\"number\"\r\n                                class=\"w-full bg-white rounded-4xl p-2\"\r\n                                value={this.tempSettings.rowSpacing}\r\n                                onInput={(e) =>\r\n                                    this.handleInputChange(\r\n                                        \"rowSpacing\",\r\n                                        parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        ),\r\n                                    )}\r\n                            />\r\n                        </div>\r\n\r\n                        <div>\r\n                            <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                {t.settings.columnSpacing}\r\n                            </label>\r\n                            <input\r\n                                type=\"number\"\r\n                                class=\"w-full bg-white rounded-4xl p-2\"\r\n                                value={this.tempSettings.columnSpacing}\r\n                                onInput={(e) =>\r\n                                    this.handleInputChange(\r\n                                        \"columnSpacing\",\r\n                                        parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        ),\r\n                                    )}\r\n                            />\r\n                        </div>\r\n\r\n                        <div>\r\n                            <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                {t.settings.borderInset}\r\n                            </label>\r\n                            <input\r\n                                type=\"number\"\r\n                                class=\"w-full bg-white rounded-4xl p-2\"\r\n                                value={this.tempSettings.borderInset}\r\n                                onInput={(e) =>\r\n                                    this.handleInputChange(\r\n                                        \"borderInset\",\r\n                                        parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        ),\r\n                                    )}\r\n                            />\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"flex justify-end gap-4 mt-6\">\r\n                        <button\r\n                            class=\"px-4 py-2 bg-gray-200 rounded-4xl hover:bg-gray-300 transition-colors\"\r\n                            onClick={this.handleClose}\r\n                        >\r\n                            Cancel\r\n                        </button>\r\n                        <button\r\n                            class=\"px-4 py-2 bg-[#271200] text-white rounded-4xl hover:bg-gray-500 transition-colors\"\r\n                            onClick={this.handleSave}\r\n                        >\r\n                            Save Changes\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, Element, Env, h, Prop, State } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"solar-expert\",\r\n    shadow: false,\r\n    styleUrl: \"../../output.css\",\r\n})\r\nexport class SolarExpert {\r\n    @Element()\r\n    el!: HTMLElement;\r\n\r\n    @Prop()\r\n    apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n    @Prop()\r\n    language: Language = \"en\";\r\n\r\n    @State()\r\n    latitude: number | null = 40.581614;\r\n    @State()\r\n    longitude: number | null = -4.128423;\r\n    @State()\r\n    isLoaded: boolean = false;\r\n    @State()\r\n    autocomplete: google.maps.places.Autocomplete | null = null;\r\n    @State()\r\n    place: google.maps.places.PlaceResult | null = null;\r\n    @State()\r\n    showMapSelector: boolean = false;\r\n\r\n    private inputElement?: HTMLInputElement;\r\n\r\n    componentWillLoad() {\r\n        state.isMobile =\r\n            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n                .test(navigator.userAgent) || window.innerWidth < 768;\r\n        this.loadGoogleMapsScript();\r\n        onChange(\"latitude\", () => {\r\n            if (this.showMapSelector) {\r\n                this.showMapSelector = false;\r\n                this.scrollToMapDraw();\r\n            }\r\n        });\r\n        state.settings.language = this.language;\r\n    }\r\n\r\n    private async loadGoogleMapsScript() {\r\n        try {\r\n            const loader = new Loader({\r\n                apiKey: this.apiKey,\r\n                libraries: [\"places\", \"maps\", \"marker\"],\r\n            });\r\n\r\n            const places = await loader.importLibrary(\"places\");\r\n            this.isLoaded = true;\r\n            this.initializeAutocomplete(places);\r\n        } catch (error) {\r\n            console.error(\"Error loading Google Maps: \", error);\r\n        }\r\n    }\r\n\r\n    private initializeAutocomplete(\r\n        places: google.maps.PlacesLibrary,\r\n    ) {\r\n        if (!this.inputElement || !this.isLoaded) return;\r\n        this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n        this.autocomplete.addListener(\"place_changed\", () => {\r\n            const place = this.autocomplete?.getPlace();\r\n            this.latitude = place?.geometry?.location?.lat() ?? 0;\r\n            this.longitude = place?.geometry?.location?.lng() ?? 0;\r\n            state.latitude = this.latitude;\r\n            state.longitude = this.longitude;\r\n\r\n            this.scrollToMapDraw();\r\n        });\r\n    }\r\n\r\n    private scrollToMapDraw() {\r\n        if (state.isMobile) {\r\n            const solarSystemFormElement = this.el.querySelector(\r\n                \"solar-system-form\",\r\n            );\r\n            if (solarSystemFormElement) {\r\n                solarSystemFormElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        } else {\r\n            const mapDrawElement = this.el.querySelector(\"map-draw\");\r\n            if (mapDrawElement) {\r\n                mapDrawElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        }\r\n    }\r\n\r\n    private handleChooseOnMap() {\r\n        this.showMapSelector = true;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(this.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col w-full h-full p-3 m-auto\"\r\n                id=\"solar-calculator\"\r\n            >\r\n                {this.showMapSelector\r\n                    ? (\r\n                        <map-selector\r\n                            api-key={this.apiKey}\r\n                            language={this.language}\r\n                        />\r\n                    )\r\n                    : (\r\n                        <>\r\n                            <div class=\"pb-3 flex flex-row gap-4 items-stretch w-full\">\r\n                                <div class=\"relative flex-3\">\r\n                                    <div class=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\r\n                                        <search-icon />\r\n                                    </div>\r\n                                    <input\r\n                                        ref={(el) => this.inputElement = el}\r\n                                        type=\"text\"\r\n                                        placeholder={t.solarExpert\r\n                                            .searchPlaceholder}\r\n                                        class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-4xl focus:ring-[#271200] bg-white h-full\"\r\n                                    />\r\n                                </div>\r\n                                <button\r\n                                    onClick={() => this.handleChooseOnMap()}\r\n                                    class=\"flex-1 pl-4 pr-4 py-2 border border-gray-300 bg-white rounded-4xl focus:ring-[#271200] hover:bg-[#271200] hover:text-white\"\r\n                                >\r\n                                    {t.mapSelector.chooseOnMap}\r\n                                </button>\r\n                            </div>\r\n                            <map-draw\r\n                                apiKey={this.apiKey}\r\n                            />\r\n                        </>\r\n                    )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop, State, Watch } from \"@stencil/core\";\r\n// import Chart from \"chart.js/auto\";\r\nimport { DEFAULT_SOLAR_PANEL_TYPE } from \"../../config\";\r\nimport { SolarPanelSystemPart } from \"../../utils/geometry/fitting\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Polygon } from \"../../types/shapes\";\r\nimport { state } from \"../../store\";\r\nimport { CONSUMPTION_PROFILES, SOLAR_RADIATION } from \"../../constants\";\r\n\r\n@Component({\r\n    tag: \"solar-system-form\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class SolarSystemForm {\r\n    @Prop()\r\n    systemConfigs: { [id: string]: SolarPanelSystemPart } = {};\r\n    @Prop()\r\n    roofPolygons: { [id: string]: Polygon } = {};\r\n    @Prop()\r\n    obstructionPolygons: { [id: string]: Polygon } = {};\r\n\r\n    @State()\r\n    householdConsumption: number = 3500;\r\n    @State()\r\n    consumptionProfile: \"mostly_at_home\" | \"mostly_away\" = \"mostly_at_home\";\r\n    @State()\r\n    electricityPrice: number = 0.3;\r\n    @State()\r\n    compensationRate: number = 0.07;\r\n    @State()\r\n    annualPriceIncrease: number = 2;\r\n    @State()\r\n    autonomy: number = 0;\r\n    @State()\r\n    costSavings: number = 0;\r\n    @State()\r\n    costSavings25Years: number = 0;\r\n    @State()\r\n    numberOfPanels: number = 5;\r\n    @State()\r\n    panelPeakPower: number = 0.4; // kW per panel\r\n    @State()\r\n    name: string = \"\";\r\n    @State()\r\n    email: string = \"\";\r\n    @State()\r\n    nameError: string = \"\";\r\n    @State()\r\n    emailError: string = \"\";\r\n    @State()\r\n    electricCar: boolean = false;\r\n    @State()\r\n    electricCarChargingTime: \"day\" | \"night\" = \"day\";\r\n    @State()\r\n    heatPump: number = 0;\r\n    @State()\r\n    battery: number = 0;\r\n\r\n    // private chart: Chart | null = null;\r\n    // private chartRef: HTMLCanvasElement | null = null;\r\n\r\n    @Watch(\"systemConfigs\")\r\n    updateSystemConfigs() {\r\n        if (Object.keys(this.systemConfigs).length === 0) {\r\n            this.numberOfPanels = 0;\r\n            return;\r\n        }\r\n        this.numberOfPanels = Object.keys(this.systemConfigs).reduce(\r\n            (acc, curr) =>\r\n                acc + this.systemConfigs[curr].positionedPanels.length,\r\n            0,\r\n        );\r\n\r\n        this.panelPeakPower =\r\n            Object.entries(this.systemConfigs)[0][1].positionedPanels[0].panel\r\n                .kWattPeak;\r\n\r\n        this.recalculate();\r\n        this.updateChart();\r\n    }\r\n\r\n    private recalculate() {\r\n        const data = CONSUMPTION_PROFILES[this.consumptionProfile];\r\n        const norm = data.reduce((acc, curr) => acc + curr, 0);\r\n\r\n        // Calculate heat pump consumption (0.05 kWh per m² per day)\r\n        const heatPumpDailyConsumption = this.heatPump * 0.05;\r\n        const heatPumpYearlyConsumption = heatPumpDailyConsumption * 365;\r\n\r\n        // Calculate electric car consumption (20 kWh per day)\r\n        const electricCarDailyConsumption = this.electricCar ? 20 : 0;\r\n        const electricCarYearlyConsumption = electricCarDailyConsumption * 365;\r\n\r\n        // Add heat pump and electric car consumption to total household consumption\r\n        const totalHouseholdConsumption = this.householdConsumption +\r\n            heatPumpYearlyConsumption + electricCarYearlyConsumption;\r\n\r\n        const peakKwh = this.numberOfPanels * this.panelPeakPower;\r\n        const production = SOLAR_RADIATION.map((radiation) =>\r\n            radiation * peakKwh\r\n        );\r\n        let energyUsageOfProduction = 0;\r\n        let soldEnergy = 0;\r\n        let batteryCharge = 0; // Current battery charge in kWh\r\n\r\n        // Calculate hourly electric car consumption\r\n        const hourlyCarConsumption = this.electricCar ? 20 / 24 : 0; // Distribute 20 kWh evenly across 24 hours\r\n\r\n        for (let i = 0; i < data.length; i++) {\r\n            // Add electric car consumption to the base consumption\r\n            let hourlyConsumption = data[i] * totalHouseholdConsumption / norm /\r\n                365;\r\n\r\n            // Add electric car consumption based on charging time preference\r\n            if (this.electricCar) {\r\n                if (\r\n                    this.electricCarChargingTime === \"day\" && i >= 6 && i <= 18\r\n                ) {\r\n                    hourlyConsumption += hourlyCarConsumption;\r\n                } else if (\r\n                    this.electricCarChargingTime === \"night\" &&\r\n                    (i < 6 || i > 18)\r\n                ) {\r\n                    hourlyConsumption += hourlyCarConsumption;\r\n                }\r\n            }\r\n\r\n            // Calculate energy difference for this hour\r\n            const energyDifference = production[i] - hourlyConsumption;\r\n\r\n            if (energyDifference > 0) {\r\n                // Excess production - try to store in battery first\r\n                const remainingBatteryCapacity = this.battery - batteryCharge;\r\n                const energyToStore = Math.min(\r\n                    energyDifference,\r\n                    remainingBatteryCapacity,\r\n                );\r\n\r\n                if (energyToStore > 0) {\r\n                    batteryCharge += energyToStore;\r\n                    energyUsageOfProduction += hourlyConsumption;\r\n                    soldEnergy += energyDifference - energyToStore;\r\n                } else {\r\n                    // Battery full, sell excess\r\n                    energyUsageOfProduction += hourlyConsumption;\r\n                    soldEnergy += energyDifference;\r\n                }\r\n            } else if (energyDifference < 0) {\r\n                // Production deficit - try to use battery\r\n                const energyNeeded = -energyDifference;\r\n                const energyFromBattery = Math.min(energyNeeded, batteryCharge);\r\n\r\n                if (energyFromBattery > 0) {\r\n                    batteryCharge -= energyFromBattery;\r\n                    energyUsageOfProduction += production[i] +\r\n                        energyFromBattery;\r\n                } else {\r\n                    // No battery power available\r\n                    energyUsageOfProduction += production[i];\r\n                }\r\n            } else {\r\n                // Production equals consumption\r\n                energyUsageOfProduction += hourlyConsumption;\r\n            }\r\n        }\r\n\r\n        // Calculate the cost savings\r\n        this.costSavings = soldEnergy * this.compensationRate * 365 +\r\n            energyUsageOfProduction * 365 * this.electricityPrice;\r\n\r\n        // Calculate 25-year savings with price increase\r\n        let totalSavings = 0;\r\n        let currentPrice = this.electricityPrice;\r\n        for (let year = 0; year < 25; year++) {\r\n            const yearlySavings = soldEnergy * this.compensationRate * 365 +\r\n                energyUsageOfProduction * 365 * currentPrice;\r\n            totalSavings += yearlySavings;\r\n            currentPrice *= 1 + this.annualPriceIncrease / 100;\r\n        }\r\n        this.costSavings25Years = totalSavings;\r\n\r\n        this.autonomy =\r\n            (energyUsageOfProduction / (totalHouseholdConsumption / 365)) *\r\n            100;\r\n    }\r\n\r\n    private updateChart() {\r\n        // if (!this.chartRef) return;\r\n\r\n        // const ctx = this.chartRef.getContext(\"2d\");\r\n        // if (!ctx) return;\r\n\r\n        // if (this.chart) {\r\n        //     this.chart.destroy();\r\n        // }\r\n\r\n        // const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);\r\n        // const data = CONSUMPTION_PROFILES[this.consumptionProfile];\r\n        // const norm = data.reduce((acc, curr) => acc + curr, 0);\r\n\r\n        // const peakKwh = this.numberOfPanels * this.panelPeakPower;\r\n        // const production = SOLAR_RADIATION.map((radiation) =>\r\n        //     radiation * peakKwh\r\n        // );\r\n\r\n        // for (let i = 0; i < data.length; i++) {\r\n        //     data[i] = data[i] * this.householdConsumption / norm / 365;\r\n        // }\r\n\r\n        // let datasets = [{\r\n        //     label: \"Energy Consumption\",\r\n        //     data: data,\r\n        //     borderColor: \"#964500\",\r\n        //     backgroundColor: \"rgba(150, 69, 0, 0.1)\",\r\n        //     fill: true,\r\n        //     tension: 0.4,\r\n        // }, {\r\n        //     label: \"Energy Production\",\r\n        //     data: production,\r\n        //     borderColor: \"#000000\",\r\n        //     backgroundColor: \"rgba(0, 0, 0, 0.1)\",\r\n        //     fill: true,\r\n        // }];\r\n\r\n        // this.chart = new Chart(ctx, {\r\n        //     type: \"line\",\r\n        //     data: {\r\n        //         labels: hours,\r\n        //         datasets: datasets,\r\n        //     },\r\n        //     options: {\r\n        //         responsive: true,\r\n        //         plugins: {\r\n        //             title: {\r\n        //                 display: true,\r\n        //                 text: \"Daily Consumption Profile\",\r\n        //             },\r\n        //         },\r\n        //         scales: {\r\n        //             y: {\r\n        //                 beginAtZero: true,\r\n        //                 title: {\r\n        //                     display: true,\r\n        //                     text: \"Relative Consumption\",\r\n        //                 },\r\n        //             },\r\n        //             x: {\r\n        //                 title: {\r\n        //                     display: true,\r\n        //                     text: \"Hour of Day\",\r\n        //                 },\r\n        //             },\r\n        //         },\r\n        //     },\r\n        // });\r\n    }\r\n\r\n    componentWillLoad() {\r\n        this.updateSystemConfigs();\r\n    }\r\n\r\n    private validateForm(): boolean {\r\n        let isValid = true;\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        // Validate name\r\n        if (!this.name.trim()) {\r\n            this.nameError = t.solarSystemForm.nameError;\r\n            isValid = false;\r\n        } else {\r\n            this.nameError = \"\";\r\n        }\r\n\r\n        // Validate email\r\n        const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n        if (!this.email.trim()) {\r\n            this.emailError = t.solarSystemForm.emailError;\r\n            isValid = false;\r\n        } else if (!emailRegex.test(this.email)) {\r\n            this.emailError = t.solarSystemForm.validEmailError;\r\n            isValid = false;\r\n        } else {\r\n            this.emailError = \"\";\r\n        }\r\n\r\n        return isValid;\r\n    }\r\n\r\n    private handleRequestOffer() {\r\n        if (!this.validateForm()) {\r\n            return;\r\n        }\r\n        // Here you can implement the logic to handle the offer request\r\n        console.log(\"Requesting offer for: \", {\r\n            name: this.name,\r\n            email: this.email,\r\n            systemConfig: this.systemConfigs,\r\n            consumption: this.householdConsumption,\r\n            autonomy: this.autonomy,\r\n            costSavings: this.costSavings,\r\n            roofPolygons: this.roofPolygons,\r\n            obstructionPolygons: this.obstructionPolygons,\r\n        });\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col justify-center items-center w-full h-full pt-4\" // style={{\r\n                //     display: (Object.keys(this.systemConfigs).length === 0)\r\n                //         ? \"none\"\r\n                //         : \"flex\",\r\n                // }}\r\n                id=\"solar-system-form\"\r\n            >\r\n                <h1 class=\"text-2xl font-bold text-[#271200] mb-4 w-full\">\r\n                    {t.solarSystemForm.title}\r\n                </h1>\r\n\r\n                <div class=\"w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6\">\r\n                    {/* System Info Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.systemInformation}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.numberOfPanels}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.panelPeakPower}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.numberOfPanels}\r\n                                    readOnly\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.panelPeakPower}\r\n                                    readonly\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bg-white rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-gray-600\">\r\n                                    {t.solarSystemForm.totalSystemPeakPower}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-[#271200]\">\r\n                                    {(DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *\r\n                                        this.numberOfPanels).toFixed(1)} kW\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    {/* Household Consumption Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.householdConsumptionTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600\">\r\n                                    {t.solarSystemForm.annualConsumption}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600\">\r\n                                    {t.solarSystemForm.consumptionProfileTitle}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.householdConsumption}\r\n                                    onInput={(e) => {\r\n                                        this.householdConsumption = parseInt(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                                <select\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    onChange={(e) => {\r\n                                        this.consumptionProfile =\r\n                                            (e.target as HTMLSelectElement)\r\n                                                .value as\r\n                                                    | \"mostly_at_home\"\r\n                                                    | \"mostly_away\";\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                >\r\n                                    <option\r\n                                        value=\"mostly_at_home\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_at_home\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAtHome}\r\n                                    </option>\r\n                                    <option\r\n                                        value=\"mostly_away\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_away\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAway}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n                        {\r\n                            /* <div class=\"mt-4 h-48\">\r\n                            <canvas ref={(el) => this.chartRef = el}></canvas>\r\n                        </div> */\r\n                        }\r\n                    </div>\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.additionalComponents.title}\r\n                        </h2>\r\n                        <div class=\"flex flex-col gap-4\">\r\n                            {/* Heat Pump Section */}\r\n                            <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <div class=\"flex items-center gap-2\">\r\n                                        <input\r\n                                            type=\"checkbox\"\r\n                                            id=\"heatPump\"\r\n                                            class=\"w-4 h-4 accent-[#964500] border-gray-300 rounded-full focus:ring-[#964500] focus:ring-offset-0 focus:ring-2\"\r\n                                            checked={this.heatPump > 0}\r\n                                            onChange={(e) => {\r\n                                                this.heatPump =\r\n                                                    (e.target as HTMLInputElement)\r\n                                                            .checked\r\n                                                        ? 100\r\n                                                        : 0;\r\n                                                this.recalculate();\r\n                                            }}\r\n                                        />\r\n                                        <label\r\n                                            htmlFor=\"heatPump\"\r\n                                            class=\"text-gray-600\"\r\n                                        >\r\n                                            {t.solarSystemForm\r\n                                                .additionalComponents\r\n                                                .heatPump}\r\n                                        </label>\r\n                                    </div>\r\n                                    {this.heatPump > 0 && (\r\n                                        <span class=\"text-gray-600\">\r\n                                            {this.heatPump} m²\r\n                                        </span>\r\n                                    )}\r\n                                </div>\r\n                                {this.heatPump > 0 && (\r\n                                    <div class=\"flex flex-col gap-2\">\r\n                                        <input\r\n                                            type=\"range\"\r\n                                            min=\"10\"\r\n                                            max=\"300\"\r\n                                            step=\"10\"\r\n                                            class=\"custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white\"\r\n                                            value={this.heatPump}\r\n                                            onInput={(e) => {\r\n                                                this.heatPump = parseInt(\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .value,\r\n                                                );\r\n                                                this.recalculate();\r\n                                            }}\r\n                                        />\r\n                                    </div>\r\n                                )}\r\n                            </div>\r\n\r\n                            {/* Electric Car Section */}\r\n                            <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <div class=\"flex items-center gap-2\">\r\n                                        <input\r\n                                            type=\"checkbox\"\r\n                                            id=\"electricCar\"\r\n                                            class=\"w-4 h-4 accent-[#964500] border-gray-300 rounded focus:ring-[#964500] focus:ring-offset-0 focus:ring-2\"\r\n                                            checked={this.electricCar}\r\n                                            onChange={(e) => {\r\n                                                this.electricCar =\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .checked;\r\n                                                this.recalculate();\r\n                                            }}\r\n                                        />\r\n                                        <label\r\n                                            htmlFor=\"electricCar\"\r\n                                            class=\"text-gray-600\"\r\n                                        >\r\n                                            {t.solarSystemForm\r\n                                                .additionalComponents\r\n                                                .electricCar}\r\n                                        </label>\r\n                                    </div>\r\n                                </div>\r\n                                {this.electricCar && (\r\n                                    <div class=\"flex flex-col gap-2\">\r\n                                        <label class=\"text-sm text-gray-600\">\r\n                                            {t.solarSystemForm\r\n                                                .additionalComponents\r\n                                                .chargingTime}\r\n                                        </label>\r\n                                        <select\r\n                                            class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                            onChange={(e) => {\r\n                                                this.electricCarChargingTime =\r\n                                                    (e.target as HTMLSelectElement)\r\n                                                        .value as\r\n                                                            | \"day\"\r\n                                                            | \"night\";\r\n                                                this.recalculate();\r\n                                            }}\r\n                                        >\r\n                                            <option\r\n                                                value=\"day\"\r\n                                                selected={this\r\n                                                    .electricCarChargingTime ===\r\n                                                    \"day\"}\r\n                                            >\r\n                                                {t.solarSystemForm\r\n                                                    .additionalComponents\r\n                                                    .chargingTimeDay}\r\n                                            </option>\r\n                                            <option\r\n                                                value=\"night\"\r\n                                                selected={this\r\n                                                    .electricCarChargingTime ===\r\n                                                    \"night\"}\r\n                                            >\r\n                                                {t.solarSystemForm\r\n                                                    .additionalComponents\r\n                                                    .chargingTimeNight}\r\n                                            </option>\r\n                                        </select>\r\n                                    </div>\r\n                                )}\r\n                            </div>\r\n\r\n                            {/* Battery Section */}\r\n                            <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <label class=\"text-gray-600\">\r\n                                        {t.solarSystemForm.additionalComponents\r\n                                            .battery}\r\n                                    </label>\r\n                                    <span class=\"text-gray-600\">\r\n                                        {this.battery} kWh\r\n                                    </span>\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-2\">\r\n                                    <input\r\n                                        type=\"range\"\r\n                                        min=\"0\"\r\n                                        max=\"20\"\r\n                                        step=\"1\"\r\n                                        class=\"w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white\"\r\n                                        value={this.battery}\r\n                                        onInput={(e) => {\r\n                                            this.battery = parseInt(\r\n                                                (e.target as HTMLInputElement)\r\n                                                    .value,\r\n                                            );\r\n                                            this.recalculate();\r\n                                        }}\r\n                                    />\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Electricity Price and Compensation Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.electricityCostsTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-3 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.electricityPrice}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.compensationRate}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.annualPriceIncrease}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-3 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.electricityPrice.toFixed(2)}\r\n                                    onInput={(e) => {\r\n                                        this.electricityPrice = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.compensationRate.toFixed(2)}\r\n                                    onInput={(e) => {\r\n                                        this.compensationRate = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.1\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.annualPriceIncrease.toFixed(1)}\r\n                                    onInput={(e) => {\r\n                                        this.annualPriceIncrease = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Results Section */}\r\n                    <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.resultsTitle}\r\n                        </h2>\r\n                        <div class=\"bg-white rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-gray-600\">\r\n                                    {t.solarSystemForm.autonomy}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-[#271200]\">\r\n                                    {this.autonomy.toFixed(1)}%\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-gray-600\">\r\n                                        {t.solarSystemForm.costSavings}\r\n                                    </span>\r\n                                    <div class=\"relative group\">\r\n                                        <svg\r\n                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                            class=\"h-5 w-5 text-gray-400 cursor-help\"\r\n                                            viewBox=\"0 0 20 20\"\r\n                                            fill=\"currentColor\"\r\n                                        >\r\n                                            <path\r\n                                                fill-rule=\"evenodd\"\r\n                                                d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z\"\r\n                                                clip-rule=\"evenodd\"\r\n                                            />\r\n                                        </svg>\r\n                                        <div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none\">\r\n                                            {t.solarSystemForm\r\n                                                .savingsDisclaimer}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-green-600\">\r\n                                    {this.costSavings.toFixed(2)}€/{t\r\n                                        .solarSystemForm.year}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-gray-600\">\r\n                                        {t.solarSystemForm.costSavings25Years}\r\n                                    </span>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-green-600\">\r\n                                    {this.costSavings25Years.toFixed(2)}€\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Contact Information Section */}\r\n                    <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.requestOffer}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.name}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.email}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"text\"\r\n                                    class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                        this.nameError\r\n                                            ? \"border-red-500\"\r\n                                            : \"border-gray-300\"\r\n                                    } focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`}\r\n                                    value={this.name}\r\n                                    onInput={(e) => {\r\n                                        this.name =\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value;\r\n                                        this.validateForm();\r\n                                    }}\r\n                                    placeholder=\"Your name\"\r\n                                />\r\n                                {this.nameError && (\r\n                                    <p class=\"text-red-500 text-sm mt-1\">\r\n                                        {this.nameError}\r\n                                    </p>\r\n                                )}\r\n                                <input\r\n                                    type=\"email\"\r\n                                    class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                        this.emailError\r\n                                            ? \"border-red-500\"\r\n                                            : \"border-gray-300\"\r\n                                    } focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`}\r\n                                    value={this.email}\r\n                                    onInput={(e) => {\r\n                                        this.email =\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value;\r\n                                        this.validateForm();\r\n                                    }}\r\n                                    placeholder=\"your.email@example.com\"\r\n                                />\r\n                                {this.emailError && (\r\n                                    <p class=\"text-red-500 text-sm mt-1\">\r\n                                        {this.emailError}\r\n                                    </p>\r\n                                )}\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"flex justify-center\">\r\n                            <button\r\n                                onClick={() => this.handleRequestOffer()}\r\n                                disabled={!this.name.trim() ||\r\n                                    !this.email.trim() || !!this.nameError ||\r\n                                    !!this.emailError}\r\n                                class=\"px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200\"\r\n                                style={{ color: \"white\" }}\r\n                            >\r\n                                {t.solarSystemForm.requestOfferButton}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n","/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Tool } from \"../../utils/render/tools\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { tools } from \"../../utils/render/tools\";\r\n\r\n@Component({\r\n    tag: \"tool-box\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class ToolBox {\r\n    @Prop()\r\n    currentTool: Tool;\r\n\r\n    @Prop()\r\n    onToolSelect: (tool: Tool) => void;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        return (\r\n            <div class=\"flex lg:gap-4 rounded-4xl bg-[#f3ebda] p-4 flex-wrap justify-center w-full text-xs\">\r\n                {tools.map((tool) => {\r\n                    const toolStrings = t.mapDraw.tools[tool.name];\r\n                    return (\r\n                        <button\r\n                            class={`px-4 py-2 rounded-4xl transition-colors duration-200 hover:bg-[#ffffff] ${\r\n                                this.currentTool.name === tool.name\r\n                                    ? \"bg-[#271200] hover:bg-gray-500\"\r\n                                    : \"bg-[#f3ebda] hover:bg-[#ffffff]\"\r\n                            }`}\r\n                            style={{\r\n                                color: this.currentTool.name === tool.name\r\n                                    ? \"#ffffff\"\r\n                                    : \"#000000\",\r\n                            }}\r\n                            aria-label={toolStrings.ariaLabel}\r\n                            title={toolStrings.explanation}\r\n                            onClick={() => this.onToolSelect(tool)}\r\n                        >\r\n                            <div class=\"flex items-center gap-1 flex-col\">\r\n                                <icon-selector name={tool.icon} />\r\n                                <span>{toolStrings.name}</span>\r\n                            </div>\r\n                        </button>\r\n                    );\r\n                })}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"],"mappings":"2HAAA,MAAMA,EAAY,i9qB,MCOLC,EAAU,M,yBAEnBC,OAAkB,MAElBC,KAAe,GAEf,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAM,6BACNC,MAAOC,KAAKN,KACZO,OAAQD,KAAKN,KACbQ,QAAQ,YACRC,KAAK,OACLC,OAAO,eACM,mBAAG,iBACD,QAAO,kBACN,QAChBC,MAAO,2CACHL,KAAKP,OAAS,eAAiB,MAGnCG,EAAM,QAAAC,IAAA,2CAAAS,EAAE,yFACRV,EAAM,QAAAC,IAAA,2CAAAS,EAAE,aACRV,EAAA,QAAAC,IAAA,2CAAMS,EAAE,c,aC/BxB,MAAMf,EAAY,i9qB,MCOLgB,EAAS,M,yBAElBd,OAAkB,MAElBC,KAAe,GAEf,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAM,6BACNC,MAAOC,KAAKN,KACZO,OAAQD,KAAKN,KACbQ,QAAQ,YACRC,KAAK,OACLC,OAAO,eACM,mBAAG,iBACD,QAAO,kBACN,QAChBC,MAAO,yCACHL,KAAKP,OAAS,eAAiB,MAGnCG,EAAM,QAAAC,IAAA,2CAAAS,EAAE,+CACRV,EAAA,QAAAC,IAAA,2CAAMS,EAAE,kH,aC9BxB,MAAMf,EAAY,i9qB,MCOLiB,EAAI,M,yBAEbC,KAEAhB,OAAkB,MAElBC,KAAe,GAEf,MAAAC,GACI,GAAIK,KAAKS,OAAS,SAAU,CACxB,OAAOb,EAAa,eAAAH,OAAQO,KAAKP,OAAQC,KAAMM,KAAKN,M,CAExD,GAAIM,KAAKS,OAAS,QAAS,CACvB,OAAOb,EAAY,cAAAH,OAAQO,KAAKP,OAAQC,KAAMM,KAAKN,M,CAEvD,GAAIM,KAAKS,OAAS,OAAQ,CACtB,OAAOb,EAAW,aAAAH,OAAQO,KAAKP,OAAQC,KAAMM,KAAKN,M,CAEtD,GAAIM,KAAKS,OAAS,gBAAiB,CAC/B,OAAOb,EAAoB,sBAAAH,OAAQO,KAAKP,OAAQC,KAAMM,KAAKN,M,CAE/D,GAAIM,KAAKS,OAAS,SAAU,CACxB,OAAOb,EAAa,eAAAH,OAAQO,KAAKP,OAAQC,KAAMM,KAAKN,M,CAExD,GAAIM,KAAKS,OAAS,WAAY,CAC1B,OAAOb,EAAe,iBAAAH,OAAQO,KAAKP,OAAQC,KAAMM,KAAKN,M,CAE1D,OACIE,EAAK,OAAAS,MAAO,GAAGL,KAAKP,OAAS,eAAiB,MAAI,QACxCO,KAAKS,K,sBCNVC,EAAUC,EAAcC,EAAgBC,GAGtD,IAAKA,EAAQ,CACZA,EAASC,SAASC,cAAc,S,CAKjCF,EAAOd,MAA4BY,EAAIZ,MACvCc,EAAOZ,OAA8BU,EAAIV,OAQzC,MAAMe,EAAKL,EAAIZ,MAAQc,EAAOd,MAC9B,MAAMkB,EAAKN,EAAIV,OAASY,EAAOZ,OAG/B,MAAMiB,EAAML,EAAOM,WAAW,MAC9B,MAAMC,EAAMF,EAAIG,aAAa,EAAG,EAAGR,EAAOd,MAAOc,EAAOZ,QAMxD,IAAK,IAAIqB,EAAI,EAAGA,EAAIT,EAAOZ,OAAQqB,IAAK,CACtC,IAAK,IAAIC,EAAI,EAAGA,EAAIV,EAAOd,MAAOwB,IAAK,CAIrC,MAAMC,EAASC,KAAKC,MAAMJ,EAAIL,GAAMN,EAAIZ,MAAQ0B,KAAKC,MAAMH,EAAIP,GAS/D,MAAMW,EAASL,EAAIT,EAAOd,MAAQ,EAAIwB,EAAI,EAC1C,MAAMK,EAAS,GACfR,EAAIS,KAAKF,EAAS,GAAKF,KAAKK,MAAMnB,EAAIoB,QAAQ,GAAGP,GAAUI,GAC3DR,EAAIS,KAAKF,EAAS,GAAKF,KAAKK,MAAMnB,EAAIoB,QAAQ,GAAGP,GAAUI,GAC3DR,EAAIS,KAAKF,EAAS,GAAKF,KAAKK,MAAMnB,EAAIoB,QAAQ,GAAGP,GAAUI,GAC3DR,EAAIS,KAAKF,EAAS,GAEd,G,EAKRT,EAAIc,aAAaZ,EAAK,EAAG,GACzB,OAAOP,CACT,CA0NgB,SAAAoB,EAAiBC,EAAkChB,EAA+BiB,EAAoBC,EAAqBC,EAAsBC,GAChK,MAAMf,EAAEA,EAACD,EAAEA,GAAMY,EAAWK,cAC5B,IAAIxC,EAAQoC,EACZ,IAAIlC,EAASmC,EAAcX,KAAKe,IAAIF,EAAab,KAAKgB,GAAK,KAC3D,GAAIP,EAAWQ,WAAY,CACzB3C,EAAQqC,EACRnC,EAASkC,EAAaV,KAAKe,IAAIF,EAAab,KAAKgB,GAAK,I,CAIxDvB,EAAIyB,OAGJzB,EAAI0B,UAAUrB,EAAGD,GAGjBJ,EAAI2B,OAAQR,EAAeZ,KAAKgB,GAAM,KAGtCvB,EAAI4B,UAAY,wBAChB5B,EAAI6B,UAAUhD,EAAM,GAAIE,EAAO,EAAGF,EAAOE,GAGzCiB,EAAI8B,YAAc,2BAClB9B,EAAI+B,UAAY,EAChB/B,EAAIgC,YAAYnD,EAAM,GAAIE,EAAO,EAAGF,EAAOE,GAG3CiB,EAAIiC,SACN,CAgEO,SAAUC,GAAuBzC,IACpCA,EAAG0C,KACHA,EAAO,EAACxC,OACRA,IAOA,MAAMyC,EAAY5C,EAAUC,EAAK4C,UAAW1C,GAC5C,MAAMK,EAAMoC,EAAUnC,WAAW,MACjC,MAAMqC,EAAUtC,EAAIG,aAAa,EAAG,EAAGiC,EAAUvD,MAAOuD,EAAUrD,QAGlE,MAAMF,EAAQuD,EAAUvD,MACxB,MAAME,EAASqD,EAAUrD,OACzB,MAAMwD,EAAchC,KAAKC,MAAM3B,EAAQsD,GACvC,MAAMK,EAAejC,KAAKC,MAAMzB,EAASoD,GACzC,MAAMM,EAASlC,KAAKC,OAAO3B,EAAQ0D,GAAe,GAClD,MAAMG,EAASnC,KAAKC,OAAOzB,EAASyD,GAAgB,GAGpD,MAAMG,EAAgB,IAAIC,UAAUL,EAAaC,GAGjD,IAAK,IAAIpC,EAAI,EAAGA,EAAIrB,EAAQqB,IAAK,CAC7B,IAAK,IAAIC,EAAI,EAAGA,EAAIxB,EAAOwB,IAAK,CAC5B,MAAMwC,GAAKzC,EAAIvB,EAAQwB,GAAK,EAE5B,GAAIA,GAAKoC,GAAUpC,EAAIoC,EAASF,GAC5BnC,GAAKsC,GAAUtC,EAAIsC,EAASF,EAAc,CAE1C,MAAMM,EAAUzC,EAAIoC,EACpB,MAAMM,EAAU3C,EAAIsC,EACpB,MAAMM,GAAWD,EAAUR,EAAcO,GAAW,EAEpDH,EAAchC,KAAKqC,GAAWV,EAAQ3B,KAAKkC,GAC3CF,EAAchC,KAAKqC,EAAU,GAAKV,EAAQ3B,KAAKkC,EAAI,GACnDF,EAAchC,KAAKqC,EAAU,GAAKV,EAAQ3B,KAAKkC,EAAI,GACnDF,EAAchC,KAAKqC,EAAU,GAAK,G,GAM9CZ,EAAUvD,MAAQ0D,EAClBH,EAAUrD,OAASyD,EAGnBxC,EAAIc,aAAa6B,EAAe,EAAG,GACnC,OAAOP,CACX,CC/bA,MAAMa,EAAoB,qBAE1B,MAAMC,EAAc,EACpB,MAAMC,EAAiB,EAEvB,MAAMC,EAAe,EACrB,MAAMC,EAAoB,IAE1B,MAAMC,EAAkB,CACpB,EACA,EACA,EACA,EACA,EACA,EACA,EACA,GACA,GACA,GACA,GACA,EACA,EACA,EACA,EACA,GACA,GACA,GACA,IACA,IACA,EACA,EACA,EACA,GAEJ,MAAMC,EAAuB,CACzBC,eAAgB,CACZ,GACA,GACA,GACA,GACA,GACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KACA,GACA,IACA,IACA,IACA,IACA,IACA,IAEJC,YAAa,CACT,GACA,GACA,GACA,GACA,GACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KACA,EACA,IACA,IACA,IACA,IACA,IACA,KCtFF,SAAUC,GAAgCrD,EAC5CA,EAACD,EACDA,EAACuD,UACDA,EAASC,gBACTA,IASA,MAAMC,EAAKF,EAAUtD,EAAIuD,EAAgBvD,EACzC,MAAMyD,EAAKH,EAAUvD,EAAIwD,EAAgBxD,EAGzC,MAAM2D,GAAUD,EAChB,MAAME,EAASH,EAGf,MAAMI,EAAa1D,KAAK2D,KAAKH,EAASA,EAASC,EAASA,GACxD,MAAMG,EAAmBJ,EAASE,EAClC,MAAMG,EAAmBJ,EAASC,EAGlC,MAAMI,EAAgB,CAClBhE,EAAGA,EAAIsD,EAAUtD,EACjBD,EAAGA,EAAIuD,EAAUvD,GAIrB,MAAMkE,EAAmBD,EAAchE,EAAI8D,EACvCE,EAAcjE,EAAIgE,EAGtB/D,EAAIsD,EAAUtD,EAAI8D,EAAmBG,EACrClE,EAAIuD,EAAUvD,EAAIgE,EAAmBE,EACrC,MAAO,CAAEjE,IAAGD,IAChB,CCVM,SAAUmE,GAAYC,WACxBA,EAAUC,cAAEA,EAAaC,QAAEA,EAAOC,gBAAEA,EAAeC,WAAEA,EAAUC,YAAEA,EAAWC,UAAEA,EAASC,gBAAEA,EAAeC,eAAEA,IAE1G,IAAKR,IAAeC,EAAe,OAGnCD,EAAWS,YACXT,EAAW1C,YAAc+C,EACzBL,EAAWzC,UAAY,EAEvB2C,EAAQQ,OAAOC,SAAQ,CAACC,EAAOC,KAC3B,GAAIA,IAAU,EAAG,CACbb,EAAWc,OAAOF,EAAM/E,EAAG+E,EAAMhF,E,KAC9B,CACHoE,EAAWe,OAAOH,EAAM/E,EAAG+E,EAAMhF,E,KAIzC,GAAIsE,EAAQc,OAAQ,CAChBhB,EAAWe,OAAOb,EAAQQ,OAAO,GAAG7E,EAAGqE,EAAQQ,OAAO,GAAG9E,GACzD,GAAI0E,EAAW,CACXN,EAAW5C,UAAYkD,EACvBN,EAAWvF,M,EAInB,GAAIyF,EAAQQ,OAAOO,OAAS,EAAG,CAC3BjB,EAAWtF,Q,CAGf,GAAI6F,GAAmBL,EAAQc,OAAQ,CACnChB,EAAWS,YACXT,EAAW1C,YAAckD,EACzBR,EAAWzC,UAAY,EACvByC,EAAWc,OAAOP,EAAgBW,OAAOrF,EAAG0E,EAAgBW,OAAOtF,GACnEoE,EAAWe,OAAOR,EAAgBY,OAAOtF,EAAG0E,EAAgBY,OAAOvF,GACnEoE,EAAWtF,SACXsF,EAAW1C,YAAc+C,EACzBL,EAAWzC,UAAY,C,CAG3B,GAAI2C,EAAQQ,OAAOO,OAAS,IAAMf,EAAQc,QAAUb,EAAiB,CACjE,MAAMiB,EAAiBlC,EAAgC,CACnDrD,EAAGuE,EAAWvE,EACdD,EAAGwE,EAAWxE,EACduD,UAAWe,EAAQQ,OAAOR,EAAQQ,OAAOO,OAAS,GAClD7B,gBAAiBc,EAAQQ,OAAOR,EAAQQ,OAAOO,OAAS,KAE5DI,EAA4B,CACxB7F,IAAKwE,EACLsB,WAAYF,EACZG,SAAUrB,EAAQQ,OAAOR,EAAQQ,OAAOO,OAAS,GACjD3D,YAAamB,G,CAIrB,GAAI0B,GAAmBD,EAAQQ,OAAOO,OAAS,IAAMf,EAAQc,OAAQ,CACjE,MAAMI,EAAiBlC,EAAgC,CACnDrD,EAAGuE,EAAWvE,EACdD,EAAGwE,EAAWxE,EACduD,UAAWe,EAAQQ,OAAOR,EAAQQ,OAAOO,OAAS,GAClD7B,gBAAiBc,EAAQQ,OAAOR,EAAQQ,OAAOO,OAAS,KAE5DO,EAAW,CACPhG,IAAKwE,EACLnE,EAAGuF,EAAevF,EAClBD,EAAGwF,EAAexF,EAClB6F,OAAQ,EACRnE,YAAamB,G,CAKrByB,EAAQQ,OAAOC,SAASC,IACpBZ,EAAWS,YACX,MAAMnD,EAAc+C,EACpB,MAAMqB,EAAW3F,KAAK2D,KAClB3D,KAAK4F,IAAIf,EAAM/E,EAAIuE,EAAWvE,EAAG,GAAKE,KAAK4F,IAAIf,EAAMhF,EAAIwE,EAAWxE,EAAG,IAI3E,GACI8F,EAAW,GACb,CACEF,EAAW,CACPhG,IAAKwE,EACLnE,EAAG+E,EAAM/E,EACTD,EAAGgF,EAAMhF,EACT0B,cACAmE,OAAQ,G,KAET,CACHD,EAAW,CACPhG,IAAKwE,EACLnE,EAAG+E,EAAM/E,EACTD,EAAGgF,EAAMhF,EACT0B,cACAmE,OAAQ,G,CAIhBzB,EAAWtF,QAAQ,GAE3B,C,SAEgB8G,GAAWhG,IACvBA,EAAGK,EACHA,EAACD,EACDA,EAAC6F,OACDA,EAAMnE,YACNA,EAAc,QAAOC,UACrBA,EAAY,IAEZ/B,EAAIiF,YACJjF,EAAI8B,YAAcA,EAClB9B,EAAI+B,UAAYA,EAEhB/B,EAAIoG,IAAI/F,EAAGD,EAAG6F,EAAQ,EAAG,EAAI1F,KAAKgB,IAClCvB,EAAId,QACR,CAEM,SAAU2G,GAA4B7F,IACxCA,EAAG8F,WACHA,EAAUC,SACVA,EAAQM,YACRA,EAAc,CAAC,EAAG,GAAEvE,YACpBA,EAAc,QAAOC,UACrBA,EAAY,IAUZ/B,EAAIiF,YACJjF,EAAI8B,YAAcA,EAClB9B,EAAI+B,UAAYA,EAChB/B,EAAIsG,YAAYD,GAGhBrG,EAAIsF,OAAOQ,EAAWzF,EAAGyF,EAAW1F,GACpCJ,EAAIuF,OAAOQ,EAAS1F,EAAG0F,EAAS3F,GAChCJ,EAAId,SAGJc,EAAIsG,YAAY,GACpB,CAuBgB,SAAAC,EAAiBnB,EAAcV,GAC3C,IAAKA,EAAQc,QAAUd,EAAQQ,OAAOO,OAAS,EAAG,OAAO,MAEzD,MAAMe,EAAe9B,EAAQQ,OAAOO,OACpC,MAAMpF,EAAI+E,EAAM/E,EAChB,MAAMD,EAAIgF,EAAMhF,EAChB,IAAIqG,EAAS,MAEb,IAAIC,EAAKhC,EAAQQ,OAAO,GACxB,IAAIyB,EAEJ,IAAK,IAAI9D,EAAI,EAAGA,GAAK2D,EAAc3D,IAAK,CACpC8D,EAAKjC,EAAQQ,OAAOrC,EAAI2D,GAExB,GAAIpG,EAAIG,KAAKqG,IAAIF,EAAGtG,EAAGuG,EAAGvG,GAAI,CAC1B,GAAIA,GAAKG,KAAKsG,IAAIH,EAAGtG,EAAGuG,EAAGvG,GAAI,CAC3B,GAAIC,GAAKE,KAAKsG,IAAIH,EAAGrG,EAAGsG,EAAGtG,GAAI,CAC3B,MAAMyG,GAAmB1G,EAAIsG,EAAGtG,IAAMuG,EAAGtG,EAAIqG,EAAGrG,IAAOsG,EAAGvG,EAAIsG,EAAGtG,GAAKsG,EAAGrG,EAEzE,GAAIqG,EAAGrG,IAAMsG,EAAGtG,GAAKA,GAAKyG,EAAgB,CACtCL,GAAUA,C,IAM1BC,EAAKC,C,CAGT,OAAOF,CACX,CCxNA,MAAMM,EAAqD,CACvD,CACIpI,IAAK,QACLqI,YAAa,wCAQd,MAAMC,EAAiB,CAC1B1H,KAAM,OACN2H,UAAW,OACXC,KAAM,OACNC,OAAQ,OACRC,iBAAkB,IAClBC,YAAa,qCAGV,MAAMC,EAAiB,CAC1BhI,KAAM,OACN2H,UAAW,YACXC,KAAM,QACNC,OAAQ,YACRC,iBAAkB,IAClBG,qBAAsBT,EACtBO,YAAa,iCAGV,MAAMG,EAAwB,CACjClI,KAAM,cACN2H,UAAW,cACXC,KAAM,gBACNC,OAAQ,YACRC,iBAAkB,IAClBG,qBAAsBT,EACtBO,YAAa,wCAGV,MAAMI,EAAmB,CAC5BnI,KAAM,SACN2H,UAAW,SACXC,KAAM,SACNC,OAAQ,UACRC,iBAAkB,IAClBC,YAAa,6BAGV,MAAMK,EAAyB,CAClCpI,KAAM,eACN2H,UAAW,iBACXC,KAAM,yCACNC,OAAQ,UACRE,YAAa,6BAGV,MAAMM,EAAgB,CACzBX,EACAM,EACAE,EACAC,GC9DG,MAAMG,EAAiD,CAC1DC,cAAe,UACfC,gBAAiB,UACjBC,qBAAsB,UACtBC,uBAAwB,2BACxBC,qBAAsB,0BACtBC,4BAA6B,2BAC7BC,0BAA2B,0BAC3BC,iCAAkC,2BAClCC,6BAA8B,0BAC9BC,oCAAqC,2BACrCvD,eAAgB,uBAGb,MAAMwD,EAA2C,CACpDC,YAAa,MACbC,aAAc,MACdC,UAAW,KACXC,WAAY,KACZC,MAAO,OC/BL,SAAUC,EAAaC,EAAyCC,EAAwCC,EAAavE,EAAkBwE,GACzI,MAAMC,EAAYH,GAAgBI,OAAS1E,EAAQ0E,MAAQJ,GAAgBC,MAAQA,EACnF,GAAIE,EAAW,CACX,OAAOzE,EAAQ0E,OAAS,OAASF,EAAOd,0BAA4Bc,EAAOb,gC,CAG/E,MAAMgB,EAAaN,GAAiBK,OAAS1E,EAAQ0E,MAAQL,GAAiBE,MAAQA,EAEtF,GAAII,EAAY,CACZ,OAAO3E,EAAQ0E,OAAS,OAASF,EAAOZ,6BAA+BY,EAAOX,mC,CAGlF,GAAI7D,EAAQ0E,OAAS,OAAQ,CACzB,OAAO1E,EAAQc,OAAS0D,EAAOhB,qBAAuB7F,S,CAE1D,OAAOqC,EAAQc,OAAS0D,EAAOf,4BAA8B9F,SACjE,CCdA,IAAIiH,EAAY,GAChB,IAAK,IAAIzG,EAAI,EAAGA,EAAI,MAAOA,EAAG,CAC5ByG,EAAUC,MAAM1G,EAAI,KAAO2G,SAAS,IAAIC,MAAM,GAChD,CACO,SAASC,EAAgBC,EAAKC,EAAS,GAM5C,OAAQN,EAAUK,EAAIC,EAAS,IAAMN,EAAUK,EAAIC,EAAS,IAAMN,EAAUK,EAAIC,EAAS,IAAMN,EAAUK,EAAIC,EAAS,IAAM,IAAMN,EAAUK,EAAIC,EAAS,IAAMN,EAAUK,EAAIC,EAAS,IAAM,IAAMN,EAAUK,EAAIC,EAAS,IAAMN,EAAUK,EAAIC,EAAS,IAAM,IAAMN,EAAUK,EAAIC,EAAS,IAAMN,EAAUK,EAAIC,EAAS,IAAM,IAAMN,EAAUK,EAAIC,EAAS,KAAON,EAAUK,EAAIC,EAAS,KAAON,EAAUK,EAAIC,EAAS,KAAON,EAAUK,EAAIC,EAAS,KAAON,EAAUK,EAAIC,EAAS,KAAON,EAAUK,EAAIC,EAAS,MAAMC,aACvf,CCbA,IAAIC,EACJ,IAAIC,EAAQ,IAAIC,WAAW,IACZ,SAASC,IAEtB,IAAKH,EAAiB,CAEpBA,SAAyBI,SAAW,aAAeA,OAAOJ,iBAAmBI,OAAOJ,gBAAgBK,KAAKD,QACzG,IAAKJ,EAAiB,CACpB,MAAM,IAAIM,MAAM,2GACtB,CACA,CACE,OAAON,EAAgBC,EACzB,CChBA,IAAIM,SAAoBH,SAAW,aAAeA,OAAOG,YAAcH,OAAOG,WAAWF,KAAKD,QAC9F,IAAAI,EAAe,CACbD,cCCF,SAASE,EAAGC,EAASC,EAAKb,GACxB,GAAIU,EAAOD,YAAc,OAASG,EAAS,CACzC,OAAOF,EAAOD,YAClB,CACEG,EAAUA,GAAW,GACrB,IAAIE,EAAOF,EAAQG,SAAWH,EAAQP,KAAOA,KAG7CS,EAAK,GAAKA,EAAK,GAAK,GAAO,GAC3BA,EAAK,GAAKA,EAAK,GAAK,GAAO,IAU3B,OAAOhB,EAAgBgB,EACzB,CCpBM,SAAUE,EAAqB1F,GACnC,IAAI2F,EAAO,EACX,IAAK,IAAIhI,EAAI,EAAGA,EAAIqC,EAAOO,OAAQ5C,IAAK,CACpC,MAAMiI,GAAKjI,EAAI,GAAKqC,EAAOO,OAC3BoF,GAAQ3F,EAAOrC,GAAGxC,EAAI6E,EAAO4F,GAAG1K,EAChCyK,GAAQ3F,EAAO4F,GAAGzK,EAAI6E,EAAOrC,GAAGzC,C,CAEpC,OAAOG,KAAKwK,IAAIF,EAAO,EACzB,CAEM,SAAUG,EAAkBC,GAEhC,GAAIA,GAAW,OAASA,EAAU,KAAM,MAAO,QAC/C,GAAIA,GAAW,MAAQA,EAAU,KAAM,MAAO,YAC9C,GAAIA,GAAW,MAAQA,EAAU,MAAO,MAAO,OAC/C,GAAIA,GAAW,OAASA,EAAU,MAAO,MAAO,YAChD,GAAIA,GAAW,OAASA,EAAU,MAAO,MAAO,QAChD,GAAIA,GAAW,OAASA,EAAU,MAAO,MAAO,YAChD,GAAIA,GAAW,OAASA,EAAU,MAAO,MAAO,OAChD,MAAO,WACT,C,SAkDgBC,EAAcC,EAAgBxL,EAA2ByL,GACvE,MAAMpL,EAAML,EAAOM,WAAW,MAC9B,IAAKD,EAAK,CACR,MAAM,IAAIoK,MAAM,2B,CAElB,MAAMiB,EAAcC,GACX3L,EAAOZ,QAAU,GAAKuM,EAAMH,EAAOI,QAAUJ,EAAOK,MAAQL,EAAOI,QAG5E,MAAME,EAAcC,GACX/L,EAAOd,OAAS6M,EAAMP,EAAOQ,OAASR,EAAOS,KAAOT,EAAOQ,MAGpE,MAAO,CACLtL,EAAGoL,EAAWL,EAAOS,WACrBzL,EAAGiL,EAAWD,EAAOU,UAEzB,CAEM,SAAUC,EAAiBC,GAC/B,MAAMC,EAAUD,EAAQb,OAAOK,MAAQQ,EAAQb,OAAOI,MAGtD,MAAMW,EAAcF,EAAQjN,OAC5B,MAAMoN,EAAgBF,EAAU,OAASC,EAGzC,OAAOC,CACT,CC9CgB,SAAAC,GAAahH,EAAc6F,GACvC,MAAMoB,EAAQpB,GAAW1K,KAAKgB,GAAK,KACnC,MAAMlB,EAAI+E,EAAM/E,EAAIE,KAAKe,IAAI+K,GAASjH,EAAMhF,EAAIG,KAAK+L,IAAID,GACzD,MAAMjM,EAAIgF,EAAM/E,EAAIE,KAAK+L,IAAID,GAASjH,EAAMhF,EAAIG,KAAKe,IAAI+K,GACzD,MAAO,CAAEhM,IAAGD,IAChB,CAEgB,SAAAmM,GAAe7H,EAAkBuG,GAC7C,MAAO,CACH/F,OAAQR,EAAQQ,OAAOsH,KAAKpH,GAAUgH,GAAahH,EAAO6F,KAC1D7B,KAAM1E,EAAQ0E,KACd5D,OAAQd,EAAQc,OAChByD,IAAKvE,EAAQuE,IACbwD,QAAS/H,EAAQ+H,QAEzB,CAEgB,SAAAC,GAAchI,EAAkBkF,GAC5C,GAAIlF,EAAQQ,OAAOO,SAAW,EAAG,CAC7B,MAAO,CAAEf,QAASA,EAASkF,OAAQ,CAACvJ,EAAG,EAAGD,EAAG,G,CAGjD,IAAIuM,EAAU,EACd,IAAIC,EAAU,EACd,IAAKhD,EAAQ,CACT,MAAMiD,EAAOtM,KAAKqG,OAAOlC,EAAQQ,OAAOsH,KAAKpH,GAAUA,EAAM/E,KAC7D,MAAMyM,EAAOvM,KAAKqG,OAAOlC,EAAQQ,OAAOsH,KAAKpH,GAAUA,EAAMhF,KAC7D,MAAM2M,EAAOxM,KAAKsG,OAAOnC,EAAQQ,OAAOsH,KAAKpH,GAAUA,EAAM/E,KAC7D,MAAM2M,EAAOzM,KAAKsG,OAAOnC,EAAQQ,OAAOsH,KAAKpH,GAAUA,EAAMhF,KAE7DuM,EAAUE,GAAQE,EAAOF,GAAQ,EACjCD,EAAUE,GAAQE,EAAOF,GAAQ,C,KAEhC,CACDH,EAAU/C,EAAOvJ,EACjBuM,EAAUhD,EAAOxJ,C,CAGrB,MAAM6M,EAAYvI,EAAQQ,OAAOsH,KAAKpH,IAAK,CACvC/E,EAAG+E,EAAM/E,EAAIsM,EACbvM,EAAGgF,EAAMhF,EAAIwM,MAGjB,MAAO,CAAElI,QAAS,IAAKA,EAASQ,OAAQ+H,GAAarD,OAAQ,CAACvJ,EAAGsM,EAASvM,EAAGwM,GACjF,CAEA,SAASM,GAAaC,EAAeC,GACjC,OAAOD,EAAO9M,IAAM+M,EAAO/M,GAAK8M,EAAO/M,IAAMgN,EAAOhN,CACxD,CASgB,SAAAiN,GAAWC,EAAaC,GAEpC,MAAM7G,EAAK4G,EAAME,MACjB,MAAM7G,EAAK2G,EAAMG,IACjB,MAAMC,EAAKH,EAAMC,MACjB,MAAMG,EAAKJ,EAAME,IAEjB,GAAIP,GAAaxG,EAAIgH,IAAOR,GAAaxG,EAAIiH,IAAOT,GAAavG,EAAI+G,IAAOR,GAAavG,EAAIgH,GAAK,CAC9F,OAAO,K,CAIX,MAAMC,GAAMD,EAAGtN,EAAIqN,EAAGrN,IAAMqG,EAAGtG,EAAIsN,EAAGtN,IAAMuN,EAAGvN,EAAIsN,EAAGtN,IAAMsG,EAAGrG,EAAIqN,EAAGrN,GACtE,MAAMwN,GAAMF,EAAGtN,EAAIqN,EAAGrN,IAAMsG,EAAGvG,EAAIsN,EAAGtN,IAAMuN,EAAGvN,EAAIsN,EAAGtN,IAAMuG,EAAGtG,EAAIqN,EAAGrN,GACtE,MAAMyN,GAAMnH,EAAGtG,EAAIqG,EAAGrG,IAAMqN,EAAGtN,EAAIsG,EAAGtG,IAAMuG,EAAGvG,EAAIsG,EAAGtG,IAAMsN,EAAGrN,EAAIqG,EAAGrG,GACtE,MAAM0N,GAAMpH,EAAGtG,EAAIqG,EAAGrG,IAAMsN,EAAGvN,EAAIsG,EAAGtG,IAAMuG,EAAGvG,EAAIsG,EAAGtG,IAAMuN,EAAGtN,EAAIqG,EAAGrG,GAGtE,OAAQuN,EAAKC,EAAK,GAAOC,EAAKC,EAAK,CACvC,CAoZM,SAAUC,GAA0BC,EAAeC,EAAqD/C,EAAgBxL,GAC1H,MAAMwO,EAAgB,CAClBtB,KAAMtM,KAAKqG,OAAOqH,EAAK/I,OAAOsH,KAAK4B,GAAMA,EAAE/N,KAC3C0M,KAAMxM,KAAKsG,OAAOoH,EAAK/I,OAAOsH,KAAK4B,GAAMA,EAAE/N,KAC3CyM,KAAMvM,KAAKqG,OAAOqH,EAAK/I,OAAOsH,KAAK4B,GAAMA,EAAEhO,KAC3C4M,KAAMzM,KAAKsG,OAAOoH,EAAK/I,OAAOsH,KAAK4B,GAAMA,EAAEhO,MAG/C,IAAIiO,EAAc,KAClB,IAAIC,EAAU,EAEd,IAAK,MAAMC,KAAWL,EAAkB,CACpC,MAAMM,EAAKtD,EAAcC,EAAQxL,EAAQ,CACrCmM,SAAUyC,EAAQE,YAAYD,GAAG1C,SACjCD,UAAW0C,EAAQE,YAAYD,GAAG3C,YAEtC,MAAM6C,EAAKxD,EAAcC,EAAQxL,EAAQ,CACrCmM,SAAUyC,EAAQE,YAAYC,GAAG5C,SACjCD,UAAW0C,EAAQE,YAAYC,GAAG7C,YAEtC,MAAM8C,EAAgB,CAClB9B,KAAM2B,EAAGnO,EACT0M,KAAM2B,EAAGrO,EACTyM,KAAM4B,EAAGtO,EACT4M,KAAMwB,EAAGpO,GAIb,MAAMwO,EAAYrO,KAAKsG,IAAIsH,EAActB,KAAM8B,EAAc9B,MAC7D,MAAMgC,EAAatO,KAAKqG,IAAIuH,EAAcpB,KAAM4B,EAAc5B,MAC9D,MAAM+B,EAAWvO,KAAKsG,IAAIsH,EAAcrB,KAAM6B,EAAc7B,MAC5D,MAAMiC,EAAcxO,KAAKqG,IAAIuH,EAAcnB,KAAM2B,EAAc3B,MAE/D,MAAMgC,EAAaH,EAAaD,EAChC,MAAMK,EAAcF,EAAcD,EAClC,IAAII,EAAmB,EACvB,GAAIF,EAAa,GAAKC,EAAc,EAAG,CACnCC,EAAmBF,EAAaC,C,CAGpC,MAAME,GAAehB,EAAcpB,KAAOoB,EAActB,OAASsB,EAAcnB,KAAOmB,EAAcrB,MACpG,MAAMsC,GAAeT,EAAc5B,KAAO4B,EAAc9B,OAAS8B,EAAc3B,KAAO2B,EAAc7B,MACpG,MAAMuC,EAAYF,EAAcC,EAAcF,EAC9C,MAAMI,EAAMD,EAAY,EAAIH,EAAmBG,EAAY,EAE3D,GAAIC,EAAMhB,EAAS,CACfA,EAAUgB,EACVjB,EAAcE,C,EAItB,OAAOF,CACX,CC9jBgB,SAAAkB,GAAaC,EAAgBxO,EAA4BQ,EAAqBiO,EAAcC,EAAoBC,GAC5H,MAAMC,EAA2C,GACjD,MAAM/Q,EAAQ2C,EAAaR,EAAW0H,aAAe1H,EAAWyH,YAChE,MAAMoH,EAAatP,KAAKuP,MAAMN,EAAOzC,KAAOyC,EAAO3C,MAAQhO,GAC3D,MAAME,EAASyC,EAAaR,EAAWyH,YAAczH,EAAW0H,aAChE,MAAMqH,EAAcxP,KAAKuP,MAAMN,EAAOxC,KAAOwC,EAAO1C,MAAQ/N,GAE5D,MAAMiR,EAAcnR,EAAQ,EAC5B,MAAMoR,EAAelR,EAAS,EAG9B,MAAM0D,EAASgN,EAAMpP,EAAKE,KAAKuP,MAAML,EAAMpP,EAAImP,EAAO3C,MAAQhO,GAASA,EACvE,MAAM6D,EAAS+M,EAAMrP,EAAKG,KAAKuP,MAAML,EAAMrP,EAAIoP,EAAO1C,MAAQ/N,GAAUA,EAExE,IAAK,IAAI8D,EAAI,EAAGA,EAAIkN,EAAalN,IAAK,CAClC,MAAMqN,EAAmC,GACzC,IAAK,IAAIpF,EAAI,EAAGA,EAAI+E,EAAY/E,IAAK,CACjC,MAAMzK,EAAIoC,EAASqI,EAAIjM,EAAQiM,EAAI6E,EAAgBK,EACnD,MAAM5P,EAAIsC,EAASG,EAAI9D,EAAS8D,EAAI6M,EAAaO,EACjD,MAAME,EAA6C,CAC/CC,MAAOpP,EACPK,cAAe,CACXhB,EAAGA,EACHD,EAAGA,GAEPoB,WAAYA,GAEhB0O,EAAI3G,KAAK4G,E,CAEbP,EAAKrG,KAAK2G,E,CAEd,OAAON,CACX,CAEA,SAASS,GAAmBF,EAA4C3O,GACpE,MAAM3C,EAAQ2C,EAAa2O,EAAqBC,MAAM1H,aAAeyH,EAAqBC,MAAM3H,YAChG,MAAM1J,EAASyC,EAAa2O,EAAqBC,MAAM3H,YAAc0H,EAAqBC,MAAM1H,aAChG,MAAMhC,EAAK,CACPrG,EAAG8P,EAAqB9O,cAAchB,EAAIxB,EAAQ,EAClDuB,EAAG+P,EAAqB9O,cAAcjB,EAAIrB,EAAS,GAEvD,MAAM4H,EAAK,CACPtG,EAAG8P,EAAqB9O,cAAchB,EAAIxB,EAAQ,EAClDuB,EAAG+P,EAAqB9O,cAAcjB,EAAIrB,EAAS,GAEvD,MAAM2O,EAAK,CACPrN,EAAG8P,EAAqB9O,cAAchB,EAAIxB,EAAQ,EAClDuB,EAAG+P,EAAqB9O,cAAcjB,EAAIrB,EAAS,GAEvD,MAAM4O,EAAK,CACPtN,EAAG8P,EAAqB9O,cAAchB,EAAIxB,EAAQ,EAClDuB,EAAG+P,EAAqB9O,cAAcjB,EAAIrB,EAAS,GAEvD,MAAMuR,EAAQ,CACV,CACI9C,MAAO9G,EACP+G,IAAK9G,GAET,CACI6G,MAAO7G,EACP8G,IAAKC,GAET,CACIF,MAAOE,EACPD,IAAKE,GAET,CACIH,MAAOG,EACPF,IAAK/G,IAGb,OAAO4J,CACX,C,SAGgBC,GAAqBJ,EAA4CK,EAAmBhP,GAChG,MAAM8O,EAAQD,GAAmBF,EAAsB3O,GACvD,GAAI+E,EAAiB4J,EAAqB9O,cAAemP,GAAW,CAChE,OAAO,I,CAEX,IAAK,IAAI3N,EAAI,EAAGA,EAAI2N,EAAStL,OAAOO,OAAQ5C,IAAK,CAC7C,MAAMuC,EAAQoL,EAAStL,OAAOrC,GAC9B,MAAM4N,EAAYD,EAAStL,QAAQrC,EAAI,GAAK2N,EAAStL,OAAOO,QAC5D,MAAMiL,EAAS,CACXlD,MAAOpI,EACPqI,IAAKgD,GAET,IAAK,MAAME,KAAQL,EAAO,CACtB,GAAIjD,GAAWsD,EAAMD,GAAS,CAC1B,OAAO,I,GAInB,OAAO,KACX,C,SAEgBE,GAAoBT,EAA4CzL,EAAkBlD,GAC9F,MAAM8O,EAAQD,GAAmBF,EAAsB3O,GAEvD,IAAK,IAAIqB,EAAI,EAAGA,EAAI6B,EAAQQ,OAAOO,OAAQ5C,IAAK,CAC5C,MAAMuC,EAAQV,EAAQQ,OAAOrC,GAC7B,MAAM4N,EAAY/L,EAAQQ,QAAQrC,EAAI,GAAK6B,EAAQQ,OAAOO,QAC1D,MAAMiL,EAAS,CACXlD,MAAOpI,EACPqI,IAAKgD,GAET,IAAK,MAAME,KAAQL,EAAO,CACtB,GAAIjD,GAAWsD,EAAMD,GAAS,CAC1B,OAAO,K,GAKnB,OAAOnK,EAAiB4J,EAAqB9O,cAAeqD,EAChE,C,SAYgBmM,GAAkBV,EAA4CW,EAAuBtP,GACjG,IAAK,MAAMgP,KAAYM,EAAW,CAC9B,GAAIP,GAAqBJ,EAAsBK,EAAS9L,QAASlD,GAAa,CAC1E,OAAO,I,EAGf,OAAO,KACX,CAEM,SAAUuP,GAAwBnB,EAA0ClL,EAAkBlD,EAAqBsP,GACrH,MAAME,EAAkD,GACxD,IAAK,MAAMd,KAAON,EAAM,CACpB,IAAIqB,EAAsC,GAC1C,IAAK,MAAMd,KAAwBD,EAAK,CACpC,MAAMgB,EAAeL,GAAkBV,EAAsBW,EAAWtP,GACxE,GAAIoP,GAAoBT,EAAsBzL,EAASlD,KAAgB0P,EAAc,CACjFD,EAAO1H,KAAK4G,E,EAGpBa,EAAYzH,KAAK0H,E,CAErB,OAAOD,CACX,CAEM,SAAUG,GAAwBlD,EAAe6C,EAAuB9P,EAA4BqL,GACtG,MAAMQ,EAAOtM,KAAKqG,OAAOqH,EAAK/I,OAAOsH,KAAI4B,GAAKA,EAAE/N,KAChD,MAAM0M,EAAOxM,KAAKsG,OAAOoH,EAAK/I,OAAOsH,KAAI4B,GAAKA,EAAE/N,KAChD,MAAMyM,EAAOvM,KAAKqG,OAAOqH,EAAK/I,OAAOsH,KAAI4B,GAAKA,EAAEhO,KAChD,MAAM4M,EAAOzM,KAAKsG,OAAOoH,EAAK/I,OAAOsH,KAAI4B,GAAKA,EAAEhO,KAChD,MAAMoP,EAAS,CACX3C,KAAMA,EACNE,KAAMA,EACND,KAAMA,EACNE,KAAMA,GAGV,MAAMoE,EAAuB,IACtBpQ,EACHyH,YAAazH,EAAWyH,YAAclI,KAAKe,IAAI+K,EAAQ9L,KAAKgB,GAAK,KACjEmH,aAAc1H,EAAW0H,cAG7B,MAAM2I,EAAqB,IACpBrQ,EACHyH,YAAazH,EAAWyH,YACxBC,aAAc1H,EAAW0H,aAAenI,KAAKe,IAAI+K,EAAQ9L,KAAKgB,GAAK,MAGvE,IAAIyP,EAAkD,GACtD,IAAIM,EAAiB,EACrB,IAAK,MAAMlM,KAAS6I,EAAK/I,OAAQ,CAC7B,IAAK,MAAM1D,IAAc,CAAC,OAAQ,CAC9B,MAAMoO,EAAOL,GAAaC,EAAQhO,EAAa4P,EAAuBC,EAAoB7P,EAAY4D,EAAOlC,EAAaC,GAC1H,MAAMoO,EAAuBR,GAAwBnB,EAAM3B,EAAMzM,EAAYsP,GAE7E,MAAMU,EAA0BD,EAAqBE,QAAO,CAACC,EAAKxB,IAAQwB,EAAMxB,EAAIzK,QAAQ,GAC5F,GAAI+L,EAA0BF,EAAgB,CAC1CA,EAAiBE,EACjBR,EAAcO,C,EAGtB,K,CAEJ,OAAOP,CACX,CAEA,SAASW,GAAiBb,EAAsB7F,EAAiBrB,EAAgCgI,GAC7F,MAAMC,EAA0B,GAChC,IAAK,MAAMrB,KAAYM,EAAW,CAC9B,MAAMgB,EAAiBpF,GAAc8D,EAAU5G,GAC/C,MAAMmI,EAAoBxF,GAAeuF,EAAepN,SAAUuG,GAClE,MAAM+G,EAAgBC,GAAaF,GAAoBH,GAEvD,MAAM/E,EAAOtM,KAAKqG,OAAOoL,EAAc9M,OAAOsH,KAAI4B,GAAKA,EAAE/N,KACzD,MAAM0M,EAAOxM,KAAKsG,OAAOmL,EAAc9M,OAAOsH,KAAI4B,GAAKA,EAAE/N,KACzD,MAAMyM,EAAOvM,KAAKqG,OAAOoL,EAAc9M,OAAOsH,KAAI4B,GAAKA,EAAEhO,KACzD,MAAM4M,EAAOzM,KAAKsG,OAAOmL,EAAc9M,OAAOsH,KAAI4B,GAAKA,EAAEhO,KACzD,MAAMqO,EAAc,CAChB5B,KAAMA,EACNE,KAAMA,EACND,KAAMA,EACNE,KAAMA,GAEV6E,EAAOtI,KAAK,CACR7E,QAASqN,EACTtD,YAAaA,G,CAGrB,OAAOoD,CACX,CAEA,SAASK,GAAYhN,GACjB,IAAIiN,EAAM,EACV,IAAK,IAAItP,EAAI,EAAGA,EAAIqC,EAAOO,OAAQ5C,IAAK,CACpC,MAAMuP,EAAOlN,EAAOrC,GACpB,MAAMwP,EAAOnN,GAAQrC,EAAI,GAAKqC,EAAOO,QACrC0M,IAAQE,EAAKhS,EAAI+R,EAAK/R,IAAMgS,EAAKjS,EAAIgS,EAAKhS,E,CAE9C,OAAO+R,EAAM,CACjB,CAEgB,SAAAF,GAAavN,EAAkBkN,GAC3C,MAAM1M,EAASR,EAAQQ,OACvB,MAAMoN,EAAqBJ,GAAYhN,GACvC0M,EAAQA,EAAQrR,KAAK2D,KAAK,IAAMoO,GAAqB,EAAK,GAC1D,MAAMC,EAAuB,GAE7B,IAAK,IAAI1P,EAAI,EAAGA,EAAIqC,EAAOO,OAAQ5C,IAAK,CACpC,MAAM2P,EAAOtN,GAAQrC,EAAI,EAAIqC,EAAOO,QAAUP,EAAOO,QACrD,MAAM2M,EAAOlN,EAAOrC,GACpB,MAAMwP,EAAOnN,GAAQrC,EAAI,GAAKqC,EAAOO,QAGrC,MAAMgN,EAAK,CACPpS,EAAG+R,EAAK/R,EAAImS,EAAKnS,EACjBD,EAAGgS,EAAKhS,EAAIoS,EAAKpS,GAErB,MAAMsS,EAAK,CACPrS,EAAGgS,EAAKhS,EAAI+R,EAAK/R,EACjBD,EAAGiS,EAAKjS,EAAIgS,EAAKhS,GAIrB,MAAMuS,EAAQ,CACVtS,GAAIoS,EAAGrS,EACPA,EAAGqS,EAAGpS,GAEV,MAAMuS,EAAQ,CACVvS,GAAIqS,EAAGtS,EACPA,EAAGsS,EAAGrS,GAIV,MAAMwS,EAAUtS,KAAK2D,KAAKyO,EAAMtS,EAAIsS,EAAMtS,EAAIsS,EAAMvS,EAAIuS,EAAMvS,GAC9D,MAAM0S,EAAUvS,KAAK2D,KAAK0O,EAAMvS,EAAIuS,EAAMvS,EAAIuS,EAAMxS,EAAIwS,EAAMxS,GAE9DuS,EAAMtS,GAAKwS,EACXF,EAAMvS,GAAKyS,EACXD,EAAMvS,GAAKyS,EACXF,EAAMxS,GAAK0S,EAGX,MAAMC,EAAW,CACb1S,EAAGsS,EAAMtS,EAAIuS,EAAMvS,EACnBD,EAAGuS,EAAMvS,EAAIwS,EAAMxS,GAIvB,MAAM4S,EAAiBzS,KAAK2D,KAAK6O,EAAS1S,EAAI0S,EAAS1S,EAAI0S,EAAS3S,EAAI2S,EAAS3S,GACjF2S,EAAS1S,GAAK2S,EACdD,EAAS3S,GAAK4S,EAGd,MAAMC,EAAa,CACf5S,EAAG+R,EAAK/R,EAAI0S,EAAS1S,EAAIuR,EACzBxR,EAAGgS,EAAKhS,EAAI2S,EAAS3S,EAAIwR,GAG7BW,EAAYhJ,KAAK0J,E,CAGrB,MAAO,CACH/N,OAAQqN,EACRnJ,KAAM1E,EAAQ0E,KACd5D,OAAQd,EAAQc,OAChByD,IAAKvE,EAAQuE,IACbwD,QAAS/H,EAAQ+H,QAEzB,CAEgB,SAAAyG,GAA6BjF,EAAe6C,EAAsB9P,EAA4BiK,EAAiB2G,EAAevF,GAC1I,MAAM8G,EAAYlB,GAAahE,EAAM2D,GACrC,MAAMhI,EAAS8C,GAAcyG,GAC7B,MAAMC,EAAkB7G,GAAe3C,EAAOlF,SAAUuG,GAExD,MAAMoI,EAAqB1B,GAAiBb,EAAW7F,EAASrB,EAAOA,OAAQgI,GAE/E,MAAM0B,EAAwBnC,GAAwBiC,EAAiBC,EAAoBrS,EAAYqL,GACvG,MAAMkH,EAAiD,GAEvD,IAAK,MAAMnD,KAASkD,EAAsBE,OAAQ,CAC9C,MAAMC,EAAmBrH,GAAagE,EAAM/O,cAAe4J,GAC3D,MAAMyI,EAAiB,CACnBrT,EAAGoT,EAAiBpT,EAAIuJ,EAAOA,OAAOvJ,EACtCD,EAAGqT,EAAiBrT,EAAIwJ,EAAOA,OAAOxJ,GAE1CmT,EAAkBhK,KAAK,CACnB6G,MAAOA,EAAMA,MACb/O,cAAeqS,EACflS,WAAY4O,EAAM5O,Y,CAG1B,OAAO+R,CACX,CC1UO,MAAMI,GAAsB,CAC/BC,SAAU,CACNC,SAAU,WACVnE,WAAY,cACZC,cAAe,iBACfmE,YAAa,gBAEjBC,YAAa,CACTzM,YAAa,iGACbrB,OAAQ,kBACR+N,OAAQ,SACRC,YAAa,iBAEjBC,YAAa,CACTC,kBAAmB,2BAEvBC,gBAAiB,CACbC,MAAO,6BACPC,kBAAmB,qBACnBhD,eAAgB,yBAChBiD,eAAgB,wBAChBC,qBAAsB,+BACtBC,iBAAkB,4BAClBC,iBAAkB,4BAClBC,SAAU,WACVC,YAAa,wBACbC,0BAA2B,oCAC3BC,wBAAyB,sBACzBC,sBAAuB,oBACvBC,sBAAuB,oBACvBC,aAAc,UACdC,kBAAmB,+EACnBC,kBAAmB,2BACnB5V,KAAM,OACN6V,MAAO,QACPC,UAAW,yBACXC,WAAY,qCACZC,oBAAqB,CACjBC,aAAc,iBACdC,WAAY,eAEhBC,MAAO,CACHC,YAAa,cACbC,WAAY,aACZC,mBAAoB,sBACpBC,oBAAqB,uBACrBC,UAAW,eAEfC,gBAAiB,qCACjBC,aAAc,gBACdC,mBAAoB,gBACpBC,KAAM,OACNC,qBAAsB,CAClB/B,MAAO,wBACPgC,SAAU,YACVC,YAAa,eACbC,QAAS,UACTC,aAAc,gBACdC,gBAAiB,sBACjBC,kBAAmB,yBAEvBC,oBAAqB,4BACrBC,mBAAoB,mBAExBC,QAAS,CACLC,aAAc,CACVC,KAAM,oBACNC,KAAM,oBACNC,MAAO,CACHhJ,KAAM,+KACNiJ,YAAa,uIACbC,OAAQ,iDACRC,KAAM,yEACN3J,IAAK,2EAGb4J,kBAAmB,sBACnBC,kBAAmB,2BACnBC,YAAa,cACbC,qBAAsB,yBACtBC,aAAc,uBACdC,OAAQ,SACR7M,KAAM,OACNI,QAAS,UACT0M,MAAO,QACP/P,MAAO,CACHqG,KAAM,CACF1O,KAAM,OACN+H,YAAa,gCACbJ,UAAW,QAEfgQ,YAAa,CACT3X,KAAM,cACN+H,YAAa,uCACbJ,UAAW,eAEfiQ,OAAQ,CACJ5X,KAAM,SACN+H,YAAa,8BACbJ,UAAW,UAEfkQ,KAAM,CACF7X,KAAM,OACN+H,YAAa,4BACbJ,UAAW,WCxGpB,MAAM0Q,GAAsB,CAC/BhE,SAAU,CACNC,SAAU,UACVnE,WAAY,gBACZC,cAAe,iBACfmE,YAAa,eAEjBC,YAAa,CACTzM,YAAa,uHACbrB,OAAQ,iBACR+N,OAAQ,cACRC,YAAa,2BAEjBC,YAAa,CACTC,kBAAmB,gBAEvBC,gBAAiB,CACbC,MAAO,4BACPC,kBAAmB,qBACnBhD,eAAgB,wBAChBiD,eAAgB,qBAChBC,qBAAsB,8BACtBC,iBAAkB,qBAClBC,iBAAkB,6BAClBC,SAAU,YACVC,YAAa,wBACbC,0BAA2B,qBAC3BC,wBAAyB,kBACzBC,sBAAuB,cACvBC,sBAAuB,qBACvBC,aAAc,aACdC,kBAAmB,8FACnBC,kBAAmB,6BACnB5V,KAAM,OACN6V,MAAO,QACPC,UAAW,kCACXC,WAAY,kDACZC,oBAAqB,CACjBC,aAAc,yBACdC,WAAY,gBAEhBC,MAAO,CACHC,YAAa,YACbC,WAAY,aACZC,mBAAoB,kBACpBC,oBAAqB,YACrBC,UAAW,oBAEfC,gBAAiB,kDACjBC,aAAc,oBACdC,mBAAoB,oBACpBC,KAAM,OACNC,qBAAsB,CAClB/B,MAAO,eACPgC,SAAU,aACVC,YAAa,cACbC,QAAS,WACTC,aAAc,uBACdC,gBAAiB,sBACjBC,kBAAmB,yBAEvBC,oBAAqB,kCACrBC,mBAAoB,2BAExBC,QAAS,CACLC,aAAc,CACVC,KAAM,qBACNC,KAAM,uBACNC,MAAO,CACHhJ,KAAM,wNACNiJ,YAAa,yJACbC,OAAQ,sDACRC,KAAM,wFACN3J,IAAK,qFAGbgK,aAAc,6BACdJ,kBAAmB,0BACnBC,kBAAmB,gCACnBC,YAAa,cACbC,qBAAsB,gCACtBE,OAAQ,SACR7M,KAAM,SACNI,QAAS,cACT0M,MAAO,UACP/P,MAAO,CACHqG,KAAM,CACF1O,KAAM,OACN+H,YAAa,qCACbJ,UAAW,QAEfgQ,YAAa,CACT3X,KAAM,YACN+H,YAAa,0CACbJ,UAAW,aAEfiQ,OAAQ,CACJ5X,KAAM,UACN+H,YAAa,sCACbJ,UAAW,WAEfkQ,KAAM,CACF7X,KAAM,cACN+H,YAAa,mDACbJ,UAAW,kBCxGpB,MAAM2Q,GAAsB,CAC/BjE,SAAU,CACNC,SAAU,SACVnE,WAAY,qBACZC,cAAe,wBACfmE,YAAa,uBAEjBC,YAAa,CACTzM,YAAa,mGACbrB,OAAQ,iBACR+N,OAAQ,UACRC,YAAa,0BAEjBC,YAAa,CACTC,kBAAmB,uBAEvBC,gBAAiB,CACbC,MAAO,kCACPC,kBAAmB,0BACnBhD,eAAgB,4BAChBiD,eAAgB,+BAChBC,qBAAsB,uCACtBC,iBAAkB,oCAClBC,iBAAkB,+BAClBC,SAAU,YACVC,YAAa,iBACbC,0BAA2B,qBAC3BC,wBAAyB,oBACzBC,sBAAuB,4BACvBC,sBAAuB,uBACvBC,aAAc,aACdC,kBAAmB,iFACnBC,kBAAmB,sBACnB5V,KAAM,SACN6V,MAAO,QACPC,UAAW,+BACXC,WAAY,gEACZC,oBAAqB,CACjBC,aAAc,yBACdC,WAAY,UAEhBC,MAAO,CACHC,YAAa,UACbC,WAAY,aACZC,mBAAoB,oBACpBC,oBAAqB,UACrBC,UAAW,gBAEfC,gBAAiB,gEACjBC,aAAc,uBACdC,mBAAoB,mBACpBC,KAAM,MACNC,qBAAsB,CAClB/B,MAAO,0BACPgC,SAAU,UACVC,YAAa,kBACbC,QAAS,UACTC,aAAc,gBACdC,gBAAiB,sBACjBC,kBAAmB,yBAEvBC,oBAAqB,+BACrBC,mBAAoB,qBAExBC,QAAS,CACLC,aAAc,CACVC,KAAM,wBACNC,KAAM,wBACNC,MAAO,CACHhJ,KAAM,oLACNiJ,YAAa,yIACbC,OAAQ,+DACRC,KAAM,0FACN3J,IAAK,iFAGbgK,aAAc,mCACdJ,kBAAmB,oCACnBC,kBAAmB,sCACnBC,YAAa,cACbC,qBAAsB,2BACtBE,OAAQ,UACR7M,KAAM,OACNI,QAAS,SACT0M,MAAO,cACP/P,MAAO,CACHqG,KAAM,CACF1O,KAAM,SACN+H,YAAa,gCACbJ,UAAW,UAEfgQ,YAAa,CACT3X,KAAM,cACN+H,YAAa,qCACbJ,UAAW,eAEfiQ,OAAQ,CACJ5X,KAAM,WACN+H,YAAa,mCACbJ,UAAW,YAEfkQ,KAAM,CACF7X,KAAM,QACN+H,YAAa,6CACbJ,UAAW,YCrG3B,MAAM4Q,GAAqD,CACvDnE,GAAIA,GACJkE,GAAIA,GACJD,GAAIA,IAIF,SAAUG,GAAmBC,GAC/B,MAAMC,EAAcH,GAAgB,MACpC,GAAIE,IAAS,KAAM,CACf,OAAOC,C,CAEX,MAAMC,EAAcJ,GAAgBE,GAGpC,MAAMG,EAAgBC,KAAKC,MAAMD,KAAKE,UAAUL,IAEhD,SAASM,EAAUC,EAAaC,GAC5B,IAAK,MAAM9Z,KAAO8Z,EAAQ,CACtB,GAAIA,EAAO9Z,aAAgB+Z,QAAU/Z,KAAO6Z,EAAQ,CAChDD,EAAUC,EAAO7Z,GAAM8Z,EAAO9Z,G,MAC3B,GAAI8Z,EAAO9Z,KAAS0D,UAAW,CAClCmW,EAAO7Z,GAAO8Z,EAAO9Z,E,GAKjC4Z,EAAUJ,EAAeD,GACzB,OAAOC,CACX,CChCA,MAAMQ,GAAc,CAACnM,EAAKoM,EAAUC,KAChC,MAAMC,EAAQtM,EAAIuM,IAAIH,GACtB,IAAKE,EAAO,CACRtM,EAAIwM,IAAIJ,EAAU,CAACC,GAC3B,MACS,IAAKC,EAAMG,SAASJ,GAAQ,CAC7BC,EAAMvP,KAAKsP,EACnB,GAEA,MAAMK,GAAW,CAACC,EAAIC,KAClB,IAAIC,EACJ,MAAO,IAAIC,KACP,GAAID,EAAW,CACXE,aAAaF,EACzB,CACQA,EAAYG,YAAW,KACnBH,EAAY,EACZF,KAAMG,EAAK,GACZF,EAAG,CACT,EAYL,MAAMK,GAAeC,KAAmB,gBAAiBA,IAAiBA,EAAaD,YACvF,MAAME,GAAkBT,IAAU1M,IAC9B,IAAK,IAAI7N,KAAO6N,EAAIoN,OAAQ,CACxBpN,EAAIwM,IAAIra,EAAK6N,EAAIuM,IAAIpa,GAAKkb,OAAOJ,IACzC,IACG,KACH,MAAMK,GAAsB,KACxB,UAAWC,IAAoB,WAAY,CAGvC,MAAO,EACf,CACI,MAAMC,EAAe,IAAIC,IACzB,MAAO,CACHC,QAAS,IAAMF,EAAaG,QAC5BpB,IAAMH,IACF,MAAMwB,EAAML,IACZ,GAAIK,EAAK,CACLzB,GAAYqB,EAAcpB,EAAUwB,EACpD,GAEQpB,IAAMJ,IACF,MAAMyB,EAAWL,EAAajB,IAAIH,GAClC,GAAIyB,EAAU,CACVL,EAAahB,IAAIJ,EAAUyB,EAASR,OAAOS,GAC3D,CACYX,GAAgBK,EAAa,EAEjCO,MAAO,KACHP,EAAa7U,SAASqV,GAASA,EAAKrV,QAAQmV,KAC5CX,GAAgBK,EAAa,EAEpC,EAGL,MAAMS,GAAUC,UAAgBA,IAAQ,WAAaA,IAAQA,EAC7D,MAAMC,GAAsB,CAACC,EAAcC,EAAe,CAACC,EAAGC,IAAMD,IAAMC,KACtE,MAAMC,EAAiBP,GAAOG,GAC9B,IAAIK,EAAS,IAAIhB,IAAIvB,OAAOwC,QAAQF,GAAkB,KACtD,MAAMG,EAAW,CACbjB,QAAS,GACTnB,IAAK,GACLC,IAAK,GACLuB,MAAO,IAEX,MAAMA,EAAQ,KAGVU,EAAS,IAAIhB,IAAIvB,OAAOwC,QAAQT,GAAOG,IAAiB,KACxDO,EAASZ,MAAMpV,SAASiW,GAAOA,KAAK,EAExC,MAAMlB,EAAU,KAGZiB,EAASjB,QAAQ/U,SAASiW,GAAOA,MACjCb,GAAO,EAEX,MAAMxB,EAAOH,IACTuC,EAASpC,IAAI5T,SAASiW,GAAOA,EAAGxC,KAChC,OAAOqC,EAAOlC,IAAIH,EAAS,EAE/B,MAAMI,EAAM,CAACJ,EAAUC,KACnB,MAAMwC,EAAWJ,EAAOlC,IAAIH,GAC5B,GAAIiC,EAAahC,EAAOwC,EAAUzC,GAAW,CACzCqC,EAAOjC,IAAIJ,EAAUC,GACrBsC,EAASnC,IAAI7T,SAASiW,GAAOA,EAAGxC,EAAUC,EAAOwC,IAC7D,GAEI,MAAMC,SAAgBC,QAAU,YAC1B,GACA,IAAIA,MAAMP,EAAgB,CACxB,GAAAjC,CAAIyC,EAAG5C,GACH,OAAOG,EAAIH,EAC3B,EACY,OAAA6C,CAAQD,GACJ,OAAOE,MAAMC,KAAKV,EAAOrB,OACzC,EACY,wBAAAgC,GACI,MAAO,CACHC,WAAY,KACZC,aAAc,KAElC,EACY,GAAAC,CAAIP,EAAG5C,GACH,OAAOqC,EAAOc,IAAInD,EAClC,EACY,GAAAI,CAAIwC,EAAG5C,EAAUC,GACbG,EAAIJ,EAAUC,GACd,OAAO,IACvB,IAEI,MAAMmD,EAAK,CAACC,EAAWC,KACnBf,EAASc,GAAW1S,KAAK2S,GACzB,MAAO,KACHC,GAAgBhB,EAASc,GAAYC,EAAS,CACjD,EAEL,MAAME,EAAW,CAACxD,EAAUwC,KACxB,MAAMiB,EAAQL,EAAG,OAAO,CAACrd,EAAK2d,KAC1B,GAAI3d,IAAQia,EAAU,CAClBwC,EAAGkB,EACnB,KAIQ,MAAMC,EAAUP,EAAG,SAAS,IAAMZ,EAAGX,GAAOG,GAAchC,MAC1D,MAAO,KACHyD,IACAE,GAAS,CACZ,EAEL,MAAMC,EAAM,IAAIC,KACZ,MAAMC,EAASD,EAAchL,QAAO,CAACiL,EAAQC,KACzC,GAAIA,EAAa3D,IAAK,CAClB0D,EAAOnT,KAAKyS,EAAG,MAAOW,EAAa3D,KACnD,CACY,GAAI2D,EAAa5D,IAAK,CAClB2D,EAAOnT,KAAKyS,EAAG,MAAOW,EAAa5D,KACnD,CACY,GAAI4D,EAAapC,MAAO,CACpBmC,EAAOnT,KAAKyS,EAAG,QAASW,EAAapC,OACrD,CACY,GAAIoC,EAAazC,QAAS,CACtBwC,EAAOnT,KAAKyS,EAAG,UAAWW,EAAazC,SACvD,CACY,OAAOwC,CAAM,GACd,IACH,MAAO,IAAMA,EAAOvX,SAASyX,GAAUA,KAAQ,EAEnD,MAAMtC,EAAe3b,IACjB,MAAM0c,EAAWJ,EAAOlC,IAAIpa,GAC5Bwc,EAASnC,IAAI7T,SAASiW,GAAOA,EAAGzc,EAAK0c,EAAUA,IAAU,EAE7D,MAAO,CACHC,QACAvC,MACAC,MACAgD,KACAI,WACAI,MACAtC,UACAK,QACAD,cACH,EAEL,MAAM6B,GAAkB,CAACU,EAAOC,KAC5B,MAAMzX,EAAQwX,EAAME,QAAQD,GAC5B,GAAIzX,GAAS,EAAG,CACZwX,EAAMxX,GAASwX,EAAMA,EAAMpX,OAAS,GACpCoX,EAAMpX,QACd,GAGA,MAAMuX,GAAc,CAACpC,EAAcC,KAC/B,MAAMrO,EAAMmO,GAAoBC,EAAcC,GAC9CrO,EAAIgQ,IAAI1C,MACR,OAAOtN,CAAG,ECzKd,MAAM8O,MAACA,GAAKc,SAAEA,IAAYY,GAAmB,CACzClR,SAAU,KACVD,UAAW,KACXoR,aAAc,GACdrJ,SAAU,CACNC,SAAU,KACVnE,WAAY,EACZC,cAAe,EACfmE,YAAa,GACboJ,sBAAuB,IAE3BC,gBAAiB,EACjBC,SAAU,QAGdhB,GAAS,YAAavD,IAClByC,GAAMxP,SAAW+M,CAAK,IAG1BuD,GAAS,aAAcvD,IACnByC,GAAMzP,UAAYgN,CAAK,IAG3BuD,GAAS,gBAAiBvD,IACtByC,GAAM2B,aAAepE,CAAK,IAG9BuD,GAAS,YAAavD,IAClByC,GAAM1H,SAAWiF,CAAK,IAG1BuD,GAAS,mBAAoBvD,IACzByC,GAAM6B,gBAAkBtE,CAAK,IAGjCuD,GAAS,YAAavD,IAClByC,GAAM8B,SAAWvE,CAAK,ICxD1B,MAAMxa,GAAY,i9qB,MCsDLgf,GAAO,M,yBAEhBC,OAAiB,GAEjBpU,OAA4BrB,EAE5B7G,WAA6BwH,EAG7B+U,iBAA4B,KAE5BC,aAAwB,MAExBrb,KAAe,EAEfsb,aAA+C,QAE/CzR,QAA0B,KAE1B0R,kBAAmC,KAEnCC,kBAAmC,KAEnC3U,eAAyC,KAEzCrE,gBAA2B,MAE3BiZ,cAAyB,MAEzBhZ,WAA2B,KAE3BiZ,YAAoBtW,EAEpBuW,aAA0C,GAE1CC,wBAAkE,GAElEC,oBAAiD,GAEjDjV,gBAA0C,KAE1CkV,iBAAoD,KAEpD9R,cAAwB,GAExBiR,SAAoB,MAEpBrY,gBAA2D,K,wBAInDmZ,cACAzZ,cACAD,WAEA,iBAAA2Z,GACJ,IAAKrf,KAAKiK,gBAAiB,CACvB,OAAO,I,CAEX,MAAME,IAAEA,EAAGG,KAAEA,GAAStK,KAAKiK,gBAC3B,OAAOK,IAAS,OACVtK,KAAKgf,aAAa7U,GAClBnK,KAAKkf,oBAAoB/U,E,CAGnC,iBAAAmV,GACIhC,GAAS,YAAY,KACjBtd,KAAKuf,oBACLvf,KAAKwf,qBAAqB,IAE9BlC,GAAS,aAAa,KAClBtd,KAAKuf,oBACLvf,KAAKwf,qBAAqB,G,CAIlC,gBAAAC,GACI,GAAIjD,GAAMxP,UAAYwP,GAAMzP,UAAW,CACnC/M,KAAK2e,aAAe,UACpB3e,KAAKwf,sBACLxf,KAAKuf,mB,CAGTG,uBAAsB,KAClB,GAAI1f,KAAKof,cAAe,CACpB,MAAMO,EAAO3f,KAAKof,cAAcQ,wBAChC5f,KAAKof,cAAcrf,MAAQ4f,EAAK5f,MAChCC,KAAKof,cAAcnf,OAAS0f,EAAK1f,OACjCD,KAAK6f,S,KAKT,UAAAC,CAAW/f,EAAeE,GAC9B,GAAID,KAAKof,cAAe,CACpBpf,KAAKof,cAAcrf,MAAQA,EAC3BC,KAAKof,cAAcnf,OAASA,C,CAEhC,GAAID,KAAK2F,cAAe,CACpB3F,KAAK2F,cAAc5F,MAAQA,EAC3BC,KAAK2F,cAAc1F,OAASA,EAC5BD,KAAK0F,WAAa1F,KAAK2F,cAAcxE,WAAW,K,EAIxD,yBAAMqe,GACF,IAAKhD,GAAMxP,WAAawP,GAAMzP,UAAW,CACrC,M,CAEJ/M,KAAK2e,aAAe,UAEpB,GAAI3e,KAAKmf,iBAAkB,CACvB,MAAMY,EACF/f,KAAKmf,iBAAiBa,OAAOhT,WAAawP,GAAMxP,UAChDhN,KAAKmf,iBAAiBa,OAAOjT,YAAcyP,GAAMzP,UACrD,GAAIgT,EAAc,CACd,M,CAEJ/f,KAAKkf,oBAAsB,GAC3Blf,KAAKgf,aAAe,GACpBhf,KAAKiK,gBAAkB,KACvBjK,KAAKkK,eAAiB,KACtBlK,KAAKof,cAAcje,WAAW,OAAO8e,UACjC,EACA,EACAjgB,KAAKof,cAAcrf,MACnBC,KAAKof,cAAcnf,QAEvBD,KAAK0F,YAAYua,UACb,EACA,EACAjgB,KAAK2F,cAAc5F,MACnBC,KAAK2F,cAAc1F,QAEvBD,KAAKkN,QAAU,I,CAEnBlN,KAAKmf,uBAAyBe,EAC1B1D,GAAMxP,SACNwP,GAAMzP,UACN/M,KAAKwe,QAET,IAAKxe,KAAKmf,iBAAkB,CACxBgB,MAAM,0D,CAIV,GAAI3D,GAAM8B,UAAYte,KAAKmf,iBAAkB,CACzC,MAAMiB,EACFpgB,KAAKmf,iBAAiBkB,eAAeC,oBACzC,MAAMC,EAAqB9e,KAAKC,MAAM0e,EAAY,GAElD,MAAMI,EAAmB5D,MAAM2D,GAAoBpgB,KAAK,MACnDuN,KAAI,CAACgP,EAAG+D,KAAE,CACPnP,MAAOtR,KAAKkC,WACZK,cAAe,CACXhB,GAAG,EACHD,GAAG,GAEPoB,WAAY,KACZge,SAAU,MAGlB1gB,KAAKif,wBAA0B,IACxBjf,KAAKif,wBACR,CAAC,iBAAkB,CACfuB,mBACAG,UACI3gB,KAAKmf,iBAAiBkB,eAAeO,cAChCC,kBAAkB,IAAMtc,G,EAMjD,uBAAMgb,GACF,IAAK/C,GAAMxP,WAAawP,GAAMzP,UAAW,CACrC,M,CAEJ,GAAI/M,KAAKmf,iBAAkB,CACvB,MAAMY,EACF/f,KAAKmf,iBAAiBa,OAAOhT,WAAawP,GAAMxP,UAChDhN,KAAKmf,iBAAiBa,OAAOjT,YAAcyP,GAAMzP,UACrD,GAAIgT,EAAc,CACd,M,EAGR/f,KAAKkN,cAAgBqS,EACjB/C,GAAMxP,SACNwP,GAAMzP,UACN/M,KAAKwe,OACLhC,GAAM2B,cAEVne,KAAKqN,cAAgBJ,EAAiBjN,KAAKkN,SAC3ClN,KAAK2e,aAAe,Q,CAGhB,0BAAAmC,CAA2BC,GAC/B,MAAMpB,EAAO3f,KAAK2F,cAAcia,wBAChC,MAAMoB,EAAQD,EAAME,QAAUtB,EAAKuB,KACnC,MAAMC,EAAQJ,EAAMK,QAAUzB,EAAK0B,IACnC,MAAO,CACH9f,EAAGyf,GAASrB,EAAK2B,MAAQ3B,EAAKuB,MAAQlhB,KAAKof,cAAcrf,MACzDuB,EAAG6f,GAASxB,EAAK4B,OAAS5B,EAAK0B,KAAOrhB,KAAKof,cAAcnf,O,CAOjE,aAAM4f,GACF,IACK7f,KAAKof,gBAAkBpf,KAAKkN,UAAYlN,KAAKmf,iBAChD,OAEFnf,KAAK8f,WAAW9f,KAAKkN,QAAQnN,MAAOC,KAAKkN,QAAQjN,QAEjDmD,EAAuB,CACnBzC,IAAKX,KAAKkN,QACV7J,KAAMrD,KAAKqD,KACXxC,OAAQb,KAAKof,e,CAKrB,eAAAoC,CAAgBT,GACZ,GAAIvE,GAAM8B,SAAU,OACpB,IAAKte,KAAK2F,gBAAkB3F,KAAK0F,WAAY,OAG7C,MAAMnE,EAAEA,EAACD,EAAEA,GAAMtB,KAAK8gB,2BAA2BC,GACjD/gB,KAAK8F,WAAa,CAAEvE,IAAGD,KAEvB,MAAMmgB,EAAiBzhB,KAAKqf,oBAE5B,GAAIrf,KAAK+e,YAAYte,OAAS,eAAgB,CAC1C,IAAIihB,EAAY,GAChB,IAAK,IAAI3d,EAAI,EAAGA,EAAI0d,GAAgBrb,OAAOO,OAAQ5C,IAAK,CACpD,MAAM6C,EAAS6a,GAAgBrb,OAAOrC,GACtC,MAAM8C,EAAS4a,GACTrb,QAAQrC,EAAI,GAAK0d,GAAgBrb,OAAOO,QAC9C,MAAMgb,EAAYlgB,KAAK2D,KACnB3D,KAAK4F,IAAI9F,EAAIqF,EAAOrF,EAAG,GAAKE,KAAK4F,IAAI/F,EAAIsF,EAAOtF,EAAG,IAEvD,MAAMsgB,EAAYngB,KAAK2D,KACnB3D,KAAK4F,IAAI9F,EAAIsF,EAAOtF,EAAG,GAAKE,KAAK4F,IAAI/F,EAAIuF,EAAOvF,EAAG,IAEvD,MAAMugB,EAAapgB,KAAK2D,KACpB3D,KAAK4F,IAAIT,EAAOrF,EAAIsF,EAAOtF,EAAG,GAC1BE,KAAK4F,IAAIT,EAAOtF,EAAIuF,EAAOvF,EAAG,IAEtCogB,EAAUjX,KAAK,CACXqX,KAAMH,EAAYC,EAAYC,EAC9BE,KAAM,CAAEnb,SAAQC,W,CAGxB,MAAMmb,EAAcN,EAAUO,MAAK,CAACjG,EAAGC,IAAMD,EAAE8F,KAAO7F,EAAE6F,OAAM,GAC9D,GAAIE,GAAgBA,EAAYF,KAAO,GAAK,CACxC9hB,KAAKiG,gBAAkB+b,EAAYD,I,EAK3C,MAAMG,EAAuBT,GAAgBrb,OAAO+b,WAC/C7b,IACG,MAAMc,EAAW3F,KAAK2D,KAClB3D,KAAK4F,IAAI9F,EAAI+E,EAAM/E,EAAG,GAAKE,KAAK4F,IAAI/F,EAAIgF,EAAMhF,EAAG,IAErD,OAAO8F,EAAW,EAAE,IAK5B,IAAIgb,EAAoB,KACxB,IAAK,MAAMxc,KAAWgU,OAAOyI,OAAOriB,KAAKkf,qBAAsB,CAC3D,GAAIzX,EAAiB,CAAElG,IAAGD,KAAKsE,GAAU,CACrCwc,EAAoB,CAAEjY,IAAKvE,EAAQuE,IAAKG,KAAM,eAC9C,K,EAIR,IAAK8X,EAAmB,CACpB,IAAK,MAAMxc,KAAWgU,OAAOyI,OAAOriB,KAAKgf,cAAe,CACpD,GAAIvX,EAAiB,CAAElG,IAAGD,KAAKsE,GAAU,CACrCwc,EAAoB,CAAEjY,IAAKvE,EAAQuE,IAAKG,KAAM,QAC9C,K,GAMZ,GACItK,KAAKkK,gBACLgY,IAAyBliB,KAAK6e,mBAC9BvF,KAAKE,UAAU4I,KACX9I,KAAKE,UAAUxZ,KAAKkK,gBAC1B,CACElK,KAAK6e,kBAAoBqD,EACzBliB,KAAKkK,eAAiBkY,EACtBpiB,KAAKsiB,c,CAIT,GACItiB,KAAK4e,oBAAsB,MAAQ6C,GACnCzhB,KAAK+e,YAAYte,OAAS,OAC5B,CACEghB,EAAerb,OAAOpG,KAAK4e,mBAAqB,CAAErd,IAAGD,KAErD,GAAImgB,EAAenX,OAAS,QAAUmX,EAAe/a,OAAQ,CACzD,MAAM6b,EAAiB,EAAIviB,KAAKqN,cAChC,MAAMtB,EAAOD,EAAqB2V,EAAerb,SAC5Cmc,EAAiBA,GACtBd,EAAe9T,QAAQ5B,KAAOA,C,CAElC/L,KAAKsiB,c,CAGT,GAAItiB,KAAK6F,gBAAiB,CACtB7F,KAAKsiB,c,EAIL,YAAAA,GACJ,IAAKtiB,KAAK2F,gBAAkB3F,KAAK0F,WAAY,OAG7C1F,KAAK0F,WAAWua,UACZ,EACA,EACAjgB,KAAK2F,cAAc5F,MACnBC,KAAK2F,cAAc1F,QAIvB,IAAK,MAAM2F,KAAWgU,OAAOyI,OAAOriB,KAAKgf,cAAe,CACpD,MAAMhZ,EAAYgE,EACdhK,KAAKiK,gBACLjK,KAAKkK,eACLtE,EAAQuE,IACRvE,EACA5F,KAAKoK,QAGT3E,EAAY,CACRC,WAAY1F,KAAK0F,WACjBC,cAAe3F,KAAK2F,cACpBC,UACAG,YAAaH,EAAQc,OACf1G,KAAKoK,OAAOnB,gBACZjJ,KAAKoK,OAAOpB,cAClBhD,YAEAH,gBAAiB7F,KAAK6F,gBACtBC,WAAY9F,KAAK8F,WACjBI,eAAgBlG,KAAKoK,OAAOlE,eAC5BD,gBAAiBjG,KAAKiG,kBAG1B,MAAMiM,EAAclS,KAAKif,wBAAwBrZ,EAAQuE,KACzD,MAAMqY,EAAsC,CAExC7Y,YAAa3J,KAAKkC,WAAWyH,YAAc3J,KAAKqN,cAChDzD,aAAc5J,KAAKkC,WAAW0H,aAAe5J,KAAKqN,eAEtD,GAAI6E,EAAa,CACb,IAAK,MAAMZ,KAASY,EAAYsO,iBAAkB,CAC9Cve,EACIqP,EACAtR,KAAK0F,WACL8c,EAAoB7Y,YACpB6Y,EAAoB5Y,aACpBhE,EAAQ+H,SAASxB,QACjBvG,EAAQ+H,SAASkL,M,GAOjC,IAAK,MAAMjT,KAAWgU,OAAOyI,OAAOriB,KAAKkf,qBAAsB,CAC3D,MAAMlZ,EAAYgE,EACdhK,KAAKiK,gBACLjK,KAAKkK,eACLtE,EAAQuE,IACRvE,EACA5F,KAAKoK,QAGT3E,EAAY,CACRC,WAAY1F,KAAK0F,WACjBC,cAAe3F,KAAK2F,cACpBC,UAEAC,gBAAiB7F,KAAK6F,gBACtBC,WAAY9F,KAAK8F,WACjBC,YAAaH,EAAQc,OACf1G,KAAKoK,OAAOjB,uBACZnJ,KAAKoK,OAAOlB,qBAClBlD,YACAE,eAAgBlG,KAAKoK,OAAOlE,gB,EAKhC,aAAAuc,CAActY,GAClB,GAAInK,KAAKiK,iBAAiBE,MAAQA,EAAK,CACnCnK,KAAKiK,gBAAkB,I,CAE3B,GAAIjK,KAAKgf,aAAa7U,GAAM,QACjBnK,KAAKgf,aAAa7U,UAClBnK,KAAKif,wBAAwB9U,E,CAExC,GAAInK,KAAKkf,oBAAoB/U,GAAM,QACxBnK,KAAKkf,oBAAoB/U,E,EAKxC,aAAAuY,CAAc3B,GACV,GAAIA,EAAMrH,kBAAkBiJ,iBAAkB,CAC1C,M,CAGJ,GAAI5B,EAAM6B,WAAa5iB,KAAK6F,gBAAiB,CACzC7F,KAAK6F,gBAAkB,KACvB7F,KAAKsiB,eACL,M,CAEJ,GAAIvB,EAAM8B,SAAW7iB,KAAK8e,cAAe,CACrC9e,KAAK8e,cAAgB,KACrB,M,CAEJ,IACKiC,EAAMlhB,MAAQ,UAAYkhB,EAAMlhB,MAAQ,cACzCG,KAAKiK,gBACP,CACE,MAAMwX,EAAiBzhB,KAAKqf,oBAC5B,GAAIoC,EAAe/a,OAAQ,CACvB1G,KAAKyiB,cAAchB,EAAetX,KAClCnK,KAAKsiB,eACL,M,CAEJb,EAAerb,OAAO0c,MACtB9iB,KAAKsiB,eACL,M,CAIJ,MAAMS,EAAahC,EAAMlhB,IAAIkL,cAC7B,MAAMiY,EAAOla,EAAMma,MAAMC,GACrBA,EAAE3a,kBAAkBwC,gBAAkBgY,IAE1C,GAAIC,EAAM,CACNhjB,KAAK+e,YAAciE,C,EAK3B,WAAAG,CAAYpC,GACR,IAAKA,EAAM6B,UAAY5iB,KAAK6F,gBAAiB,CACzC7F,KAAK6F,gBAAkB,MACvB7F,KAAKsiB,c,CAET,IAAKvB,EAAM8B,QAAU7iB,KAAK8e,cAAe,CACrC9e,KAAK8e,cAAgB,K,EAK7B,eAAAsE,CAAgBrC,GACZ,GAAIvE,GAAM8B,SAAU,OACpB,IAAKte,KAAK2F,gBAAkB3F,KAAK0F,WAAY,OAC7C,IAAK1F,KAAK2F,cAAc0d,SAAStC,EAAMrH,QAAiB,OAExD,IAAInY,EAAEA,EAACD,EAAEA,GAAMtB,KAAK8gB,2BAA2BC,GAE/C,GAAI/gB,KAAK+e,YAAYte,OAAS,eAAgB,CAC1C,MAAMc,EAAIvB,KAAKiG,iBAAiBW,OAAOrF,EACnCvB,KAAKiG,iBAAiBY,OAAOtF,EACjC,MAAMD,EAAItB,KAAKiG,iBAAiBW,OAAOtF,EACnCtB,KAAKiG,iBAAiBY,OAAOvF,EACjC,MAAM6K,EAAU1K,KAAK6hB,OAAO/hB,EAAGD,IAAM,IAAMG,KAAKgB,IAChDzC,KAAKujB,oBAAoB,CACrB7J,OAAQ,CACJK,MAAO5N,KAGf,M,CAEJ,GAAInM,KAAK+e,YAAYte,OAAS,SAAU,CACpC,IAAKT,KAAKkK,eAAgB,CACtB,M,CAEJ,MAAMC,IAAEA,EAAGG,KAAEA,GAAStK,KAAKkK,eAC3B,GAAII,IAAS,OAAQ,QACVtK,KAAKgf,aAAa7U,UAClBnK,KAAKif,wBAAwB9U,E,MACjC,GAAIG,IAAS,cAAe,QACxBtK,KAAKkf,oBAAoB/U,E,CAEpCnK,KAAKkK,eAAiB,KACtB,GAAIlK,KAAKiK,iBAAiBE,MAAQA,EAAK,CACnCnK,KAAKiK,gBAAkB,I,CAE3BjK,KAAKsiB,eACL,M,CAEJ,GAAItiB,KAAK+e,YAAYte,OAAS,OAAQ,CAElC,GAAIT,KAAKiK,gBAAiB,CACtB,MAAMwX,EAAiBzhB,KAAKqf,oBAC5B,MAAMmE,EAAa/B,GAAgBrb,OAAO+b,WAAW7b,IACjD,MAAMc,EAAW3F,KAAK2D,KAClB3D,KAAK4F,IAAI9F,EAAI+E,EAAM/E,EAAG,GAAKE,KAAK4F,IAAI/F,EAAIgF,EAAMhF,EAAG,IAErD,OAAO8F,EAAW,EAAE,IAExB,GAAIoc,IAAejgB,WAAaigB,KAAe,EAAI,CAC/CxjB,KAAK4e,kBAAoB4E,EACzB,M,CAGJ,GAAIxjB,KAAKkK,eAAgB,CACrBlK,KAAKiK,gBAAkBjK,KAAKkK,eAC5B,M,EAGRlK,KAAKiK,gBAAkB,KACvBjK,KAAKsiB,eACL,M,CAGJ,IAAKtiB,KAAKiK,iBAAmBjK,KAAKqf,qBAAqB3Y,OAAQ,CAE3D,MAAM+c,EAAsB,CACxBtZ,IAAKuZ,IACLtd,OAAQ,CAAC,CAAE7E,IAAGD,MACdgJ,KAAMtK,KAAK+e,YAAYte,KACvBiG,OAAQ,OAEZ,IAAIyD,EACJ,GAAInK,KAAK+e,YAAYte,OAAS,OAAQ,CAClCT,KAAKgf,aAAe,IACbhf,KAAKgf,aACR,CAACyE,EAAWtZ,KAAMsZ,GAEtBtZ,EAAMsZ,EAAWtZ,G,MACd,GAAInK,KAAK+e,YAAYte,OAAS,cAAe,CAChDT,KAAKkf,oBAAsB,IACpBlf,KAAKkf,oBACR,CAACuE,EAAWtZ,KAAMsZ,GAEtBtZ,EAAMsZ,EAAWtZ,G,CAErBnK,KAAKiK,gBAAkB,CAAEE,MAAKG,KAAMtK,KAAK+e,YAAYte,MACrDT,KAAKsiB,eACL,M,CAGJ,MAAMnY,IAAEA,EAAGG,KAAEA,GAAStK,KAAKiK,gBAC3B,MAAMwX,EAAiBnX,IAAS,OAC1BtK,KAAKgf,aAAa7U,GAClBnK,KAAKkf,oBAAoB/U,GAE/B,GAAIsX,EAAe/a,OAAQ,CACvB,M,CAIJ,GAAI+a,EAAerb,OAAOO,OAAS,EAAG,CAClC,MAAMgd,EAAalC,EAAerb,OAAO,GACzC,MAAMgB,EAAW3F,KAAK2D,KAClB3D,KAAK4F,IAAI9F,EAAIoiB,EAAWpiB,EAAG,GAAKE,KAAK4F,IAAI/F,EAAIqiB,EAAWriB,EAAG,IAG/D,GAAI8F,EAAW,GAAI,CACfpH,KAAK4jB,eACL,M,EAKR,GAAI7C,EAAM6B,UAAYnB,GAAgBrb,OAAOO,QAAU,EAAG,CACtD,MAAMG,EAAiBlC,EAAgC,CACnDrD,IACAD,IACAuD,UACI4c,EAAerb,OAAOqb,EAAerb,OAAOO,OAAS,GACzD7B,gBACI2c,EAAerb,OAAOqb,EAAerb,OAAOO,OAAS,KAE7DpF,EAAIuF,EAAevF,EACnBD,EAAIwF,EAAexF,C,CAGvBmgB,EAAerb,OAAS,IAAIqb,EAAerb,OAAQ,CAAE7E,IAAGD,MACxDtB,KAAKsiB,c,CAIT,aAAAuB,GACI7jB,KAAK4e,kBAAoB,I,CAGrB,YAAAgF,GACJ,MAAMnC,EAAiBzhB,KAAKqf,oBAC5B,GACIoC,EAAerb,OAAOO,QAAU,IAC/B3G,KAAK+e,YAAYte,OAAS,QACvBT,KAAK+e,YAAYte,OAAS,eAChC,CACEghB,EAAe/a,OAAS,I,CAG5B,GAAI+a,EAAenX,OAAS,OAAQ,CAEhC,MAAMiY,EAAiB,EAAIviB,KAAKqN,cAChC,MAAMtB,EAAOD,EAAqB2V,EAAerb,SAC5Cmc,EAAiBA,GACtB,MAAMuB,EAAY5U,GACduS,EACAzhB,KAAKmf,kBAAkBkB,eAAejR,iBACtCpP,KAAKkN,QAAQb,OACbrM,KAAKof,eAGT,GAAI0E,EAAW,CACXrC,EAAe9T,QAAU,CACrB5B,OACAI,QAAS2X,EAAUC,eACnBlL,MAAOiL,EAAUE,a,KAElB,CACHvC,EAAe9T,QAAU,CACrB5B,OACAI,QAAS,EACT0M,MAAO,E,CAIf7Y,KAAKikB,gB,CAGTjkB,KAAKsiB,eACLtiB,KAAK+e,YAAc5W,C,CAGf,oBAAAuQ,GACJ,MAAM+I,EAAiBzhB,KAAKqf,oBAE5B,IAAKoC,EAAe9T,QAAS,CACzB,M,CAGJ,GAAI3N,KAAKif,wBAAwBwC,EAAetX,KAAM,QAC3CnK,KAAKif,wBAAwBwC,EAAetX,I,CAGvD,MAAMqY,EAAsC,IACrCxiB,KAAKkC,WACRyH,YAAa3J,KAAKkC,WAAWyH,YAAc3J,KAAKqN,cAChDzD,aAAc5J,KAAKkC,WAAW0H,aAAe5J,KAAKqN,eAEtD,MAAMyF,EAAQxO,EAAetE,KAAKqN,cAClC,MAAM6E,EAAckC,GAChBqN,EACA7H,OAAOyI,OAAOriB,KAAKkf,qBACnBsD,EACAf,EAAe9T,SAASxB,QACxB2G,EACA2O,EAAe9T,SAASkL,OAE5B7Y,KAAKif,wBAA0B,IACxBjf,KAAKif,wBACR,CAACwC,EAAetX,KAAM,CAClBqW,iBAAkBtO,EAClByO,UAAWc,EAAe9T,SAASuW,mBAAmBC,MACjDtD,kBAAkB,IACnB7gB,KAAKmf,iBAAiBkB,eAAeO,cAChCC,kBAAkB,IACvBtc,IAGZvE,KAAKsiB,c,CAGD,iBAAA8B,CAAkBrD,GACtB,MAAMrH,EAASqH,EAAMrH,OACrB,MAAMb,EAAQwL,WAAW3K,EAAOK,OAChC,MAAM0H,EAAiBzhB,KAAKqf,oBAC5B,GAAIoC,EAAgB,CAChBzhB,KAAKgf,aAAayC,EAAetX,KAAKwD,QAAQkL,MAAQA,C,CAE1D,GACI4I,EAAenX,OAAS,QACxBtK,KAAKif,wBAAwBwC,EAAetX,KAC9C,CACEnK,KAAK0Y,uBACL,M,EAIA,mBAAA6K,CAAoBxC,GACxB,MAAMrH,EAASqH,EAAMrH,OACrB,MAAMvN,EAAUkY,WAAW3K,EAAOK,OAClC,MAAM0H,EAAiBzhB,KAAKqf,oBAC5B,GAAIoC,EAAgB,CAChBzhB,KAAKgf,aAAayC,EAAetX,KAAKwD,QAAQxB,QAAUA,C,CAE5D,GACIsV,EAAenX,OAAS,QACxBtK,KAAKif,wBAAwBwC,EAAetX,KAC9C,CACEnK,KAAK0Y,uBACL,M,EAIA,gBAAA4L,CAAiBtB,GACrBhjB,KAAK+e,YAAciE,C,CAGf,cAAAiB,GACJ,MAAM7E,EAAgBpf,KAAKukB,GAAGC,cAAc,oBAC5C,GAAIpF,EAAe,CACfA,EAAcqF,eAAe,CAAEC,SAAU,U,EAIzCC,oBAAsB,KAC1B3kB,KAAK0e,aAAe,IAAI,EAGpBkG,oBAAsB,KAC1B5kB,KAAK0e,aAAe,KAAK,EAGrBmG,mBAAsB9D,IAC1BvE,GAAM1H,SAAWiM,EAAM+D,OACvBtI,GAAM6B,iBAAiB,EAG3B,MAAA1e,GACI,MAAMujB,EAAIjK,GAAmBuD,GAAM1H,SAASC,UAC5C,MAAM0M,EAAiBzhB,KAAKqf,oBAC5B,OACIzf,EAAA,OAAAC,IAAA,2CACIQ,MAAM,gEACN0kB,GAAG,YAEF/kB,KAAKye,mBAAqBjC,GAAM8B,UAC7B1e,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,mCACN6iB,EAAEnL,QAAQC,aAAaG,MAAMhJ,KAAM,IACpCvP,EAAA,UAAAC,IAAA,2CACIQ,MAAM,+FACN2kB,QAAS,IAAMhlB,KAAKskB,iBAAiB7b,IAErC7I,EAAe,iBAAAC,IAAA,2CAAAY,KAAK,QAAQhB,OAAQ,QAC9B,IACTyjB,EAAEnL,QAAQC,aAAaG,MAAMC,YAAa,IAC3CxY,EAAA,UAAAC,IAAA,2CACIQ,MAAM,+FACN2kB,QAAS,IACLhlB,KAAKskB,iBAAiB3b,IAE1B/I,EAAe,iBAAAC,IAAA,2CAAAY,KAAK,gBAAgBhB,OAAQ,QACtC,IACTyjB,EAAEnL,QAAQC,aAAaG,MAAME,OAAQ,IACtCzY,EAAA,UAAAC,IAAA,2CACIQ,MAAM,+FACN2kB,QAAS,IAAMhlB,KAAKskB,iBAAiB1b,IAErChJ,EAAe,iBAAAC,IAAA,2CAAAY,KAAK,SAAShB,OAAQ,QAC/B,IACTyjB,EAAEnL,QAAQC,aAAaG,MAAMG,KAAM,IACpC1Y,EAAA,UAAAC,IAAA,2CACIQ,MAAM,+FACN2kB,QAAS,IAAMhlB,KAAKskB,iBAAiBnc,IAErCvI,EAAe,iBAAAC,IAAA,2CAAAY,KAAK,OAAOhB,OAAQ,QAC7B,IACTyjB,EAAEnL,QAAQC,aAAaG,MAAMxJ,KAGtC/O,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,sDACLmc,GAAM8B,WAAate,KAAKye,iBAElB7e,EAAA,UACIS,MAAM,sFACN2kB,QAAS,IAAMhlB,KAAKye,iBAAmB,OAEtCyE,EAAEnL,QAAQC,aAAaE,MAI5BtY,EAAA,UACIS,MAAM,sFACN2kB,QAAS,IAAMhlB,KAAKye,iBAAmB,MAEtCyE,EAAEnL,QAAQC,aAAaC,OAGpCrY,EACI,UAAAC,IAAA,2CAAAQ,MAAM,qEACN2kB,QAAShlB,KAAK2kB,qBAEd/kB,EAAA,iBAAAC,IAAA,+CAGRD,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,WACLmc,GAAM8B,UACJ1e,EAAA,YAAAC,IAAA,2CACIkf,YAAa/e,KAAK+e,YAClBkG,aAAejC,GAAShjB,KAAKskB,iBAAiBtB,MAIzDhjB,KAAK2e,eAAiB,SACnB/e,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,UACPT,EAAA,KAAAC,IAAA,2CACIQ,MAAM,iFACN6kB,MAAO,CACHC,gBAAiB,uBAGpBjC,EAAEnL,QAAQS,oBAIrBgE,GAAMxP,UAAYwP,GAAMzP,WACtB/M,KAAK2e,eAAiB,WACtB/e,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,+EACPT,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,gFAInBT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0EACPT,EAAA,OAAAC,IAAA,2CACIQ,MAAM,mFACN6kB,MAAO,CACHE,YAAaplB,KAAKkN,QACZ,GAAGlN,KAAKkN,QAAQnN,SAASC,KAAKkN,QAAQjN,SACtC,QAGVL,EACI,UAAAC,IAAA,2CAAAwlB,IAAMd,GAAOvkB,KAAKof,cAAgBmF,EAClClkB,MAAM,kDACN0kB,GAAG,kBACHG,MAAO,CACH5c,OAAQtI,KAAK+e,YAAYzW,UAIjC1I,EAAA,UAAAC,IAAA,2CACIwlB,IAAMd,GAAOvkB,KAAK2F,cAAgB4e,EAClClkB,MAAM,kDACN6kB,MAAO,CACH5c,OAAQtI,KAAK+e,YAAYzW,UAIhCmZ,GAAgB9T,SACb/N,EAAA,UAAAC,IAAA,2CACIQ,MAAM,6IACN2kB,QAAS,IAAMhlB,KAAK0Y,wBAEnBwK,EAAEnL,QAAQW,wBAM3B9Y,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,UACPT,EACI,mBAAAC,IAAA,2CAAA6Y,qBAAsB,IAAM1Y,KAAK0Y,uBACjC4M,eAAgB,IACZtlB,KAAKskB,iBAAiBzb,OAIhC2T,GAAM8B,UACJ1e,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,UACPT,EAAA,uBAAAC,IAAA,2CACI4hB,eAAgBA,EAChBjB,iBAAkBiB,EACZzhB,KACGif,wBAAwBwC,EAAetX,MACtCqW,iBACJjd,UACNggB,oBAAsBxC,GAClB/gB,KAAKujB,oBAAoBxC,GAC7BqD,kBAAoBrD,GAChB/gB,KAAKokB,kBAAkBrD,GAC3BrI,qBAAsB,IAClB1Y,KAAK0Y,0BAIrB9Y,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,UACPT,EAAA,qBAAAC,IAAA,2CACI0lB,cAAevlB,KAAKif,wBACpBD,aAAchf,KAAKgf,aACnBE,oBAAqBlf,KAAKkf,uBAGjClf,KAAK0e,cACF9e,EAAA,kBAAAC,IAAA,2CACIiV,SAAU0H,GAAM1H,SAChB0Q,QAASxlB,KAAK4kB,oBACda,OAAQzlB,KAAK6kB,qB,wHCp8BrC,MAAMtlB,GAAY,i9qB,MCWLmmB,GAAW,M,iDAKpBlH,OAAiB,GAEjBzJ,SAAqB,KAGrB4Q,SAAoB,MAEpBC,aAAuD,KAEvDlY,IAA8B,KAE9BmY,OAA0D,KAE1DC,OAAoC,KAEpC3e,OAAiB,GAEjB6F,SAA0B,KAE1BD,UAA2B,KAEnBgZ,aACAC,WAER,iBAAA1G,GACItf,KAAKimB,sB,CAGD,0BAAMA,GACV,IACI,MAAMC,EAAS,IAAIC,EAAO,CACtB3H,OAAQxe,KAAKwe,OACb4H,UAAW,CAAC,SAAU,OAAQ,YAGlC,MAAOC,EAAQC,EAAM5J,SAAW6J,QAAQC,IAAI,CACxCN,EAAOO,cAAc,UACrBP,EAAOO,cAAc,QACrBP,EAAOO,cAAc,YAGzBzmB,KAAK2lB,SAAW,KAChB3lB,KAAK0mB,uBAAuBL,GAC5BrmB,KAAK2mB,cAAcL,E,CACrB,MAAOM,GACLC,QAAQD,MAAM,8BAA+BA,E,EAI7C,sBAAAF,CAAuBL,GAC3B,IAAKrmB,KAAK+lB,eAAiB/lB,KAAK2lB,SAAU,OAC1C3lB,KAAK4lB,aAAe,IAAIS,EAAOS,aAAa9mB,KAAK+lB,cAEjD/lB,KAAK4lB,aAAamB,YAAY,iBAAiB,KAC3C,MAAMC,EAAQhnB,KAAK4lB,cAAcqB,WACjC,GAAID,GAAOE,UAAUC,SAAU,CAC3B,MAAM3a,EAAMwa,EAAME,SAASC,SAAS3a,MACpC,MAAMI,EAAMoa,EAAME,SAASC,SAASva,MAEpC5M,KAAKgN,SAAWR,EAChBxM,KAAK+M,UAAYH,EAEjB5M,KAAK0N,KAAK0Z,UAAU,CAAE5a,MAAKI,QAC3B5M,KAAK0N,KAAK2Z,QAAQ,G,KAKtB,aAAAV,CACJL,GAEA,IAAKtmB,KAAKgmB,aAAehmB,KAAK2lB,SAAU,OAExC3lB,KAAK0N,IAAM,IAAI4Y,EAAKnL,IAAInb,KAAKgmB,WAAY,CACrChG,OAAQ,CACJxT,IAAKgQ,GAAMxP,UAAY,mBACvBJ,IAAK4P,GAAMzP,WAAa,mBAE5B1J,KAAM,GACNikB,eAAgB,MAChBC,kBAAmB,MACnBC,UAAW,YACXC,MAAO,MACPC,KAAM,IAKV1nB,KAAK0N,IAAIqZ,YAAY,SAAUY,IAC3B,GAAIA,EAAErb,OAAQ,CACV,MAAME,EAAMmb,EAAErb,OAAOE,MACrB,MAAMI,EAAM+a,EAAErb,OAAOM,MAErB5M,KAAKgN,SAAWR,EAChBxM,KAAK+M,UAAYH,EAEjB5M,KAAK4nB,kBAAkBpb,EAAKI,E,KAKpC,GAAI4P,GAAMxP,UAAYwP,GAAMzP,UAAW,CACnC/M,KAAK4nB,kBAAkBpL,GAAMxP,SAAUwP,GAAMzP,U,EAI7C,iBAAA6a,CAAkBpb,EAAaI,GACnC,IAAK5M,KAAK0N,IAAK,OAGf,GAAI1N,KAAK8lB,OAAQ,CACb9lB,KAAK8lB,OAAOsB,UAAU,CAAE5a,MAAKI,O,KAC1B,CACH,MAAMkZ,EAAS,IAAI+B,OAAOvB,KAAKwB,OAAO,CAClC/hB,YAAa,UACbgiB,cAAe,GACfC,aAAc,EACdhiB,UAAW,2BACXiiB,YAAa,IACbva,IAAK1N,KAAK0N,IACVsS,OAAQ,CAAExT,MAAKI,OACfzF,OAAQnH,KAAKmH,SAEjBnH,KAAK8lB,OAASA,C,EAId,kBAAAoC,CAAmBP,GACvB,MAAM5N,EAAQsK,WAAYsD,EAAEjO,OAA4BK,OACxD/Z,KAAKmH,OAAS4S,EACd,GAAI/Z,KAAK8lB,OAAQ,CACb9lB,KAAK8lB,OAAOqC,UAAUpO,E,EAItB,oBAAAqO,GACJvB,QAAQwB,IACJ,sBACAroB,KAAKgN,SACLhN,KAAK+M,UACL/M,KAAKmH,QAET,GAAInH,KAAKgN,WAAa,MAAQhN,KAAK+M,YAAc,KAAM,CACnDyP,GAAMxP,SAAWhN,KAAKgN,SACtBwP,GAAMzP,UAAY/M,KAAK+M,UACvByP,GAAM2B,aAAene,KAAKmH,M,EAIlC,MAAAxH,GACI,MAAMujB,EAAIjK,GAAmBjZ,KAAK+U,UAClC,OACInV,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,yCACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,YACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,sDACPT,EAAA,eAAAC,IAAA,8CAEJD,EAAA,SAAAC,IAAA,2CACIwlB,IAAMd,GAAOvkB,KAAK+lB,aAAexB,EACjCja,KAAK,OACLge,YAAapF,EAAE9N,YAAYC,kBAC3BhV,MAAM,6FAGdT,EAAA,OAAAC,IAAA,2CACIQ,MAAM,yBACN6kB,MAAO,CACHC,gBAAiB,uBAGpBjC,EAAEjO,YAAYzM,aAEnB5I,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,2BACPT,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,qCACR6iB,EAAEjO,YAAY9N,QAEnBvH,EAAA,SAAAC,IAAA,2CACIyK,KAAK,QACLxC,IAAI,IACJC,IAAI,MACJgS,MAAO/Z,KAAKmH,OACZohB,QAAUZ,GAAM3nB,KAAKkoB,mBAAmBP,GACxCtnB,MAAM,6VAEVT,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,yBAAyBL,KAAKmH,OAAM,MAGpDvH,EAAA,OAAAC,IAAA,2CACIwlB,IAAMd,GAAOvkB,KAAKgmB,WAAazB,EAC/BlkB,MAAM,wDAGVT,EACI,UAAAC,IAAA,2CAAAmlB,QAAS,IAAMhlB,KAAKooB,uBACpB/nB,MAAM,6FAEL6iB,EAAEjO,YAAYC,Q,eCpNnC,MAAM3V,GAAY,i9qB,MCOLipB,GAAQ,M,yBAEjB/oB,OAAkB,MAElBC,KAAe,GAEf,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAM,6BACNC,MAAOC,KAAKN,KACZO,OAAQD,KAAKN,KACbQ,QAAQ,YACRC,KAAK,OACLC,OAAO,eACM,mBAAG,iBACD,QAAO,kBACN,QAChBC,MAAO,uCACHL,KAAKP,OAAS,eAAiB,MAGnCG,EAAM,QAAAC,IAAA,2CAAAS,EAAE,aACRV,EAAM,QAAAC,IAAA,2CAAAS,EAAE,mBACRV,EAAM,QAAAC,IAAA,2CAAAS,EAAE,kBACRV,EAAM,QAAAC,IAAA,2CAAAS,EAAE,aACRV,EAAM,QAAAC,IAAA,2CAAAS,EAAE,iBACRV,EAAA,QAAAC,IAAA,2CAAMS,EAAE,iB,eClCxB,MAAMf,GAAY,i9qB,MCOLkpB,GAAgB,M,yBAEzBhpB,OAAkB,MAElBC,KAAe,GAEf,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAM,6BACNC,MAAOC,KAAKN,KACZO,OAAQD,KAAKN,KACbQ,QAAQ,YACRC,KAAK,OACLC,OAAO,eACM,mBAAG,iBACD,QAAO,kBACN,QAChBC,MAAO,yDACHL,KAAKP,OAAS,eAAiB,MAGnCG,EAAM,QAAAC,IAAA,2CAAAS,EAAE,+OACRV,EAAA,QAAAC,IAAA,2CAAMS,EAAE,Y,eC9BxB,MAAMf,GAAY,i9qB,MCSLmpB,GAAc,M,yBAEvBhQ,qBAEA4M,eAEA,MAAA3lB,GACI,MAAMujB,EAAIjK,GAAmBuD,GAAM1H,SAASC,UAC5C,OACInV,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,iCACPT,EAAA,UAAAC,IAAA,2CACIQ,MAAM,4GACN2kB,QAAS,IAAMhlB,KAAKslB,kBAEnBpC,EAAEnL,QAAQY,cAEf/Y,EACI,UAAAC,IAAA,2CAAAQ,MAAM,iHACN2kB,QAAS,IAAMhlB,KAAK0Y,wBAEnBwK,EAAEnL,QAAQW,sB,eC7B/B,MAAMnZ,GAAY,i9qB,MCWLopB,GAAkB,M,yBAE3BlH,eAEAjB,iBAEA+C,oBAEAa,kBAEA1L,qBAEA,MAAA/Y,GACI,MAAMujB,EAAIjK,GAAmBuD,GAAM1H,SAASC,UAE5C,OACInV,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,0DACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,uCACPT,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,0CACL6iB,EAAEnL,QAAQU,aAEdzY,KAAKyhB,gBAAgB9T,QAEd/N,EAAK,OAAAS,MAAM,aACPT,EAAA,WACIA,EAAK,OAAAS,MAAM,0BACPT,EAAA,WACIA,EAAI,MAAAS,MAAM,qCACL6iB,EAAEnL,QAAQhM,MAEfnM,EAAG,KAAAS,MAAM,WACJL,KAAKyhB,eAAe9T,SACf5B,KACD6c,QAAQ,GAAE,QAGvBhpB,EAAA,WACIA,EAAA,WACIA,EAAI,MAAAS,MAAM,qCACL6iB,EAAEnL,QAAQa,QAEfhZ,EAAA,KAAGS,MAAM,WACJL,KAAKwgB,kBACA7Z,QAAU,OAMpC/G,EAAA,WACIA,EAAI,MAAAS,MAAM,qCACL6iB,EAAEnL,QAAQ5L,SAEfvM,EAAK,OAAAS,MAAM,8DACPT,EACI,SAAAS,MAAM,iBACNwoB,UAAYlB,IACR,GAAIA,EAAE9nB,MAAQ,QAAS,CACnBG,KAAKujB,oBACDoE,GAEHA,EAAEjO,OACEoP,M,GAGb/O,MAAO/Z,KAAKyhB,eACP9T,SACCxB,UACR,IACAD,EACElM,KAAKyhB,eAAe9T,SACdxB,SAER,KACNvM,EACI,SAAA0K,KAAK,QACLxC,IAAI,IACJC,IAAI,MACJ1H,MAAM,2VACN0Z,MAAO/Z,KAAKyhB,eACP9T,SAASxB,QACdoc,QAAUZ,IACN,MAAMjO,EAASiO,EACVjO,OACL,MAAMvN,EAAUkY,WACZ3K,EAAOK,OAEX/Z,KAAKyhB,eAAe9T,QACfxB,QAAUA,EACf,GACInM,KAAKyhB,eACInX,OACL,QACJtK,KAAKwgB,iBACP,CACExgB,KAAK0Y,sB,MAKrB9Y,EAAA,WACIA,EAAI,MAAAS,MAAM,0CACL6iB,EAAEnL,QAAQc,OAEfjZ,EAAK,OAAAS,MAAM,8DACPT,EACI,SAAAS,MAAM,iBACNwoB,UAAYlB,IACR,GAAIA,EAAE9nB,MAAQ,QAAS,CACnBG,KAAKokB,kBACDuD,GAEHA,EAAEjO,OACEoP,M,GAGb/O,MAAO/Z,KAAKyhB,eACP9T,SACCkL,QAGR,KACNjZ,EACI,SAAA0K,KAAK,QACLxC,IAAI,IACJC,IAAI,KACJ1H,MAAM,2VACN0Z,MAAO/Z,KAAKyhB,eACP9T,SAASkL,MACd0P,QAAUZ,IACN,MAAMjO,EAASiO,EACVjO,OACL,MAAMb,EAAQwL,WACV3K,EAAOK,OAEX/Z,KAAKyhB,eAAe9T,QACfkL,MAAQA,EACb,GACI7Y,KAAKyhB,eACInX,OACL,QACJtK,KAAKwgB,iBACP,CACExgB,KAAK0Y,sB,OAQzB9Y,EAAA,KAAGS,MAAM,6BACJ6iB,EAAEnL,QAAQQ,oB,eCnK3C,MAAMhZ,GAAY,i9qB,MCOLwpB,GAAU,M,yBAEnBtpB,OAAkB,MAElBC,KAAe,GAEf,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAM,6BACNC,MAAOC,KAAKN,KACZO,OAAQD,KAAKN,KACbQ,QAAQ,YACRC,KAAK,OACLC,OAAO,eACM,mBAAG,iBACD,QAAO,kBACN,QAChBC,MAAO,2CACHL,KAAKP,OAAS,eAAiB,MAGnCG,EAAM,QAAAC,IAAA,2CAAAS,EAAE,qBACRV,EAAA,UAAAC,IAAA,2CAAQmpB,GAAG,KAAKC,GAAG,KAAKC,EAAE,M,eC9B1C,MAAM3pB,GAAY,i9qB,MCOL4pB,GAAY,M,yBAErB1pB,OAAkB,MAElBC,KAAe,GAEf,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAM,6BACNC,MAAOC,KAAKN,KACZO,OAAQD,KAAKN,KACbQ,QAAQ,YACRC,KAAK,OACLC,OAAO,eACM,mBAAG,iBACD,QAAO,kBACN,QAChBC,MAAO,+CACHL,KAAKP,OAAS,eAAiB,MAGnCG,EAAM,QAAAC,IAAA,2CAAAS,EAAE,0jBACRV,EAAA,UAAAC,IAAA,2CAAQmpB,GAAG,KAAKC,GAAG,KAAKC,EAAE,M,eC9B1C,MAAM3pB,GAAY,i9qB,MCUL6pB,GAAa,M,6EAEtBtU,SAGQuU,aAGRC,MAGA3mB,KAEA,iBAAA2c,GACItf,KAAKqpB,aAAe,IAAKrpB,KAAK8U,S,CAG1ByU,YAAc,KAClB,GACIjQ,KAAKE,UAAUxZ,KAAKqpB,gBAAkB/P,KAAKE,UAAUxZ,KAAK8U,UAC5D,CACE,GACI0U,QACI,+DAEN,CACExpB,KAAKspB,MAAMG,M,MAEZ,CACHzpB,KAAKspB,MAAMG,M,GAIXC,WAAa,KACjB1pB,KAAK2C,KAAK8mB,KAAKzpB,KAAKqpB,cACpBrpB,KAAKspB,MAAMG,MAAM,EAGbE,kBAAoB,CACxB9pB,EACAka,KAEA/Z,KAAKqpB,aAAe,IACbrpB,KAAKqpB,aACRxpB,CAACA,GAAMka,EACV,EAGL,MAAApa,GACI,MAAMujB,EAAIjK,GAAmBuD,GAAM1H,SAASC,UAC5C,OACInV,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,8EACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,gDACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0CACPT,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,yBAAqC,YAC/CT,EACI,UAAAC,IAAA,2CAAAQ,MAAM,uDACN2kB,QAAShlB,KAAKupB,aAEd3pB,EAAA,OAAAC,IAAA,2CACIC,MAAM,6BACNC,MAAM,KACNE,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,SAEhBR,EAAA,QAAAC,IAAA,2CAAM+pB,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,OAC/BnqB,EAAA,QAAAC,IAAA,2CAAM+pB,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,UAK3CnqB,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,aACPT,EAAA,OAAAC,IAAA,4CACID,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAEpO,SAASC,UAEhBnV,EAAA,UAAAC,IAAA,2CACIQ,MAAM,kCACNkoB,QAAUZ,GACN3nB,KAAK2pB,kBACD,WACChC,EAAEjO,OACEK,QAGbna,EACI,UAAAC,IAAA,2CAAAka,MAAM,KACNiQ,SAAUhqB,KAAKqpB,aAAatU,WACxB,MAGC,WACTnV,EACI,UAAAC,IAAA,2CAAAka,MAAM,KACNiQ,SAAUhqB,KAAKqpB,aAAatU,WACxB,MAGC,WACTnV,EACI,UAAAC,IAAA,2CAAAka,MAAM,KACNiQ,SAAUhqB,KAAKqpB,aAAatU,WACxB,MAAI,aAOpBnV,EAAA,OAAAC,IAAA,4CACID,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAEpO,SAASlE,YAEhBhR,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACLjK,MAAM,kCACN0Z,MAAO/Z,KAAKqpB,aAAazY,WACzB2X,QAAUZ,GACN3nB,KAAK2pB,kBACD,aACAtF,WACKsD,EAAEjO,OACEK,WAMzBna,EAAA,OAAAC,IAAA,4CACID,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAEpO,SAASjE,eAEhBjR,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACLjK,MAAM,kCACN0Z,MAAO/Z,KAAKqpB,aAAaxY,cACzB0X,QAAUZ,GACN3nB,KAAK2pB,kBACD,gBACAtF,WACKsD,EAAEjO,OACEK,WAMzBna,EAAA,OAAAC,IAAA,4CACID,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAEpO,SAASE,aAEhBpV,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACLjK,MAAM,kCACN0Z,MAAO/Z,KAAKqpB,aAAarU,YACzBuT,QAAUZ,GACN3nB,KAAK2pB,kBACD,cACAtF,WACKsD,EAAEjO,OACEK,YAO7Bna,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,+BACPT,EACI,UAAAC,IAAA,2CAAAQ,MAAM,wEACN2kB,QAAShlB,KAAKupB,aAGT,UACT3pB,EAAA,UAAAC,IAAA,2CACIQ,MAAM,oFACN2kB,QAAShlB,KAAK0pB,YAGT,kB,eClMjC,MAAMnqB,GAAY,i9qB,MCWL0qB,GAAW,M,iDAKpBzL,OAAiB0L,EAAIC,oBAErBpV,SAAqB,KAGrB/H,SAA0B,UAE1BD,WAA2B,SAE3B4Y,SAAoB,MAEpBC,aAAuD,KAEvDoB,MAA+C,KAE/CoD,gBAA2B,MAEnBrE,aAER,iBAAAzG,GACI9C,GAAM8B,SACF,iEACK+L,KAAKC,UAAUC,YAAcC,OAAOC,WAAa,IAC1DzqB,KAAKimB,uBACL3I,GAAS,YAAY,KACjB,GAAItd,KAAKoqB,gBAAiB,CACtBpqB,KAAKoqB,gBAAkB,MACvBpqB,KAAK0qB,iB,KAGblO,GAAM1H,SAASC,SAAW/U,KAAK+U,Q,CAG3B,0BAAMkR,GACV,IACI,MAAMC,EAAS,IAAIC,EAAO,CACtB3H,OAAQxe,KAAKwe,OACb4H,UAAW,CAAC,SAAU,OAAQ,YAGlC,MAAMC,QAAeH,EAAOO,cAAc,UAC1CzmB,KAAK2lB,SAAW,KAChB3lB,KAAK0mB,uBAAuBL,E,CAC9B,MAAOO,GACLC,QAAQD,MAAM,8BAA+BA,E,EAI7C,sBAAAF,CACJL,GAEA,IAAKrmB,KAAK+lB,eAAiB/lB,KAAK2lB,SAAU,OAC1C3lB,KAAK4lB,aAAe,IAAIS,EAAOS,aAAa9mB,KAAK+lB,cAEjD/lB,KAAK4lB,aAAamB,YAAY,iBAAiB,KAC3C,MAAMC,EAAQhnB,KAAK4lB,cAAcqB,WACjCjnB,KAAKgN,SAAWga,GAAOE,UAAUC,UAAU3a,OAAS,EACpDxM,KAAK+M,UAAYia,GAAOE,UAAUC,UAAUva,OAAS,EACrD4P,GAAMxP,SAAWhN,KAAKgN,SACtBwP,GAAMzP,UAAY/M,KAAK+M,UAEvB/M,KAAK0qB,iBAAiB,G,CAItB,eAAAA,GACJ,GAAIlO,GAAM8B,SAAU,CAChB,MAAMqM,EAAyB3qB,KAAKukB,GAAGC,cACnC,qBAEJ,GAAImG,EAAwB,CACxBA,EAAuBlG,eAAe,CAAEC,SAAU,U,MAEnD,CACH,MAAMkG,EAAiB5qB,KAAKukB,GAAGC,cAAc,YAC7C,GAAIoG,EAAgB,CAChBA,EAAenG,eAAe,CAAEC,SAAU,U,GAK9C,iBAAAmG,GACJ7qB,KAAKoqB,gBAAkB,I,CAG3B,MAAAzqB,GACI,MAAMujB,EAAIjK,GAAmBjZ,KAAK+U,UAClC,OACInV,EAAA,OAAAC,IAAA,2CACIQ,MAAM,yCACN0kB,GAAG,oBAEF/kB,KAAKoqB,gBAEExqB,EACa,0BAAAI,KAAKwe,OACdzJ,SAAU/U,KAAK+U,WAInBnV,IAAAkrB,SAAA,KACIlrB,EAAK,OAAAS,MAAM,iDACPT,EAAK,OAAAS,MAAM,mBACPT,EAAK,OAAAS,MAAM,sDACPT,EAAA,qBAEJA,EACI,SAAAylB,IAAMd,GAAOvkB,KAAK+lB,aAAexB,EACjCja,KAAK,OACLge,YAAapF,EAAE9N,YACVC,kBACLhV,MAAM,oGAGdT,EACI,UAAAolB,QAAS,IAAMhlB,KAAK6qB,oBACpBxqB,MAAM,8HAEL6iB,EAAEjO,YAAYE,cAGvBvV,EACI,YAAA4e,OAAQxe,KAAKwe,U,eC1I7C,MAAMjf,GAAY,i9qB,MCcLwrB,GAAe,M,yBAExBxF,cAAwD,GAExDvG,aAA0C,GAE1CE,oBAAiD,GAGjD8L,qBAA+B,KAE/BjU,mBAAuD,iBAEvDpB,iBAA2B,GAE3BC,iBAA2B,IAE3BiC,oBAA8B,EAE9BhC,SAAmB,EAEnBC,YAAsB,EAEtBgC,mBAA6B,EAE7BtF,eAAyB,EAEzBiD,eAAyB,GAEzBhV,KAAe,GAEf6V,MAAgB,GAEhBC,UAAoB,GAEpBC,WAAqB,GAErBgB,YAAuB,MAEvByT,wBAA2C,MAE3C1T,SAAmB,EAEnBE,QAAkB,EAMlB,mBAAAyT,GACI,GAAItR,OAAOkB,KAAK9a,KAAKulB,eAAe5e,SAAW,EAAG,CAC9C3G,KAAKwS,eAAiB,EACtB,M,CAEJxS,KAAKwS,eAAiBoH,OAAOkB,KAAK9a,KAAKulB,eAAe5S,QAClD,CAACC,EAAKU,IACFV,EAAM5S,KAAKulB,cAAcjS,GAAMkN,iBAAiB7Z,QACpD,GAGJ3G,KAAKyV,eACDmE,OAAOwC,QAAQpc,KAAKulB,eAAe,GAAG,GAAG/E,iBAAiB,GAAGlP,MACxDzH,UAET7J,KAAKmrB,cACLnrB,KAAKorB,a,CAGD,WAAAD,GACJ,MAAMtpB,EAAO4C,EAAqBzE,KAAK+W,oBACvC,MAAMsU,EAAOxpB,EAAK8Q,QAAO,CAACC,EAAKU,IAASV,EAAMU,GAAM,GAGpD,MAAMgY,EAA2BtrB,KAAKuX,SAAW,IACjD,MAAMgU,EAA4BD,EAA2B,IAG7D,MAAME,EAA8BxrB,KAAKwX,YAAc,GAAK,EAC5D,MAAMiU,EAA+BD,EAA8B,IAGnE,MAAME,EAA4B1rB,KAAKgrB,qBACnCO,EAA4BE,EAEhC,MAAME,EAAU3rB,KAAKwS,eAAiBxS,KAAKyV,eAC3C,MAAMqB,EAAatS,EAAgBkJ,KAAKke,GACpCA,EAAYD,IAEhB,IAAIE,EAA0B,EAC9B,IAAIC,EAAa,EACjB,IAAIC,EAAgB,EAGpB,MAAMC,EAAuBhsB,KAAKwX,YAAc,GAAK,GAAK,EAE1D,IAAK,IAAIzT,EAAI,EAAGA,EAAIlC,EAAK8E,OAAQ5C,IAAK,CAElC,IAAIkoB,EAAoBpqB,EAAKkC,GAAK2nB,EAA4BL,EAC1D,IAGJ,GAAIrrB,KAAKwX,YAAa,CAClB,GACIxX,KAAKirB,0BAA4B,OAASlnB,GAAK,GAAKA,GAAK,GAC3D,CACEkoB,GAAqBD,C,MAClB,GACHhsB,KAAKirB,0BAA4B,UAChClnB,EAAI,GAAKA,EAAI,IAChB,CACEkoB,GAAqBD,C,EAK7B,MAAME,EAAmBpV,EAAW/S,GAAKkoB,EAEzC,GAAIC,EAAmB,EAAG,CAEtB,MAAMC,EAA2BnsB,KAAKyX,QAAUsU,EAChD,MAAMK,EAAgB3qB,KAAKqG,IACvBokB,EACAC,GAGJ,GAAIC,EAAgB,EAAG,CACnBL,GAAiBK,EACjBP,GAA2BI,EAC3BH,GAAcI,EAAmBE,C,KAC9B,CAEHP,GAA2BI,EAC3BH,GAAcI,C,OAEf,GAAIA,EAAmB,EAAG,CAE7B,MAAMG,GAAgBH,EACtB,MAAMI,EAAoB7qB,KAAKqG,IAAIukB,EAAcN,GAEjD,GAAIO,EAAoB,EAAG,CACvBP,GAAiBO,EACjBT,GAA2B/U,EAAW/S,GAClCuoB,C,KACD,CAEHT,GAA2B/U,EAAW/S,E,MAEvC,CAEH8nB,GAA2BI,C,EAKnCjsB,KAAK8V,YAAcgW,EAAa9rB,KAAK4V,iBAAmB,IACpDiW,EAA0B,IAAM7rB,KAAK2V,iBAGzC,IAAI4W,EAAe,EACnB,IAAIC,EAAexsB,KAAK2V,iBACxB,IAAK,IAAI0B,EAAO,EAAGA,EAAO,GAAIA,IAAQ,CAClC,MAAMoV,EAAgBX,EAAa9rB,KAAK4V,iBAAmB,IACvDiW,EAA0B,IAAMW,EACpCD,GAAgBE,EAChBD,GAAgB,EAAIxsB,KAAK6X,oBAAsB,G,CAEnD7X,KAAK8X,mBAAqByU,EAE1BvsB,KAAK6V,SACAgW,GAA2BH,EAA4B,KACxD,G,CAGA,WAAAN,G,CAuER,iBAAA9L,GACItf,KAAKkrB,qB,CAGD,YAAAwB,GACJ,IAAIC,EAAU,KACd,MAAMzJ,EAAIjK,GAAmBuD,GAAM1H,SAASC,UAG5C,IAAK/U,KAAKS,KAAKmsB,OAAQ,CACnB5sB,KAAKuW,UAAY2M,EAAE5N,gBAAgBiB,UACnCoW,EAAU,K,KACP,CACH3sB,KAAKuW,UAAY,E,CAIrB,MAAMsW,EAAa,6BACnB,IAAK7sB,KAAKsW,MAAMsW,OAAQ,CACpB5sB,KAAKwW,WAAa0M,EAAE5N,gBAAgBkB,WACpCmW,EAAU,K,MACP,IAAKE,EAAWxC,KAAKrqB,KAAKsW,OAAQ,CACrCtW,KAAKwW,WAAa0M,EAAE5N,gBAAgB4B,gBACpCyV,EAAU,K,KACP,CACH3sB,KAAKwW,WAAa,E,CAGtB,OAAOmW,C,CAGH,kBAAAG,GACJ,IAAK9sB,KAAK0sB,eAAgB,CACtB,M,CAGJ7F,QAAQwB,IAAI,yBAA0B,CAClC5nB,KAAMT,KAAKS,KACX6V,MAAOtW,KAAKsW,MACZyW,aAAc/sB,KAAKulB,cACnB1O,YAAa7W,KAAKgrB,qBAClBnV,SAAU7V,KAAK6V,SACfC,YAAa9V,KAAK8V,YAClBkJ,aAAchf,KAAKgf,aACnBE,oBAAqBlf,KAAKkf,qB,CAIlC,MAAAvf,GACI,MAAMujB,EAAIjK,GAAmBuD,GAAM1H,SAASC,UAC5C,OACInV,EACI,OAAAC,IAAA,2CAAAQ,MAAM,+DAKN0kB,GAAG,qBAEHnlB,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,iDACL6iB,EAAE5N,gBAAgBC,OAGvB3V,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,iDAEPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,aACPT,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,wCACL6iB,EAAE5N,gBAAgBE,mBAEvB5V,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAE5N,gBAAgB9C,gBAEvB5S,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAE5N,gBAAgBG,iBAG3B7V,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACLjK,MAAM,0HACN0Z,MAAO/Z,KAAKwS,eACZwa,SACF,OACFptB,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACLjK,MAAM,0HACN0Z,MAAO/Z,KAAKyV,eACZwX,SAAQ,SAIpBrtB,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,4BACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,qCACPT,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,iBACP6iB,EAAE5N,gBAAgBI,sBAEvB9V,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,qCACNqJ,EAAyBG,UACvB7J,KAAKwS,gBAAgBoW,QAAQ,GAC9B,UAKnBhpB,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,aACPT,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,wCACL6iB,EAAE5N,gBAAgBS,2BAEvBnW,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,2CACR6iB,EAAE5N,gBAAgBe,mBAEvBzW,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,2CACR6iB,EAAE5N,gBAAgBU,0BAG3BpW,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACLjK,MAAM,0HACN0Z,MAAO/Z,KAAKgrB,qBACZzC,QAAUZ,IACN3nB,KAAKgrB,qBAAuBkC,SACvBvF,EAAEjO,OACEK,OAET/Z,KAAKmrB,cACLnrB,KAAKorB,aAAa,IAG1BxrB,EACI,UAAAC,IAAA,2CAAAQ,MAAM,0HACNid,SAAWqK,IACP3nB,KAAK+W,mBACA4Q,EAAEjO,OACEK,MAGT/Z,KAAKmrB,cACLnrB,KAAKorB,aAAa,GAGtBxrB,EACI,UAAAC,IAAA,2CAAAka,MAAM,iBACNiQ,SAAUhqB,KAAK+W,qBACX,kBAEHmM,EAAE5N,gBAAgBmB,oBACdC,cAET9W,EACI,UAAAC,IAAA,2CAAAka,MAAM,cACNiQ,SAAUhqB,KAAK+W,qBACX,eAEHmM,EAAE5N,gBAAgBmB,oBACdE,gBAWzB/W,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,aACPT,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,wCACL6iB,EAAE5N,gBAAgBgC,qBAAqB/B,OAE5C3V,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,uBAEPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,gDACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,qCACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,2BACPT,EACI,SAAAC,IAAA,2CAAAyK,KAAK,WACLya,GAAG,WACH1kB,MAAM,8GACN8sB,QAASntB,KAAKuX,SAAW,EACzB+F,SAAWqK,IACP3nB,KAAKuX,SACAoQ,EAAEjO,OACMyT,QACH,IACA,EACVntB,KAAKmrB,aAAa,IAG1BvrB,EACI,SAAAC,IAAA,2CAAAutB,QAAQ,WACR/sB,MAAM,iBAEL6iB,EAAE5N,gBACEgC,qBACAC,WAGZvX,KAAKuX,SAAW,GACb3X,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,iBACPL,KAAKuX,SACH,QAGdvX,KAAKuX,SAAW,GACb3X,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,uBACPT,EAAA,SAAAC,IAAA,2CACIyK,KAAK,QACLxC,IAAI,KACJC,IAAI,MACJslB,KAAK,KACLhtB,MAAM,oVACN0Z,MAAO/Z,KAAKuX,SACZgR,QAAUZ,IACN3nB,KAAKuX,SAAW2V,SACXvF,EAAEjO,OACEK,OAET/Z,KAAKmrB,aAAa,MAQtCvrB,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,gDACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,qCACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,2BACPT,EACI,SAAAC,IAAA,2CAAAyK,KAAK,WACLya,GAAG,cACH1kB,MAAM,yGACN8sB,QAASntB,KAAKwX,YACd8F,SAAWqK,IACP3nB,KAAKwX,YACAmQ,EAAEjO,OACEyT,QACTntB,KAAKmrB,aAAa,IAG1BvrB,EACI,SAAAC,IAAA,2CAAAutB,QAAQ,cACR/sB,MAAM,iBAEL6iB,EAAE5N,gBACEgC,qBACAE,eAIhBxX,KAAKwX,aACF5X,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,uBACPT,EAAA,SAAAC,IAAA,2CAAOQ,MAAM,yBACR6iB,EAAE5N,gBACEgC,qBACAI,cAET9X,EACI,UAAAC,IAAA,2CAAAQ,MAAM,0HACNid,SAAWqK,IACP3nB,KAAKirB,wBACAtD,EAAEjO,OACEK,MAGT/Z,KAAKmrB,aAAa,GAGtBvrB,EAAA,UAAAC,IAAA,2CACIka,MAAM,MACNiQ,SAAUhqB,KACLirB,0BACD,OAEH/H,EAAE5N,gBACEgC,qBACAK,iBAET/X,EAAA,UAAAC,IAAA,2CACIka,MAAM,QACNiQ,SAAUhqB,KACLirB,0BACD,SAEH/H,EAAE5N,gBACEgC,qBACAM,sBAQzBhY,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,gDACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,qCACPT,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,iBACR6iB,EAAE5N,gBAAgBgC,qBACdG,SAET7X,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,iBACPL,KAAKyX,QAAO,SAGrB7X,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,uBACPT,EAAA,SAAAC,IAAA,2CACIyK,KAAK,QACLxC,IAAI,IACJC,IAAI,KACJslB,KAAK,IACLhtB,MAAM,2VACN0Z,MAAO/Z,KAAKyX,QACZ8Q,QAAUZ,IACN3nB,KAAKyX,QAAUyV,SACVvF,EAAEjO,OACEK,OAET/Z,KAAKmrB,aAAa,QAS1CvrB,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,aACPT,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,wCACL6iB,EAAE5N,gBAAgBW,uBAEvBrW,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAE5N,gBAAgBK,kBAEvB/V,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAE5N,gBAAgBM,kBAEvBhW,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAE5N,gBAAgBuC,sBAG3BjY,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACL+iB,KAAK,OACLhtB,MAAM,0HACN0Z,MAAO/Z,KAAK2V,iBAAiBiT,QAAQ,GACrCL,QAAUZ,IACN3nB,KAAK2V,iBAAmB0O,WACnBsD,EAAEjO,OACEK,OAET/Z,KAAKmrB,cACLnrB,KAAKorB,aAAa,IAG1BxrB,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACL+iB,KAAK,OACLhtB,MAAM,0HACN0Z,MAAO/Z,KAAK4V,iBAAiBgT,QAAQ,GACrCL,QAAUZ,IACN3nB,KAAK4V,iBAAmByO,WACnBsD,EAAEjO,OACEK,OAET/Z,KAAKmrB,cACLnrB,KAAKorB,aAAa,IAG1BxrB,EAAA,SAAAC,IAAA,2CACIyK,KAAK,SACL+iB,KAAK,MACLhtB,MAAM,0HACN0Z,MAAO/Z,KAAK6X,oBAAoB+Q,QAAQ,GACxCL,QAAUZ,IACN3nB,KAAK6X,oBAAsBwM,WACtBsD,EAAEjO,OACEK,OAET/Z,KAAKmrB,cACLnrB,KAAKorB,aAAa,OAQtCxrB,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,2CACPT,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,wCACL6iB,EAAE5N,gBAAgBa,cAEvBvW,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,4BACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,qCACPT,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,iBACP6iB,EAAE5N,gBAAgBO,UAEvBjW,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,oCACPL,KAAK6V,SAAS+S,QAAQ,GAAE,MAGjChpB,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0CACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,2BACPT,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,iBACP6iB,EAAE5N,gBAAgBQ,aAEvBlW,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,kBACPT,EAAA,OAAAC,IAAA,2CACIC,MAAM,6BACNO,MAAM,oCACNH,QAAQ,YACRC,KAAK,gBAELP,EACc,QAAAC,IAAA,iEACVS,EAAE,yLACQ,yBAGlBV,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,0MACN6iB,EAAE5N,gBACEc,qBAIjBxW,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,oCACPL,KAAK8V,YAAY8S,QAAQ,GAAE,KAAI1F,EAC3B5N,gBAAgB+B,OAG7BzX,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0CACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,2BACPT,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,iBACP6iB,EAAE5N,gBAAgBwC,qBAG3BlY,EAAM,QAAAC,IAAA,2CAAAQ,MAAM,oCACPL,KAAK8X,mBAAmB8Q,QAAQ,GAC9B,QAMnBhpB,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,2CACPT,EAAI,MAAAC,IAAA,2CAAAQ,MAAM,wCACL6iB,EAAE5N,gBAAgB6B,cAEvBvX,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAE5N,gBAAgB7U,MAEvBb,EAAO,SAAAC,IAAA,2CAAAQ,MAAM,gDACR6iB,EAAE5N,gBAAgBgB,QAG3B1W,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,0BACPT,EACI,SAAAC,IAAA,2CAAAyK,KAAK,OACLjK,MAAO,uCACHL,KAAKuW,UACC,iBACA,wFAEVwD,MAAO/Z,KAAKS,KACZ8nB,QAAUZ,IACN3nB,KAAKS,KACAknB,EAAEjO,OACEK,MACT/Z,KAAK0sB,cAAc,EAEvBpE,YAAY,cAEftoB,KAAKuW,WACF3W,EAAG,KAAAC,IAAA,2CAAAQ,MAAM,6BACJL,KAAKuW,WAGd3W,EACI,SAAAC,IAAA,2CAAAyK,KAAK,QACLjK,MAAO,uCACHL,KAAKwW,WACC,iBACA,wFAEVuD,MAAO/Z,KAAKsW,MACZiS,QAAUZ,IACN3nB,KAAKsW,MACAqR,EAAEjO,OACEK,MACT/Z,KAAK0sB,cAAc,EAEvBpE,YAAY,2BAEftoB,KAAKwW,YACF5W,EAAA,KAAAC,IAAA,2CAAGQ,MAAM,6BACJL,KAAKwW,cAKtB5W,EAAK,OAAAC,IAAA,2CAAAQ,MAAM,uBACPT,EAAA,UAAAC,IAAA,2CACImlB,QAAS,IAAMhlB,KAAK8sB,qBACpBQ,UAAWttB,KAAKS,KAAKmsB,SAChB5sB,KAAKsW,MAAMsW,UAAY5sB,KAAKuW,aAC3BvW,KAAKwW,WACXnW,MAAM,uFACN6kB,MAAO,CAAEqI,MAAO,UAEfrK,EAAE5N,gBAAgB8B,uB,mFCxwBnD,MAAM7X,GAAY,i9qB,MCWLiuB,GAAO,M,yBAEhBzO,YAGAkG,aAEA,MAAAtlB,GACI,MAAMujB,EAAIjK,GAAmBuD,GAAM1H,SAASC,UAE5C,OACInV,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,sFACNyI,EAAM4E,KAAKsV,IACR,MAAMyK,EAAcvK,EAAEnL,QAAQjP,MAAMka,EAAKviB,MACzC,OACIb,EAAA,UACIS,MAAO,2EACHL,KAAK+e,YAAYte,OAASuiB,EAAKviB,KACzB,iCACA,oCAEVykB,MAAO,CACHqI,MAAOvtB,KAAK+e,YAAYte,OAASuiB,EAAKviB,KAChC,UACA,WAEE,aAAAgtB,EAAYrlB,UACxBmN,MAAOkY,EAAYjlB,YACnBwc,QAAS,IAAMhlB,KAAKilB,aAAajC,IAEjCpjB,EAAK,OAAAS,MAAM,oCACPT,EAAA,iBAAea,KAAMuiB,EAAK3a,OAC1BzI,EAAA,YAAO6tB,EAAYhtB,OAElB,I","ignoreList":[]}