@layer properties;
@layer properties, theme, base, components, echo, utilities;
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: #f9f9fe;
    --color-neutral-200: #ebebf7;
    --color-neutral-300: #d6d6e8;
    --color-neutral-400: #a5a5b0;
    --color-neutral-500: #747483;
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: #1d1c23;
    --color-neutral-900: #0d0c0f;
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-lg: 32rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --leading-tight: 1.25;
    --radius-md: 0.375rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --spacing-2: 0.125rem;
    --spacing-3: 0.1875rem;
    --spacing-4: 0.25rem;
    --spacing-6: 0.375rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-28: 1.75rem;
    --spacing-32: 2rem;
    --spacing-36: 2.25rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-64: 4rem;
    --spacing-80: 5rem;
    --spacing-96: 6rem;
    --spacing-112: 7rem;
    --spacing-128: 8rem;
    --spacing-160: 10rem;
    --spacing-192: 12rem;
    --spacing-224: 14rem;
    --spacing-256: 16rem;
    --spacing-320: 20rem;
    --spacing-384: 24rem;
    --spacing-448: 28rem;
    --spacing-512: 32rem;
    --spacing-576: 36rem;
    --spacing-640: 40rem;
    --spacing-768: 48rem;
    --color-primary-lavender-100: #f4f1ff;
    --color-primary-lavender-200: #e0d8ff;
    --color-primary-lavender-400: #927ceb;
    --color-primary-lavender-500: #775be6;
    --color-primary-lavender-600: #6a52c8;
    --color-primary-lavender-900: #1a042a;
    --color-secondary-blue-500: #3893a5;
    --color-secondary-blush-500: #cc5a71;
    --color-secondary-earth-500: #db9f57;
    --color-secondary-plum-500: #893473;
    --color-secondary-green-500: #9cb43c;
    --color-secondary-aqua-500: #7db8aa;
    --color-secondary-gray-500: #5b7894;
    --color-secondary-magenta-500: #bd68af;
    --color-neutral-0: #ffffff;
    --color-semantic-error-100: #fdebf0;
    --color-semantic-error-200: #ffd9e4;
    --color-semantic-error-500: #f03c66;
    --color-semantic-error-600: #dd2156;
    --color-semantic-success-100: #e5f4df;
    --color-semantic-success-500: #1f5800;
    --color-semantic-success-600: #0f3b00;
    --color-semantic-warning-100: #faeddf;
    --color-semantic-warning-500: #ca6e04;
    --color-semantic-warning-600: #964d0a;
    --color-semantic-info-100: #e9edf8;
    --color-semantic-info-500: #2149b9;
    --color-semantic-info-600: #1f3d89;
    --breakpoint-tablet: 700px;
    --breakpoint-desktop: 1280px;
    --radius-0: 0;
    --radius-4: 0.25rem;
    --radius-8: 0.5rem;
    --radius-12: 0.75rem;
    --radius-16: 1rem;
    --radius-20: 1.25rem;
    --radius-24: 1.5rem;
    --radius-32: 2rem;
    --radius-full: 9999px;
    --shadow-soft-100: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-soft-200: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-soft-300: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-soft-400: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-medium-100: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    --shadow-medium-200: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
    --shadow-medium-300: 0 8px 16px -2px rgba(0, 0, 0, 0.15);
    --shadow-medium-400: 0 16px 24px -4px rgba(0, 0, 0, 0.15);
    --shadow-hard-100: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    --shadow-hard-200: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
    --shadow-hard-300: 0 8px 16px -2px rgba(0, 0, 0, 0.25);
    --shadow-hard-400: 0 16px 24px -4px rgba(0, 0, 0, 0.25);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: normal;
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: normal;
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: normal;
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: normal;
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::-moz-placeholder {
    opacity: 1;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer base {
  html {
    -webkit-font-smoothing: antialiased;
  }
  button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  * {
    scrollbar-width: thin;
  }
  hr {
    border: none;
    border-top: 0.5px solid #d6d6e8;
  }
}
@layer echo {
  @charset "UTF-8";
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-Variable-3713738c.woff2") format("woff2"), url("/assets/satoshi/Satoshi-Variable-3aeee10f.woff") format("woff"), url("/assets/satoshi/Satoshi-Variable-2cb33ad5.ttf") format("truetype");
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-VariableItalic-e168ebc8.woff2") format("woff2"), url("/assets/satoshi/Satoshi-VariableItalic-736bdcbd.woff") format("woff"), url("/assets/satoshi/Satoshi-VariableItalic-dff284d0.ttf") format("truetype");
    font-weight: 300 900;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-Light-6cb0ed23.woff2") format("woff2"), url("/assets/satoshi/Satoshi-Light-1dc7207d.woff") format("woff"), url("/assets/satoshi/Satoshi-Light-efde7527.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-LightItalic-cd287ab1.woff2") format("woff2"), url("/assets/satoshi/Satoshi-LightItalic-1c36192d.woff") format("woff"), url("/assets/satoshi/Satoshi-LightItalic-219db883.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-Regular-203be3c2.woff2") format("woff2"), url("/assets/satoshi/Satoshi-Regular-755fd468.woff") format("woff"), url("/assets/satoshi/Satoshi-Regular-24d85183.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-Italic-25f3a6c3.woff2") format("woff2"), url("/assets/satoshi/Satoshi-Italic-fcb2c74d.woff") format("woff"), url("/assets/satoshi/Satoshi-Italic-f4fcd74a.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-Medium-9b05096e.woff2") format("woff2"), url("/assets/satoshi/Satoshi-Medium-61e8e119.woff") format("woff"), url("/assets/satoshi/Satoshi-Medium-b38f9b34.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-MediumItalic-617d0211.woff2") format("woff2"), url("/assets/satoshi/Satoshi-MediumItalic-cc7564c2.woff") format("woff"), url("/assets/satoshi/Satoshi-MediumItalic-73e64592.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-Bold-33f48a21.woff2") format("woff2"), url("/assets/satoshi/Satoshi-Bold-c18411b6.woff") format("woff"), url("/assets/satoshi/Satoshi-Bold-4ff2c4ab.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-BoldItalic-20a84846.woff2") format("woff2"), url("/assets/satoshi/Satoshi-BoldItalic-8cd87c79.woff") format("woff"), url("/assets/satoshi/Satoshi-BoldItalic-42b83c5b.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-Black-3352500b.woff2") format("woff2"), url("/assets/satoshi/Satoshi-Black-67c26a78.woff") format("woff"), url("/assets/satoshi/Satoshi-Black-d2b2682c.ttf") format("truetype");
    font-weight: 900;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/satoshi/Satoshi-BlackItalic-1d0d1e8d.woff2") format("woff2"), url("/assets/satoshi/Satoshi-BlackItalic-83678697.woff") format("woff"), url("/assets/satoshi/Satoshi-BlackItalic-eca83bc8.ttf") format("truetype");
    font-weight: 900;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Thin-c7431de4.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Thin-1f88bfa6.ttf") format("truetype");
    font-weight: 100;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-ThinItalic-c95c686b.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-ThinItalic-f9b56322.ttf") format("truetype");
    font-weight: 100;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Extralight-5b329587.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Extralight-58f81085.ttf") format("truetype");
    font-weight: 200;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-ExtralightItalic-b51afcac.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-ExtralightItalic-b34fffd1.ttf") format("truetype");
    font-weight: 200;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Light-f87610e3.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Light-d5af7813.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-LightItalic-2922283e.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-LightItalic-069314d0.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Regular-7397d703.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Regular-db109007.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Italic-970534a0.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Italic-97b82fdd.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Semibold-1aa1678e.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Semibold-997f674a.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-SemiboldItalic-f1e15df6.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-SemiboldItalic-ebbe5332.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Bold-ee6e6c70.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Bold-5579967b.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-BoldItalic-06633449.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-BoldItalic-2d51a91e.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Extrabold-c53f1d24.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Extrabold-0b254346.ttf") format("truetype");
    font-weight: 800;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-ExtraboldItalic-2dae85f1.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-ExtraboldItalic-05efa369.ttf") format("truetype");
    font-weight: 800;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-Black-7fef1fc9.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-Black-55acba90.ttf") format("truetype");
    font-weight: 900;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: "Perfectly Nineties";
    src: url("/assets/perfectly_nineties/PerfectlyNineties-BlackItalic-dbee162a.woff") format("woff"), url("/assets/perfectly_nineties/PerfectlyNineties-BlackItalic-c701cbce.ttf") format("truetype");
    font-weight: 900;
    font-display: swap;
    font-style: italic;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fade-in-80 {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.8;
    }
  }
  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fade-out-80 {
    from {
      opacity: 0.8;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fade-rise {
    from {
      opacity: 0;
      transform: translateY(8px);
      transform: translateY(var(--vt-rise));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes slide-out-right {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(100%);
    }
  }
  @keyframes echo-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .echo-loading-delayed {
    animation: fade-in 0.2s ease-out 0.3s both;
  }
  @keyframes echo-sheet-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes echo-sheet-down {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }
  :root {
    --color-primary-lavender-100: #f4f1ff;
    --color-primary-lavender-200: #e0d8ff;
    --color-primary-lavender-400: #927ceb;
    --color-primary-lavender-500: #775be6;
    --color-primary-lavender-600: #6a52c8;
    --color-primary-lavender-900: #1a042a;
    --color-secondary-blue-500: #3893a5;
    --color-secondary-blush-500: #cc5a71;
    --color-secondary-earth-500: #db9f57;
    --color-secondary-plum-500: #893473;
    --color-secondary-green-500: #9cb43c;
    --color-secondary-aqua-500: #7db8aa;
    --color-secondary-gray-500: #5b7894;
    --color-secondary-magenta-500: #bd68af;
    --color-neutral-0: white;
    --color-neutral-100: #f9f9fe;
    --color-neutral-200: #ebebf7;
    --color-neutral-300: #d6d6e8;
    --color-neutral-400: #a5a5b0;
    --color-neutral-500: #747483;
    --color-neutral-800: #1d1c23;
    --color-neutral-900: #0d0c0f;
    --color-semantic-error-100: #fdebf0;
    --color-semantic-error-200: #ffd9e4;
    --color-semantic-error-500: #f03c66;
    --color-semantic-error-600: #dd2156;
    --color-semantic-success-100: #e5f4df;
    --color-semantic-success-500: #1f5800;
    --color-semantic-success-600: #0f3b00;
    --color-semantic-warning-100: #faeddf;
    --color-semantic-warning-500: #ca6e04;
    --color-semantic-warning-600: #964d0a;
    --color-semantic-info-100: #e9edf8;
    --color-semantic-info-500: #2149b9;
    --color-semantic-info-600: #1f3d89;
  }
  :root {
    --radius-0: 0;
    --radius-4: 0.25rem;
    --radius-8: 0.5rem;
    --radius-12: 0.75rem;
    --radius-16: 1rem;
    --radius-20: 1.25rem;
    --radius-24: 1.5rem;
    --radius-32: 2rem;
    --radius-99: 6.1875rem;
  }
  :root {
    --shadow-soft-100: 0.25rem 0.25rem 0.25rem 0 rgba(177, 177, 177, 0.2392156863);
    --shadow-soft-200: 0.25rem 0.25rem 0.75rem 0 rgba(177, 177, 177, 0.2392156863);
    --shadow-soft-300: 0.375rem 0.375rem 1.125rem 0 rgba(177, 177, 177, 0.3215686275);
    --shadow-soft-400: 0.5rem 0.5rem 1.5rem 0 rgba(177, 177, 177, 0.4);
    --shadow-medium-100: 0.25rem 0.25rem 0.25rem 0 rgba(127, 127, 127, 0.2392156863);
    --shadow-medium-200: 0.25rem 0.25rem 0.75rem 0 rgba(127, 127, 127, 0.2392156863);
    --shadow-medium-300: 0.375rem 0.375rem 1.125rem 0 rgba(127, 127, 127, 0.3215686275);
    --shadow-medium-400: 0.5rem 0.5rem 1.5rem 0 rgba(127, 127, 127, 0.4);
    --shadow-hard-100: 0.25rem 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.2392156863);
    --shadow-hard-200: 0.25rem 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.2392156863);
    --shadow-hard-300: 0.375rem 0.375rem 1.125rem 0 rgba(0, 0, 0, 0.3215686275);
    --shadow-hard-400: 0.5rem 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.4);
  }
  :root {
    --font-family-display: Perfectly Nineties, ui-serif, Georgia, serif;
    --font-family-sans: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }
  .text-h1, h1 {
    font-family: Perfectly Nineties, ui-serif, Georgia, serif;
    font-family: var(--font-family-display);
    font-size: 3rem;
    line-height: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.03125rem;
  }
  .text-h2, h2 {
    font-family: Perfectly Nineties, ui-serif, Georgia, serif;
    font-family: var(--font-family-display);
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 800;
    letter-spacing: -0.025rem;
  }
  .text-h3, h3 {
    font-family: Perfectly Nineties, ui-serif, Georgia, serif;
    font-family: var(--font-family-display);
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.01875rem;
  }
  .text-h4, .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-name, .echo-tabs-number .echo-tab .echo-tab-content, h4 {
    font-family: Perfectly Nineties, ui-serif, Georgia, serif;
    font-family: var(--font-family-display);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -0.0125rem;
  }
  .text-h5, h5 {
    font-family: Perfectly Nineties, ui-serif, Georgia, serif;
    font-family: var(--font-family-display);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.00625rem;
  }
  .text-p24-b, .echo-avatar-group .echo-avatar-lg {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 1.5rem;
    line-height: 2.25rem;
    font-weight: 700;
  }
  .text-p20-b, .echo-tabs-primary .echo-tab {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: 700;
  }
  .text-p20-m {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: 500;
  }
  .text-p18-m {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
  }
  .text-p16-b, .echo-dropzone .echo-dropzone-title, .echo-card-illustration .echo-card-illustration-title, .echo-card-large .echo-card-large-content .echo-card-large-title, .echo-avatar-group .echo-avatar-md, .echo-btn-lg {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
  }
  .text-p16-m, .echo-card-main .echo-card-main-content .echo-card-main-content-title, .echo-input-text-lg, .echo-input-suffix-group, .echo-input-password-lg, .echo-input-search-lg, .echo-combobox-rich-code, .echo-input-combobox-lg, .echo-alert, .echo-disclaimer, .echo-dropdown-list-btn-lg, .echo-dropdown-filter-btn-lg, .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-content .echo-dropdown-card-btn-title {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
  }
  .text-p16-r, p {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
  }
  .text-p14-b, .echo-card-action .echo-card-action-content .echo-card-action-title, .echo-chip, .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn], .echo-tabs-tertiary .echo-tab, .echo-tabs-number .echo-tab .echo-tab-title, .echo-tabs-custom .echo-tab .echo-tab-title, .echo-tabs-custom .echo-tab .echo-tab-content, .echo-nudge-dark .echo-nudge-title, .echo-nudge-light .echo-nudge-title, .echo-tooltip .echo-tooltip-title, .echo-toast-success, .echo-toast-success .echo-toast-content .echo-btn-minimal, .echo-toast-destructive, .echo-toast-destructive .echo-toast-content .echo-btn-minimal, .echo-toast-warning, .echo-toast-warning .echo-toast-content .echo-btn-minimal, .echo-toast-info, .echo-toast-info .echo-toast-content .echo-btn-minimal, label.echo-label-lg {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.00625rem;
  }
  .text-p14-m, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content .echo-audio-bar-title, .echo-waveform-group-popover-name, .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-track-title:not(:empty), .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-time, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-tracks-empty, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-title, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-error, .echo-dropzone .echo-dropzone-instructions, .echo-multi-select-actions .echo-multi-select-actions-count, .echo-tree .echo-tree-item .echo-tree-node, .echo-list-files .echo-list-file .echo-list-file-name, .echo-list-files .echo-list-file .echo-list-file-size, .echo-list-files .echo-list-file .echo-list-file-duration, .echo-list-row .echo-list-row-name, .echo-navigation-drawer, .echo-card-icon .echo-card-content .echo-card-icon-title, .echo-card-illustration .echo-card-illustration-description, .echo-card-main .echo-card-main-content .echo-card-main-content-description, .echo-card-large .echo-card-large-content .echo-card-large-description, .echo-card-action .echo-card-action-content .echo-card-action-description, .echo-input-text-md, .echo-input-password-md, .echo-input-search-md, .echo-combobox-rich-name, .echo-input-combobox-md, .echo-breadcrumbs .echo-breadcrumb, .echo-tabs-secondary .echo-tab, label.echo-progress-label span.echo-progress-label-text span.echo-progress-label-title, label.echo-progress-label span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-max, label.echo-progress-label:has(progress.complete, meter.complete) span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-current, .echo-menu-item, .echo-dropdown-list-btn-md, .echo-dropdown-filter-btn-md, .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-content .echo-dropdown-card-btn-description, .echo-dropdown-card-btn-md .echo-dropdown-card-btn-content .echo-dropdown-card-btn-title, .echo-btn-md, .echo-error-lg {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.00625rem;
  }
  .text-p14-r, label.echo-progress-label {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.00625rem;
  }
  .text-p12-b, .echo-waveform-marker .echo-waveform-marker-avatar, .echo-waveform-marker-group, .echo-waveform-group-popover-avatar, .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-footer strong, .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-name, .echo-badge-status-md, .echo-badge-metric, .echo-badge-activity, .echo-pagination .echo-pagination-info, .echo-nudge-dark .echo-nudge-footer .echo-skip-btn, .echo-nudge-dark .echo-nudge-footer .echo-nudge-action-btn, .echo-nudge-light .echo-nudge-footer .echo-skip-btn, .echo-nudge-light .echo-nudge-footer .echo-nudge-action-btn, .echo-avatar-group .echo-avatar-sm, .echo-btn-sm, label.echo-label-md {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.0125rem;
  }
  .text-p12-m, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content .echo-audio-bar-artist, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-time, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-time, .echo-file-uploader .echo-file-uploader-header .echo-file-uploader-status, .echo-list-files .echo-list-file .echo-list-file-error, .echo-card-icon .echo-card-content .echo-card-title-description, .echo-badge-avatar, .echo-tooltip .echo-tooltip-content, .echo-dropdown-card-btn-md .echo-dropdown-card-btn-content .echo-dropdown-card-btn-description, .echo-error-md {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.0125rem;
  }
  .text-p12-r, .echo-waveform-group-popover-time, .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-footer, .echo-nudge-dark .echo-nudge-content, .echo-nudge-light .echo-nudge-content {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.0125rem;
  }
  .text-p10-b, .echo-waveform-timeline-label, .echo-waveform-hover-label, .echo-waveform-marker .echo-waveform-marker-start .echo-waveform-marker-handle-label, .echo-waveform-marker .echo-waveform-marker-end .echo-waveform-marker-handle-label, .echo-badge-status-sm {
    font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-family: var(--font-family-sans);
    font-size: 0.625rem;
    line-height: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.0125rem;
  }
  @media (max-width: 700px) {
    .text-h1, h1 {
      font-family: Perfectly Nineties, ui-serif, Georgia, serif;
      font-family: var(--font-family-display);
      font-size: 2.25rem;
      line-height: 2.75rem;
      font-weight: 800;
      letter-spacing: -0.025rem;
    }
    .text-h2, h2 {
      font-family: Perfectly Nineties, ui-serif, Georgia, serif;
      font-family: var(--font-family-display);
      font-size: 2rem;
      line-height: 2.5rem;
      font-weight: 800;
      letter-spacing: -0.025rem;
    }
    .text-h3, h3 {
      font-family: Perfectly Nineties, ui-serif, Georgia, serif;
      font-family: var(--font-family-display);
      font-size: 1.75rem;
      line-height: 2.25rem;
      font-weight: 800;
      letter-spacing: -0.01875rem;
    }
    .text-h4, .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-name, .echo-tabs-number .echo-tab .echo-tab-content, h4 {
      font-family: Perfectly Nineties, ui-serif, Georgia, serif;
      font-family: var(--font-family-display);
      font-size: 1.375rem;
      line-height: 1.875rem;
      font-weight: 800;
      letter-spacing: -0.0125rem;
    }
    .text-h5, h5 {
      font-family: Perfectly Nineties, ui-serif, Georgia, serif;
      font-family: var(--font-family-display);
      font-size: 1.125rem;
      line-height: 1.625rem;
      font-weight: 700;
      letter-spacing: -0.00625rem;
    }
    .text-p24-b, .echo-avatar-group .echo-avatar-lg {
      font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      font-family: var(--font-family-sans);
      font-size: 1.375rem;
      line-height: 2.125rem;
      font-weight: 700;
    }
    .text-p20-b, .echo-tabs-primary .echo-tab {
      font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      font-family: var(--font-family-sans);
      font-size: 1.125rem;
      line-height: 1.75rem;
      font-weight: 700;
    }
    .text-p20-m {
      font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      font-family: var(--font-family-sans);
      font-size: 1.125rem;
      line-height: 1.75rem;
      font-weight: 500;
    }
    .text-p18-m {
      font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      font-family: var(--font-family-sans);
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: 500;
    }
  }
  a {
    text-decoration: none;
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  :root {
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-6: 0.375rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-28: 1.75rem;
    --spacing-32: 2rem;
    --spacing-36: 2.25rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-64: 4rem;
    --spacing-80: 5rem;
    --spacing-96: 6rem;
    --spacing-112: 7rem;
  }
  :root {
    --padding-2: 0.125rem;
    --padding-4: 0.25rem;
    --padding-8: 0.5rem;
    --padding-12: 0.75rem;
    --padding-16: 1rem;
    --padding-24: 1.5rem;
    --padding-32: 2rem;
  }
  :root {
    --layout-authenticated-sidebar-width: 17.4375rem;
    --layout-header-height: 3.5rem;
    --layout-authenticated-audio-bar-height: 4.25rem;
    --layout-mobile-audio-bar-height: 4.5rem;
    --layout-mobile-pill-inset: 1rem;
    --layout-mobile-pill-gap: 0.75rem;
    --layout-fab-inset: 1.75rem;
    --layout-fab-size: 3.5rem;
    --layout-playlist-breakpoint: 640px;
    --layout-comments-sidebar-width: 24.5625rem;
  }
  .echo-form-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .echo-form-group > input, .echo-form-group > .echo-input-password-wrapper {
    width: 100%;
  }
  .echo-form-group:has(.echo-input-password-lg, .echo-input-text-lg, .echo-input-search-lg, .echo-input-select-lg, .echo-input-combobox-lg) {
    gap: 0.75rem;
  }
  .echo-form-group:has(.echo-input-password-md, .echo-input-text-md, .echo-input-search-md, .echo-input-select-md, .echo-input-combobox-md) {
    gap: 0.5rem;
  }
  .echo-error-lg {
    display: flex;
    color: #f03c66;
    color: var(--color-semantic-error-500);
    gap: 0.25rem;
  }
  .echo-error-lg svg {
    margin-top: 0.09375rem;
    flex-shrink: 0;
  }
  .echo-error-lg svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-error-md {
    display: flex;
    color: #f03c66;
    color: var(--color-semantic-error-500);
    gap: 0.25rem;
  }
  .echo-error-md svg {
    margin-top: 0.09375rem;
    flex-shrink: 0;
  }
  .echo-error-md svg {
    width: 1rem;
    height: 1rem;
  }
  label.echo-label-lg {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  label.echo-label-lg:has(+ input:disabled) {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  label.echo-label-md {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  label.echo-label-md:has(+ input:disabled) {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-btn-sm {
    min-width: 4rem;
    gap: 0.625rem;
    text-align: center;
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    padding-left: 1.5rem;
    padding-left: var(--padding-24);
    padding-right: 1.5rem;
    padding-right: var(--padding-24);
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
    padding-left: 1rem;
    padding-left: var(--padding-16);
    padding-right: 1rem;
    padding-right: var(--padding-16);
  }
  .echo-btn-sm:focus {
    outline-color: #0d0c0f;
    outline-color: var(--color-neutral-900);
  }
  .echo-btn-sm:has(svg:only-child:not(.hidden)), .echo-btn-sm.echo-btn-icon-only {
    min-width: 0;
    min-width: initial;
    width: 2rem;
    height: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
  .echo-btn-sm:has(svg:not(.hidden):first-child:not(:only-child)):not(.echo-btn-icon-only) {
    padding-left: 0.75rem;
    padding-left: var(--padding-12);
  }
  .echo-btn-sm:has(svg:not(.hidden):last-child:not(:only-child)):not(.echo-btn-icon-only) {
    padding-right: 0.75rem;
    padding-right: var(--padding-12);
  }
  .echo-btn-sm svg {
    height: 1rem;
    width: 1rem;
  }
  .echo-btn-md {
    min-width: 4rem;
    gap: 0.625rem;
    text-align: center;
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    padding-left: 1.5rem;
    padding-left: var(--padding-24);
    padding-right: 1.5rem;
    padding-right: var(--padding-24);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .echo-btn-md:focus {
    outline-color: #0d0c0f;
    outline-color: var(--color-neutral-900);
  }
  .echo-btn-md:has(svg:only-child:not(.hidden)), .echo-btn-md.echo-btn-icon-only {
    min-width: 0;
    min-width: initial;
    width: 2.5rem;
    height: 2.5rem;
    padding-left: 0;
    padding-right: 0;
  }
  .echo-btn-md:has(svg:not(.hidden):first-child:not(:only-child)):not(.echo-btn-icon-only) {
    padding-left: 1rem;
    padding-left: var(--padding-16);
  }
  .echo-btn-md:has(svg:not(.hidden):last-child:not(:only-child)):not(.echo-btn-icon-only) {
    padding-right: 1rem;
    padding-right: var(--padding-16);
  }
  .echo-btn-md svg {
    height: 1rem;
    width: 1rem;
  }
  .echo-btn-lg {
    min-width: 4rem;
    gap: 0.625rem;
    text-align: center;
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    padding-left: 1.5rem;
    padding-left: var(--padding-24);
    padding-right: 1.5rem;
    padding-right: var(--padding-24);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    min-width: 6rem;
  }
  .echo-btn-lg:focus {
    outline-color: #0d0c0f;
    outline-color: var(--color-neutral-900);
  }
  .echo-btn-lg:has(svg:only-child:not(.hidden)), .echo-btn-lg.echo-btn-icon-only {
    min-width: 0;
    min-width: initial;
    width: 3rem;
    height: 3rem;
    padding-left: 0;
    padding-right: 0;
  }
  .echo-btn-lg:has(svg:not(.hidden):first-child:not(:only-child)):not(.echo-btn-icon-only) {
    padding-left: 1rem;
    padding-left: var(--padding-16);
  }
  .echo-btn-lg:has(svg:not(.hidden):last-child:not(:only-child)):not(.echo-btn-icon-only) {
    padding-right: 1rem;
    padding-right: var(--padding-16);
  }
  .echo-btn-lg svg {
    height: 1.25rem;
    width: 1.25rem;
  }
  @media (max-width: 700px) {
    .echo-btn-md svg, .echo-btn-lg svg {
      height: 1.5rem;
      width: 1.5rem;
    }
    .echo-btn-md {
      min-height: 2.75rem;
    }
    .echo-btn-md:has(svg:only-child:not(.hidden)), .echo-btn-md.echo-btn-icon-only {
      width: 2.75rem;
      height: 2.75rem;
      padding-left: 0;
      padding-right: 0;
    }
    .echo-btn-md.echo-btn-icon-only-mobile {
      width: 2.75rem !important;
      height: 2.75rem !important;
      min-width: 2.75rem !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  .echo-btn-primary {
    background: #775be6;
    background: var(--color-primary-lavender-500);
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-btn-primary svg, .echo-btn-primary svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-btn-primary:hover:not([disabled], :focus) {
    background: #6a52c8;
    background: var(--color-primary-lavender-600);
  }
  .echo-btn-primary:focus {
    background: #6a52c8;
    background: var(--color-primary-lavender-600);
  }
  .echo-btn-primary[disabled] {
    cursor: not-allowed;
    background: #f4f1ff;
    background: var(--color-primary-lavender-100);
    color: #775be6;
    color: var(--color-primary-lavender-500);
    opacity: 0.3;
  }
  .echo-btn-primary[disabled] svg, .echo-btn-primary[disabled] svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-btn-secondary {
    background: #ebebf7;
    background: var(--color-neutral-200);
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-btn-secondary svg, .echo-btn-secondary svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-btn-secondary:hover:not([disabled], :focus) {
    background: #d6d6e8;
    background: var(--color-neutral-300);
  }
  .echo-btn-secondary:focus {
    background: #d6d6e8;
    background: var(--color-neutral-300);
  }
  .echo-btn-secondary[disabled] {
    cursor: not-allowed;
    opacity: 0.3;
  }
  .echo-btn-secondary.dark, .dark .echo-btn-secondary:not(.light) {
    background: white;
    background: var(--color-neutral-0);
  }
  .echo-btn-secondary.dark:hover:not([disabled], :focus), .dark .echo-btn-secondary:not(.light):hover:not([disabled], :focus) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-btn-secondary.dark:focus, .dark .echo-btn-secondary:not(.light):focus {
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-btn-tertiary {
    background: transparent;
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-btn-tertiary svg, .echo-btn-tertiary svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-btn-tertiary:hover:not([disabled], :focus) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-btn-tertiary:focus {
    background: #0d0c0f;
    background: var(--color-neutral-900);
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-btn-tertiary:focus svg, .echo-btn-tertiary:focus svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-btn-tertiary[disabled] {
    cursor: not-allowed;
    opacity: 0.3;
  }
  .echo-btn-minimal {
    background: transparent;
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-btn-minimal svg, .echo-btn-minimal svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-btn-minimal:hover:not([disabled], :focus) {
    text-decoration: underline;
  }
  .echo-btn-minimal:focus {
    text-decoration: underline;
  }
  .echo-btn-minimal[disabled] {
    cursor: not-allowed;
    opacity: 0.3;
  }
  .echo-btn-minimal.dark, .dark .echo-btn-minimal:not(.light) {
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-btn-minimal.dark svg, .echo-btn-minimal.dark svg > path, .dark .echo-btn-minimal:not(.light) svg, .dark .echo-btn-minimal:not(.light) svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-btn-social {
    background: white;
    background: var(--color-neutral-0);
    color: #0d0c0f;
    color: var(--color-neutral-900);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
  }
  .echo-btn-social svg, .echo-btn-social img {
    height: 1.25rem;
    width: auto;
  }
  .echo-btn-social:has(img:not(.hidden):first-child:not(:only-child)) {
    padding-left: 0.75rem;
    padding-left: var(--padding-12);
  }
  .echo-btn-social:hover:not([disabled], :focus) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-btn-social:focus {
    background: #ebebf7;
    background: var(--color-neutral-200);
  }
  .echo-btn-social[disabled] {
    cursor: not-allowed;
    opacity: 0.3;
  }
  .echo-btn-destructive {
    background: #f03c66;
    background: var(--color-semantic-error-500);
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-btn-destructive svg, .echo-btn-destructive svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-btn-destructive:hover:not([disabled], :focus) {
    background: #dd2156;
    background: var(--color-semantic-error-600);
  }
  .echo-btn-destructive:focus {
    background: #dd2156;
    background: var(--color-semantic-error-600);
  }
  .echo-btn-destructive[disabled] {
    cursor: not-allowed;
    background: #fdebf0;
    background: var(--color-semantic-error-100);
    color: #f03c66;
    color: var(--color-semantic-error-500);
    opacity: 0.3;
  }
  .echo-btn-destructive[disabled] svg, .echo-btn-destructive[disabled] svg > path {
    fill: #f03c66;
    fill: var(--color-semantic-error-500);
  }
  .echo-switch-wrapper {
    display: inline-flex;
    position: relative;
  }
  .echo-switch-wrapper input[type=checkbox] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .echo-switch-wrapper input[type=checkbox]:checked ~ .echo-switch > .echo-switch-off {
    display: none;
  }
  .echo-switch-wrapper input[type=checkbox]:checked ~ .echo-switch > .echo-switch-on {
    display: inline-block;
  }
  .echo-switch-wrapper input[type=checkbox]:checked + .echo-switch::before {
    background: #775be6;
    background: var(--color-primary-lavender-500);
  }
  .echo-switch-wrapper input[type=checkbox]:checked + .echo-switch::after {
    transform: translateX(1rem);
  }
  .echo-switch-wrapper input[type=checkbox]:focus-visible + .echo-switch::before {
    outline: 2px solid #775be6;
    outline: 2px solid var(--color-primary-lavender-500);
    outline-offset: 2px;
  }
  .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch {
    cursor: not-allowed;
  }
  .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-on, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-on *, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-off, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-off * {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-on svg, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-on svg > path, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-on * svg, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-on * svg > path, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-off svg, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-off svg > path, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-off * svg, .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch .echo-switch-off * svg > path {
    fill: #a5a5b0 !important;
    fill: var(--color-neutral-400) !important;
  }
  .echo-switch-wrapper input[type=checkbox]:disabled + .echo-switch::before {
    background: #ebebf7;
    background: var(--color-neutral-200);
  }
  .echo-switch-wrapper input[type=checkbox]:checked:disabled + .echo-switch::before {
    background: #e0d8ff;
    background: var(--color-primary-lavender-200);
  }
  .echo-switch-wrapper .echo-switch {
    display: flex;
    cursor: pointer;
    width: 100%;
  }
  .echo-switch-wrapper .echo-switch::before {
    background: #a5a5b0;
    background: var(--color-neutral-400);
    border-radius: 34px;
    bottom: 0;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 1.25rem;
  }
  .echo-switch-wrapper .echo-switch::after {
    background: white;
    background: var(--color-neutral-0);
    box-shadow: 0 2px 4px 0 rgba(39, 39, 39, 0.1);
    border-radius: 50%;
    bottom: 0;
    content: "";
    top: 0;
    left: 0.185rem;
    margin: auto;
    position: absolute;
    transition: 150ms;
    width: 0.875rem;
    height: 0.875rem;
  }
  .echo-switch-wrapper .echo-switch .echo-switch-off, .echo-switch-wrapper .echo-switch .echo-switch-on {
    font-weight: 700;
    margin-left: 3.125rem;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    width: 100%;
  }
  .echo-switch-wrapper .echo-switch .echo-switch-on {
    display: none;
  }
  .echo-switch-wrapper.right .echo-switch::before {
    left: auto;
    right: 0;
  }
  .echo-switch-wrapper.right .echo-switch::after {
    left: auto;
    right: 1.185rem;
  }
  .echo-switch-wrapper.right .echo-switch .echo-switch-off, .echo-switch-wrapper.right .echo-switch .echo-switch-on {
    margin-left: 0;
    margin-right: 3.125rem;
  }
  .echo-switch-wrapper.top .echo-switch::before {
    top: 0;
    transform: none;
  }
  .echo-switch-wrapper.top .echo-switch::after {
    top: 0.185rem;
    margin: 0;
  }
  input[type=radio].echo-radio-btn {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1.5px solid #0d0c0f;
    border: 1.5px solid var(--color-neutral-900);
    background: white;
    background: var(--color-neutral-0);
    cursor: pointer;
    position: relative;
    margin: 0;
  }
  input[type=radio].echo-radio-btn:hover:not(:disabled) {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
  }
  input[type=radio].echo-radio-btn:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline: 3px solid #e0d8ff;
    outline: 3px solid var(--color-primary-lavender-200);
    outline-offset: 1px;
  }
  input[type=radio].echo-radio-btn:checked {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    background: white;
    background: var(--color-neutral-0);
  }
  input[type=radio].echo-radio-btn:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #775be6;
    background: var(--color-primary-lavender-500);
  }
  input[type=radio].echo-radio-btn:disabled {
    cursor: not-allowed;
    border-color: #ebebf7;
    border-color: var(--color-neutral-200);
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  input[type=radio].echo-radio-btn:disabled:checked::after {
    background: #a5a5b0;
    background: var(--color-neutral-400);
  }
  input[type=radio].echo-radio-btn:has(+ .echo-error-lg, + .echo-error-md) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  input[type=radio].echo-radio-btn:has(+ .echo-error-lg, + .echo-error-md):focus {
    outline-color: #ffd9e4;
    outline-color: var(--color-semantic-error-200);
  }
  input[type=radio].echo-radio-btn:has(+ .echo-error-lg, + .echo-error-md):checked {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  input[type=radio].echo-radio-btn:has(+ .echo-error-lg, + .echo-error-md):checked::after {
    background: #f03c66;
    background: var(--color-semantic-error-500);
  }
  input[type=checkbox].echo-checkbox {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: 0.3125rem;
    border: 1.5px solid color-mix(in srgb, #0d0c0f 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1.5px solid color-mix(in srgb, #0d0c0f 50%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      border: 1.5px solid color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
    }
}
    background: white;
    background: var(--color-neutral-0);
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
  }
  input[type=checkbox].echo-checkbox:hover:not(:disabled) {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
  }
  input[type=checkbox].echo-checkbox:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline: 3px solid #e0d8ff;
    outline: 3px solid var(--color-primary-lavender-200);
    outline-offset: 1px;
  }
  input[type=checkbox].echo-checkbox:checked {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    background: #775be6;
    background: var(--color-primary-lavender-500);
  }
  input[type=checkbox].echo-checkbox:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: white;
    background-color: var(--color-neutral-0);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 0.75rem;
            mask-size: 0.75rem;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M20.8258 6.43618C21.1373 6.89227 21.02 7.51448 20.5639 7.82593L19.6801 8.42947C16.23 10.7854 13.3598 13.8938 11.2858 17.5203L10.8849 18.2212C10.7239 18.5028 10.4363 18.6888 10.1134 18.7201C9.79052 18.7514 9.47252 18.6242 9.26036 18.3788L4.74352 13.1541C4.38233 12.7363 4.42821 12.1048 4.84601 11.7436C5.26381 11.3824 5.89531 11.4283 6.25651 11.8461L9.85407 16.0074C12.0513 12.3406 15.0181 9.1911 18.5522 6.77781L19.4361 6.17427C19.8922 5.86282 20.5144 5.98008 20.8258 6.43618Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M20.8258 6.43618C21.1373 6.89227 21.02 7.51448 20.5639 7.82593L19.6801 8.42947C16.23 10.7854 13.3598 13.8938 11.2858 17.5203L10.8849 18.2212C10.7239 18.5028 10.4363 18.6888 10.1134 18.7201C9.79052 18.7514 9.47252 18.6242 9.26036 18.3788L4.74352 13.1541C4.38233 12.7363 4.42821 12.1048 4.84601 11.7436C5.26381 11.3824 5.89531 11.4283 6.25651 11.8461L9.85407 16.0074C12.0513 12.3406 15.0181 9.1911 18.5522 6.77781L19.4361 6.17427C19.8922 5.86282 20.5144 5.98008 20.8258 6.43618Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  input[type=checkbox].echo-checkbox:disabled {
    cursor: not-allowed;
    border-color: #ebebf7;
    border-color: var(--color-neutral-200);
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  input[type=checkbox].echo-checkbox:disabled:checked {
    border-color: #e0d8ff;
    border-color: var(--color-primary-lavender-200);
    background: #e0d8ff;
    background: var(--color-primary-lavender-200);
  }
  .echo-avatar-group {
    display: inline-flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    position: relative;
  }
  .echo-avatar-group .echo-avatar-sm {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    outline-style: solid;
    outline-color: white;
    outline-color: var(--color-neutral-0);
    position: relative;
    color: white;
    color: var(--color-neutral-0);
    --avatar-overlap: 0.3125rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.1875rem 0.625rem;
    outline-width: 2px;
  }
  .echo-avatar-group .echo-avatar-sm:nth-child(1) {
    z-index: 1;
  }
  .echo-avatar-group .echo-avatar-sm:nth-child(2) {
    z-index: 2;
    margin-left: calc(0.3125rem * -1);
    margin-left: calc(var(--avatar-overlap, 0.3125rem) * -1);
  }
  .echo-avatar-group .echo-avatar-sm:nth-child(3) {
    z-index: 3;
    margin-left: calc(0.3125rem * -1);
    margin-left: calc(var(--avatar-overlap, 0.3125rem) * -1);
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-primary-lavender-500 {
    background: #775be6 !important;
    background: var(--color-primary-lavender-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-secondary-blue-500 {
    background: #3893a5 !important;
    background: var(--color-secondary-blue-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-secondary-blush-500 {
    background: #cc5a71 !important;
    background: var(--color-secondary-blush-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-secondary-earth-500 {
    background: #db9f57 !important;
    background: var(--color-secondary-earth-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-secondary-plum-500 {
    background: #893473 !important;
    background: var(--color-secondary-plum-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-secondary-green-500 {
    background: #9cb43c !important;
    background: var(--color-secondary-green-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-secondary-aqua-500 {
    background: #7db8aa !important;
    background: var(--color-secondary-aqua-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-secondary-gray-500 {
    background: #5b7894 !important;
    background: var(--color-secondary-gray-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-secondary-magenta-500 {
    background: #bd68af !important;
    background: var(--color-secondary-magenta-500) !important;
  }
  .echo-avatar-group .echo-avatar-sm.echo-avatar-black {
    background: #0d0c0f !important;
    background: var(--color-neutral-900) !important;
  }
  .echo-avatar-group .echo-avatar-sm.dark, .dark .echo-avatar-group .echo-avatar-sm:not(.light) {
    outline-color: #1a042a;
    outline-color: var(--color-primary-lavender-900);
  }
  .echo-avatar-group .echo-avatar-sm .echo-avatar-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-center;
    background: white;
    background: var(--color-neutral-0);
    position: absolute;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  .echo-avatar-group .echo-avatar-sm .echo-avatar-badge svg {
    flex-shrink: 0;
    align-self: stretch;
  }
  .echo-avatar-group .echo-avatar-sm .echo-avatar-badge {
    width: 1rem;
    height: 1rem;
    padding: 0.125rem;
    right: -0.375rem;
    bottom: -0.375rem;
  }
  .echo-avatar-group .echo-avatar-sm .echo-avatar-badge svg {
    height: 0.75rem;
  }
  .echo-avatar-group .echo-avatar-md {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    outline-style: solid;
    outline-color: white;
    outline-color: var(--color-neutral-0);
    position: relative;
    color: white;
    color: var(--color-neutral-0);
    --avatar-overlap: 0.4375rem;
    width: 2rem;
    height: 2rem;
    padding: 0.1875rem 0.625rem;
    outline-width: 3px;
  }
  .echo-avatar-group .echo-avatar-md:nth-child(1) {
    z-index: 1;
  }
  .echo-avatar-group .echo-avatar-md:nth-child(2) {
    z-index: 2;
    margin-left: calc(0.3125rem * -1);
    margin-left: calc(var(--avatar-overlap, 0.3125rem) * -1);
  }
  .echo-avatar-group .echo-avatar-md:nth-child(3) {
    z-index: 3;
    margin-left: calc(0.3125rem * -1);
    margin-left: calc(var(--avatar-overlap, 0.3125rem) * -1);
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-primary-lavender-500 {
    background: #775be6 !important;
    background: var(--color-primary-lavender-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-secondary-blue-500 {
    background: #3893a5 !important;
    background: var(--color-secondary-blue-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-secondary-blush-500 {
    background: #cc5a71 !important;
    background: var(--color-secondary-blush-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-secondary-earth-500 {
    background: #db9f57 !important;
    background: var(--color-secondary-earth-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-secondary-plum-500 {
    background: #893473 !important;
    background: var(--color-secondary-plum-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-secondary-green-500 {
    background: #9cb43c !important;
    background: var(--color-secondary-green-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-secondary-aqua-500 {
    background: #7db8aa !important;
    background: var(--color-secondary-aqua-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-secondary-gray-500 {
    background: #5b7894 !important;
    background: var(--color-secondary-gray-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-secondary-magenta-500 {
    background: #bd68af !important;
    background: var(--color-secondary-magenta-500) !important;
  }
  .echo-avatar-group .echo-avatar-md.echo-avatar-black {
    background: #0d0c0f !important;
    background: var(--color-neutral-900) !important;
  }
  .echo-avatar-group .echo-avatar-md.dark, .dark .echo-avatar-group .echo-avatar-md:not(.light) {
    outline-color: #1a042a;
    outline-color: var(--color-primary-lavender-900);
  }
  .echo-avatar-group .echo-avatar-md .echo-avatar-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-center;
    background: white;
    background: var(--color-neutral-0);
    position: absolute;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  .echo-avatar-group .echo-avatar-md .echo-avatar-badge svg {
    flex-shrink: 0;
    align-self: stretch;
  }
  .echo-avatar-group .echo-avatar-md .echo-avatar-badge {
    width: 1.25rem;
    height: 1.25rem;
    right: -0.5rem;
    bottom: -0.3125rem;
  }
  .echo-avatar-group .echo-avatar-md .echo-avatar-badge svg {
    height: 0.75rem;
  }
  .echo-avatar-group .echo-avatar-lg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    outline-style: solid;
    outline-color: white;
    outline-color: var(--color-neutral-0);
    position: relative;
    color: white;
    color: var(--color-neutral-0);
    --avatar-overlap: 0.625rem;
    width: 3rem;
    height: 3rem;
    padding: 0.28125rem 0.9375rem;
    outline-width: 4.5px;
  }
  .echo-avatar-group .echo-avatar-lg:nth-child(1) {
    z-index: 1;
  }
  .echo-avatar-group .echo-avatar-lg:nth-child(2) {
    z-index: 2;
    margin-left: calc(0.3125rem * -1);
    margin-left: calc(var(--avatar-overlap, 0.3125rem) * -1);
  }
  .echo-avatar-group .echo-avatar-lg:nth-child(3) {
    z-index: 3;
    margin-left: calc(0.3125rem * -1);
    margin-left: calc(var(--avatar-overlap, 0.3125rem) * -1);
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-primary-lavender-500 {
    background: #775be6 !important;
    background: var(--color-primary-lavender-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-secondary-blue-500 {
    background: #3893a5 !important;
    background: var(--color-secondary-blue-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-secondary-blush-500 {
    background: #cc5a71 !important;
    background: var(--color-secondary-blush-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-secondary-earth-500 {
    background: #db9f57 !important;
    background: var(--color-secondary-earth-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-secondary-plum-500 {
    background: #893473 !important;
    background: var(--color-secondary-plum-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-secondary-green-500 {
    background: #9cb43c !important;
    background: var(--color-secondary-green-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-secondary-aqua-500 {
    background: #7db8aa !important;
    background: var(--color-secondary-aqua-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-secondary-gray-500 {
    background: #5b7894 !important;
    background: var(--color-secondary-gray-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-secondary-magenta-500 {
    background: #bd68af !important;
    background: var(--color-secondary-magenta-500) !important;
  }
  .echo-avatar-group .echo-avatar-lg.echo-avatar-black {
    background: #0d0c0f !important;
    background: var(--color-neutral-900) !important;
  }
  .echo-avatar-group .echo-avatar-lg.dark, .dark .echo-avatar-group .echo-avatar-lg:not(.light) {
    outline-color: #1a042a;
    outline-color: var(--color-primary-lavender-900);
  }
  .echo-avatar-group .echo-avatar-lg .echo-avatar-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-center;
    background: white;
    background: var(--color-neutral-0);
    position: absolute;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  .echo-avatar-group .echo-avatar-lg .echo-avatar-badge svg {
    flex-shrink: 0;
    align-self: stretch;
  }
  .echo-avatar-group .echo-avatar-lg .echo-avatar-badge {
    display: none;
  }
  .echo-toast-success {
    display: none;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background: white;
    background: var(--color-neutral-0);
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(177, 177, 177, 0.2392156863);
    box-shadow: var(--shadow-soft-200);
    border: 0.5px solid #ebebf7;
    border: 0.5px solid var(--color-neutral-200);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    position: fixed;
    right: 24px;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    z-index: 9999;
    transition: top 0.3s ease;
  }
  .echo-toast-success[opening] {
    display: inline-flex;
    animation: slide-in-right 150ms forwards;
  }
  .echo-toast-success[open] {
    display: inline-flex;
  }
  .echo-toast-success[closing] {
    display: inline-flex;
    animation: slide-out-right 150ms forwards;
  }
  .echo-toast-success .echo-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    flex-shrink: 0;
  }
  .echo-toast-success .echo-toast-content {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
  }
  .echo-toast-success .echo-toast-content .echo-btn-sm:last-child:not(.echo-btn-minimal) {
    margin-right: -0.5rem;
  }
  .echo-toast-success .echo-toast-content .echo-btn-minimal {
    padding: 0;
    margin-left: 0.5rem;
    min-width: 0;
    min-width: initial;
  }
  .echo-toast-success .echo-toast-icon {
    background: #e5f4df;
    background: var(--color-semantic-success-100);
  }
  .echo-toast-success .echo-toast-icon svg, .echo-toast-success .echo-toast-icon svg > path {
    fill: #1f5800;
    fill: var(--color-semantic-success-500);
  }
  .echo-toast-destructive {
    display: none;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background: white;
    background: var(--color-neutral-0);
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(177, 177, 177, 0.2392156863);
    box-shadow: var(--shadow-soft-200);
    border: 0.5px solid #ebebf7;
    border: 0.5px solid var(--color-neutral-200);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    position: fixed;
    right: 24px;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    z-index: 9999;
    transition: top 0.3s ease;
  }
  .echo-toast-destructive[opening] {
    display: inline-flex;
    animation: slide-in-right 150ms forwards;
  }
  .echo-toast-destructive[open] {
    display: inline-flex;
  }
  .echo-toast-destructive[closing] {
    display: inline-flex;
    animation: slide-out-right 150ms forwards;
  }
  .echo-toast-destructive .echo-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    flex-shrink: 0;
  }
  .echo-toast-destructive .echo-toast-content {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
  }
  .echo-toast-destructive .echo-toast-content .echo-btn-sm:last-child:not(.echo-btn-minimal) {
    margin-right: -0.5rem;
  }
  .echo-toast-destructive .echo-toast-content .echo-btn-minimal {
    padding: 0;
    margin-left: 0.5rem;
    min-width: 0;
    min-width: initial;
  }
  .echo-toast-destructive .echo-toast-icon {
    background: #fdebf0;
    background: var(--color-semantic-error-100);
  }
  .echo-toast-destructive .echo-toast-icon svg, .echo-toast-destructive .echo-toast-icon svg > path {
    fill: #f03c66;
    fill: var(--color-semantic-error-500);
  }
  .echo-toast-warning {
    display: none;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background: white;
    background: var(--color-neutral-0);
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(177, 177, 177, 0.2392156863);
    box-shadow: var(--shadow-soft-200);
    border: 0.5px solid #ebebf7;
    border: 0.5px solid var(--color-neutral-200);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    position: fixed;
    right: 24px;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    z-index: 9999;
    transition: top 0.3s ease;
  }
  .echo-toast-warning[opening] {
    display: inline-flex;
    animation: slide-in-right 150ms forwards;
  }
  .echo-toast-warning[open] {
    display: inline-flex;
  }
  .echo-toast-warning[closing] {
    display: inline-flex;
    animation: slide-out-right 150ms forwards;
  }
  .echo-toast-warning .echo-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    flex-shrink: 0;
  }
  .echo-toast-warning .echo-toast-content {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
  }
  .echo-toast-warning .echo-toast-content .echo-btn-sm:last-child:not(.echo-btn-minimal) {
    margin-right: -0.5rem;
  }
  .echo-toast-warning .echo-toast-content .echo-btn-minimal {
    padding: 0;
    margin-left: 0.5rem;
    min-width: 0;
    min-width: initial;
  }
  .echo-toast-warning .echo-toast-icon {
    background: #faeddf;
    background: var(--color-semantic-warning-100);
  }
  .echo-toast-warning .echo-toast-icon svg, .echo-toast-warning .echo-toast-icon svg > path {
    fill: #ca6e04;
    fill: var(--color-semantic-warning-500);
  }
  .echo-toast-info {
    display: none;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background: white;
    background: var(--color-neutral-0);
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(177, 177, 177, 0.2392156863);
    box-shadow: var(--shadow-soft-200);
    border: 0.5px solid #ebebf7;
    border: 0.5px solid var(--color-neutral-200);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    position: fixed;
    right: 24px;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    z-index: 9999;
    transition: top 0.3s ease;
  }
  .echo-toast-info[opening] {
    display: inline-flex;
    animation: slide-in-right 150ms forwards;
  }
  .echo-toast-info[open] {
    display: inline-flex;
  }
  .echo-toast-info[closing] {
    display: inline-flex;
    animation: slide-out-right 150ms forwards;
  }
  .echo-toast-info .echo-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    flex-shrink: 0;
  }
  .echo-toast-info .echo-toast-content {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
  }
  .echo-toast-info .echo-toast-content .echo-btn-sm:last-child:not(.echo-btn-minimal) {
    margin-right: -0.5rem;
  }
  .echo-toast-info .echo-toast-content .echo-btn-minimal {
    padding: 0;
    margin-left: 0.5rem;
    min-width: 0;
    min-width: initial;
  }
  .echo-toast-info .echo-toast-icon {
    background: #e9edf8;
    background: var(--color-semantic-info-100);
  }
  .echo-toast-info .echo-toast-icon svg, .echo-toast-info .echo-toast-icon svg > path {
    fill: #2149b9;
    fill: var(--color-semantic-info-500);
  }
  .echo-code-block-wrapper {
    margin: 0;
  }
  .echo-code-block {
    display: block;
    padding: 0.75rem 1rem;
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #1d1c23;
    color: var(--color-neutral-800);
    background: #f9f9fe;
    background: var(--color-neutral-100);
    border: 0.5px solid #ebebf7;
    border: 0.5px solid var(--color-neutral-200);
    border-radius: 0.75rem;
    border-radius: var(--radius-12);
    white-space: pre-wrap;
    word-break: break-all;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
  }
  .echo-inline-code {
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    color: #893473;
    color: var(--color-secondary-plum-500);
  }
  .echo-dropdown-list-btn-lg {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    background: white;
    background: var(--color-neutral-0);
    cursor: pointer;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    gap: 0.5rem;
    border: none;
  }
  .echo-dropdown-list-btn-lg::after {
    content: "";
    display: inline-block;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M7.41231 9.3302C7.85912 9.00559 8.48449 9.10465 8.8091 9.55147C9.73524 10.8263 10.807 11.9784 12.0001 12.9834C13.1931 11.9784 14.2649 10.8263 15.191 9.55147C15.5157 9.10465 16.141 9.00559 16.5878 9.3302C17.0347 9.65481 17.1337 10.2802 16.8091 10.727C15.6955 12.2598 14.3894 13.6336 12.925 14.8124C12.3836 15.2482 11.6165 15.2482 11.0752 14.8124C9.6107 13.6336 8.30462 12.2598 7.19104 10.727C6.86643 10.2802 6.96549 9.65481 7.41231 9.3302Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M7.41231 9.3302C7.85912 9.00559 8.48449 9.10465 8.8091 9.55147C9.73524 10.8263 10.807 11.9784 12.0001 12.9834C13.1931 11.9784 14.2649 10.8263 15.191 9.55147C15.5157 9.10465 16.141 9.00559 16.5878 9.3302C17.0347 9.65481 17.1337 10.2802 16.8091 10.727C15.6955 12.2598 14.3894 13.6336 12.925 14.8124C12.3836 15.2482 11.6165 15.2482 11.0752 14.8124C9.6107 13.6336 8.30462 12.2598 7.19104 10.727C6.86643 10.2802 6.96549 9.65481 7.41231 9.3302Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    transition: transform 150ms ease-in-out;
  }
  .echo-dropdown-list-btn-lg:focus::after {
    transform: scaleY(-1);
  }
  .echo-dropdown-list-btn-lg:disabled {
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-dropdown-list-btn-lg:disabled::after {
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
  }
  .echo-dropdown-list-btn-lg::after {
    width: 1.5rem;
    height: 1.5rem;
  }
  .echo-dropdown-list-btn-md {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    background: white;
    background: var(--color-neutral-0);
    cursor: pointer;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    gap: 0.5rem;
    border: none;
  }
  .echo-dropdown-list-btn-md::after {
    content: "";
    display: inline-block;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M7.41231 9.3302C7.85912 9.00559 8.48449 9.10465 8.8091 9.55147C9.73524 10.8263 10.807 11.9784 12.0001 12.9834C13.1931 11.9784 14.2649 10.8263 15.191 9.55147C15.5157 9.10465 16.141 9.00559 16.5878 9.3302C17.0347 9.65481 17.1337 10.2802 16.8091 10.727C15.6955 12.2598 14.3894 13.6336 12.925 14.8124C12.3836 15.2482 11.6165 15.2482 11.0752 14.8124C9.6107 13.6336 8.30462 12.2598 7.19104 10.727C6.86643 10.2802 6.96549 9.65481 7.41231 9.3302Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M7.41231 9.3302C7.85912 9.00559 8.48449 9.10465 8.8091 9.55147C9.73524 10.8263 10.807 11.9784 12.0001 12.9834C13.1931 11.9784 14.2649 10.8263 15.191 9.55147C15.5157 9.10465 16.141 9.00559 16.5878 9.3302C17.0347 9.65481 17.1337 10.2802 16.8091 10.727C15.6955 12.2598 14.3894 13.6336 12.925 14.8124C12.3836 15.2482 11.6165 15.2482 11.0752 14.8124C9.6107 13.6336 8.30462 12.2598 7.19104 10.727C6.86643 10.2802 6.96549 9.65481 7.41231 9.3302Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    transition: transform 150ms ease-in-out;
  }
  .echo-dropdown-list-btn-md:focus::after {
    transform: scaleY(-1);
  }
  .echo-dropdown-list-btn-md:disabled {
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-dropdown-list-btn-md:disabled::after {
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
  }
  .echo-dropdown-list-btn-md::after {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-dropdown-filter-btn-lg {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    background: white;
    background: var(--color-neutral-0);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    cursor: pointer;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    gap: 0.625rem;
    padding: 0.6875rem 1.5rem;
  }
  .echo-dropdown-filter-btn-lg::after {
    content: "";
    display: inline-block;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.925 14.6732C14.3879 13.4957 15.6927 12.1235 16.8055 10.5927C16.9425 10.4067 17.0161 10.1726 16.9972 9.92417C16.9553 9.37347 16.4749 8.96102 15.9242 9.00293C13.3119 9.20173 10.6882 9.20173 8.07593 9.00293C7.52524 8.96102 7.04484 9.37347 7.00293 9.92417C6.98403 10.1726 7.05757 10.4067 7.19456 10.5927C8.30737 12.1235 9.61223 13.4957 11.0751 14.6732C11.6165 15.109 12.3836 15.109 12.925 14.6732Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.925 14.6732C14.3879 13.4957 15.6927 12.1235 16.8055 10.5927C16.9425 10.4067 17.0161 10.1726 16.9972 9.92417C16.9553 9.37347 16.4749 8.96102 15.9242 9.00293C13.3119 9.20173 10.6882 9.20173 8.07593 9.00293C7.52524 8.96102 7.04484 9.37347 7.00293 9.92417C6.98403 10.1726 7.05757 10.4067 7.19456 10.5927C8.30737 12.1235 9.61223 13.4957 11.0751 14.6732C11.6165 15.109 12.3836 15.109 12.925 14.6732Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    transition: transform 150ms ease-in-out;
  }
  .echo-dropdown-filter-btn-lg:hover {
    border-color: #747483;
    border-color: var(--color-neutral-500);
  }
  .echo-dropdown-filter-btn-lg:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline-style: solid;
    outline-color: #e0d8ff;
    outline-color: var(--color-primary-lavender-200);
  }
  .echo-dropdown-filter-btn-lg:focus::after {
    transform: scaleY(-1);
  }
  .echo-dropdown-filter-btn-lg:disabled {
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
    border-color: #a5a5b0;
    border-color: var(--color-neutral-400);
  }
  .echo-dropdown-filter-btn-lg:disabled::after {
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
  }
  .echo-dropdown-filter-btn-lg::after {
    width: 1.5rem;
    height: 1.5rem;
  }
  .echo-dropdown-filter-btn-lg:focus {
    outline-width: 4px;
  }
  .echo-dropdown-filter-btn-md {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    background: white;
    background: var(--color-neutral-0);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    cursor: pointer;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    gap: 0.625rem;
    padding: 0.5625rem 1.5rem;
  }
  .echo-dropdown-filter-btn-md::after {
    content: "";
    display: inline-block;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.925 14.6732C14.3879 13.4957 15.6927 12.1235 16.8055 10.5927C16.9425 10.4067 17.0161 10.1726 16.9972 9.92417C16.9553 9.37347 16.4749 8.96102 15.9242 9.00293C13.3119 9.20173 10.6882 9.20173 8.07593 9.00293C7.52524 8.96102 7.04484 9.37347 7.00293 9.92417C6.98403 10.1726 7.05757 10.4067 7.19456 10.5927C8.30737 12.1235 9.61223 13.4957 11.0751 14.6732C11.6165 15.109 12.3836 15.109 12.925 14.6732Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.925 14.6732C14.3879 13.4957 15.6927 12.1235 16.8055 10.5927C16.9425 10.4067 17.0161 10.1726 16.9972 9.92417C16.9553 9.37347 16.4749 8.96102 15.9242 9.00293C13.3119 9.20173 10.6882 9.20173 8.07593 9.00293C7.52524 8.96102 7.04484 9.37347 7.00293 9.92417C6.98403 10.1726 7.05757 10.4067 7.19456 10.5927C8.30737 12.1235 9.61223 13.4957 11.0751 14.6732C11.6165 15.109 12.3836 15.109 12.925 14.6732Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    transition: transform 150ms ease-in-out;
  }
  .echo-dropdown-filter-btn-md:hover {
    border-color: #747483;
    border-color: var(--color-neutral-500);
  }
  .echo-dropdown-filter-btn-md:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline-style: solid;
    outline-color: #e0d8ff;
    outline-color: var(--color-primary-lavender-200);
  }
  .echo-dropdown-filter-btn-md:focus::after {
    transform: scaleY(-1);
  }
  .echo-dropdown-filter-btn-md:disabled {
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
    border-color: #a5a5b0;
    border-color: var(--color-neutral-400);
  }
  .echo-dropdown-filter-btn-md:disabled::after {
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
  }
  .echo-dropdown-filter-btn-md::after {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-dropdown-filter-btn-md:focus {
    outline-width: 3px;
  }
  .echo-dropdown-card-btn-lg {
    display: inline-flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-shrink: 0;
    background: white;
    background: var(--color-neutral-0);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    border-radius: 1rem;
    border-radius: var(--radius-16);
    color: #0d0c0f;
    color: var(--color-neutral-900);
    cursor: pointer;
    gap: 1rem;
    padding: 1rem;
  }
  .echo-dropdown-card-btn-lg:hover {
    border-color: #747483;
    border-color: var(--color-neutral-500);
  }
  .echo-dropdown-card-btn-lg:focus-within {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline: 4px solid #e0d8ff;
    outline: 4px solid var(--color-primary-lavender-200);
  }
  .echo-dropdown-card-btn-lg::after {
    content: "";
    display: inline-block;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.925 14.6732C14.3879 13.4957 15.6927 12.1235 16.8055 10.5927C16.9425 10.4067 17.0161 10.1726 16.9972 9.92417C16.9553 9.37347 16.4749 8.96102 15.9242 9.00293C13.3119 9.20173 10.6882 9.20173 8.07593 9.00293C7.52524 8.96102 7.04484 9.37347 7.00293 9.92417C6.98403 10.1726 7.05757 10.4067 7.19456 10.5927C8.30737 12.1235 9.61223 13.4957 11.0751 14.6732C11.6165 15.109 12.3836 15.109 12.925 14.6732Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.925 14.6732C14.3879 13.4957 15.6927 12.1235 16.8055 10.5927C16.9425 10.4067 17.0161 10.1726 16.9972 9.92417C16.9553 9.37347 16.4749 8.96102 15.9242 9.00293C13.3119 9.20173 10.6882 9.20173 8.07593 9.00293C7.52524 8.96102 7.04484 9.37347 7.00293 9.92417C6.98403 10.1726 7.05757 10.4067 7.19456 10.5927C8.30737 12.1235 9.61223 13.4957 11.0751 14.6732C11.6165 15.109 12.3836 15.109 12.925 14.6732Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    transition: transform 150ms ease-in-out;
  }
  .echo-dropdown-card-btn-lg:focus-within::after {
    transform: scaleY(-1);
  }
  .echo-dropdown-card-btn-lg:disabled {
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
    border-color: #a5a5b0;
    border-color: var(--color-neutral-400);
  }
  .echo-dropdown-card-btn-lg:disabled .echo-dropdown-card-btn-icon {
    background: #a5a5b0;
    background: var(--color-neutral-400);
  }
  .echo-dropdown-card-btn-lg:disabled::after {
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
  }
  .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #775be6;
    background: var(--color-primary-lavender-500);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-icon svg, .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-icon svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
  }
  .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-content .echo-dropdown-card-btn-description {
    opacity: 0.5;
  }
  .echo-dropdown-card-btn-lg:focus-within {
    outline-width: 4px;
  }
  .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-icon {
    width: 3rem;
    height: 3rem;
    padding: 0.75rem;
  }
  .echo-dropdown-card-btn-lg .echo-dropdown-card-btn-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .echo-dropdown-card-btn-lg:after {
    width: 1.5rem;
    height: 1.5rem;
  }
  .echo-dropdown-card-btn-md {
    display: inline-flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-shrink: 0;
    background: white;
    background: var(--color-neutral-0);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    border-radius: 1rem;
    border-radius: var(--radius-16);
    color: #0d0c0f;
    color: var(--color-neutral-900);
    cursor: pointer;
    gap: 1rem;
    padding: 1rem;
  }
  .echo-dropdown-card-btn-md:hover {
    border-color: #747483;
    border-color: var(--color-neutral-500);
  }
  .echo-dropdown-card-btn-md:focus-within {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline: 4px solid #e0d8ff;
    outline: 4px solid var(--color-primary-lavender-200);
  }
  .echo-dropdown-card-btn-md::after {
    content: "";
    display: inline-block;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.925 14.6732C14.3879 13.4957 15.6927 12.1235 16.8055 10.5927C16.9425 10.4067 17.0161 10.1726 16.9972 9.92417C16.9553 9.37347 16.4749 8.96102 15.9242 9.00293C13.3119 9.20173 10.6882 9.20173 8.07593 9.00293C7.52524 8.96102 7.04484 9.37347 7.00293 9.92417C6.98403 10.1726 7.05757 10.4067 7.19456 10.5927C8.30737 12.1235 9.61223 13.4957 11.0751 14.6732C11.6165 15.109 12.3836 15.109 12.925 14.6732Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.925 14.6732C14.3879 13.4957 15.6927 12.1235 16.8055 10.5927C16.9425 10.4067 17.0161 10.1726 16.9972 9.92417C16.9553 9.37347 16.4749 8.96102 15.9242 9.00293C13.3119 9.20173 10.6882 9.20173 8.07593 9.00293C7.52524 8.96102 7.04484 9.37347 7.00293 9.92417C6.98403 10.1726 7.05757 10.4067 7.19456 10.5927C8.30737 12.1235 9.61223 13.4957 11.0751 14.6732C11.6165 15.109 12.3836 15.109 12.925 14.6732Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    transition: transform 150ms ease-in-out;
  }
  .echo-dropdown-card-btn-md:focus-within::after {
    transform: scaleY(-1);
  }
  .echo-dropdown-card-btn-md:disabled {
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
    border-color: #a5a5b0;
    border-color: var(--color-neutral-400);
  }
  .echo-dropdown-card-btn-md:disabled .echo-dropdown-card-btn-icon {
    background: #a5a5b0;
    background: var(--color-neutral-400);
  }
  .echo-dropdown-card-btn-md:disabled::after {
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
  }
  .echo-dropdown-card-btn-md .echo-dropdown-card-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #775be6;
    background: var(--color-primary-lavender-500);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-dropdown-card-btn-md .echo-dropdown-card-btn-icon svg, .echo-dropdown-card-btn-md .echo-dropdown-card-btn-icon svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-dropdown-card-btn-md .echo-dropdown-card-btn-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
  }
  .echo-dropdown-card-btn-md .echo-dropdown-card-btn-content .echo-dropdown-card-btn-description {
    opacity: 0.5;
  }
  .echo-dropdown-card-btn-md:focus-within {
    outline-width: 3px;
  }
  .echo-dropdown-card-btn-md .echo-dropdown-card-btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.625rem;
  }
  .echo-dropdown-card-btn-md .echo-dropdown-card-btn-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-dropdown-card-btn-md:after {
    width: 1.5rem;
    height: 1.5rem;
  }
  .echo-alert {
    display: flex;
    padding: 1.25rem;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
    border: 1px solid #775be6;
    border: 1px solid var(--color-primary-lavender-500);
    background: #f4f1ff;
    background: var(--color-primary-lavender-100);
  }
  .echo-alert::before {
    content: "";
    display: block;
    align-self: start;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.7815 2.3636C12.6424 1.8788 11.3575 1.8788 10.2184 2.3636C9.73333 2.57004 9.24717 2.93813 8.79256 3.35235C8.32488 3.77847 7.83236 4.30774 7.33585 4.89852C6.34217 6.08085 5.28986 7.5606 4.33501 9.07767C3.38021 10.5947 2.50789 12.1727 1.88176 13.5566C1.56899 14.2479 1.31031 14.9067 1.13443 15.4956C0.964728 16.0638 0.845902 16.6505 0.88124 17.1656C0.972824 18.5004 1.63448 19.7323 2.69867 20.5391C3.1304 20.8663 3.72489 21.0901 4.32906 21.2565C4.9579 21.4298 5.70239 21.5682 6.50987 21.6766C8.12667 21.8937 10.0706 22 11.9999 22C13.9293 22 15.8732 21.8937 17.49 21.6766C18.2975 21.5682 19.042 21.4298 19.6708 21.2565C20.275 21.0901 20.8696 20.8662 21.3014 20.539C22.3655 19.7322 23.027 18.5003 23.1187 17.1656C23.154 16.6505 23.0352 16.0638 22.8654 15.4956C22.6896 14.9067 22.4309 14.2479 22.1181 13.5566C21.492 12.1727 20.6196 10.5947 19.6648 9.07767C18.71 7.56061 17.6577 6.08085 16.664 4.89853C16.1675 4.30775 15.675 3.77847 15.2073 3.35235C14.7527 2.93813 14.2666 2.57004 13.7815 2.3636ZM13 9V9.00112C13 9.55341 12.5523 10.0011 12 10.0011C11.4477 10.0011 11 9.55341 11 9.00112V9C11 8.44772 11.4477 8 12 8C12.5523 8 13 8.44772 13 9ZM13 12.3761V16.3761C13 16.9284 12.5523 17.3761 12 17.3761C11.4477 17.3761 11 16.9284 11 16.3761V12.3761C11 11.8238 11.4477 11.3761 12 11.3761C12.5523 11.3761 13 11.8238 13 12.3761Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.7815 2.3636C12.6424 1.8788 11.3575 1.8788 10.2184 2.3636C9.73333 2.57004 9.24717 2.93813 8.79256 3.35235C8.32488 3.77847 7.83236 4.30774 7.33585 4.89852C6.34217 6.08085 5.28986 7.5606 4.33501 9.07767C3.38021 10.5947 2.50789 12.1727 1.88176 13.5566C1.56899 14.2479 1.31031 14.9067 1.13443 15.4956C0.964728 16.0638 0.845902 16.6505 0.88124 17.1656C0.972824 18.5004 1.63448 19.7323 2.69867 20.5391C3.1304 20.8663 3.72489 21.0901 4.32906 21.2565C4.9579 21.4298 5.70239 21.5682 6.50987 21.6766C8.12667 21.8937 10.0706 22 11.9999 22C13.9293 22 15.8732 21.8937 17.49 21.6766C18.2975 21.5682 19.042 21.4298 19.6708 21.2565C20.275 21.0901 20.8696 20.8662 21.3014 20.539C22.3655 19.7322 23.027 18.5003 23.1187 17.1656C23.154 16.6505 23.0352 16.0638 22.8654 15.4956C22.6896 14.9067 22.4309 14.2479 22.1181 13.5566C21.492 12.1727 20.6196 10.5947 19.6648 9.07767C18.71 7.56061 17.6577 6.08085 16.664 4.89853C16.1675 4.30775 15.675 3.77847 15.2073 3.35235C14.7527 2.93813 14.2666 2.57004 13.7815 2.3636ZM13 9V9.00112C13 9.55341 12.5523 10.0011 12 10.0011C11.4477 10.0011 11 9.55341 11 9.00112V9C11 8.44772 11.4477 8 12 8C12.5523 8 13 8.44772 13 9ZM13 12.3761V16.3761C13 16.9284 12.5523 17.3761 12 17.3761C11.4477 17.3761 11 16.9284 11 16.3761V12.3761C11 11.8238 11.4477 11.3761 12 11.3761C12.5523 11.3761 13 11.8238 13 12.3761Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  .echo-disclaimer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0.75rem 1.5rem 0.75rem 0.75rem;
    gap: 0.625rem;
    flex-shrink: 0;
    background-color: #f4f1ff;
    background-color: var(--color-primary-lavender-100);
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
  }
  .echo-disclaimer .echo-disclaimer-icon {
    display: flex;
    flex-shrink: 0;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .echo-disclaimer .echo-disclaimer-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-disclaimer .echo-disclaimer-icon svg, .echo-disclaimer .echo-disclaimer-icon svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    border-radius: 0.25rem;
    border-radius: var(--radius-4);
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    text-decoration: none;
    border: none;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    background-color: transparent;
    outline: none;
  }
  .echo-menu-itema, .echo-menu-itembutton {
    cursor: pointer;
  }
  .echo-menu-item svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }
  .echo-menu-item svg:not([class^=fill-]), .echo-menu-item svg:not([class^=fill-]) > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-menu-item.checked::after {
    content: "";
    display: inline-block;
    align-self: center;
    margin-left: auto;
    width: 1rem;
    height: 1rem;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M20.8258 6.43618C21.1373 6.89227 21.02 7.51448 20.5639 7.82593L19.6801 8.42947C16.23 10.7854 13.3598 13.8938 11.2858 17.5203L10.8849 18.2212C10.7239 18.5028 10.4363 18.6888 10.1134 18.7201C9.79052 18.7514 9.47252 18.6242 9.26036 18.3788L4.74352 13.1541C4.38233 12.7363 4.42821 12.1048 4.84601 11.7436C5.26381 11.3824 5.89531 11.4283 6.25651 11.8461L9.85407 16.0074C12.0513 12.3406 15.0181 9.1911 18.5522 6.77781L19.4361 6.17427C19.8922 5.86282 20.5144 5.98008 20.8258 6.43618Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M20.8258 6.43618C21.1373 6.89227 21.02 7.51448 20.5639 7.82593L19.6801 8.42947C16.23 10.7854 13.3598 13.8938 11.2858 17.5203L10.8849 18.2212C10.7239 18.5028 10.4363 18.6888 10.1134 18.7201C9.79052 18.7514 9.47252 18.6242 9.26036 18.3788L4.74352 13.1541C4.38233 12.7363 4.42821 12.1048 4.84601 11.7436C5.26381 11.3824 5.89531 11.4283 6.25651 11.8461L9.85407 16.0074C12.0513 12.3406 15.0181 9.1911 18.5522 6.77781L19.4361 6.17427C19.8922 5.86282 20.5144 5.98008 20.8258 6.43618Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  .echo-menu-item.sort-dir-asc::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg transform%3D%22translate(-0.5 0)%22%3E%3Cpath d%3D%22M11.4999 20V5.85547C9.94704 7.22184 8.53987 8.75318 7.30362 10.4248C6.97525 10.8688 6.34922 10.9631 5.90518 10.6348C5.46114 10.3064 5.36781 9.6794 5.6962 9.23535C7.30286 7.06293 9.17979 5.11106 11.2802 3.42871L11.4169 3.3291C11.7436 3.11063 12.1213 3 12.4999 3C12.8785 3 13.2562 3.11063 13.5829 3.3291L13.7196 3.42871L14.1103 3.74805C16.053 5.35662 17.7973 7.19872 19.3036 9.23535C19.632 9.67939 19.5387 10.3064 19.0946 10.6348C18.6506 10.9631 18.0246 10.8688 17.6962 10.4248C16.4599 8.75317 15.0528 7.22184 13.4999 5.85547V20C13.4999 20.5523 13.0522 21 12.4999 21C11.9476 21 11.4999 20.5523 11.4999 20Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg transform%3D%22translate(-0.5 0)%22%3E%3Cpath d%3D%22M11.4999 20V5.85547C9.94704 7.22184 8.53987 8.75318 7.30362 10.4248C6.97525 10.8688 6.34922 10.9631 5.90518 10.6348C5.46114 10.3064 5.36781 9.6794 5.6962 9.23535C7.30286 7.06293 9.17979 5.11106 11.2802 3.42871L11.4169 3.3291C11.7436 3.11063 12.1213 3 12.4999 3C12.8785 3 13.2562 3.11063 13.5829 3.3291L13.7196 3.42871L14.1103 3.74805C16.053 5.35662 17.7973 7.19872 19.3036 9.23535C19.632 9.67939 19.5387 10.3064 19.0946 10.6348C18.6506 10.9631 18.0246 10.8688 17.6962 10.4248C16.4599 8.75317 15.0528 7.22184 13.4999 5.85547V20C13.4999 20.5523 13.0522 21 12.4999 21C11.9476 21 11.4999 20.5523 11.4999 20Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
  .echo-menu-item.sort-dir-desc::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg transform%3D%22translate(-0.5 0)%22%3E%3Cpath d%3D%22M11.4999 4C11.4999 3.44772 11.9476 3 12.4999 3C13.0522 3 13.4999 3.44772 13.4999 4V18.1436C15.0526 16.7773 16.46 15.2467 17.6962 13.5752C18.0246 13.1312 18.6506 13.0369 19.0946 13.3652C19.5387 13.6936 19.632 14.3206 19.3036 14.7646C17.6969 16.9371 15.82 18.8889 13.7196 20.5713C13.3641 20.8561 12.9323 21 12.4999 21C12.0675 21 11.6357 20.8561 11.2802 20.5713C9.17979 18.8889 7.30286 16.9371 5.6962 14.7646C5.36781 14.3206 5.46114 13.6936 5.90518 13.3652C6.34922 13.0369 6.97525 13.1312 7.30362 13.5752C8.53974 15.2466 9.94724 16.7773 11.4999 18.1436V4Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg transform%3D%22translate(-0.5 0)%22%3E%3Cpath d%3D%22M11.4999 4C11.4999 3.44772 11.9476 3 12.4999 3C13.0522 3 13.4999 3.44772 13.4999 4V18.1436C15.0526 16.7773 16.46 15.2467 17.6962 13.5752C18.0246 13.1312 18.6506 13.0369 19.0946 13.3652C19.5387 13.6936 19.632 14.3206 19.3036 14.7646C17.6969 16.9371 15.82 18.8889 13.7196 20.5713C13.3641 20.8561 12.9323 21 12.4999 21C12.0675 21 11.6357 20.8561 11.2802 20.5713C9.17979 18.8889 7.30286 16.9371 5.6962 14.7646C5.36781 14.3206 5.46114 13.6936 5.90518 13.3652C6.34922 13.0369 6.97525 13.1312 7.30362 13.5752C8.53974 15.2466 9.94724 16.7773 11.4999 18.1436V4Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
  .echo-menu-item[aria-current=true] {
    color: white;
    color: var(--color-neutral-0);
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .echo-menu-item[aria-current=true].checked::after {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-menu-item[aria-current=true] svg:not([class^=fill-]), .echo-menu-item[aria-current=true] svg:not([class^=fill-]) > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-menu-item:hover:not(:disabled, :focus, [data-active]) {
    color: #6a52c8;
    color: var(--color-primary-lavender-600);
    background-color: #f4f1ff;
    background-color: var(--color-primary-lavender-100);
  }
  .echo-menu-item:hover:not(:disabled, :focus, [data-active]).checked::after {
    background-color: #6a52c8;
    background-color: var(--color-primary-lavender-600);
  }
  .echo-menu-item:hover:not(:disabled, :focus, [data-active]) svg, .echo-menu-item:hover:not(:disabled, :focus, [data-active]) svg > path {
    fill: #6a52c8;
    fill: var(--color-primary-lavender-600);
  }
  .echo-menu-item:focus:not(:disabled), .echo-menu-item[data-active] {
    color: white;
    color: var(--color-neutral-0);
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .echo-menu-item:focus:not(:disabled).checked::after, .echo-menu-item[data-active].checked::after {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-menu-item:focus:not(:disabled) svg, .echo-menu-item:focus:not(:disabled) svg > path, .echo-menu-item[data-active] svg, .echo-menu-item[data-active] svg > path {
    fill: white !important;
    fill: var(--color-neutral-0) !important;
  }
  .echo-menu-item:disabled {
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-menu-item:disabled.checked::after {
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
  }
  .echo-menu-item:disabled svg, .echo-menu-item:disabled svg > path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
  }
  .echo-tooltip {
    position: relative;
    display: inline-block;
    z-index: 0;
  }
  .echo-tooltip .echo-tooltip-wrapper {
    position: absolute;
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 0.75rem;
    gap: 0.25rem;
    width: -moz-max-content;
    width: max-content;
    max-width: 200px;
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.2392156863);
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
    pointer-events: none;
  }
  .echo-tooltip .echo-tooltip-wrapper[open] {
    display: flex;
    animation: fade-in 0.15s ease-out;
  }
  .echo-tooltip .echo-tooltip-wrapper[closing] {
    display: flex;
    animation: fade-out 0.15s ease-out;
  }
  .echo-tooltip .echo-tooltip-title {
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-tooltip .echo-tooltip-title + .echo-tooltip-content {
    color: #d6d6e8;
    color: var(--color-neutral-300);
  }
  .echo-tooltip .echo-tooltip-content {
    color: white;
    color: var(--color-neutral-0);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .echo-tooltip[data-ui--tooltip-position-value=top] .echo-tooltip-wrapper {
    margin-bottom: 0.5rem;
  }
  .echo-tooltip[data-ui--tooltip-position-value=bottom] .echo-tooltip-wrapper {
    margin-top: 0.5rem;
  }
  .echo-tooltip[data-ui--tooltip-position-value=left] .echo-tooltip-wrapper {
    margin-right: 0.5rem;
  }
  .echo-tooltip[data-ui--tooltip-position-value=right] .echo-tooltip-wrapper {
    margin-left: 0.5rem;
  }
  .echo-nudge-dark {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 0.75rem;
    gap: 0.75rem;
    max-width: 14.6875rem;
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.2392156863);
    border-radius: 0.75rem;
    border-radius: var(--radius-12);
    position: relative;
    z-index: 100;
    background: #1a042a;
    background: var(--color-primary-lavender-900);
  }
  .echo-nudge-dark::before {
    content: "";
    position: absolute;
    top: -0.4rem;
    left: 1.5rem;
    width: 1.25rem;
    height: 1.25rem;
    z-index: 99;
    transform: rotate(135deg);
  }
  .echo-nudge-dark .echo-nudge-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  .echo-nudge-dark .echo-nudge-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .echo-nudge-dark .echo-nudge-footer .echo-skip-btn {
    cursor: pointer;
  }
  .echo-nudge-dark .echo-nudge-footer .echo-nudge-step-markers {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
  }
  .echo-nudge-dark .echo-nudge-footer .echo-nudge-step-markers .echo-nudge-step-marker {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    cursor: pointer;
  }
  .echo-nudge-dark .echo-nudge-footer .echo-nudge-action-btn {
    align-self: end;
    cursor: pointer;
    margin-left: auto;
  }
  .echo-nudge-dark::before {
    background: #1a042a;
    background: var(--color-primary-lavender-900);
  }
  .echo-nudge-dark .echo-nudge-close-btn {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-nudge-dark .echo-nudge-title {
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-nudge-dark .echo-nudge-content {
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-nudge-dark .echo-nudge-footer .echo-skip-btn {
    color: white;
    color: var(--color-neutral-0);
    opacity: 0.5;
  }
  .echo-nudge-dark .echo-nudge-footer .echo-skip-btn:hover {
    opacity: 1;
  }
  .echo-nudge-dark .echo-nudge-footer .echo-nudge-step-markers .echo-nudge-step-marker {
    background: white;
    background: var(--color-neutral-0);
    opacity: 0.3;
  }
  .echo-nudge-dark .echo-nudge-footer .echo-nudge-step-markers .echo-nudge-step-marker.active {
    opacity: 1;
  }
  .echo-nudge-dark .echo-nudge-footer .echo-nudge-action-btn {
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-nudge-light {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 0.75rem;
    gap: 0.75rem;
    max-width: 14.6875rem;
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.2392156863);
    border-radius: 0.75rem;
    border-radius: var(--radius-12);
    position: relative;
    z-index: 100;
  }
  .echo-nudge-light::before {
    content: "";
    position: absolute;
    top: -0.4rem;
    left: 1.5rem;
    width: 1.25rem;
    height: 1.25rem;
    z-index: 99;
    transform: rotate(135deg);
  }
  .echo-nudge-light .echo-nudge-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  .echo-nudge-light .echo-nudge-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .echo-nudge-light .echo-nudge-footer .echo-skip-btn {
    cursor: pointer;
  }
  .echo-nudge-light .echo-nudge-footer .echo-nudge-step-markers {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
  }
  .echo-nudge-light .echo-nudge-footer .echo-nudge-step-markers .echo-nudge-step-marker {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    cursor: pointer;
  }
  .echo-nudge-light .echo-nudge-footer .echo-nudge-action-btn {
    align-self: end;
    cursor: pointer;
    margin-left: auto;
  }
  .echo-nudge-light::before {
    background: white;
    background: var(--color-neutral-0);
  }
  .echo-nudge-light .echo-nudge-close-btn {
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
  }
  .echo-nudge-light .echo-nudge-title {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-nudge-light .echo-nudge-content {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-nudge-light .echo-nudge-footer .echo-skip-btn {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-nudge-light .echo-nudge-footer .echo-skip-btn:hover {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-nudge-light .echo-nudge-footer .echo-nudge-step-markers .echo-nudge-step-marker {
    background: #ebebf7;
    background: var(--color-neutral-200);
  }
  .echo-nudge-light .echo-nudge-footer .echo-nudge-step-markers .echo-nudge-step-marker.active {
    background: #0d0c0f;
    background: var(--color-neutral-900);
  }
  .echo-nudge-light .echo-nudge-footer .echo-nudge-action-btn {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  progress.echo-progress-bar {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    display: flex;
    width: 100%;
    height: 0.25rem;
  }
  progress.echo-progress-bar::-webkit-progress-bar {
    background-color: #ebebf7;
    background-color: var(--color-neutral-200);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  progress.echo-progress-bar::-webkit-progress-value {
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  progress.echo-progress-bar.dark::-webkit-progress-bar, .dark progress.echo-progress-bar:not(.light)::-webkit-progress-bar {
    background-color: rgba(255, 255, 255, 0.12);
  }
  progress.echo-progress-bar.dark::-webkit-progress-value, .dark progress.echo-progress-bar:not(.light)::-webkit-progress-value {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  meter.echo-meter-bar {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    display: flex;
    width: 100%;
    height: 0.25rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  meter.echo-meter-bar::-webkit-meter-bar {
    height: 0.25rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background: #ebebf7;
    background: var(--color-neutral-200);
  }
  meter.echo-meter-bar::-webkit-meter-optimum-value, meter.echo-meter-bar::-webkit-meter-suboptimum-value, meter.echo-meter-bar::-webkit-meter-even-less-good-value {
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background: #0d0c0f;
    background: var(--color-neutral-900);
  }
  meter.echo-meter-bar.dark::-webkit-meter-bar, .dark meter.echo-meter-bar:not(.light)::-webkit-meter-bar {
    background-color: rgba(255, 255, 255, 0.12);
  }
  meter.echo-meter-bar.dark::-webkit-meter-optimum-value, meter.echo-meter-bar.dark::-webkit-meter-suboptimum-value, meter.echo-meter-bar.dark::-webkit-meter-even-less-good-value, .dark meter.echo-meter-bar:not(.light)::-webkit-meter-optimum-value, .dark meter.echo-meter-bar:not(.light)::-webkit-meter-suboptimum-value, .dark meter.echo-meter-bar:not(.light)::-webkit-meter-even-less-good-value {
    background: white;
    background: var(--color-neutral-0);
  }
  meter.echo-meter-bar.storage-usage-meter::-webkit-meter-optimum-value, meter.echo-meter-bar.storage-usage-meter::-webkit-meter-suboptimum-value, meter.echo-meter-bar.storage-usage-meter::-webkit-meter-even-less-good-value {
    background: #775be6;
    background: var(--color-primary-lavender-500);
  }
  meter.echo-meter-bar.limit-reached::-webkit-meter-optimum-value, meter.echo-meter-bar.limit-reached::-webkit-meter-suboptimum-value, meter.echo-meter-bar.limit-reached::-webkit-meter-even-less-good-value {
    background: #f03c66;
    background: var(--color-semantic-error-500);
  }
  meter.echo-meter-bar.limit-reached.dark::-webkit-meter-optimum-value, meter.echo-meter-bar.limit-reached.dark::-webkit-meter-suboptimum-value, meter.echo-meter-bar.limit-reached.dark::-webkit-meter-even-less-good-value, .dark meter.echo-meter-bar.limit-reached:not(.light)::-webkit-meter-optimum-value, .dark meter.echo-meter-bar.limit-reached:not(.light)::-webkit-meter-suboptimum-value, .dark meter.echo-meter-bar.limit-reached:not(.light)::-webkit-meter-even-less-good-value {
    background: #f03c66;
    background: var(--color-semantic-error-500);
  }
  svg.echo-progress-circle {
    width: 1.25rem;
    height: 1.25rem;
    --size: 250;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 35;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
  }
  svg.echo-progress-circle circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
  }
  svg.echo-progress-circle circle.echo-progress-circle-bg {
    stroke: #f4f1ff;
    stroke: var(--color-primary-lavender-100);
  }
  svg.echo-progress-circle circle.echo-progress-circle-fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray 0.3s linear 0s;
    stroke: #775be6;
    stroke: var(--color-primary-lavender-500);
  }
  @property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }
  @container style(--progress: 0) {
    circle.echo-progress-circle-fg {
      display: none;
    }
  }
  .echo-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #f4f1ff;
    border: 2px solid var(--color-primary-lavender-100);
    border-top-color: #775be6;
    border-top-color: var(--color-primary-lavender-500);
    border-radius: 50%;
    animation: echo-spin 0.75s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .echo-spinner {
      animation-duration: 2.5s;
    }
  }
  .echo-spinner-sm {
    width: 1rem;
    height: 1rem;
  }
  .echo-spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
  }
  label.echo-progress-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    flex-grow: 1;
  }
  label.echo-progress-label span.echo-progress-label-text {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  label.echo-progress-label span.echo-progress-label-text span.echo-progress-label-title {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  label.echo-progress-label span.echo-progress-label-text span.echo-progress-label-values {
    margin-left: auto;
  }
  label.echo-progress-label span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-current {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  label.echo-progress-label span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-slash {
    color: #0d0c0f;
    color: var(--color-neutral-900);
    margin: 0 0.25rem;
  }
  label.echo-progress-label span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-max {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  label.echo-progress-label:has(progress.complete, meter.complete) span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-current {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  label.echo-progress-label.dark span.echo-progress-label-text span.echo-progress-label-title, .dark label.echo-progress-label:not(.light) span.echo-progress-label-text span.echo-progress-label-title {
    color: white;
    color: var(--color-neutral-0);
  }
  label.echo-progress-label.dark span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-current, .dark label.echo-progress-label:not(.light) span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-current {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  label.echo-progress-label.dark span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-slash, .dark label.echo-progress-label:not(.light) span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-slash {
    color: white;
    color: var(--color-neutral-0);
  }
  label.echo-progress-label.dark span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-max, .dark label.echo-progress-label:not(.light) span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-max {
    color: white;
    color: var(--color-neutral-0);
  }
  label.echo-progress-label.dark:has(progress.complete, meter.complete) span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-current, .dark label.echo-progress-label:not(.light):has(progress.complete, meter.complete) span.echo-progress-label-text span.echo-progress-label-values span.echo-progress-label-current {
    color: white;
    color: var(--color-neutral-0);
  }
  .storage-usage-card .echo-progress-label .echo-progress-label-text .echo-progress-label-title {
    font-weight: 700;
  }
  .echo-tabs-primary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
  }
  .echo-tabs-primary .echo-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .echo-tabs-primary .echo-tab {
    color: #a5a5b0;
    color: var(--color-neutral-400);
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .echo-tabs-primary .echo-tab:hover, .echo-tabs-primary .echo-tab.active {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  @media (max-width: 700px) {
    .echo-tabs-primary {
      gap: 0;
      width: 100%;
      padding: 0;
      background: #f9f9fe;
      background: var(--color-neutral-100);
      border-radius: 6.1875rem;
      border-radius: var(--radius-99);
    }
    .echo-tabs-primary .echo-tab {
      flex: 1 1;
      min-width: 0;
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 500;
      letter-spacing: 0.00625rem;
      padding: 0.5rem 0.75rem;
      border-radius: 6.1875rem;
      border-radius: var(--radius-99);
      color: #747483;
      color: var(--color-neutral-500);
      text-align: center;
    }
    .echo-tabs-primary .echo-tab:hover:not(.active) {
      color: #0d0c0f;
      color: var(--color-neutral-900);
    }
    .echo-tabs-primary .echo-tab.active {
      color: white;
      color: var(--color-neutral-0);
      background: #0d0c0f;
      background: var(--color-neutral-900);
      box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(127, 127, 127, 0.2392156863);
    }
  }
  .echo-tabs-secondary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .echo-tabs-secondary .echo-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .echo-tabs-secondary .echo-tab {
    color: #747483;
    color: var(--color-neutral-500);
    width: 11.1875rem;
    padding: 0.375rem;
    background: #f9f9fe;
    background: var(--color-neutral-100);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    text-align: center;
  }
  .echo-tabs-secondary .echo-tab:hover:not(.active) {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-tabs-secondary .echo-tab.active {
    color: white;
    color: var(--color-neutral-0);
    background: #0d0c0f;
    background: var(--color-neutral-900);
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(127, 127, 127, 0.2392156863);
  }
  .echo-tabs-tertiary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    border-bottom: 0.5px solid #a5a5b0;
    border-bottom: 0.5px solid var(--color-neutral-400);
  }
  .echo-tabs-tertiary .echo-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .echo-tabs-tertiary .echo-tab {
    color: #a5a5b0;
    color: var(--color-neutral-400);
    position: relative;
    padding-bottom: 0.5rem;
  }
  .echo-tabs-tertiary .echo-tab:hover:not(.active) {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-tabs-tertiary .echo-tab.active {
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  .echo-tabs-tertiary .echo-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.125rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background: #775be6;
    background: var(--color-primary-lavender-500);
  }
  .echo-tabs-number {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
  }
  .echo-tabs-number .echo-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .echo-tabs-number .echo-tab {
    cursor: pointer;
    background: white;
    background: var(--color-neutral-0);
    border: 1px solid #ebebf7;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.75rem;
    border-radius: var(--radius-12);
    padding: 1.25rem;
    gap: 0.75rem;
    width: 11.625rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
  }
  .echo-tabs-number .echo-tab .echo-tab-title {
    color: color-mix(in srgb, #0d0c0f 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, #0d0c0f 50%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
    }
}
  }
  .echo-tabs-number .echo-tab .echo-tab-content {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-tabs-number .echo-tab:hover:not(.active) {
    color: #0d0c0f;
    color: var(--color-neutral-900);
    background: #f9f9fe;
    background: var(--color-neutral-100);
    border: 1px solid #f9f9fe;
    border: 1px solid var(--color-neutral-100);
  }
  .echo-tabs-number .echo-tab.active {
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    border: 1px solid #1a042a;
    border: 1px solid var(--color-primary-lavender-900);
  }
  .echo-tabs-number .echo-tab.active .echo-tab-title {
    color: color-mix(in srgb, #ffffff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, white 50%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-neutral-0) 50%, transparent);
    }
}
  }
  .echo-tabs-number .echo-tab.active .echo-tab-content {
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-tabs-custom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .echo-tabs-custom .echo-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .echo-tabs-custom .echo-tab {
    border-radius: 0.75rem;
    border-radius: var(--radius-12);
    background: #0d0c0f;
    background: var(--color-neutral-900);
    padding: 1.25rem;
    gap: 0.75rem;
  }
  .echo-breadcrumbs .echo-breadcrumbs-desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .echo-breadcrumbs .echo-breadcrumbs-mobile {
    display: none;
  }
  .echo-breadcrumbs .echo-breadcrumb {
    color: #a5a5b0;
    color: var(--color-neutral-400);
    text-decoration: none;
    position: relative;
  }
  .echo-breadcrumbs .echo-breadcrumb:last-child, .echo-breadcrumbs .echo-breadcrumb:hover {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-breadcrumbs .echo-breadcrumb:not(:first-child) {
    margin-left: 1.5rem;
  }
  .echo-breadcrumbs .echo-breadcrumb:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
    width: 1rem;
    height: 1rem;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M9.19104 7.55147C9.51565 7.10465 10.141 7.00559 10.5878 7.3302C12.1206 8.44378 13.4945 9.74986 14.6733 11.2143C15.109 11.7557 15.109 12.5228 14.6733 13.0641C13.4945 14.5286 12.1206 15.8347 10.5878 16.9483C10.141 17.2729 9.51565 17.1738 9.19104 16.727C8.86643 16.2802 8.96549 15.6548 9.41231 15.3302C10.6871 14.4041 11.8393 13.3323 12.8442 12.1392C11.8393 10.9462 10.6871 9.8744 9.41231 8.94826C8.96549 8.62365 8.86643 7.99828 9.19104 7.55147Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M9.19104 7.55147C9.51565 7.10465 10.141 7.00559 10.5878 7.3302C12.1206 8.44378 13.4945 9.74986 14.6733 11.2143C15.109 11.7557 15.109 12.5228 14.6733 13.0641C13.4945 14.5286 12.1206 15.8347 10.5878 16.9483C10.141 17.2729 9.51565 17.1738 9.19104 16.727C8.86643 16.2802 8.96549 15.6548 9.41231 15.3302C10.6871 14.4041 11.8393 13.3323 12.8442 12.1392C11.8393 10.9462 10.6871 9.8744 9.41231 8.94826C8.96549 8.62365 8.86643 7.99828 9.19104 7.55147Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    pointer-events: none;
  }
  .echo-breadcrumbs.dark .echo-breadcrumb:last-child, .echo-breadcrumbs.dark .echo-breadcrumb:hover, .dark .echo-breadcrumbs:not(.light) .echo-breadcrumb:last-child, .dark .echo-breadcrumbs:not(.light) .echo-breadcrumb:hover {
    color: white;
    color: var(--color-neutral-0);
  }
  @media (max-width: 700px) {
    .echo-breadcrumbs .echo-breadcrumbs-desktop {
      display: none;
    }
    .echo-breadcrumbs .echo-breadcrumbs-mobile {
      display: flex;
    }
    .echo-breadcrumbs .echo-breadcrumbs-mobile .echo-breadcrumb {
      margin-left: 1.5rem;
    }
    .echo-breadcrumbs .echo-breadcrumbs-mobile .echo-breadcrumb::before {
      content: "";
      position: absolute;
      left: -1.5rem;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      background-color: #0d0c0f;
      background-color: var(--color-neutral-900);
      width: 1rem;
      height: 1rem;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-position: center;
              mask-position: center;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M14.9343 7.55147C15.2589 7.99828 15.1598 8.62365 14.713 8.94826C13.4382 9.8744 12.2861 10.9462 11.2811 12.1392C12.2861 13.3323 13.4382 14.4041 14.713 15.3302C15.1598 15.6548 15.2589 16.2802 14.9343 16.727C14.6097 17.1738 13.9843 17.2729 13.5375 16.9483C12.0047 15.8347 10.6308 14.5286 9.45205 13.0641C9.01631 12.5228 9.01631 11.7557 9.45205 11.2143L10.231 11.8414L9.45205 11.2143C10.6308 9.74986 12.0047 8.44378 13.5375 7.3302C13.9843 7.00559 14.6097 7.10465 14.9343 7.55147Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
              mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M14.9343 7.55147C15.2589 7.99828 15.1598 8.62365 14.713 8.94826C13.4382 9.8744 12.2861 10.9462 11.2811 12.1392C12.2861 13.3323 13.4382 14.4041 14.713 15.3302C15.1598 15.6548 15.2589 16.2802 14.9343 16.727C14.6097 17.1738 13.9843 17.2729 13.5375 16.9483C12.0047 15.8347 10.6308 14.5286 9.45205 13.0641C9.01631 12.5228 9.01631 11.7557 9.45205 11.2143L10.231 11.8414L9.45205 11.2143C10.6308 9.74986 12.0047 8.44378 13.5375 7.3302C13.9843 7.00559 14.6097 7.10465 14.9343 7.55147Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
      pointer-events: initial;
    }
    .echo-breadcrumbs.dark .echo-breadcrumbs-mobile .echo-breadcrumb::before, .dark .echo-breadcrumbs:not(.light) .echo-breadcrumbs-mobile .echo-breadcrumb::before {
      background-color: white;
      background-color: var(--color-neutral-0);
    }
  }
  .echo-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .echo-pagination .echo-pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
  }
  .echo-pagination .echo-pagination-link svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-pagination .echo-pagination-link svg, .echo-pagination .echo-pagination-link svg path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-pagination .echo-pagination-link:hover:not([disabled]) svg, .echo-pagination .echo-pagination-link:hover:not([disabled]) svg path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-pagination .echo-pagination-link[disabled] {
    cursor: not-allowed;
    opacity: 0.3;
  }
  .echo-pagination .echo-pagination-link[disabled] svg, .echo-pagination .echo-pagination-link[disabled] svg path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
  }
  .echo-pagination .echo-pagination-info {
    color: #0d0c0f;
    color: var(--color-neutral-900);
    margin: 0 0.5rem;
  }
  .echo-pagination.dark .echo-pagination-link svg, .echo-pagination.dark .echo-pagination-link svg path, .dark .echo-pagination:not(.light) .echo-pagination-link svg, .dark .echo-pagination:not(.light) .echo-pagination-link svg path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-pagination.dark .echo-pagination-link:hover:not([disabled]) svg, .echo-pagination.dark .echo-pagination-link:hover:not([disabled]) svg path, .dark .echo-pagination:not(.light) .echo-pagination-link:hover:not([disabled]) svg, .dark .echo-pagination:not(.light) .echo-pagination-link:hover:not([disabled]) svg path {
    fill: #927ceb;
    fill: var(--color-primary-lavender-400);
  }
  .echo-pagination.dark .echo-pagination-link[disabled] svg, .echo-pagination.dark .echo-pagination-link[disabled] svg path, .dark .echo-pagination:not(.light) .echo-pagination-link[disabled] svg, .dark .echo-pagination:not(.light) .echo-pagination-link[disabled] svg path {
    fill: #747483;
    fill: var(--color-neutral-500);
  }
  .echo-pagination.dark .echo-pagination-info, .dark .echo-pagination:not(.light) .echo-pagination-info {
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-input-text-md, .echo-input-search-md, .echo-input-password-md {
    display: flex;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    align-items: center;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    line-height: 1;
    height: 2.5rem;
    padding: 0.75rem 1rem;
  }
  .echo-input-text-md::-moz-placeholder, .echo-input-search-md::-moz-placeholder, .echo-input-password-md::-moz-placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-md::placeholder, .echo-input-search-md::placeholder, .echo-input-password-md::placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-md:hover:not(:disabled, :focus, :-moz-read-only), .echo-input-search-md:hover:not(:disabled, :focus, :-moz-read-only), .echo-input-password-md:hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-text-md:hover:not(:disabled, :focus, :read-only), .echo-input-search-md:hover:not(:disabled, :focus, :read-only), .echo-input-password-md:hover:not(:disabled, :focus, :read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-text-md:focus, .echo-input-search-md:focus, .echo-input-password-md:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline-style: solid;
    outline-color: #e0d8ff;
    outline-color: var(--color-primary-lavender-200);
  }
  .echo-input-text-md:disabled, .echo-input-search-md:disabled, .echo-input-password-md:disabled {
    background: none;
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-md:-moz-read-only:not(:disabled), .echo-input-search-md:-moz-read-only:not(:disabled), .echo-input-password-md:-moz-read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-md:read-only:not(:disabled), .echo-input-search-md:read-only:not(:disabled), .echo-input-password-md:read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-md:has(+ .echo-error-lg, + .echo-error-md), .echo-input-search-md:has(+ .echo-error-lg, + .echo-error-md), .echo-input-password-md:has(+ .echo-error-lg, + .echo-error-md) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-text-md:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only), .echo-input-search-md:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only), .echo-input-password-md:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-text-md:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only), .echo-input-search-md:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only), .echo-input-password-md:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-text-md:has(+ .echo-error-lg, + .echo-error-md):focus, .echo-input-search-md:has(+ .echo-error-lg, + .echo-error-md):focus, .echo-input-password-md:has(+ .echo-error-lg, + .echo-error-md):focus {
    outline-color: #ffd9e4;
    outline-color: var(--color-semantic-error-200);
  }
  .echo-input-text-md:focus, .echo-input-search-md:focus, .echo-input-password-md:focus {
    outline-width: 3px;
  }
  .echo-input-text-lg, .echo-input-search-lg, .echo-input-password-lg {
    display: flex;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    align-items: center;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    line-height: 1;
    height: 3rem;
    padding: 0.75rem 1.25rem;
  }
  .echo-input-text-lg::-moz-placeholder, .echo-input-search-lg::-moz-placeholder, .echo-input-password-lg::-moz-placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-lg::placeholder, .echo-input-search-lg::placeholder, .echo-input-password-lg::placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-lg:hover:not(:disabled, :focus, :-moz-read-only), .echo-input-search-lg:hover:not(:disabled, :focus, :-moz-read-only), .echo-input-password-lg:hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-text-lg:hover:not(:disabled, :focus, :read-only), .echo-input-search-lg:hover:not(:disabled, :focus, :read-only), .echo-input-password-lg:hover:not(:disabled, :focus, :read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-text-lg:focus, .echo-input-search-lg:focus, .echo-input-password-lg:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline-style: solid;
    outline-color: #e0d8ff;
    outline-color: var(--color-primary-lavender-200);
  }
  .echo-input-text-lg:disabled, .echo-input-search-lg:disabled, .echo-input-password-lg:disabled {
    background: none;
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-lg:-moz-read-only:not(:disabled), .echo-input-search-lg:-moz-read-only:not(:disabled), .echo-input-password-lg:-moz-read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-lg:read-only:not(:disabled), .echo-input-search-lg:read-only:not(:disabled), .echo-input-password-lg:read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-text-lg:has(+ .echo-error-lg, + .echo-error-md), .echo-input-search-lg:has(+ .echo-error-lg, + .echo-error-md), .echo-input-password-lg:has(+ .echo-error-lg, + .echo-error-md) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-text-lg:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only), .echo-input-search-lg:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only), .echo-input-password-lg:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-text-lg:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only), .echo-input-search-lg:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only), .echo-input-password-lg:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-text-lg:has(+ .echo-error-lg, + .echo-error-md):focus, .echo-input-search-lg:has(+ .echo-error-lg, + .echo-error-md):focus, .echo-input-password-lg:has(+ .echo-error-lg, + .echo-error-md):focus {
    outline-color: #ffd9e4;
    outline-color: var(--color-semantic-error-200);
  }
  .echo-input-text-lg:focus, .echo-input-search-lg:focus, .echo-input-password-lg:focus {
    outline-width: 4px;
  }
  .echo-input-suffix-group {
    display: flex;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    align-items: center;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    line-height: 1;
    width: 100%;
    height: 3rem;
    padding: 0.75rem 1.25rem;
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-input-suffix-group::-moz-placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-suffix-group::placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-suffix-group:hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-suffix-group:hover:not(:disabled, :focus, :read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-suffix-group:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline-style: solid;
    outline-color: #e0d8ff;
    outline-color: var(--color-primary-lavender-200);
  }
  .echo-input-suffix-group:disabled {
    background: none;
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-suffix-group:-moz-read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-suffix-group:read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-suffix-group:has(+ .echo-error-lg, + .echo-error-md) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-suffix-group:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-suffix-group:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-suffix-group:has(+ .echo-error-lg, + .echo-error-md):focus {
    outline-color: #ffd9e4;
    outline-color: var(--color-semantic-error-200);
  }
  .echo-input-suffix-group:-moz-read-only:not(:disabled) {
    background-color: white;
    background-color: var(--color-neutral-0);
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-input-suffix-group:read-only:not(:disabled) {
    background-color: white;
    background-color: var(--color-neutral-0);
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-input-suffix-group:focus-within {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline-style: solid;
    outline-color: #e0d8ff;
    outline-color: var(--color-primary-lavender-200);
    outline-width: 4px;
  }
  .echo-input-suffix-group .echo-input-suffix-field {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    padding: 0;
    font: inherit;
  }
  .echo-input-suffix-group .echo-input-suffix-field::-moz-placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-suffix-group .echo-input-suffix-field::placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-suffix-group .echo-input-suffix {
    flex: 0 0 auto;
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid #ebebf7;
    border-left: 1px solid var(--color-neutral-200);
    color: #747483;
    color: var(--color-neutral-500);
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .echo-input-suffix-group .echo-input-prefix {
    flex: 0 0 auto;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
    border-right: 1px solid #ebebf7;
    border-right: 1px solid var(--color-neutral-200);
    color: #747483;
    color: var(--color-neutral-500);
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .echo-form-group:has(.echo-input-suffix-group) {
    gap: 0.75rem;
  }
  .echo-input-password-wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  .echo-input-password-wrapper [class*=echo-input-password] {
    flex: 1 1;
  }
  .echo-input-password-wrapper .echo-input-password-lg:disabled + .echo-input-password-show-btn, .echo-input-password-wrapper .echo-input-password-md:disabled + .echo-input-password-show-btn {
    pointer-events: none;
  }
  .echo-input-password-wrapper .echo-input-password-show-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.25rem;
    width: 1rem;
    height: 1rem;
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22.7071 1.29289C23.0976 1.68342 23.0976 2.31658 22.7071 2.70711L2.70711 22.7071C2.31658 23.0976 1.68342 23.0976 1.29289 22.7071C0.902369 22.3166 0.902369 21.6834 1.29289 21.2929L8.0374 14.5484C8.01272 14.3688 8 14.1857 8 14C8 11.7908 9.79082 10 12 10C12.1857 10 12.3688 10.0127 12.5484 10.0374L14.323 8.26279C13.6249 8.09577 12.8522 8 12 8C9.12791 8 7.13059 9.08847 5.84798 10.3834C4.52442 11.7197 4 13.2293 4 14C4 14.5523 3.55228 15 3 15C2.44772 15 2 14.5523 2 14C2 12.5832 2.82558 10.5928 4.42702 8.97597C6.06941 7.31778 8.57209 6 12 6C13.4738 6 14.7819 6.24371 15.9276 6.65821L21.2929 1.29289C21.6834 0.902369 22.3166 0.902369 22.7071 1.29289ZM18.7558 9.49281C19.1823 9.14189 19.8125 9.20312 20.1634 9.62959C21.366 11.091 22 12.7577 22 14C22 14.5523 21.5523 15 21 15C20.4477 15 20 14.5523 20 14C20 13.3381 19.611 12.1058 18.6191 10.9004C18.2681 10.4739 18.3294 9.84373 18.7558 9.49281ZM15.1548 13.7827C15.6896 13.9205 16.0114 14.4658 15.8735 15.0006C15.5111 16.4065 14.4065 17.5112 13.0006 17.8736C12.4658 18.0114 11.9205 17.6896 11.7826 17.1548C11.6448 16.62 11.9666 16.0747 12.5014 15.9369C13.2022 15.7562 13.7562 15.2022 13.9369 14.5014C14.0747 13.9666 14.62 13.6448 15.1548 13.7827Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22.7071 1.29289C23.0976 1.68342 23.0976 2.31658 22.7071 2.70711L2.70711 22.7071C2.31658 23.0976 1.68342 23.0976 1.29289 22.7071C0.902369 22.3166 0.902369 21.6834 1.29289 21.2929L8.0374 14.5484C8.01272 14.3688 8 14.1857 8 14C8 11.7908 9.79082 10 12 10C12.1857 10 12.3688 10.0127 12.5484 10.0374L14.323 8.26279C13.6249 8.09577 12.8522 8 12 8C9.12791 8 7.13059 9.08847 5.84798 10.3834C4.52442 11.7197 4 13.2293 4 14C4 14.5523 3.55228 15 3 15C2.44772 15 2 14.5523 2 14C2 12.5832 2.82558 10.5928 4.42702 8.97597C6.06941 7.31778 8.57209 6 12 6C13.4738 6 14.7819 6.24371 15.9276 6.65821L21.2929 1.29289C21.6834 0.902369 22.3166 0.902369 22.7071 1.29289ZM18.7558 9.49281C19.1823 9.14189 19.8125 9.20312 20.1634 9.62959C21.366 11.091 22 12.7577 22 14C22 14.5523 21.5523 15 21 15C20.4477 15 20 14.5523 20 14C20 13.3381 19.611 12.1058 18.6191 10.9004C18.2681 10.4739 18.3294 9.84373 18.7558 9.49281ZM15.1548 13.7827C15.6896 13.9205 16.0114 14.4658 15.8735 15.0006C15.5111 16.4065 14.4065 17.5112 13.0006 17.8736C12.4658 18.0114 11.9205 17.6896 11.7826 17.1548C11.6448 16.62 11.9666 16.0747 12.5014 15.9369C13.2022 15.7562 13.7562 15.2022 13.9369 14.5014C14.0747 13.9666 14.62 13.6448 15.1548 13.7827Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  .echo-input-password-wrapper .echo-input-password-show-btn.shown {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M5.84798 10.3834C4.52442 11.7197 4 13.2293 4 14C4 14.5523 3.55228 15 3 15C2.44772 15 2 14.5523 2 14C2 12.5832 2.82558 10.5928 4.42702 8.97597C6.06941 7.31778 8.57209 6 12 6C15.4279 6 17.9306 7.31778 19.573 8.97597C21.1744 10.5928 22 12.5832 22 14C22 14.5523 21.5523 15 21 15C20.4477 15 20 14.5523 20 14C20 13.2293 19.4756 11.7197 18.152 10.3834C16.8694 9.08847 14.8721 8 12 8C9.12791 8 7.13059 9.08847 5.84798 10.3834ZM12 12C10.8954 12 10 12.8954 10 14C10 15.1046 10.8954 16 12 16C13.1046 16 14 15.1046 14 14C14 12.8954 13.1046 12 12 12ZM8 14C8 11.7909 9.79086 10 12 10C14.2091 10 16 11.7909 16 14C16 16.2091 14.2091 18 12 18C9.79086 18 8 16.2091 8 14Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M5.84798 10.3834C4.52442 11.7197 4 13.2293 4 14C4 14.5523 3.55228 15 3 15C2.44772 15 2 14.5523 2 14C2 12.5832 2.82558 10.5928 4.42702 8.97597C6.06941 7.31778 8.57209 6 12 6C15.4279 6 17.9306 7.31778 19.573 8.97597C21.1744 10.5928 22 12.5832 22 14C22 14.5523 21.5523 15 21 15C20.4477 15 20 14.5523 20 14C20 13.2293 19.4756 11.7197 18.152 10.3834C16.8694 9.08847 14.8721 8 12 8C9.12791 8 7.13059 9.08847 5.84798 10.3834ZM12 12C10.8954 12 10 12.8954 10 14C10 15.1046 10.8954 16 12 16C13.1046 16 14 15.1046 14 14C14 12.8954 13.1046 12 12 12ZM8 14C8 11.7909 9.79086 10 12 10C14.2091 10 16 11.7909 16 14C16 16.2091 14.2091 18 12 18C9.79086 18 8 16.2091 8 14Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  .echo-input-password-wrapper:has(.echo-input-password-md) .echo-input-password-md {
    padding-right: 2.5rem;
  }
  .echo-input-password-wrapper:has(.echo-input-password-md):not(:has(.echo-input-password-md:disabled)):hover .echo-input-password-show-btn {
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
  }
  .echo-input-password-wrapper:has(.echo-input-password-lg) .echo-input-password-lg {
    padding-right: 2.5rem;
  }
  .echo-input-password-wrapper:has(.echo-input-password-lg):not(:has(.echo-input-password-lg:disabled)):hover .echo-input-password-show-btn {
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
  }
  .echo-input-password-wrapper:has(+ .echo-error-lg, + .echo-error-md) .echo-input-password-md, .echo-input-password-wrapper:has(+ .echo-error-lg, + .echo-error-md) .echo-input-password-lg {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-password-wrapper:has(+ .echo-error-lg, + .echo-error-md) .echo-input-password-md:hover:not(:disabled, :focus, :-moz-read-only), .echo-input-password-wrapper:has(+ .echo-error-lg, + .echo-error-md) .echo-input-password-lg:hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-password-wrapper:has(+ .echo-error-lg, + .echo-error-md) .echo-input-password-md:hover:not(:disabled, :focus, :read-only), .echo-input-password-wrapper:has(+ .echo-error-lg, + .echo-error-md) .echo-input-password-lg:hover:not(:disabled, :focus, :read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-password-wrapper:has(+ .echo-error-lg, + .echo-error-md) .echo-input-password-md:focus, .echo-input-password-wrapper:has(+ .echo-error-lg, + .echo-error-md) .echo-input-password-lg:focus {
    outline-color: #ffd9e4;
    outline-color: var(--color-semantic-error-200);
  }
  .echo-input-search-wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  .echo-input-search-wrapper:has(.echo-input-search-lg:disabled, .echo-input-search-md:disabled) [class*=echo-dropdown-filter-btn] {
    pointer-events: none;
  }
  .echo-input-search-wrapper:not(:has([class*=echo-dropdown-filter-btn]))::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M11.5 4C7.35786 4 4 7.35786 4 11.5C4 15.6421 7.35786 19 11.5 19C13.5713 19 15.445 18.1616 16.8033 16.8033C18.1616 15.445 19 13.5713 19 11.5C19 7.35786 15.6421 4 11.5 4ZM2 11.5C2 6.25329 6.25329 2 11.5 2C16.7467 2 21 6.25329 21 11.5C21 13.7627 20.2079 15.8419 18.8875 17.4733L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.4733 18.8875C15.8419 20.2079 13.7627 21 11.5 21C6.25329 21 2 16.7467 2 11.5Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M11.5 4C7.35786 4 4 7.35786 4 11.5C4 15.6421 7.35786 19 11.5 19C13.5713 19 15.445 18.1616 16.8033 16.8033C18.1616 15.445 19 13.5713 19 11.5C19 7.35786 15.6421 4 11.5 4ZM2 11.5C2 6.25329 6.25329 2 11.5 2C16.7467 2 21 6.25329 21 11.5C21 13.7627 20.2079 15.8419 18.8875 17.4733L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.4733 18.8875C15.8419 20.2079 13.7627 21 11.5 21C6.25329 21 2 16.7467 2 11.5Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  .echo-input-search-wrapper:has(.echo-input-search-md):not(:has([class*=echo-dropdown-filter-btn]))::before {
    height: 1.25rem;
    width: 1.25rem;
  }
  .echo-input-search-wrapper:has(.echo-input-search-md):not(:has([class*=echo-dropdown-filter-btn])) .echo-input-search-md {
    padding-left: 3.25rem;
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) > [class*=echo-dropdown-filter-btn] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.25rem;
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) > .echo-dropdown {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.25rem;
    display: flex;
    align-items: center;
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn] {
    padding: 0.375rem 0.75rem;
    gap: 0.5rem;
    height: 2rem;
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    border: 1px solid #1a042a;
    border: 1px solid var(--color-primary-lavender-900);
    cursor: pointer;
    color: white;
    color: var(--color-neutral-0);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn] svg, .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn] svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn]::after {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn]:hover {
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn]:focus {
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
    outline-style: none;
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn]:focus::after {
    transform: scaleY(-1);
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn]:disabled {
    cursor: not-allowed;
    color: white;
    color: var(--color-neutral-0);
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
    opacity: 0.3;
  }
  .echo-input-search-wrapper:has(.echo-input-search-md) [class*=echo-dropdown-filter-btn]:disabled::after {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-input-search-wrapper:has(.echo-input-search-lg):not(:has([class*=echo-dropdown-filter-btn]))::before {
    height: 1.5rem;
    width: 1.5rem;
  }
  .echo-input-search-wrapper:has(.echo-input-search-lg):not(:has([class*=echo-dropdown-filter-btn])) .echo-input-search-lg {
    padding-left: 3.5rem;
  }
  .echo-input-search-md::-webkit-search-cancel-button, .echo-input-search-lg::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }
  .echo-input-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    width: 100%;
    height: 0.1875rem;
    overflow: hidden;
    background-color: #a5a5b0;
    background-color: var(--color-neutral-400);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    cursor: pointer;
    transition: height 150ms ease-in-out;
  }
  .echo-input-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
            appearance: none;
    color: white;
    color: var(--color-neutral-0);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    margin-top: -1px;
    height: 0.1875rem;
    -webkit-transition: height 150ms ease-in-out;
    transition: height 150ms ease-in-out;
  }
  .echo-input-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 1px;
    height: 0.1875rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background-color: white;
    background-color: var(--color-neutral-0);
    box-shadow: -200px 0 0 200px white;
    box-shadow: -200px 0 0 200px var(--color-neutral-0);
    -webkit-transition: height 150ms ease-in-out;
    transition: height 150ms ease-in-out;
  }
  .echo-input-slider:hover {
    height: 0.75rem;
  }
  .echo-input-slider:hover::-webkit-slider-runnable-track {
    height: 0.75rem;
  }
  .echo-input-slider:hover::-webkit-slider-thumb {
    height: 0.75rem;
  }
  .echo-input-combobox-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  .echo-input-combobox-wrapper .echo-input-combobox-button-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .echo-input-combobox-wrapper .echo-input-combobox-chevron {
    position: absolute;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease-in-out, color 150ms ease-in-out;
    pointer-events: none;
  }
  .echo-input-combobox-wrapper .echo-input-combobox-chevron svg {
    width: 100%;
    height: 100%;
  }
  .echo-input-combobox-wrapper .echo-input-combobox-chevron svg, .echo-input-combobox-wrapper .echo-input-combobox-chevron svg > path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
  }
  .echo-input-combobox-wrapper .echo-dropdown[data-ui--dropdown-open-value=true] .echo-input-combobox-button-wrapper .echo-input-combobox-chevron {
    transform: scaleY(-1);
  }
  .echo-input-combobox-wrapper .echo-dropdown[data-ui--dropdown-open-value=true] .echo-input-combobox-button-wrapper .echo-input-combobox-chevron svg, .echo-input-combobox-wrapper .echo-dropdown[data-ui--dropdown-open-value=true] .echo-input-combobox-button-wrapper .echo-input-combobox-chevron svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-input-combobox-wrapper:hover:not(:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled)) .echo-input-combobox-chevron svg, .echo-input-combobox-wrapper:hover:not(:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled)) .echo-input-combobox-chevron svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-input-combobox-rich {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 3rem 1rem 1rem;
    background: white;
    background: var(--color-neutral-0);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    border-radius: 1rem;
    border-radius: var(--radius-16);
    color: #0d0c0f;
    color: var(--color-neutral-900);
    cursor: pointer;
  }
  .echo-input-combobox-rich:hover {
    border-color: #747483;
    border-color: var(--color-neutral-500);
  }
  .echo-input-combobox-rich:focus-within {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline: 4px solid #e0d8ff;
    outline: 4px solid var(--color-primary-lavender-200);
  }
  .echo-input-combobox-rich .echo-input-combobox-md, .echo-input-combobox-rich .echo-input-combobox-lg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .echo-input-combobox-rich .echo-input-combobox-chevron {
    width: 1.5rem;
    height: 1.5rem;
  }
  .echo-input-combobox-rich .echo-input-combobox-chevron svg, .echo-input-combobox-rich .echo-input-combobox-chevron svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled) {
    cursor: not-allowed;
  }
  .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled):hover {
    border-color: #a5a5b0;
    border-color: var(--color-neutral-400);
  }
  .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled) .echo-input-combobox-md, .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled) .echo-input-combobox-lg {
    cursor: not-allowed;
  }
  .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled) .echo-combobox-rich-symbol {
    background: #a5a5b0;
    background: var(--color-neutral-400);
  }
  .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled) .echo-combobox-rich-code, .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled) .echo-combobox-rich-display .echo-combobox-rich-name {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled) .echo-input-combobox-chevron svg, .echo-input-combobox-rich:has(.echo-input-combobox-md:disabled, .echo-input-combobox-lg:disabled) .echo-input-combobox-chevron svg > path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
  }
  .echo-combobox-rich-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    pointer-events: none;
  }
  .echo-combobox-rich-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #775be6;
    background: var(--color-primary-lavender-500);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    color: white;
    color: var(--color-neutral-0);
    flex: none;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 600;
  }
  .echo-combobox-rich-symbol svg, .echo-combobox-rich-symbol svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-combobox-rich-symbol-compact {
    font-size: 1.125rem;
  }
  .echo-combobox-rich-text {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .echo-combobox-rich-code {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-combobox-rich-name {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-combobox-rich-display .echo-combobox-rich-name {
    color: #0d0c0f;
    color: var(--color-neutral-900);
    opacity: 0.5;
  }
  .echo-combobox-rich-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .echo-combobox-rich-row .echo-combobox-rich-symbol {
    width: 2rem;
    height: 2rem;
    font-size: 1.125rem;
  }
  .echo-combobox-rich-row .echo-combobox-rich-symbol-compact {
    font-size: 0.8125rem;
  }
  .echo-menu-item:focus:not(:disabled) .echo-combobox-rich-symbol, .echo-menu-item[data-active] .echo-combobox-rich-symbol {
    background: white;
    background: var(--color-neutral-0);
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  .echo-menu-item:focus:not(:disabled) .echo-combobox-rich-code, .echo-menu-item:focus:not(:disabled) .echo-combobox-rich-name, .echo-menu-item[data-active] .echo-combobox-rich-code, .echo-menu-item[data-active] .echo-combobox-rich-name {
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-input-combobox-md {
    display: flex;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    align-items: center;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    line-height: 1;
    height: 2.5rem;
    padding: 0.75rem 1rem;
    padding-right: 2.75rem;
    width: 100%;
    cursor: pointer;
  }
  .echo-input-combobox-md::-moz-placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-md::placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-md:hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-combobox-md:hover:not(:disabled, :focus, :read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-combobox-md:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline-style: solid;
    outline-color: #e0d8ff;
    outline-color: var(--color-primary-lavender-200);
  }
  .echo-input-combobox-md:disabled {
    background: none;
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-md:-moz-read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-md:read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-md:has(+ .echo-error-lg, + .echo-error-md) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-combobox-md:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-combobox-md:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-combobox-md:has(+ .echo-error-lg, + .echo-error-md):focus {
    outline-color: #ffd9e4;
    outline-color: var(--color-semantic-error-200);
  }
  .echo-input-combobox-md:focus {
    outline-width: 3px;
  }
  .echo-input-combobox-md:-moz-read-only:not(:disabled) {
    cursor: pointer;
    background: white;
    background: var(--color-neutral-0);
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-input-combobox-md:read-only:not(:disabled) {
    cursor: pointer;
    background: white;
    background: var(--color-neutral-0);
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-input-combobox-lg {
    display: flex;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    align-items: center;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    line-height: 1;
    height: 3rem;
    padding: 0.75rem 1.25rem;
    padding-right: 3rem;
    width: 100%;
    cursor: pointer;
  }
  .echo-input-combobox-lg::-moz-placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-lg::placeholder {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-lg:hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-combobox-lg:hover:not(:disabled, :focus, :read-only) {
    border-color: #1a042a;
    border-color: var(--color-primary-lavender-900);
  }
  .echo-input-combobox-lg:focus {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline-style: solid;
    outline-color: #e0d8ff;
    outline-color: var(--color-primary-lavender-200);
  }
  .echo-input-combobox-lg:disabled {
    background: none;
    cursor: not-allowed;
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-lg:-moz-read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-lg:read-only:not(:disabled) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-input-combobox-lg:has(+ .echo-error-lg, + .echo-error-md) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-combobox-lg:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :-moz-read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-combobox-lg:has(+ .echo-error-lg, + .echo-error-md):hover:not(:disabled, :focus, :read-only) {
    border-color: #f03c66;
    border-color: var(--color-semantic-error-500);
  }
  .echo-input-combobox-lg:has(+ .echo-error-lg, + .echo-error-md):focus {
    outline-color: #ffd9e4;
    outline-color: var(--color-semantic-error-200);
  }
  .echo-input-combobox-lg:focus {
    outline-width: 4px;
  }
  .echo-input-combobox-lg:-moz-read-only:not(:disabled) {
    cursor: pointer;
    background: white;
    background: var(--color-neutral-0);
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-input-combobox-lg:read-only:not(:disabled) {
    cursor: pointer;
    background: white;
    background: var(--color-neutral-0);
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  @media (max-width: 700px) {
    .echo-input-text-md, .echo-input-password-md, .echo-input-search-md, .echo-input-combobox-md {
      font-size: 1rem;
    }
  }
  .echo-combobox-sheet-search {
    display: none;
  }
  @media (max-width: 700px) {
    .echo-menu.echo-menu-sheet .echo-combobox-sheet-search {
      display: block;
      position: sticky;
      top: 1.75rem;
      z-index: 1;
      background: white;
      background: var(--color-neutral-0);
      margin: -0.5rem -0.5rem 0;
      padding: 0.25rem 1rem 0.75rem;
    }
    .echo-menu.echo-menu-sheet .echo-combobox-sheet-search .echo-input-search-wrapper, .echo-menu.echo-menu-sheet .echo-combobox-sheet-search .echo-input-search-lg {
      width: 100%;
    }
    .echo-input-combobox-wrapper .echo-menu.echo-menu-sheet .echo-sheet-handle {
      background: white;
      background: var(--color-neutral-0);
    }
    .echo-input-combobox-wrapper .echo-dropdown .echo-menu.echo-menu-sheet {
      height: 80dvh;
    }
    .echo-input-combobox-wrapper .echo-dropdown .echo-menu.echo-menu-sheet[open] {
      animation: fade-in 0.2s ease;
    }
    .echo-input-combobox-wrapper .echo-dropdown .echo-menu.echo-menu-sheet[closing] {
      animation: fade-out 0.2s ease forwards;
    }
    .echo-input-combobox-wrapper .echo-dropdown .echo-menu.echo-menu-sheet[open][data-restored] {
      animation: none;
    }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .echo-input-combobox-wrapper .echo-dropdown .echo-menu.echo-menu-sheet[open] {
      animation: fade-in 150ms forwards;
    }
    .echo-input-combobox-wrapper .echo-dropdown .echo-menu.echo-menu-sheet[closing] {
      animation: fade-out 150ms forwards;
    }
  }
  .echo-badge-status-sm {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    padding: 0.25rem 0.5rem;
    gap: 0.25rem;
  }
  .echo-badge-status-sm .echo-badge-status-icon svg {
    width: 1rem;
    height: 1rem;
  }
  .echo-badge-status-sm .echo-badge-status-icon svg, .echo-badge-status-sm .echo-badge-status-icon svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-badge-status-md {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    padding: 0.4375rem 0.75rem;
    gap: 0.5rem;
  }
  .echo-badge-status-md .echo-badge-status-icon svg {
    width: 1rem;
    height: 1rem;
  }
  .echo-badge-status-md .echo-badge-status-icon svg, .echo-badge-status-md .echo-badge-status-icon svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-badge-status-primary {
    color: #775be6;
    color: var(--color-primary-lavender-500);
    background: #f4f1ff;
    background: var(--color-primary-lavender-100);
  }
  .echo-badge-status-primary .echo-badge-status-icon svg, .echo-badge-status-primary .echo-badge-status-icon svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-badge-status-primary.dark, .dark .echo-badge-status-primary:not(.light) {
    color: white;
    color: var(--color-neutral-0);
    background: transparent;
    border: 2px solid #927ceb;
    border: 2px solid var(--color-primary-lavender-400);
  }
  .echo-badge-status-primary.dark .echo-badge-status-icon svg, .echo-badge-status-primary.dark .echo-badge-status-icon svg > path, .dark .echo-badge-status-primary:not(.light) .echo-badge-status-icon svg, .dark .echo-badge-status-primary:not(.light) .echo-badge-status-icon svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-badge-status-secondary {
    color: #1a042a;
    color: var(--color-primary-lavender-900);
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-badge-status-secondary .echo-badge-status-icon svg, .echo-badge-status-secondary .echo-badge-status-icon svg > path {
    fill: #1a042a;
    fill: var(--color-primary-lavender-900);
  }
  .echo-badge-status-success {
    color: #1f5800;
    color: var(--color-semantic-success-500);
    background: #e5f4df;
    background: var(--color-semantic-success-100);
  }
  .echo-badge-status-success .echo-badge-status-icon svg, .echo-badge-status-success .echo-badge-status-icon svg > path {
    fill: #1f5800;
    fill: var(--color-semantic-success-500);
  }
  .echo-badge-metric {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.75rem;
    gap: 0.625rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-badge-metric .echo-badge-icon svg {
    width: 1rem;
    height: 1rem;
  }
  .echo-badge-metric .echo-badge-icon svg, .echo-badge-metric .echo-badge-icon svg > path {
    fill: #404046;
  }
  .echo-badge-avatar {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem 0.125rem 0;
    gap: 0.25rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
  }
  .echo-badge-avatar .echo-avatar-group .echo-avatar-sm, .echo-badge-avatar .echo-avatar-group .echo-avatar-md, .echo-badge-avatar .echo-avatar-group .echo-avatar-lg {
    outline-color: #f9f9fe;
    outline-color: var(--color-neutral-100);
  }
  .echo-badge-activity {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    background-color: #f03c66;
    background-color: var(--color-semantic-error-500);
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-chip {
    display: inline-flex;
    padding: 0.4375rem 0.75rem;
    align-items: center;
    gap: 0.5rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    border: 1px solid #d6d6e8;
    border: 1px solid var(--color-neutral-300);
    background: white;
    background: var(--color-neutral-0);
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-chip .echo-chip-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .echo-chip .echo-chip-icon svg, .echo-chip .echo-chip-icon svg > path {
    fill: #747483;
    fill: var(--color-neutral-500);
  }
  .echo-chip:hover:not(:disabled), .echo-chip:focus, .echo-chip.active {
    border: 1px solid #775be6;
    border: 1px solid var(--color-primary-lavender-500);
    background: #f4f1ff;
    background: var(--color-primary-lavender-100);
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  .echo-chip:hover:not(:disabled) .echo-chip-icon svg, .echo-chip:hover:not(:disabled) .echo-chip-icon svg > path, .echo-chip:focus .echo-chip-icon svg, .echo-chip:focus .echo-chip-icon svg > path, .echo-chip.active .echo-chip-icon svg, .echo-chip.active .echo-chip-icon svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-chip:disabled {
    border: 1px solid #775be6;
    border: 1px solid var(--color-primary-lavender-500);
    background: #f4f1ff;
    background: var(--color-primary-lavender-100);
    color: #775be6;
    color: var(--color-primary-lavender-500);
    opacity: 0.3;
  }
  .echo-chip:disabled .echo-chip-icon svg, .echo-chip:disabled .echo-chip-icon svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-menu {
    display: flex;
    padding: 0.5rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    border: 0.5px solid #ebebf7;
    border: 0.5px solid var(--color-neutral-200);
    background: white;
    background: var(--color-neutral-0);
    box-shadow: 0.375rem 0.375rem 1.125rem 0 rgba(127, 127, 127, 0.3215686275);
  }
  .echo-menu:not([class*=rounded]) {
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
  }
  .echo-menu .echo-menu-divider {
    width: 100%;
    height: 0.5px;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background: #747483;
    background: var(--color-neutral-500);
    border: none;
  }
  @media (max-width: 700px) {
    .echo-menu .echo-menu-divider {
      display: none;
    }
  }
  .echo-toggle {
    border: 1px solid #d6d6e8;
    border: 1px solid var(--color-neutral-300);
    border-radius: 3.875rem;
    width: 5.25rem;
    height: 2.75rem;
    padding: 0.25rem 0.75rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .echo-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0.25rem, -50%);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    z-index: 0;
    transition: transform 150ms ease-in-out, background-color 150ms ease-in-out;
  }
  .echo-toggle:not(.on)::before {
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
  }
  .echo-toggle:not(.on) > svg:first-child, .echo-toggle:not(.on) > svg:first-child > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-toggle.on::before {
    transform: translate(2.625rem, -50%);
    background-color: #ebebf7;
    background-color: var(--color-neutral-200);
  }
  .echo-toggle.on > svg:last-child, .echo-toggle.on > svg:last-child > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-toggle > svg {
    width: 1.25rem;
    height: 1.25rem;
    z-index: 1;
  }
  .echo-toggle > svg:first-child {
    margin: 0 0.625rem 0 0;
  }
  .echo-toggle > svg:last-child {
    margin: 0 0 0 0.625rem;
  }
  .echo-toggle > svg, .echo-toggle > svg > path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
    transition: fill 150ms ease-in-out;
  }
  .echo-card-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
    gap: 1.25rem;
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    background: white;
    background: var(--color-neutral-0);
    text-decoration: none;
  }
  .echo-card-icon::after {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M9.19104 7.55147C9.51565 7.10465 10.141 7.00559 10.5878 7.3302C12.1206 8.44378 13.4945 9.74986 14.6733 11.2143C15.109 11.7557 15.109 12.5228 14.6733 13.0641C13.4945 14.5286 12.1206 15.8347 10.5878 16.9483C10.141 17.2729 9.51565 17.1738 9.19104 16.727C8.86643 16.2802 8.96549 15.6548 9.41231 15.3302C10.6871 14.4041 11.8393 13.3323 12.8442 12.1392C11.8393 10.9462 10.6871 9.8744 9.41231 8.94826C8.96549 8.62365 8.86643 7.99828 9.19104 7.55147Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M9.19104 7.55147C9.51565 7.10465 10.141 7.00559 10.5878 7.3302C12.1206 8.44378 13.4945 9.74986 14.6733 11.2143C15.109 11.7557 15.109 12.5228 14.6733 13.0641C13.4945 14.5286 12.1206 15.8347 10.5878 16.9483C10.141 17.2729 9.51565 17.1738 9.19104 16.727C8.86643 16.2802 8.96549 15.6548 9.41231 15.3302C10.6871 14.4041 11.8393 13.3323 12.8442 12.1392C11.8393 10.9462 10.6871 9.8744 9.41231 8.94826C8.96549 8.62365 8.86643 7.99828 9.19104 7.55147Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    background: #0d0c0f;
    background: var(--color-neutral-900);
  }
  .echo-card-icon .echo-card-icon-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-card-icon .echo-card-icon-icon svg, .echo-card-icon .echo-card-icon-icon svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-card-icon .echo-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .echo-card-icon .echo-card-content .echo-card-icon-title {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-card-icon .echo-card-content .echo-card-title-description {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-card-icon:is(a):hover:not(:focus) {
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(177, 177, 177, 0.2392156863);
  }
  .echo-card-icon:is(a):focus {
    border: 1px solid #0d0c0f;
    border: 1px solid var(--color-neutral-900);
    outline: 1px solid #0d0c0f;
    outline: 1px solid var(--color-neutral-900);
  }
  @media (max-width: 700px) {
    .echo-card-icon {
      width: 100%;
    }
  }
  .echo-card-illustration {
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    border-radius: 1rem;
    border-radius: var(--radius-16);
    background: #f9f9fe;
    background: var(--color-neutral-100);
    text-decoration: none;
  }
  .echo-card-illustration .echo-card-illustration-illustration svg {
    width: 8rem;
    height: 8rem;
  }
  .echo-card-illustration .echo-card-illustration-illustration svg, .echo-card-illustration .echo-card-illustration-illustration svg > path {
    fill: #1a042a;
    fill: var(--color-primary-lavender-900);
  }
  .echo-card-illustration .echo-card-illustration-title {
    text-align: center;
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-card-illustration .echo-card-illustration-description {
    text-align: center;
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-card-illustration:is(a):hover:not([disabled]) {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    outline: 0.5px solid #775be6;
    outline: 0.5px solid var(--color-primary-lavender-500);
    background: #f4f1ff;
    background: var(--color-primary-lavender-100);
  }
  .echo-card-illustration[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .echo-card-illustration[disabled] .echo-card-illustration-description {
    opacity: 0.7;
  }
  .echo-card-main {
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    border-radius: 1rem;
    border-radius: var(--radius-16);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    background: white;
    background: var(--color-neutral-0);
    text-decoration: none;
    position: relative;
  }
  .echo-card-main .echo-card-main-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .echo-card-main .echo-card-main-header .echo-card-main-header-icon {
    align-self: flex-start;
  }
  .echo-card-main .echo-card-main-header .echo-card-main-header-icon svg {
    width: 2rem;
    height: 2rem;
  }
  .echo-card-main .echo-card-main-header .echo-card-main-header-play-btn {
    align-self: flex-start;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .echo-card-main .echo-card-main-header .echo-card-main-header-play-btn > button {
    z-index: 1;
  }
  .echo-card-main .echo-card-main-header .echo-card-main-header-play-btn > button > svg, .echo-card-main .echo-card-main-header .echo-card-main-header-play-btn > button > svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-card-main .echo-card-main-header .echo-card-main-badge {
    align-self: flex-end;
    display: flex;
  }
  .echo-card-main .echo-card-main-header .echo-card-main-ellipsis {
    align-self: flex-end;
    display: none;
    z-index: 2;
  }
  .echo-card-main .echo-card-main-header .echo-card-main-ellipsis .echo-btn-lg {
    margin: -0.625rem 0;
  }
  .echo-card-main:hover:has(.echo-card-main-ellipsis) .echo-card-main-badge, .echo-card-main:has(.echo-card-main-ellipsis .echo-menu[open]):has(.echo-card-main-ellipsis) .echo-card-main-badge {
    display: none;
  }
  .echo-card-main:hover .echo-card-main-ellipsis, .echo-card-main:has(.echo-card-main-ellipsis .echo-menu[open]) .echo-card-main-ellipsis {
    display: flex;
  }
  .echo-card-main .echo-card-main-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .echo-card-main .echo-card-main-content .echo-card-main-content-title {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-card-main .echo-card-main-content .echo-card-main-content-title:is(a) {
    text-decoration: none;
  }
  .echo-card-main .echo-card-main-content .echo-card-main-content-title:is(a)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 1rem;
    border-radius: var(--radius-16);
    z-index: 0;
  }
  .echo-card-main .echo-card-main-content .echo-card-main-content-description {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-card-main .echo-card-footer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-grow: 1;
    z-index: 1;
  }
  .echo-card-main:has(a.echo-card-main-content-title:not(:focus)):hover {
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(177, 177, 177, 0.2392156863);
  }
  .echo-card-main:has(a.echo-card-main-content-title:focus) {
    border: 1px solid #0d0c0f;
    border: 1px solid var(--color-neutral-900);
    outline: 1px solid #0d0c0f;
    outline: 1px solid var(--color-neutral-900);
  }
  .echo-card-large {
    display: flex;
    padding: 0.5rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-shrink: 0;
    border-radius: 1.5rem;
    border-radius: var(--radius-24);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    text-decoration: none;
  }
  .echo-card-large .echo-card-large-image {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.125rem;
    background: #f9f9fe;
    background: var(--color-neutral-100);
    width: 8rem;
    height: 6rem;
    flex-shrink: 0;
  }
  .echo-card-large .echo-card-large-image svg {
    width: 100%;
    height: 100%;
    max-width: 5.5rem;
    max-height: 1.67231rem;
  }
  .echo-card-large .echo-card-large-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-grow: 1;
  }
  .echo-card-large .echo-card-large-content .echo-card-large-title {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-card-large .echo-card-large-content .echo-card-large-description {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-card-large .echo-card-large-action {
    padding: 0 2rem;
  }
  .echo-card-large:is(a):hover:not(:focus) {
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(177, 177, 177, 0.2392156863);
  }
  .echo-card-large:is(a):focus {
    border-color: #0d0c0f;
    border-color: var(--color-neutral-900);
    outline: 1px solid #0d0c0f;
    outline: 1px solid var(--color-neutral-900);
  }
  .echo-card-action {
    display: flex;
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    border-radius: 1.5rem;
    border-radius: var(--radius-24);
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    text-decoration: none;
  }
  .echo-card-action .echo-card-action-content {
    display: flex;
    flex-direction: column;
  }
  .echo-card-action .echo-card-action-content .echo-card-action-title {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-card-action .echo-card-action-content .echo-card-action-description {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-navigation-drawer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
    background-color: rgba(26, 4, 42, 0.24);
    padding: 0 0.75rem;
    height: 2.5rem;
    color: white;
    color: var(--color-neutral-0);
    text-decoration: none;
    cursor: pointer;
  }
  .echo-navigation-drawer .echo-navigation-drawer-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-grow: 1;
  }
  .echo-navigation-drawer:hover, .echo-navigation-drawer:focus-visible, .echo-navigation-drawer.active {
    background-color: rgba(106, 82, 200, 0.24);
  }
  .echo-navigation-drawer:hover svg, .echo-navigation-drawer:hover svg > path, .echo-navigation-drawer:focus-visible svg, .echo-navigation-drawer:focus-visible svg > path, .echo-navigation-drawer.active svg, .echo-navigation-drawer.active svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-navigation-drawer:focus-visible {
    outline: 2px solid #e0d8ff;
    outline: 2px solid var(--color-primary-lavender-200);
    outline-offset: 2px;
  }
  .echo-navigation-drawer svg, .echo-navigation-drawer svg > path {
    fill: #927ceb;
    fill: var(--color-primary-lavender-400);
  }
  body:has(dialog.echo-modal[open]) {
    overflow: hidden;
  }
  .echo-modal-fade-scroll-y {
    mask-image: linear-gradient(to bottom, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
  }
  dialog.echo-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: stretch;
    width: 27.4375rem;
    padding: 0;
    border: none;
    max-height: 100vh;
    border-radius: 2rem;
    border-radius: var(--radius-32);
    box-shadow: 0.5rem 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.4);
    overflow: visible;
    overflow: initial;
  }
  dialog.echo-modal.echo-modal-sidebar {
    left: auto;
    left: initial;
    top: auto;
    top: initial;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 23.4375rem;
    transform: translate(0, 0);
    max-height: calc(100vh - 2.5rem);
    overflow: hidden;
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  dialog.echo-modal.echo-modal-sidebar .echo-modal-content {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    min-height: 0;
  }
  dialog.echo-modal.echo-modal-sidebar .echo-modal-content > turbo-frame {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    min-height: 0;
  }
  dialog.echo-modal.echo-modal-sidebar .echo-modal-content .echo-modal-content-body {
    flex: 1 1;
    min-height: 0;
  }
  dialog.echo-modal.echo-modal-lg {
    width: 40.5rem;
  }
  dialog.echo-modal.echo-modal-drawer {
    left: calc(17.4375rem - 4px);
    left: calc(var(--layout-authenticated-sidebar-width) - 4px);
    top: 0.75rem;
    right: auto;
    right: initial;
    bottom: 0.75rem;
    width: 23.4375rem;
    height: auto;
    max-height: calc(100vh - 1.5rem);
    transform: translate(0, 0);
    border-radius: 2rem;
    border-radius: var(--radius-32);
    z-index: 50;
  }
  dialog.echo-modal.echo-modal-drawer::backdrop {
    background: transparent;
  }
  dialog.echo-modal.echo-modal-drawer[open]::backdrop, dialog.echo-modal.echo-modal-drawer[closing]::backdrop {
    animation: none;
  }
  dialog.echo-modal.echo-modal-drawer .echo-modal-content {
    height: 100%;
    border-radius: 2rem;
    border-radius: var(--radius-32);
  }
  dialog.echo-modal:focus {
    outline: none;
  }
  dialog.echo-modal[open] {
    display: flex;
    animation: fade-in 150ms forwards;
  }
  dialog.echo-modal[open]::backdrop {
    animation: fade-in-80 150ms forwards;
  }
  dialog.echo-modal[closing] {
    animation: fade-out 150ms forwards;
  }
  dialog.echo-modal[closing]::backdrop {
    animation: fade-out-80 150ms forwards;
  }
  dialog.echo-modal::backdrop {
    background: #0d0c0f;
    background: var(--color-neutral-900);
    opacity: 0;
  }
  dialog.echo-modal .echo-modal-content {
    border-radius: 2rem;
    border-radius: var(--radius-32);
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  dialog.echo-modal .echo-modal-content .echo-modal-content-body {
    display: flex;
    padding: 3rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
  dialog.echo-modal .echo-modal-content .echo-modal-content-actions {
    display: flex;
    padding: 1.5rem 3rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    align-self: stretch;
    border-top: 1px solid #d6d6e8;
    border-top: 1px solid var(--color-neutral-300);
  }
  dialog.echo-modal:has(.echo-modal-content-actions .echo-btn-lg) .echo-modal-content .echo-modal-content-body {
    overflow: auto;
    max-height: calc(100vh - 6rem - 1px);
  }
  .echo-sheet-handle {
    display: none;
  }
  @media (max-width: 700px) {
    dialog.echo-modal:not(.echo-modal-drawer) > .echo-modal-content > .echo-sheet-handle, .echo-menu.echo-menu-sheet .echo-sheet-handle {
      display: block;
      position: sticky;
      top: 0;
      z-index: 2;
      flex: 0 0 auto;
      height: 1.75rem;
      background: linear-gradient(to bottom, white 0%, white 55%, transparent 100%);
      background: linear-gradient(to bottom, var(--color-neutral-0) 0%, var(--color-neutral-0) 55%, transparent 100%);
      pointer-events: none;
    }
    dialog.echo-modal:not(.echo-modal-drawer) > .echo-modal-content > .echo-sheet-handle::before, .echo-menu.echo-menu-sheet .echo-sheet-handle::before {
      content: "";
      position: absolute;
      top: 0.5rem;
      left: 50%;
      transform: translateX(-50%);
      width: 2.25rem;
      height: 0.25rem;
      border-radius: 6.1875rem;
      border-radius: var(--radius-99);
      background: #d6d6e8;
      background: var(--color-neutral-300);
    }
    .echo-menu.echo-menu-sheet .echo-sheet-handle {
      margin: 0 -0.5rem 0;
      pointer-events: auto;
      touch-action: none;
    }
    dialog.echo-modal:not(.echo-modal-drawer) {
      left: 0;
      right: 0;
      top: auto;
      bottom: 0;
      transform: none;
      width: 100%;
      max-width: 100%;
      max-height: 85dvh;
      border-radius: 2rem 2rem 0 0;
      border-radius: var(--radius-32) var(--radius-32) 0 0;
      overflow: hidden;
    }
    dialog.echo-modal:not(.echo-modal-drawer)[open] {
      animation: echo-sheet-up 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }
    dialog.echo-modal:not(.echo-modal-drawer)[closing] {
      animation: echo-sheet-down 0.2s ease forwards;
    }
    dialog.echo-modal:not(.echo-modal-drawer) .echo-modal-content {
      min-height: 0;
      max-height: 85dvh;
      overflow-y: auto;
      overscroll-behavior: none;
      border-radius: 2rem 2rem 0 0;
      border-radius: var(--radius-32) var(--radius-32) 0 0;
    }
    dialog.echo-modal:not(.echo-modal-drawer) .echo-modal-content-body {
      padding: 1.5rem;
    }
    dialog.echo-modal:not(.echo-modal-drawer) .echo-modal-content-actions {
      position: sticky;
      bottom: 0;
      background: white;
      background: var(--color-neutral-0);
      padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    dialog.echo-modal:not(.echo-modal-drawer):has(.echo-modal-content-actions .echo-btn-lg) .echo-modal-content .echo-modal-content-body {
      max-height: none;
      overflow: visible;
    }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    dialog.echo-modal:not(.echo-modal-drawer)[open] {
      animation: fade-in 150ms forwards;
    }
    dialog.echo-modal:not(.echo-modal-drawer)[closing] {
      animation: fade-out 150ms forwards;
    }
  }
  @media (max-width: 700px) {
    dialog.echo-modal.echo-modal-drawer {
      inset: 0;
      width: 100%;
      height: 100dvh;
      max-height: 100dvh;
      border-radius: 0;
      transform: none;
    }
    dialog.echo-modal.echo-modal-drawer .echo-modal-content {
      height: 100%;
      border-radius: 0;
    }
  }
  [popover].echo-menu:not(:popover-open) {
    display: none;
  }
  .echo-dropdown {
    position: relative;
  }
  .echo-dropdown .echo-menu {
    position: fixed;
    margin: 0;
    opacity: 0;
    z-index: 20;
  }
  .echo-dropdown .echo-menu[open] {
    animation: fade-in 150ms forwards;
  }
  .echo-dropdown .echo-menu[open][data-restored] {
    animation: none;
    opacity: 1;
  }
  .echo-dropdown .echo-menu[closing] {
    animation: fade-out 150ms forwards;
  }
  .echo-dropdown .echo-btn-md.with-chevron {
    padding-right: 1rem;
    padding-right: var(--padding-16);
  }
  .echo-dropdown .echo-btn-md.with-chevron::after {
    width: 1rem;
    height: 1rem;
  }
  .echo-dropdown .echo-btn-lg.with-chevron {
    padding-right: 1rem;
    padding-right: var(--padding-16);
  }
  .echo-dropdown .echo-btn-lg.with-chevron::after {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-dropdown > [class*=echo-btn].with-chevron::after {
    content: "";
    display: inline-block;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M7.41231 9.3302C7.85912 9.00559 8.48449 9.10465 8.8091 9.55147C9.73524 10.8263 10.807 11.9784 12.0001 12.9834C13.1931 11.9784 14.2649 10.8263 15.191 9.55147C15.5157 9.10465 16.141 9.00559 16.5878 9.3302C17.0347 9.65481 17.1337 10.2802 16.8091 10.727C15.6955 12.2598 14.3894 13.6336 12.925 14.8124C12.3836 15.2482 11.6165 15.2482 11.0752 14.8124C9.6107 13.6336 8.30462 12.2598 7.19104 10.727C6.86643 10.2802 6.96549 9.65481 7.41231 9.3302Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M7.41231 9.3302C7.85912 9.00559 8.48449 9.10465 8.8091 9.55147C9.73524 10.8263 10.807 11.9784 12.0001 12.9834C13.1931 11.9784 14.2649 10.8263 15.191 9.55147C15.5157 9.10465 16.141 9.00559 16.5878 9.3302C17.0347 9.65481 17.1337 10.2802 16.8091 10.727C15.6955 12.2598 14.3894 13.6336 12.925 14.8124C12.3836 15.2482 11.6165 15.2482 11.0752 14.8124C9.6107 13.6336 8.30462 12.2598 7.19104 10.727C6.86643 10.2802 6.96549 9.65481 7.41231 9.3302Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
  }
  .echo-dropdown > .echo-btn-primary.with-chevron::after {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-dropdown > .echo-btn-primary[disabled].with-chevron::after {
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .echo-dropdown > .echo-btn-secondary.with-chevron::after, .echo-dropdown > .echo-btn-tertiary.with-chevron::after, .echo-dropdown > .echo-btn-minimal.with-chevron::after {
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
  }
  .echo-dropdown:has(.echo-menu[open]:not([closing])) > [class*=echo-btn].with-chevron::after {
    transform: scaleY(-1);
  }
  .echo-dropdown-backdrop {
    display: none;
  }
  @media (max-width: 700px) {
    .echo-dropdown-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      background: #0d0c0f;
      background: var(--color-neutral-900);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 1060;
    }
    .echo-dropdown-backdrop.is-visible {
      opacity: 0.8;
      pointer-events: auto;
    }
    .echo-dropdown .echo-menu.echo-menu-sheet {
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      top: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      max-height: 80dvh;
      overflow-y: auto;
      overscroll-behavior: none;
      opacity: 1;
      border-radius: 1.25rem 1.25rem 0 0;
      border-radius: var(--radius-20) var(--radius-20) 0 0;
      padding-top: 0;
      padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
    .echo-dropdown .echo-menu.echo-menu-sheet[open] {
      animation: echo-sheet-up 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .echo-dropdown .echo-menu.echo-menu-sheet[open][data-restored] {
      animation: none;
    }
    .echo-dropdown .echo-menu.echo-menu-sheet[closing] {
      animation: echo-sheet-down 0.2s ease forwards;
    }
    .echo-dropdown .echo-menu.echo-menu-sheet .echo-menu-item {
      padding: 0.75rem 0.75rem;
    }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .echo-dropdown .echo-menu.echo-menu-sheet[open] {
      animation: fade-in 150ms forwards;
    }
    .echo-dropdown .echo-menu.echo-menu-sheet[closing] {
      animation: fade-out 150ms forwards;
    }
  }
  .echo-list-files {
    display: flex;
    flex-direction: column;
  }
  .echo-list-files .echo-list-file {
    display: flex;
    position: relative;
  }
  .echo-list-files .echo-list-file:hover > [class^=echo-list-file-], .echo-list-files .echo-list-file:has(.echo-menu[open]) > [class^=echo-list-file-] {
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
  }
  .echo-list-files .echo-list-file:hover .echo-list-file-icon:has(button) > svg, .echo-list-files .echo-list-file:has(.echo-menu[open]) .echo-list-file-icon:has(button) > svg {
    display: none;
  }
  .echo-list-files .echo-list-file:hover .echo-list-file-icon:has(button) button, .echo-list-files .echo-list-file:has(.echo-menu[open]) .echo-list-file-icon:has(button) button {
    display: flex;
  }
  .echo-list-files .echo-list-file:hover .echo-list-file-ellipsis .echo-dropdown > button svg, .echo-list-files .echo-list-file:has(.echo-menu[open]) .echo-list-file-ellipsis .echo-dropdown > button svg {
    opacity: 1;
  }
  .echo-list-files .echo-list-file:hover {
    z-index: 2;
  }
  .echo-list-files .echo-list-file:has(.echo-menu[open]) {
    z-index: 3;
  }
  .echo-list-files .echo-list-file[data-audio-controls-is-current-track-value=true] .echo-list-file-icon:has(button) > svg {
    display: none;
  }
  .echo-list-files .echo-list-file[data-audio-controls-is-current-track-value=true] .echo-list-file-icon:has(button) button {
    display: flex;
  }
  .echo-list-files .echo-list-file > [class^=echo-list-file-] {
    height: 3.875rem;
  }
  .echo-list-files .echo-list-file .echo-list-file-icon {
    flex: 0 0 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .echo-list-files .echo-list-file .echo-list-file-icon > svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-list-files .echo-list-file .echo-list-file-icon > .echo-spinner {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-list-files .echo-list-file .echo-list-file-icon > svg, .echo-list-files .echo-list-file .echo-list-file-icon > svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-list-files .echo-list-file .echo-list-file-icon button {
    width: 1.5rem;
    height: 1.5rem;
    display: none;
    z-index: 1;
  }
  .echo-list-files .echo-list-file .echo-list-file-icon button svg {
    width: 1rem;
    height: 1rem;
  }
  .echo-list-files .echo-list-file .echo-list-file-icon button svg, .echo-list-files .echo-list-file .echo-list-file-icon button svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-list-files .echo-list-file:has(.echo-list-file-error) .echo-list-file-icon > svg, .echo-list-files .echo-list-file:has(.echo-list-file-error) .echo-list-file-icon > svg > path {
    fill: #f03c66;
    fill: var(--color-semantic-error-500);
  }
  .echo-list-files .echo-list-file:has(.echo-list-file-error) > [class^=echo-list-file-] {
    background-color: #fdebf0;
    background-color: var(--color-semantic-error-100);
  }
  .echo-list-files .echo-list-file .echo-list-file-name {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid #d6d6e8;
    border-bottom: 1px solid var(--color-neutral-300);
    min-width: 0;
  }
  .echo-list-files .echo-list-file .echo-list-file-name a {
    text-decoration: none;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    display: block;
    min-width: 0;
    max-width: 100%;
  }
  .echo-list-files .echo-list-file .echo-list-file-name a > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .echo-list-files .echo-list-file .echo-list-file-name a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .echo-list-files .echo-list-file .echo-list-file-size {
    flex: 0 0 5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid #d6d6e8;
    border-bottom: 1px solid var(--color-neutral-300);
  }
  .echo-list-files .echo-list-file .echo-list-file-size a {
    text-decoration: none;
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-list-files .echo-list-file .echo-list-file-duration {
    flex: 0 0 5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid #d6d6e8;
    border-bottom: 1px solid var(--color-neutral-300);
  }
  .echo-list-files .echo-list-file .echo-list-file-duration a {
    text-decoration: none;
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-list-files .echo-list-file .echo-list-file-status {
    flex: 0 0 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #d6d6e8;
    border-bottom: 1px solid var(--color-neutral-300);
  }
  .echo-list-files .echo-list-file .echo-list-file-badge {
    flex: 0 0 8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid #d6d6e8;
    border-bottom: 1px solid var(--color-neutral-300);
  }
  .echo-list-files .echo-list-file .echo-list-file-ellipsis {
    flex: 0 0 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #d6d6e8;
    border-bottom: 1px solid var(--color-neutral-300);
    position: relative;
    z-index: 1;
  }
  .echo-list-files .echo-list-file .echo-list-file-ellipsis .echo-dropdown > button svg {
    opacity: 0;
  }
  .echo-list-files .echo-list-file .echo-list-file-error {
    flex: 1 1;
    padding: 1rem;
    border-bottom: 1px solid #d6d6e8;
    border-bottom: 1px solid var(--color-neutral-300);
    color: #f03c66;
    color: var(--color-semantic-error-500);
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .echo-list-files .echo-list-file .echo-list-file-error > div {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .echo-list-files .echo-list-file[data-selected] > [class^=echo-list-file-] {
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
  }
  .echo-list-files[multi-select-mode] .echo-list-file > [class^=echo-list-file-] {
    position: relative;
  }
  .echo-list-files[multi-select-mode] .echo-list-file > [class^=echo-list-file-]::before {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 10;
  }
  body:has(.echo-list-files[multi-select-mode]) {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .echo-collection[data-view=cards] {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    gap: 1rem;
  }
  @media (min-width: 700px) {
    .echo-collection[data-view=cards] {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1280px) {
    .echo-collection[data-view=cards] {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .echo-collection[data-view=cards] .echo-list-row {
    display: none;
  }
  .echo-collection[data-view=list] {
    display: flex;
    flex-direction: column;
  }
  .echo-collection[data-view=list] .echo-card-main {
    display: none;
  }
  .echo-collection-item {
    display: flex;
    flex-direction: column;
  }
  .echo-collection-item > .echo-card-main {
    flex: 1 1 auto;
  }
  .echo-list-row {
    display: flex;
    position: relative;
  }
  .echo-list-row:hover > [class^=echo-list-row-], .echo-list-row:has(.echo-menu[open]) > [class^=echo-list-row-] {
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
  }
  .echo-list-row:hover .echo-list-row-ellipsis .echo-dropdown > button svg, .echo-list-row:has(.echo-menu[open]) .echo-list-row-ellipsis .echo-dropdown > button svg {
    opacity: 1;
  }
  .echo-list-row:hover {
    z-index: 2;
  }
  .echo-list-row:has(.echo-menu[open]) {
    z-index: 3;
  }
  .echo-list-row > [class^=echo-list-row-] {
    height: 3.875rem;
    border-bottom: 1px solid #d6d6e8;
    border-bottom: 1px solid var(--color-neutral-300);
  }
  .echo-list-row .echo-list-row-icon {
    flex: 0 0 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0;
  }
  .echo-list-row .echo-list-row-icon .echo-list-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    border-radius: var(--radius-12);
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-list-row .echo-list-row-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-list-row .echo-list-row-icon svg, .echo-list-row .echo-list-row-icon svg path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-list-row .echo-list-row-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .echo-list-row .echo-list-row-name a {
    text-decoration: none;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    display: block;
    min-width: 0;
    max-width: 100%;
  }
  .echo-list-row .echo-list-row-name a > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .echo-list-row .echo-list-row-name a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .echo-list-row .echo-list-row-badge {
    flex: 0 0 11rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .echo-list-row .echo-list-row-payment {
    flex: 0 0 14rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-list-row .echo-list-row-payment .echo-list-row-payment-paid {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-list-row .echo-list-row-ellipsis {
    flex: 0 0 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  .echo-list-row .echo-list-row-ellipsis .echo-dropdown > button svg {
    opacity: 0;
  }
  @media (max-width: 700px) {
    .echo-list-files, .echo-list-row {
      margin-left: -1.25rem;
      margin-right: -1.25rem;
    }
    .echo-list-row .echo-list-row-payment, .echo-list-row .echo-list-row-badge {
      display: none;
    }
    .echo-list-files .echo-list-file .echo-list-file-size, .echo-list-files .echo-list-file .echo-list-file-duration {
      display: none;
    }
    .echo-list-files .echo-list-file .echo-list-file-badge {
      flex: 0 0 auto;
      align-items: flex-end;
    }
    .echo-list-files .echo-list-file > [class^=echo-list-file-], .echo-list-row > [class^=echo-list-row-] {
      border-bottom: 0;
    }
    .echo-list-files .echo-list-file .echo-list-file-ellipsis, .echo-list-row .echo-list-row-ellipsis {
      flex: 0 0 auto;
      padding-right: 1.25rem;
    }
  }
  .echo-view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid #a5a5b0;
    border: 1px solid var(--color-neutral-400);
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .echo-view-toggle .echo-view-toggle-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .echo-view-toggle .echo-view-toggle-option:first-child {
    border-top-left-radius: calc(0.5rem - 1px);
    border-bottom-left-radius: calc(0.5rem - 1px);
  }
  .echo-view-toggle .echo-view-toggle-option:last-child {
    border-top-right-radius: calc(0.5rem - 1px);
    border-bottom-right-radius: calc(0.5rem - 1px);
  }
  .echo-view-toggle .echo-view-toggle-option:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #775be6;
    box-shadow: inset 0 0 0 2px var(--color-primary-lavender-500);
  }
  .echo-view-toggle .echo-view-toggle-option + .echo-view-toggle-option {
    border-left: 1px solid #a5a5b0;
    border-left: 1px solid var(--color-neutral-400);
  }
  .echo-view-toggle .echo-view-toggle-option svg {
    width: 1rem;
    height: 1rem;
  }
  .echo-view-toggle .echo-view-toggle-option svg, .echo-view-toggle .echo-view-toggle-option svg path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
  }
  .echo-view-toggle .echo-view-toggle-option:hover svg, .echo-view-toggle .echo-view-toggle-option:hover svg path {
    fill: oklch(37.1% 0 0);
    fill: var(--color-neutral-700);
  }
  .echo-view-toggle .echo-view-toggle-option.active {
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
  }
  .echo-view-toggle .echo-view-toggle-option.active svg, .echo-view-toggle .echo-view-toggle-option.active svg path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  @media (max-width: 700px) {
    .echo-list-file .echo-list-file-ellipsis .echo-dropdown > button svg, .echo-list-row .echo-list-row-ellipsis .echo-dropdown > button svg {
      opacity: 1;
    }
  }
  [data-controller~=file-system-object--drag-move] {
    display: contents;
  }
  #file-system-object-list-region {
    display: contents;
  }
  body.echo-dragging #file-system-object-list-region {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .echo-drop-here-strip, .echo-upload-here-strip {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: sticky;
    top: 3.5rem;
    top: var(--layout-header-height);
    z-index: 8;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 0.125rem dashed #927ceb;
    border: 0.125rem dashed var(--color-primary-lavender-400);
    border-radius: 1rem;
    border-radius: var(--radius-16);
    background-color: #f4f1ff;
    background-color: var(--color-primary-lavender-100);
    color: #775be6;
    color: var(--color-primary-lavender-500);
    font-size: 0.875rem;
    font-weight: 600;
    transition: opacity 0.12s ease;
  }
  .echo-drop-here-strip svg, .echo-upload-here-strip svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-drop-here-strip svg, .echo-drop-here-strip svg > path, .echo-upload-here-strip svg, .echo-upload-here-strip svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  #file-system-object-list-region:has(.echo-list-file.echo-drag-over, .echo-list-file.echo-upload-over, .echo-list-file.echo-drag-version-over, .echo-list-file.echo-drag-version-invalid) .echo-drop-here-strip, #file-system-object-list-region:has(.echo-list-file.echo-drag-over, .echo-list-file.echo-upload-over, .echo-list-file.echo-drag-version-over, .echo-list-file.echo-drag-version-invalid) .echo-upload-here-strip {
    opacity: 0.4;
  }
  body.echo-dragging-peeked .echo-drop-here-strip {
    display: flex;
  }
  body[dragover] #file-system-object-list-region:has(.echo-list-files) .echo-upload-here-strip {
    display: flex;
  }
  #file-system-object-list-region.echo-drag-over .echo-drop-here-strip {
    border-style: solid;
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  body.echo-dragging {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: grabbing;
  }
  body.echo-dragging .echo-multi-select-actions {
    display: none;
  }
  .echo-drag-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 18rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: white;
    background-color: var(--color-neutral-0);
    color: #0d0c0f;
    color: var(--color-neutral-900);
    border: 0.125rem solid white;
    border: 0.125rem solid var(--color-neutral-0);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    opacity: 0.95;
  }
  .echo-drag-ghost svg {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-drag-ghost svg, .echo-drag-ghost svg path {
    fill: currentColor;
  }
  .echo-drag-ghost .echo-drag-ghost-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .echo-drag-ghost .echo-badge-activity {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    box-shadow: 0 0 0 0.1875rem white;
    box-shadow: 0 0 0 0.1875rem var(--color-neutral-0);
  }
  .echo-list-file.echo-dragging-source {
    cursor: grabbing;
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
  }
  .echo-list-file.echo-dragging-source > [class^=echo-list-file-] {
    opacity: 0.3;
  }
  .echo-list-file.echo-move-pending {
    opacity: 0.5;
    pointer-events: none;
  }
  .echo-list-file.echo-drag-over {
    isolation: isolate;
  }
  .echo-list-file.echo-drag-over > [class^=echo-list-file-] {
    background-color: #f4f1ff;
    background-color: var(--color-primary-lavender-100);
  }
  .echo-list-file.echo-drag-over::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.125rem solid #775be6;
    border: 0.125rem solid var(--color-primary-lavender-500);
    border-radius: 0.25rem;
    pointer-events: none;
    z-index: 3;
  }
  .echo-list-file.echo-upload-over {
    isolation: isolate;
  }
  .echo-list-file.echo-upload-over > [class^=echo-list-file-] {
    background-color: #f4f1ff;
    background-color: var(--color-primary-lavender-100);
  }
  .echo-list-file.echo-upload-over::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.125rem solid #775be6;
    border: 0.125rem solid var(--color-primary-lavender-500);
    border-radius: 0.25rem;
    pointer-events: none;
    z-index: 3;
  }
  .echo-list-file.echo-drag-version-over {
    isolation: isolate;
    cursor: copy;
  }
  .echo-list-file.echo-drag-version-over > [class^=echo-list-file-] {
    background-color: color-mix(in srgb, #3893a5 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, #3893a5 12%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-secondary-blue-500) 12%, transparent);
    }
}
  }
  .echo-list-file.echo-drag-version-over::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.125rem solid #3893a5;
    border: 0.125rem solid var(--color-secondary-blue-500);
    border-radius: 0.25rem;
    pointer-events: none;
    z-index: 3;
  }
  .echo-drop-hint {
    display: none;
    align-items: center;
    gap: 0.375rem;
    position: absolute;
    inset: 0;
    width: -moz-max-content;
    width: max-content;
    height: -moz-max-content;
    height: max-content;
    margin: auto;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    border-radius: var(--radius-full);
    color: white;
    color: var(--color-neutral-0);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
  }
  .echo-drop-hint svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .echo-drop-hint svg, .echo-drop-hint svg > path {
    fill: currentColor;
  }
  .echo-drop-hint-folder {
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .echo-drop-hint-version {
    background-color: #3893a5;
    background-color: var(--color-secondary-blue-500);
  }
  .echo-drop-hint-version-invalid {
    background-color: #f03c66;
    background-color: var(--color-semantic-error-500);
  }
  .echo-drop-hint-move, .echo-drop-hint-upload {
    display: none;
    align-items: center;
    gap: 0.375rem;
  }
  .echo-list-file.echo-drag-over .echo-drop-hint-folder, .echo-list-file.echo-upload-over .echo-drop-hint-folder, .echo-list-file.echo-drag-version-over .echo-drop-hint-version, .echo-list-file.echo-drag-version-invalid .echo-drop-hint-version-invalid {
    display: inline-flex;
  }
  .echo-list-file.echo-drag-over .echo-drop-hint-move, .echo-list-file.echo-upload-over .echo-drop-hint-upload {
    display: inline-flex;
  }
  .echo-list-file.echo-drag-version-invalid {
    isolation: isolate;
    cursor: not-allowed;
  }
  .echo-list-file.echo-drag-version-invalid > [class^=echo-list-file-] {
    background-color: color-mix(in srgb, #f03c66 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, #f03c66 12%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-semantic-error-500) 12%, transparent);
    }
}
  }
  .echo-list-file.echo-drag-version-invalid::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.125rem solid #f03c66;
    border: 0.125rem solid var(--color-semantic-error-500);
    border-radius: 0.25rem;
    pointer-events: none;
    z-index: 3;
  }
  body.echo-dragging .echo-breadcrumb[data-drag-move-target][data-drop-valid=true] {
    isolation: isolate;
  }
  body.echo-dragging .echo-breadcrumb[data-drag-move-target][data-drop-valid=true]::after {
    content: "";
    position: absolute;
    inset: -0.1875rem -0.5rem;
    border: 0.0625rem solid #927ceb;
    border: 0.0625rem solid var(--color-primary-lavender-400);
    border-radius: 0.375rem;
    z-index: -1;
    pointer-events: none;
  }
  body.echo-dragging .echo-breadcrumb[data-drag-move-target][data-drop-valid=true].echo-drag-over {
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  body.echo-dragging .echo-breadcrumb[data-drag-move-target][data-drop-valid=true].echo-drag-over::after {
    background-color: white;
    background-color: var(--color-neutral-0);
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
  }
  .echo-list-file.echo-drag-dwelling > [class^=echo-list-file-], .echo-breadcrumb.echo-drag-dwelling::after {
    animation: echo-drag-spring-dwell 800ms ease-in-out forwards;
  }
  @keyframes echo-drag-spring-dwell {
    0% {
      background-color: #f4f1ff;
      background-color: var(--color-primary-lavender-100);
    }
    50% {
      background-color: var(--color-primary-lavender-300);
    }
    62% {
      background-color: #f4f1ff;
      background-color: var(--color-primary-lavender-100);
    }
    74% {
      background-color: #927ceb;
      background-color: var(--color-primary-lavender-400);
    }
    86% {
      background-color: #f4f1ff;
      background-color: var(--color-primary-lavender-100);
    }
    100% {
      background-color: #927ceb;
      background-color: var(--color-primary-lavender-400);
    }
  }
  .echo-version-switcher-bar {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid #d6d6e8;
    border: 1px solid var(--color-neutral-300);
    border-radius: 9999px;
    border-radius: var(--radius-full);
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-version-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .echo-version-switcher-current {
    font-weight: 600;
  }
  .echo-version-switcher-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1;
    min-width: 0;
  }
  .echo-version-switcher-item-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .echo-version-switcher-label {
    font-weight: 600;
  }
  .echo-version-switcher-name {
    font-size: 0.8125rem;
    color: currentColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .echo-version-switcher-time {
    font-size: 0.75rem;
    color: currentColor;
    opacity: 0.65;
    white-space: nowrap;
  }
  .echo-menu-item:focus .echo-version-switcher-time, .echo-menu-item[data-active] .echo-version-switcher-time, .echo-menu-item[aria-current=true] .echo-version-switcher-time {
    opacity: 1;
  }
  @media (max-width: 700px) {
    .echo-version-switcher-bar {
      right: auto;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .echo-file-uploader {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: fixed;
    bottom: 1.5rem;
    left: calc(50% + 17.4375rem / 2);
    left: calc(50% + var(--layout-authenticated-sidebar-width) / 2);
    transform: translateX(-50%);
    padding: 1rem;
    border-radius: 1.25rem;
    border-radius: var(--radius-20);
    border: 1px solid #ebebf7;
    border: 1px solid var(--color-neutral-200);
    background: white;
    background: var(--color-neutral-0);
    filter: drop-shadow(0.375rem 0.375rem 1.125rem rgba(127, 127, 127, 0.32));
    width: 29.0625rem;
    z-index: 9;
  }
  .echo-file-uploader .echo-file-uploader-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: -0.75rem;
    margin-bottom: 1rem;
  }
  .echo-file-uploader .echo-file-uploader-header .echo-file-uploader-status {
    color: #747483;
    color: var(--color-neutral-500);
    margin-top: 0.625rem;
  }
  .echo-file-uploader .echo-file-uploader-header .echo-btn-md {
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
    margin-bottom: -0.625rem;
  }
  .echo-file-uploader .echo-file-uploader-files {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.75rem;
    max-height: 10rem;
    overflow-y: auto;
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-icon {
    margin-right: 0.5rem;
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-icon svg, .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-icon svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-name {
    color: #0d0c0f;
    color: var(--color-neutral-900);
    flex-grow: 1;
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-status {
    margin-left: auto;
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-status svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-status svg:not(.echo-progress-circle) {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-status svg:not(.echo-progress-circle), .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file .echo-file-uploader-file-status svg:not(.echo-progress-circle) > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file:has(.echo-file-uploader-file-status .echo-progress-circle:not(.hidden)) .echo-file-uploader-file-icon, .echo-file-uploader .echo-file-uploader-files .echo-file-uploader-file:has(.echo-file-uploader-file-status .echo-progress-circle:not(.hidden)) .echo-file-uploader-file-name {
    opacity: 0.3;
  }
  body:has(footer.echo-audio-bar:not(.hidden)) .echo-file-uploader {
    bottom: calc(1.5rem + 4.25rem);
    bottom: calc(1.5rem + var(--layout-authenticated-audio-bar-height));
  }
  @media (max-width: 700px) {
    .echo-file-uploader {
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: 100%;
      transform: none;
      border-radius: 1.25rem 1.25rem 0 0;
      border-radius: var(--radius-20) var(--radius-20) 0 0;
      border-bottom: none;
      padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    body:has(footer.echo-audio-bar:not(.hidden)) .echo-file-uploader {
      bottom: calc(1rem + 4.5rem + 0.75rem);
      bottom: calc(var(--layout-mobile-pill-inset) + var(--layout-mobile-audio-bar-height) + var(--layout-mobile-pill-gap));
    }
  }
  .echo-tree {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .echo-tree .echo-tree-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper:has(.echo-tree-node:hover:not(:disabled)):not(:has(.echo-tree-node.selected)) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper:has(.echo-tree-node.selected) {
    background: #f4f1ff;
    background: var(--color-primary-lavender-100);
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper:has(.echo-tree-node.selected) .echo-tree-toggle {
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper:has(.echo-tree-node.selected) .echo-tree-node {
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper:has(.echo-tree-node.selected) .echo-tree-node .echo-tree-icon svg, .echo-tree .echo-tree-item .echo-tree-node-wrapper:has(.echo-tree-node.selected) .echo-tree-node .echo-tree-icon svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper .echo-tree-indent-spacer {
    width: calc(0 * 1.25rem - 0.5rem);
    width: calc(var(--tree-depth, 0) * 1.25rem - 0.5rem);
    flex-shrink: 0;
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper .echo-tree-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    margin-right: -0.25rem;
    height: auto;
    flex-shrink: 0;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 1.25rem 1.25rem;
            mask-size: 1.25rem 1.25rem;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M9.19104 7.55147C9.51565 7.10465 10.141 7.00559 10.5878 7.3302C12.1206 8.44378 13.4945 9.74986 14.6733 11.2143C15.109 11.7557 15.109 12.5228 14.6733 13.0641C13.4945 14.5286 12.1206 15.8347 10.5878 16.9483C10.141 17.2729 9.51565 17.1738 9.19104 16.727C8.86643 16.2802 8.96549 15.6548 9.41231 15.3302C10.6871 14.4041 11.8393 13.3323 12.8442 12.1392C11.8393 10.9462 10.6871 9.8744 9.41231 8.94826C8.96549 8.62365 8.86643 7.99828 9.19104 7.55147Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M9.19104 7.55147C9.51565 7.10465 10.141 7.00559 10.5878 7.3302C12.1206 8.44378 13.4945 9.74986 14.6733 11.2143C15.109 11.7557 15.109 12.5228 14.6733 13.0641C13.4945 14.5286 12.1206 15.8347 10.5878 16.9483C10.141 17.2729 9.51565 17.1738 9.19104 16.727C8.86643 16.2802 8.96549 15.6548 9.41231 15.3302C10.6871 14.4041 11.8393 13.3323 12.8442 12.1392C11.8393 10.9462 10.6871 9.8744 9.41231 8.94826C8.96549 8.62365 8.86643 7.99828 9.19104 7.55147Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    transition: transform 150ms ease-in-out;
    cursor: pointer;
    pointer-events: auto;
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper .echo-tree-toggle:not([data-action]) {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .echo-tree .echo-tree-item .echo-tree-node-wrapper .echo-tree-toggle-spacer {
    width: 1.25rem;
    margin-right: -0.25rem;
    height: auto;
    flex-shrink: 0;
  }
  .echo-tree .echo-tree-item .echo-tree-node {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    cursor: pointer;
    color: #0d0c0f;
    color: var(--color-neutral-900);
    text-decoration: none;
    background: transparent;
    border: none;
    flex: 1 1;
    text-align: left;
    min-width: 0;
  }
  .echo-tree .echo-tree-item .echo-tree-node .echo-tree-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .echo-tree .echo-tree-item .echo-tree-node .echo-tree-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-tree .echo-tree-item .echo-tree-node .echo-tree-icon svg, .echo-tree .echo-tree-item .echo-tree-node .echo-tree-icon svg > path {
    fill: #747483;
    fill: var(--color-neutral-500);
  }
  .echo-tree .echo-tree-item .echo-tree-node .echo-tree-label {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .echo-tree .echo-tree-item .echo-tree-node .echo-tree-accessory {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .echo-tree .echo-tree-item .echo-tree-node .echo-tree-accessory svg {
    width: 1rem;
    height: 1rem;
  }
  .echo-tree .echo-tree-item .echo-tree-node .echo-tree-accessory svg, .echo-tree .echo-tree-item .echo-tree-node .echo-tree-accessory svg > path {
    fill: #747483;
    fill: var(--color-neutral-500);
  }
  .echo-tree .echo-tree-item .echo-tree-node:disabled {
    cursor: not-allowed;
    opacity: 0.3;
  }
  .echo-tree .echo-tree-item.expanded > .echo-tree-node-wrapper .echo-tree-toggle {
    transform: rotate(90deg);
  }
  .echo-tree .echo-tree-item.expanded > .echo-tree-children {
    display: flex;
  }
  .echo-tree .echo-tree-item.collapsed > .echo-tree-children {
    display: none;
  }
  .echo-tree .echo-tree-item .echo-tree-children {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .echo-multi-select-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 3rem;
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
    border-radius: 0.75rem;
    border-radius: var(--radius-12);
  }
  .echo-multi-select-actions .echo-multi-select-actions-close-btn {
    margin-right: 1rem;
  }
  .echo-multi-select-actions .echo-multi-select-actions-count {
    color: #0d0c0f;
    color: var(--color-neutral-900);
    margin-right: 2.5rem;
  }
  .echo-multi-select-actions .echo-multi-select-actions-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .echo-multi-select-actions .echo-multi-select-actions-actions .echo-btn-minimal svg, .echo-multi-select-actions .echo-multi-select-actions-actions .echo-btn-minimal svg > path {
    fill: #747483;
    fill: var(--color-neutral-500);
  }
  .echo-multi-select-actions .echo-multi-select-actions-actions .echo-btn-minimal:hover svg, .echo-multi-select-actions .echo-multi-select-actions-actions .echo-btn-minimal:hover svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px dashed #747483;
    border: 1px dashed var(--color-neutral-500);
    border-radius: 1rem;
    border-radius: var(--radius-16);
    flex: 1 1;
  }
  .echo-dropzone .echo-dropzone-icon {
    margin-bottom: 0.75rem;
  }
  .echo-dropzone .echo-dropzone-icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }
  .echo-dropzone .echo-dropzone-icon svg, .echo-dropzone .echo-dropzone-icon svg > path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
  }
  .echo-dropzone .echo-dropzone-title {
    color: #0d0c0f;
    color: var(--color-neutral-900);
    margin-bottom: 0.25rem;
  }
  .echo-dropzone .echo-dropzone-instructions {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-dropzone .echo-dropzone-instructions button {
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  body[dragover] .echo-dropzone {
    border: 2px dashed #775be6;
    border: 2px dashed var(--color-primary-lavender-500);
    background: #f4f1ff;
    background: var(--color-primary-lavender-100);
  }
  body[dragover] .echo-dropzone .echo-dropzone-icon svg, body[dragover] .echo-dropzone .echo-dropzone-icon svg > path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-playlist {
    --playlist-accent-color: var(--color-primary-lavender-500);
    --playlist-border-color: var(--color-neutral-300);
    --playlist-outer-bg-color: var(--color-neutral-100);
    --playlist-inner-bg-color: var(--color-neutral-0);
    --playlist-text-color: var(--color-neutral-900);
    --playlist-powered-by-color: var(--color-neutral-400);
    --playlist-time-color: var(--color-neutral-500);
    --playlist-inverted-text-color: var(--color-neutral-0);
    --playlist-inner-bg-hover-color: var(--color-neutral-200);
    display: flex;
    container-type: inline-size;
    container-name: playlist;
    border: 1px solid #d6d6e8;
    border: 1px solid var(--playlist-border-color);
    background: #f9f9fe;
    background: var(--playlist-outer-bg-color);
    border-radius: 1.3125rem;
    min-width: 0;
  }
  .echo-playlist.dark {
    --playlist-border-color: var(--color-neutral-900);
    --playlist-outer-bg-color: var(--color-neutral-900);
    --playlist-inner-bg-color: var(--color-neutral-800);
    --playlist-text-color: var(--color-neutral-0);
    --playlist-powered-by-color: var(--color-neutral-200);
    --playlist-time-color: var(--color-neutral-400);
    --playlist-inverted-text-color: var(--color-neutral-0);
    --playlist-inner-bg-hover-color: var(--color-neutral-500);
  }
  .echo-playlist .echo-playlist-inner {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
    height: auto;
  }
  @container playlist (width > 640px) {
    .echo-playlist .echo-playlist-inner {
      flex-direction: row;
      align-items: stretch;
      justify-content: center;
      height: 22rem;
    }
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    flex: 0 0 auto;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content {
    display: grid;
    grid-template-rows: [name] auto [track-title] auto [time] auto [waveform] 1fr [controls] auto [footer] auto;
    grid-template-columns: 1fr;
    align-items: center;
    padding: 1.5rem 1.75rem 1rem 1.75rem;
    border-radius: 0.75rem;
    height: 20rem;
    width: 100%;
    background: var(--playlist-inner-bg-color);
  }
  @container playlist (width > 640px) {
    .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content {
      width: 20rem;
    }
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-name {
    color: var(--playlist-text-color);
    text-align: center;
    margin-bottom: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-track-title:not(:empty) {
    color: var(--playlist-text-color);
    text-align: center;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-time {
    color: var(--playlist-time-color);
    text-align: center;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-waveform {
    height: 2rem;
    width: 100%;
    align-self: center;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button:not(:first-child):not(:last-child) {
    background: var(--playlist-accent-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button:not(:first-child):not(:last-child) > svg, .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button:not(:first-child):not(:last-child) > svg > path {
    fill: var(--playlist-inverted-text-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button > svg, .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button > svg > path {
    fill: var(--playlist-text-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button:disabled:not(:first-child):not(:last-child) {
    background: #ebebf7;
    background: var(--color-neutral-200);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button:disabled:not(:first-child):not(:last-child) > svg, .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-controls button:disabled:not(:first-child):not(:last-child) > svg > path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-footer {
    color: var(--playlist-powered-by-color);
    text-align: center;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-player .echo-playlist-player-content .echo-playlist-player-content-footer strong {
    color: var(--playlist-text-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 1rem 1rem 1rem;
    flex: 1 1 20.5rem;
    overflow-y: auto;
    gap: 0.5rem;
    scrollbar-width: none;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks ::-webkit-scrollbar {
    display: none;
  }
  @container playlist (width > 640px) {
    .echo-playlist .echo-playlist-inner .echo-playlist-tracks {
      padding: 1rem 1rem 1rem 0;
      flex: 1 1;
    }
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-tracks-empty {
    display: flex;
    flex: 1 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--playlist-time-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    height: 3.5rem;
    border-radius: 1rem;
    border-radius: var(--radius-16);
    background: var(--playlist-inner-bg-color);
    padding: 1.25rem;
    position: relative;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-play-btn, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.25rem;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-play-btn svg, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-play-btn svg, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-play-btn svg > path, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-icon svg, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-icon svg > path {
    fill: var(--playlist-text-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-play-btn {
    display: none;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-title {
    color: var(--playlist-text-color);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border-radius: var(--radius-16);
    z-index: 0;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-error {
    color: #f03c66;
    color: var(--color-semantic-error-500);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-time {
    color: var(--playlist-text-color);
    text-align: right;
    margin-left: auto;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-ellipsis {
    display: none;
    align-items: end;
    justify-content: center;
    margin-left: auto;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track .echo-playlist-track-ellipsis .echo-dropdown > button {
    margin-right: -0.75rem;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:has(.echo-playlist-track-error) {
    background-color: #fdebf0;
    background-color: var(--color-semantic-error-100);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:has(.echo-playlist-track-error) .echo-list-file-icon > svg, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:has(.echo-playlist-track-error) .echo-list-file-icon > svg > path {
    fill: #f03c66;
    fill: var(--color-semantic-error-500);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:hover {
    background: var(--playlist-inner-bg-hover-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:hover .echo-playlist-track-icon {
    display: none;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:hover .echo-playlist-track-play-btn {
    display: flex;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:hover .echo-playlist-track-badge {
    display: none;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:hover:has(.echo-playlist-track-ellipsis) .echo-playlist-track-time {
    display: none;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:hover:has(.echo-playlist-track-ellipsis) .echo-playlist-track-ellipsis {
    display: flex;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] {
    background: var(--playlist-accent-color);
    color: var(--playlist-inverted-text-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] .echo-playlist-track-icon {
    display: none;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] .echo-playlist-track-play-btn {
    display: flex;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] .echo-playlist-track-play-btn svg, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] .echo-playlist-track-play-btn svg > path {
    fill: var(--playlist-inverted-text-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] .echo-playlist-track-title, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] .echo-playlist-track-time {
    color: var(--playlist-inverted-text-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] .echo-playlist-track-ellipsis .echo-dropdown > button svg, .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track[data-audio-controls-is-current-track-value=true] .echo-playlist-track-ellipsis .echo-dropdown > button svg > path {
    fill: var(--playlist-inverted-text-color);
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:has(.echo-dropdown[data-ui--dropdown-open-value=true]) .echo-playlist-track-time {
    display: none;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-playlist-track:has(.echo-dropdown[data-ui--dropdown-open-value=true]) .echo-playlist-track-ellipsis {
    display: flex;
  }
  .echo-playlist .echo-playlist-inner .echo-playlist-tracks .echo-dropzone {
    border-radius: 0.75rem;
  }
  .echo-audio-player {
    border-radius: 1.25rem;
    border-radius: var(--radius-20);
    border: 1px solid #d6d6e8;
    border: 1px solid var(--color-neutral-300);
    background: white;
    background: var(--color-neutral-0);
    padding: 4.25rem 3.5rem 2.625rem 3.5rem;
    position: relative;
  }
  .echo-audio-player .echo-audio-player-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-out-btn, .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-in-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    border: 0.5px solid #ebebf7;
    border: 0.5px solid var(--color-neutral-200);
    background: white;
    background: var(--color-neutral-0);
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(187, 187, 187, 0.25);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-out-btn:hover:not([disabled]), .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-in-btn:hover:not([disabled]) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-out-btn:active:not([disabled]), .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-in-btn:active:not([disabled]) {
    box-shadow: 0.125rem 0.125rem 0.375rem 0 rgba(187, 187, 187, 0.125);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-out-btn svg, .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-in-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-out-btn[disabled], .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-in-btn[disabled] {
    box-shadow: 0.125rem 0.125rem 0.375rem 0 rgba(187, 187, 187, 0.125);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-out-btn[disabled] > svg, .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-out-btn[disabled] > svg > path, .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-in-btn[disabled] > svg, .echo-audio-player .echo-audio-player-controls .echo-audio-player-zoom-in-btn[disabled] > svg > path {
    fill: #ebebf7;
    fill: var(--color-neutral-200);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background: #775be6;
    background: var(--color-primary-lavender-500);
    box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(86, 60, 191, 0.32);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-play-btn:hover:not([disabled]) {
    background: #6a52c8;
    background: var(--color-primary-lavender-600);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-play-btn:active:not([disabled]) {
    box-shadow: 0.125rem 0.125rem 0.375rem 0 rgba(86, 60, 191, 0.16);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-play-btn svg {
    width: 2rem;
    height: 2rem;
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-play-btn > svg, .echo-audio-player .echo-audio-player-controls .echo-audio-player-play-btn > svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-audio-player .echo-audio-player-controls .echo-audio-player-play-btn[disabled] {
    background: #ebebf7;
    background: var(--color-neutral-200);
    box-shadow: none;
    cursor: not-allowed;
  }
  .echo-audio-player .echo-audio-player-waveform {
    position: relative;
    margin: 5px 0 -5px 0;
    min-height: 160px;
    padding: 20px 20px 6px 20px;
  }
  .echo-audio-player .echo-audio-player-waveform .echo-audio-player-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .echo-audio-player .echo-audio-player-waveform::-webkit-scrollbar {
    height: 2px;
  }
  .echo-audio-player .echo-audio-player-waveform::-webkit-scrollbar-track {
    background: #ebebf7;
    background: var(--color-neutral-200);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  .echo-audio-player .echo-audio-player-waveform::-webkit-scrollbar-thumb {
    background: #a5a5b0;
    background: var(--color-neutral-400);
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
  }
  @media (max-width: 700px) {
    .echo-audio-player {
      padding: 3.25rem 1rem 1rem 1rem;
      background: #f9f9fe;
      background: var(--color-neutral-100);
      border: none;
    }
  }
  .echo-waveform {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .echo-waveform-timeline-label {
    line-height: 0;
  }
  .echo-waveform-hover {
    position: absolute;
    top: 0;
    height: 100%;
    height: var(--echo-hover-line-height, 100%);
    width: 0;
    pointer-events: none;
    z-index: 5;
    display: none;
  }
  .echo-waveform-hover-line {
    position: absolute;
    bottom: 0;
    left: -1px;
    width: 2px;
    background-color: #1a042a;
    background-color: var(--color-primary-lavender-900);
  }
  .echo-waveform-hover-label {
    position: absolute;
    left: -1px;
    padding: 0 0.25rem;
    border-radius: 0.25rem 0.25rem 0.25rem 0;
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    color: white;
    color: var(--color-neutral-0);
    white-space: nowrap;
  }
  .echo-waveform-hover--outset .echo-waveform-hover-line {
    top: 0;
  }
  .echo-waveform-hover--outset .echo-waveform-hover-label {
    bottom: 100%;
  }
  .echo-waveform-hover--inset .echo-waveform-hover-line {
    top: 0.25rem;
  }
  .echo-waveform-hover--inset .echo-waveform-hover-label {
    top: 0;
  }
  .echo-waveform-hover-label--left {
    left: auto;
    right: -1px;
    border-radius: 0.25rem 0.25rem 0 0.25rem;
  }
  .echo-waveform-timeline {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .echo-waveform-marker {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: 2;
    background-color: color-mix(in srgb, #d6d6e8 18%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, #d6d6e8 18%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-neutral-300) 18%, transparent);
    }
}
  }
  .echo-waveform-marker::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 24px);
    height: calc(var(--echo-marker-row-top, 100%) + 24px);
  }
  .echo-waveform-marker.hidden:not(.active) {
    display: none;
  }
  .echo-waveform-marker:hover .echo-waveform-marker-avatar, .echo-waveform-marker.active .echo-waveform-marker-avatar {
    box-shadow: 0 0 0 2px #775be6;
    box-shadow: 0 0 0 2px var(--color-primary-lavender-500);
  }
  .echo-waveform-marker:hover, .echo-waveform-marker.active {
    background-color: color-mix(in srgb, #d6d6e8 38%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, #d6d6e8 38%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-neutral-300) 38%, transparent);
    }
}
  }
  .echo-waveform-marker:hover .echo-waveform-marker-start, .echo-waveform-marker:hover .echo-waveform-marker-end, .echo-waveform-marker.active .echo-waveform-marker-start, .echo-waveform-marker.active .echo-waveform-marker-end {
    opacity: 1;
  }
  .echo-waveform-marker:hover .echo-waveform-marker-start .echo-waveform-marker-handle, .echo-waveform-marker:hover .echo-waveform-marker-end .echo-waveform-marker-handle, .echo-waveform-marker.active .echo-waveform-marker-start .echo-waveform-marker-handle, .echo-waveform-marker.active .echo-waveform-marker-end .echo-waveform-marker-handle {
    opacity: 1;
  }
  .echo-waveform-marker:hover .echo-waveform-marker-delete, .echo-waveform-marker.active .echo-waveform-marker-delete {
    opacity: 1;
    pointer-events: all;
  }
  .echo-waveform-marker .echo-waveform-marker-start, .echo-waveform-marker .echo-waveform-marker-end {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    height: var(--echo-marker-row-top, 100%);
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.12s ease;
  }
  .echo-waveform-marker .echo-waveform-marker-start .echo-waveform-marker-handle, .echo-waveform-marker .echo-waveform-marker-end .echo-waveform-marker-handle {
    position: absolute;
    top: 30px;
    top: var(--echo-handle-top, 30px);
    left: -11px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background-color: white;
    background-color: var(--color-neutral-0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: ew-resize;
    opacity: 0;
    pointer-events: all;
    transition: opacity 0.12s ease;
  }
  .echo-waveform-marker .echo-waveform-marker-start .echo-waveform-marker-handle *, .echo-waveform-marker .echo-waveform-marker-end .echo-waveform-marker-handle * {
    pointer-events: none;
  }
  .echo-waveform-marker .echo-waveform-marker-start .echo-waveform-marker-handle .echo-waveform-marker-handle-grip, .echo-waveform-marker .echo-waveform-marker-end .echo-waveform-marker-handle .echo-waveform-marker-handle-grip {
    width: 14px;
    height: 7px;
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2215%22 height%3D%227%22 viewBox%3D%220 0 15 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.1458 3.39591L10.2083 1.45841C10.0417 1.29175 9.95833 1.09036 9.95833 0.854248C9.95833 0.618137 10.0417 0.416747 10.2083 0.250081C10.375 0.0834139 10.5764 8.06e-05 10.8125 8.05897e-05C11.0486 8.05794e-05 11.25 0.0834139 11.4167 0.250081L13.9792 2.81258C14.0625 2.89591 14.1215 2.98619 14.1562 3.08341C14.191 3.18064 14.2083 3.2848 14.2083 3.39591C14.2083 3.50703 14.191 3.61119 14.1562 3.70841C14.1215 3.80564 14.0625 3.89591 13.9792 3.97925L11.4167 6.54175C11.25 6.70841 11.0486 6.79175 10.8125 6.79175C10.5764 6.79175 10.375 6.70841 10.2083 6.54175C10.0417 6.37508 9.95833 6.17369 9.95833 5.93758C9.95833 5.70147 10.0417 5.50008 10.2083 5.33341L12.1458 3.39591ZM2.0625 3.39591L4 5.33341C4.16667 5.50008 4.25 5.70147 4.25 5.93758C4.25 6.17369 4.16667 6.37508 4 6.54175C3.83333 6.70841 3.63194 6.79175 3.39583 6.79175C3.15972 6.79175 2.95833 6.70841 2.79167 6.54175L0.229167 3.97925C0.145833 3.89591 0.0868054 3.80564 0.0520832 3.70841C0.017361 3.61119 -1.4358e-07 3.50703 -1.48437e-07 3.39591C-1.53293e-07 3.2848 0.017361 3.18064 0.0520832 3.08341C0.0868054 2.98619 0.145833 2.89591 0.229166 2.81258L2.79167 0.250081C2.95833 0.0834143 3.15972 8.09242e-05 3.39583 8.09139e-05C3.63194 8.09036e-05 3.83333 0.0834142 4 0.250081C4.16667 0.416748 4.25 0.618137 4.25 0.854248C4.25 1.09036 4.16667 1.29175 4 1.45841L2.0625 3.39591Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2215%22 height%3D%227%22 viewBox%3D%220 0 15 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12.1458 3.39591L10.2083 1.45841C10.0417 1.29175 9.95833 1.09036 9.95833 0.854248C9.95833 0.618137 10.0417 0.416747 10.2083 0.250081C10.375 0.0834139 10.5764 8.06e-05 10.8125 8.05897e-05C11.0486 8.05794e-05 11.25 0.0834139 11.4167 0.250081L13.9792 2.81258C14.0625 2.89591 14.1215 2.98619 14.1562 3.08341C14.191 3.18064 14.2083 3.2848 14.2083 3.39591C14.2083 3.50703 14.191 3.61119 14.1562 3.70841C14.1215 3.80564 14.0625 3.89591 13.9792 3.97925L11.4167 6.54175C11.25 6.70841 11.0486 6.79175 10.8125 6.79175C10.5764 6.79175 10.375 6.70841 10.2083 6.54175C10.0417 6.37508 9.95833 6.17369 9.95833 5.93758C9.95833 5.70147 10.0417 5.50008 10.2083 5.33341L12.1458 3.39591ZM2.0625 3.39591L4 5.33341C4.16667 5.50008 4.25 5.70147 4.25 5.93758C4.25 6.17369 4.16667 6.37508 4 6.54175C3.83333 6.70841 3.63194 6.79175 3.39583 6.79175C3.15972 6.79175 2.95833 6.70841 2.79167 6.54175L0.229167 3.97925C0.145833 3.89591 0.0868054 3.80564 0.0520832 3.70841C0.017361 3.61119 -1.4358e-07 3.50703 -1.48437e-07 3.39591C-1.53293e-07 3.2848 0.017361 3.18064 0.0520832 3.08341C0.0868054 2.98619 0.145833 2.89591 0.229166 2.81258L2.79167 0.250081C2.95833 0.0834143 3.15972 8.09242e-05 3.39583 8.09139e-05C3.63194 8.09036e-05 3.83333 0.0834142 4 0.250081C4.16667 0.416748 4.25 0.618137 4.25 0.854248C4.25 1.09036 4.16667 1.29175 4 1.45841L2.0625 3.39591Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .echo-waveform-marker .echo-waveform-marker-start .echo-waveform-marker-handle-label, .echo-waveform-marker .echo-waveform-marker-end .echo-waveform-marker-handle-label {
    position: absolute;
    bottom: 100%;
    left: 0;
    padding: 0 0.25rem;
    border-radius: 0.25rem 0.25rem 0.25rem 0;
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    color: white;
    color: var(--color-neutral-0);
    white-space: nowrap;
    pointer-events: none;
  }
  .echo-waveform-marker .echo-waveform-marker-start {
    left: -1px;
  }
  .echo-waveform-marker .echo-waveform-marker-end {
    right: -1px;
  }
  .echo-waveform-marker .echo-waveform-marker-avatar {
    position: absolute;
    top: calc(100% + 4px);
    top: var(--echo-marker-row-top, calc(100% + 4px));
    left: 0;
    margin-left: -12px;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    color: white;
    color: var(--color-neutral-0);
    outline: 2px solid white;
    outline: 2px solid var(--color-neutral-0);
    cursor: pointer;
    pointer-events: all;
    transition: box-shadow 0.12s ease;
  }
  .echo-waveform-marker .echo-waveform-marker-delete {
    position: absolute;
    top: calc(100% + 4px);
    top: var(--echo-marker-row-top, calc(100% + 4px));
    right: 0;
    margin-right: -12px;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background-color: white;
    background-color: var(--color-neutral-0);
    border: 1px solid #f03c66;
    border: 1px solid var(--color-semantic-error-500);
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease, background-color 0.12s ease;
  }
  .echo-waveform-marker .echo-waveform-marker-delete::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #f03c66;
    background-color: var(--color-semantic-error-500);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z%22 fill%3D%22%230D0C0F%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .echo-waveform-marker .echo-waveform-marker-delete:hover {
    background-color: #f03c66;
    background-color: var(--color-semantic-error-500);
  }
  .echo-waveform-marker .echo-waveform-marker-delete:hover::before {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .echo-waveform-marker-group {
    position: absolute;
    z-index: 4;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background-color: white;
    background-color: var(--color-neutral-0);
    border: 1.5px solid #0d0c0f;
    border: 1.5px solid var(--color-neutral-900);
    color: #0d0c0f;
    color: var(--color-neutral-900);
    outline: 2px solid white;
    outline: 2px solid var(--color-neutral-0);
    cursor: pointer;
    pointer-events: all;
    transition: box-shadow 0.12s ease;
  }
  .echo-waveform-marker-group:hover, .echo-waveform-marker-group.popover-open, .echo-waveform-marker-group.active {
    box-shadow: 0 0 0 2px #775be6;
    box-shadow: 0 0 0 2px var(--color-primary-lavender-500);
  }
  .echo-waveform-marker.in-group .echo-waveform-marker-avatar {
    display: none;
  }
  .echo-waveform-marker.in-group:not(.active) {
    background-color: transparent;
    pointer-events: none;
  }
  .echo-waveform-marker.in-group:not(.active) .echo-waveform-marker-handle {
    pointer-events: none;
  }
  .echo-waveform-group-popover {
    position: fixed;
    z-index: 1050;
    min-width: 180px;
    max-width: 280px;
    padding: 0.25rem;
    background: white;
    background: var(--color-neutral-0);
    border: 1px solid #ebebf7;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }
  .echo-waveform-group-popover-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
  }
  .echo-waveform-group-popover-row:hover {
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  .echo-waveform-group-popover-avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-waveform-group-popover-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .echo-waveform-group-popover-time {
    flex-shrink: 0;
    color: #747483;
    color: var(--color-neutral-500);
  }
  .comment-list-item.active .comment-list-item-row {
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
    box-shadow: inset 0 0 0 1.5px #775be6;
    box-shadow: inset 0 0 0 1.5px var(--color-primary-lavender-500);
  }
  .echo-image-viewer {
    --echo-viewer-max-h: calc(100vh - var(--layout-header-height) - 1.5rem);
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
  }
  main:has(.echo-version-switcher-bar) .echo-image-viewer {
    --echo-version-switcher-reserve: 3.5rem;
    padding-top: 3.5rem;
    padding-top: var(--echo-version-switcher-reserve);
    --echo-viewer-max-h: calc(
    100vh - var(--layout-header-height) - 1.5rem - var(--echo-version-switcher-reserve)
  );
  }
  .echo-image-viewer__surface {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
  }
  .echo-image-viewer__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--echo-viewer-max-h);
    border-radius: 1.25rem;
    border-radius: var(--radius-20);
    box-shadow: 0 4px 24px rgba(13, 12, 15, 0.12);
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M16%204L19%207L21.5%2012L21%2015.5L20.5%2020L19%2021H11.5L7%2019.5L4%2016.5L3%2013L3.5%209L6%205.5L8.5%204L13%203L16%204Z'%20fill='%23ffffff'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M22%2012C22%206.47715%2017.5228%202%2012%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C12.4787%2022%2012.9501%2021.9663%2013.4118%2021.901L13.4134%2021.9008C14.0154%2021.8156%2014.4638%2021.7522%2014.7819%2021.7085C14.9411%2021.6866%2015.0647%2021.67%2015.157%2021.6584C15.2031%2021.6525%2015.2394%2021.6481%2015.2672%2021.645L15.3%2021.6415L15.3093%2021.6406L15.3125%2021.6403C15.3516%2021.6373%2015.3928%2021.634%2015.4212%2021.6317C15.435%2021.6306%2015.4457%2021.6298%2015.4518%2021.6293C15.4809%2021.627%2015.4837%2021.6271%2015.4816%2021.6271C15.4796%2021.6272%2015.4824%2021.627%2015.5115%2021.6272C15.5176%2021.6273%2015.5282%2021.6274%2015.5418%2021.6275C15.5703%2021.6278%2015.6118%2021.6283%2015.6512%2021.6286C15.7704%2021.6295%2015.913%2021.6392%2016.2895%2021.6661L18.4808%2021.8226C18.8768%2021.8509%2019.2352%2021.8765%2019.5332%2021.8722C19.8505%2021.8676%2020.2024%2021.8303%2020.5492%2021.6659C21.0391%2021.4336%2021.4336%2021.0391%2021.6659%2020.5492C21.8303%2020.2024%2021.8676%2019.8505%2021.8722%2019.5332C21.8765%2019.2353%2021.8509%2018.8769%2021.8226%2018.4809L21.6661%2016.2895C21.6392%2015.9129%2021.6295%2015.7705%2021.6286%2015.6512C21.6283%2015.6119%2021.6278%2015.5706%2021.6275%2015.5421C21.6274%2015.5284%2021.6273%2015.5177%2021.6272%2015.5115C21.627%2015.4824%2021.6272%2015.4796%2021.6271%2015.4816C21.6271%2015.4837%2021.627%2015.4809%2021.6293%2015.4518C21.6298%2015.4457%2021.6306%2015.435%2021.6317%2015.4214C21.634%2015.393%2021.6373%2015.3518%2021.6403%2015.3126L21.6404%2015.3112L21.6406%2015.3093L21.6415%2015.2999L21.645%2015.2672C21.6481%2015.2394%2021.6525%2015.2031%2021.6584%2015.157C21.67%2015.0647%2021.6866%2014.9411%2021.7085%2014.7819C21.7522%2014.4636%2021.8157%2014.0145%2021.901%2013.4118C21.9663%2012.95%2022%2012.4787%2022%2012ZM12%204C16.4183%204%2020%207.58172%2020%2012C20%2012.3847%2019.9729%2012.7625%2019.9207%2013.1317L19.8976%2013.2947C19.7463%2014.3644%2019.6609%2014.9679%2019.6462%2015.1588C19.643%2015.2007%2019.641%2015.2257%2019.6392%2015.2483C19.6379%2015.2639%2019.6368%2015.2783%2019.6353%2015.2964C19.6327%2015.3305%2019.6298%2015.3691%2019.6283%2015.4125C19.6268%2015.4558%2019.627%2015.4945%2019.6273%2015.5287C19.6275%2015.5468%2019.6276%2015.5614%2019.6278%2015.577C19.628%2015.5997%2019.6283%2015.6247%2019.6286%2015.6667C19.6301%2015.8579%2019.6452%2016.0684%2019.6684%2016.3937L19.825%2018.5853C19.8569%2019.0316%2019.8754%2019.3028%2019.8724%2019.5042C19.8706%2019.6312%2019.8597%2019.684%2019.8562%2019.6976C19.8222%2019.7664%2019.7664%2019.8222%2019.6976%2019.8562C19.684%2019.8597%2019.6312%2019.8706%2019.5042%2019.8724C19.3028%2019.8754%2019.0316%2019.8568%2018.5853%2019.825L16.3934%2019.6684C16.0684%2019.6452%2015.8578%2019.6301%2015.6667%2019.6286C15.6248%2019.6283%2015.5997%2019.628%2015.577%2019.6278C15.5614%2019.6276%2015.5468%2019.6275%2015.5287%2019.6273C15.4945%2019.627%2015.4558%2019.6268%2015.4125%2019.6283C15.3691%2019.6298%2015.3305%2019.6327%2015.2964%2019.6353C15.2784%2019.6367%2015.2639%2019.6379%2015.2484%2019.6392C15.2257%2019.641%2015.2007%2019.643%2015.1588%2019.6462C14.968%2019.6609%2014.3648%2019.7463%2013.2959%2019.8975L13.1317%2019.9207C12.7625%2019.9729%2012.3847%2020%2012%2020C7.58172%2020%204%2016.4183%204%2012C4%207.58172%207.58172%204%2012%204Z'%20fill='%23ffffff'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M22%2012C22%206.47715%2017.5228%202%2012%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C12.4787%2022%2012.9501%2021.9663%2013.4118%2021.901L13.4134%2021.9008C14.0154%2021.8156%2014.4638%2021.7522%2014.7819%2021.7085C14.9411%2021.6866%2015.0647%2021.67%2015.157%2021.6584C15.2031%2021.6525%2015.2394%2021.6481%2015.2672%2021.645L15.3%2021.6415L15.3093%2021.6406L15.3125%2021.6403C15.3516%2021.6373%2015.3928%2021.634%2015.4212%2021.6317C15.435%2021.6306%2015.4457%2021.6298%2015.4518%2021.6293C15.4809%2021.627%2015.4837%2021.6271%2015.4816%2021.6271C15.4796%2021.6272%2015.4824%2021.627%2015.5115%2021.6272C15.5176%2021.6273%2015.5282%2021.6274%2015.5418%2021.6275C15.5703%2021.6278%2015.6118%2021.6283%2015.6512%2021.6286C15.7704%2021.6295%2015.913%2021.6392%2016.2895%2021.6661L18.4808%2021.8226C18.8768%2021.8509%2019.2352%2021.8765%2019.5332%2021.8722C19.8505%2021.8676%2020.2024%2021.8303%2020.5492%2021.6659C21.0391%2021.4336%2021.4336%2021.0391%2021.6659%2020.5492C21.8303%2020.2024%2021.8676%2019.8505%2021.8722%2019.5332C21.8765%2019.2353%2021.8509%2018.8769%2021.8226%2018.4809L21.6661%2016.2895C21.6392%2015.9129%2021.6295%2015.7705%2021.6286%2015.6512C21.6283%2015.6119%2021.6278%2015.5706%2021.6275%2015.5421C21.6274%2015.5284%2021.6273%2015.5177%2021.6272%2015.5115C21.627%2015.4824%2021.6272%2015.4796%2021.6271%2015.4816C21.6271%2015.4837%2021.627%2015.4809%2021.6293%2015.4518C21.6298%2015.4457%2021.6306%2015.435%2021.6317%2015.4214C21.634%2015.393%2021.6373%2015.3518%2021.6403%2015.3126L21.6404%2015.3112L21.6406%2015.3093L21.6415%2015.2999L21.645%2015.2672C21.6481%2015.2394%2021.6525%2015.2031%2021.6584%2015.157C21.67%2015.0647%2021.6866%2014.9411%2021.7085%2014.7819C21.7522%2014.4636%2021.8157%2014.0145%2021.901%2013.4118C21.9663%2012.95%2022%2012.4787%2022%2012ZM12%204C16.4183%204%2020%207.58172%2020%2012C20%2012.3847%2019.9729%2012.7625%2019.9207%2013.1317L19.8976%2013.2947C19.7463%2014.3644%2019.6609%2014.9679%2019.6462%2015.1588C19.643%2015.2007%2019.641%2015.2257%2019.6392%2015.2483C19.6379%2015.2639%2019.6368%2015.2783%2019.6353%2015.2964C19.6327%2015.3305%2019.6298%2015.3691%2019.6283%2015.4125C19.6268%2015.4558%2019.627%2015.4945%2019.6273%2015.5287C19.6275%2015.5468%2019.6276%2015.5614%2019.6278%2015.577C19.628%2015.5997%2019.6283%2015.6247%2019.6286%2015.6667C19.6301%2015.8579%2019.6452%2016.0684%2019.6684%2016.3937L19.825%2018.5853C19.8569%2019.0316%2019.8754%2019.3028%2019.8724%2019.5042C19.8706%2019.6312%2019.8597%2019.684%2019.8562%2019.6976C19.8222%2019.7664%2019.7664%2019.8222%2019.6976%2019.8562C19.684%2019.8597%2019.6312%2019.8706%2019.5042%2019.8724C19.3028%2019.8754%2019.0316%2019.8568%2018.5853%2019.825L16.3934%2019.6684C16.0684%2019.6452%2015.8578%2019.6301%2015.6667%2019.6286C15.6248%2019.6283%2015.5997%2019.628%2015.577%2019.6278C15.5614%2019.6276%2015.5468%2019.6275%2015.5287%2019.6273C15.4945%2019.627%2015.4558%2019.6268%2015.4125%2019.6283C15.3691%2019.6298%2015.3305%2019.6327%2015.2964%2019.6353C15.2784%2019.6367%2015.2639%2019.6379%2015.2484%2019.6392C15.2257%2019.641%2015.2007%2019.643%2015.1588%2019.6462C14.968%2019.6609%2014.3648%2019.7463%2013.2959%2019.8975L13.1317%2019.9207C12.7625%2019.9729%2012.3847%2020%2012%2020C7.58172%2020%204%2016.4183%204%2012C4%207.58172%207.58172%204%2012%204Z'%20fill='%230d0c0f'/%3E%3C/svg%3E") 14 14, crosshair;
  }
  .echo-image-viewer.is-composing .echo-image-viewer__image {
    cursor: default;
  }
  .echo-image-viewer__loader {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .echo-image-viewer.is-loading .echo-image-viewer__loader {
    display: flex;
  }
  .echo-image-viewer.is-loading .echo-image-viewer__surface {
    visibility: hidden;
  }
  .echo-image-viewer__pins {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .echo-image-viewer__zoom {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border: none;
    border-radius: 9999px;
    background: rgba(13, 12, 15, 0.55);
    cursor: pointer;
    transition: background 0.12s ease;
  }
  .echo-image-viewer__zoom:hover, .echo-image-viewer__zoom:focus-visible {
    background: rgba(13, 12, 15, 0.75);
  }
  .echo-image-viewer__hint {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: rgba(13, 12, 15, 0.65);
    color: white;
    color: var(--color-neutral-0);
    font-size: 0.75rem;
    pointer-events: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .echo-image-viewer__hint {
      display: none;
    }
  }
  .echo-image-viewer__popup {
    margin: 0;
    padding: 0.5rem;
    border: none;
    border-radius: 1.25rem;
    border-radius: var(--radius-20);
    background: white;
    background: var(--color-neutral-0);
    box-shadow: 0 8px 32px rgba(13, 12, 15, 0.18);
    max-width: min(360px, 90vw);
  }
  .echo-comment-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 2px 4px rgba(13, 12, 15, 0.3));
    transition: transform 0.12s ease;
  }
  .echo-comment-pin:hover, .echo-comment-pin:focus-visible {
    z-index: 5;
    transform: translate(-50%, -50%) scale(1.1);
  }
  .echo-comment-pin--draft {
    pointer-events: none;
  }
  .echo-comment-pin__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .echo-comment-pin__fill path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-comment-pin__outline path {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .echo-comment-pin.active .echo-comment-pin__fill path, .echo-comment-pin--draft .echo-comment-pin__fill path {
    fill: #775be6;
    fill: var(--color-primary-lavender-500);
  }
  .echo-pdf-viewer {
    flex-direction: column;
    gap: 0.75rem;
  }
  .echo-pdf-viewer .echo-image-viewer__image {
    max-height: calc(var(--echo-viewer-max-h) - 2rem);
  }
  .echo-pdf-viewer__stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  header.echo-header-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    height: 3.5rem;
    height: var(--layout-header-height);
    z-index: 9;
    position: fixed;
    top: 0;
    left: 17.4375rem;
    left: var(--layout-authenticated-sidebar-width);
    width: calc(100vw - 17.4375rem);
    width: calc(100vw - var(--layout-authenticated-sidebar-width));
    padding: 0 2rem;
  }
  header.echo-header-client {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    height: 3.5rem;
    height: var(--layout-header-height);
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 1.25rem;
  }
  header.echo-header-client .echo-header-logo-full {
    display: block;
    margin-left: 0.25rem;
  }
  header.echo-header-client .echo-header-logo-full svg {
    height: 1.5rem;
    width: auto;
  }
  header.echo-header-client .echo-header-logo-full svg, header.echo-header-client .echo-header-logo-full svg > g > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  header.echo-header-client .echo-header-logo-icon {
    display: block;
  }
  header.echo-header-client .echo-header-logo-icon svg {
    height: 1.25rem;
    width: 1.25rem;
  }
  header.echo-header-client .echo-header-logo-icon svg > g > path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
  }
  header.echo-header-client .echo-header-logo-icon:hover svg > g > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  @media (max-width: 700px) {
    header.echo-header-main {
      display: none;
    }
  }
  @media (max-width: calc(700px - 0.02px)) {
    body:has(main.echo-main-client-index) header.echo-header-client {
      background: white;
      background: var(--color-neutral-0);
    }
    body:has(main.echo-main-client-index) .echo-header-brand-logo {
      align-self: center;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 10;
      margin-top: -3.75rem;
      margin-bottom: 2rem;
    }
    body:has(main.echo-main-client-index) .echo-header-brand-logo svg, body:has(main.echo-main-client-index) .echo-header-brand-logo .echo-header-brand-logo-img {
      height: auto;
      max-height: 6rem;
      max-width: 11rem;
      width: auto;
      -o-object-fit: contain;
         object-fit: contain;
    }
    body:has(main.echo-main-client-index) .echo-header-brand-logo .echo-header-brand-initial {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4rem;
      height: 4rem;
      border-radius: 1rem;
      border-radius: var(--radius-16);
      background: #775be6;
      background: var(--color-primary-lavender-500);
      color: white;
      color: var(--color-neutral-0);
      font-weight: 700;
      font-size: 1.75rem;
      line-height: 1;
    }
  }
  .echo-mobile-top-bar {
    display: none;
  }
  @media (max-width: 700px) {
    .echo-mobile-top-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3.5rem;
      height: var(--layout-header-height);
      padding: 0 0.5rem;
      background: #1a042a;
      background: var(--color-primary-lavender-900);
      z-index: 9;
    }
    .echo-mobile-top-bar .echo-mobile-top-bar-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 2.75rem;
      height: 2.75rem;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
    }
    .echo-mobile-top-bar .echo-mobile-top-bar-logo {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .echo-mobile-top-bar .echo-mobile-top-bar-logo svg {
      height: 1.25713rem;
      width: auto;
    }
    .echo-mobile-top-bar .echo-mobile-top-bar-logo svg, .echo-mobile-top-bar .echo-mobile-top-bar-logo svg path {
      fill: white;
      fill: var(--color-neutral-0);
    }
  }
  section.echo-sticky-top {
    display: flex;
    flex-direction: column;
  }
  body:has(main.echo-main) section.echo-sticky-top {
    container-type: scroll-state;
    position: sticky;
    top: calc(3.5rem);
    top: calc(var(--layout-header-height));
    background-color: white;
    background-color: var(--color-neutral-0);
    z-index: 9;
    margin-top: -2rem;
    padding-top: 2rem;
  }
  sidebar.echo-sidebar-authenticated {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 17.4375rem;
    width: var(--layout-authenticated-sidebar-width);
    height: 100vh;
    padding-bottom: 1.75rem;
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    display: flex;
    flex-direction: column;
  }
  sidebar.echo-sidebar-authenticated .echo-sidebar-logo {
    display: block;
    margin: 1.13rem 1.75rem;
  }
  sidebar.echo-sidebar-authenticated .echo-sidebar-logo svg {
    height: 1.25713rem;
    width: auto;
  }
  sidebar.echo-sidebar-authenticated .echo-sidebar-logo svg, sidebar.echo-sidebar-authenticated .echo-sidebar-logo svg path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  sidebar.echo-sidebar-authenticated hr.echo-sidebar-divider {
    border-radius: 6.1875rem;
    border-radius: var(--radius-99);
    background: white;
    background: var(--color-neutral-0);
    opacity: 0.12;
    height: 0.0625rem;
    margin: 1rem 0;
  }
  sidebar.echo-sidebar-authenticated nav {
    display: flex;
    padding: 0 1rem;
  }
  sidebar.echo-sidebar-authenticated nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    flex-grow: 1;
    gap: 0.25rem;
  }
  sidebar.echo-sidebar-authenticated .echo-progress-label .echo-meter-bar {
    height: 0.375rem;
  }
  sidebar.echo-sidebar-authenticated .echo-progress-label .echo-meter-bar::-webkit-meter-bar {
    height: 0.375rem;
  }
  .echo-sidebar-backdrop {
    display: none;
  }
  @media (max-width: 700px) {
    sidebar.echo-sidebar-authenticated .echo-sidebar-logo {
      display: none;
    }
    sidebar.echo-sidebar-authenticated {
      width: min(20rem, 85vw);
      height: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 50;
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s;
      will-change: transform;
    }
    sidebar.echo-sidebar-authenticated.is-open {
      transform: translateX(0);
      visibility: visible;
    }
    body:has(sidebar.echo-sidebar-authenticated.is-open) {
      overflow: hidden;
    }
    .echo-sidebar-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      background: #0d0c0f;
      background: var(--color-neutral-900);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 40;
    }
    body:has(sidebar.echo-sidebar-authenticated.is-open) .echo-sidebar-backdrop {
      opacity: 0.5;
      pointer-events: auto;
    }
  }
  sidebar.echo-sidebar-comments {
    position: fixed;
    top: calc(0.75rem + 3.5rem);
    top: calc(0.75rem + var(--layout-header-height));
    right: 0.75rem;
    z-index: 10;
    width: 24.5625rem;
    width: var(--layout-comments-sidebar-width);
    height: calc(100vh - 0.75rem - 3.5rem - 0.75rem);
    height: calc(100vh - 0.75rem - var(--layout-header-height) - 0.75rem);
    background: white;
    background: var(--color-neutral-0);
    border: 1px solid #d6d6e8;
    border: 1px solid var(--color-neutral-300);
    border-radius: 1.25rem;
    border-radius: var(--radius-20);
    display: flex;
    flex-direction: column;
  }
  .echo-audio-bar {
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    height: 4.25rem;
    height: var(--layout-authenticated-audio-bar-height);
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .echo-audio-bar .echo-audio-bar-inner {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: [icon] 3.75rem [content] 1fr [controls] 8rem [waveform] 1fr [duration] 8rem [volume] 1fr;
    grid-template-rows: 1fr;
    height: 4.25rem;
    height: var(--layout-authenticated-audio-bar-height);
    padding: 0 2rem;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-icon svg, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-icon svg > path {
    fill: #a5a5b0;
    fill: var(--color-neutral-400);
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content {
    padding: 0 2rem 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content .echo-audio-bar-title {
    color: white;
    color: var(--color-neutral-0);
    text-decoration: none;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content .echo-audio-bar-title:hover {
    text-decoration: underline;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content .echo-audio-bar-artist {
    color: #a5a5b0;
    color: var(--color-neutral-400);
    text-decoration: none;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content .echo-audio-bar-artist:hover {
    text-decoration: underline;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-previous-btn, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-next-btn {
    cursor: pointer;
    outline: none;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-previous-btn svg, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-next-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-previous-btn svg, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-previous-btn svg > path, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-next-btn svg, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-next-btn svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-previous-btn:disabled, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-next-btn:disabled {
    pointer-events: none;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-previous-btn:disabled svg, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-previous-btn:disabled svg > path, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-next-btn:disabled svg, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-next-btn:disabled svg > path {
    fill: #747483;
    fill: var(--color-neutral-500);
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-play-btn {
    cursor: pointer;
    margin: 0 0.75rem;
    outline: none;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-play-btn svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-play-btn svg, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-play-btn svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-waveform {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-waveform .echo-waveform {
    max-width: 12.75rem;
    height: 1.36388rem;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-time {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-volume {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-volume svg {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-volume svg, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-volume svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-volume .echo-input-slider {
    max-width: 4.375rem;
  }
  body:has(.echo-main-authenticated) .echo-audio-bar {
    left: 17.4375rem;
    left: var(--layout-authenticated-sidebar-width);
    width: calc(100% - 17.4375rem);
    width: calc(100% - var(--layout-authenticated-sidebar-width));
  }
  body:has(.echo-main-client-index) .echo-audio-bar .echo-audio-bar-inner {
    max-width: 62.5rem;
  }
  @media (max-width: 700px) {
    .echo-audio-bar, body:has(.echo-main-authenticated) .echo-audio-bar {
      left: 1rem;
      left: var(--layout-mobile-pill-inset);
      right: 1rem;
      right: var(--layout-mobile-pill-inset);
      width: auto;
      bottom: 1rem;
      bottom: var(--layout-mobile-pill-inset);
      height: 4.5rem;
      height: var(--layout-mobile-audio-bar-height);
      border-radius: 1rem;
      border-radius: var(--radius-16);
      overflow: hidden;
    }
    .echo-audio-bar .echo-audio-bar-inner {
      height: 4.5rem;
      height: var(--layout-mobile-audio-bar-height);
      grid-template-columns: [icon] auto [content] 1fr [controls] auto;
      -moz-column-gap: 0.75rem;
           column-gap: 0.75rem;
      padding: 0 1rem;
    }
    .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-waveform, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-time, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-volume, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-previous-btn, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-next-btn {
      display: none;
    }
    .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content {
      min-width: 0;
      padding-right: 0;
    }
    .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content .echo-audio-bar-title, .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-content .echo-audio-bar-artist {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .echo-audio-bar .echo-audio-bar-inner .echo-audio-bar-playback-controls .echo-audio-bar-play-btn {
      margin: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.75rem;
      min-height: 2.75rem;
    }
    .echo-audio-bar .echo-audio-bar-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1.5rem;
      z-index: 1;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: flex-end;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .echo-audio-bar .echo-audio-bar-progress .echo-audio-bar-progress-track {
      width: 100%;
      height: 0.1875rem;
      background: rgba(255, 255, 255, 0.2);
      overflow: hidden;
    }
    .echo-audio-bar .echo-audio-bar-progress:focus-visible .echo-audio-bar-progress-track {
      box-shadow: 0 0 0 2px var(--color-primary-lavender-300);
    }
    .echo-audio-bar .echo-audio-bar-progress .echo-audio-bar-progress-fill {
      height: 100%;
      width: 100%;
      transform-origin: left center;
      transform: scaleX(0);
      transform: scaleX(var(--bar-progress, 0));
      background: #775be6;
      background: var(--color-primary-lavender-500);
      transition: transform 0.1s linear;
    }
    .echo-audio-bar .echo-audio-bar-progress.is-scrubbing .echo-audio-bar-progress-fill {
      transition: none;
    }
    .echo-audio-bar .echo-audio-bar-playback-controls .echo-audio-bar-play-btn {
      position: relative;
      z-index: 2;
    }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .echo-audio-bar .echo-audio-bar-progress .echo-audio-bar-progress-fill {
      transition: none;
    }
  }
  main.echo-main-authenticated {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    margin: 3.5rem 0 0 17.4375rem;
    margin: var(--layout-header-height) 0 0 var(--layout-authenticated-sidebar-width);
    min-height: calc(100vh - 3.5rem);
    min-height: calc(100vh - var(--layout-header-height));
  }
  body:has(main.echo-main-authenticated) {
    background: #1a042a;
    background: var(--color-primary-lavender-900);
  }
  body:has(main.echo-main-client-index) {
    background: #1a042a;
    background: var(--color-primary-lavender-900);
  }
  body:has(main.echo-main-client-show) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  body:has(main.echo-main-authenticated)::before {
    content: "";
    position: fixed;
    top: 3.5rem;
    top: var(--layout-header-height);
    left: 17.4375rem;
    left: var(--layout-authenticated-sidebar-width);
    right: 0;
    bottom: 0;
    background: white;
    background: var(--color-neutral-0);
    border-top-left-radius: 1rem;
    border-top-left-radius: var(--radius-16);
    pointer-events: none;
    height: calc(100vh - 3.5rem);
    height: calc(100vh - var(--layout-header-height));
    z-index: -1;
  }
  main.echo-main-client-index {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 4rem 9.6875rem;
    margin: 3.5rem 1rem 1rem 1rem;
    margin: var(--layout-header-height) 1rem 1rem 1rem;
    min-height: calc(100vh - 3.5rem - 1rem);
    min-height: calc(100vh - var(--layout-header-height) - 1rem);
  }
  body:has(main.echo-main-client-index)::before {
    content: "";
    position: fixed;
    top: 3.5rem;
    top: var(--layout-header-height);
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background: white;
    background: var(--color-neutral-0);
    border-radius: 1rem;
    border-radius: var(--radius-16);
    pointer-events: none;
    height: calc(100vh - 3.5rem - 1rem);
    height: calc(100vh - var(--layout-header-height) - 1rem);
    z-index: -1;
  }
  body:has(main.echo-main-client-index)::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a042a;
    background: var(--color-primary-lavender-900);
    pointer-events: none;
    height: 1rem;
    width: 100%;
    z-index: 9;
  }
  main.echo-main-client-show {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f9f9fe;
    background: var(--color-neutral-100);
    min-height: calc(100vh - 3.5rem);
    min-height: calc(100vh - var(--layout-header-height));
    margin: 3.5rem 0 0 0;
    margin: var(--layout-header-height) 0 0 0;
    padding: 0.75rem;
  }
  body:has(sidebar.echo-sidebar-comments) main.echo-main-client-show {
    margin-right: calc(24.5625rem + 0.75rem);
    margin-right: calc(var(--layout-comments-sidebar-width) + 0.75rem);
  }
  body:has(footer.echo-audio-bar:not(.hidden)) main.echo-main-authenticated {
    padding-bottom: calc(4.25rem + 2rem);
    padding-bottom: calc(var(--layout-authenticated-audio-bar-height) + 2rem);
    min-height: calc(100vh - 3.5rem - 4.25rem);
    min-height: calc(100vh - var(--layout-header-height) - var(--layout-authenticated-audio-bar-height));
  }
  body:has(footer.echo-audio-bar:not(.hidden)) main.echo-main-client-index {
    padding-bottom: calc(4.25rem + 4rem);
    padding-bottom: calc(var(--layout-authenticated-audio-bar-height) + 4rem);
    min-height: calc(100vh - 3.5rem - 1rem - 4.25rem);
    min-height: calc(100vh - var(--layout-header-height) - 1rem - var(--layout-authenticated-audio-bar-height));
  }
  body:has(footer.echo-audio-bar:not(.hidden)):has(main.echo-main-authenticated)::before {
    border-bottom-left-radius: 1rem;
    border-bottom-left-radius: var(--radius-16);
    height: calc(100vh - 3.5rem - 4.25rem);
    height: calc(100vh - var(--layout-header-height) - var(--layout-authenticated-audio-bar-height));
  }
  body:has(footer.echo-audio-bar:not(.hidden)):has(main.echo-main-client-index)::before {
    border-bottom-left-radius: 1rem;
    border-bottom-left-radius: var(--radius-16);
    height: calc(100vh - 3.5rem - 4.25rem);
    height: calc(100vh - var(--layout-header-height) - var(--layout-authenticated-audio-bar-height));
  }
  body:has(footer.echo-audio-bar:not(.hidden)):has(main.echo-main-client-index)::after {
    height: 4.25rem;
    height: var(--layout-authenticated-audio-bar-height);
    z-index: 9;
  }
  html:has(main.echo-main-iframe), body:has(main.echo-main-iframe) {
    height: 100%;
    overflow: hidden;
    background: transparent;
  }
  main.echo-main-iframe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 1rem;
  }
  @media (max-width: 700px) {
    main.echo-main-authenticated {
      margin-left: 0;
      padding: 1.25rem;
    }
    body:has(main.echo-main-authenticated)::before {
      left: 0;
      border-top-right-radius: 1rem;
      border-top-right-radius: var(--radius-16);
    }
    body.mobile-bar-suppressed main.echo-main-authenticated {
      margin-top: 0;
      min-height: 100dvh;
    }
    body.mobile-bar-suppressed:has(main.echo-main-authenticated)::before {
      top: 0;
      height: 100dvh;
      border-radius: 0;
    }
    body.mobile-bar-suppressed:has(main.echo-main-authenticated) {
      background: white;
      background: var(--color-neutral-0);
    }
    main.echo-main-client-index {
      margin-left: 0;
      margin-right: 0;
      padding: 1.25rem;
    }
    body:has(main.echo-main-client-index) {
      background: white;
      background: var(--color-neutral-0);
    }
    body:has(main.echo-main-client-index)::before {
      left: 0;
      right: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    body:has(sidebar.echo-sidebar-comments) main.echo-main-client-show {
      margin-right: 0;
    }
    body:has(main.echo-main-client-index)::before {
      bottom: 0;
      height: calc(100dvh - 3.5rem);
      height: calc(100dvh - var(--layout-header-height));
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    body:has(footer.echo-audio-bar:not(.hidden)):has(main.echo-main-client-index)::before {
      height: calc(100dvh - 3.5rem);
      height: calc(100dvh - var(--layout-header-height));
      border-bottom-left-radius: 0;
    }
    body:has(main.echo-main-client-index)::after, body:has(footer.echo-audio-bar:not(.hidden)):has(main.echo-main-client-index)::after {
      display: none;
    }
    main.echo-main-client-index {
      margin-bottom: 0;
    }
    body:has(footer.echo-audio-bar:not(.hidden)):has(main.echo-main-authenticated)::before {
      height: calc(100dvh - 3.5rem);
      height: calc(100dvh - var(--layout-header-height));
      border-bottom-left-radius: 0;
    }
    body.mobile-bar-suppressed:has(footer.echo-audio-bar:not(.hidden)):has(main.echo-main-authenticated)::before {
      top: 0;
      height: 100dvh;
    }
    body:has(footer.echo-audio-bar:not(.hidden)) main.echo-main-authenticated {
      padding-bottom: calc(1rem + 4.5rem + 1rem);
      padding-bottom: calc(var(--layout-mobile-pill-inset) + var(--layout-mobile-audio-bar-height) + var(--layout-mobile-pill-inset));
    }
    body:has(.echo-pay-balance-fab) main.echo-main-client-index {
      padding-bottom: calc(1.75rem + 3.5rem + 1rem);
      padding-bottom: calc(var(--layout-fab-inset) + var(--layout-fab-size) + var(--layout-mobile-pill-inset));
    }
    body:has(footer.echo-audio-bar:not(.hidden)) main.echo-main-client-index {
      padding-bottom: calc(1rem + 4.5rem + 1rem);
      padding-bottom: calc(var(--layout-mobile-pill-inset) + var(--layout-mobile-audio-bar-height) + var(--layout-mobile-pill-inset));
    }
    body:has(footer.echo-audio-bar:not(.hidden)):has(.echo-pay-balance-fab) main.echo-main-client-index {
      padding-bottom: calc(1rem + 4.5rem + 0.75rem + 3.5rem + 1rem);
      padding-bottom: calc(var(--layout-mobile-pill-inset) + var(--layout-mobile-audio-bar-height) + var(--layout-mobile-pill-gap) + var(--layout-fab-size) + var(--layout-mobile-pill-inset));
    }
    body:has(.echo-pay-balance-fab) main.echo-main-client-show {
      padding-bottom: calc(1.75rem + 3.5rem + 1rem);
      padding-bottom: calc(var(--layout-fab-inset) + var(--layout-fab-size) + var(--layout-mobile-pill-inset));
    }
    body:has(footer.echo-audio-bar:not(.hidden)) .echo-pay-balance-fab {
      bottom: calc(1rem + 4.5rem + 0.75rem) !important;
      bottom: calc(var(--layout-mobile-pill-inset) + var(--layout-mobile-audio-bar-height) + var(--layout-mobile-pill-gap)) !important;
    }
  }
  body:has(main.echo-main-unauthenticated) {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    overflow-x: hidden;
  }
  @media (max-width: 700px) {
    body:has(main.echo-main-unauthenticated) {
      background: white;
      background: var(--color-neutral-0);
    }
  }
  main.echo-main-unauthenticated {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    max-width: 1512px;
    margin-left: auto;
    margin-right: auto;
  }
  main.echo-main-unauthenticated .echo-auth-form-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 50%;
    padding: 3rem;
    background: #f9f9fe;
    background: var(--color-neutral-100);
  }
  main.echo-main-unauthenticated .echo-auth-showcase-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 50%;
    background: #f9f9fe;
    background: var(--color-neutral-100);
    position: relative;
  }
  @media (max-width: 700px) {
    main.echo-main-unauthenticated {
      flex-direction: column;
      min-height: 100vh;
      min-height: 100dvh;
    }
    main.echo-main-unauthenticated .echo-auth-form-panel {
      flex: 1 1;
      padding: 0;
      background: white;
      background: var(--color-neutral-0);
      align-items: stretch;
      justify-content: flex-start;
      min-height: 100vh;
      min-height: 100dvh;
    }
    main.echo-main-unauthenticated .echo-auth-showcase-panel {
      display: none;
    }
    main.echo-main-unauthenticated .echo-auth-card {
      max-width: none;
      width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      overflow: visible;
      background: white;
      background: var(--color-neutral-0);
    }
    main.echo-main-unauthenticated .echo-auth-card-header {
      margin-top: auto;
    }
    main.echo-main-unauthenticated .echo-auth-card-footer {
      margin-top: auto;
    }
  }
  .echo-auth-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 22.5rem;
    border-radius: 1rem;
    border-radius: var(--radius-16);
    background: white;
    background: var(--color-neutral-0);
    border: 0.5px solid #d6d6e8;
    border: 0.5px solid var(--color-neutral-300);
    box-shadow: 0.5rem 0.5rem 1.5rem 0 rgba(177, 177, 177, 0.4);
    box-shadow: var(--shadow-soft-400);
    overflow: hidden;
  }
  .echo-auth-card-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    gap: var(--spacing-16);
    text-align: center;
    padding: 1.5rem;
    padding: var(--padding-24);
    padding-bottom: 0;
  }
  .echo-auth-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    gap: var(--spacing-12);
    padding: 1.5rem;
    padding: var(--padding-24);
  }
  .echo-auth-card-footer {
    background: #f9f9fe;
    background: var(--color-neutral-100);
    border-top: 0.5px solid #d6d6e8;
    border-top: 0.5px solid var(--color-neutral-300);
    padding: 1rem;
    padding: var(--padding-16);
    text-align: center;
  }
  .echo-auth-btn-cta {
    background: #0d0c0f;
    background: var(--color-neutral-900);
    color: white;
    color: var(--color-neutral-0);
  }
  .echo-auth-btn-cta svg, .echo-auth-btn-cta svg > path {
    fill: white;
    fill: var(--color-neutral-0);
  }
  .echo-auth-btn-cta:hover:not([disabled], :focus) {
    background: #1d1c23;
    background: var(--color-neutral-800);
  }
  .echo-auth-btn-cta:focus {
    background: #1d1c23;
    background: var(--color-neutral-800);
  }
  .echo-auth-btn-cta[disabled] {
    cursor: not-allowed;
    background: #d6d6e8;
    background: var(--color-neutral-300);
    color: #747483;
    color: var(--color-neutral-500);
    opacity: 0.3;
  }
  .echo-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    gap: var(--spacing-16);
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .echo-auth-divider::before, .echo-auth-divider::after {
    content: "";
    flex: 1 1;
    border-top: 1px solid #d6d6e8;
    border-top: 1px solid var(--color-neutral-300);
  }
  .echo-auth-showcase {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .echo-auth-showcase-devices {
    position: absolute;
    top: 50%;
    transform: translateY(-40%);
    right: -45%;
    width: 150%;
  }
  .echo-auth-showcase-devices .echo-auth-showcase-laptop {
    display: block;
    width: 100%;
  }
  .echo-auth-showcase-devices .echo-auth-showcase-phone {
    position: absolute;
    bottom: -15%;
    left: 1%;
    width: 32%;
    z-index: 2;
    filter: drop-shadow(16px 16px 32px rgba(19, 10, 38, 0.4));
  }
  .turbo-progress-bar {
    background: #775be6 !important;
    background: var(--color-primary-lavender-500) !important;
  }
  :root {
    --vt-duration: 260ms;
    --vt-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --vt-rise: 8px;
    --vt-stagger: 30ms;
    --vt-stagger-cap: 20;
    --vt-rm-fade: 120ms;
  }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
  }
  html.js [data-motion~=entrance]:not(.echo-entering):not(.echo-entered) > * {
    opacity: 0;
  }
  [data-motion~=entrance].echo-entering > *:not([data-motion~=update]) {
    animation: fade-rise 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
    animation: fade-rise var(--vt-duration) var(--vt-ease) both;
  }
  [data-motion~=entrance].echo-entering > *:nth-child(1):not([data-motion~=update]) {
    animation-delay: calc(30ms * (1 - 1));
    animation-delay: calc(var(--vt-stagger) * (1 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(2):not([data-motion~=update]) {
    animation-delay: calc(30ms * (2 - 1));
    animation-delay: calc(var(--vt-stagger) * (2 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(3):not([data-motion~=update]) {
    animation-delay: calc(30ms * (3 - 1));
    animation-delay: calc(var(--vt-stagger) * (3 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(4):not([data-motion~=update]) {
    animation-delay: calc(30ms * (4 - 1));
    animation-delay: calc(var(--vt-stagger) * (4 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(5):not([data-motion~=update]) {
    animation-delay: calc(30ms * (5 - 1));
    animation-delay: calc(var(--vt-stagger) * (5 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(6):not([data-motion~=update]) {
    animation-delay: calc(30ms * (6 - 1));
    animation-delay: calc(var(--vt-stagger) * (6 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(7):not([data-motion~=update]) {
    animation-delay: calc(30ms * (7 - 1));
    animation-delay: calc(var(--vt-stagger) * (7 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(8):not([data-motion~=update]) {
    animation-delay: calc(30ms * (8 - 1));
    animation-delay: calc(var(--vt-stagger) * (8 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(9):not([data-motion~=update]) {
    animation-delay: calc(30ms * (9 - 1));
    animation-delay: calc(var(--vt-stagger) * (9 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(10):not([data-motion~=update]) {
    animation-delay: calc(30ms * (10 - 1));
    animation-delay: calc(var(--vt-stagger) * (10 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(11):not([data-motion~=update]) {
    animation-delay: calc(30ms * (11 - 1));
    animation-delay: calc(var(--vt-stagger) * (11 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(12):not([data-motion~=update]) {
    animation-delay: calc(30ms * (12 - 1));
    animation-delay: calc(var(--vt-stagger) * (12 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(13):not([data-motion~=update]) {
    animation-delay: calc(30ms * (13 - 1));
    animation-delay: calc(var(--vt-stagger) * (13 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(14):not([data-motion~=update]) {
    animation-delay: calc(30ms * (14 - 1));
    animation-delay: calc(var(--vt-stagger) * (14 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(15):not([data-motion~=update]) {
    animation-delay: calc(30ms * (15 - 1));
    animation-delay: calc(var(--vt-stagger) * (15 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(16):not([data-motion~=update]) {
    animation-delay: calc(30ms * (16 - 1));
    animation-delay: calc(var(--vt-stagger) * (16 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(17):not([data-motion~=update]) {
    animation-delay: calc(30ms * (17 - 1));
    animation-delay: calc(var(--vt-stagger) * (17 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(18):not([data-motion~=update]) {
    animation-delay: calc(30ms * (18 - 1));
    animation-delay: calc(var(--vt-stagger) * (18 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(19):not([data-motion~=update]) {
    animation-delay: calc(30ms * (19 - 1));
    animation-delay: calc(var(--vt-stagger) * (19 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(20):not([data-motion~=update]) {
    animation-delay: calc(30ms * (20 - 1));
    animation-delay: calc(var(--vt-stagger) * (20 - 1));
  }
  [data-motion~=entrance].echo-entering > *:nth-child(n+21):not([data-motion~=update]) {
    animation-delay: calc(30ms * 20);
    animation-delay: calc(var(--vt-stagger) * 20);
  }
  html.js [data-motion~=entrance-gentle]:not(.echo-entering):not(.echo-entered) {
    opacity: 0;
  }
  [data-motion~=entrance-gentle].echo-entering {
    animation: fade-in 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
    animation: fade-in var(--vt-duration) var(--vt-ease) both;
  }
  [data-motion~=update] {
    animation: fade-in 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
    animation: fade-in var(--vt-duration) var(--vt-ease) both;
  }
  html.echo-entrance-failsafe [data-motion~=entrance] > *, html.echo-entrance-failsafe [data-motion~=entrance-gentle] {
    opacity: 1 !important;
  }
  [data-turbo-permanent] [data-motion~=entrance], [data-turbo-permanent] [data-motion~=entrance] > *, [data-turbo-permanent] [data-motion~=entrance-gentle], [data-turbo-permanent] [data-motion~=update] {
    opacity: 1 !important;
    animation: none !important;
  }
  ::view-transition-old(file-audio-player) {
    display: none;
  }
  ::view-transition-new(file-audio-player) {
    animation: none;
  }
  dialog.echo-modal[closing], .echo-menu[closing] {
    view-transition-name: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --vt-duration: var(--vt-rm-fade);
      --vt-rise: 0;
      --vt-stagger: 0;
    }
    ::view-transition-group(*) {
      animation: none;
    }
    .echo-toast-success, .echo-toast-destructive, .echo-toast-warning, .echo-toast-info {
      transition: none;
    }
    .echo-toast-success[opening], .echo-toast-destructive[opening], .echo-toast-warning[opening], .echo-toast-info[opening] {
      animation: fade-in 120ms ease both;
      animation: fade-in var(--vt-rm-fade) ease both;
    }
    .echo-toast-success[closing], .echo-toast-destructive[closing], .echo-toast-warning[closing], .echo-toast-info[closing] {
      animation: fade-out 120ms ease both;
      animation: fade-out var(--vt-rm-fade) ease both;
    }
    dialog.echo-modal[open] {
      animation-duration: 120ms;
      animation-duration: var(--vt-rm-fade);
    }
    dialog.echo-modal[open]::backdrop {
      animation-duration: 120ms;
      animation-duration: var(--vt-rm-fade);
    }
    dialog.echo-modal[closing] {
      animation-duration: 120ms;
      animation-duration: var(--vt-rm-fade);
    }
    dialog.echo-modal[closing]::backdrop {
      animation-duration: 120ms;
      animation-duration: var(--vt-rm-fade);
    }
    .echo-dropdown .echo-menu[open], .echo-dropdown .echo-menu[closing] {
      animation-duration: 120ms;
      animation-duration: var(--vt-rm-fade);
    }
    .echo-tooltip .echo-tooltip-wrapper[open], .echo-tooltip .echo-tooltip-wrapper[closing] {
      animation-duration: 120ms;
      animation-duration: var(--vt-rm-fade);
    }
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(0.25rem * 0);
    inset: calc(var(--spacing) * 0);
  }
  .inset-auto {
    inset: auto;
  }
  .top-0 {
    top: calc(0.25rem * 0);
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: 0.125rem;
    top: var(--spacing-2);
  }
  .top-8 {
    top: 0.5rem;
    top: var(--spacing-8);
  }
  .top-16 {
    top: 1rem;
    top: var(--spacing-16);
  }
  .top-32 {
    top: 2rem;
    top: var(--spacing-32);
  }
  .top-\[60px\] {
    top: 60px;
  }
  .top-auto {
    top: auto;
  }
  .top-full {
    top: 100%;
  }
  .-right-4 {
    right: calc(0.25rem * -1);
    right: calc(var(--spacing-4) * -1);
  }
  .right-0 {
    right: calc(0.25rem * 0);
    right: calc(var(--spacing) * 0);
  }
  .right-1\/2 {
    right: calc(1 / 2 * 100%);
  }
  .right-8 {
    right: 0.5rem;
    right: var(--spacing-8);
  }
  .right-12 {
    right: 0.75rem;
    right: var(--spacing-12);
  }
  .right-16 {
    right: 1rem;
    right: var(--spacing-16);
  }
  .right-\[1\.75rem\] {
    right: 1.75rem;
  }
  .right-\[5\%\] {
    right: 5%;
  }
  .right-auto {
    right: auto;
  }
  .right-full {
    right: 100%;
  }
  .-bottom-4 {
    bottom: calc(0.25rem * -1);
    bottom: calc(var(--spacing-4) * -1);
  }
  .bottom-0 {
    bottom: calc(0.25rem * 0);
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-1\/2 {
    bottom: calc(1 / 2 * 100%);
  }
  .bottom-\[1\.75rem\] {
    bottom: 1.75rem;
  }
  .bottom-\[5\%\] {
    bottom: 5%;
  }
  .bottom-auto {
    bottom: auto;
  }
  .bottom-full {
    bottom: 100%;
  }
  .left-0 {
    left: calc(0.25rem * 0);
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-32 {
    left: 2rem;
    left: var(--spacing-32);
  }
  .left-auto {
    left: auto;
  }
  .left-full {
    left: 100%;
  }
  .isolate {
    isolation: isolate;
  }
  .z-0 {
    z-index: 0;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-auto {
    z-index: auto;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .order-3 {
    order: 3;
  }
  .order-first {
    order: -9999;
  }
  .col-6 {
    grid-column: 6;
  }
  .float-left {
    float: left;
  }
  .container {
    width: 100%;
    @media (min-width: 700px) {
      max-width: 700px;
    }
    @media (min-width: 1280px) {
      max-width: 1280px;
    }
    @media (min-width: 40rem) {
      max-width: 40rem;
    }
    @media (min-width: 48rem) {
      max-width: 48rem;
    }
    @media (min-width: 64rem) {
      max-width: 64rem;
    }
    @media (min-width: 80rem) {
      max-width: 80rem;
    }
    @media (min-width: 96rem) {
      max-width: 96rem;
    }
  }
  .-m-16 {
    margin: calc(1rem * -1);
    margin: calc(var(--spacing-16) * -1);
  }
  .m-0 {
    margin: calc(0.25rem * 0);
    margin: calc(var(--spacing) * 0);
  }
  .m-2 {
    margin: 0.125rem;
    margin: var(--spacing-2);
  }
  .m-4 {
    margin: 0.25rem;
    margin: var(--spacing-4);
  }
  .m-8 {
    margin: 0.5rem;
    margin: var(--spacing-8);
  }
  .m-12 {
    margin: 0.75rem;
    margin: var(--spacing-12);
  }
  .m-16 {
    margin: 1rem;
    margin: var(--spacing-16);
  }
  .m-20 {
    margin: 1.25rem;
    margin: var(--spacing-20);
  }
  .m-24 {
    margin: 1.5rem;
    margin: var(--spacing-24);
  }
  .m-32 {
    margin: 2rem;
    margin: var(--spacing-32);
  }
  .m-auto {
    margin: auto;
  }
  .-mx-4 {
    margin-inline: calc(0.25rem * -1);
    margin-inline: calc(var(--spacing-4) * -1);
  }
  .-mx-12 {
    margin-inline: calc(0.75rem * -1);
    margin-inline: calc(var(--spacing-12) * -1);
  }
  .-mx-\[1\.25rem\] {
    margin-inline: calc(1.25rem * -1);
  }
  .mx-4 {
    margin-inline: 0.25rem;
    margin-inline: var(--spacing-4);
  }
  .mx-16 {
    margin-inline: 1rem;
    margin-inline: var(--spacing-16);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-8 {
    margin-block: 0.5rem;
    margin-block: var(--spacing-8);
  }
  .my-12 {
    margin-block: 0.75rem;
    margin-block: var(--spacing-12);
  }
  .my-16 {
    margin-block: 1rem;
    margin-block: var(--spacing-16);
  }
  .my-auto {
    margin-block: auto;
  }
  .ms-1\.5 {
    margin-inline-start: calc(0.25rem * 1.5);
    margin-inline-start: calc(var(--spacing) * 1.5);
  }
  .mt-1 {
    margin-top: calc(0.25rem * 1);
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: 0.125rem;
    margin-top: var(--spacing-2);
  }
  .mt-3 {
    margin-top: 0.1875rem;
    margin-top: var(--spacing-3);
  }
  .mt-4 {
    margin-top: 0.25rem;
    margin-top: var(--spacing-4);
  }
  .mt-8 {
    margin-top: 0.5rem;
    margin-top: var(--spacing-8);
  }
  .mt-12 {
    margin-top: 0.75rem;
    margin-top: var(--spacing-12);
  }
  .mt-16 {
    margin-top: 1rem;
    margin-top: var(--spacing-16);
  }
  .mt-20 {
    margin-top: 1.25rem;
    margin-top: var(--spacing-20);
  }
  .mt-24 {
    margin-top: 1.5rem;
    margin-top: var(--spacing-24);
  }
  .mt-32 {
    margin-top: 2rem;
    margin-top: var(--spacing-32);
  }
  .mt-40 {
    margin-top: 2.5rem;
    margin-top: var(--spacing-40);
  }
  .mt-64 {
    margin-top: 4rem;
    margin-top: var(--spacing-64);
  }
  .mt-\[14px\] {
    margin-top: 14px;
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-1 {
    margin-right: calc(0.25rem * 1);
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-2 {
    margin-right: 0.125rem;
    margin-right: var(--spacing-2);
  }
  .mr-4 {
    margin-right: 0.25rem;
    margin-right: var(--spacing-4);
  }
  .mr-8 {
    margin-right: 0.5rem;
    margin-right: var(--spacing-8);
  }
  .mr-12 {
    margin-right: 0.75rem;
    margin-right: var(--spacing-12);
  }
  .mr-32 {
    margin-right: 2rem;
    margin-right: var(--spacing-32);
  }
  .mr-48 {
    margin-right: 3rem;
    margin-right: var(--spacing-48);
  }
  .mr-auto {
    margin-right: auto;
  }
  .mb-0 {
    margin-bottom: calc(0.25rem * 0);
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-2 {
    margin-bottom: 0.125rem;
    margin-bottom: var(--spacing-2);
  }
  .mb-3 {
    margin-bottom: 0.1875rem;
    margin-bottom: var(--spacing-3);
  }
  .mb-4 {
    margin-bottom: 0.25rem;
    margin-bottom: var(--spacing-4);
  }
  .mb-8 {
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-8);
  }
  .mb-12 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-12);
  }
  .mb-16 {
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-16);
  }
  .mb-24 {
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-24);
  }
  .mb-32 {
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-32);
  }
  .mb-40 {
    margin-bottom: 2.5rem;
    margin-bottom: var(--spacing-40);
  }
  .mb-\[1px\] {
    margin-bottom: 1px;
  }
  .mb-auto {
    margin-bottom: auto;
  }
  .-ml-4 {
    margin-left: calc(0.25rem * -1);
    margin-left: calc(var(--spacing-4) * -1);
  }
  .ml-2 {
    margin-left: 0.125rem;
    margin-left: var(--spacing-2);
  }
  .ml-4 {
    margin-left: 0.25rem;
    margin-left: var(--spacing-4);
  }
  .ml-16 {
    margin-left: 1rem;
    margin-left: var(--spacing-16);
  }
  .ml-24 {
    margin-left: 1.5rem;
    margin-left: var(--spacing-24);
  }
  .ml-36 {
    margin-left: 2.25rem;
    margin-left: var(--spacing-36);
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .flow-root {
    display: flow-root;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline\! {
    display: inline !important;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-row {
    display: table-row;
  }
  .aspect-\[9\/19\] {
    aspect-ratio: 9/19;
  }
  .\!h-\[28px\] {
    height: 28px !important;
  }
  .\!h-\[56px\] {
    height: 56px !important;
  }
  .h-3 {
    height: 0.1875rem;
    height: var(--spacing-3);
  }
  .h-4 {
    height: 0.25rem;
    height: var(--spacing-4);
  }
  .h-5 {
    height: calc(0.25rem * 5);
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: 0.375rem;
    height: var(--spacing-6);
  }
  .h-8 {
    height: 0.5rem;
    height: var(--spacing-8);
  }
  .h-12 {
    height: 0.75rem;
    height: var(--spacing-12);
  }
  .h-14 {
    height: calc(0.25rem * 14);
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: 1rem;
    height: var(--spacing-16);
  }
  .h-18 {
    height: calc(0.25rem * 18);
    height: calc(var(--spacing) * 18);
  }
  .h-20 {
    height: 1.25rem;
    height: var(--spacing-20);
  }
  .h-24 {
    height: 1.5rem;
    height: var(--spacing-24);
  }
  .h-28 {
    height: 1.75rem;
    height: var(--spacing-28);
  }
  .h-32 {
    height: 2rem;
    height: var(--spacing-32);
  }
  .h-40 {
    height: 2.5rem;
    height: var(--spacing-40);
  }
  .h-48 {
    height: 3rem;
    height: var(--spacing-48);
  }
  .h-80 {
    height: 5rem;
    height: var(--spacing-80);
  }
  .h-96 {
    height: 6rem;
    height: var(--spacing-96);
  }
  .h-112 {
    height: 7rem;
    height: var(--spacing-112);
  }
  .h-128 {
    height: 8rem;
    height: var(--spacing-128);
  }
  .h-160 {
    height: 10rem;
    height: var(--spacing-160);
  }
  .h-\[10px\] {
    height: 10px;
  }
  .h-\[14px\] {
    height: 14px;
  }
  .h-\[18px\] {
    height: 18px;
  }
  .h-\[20px\] {
    height: 20px;
  }
  .h-\[24px\] {
    height: 24px;
  }
  .h-\[36px\] {
    height: 36px;
  }
  .h-\[40px\] {
    height: 40px;
  }
  .h-\[56px\] {
    height: 56px;
  }
  .h-\[64px\] {
    height: 64px;
  }
  .h-\[120px\] {
    height: 120px;
  }
  .h-\[296px\] {
    height: 296px;
  }
  .h-auto {
    height: auto;
  }
  .h-fit {
    height: -moz-fit-content;
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .h-max {
    height: -moz-max-content;
    height: max-content;
  }
  .h-min {
    height: -moz-min-content;
    height: min-content;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-112 {
    max-height: 7rem;
    max-height: var(--spacing-112);
  }
  .max-h-224 {
    max-height: 14rem;
    max-height: var(--spacing-224);
  }
  .max-h-\[40\%\] {
    max-height: 40%;
  }
  .max-h-\[44px\] {
    max-height: 44px;
  }
  .max-h-\[60vh\] {
    max-height: 60vh;
  }
  .max-h-full {
    max-height: 100%;
  }
  .max-h-none {
    max-height: none;
  }
  .max-h-screen {
    max-height: 100vh;
  }
  .min-h-0 {
    min-height: calc(0.25rem * 0);
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-128 {
    min-height: 8rem;
    min-height: var(--spacing-128);
  }
  .min-h-256 {
    min-height: 16rem;
    min-height: var(--spacing-256);
  }
  .min-h-\[44px\] {
    min-height: 44px;
  }
  .min-h-\[min\(16rem\,60vh\)\] {
    min-height: min(16rem, 60vh);
  }
  .min-h-\[var\(--layout-header-height\)\] {
    min-height: 3.5rem;
    min-height: var(--layout-header-height);
  }
  .min-h-dvh {
    min-height: 100dvh;
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .\!w-\[28px\] {
    width: 28px !important;
  }
  .\!w-\[56px\] {
    width: 56px !important;
  }
  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .w-2 {
    width: 0.125rem;
    width: var(--spacing-2);
  }
  .w-3 {
    width: 0.1875rem;
    width: var(--spacing-3);
  }
  .w-8 {
    width: 0.5rem;
    width: var(--spacing-8);
  }
  .w-12 {
    width: 0.75rem;
    width: var(--spacing-12);
  }
  .w-14 {
    width: calc(0.25rem * 14);
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: 1rem;
    width: var(--spacing-16);
  }
  .w-20 {
    width: 1.25rem;
    width: var(--spacing-20);
  }
  .w-24 {
    width: 1.5rem;
    width: var(--spacing-24);
  }
  .w-28 {
    width: 1.75rem;
    width: var(--spacing-28);
  }
  .w-32 {
    width: 2rem;
    width: var(--spacing-32);
  }
  .w-40 {
    width: 2.5rem;
    width: var(--spacing-40);
  }
  .w-48 {
    width: 3rem;
    width: var(--spacing-48);
  }
  .w-80 {
    width: 5rem;
    width: var(--spacing-80);
  }
  .w-96 {
    width: 6rem;
    width: var(--spacing-96);
  }
  .w-100 {
    width: calc(0.25rem * 100);
    width: calc(var(--spacing) * 100);
  }
  .w-112 {
    width: 7rem;
    width: var(--spacing-112);
  }
  .w-128 {
    width: 8rem;
    width: var(--spacing-128);
  }
  .w-160 {
    width: 10rem;
    width: var(--spacing-160);
  }
  .w-192 {
    width: 12rem;
    width: var(--spacing-192);
  }
  .w-208 {
    width: calc(0.25rem * 208);
    width: calc(var(--spacing) * 208);
  }
  .w-320 {
    width: 20rem;
    width: var(--spacing-320);
  }
  .w-384 {
    width: 24rem;
    width: var(--spacing-384);
  }
  .w-512 {
    width: 32rem;
    width: var(--spacing-512);
  }
  .w-768 {
    width: 48rem;
    width: var(--spacing-768);
  }
  .w-\[1px\] {
    width: 1px;
  }
  .w-\[2px\] {
    width: 2px;
  }
  .w-\[14px\] {
    width: 14px;
  }
  .w-\[20px\] {
    width: 20px;
  }
  .w-\[24px\] {
    width: 24px;
  }
  .w-\[40px\] {
    width: 40px;
  }
  .w-\[55vw\] {
    width: 55vw;
  }
  .w-\[56px\] {
    width: 56px;
  }
  .w-\[64px\] {
    width: 64px;
  }
  .w-\[92px\] {
    width: 92px;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-\[150px\] {
    width: 150px;
  }
  .w-\[160px\] {
    width: 160px;
  }
  .w-\[208px\] {
    width: 208px;
  }
  .w-\[224px\] {
    width: 224px;
  }
  .w-\[248px\] {
    width: 248px;
  }
  .w-\[256px\] {
    width: 256px;
  }
  .w-\[375px\] {
    width: 375px;
  }
  .w-\[386px\] {
    width: 386px;
  }
  .w-\[480px\] {
    width: 480px;
  }
  .w-\[Npx\] {
    width: Npx;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: -moz-max-content;
    width: max-content;
  }
  .w-min {
    width: -moz-min-content;
    width: min-content;
  }
  .w-screen {
    width: 100vw;
  }
  .max-w-160 {
    max-width: 10rem;
    max-width: var(--spacing-160);
  }
  .max-w-\[40\%\] {
    max-width: 40%;
  }
  .max-w-\[140px\] {
    max-width: 140px;
  }
  .max-w-\[384px\] {
    max-width: 384px;
  }
  .max-w-\[420px\] {
    max-width: 420px;
  }
  .max-w-\[440px\] {
    max-width: 440px;
  }
  .max-w-\[480px\] {
    max-width: 480px;
  }
  .max-w-\[512px\] {
    max-width: 512px;
  }
  .max-w-\[544px\] {
    max-width: 544px;
  }
  .max-w-\[560px\] {
    max-width: 560px;
  }
  .max-w-\[720px\] {
    max-width: 720px;
  }
  .max-w-\[768px\] {
    max-width: 768px;
  }
  .max-w-\[Npx\] {
    max-width: Npx;
  }
  .max-w-fit {
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: 32rem;
    max-width: var(--container-lg);
  }
  .max-w-max {
    max-width: -moz-max-content;
    max-width: max-content;
  }
  .max-w-min {
    max-width: -moz-min-content;
    max-width: min-content;
  }
  .max-w-none {
    max-width: none;
  }
  .min-w-0 {
    min-width: calc(0.25rem * 0);
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-fit {
    min-width: -moz-fit-content;
    min-width: fit-content;
  }
  .min-w-full {
    min-width: 100%;
  }
  .min-w-max {
    min-width: -moz-max-content;
    min-width: max-content;
  }
  .min-w-min {
    min-width: -moz-min-content;
    min-width: min-content;
  }
  .flex-1 {
    flex: 1 1;
  }
  .flex-auto {
    flex: auto;
  }
  .flex-initial {
    flex: 0 1 auto;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .grow-0 {
    flex-grow: 0;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: calc(calc(1 / 2 * 100%) * -1) var(--tw-translate-y);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: -100% var(--tw-translate-y);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: calc(0.25rem * 0) var(--tw-translate-y);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-1\/2 {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: calc(1 / 2 * 100%) var(--tw-translate-y);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: 100% var(--tw-translate-y);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-4 {
    --tw-translate-y: calc(var(--spacing-4) * -1);
    translate: var(--tw-translate-x) calc(0.25rem * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) calc(0.25rem * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1\/2 {
    --tw-translate-y: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-8 {
    --tw-translate-y: var(--spacing-8);
    translate: var(--tw-translate-x) 0.5rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-0 {
    --tw-scale-x: 0%;
    --tw-scale-y: 0%;
    --tw-scale-z: 0%;
    scale: 0% 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-50 {
    --tw-scale-x: 50%;
    --tw-scale-y: 50%;
    --tw-scale-z: 50%;
    scale: 50% 50%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-75 {
    --tw-scale-x: 75%;
    --tw-scale-y: 75%;
    --tw-scale-z: 75%;
    scale: 75% 75%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: 90% 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: 95% 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: 100% 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: 105% 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: 110% 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-125 {
    --tw-scale-x: 125%;
    --tw-scale-y: 125%;
    --tw-scale-z: 125%;
    scale: 125% 125%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-150 {
    --tw-scale-x: 150%;
    --tw-scale-y: 150%;
    --tw-scale-z: 150%;
    scale: 150% 150%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-0 {
    rotate: 0deg;
  }
  .rotate-45 {
    rotate: 45deg;
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform:          ;
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .zoom-1 {
    zoom: 1%;
  }
  .animate-spin {
    animation: spin 1s linear infinite;
    animation: var(--animate-spin);
  }
  .cursor-auto {
    cursor: auto;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-help {
    cursor: help;
  }
  .cursor-move {
    cursor: move;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-text {
    cursor: text;
  }
  .cursor-wait {
    cursor: wait;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .list-disc {
    list-style-type: disc;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .grid-cols-none {
    grid-template-columns: none;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-evenly {
    justify-content: space-evenly;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-0 {
    gap: calc(0.25rem * 0);
    gap: calc(var(--spacing) * 0);
  }
  .gap-2 {
    gap: 0.125rem;
    gap: var(--spacing-2);
  }
  .gap-4 {
    gap: 0.25rem;
    gap: var(--spacing-4);
  }
  .gap-6 {
    gap: 0.375rem;
    gap: var(--spacing-6);
  }
  .gap-8 {
    gap: 0.5rem;
    gap: var(--spacing-8);
  }
  .gap-12 {
    gap: 0.75rem;
    gap: var(--spacing-12);
  }
  .gap-16 {
    gap: 1rem;
    gap: var(--spacing-16);
  }
  .gap-20 {
    gap: 1.25rem;
    gap: var(--spacing-20);
  }
  .gap-24 {
    gap: 1.5rem;
    gap: var(--spacing-24);
  }
  .gap-32 {
    gap: 2rem;
    gap: var(--spacing-32);
  }
  .gap-40 {
    gap: 2.5rem;
    gap: var(--spacing-40);
  }
  .gap-48 {
    gap: 3rem;
    gap: var(--spacing-48);
  }
  .gap-\[1px\] {
    gap: 1px;
  }
  .gap-\[2px\] {
    gap: 2px;
  }
  .gap-\[3px\] {
    gap: 3px;
  }
  .gap-\[16px\] {
    gap: 16px;
  }
  .space-y-16 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(1rem * 0);
      margin-block-start: calc(var(--spacing-16) * var(--tw-space-y-reverse));
      margin-block-end: calc(1rem * calc(1 - 0));
      margin-block-end: calc(var(--spacing-16) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-16 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    -moz-column-gap: var(--spacing-16);
         column-gap: var(--spacing-16);
  }
  .gap-y-8 {
    row-gap: 0.5rem;
    row-gap: var(--spacing-8);
  }
  .gap-y-16 {
    row-gap: 1rem;
    row-gap: var(--spacing-16);
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * 0);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - 0));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-neutral-200 {
    :where(& > :not(:last-child)) {
      border-color: #ebebf7;
      border-color: var(--color-neutral-200);
    }
  }
  .self-auto {
    align-self: auto;
  }
  .self-baseline {
    align-self: baseline;
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .self-stretch {
    align-self: stretch;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-clip {
    overflow: clip;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-scroll {
    overflow: scroll;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-x-scroll {
    overflow-x: scroll;
  }
  .overflow-x-visible {
    overflow-x: visible;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-clip {
    overflow-y: clip;
  }
  .overflow-y-hidden {
    overflow-y: hidden;
  }
  .overflow-y-scroll {
    overflow-y: scroll;
  }
  .overflow-y-visible {
    overflow-y: visible;
  }
  .overscroll-contain {
    overscroll-behavior: contain;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-0 {
    border-radius: 0;
    border-radius: var(--radius-0);
  }
  .rounded-2xl {
    border-radius: 1rem;
    border-radius: var(--radius-2xl);
  }
  .rounded-4 {
    border-radius: 0.25rem;
    border-radius: var(--radius-4);
  }
  .rounded-8 {
    border-radius: 0.5rem;
    border-radius: var(--radius-8);
  }
  .rounded-12 {
    border-radius: 0.75rem;
    border-radius: var(--radius-12);
  }
  .rounded-16 {
    border-radius: 1rem;
    border-radius: var(--radius-16);
  }
  .rounded-20 {
    border-radius: 1.25rem;
    border-radius: var(--radius-20);
  }
  .rounded-24 {
    border-radius: 1.5rem;
    border-radius: var(--radius-24);
  }
  .rounded-32 {
    border-radius: 2rem;
    border-radius: var(--radius-32);
  }
  .rounded-\[1px\] {
    border-radius: 1px;
  }
  .rounded-\[2px\] {
    border-radius: 2px;
  }
  .rounded-\[3px\] {
    border-radius: 3px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[16px\] {
    border-radius: 16px;
  }
  .rounded-\[24px\] {
    border-radius: 24px;
  }
  .rounded-\[33px\] {
    border-radius: 33px;
  }
  .rounded-\[40px\] {
    border-radius: 40px;
  }
  .rounded-full {
    border-radius: 9999px;
    border-radius: var(--radius-full);
  }
  .rounded-md {
    border-radius: 0.375rem;
    border-radius: var(--radius-md);
  }
  .rounded-r-\[2px\] {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }
  .rounded-b-\[14px\] {
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-8 {
    border-style: var(--tw-border-style);
    border-width: 8px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-gray-500\/25 {
    border-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, oklch(55.1% 0.027 264.364) 25%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-500) 25%, transparent);
    }
}
  }
  .border-neutral-100 {
    border-color: #f9f9fe;
    border-color: var(--color-neutral-100);
  }
  .border-neutral-200 {
    border-color: #ebebf7;
    border-color: var(--color-neutral-200);
  }
  .border-neutral-300 {
    border-color: #d6d6e8;
    border-color: var(--color-neutral-300);
  }
  .border-neutral-400 {
    border-color: #a5a5b0;
    border-color: var(--color-neutral-400);
  }
  .border-neutral-900 {
    border-color: #0d0c0f;
    border-color: var(--color-neutral-900);
  }
  .border-primary-lavender-500 {
    border-color: #775be6;
    border-color: var(--color-primary-lavender-500);
  }
  .border-semantic-error-200 {
    border-color: #ffd9e4;
    border-color: var(--color-semantic-error-200);
  }
  .\!bg-\[var\(--color-neutral-0\)\] {
    background-color: white !important;
    background-color: var(--color-neutral-0) !important;
  }
  .bg-\[\#533AFD\] {
    background-color: #533AFD;
  }
  .bg-\[var\(--color-primary-lavender-500\)\] {
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .bg-\[var\(--color-primary-lavender-900\)\] {
    background-color: #1a042a;
    background-color: var(--color-primary-lavender-900);
  }
  .bg-\[var\(--color-semantic-error-500\)\] {
    background-color: #f03c66;
    background-color: var(--color-semantic-error-500);
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, #000 50%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
}
  }
  .bg-black\/55 {
    background-color: color-mix(in srgb, #000 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, #000 55%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
}
  }
  .bg-neutral-0 {
    background-color: white;
    background-color: var(--color-neutral-0);
  }
  .bg-neutral-0\/70 {
    background-color: color-mix(in srgb, #ffffff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, white 70%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-neutral-0) 70%, transparent);
    }
}
  }
  .bg-neutral-50 {
    background-color: oklch(98.5% 0 0);
    background-color: var(--color-neutral-50);
  }
  .bg-neutral-100 {
    background-color: #f9f9fe;
    background-color: var(--color-neutral-100);
  }
  .bg-neutral-200 {
    background-color: #ebebf7;
    background-color: var(--color-neutral-200);
  }
  .bg-neutral-200\/50 {
    background-color: color-mix(in srgb, #ebebf7 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, #ebebf7 50%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-neutral-200) 50%, transparent);
    }
}
  }
  .bg-neutral-300 {
    background-color: #d6d6e8;
    background-color: var(--color-neutral-300);
  }
  .bg-neutral-900 {
    background-color: #0d0c0f;
    background-color: var(--color-neutral-900);
  }
  .bg-primary-lavender-100 {
    background-color: #f4f1ff;
    background-color: var(--color-primary-lavender-100);
  }
  .bg-primary-lavender-500 {
    background-color: #775be6;
    background-color: var(--color-primary-lavender-500);
  }
  .bg-primary-lavender-900 {
    background-color: #1a042a;
    background-color: var(--color-primary-lavender-900);
  }
  .bg-secondary-magenta-500 {
    background-color: #bd68af;
    background-color: var(--color-secondary-magenta-500);
  }
  .bg-semantic-error-100 {
    background-color: #fdebf0;
    background-color: var(--color-semantic-error-100);
  }
  .bg-semantic-success-100 {
    background-color: #e5f4df;
    background-color: var(--color-semantic-success-100);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-\[\#2e2348\] {
    --tw-gradient-from: #2e2348;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-\[\#bf86c2\] {
    --tw-gradient-via: #bf86c2;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-\[\#f3c6d8\] {
    --tw-gradient-to: #f3c6d8;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .fill-neutral-900 {
    fill: #0d0c0f;
    fill: var(--color-neutral-900);
  }
  .fill-paths-neutral-0 {
    & > path, & > g > path {
      fill: white;
      fill: var(--color-neutral-0);
    }
  }
  .fill-paths-neutral-400 {
    & > path, & > g > path {
      fill: #a5a5b0;
      fill: var(--color-neutral-400);
    }
  }
  .fill-paths-neutral-500 {
    & > path, & > g > path {
      fill: #747483;
      fill: var(--color-neutral-500);
    }
  }
  .fill-paths-neutral-900 {
    & > path, & > g > path {
      fill: #0d0c0f;
      fill: var(--color-neutral-900);
    }
  }
  .fill-paths-primary-lavender-500 {
    & > path, & > g > path {
      fill: #775be6;
      fill: var(--color-primary-lavender-500);
    }
  }
  .fill-paths-primary-lavender-600 {
    & > path, & > g > path {
      fill: #6a52c8;
      fill: var(--color-primary-lavender-600);
    }
  }
  .fill-paths-primary-lavender-900 {
    & > path, & > g > path {
      fill: #1a042a;
      fill: var(--color-primary-lavender-900);
    }
  }
  .fill-paths-semantic-error-500 {
    & > path, & > g > path {
      fill: #f03c66;
      fill: var(--color-semantic-error-500);
    }
  }
  .fill-paths-semantic-success-500 {
    & > path, & > g > path {
      fill: #1f5800;
      fill: var(--color-semantic-success-500);
    }
  }
  .object-contain {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .object-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .object-fill {
    -o-object-fit: fill;
       object-fit: fill;
  }
  .object-none {
    -o-object-fit: none;
       object-fit: none;
  }
  .object-scale-down {
    -o-object-fit: scale-down;
       object-fit: scale-down;
  }
  .object-right-bottom {
    -o-object-position: right bottom;
       object-position: right bottom;
  }
  .\!p-\[0\.5rem\] {
    padding: 0.5rem !important;
  }
  .\!p-\[1\.25rem\] {
    padding: 1.25rem !important;
  }
  .p-0 {
    padding: calc(0.25rem * 0);
    padding: calc(var(--spacing) * 0);
  }
  .p-2 {
    padding: 0.125rem;
    padding: var(--spacing-2);
  }
  .p-4 {
    padding: 0.25rem;
    padding: var(--spacing-4);
  }
  .p-8 {
    padding: 0.5rem;
    padding: var(--spacing-8);
  }
  .p-12 {
    padding: 0.75rem;
    padding: var(--spacing-12);
  }
  .p-16 {
    padding: 1rem;
    padding: var(--spacing-16);
  }
  .p-24 {
    padding: 1.5rem;
    padding: var(--spacing-24);
  }
  .p-32 {
    padding: 2rem;
    padding: var(--spacing-32);
  }
  .p-48 {
    padding: 3rem;
    padding: var(--spacing-48);
  }
  .p-\[1px\] {
    padding: 1px;
  }
  .p-\[4px\] {
    padding: 4px;
  }
  .px-0 {
    padding-inline: calc(0.25rem * 0);
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-3 {
    padding-inline: 0.1875rem;
    padding-inline: var(--spacing-3);
  }
  .px-4 {
    padding-inline: 0.25rem;
    padding-inline: var(--spacing-4);
  }
  .px-6 {
    padding-inline: 0.375rem;
    padding-inline: var(--spacing-6);
  }
  .px-8 {
    padding-inline: 0.5rem;
    padding-inline: var(--spacing-8);
  }
  .px-10 {
    padding-inline: calc(0.25rem * 10);
    padding-inline: calc(var(--spacing) * 10);
  }
  .px-12 {
    padding-inline: 0.75rem;
    padding-inline: var(--spacing-12);
  }
  .px-16 {
    padding-inline: 1rem;
    padding-inline: var(--spacing-16);
  }
  .px-20 {
    padding-inline: 1.25rem;
    padding-inline: var(--spacing-20);
  }
  .px-24 {
    padding-inline: 1.5rem;
    padding-inline: var(--spacing-24);
  }
  .px-28 {
    padding-inline: 1.75rem;
    padding-inline: var(--spacing-28);
  }
  .px-32 {
    padding-inline: 2rem;
    padding-inline: var(--spacing-32);
  }
  .px-\[1\.25rem\] {
    padding-inline: 1.25rem;
  }
  .px-\[10px\] {
    padding-inline: 10px;
  }
  .py-2 {
    padding-block: 0.125rem;
    padding-block: var(--spacing-2);
  }
  .py-3 {
    padding-block: 0.1875rem;
    padding-block: var(--spacing-3);
  }
  .py-4 {
    padding-block: 0.25rem;
    padding-block: var(--spacing-4);
  }
  .py-6 {
    padding-block: 0.375rem;
    padding-block: var(--spacing-6);
  }
  .py-8 {
    padding-block: 0.5rem;
    padding-block: var(--spacing-8);
  }
  .py-12 {
    padding-block: 0.75rem;
    padding-block: var(--spacing-12);
  }
  .py-16 {
    padding-block: 1rem;
    padding-block: var(--spacing-16);
  }
  .py-24 {
    padding-block: 1.5rem;
    padding-block: var(--spacing-24);
  }
  .py-32 {
    padding-block: 2rem;
    padding-block: var(--spacing-32);
  }
  .py-48 {
    padding-block: 3rem;
    padding-block: var(--spacing-48);
  }
  .pt-2 {
    padding-top: 0.125rem;
    padding-top: var(--spacing-2);
  }
  .pt-7 {
    padding-top: calc(0.25rem * 7);
    padding-top: calc(var(--spacing) * 7);
  }
  .pt-8 {
    padding-top: 0.5rem;
    padding-top: var(--spacing-8);
  }
  .pt-12 {
    padding-top: 0.75rem;
    padding-top: var(--spacing-12);
  }
  .pt-16 {
    padding-top: 1rem;
    padding-top: var(--spacing-16);
  }
  .pt-24 {
    padding-top: 1.5rem;
    padding-top: var(--spacing-24);
  }
  .pr-2 {
    padding-right: 0.125rem;
    padding-right: var(--spacing-2);
  }
  .pr-16 {
    padding-right: 1rem;
    padding-right: var(--spacing-16);
  }
  .pr-40 {
    padding-right: 2.5rem;
    padding-right: var(--spacing-40);
  }
  .pr-\[64px\] {
    padding-right: 64px;
  }
  .pr-\[88px\] {
    padding-right: 88px;
  }
  .pb-0 {
    padding-bottom: calc(0.25rem * 0);
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-7 {
    padding-bottom: calc(0.25rem * 7);
    padding-bottom: calc(var(--spacing) * 7);
  }
  .pb-8 {
    padding-bottom: 0.5rem;
    padding-bottom: var(--spacing-8);
  }
  .pb-12 {
    padding-bottom: 0.75rem;
    padding-bottom: var(--spacing-12);
  }
  .pb-16 {
    padding-bottom: 1rem;
    padding-bottom: var(--spacing-16);
  }
  .pb-24 {
    padding-bottom: 1.5rem;
    padding-bottom: var(--spacing-24);
  }
  .pl-1 {
    padding-left: calc(0.25rem * 1);
    padding-left: calc(var(--spacing) * 1);
  }
  .pl-5 {
    padding-left: calc(0.25rem * 5);
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-8 {
    padding-left: 0.5rem;
    padding-left: var(--spacing-8);
  }
  .pl-16 {
    padding-left: 1rem;
    padding-left: var(--spacing-16);
  }
  .pl-20 {
    padding-left: 1.25rem;
    padding-left: var(--spacing-20);
  }
  .pl-28 {
    padding-left: 1.75rem;
    padding-left: var(--spacing-28);
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-justify {
    text-align: justify;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .align-baseline {
    vertical-align: baseline;
  }
  .align-bottom {
    vertical-align: bottom;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-text-bottom {
    vertical-align: text-bottom;
  }
  .align-text-top {
    vertical-align: text-top;
  }
  .align-top {
    vertical-align: top;
  }
  .text-lg {
    font-size: 1.125rem;
    font-size: var(--text-lg);
    line-height: calc(1.75 / 1.125);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: 0.875rem;
    font-size: var(--text-sm);
    line-height: calc(1.25 / 0.875);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: 0.75rem;
    font-size: var(--text-xs);
    line-height: calc(1 / 0.75);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[28px\] {
    font-size: 28px;
  }
  .text-\[32px\] {
    font-size: 32px;
  }
  .leading-24 {
    --tw-leading: var(--spacing-24);
    line-height: 1.5rem;
    line-height: var(--spacing-24);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: 1.25;
    line-height: var(--leading-tight);
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: 900;
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: 800;
    font-weight: var(--font-weight-extrabold);
  }
  .font-extralight {
    --tw-font-weight: var(--font-weight-extralight);
    font-weight: 200;
    font-weight: var(--font-weight-extralight);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: 300;
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: 400;
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }
  .font-thin {
    --tw-font-weight: var(--font-weight-thin);
    font-weight: 100;
    font-weight: var(--font-weight-thin);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: -0.025em;
    letter-spacing: var(--tracking-tight);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-nowrap {
    text-wrap: nowrap;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre {
    white-space: pre;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[var\(--color-primary-lavender-500\)\] {
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  .text-neutral-0 {
    color: white;
    color: var(--color-neutral-0);
  }
  .text-neutral-400 {
    color: #a5a5b0;
    color: var(--color-neutral-400);
  }
  .text-neutral-500 {
    color: #747483;
    color: var(--color-neutral-500);
  }
  .text-neutral-600 {
    color: oklch(43.9% 0 0);
    color: var(--color-neutral-600);
  }
  .text-neutral-700 {
    color: oklch(37.1% 0 0);
    color: var(--color-neutral-700);
  }
  .text-neutral-800 {
    color: #1d1c23;
    color: var(--color-neutral-800);
  }
  .text-neutral-900 {
    color: #0d0c0f;
    color: var(--color-neutral-900);
  }
  .text-neutral-900\/70 {
    color: color-mix(in srgb, #0d0c0f 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, #0d0c0f 70%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-neutral-900) 70%, transparent);
    }
}
  }
  .text-primary-lavender-500 {
    color: #775be6;
    color: var(--color-primary-lavender-500);
  }
  .text-primary-lavender-600 {
    color: #6a52c8;
    color: var(--color-primary-lavender-600);
  }
  .text-primary-lavender-900 {
    color: #1a042a;
    color: var(--color-primary-lavender-900);
  }
  .text-semantic-error-500 {
    color: #f03c66;
    color: var(--color-semantic-error-500);
  }
  .text-semantic-error-600 {
    color: #dd2156;
    color: var(--color-semantic-error-600);
  }
  .text-white\/75 {
    color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, #fff 75%, transparent);
    }

@supports (color: color-mix(in lch, red, blue)){
@supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
}
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .overline {
    text-decoration-line: overline;
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-5 {
    opacity: 5%;
  }
  .opacity-10 {
    opacity: 10%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-95 {
    opacity: 95%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 25px 50px -12px rgb(0 0 0 / 0.25);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_-4px_16px_…\] {
    --tw-shadow: 0 -4px 16px var(--tw-shadow-color, …);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 -4px 16px …;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_0_3px_var\(--color-neutral-0\)\] {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-neutral-0));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 0 3px white;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-hard-200 {
    --tw-shadow: 0 4px 8px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 4px 8px 0 rgba(0, 0, 0, 0.25);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-medium-100 {
    --tw-shadow: 0 2px 4px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-medium-400 {
    --tw-shadow: 0 16px 24px -4px var(--tw-shadow-color, rgba(0, 0, 0, 0.15));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 16px 24px -4px rgba(0, 0, 0, 0.15);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-soft-100 {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-soft-200 {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-soft-300 {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-soft-400 {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 2px 0 rgb(0 0 0 / 0.05);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-white {
    --tw-ring-color: var(--color-white);
  }
  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: blur(8px)                ;
    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,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter:           invert(100%)      ;
    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,);
  }
  .filter {
    filter:                  ;
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: 150ms;
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: 150ms;
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: 150ms;
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: 150ms;
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: 150ms;
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: 150ms;
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-none {
    transition-property: none;
  }
  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .duration-1000 {
    --tw-duration: 1000ms;
    transition-duration: 1000ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
         user-select: all;
  }
  .select-auto {
    -webkit-user-select: auto;
    -moz-user-select: auto;
         user-select: auto;
  }
  .select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
  }
  .select-text {
    -webkit-user-select: text;
    -moz-user-select: text;
         user-select: text;
  }
  .\[db\:hard_reset\] {
    db: hard reset;
  }
  .group-focus-within\:flex {
    &:is(:where(.group):focus-within *) {
      display: flex;
    }
  }
  .group-focus-within\:hidden {
    &:is(:where(.group):focus-within *) {
      display: none;
    }
  }
  .group-hover\:flex {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: flex;
      }
    }
  }
  .group-hover\:hidden {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: none;
      }
    }
  }
  .group-has-checked\:block {
    &:is(:where(.group):has(*:checked) *) {
      display: block;
    }
  }
  .group-has-checked\:flex {
    &:is(:where(.group):has(*:checked) *) {
      display: flex;
    }
  }
  .group-has-\[textarea\:-moz-placeholder\]\:bg-neutral-200 {
    &:is(:where(.group):has(*:is(textarea:placeholder-shown)) *) {
      background-color: #ebebf7;
      background-color: var(--color-neutral-200);
    }
  }
  .group-has-\[textarea\:placeholder-shown\]\:bg-neutral-200 {
    &:is(:where(.group):has(*:is(textarea:-moz-placeholder)) *) {
      background-color: #ebebf7;
      background-color: var(--color-neutral-200);
    }
    &:is(:where(.group):has(*:is(textarea:placeholder-shown)) *) {
      background-color: #ebebf7;
      background-color: var(--color-neutral-200);
    }
  }
  .group-hover\:peer-not-checked\:fill-paths-neutral-500 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        &:is(:where(.peer):not(*:checked) ~ *) {
          & > path, & > g > path {
            fill: #747483;
            fill: var(--color-neutral-500);
          }
        }
      }
    }
  }
  .peer-checked\:fill-paths-primary-lavender-500 {
    &:is(:where(.peer):checked ~ *) {
      & > path, & > g > path {
        fill: #775be6;
        fill: var(--color-primary-lavender-500);
      }
    }
  }
  .marker\:text-semantic-error-500 {
    & *::marker {
      color: #f03c66;
      color: var(--color-semantic-error-500);
    }
    &::marker {
      color: #f03c66;
      color: var(--color-semantic-error-500);
    }
    & *::-webkit-details-marker {
      color: #f03c66;
      color: var(--color-semantic-error-500);
    }
    &::-webkit-details-marker {
      color: #f03c66;
      color: var(--color-semantic-error-500);
    }
  }
  .placeholder\:text-neutral-400 {
    &::-moz-placeholder {
      color: #a5a5b0;
      color: var(--color-neutral-400);
    }
    &::placeholder {
      color: #a5a5b0;
      color: var(--color-neutral-400);
    }
  }
  .before\:absolute {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .before\:-top-12 {
    &::before {
      content: var(--tw-content);
      top: calc(0.75rem * -1);
      top: calc(var(--spacing-12) * -1);
    }
  }
  .before\:left-24 {
    &::before {
      content: var(--tw-content);
      left: 1.5rem;
      left: var(--spacing-24);
    }
  }
  .before\:ml-\[-0\.5px\] {
    &::before {
      content: var(--tw-content);
      margin-left: -0.5px;
    }
  }
  .before\:block {
    &::before {
      content: var(--tw-content);
      display: block;
    }
  }
  .before\:h-24 {
    &::before {
      content: var(--tw-content);
      height: 1.5rem;
      height: var(--spacing-24);
    }
  }
  .before\:w-\[1px\] {
    &::before {
      content: var(--tw-content);
      width: 1px;
    }
  }
  .before\:bg-neutral-300 {
    &::before {
      content: var(--tw-content);
      background-color: #d6d6e8;
      background-color: var(--color-neutral-300);
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:top-32 {
    &::after {
      content: var(--tw-content);
      top: 2rem;
      top: var(--spacing-32);
    }
  }
  .after\:left-24 {
    &::after {
      content: var(--tw-content);
      left: 1.5rem;
      left: var(--spacing-24);
    }
  }
  .after\:ml-\[-0\.5px\] {
    &::after {
      content: var(--tw-content);
      margin-left: -0.5px;
    }
  }
  .after\:block {
    &::after {
      content: var(--tw-content);
      display: block;
    }
  }
  .after\:h-\[calc\(100\%-2rem\)\] {
    &::after {
      content: var(--tw-content);
      height: calc(100% - 2rem);
    }
  }
  .after\:w-\[1px\] {
    &::after {
      content: var(--tw-content);
      width: 1px;
    }
  }
  .after\:bg-neutral-300 {
    &::after {
      content: var(--tw-content);
      background-color: #d6d6e8;
      background-color: var(--color-neutral-300);
    }
  }
  .empty\:hidden {
    &:empty {
      display: none;
    }
  }
  .focus-within\:border-primary-lavender-500 {
    &:focus-within {
      border-color: #775be6;
      border-color: var(--color-primary-lavender-500);
    }
  }
  .focus-within\:bg-neutral-100 {
    &:focus-within {
      background-color: #f9f9fe;
      background-color: var(--color-neutral-100);
    }
  }
  .focus-within\:outline-\[3px\] {
    &:focus-within {
      outline-style: var(--tw-outline-style);
      outline-width: 3px;
    }
  }
  .focus-within\:outline-primary-lavender-200 {
    &:focus-within {
      outline-color: #e0d8ff;
      outline-color: var(--color-primary-lavender-200);
    }
  }
  .hover\:bg-neutral-100 {
    &:hover {
      @media (hover: hover) {
        background-color: #f9f9fe;
        background-color: var(--color-neutral-100);
      }
    }
  }
  .hover\:bg-neutral-200 {
    &:hover {
      @media (hover: hover) {
        background-color: #ebebf7;
        background-color: var(--color-neutral-200);
      }
    }
  }
  .hover\:bg-neutral-300 {
    &:hover {
      @media (hover: hover) {
        background-color: #d6d6e8;
        background-color: var(--color-neutral-300);
      }
    }
  }
  .hover\:text-neutral-700 {
    &:hover {
      @media (hover: hover) {
        color: oklch(37.1% 0 0);
        color: var(--color-neutral-700);
      }
    }
  }
  .hover\:text-neutral-900 {
    &:hover {
      @media (hover: hover) {
        color: #0d0c0f;
        color: var(--color-neutral-900);
      }
    }
  }
  .hover\:text-primary-lavender-600 {
    &:hover {
      @media (hover: hover) {
        color: #6a52c8;
        color: var(--color-primary-lavender-600);
      }
    }
  }
  .hover\:opacity-80 {
    &:hover {
      @media (hover: hover) {
        opacity: 80%;
      }
    }
  }
  .focus\:bg-neutral-100 {
    &:focus {
      background-color: #f9f9fe;
      background-color: var(--color-neutral-100);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-\[var\(--color-primary-lavender-500\)\] {
    &:focus-visible {
      --tw-ring-color: var(--color-primary-lavender-500);
    }
  }
  .focus-visible\:ring-offset-2 {
    &:focus-visible {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .hover\:has-not-checked\:border-neutral-500 {
    &:hover {
      @media (hover: hover) {
        &:has(*:not(*:checked)) {
          border-color: #747483;
          border-color: var(--color-neutral-500);
        }
      }
    }
  }
  .hover\:has-not-checked\:bg-neutral-200 {
    &:hover {
      @media (hover: hover) {
        &:has(*:not(*:checked)) {
          background-color: #ebebf7;
          background-color: var(--color-neutral-200);
        }
      }
    }
  }
  .hover\:has-not-checked\:text-neutral-500 {
    &:hover {
      @media (hover: hover) {
        &:has(*:not(*:checked)) {
          color: #747483;
          color: var(--color-neutral-500);
        }
      }
    }
  }
  .has-checked\:border-primary-lavender-500 {
    &:has(*:checked) {
      border-color: #775be6;
      border-color: var(--color-primary-lavender-500);
    }
  }
  .has-checked\:bg-primary-lavender-100 {
    &:has(*:checked) {
      background-color: #f4f1ff;
      background-color: var(--color-primary-lavender-100);
    }
  }
  .has-checked\:text-primary-lavender-500 {
    &:has(*:checked) {
      color: #775be6;
      color: var(--color-primary-lavender-500);
    }
  }
  .hover\:has-checked\:border-primary-lavender-600 {
    &:hover {
      @media (hover: hover) {
        &:has(*:checked) {
          border-color: #6a52c8;
          border-color: var(--color-primary-lavender-600);
        }
      }
    }
  }
  .hover\:has-checked\:bg-primary-lavender-200 {
    &:hover {
      @media (hover: hover) {
        &:has(*:checked) {
          background-color: #e0d8ff;
          background-color: var(--color-primary-lavender-200);
        }
      }
    }
  }
  .hover\:has-checked\:text-primary-lavender-600 {
    &:hover {
      @media (hover: hover) {
        &:has(*:checked) {
          color: #6a52c8;
          color: var(--color-primary-lavender-600);
        }
      }
    }
  }
  .max-tablet\:mt-auto {
    @media (max-width: 699.98px) {
      margin-top: auto;
    }
  }
  .max-tablet\:flex {
    @media (max-width: 699.98px) {
      display: flex;
    }
  }
  .max-tablet\:hidden {
    @media (max-width: 699.98px) {
      display: none;
    }
  }
  .max-tablet\:min-h-dvh {
    @media (max-width: 699.98px) {
      min-height: 100dvh;
    }
  }
  .max-tablet\:max-w-none {
    @media (max-width: 699.98px) {
      max-width: none;
    }
  }
  .max-tablet\:flex-col {
    @media (max-width: 699.98px) {
      flex-direction: column;
    }
  }
  .max-tablet\:items-center {
    @media (max-width: 699.98px) {
      align-items: center;
    }
  }
  .max-tablet\:gap-24 {
    @media (max-width: 699.98px) {
      gap: 1.5rem;
      gap: var(--spacing-24);
    }
  }
  .max-tablet\:self-center {
    @media (max-width: 699.98px) {
      align-self: center;
    }
  }
  .max-tablet\:px-24 {
    @media (max-width: 699.98px) {
      padding-inline: 1.5rem;
      padding-inline: var(--spacing-24);
    }
  }
  .max-tablet\:py-24 {
    @media (max-width: 699.98px) {
      padding-block: 1.5rem;
      padding-block: var(--spacing-24);
    }
  }
  .max-tablet\:text-center {
    @media (max-width: 699.98px) {
      text-align: center;
    }
  }
  .tablet\:absolute {
    @media (min-width: 700px) {
      position: absolute;
    }
  }
  .tablet\:relative {
    @media (min-width: 700px) {
      position: relative;
    }
  }
  .tablet\:inset-x-0 {
    @media (min-width: 700px) {
      inset-inline: calc(0.25rem * 0);
      inset-inline: calc(var(--spacing) * 0);
    }
  }
  .tablet\:top-1\/2 {
    @media (min-width: 700px) {
      top: calc(1 / 2 * 100%);
    }
  }
  .tablet\:left-1\/2 {
    @media (min-width: 700px) {
      left: calc(1 / 2 * 100%);
    }
  }
  .tablet\:order-1 {
    @media (min-width: 700px) {
      order: 1;
    }
  }
  .tablet\:order-2 {
    @media (min-width: 700px) {
      order: 2;
    }
  }
  .tablet\:order-none {
    @media (min-width: 700px) {
      order: 0;
    }
  }
  .tablet\:m-0 {
    @media (min-width: 700px) {
      margin: calc(0.25rem * 0);
      margin: calc(var(--spacing) * 0);
    }
  }
  .tablet\:mt-0 {
    @media (min-width: 700px) {
      margin-top: calc(0.25rem * 0);
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .tablet\:mt-24 {
    @media (min-width: 700px) {
      margin-top: 1.5rem;
      margin-top: var(--spacing-24);
    }
  }
  .tablet\:mr-0 {
    @media (min-width: 700px) {
      margin-right: calc(0.25rem * 0);
      margin-right: calc(var(--spacing) * 0);
    }
  }
  .tablet\:mr-32 {
    @media (min-width: 700px) {
      margin-right: 2rem;
      margin-right: var(--spacing-32);
    }
  }
  .tablet\:mb-0 {
    @media (min-width: 700px) {
      margin-bottom: calc(0.25rem * 0);
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .tablet\:ml-auto {
    @media (min-width: 700px) {
      margin-left: auto;
    }
  }
  .tablet\:block {
    @media (min-width: 700px) {
      display: block;
    }
  }
  .tablet\:contents {
    @media (min-width: 700px) {
      display: contents;
    }
  }
  .tablet\:flex {
    @media (min-width: 700px) {
      display: flex;
    }
  }
  .tablet\:hidden {
    @media (min-width: 700px) {
      display: none;
    }
  }
  .tablet\:inline {
    @media (min-width: 700px) {
      display: inline;
    }
  }
  .tablet\:inline-flex {
    @media (min-width: 700px) {
      display: inline-flex;
    }
  }
  .tablet\:w-384 {
    @media (min-width: 700px) {
      width: 24rem;
      width: var(--spacing-384);
    }
  }
  .tablet\:w-\[280px\] {
    @media (min-width: 700px) {
      width: 280px;
    }
  }
  .tablet\:max-w-none {
    @media (min-width: 700px) {
      max-width: none;
    }
  }
  .tablet\:grow {
    @media (min-width: 700px) {
      flex-grow: 1;
    }
  }
  .tablet\:-translate-x-1\/2 {
    @media (min-width: 700px) {
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: calc(calc(1 / 2 * 100%) * -1) var(--tw-translate-y);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .tablet\:-translate-y-1\/2 {
    @media (min-width: 700px) {
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .tablet\:grid-cols-2 {
    @media (min-width: 700px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .tablet\:flex-row {
    @media (min-width: 700px) {
      flex-direction: row;
    }
  }
  .tablet\:items-center {
    @media (min-width: 700px) {
      align-items: center;
    }
  }
  .tablet\:items-start {
    @media (min-width: 700px) {
      align-items: flex-start;
    }
  }
  .tablet\:justify-between {
    @media (min-width: 700px) {
      justify-content: space-between;
    }
  }
  .tablet\:justify-end {
    @media (min-width: 700px) {
      justify-content: flex-end;
    }
  }
  .tablet\:justify-start {
    @media (min-width: 700px) {
      justify-content: flex-start;
    }
  }
  .tablet\:gap-0 {
    @media (min-width: 700px) {
      gap: calc(0.25rem * 0);
      gap: calc(var(--spacing) * 0);
    }
  }
  .tablet\:gap-16 {
    @media (min-width: 700px) {
      gap: 1rem;
      gap: var(--spacing-16);
    }
  }
  .tablet\:px-0 {
    @media (min-width: 700px) {
      padding-inline: calc(0.25rem * 0);
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .tablet\:px-12 {
    @media (min-width: 700px) {
      padding-inline: 0.75rem;
      padding-inline: var(--spacing-12);
    }
  }
  .tablet\:py-0 {
    @media (min-width: 700px) {
      padding-block: calc(0.25rem * 0);
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .tablet\:pt-16 {
    @media (min-width: 700px) {
      padding-top: 1rem;
      padding-top: var(--spacing-16);
    }
  }
  .tablet\:pr-40 {
    @media (min-width: 700px) {
      padding-right: 2.5rem;
      padding-right: var(--spacing-40);
    }
  }
  .tablet\:text-left {
    @media (min-width: 700px) {
      text-align: left;
    }
  }
  .desktop\:flex {
    @media (min-width: 1280px) {
      display: flex;
    }
  }
  .desktop\:grid-cols-3 {
    @media (min-width: 1280px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-2 {
    @media (min-width: 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:col-span-2 {
    @media (min-width: 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:max-w-\[320px\] {
    @media (min-width: 48rem) {
      max-width: 320px;
    }
  }
  .md\:max-w-\[360px\] {
    @media (min-width: 48rem) {
      max-width: 360px;
    }
  }
  .md\:grid-cols-3 {
    @media (min-width: 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (min-width: 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (min-width: 48rem) {
      align-items: center;
    }
  }
  .md\:items-start {
    @media (min-width: 48rem) {
      align-items: flex-start;
    }
  }
  .md\:justify-between {
    @media (min-width: 48rem) {
      justify-content: space-between;
    }
  }
  .md\:gap-32 {
    @media (min-width: 48rem) {
      gap: 2rem;
      gap: var(--spacing-32);
    }
  }
  .lg\:w-\[400px\] {
    @media (min-width: 64rem) {
      width: 400px;
    }
  }
  .lg\:shrink-0 {
    @media (min-width: 64rem) {
      flex-shrink: 0;
    }
  }
  .lg\:flex-row {
    @media (min-width: 64rem) {
      flex-direction: row;
    }
  }
  .lg\:items-start {
    @media (min-width: 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:justify-between {
    @media (min-width: 64rem) {
      justify-content: space-between;
    }
  }
  .lg\:gap-48 {
    @media (min-width: 64rem) {
      gap: 3rem;
      gap: var(--spacing-48);
    }
  }
  .\[\:has\(\.echo-menu\[open\]\)\]\:flex {
    &:is(:has(.echo-menu[open])) {
      display: flex;
    }
  }
  .\[\:has\(\.echo-menu\[open\]\)\]\:bg-neutral-100 {
    &:is(:has(.echo-menu[open])) {
      background-color: #f9f9fe;
      background-color: var(--color-neutral-100);
    }
  }
  .\[\&\>\.echo-tooltip-trigger\]\:flex {
    &>.echo-tooltip-trigger {
      display: flex;
    }
  }
  .\[body\:has\(footer\.echo-audio-bar\:not\(\.hidden\)\)_\&\]\:bottom-\[…\] {
    body:has(footer.echo-audio-bar:not(.hidden)) & {
      bottom: …;
    }
  }
  .\[body\:has\(sidebar\.echo-sidebar-comments\)_\&\]\:right-\[calc\(var\(--layout-comments-sidebar-width\)\+0\.75rem\+0\.75rem\)\] {
    body:has(sidebar.echo-sidebar-comments) & {
      right: calc(24.5625rem + 0.75rem + 0.75rem);
      right: calc(var(--layout-comments-sidebar-width) + 0.75rem + 0.75rem);
    }
  }
  .\[body\:has\(sidebar\.echo-sidebar-comments\)_\&\]\:bottom-\[0\.75rem\] {
    body:has(sidebar.echo-sidebar-comments) & {
      bottom: 0.75rem;
    }
  }
}
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  --pswp-root-z-index: 100000;
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;
  --pswp-error-text-color: var(--pswp-icon-color);
}
.pswp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pswp-root-z-index);
  display: none;
  touch-action: none;
  outline: 0;
  opacity: 0.003;
  contain: layout style size;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.pswp:focus {
  outline: 0;
}
.pswp * {
  box-sizing: border-box;
}
.pswp img {
  max-width: none;
}
.pswp--open {
  display: block;
}
.pswp, .pswp__bg {
  transform: translateZ(0);
  will-change: opacity;
}
.pswp__bg {
  opacity: 0.005;
  background: var(--pswp-bg);
}
.pswp, .pswp__scroll-wrap {
  overflow: hidden;
}
.pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pswp__img, .pswp__zoom-wrap {
  width: auto;
  height: auto;
}
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
  cursor: zoom-in;
}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
  cursor: move;
  cursor: grab;
}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: grabbing;
}
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img {
  cursor: zoom-out;
}
.pswp__container, .pswp__img, .pswp__button, .pswp__counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pswp__item {
  z-index: 1;
  overflow: hidden;
}
.pswp__hidden {
  display: none !important;
}
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
  margin: auto;
  font-size: 1em;
  line-height: 1;
  color: var(--pswp-error-text-color);
}
.pswp .pswp__hide-on-close {
  opacity: 0.005;
  will-change: opacity;
  transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
  z-index: 10;
  pointer-events: none;
}
.pswp--ui-visible .pswp__hide-on-close {
  opacity: 1;
  pointer-events: auto;
}
.pswp__button {
  position: relative;
  display: block;
  width: 50px;
  height: 60px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 0.85;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
}
.pswp__button:hover, .pswp__button:active, .pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}
.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}
.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}
.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}
.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}
.pswp__icn:focus {
  outline: 0;
}
div.pswp__img--placeholder, .pswp__img--with-bg {
  background: var(--pswp-placeholder-bg);
}
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  z-index: 10;
  pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  will-change: opacity;
}
.pswp__button--close {
  margin-right: 6px;
}
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}
.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}
.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}
.pswp--one-slide .pswp__button--arrow {
  display: none;
}
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}
.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}
.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  transform: scale(-1, 1);
}
.pswp__button--zoom {
  display: none;
}
.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}
.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}
.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}
@keyframes pswp-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}
.pswp--one-slide .pswp__counter {
  display: none;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}