@lukso/transaction-view-core 0.3.1-dev.a8c9315

package/dist/shared/index.js

@@ -0,0 +1,2437 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/shared/address-display.ts
+import { Task } from "@lit/task";
+import {
+  useAddressResolver,
+  useImageLoader
+} from "@lukso/transaction-view-headless";
+import { css, html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+
+// src/shared/safe-custom-element.ts
+function safeCustomElement(tagName) {
+  return (classOrDescriptor) => {
+    if (typeof customElements !== "undefined" && !customElements.get(tagName)) {
+      customElements.define(tagName, classOrDescriptor);
+    }
+    return classOrDescriptor;
+  };
+}
+
+// src/shared/address-display.ts
+var AddressDisplay = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.showCopyButton = false;
+    this.nameOnly = false;
+    this.maxWidth = 200;
+    this.isLoadingImage = false;
+    // Composables
+    this.imageLoader = useImageLoader();
+    this.addressResolver = useAddressResolver();
+    // Task for loading profile image
+    this.imageTask = new Task(this, {
+      task: async ([resolved], { signal }) => {
+        if (!resolved) return null;
+        this.isLoadingImage = true;
+        try {
+          const image = await this.imageLoader.loadProfileImage(resolved, {
+            width: this.getSizePixels(),
+            height: this.getSizePixels(),
+            dpr: window.devicePixelRatio || 1
+          });
+          return image || this.imageLoader.getFallbackImage(resolved);
+        } catch (error) {
+          console.warn("Failed to load address image:", error);
+          return this.imageLoader.getFallbackImage(resolved || {});
+        } finally {
+          this.isLoadingImage = false;
+        }
+      },
+      args: () => [this.resolved]
+    });
+  }
+  /**
+   * Get the effective address value (supports both `value` and legacy `address` props)
+   */
+  get effectiveAddress() {
+    return this.value || this.address || "";
+  }
+  /**
+   * Get pixel size for the current size setting
+   */
+  getSizePixels() {
+    switch (this.size) {
+      case "x-small":
+        return 16;
+      case "small":
+        return 24;
+      case "medium":
+        return 32;
+      case "large":
+        return 48;
+      default:
+        return 24;
+    }
+  }
+  /**
+   * Get display name for the address
+   */
+  getDisplayName() {
+    if (!this.resolved) return "Anonymous";
+    const computedName = this.addressResolver.formatDisplayName(this.resolved);
+    return computedName || "Anonymous";
+  }
+  /**
+   * Check if this is a contract address (shows square icon)
+   */
+  get isContract() {
+    return this.resolved ? this.imageLoader.isContractAddress(this.resolved) : false;
+  }
+  /**
+   * Get prefix for the address display
+   */
+  get addressPrefix() {
+    return this.resolved ? this.addressResolver.getAddressPrefix(this.resolved) : "@";
+  }
+  /**
+   * Check if should show name colors
+   */
+  get shouldShowNameColor() {
+    return this.resolved ? this.addressResolver.shouldShowNameColor(this.resolved) : true;
+  }
+  /**
+   * Handle copy button click
+   */
+  handleCopy() {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(this.effectiveAddress);
+      this.dispatchEvent(
+        new CustomEvent("address-copied", {
+          detail: { address: this.effectiveAddress },
+          bubbles: true
+        })
+      );
+    }
+  }
+  /**
+   * Handle address click
+   */
+  handleAddressClick() {
+    this.dispatchEvent(
+      new CustomEvent("address-click", {
+        detail: {
+          address: this.effectiveAddress,
+          resolved: this.resolved
+        },
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    const imageResult = this.imageTask.value;
+    return html`
+      <div class="address-container">
+        ${this.label ? html`<div class="label">${this.label}</div>` : ""}
+        
+        <div class="address-display" @click=${this.handleAddressClick}>
+          <!-- Identity prefix (if present) -->
+          ${this.resolved?.__identity ? html`
+            <span class="identity">
+              ${this.resolved.__identity}
+              <lukso-username
+                address=${this.resolved.identity}
+                size=${this.size}
+                max-width="200"
+                has-name-color="false"
+                has-address-color="false"
+              ></lukso-username>
+              of
+            </span>
+          ` : ""}
+
+          <!-- Profile image and name -->
+          <lukso-profile
+            size=${this.size}
+            profile-address=${this.effectiveAddress}
+            profile-url=${imageResult?.src || ""}
+            has-identicon
+            ?is-square=${this.isContract}
+          ></lukso-profile>
+
+          <!-- Address/Name display -->
+          ${this.nameOnly ? html`
+            <lukso-username
+              name=${this.getDisplayName()}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              prefix=${this.addressPrefix}
+              ?has-name-color=${this.shouldShowNameColor}
+              has-address-color="false"
+            ></lukso-username>
+          ` : html`
+            <lukso-username
+              name=${this.getDisplayName()}
+              address=${!this.isContract ? this.effectiveAddress : void 0}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              prefix=${this.addressPrefix}
+              ?has-name-color=${this.shouldShowNameColor}
+              ?has-address-color=${this.shouldShowNameColor}
+            ></lukso-username>
+          `}
+
+
+          <!-- Copy button -->
+          ${this.showCopyButton ? html`
+            <button 
+              class="copy-button"
+              @click=${this.handleCopy}
+              title="Copy address"
+            >
+              📋
+            </button>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+AddressDisplay.styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .address-container {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .label {
+      font-size: 12px;
+      color: var(--neutral-60, #666);
+      font-weight: 500;
+    }
+
+    .address-display {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+      min-width: 200px;
+    }
+
+    .address-display:hover {
+      background-color: var(--neutral-95, #f5f5f5);
+    }
+
+    .identity {
+      font-size: 12px;
+      color: var(--neutral-60, #666);
+      margin-right: 4px;
+    }
+
+    .copy-button {
+      background: none;
+      border: 1px solid var(--neutral-80, #ccc);
+      border-radius: 4px;
+      padding: 2px 4px;
+      cursor: pointer;
+      font-size: 12px;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+
+    .copy-button:hover {
+      background-color: var(--neutral-90, #eee);
+    }
+
+    .address-display:hover .copy-button {
+      opacity: 1;
+    }
+
+
+    /* Ensure LUKSO web components are properly styled */
+    lukso-profile,
+    lukso-username {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  property()
+], AddressDisplay.prototype, "value", 2);
+__decorateClass([
+  property()
+], AddressDisplay.prototype, "address", 2);
+__decorateClass([
+  property({ type: Object })
+], AddressDisplay.prototype, "resolved", 2);
+__decorateClass([
+  property()
+], AddressDisplay.prototype, "size", 2);
+__decorateClass([
+  property()
+], AddressDisplay.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-copy-button" })
+], AddressDisplay.prototype, "showCopyButton", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "name-only" })
+], AddressDisplay.prototype, "nameOnly", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-width" })
+], AddressDisplay.prototype, "maxWidth", 2);
+__decorateClass([
+  state()
+], AddressDisplay.prototype, "imageData", 2);
+__decorateClass([
+  state()
+], AddressDisplay.prototype, "isLoadingImage", 2);
+AddressDisplay = __decorateClass([
+  safeCustomElement("address-display")
+], AddressDisplay);
+
+// src/shared/address-view.ts
+import { Task as Task2 } from "@lit/task";
+import { useAddressResolver as useAddressResolver2 } from "@lukso/transaction-view-headless";
+import makeBlockie from "ethereum-blockies-base64";
+import { html as html2 } from "lit";
+import { property as property2, state as state2 } from "lit/decorators.js";
+
+// src/shared/load-web-components.ts
+var originalDefine = typeof customElements !== "undefined" ? customElements.define.bind(customElements) : null;
+if (typeof customElements !== "undefined" && originalDefine) {
+  customElements.define = function(name, constructor, options) {
+    if (!customElements.get(name)) {
+      originalDefine(name, constructor, options);
+    }
+  };
+}
+if (originalDefine && typeof customElements !== "undefined") {
+  customElements.define = originalDefine;
+}
+
+// src/styles/styles.css?__raw__
+var styles_default = '/**\n  * @file Main styles\n  *\n  * This file contain general styles that should be applied to host page.\n  */\n:root {\n  --neutral-10: #121b21;\n  --neutral-15: #1b2832;\n  --neutral-20: #243542;\n  --neutral-25: #2d4253;\n  --neutral-30: #365063;\n  --neutral-35: #3e5d74;\n  --neutral-40: #476a85;\n  --neutral-45: #507795;\n  --neutral-50: #5985a6;\n  --neutral-55: #6a91af;\n  --neutral-60: #7a9db8;\n  --neutral-65: #8ba9c1;\n  --neutral-70: #9cb6c9;\n  --neutral-75: #acc2d2;\n  --neutral-80: #bdcedb;\n  --neutral-85: #cddae4;\n  --neutral-90: #dee7ed;\n  --neutral-95: #eef3f6;\n  --neutral-97: #f5f8fa;\n  --neutral-98: #f8fafb;\n  --neutral-100: #ffffff;\n  --honey-72: #fad275;\n  --honey-75: #fbd784;\n  --honey-82: #fce2a6;\n  --honey-85: #fce7b5;\n  --honey-92: #fef2d8;\n  --coral-65: #f37c58;\n  --coral-74: #f69e83;\n  --coral-75: #f7a288;\n  --coral-84: #fac3b3;\n  --coral-85: #fac7b7;\n  --coral-94: #fde9e2;\n  --warm-77: #ffbb8a;\n  --warm-87: #ffd8bd;\n  --warm-97: #fff6f0;\n  --sea-salt-57: #7fa4a4;\n  --sea-salt-67: #9db9b9;\n  --sea-salt-88: #dbe6e6;\n  --cloud-43: #447c97;\n  --cloud-75: #a7c7d7;\n  --cloud-88: #d5e4ec;\n  --ocean-38: #3c6286;\n  --ocean-75: #a7c0d7;\n  --ocean-88: #d5e1ec;\n  --sky-64: #68a5de;\n  --sky-75: #96c1e8;\n  --sky-85: #c0daf1;\n  --lukso-50: #aa5578;\n  --lukso-60: #bb7793;\n  --lukso-70: #cc99ae;\n  --lukso-80: #ddbbc9;\n  --lukso-90: #eedde4;\n  --yellow-25: #804d00;\n  --yellow-55: #ffa31a;\n  --yellow-65: #ffb84d;\n  --yellow-75: #ffcc80;\n  --yellow-85: #ffe0b3;\n  --yellow-95: #fff5e5;\n  --green-45: #31b452;\n  --green-54: #47cd68;\n  --green-63: #6bd686;\n  --green-75: #9be4ad;\n  --green-85: #c3efce;\n  --green-95: #ebfaef;\n  --blue-40: #0452c8;\n  --blue-50: #0567fa;\n  --blue-60: #3785fb;\n  --blue-75: #82b3fc;\n  --blue-85: #b4d1fd;\n  --blue-95: #e6f0fe;\n  --red-55: #e23636;\n  --red-65: #e96363;\n  --red-75: #ef8f8f;\n  --red-85: #f5bcbc;\n  --red-95: #fce9e9;\n  --purple-15: #1d202f;\n  --purple-18: #232739;\n  --purple-31: #3c4262;\n  --purple-41: #4f5882;\n  --purple-51: #646ea0;\n  --purple-58: #7a83ae;\n  --purple-63: #8a92b7;\n  --purple-82: #c6cadc;\n  --purple-94: #ecedf3;\n  --pink-90: #f8dad3;\n  --pink-91: #f9ddd7;\n  --pink-92: #f9e1dc;\n  --pink-93: #fae5e0;\n  --pink-94: #fbe9e5;\n  --pink-95: #fcece9;\n  --pink-96: #fcf0ed;\n  --pink-97: #fdf4f2;\n  --measure-50: #e8178a;\n  --measure-70: #f174b9;\n  --measure-80: #f6a2d0;\n  --measure-97: #fef1f8;\n  --grey-10: #1a1a1a;\n  --grey-15: #262626;\n  --grey-20: #333333;\n  --grey-25: #404040;\n  --grey-30: #4d4d4d;\n  --grey-35: #595959;\n  --grey-40: #666666;\n  --grey-45: #737373;\n  --grey-50: #808080;\n  --grey-55: #8c8c8c;\n  --grey-60: #999999;\n  --grey-65: #a6a6a6;\n  --grey-70: #b3b3b3;\n  --grey-75: #bfbfbf;\n  --grey-80: #cccccc;\n  --gradient-1-start: #D39B9D;\n  --gradient-1-end: #9071D1;\n  --gradient-2-start: #F8DAD3;\n  --gradient-2-end: #CC99AE;\n  --gradient-3-start: #393e56;\n  --gradient-3-end: #646ea0;\n}\n/**\n  * @file Fonts\n  *\n  * This file contains all fonts used in designs.\n  */\n@font-face {\n  font-family: Inter;\n  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: Inter;\n  src: url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2");\n  font-weight: 800;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: Inter;\n  src: url("/assets/fonts/Inter-Bold.woff2") format("woff2");\n  font-weight: bold;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: Inter;\n  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: Inter;\n  src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: Inter;\n  src: url("/assets/fonts/Inter-Thin.woff2") format("woff2");\n  font-weight: 100;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: "PT Mono";\n  src: url("/assets/fonts/PT-Mono-Regular.woff2") format("woff2");\n  font-weight: normal;\n  font-style: normal;\n}\n@font-face {\n  font-family: "PT Mono";\n  src: url("/assets/fonts/PT-Mono-Bold.woff2") format("woff2");\n  font-weight: bold;\n  font-style: normal;\n}\n/**\n  * @file Typography\n  *\n  * This file contains all typography classes used in designs.\n  * They should be used instead of individual font attributes.\n  *\n  * You can use them same as the normal Tailwind classes, e.g.: class="heading-inter-26-semi-bold"\n  */\n/**\n  * @file Variables\n  *\n  * This file contains all CSS variables used in designs.\n  */\n.tippy-box[data-animation=fade][data-state=hidden] {\n  opacity: 0;\n}\n.tippy-arrow::before {\n  content: "";\n  position: absolute;\n  border-color: transparent;\n  border-style: solid;\n}\n.tippy-box[data-placement^=top] > .tippy-arrow::before {\n  border-top-color: initial;\n  transform-origin: center top;\n}\n.tippy-box[data-placement^=bottom] > .tippy-arrow::before {\n  border-bottom-color: initial;\n  transform-origin: center bottom;\n}\n.tippy-box[data-placement^=left] > .tippy-arrow::before {\n  border-left-color: initial;\n  transform-origin: center left;\n}\n.tippy-box[data-placement^=right] > .tippy-arrow::before {\n  border-right-color: initial;\n  transform-origin: center right;\n}\n.tippy-box[data-inertia][data-state=visible] {\n  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n}\n.tippy-arrow {\n  width: 16px;\n  height: 16px;\n}\n.tippy-size-medium {\n  border-radius: 4px;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 10px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 12px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-size-medium[data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-size-medium[data-placement^=top] > .tippy-arrow::before {\n  bottom: -6px;\n  left: 2px;\n  border-width: 6px 6px 0;\n}\n.tippy-size-medium[data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-size-medium[data-placement^=bottom] > .tippy-arrow::before {\n  top: -6px;\n  left: 2px;\n  border-width: 0 6px 6px;\n}\n.tippy-size-medium[data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-size-medium[data-placement^=left] > .tippy-arrow::before {\n  border-width: 6px 0 6px 6px;\n  right: -6px;\n  top: 2px;\n}\n.tippy-size-medium[data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-size-medium[data-placement^=right] > .tippy-arrow::before {\n  left: -6px;\n  top: 2px;\n  border-width: 6px 6px 6px 0;\n}\n.tippy-size-large {\n  border-radius: 8px;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 20px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-size-large[data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-size-large[data-placement^=top] > .tippy-arrow::before {\n  bottom: -8px;\n  left: 0;\n  border-width: 8px 8px 0;\n}\n.tippy-size-large[data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-size-large[data-placement^=bottom] > .tippy-arrow::before {\n  top: -8px;\n  left: 0;\n  border-width: 0 8px 8px;\n}\n.tippy-size-large[data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-size-large[data-placement^=left] > .tippy-arrow::before {\n  border-width: 8px 0 8px 8px;\n  right: -8px;\n}\n.tippy-size-large[data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-size-large[data-placement^=right] > .tippy-arrow::before {\n  left: -8px;\n  border-width: 8px 8px 8px 0;\n}\n.tippy-variant-dark {\n  --tw-bg-opacity: 1;\n  background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-dark[data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-dark[data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-dark[data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-dark[data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-dark > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-dark > .tippy-svg-arrow {\n  fill: #365063;\n}\n.tippy-variant-light {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-light[data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-light[data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-light[data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-light[data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-light > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-light > .tippy-svg-arrow {\n  fill: #f5f8fa;\n}\n.tippy-variant-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-white[data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-white[data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-white[data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-white[data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-white > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-white > .tippy-svg-arrow {\n  fill: #ffffff;\n}\n.tippy-variant-success {\n  --tw-bg-opacity: 1;\n  background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-success[data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-success[data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-success[data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-success[data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-success > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-success > .tippy-svg-arrow {\n  fill: #47cd68;\n}\n.tippy-variant-danger {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-danger[data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-danger[data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-danger[data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-danger[data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-danger > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-danger > .tippy-svg-arrow {\n  fill: #e96363;\n}\n.tippy-box[data-theme~=dark-medium] {\n  border-radius: 4px;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 10px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 12px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=top] > .tippy-arrow::before {\n  bottom: -6px;\n  left: 2px;\n  border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=bottom] > .tippy-arrow::before {\n  top: -6px;\n  left: 2px;\n  border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=left] > .tippy-arrow::before {\n  border-width: 6px 0 6px 6px;\n  right: -6px;\n  top: 2px;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=right] > .tippy-arrow::before {\n  left: -6px;\n  top: 2px;\n  border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=dark-medium] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium] > .tippy-svg-arrow {\n  fill: #365063;\n}\n.tippy-box[data-theme~=dark-large] {\n  border-radius: 8px;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 20px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=dark-large][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=top] > .tippy-arrow::before {\n  bottom: -8px;\n  left: 0;\n  border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=bottom] > .tippy-arrow::before {\n  top: -8px;\n  left: 0;\n  border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=left] > .tippy-arrow::before {\n  border-width: 8px 0 8px 8px;\n  right: -8px;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=right] > .tippy-arrow::before {\n  left: -8px;\n  border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=dark-large] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large] > .tippy-svg-arrow {\n  fill: #365063;\n}\n.tippy-box[data-theme~=light-medium] {\n  border-radius: 4px;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 10px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 12px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=light-medium][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=top] > .tippy-arrow::before {\n  bottom: -6px;\n  left: 2px;\n  border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=bottom] > .tippy-arrow::before {\n  top: -6px;\n  left: 2px;\n  border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=left] > .tippy-arrow::before {\n  border-width: 6px 0 6px 6px;\n  right: -6px;\n  top: 2px;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=right] > .tippy-arrow::before {\n  left: -6px;\n  top: 2px;\n  border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=light-medium] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium] > .tippy-svg-arrow {\n  fill: #f5f8fa;\n}\n.tippy-box[data-theme~=light-large] {\n  border-radius: 8px;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 20px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=light-large][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=top] > .tippy-arrow::before {\n  bottom: -8px;\n  left: 0;\n  border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=bottom] > .tippy-arrow::before {\n  top: -8px;\n  left: 0;\n  border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=light-large][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=left] > .tippy-arrow::before {\n  border-width: 8px 0 8px 8px;\n  right: -8px;\n}\n.tippy-box[data-theme~=light-large][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=right] > .tippy-arrow::before {\n  left: -8px;\n  border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=light-large] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=light-large][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-large][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-large][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-large][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-large] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=light-large] > .tippy-svg-arrow {\n  fill: #f5f8fa;\n}\n.tippy-box[data-theme~=white-medium] {\n  border-radius: 4px;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 10px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 12px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=white-medium][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=top] > .tippy-arrow::before {\n  bottom: -6px;\n  left: 2px;\n  border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=bottom] > .tippy-arrow::before {\n  top: -6px;\n  left: 2px;\n  border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=left] > .tippy-arrow::before {\n  border-width: 6px 0 6px 6px;\n  right: -6px;\n  top: 2px;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=right] > .tippy-arrow::before {\n  left: -6px;\n  top: 2px;\n  border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=white-medium] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium] > .tippy-svg-arrow {\n  fill: #ffffff;\n}\n.tippy-box[data-theme~=white-large] {\n  border-radius: 8px;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 20px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=white-large][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=top] > .tippy-arrow::before {\n  bottom: -8px;\n  left: 0;\n  border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=bottom] > .tippy-arrow::before {\n  top: -8px;\n  left: 0;\n  border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=white-large][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=left] > .tippy-arrow::before {\n  border-width: 8px 0 8px 8px;\n  right: -8px;\n}\n.tippy-box[data-theme~=white-large][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=right] > .tippy-arrow::before {\n  left: -8px;\n  border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=white-large] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=white-large][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-large][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-large][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-large][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-large] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=white-large] > .tippy-svg-arrow {\n  fill: #ffffff;\n}\n.tippy-box[data-theme~=success-medium] {\n  border-radius: 4px;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 10px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 12px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=success-medium][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=top] > .tippy-arrow::before {\n  bottom: -6px;\n  left: 2px;\n  border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=bottom] > .tippy-arrow::before {\n  top: -6px;\n  left: 2px;\n  border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=left] > .tippy-arrow::before {\n  border-width: 6px 0 6px 6px;\n  right: -6px;\n  top: 2px;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=right] > .tippy-arrow::before {\n  left: -6px;\n  top: 2px;\n  border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=success-medium] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium] > .tippy-svg-arrow {\n  fill: #47cd68;\n}\n.tippy-box[data-theme~=success-large] {\n  border-radius: 8px;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 20px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=success-large][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=top] > .tippy-arrow::before {\n  bottom: -8px;\n  left: 0;\n  border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=bottom] > .tippy-arrow::before {\n  top: -8px;\n  left: 0;\n  border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=success-large][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=left] > .tippy-arrow::before {\n  border-width: 8px 0 8px 8px;\n  right: -8px;\n}\n.tippy-box[data-theme~=success-large][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=right] > .tippy-arrow::before {\n  left: -8px;\n  border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=success-large] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=success-large][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-large][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-large][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-large][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-large] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=success-large] > .tippy-svg-arrow {\n  fill: #47cd68;\n}\n.tippy-box[data-theme~=danger-medium] {\n  border-radius: 4px;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 10px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 12px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=top] > .tippy-arrow::before {\n  bottom: -6px;\n  left: 2px;\n  border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=bottom] > .tippy-arrow::before {\n  top: -6px;\n  left: 2px;\n  border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=left] > .tippy-arrow::before {\n  border-width: 6px 0 6px 6px;\n  right: -6px;\n  top: 2px;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=right] > .tippy-arrow::before {\n  left: -6px;\n  top: 2px;\n  border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=danger-medium] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium] > .tippy-svg-arrow {\n  fill: #e96363;\n}\n.tippy-box[data-theme~=danger-large] {\n  border-radius: 8px;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 20px;\n  --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n  --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=danger-large][data-placement^=top] > .tippy-arrow {\n  bottom: 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=top] > .tippy-arrow::before {\n  bottom: -8px;\n  left: 0;\n  border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=bottom] > .tippy-arrow {\n  top: 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=bottom] > .tippy-arrow::before {\n  top: -8px;\n  left: 0;\n  border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=left] > .tippy-arrow {\n  right: 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=left] > .tippy-arrow::before {\n  border-width: 8px 0 8px 8px;\n  right: -8px;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=right] > .tippy-arrow {\n  left: 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=right] > .tippy-arrow::before {\n  left: -8px;\n  border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=danger-large] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large][data-placement^=top] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-top-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large][data-placement^=bottom] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-bottom-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large][data-placement^=left] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large][data-placement^=right] .tippy-arrow::before {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large] > .tippy-backdrop {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large] > .tippy-svg-arrow {\n  fill: #e96363;\n}\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com\n  */\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n::before,\n::after {\n  --tw-content: \'\';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n  font-weight: bolder;\n}\n/*\n1. Use the user\'s configured `mono` font-family by default.\n2. Use the user\'s configured `mono` font-feature-settings by default.\n3. Use the user\'s configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n  font-family: "PT Mono", sans-serif; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n  font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n  text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type=\'button\']),\ninput:where([type=\'reset\']),\ninput:where([type=\'submit\']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n  outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n  vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type=\'search\'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n  display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n  resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role="button"] {\n  cursor: pointer;\n}\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden="until-found"])) {\n  display: none;\n}\n.heading-inter-21-semi-bold {\n  font-family: Inter, sans-serif;\n  font-size: 21px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 26px;\n}\n.heading-inter-17-semi-bold {\n  font-family: Inter, sans-serif;\n  font-size: 17px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 22px;\n}\n.heading-inter-14-bold {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 700;\n  font-style: normal;\n  line-height: 17px;\n}\n.paragraph-inter-20-regular {\n  font-family: Inter, sans-serif;\n  font-size: 20px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 32px;\n}\n.paragraph-inter-16-regular {\n  font-family: Inter, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 24px;\n}\n.paragraph-inter-14-regular {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 22px;\n}\n.paragraph-inter-14-semi-bold {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 22px;\n}\n.paragraph-inter-12-regular {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 20px;\n}\n.paragraph-inter-12-medium {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  font-style: normal;\n  line-height: 20px;\n}\n.paragraph-inter-12-semi-bold {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  font-style: normal;\n  line-height: 20px;\n}\n.paragraph-ptmono-24-bold {\n  font-family: "PT Mono", sans-serif;\n  font-size: 24px;\n  font-weight: 700;\n  font-style: normal;\n  line-height: 26px;\n}\n.paragraph-ptmono-16-bold {\n  font-family: "PT Mono", sans-serif;\n  font-size: 16px;\n  font-weight: 700;\n  font-style: normal;\n  line-height: 22px;\n}\n.paragraph-ptmono-14-bold {\n  font-family: "PT Mono", sans-serif;\n  font-size: 14px;\n  font-weight: 700;\n  font-style: normal;\n  line-height: 20px;\n}\n.paragraph-ptmono-12-bold {\n  font-family: "PT Mono", sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  font-style: normal;\n  line-height: 14px;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n.prose {\n  color: var(--tw-prose-body);\n  max-width: 65ch;\n}\n.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n}\n.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-lead);\n  font-size: 1.25em;\n  line-height: 1.6;\n  margin-top: 1.2em;\n  margin-bottom: 1.2em;\n}\n.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-links);\n  text-decoration: underline;\n  font-weight: 500;\n}\n.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-bold);\n  font-weight: 600;\n}\n.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n}\n.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n}\n.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n}\n.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: decimal;\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n  padding-inline-start: 1.625em;\n}\n.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: upper-alpha;\n}\n.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: lower-alpha;\n}\n.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: upper-alpha;\n}\n.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: lower-alpha;\n}\n.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: upper-roman;\n}\n.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: lower-roman;\n}\n.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: upper-roman;\n}\n.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: lower-roman;\n}\n.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: decimal;\n}\n.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  list-style-type: disc;\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n  padding-inline-start: 1.625em;\n}\n.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {\n  font-weight: 400;\n  color: var(--tw-prose-counters);\n}\n.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {\n  color: var(--tw-prose-bullets);\n}\n.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 600;\n  margin-top: 1.25em;\n}\n.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  border-color: var(--tw-prose-hr);\n  border-top-width: 1px;\n  margin-top: 3em;\n  margin-bottom: 3em;\n}\n.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-weight: 500;\n  font-style: italic;\n  color: var(--tw-prose-quotes);\n  border-inline-start-width: 0.25rem;\n  border-inline-start-color: var(--tw-prose-quote-borders);\n  quotes: "\\201C""\\201D""\\2018""\\2019";\n  margin-top: 1.6em;\n  margin-bottom: 1.6em;\n  padding-inline-start: 1em;\n}\n.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {\n  content: open-quote;\n}\n.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {\n  content: close-quote;\n}\n.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 800;\n  font-size: 2.25em;\n  margin-top: 0;\n  margin-bottom: 0.8888889em;\n  line-height: 1.1111111;\n}\n.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-weight: 900;\n  color: inherit;\n}\n.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 700;\n  font-size: 1.5em;\n  margin-top: 2em;\n  margin-bottom: 1em;\n  line-height: 1.3333333;\n}\n.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-weight: 800;\n  color: inherit;\n}\n.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 600;\n  font-size: 1.25em;\n  margin-top: 1.6em;\n  margin-bottom: 0.6em;\n  line-height: 1.6;\n}\n.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-weight: 700;\n  color: inherit;\n}\n.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 600;\n  margin-top: 1.5em;\n  margin-bottom: 0.5em;\n  line-height: 1.5;\n}\n.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-weight: 700;\n  color: inherit;\n}\n.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  display: block;\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-weight: 500;\n  font-family: inherit;\n  color: var(--tw-prose-kbd);\n  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);\n  font-size: 0.875em;\n  border-radius: 0.3125rem;\n  padding-top: 0.1875em;\n  padding-inline-end: 0.375em;\n  padding-bottom: 0.1875em;\n  padding-inline-start: 0.375em;\n}\n.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-code);\n  font-weight: 600;\n  font-size: 0.875em;\n}\n.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {\n  content: "`";\n}\n.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {\n  content: "`";\n}\n.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n}\n.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n}\n.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n  font-size: 0.875em;\n}\n.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n  font-size: 0.9em;\n}\n.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n}\n.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n}\n.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: inherit;\n}\n.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-pre-code);\n  background-color: var(--tw-prose-pre-bg);\n  overflow-x: auto;\n  font-weight: 400;\n  font-size: 0.875em;\n  line-height: 1.7142857;\n  margin-top: 1.7142857em;\n  margin-bottom: 1.7142857em;\n  border-radius: 0.375rem;\n  padding-top: 0.8571429em;\n  padding-inline-end: 1.1428571em;\n  padding-bottom: 0.8571429em;\n  padding-inline-start: 1.1428571em;\n}\n.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  background-color: transparent;\n  border-width: 0;\n  border-radius: 0;\n  padding: 0;\n  font-weight: inherit;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {\n  content: none;\n}\n.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {\n  content: none;\n}\n.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  width: 100%;\n  table-layout: auto;\n  margin-top: 2em;\n  margin-bottom: 2em;\n  font-size: 0.875em;\n  line-height: 1.7142857;\n}\n.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  border-bottom-width: 1px;\n  border-bottom-color: var(--tw-prose-th-borders);\n}\n.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 600;\n  vertical-align: bottom;\n  padding-inline-end: 0.5714286em;\n  padding-bottom: 0.5714286em;\n  padding-inline-start: 0.5714286em;\n}\n.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  border-bottom-width: 1px;\n  border-bottom-color: var(--tw-prose-td-borders);\n}\n.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  border-bottom-width: 0;\n}\n.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  vertical-align: baseline;\n}\n.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  border-top-width: 1px;\n  border-top-color: var(--tw-prose-th-borders);\n}\n.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  vertical-align: top;\n}\n.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  text-align: start;\n}\n.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-captions);\n  font-size: 0.875em;\n  line-height: 1.4285714;\n  margin-top: 0.8571429em;\n}\n.prose {\n  --tw-prose-body: #374151;\n  --tw-prose-headings: #111827;\n  --tw-prose-lead: #4b5563;\n  --tw-prose-links: #111827;\n  --tw-prose-bold: #111827;\n  --tw-prose-counters: #6b7280;\n  --tw-prose-bullets: #d1d5db;\n  --tw-prose-hr: #e5e7eb;\n  --tw-prose-quotes: #111827;\n  --tw-prose-quote-borders: #e5e7eb;\n  --tw-prose-captions: #6b7280;\n  --tw-prose-kbd: #111827;\n  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);\n  --tw-prose-code: #111827;\n  --tw-prose-pre-code: #e5e7eb;\n  --tw-prose-pre-bg: #1f2937;\n  --tw-prose-th-borders: #d1d5db;\n  --tw-prose-td-borders: #e5e7eb;\n  --tw-prose-invert-body: #d1d5db;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #9ca3af;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #9ca3af;\n  --tw-prose-invert-bullets: #4b5563;\n  --tw-prose-invert-hr: #374151;\n  --tw-prose-invert-quotes: #f3f4f6;\n  --tw-prose-invert-quote-borders: #374151;\n  --tw-prose-invert-captions: #9ca3af;\n  --tw-prose-invert-kbd: #fff;\n  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n  --tw-prose-invert-code: #fff;\n  --tw-prose-invert-pre-code: #d1d5db;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #4b5563;\n  --tw-prose-invert-td-borders: #374151;\n  font-size: 1rem;\n  line-height: 1.75;\n}\n.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n}\n.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.375em;\n}\n.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.375em;\n}\n.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.75em;\n  margin-bottom: 0.75em;\n}\n.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.25em;\n}\n.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.25em;\n}\n.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.25em;\n}\n.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.25em;\n}\n.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.75em;\n  margin-bottom: 0.75em;\n}\n.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n}\n.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  padding-inline-start: 1.625em;\n}\n.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-top: 0.5714286em;\n  padding-inline-end: 0.5714286em;\n  padding-bottom: 0.5714286em;\n  padding-inline-start: 0.5714286em;\n}\n.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 0;\n}\n.prose-sm {\n  font-size: 0.875rem;\n  line-height: 1.6;\n}\n.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  line-height: 1.5;\n}\n.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.2857143em;\n  line-height: 1.5555556;\n  margin-top: 0.8888889em;\n  margin-bottom: 0.8888889em;\n}\n.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.1111111em;\n  padding-left: 1em;\n  border-left-width: 0.25rem;\n  font-style: italic;\n  color: inherit;\n}\n.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 2.1428571em;\n  margin-top: 0.75em;\n  margin-bottom: 0.5em;\n  line-height: 1.2;\n}\n.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.4285714em;\n  margin-top: 0.65em;\n  margin-bottom: 0.45em;\n  line-height: 1.25;\n}\n.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.2857143em;\n  margin-top: 0.6em;\n  margin-bottom: 0.4em;\n  line-height: 1.3;\n}\n.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.35em;\n  line-height: 1.35;\n}\n.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7142857em;\n  margin-bottom: 1.7142857em;\n}\n.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7142857em;\n  margin-bottom: 1.7142857em;\n}\n.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7142857em;\n  margin-bottom: 1.7142857em;\n}\n.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8571429em;\n  border-radius: 0.3125rem;\n  padding-top: 0.1428571em;\n  padding-inline-end: 0.3571429em;\n  padding-bottom: 0.1428571em;\n  padding-inline-start: 0.3571429em;\n}\n.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8571429em;\n}\n.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.9em;\n}\n.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8888889em;\n}\n.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8571429em;\n  line-height: 1.45;\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  border-radius: 0.25rem;\n  padding-top: 0.6666667em;\n  padding-inline-end: 1em;\n  padding-bottom: 0.6666667em;\n  padding-inline-start: 1em;\n  box-sizing: border-box;\n  max-width: 100%;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.5714286em;\n  padding-left: 1.25em;\n}\n.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.5714286em;\n  padding-left: 1.25em;\n}\n.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.4285714em;\n}\n.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.4285714em;\n}\n.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5714286em;\n  margin-bottom: 0.5714286em;\n}\n.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.1428571em;\n}\n.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.1428571em;\n}\n.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.1428571em;\n}\n.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.1428571em;\n}\n.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.1428571em;\n  margin-bottom: 1.1428571em;\n}\n.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.1428571em;\n}\n.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.2857143em;\n  padding-inline-start: 1.5714286em;\n}\n.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8571429em;\n  line-height: 1.5;\n}\n.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 1em;\n  padding-bottom: 0.6666667em;\n  padding-inline-start: 1em;\n}\n.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-top: 0.6666667em;\n  padding-inline-end: 1em;\n  padding-bottom: 0.6666667em;\n  padding-inline-start: 1em;\n}\n.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7142857em;\n  margin-bottom: 1.7142857em;\n}\n.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8571429em;\n  line-height: 1.3333333;\n  margin-top: 0.6666667em;\n}\n.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 0;\n}\n.prose-sm {\n  max-width: none;\n}\n.prose-sm :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.45em;\n  margin-bottom: 0.3em;\n  line-height: 1.4;\n}\n.prose-sm :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.4em;\n  margin-bottom: 0.25em;\n  line-height: 1.45;\n}\n.prose-sm :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-links);\n  text-decoration: underline;\n  font-weight: 500;\n}\n.prose-sm :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {\n  color: var(--tw-prose-links-hover, var(--tw-prose-links));\n  text-decoration: none;\n}\n.prose-base {\n  font-size: 1rem;\n  line-height: 1.6;\n}\n.prose-base :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  line-height: 1.5;\n}\n.prose-base :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.25em;\n  line-height: 1.6;\n  margin-top: 1.2em;\n  margin-bottom: 1.2em;\n}\n.prose-base :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1em;\n  padding-left: 1em;\n  border-left-width: 0.25rem;\n  font-style: italic;\n  color: inherit;\n}\n.prose-base :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 2.25em;\n  margin-top: 0.75em;\n  margin-bottom: 0.5em;\n  line-height: 1.2;\n}\n.prose-base :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.5em;\n  margin-top: 0.65em;\n  margin-bottom: 0.45em;\n  line-height: 1.25;\n}\n.prose-base :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.25em;\n  margin-top: 0.6em;\n  margin-bottom: 0.4em;\n  line-height: 1.3;\n}\n.prose-base :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.35em;\n  line-height: 1.35;\n}\n.prose-base :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-base :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-base :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-base :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-base :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.875em;\n  border-radius: 0.3125rem;\n  padding-top: 0.1875em;\n  padding-inline-end: 0.375em;\n  padding-bottom: 0.1875em;\n  padding-inline-start: 0.375em;\n}\n.prose-base :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.875em;\n}\n.prose-base :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.875em;\n}\n.prose-base :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.9em;\n}\n.prose-base :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.875em;\n  line-height: 1.45;\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  border-radius: 0.375rem;\n  padding-top: 0.8571429em;\n  padding-inline-end: 1.1428571em;\n  padding-bottom: 0.8571429em;\n  padding-inline-start: 1.1428571em;\n  box-sizing: border-box;\n  max-width: 100%;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n.prose-base :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.625em;\n  padding-left: 1.25em;\n}\n.prose-base :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.625em;\n  padding-left: 1.25em;\n}\n.prose-base :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n.prose-base :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.375em;\n}\n.prose-base :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.375em;\n}\n.prose-base :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.75em;\n  margin-bottom: 0.75em;\n}\n.prose-base :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.25em;\n}\n.prose-base :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.25em;\n}\n.prose-base :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.25em;\n}\n.prose-base :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.25em;\n}\n.prose-base :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n.prose-base :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n}\n.prose-base :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.25em;\n}\n.prose-base :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  padding-inline-start: 1.625em;\n}\n.prose-base :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-base :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-base :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-base :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-base :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-base :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.875em;\n  line-height: 1.7142857;\n}\n.prose-base :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0.5714286em;\n  padding-bottom: 0.5714286em;\n  padding-inline-start: 0.5714286em;\n}\n.prose-base :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-base :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-base :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-top: 0.5714286em;\n  padding-inline-end: 0.5714286em;\n  padding-bottom: 0.5714286em;\n  padding-inline-start: 0.5714286em;\n}\n.prose-base :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-base :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-base :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-base :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-base :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.875em;\n  line-height: 1.4285714;\n  margin-top: 0.8571429em;\n}\n.prose-base :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-base :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 0;\n}\n.prose-base {\n  max-width: none;\n}\n.prose-base :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.45em;\n  margin-bottom: 0.3em;\n  line-height: 1.4;\n}\n.prose-base :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.4em;\n  margin-bottom: 0.25em;\n  line-height: 1.45;\n}\n.prose-base :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-links);\n  text-decoration: underline;\n  font-weight: 500;\n}\n.prose-base :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {\n  color: var(--tw-prose-links-hover, var(--tw-prose-links));\n  text-decoration: none;\n}\n.prose-lg {\n  font-size: 1.125rem;\n  line-height: 1.6;\n}\n.prose-lg :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  line-height: 1.5;\n}\n.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.2222222em;\n  line-height: 1.4545455;\n  margin-top: 1.0909091em;\n  margin-bottom: 1.0909091em;\n}\n.prose-lg :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1em;\n  padding-left: 1em;\n  border-left-width: 0.25rem;\n  font-style: italic;\n  color: inherit;\n}\n.prose-lg :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 2.6666667em;\n  margin-top: 0.75em;\n  margin-bottom: 0.5em;\n  line-height: 1.2;\n}\n.prose-lg :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.6666667em;\n  margin-top: 0.65em;\n  margin-bottom: 0.45em;\n  line-height: 1.25;\n}\n.prose-lg :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.3333333em;\n  margin-top: 0.6em;\n  margin-bottom: 0.4em;\n  line-height: 1.3;\n}\n.prose-lg :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.35em;\n  line-height: 1.35;\n}\n.prose-lg :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7777778em;\n  margin-bottom: 1.7777778em;\n}\n.prose-lg :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7777778em;\n  margin-bottom: 1.7777778em;\n}\n.prose-lg :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-lg :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7777778em;\n  margin-bottom: 1.7777778em;\n}\n.prose-lg :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8888889em;\n  border-radius: 0.3125rem;\n  padding-top: 0.2222222em;\n  padding-inline-end: 0.4444444em;\n  padding-bottom: 0.2222222em;\n  padding-inline-start: 0.4444444em;\n}\n.prose-lg :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8888889em;\n}\n.prose-lg :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8666667em;\n}\n.prose-lg :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.875em;\n}\n.prose-lg :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8888889em;\n  line-height: 1.45;\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  border-radius: 0.375rem;\n  padding-top: 1em;\n  padding-inline-end: 1.5em;\n  padding-bottom: 1em;\n  padding-inline-start: 1.5em;\n  box-sizing: border-box;\n  max-width: 100%;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n.prose-lg :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.5555556em;\n  padding-left: 1.25em;\n}\n.prose-lg :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.5555556em;\n  padding-left: 1.25em;\n}\n.prose-lg :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n.prose-lg :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.4444444em;\n}\n.prose-lg :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.4444444em;\n}\n.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.8888889em;\n  margin-bottom: 0.8888889em;\n}\n.prose-lg :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n}\n.prose-lg :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.3333333em;\n}\n.prose-lg :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n}\n.prose-lg :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.3333333em;\n}\n.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n.prose-lg :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n  margin-bottom: 1.3333333em;\n}\n.prose-lg :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n}\n.prose-lg :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.6666667em;\n  padding-inline-start: 1.5555556em;\n}\n.prose-lg :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-lg :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-lg :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-lg :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-lg :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-lg :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8888889em;\n  line-height: 1.5;\n}\n.prose-lg :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0.75em;\n  padding-bottom: 0.75em;\n  padding-inline-start: 0.75em;\n}\n.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-top: 0.75em;\n  padding-inline-end: 0.75em;\n  padding-bottom: 0.75em;\n  padding-inline-start: 0.75em;\n}\n.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-lg :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7777778em;\n  margin-bottom: 1.7777778em;\n}\n.prose-lg :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-lg :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8888889em;\n  line-height: 1.5;\n  margin-top: 1em;\n}\n.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 0;\n}\n.prose-lg {\n  max-width: none;\n}\n.prose-lg :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.45em;\n  margin-bottom: 0.3em;\n  line-height: 1.4;\n}\n.prose-lg :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.4em;\n  margin-bottom: 0.25em;\n  line-height: 1.45;\n}\n.prose-lg :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-links);\n  text-decoration: underline;\n  font-weight: 500;\n}\n.prose-lg :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {\n  color: var(--tw-prose-links-hover, var(--tw-prose-links));\n  text-decoration: none;\n}\n.prose-xl {\n  font-size: 1.25rem;\n  line-height: 1.6;\n}\n.prose-xl :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  line-height: 1.5;\n}\n.prose-xl :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.2em;\n  line-height: 1.5;\n  margin-top: 1em;\n  margin-bottom: 1em;\n}\n.prose-xl :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.0666667em;\n  padding-left: 1em;\n  border-left-width: 0.25rem;\n  font-style: italic;\n  color: inherit;\n}\n.prose-xl :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 2.8em;\n  margin-top: 0.75em;\n  margin-bottom: 0.5em;\n  line-height: 1.2;\n}\n.prose-xl :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.8em;\n  margin-top: 0.65em;\n  margin-bottom: 0.45em;\n  line-height: 1.25;\n}\n.prose-xl :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.5em;\n  margin-top: 0.6em;\n  margin-bottom: 0.4em;\n  line-height: 1.3;\n}\n.prose-xl :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.35em;\n  line-height: 1.35;\n}\n.prose-xl :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-xl :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.9em;\n  border-radius: 0.3125rem;\n  padding-top: 0.25em;\n  padding-inline-end: 0.4em;\n  padding-bottom: 0.25em;\n  padding-inline-start: 0.4em;\n}\n.prose-xl :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.9em;\n}\n.prose-xl :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8611111em;\n}\n.prose-xl :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.9em;\n}\n.prose-xl :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.9em;\n  line-height: 1.45;\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  border-radius: 0.5rem;\n  padding-top: 1.1111111em;\n  padding-inline-end: 1.3333333em;\n  padding-bottom: 1.1111111em;\n  padding-inline-start: 1.3333333em;\n  box-sizing: border-box;\n  max-width: 100%;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n.prose-xl :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.6em;\n  padding-left: 1.25em;\n}\n.prose-xl :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n  padding-inline-start: 1.6em;\n  padding-left: 1.25em;\n}\n.prose-xl :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n.prose-xl :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.4em;\n}\n.prose-xl :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.4em;\n}\n.prose-xl :where(.prose-xl > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.8em;\n  margin-bottom: 0.8em;\n}\n.prose-xl :where(.prose-xl > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.2em;\n}\n.prose-xl :where(.prose-xl > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.2em;\n}\n.prose-xl :where(.prose-xl > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.2em;\n}\n.prose-xl :where(.prose-xl > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.2em;\n}\n.prose-xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n.prose-xl :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.2em;\n  margin-bottom: 1.2em;\n}\n.prose-xl :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.2em;\n}\n.prose-xl :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.6em;\n  padding-inline-start: 1.6em;\n}\n.prose-xl :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.9em;\n  line-height: 1.5555556;\n}\n.prose-xl :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0.6666667em;\n  padding-bottom: 0.8888889em;\n  padding-inline-start: 0.6666667em;\n}\n.prose-xl :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-xl :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-xl :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-top: 0.8888889em;\n  padding-inline-end: 0.6666667em;\n  padding-bottom: 0.8888889em;\n  padding-inline-start: 0.6666667em;\n}\n.prose-xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-xl :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-xl :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.9em;\n  line-height: 1.5555556;\n  margin-top: 1em;\n}\n.prose-xl :where(.prose-xl > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(.prose-xl > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 0;\n}\n.prose-xl {\n  max-width: none;\n}\n.prose-xl :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.45em;\n  margin-bottom: 0.3em;\n  line-height: 1.4;\n}\n.prose-xl :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.4em;\n  margin-bottom: 0.25em;\n  line-height: 1.45;\n}\n.prose-xl :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  color: var(--tw-prose-links);\n  text-decoration: underline;\n  font-weight: 500;\n}\n.prose-xl :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {\n  color: var(--tw-prose-links-hover, var(--tw-prose-links));\n  text-decoration: none;\n}\n.prose-2xl {\n  font-size: 1.5rem;\n  line-height: 1.6666667;\n}\n.prose-2xl :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n  margin-bottom: 1.3333333em;\n}\n.prose-2xl :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.25em;\n  line-height: 1.4666667;\n  margin-top: 1.0666667em;\n  margin-bottom: 1.0666667em;\n}\n.prose-2xl :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.7777778em;\n  margin-bottom: 1.7777778em;\n  padding-inline-start: 1.1111111em;\n}\n.prose-2xl :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 2.6666667em;\n  margin-top: 0;\n  margin-bottom: 0.875em;\n  line-height: 1;\n}\n.prose-2xl :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 2em;\n  margin-top: 1.5em;\n  margin-bottom: 0.8333333em;\n  line-height: 1.0833333;\n}\n.prose-2xl :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 1.5em;\n  margin-top: 1.5555556em;\n  margin-bottom: 0.6666667em;\n  line-height: 1.2222222;\n}\n.prose-2xl :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.6666667em;\n  margin-bottom: 0.6666667em;\n  line-height: 1.5;\n}\n.prose-2xl :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-2xl :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-2xl :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-2xl :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-2xl :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8333333em;\n  border-radius: 0.375rem;\n  padding-top: 0.25em;\n  padding-inline-end: 0.3333333em;\n  padding-bottom: 0.25em;\n  padding-inline-start: 0.3333333em;\n}\n.prose-2xl :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8333333em;\n}\n.prose-2xl :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.875em;\n}\n.prose-2xl :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8888889em;\n}\n.prose-2xl :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8333333em;\n  line-height: 1.8;\n  margin-top: 2em;\n  margin-bottom: 2em;\n  border-radius: 0.5rem;\n  padding-top: 1.2em;\n  padding-inline-end: 1.6em;\n  padding-bottom: 1.2em;\n  padding-inline-start: 1.6em;\n}\n.prose-2xl :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n  margin-bottom: 1.3333333em;\n  padding-inline-start: 1.5833333em;\n}\n.prose-2xl :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n  margin-bottom: 1.3333333em;\n  padding-inline-start: 1.5833333em;\n}\n.prose-2xl :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n}\n.prose-2xl :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.4166667em;\n}\n.prose-2xl :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0.4166667em;\n}\n.prose-2xl :where(.prose-2xl > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.8333333em;\n  margin-bottom: 0.8333333em;\n}\n.prose-2xl :where(.prose-2xl > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n}\n.prose-2xl :where(.prose-2xl > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.3333333em;\n}\n.prose-2xl :where(.prose-2xl > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n}\n.prose-2xl :where(.prose-2xl > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 1.3333333em;\n}\n.prose-2xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.6666667em;\n  margin-bottom: 0.6666667em;\n}\n.prose-2xl :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n  margin-bottom: 1.3333333em;\n}\n.prose-2xl :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 1.3333333em;\n}\n.prose-2xl :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0.5em;\n  padding-inline-start: 1.5833333em;\n}\n.prose-2xl :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 3em;\n  margin-bottom: 3em;\n}\n.prose-2xl :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-2xl :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-2xl :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-2xl :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-2xl :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8333333em;\n  line-height: 1.4;\n}\n.prose-2xl :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0.6em;\n  padding-bottom: 0.8em;\n  padding-inline-start: 0.6em;\n}\n.prose-2xl :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-2xl :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-2xl :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-top: 0.8em;\n  padding-inline-end: 0.6em;\n  padding-bottom: 0.8em;\n  padding-inline-start: 0.6em;\n}\n.prose-2xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-start: 0;\n}\n.prose-2xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  padding-inline-end: 0;\n}\n.prose-2xl :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-2xl :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-2xl :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  font-size: 0.8333333em;\n  line-height: 1.6;\n  margin-top: 1em;\n}\n.prose-2xl :where(.prose-2xl > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-top: 0;\n}\n.prose-2xl :where(.prose-2xl > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n  margin-bottom: 0;\n}\n.prose-slate {\n  --tw-prose-body: #334155;\n  --tw-prose-headings: #0f172a;\n  --tw-prose-lead: #475569;\n  --tw-prose-links: #0f172a;\n  --tw-prose-bold: #0f172a;\n  --tw-prose-counters: #64748b;\n  --tw-prose-bullets: #cbd5e1;\n  --tw-prose-hr: #e2e8f0;\n  --tw-prose-quotes: #0f172a;\n  --tw-prose-quote-borders: #e2e8f0;\n  --tw-prose-captions: #64748b;\n  --tw-prose-kbd: #0f172a;\n  --tw-prose-kbd-shadows: rgb(15 23 42 / 10%);\n  --tw-prose-code: #0f172a;\n  --tw-prose-pre-code: #e2e8f0;\n  --tw-prose-pre-bg: #1e293b;\n  --tw-prose-th-borders: #cbd5e1;\n  --tw-prose-td-borders: #e2e8f0;\n  --tw-prose-invert-body: #cbd5e1;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #94a3b8;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #94a3b8;\n  --tw-prose-invert-bullets: #475569;\n  --tw-prose-invert-hr: #334155;\n  --tw-prose-invert-quotes: #f1f5f9;\n  --tw-prose-invert-quote-borders: #334155;\n  --tw-prose-invert-captions: #94a3b8;\n  --tw-prose-invert-kbd: #fff;\n  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n  --tw-prose-invert-code: #fff;\n  --tw-prose-invert-pre-code: #cbd5e1;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #475569;\n  --tw-prose-invert-td-borders: #334155;\n}\n.prose-gray {\n  --tw-prose-body: #374151;\n  --tw-prose-headings: #111827;\n  --tw-prose-lead: #4b5563;\n  --tw-prose-links: #111827;\n  --tw-prose-bold: #111827;\n  --tw-prose-counters: #6b7280;\n  --tw-prose-bullets: #d1d5db;\n  --tw-prose-hr: #e5e7eb;\n  --tw-prose-quotes: #111827;\n  --tw-prose-quote-borders: #e5e7eb;\n  --tw-prose-captions: #6b7280;\n  --tw-prose-kbd: #111827;\n  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);\n  --tw-prose-code: #111827;\n  --tw-prose-pre-code: #e5e7eb;\n  --tw-prose-pre-bg: #1f2937;\n  --tw-prose-th-borders: #d1d5db;\n  --tw-prose-td-borders: #e5e7eb;\n  --tw-prose-invert-body: #d1d5db;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #9ca3af;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #9ca3af;\n  --tw-prose-invert-bullets: #4b5563;\n  --tw-prose-invert-hr: #374151;\n  --tw-prose-invert-quotes: #f3f4f6;\n  --tw-prose-invert-quote-borders: #374151;\n  --tw-prose-invert-captions: #9ca3af;\n  --tw-prose-invert-kbd: #fff;\n  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n  --tw-prose-invert-code: #fff;\n  --tw-prose-invert-pre-code: #d1d5db;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #4b5563;\n  --tw-prose-invert-td-borders: #374151;\n}\n.prose-zinc {\n  --tw-prose-body: #3f3f46;\n  --tw-prose-headings: #18181b;\n  --tw-prose-lead: #52525b;\n  --tw-prose-links: #18181b;\n  --tw-prose-bold: #18181b;\n  --tw-prose-counters: #71717a;\n  --tw-prose-bullets: #d4d4d8;\n  --tw-prose-hr: #e4e4e7;\n  --tw-prose-quotes: #18181b;\n  --tw-prose-quote-borders: #e4e4e7;\n  --tw-prose-captions: #71717a;\n  --tw-prose-kbd: #18181b;\n  --tw-prose-kbd-shadows: rgb(24 24 27 / 10%);\n  --tw-prose-code: #18181b;\n  --tw-prose-pre-code: #e4e4e7;\n  --tw-prose-pre-bg: #27272a;\n  --tw-prose-th-borders: #d4d4d8;\n  --tw-prose-td-borders: #e4e4e7;\n  --tw-prose-invert-body: #d4d4d8;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #a1a1aa;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #a1a1aa;\n  --tw-prose-invert-bullets: #52525b;\n  --tw-prose-invert-hr: #3f3f46;\n  --tw-prose-invert-quotes: #f4f4f5;\n  --tw-prose-invert-quote-borders: #3f3f46;\n  --tw-prose-invert-captions: #a1a1aa;\n  --tw-prose-invert-kbd: #fff;\n  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n  --tw-prose-invert-code: #fff;\n  --tw-prose-invert-pre-code: #d4d4d8;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #52525b;\n  --tw-prose-invert-td-borders: #3f3f46;\n}\n.prose-neutral {\n  --tw-prose-body: #404040;\n  --tw-prose-headings: #171717;\n  --tw-prose-lead: #525252;\n  --tw-prose-links: #171717;\n  --tw-prose-bold: #171717;\n  --tw-prose-counters: #737373;\n  --tw-prose-bullets: #d4d4d4;\n  --tw-prose-hr: #e5e5e5;\n  --tw-prose-quotes: #171717;\n  --tw-prose-quote-borders: #e5e5e5;\n  --tw-prose-captions: #737373;\n  --tw-prose-kbd: #171717;\n  --tw-prose-kbd-shadows: rgb(23 23 23 / 10%);\n  --tw-prose-code: #171717;\n  --tw-prose-pre-code: #e5e5e5;\n  --tw-prose-pre-bg: #262626;\n  --tw-prose-th-borders: #d4d4d4;\n  --tw-prose-td-borders: #e5e5e5;\n  --tw-prose-invert-body: #d4d4d4;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #a3a3a3;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #a3a3a3;\n  --tw-prose-invert-bullets: #525252;\n  --tw-prose-invert-hr: #404040;\n  --tw-prose-invert-quotes: #f5f5f5;\n  --tw-prose-invert-quote-borders: #404040;\n  --tw-prose-invert-captions: #a3a3a3;\n  --tw-prose-invert-kbd: #fff;\n  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n  --tw-prose-invert-code: #fff;\n  --tw-prose-invert-pre-code: #d4d4d4;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #525252;\n  --tw-prose-invert-td-borders: #404040;\n}\n.prose-stone {\n  --tw-prose-body: #44403c;\n  --tw-prose-headings: #1c1917;\n  --tw-prose-lead: #57534e;\n  --tw-prose-links: #1c1917;\n  --tw-prose-bold: #1c1917;\n  --tw-prose-counters: #78716c;\n  --tw-prose-bullets: #d6d3d1;\n  --tw-prose-hr: #e7e5e4;\n  --tw-prose-quotes: #1c1917;\n  --tw-prose-quote-borders: #e7e5e4;\n  --tw-prose-captions: #78716c;\n  --tw-prose-kbd: #1c1917;\n  --tw-prose-kbd-shadows: rgb(28 25 23 / 10%);\n  --tw-prose-code: #1c1917;\n  --tw-prose-pre-code: #e7e5e4;\n  --tw-prose-pre-bg: #292524;\n  --tw-prose-th-borders: #d6d3d1;\n  --tw-prose-td-borders: #e7e5e4;\n  --tw-prose-invert-body: #d6d3d1;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #a8a29e;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #a8a29e;\n  --tw-prose-invert-bullets: #57534e;\n  --tw-prose-invert-hr: #44403c;\n  --tw-prose-invert-quotes: #f5f5f4;\n  --tw-prose-invert-quote-borders: #44403c;\n  --tw-prose-invert-captions: #a8a29e;\n  --tw-prose-invert-kbd: #fff;\n  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n  --tw-prose-invert-code: #fff;\n  --tw-prose-invert-pre-code: #d6d3d1;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #57534e;\n  --tw-prose-invert-td-borders: #44403c;\n}\n.prose-red {\n  --tw-prose-links: #dc2626;\n  --tw-prose-invert-links: #ef4444;\n}\n.prose-orange {\n  --tw-prose-links: #ea580c;\n  --tw-prose-invert-links: #f97316;\n}\n.prose-amber {\n  --tw-prose-links: #d97706;\n  --tw-prose-invert-links: #f59e0b;\n}\n.prose-yellow {\n  --tw-prose-links: #ca8a04;\n  --tw-prose-invert-links: #eab308;\n}\n.prose-lime {\n  --tw-prose-links: #65a30d;\n  --tw-prose-invert-links: #84cc16;\n}\n.prose-green {\n  --tw-prose-links: #16a34a;\n  --tw-prose-invert-links: #22c55e;\n}\n.prose-emerald {\n  --tw-prose-links: #059669;\n  --tw-prose-invert-links: #10b981;\n}\n.prose-teal {\n  --tw-prose-links: #0d9488;\n  --tw-prose-invert-links: #14b8a6;\n}\n.prose-cyan {\n  --tw-prose-links: #0891b2;\n  --tw-prose-invert-links: #06b6d4;\n}\n.prose-sky {\n  --tw-prose-links: #0284c7;\n  --tw-prose-invert-links: #0ea5e9;\n}\n.prose-blue {\n  --tw-prose-links: #2563eb;\n  --tw-prose-invert-links: #3b82f6;\n}\n.prose-indigo {\n  --tw-prose-links: #4f46e5;\n  --tw-prose-invert-links: #6366f1;\n}\n.prose-violet {\n  --tw-prose-links: #7c3aed;\n  --tw-prose-invert-links: #8b5cf6;\n}\n.prose-purple {\n  --tw-prose-links: #9333ea;\n  --tw-prose-invert-links: #a855f7;\n}\n.prose-fuchsia {\n  --tw-prose-links: #c026d3;\n  --tw-prose-invert-links: #d946ef;\n}\n.prose-pink {\n  --tw-prose-links: #db2777;\n  --tw-prose-invert-links: #ec4899;\n}\n.prose-rose {\n  --tw-prose-links: #e11d48;\n  --tw-prose-invert-links: #f43f5e;\n}\n.prose-invert {\n  --tw-prose-body: var(--tw-prose-invert-body);\n  --tw-prose-headings: var(--tw-prose-invert-headings);\n  --tw-prose-lead: var(--tw-prose-invert-lead);\n  --tw-prose-links: var(--tw-prose-invert-links);\n  --tw-prose-bold: var(--tw-prose-invert-bold);\n  --tw-prose-counters: var(--tw-prose-invert-counters);\n  --tw-prose-bullets: var(--tw-prose-invert-bullets);\n  --tw-prose-hr: var(--tw-prose-invert-hr);\n  --tw-prose-quotes: var(--tw-prose-invert-quotes);\n  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);\n  --tw-prose-captions: var(--tw-prose-invert-captions);\n  --tw-prose-kbd: var(--tw-prose-invert-kbd);\n  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);\n  --tw-prose-code: var(--tw-prose-invert-code);\n  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);\n  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);\n  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);\n  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);\n}\n.prose-inherit {\n  --tw-prose-body: inherit;\n  --tw-prose-headings: inherit;\n  --tw-prose-lead: inherit;\n  --tw-prose-links: inherit;\n  --tw-prose-bold: inherit;\n  --tw-prose-counters: inherit;\n  --tw-prose-bullets: inherit;\n}\n.visible {\n  visibility: visible;\n}\n.static {\n  position: static;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.left-3 {\n  left: 0.75rem;\n}\n.right-4 {\n  right: 1rem;\n}\n.top-0 {\n  top: 0px;\n}\n.top-3 {\n  top: 0.75rem;\n}\n.top-\\[calc\\(100\\%\\+8px\\)\\] {\n  top: calc(100% + 8px);\n}\n.-z-10 {\n  z-index: -10;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-\\[1000\\] {\n  z-index: 1000;\n}\n.z-\\[99\\] {\n  z-index: 99;\n}\n.col-\\[1\\] {\n  grid-column: 1;\n}\n.row-\\[1\\] {\n  grid-row: 1;\n}\n.my-3 {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.ml-1 {\n  margin-left: 0.25rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.box-border {\n  box-sizing: border-box;\n}\n.block {\n  display: block;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-12 {\n  height: 3rem;\n}\n.h-14 {\n  height: 3.5rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-7 {\n  height: 1.75rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-\\[29px\\] {\n  height: 29px;\n}\n.h-full {\n  height: 100%;\n}\n.h-px {\n  height: 1px;\n}\n.min-h-20 {\n  min-height: 5rem;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-\\[140px\\] {\n  width: 140px;\n}\n.w-\\[48\\%\\] {\n  width: 48%;\n}\n.w-\\[51\\%\\] {\n  width: 51%;\n}\n.w-full {\n  width: 100%;\n}\n.min-w-0 {\n  min-width: 0px;\n}\n.min-w-20 {\n  min-width: 5rem;\n}\n.min-w-\\[280px\\] {\n  min-width: 280px;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[360px\\] {\n  min-width: 360px;\n}\n.max-w-\\[60px\\] {\n  max-width: 60px;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-none {\n  flex: none;\n}\n.flex-shrink {\n  flex-shrink: 1;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n.animate-bounce {\n  animation: bounce 1s infinite;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.select-none {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.grid-cols-\\[24px_1fr\\] {\n  grid-template-columns: 24px 1fr;\n}\n.grid-cols-\\[40px\\2c 1fr\\2c 20px\\] {\n  grid-template-columns: 40px 1fr 20px;\n}\n.grid-cols-\\[repeat\\(auto-fill\\2c minmax\\(\\$\\{this\\.getImageMinSizePx\\(\\)\\}px\\2c 300px\\)\\)\\] {\n  grid-template-columns: repeat(auto-fill,minmax(${this.getImageMinSizePx()}px,300px));\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-1\\.5 {\n  gap: 0.375rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-x-2 {\n  -moz-column-gap: 0.5rem;\n       column-gap: 0.5rem;\n}\n.self-center {\n  align-self: center;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.text-ellipsis {\n  text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-wrap {\n  text-wrap: wrap;\n}\n.break-words {\n  overflow-wrap: break-word;\n}\n.break-all {\n  word-break: break-all;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-t-\\[120px\\] {\n  border-top-left-radius: 120px;\n  border-top-right-radius: 120px;\n}\n.border {\n  border-width: 1px;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-\\[var\\(--neutral-90\\)\\] {\n  border-color: var(--neutral-90);\n}\n.border-neutral-90 {\n  --tw-border-opacity: 1;\n  border-color: rgb(222 231 237 / var(--tw-border-opacity, 1));\n}\n.bg-\\[var\\(--neutral-100\\)\\] {\n  background-color: var(--neutral-100);\n}\n.bg-\\[var\\(--neutral-90\\)\\] {\n  background-color: var(--neutral-90);\n}\n.bg-blue-85 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(180 209 253 / var(--tw-bg-opacity, 1));\n}\n.bg-green-85 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(195 239 206 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-90 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(222 231 237 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-95 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 243 246 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-98 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-red-85 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 188 188 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-85 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 224 179 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[radial-gradient\\(ellipse_75px_52px_at_bottom_center\\2c rgba\\(255\\2c 255\\2c 255\\2c 0\\.78\\)_0\\%\\2c rgba\\(255\\2c 255\\2c 255\\2c 0\\)_112\\.5\\%\\)\\] {\n  background-image: radial-gradient(ellipse 75px 52px at bottom center,rgba(255,255,255,0.78) 0%,rgba(255,255,255,0) 112.5%);\n}\n.object-cover {\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n.p-0 {\n  padding: 0px;\n}\n.p-0\\.5 {\n  padding: 0.125rem;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-2\\.5 {\n  padding: 0.625rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.py-10 {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.text-center {\n  text-align: center;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.font-mono {\n  font-family: "PT Mono", sans-serif;\n}\n.text-\\[10px\\] {\n  font-size: 10px;\n}\n.text-\\[12px\\] {\n  font-size: 12px;\n}\n.text-\\[13px\\] {\n  font-size: 13px;\n}\n.text-\\[14px\\] {\n  font-size: 14px;\n}\n.text-\\[16px\\] {\n  font-size: 16px;\n}\n.text-\\[17px\\] {\n  font-size: 17px;\n}\n.text-\\[18px\\] {\n  font-size: 18px;\n}\n.text-\\[24px\\] {\n  font-size: 24px;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.italic {\n  font-style: italic;\n}\n.leading-none {\n  line-height: 1;\n}\n.leading-snug {\n  line-height: 1.375;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.text-\\[var\\(--neutral-40\\)\\] {\n  color: var(--neutral-40);\n}\n.text-neutral-10 {\n  --tw-text-opacity: 1;\n  color: rgb(18 27 33 / var(--tw-text-opacity, 1));\n}\n.text-neutral-20 {\n  --tw-text-opacity: 1;\n  color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.text-neutral-30 {\n  --tw-text-opacity: 1;\n  color: rgb(54 80 99 / var(--tw-text-opacity, 1));\n}\n.text-neutral-60 {\n  --tw-text-opacity: 1;\n  color: rgb(122 157 184 / var(--tw-text-opacity, 1));\n}\n.text-neutral-70 {\n  --tw-text-opacity: 1;\n  color: rgb(156 182 201 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-100 {\n  opacity: 1;\n}\n.mix-blend-difference {\n  mix-blend-mode: difference;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-\\[0_0_16px_rgba\\(189\\2c 206\\2c 219\\2c 0\\.4\\)\\] {\n  --tw-shadow: 0 0 16px rgba(189,206,219,0.4);\n  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.ring-1 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-neutral-90 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(222 231 237 / var(--tw-ring-opacity, 1));\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-700 {\n  transition-duration: 700ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\nstrong {\n  font-weight: 600;\n}\n.hover\\:scale-105:hover {\n  --tw-scale-x: 1.05;\n  --tw-scale-y: 1.05;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:bg-neutral-90:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(222 231 237 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-neutral-95:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 243 246 / var(--tw-bg-opacity, 1));\n}\n';
+
+// src/styles/index.ts
+import { css as css2, LitElement as LitElement2, unsafeCSS } from "lit";
+var style = css2`
+  ${unsafeCSS(styles_default)}
+
+  :host([is-inline]) {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([is-full-width]) {
+    width: 100%;
+    flex: 1;
+    display: flex;
+  }
+
+`;
+var CoreLitElement = class extends LitElement2 {
+  static {
+    this.styles = [style];
+  }
+};
+
+// src/shared/address-view.ts
+var AddressView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.nameOnly = false;
+    this.addressOnly = false;
+    this.isCardView = false;
+    this.showCopyButton = false;
+    this.maxWidth = 200;
+    this.showIdenticon = true;
+    this.isLoadingAddress = false;
+    // Composables
+    this.addressResolver = useAddressResolver2();
+    // Task for resolving address data
+    this.addressTask = new Task2(this, {
+      task: async ([address], { signal }) => {
+        if (!address) return null;
+        this.isLoadingAddress = true;
+        try {
+          const resolved = await this.addressResolver.resolveAddress(address);
+          this.requestUpdate();
+          return resolved;
+        } catch (error) {
+          return null;
+        } finally {
+          this.isLoadingAddress = false;
+        }
+      },
+      args: () => [this.address]
+    });
+  }
+  /**
+   * Get the display address (first segment only for compound addresses)
+   * e.g., "0x123...-0x456..." becomes "0x123..."
+   */
+  get displayAddress() {
+    return this.address.split("-")[0];
+  }
+  /**
+   * Get display name for the address
+   */
+  getDisplayName() {
+    const resolved = this.addressTask.value;
+    if (!resolved) {
+      return this.isLoadingAddress ? "Loading..." : "Anonymous";
+    }
+    const computedName = this.addressResolver.formatDisplayName(resolved);
+    return this.label || computedName || "Anonymous";
+  }
+  /**
+   * Check if this is a contract address (non-profile)
+   */
+  get isContract() {
+    const resolved = this.addressTask.value;
+    return resolved ? resolved.__gqltype !== "Profile" : false;
+  }
+  /**
+   * Check if this should show the address hash (profiles show hash, contracts don't)
+   */
+  get shouldShowAddressHash() {
+    const resolved = this.addressTask.value;
+    return resolved ? resolved.__gqltype === "Profile" : true;
+  }
+  /**
+   * Get prefix for the address display
+   */
+  get addressPrefix() {
+    const resolved = this.addressTask.value;
+    return resolved?.hasProfile ? "@" : "";
+  }
+  /**
+   * Check if should show name colors
+   */
+  get shouldShowNameColor() {
+    const resolved = this.addressTask.value;
+    return resolved ? this.addressResolver.shouldShowNameColor(resolved) : true;
+  }
+  /**
+   * Handle address click
+   */
+  handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("address-click", {
+        detail: {
+          address: this.address,
+          resolved: this.addressTask.value
+        },
+        bubbles: true
+      })
+    );
+  }
+  /** Generate identicon when address changes */
+  willUpdate(changed) {
+    if (changed.has("address") && this.address) {
+      try {
+        this.identicon = makeBlockie(this.displayAddress.toLowerCase());
+      } catch {
+        this.identicon = void 0;
+      }
+    }
+  }
+  /** Copy the display address to clipboard (card view) */
+  handleCopy(event) {
+    if (event) event.stopPropagation();
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(this.displayAddress);
+      this.dispatchEvent(
+        new CustomEvent("address-copied", {
+          detail: { address: this.displayAddress },
+          bubbles: true
+        })
+      );
+    }
+  }
+  /** ========== RENDER HELPERS (Use Cases) ========== */
+  /** Pixel size mapping for identicon based on component size */
+  getIdenticonSizePx() {
+    switch (this.size) {
+      case "x-small":
+        return 10;
+      case "small":
+        return 12;
+      case "medium":
+        return 14;
+      case "large":
+        return 16;
+      default:
+        return 14;
+    }
+  }
+  /**
+   * Render only the name (and optionally the address hash when allowed for profiles)
+   */
+  renderNameOnly(displayName) {
+    return html2`
+      <!-- Name Only Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        name=${displayName}
+        address=${this.address}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        prefix=${this.addressPrefix}
+        address-color=${this.addressColor}
+        name-color=${this.nameColor}
+      ></lukso-username>
+    `;
+  }
+  /**
+   * Render only the raw address (no name)
+   */
+  renderAddressOnly() {
+    return html2`
+      <!-- Address Only Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        address=${this.displayAddress}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        has-name-color="false"
+        ?has-address-color=${this.shouldShowNameColor}
+      ></lukso-username>
+    `;
+  }
+  /**
+   * Render both name and (conditionally) the address hash (profiles show hash, contracts may hide it)
+   */
+  renderNameAndAddress(displayName) {
+    return html2`
+      <!-- Name + Address Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        name=${displayName}
+        address=${this.address}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        prefix=${this.addressPrefix}
+        address-color=${this.addressColor}
+        name-color=${this.nameColor}
+      ></lukso-username>
+    `;
+  }
+  renderIdenticon() {
+    if (!this.showIdenticon || !this.identicon) return "";
+    const size = this.getIdenticonSizePx();
+    return html2`
+      <div class="inline-flex items-center justify-center align-middle">
+        <img
+          class="inline-block rounded-full ring-1 ring-neutral-90 shrink-0"
+          src=${this.identicon}
+          alt="identicon"
+          style="width:${size}px;height:${size}px;image-rendering:pixelated;"
+        />
+      </div>
+    `;
+  }
+  /** Map size to a typography class for the label */
+  getLabelClass() {
+    switch (this.size) {
+      case "x-small":
+        return "paragraph-inter-12-semi-bold";
+      case "small":
+        return "heading-inter-14-bold";
+      case "medium":
+        return "heading-inter-17-semi-bold";
+      case "large":
+        return "heading-inter-21-semi-bold";
+      default:
+        return "heading-inter-17-semi-bold";
+    }
+  }
+  renderDisplayName() {
+    const displayName = this.getDisplayName();
+    return this.label ? html2`<div class="inline-flex items-center gap-2 font-semibold text-neutral-20 ${this.getLabelClass()}">${this.label}</div>` : html2`<lukso-username
+              class="inline-block align-middle"
+              name=${displayName}
+              size=${this.size}
+              ?has-name-color=${this.shouldShowNameColor}
+            ></lukso-username>`;
+  }
+  /**
+   * Decide which of the three core inline variants to render
+   */
+  renderInlineVariant(displayName) {
+    if (this.nameOnly) return this.renderNameOnly(displayName);
+    if (this.addressOnly) return this.renderAddressOnly();
+    return this.renderNameAndAddress(displayName);
+  }
+  render() {
+    const displayName = this.getDisplayName();
+    if (this.isCardView) {
+      return html2`
+        <div class="block border border-neutral-90 rounded-xl py-3 px-4 bg-neutral-100 min-w-[280px]" @click=${this.handleClick}>
+          <div class="flex items-center justify-between mb-2">
+          <div class="inline-flex items-center font-normal gap-1">
+            ${this.renderIdenticon()}
+            ${this.renderDisplayName()}
+          </div>
+            ${this.showCopyButton ? html2`<button
+                  class="bg-neutral-100 border-0 rounded-lg w-6 h-6 flex items-center justify-center cursor-pointer text-neutral-20 hover:bg-neutral-95"
+                  @click=${(e) => this.handleCopy(e)}
+                  title="Copy address"
+                >
+                  <lukso-icon name="copy" size="small"></lukso-icon>
+                </button>` : html2``}
+          </div>
+          <div class="font-semibold text-neutral-20 break-all flex items-center gap-2">
+            
+            <lukso-username
+              address=${this.displayAddress}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              has-name-color="false"
+              slice-by="24"
+              ?has-address-color=${this.shouldShowNameColor}
+            ></lukso-username>
+          </div>
+        </div>
+      `;
+    }
+    return html2`
+      <div class="inline-flex items-center cursor-pointer gap-1" @click=${this.handleClick}>
+        ${this.renderIdenticon()}
+        <!-- Inline Variants -->
+        ${this.renderInlineVariant(displayName)}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property2()
+], AddressView.prototype, "address", 2);
+__decorateClass([
+  property2()
+], AddressView.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "name-only" })
+], AddressView.prototype, "nameOnly", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "address-only" })
+], AddressView.prototype, "addressOnly", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "is-card-view" })
+], AddressView.prototype, "isCardView", 2);
+__decorateClass([
+  property2()
+], AddressView.prototype, "label", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "show-copy-button" })
+], AddressView.prototype, "showCopyButton", 2);
+__decorateClass([
+  property2({ type: Number, attribute: "max-width" })
+], AddressView.prototype, "maxWidth", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "show-identicon" })
+], AddressView.prototype, "showIdenticon", 2);
+__decorateClass([
+  property2({ type: String, attribute: "address-color" })
+], AddressView.prototype, "addressColor", 2);
+__decorateClass([
+  property2({ type: String, attribute: "name-color" })
+], AddressView.prototype, "nameColor", 2);
+__decorateClass([
+  state2()
+], AddressView.prototype, "isLoadingAddress", 2);
+__decorateClass([
+  state2()
+], AddressView.prototype, "identicon", 2);
+AddressView = __decorateClass([
+  safeCustomElement("address-view")
+], AddressView);
+
+// src/shared/custom-select.ts
+import { html as html3 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+import makeBlockie2 from "ethereum-blockies-base64";
+var CustomOption = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+    this.disabled = false;
+    this.hoverable = true;
+  }
+  render() {
+    const base = "flex flex-row flex-1 items-center px-2 py-1 gap-2 h-7 rounded-md border-0 cursor-pointer text-[14px] text-neutral-20 w-full justify-between";
+    const hover = this.hoverable ? " hover:bg-neutral-95" : "";
+    const selected = this.selected ? " bg-neutral-90 rounded" : "";
+    const disabled = this.disabled ? " text-neutral-60 cursor-not-allowed" : "";
+    return html3`<button class="${base}${hover}${selected}${disabled}" ?disabled=${this.disabled}><slot></slot></button>`;
+  }
+};
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], CustomOption.prototype, "selected", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], CustomOption.prototype, "disabled", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], CustomOption.prototype, "hoverable", 2);
+CustomOption = __decorateClass([
+  safeCustomElement("custom-option")
+], CustomOption);
+var CustomSelect = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.options = [];
+    this.size = "small";
+    this.onOutsideClick = (e) => {
+      if (!this.open) return;
+      const path = e.composedPath();
+      if (!path.includes(this)) this.close();
+    };
+  }
+  toggleOpen() {
+    this.open = !this.open;
+  }
+  close() {
+    this.open = false;
+  }
+  onOptionClick(opt) {
+    if (opt.disabled) return;
+    this.value = opt.value;
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+    this.close();
+  }
+  onKeyDown(e) {
+    if (e.key === "Escape") this.close();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.onOutsideClick, { capture: true });
+  }
+  disconnectedCallback() {
+    window.removeEventListener("click", this.onOutsideClick, { capture: true });
+    super.disconnectedCallback();
+  }
+  updated() {
+    const selectedOption = this.getSelectedOption();
+    if (selectedOption) {
+      this.value = selectedOption.value;
+    }
+  }
+  getSelectedOption() {
+    return this.options.find((o) => o.value === this.value);
+  }
+  getIdenticonSizePx() {
+    switch (this.size) {
+      case "x-small":
+        return 10;
+      case "small":
+        return 12;
+      case "medium":
+        return 14;
+      case "large":
+        return 16;
+      default:
+        return 14;
+    }
+  }
+  renderIdenticon(address) {
+    const size = this.getIdenticonSizePx();
+    const identicon = makeBlockie2(address.toLowerCase());
+    return html3`
+      <div class="inline-flex items-center p-1 justify-center rounded-lg bg-neutral-100 border border-neutral-90 overflow-hidden flex-none">
+        <img
+          class="block"
+          src=${identicon}
+          alt="identicon"
+          style="width:${size}px;height:${size}px;"
+        />
+      </div>
+    `;
+  }
+  renderOptionLabel(option) {
+    return option.value.startsWith("0x") ? html3`<div class="inline-flex items-center gap-2 px-2.5 py-1.5 text-neutral-20 leading-tight font-semibold">${this.renderIdenticon(
+      option.value
+    )} <span class="whitespace-nowrap overflow-hidden text-ellipsis text-[14px]">${option.label}</span></div>` : html3`<url-view url=${option.value} label=${option.label} size="x-small"></url-view>`;
+  }
+  render() {
+    const selectedOption = this.getSelectedOption();
+    return html3`
+      <div class="relative w-full min-w-[360px]" @keydown=${this.onKeyDown}>
+        <button class="box-border flex flex-row flex-1 w-full items-center h-[29px] bg-white border border-neutral-90 rounded-lg text-neutral-20 cursor-pointer justify-between" @click=${this.toggleOpen} aria-haspopup="listbox" aria-expanded=${this.open}>
+            <custom-option is-full-width .hoverable=${false}>
+            <div class="flex flex-row flex-1 items-center justify-between">
+              <span>${selectedOption ? this.renderOptionLabel(selectedOption) : "Select option"}</span>
+              <lukso-icon class="transition-transform ${this.open ? "rotate-180" : ""}" name="arrow-down-sm" size="small" color="neutral-20" aria-hidden="true">
+            </lukso-icon>
+            </div>
+          </custom-option>
+        </button>
+
+        ${this.open && this.options.length > 0 ? html3`<div class="absolute left-0 top-[calc(100%+8px)] w-full bg-white border border-neutral-90 shadow-[0_0_16px_rgba(189,206,219,0.4)] rounded-xl p-2.5 flex flex-col gap-1 z-[1000] overflow-hidden box-border" role="listbox">
+              ${this.options.map(
+      (opt) => html3`<custom-option .selected=${opt.value === this.value} .disabled=${opt.disabled} @click=${() => this.onOptionClick(opt)}>
+              ${this.renderOptionLabel(opt)}
+              </custom-option>`
+    )}
+            </div>` : ""}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property3()
+], CustomSelect.prototype, "value", 2);
+__decorateClass([
+  property3({ type: Boolean })
+], CustomSelect.prototype, "open", 2);
+__decorateClass([
+  property3({ type: Array })
+], CustomSelect.prototype, "options", 2);
+__decorateClass([
+  property3({ type: String })
+], CustomSelect.prototype, "size", 2);
+CustomSelect = __decorateClass([
+  safeCustomElement("custom-select")
+], CustomSelect);
+
+// src/shared/function-name-view.ts
+import { html as html4 } from "lit";
+import { property as property4 } from "lit/decorators.js";
+var FunctionNameView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.icon = "user";
+    this.size = "small";
+  }
+  getPadding() {
+    switch (this.size) {
+      case "x-small":
+        return "2px 8px";
+      case "small":
+        return "4px 10px";
+      case "medium":
+        return "6px 12px";
+      case "large":
+        return "8px 14px";
+      default:
+        return "4px 10px";
+    }
+  }
+  getFontSize() {
+    switch (this.size) {
+      case "x-small":
+        return "12px";
+      case "small":
+        return "14px";
+      case "medium":
+        return "16px";
+      case "large":
+        return "18px";
+      default:
+        return "14px";
+    }
+  }
+  getIconSize() {
+    return this.size;
+  }
+  getHeight() {
+    switch (this.size) {
+      case "x-small":
+        return "h-6";
+      case "small":
+        return "h-8";
+      case "medium":
+        return "h-10";
+      case "large":
+        return "h-12";
+      default:
+        return "h-8";
+    }
+  }
+  render() {
+    return html4`
+      <div class="inline-flex ${this.getHeight()} items-center gap-2 bg-neutral-90 text-neutral-20 rounded-xl leading-none font-semibold" style="padding:${this.getPadding()}; font-size:${this.getFontSize()};">
+        <lukso-icon name=${this.icon} size=${this.getIconSize()} color=${this.color || ""}></lukso-icon>
+        <span class="whitespace-nowrap"><slot>${this.label}</slot></span>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property4()
+], FunctionNameView.prototype, "label", 2);
+__decorateClass([
+  property4()
+], FunctionNameView.prototype, "icon", 2);
+__decorateClass([
+  property4()
+], FunctionNameView.prototype, "size", 2);
+__decorateClass([
+  property4({ attribute: "color" })
+], FunctionNameView.prototype, "color", 2);
+FunctionNameView = __decorateClass([
+  safeCustomElement("function-name-view")
+], FunctionNameView);
+
+// src/shared/gas-provider-view.ts
+import { html as html5 } from "lit";
+import { property as property5 } from "lit/decorators.js";
+var GasProviderView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.allRelayers = [];
+    this.balance = 0;
+    this.symbol = "LYX";
+    this.decimals = 18;
+    this.transactionFee = 0;
+    this.relayerAvailable = 0;
+    this.relayerUsed = 0;
+    this.relayerToBeUsed = 0;
+    this.relayerResetDate = "N/A";
+  }
+  formatToken(amount) {
+    return (amount / 10 ** this.decimals).toLocaleString(void 0, {
+      maximumFractionDigits: 6
+    });
+  }
+  onSelectChanged(e) {
+    const value = e.target.value;
+    if (!value) return;
+    if (this.controllerAddress && value === this.controllerAddress) {
+      const next = {
+        type: "controller",
+        id: this.controllerAddress
+      };
+      if (!this.selectedGasProvider || this.selectedGasProvider.id !== next.id || this.selectedGasProvider.type !== next.type) {
+        this.selectedGasProvider = next;
+        this.dispatchEvent(
+          new CustomEvent("on-gas-provider-change", {
+            detail: next,
+            bubbles: true
+          })
+        );
+      }
+      return;
+    }
+    const match = this.allRelayers.find(
+      (r) => r.website === value || r.apiUrl === value
+    );
+    if (match) {
+      const next = { type: "relayer", id: match.id };
+      if (!this.selectedGasProvider || this.selectedGasProvider.id !== next.id || this.selectedGasProvider.type !== next.type) {
+        this.selectedGasProvider = next;
+        this.dispatchEvent(
+          new CustomEvent("on-gas-provider-change", {
+            detail: next,
+            bubbles: true
+          })
+        );
+      }
+      return;
+    }
+  }
+  renderProgress(totalAvailable, used, toBeUsed, symbol, hasError) {
+    const usedPercent = totalAvailable ? used / totalAvailable * 100 : 0;
+    const toBeUsedPercent = totalAvailable ? toBeUsed / totalAvailable * 100 : 0;
+    const barOverHalf = usedPercent > 50;
+    return html5`<progress-view
+            class=${hasError ? "error" : ""}
+            .data=${[
+      {
+        value: usedPercent,
+        color: "var(--green-54)",
+        title: `${usedPercent}%`
+      },
+      {
+        value: toBeUsedPercent,
+        color: "var(--neutral-60)",
+        title: `${toBeUsedPercent}%`
+      }
+    ]}
+            label-position=${barOverHalf ? "left" : "right"}
+            .label=${`${toBeUsed} / ${String(totalAvailable)} ${symbol}`}
+          >
+          </progress-view>`;
+  }
+  renderControllerProgress() {
+    return this.renderProgress(
+      this.balance,
+      0,
+      this.transactionFee,
+      this.symbol,
+      this.transactionFee > this.balance
+    );
+  }
+  renderRelayerProgress() {
+    return this.renderProgress(
+      this.relayerAvailable,
+      this.relayerUsed,
+      this.relayerToBeUsed,
+      "M GAS",
+      this.relayerToBeUsed > this.relayerAvailable
+    );
+  }
+  displayRelayerResetDate() {
+    const date = new Date(this.relayerResetDate);
+    return isNaN(date.getTime()) ? "N/A" : date.toLocaleDateString();
+  }
+  render() {
+    const formatted = this.formatToken(this.balance);
+    const relayerOptions = this.allRelayers.map((r) => ({
+      value: r.website || r.apiUrl || `relayer:${r.id}`,
+      label: r.name,
+      disabled: false
+    }));
+    const controllerOption = this.controllerAddress ? [
+      {
+        value: this.controllerAddress,
+        label: this.controllerName ? `${this.controllerName} (${formatted} ${this.symbol})` : `UP Browser Extension (${formatted} ${this.symbol})`,
+        disabled: false
+      }
+    ] : [];
+    const options = [...relayerOptions, ...controllerOption];
+    const selectedValue = this.selectedGasProvider ? this.selectedGasProvider.type === "controller" ? this.controllerAddress : (() => {
+      const r = this.allRelayers.find(
+        (x) => x.id === this.selectedGasProvider.id
+      );
+      return r?.website || r?.apiUrl || `relayer:${this.selectedGasProvider.id}`;
+    })() : void 0;
+    return html5`
+      <div class="w-full">
+        <custom-select .value=${selectedValue} .options=${options} @change=${this.onSelectChanged}></custom-select>
+          ${this.selectedGasProvider ? html5`<div class="mt-2">
+          ${this.selectedGasProvider?.type === "controller" ? this.renderControllerProgress() : this.renderRelayerProgress()}
+          ${this.selectedGasProvider?.type === "relayer" ? html5`<span class="text-[12px] text-neutral-60 mt-2 block">
+          Your total of ${this.relayerAvailable}M resets on ${this.displayRelayerResetDate()}.
+        </span>` : html5``}
+        </div>` : html5``}
+       
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property5({ type: Array, reflect: true })
+], GasProviderView.prototype, "allRelayers", 2);
+__decorateClass([
+  property5({ type: Number, reflect: true })
+], GasProviderView.prototype, "balance", 2);
+__decorateClass([
+  property5({ type: Object, attribute: "selected-gas-provider", reflect: true })
+], GasProviderView.prototype, "selectedGasProvider", 2);
+__decorateClass([
+  property5({ attribute: "controller-address", reflect: true })
+], GasProviderView.prototype, "controllerAddress", 2);
+__decorateClass([
+  property5({ attribute: "controller-name", reflect: true })
+], GasProviderView.prototype, "controllerName", 2);
+__decorateClass([
+  property5({ attribute: "symbol", reflect: true })
+], GasProviderView.prototype, "symbol", 2);
+__decorateClass([
+  property5({ type: Number, reflect: true })
+], GasProviderView.prototype, "decimals", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "transaction-fee", reflect: true })
+], GasProviderView.prototype, "transactionFee", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "relayer-available", reflect: true })
+], GasProviderView.prototype, "relayerAvailable", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "relayer-used", reflect: true })
+], GasProviderView.prototype, "relayerUsed", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "relayer-to-be-used", reflect: true })
+], GasProviderView.prototype, "relayerToBeUsed", 2);
+__decorateClass([
+  property5({ attribute: "relayer-reset-date", reflect: true })
+], GasProviderView.prototype, "relayerResetDate", 2);
+GasProviderView = __decorateClass([
+  safeCustomElement("gas-provider-view")
+], GasProviderView);
+
+// src/shared/icon-view.ts
+import { Task as Task3 } from "@lit/task";
+import {
+  useAddressResolver as useAddressResolver3,
+  useImageLoader as useImageLoader2
+} from "@lukso/transaction-view-headless";
+import { html as html6 } from "lit";
+import { property as property6, state as state5 } from "lit/decorators.js";
+var IconView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.showName = true;
+    this.namePosition = "below";
+    this.maxWidth = 200;
+    this.showIconIdenticon = true;
+    this.showLabelIdenticon = false;
+    this.forceUnresolved = false;
+    this.isLoadingImage = false;
+    this.isLoadingAddress = false;
+    // Composables
+    this.imageLoader = useImageLoader2();
+    this.addressResolver = useAddressResolver3();
+    // Task for resolving address data
+    this.addressTask = new Task3(this, {
+      task: async ([address], { signal }) => {
+        if (!address) return null;
+        this.isLoadingAddress = true;
+        try {
+          const resolved = await this.addressResolver.resolveAddress(address);
+          this.requestUpdate();
+          return resolved;
+        } catch (error) {
+          console.warn("\u274C IconView: Failed to resolve address:", error);
+          return null;
+        } finally {
+          this.isLoadingAddress = false;
+        }
+      },
+      args: () => [this.address]
+    });
+    // Task for loading profile image
+    this.imageTask = new Task3(this, {
+      task: async ([resolved], { signal }) => {
+        if (!resolved) return null;
+        this.isLoadingImage = true;
+        try {
+          let image;
+          if (this.imageHint && resolved[this.imageHint]) {
+            const imageArray = resolved[this.imageHint];
+            if (Array.isArray(imageArray) && imageArray.length > 0) {
+              image = await this.imageLoader.loadImage(imageArray, {
+                width: this.getSizePixels(),
+                height: this.getSizePixels(),
+                dpr: window.devicePixelRatio || 1,
+                index: this.imageIndex
+              });
+            }
+          } else {
+            image = await this.imageLoader.loadProfileImage(resolved, {
+              width: this.getSizePixels(),
+              height: this.getSizePixels(),
+              dpr: window.devicePixelRatio || 1,
+              index: this.imageIndex
+            });
+          }
+          return image || this.imageLoader.getFallbackImage(resolved);
+        } catch (error) {
+          console.warn("Failed to load address image:", error);
+          return this.imageLoader.getFallbackImage(resolved || {});
+        } finally {
+          this.isLoadingImage = false;
+        }
+      },
+      args: () => [this.addressTask.value]
+    });
+  }
+  /**
+   * Get pixel size for the current size setting
+   */
+  getSizePixels() {
+    switch (this.size) {
+      case "x-small":
+        return 16;
+      case "small":
+        return 24;
+      case "medium":
+        return 32;
+      case "large":
+        return 48;
+      case "2x-large":
+        return 124;
+      default:
+        return 24;
+    }
+  }
+  /**
+   * Check if this is a contract address (shows square icon)
+   */
+  get isContract() {
+    const resolved = this.addressTask.value;
+    return resolved ? this.imageLoader.isContractAddress(resolved) : false;
+  }
+  /**
+   * Handle icon click
+   */
+  handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("address-click", {
+        detail: {
+          address: this.address,
+          resolved: this.addressTask.value
+        },
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    const imageResult = this.imageTask.value;
+    const containerClass = this.namePosition === "beside" ? "row" : "column";
+    return html6`
+      <div class="${containerClass === "row" ? "flex items-start gap-1" : "flex flex-col items-center gap-1"}">
+        ${this.label ? html6`<div class="text-[12px] text-neutral-60 font-medium">${this.label}</div>` : ""}
+
+        <div class="${this.namePosition === "beside" ? "inline-flex flex-row items-center gap-2" : "inline-flex flex-col items-center gap-1.5"}">
+          <lukso-profile
+            size=${this.size}
+            profile-address=${this.address}
+            profile-url=${imageResult?.src || ""}
+            ?has-identicon=${this.showIconIdenticon}
+            ?is-square=${this.isContract}
+            class="inline-flex items-center cursor-pointer transition-transform duration-200 hover:scale-105"
+            @click=${this.handleClick}
+          ></lukso-profile>
+
+          ${this.showName ? html6`
+                <address-view
+                  class="leading-none"
+                  address=${this.address}
+                  .showIdenticon=${this.showLabelIdenticon}
+                  size=${this.size}
+                  max-width=${this.maxWidth}
+                ></address-view>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property6()
+], IconView.prototype, "address", 2);
+__decorateClass([
+  property6({ type: Object })
+], IconView.prototype, "resolved", 2);
+__decorateClass([
+  property6()
+], IconView.prototype, "size", 2);
+__decorateClass([
+  property6()
+], IconView.prototype, "label", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "show-name" })
+], IconView.prototype, "showName", 2);
+__decorateClass([
+  property6({ attribute: "name-position" })
+], IconView.prototype, "namePosition", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "max-width" })
+], IconView.prototype, "maxWidth", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "show-icon-identicon" })
+], IconView.prototype, "showIconIdenticon", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "show-label-identicon" })
+], IconView.prototype, "showLabelIdenticon", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "force-unresolved" })
+], IconView.prototype, "forceUnresolved", 2);
+__decorateClass([
+  property6({ type: String, attribute: "image-hint" })
+], IconView.prototype, "imageHint", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "image-index" })
+], IconView.prototype, "imageIndex", 2);
+__decorateClass([
+  state5()
+], IconView.prototype, "imageData", 2);
+__decorateClass([
+  state5()
+], IconView.prototype, "isLoadingImage", 2);
+__decorateClass([
+  state5()
+], IconView.prototype, "isLoadingAddress", 2);
+IconView = __decorateClass([
+  safeCustomElement("icon-view")
+], IconView);
+
+// src/shared/image-loader-controller.ts
+import {
+  useImageLoader as useImageLoaderHeadless
+} from "@lukso/transaction-view-headless";
+var ImageLoaderController = class {
+  constructor(host) {
+    this.headlessLoader = useImageLoaderHeadless();
+    // Internal state
+    this._state = {
+      result: null,
+      loading: false,
+      error: null
+    };
+    this.host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+  }
+  get state() {
+    return this._state;
+  }
+  get isLoading() {
+    return this._state.loading;
+  }
+  get error() {
+    return this._state.error;
+  }
+  get result() {
+    return this._state.result;
+  }
+  /**
+   * Load image from data array
+   */
+  async loadImage(imageData, options = {}) {
+    this.updateState({ loading: true, error: null });
+    try {
+      const result = await this.headlessLoader.loadImage(imageData, options);
+      this.updateState({ result, loading: false });
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err.message : "Failed to load image";
+      this.updateState({ loading: false, error });
+      return null;
+    }
+  }
+  /**
+   * Load profile image from address data
+   */
+  async loadProfileImage(addressData, options = {}) {
+    this.updateState({ loading: true, error: null });
+    try {
+      const result = await this.headlessLoader.loadProfileImage(addressData, options) || this.headlessLoader.getFallbackImage(addressData);
+      this.updateState({ result, loading: false });
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err.message : "Failed to load profile image";
+      const fallback = this.headlessLoader.getFallbackImage(addressData);
+      this.updateState({ result: fallback, loading: false, error });
+      return fallback;
+    }
+  }
+  /**
+   * Load image from address signal (reactive)
+   */
+  loadFromSignal(addressSignal, options = {}) {
+    const addressData = addressSignal.value?.data;
+    if (!addressData) {
+      const fallback = this.headlessLoader.getFallbackImage({});
+      this.updateState({ result: fallback, loading: false, error: null });
+      return;
+    }
+    this.loadProfileImage(addressData, options);
+  }
+  /**
+   * Get fallback image synchronously
+   */
+  getFallbackImage(addressData) {
+    return this.headlessLoader.getFallbackImage(addressData);
+  }
+  /**
+   * Check if address is a contract
+   */
+  isContractAddress(addressData) {
+    return this.headlessLoader.isContractAddress(addressData);
+  }
+  /**
+   * Clear current state
+   */
+  clear() {
+    this.updateState({ result: null, loading: false, error: null });
+  }
+  updateState(updates) {
+    this._state = { ...this._state, ...updates };
+    this.host.requestUpdate();
+  }
+};
+function useImageLoader3(host) {
+  return new ImageLoaderController(host);
+}
+
+// src/shared/notification-view.ts
+import { html as html7 } from "lit";
+import { property as property7, state as state6 } from "lit/decorators.js";
+var NotificationView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "info";
+    this.message = "";
+    this.title = "";
+    this.acknowledgeable = false;
+    this.acknowledgeText = "I understand and want to continue";
+    this.acknowledged = false;
+    this.checked = false;
+  }
+  handleAcknowledgeChange(e) {
+    e.stopPropagation();
+    const target = e.target;
+    const checked = !!(target?.checked ?? e.detail?.checked ?? false);
+    if (checked !== this.checked) {
+      this.checked = checked;
+    }
+    if (this.checked) {
+      this.acknowledged = true;
+      this.dispatchEvent(
+        new CustomEvent("notification-acknowledged", {
+          detail: {
+            variant: this.variant,
+            message: this.message,
+            title: this.title,
+            checked: this.checked
+          },
+          bubbles: true
+        })
+      );
+    }
+  }
+  render() {
+    if (this.acknowledged) return html7``;
+    return html7`
+      <div class="grid grid-cols-[24px_1fr] items-start gap-3 p-3 rounded-xl text-neutral-10 leading-snug ${this.getVariantBackgroundClass()}">
+        <div class="flex items-center justify-center text-[16px] text-neutral-20 self-center" aria-hidden="true">
+        <lukso-icon name="${this.renderIcon()}" size="large" color="${this.getVariantColor()}"></lukso-icon>
+        </div>
+        <div class="text-[14px] flex flex-col gap-1.5">
+          ${this.title ? html7`<div class="font-semibold text-neutral-20 paragraph-inter-14-semi-bold">${this.title}</div>` : ""}
+          <div class="text-neutral-30"><slot>${this.message}</slot></div>
+          ${this.acknowledgeable ? html7`
+                <div class="inline-flex items-center gap-2 mt-1 text-[12px] text-neutral-20 select-none cursor-pointer paragraph-inter-12-medium">
+                  <lukso-checkbox 
+                    size="x-small" 
+                    ?checked=${this.checked}
+                    @change=${this.handleAcknowledgeChange}
+                  ><span class="paragraph-inter-14-semi-bold">${this.acknowledgeText}</span></lukso-checkbox>
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderIcon() {
+    switch (this.variant) {
+      case "success":
+        return "bulb-outline";
+      case "warning":
+        return "warning-round";
+      case "error":
+        return "warning-triangle";
+      default:
+        return "bulb-outline";
+    }
+  }
+  getVariantColor() {
+    switch (this.variant) {
+      case "success":
+        return "green-45";
+      case "warning":
+        return "yellow-55";
+      case "error":
+        return "red-55";
+      default:
+        return "blue-50";
+    }
+  }
+  getVariantBackgroundClass() {
+    switch (this.variant) {
+      case "success":
+        return "bg-green-85";
+      case "warning":
+        return "bg-yellow-85";
+      case "error":
+        return "bg-red-85";
+      default:
+        return "bg-blue-85";
+    }
+  }
+};
+__decorateClass([
+  property7()
+], NotificationView.prototype, "variant", 2);
+__decorateClass([
+  property7()
+], NotificationView.prototype, "message", 2);
+__decorateClass([
+  property7()
+], NotificationView.prototype, "title", 2);
+__decorateClass([
+  property7({ type: Boolean, attribute: "acknowledgeable" })
+], NotificationView.prototype, "acknowledgeable", 2);
+__decorateClass([
+  property7({ attribute: "acknowledge-text" })
+], NotificationView.prototype, "acknowledgeText", 2);
+__decorateClass([
+  state6()
+], NotificationView.prototype, "acknowledged", 2);
+__decorateClass([
+  property7({ type: Boolean, reflect: true })
+], NotificationView.prototype, "checked", 2);
+NotificationView = __decorateClass([
+  safeCustomElement("notification-view")
+], NotificationView);
+
+// src/shared/progress-view.ts
+import { html as html8 } from "lit";
+import { property as property8 } from "lit/decorators.js";
+var ProgressView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.data = [];
+    this.labelPosition = "right";
+  }
+  renderGasProviderLabel() {
+    return html8`
+    ${this.label ? html8`
+          <span class="progress-label-value">${this.label}</span>
+          ${this.unit ? html8`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>` : ""}
+        ` : html8`
+          <slot></slot>
+          ${this.unit ? html8`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>` : ""}
+        `}
+    `;
+  }
+  renderAddressLabel() {
+    return html8`
+      <value-view
+        .value=${this.address}
+        .unit=${this.unit}
+      ></value-view>
+    `;
+  }
+  render() {
+    const isError = (this.className || "").split(/\s+/).includes("error");
+    return html8`
+      <div class="relative grid w-full ${this.className || ""}">
+        <div class="flex bg-neutral-95 h-6 rounded-lg relative col-[1] row-[1] overflow-hidden" style=${isError ? "background-color: var(--red-65);" : ""} role="progressbar">
+          ${this.data.map((seg, index) => {
+      const width = `${Math.max(0, Math.min(100, Number(seg.value || 0)))}%`;
+      const backgroundColor = seg.color || "var(--neutral-90)";
+      const title = seg.title || "";
+      return html8`<div
+              class="h-full flex items-center justify-center text-[10px] font-semibold"
+              style=${`width:${width};background-color:${backgroundColor};`}
+              data-testid=${`value-${index}`}
+            >${title}</div>`;
+    })}
+        </div>
+        <div class=${`flex items-center absolute h-6 rounded-lg overflow-visible w-full col-[1] row-[1] top-0 left-0 ${this.labelPosition === "left" ? "justify-start" : "justify-end"}`} data-testid="progress-labels">
+          <div class="text-[13px] font-semibold text-white mix-blend-difference h-inherit flex items-center p-0 right-4 absolute" data-testid="label">
+            ${this.renderGasProviderLabel()}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property8({ type: Array })
+], ProgressView.prototype, "data", 2);
+__decorateClass([
+  property8()
+], ProgressView.prototype, "label", 2);
+__decorateClass([
+  property8()
+], ProgressView.prototype, "unit", 2);
+__decorateClass([
+  property8()
+], ProgressView.prototype, "address", 2);
+__decorateClass([
+  property8({ attribute: "label-position" })
+], ProgressView.prototype, "labelPosition", 2);
+ProgressView = __decorateClass([
+  safeCustomElement("progress-view")
+], ProgressView);
+
+// src/shared/scroll-to-bottom-button.ts
+import { html as html9 } from "lit";
+import { property as property9 } from "lit/decorators.js";
+var ScrollToBottomButton = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.show = false;
+    this.color = "neutral-20";
+    this.iconSize = "medium";
+    this.iconName = "arrow-down-lg";
+  }
+  handleClick() {
+    this.dispatchEvent(new CustomEvent("scroll-to-bottom", { bubbles: true }));
+  }
+  render() {
+    return html9`
+      <div class="h-14 w-[140px] self-center rounded-t-[120px] bg-[radial-gradient(ellipse_75px_52px_at_bottom_center,rgba(255,255,255,0.78)_0%,rgba(255,255,255,0)_112.5%)] flex justify-center items-center transition-opacity duration-700 ease-in-out ${this.show ? "opacity-100 z-10" : "opacity-0 -z-10"}">
+        <div class="flex justify-center items-center w-10 h-10 rounded-full border border-neutral-90 shadow-[0_0_16px_rgba(189,206,219,0.4)] bg-neutral-100 cursor-pointer animate-bounce" @click=${this.handleClick}>
+            <lukso-icon
+              name=${this.iconName}
+              size=${this.iconSize}
+              color=${this.color}
+            ></lukso-icon>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property9({ type: Boolean, attribute: "show" })
+], ScrollToBottomButton.prototype, "show", 2);
+__decorateClass([
+  property9()
+], ScrollToBottomButton.prototype, "color", 2);
+__decorateClass([
+  property9({ attribute: "icon-size" })
+], ScrollToBottomButton.prototype, "iconSize", 2);
+__decorateClass([
+  property9({ attribute: "icon-name" })
+], ScrollToBottomButton.prototype, "iconName", 2);
+ScrollToBottomButton = __decorateClass([
+  safeCustomElement("scroll-to-bottom-button")
+], ScrollToBottomButton);
+
+// src/shared/signal-controller.ts
+var SignalController = class _SignalController {
+  constructor(host, signal) {
+    this.host = host;
+    this.signal = signal;
+    host.addController(this);
+  }
+  hostConnected() {
+    let lastValue = this.signal.value;
+    const check = () => {
+      const currentValue = this.signal.value;
+      if (currentValue !== lastValue) {
+        lastValue = currentValue;
+        this.host.requestUpdate();
+      }
+    };
+    const interval = setInterval(check, 50);
+    this.unsubscribe = () => clearInterval(interval);
+  }
+  hostDisconnected() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = void 0;
+    }
+  }
+  get value() {
+    return this.signal.value;
+  }
+  /**
+   * Create a new SignalController for a different signal
+   */
+  static create(host, signal) {
+    return new _SignalController(host, signal);
+  }
+};
+var MultiSignalController = class {
+  constructor(host, signals) {
+    this.unsubscribes = [];
+    this.host = host;
+    this.signals = signals;
+    host.addController(this);
+  }
+  hostConnected() {
+    this.signals.forEach((signal, index) => {
+      let lastValue = signal.value;
+      const check = () => {
+        const currentValue = signal.value;
+        if (currentValue !== lastValue) {
+          lastValue = currentValue;
+          this.host.requestUpdate();
+        }
+      };
+      const interval = setInterval(check, 50);
+      this.unsubscribes[index] = () => clearInterval(interval);
+    });
+  }
+  hostDisconnected() {
+    this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+    this.unsubscribes = [];
+  }
+  getValue(index) {
+    return this.signals[index]?.value;
+  }
+  getValues() {
+    return this.signals.map((signal) => signal.value);
+  }
+};
+function useSignal(host, signal) {
+  return new SignalController(host, signal);
+}
+function useSignals(host, signals) {
+  return new MultiSignalController(host, signals);
+}
+
+// src/shared/transaction-view-controller.ts
+import {
+  findAllTransactionViews,
+  findBestTransactionView,
+  useTransactionView as useTransactionViewHeadless
+} from "@lukso/transaction-view-headless";
+var TransactionViewController = class {
+  constructor(host, transaction, options) {
+    this.transaction = transaction;
+    this.options = options;
+    this.headlessInstance = null;
+    // Internal state
+    this._state = {
+      matches: [],
+      bestMatch: null,
+      component: null,
+      loading: false,
+      error: null,
+      isResolvingAddresses: false,
+      resolvedAddresses: {}
+    };
+    this.host = host;
+    host.addController(this);
+    this.initialize();
+  }
+  hostConnected() {
+    this.setupSync();
+  }
+  hostDisconnected() {
+    if (this.syncInterval) {
+      clearInterval(this.syncInterval);
+      this.syncInterval = void 0;
+    }
+  }
+  get state() {
+    return this._state;
+  }
+  get matches() {
+    return this._state.matches;
+  }
+  get bestMatch() {
+    return this._state.bestMatch;
+  }
+  get component() {
+    return this._state.component;
+  }
+  get isLoading() {
+    return this._state.loading;
+  }
+  get error() {
+    return this._state.error;
+  }
+  get isResolvingAddresses() {
+    return this._state.isResolvingAddresses;
+  }
+  get resolvedAddresses() {
+    return this._state.resolvedAddresses;
+  }
+  /**
+   * Load a specific match
+   */
+  async loadMatch(match) {
+    if (!this.headlessInstance) {
+      throw new Error("Transaction view not initialized");
+    }
+    try {
+      const result = await this.headlessInstance.loadMatch(match);
+      this.syncState();
+      return result;
+    } catch (err) {
+      this.syncState();
+      throw err;
+    }
+  }
+  /**
+   * Load the best match
+   */
+  async loadBestMatch() {
+    if (!this.headlessInstance) {
+      throw new Error("Transaction view not initialized");
+    }
+    try {
+      const result = await this.headlessInstance.loadBestMatch();
+      this.syncState();
+      return result;
+    } catch (err) {
+      this.syncState();
+      throw err;
+    }
+  }
+  /**
+   * Refresh matches
+   */
+  refreshMatches() {
+    if (!this.headlessInstance) {
+      console.warn("Transaction view not initialized, cannot refresh matches");
+      return;
+    }
+    this.headlessInstance.refreshMatches();
+    this.syncState();
+  }
+  /**
+   * Resolve addresses
+   */
+  async resolveAddresses() {
+    if (!this.headlessInstance) {
+      throw new Error("Transaction view not initialized");
+    }
+    try {
+      await this.headlessInstance.resolveAddresses();
+      this.syncState();
+    } catch (err) {
+      this.syncState();
+      throw err;
+    }
+  }
+  /**
+   * Update transaction and options
+   */
+  update(transaction, options) {
+    this.transaction = transaction;
+    this.options = options;
+    this.initialize();
+  }
+  /**
+   * Get the best matching view without loading
+   */
+  static findBestMatch(transaction, framework = "lit") {
+    return findBestTransactionView(transaction, framework);
+  }
+  /**
+   * Get all matching views without loading
+   */
+  static findAllMatches(transaction, framework = "lit") {
+    return findAllTransactionViews(transaction, framework);
+  }
+  initialize() {
+    try {
+      this.headlessInstance = useTransactionViewHeadless(
+        this.transaction,
+        this.options
+      );
+      this.syncState();
+    } catch (err) {
+      this.updateState({
+        error: err instanceof Error ? err : new Error("Failed to initialize transaction view")
+      });
+      console.error("Failed to initialize transaction view:", err);
+    }
+  }
+  setupSync() {
+    this.syncState();
+    this.syncInterval = setInterval(() => {
+      this.syncState();
+    }, 100);
+  }
+  syncState() {
+    if (!this.headlessInstance) return;
+    this.updateState({
+      matches: this.headlessInstance.matches,
+      bestMatch: this.headlessInstance.bestMatch,
+      component: this.headlessInstance.component,
+      loading: this.headlessInstance.isLoading,
+      error: this.headlessInstance.error,
+      isResolvingAddresses: this.headlessInstance.isResolvingAddresses,
+      resolvedAddresses: this.headlessInstance.resolvedAddresses
+    });
+  }
+  updateState(updates) {
+    this._state = { ...this._state, ...updates };
+    this.host.requestUpdate();
+  }
+};
+function useTransactionView(host, transaction, options) {
+  return new TransactionViewController(host, transaction, options);
+}
+var TransactionSignalController = class {
+  constructor(host, signal) {
+    this._data = null;
+    this._loading = false;
+    this._error = null;
+    this.host = host;
+    this.signal = signal;
+    host.addController(this);
+  }
+  hostConnected() {
+    this.setupSignalSync();
+  }
+  hostDisconnected() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = void 0;
+    }
+  }
+  get data() {
+    return this._data;
+  }
+  get loading() {
+    return this._loading;
+  }
+  get error() {
+    return this._error;
+  }
+  get isReady() {
+    return !this._loading && this._data !== null && !this._error;
+  }
+  setupSignalSync() {
+    const sync = () => {
+      const signalValue = this.signal.value;
+      const newData = signalValue?.data || null;
+      const newLoading = signalValue?.loading || false;
+      const newError = signalValue?.error || null;
+      if (newData !== this._data || newLoading !== this._loading || newError !== this._error) {
+        this._data = newData;
+        this._loading = newLoading;
+        this._error = newError;
+        this.host.requestUpdate();
+      }
+    };
+    sync();
+    const interval = setInterval(sync, 50);
+    this.unsubscribe = () => clearInterval(interval);
+  }
+};
+function useTransactionSignal(host, signal) {
+  return new TransactionSignalController(host, signal);
+}
+
+// src/shared/url-view.ts
+import { html as html10 } from "lit";
+import { property as property10, state as state7 } from "lit/decorators.js";
+var UrlView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.showLogo = true;
+    this.maxWidth = 240;
+    this.displayName = "";
+    this.faviconCandidates = [];
+    this.faviconIndex = 0;
+  }
+  willUpdate(changed) {
+    if (changed.has("url") || changed.has("label") || changed.has("logoUrl")) {
+      this.computeMeta();
+    }
+  }
+  computeMeta() {
+    try {
+      const u = new URL(this.url);
+      const origin = u.origin;
+      this.faviconCandidates = [];
+      if (this.logoUrl) this.faviconCandidates.push(this.logoUrl);
+      this.faviconCandidates.push(
+        `${origin}/favicon.ico`,
+        `${origin}/favicon.png`
+      );
+      this.faviconIndex = 0;
+      this.favicon = this.faviconCandidates[this.faviconIndex];
+      const hostname = u.hostname.replace(/^www\./, "");
+      const hostnamePretty = hostname.split(".").filter(Boolean).slice(-2).join(" ").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+      if (this.label && this.label.trim()) {
+        this.displayName = this.label.trim();
+      } else {
+        this.displayName = hostnamePretty || this.url;
+      }
+    } catch {
+      this.favicon = void 0;
+      this.displayName = this.label && this.label.trim() ? this.label : this.url;
+    }
+  }
+  handleImageError() {
+    this.faviconIndex += 1;
+    if (this.faviconIndex < this.faviconCandidates.length) {
+      this.favicon = this.faviconCandidates[this.faviconIndex];
+    } else {
+      this.favicon = void 0;
+    }
+  }
+  getSizePixels() {
+    switch (this.size) {
+      case "x-small":
+        return 14;
+      case "small":
+        return 16;
+      case "medium":
+        return 20;
+      case "large":
+        return 24;
+      default:
+        return 16;
+    }
+  }
+  render() {
+    const sizePx = this.getSizePixels();
+    return html10`
+      <div class="inline-flex flex-col gap-1">
+        <div class="inline-flex items-center gap-2 px-2.5 py-1.5 text-neutral-20 leading-tight font-semibold">
+          ${this.showLogo ? html10`
+                <div class="inline-flex items-center p-1 justify-center rounded-lg bg-neutral-100 border border-neutral-90 overflow-hidden flex-none">
+                  ${this.favicon ? html10`<img
+                        src=${this.favicon}
+                        style="width:${sizePx}px;height:${sizePx}px;"
+                        alt="favicon"
+                        @error=${this.handleImageError}
+                      />` : html10`<lukso-icon name="globe" size=${this.size} color="blue-85"></lukso-icon>`}
+                </div>
+              ` : ""}
+          <span class="whitespace-nowrap overflow-hidden text-ellipsis leading-tight" style=${`max-width:${this.maxWidth}px;font-size: ${sizePx}px;`}>${this.displayName}</span>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property10()
+], UrlView.prototype, "url", 2);
+__decorateClass([
+  property10()
+], UrlView.prototype, "size", 2);
+__decorateClass([
+  property10()
+], UrlView.prototype, "label", 2);
+__decorateClass([
+  property10({ type: Boolean, attribute: "show-logo" })
+], UrlView.prototype, "showLogo", 2);
+__decorateClass([
+  property10({ attribute: "logo-url" })
+], UrlView.prototype, "logoUrl", 2);
+__decorateClass([
+  property10({ type: Number, attribute: "max-width" })
+], UrlView.prototype, "maxWidth", 2);
+__decorateClass([
+  state7()
+], UrlView.prototype, "favicon", 2);
+__decorateClass([
+  state7()
+], UrlView.prototype, "displayName", 2);
+UrlView = __decorateClass([
+  safeCustomElement("url-view")
+], UrlView);
+
+// src/shared/value-view.ts
+import { Task as Task4 } from "@lit/task";
+import { useAddressResolver as useAddressResolver4 } from "@lukso/transaction-view-headless";
+import { html as html11 } from "lit";
+import { property as property11, state as state8 } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+function formatUnits(value, decimals = 18) {
+  const divisor = 10n ** BigInt(decimals);
+  const quotient = value / divisor;
+  const remainder = value % divisor;
+  if (remainder === 0n) {
+    return quotient.toString();
+  }
+  const remainderStr = remainder.toString().padStart(decimals, "0");
+  const trimmed = remainderStr.replace(/0+$/, "");
+  return `${quotient}.${trimmed}`;
+}
+var ValueView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.type = "auto";
+    this.currencySymbol = "LYX";
+    this.decimals = 18;
+    this.size = "medium";
+    this.showCopyButton = false;
+    this.isCardView = false;
+    this._hasSlotContent = false;
+    // Task for resolving address metadata
+    this.addressTask = new Task4(this, {
+      task: async ([address]) => {
+        if (!address) return null;
+        try {
+          return this.addressResolver.resolveAddress(address);
+        } catch (error) {
+          console.warn("ValueView: Failed to resolve address metadata:", error);
+          return null;
+        }
+      },
+      args: () => [this.address]
+    });
+  }
+  _onSlotChange(e) {
+    const slot = e.target;
+    const assigned = slot?.assignedNodes({ flatten: true }) ?? [];
+    this._hasSlotContent = assigned.length > 0;
+  }
+  firstUpdated() {
+    const slot = this.renderRoot.querySelector("slot");
+    if (slot) {
+      const assigned = slot.assignedNodes({ flatten: true });
+      this._hasSlotContent = assigned.length > 0;
+    }
+  }
+  // Address resolution utilities (lazy initialization)
+  get addressResolver() {
+    try {
+      return useAddressResolver4();
+    } catch (error) {
+      console.warn("ValueView: Address resolver not available:", error);
+      return {
+        resolveAddress: async () => null
+      };
+    }
+  }
+  /**
+   * Get the effective type for the value
+   */
+  getEffectiveType() {
+    if (this.type !== "auto") return this.type;
+    const value = this.value;
+    if (value === null || value === void 0) return "null";
+    if (typeof value === "string") return "string";
+    if (typeof value === "number") return "number";
+    if (typeof value === "boolean") return "boolean";
+    if (typeof value === "bigint") {
+      if (this.keyName === "value") return "currency";
+      return "bigint";
+    }
+    return "string";
+  }
+  /**
+   * Get CSS class for the value type
+   */
+  getValueClass() {
+    const effectiveType = this.getEffectiveType();
+    switch (effectiveType) {
+      case "string":
+        return "text-success-60";
+      case "number":
+        return "text-info-60";
+      case "boolean":
+        return "text-error-60";
+      case "currency":
+        return "text-warning-60 font-medium";
+      case "bigint":
+        return "text-secondary-60";
+      case "address":
+        return "text-info-60 font-mono";
+      case "null":
+        return "text-neutral-70 italic";
+      default:
+        return "text-neutral-10";
+    }
+  }
+  /**
+   * Format the value for display
+   */
+  getFormattedValue() {
+    const value = this.value;
+    const effectiveType = this.getEffectiveType();
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    switch (effectiveType) {
+      case "currency":
+        const { numeric, symbol } = this.getCurrencyParts();
+        return `${numeric} ${symbol}`;
+      case "bigint":
+        if (typeof value === "bigint") {
+          return value.toString() + "n";
+        }
+        return String(value) + "n";
+      case "boolean":
+        return value ? "true" : "false";
+      case "number":
+        if (typeof value === "number") {
+          return value.toLocaleString();
+        }
+        return String(value);
+      case "string":
+        return String(value);
+      case "null":
+        return "null";
+      default:
+        return String(value);
+    }
+  }
+  /**
+   * Compute currency display parts: numeric portion and symbol
+   */
+  getCurrencyParts() {
+    const value = this.value;
+    const resolvedData = this.addressTask.value;
+    const effectiveDecimals = resolvedData?.lsp4TokenSymbol ? resolvedData.baseAsset?.decimals ?? resolvedData.decimals ?? this.decimals : this.decimals;
+    const effectiveSymbol = resolvedData?.lsp4TokenSymbol || resolvedData?.baseAsset?.lsp4TokenSymbol || this.currencySymbol;
+    let numeric = String(value ?? "");
+    try {
+      if (typeof value === "bigint") {
+        numeric = formatUnits(value, effectiveDecimals);
+      } else if (typeof value === "string" && !isNaN(Number(value))) {
+        const bigintValue = BigInt(value);
+        numeric = formatUnits(bigintValue, effectiveDecimals);
+      }
+    } catch {
+      numeric = String(value ?? "");
+    }
+    return { numeric, symbol: effectiveSymbol };
+  }
+  /** Typography class for numeric value based on size */
+  getNumericClass() {
+    switch (this.size) {
+      case "x-small":
+        return "paragraph-ptmono-12-bold";
+      case "small":
+        return "paragraph-ptmono-14-bold";
+      case "medium":
+        return "paragraph-ptmono-16-bold";
+      case "large":
+        return "paragraph-ptmono-24-bold";
+      default:
+        return "paragraph-ptmono-16-bold";
+    }
+  }
+  /** Typography class for currency symbol based on size */
+  getCurrencyClass() {
+    switch (this.size) {
+      case "x-small":
+        return "paragraph-inter-12-regular";
+      case "small":
+        return "paragraph-inter-14-regular";
+      case "medium":
+        return "paragraph-inter-16-regular";
+      case "large":
+        return "paragraph-inter-20-regular";
+      default:
+        return "paragraph-inter-16-regular";
+    }
+  }
+  /**
+   * Get size-appropriate font size
+   */
+  getContainerTextClass() {
+    switch (this.size) {
+      case "x-small":
+        return "text-[12px]";
+      case "small":
+        return "text-[14px]";
+      case "medium":
+        return "text-[16px]";
+      case "large":
+        return "text-[18px]";
+      default:
+        return "text-[16px]";
+    }
+  }
+  /**
+   * Handle copy to clipboard
+   */
+  async handleCopy(e) {
+    if (e) e.stopPropagation();
+    const textToCopy = String(this.value);
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      this.dispatchEvent(
+        new CustomEvent("value-copied", {
+          detail: { value: textToCopy },
+          bubbles: true
+        })
+      );
+    } catch (error) {
+      console.error("Failed to copy value:", error);
+    }
+  }
+  /**
+   * Handle value click
+   */
+  handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("value-click", {
+        detail: {
+          value: this.value,
+          formattedValue: this.getFormattedValue(),
+          type: this.getEffectiveType()
+        },
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    const formattedValue = this.getFormattedValue();
+    const valueClass = this.getValueClass();
+    if (this.isCardView) {
+      const effectiveType = this.getEffectiveType();
+      let headerText = this.label || "";
+      let contentTemplate = html11`
+        <span class="inline-block text-wrap min-w-0 text-center">${formattedValue}</span>
+      `;
+      if (effectiveType === "currency") {
+        const { numeric, symbol } = this.getCurrencyParts();
+        if (this.label && this.label.trim() !== "") {
+          headerText = this.label;
+          contentTemplate = html11`
+              <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
+              <span class="inline-block ${this.getCurrencyClass()}"> ${symbol}</span>
+          `;
+        } else {
+          headerText = symbol;
+          contentTemplate = html11`
+              <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
+          `;
+        }
+      }
+      return html11`
+          <div
+            class="block border border-neutral-90 rounded-xl bg-white py-3 px-4 min-w-[320px] ${this.containerClassNames || ""}"
+            @click=${this.handleClick}
+            style="${this.maxWidth ? `max-width: ${this.maxWidth}px` : ""}"
+          >
+            <div class="flex items-center justify-between mb-2">
+            ${headerText ? html11`<div class="${this.getLabelClass()} text-neutral-20 overflow-hidden text-ellipsis whitespace-nowrap">${headerText}</div>` : html11``}
+            ${this.showCopyButton ? html11`
+                    <button
+                      class="bg-white rounded-lg w-6 h-6 flex items-center justify-center cursor-pointer text-neutral-20 hover:bg-neutral-95"
+                      @click=${(e) => this.handleCopy(e)}
+                      title="Copy value"
+                      aria-label="Copy"
+                    >
+                      <lukso-icon name="copy" size="small"></lukso-icon>
+                    </button>
+                  ` : html11``}
+          </div>
+            ${when(
+        !this._hasSlotContent,
+        () => html11`
+                <div class="font-semibold text-neutral-10 break-words flex items-center gap-2 text-wrap ${this.getUseMonospace() ? "font-mono" : ""}">
+                  ${contentTemplate}
+                </div>
+              `
+      )}
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+      `;
+    }
+    return html11`
+      <div
+        class="inline-flex items-center gap-1.5 cursor-pointer transition-all duration-200 rounded px-1 py-0.5 hover:bg-neutral-95 min-w-[320px] ${this.getContainerTextClass()} ${this.containerClassNames || ""}"
+        @click=${this.handleClick}
+        style="${this.maxWidth ? `max-width: ${this.maxWidth}px` : ""}"
+      >
+        <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${valueClass}">
+          ${formattedValue}
+        </span>
+        ${this.showCopyButton ? html11`
+                <button
+                  class="inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-neutral-70 p-0.5 rounded transition-all duration-200 hover:text-primary-50 hover:bg-neutral-90 flex-shrink-0"
+                  @click=${(e) => this.handleCopy(e)}
+                  title="Copy value"
+                  aria-label="Copy value to clipboard"
+                >
+                  <lukso-icon name="copy" size="small"></lukso-icon>
+                </button>
+              ` : ""}
+      </div>
+    `;
+  }
+  /** Whether to use monospace font for the value content */
+  getUseMonospace() {
+    const t = this.getEffectiveType();
+    if (t === "address" || t === "bigint" || this.value?.toString().startsWith("0x"))
+      return true;
+    if (t === "string") {
+      const s = String(this.value ?? "");
+      return /^0x[0-9a-fA-F]+$/.test(s) || s.length > 32;
+    }
+    return false;
+  }
+  /** Map size to a typography class for the label */
+  getLabelClass() {
+    switch (this.size) {
+      case "x-small":
+        return "paragraph-inter-12-semi-bold";
+      case "small":
+        return "heading-inter-14-bold";
+      case "medium":
+        return "heading-inter-17-semi-bold";
+      case "large":
+        return "heading-inter-21-semi-bold";
+      default:
+        return "heading-inter-17-semi-bold";
+    }
+  }
+};
+__decorateClass([
+  property11()
+], ValueView.prototype, "value", 2);
+__decorateClass([
+  property11({ attribute: "key-name" })
+], ValueView.prototype, "keyName", 2);
+__decorateClass([
+  property11({ type: String, attribute: "container-class-names" })
+], ValueView.prototype, "containerClassNames", 2);
+__decorateClass([
+  property11()
+], ValueView.prototype, "type", 2);
+__decorateClass([
+  property11({ attribute: "currency-symbol" })
+], ValueView.prototype, "currencySymbol", 2);
+__decorateClass([
+  property11({ type: Number })
+], ValueView.prototype, "decimals", 2);
+__decorateClass([
+  property11()
+], ValueView.prototype, "size", 2);
+__decorateClass([
+  property11({ type: Boolean, attribute: "show-copy-button" })
+], ValueView.prototype, "showCopyButton", 2);
+__decorateClass([
+  property11({ type: Boolean, attribute: "is-card-view" })
+], ValueView.prototype, "isCardView", 2);
+__decorateClass([
+  property11()
+], ValueView.prototype, "label", 2);
+__decorateClass([
+  property11({ type: Number, attribute: "max-width" })
+], ValueView.prototype, "maxWidth", 2);
+__decorateClass([
+  property11()
+], ValueView.prototype, "address", 2);
+__decorateClass([
+  state8()
+], ValueView.prototype, "resolvedMetadata", 2);
+__decorateClass([
+  state8()
+], ValueView.prototype, "_hasSlotContent", 2);
+ValueView = __decorateClass([
+  safeCustomElement("value-view")
+], ValueView);
+export {
+  AddressDisplay,
+  AddressView,
+  CustomOption,
+  CustomSelect,
+  FunctionNameView,
+  GasProviderView,
+  IconView,
+  ImageLoaderController,
+  MultiSignalController,
+  NotificationView,
+  ProgressView,
+  ScrollToBottomButton,
+  SignalController,
+  TransactionSignalController,
+  TransactionViewController,
+  UrlView,
+  ValueView,
+  useImageLoader3 as useImageLoader,
+  useSignal,
+  useSignals,
+  useTransactionSignal,
+  useTransactionView
+};
+//# sourceMappingURL=index.js.map