@import url("https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;500;600;700;800&display=swap");
/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
@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: rotateX(0);
      --tw-rotate-y: rotateY(0);
      --tw-rotate-z: rotateZ(0);
      --tw-skew-x: skewX(0);
      --tw-skew-y: skewY(0);
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --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;
    }
  }
}

@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-100: oklch(.967 .003 264.542);
    --color-gray-800: oklch(.278 .033 256.848);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(--font-sans--font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    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: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  body {
    line-height: inherit;
  }

  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;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.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 {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :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;
  }

  ::placeholder {
    opacity: 1;
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    ::placeholder {
      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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  * {
    border-color: var(--border);
  }

  html {
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-size: 16px;
  }

  html::-webkit-scrollbar {
    display: none;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-family-plain);
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .display-large {
    font-family: var(--font-family-brand);
    letter-spacing: -.015625em;
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 4rem;
  }

  .display-medium {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 2.8125rem;
    font-weight: 400;
    line-height: 3.25rem;
  }

  .display-medium-emphasized {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 2.8125rem;
    font-weight: 600;
    line-height: 3.25rem;
  }

  .display-small {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 2.75rem;
  }

  .display-small-emphasized {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 2.75rem;
  }

  .headline-large {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;
  }

  .headline-large-emphasized {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.5rem;
  }

  .headline-medium {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.25rem;
  }

  .headline-small {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
  }

  .title-large {
    font-family: var(--font-family-brand);
    letter-spacing: 0;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.75rem;
  }

  .title-medium {
    font-family: var(--font-family-plain);
    letter-spacing: .009375em;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
  }

  .title-medium-emphasized {
    font-family: var(--font-family-plain);
    letter-spacing: .009375em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  .title-small {
    font-family: var(--font-family-plain);
    letter-spacing: .00625em;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  .title-small-emphasized {
    font-family: var(--font-family-plain);
    letter-spacing: .00625em;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
  }

  .label-large {
    font-family: var(--font-family-plain);
    letter-spacing: .00625em;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  .label-medium {
    font-family: var(--font-family-plain);
    letter-spacing: .03125em;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
  }

  .label-small {
    font-family: var(--font-family-plain);
    letter-spacing: .03125em;
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1rem;
  }

  .body-large {
    font-family: var(--font-family-plain);
    letter-spacing: .03125em;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
  }

  .body-medium {
    font-family: var(--font-family-plain);
    letter-spacing: .015625em;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }

  .body-small {
    font-family: var(--font-family-plain);
    letter-spacing: .025em;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-brand);
  }

  h1 {
    letter-spacing: 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;
  }

  h2 {
    letter-spacing: 0;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.25rem;
  }

  h3 {
    letter-spacing: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
  }

  h4 {
    letter-spacing: 0;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.75rem;
  }

  h5 {
    letter-spacing: .009375em;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
  }

  h6 {
    letter-spacing: .00625em;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  p {
    font-family: var(--font-family-plain);
    letter-spacing: .015625em;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }

  label, button {
    font-family: var(--font-family-plain);
    letter-spacing: .00625em;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  input, textarea {
    font-family: var(--font-family-plain);
    letter-spacing: .03125em;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
  }
}

@layer utilities {
  .\@container\/card-header {
    container: card-header / inline-size;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-\[50\%\] {
    top: 50%;
  }

  .-right-2 {
    right: calc(var(--spacing) * -2);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .-bottom-2 {
    bottom: calc(var(--spacing) * -2);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-28 {
    bottom: calc(var(--spacing) * 28);
  }

  .bottom-\[-0\.5px\] {
    bottom: -.5px;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .isolate {
    isolation: isolate;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .z-\[70\] {
    z-index: 70;
  }

  .z-\[200\] {
    z-index: 200;
  }

  .z-\[210\] {
    z-index: 210;
  }

  .z-\[250\] {
    z-index: 250;
  }

  .z-\[300\] {
    z-index: 300;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .\!container {
    width: 100% !important;
  }

  @media (width >= 40rem) {
    .\!container {
      max-width: 40rem !important;
    }
  }

  @media (width >= 48rem) {
    .\!container {
      max-width: 48rem !important;
    }
  }

  @media (width >= 64rem) {
    .\!container {
      max-width: 64rem !important;
    }
  }

  @media (width >= 80rem) {
    .\!container {
      max-width: 80rem !important;
    }
  }

  @media (width >= 96rem) {
    .\!container {
      max-width: 96rem !important;
    }
  }

  .container {
    width: 100%;
  }

  @media (width >= 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (width >= 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (width >= 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (width >= 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (width >= 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .-m-px {
    margin: -1px;
  }

  .m-\[-16px\] {
    margin: -16px;
  }

  .m-\[4px\] {
    margin: 4px;
  }

  .mx-\[0px\] {
    margin-inline: 0;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-\[5px\] {
    margin-block: 5px;
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-\[0px\] {
    margin-top: 0;
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-\[-8px\] {
    margin-right: -8px;
  }

  .mr-\[0px\] {
    margin-right: 0;
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-\[4px\] {
    margin-bottom: 4px;
  }

  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-\[0px\] {
    margin-left: 0;
  }

  .box-border {
    box-sizing: border-box;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[29px\] {
    height: 29px;
  }

  .h-\[48px\] {
    height: 48px;
  }

  .h-\[85vh\] {
    height: 85vh;
  }

  .h-\[90vh\] {
    height: 90vh;
  }

  .h-\[172px\] {
    height: 172px;
  }

  .h-\[192px\] {
    height: 192px;
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-\[50vh\] {
    max-height: 50vh;
  }

  .max-h-\[85vh\] {
    max-height: 85vh;
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-\[44px\] {
    min-height: 44px;
  }

  .min-h-\[48px\] {
    min-height: 48px;
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .min-h-px {
    min-height: 1px;
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-\[2px\] {
    width: 2px;
  }

  .w-\[172px\] {
    width: 172px;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .max-w-\[342px\] {
    max-width: 342px;
  }

  .max-w-\[calc\(100\%-2rem\)\] {
    max-width: calc(100% - 2rem);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-16 {
    min-width: calc(var(--spacing) * 16);
  }

  .min-w-\[48px\] {
    min-width: 48px;
  }

  .min-w-\[56px\] {
    min-width: 56px;
  }

  .min-w-px {
    min-width: 1px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink-0, .shrink-0 {
    flex-shrink: 0;
  }

  .origin-\(--radix-tooltip-content-transform-origin\) {
    transform-origin: var(--radix-tooltip-content-transform-origin);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    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) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[calc\(-50\%_-_2px\)\] {
    --tw-translate-y: calc(-50% - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
  }

  .animate-in {
    animation: enter var(--tw-duration, .15s) var(--tw-ease, ease);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .touch-manipulation {
    touch-action: manipulation;
  }

  .touch-none {
    touch-action: none;
  }

  .auto-rows-min {
    grid-auto-rows: min-content;
  }

  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

  .content-stretch {
    align-content: stretch;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  .self-start {
    align-self: flex-start;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-clip {
    overflow: clip;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[8px\] {
    border-radius: 8px;
  }

  .rounded-\[16px\] {
    border-radius: 16px;
  }

  .rounded-\[28px\] {
    border-radius: 28px;
  }

  .rounded-\[100px\] {
    border-radius: 100px;
  }

  .rounded-\[300px\] {
    border-radius: 300px;
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--md-sys-shape-corner-medium);
  }

  .rounded-md {
    border-radius: var(--md-sys-shape-corner-small);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-xl {
    border-radius: var(--md-sys-shape-corner-large);
  }

  .rounded-xs {
    border-radius: var(--radius-xs);
  }

  .rounded-t-3xl {
    border-top-left-radius: var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-input {
    border-color: var(--input);
  }

  .border-on-surface {
    border-color: var(--md-sys-color-on-surface);
  }

  .border-on-surface-variant {
    border-color: var(--md-sys-color-on-surface-variant);
  }

  .border-outline-variant {
    border-color: var(--md-sys-color-outline-variant);
  }

  .border-primary {
    border-color: var(--primary);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-l-transparent {
    border-left-color: #0000;
  }

  .bg-\[\#0A0E0D\] {
    background-color: #0a0e0d;
  }

  .bg-\[\#75ECAE\] {
    background-color: #75ecae;
  }

  .bg-\[\#82D5C7\] {
    background-color: #82d5c7;
  }

  .bg-\[\#B1CCC6\] {
    background-color: #b1ccc6;
  }

  .bg-background {
    background-color: var(--background);
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

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

  .bg-border {
    background-color: var(--border);
  }

  .bg-card {
    background-color: var(--card);
  }

  .bg-destructive {
    background-color: var(--destructive);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-input-background {
    background-color: var(--input-background);
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .bg-muted\/50 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }

  .bg-on-surface-variant {
    background-color: var(--md-sys-color-on-surface-variant);
  }

  .bg-outline-variant {
    background-color: var(--md-sys-color-outline-variant);
  }

  .bg-primary {
    background-color: var(--primary);
  }

  .bg-primary-container {
    background-color: var(--primary-container);
  }

  .bg-primary\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-secondary {
    background-color: var(--secondary);
  }

  .bg-surface-container {
    background-color: var(--md-sys-color-surface-container);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .fill-primary {
    fill: var(--primary);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-\[0px\] {
    padding: 0;
  }

  .p-\[8px\] {
    padding: 8px;
  }

  .p-\[16px\] {
    padding: 16px;
  }

  .p-px {
    padding: 1px;
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-\[0px\] {
    padding-top: 0;
  }

  .pt-\[8px\] {
    padding-top: 8px;
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pr-14 {
    padding-right: calc(var(--spacing) * 14);
  }

  .pr-\[8px\] {
    padding-right: 8px;
  }

  .pr-\[16px\] {
    padding-right: 16px;
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-\[8px\] {
    padding-bottom: 8px;
  }

  .pb-\[16px\] {
    padding-bottom: 16px;
  }

  .pb-\[24px\] {
    padding-bottom: 24px;
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-\[0px\] {
    padding-left: 0;
  }

  .pl-\[11px\] {
    padding-left: 11px;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .align-middle {
    vertical-align: middle;
  }

  .font-\[\'Chivo\'\,_sans-serif\] {
    font-family: Chivo, sans-serif;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-8xl {
    font-size: var(--text-8xl);
    line-height: var(--tw-leading, var(--text-8xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[24px\] {
    font-size: 24px;
  }

  .text-\[28px\] {
    font-size: 28px;
  }

  .leading-\[0\] {
    --tw-leading: 0;
    line-height: 0;
  }

  .leading-\[20px\] {
    --tw-leading: 20px;
    line-height: 20px;
  }

  .leading-\[32px\] {
    --tw-leading: 32px;
    line-height: 32px;
  }

  .leading-\[36px\] {
    --tw-leading: 36px;
    line-height: 36px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.1px\] {
    --tw-tracking: .1px;
    letter-spacing: .1px;
  }

  .tracking-\[0\.25px\] {
    --tw-tracking: .25px;
    letter-spacing: .25px;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-nowrap {
    text-wrap: nowrap;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre {
    white-space: pre;
  }

  .text-\[\#003731\], .text-\[rgba\(0\,55\,49\,1\)\] {
    color: #003731;
  }

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-current {
    color: currentColor;
  }

  .text-foreground {
    color: var(--foreground);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-muted-foreground {
    color: var(--muted-foreground);
  }

  .text-on-surface {
    color: var(--md-sys-color-on-surface);
  }

  .text-on-surface-variant {
    color: var(--md-sys-color-on-surface-variant);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-foreground {
    color: var(--primary-foreground);
  }

  .text-secondary-foreground {
    color: var(--secondary-foreground);
  }

  .text-white {
    color: var(--color-white);
  }

  .italic {
    font-style: italic;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    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, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    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, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    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, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-offset-background {
    --tw-ring-offset-color: var(--background);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: 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, );
  }

  .drop-shadow-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    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: 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, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    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: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .fade-in-0 {
    --tw-enter-opacity: 0;
  }

  .zoom-in-95 {
    --tw-enter-scale: .95;
  }

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
    opacity: .5;
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
    opacity: .5;
  }

  .selection\:bg-primary ::selection, .selection\:bg-primary::selection {
    background-color: var(--primary);
  }

  .selection\:text-primary-foreground ::selection, .selection\:text-primary-foreground::selection {
    color: var(--primary-foreground);
  }

  .file\:inline-flex::file-selector-button {
    display: inline-flex;
  }

  .file\:h-7::file-selector-button {
    height: calc(var(--spacing) * 7);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::file-selector-button {
    color: var(--foreground);
  }

  .placeholder\:text-\[\#88938f\]::placeholder {
    color: #88938f;
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: var(--muted-foreground);
  }

  @media (hover: hover) {
    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media (hover: hover) {
    .hover\:border-outline-variant:hover {
      border-color: var(--md-sys-color-outline-variant);
    }
  }

  @media (hover: hover) {
    .hover\:border-primary:hover {
      border-color: var(--primary);
    }
  }

  @media (hover: hover) {
    .hover\:bg-accent\/10:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/10:hover {
        background-color: color-mix(in oklab, var(--accent) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-secondary\/80:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-foreground:hover {
      color: var(--foreground);
    }
  }

  @media (hover: hover) {
    .hover\:text-on-surface:hover {
      color: var(--md-sys-color-on-surface);
    }
  }

  @media (hover: hover) {
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }

  @media (hover: hover) {
    .hover\:opacity-100:hover {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .hover\:opacity-\[0\.08\]:hover {
      opacity: .08;
    }
  }

  @media (hover: hover) {
    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:border-primary:focus {
    border-color: var(--primary);
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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\:ring-2:focus {
    --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\:ring-ring:focus {
    --tw-ring-color: var(--ring);
  }

  .focus\:ring-offset-2:focus {
    --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);
  }

  .focus\:outline-hidden:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus\:outline-hidden:focus {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:border-ring:focus-visible {
    border-color: var(--ring);
  }

  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus-visible\:outline-1:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }

  .has-\[\>svg\]\:px-2\.5:has( > svg) {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .has-\[\>svg\]\:px-3:has( > svg) {
    padding-inline: calc(var(--spacing) * 3);
  }

  .has-\[\>svg\]\:px-4:has( > svg) {
    padding-inline: calc(var(--spacing) * 4);
  }

  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: var(--destructive);
  }

  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: calc(2 * var(--spacing));
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: calc(2 * var(--spacing));
  }

  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation: exit var(--tw-duration, .15s) var(--tw-ease, ease);
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
  }

  .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
    --tw-exit-translate-y: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
    --tw-exit-translate-x: -100%;
  }

  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
    --tw-exit-translate-x: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
    --tw-exit-translate-y: -100%;
  }

  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
    --tw-exit-scale: .95;
  }

  .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation: enter var(--tw-duration, .15s) var(--tw-ease, ease);
  }

  .data-\[state\=open\]\:bg-accent[data-state="open"] {
    background-color: var(--accent);
  }

  .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
    color: var(--muted-foreground);
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
  }

  .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
    --tw-enter-translate-x: -100%;
  }

  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
    --tw-enter-translate-x: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
    --tw-enter-translate-y: -100%;
  }

  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
    --tw-enter-scale: .95;
  }

  @media (width >= 40rem) {
    .sm\:line-clamp-3 {
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
    }
  }

  @media (width >= 40rem) {
    .sm\:max-w-lg {
      max-width: var(--container-lg);
    }
  }

  @media (width >= 40rem) {
    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }
  }

  @media (width >= 40rem) {
    .sm\:flex-row {
      flex-direction: row;
    }
  }

  @media (width >= 40rem) {
    .sm\:justify-end {
      justify-content: flex-end;
    }
  }

  @media (width >= 40rem) {
    .sm\:text-left {
      text-align: left;
    }
  }

  @media (width >= 48rem) {
    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .dark\:border-input:is(.dark *) {
    border-color: var(--input);
  }

  .dark\:bg-destructive\/60:is(.dark *) {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/60:is(.dark *) {
      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }

  .dark\:bg-input\/30:is(.dark *) {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-accent\/20:is(.dark *):hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-accent\/20:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--accent) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-input\/50:is(.dark *):hover {
      background-color: var(--input);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-input\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }
  }

  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\.border-b\]\:pb-6.border-b {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .\[\.border-t\]\:pt-6.border-t {
    padding-top: calc(var(--spacing) * 6);
  }

  .\[\&\:last-child\]\:pb-6:last-child {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .\[\&\>button\]\:hidden > button {
    display: none;
  }

  .\[\&\>svg\]\:pointer-events-none > svg {
    pointer-events: none;
  }

  .\[\&\>svg\]\:size-3 > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-accent:hover {
      background-color: var(--accent);
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:text-accent-foreground:hover {
      color: var(--accent-foreground);
    }
  }
}


:root {
  --font-family-brand: "Chivo", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  --font-family-plain: "Chivo", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  --md-sys-color-primary: #006a60;
  --md-sys-color-on-primary: #003731;
  --md-sys-color-primary-container: #9cf2e5;
  --md-sys-color-on-primary-container: #00201c;
  --md-sys-color-secondary: #4a635f;
  --md-sys-color-on-secondary: #fff;
  --md-sys-color-secondary-container: #cce8e2;
  --md-sys-color-on-secondary-container: #051f1c;
  --md-sys-color-tertiary: #426277;
  --md-sys-color-on-tertiary: #fff;
  --md-sys-color-tertiary-container: #c9e7ff;
  --md-sys-color-on-tertiary-container: #001e2f;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #fff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-background: #fafdfa;
  --md-sys-color-on-background: #e0e3e0;
  --md-sys-color-surface: #fafdfa;
  --md-sys-color-on-surface: #191c1b;
  --md-sys-color-surface-variant: #dae5e1;
  --md-sys-color-on-surface-variant: #3f4946;
  --md-sys-color-surface-container-lowest: #fff;
  --md-sys-color-surface-container-low: #f4f7f4;
  --md-sys-color-surface-container: #eef1ee;
  --md-sys-color-surface-container-high: #e8ece9;
  --md-sys-color-surface-container-highest: #e3e6e3;
  --md-sys-color-surface-tint: #006a60;
  --md-sys-color-surface-bright: #fafdfa;
  --md-sys-color-surface-dim: #dbe0dd;
  --md-sys-color-outline: #6f7975;
  --md-sys-color-outline-variant: #bec9c5;
  --md-sys-color-inverse-surface: #2e312f;
  --md-sys-color-inverse-on-surface: #eff1ee;
  --md-sys-color-inverse-primary: #80d5c8;
  --md-sys-state-hover-state-layer-opacity: .08;
  --md-sys-state-focus-state-layer-opacity: .12;
  --md-sys-state-pressed-state-layer-opacity: .12;
  --md-sys-state-dragged-state-layer-opacity: .16;
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  --background: var(--md-sys-color-background);
  --foreground: var(--md-sys-color-on-background);
  --card: var(--md-sys-color-surface-container);
  --card-foreground: var(--md-sys-color-on-surface);
  --popover: var(--md-sys-color-surface-container);
  --popover-foreground: var(--md-sys-color-on-surface);
  --primary: var(--md-sys-color-primary);
  --primary-foreground: var(--md-sys-color-on-primary);
  --secondary: var(--md-sys-color-secondary-container);
  --secondary-foreground: var(--md-sys-color-on-secondary-container);
  --muted: var(--md-sys-color-surface-variant);
  --muted-foreground: var(--md-sys-color-on-surface-variant);
  --accent: var(--md-sys-color-tertiary-container);
  --accent-foreground: var(--md-sys-color-on-tertiary-container);
  --destructive: var(--md-sys-color-error);
  --destructive-foreground: var(--md-sys-color-on-error);
  --border: var(--md-sys-color-outline-variant);
  --input: var(--md-sys-color-outline);
  --input-background: var(--md-sys-color-surface-container-highest);
  --ring: var(--md-sys-color-primary);
  --radius: var(--md-sys-shape-corner-medium);
  --primary-container: var(--md-sys-color-primary-container);
  --on-primary-container: var(--md-sys-color-on-primary-container);
}

.dark {
  --md-sys-color-primary: #75ecae;
  --md-sys-color-on-primary: #003731;
  --md-sys-color-primary-container: #005048;
  --md-sys-color-on-primary-container: #9cf2e5;
  --md-sys-color-secondary: #b1ccc6;
  --md-sys-color-on-secondary: #1c3531;
  --md-sys-color-secondary-container: #334b47;
  --md-sys-color-on-secondary-container: #cce8e2;
  --md-sys-color-tertiary: #adc7e7;
  --md-sys-color-on-tertiary: #143445;
  --md-sys-color-tertiary-container: #2b4a5c;
  --md-sys-color-on-tertiary-container: #c9e7ff;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-background: #0a0e0d;
  --md-sys-color-on-background: #e0e3e0;
  --md-sys-color-surface: #0a0e0d;
  --md-sys-color-on-surface: #e0e3e0;
  --md-sys-color-surface-variant: #3f4946;
  --md-sys-color-on-surface-variant: #bec9c5;
  --md-sys-color-surface-container-lowest: #050907;
  --md-sys-color-surface-container-low: #131615;
  --md-sys-color-surface-container: #171a19;
  --md-sys-color-surface-container-high: #212523;
  --md-sys-color-surface-container-highest: #2c302e;
  --md-sys-color-surface-tint: #80d5c8;
  --md-sys-color-surface-bright: #303431;
  --md-sys-color-surface-dim: #0a0e0d;
  --md-sys-color-outline: #88938f;
  --md-sys-color-outline-variant: #3f4946;
  --md-sys-color-inverse-surface: #e0e3e0;
  --md-sys-color-inverse-on-surface: #2e312f;
  --md-sys-color-inverse-primary: #006a60;
  --background: var(--md-sys-color-background);
  --foreground: var(--md-sys-color-on-background);
  --card: var(--md-sys-color-surface-container);
  --card-foreground: var(--md-sys-color-on-surface);
  --popover: var(--md-sys-color-surface-container);
  --popover-foreground: var(--md-sys-color-on-surface);
  --primary: var(--md-sys-color-primary);
  --primary-foreground: var(--md-sys-color-on-primary);
  --secondary: var(--md-sys-color-secondary-container);
  --secondary-foreground: var(--md-sys-color-on-secondary-container);
  --muted: var(--md-sys-color-surface-variant);
  --muted-foreground: var(--md-sys-color-on-surface-variant);
  --accent: var(--md-sys-color-tertiary-container);
  --accent-foreground: var(--md-sys-color-on-tertiary-container);
  --destructive: var(--md-sys-color-error);
  --destructive-foreground: var(--md-sys-color-on-error);
  --border: var(--md-sys-color-outline-variant);
  --input: var(--md-sys-color-outline);
  --input-background: var(--md-sys-color-surface-container-highest);
  --ring: var(--md-sys-color-primary);
  --primary-container: var(--md-sys-color-primary-container);
  --on-primary-container: var(--md-sys-color-on-primary-container);
}

@media (width <= 640px) {
  html {
    font-size: 16px;
  }

  .display-large {
    font-size: 3rem;
    line-height: 3.5rem;
  }

  .display-medium, .display-medium-emphasized {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  .display-small, .display-small-emphasized {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .headline-large, .headline-large-emphasized {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .headline-medium {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .headline-small {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }

  .title-large {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }

  .title-medium, .title-medium-emphasized {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .title-small, .title-small-emphasized, .label-large {
    font-size: .875rem;
    line-height: 1.25rem;
  }

  .label-medium {
    font-size: .75rem;
    line-height: 1rem;
  }

  .label-small {
    font-size: .6875rem;
    line-height: 1rem;
  }

  .body-large {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .body-medium {
    font-size: .875rem;
    line-height: 1.25rem;
  }

  .body-small {
    font-size: .75rem;
    line-height: 1rem;
  }

  input, textarea {
    line-height: 1.5;
    font-size: 16px !important;
  }

  h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  h2 {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  h3 {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }

  h4 {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }

  h5 {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  h6, p {
    font-size: .875rem;
    line-height: 1.25rem;
  }
}

.shape-none {
  border-radius: var(--md-sys-shape-corner-none);
}

.shape-extra-small {
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.shape-small {
  border-radius: var(--md-sys-shape-corner-small);
}

.shape-medium {
  border-radius: var(--md-sys-shape-corner-medium);
}

.shape-large {
  border-radius: var(--md-sys-shape-corner-large);
}

.shape-extra-large {
  border-radius: var(--md-sys-shape-corner-extra-large);
}

.shape-full {
  border-radius: var(--md-sys-shape-corner-full);
}

.state-layer-hover:hover {
  background-color: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  .state-layer-hover:hover {
    background-color: color-mix(in srgb, currentColor var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.state-layer-focus:focus-visible {
  background-color: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  .state-layer-focus:focus-visible {
    background-color: color-mix(in srgb, currentColor var(--md-sys-state-focus-state-layer-opacity), transparent);
  }
}

.state-layer-pressed:active {
  background-color: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  .state-layer-pressed:active {
    background-color: color-mix(in srgb, currentColor var(--md-sys-state-pressed-state-layer-opacity), transparent);
  }
}

.surface-container-lowest {
  background-color: var(--md-sys-color-surface-container-lowest);
}

.surface-container-low {
  background-color: var(--md-sys-color-surface-container-low);
}

.surface-container-highest {
  background-color: var(--md-sys-color-surface-container-highest);
}

.bg-surface-container {
  background-color: var(--md-sys-color-surface-container);
}

.text-on-surface {
  color: var(--md-sys-color-on-surface);
}

.text-on-surface-variant {
  color: var(--md-sys-color-on-surface-variant);
}

.bg-secondary-container {
  background-color: var(--md-sys-color-secondary-container);
}

.text-on-secondary-container {
  color: var(--md-sys-color-on-secondary-container);
}

.border-outline-variant {
  border-color: var(--md-sys-color-outline-variant);
}

.bg-primary-container {
  background-color: var(--md-sys-color-primary-container);
}

.text-on-primary-container {
  color: var(--md-sys-color-on-primary-container);
}

.pills-carousel::-webkit-scrollbar {
  display: none;
}

.pills-carousel {
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.backdrop-blur-glass {
  -webkit-backdrop-filter: blur(12px);
  background-color: var(--md-sys-color-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .backdrop-blur-glass {
    background-color: color-mix(in srgb, var(--md-sys-color-surface-container) 90%, transparent);
  }
}

.elevation-1 {
  box-shadow: 0 1px 2px #0000004d, 0 1px 3px 1px #00000026;
}

.elevation-2 {
  box-shadow: 0 1px 2px #0000004d, 0 2px 6px 2px #00000026;
}

.elevation-3 {
  box-shadow: 0 4px 8px 3px #00000026, 0 1px 3px #0000004d;
}

.elevation-4 {
  box-shadow: 0 6px 10px 4px #00000026, 0 2px 3px #0000004d;
}

.elevation-5 {
  box-shadow: 0 8px 12px 6px #00000026, 0 4px 4px #0000004d;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

@media (width <= 768px) {
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  main, body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

@keyframes scroll-to-top-indicator {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  50% {
    opacity: .6;
    transform: translateY(-2px);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.scroll-to-top-feedback {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-full);
  z-index: 1000;
  pointer-events: none;
  box-shadow: var(--elevation-3);
  padding: 8px 16px;
  font-size: .75rem;
  font-weight: 500;
  animation: 1.5s ease-out forwards scroll-to-top-indicator;
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
}

.smooth-scroll-active {
  scroll-behavior: smooth !important;
}

.instant-scroll-active {
  scroll-behavior: auto !important;
}

@keyframes md3-emphasized-accelerate {
  from {
    opacity: 0;
    transform: scale(.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes md3-emphasized-decelerate {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.8);
  }
}

.animate-md3-enter {
  animation: .3s cubic-bezier(.05, .7, .1, 1) md3-emphasized-accelerate;
}

.animate-md3-exit {
  animation: .2s cubic-bezier(.3, 0, .8, .15) md3-emphasized-decelerate;
}

.card-hover {
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  position: relative;
}

@media (hover: hover) {
  .card-hover:hover {
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
  }

  .card-hover:hover:before {
    content: "";
    background-color: var(--md-sys-color-on-surface);
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .card-hover:hover:before {
      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
    }
  }
}

.card-filled {
  background-color: var(--md-sys-color-surface-container-highest);
  border: none;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  position: relative;
}

@media (hover: hover) {
  .card-filled:hover {
    background-color: var(--md-sys-color-surface-container-high);
  }

  .card-filled:hover:before {
    content: "";
    background-color: var(--md-sys-color-on-surface);
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .card-filled:hover:before {
      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
    }
  }
}

.card-elevated {
  background-color: var(--md-sys-color-surface-container-highest);
  border: none;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  position: relative;
}

@media (hover: hover) {
  .card-elevated:hover {
    background-color: var(--md-sys-color-surface-container-high);
  }

  .card-elevated:hover:before {
    content: "";
    background-color: var(--md-sys-color-on-surface);
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .card-elevated:hover:before {
      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
    }
  }
}

.focus-ring:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.smooth-transition {
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
}

.content-grid {
  grid-template-columns: 1fr;
  gap: 1rem;
  display: grid;
}

@media (width >= 640px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.custom-scrollbar::-webkit-scrollbar {
  display: none;
}

.custom-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

div::-webkit-scrollbar {
  display: none;
}

main::-webkit-scrollbar {
  display: none;
}

section::-webkit-scrollbar {
  display: none;
}

article::-webkit-scrollbar {
  display: none;
}

aside::-webkit-scrollbar {
  display: none;
}

nav::-webkit-scrollbar {
  display: none;
}

ul::-webkit-scrollbar {
  display: none;
}

ol::-webkit-scrollbar {
  display: none;
}

li::-webkit-scrollbar {
  display: none;
}

textarea::-webkit-scrollbar {
  display: none;
}

pre::-webkit-scrollbar {
  display: none;
}

code::-webkit-scrollbar {
  display: none;
}

div, main, section, article, aside, nav, ul, ol, li, textarea, pre, code {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.responsive-padding {
  padding: 1rem;
}

@media (width >= 640px) {
  .responsive-padding {
    padding: 1.5rem;
  }
}

@media (prefers-contrast: high) {
  :root {
    --md-sys-color-outline: #000;
    --md-sys-color-on-surface-variant: #000;
  }

  .dark {
    --md-sys-color-outline: #fff;
    --md-sys-color-on-surface-variant: #fff;
  }
}

.slide-up-enter, .slide-up-exit, .slide-down-enter, .slide-down-exit {
  backface-visibility: hidden;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
}

.slide-up-enter.slide-up-enter-active {
  animation: .35s cubic-bezier(.25, .46, .45, .94) forwards slideUpFromBottom;
}

.slide-up-exit.slide-up-exit-active, .slide-down-exit.slide-down-exit-active {
  animation: .3s cubic-bezier(.25, .46, .45, .94) forwards slideDownToBottom;
}

.slide-down-enter.slide-down-enter-active {
  animation: .35s cubic-bezier(.25, .46, .45, .94) forwards slideDownFromTop;
}

.slide-down-exit.slide-down-exit-active {
  animation: .3s cubic-bezier(.25, .46, .45, .94) forwards slideUpToTop;
}

@keyframes slideUpFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDownToBottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes slideDownFromTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpToTop {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@media (width <= 768px) {
  .slide-up-enter.slide-up-enter-active {
    animation: .32s cubic-bezier(.25, .46, .45, .94) forwards slideUpFromBottom;
  }

  .slide-up-exit.slide-up-exit-active {
    animation: .28s cubic-bezier(.25, .46, .45, .94) forwards slideDownToBottom;
  }

  .slide-down-enter.slide-down-enter-active {
    animation: .32s cubic-bezier(.25, .46, .45, .94) forwards slideDownFromTop;
  }

  .slide-down-exit.slide-down-exit-active {
    animation: .28s cubic-bezier(.25, .46, .45, .94) forwards slideUpToTop;
  }

  @keyframes slideUpFromBottom {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slideDownToBottom {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    to {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  }

  @keyframes slideDownFromTop {
    from {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slideUpToTop {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    to {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
  }
}

.slide-up-enter, .slide-up-enter-active, .slide-up-exit, .slide-up-exit-active, .slide-down-enter, .slide-down-enter-active, .slide-down-exit, .slide-down-exit-active {
  will-change: transform, opacity;
  contain: layout style paint;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
}

@supports (-webkit-touch-callout: none) {
  .slide-up-enter, .slide-up-enter-active, .slide-up-exit, .slide-up-exit-active, .slide-down-enter, .slide-down-enter-active, .slide-down-exit, .slide-down-exit-active {
    -webkit-backface-visibility: hidden;
    -webkit-will-change: transform, opacity;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

.vertical-transition-container {
  z-index: 100;
  background-color: var(--md-sys-color-background);
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0;
}

.add-pick-page, .create-collection-page {
  background-color: var(--md-sys-color-background);
  width: 100%;
  height: 100%;
  position: relative;
}

@media (width <= 768px) {
  .vertical-transition-container {
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    height: 100dvh;
    transform: translate3d(0, 0, 0);
  }

  .add-pick-page {
    will-change: transform, opacity;
    contain: layout style paint;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-up-enter.slide-up-enter-active, .slide-up-exit.slide-up-exit-active, .slide-down-enter.slide-down-enter-active, .slide-down-exit.slide-down-exit-active {
    opacity: 1 !important;
    animation: none !important;
    transform: translateY(0) !important;
  }
}

.slide-enter, .slide-exit, .slide-back-enter, .slide-back-exit {
  backface-visibility: hidden;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
}

.slide-enter.slide-enter-active {
  animation: .35s cubic-bezier(.25, .46, .45, .94) forwards slideInFromRight;
}

.slide-exit.slide-exit-active {
  animation: .3s cubic-bezier(.25, .46, .45, .94) forwards slideOutToLeft;
}

.slide-back-enter.slide-back-enter-active {
  animation: .35s cubic-bezier(.25, .46, .45, .94) forwards slideInFromLeft;
}

.slide-back-exit.slide-back-exit-active {
  animation: .3s cubic-bezier(.25, .46, .45, .94) forwards slideOutToRight;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutToLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@media (width <= 768px) {
  .slide-enter.slide-enter-active {
    animation: .32s cubic-bezier(.25, .46, .45, .94) forwards slideInFromRight;
  }

  .slide-exit.slide-exit-active {
    animation: .28s cubic-bezier(.25, .46, .45, .94) forwards slideOutToLeft;
  }

  .slide-back-enter.slide-back-enter-active {
    animation: .32s cubic-bezier(.25, .46, .45, .94) forwards slideInFromLeft;
  }

  .slide-back-exit.slide-back-exit-active {
    animation: .28s cubic-bezier(.25, .46, .45, .94) forwards slideOutToRight;
  }

  @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slideOutToLeft {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    to {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
  }

  @keyframes slideInFromLeft {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slideOutToRight {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }
}

@keyframes sheet-slide-up-enter {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sheet-slide-down-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.sheet-enter {
  animation: .3s cubic-bezier(.05, .7, .1, 1) forwards sheet-slide-up-enter;
}

.sheet-exit {
  animation: .25s cubic-bezier(.3, 0, .8, .15) forwards sheet-slide-down-exit;
}

.sheet-slide-down {
  animation: .3s cubic-bezier(.3, 0, .8, .15) forwards sheet-slide-down-exit;
}

.list-navigation-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.list-view-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.list-view-container.transitioning {
  position: absolute;
  inset: 0;
}

@keyframes list-creation-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

@keyframes list-creation-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-creation-exit {
  animation: .2s cubic-bezier(.3, 0, .8, .15) forwards list-creation-fade-out;
}

.list-creation-enter {
  animation: .3s cubic-bezier(.05, .7, .1, 1) forwards list-creation-fade-in;
}

@keyframes list-item-cascade {
  from {
    opacity: 0;
    transform: translateY(20px)scale(.95);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.list-item-cascade {
  animation: .3s cubic-bezier(.05, .7, .1, 1) forwards list-item-cascade;
}

.list-item-cascade:first-child {
  animation-delay: 0s;
}

.list-item-cascade:nth-child(2) {
  animation-delay: 50ms;
}

.list-item-cascade:nth-child(3) {
  animation-delay: .1s;
}

.list-item-cascade:nth-child(4) {
  animation-delay: .15s;
}

.list-item-cascade:nth-child(5) {
  animation-delay: .2s;
}

.slide-enter, .slide-enter-active, .slide-exit, .slide-exit-active, .slide-back-enter, .slide-back-enter-active, .slide-back-exit, .slide-back-exit-active {
  will-change: transform, opacity;
  contain: layout style paint;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
}

@supports (-webkit-touch-callout: none) {
  .slide-enter, .slide-enter-active, .slide-exit, .slide-exit-active, .slide-back-enter, .slide-back-enter-active, .slide-back-exit, .slide-back-exit-active {
    -webkit-backface-visibility: hidden;
    -webkit-will-change: transform, opacity;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .animate-md3-enter, .animate-md3-exit, .sheet-slide-down, .list-creation-exit, .list-creation-enter, .list-item-cascade {
    animation: none !important;
  }

  .slide-enter.slide-enter-active, .slide-exit.slide-exit-active, .slide-back-enter.slide-back-enter-active, .slide-back-exit.slide-back-exit-active {
    opacity: 1 !important;
    animation: none !important;
    transform: translateX(0) !important;
  }
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.bottom-nav-blur {
  -webkit-backdrop-filter: blur(12px);
  background-color: var(--md-sys-color-surface-container);
  background-color: var(--md-sys-color-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .bottom-nav-blur {
    background-color: color-mix(in srgb, var(--md-sys-color-surface-container) 95%, transparent);
  }
}

.accent-teal-light {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.accent-teal-medium {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.accent-teal-dark {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.btn-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-large);
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
}

.btn-primary:hover {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-2);
}

@supports (color: color-mix(in lab, red, red)) {
  .btn-primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, transparent);
  }
}

.btn-primary:active {
  background-color: var(--md-sys-color-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .btn-primary:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, transparent);
  }
}

.btn-secondary {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--md-sys-shape-corner-large);
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
}

.btn-secondary:hover {
  background-color: var(--md-sys-color-secondary-container);
  box-shadow: var(--elevation-1);
}

@supports (color: color-mix(in lab, red, red)) {
  .btn-secondary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 92%, transparent);
  }
}

.icon-button-base {
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.icon-button-xsmall {
  width: 40px;
  height: 40px;
}

.icon-button-small {
  width: 48px;
  height: 48px;
}

.icon-button-medium {
  width: 56px;
  height: 56px;
}

.text-button-small {
  border-radius: var(--md-sys-shape-corner-large);
  cursor: pointer;
  width: 80px;
  height: 48px;
  font-family: var(--font-family-plain);
  letter-spacing: .03125em;
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1rem;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.text-button-small-primary {
  color: var(--md-sys-color-primary);
}

.text-button-small-primary:hover {
  background-color: var(--md-sys-color-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-button-small-primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.text-button-small-primary:hover:before {
  content: "";
  background-color: var(--md-sys-color-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .text-button-small-primary:hover:before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.text-button-small-primary:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.text-button-small-primary:focus-visible:before {
  content: "";
  background-color: var(--md-sys-color-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .text-button-small-primary:focus-visible:before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity), transparent);
  }
}

.text-button-small-primary:active {
  background-color: var(--md-sys-color-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-button-small-primary:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
  }
}

.text-button-small-primary:active:before {
  content: "";
  background-color: var(--md-sys-color-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .text-button-small-primary:active:before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
  }
}

.icon-button-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.icon-button-primary:hover {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-2);
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary) 8%);
  }
}

.icon-button-primary:hover:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-primary:hover:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.icon-button-primary:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.icon-button-primary:focus-visible:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-primary:focus-visible:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-focus-state-layer-opacity), transparent);
  }
}

.icon-button-primary:active {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-1);
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-primary:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary) 12%);
  }
}

.icon-button-primary:active:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-primary:active:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
  }
}

.icon-button-xsmall-primary {
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  background-color: var(--md-sys-color-primary);
  width: 40px;
  height: 40px;
  color: var(--md-sys-color-on-primary);
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.icon-button-xsmall-primary:hover {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-2);
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-xsmall-primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary) 8%);
  }
}

.icon-button-xsmall-primary:hover:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-xsmall-primary:hover:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.icon-button-xsmall-primary:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.icon-button-xsmall-primary:focus-visible:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-xsmall-primary:focus-visible:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-focus-state-layer-opacity), transparent);
  }
}

.icon-button-xsmall-primary:active {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-1);
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-xsmall-primary:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary) 12%);
  }
}

.icon-button-xsmall-primary:active:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-xsmall-primary:active:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
  }
}

.icon-button-small {
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.icon-button-small-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.icon-button-small-primary:hover {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-2);
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-small-primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary) 8%);
  }
}

.icon-button-small-primary:hover:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-small-primary:hover:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.icon-button-small-primary:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.icon-button-small-primary:focus-visible:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-small-primary:focus-visible:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-focus-state-layer-opacity), transparent);
  }
}

.icon-button-small-primary:active {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-1);
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-small-primary:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary) 12%);
  }
}

.icon-button-small-primary:active:before {
  content: "";
  background-color: var(--md-sys-color-on-primary);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .icon-button-small-primary:active:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
  }
}

.fab-primary {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--elevation-3);
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
}

.fab-primary:hover {
  background-color: var(--md-sys-color-primary-container);
  box-shadow: var(--elevation-4);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .fab-primary:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 92%, transparent);
  }
}

.fab-primary:active {
  background-color: var(--md-sys-color-primary-container);
  box-shadow: var(--elevation-2);
}

@supports (color: color-mix(in lab, red, red)) {
  .fab-primary:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 88%, transparent);
  }
}

.fab-primary-solid {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--elevation-3);
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
}

.fab-primary-solid:hover {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-4);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .fab-primary-solid:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary) 8%);
  }
}

.fab-primary-solid:active {
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--elevation-2);
}

@supports (color: color-mix(in lab, red, red)) {
  .fab-primary-solid:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary) 12%);
  }
}

.fab-primary-solid:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.fab-extended {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--elevation-3);
  font-family: var(--font-family-plain);
  letter-spacing: .00625em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
}

.m3-bottom-sheet {
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  box-shadow: var(--elevation-3);
  z-index: 80;
  transform-origin: bottom;
  will-change: transform, opacity;
  border: none;
  margin: 0;
  transition: transform .3s cubic-bezier(.05, .7, .1, 1), opacity .25s;
  overflow: hidden;
}

@media (width <= 768px) {
  .m3-bottom-sheet {
    border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
    z-index: 90;
    transition: transform .25s cubic-bezier(.05, .7, .1, 1), opacity .2s;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .m3-bottom-sheet[aria-describedby="sort-lists-description"] {
    height: auto !important;
    min-height: auto !important;
    max-height: 280px !important;
    padding-bottom: 0 !important;
  }

  .m3-bottom-sheet[aria-describedby="sort-lists-description"] .px-4 {
    padding-bottom: 24px !important;
  }

  .m3-bottom-sheet[aria-describedby="collection-actions-description"] {
    height: auto !important;
    min-height: auto !important;
    max-height: 400px !important;
    padding-bottom: 0 !important;
  }

  .m3-bottom-sheet[aria-describedby="collection-actions-description"] .px-4 {
    padding-bottom: 24px !important;
  }
}

.m3-bottom-sheet-handle {
  background-color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  cursor: grab;
  touch-action: pan-y;
  z-index: 1;
  flex-shrink: 0;
  width: 32px;
  height: 4px;
  margin: 12px auto 8px;
  transition: background-color .15s cubic-bezier(.25, .46, .45, .94);
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-bottom-sheet-handle {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 40%, transparent);
  }
}

.m3-bottom-sheet-handle:hover {
  background-color: var(--md-sys-color-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-bottom-sheet-handle:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 60%, transparent);
  }
}

.m3-bottom-sheet-handle:active {
  cursor: grabbing;
  background-color: var(--md-sys-color-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-bottom-sheet-handle:active {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 80%, transparent);
  }
}

.m3-bottom-sheet-handle:before {
  content: "";
  border-radius: var(--md-sys-shape-corner-large);
  background: none;
  position: absolute;
  inset: -12px;
}

@media (width <= 768px) {
  .m3-bottom-sheet-handle {
    width: 36px;
    height: 4px;
    margin: 16px auto 12px;
  }

  .m3-bottom-sheet-handle:before {
    inset: -16px;
  }
}

[data-slot="sheet-overlay"] {
  z-index: 150 !important;
}

[data-slot="sheet-content"] {
  z-index: 160 !important;
}

@media (width <= 768px) {
  [data-slot="sheet-overlay"] {
    z-index: 155 !important;
  }

  [data-slot="sheet-content"] {
    z-index: 165 !important;
  }
}

[data-slot="sheet-content"][aria-describedby*="create-list-screen-description"], [data-slot="sheet-overlay"] + [data-slot="sheet-content"][aria-describedby*="create-list-screen-description"] {
  z-index: 170 !important;
}

.collection-detail-page {
  z-index: 10;
  position: relative;
}

.m3-bottom-sheet[aria-describedby*="create-list-screen-description"], .m3-bottom-sheet {
  z-index: 175 !important;
}

[data-radix-dialog-overlay], [data-radix-dialog-content] {
  z-index: 180 !important;
}

header {
  z-index: 40;
}

.bottom-nav-blur {
  z-index: 50;
}

.m3-bottom-sheet-action-no-hover {
  z-index: 100;
}

.edit-collection-dialog {
  z-index: 200 !important;
  position: relative !important;
}

.edit-collection-dialog[data-slot="sheet-content"], [data-radix-dialog-overlay] + [data-radix-dialog-content] .edit-collection-dialog {
  z-index: 200 !important;
}

@media (width <= 768px) {
  .edit-collection-dialog, .edit-collection-dialog[data-slot="sheet-content"] {
    z-index: 210 !important;
  }
}

[data-radix-dialog-overlay][data-state="open"] {
  z-index: 250 !important;
}

[data-radix-dialog-content][data-state="open"], [data-radix-dialog-overlay][data-state="open"] + div[data-radix-dialog-content], [data-radix-dialog-content][data-state="open"] {
  z-index: 260 !important;
}

.edit-collection-dialog {
  z-index: 9999 !important;
  isolation: isolate !important;
  position: fixed !important;
}

.edit-collection-dialog * {
  z-index: 1 !important;
  position: relative !important;
}

[data-state="open"][role="dialog"] {
  z-index: 9999 !important;
}

[data-state="open"][role="dialog"] * {
  position: relative;
  z-index: 1 !important;
}

[data-slot="sheet-content"].edit-collection-dialog {
  z-index: 9999 !important;
  isolation: isolate !important;
  position: fixed !important;
}

[data-slot="sheet-overlay"] + [data-slot="sheet-content"].edit-collection-dialog {
  z-index: 9999 !important;
}

.m3-bottom-sheet-content {
  padding: 0 16px 16px;
}

.m3-bottom-sheet-header {
  padding: 16px 16px 8px;
}

.m3-bottom-sheet-action {
  border-radius: var(--md-sys-shape-corner-large);
  cursor: pointer;
  width: 100%;
  font-family: var(--font-family-plain);
  letter-spacing: .009375em;
  color: var(--md-sys-color-on-surface);
  background: none;
  border: none;
  align-items: center;
  padding: 16px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  display: flex;
}

.m3-bottom-sheet-action:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.m3-bottom-sheet-action:active {
  background-color: var(--md-sys-color-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-bottom-sheet-action:active {
    background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 92%, transparent);
  }
}

.m3-bottom-sheet-action-no-hover {
  border-radius: var(--md-sys-shape-corner-large);
  cursor: pointer;
  width: 100%;
  font-family: var(--font-family-plain);
  letter-spacing: .009375em;
  color: var(--md-sys-color-on-surface);
  background: none;
  border: none;
  align-items: center;
  padding: 16px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  display: flex;
}

.m3-bottom-sheet-action-no-hover:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.m3-bottom-sheet-action-no-hover:active {
  background-color: var(--md-sys-color-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-bottom-sheet-action-no-hover:active {
    background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 92%, transparent);
  }
}

.m3-bottom-sheet-action-icon {
  width: 24px;
  height: 24px;
  color: inherit;
  flex-shrink: 0;
  margin-right: 16px;
}

.m3-bottom-sheet-list-item {
  border-radius: var(--md-sys-shape-corner-large);
  cursor: pointer;
  width: 100%;
  color: var(--md-sys-color-on-surface);
  background: none;
  border: none;
  align-items: center;
  padding: 16px;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  display: flex;
}

.m3-bottom-sheet-list-item:hover {
  background-color: var(--md-sys-color-surface-container-highest);
}

.m3-bottom-sheet-list-item:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.m3-bottom-sheet-list-item:active {
  background-color: var(--md-sys-color-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-bottom-sheet-list-item:active {
    background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 92%, transparent);
  }
}

.m3-bottom-sheet-list-item:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.m3-bottom-sheet-list-item:disabled:hover {
  background-color: #0000;
}

.fab-extended:hover {
  background-color: var(--md-sys-color-primary-container);
  box-shadow: var(--elevation-4);
  transform: translateY(-2px);
}

@supports (color: color-mix(in lab, red, red)) {
  .fab-extended:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 92%, var(--md-sys-color-on-primary-container) 8%);
  }
}

.fab-extended:active {
  background-color: var(--md-sys-color-primary-container);
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .fab-extended:active {
    background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 88%, var(--md-sys-color-on-primary-container) 12%);
  }
}

.fab-extended:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.chip-m3 {
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  white-space: nowrap;
  height: 32px;
  min-height: 32px;
  font-family: var(--font-family-plain);
  letter-spacing: .00625em;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.chip-m3-content {
  z-index: 1;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.chip-m3-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.chip-m3-count {
  letter-spacing: .03125em;
  border-radius: var(--md-sys-shape-corner-full);
  text-align: center;
  color: currentColor;
  background-color: currentColor;
  min-width: 16px;
  padding: 2px 6px;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-m3-count {
    background-color: color-mix(in srgb, currentColor 16%, transparent);
  }
}

.chip-m3-unselected {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  border: none;
}

.chip-m3-unselected .chip-m3-icon {
  color: var(--md-sys-color-primary);
}

.chip-m3-unselected:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.chip-m3-unselected:hover:before {
  content: "";
  background-color: var(--md-sys-color-on-surface);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-m3-unselected:hover:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.chip-m3-unselected:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.chip-m3-unselected:focus-visible:before {
  content: "";
  background-color: var(--md-sys-color-on-surface);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-m3-unselected:focus-visible:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity), transparent);
  }
}

.chip-m3-unselected:active:before {
  content: "";
  background-color: var(--md-sys-color-on-surface);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-m3-unselected:active:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity), transparent);
  }
}

.chip-m3-selected {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
}

.chip-m3-selected .chip-m3-icon {
  color: var(--md-sys-color-primary);
}

.chip-m3-selected:hover {
  background-color: var(--md-sys-color-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-m3-selected:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 92%, var(--md-sys-color-on-primary-container) 8%);
  }
}

.chip-m3-selected:hover:before {
  content: "";
  background-color: var(--md-sys-color-on-primary-container);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-m3-selected:hover:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.chip-m3-selected:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.chip-m3-selected:focus-visible:before {
  content: "";
  background-color: var(--md-sys-color-on-primary-container);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-m3-selected:focus-visible:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) var(--md-sys-state-focus-state-layer-opacity), transparent);
  }
}

.chip-m3-selected:active:before {
  content: "";
  background-color: var(--md-sys-color-on-primary-container);
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-m3-selected:active:before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) var(--md-sys-state-pressed-state-layer-opacity), transparent);
  }
}

.chip-primary {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
}

.chip-primary:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.chip-primary.selected {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
}

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], textarea, [data-slot="input"], .input-field, input.input-field, input[class*="input"], input {
  background-color: var(--md-sys-color-surface-container-highest) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-radius: var(--md-sys-shape-corner-small) !important;
  box-shadow: none !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-appearance: none !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  text-rendering: auto !important;
  caret-color: var(--md-sys-color-primary) !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
  border: none !important;
  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;
}

input[type="text"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), input[type="email"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), input[type="password"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), input[type="url"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), input[type="search"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), textarea:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), [data-slot="input"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), .input-field:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), input.input-field:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), input[class*="input"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), input:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible, :not(:placeholder-shown)), input[type="text"]:not(:placeholder-shown), input[type="url"]:not(:placeholder-shown), input:not(:placeholder-shown), .input-field:not(:placeholder-shown), input[type="text"][value=""], input[type="url"][value=""], input[value=""], .input-field[value=""], input[type="text"]:placeholder-shown, input[type="url"]:placeholder-shown, input:placeholder-shown, .input-field:placeholder-shown {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

input[type="text"]:user-invalid {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

input[type="text"]:user-valid {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

input[type="url"]:user-invalid {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

input[type="url"]:user-valid {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

input:user-invalid {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

input:user-valid {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

.input-field:user-invalid {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

.input-field:user-valid {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

input[type="text"]:is(:focus, :active, :target, :hover), input[type="url"]:is(:focus, :active, :target, :hover), input:is(:focus, :active, :target, :hover), .input-field:is(:focus, :active, :target, :hover) {
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-rtl-ordering: logical !important;
  -webkit-text-direction: ltr !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
}

input.search-input-rounded, input[type="text"].search-input-rounded, input[type="search"].search-input-rounded, .search-input-rounded {
  border-radius: var(--md-sys-shape-corner-full) !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, [data-slot="input"]:focus, .input-field:focus, input.input-field:focus, input[class*="input"]:focus, input:focus, input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible, input[type="url"]:focus-visible, input[type="search"]:focus-visible, textarea:focus-visible, [data-slot="input"]:focus-visible, .input-field:focus-visible, input.input-field:focus-visible, input[class*="input"]:focus-visible, input:focus-visible {
  background-color: var(--md-sys-color-surface-container-highest) !important;
  outline: 3px solid var(--md-sys-color-primary) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  ring-color: transparent !important;
  ring-offset-color: transparent !important;
  border: none !important;
}

input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="url"]::placeholder, input[type="search"]::placeholder, textarea::placeholder, [data-slot="input"]::placeholder, .input-field::placeholder, input.input-field::placeholder, input[class*="input"]::placeholder, input::placeholder {
  color: var(--md-sys-color-on-surface-variant) !important;
  font-size: var(--placeholder-font-size, inherit) !important;
}

input:focus {
  --ring-color: transparent !important;
  --ring-offset-color: transparent !important;
}

.input-field {
  background-color: var(--md-sys-color-surface-container-highest) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-radius: var(--md-sys-shape-corner-small) !important;
  border: none !important;
  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;
}

.input-field:focus {
  background-color: var(--md-sys-color-surface-container-highest) !important;
  outline: 3px solid var(--md-sys-color-primary) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.input-field::placeholder {
  color: var(--md-sys-color-on-surface-variant) !important;
}

.teal-gradient-primary {
  background: linear-gradient(135deg, var(--md-sys-color-primary-container) 0%, var(--md-sys-color-primary) 100%);
}

.teal-gradient-secondary {
  background: linear-gradient(135deg, var(--md-sys-color-secondary-container) 0%, var(--md-sys-color-tertiary-container) 100%);
}

.teal-accent-border {
  border-left: 4px solid var(--md-sys-color-primary);
}

.teal-accent-background {
  background-color: var(--md-sys-color-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .teal-accent-background {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  }
}

.success-teal {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: 1px solid var(--md-sys-color-primary);
}

.loading-teal {
  background: linear-gradient(90deg, var(--md-sys-color-surface-variant) 25%, var(--md-sys-color-primary-container) 50%, var(--md-sys-color-surface-variant) 75%);
  background-size: 200% 100%;
  animation: 1.5s linear infinite shimmer-teal;
}

@keyframes shimmer-teal {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.nav-bar-item {
  border-radius: var(--md-sys-shape-corner-large);
  transition: all .2s cubic-bezier(.2, 0, 0, 1);
  position: relative;
}

.nav-bar-item.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.nav-bar-item.active .nav-bar-icon {
  color: var(--md-sys-color-primary);
}

.nav-bar-item:not(.active) {
  color: var(--md-sys-color-on-surface-variant);
}

.nav-bar-item:not(.active):hover {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .nav-bar-item:not(.active):hover {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
}

.nav-bar-item:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.navigation-bar {
  background-color: var(--md-sys-color-surface-container);
  -webkit-backdrop-filter: blur(12px);
}

.navigation-bar-compact {
  background-color: var(--md-sys-color-surface-container);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}

.period-label {
  font-family: var(--font-family-plain);
  letter-spacing: .00625em;
  color: var(--md-sys-color-on-surface-variant);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

@keyframes fab-appear {
  0% {
    opacity: 0;
    transform: scale(.8)translateY(20px);
  }

  60% {
    opacity: 1;
    transform: scale(1.05)translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

@keyframes fab-disappear {
  0% {
    opacity: 1;
    transform: scale(1)translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(.8)translateY(20px);
  }
}

.fab-animate-in {
  animation: .3s cubic-bezier(.05, .7, .1, 1) fab-appear;
}

.fab-animate-out {
  animation: .2s cubic-bezier(.3, 0, .8, .15) fab-disappear;
}

@keyframes fab-scroll-hide {
  0% {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(20px)scale(.8);
  }
}

@keyframes fab-scroll-show {
  0% {
    opacity: 0;
    transform: translateY(20px)scale(.8);
  }

  100% {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.fab-scroll-hidden {
  animation: .2s cubic-bezier(.4, 0, .6, 1) forwards fab-scroll-hide;
}

.fab-scroll-visible {
  animation: .3s cubic-bezier(.05, .7, .1, 1) forwards fab-scroll-show;
}

.fab-circular {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50% !important;
}

@media (width <= 640px) {
  .fab-extended {
    bottom: max(88px, calc(88px + env(safe-area-inset-bottom)));
    z-index: 60;
    min-height: 48px;
    right: 16px;
  }

  @media (display-mode: standalone) {
    .fab-extended {
      bottom: calc(88px + env(safe-area-inset-bottom));
    }
  }
}

@media (width >= 641px) {
  .fab-extended {
    bottom: max(32px, calc(32px + env(safe-area-inset-bottom)));
    z-index: 60;
    min-height: 56px;
    right: 32px;
  }

  @media (display-mode: standalone) {
    .fab-extended {
      bottom: calc(32px + env(safe-area-inset-bottom));
    }
  }
}

@media (width <= 768px) {
  [data-slot="sheet-content"] {
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  body.sheet-dragging {
    touch-action: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  }
}

@keyframes subtle-bounce {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

.sheet-bounce {
  animation: .15s cubic-bezier(.25, .46, .45, .94) subtle-bounce;
}

@keyframes sheet-dismiss-mobile {
  0% {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(100%)scale(.95);
  }
}

.sheet-dismissing-mobile {
  animation: .25s cubic-bezier(.25, .46, .45, .94) forwards sheet-dismiss-mobile;
}

@media (width <= 768px) {
  .bg-primary.text-on-primary.rounded-full, .bg-primary.text-on-primary.rounded-full:not(:disabled), button.bg-primary.text-on-primary.rounded-full, button[class*="bg-primary"][class*="text-on-primary"][class*="rounded-full"] {
    color: #003731 !important;
  }

  :is(.bg-primary.text-on-primary.rounded-full, .bg-primary.text-on-primary.rounded-full:not(:disabled), button.bg-primary.text-on-primary.rounded-full, button[class*="bg-primary"][class*="text-on-primary"][class*="rounded-full"]) * {
    color: #003731 !important;
  }

  .bg-primary.text-on-primary.rounded-full span, .bg-primary.text-on-primary.rounded-full:not(:disabled) span, button.bg-primary.text-on-primary.rounded-full span, .bg-primary.text-on-primary.rounded-full:hover, .bg-primary.text-on-primary.rounded-full:active, .bg-primary.text-on-primary.rounded-full:focus, .bg-primary.text-on-primary.rounded-full:hover span, .bg-primary.text-on-primary.rounded-full:active span, .bg-primary.text-on-primary.rounded-full:focus span {
    color: #003731 !important;
  }

  .m3-bottom-sheet {
    z-index: 200 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 70vh !important;
    min-height: 400px !important;
    max-height: 70vh !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateZ(0) !important;
  }

  .m3-bottom-sheet input[type="text"], .m3-bottom-sheet input[type="url"] {
    appearance: none !important;
    touch-action: manipulation !important;
    min-height: 56px !important;
    font-size: 16px !important;
  }

  .m3-bottom-sheet button {
    touch-action: manipulation !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (width <= 768px) {
    .m3-bottom-sheet input[type="text"], .m3-bottom-sheet input[type="url"] {
      -webkit-user-select: text !important;
      -webkit-touch-callout: default !important;
    }
  }
}

@media (width <= 768px) {
  [data-radix-tooltip-trigger] {
    touch-action: manipulation !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  [data-radix-tooltip-trigger]:disabled {
    pointer-events: auto !important;
    cursor: help !important;
  }

  [data-radix-tooltip-content] {
    background-color: var(--md-sys-color-inverse-surface) !important;
    color: var(--md-sys-color-inverse-on-surface) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
    z-index: 9999 !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
}

[data-radix-tooltip-trigger]:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

@media (hover: none) and (pointer: coarse) {
  [data-radix-tooltip-trigger] {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
  }

  [data-radix-tooltip-content] {
    word-wrap: break-word !important;
    max-width: calc(100vw - 32px) !important;
  }
}

[data-radix-tooltip-content] {
  z-index: 9999;
  box-shadow: var(--elevation-4);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation-duration: .2s;
  animation-timing-function: cubic-bezier(.25, .46, .45, .94);
}

.sticky-header-bottom-sheet {
  background-color: var(--md-sys-color-surface-container);
  flex-direction: column;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.sticky-header-bottom-sheet-header {
  z-index: 10;
  background-color: var(--md-sys-color-surface-container);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 0;
  transform: translateZ(0);
}

.sticky-header-handle {
  background-color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  cursor: grab;
  touch-action: pan-y;
  z-index: 1;
  flex-shrink: 0;
  width: 32px;
  height: 4px;
  margin: 12px auto 8px;
  transition: background-color .15s cubic-bezier(.25, .46, .45, .94);
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .sticky-header-handle {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 40%, transparent);
  }
}

.sticky-header-handle:hover {
  background-color: var(--md-sys-color-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .sticky-header-handle:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 60%, transparent);
  }
}

.sticky-header-handle:active {
  cursor: grabbing;
  background-color: var(--md-sys-color-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .sticky-header-handle:active {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 80%, transparent);
  }
}

.sticky-header-handle:before {
  content: "";
  border-radius: var(--md-sys-shape-corner-large);
  background: none;
  position: absolute;
  inset: -12px;
}

.sticky-header-actions {
  background-color: var(--md-sys-color-surface-container);
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  display: flex;
  position: relative;
}

.sticky-header-content {
  -webkit-overflow-scrolling: touch;
  background-color: var(--md-sys-color-surface-container);
  overscroll-behavior: contain;
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

@media (width <= 768px) {
  .sticky-header-handle {
    width: 36px;
    height: 4px;
    margin: 16px auto 12px;
  }

  .sticky-header-handle:before {
    inset: -16px;
  }

  .sticky-header-bottom-sheet {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: translateZ(0) !important;
  }

  .sticky-header-bottom-sheet-header {
    z-index: 15 !important;
    will-change: transform !important;
    position: sticky !important;
    top: 0 !important;
    transform: translateZ(0) !important;
  }

  .sticky-header-content {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .sticky-header-content input[type="text"], .sticky-header-content input[type="url"], .sticky-header-content input[type="email"], .sticky-header-content textarea {
    -webkit-appearance: none !important;
    touch-action: manipulation !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .sticky-header-actions button {
    touch-action: manipulation !important;
    min-height: 44px !important;
    transform: translateZ(0) !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (width <= 768px) {
    .sticky-header-bottom-sheet, .sticky-header-bottom-sheet-header {
      backface-visibility: hidden !important;
      transform: translate3d(0, 0, 0) !important;
    }

    .sticky-header-content input[type="text"], .sticky-header-content input[type="url"], .sticky-header-content input[type="email"], .sticky-header-content textarea {
      -webkit-user-select: text !important;
      -webkit-touch-callout: default !important;
      font-size: 16px !important;
      transform: translateZ(0) !important;
    }
  }
}

@media (width <= 768px) {
  .sticky-header-content input:focus, .sticky-header-content textarea:focus {
    outline: 3px solid var(--md-sys-color-primary) !important;
    outline-offset: 0 !important;
    background-color: var(--md-sys-color-surface-container-highest) !important;
    position: relative !important;
    transform: none !important;
  }

  .sticky-header-bottom-sheet * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
  }

  .sticky-header-bottom-sheet {
    will-change: transform, opacity;
    contain: layout style paint;
  }
}

.sticky-header-bottom-sheet-header:focus-within {
  background-color: var(--md-sys-color-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .sticky-header-bottom-sheet-header:focus-within {
    background-color: color-mix(in srgb, var(--md-sys-color-surface-container) 95%, var(--md-sys-color-primary) 5%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-header-handle, .sticky-header-actions {
    transition: none !important;
  }

  .sticky-header-content {
    scroll-behavior: auto !important;
  }
}

@media (width <= 768px) {
  .sticky-header-bottom-sheet.keyboard-open {
    height: 100% !important;
    transform: none !important;
  }

  .sticky-header-bottom-sheet.keyboard-open .sticky-header-bottom-sheet-header {
    z-index: 20 !important;
    position: sticky !important;
    top: 0 !important;
    transform: translateZ(0) !important;
  }

  .sticky-header-bottom-sheet.keyboard-open .sticky-header-content {
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    overflow-y: auto !important;
  }
}

.adjustLetterSpacing {
  letter-spacing: inherit;
}

.text-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-truncate-2 {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.text-truncate-3 {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.safe-area-top {
  padding-top: max(1rem, env(safe-area-inset-top));
}

.safe-area-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.safe-area-left {
  padding-left: max(1rem, env(safe-area-inset-left));
}

.safe-area-right {
  padding-right: max(1rem, env(safe-area-inset-right));
}

.safe-area-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.safe-area-bottom-nav-ios {
  padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
}

.pwa-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom) !important;
  background: linear-gradient(to top, var(--md-sys-color-surface-container) 0%, var(--md-sys-color-surface-container) env(safe-area-inset-bottom), var(--md-sys-color-surface-container) 100%) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

@supports (-webkit-touch-callout: none) {
  .pwa-bottom-nav {
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    transform: translateZ(0) !important;
  }
}

@media (width <= 768px) and (not (-webkit-touch-callout: none)) {
  .pwa-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

.touch-manipulation {
  touch-action: manipulation;
}

.select-none {
  -webkit-user-select: none;
  user-select: none;
}

.-webkit-overflow-scrolling-touch {
  -webkit-overflow-scrolling: touch;
}

@media (display-mode: standalone) {
  main {
    padding-bottom: max(64px, calc(64px + env(safe-area-inset-bottom))) !important;
  }

  nav.fixed.bottom-0, .bottom-navigation {
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: linear-gradient(to top, var(--md-sys-color-surface-container) 0%, var(--md-sys-color-surface-container) env(safe-area-inset-bottom), var(--md-sys-color-surface-container) 100%) !important;
  }

  @supports (-webkit-touch-callout: none) {
    nav.fixed.bottom-0, .bottom-navigation {
      padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
      background: linear-gradient(to top, var(--md-sys-color-surface-container) 0%, var(--md-sys-color-surface-container) max(4px, env(safe-area-inset-bottom)), var(--md-sys-color-surface-container) 100%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
    }
  }

  @media (width <= 768px) and (not (-webkit-touch-callout: none)) {
    nav.fixed.bottom-0, .bottom-navigation {
      padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
      margin-bottom: 0 !important;
    }
  }

  .fab-extended, .floating-fab {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  header {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }
}

@media (display-mode: browser) {
  nav.fixed.bottom-0, .bottom-navigation {
    background: var(--md-sys-color-surface-container) !important;
    padding-bottom: 0 !important;
  }

  main {
    padding-bottom: 64px !important;
  }

  .fab-extended, .floating-fab {
    bottom: 88px !important;
  }
}

@supports not (display-mode: standalone) {
  nav.fixed.bottom-0, .bottom-navigation {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  main {
    padding-bottom: max(64px, calc(64px + env(safe-area-inset-bottom))) !important;
  }

  .fab-extended, .floating-fab {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    nav.fixed.bottom-0 {
      -webkit-backdrop-filter: none !important;
      background-color: var(--md-sys-color-surface-container) !important;
      z-index: 50 !important;
      border-top: 1px solid var(--md-sys-color-outline-variant) !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      nav.fixed.bottom-0 {
        border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 20%, transparent) !important;
      }
    }

    .bottom-nav-blur {
      -webkit-backdrop-filter: none !important;
      background-color: var(--md-sys-color-surface-container) !important;
      border-top: 1px solid var(--md-sys-color-outline-variant) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .bottom-nav-blur {
        border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 20%, transparent) !important;
      }
    }

    .navigation-bar {
      -webkit-backdrop-filter: none !important;
      background-color: var(--md-sys-color-surface-container) !important;
    }

    nav[class*="fixed"][class*="bottom-0"] {
      will-change: auto !important;
      contain: none !important;
      transform: none !important;
    }

    nav.fixed.bottom-0.left-0.right-0.z-50 {
      -webkit-backdrop-filter: none !important;
      background-color: var(--md-sys-color-surface-container) !important;
      border-top: 1px solid var(--md-sys-color-outline-variant) !important;
      isolation: isolate !important;
      backface-visibility: hidden !important;
      transform: none !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      nav.fixed.bottom-0.left-0.right-0.z-50 {
        border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 20%, transparent) !important;
      }
    }

    nav.fixed.bottom-0.left-0.right-0.z-50 > div {
      will-change: auto !important;
      transform: none !important;
    }
  }
}

.ios-device {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ios-pwa-standalone {
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
  min-height: -webkit-fill-available;
}

.ios-pwa-standalone body {
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  min-height: -webkit-fill-available;
}

.ios-device * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ios-device input, .ios-device textarea, .ios-device [contenteditable] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

@supports (padding: max(0px)) {
  .ios-pwa-standalone header {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }
}

@media screen and (orientation: portrait) and (-webkit-device-pixel-ratio >= 2) {
  .ios-device html, .ios-device body {
    width: 100vw;
    overflow-x: hidden;
  }
}

.pwa-standalone {
  min-height: -webkit-fill-available;
}

@media (display-mode: standalone) {
  :root {
    --pwa-safe-area-inset-top: env(safe-area-inset-top);
    --pwa-safe-area-inset-bottom: env(safe-area-inset-bottom);
    --pwa-safe-area-inset-left: env(safe-area-inset-left);
    --pwa-safe-area-inset-right: env(safe-area-inset-right);
    --pwa-nav-height: calc(64px + env(safe-area-inset-bottom));
    --pwa-header-height: calc(64px + env(safe-area-inset-top));
  }

  body {
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    min-height: -webkit-fill-available;
  }

  #root {
    background-color: var(--md-sys-color-background);
    min-height: -webkit-fill-available;
  }
}

.pwa-safe-top {
  padding-top: var(--pwa-safe-area-inset-top, env(safe-area-inset-top));
}

.pwa-safe-bottom {
  padding-bottom: var(--pwa-safe-area-inset-bottom, env(safe-area-inset-bottom));
}

.pwa-safe-left {
  padding-left: var(--pwa-safe-area-inset-left, env(safe-area-inset-left));
}

.pwa-safe-right {
  padding-right: var(--pwa-safe-area-inset-right, env(safe-area-inset-right));
}

@media (display-mode: standalone) {
  html, body {
    background-color: var(--md-sys-color-background) !important;
  }

  #root {
    min-height: -webkit-fill-available;
    background-color: var(--md-sys-color-background) !important;
  }

  @supports (-webkit-touch-callout: none) {
    html {
      height: -webkit-fill-available;
    }

    body {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: none;
      -webkit-overscroll-behavior: none;
      min-height: -webkit-fill-available;
    }

    #root {
      height: -webkit-fill-available;
      overflow: hidden;
    }
  }

  @media (width <= 768px) and (not (-webkit-touch-callout: none)) {
    body {
      overscroll-behavior-y: none;
      min-height: 100dvh;
    }

    #root {
      min-height: 100dvh;
    }
  }
}

@media screen and (width <= 768px) {
  html {
    height: -webkit-fill-available;
  }

  body {
    min-height: -webkit-fill-available;
  }
}

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], textarea, input, .input-field {
  text-align: left !important;
  -webkit-text-security: none !important;
  cursor: text !important;
  text-rendering: auto !important;
  -webkit-appearance: none !important;
  direction: ltr !important;
}

input[type="text"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible), input[type="email"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible), input[type="password"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible), input[type="url"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible), input[type="search"]:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible), textarea:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible), input:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible), .input-field:is(:placeholder-shown, :user-invalid, :user-valid, :focus, :active, :target, :hover, :focus-within, :focus-visible) {
  text-align: left !important;
  cursor: text !important;
  -webkit-text-security: none !important;
  direction: ltr !important;
}

.h-screen {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

body:has(.h-screen) {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

@media (width <= 768px) {
  .h-screen {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  @supports (-webkit-touch-callout: none) {
    .h-screen {
      height: -webkit-fill-available !important;
      min-height: -webkit-fill-available !important;
      max-height: -webkit-fill-available !important;
      overflow: hidden !important;
    }
  }
}

.h-screen * {
  box-sizing: border-box !important;
}

@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;
  initial-value: rotateX(0);
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@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: 0;
}

@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
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}