/* [project]/apps/www/src/app/zalandosans_8ce0741d.module.css [app-client] (css) */
@font-face {
  font-family: zalandoSans;
  src: url("../media/ZalandoSans_VariableFont_wdth,wght-s.p.0bsnpco7l4u-c.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: zalandoSans Fallback;
  src: local(Arial);
  ascent-override: 91.85%;
  descent-override: 23.82%;
  line-gap-override: 0.0%;
  size-adjust: 104.95%;
}

.zalandosans_8ce0741d-module__Ff-acW__className {
  font-family: zalandoSans, zalandoSans Fallback;
}

.zalandosans_8ce0741d-module__Ff-acW__variable {
  --font-zalando: "zalandoSans", "zalandoSans Fallback";
}

/* [project]/apps/www/src/app/zalandosansexpanded_7b901dc0.module.css [app-client] (css) */
@font-face {
  font-family: zalandoSansExpanded;
  src: url("../media/ZalandoSansExpanded_VariableFont_wght-s.p.0yo-~v5ktnkt2.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: zalandoSansExpanded Fallback;
  src: local(Arial);
  ascent-override: 76.74%;
  descent-override: 19.9%;
  line-gap-override: 0.0%;
  size-adjust: 125.61%;
}

.zalandosansexpanded_7b901dc0-module__GMPiYG__className {
  font-family: zalandoSansExpanded, zalandoSansExpanded Fallback;
}

.zalandosansexpanded_7b901dc0-module__GMPiYG__variable {
  --font-zalando-extended: "zalandoSansExpanded", "zalandoSansExpanded Fallback";
}

/* [project]/apps/www/src/app/zalandosansexpandeditalic_7eb05c87.module.css [app-client] (css) */
@font-face {
  font-family: zalandoSansExpandedItalic;
  src: url("../media/ZalandoSansExpanded_Italic_VariableFont_wght-s.p.0o8pilwrv5rlb.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: zalandoSansExpandedItalic Fallback;
  src: local(Arial);
  ascent-override: 76.5%;
  descent-override: 19.84%;
  line-gap-override: 0.0%;
  size-adjust: 126.02%;
}

.zalandosansexpandeditalic_7eb05c87-module__hcjVOW__className {
  font-family: zalandoSansExpandedItalic, zalandoSansExpandedItalic Fallback;
}

.zalandosansexpandeditalic_7eb05c87-module__hcjVOW__variable {
  --font-zalando-italic: "zalandoSansExpandedItalic", "zalandoSansExpandedItalic Fallback";
}

/* [project]/apps/www/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: 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-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: var(--font-sans);
    --font-serif: var(--font-serif);
    --font-mono: var(--font-mono);
    --color-red-100: #ffe2e2;
    --color-red-200: #ffcaca;
    --color-red-300: #ffa3a3;
    --color-red-400: #ff6568;
    --color-red-500: #fb2c36;
    --color-red-700: #bf000f;
    --color-red-800: #9f0712;
    --color-amber-400: #fcbb00;
    --color-amber-500: #f99c00;
    --color-green-300: #7bf1a8;
    --color-green-700: #008138;
    --color-emerald-100: #d0fae5;
    --color-emerald-400: #00d294;
    --color-emerald-500: #00bb7f;
    --color-emerald-800: #005f46;
    --color-blue-300: #90c5ff;
    --color-blue-400: #54a2ff;
    --color-blue-700: #1447e6;
    --color-indigo-950: #1e1a4d;
    --color-violet-500: #8d54ff;
    --color-slate-300: #cad5e2;
    --color-slate-500: #62748e;
    --color-slate-600: #45556c;
    --color-slate-700: #314158;
    --color-slate-800: #1d293d;
    --color-slate-900: #0f172b;
    --color-slate-950: #020618;
    --color-gray-600: #4a5565;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a1a1a1;
    --color-neutral-950: #0a0a0a;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --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-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --aspect-video: 16 / 9;
    --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);
    --font-zalando-extended: "Zalando Sans Expanded", "zalandoSansExpanded", sans-serif;
    --font-zalando: "Zalando Sans", "zalandoSans", sans-serif;
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-red-100: lab(92.243% 10.2865 3.83865);
      --color-red-200: lab(86.017% 19.8815 7.75869);
      --color-red-300: lab(76.5514% 36.422 15.5335);
      --color-red-400: lab(63.7053% 60.745 31.3109);
      --color-red-500: lab(55.4814% 75.0732 48.8528);
      --color-red-700: lab(40.4273% 67.2623 53.7441);
      --color-red-800: lab(33.7174% 55.8993 41.0293);
      --color-amber-400: lab(80.1641% 16.6016 99.2089);
      --color-amber-500: lab(72.7183% 31.8672 97.9407);
      --color-green-300: lab(86.9953% -47.2691 25.0054);
      --color-green-700: lab(47.0329% -47.0239 31.4788);
      --color-emerald-100: lab(94.9004% -17.0769 5.63836);
      --color-emerald-400: lab(75.0771% -60.7313 19.4147);
      --color-emerald-500: lab(66.9756% -58.27 19.5419);
      --color-emerald-800: lab(35.3675% -33.1188 8.04002);
      --color-blue-300: lab(77.5052% -6.4629 -36.42);
      --color-blue-400: lab(65.0361% -1.42065 -56.9802);
      --color-blue-700: lab(36.9089% 35.0961 -85.6872);
      --color-indigo-950: lab(12.4853% 14.9672 -31.3418);
      --color-violet-500: lab(49.9355% 55.1776 -81.8963);
      --color-slate-300: lab(84.7652% -1.94535 -7.93337);
      --color-slate-500: lab(48.0876% -2.03595 -16.5814);
      --color-slate-600: lab(35.5623% -1.74978 -15.4316);
      --color-slate-700: lab(26.9569% -1.47016 -15.6993);
      --color-slate-800: lab(16.132% -.318035 -14.6672);
      --color-slate-900: lab(7.78673% 1.82345 -15.0537);
      --color-slate-950: lab(1.76974% 1.32743 -9.28855);
      --color-gray-600: lab(35.6337% -1.58697 -10.8425);
      --color-neutral-300: lab(84.92% 0 -.0000119209);
      --color-neutral-400: lab(66.128% -.0000298023 .0000119209);
      --color-neutral-950: lab(2.75381% 0 0);
    }
  }
}

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

@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    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-24 {
    top: calc(var(--spacing) * -24);
  }

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

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

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

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

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

  .top-\[18\.5\%\] {
    top: 18.5%;
  }

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

  .top-full {
    top: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .bottom-full {
    bottom: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .container {
    width: 100%;
  }

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

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

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

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

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

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

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }

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

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

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

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

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

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

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

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

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

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

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

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

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

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

  .mb-0\! {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }

  .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-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }

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

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

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

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

  .ml-auto {
    margin-left: auto;
  }

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

  .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 {
    display: inline;
  }

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

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

  .aspect-\[16\/9\] {
    aspect-ratio: 16 / 9;
  }

  .aspect-\[16\/10\] {
    aspect-ratio: 16 / 10;
  }

  .aspect-\[1920\/1080\] {
    aspect-ratio: 1920 / 1080;
  }

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

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-1\/2 {
    width: 50%;
    height: 50%;
  }

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

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

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

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

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

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

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

  .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-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }

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

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

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

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

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

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

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

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

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

  .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-11 {
    height: calc(var(--spacing) * 11);
  }

  .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-22 {
    height: calc(var(--spacing) * 22);
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .h-\[calc\(100dvh-4rem\)\] {
    height: calc(100dvh - 4rem);
  }

  .h-\[var\(--control-height-md\)\] {
    height: var(--control-height-md);
  }

  .h-\[var\(--control-height-sm\)\] {
    height: var(--control-height-sm);
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-\[min\(760px\,90dvh\)\] {
    max-height: min(760px, 90dvh);
  }

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

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

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

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

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

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

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

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

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

  .min-h-\[70dvh\] {
    min-height: 70dvh;
  }

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

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

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

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

  .min-h-\[calc\(100dvh-7rem\)\] {
    min-height: calc(100dvh - 7rem);
  }

  .min-h-\[var\(--control-height-lg\)\] {
    min-height: var(--control-height-lg);
  }

  .min-h-\[var\(--control-height-md\)\] {
    min-height: var(--control-height-md);
  }

  .min-h-dvh {
    min-height: 100dvh;
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .min-h-svh {
    min-height: 100svh;
  }

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

  .w-2\/3 {
    width: 66.6667%;
  }

  .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-11 {
    width: calc(var(--spacing) * 11);
  }

  .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-28 {
    width: calc(var(--spacing) * 28);
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .w-\[min\(90vw\,360px\)\] {
    width: min(90vw, 360px);
  }

  .w-auto {
    width: auto;
  }

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

  .w-full {
    width: 100%;
  }

  .w-screen {
    width: 100vw;
  }

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

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

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

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

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

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

  .max-w-\[42rem\] {
    max-width: 42rem;
  }

  .max-w-\[65ch\] {
    max-width: 65ch;
  }

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

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

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

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

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

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

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

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

  .max-w-\[var\(--content-width\)\] {
    max-width: var(--content-width);
  }

  .max-w-full {
    max-width: 100%;
  }

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

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

  .max-w-none {
    max-width: none;
  }

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

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

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

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

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

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

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

  .flex-1 {
    flex: 1;
  }

  .flex-2, .flex-\[2\] {
    flex: 2;
  }

  .flex-none {
    flex: none;
  }

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

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    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);
  }

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

  .scale-\[0\.9\] {
    scale: .9;
  }

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

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

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

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

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .resize-none {
    resize: none;
  }

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

  .appearance-none {
    appearance: none;
  }

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

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

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

  .grid-cols-\[repeat\(auto-fill\,minmax\(220px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

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

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

  .flex-wrap {
    flex-wrap: wrap;
  }

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

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

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

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

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

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

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

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

  .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-5 {
    gap: calc(var(--spacing) * 5);
  }

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

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

  .gap-\[6px\] {
    gap: 6px;
  }

  :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-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * 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)));
  }

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

  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }

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

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

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-\[var\(--color-border\)\] > :not(:last-child)) {
    border-color: var(--color-border);
  }

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

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .rounded-\[var\(--radius-lg\)\] {
    border-radius: var(--radius-lg);
  }

  .rounded-\[var\(--radius-md\)\] {
    border-radius: var(--radius-md);
  }

  .rounded-\[var\(--radius-sm\)\] {
    border-radius: var(--radius-sm);
  }

  .rounded-\[var\(--radius-xl\)\] {
    border-radius: var(--radius-xl);
  }

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

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

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

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

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

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

  .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-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

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

  .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-r-2 {
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
  }

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

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

  .border-\[\#6E7179\]\/\[35\%\] {
    border-color: #6e717959;
    border-color: lab(47.5806% .0959337 -4.85771 / .35);
  }

  .border-\[\#10161d\] {
    border-color: #10161d;
  }

  .border-\[\#FC7878\]\/10 {
    border-color: #fc78781a;
    border-color: lab(66.7194% 51.3885 25.4491 / .1);
  }

  .border-\[color\:rgb\(225_74_95\/28\%\)\] {
    border-color: #e14a5f47;
  }

  .border-\[var\(--color-background\)\] {
    border-color: var(--color-background);
  }

  .border-\[var\(--color-border\)\] {
    border-color: var(--color-border);
  }

  .border-\[var\(--color-border-strong\)\] {
    border-color: var(--color-border-strong);
  }

  .border-\[var\(--color-danger\)\]\/30 {
    border-color: var(--color-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--color-danger\)\]\/30 {
      border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);
    }
  }

  .border-\[var\(--color-surface-1\)\] {
    border-color: var(--color-surface-1);
  }

  .border-amber-400\/25 {
    border-color: #fcbb0040;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/25 {
      border-color: color-mix(in oklab, var(--color-amber-400) 25%, transparent);
    }
  }

  .border-amber-400\/40 {
    border-color: #fcbb0066;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/40 {
      border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
    }
  }

  .border-black\/20 {
    border-color: #0003;
  }

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

  .border-current {
    border-color: currentColor;
  }

  .border-emerald-400\/25 {
    border-color: #00d29440;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-400\/25 {
      border-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
    }
  }

  .border-emerald-400\/30 {
    border-color: #00d2944d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-400\/30 {
      border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
    }
  }

  .border-gray-600 {
    border-color: var(--color-gray-600);
  }

  .border-red-400\/20 {
    border-color: #ff656833;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/20 {
      border-color: color-mix(in oklab, var(--color-red-400) 20%, transparent);
    }
  }

  .border-red-400\/25 {
    border-color: #ff656840;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/25 {
      border-color: color-mix(in oklab, var(--color-red-400) 25%, transparent);
    }
  }

  .border-red-400\/30 {
    border-color: #ff65684d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/30 {
      border-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
    }
  }

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

  .border-white\/10 {
    border-color: #ffffff1a;
  }

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

  .border-white\/14 {
    border-color: #ffffff24;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/14 {
      border-color: color-mix(in oklab, var(--color-white) 14%, transparent);
    }
  }

  .border-white\/15 {
    border-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/15 {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .border-white\/25 {
    border-color: #ffffff40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/25 {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }

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

  .border-r-white\/20 {
    border-right-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-r-white\/20 {
      border-right-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .bg-\[\#0F1215\] {
    background-color: #0f1215;
  }

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

  .bg-\[\#191D29\]\/\[35\%\] {
    background-color: #191d2959;
    background-color: lab(10.7878% .863574 -8.81721 / .35);
  }

  .bg-\[\#191D29\]\/\[63\%\] {
    background-color: #191d29a1;
    background-color: lab(10.7878% .863567 -8.81721 / .63);
  }

  .bg-\[\#324A94\]\/5 {
    background-color: #324a940d;
    background-color: lab(32.7313% 10.4071 -44.4263 / .05);
  }

  .bg-\[\#4439FB\]\/25 {
    background-color: #4439fb40;
    background-color: lab(37.9628% 52.6201 -95.7203 / .25);
  }

  .bg-\[\#08090D\] {
    background-color: #08090d;
  }

  .bg-\[\#10131C\] {
    background-color: #10131c;
  }

  .bg-\[\#18212a\] {
    background-color: #18212a;
  }

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

  .bg-\[\#F83939\]\/5 {
    background-color: #f839390d;
    background-color: lab(56.1541% 71.2631 47.8567 / .05);
  }

  .bg-\[\#F83939\]\/\[0\.03\] {
    background-color: #f8393908;
    background-color: lab(56.1541% 71.2631 47.8567 / .03);
  }

  .bg-\[color\:rgb\(225_74_95\/6\%\)\] {
    background-color: #e14a5f0f;
  }

  .bg-\[color\:var\(--color-canvas-translucent\)\] {
    background-color: var(--color-canvas-translucent);
  }

  .bg-\[var\(--color-accent\)\] {
    background-color: var(--color-accent);
  }

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

  .bg-\[var\(--color-canvas\)\] {
    background-color: var(--color-canvas);
  }

  .bg-\[var\(--color-danger\)\] {
    background-color: var(--color-danger);
  }

  .bg-\[var\(--color-danger\)\]\/10 {
    background-color: var(--color-danger);
  }

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

  .bg-\[var\(--color-overlay\)\] {
    background-color: var(--color-overlay);
  }

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

  .bg-\[var\(--color-status-dnd\)\] {
    background-color: var(--color-status-dnd);
  }

  .bg-\[var\(--color-status-idle\)\] {
    background-color: var(--color-status-idle);
  }

  .bg-\[var\(--color-status-offline\)\] {
    background-color: var(--color-status-offline);
  }

  .bg-\[var\(--color-status-online\)\] {
    background-color: var(--color-status-online);
  }

  .bg-\[var\(--color-status-playing\)\] {
    background-color: var(--color-status-playing);
  }

  .bg-\[var\(--color-success\)\] {
    background-color: var(--color-success);
  }

  .bg-\[var\(--color-surface-1\)\] {
    background-color: var(--color-surface-1);
  }

  .bg-\[var\(--color-surface-1\)\]\/35 {
    background-color: var(--color-surface-1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--color-surface-1\)\]\/35 {
      background-color: color-mix(in oklab, var(--color-surface-1) 35%, transparent);
    }
  }

  .bg-\[var\(--color-surface-2\)\] {
    background-color: var(--color-surface-2);
  }

  .bg-\[var\(--color-surface-3\)\] {
    background-color: var(--color-surface-3);
  }

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

  .bg-amber-400\/10 {
    background-color: #fcbb001a;
  }

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

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

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

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

  .bg-black\/5 {
    background-color: #0000000d;
  }

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

  .bg-black\/15 {
    background-color: #00000026;
  }

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

  .bg-black\/20 {
    background-color: #0003;
  }

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

  .bg-black\/30 {
    background-color: #0000004d;
  }

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

  .bg-black\/40 {
    background-color: #0006;
  }

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

  .bg-black\/45 {
    background-color: #00000073;
  }

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

  .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-black\/60 {
    background-color: #0009;
  }

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

  .bg-black\/65 {
    background-color: #000000a6;
  }

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

  .bg-black\/70 {
    background-color: #000000b3;
  }

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

  .bg-black\/75 {
    background-color: #000000bf;
  }

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

  .bg-black\/90 {
    background-color: #000000e6;
  }

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

  .bg-blue-400\/5 {
    background-color: #54a2ff0d;
  }

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

  .bg-blue-400\/10 {
    background-color: #54a2ff1a;
  }

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

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

  .bg-emerald-500\/10 {
    background-color: #00bb7f1a;
  }

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

  .bg-gray-600\/30 {
    background-color: #4a55654d;
  }

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

  .bg-neutral-950\/95 {
    background-color: #0a0a0af2;
  }

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

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

  .bg-red-500\/10 {
    background-color: #fb2c361a;
  }

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

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

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

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

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

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

  .bg-white\/6 {
    background-color: #ffffff0f;
  }

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

  .bg-white\/7 {
    background-color: #ffffff12;
  }

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

  .bg-white\/8 {
    background-color: #ffffff14;
  }

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

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

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

  .bg-white\/25 {
    background-color: #ffffff40;
  }

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

  .bg-white\/30 {
    background-color: #ffffff4d;
  }

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

  .bg-white\/45 {
    background-color: #ffffff73;
  }

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

  .bg-white\/\[0\.03\] {
    background-color: #ffffff08;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.03\] {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
  }

  .bg-white\/\[0\.04\] {
    background-color: #ffffff0a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }

  .bg-white\/\[0\.12\] {
    background-color: #ffffff1f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.12\] {
      background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
  }

  .bg-white\/\[0\.055\] {
    background-color: #ffffff0e;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.055\] {
      background-color: color-mix(in oklab, var(--color-white) 5.5%, transparent);
    }
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .\!bg-none {
    background-image: none !important;
  }

  .\[background-image\:linear-gradient\(to_right\,rgba\(255\,255\,255\,0\.06\)_1px\,transparent_1px\)\,linear-gradient\(to_bottom\,rgba\(255\,255\,255\,0\.06\)_1px\,transparent_1px\)\] {
    background-image: linear-gradient(to right, #ffffff0f 1px, #0000 1px), linear-gradient(#ffffff0f 1px, #0000 1px);
  }

  .bg-\[radial-gradient\(circle_at_top_left\,rgba\(45\,215\,96\,0\.18\)\,transparent_35\%\)\,radial-gradient\(circle_at_top_right\,rgba\(67\,57\,226\,0\.18\)\,transparent_30\%\)\,linear-gradient\(180deg\,\#172031_0\%\,\#0C0F16_100\%\)\] {
    background-image: radial-gradient(circle at 0 0, #2dd7602e, #0000 35%), radial-gradient(circle at 100% 0, #4339e22e, #0000 30%), linear-gradient(#172031 0%, #0c0f16 100%);
  }

  .from-black\/95 {
    --tw-gradient-from: #000000f2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-black\/95 {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 95%, transparent);
    }
  }

  .from-black\/95 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-black\/55 {
    --tw-gradient-via: #0000008c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-black\/55 {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }

  .via-black\/55 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .\[background-size\:28px_28px\] {
    background-size: 28px 28px;
  }

  .fill-current {
    fill: currentColor;
  }

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

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

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

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

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

  .\!p-10 {
    padding: calc(var(--spacing) * 10) !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .px-\[27\%\] {
    padding-inline: 27%;
  }

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

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

  .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-5 {
    padding-block: calc(var(--spacing) * 5);
  }

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

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

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

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

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

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

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

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

  .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-8 {
    padding-top: calc(var(--spacing) * 8);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .font-sans {
    font-family: var(--font-sans);
  }

  .font-zalando {
    font-family: Zalando Sans, zalandoSans, 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-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-\[13px\] {
    font-size: 13px !important;
  }

  .\!text-\[17px\] {
    font-size: 17px !important;
  }

  .\!text-\[20px\] {
    font-size: 20px !important;
  }

  .\!text-\[32px\] {
    font-size: 32px !important;
  }

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

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

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

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

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

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

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

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

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

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

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

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

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

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

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

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

  .tracking-\[-0\.04em\] {
    --tw-tracking: -.04em;
    letter-spacing: -.04em;
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.05em\] {
    --tw-tracking: .05em;
    letter-spacing: .05em;
  }

  .tracking-\[0\.12em\] {
    --tw-tracking: .12em;
    letter-spacing: .12em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

  .tracking-\[0\.24em\] {
    --tw-tracking: .24em;
    letter-spacing: .24em;
  }

  .tracking-\[0\.35em\] {
    --tw-tracking: .35em;
    letter-spacing: .35em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .break-words {
    overflow-wrap: break-word;
  }

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

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

  .\!text-\[\#08090D\] {
    color: #08090d !important;
  }

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

  .text-\[\#3B3F4D\] {
    color: #3b3f4d;
  }

  .text-\[\#7C859F\] {
    color: #7c859f;
  }

  .text-\[\#7E7E83\] {
    color: #7e7e83;
  }

  .text-\[\#8EA6FF\] {
    color: #8ea6ff;
  }

  .text-\[\#8d8d8d\] {
    color: #8d8d8d;
  }

  .text-\[\#A6ADC2\] {
    color: #a6adc2;
  }

  .text-\[\#B2B7C9\] {
    color: #b2b7c9;
  }

  .text-\[\#D0D7EF\] {
    color: #d0d7ef;
  }

  .text-\[\#D0D7EF\]\/\[70\%\] {
    color: #d0d7efb3;
    color: lab(85.9974% 1.05512 -12.6726 / .7);
  }

  .text-\[\#d8d8d8\] {
    color: #d8d8d8;
  }

  .text-\[var\(--color-accent-soft\)\] {
    color: var(--color-accent-soft);
  }

  .text-\[var\(--color-danger-text\)\] {
    color: var(--color-danger-text);
  }

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

  .text-\[var\(--color-status-dnd\)\] {
    color: var(--color-status-dnd);
  }

  .text-\[var\(--color-status-idle\)\] {
    color: var(--color-status-idle);
  }

  .text-\[var\(--color-status-offline\)\] {
    color: var(--color-status-offline);
  }

  .text-\[var\(--color-status-online\)\] {
    color: var(--color-status-online);
  }

  .text-\[var\(--color-text\)\] {
    color: var(--color-text);
  }

  .text-\[var\(--color-text-muted\)\] {
    color: var(--color-text-muted);
  }

  .text-\[var\(--color-text-subtle\)\] {
    color: var(--color-text-subtle);
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

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

  .text-blue-300 {
    color: var(--color-blue-300);
  }

  .text-current {
    color: currentColor;
  }

  .text-emerald-100 {
    color: var(--color-emerald-100);
  }

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

  .text-green-300 {
    color: var(--color-green-300);
  }

  .text-neutral-300 {
    color: var(--color-neutral-300);
  }

  .text-neutral-300\/90 {
    color: #d4d4d4e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-neutral-300\/90 {
      color: color-mix(in oklab, var(--color-neutral-300) 90%, transparent);
    }
  }

  .text-neutral-400 {
    color: var(--color-neutral-400);
  }

  .text-red-100 {
    color: var(--color-red-100);
  }

  .text-red-100\/80 {
    color: #ffe2e2cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-100\/80 {
      color: color-mix(in oklab, var(--color-red-100) 80%, transparent);
    }
  }

  .text-red-100\/85 {
    color: #ffe2e2d9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-100\/85 {
      color: color-mix(in oklab, var(--color-red-100) 85%, transparent);
    }
  }

  .text-red-200 {
    color: var(--color-red-200);
  }

  .text-red-300 {
    color: var(--color-red-300);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

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

  .text-white\/25 {
    color: #ffffff40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/25 {
      color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }

  .text-white\/35 {
    color: #ffffff59;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/35 {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
  }

  .text-white\/40 {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/40 {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .text-white\/45 {
    color: #ffffff73;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/45 {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }

  .text-white\/50 {
    color: #ffffff80;
  }

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

  .text-white\/55 {
    color: #ffffff8c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/55 {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }

  .text-white\/58 {
    color: #ffffff94;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/58 {
      color: color-mix(in oklab, var(--color-white) 58%, transparent);
    }
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/65 {
    color: #ffffffa6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/65 {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }

  .text-white\/68 {
    color: #ffffffad;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/68 {
      color: color-mix(in oklab, var(--color-white) 68%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/72 {
    color: #ffffffb8;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/72 {
      color: color-mix(in oklab, var(--color-white) 72%, transparent);
    }
  }

  .text-white\/75 {
    color: #ffffffbf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/75 {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .underline {
    text-decoration-line: underline;
  }

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

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .accent-\[var\(--color-primary\)\] {
    accent-color: var(--color-primary);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-45 {
    opacity: .45;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-55 {
    opacity: .55;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-85 {
    opacity: .85;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-\[0\.18\] {
    opacity: .18;
  }

  .shadow {
    --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);
  }

  .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-\[0_0_0_1px_rgba\(255\,255\,255\,0\.02\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #ffffff05);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_16px_40px_rgba\(45\,215\,96\,0\.22\)\] {
    --tw-shadow: 0 16px 40px var(--tw-shadow-color, #2dd76038);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--shadow-overlay\)\] {
    --tw-shadow: var(--shadow-overlay);
    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-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 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);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px 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-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --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);
  }

  .shadow-black\/20 {
    --tw-shadow-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-black\/20 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-black\/40 {
    --tw-shadow-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-black\/40 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

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

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

  .blur-\[95px\] {
    --tw-blur: blur(95px);
    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, );
  }

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

  .brightness-50 {
    --tw-brightness: brightness(50%);
    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, );
  }

  .brightness-\[0\.75\] {
    --tw-brightness: brightness(.75);
    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, );
  }

  .saturate-150 {
    --tw-saturate: saturate(150%);
    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, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-2xl {
    --tw-backdrop-blur: blur(var(--blur-2xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .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, display, content-visibility, overlay, pointer-events;
    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));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-none {
    transition-property: none;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

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

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

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

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

  .paused {
    animation-play-state: paused;
  }

  @media (hover: hover) {
    .group-hover\:flex:is(:where(.group):hover *) {
      display: flex;
    }
  }

  @media (hover: hover) {
    .group-hover\:scale-105:is(:where(.group):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) {
    .group-hover\:scale-\[1\.03\]:is(:where(.group):hover *) {
      scale: 1.03;
    }
  }

  @media (hover: hover) {
    .group-hover\:scale-\[1\.04\]:is(:where(.group):hover *) {
      scale: 1.04;
    }
  }

  @media (hover: hover) {
    .group-hover\:text-\[\#979797\]:is(:where(.group):hover *) {
      color: #979797;
    }
  }

  @media (hover: hover) {
    .group-hover\:text-\[var\(--color-primary\)\]:is(:where(.group):hover *) {
      color: var(--color-primary);
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-75:is(:where(.group):hover *) {
      opacity: .75;
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .group-hover\/card\:scale-\[1\.015\]:is(:where(.group\/card):hover *) {
      scale: 1.015;
    }
  }

  @media (hover: hover) {
    .group-hover\/timeline\:h-1\.5:is(:where(.group\/timeline):hover *) {
      height: calc(var(--spacing) * 1.5);
    }
  }

  .placeholder\:text-\[var\(--color-text-subtle\)\]::placeholder {
    color: var(--color-text-subtle);
  }

  .placeholder\:text-white\/40::placeholder {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-white\/40::placeholder {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .focus-within\:border-\[var\(--color-border-strong\)\]:focus-within {
    border-color: var(--color-border-strong);
  }

  .focus-within\:ring-2:focus-within {
    --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-within\:ring-\[var\(--color-focus\)\]:focus-within {
    --tw-ring-color: var(--color-focus);
  }

  .focus-within\:ring-white\/70:focus-within {
    --tw-ring-color: #ffffffb3;
  }

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

  @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-\[\#6074FF\]\/60:hover {
      border-color: #6074ff99;
      border-color: lab(53.1511% 25.5097 -73.0089 / .6);
    }
  }

  @media (hover: hover) {
    .hover\:border-\[var\(--color-border-strong\)\]:hover {
      border-color: var(--color-border-strong);
    }
  }

  @media (hover: hover) {
    .hover\:border-white\/20:hover {
      border-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/20:hover {
        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-white\/25:hover {
      border-color: #ffffff40;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/25:hover {
        border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
      }
    }
  }

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

  @media (hover: hover) {
    .hover\:bg-\[var\(--color-surface-2\)\]:hover {
      background-color: var(--color-surface-2);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[var\(--color-surface-3\)\]:hover {
      background-color: var(--color-surface-3);
    }
  }

  @media (hover: hover) {
    .hover\:bg-black\/65:hover {
      background-color: #000000a6;
    }

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

  @media (hover: hover) {
    .hover\:bg-black\/80:hover {
      background-color: #000c;
    }

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

  @media (hover: hover) {
    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

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

  @media (hover: hover) {
    .hover\:bg-white\/15:hover {
      background-color: #ffffff26;
    }

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

  @media (hover: hover) {
    .hover\:bg-white\/20:hover {
      background-color: #fff3;
    }

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

  @media (hover: hover) {
    .hover\:bg-white\/90:hover {
      background-color: #ffffffe6;
    }

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

  @media (hover: hover) {
    .hover\:bg-white\/\[0\.05\]:hover {
      background-color: #ffffff0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.05\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/\[0\.06\]:hover {
      background-color: #ffffff0f;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.06\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/\[0\.07\]:hover {
      background-color: #ffffff12;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.07\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 7.0%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-\[\#D0D7EF\]:hover {
      color: #d0d7ef;
    }
  }

  @media (hover: hover) {
    .hover\:text-\[var\(--color-danger-text\)\]:hover {
      color: var(--color-danger-text);
    }
  }

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

  @media (hover: hover) {
    .hover\:text-\[var\(--color-text-muted\)\]:hover {
      color: var(--color-text-muted);
    }
  }

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

  @media (hover: hover) {
    .hover\:text-white\/80:hover {
      color: #fffc;
    }

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

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

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

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

  @media (hover: hover) {
    .hover\:brightness-110:hover {
      --tw-brightness: brightness(110%);
      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, );
    }
  }

  .focus\:border-\[\#6E7179\]\/\[50\%\]:focus {
    border-color: #6e717980;
    border-color: lab(47.5806% .0959337 -4.85771 / .5);
  }

  .focus\:border-\[var\(--color-border-strong\)\]:focus {
    border-color: var(--color-border-strong);
  }

  .focus\:border-white\/20:focus {
    border-color: #fff3;
  }

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

  .focus\:border-white\/30:focus {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-white\/30:focus {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .focus\:bg-\[\#292F42\]\/\[63\%\]:focus {
    background-color: #292f42a1;
    background-color: lab(19.4802% 1.49985 -12.9326 / .63);
  }

  .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-\[var\(--color-focus\)\]:focus {
    --tw-ring-color: var(--color-focus);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[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-\[var\(--color-focus\)\]:focus-visible {
    --tw-ring-color: var(--color-focus);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-\[var\(--color-canvas\)\]:focus-visible {
    --tw-ring-offset-color: var(--color-canvas);
  }

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

  .focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
  }

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

  .disabled\:cursor-wait:disabled {
    cursor: wait;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

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

  @media (min-width: 1200px) {
    .min-\[1200px\]\:right-24 {
      right: calc(var(--spacing) * 24);
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:left-24 {
      left: calc(var(--spacing) * 24);
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:block {
      display: block;
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:flex {
      display: flex;
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:hidden {
      display: none;
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:grid-cols-\[1\.08fr_0\.92fr\] {
      grid-template-columns: 1.08fr .92fr;
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:justify-end {
      justify-content: flex-end;
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:px-24 {
      padding-inline: calc(var(--spacing) * 24);
    }
  }

  @media (min-width: 1400px) {
    .min-\[1400px\]\:inline {
      display: inline;
    }
  }

  @media (min-width: 40rem) {
    .sm\:right-14 {
      right: calc(var(--spacing) * 14);
    }
  }

  @media (min-width: 40rem) {
    .sm\:left-14 {
      left: calc(var(--spacing) * 14);
    }
  }

  @media (min-width: 40rem) {
    .sm\:ml-0 {
      margin-left: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex {
      display: flex;
    }
  }

  @media (min-width: 40rem) {
    .sm\:hidden {
      display: none;
    }
  }

  @media (min-width: 40rem) {
    .sm\:inline-flex {
      display: inline-flex;
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-6 {
      height: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 40rem) {
    .sm\:h-56 {
      height: calc(var(--spacing) * 56);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-36 {
      width: calc(var(--spacing) * 36);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-48 {
      width: calc(var(--spacing) * 48);
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-auto {
      width: auto;
    }
  }

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

  @media (min-width: 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

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

  @media (min-width: 40rem) {
    .sm\:flex-wrap {
      flex-wrap: wrap;
    }
  }

  @media (min-width: 40rem) {
    .sm\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 40rem) {
    .sm\:items-end {
      align-items: flex-end;
    }
  }

  @media (min-width: 40rem) {
    .sm\:items-start {
      align-items: flex-start;
    }
  }

  @media (min-width: 40rem) {
    .sm\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 40rem) {
    .sm\:justify-center {
      justify-content: center;
    }
  }

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

  @media (min-width: 40rem) {
    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }
  }

  @media (min-width: 40rem) {
    .sm\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 40rem) {
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 40rem) {
    .sm\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-7 {
      padding-inline: calc(var(--spacing) * 7);
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 40rem) {
    .sm\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  @media (min-width: 40rem) {
    .sm\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-4 {
      grid-column: span 4 / span 4;
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-8 {
      grid-column: span 8 / span 8;
    }
  }

  @media (min-width: 48rem) {
    .md\:h-auto {
      height: auto;
    }
  }

  @media (min-width: 48rem) {
    .md\:w-\[25\%\] {
      width: 25%;
    }
  }

  @media (min-width: 48rem) {
    .md\:w-auto {
      width: auto;
    }
  }

  @media (min-width: 48rem) {
    .md\:max-w-\[50rem\] {
      max-width: 50rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:min-w-\[26rem\] {
      min-width: 26rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-\[repeat\(auto-fill\,minmax\(280px\,1fr\)\)\] {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 48rem) {
    .md\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 48rem) {
    .md\:rounded-3xl {
      border-radius: var(--radius-3xl);
    }
  }

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

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

  @media (min-width: 64rem) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[220px_220px_auto\] {
      grid-template-columns: 220px 220px auto;
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_340px\] {
      grid-template-columns: minmax(0, 1.2fr) 340px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 64rem) {
    .lg\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }
  }

  @media (min-width: 80rem) {
    .xl\:sticky {
      position: sticky;
    }
  }

  @media (min-width: 80rem) {
    .xl\:top-5 {
      top: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[minmax\(0\,1\.45fr\)_minmax\(360px\,420px\)\] {
      grid-template-columns: minmax(0, 1.45fr) minmax(360px, 420px);
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[minmax\(0\,1fr\)_380px\] {
      grid-template-columns: minmax(0, 1fr) 380px;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[repeat\(auto-fill\,minmax\(340px\,1fr\)\)\] {
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }

  @media (min-width: 80rem) {
    .xl\:border-white\/10 {
      border-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .xl\:border-white\/10 {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }

  @media (min-width: 80rem) {
    .xl\:pr-3 {
      padding-right: calc(var(--spacing) * 3);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-\[repeat\(auto-fill\,minmax\(380px\,1fr\)\)\] {
      grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
  }

  .light\:border-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *) {
    border-color: #1e1a4d1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:border-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *) {
      border-color: color-mix(in oklab, var(--color-indigo-950) 10%, transparent);
    }
  }

  .light\:border-indigo-950\/14:where([data-theme="light"], [data-theme="light"] *) {
    border-color: #1e1a4d24;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:border-indigo-950\/14:where([data-theme="light"], [data-theme="light"] *) {
      border-color: color-mix(in oklab, var(--color-indigo-950) 14%, transparent);
    }
  }

  .light\:border-indigo-950\/15:where([data-theme="light"], [data-theme="light"] *) {
    border-color: #1e1a4d26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:border-indigo-950\/15:where([data-theme="light"], [data-theme="light"] *) {
      border-color: color-mix(in oklab, var(--color-indigo-950) 15%, transparent);
    }
  }

  .light\:border-indigo-950\/25:where([data-theme="light"], [data-theme="light"] *) {
    border-color: #1e1a4d40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:border-indigo-950\/25:where([data-theme="light"], [data-theme="light"] *) {
      border-color: color-mix(in oklab, var(--color-indigo-950) 25%, transparent);
    }
  }

  .light\:border-white:where([data-theme="light"], [data-theme="light"] *) {
    border-color: var(--color-white);
  }

  .light\:bg-\[var\(--color-canvas\)\]:where([data-theme="light"], [data-theme="light"] *) {
    background-color: var(--color-canvas);
  }

  .light\:bg-\[var\(--color-surface-1\)\]:where([data-theme="light"], [data-theme="light"] *) {
    background-color: var(--color-surface-1);
  }

  .light\:bg-\[var\(--color-surface-2\)\]:where([data-theme="light"], [data-theme="light"] *) {
    background-color: var(--color-surface-2);
  }

  .light\:bg-indigo-950\/5:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/5:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 5%, transparent);
    }
  }

  .light\:bg-indigo-950\/6:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d0f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/6:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 6%, transparent);
    }
  }

  .light\:bg-indigo-950\/7:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d12;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/7:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 7%, transparent);
    }
  }

  .light\:bg-indigo-950\/8:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/8:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 8%, transparent);
    }
  }

  .light\:bg-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 10%, transparent);
    }
  }

  .light\:bg-indigo-950\/25:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/25:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 25%, transparent);
    }
  }

  .light\:bg-indigo-950\/30:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/30:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 30%, transparent);
    }
  }

  .light\:bg-indigo-950\/\[0\.03\]:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d08;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/\[0\.03\]:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 3%, transparent);
    }
  }

  .light\:bg-indigo-950\/\[0\.04\]:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d0a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/\[0\.04\]:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 4%, transparent);
    }
  }

  .light\:bg-indigo-950\/\[0\.12\]:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d1f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/\[0\.12\]:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 12%, transparent);
    }
  }

  .light\:bg-indigo-950\/\[0\.055\]:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #1e1a4d0e;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-indigo-950\/\[0\.055\]:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 5.5%, transparent);
    }
  }

  .light\:bg-slate-300:where([data-theme="light"], [data-theme="light"] *) {
    background-color: var(--color-slate-300);
  }

  .light\:bg-white:where([data-theme="light"], [data-theme="light"] *) {
    background-color: var(--color-white);
  }

  .light\:bg-white\/90:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-white\/90:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .light\:bg-white\/95:where([data-theme="light"], [data-theme="light"] *) {
    background-color: #fffffff2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:bg-white\/95:where([data-theme="light"], [data-theme="light"] *) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }

  .light\:\!text-slate-950:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-slate-950) !important;
  }

  .light\:text-blue-700:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-blue-700);
  }

  .light\:text-emerald-800:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-emerald-800);
  }

  .light\:text-green-700:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-green-700);
  }

  .light\:text-red-700:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-red-700);
  }

  .light\:text-red-800:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-red-800);
  }

  .light\:text-slate-500:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-slate-500);
  }

  .light\:text-slate-600:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-slate-600);
  }

  .light\:text-slate-700:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-slate-700);
  }

  .light\:text-slate-800:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-slate-800);
  }

  .light\:text-slate-900:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-slate-900);
  }

  .light\:text-slate-950:where([data-theme="light"], [data-theme="light"] *) {
    color: var(--color-slate-950);
  }

  @media (hover: hover) {
    .light\:group-hover\:text-slate-600:where([data-theme="light"], [data-theme="light"] *):is(:where(.group):hover *) {
      color: var(--color-slate-600);
    }
  }

  .light\:placeholder\:text-slate-500:where([data-theme="light"], [data-theme="light"] *)::placeholder {
    color: var(--color-slate-500);
  }

  @media (hover: hover) {
    .light\:hover\:border-indigo-950\/20:where([data-theme="light"], [data-theme="light"] *):hover {
      border-color: #1e1a4d33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .light\:hover\:border-indigo-950\/20:where([data-theme="light"], [data-theme="light"] *):hover {
        border-color: color-mix(in oklab, var(--color-indigo-950) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .light\:hover\:border-indigo-950\/25:where([data-theme="light"], [data-theme="light"] *):hover {
      border-color: #1e1a4d40;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .light\:hover\:border-indigo-950\/25:where([data-theme="light"], [data-theme="light"] *):hover {
        border-color: color-mix(in oklab, var(--color-indigo-950) 25%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .light\:hover\:bg-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *):hover {
      background-color: #1e1a4d1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .light\:hover\:bg-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *):hover {
        background-color: color-mix(in oklab, var(--color-indigo-950) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .light\:hover\:bg-indigo-950\/\[0\.05\]:where([data-theme="light"], [data-theme="light"] *):hover {
      background-color: #1e1a4d0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .light\:hover\:bg-indigo-950\/\[0\.05\]:where([data-theme="light"], [data-theme="light"] *):hover {
        background-color: color-mix(in oklab, var(--color-indigo-950) 5%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .light\:hover\:bg-indigo-950\/\[0\.06\]:where([data-theme="light"], [data-theme="light"] *):hover {
      background-color: #1e1a4d0f;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .light\:hover\:bg-indigo-950\/\[0\.06\]:where([data-theme="light"], [data-theme="light"] *):hover {
        background-color: color-mix(in oklab, var(--color-indigo-950) 6%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .light\:hover\:bg-indigo-950\/\[0\.07\]:where([data-theme="light"], [data-theme="light"] *):hover {
      background-color: #1e1a4d12;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .light\:hover\:bg-indigo-950\/\[0\.07\]:where([data-theme="light"], [data-theme="light"] *):hover {
        background-color: color-mix(in oklab, var(--color-indigo-950) 7.0%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .light\:hover\:text-slate-800:where([data-theme="light"], [data-theme="light"] *):hover {
      color: var(--color-slate-800);
    }
  }

  @media (hover: hover) {
    .light\:hover\:text-slate-900:where([data-theme="light"], [data-theme="light"] *):hover {
      color: var(--color-slate-900);
    }
  }

  @media (hover: hover) {
    .light\:hover\:text-slate-950:where([data-theme="light"], [data-theme="light"] *):hover {
      color: var(--color-slate-950);
    }
  }

  .light\:focus\:border-indigo-950\/20:where([data-theme="light"], [data-theme="light"] *):focus {
    border-color: #1e1a4d33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:focus\:border-indigo-950\/20:where([data-theme="light"], [data-theme="light"] *):focus {
      border-color: color-mix(in oklab, var(--color-indigo-950) 20%, transparent);
    }
  }

  .light\:focus\:border-indigo-950\/25:where([data-theme="light"], [data-theme="light"] *):focus {
    border-color: #1e1a4d40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:focus\:border-indigo-950\/25:where([data-theme="light"], [data-theme="light"] *):focus {
      border-color: color-mix(in oklab, var(--color-indigo-950) 25%, transparent);
    }
  }

  .light\:focus\:border-indigo-950\/30:where([data-theme="light"], [data-theme="light"] *):focus {
    border-color: #1e1a4d4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:focus\:border-indigo-950\/30:where([data-theme="light"], [data-theme="light"] *):focus {
      border-color: color-mix(in oklab, var(--color-indigo-950) 30%, transparent);
    }
  }

  .light\:focus\:bg-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *):focus {
    background-color: #1e1a4d1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .light\:focus\:bg-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *):focus {
      background-color: color-mix(in oklab, var(--color-indigo-950) 10%, transparent);
    }
  }

  @media (min-width: 80rem) {
    .light\:xl\:border-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *) {
      border-color: #1e1a4d1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .light\:xl\:border-indigo-950\/10:where([data-theme="light"], [data-theme="light"] *) {
        border-color: color-mix(in oklab, var(--color-indigo-950) 10%, transparent);
      }
    }
  }

  @media (min-width: 1920px) {
    .\33 xl\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }
  }

  @media (min-width: 1920px) {
    .\33 xl\:h-10 {
      height: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 1920px) {
    .\33 xl\:w-auto {
      width: auto;
    }
  }

  @media (min-width: 1920px) {
    .\33 xl\:flex-1 {
      flex: 1;
    }
  }

  @media (min-width: 1920px) {
    .\33 xl\:flex-2 {
      flex: 2;
    }
  }

  @media (min-width: 1920px) {
    .\33 xl\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 1920px) {
    .\33 xl\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }
  }

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

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

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

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

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

  .\[\&\>svg\]\:h-8 > svg {
    height: calc(var(--spacing) * 8);
  }

  .\[\&\>svg\]\:w-8 > svg {
    width: calc(var(--spacing) * 8);
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

.react-datepicker__navigation-icon:before, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
  content: "";
  border: 3px solid #ccc;
  border-width: 3px 3px 0 0;
  width: 9px;
  height: 9px;
  display: block;
  position: absolute;
  top: 6px;
}

.react-datepicker__sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.react-datepicker-wrapper {
  border: 0;
  padding: 0;
  display: inline-block;
}

.react-datepicker {
  color: #000;
  font-family: Helvetica Neue, helvetica, arial, sans-serif;
  font-size: .8rem;
  line-height: initial;
  background-color: #fff;
  border: 1px solid #aeaeae;
  border-radius: .3rem;
  display: inline-block;
  position: relative;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}

.react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-right-radius: .375em;
  border-bottom-left-radius: .375em;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}

.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker-popper--header-middle[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^="bottom"] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker-popper--header-bottom[data-placement^="top"] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: .3rem;
  padding: 8px 0;
  position: relative;
}

.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}

.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
  border-top-right-radius: .3rem;
}

.react-datepicker__header--middle {
  border-top: 1px solid #aeaeae;
  border-radius: 0;
  margin-top: 4px;
}

.react-datepicker__header--bottom {
  border-top: 1px solid #aeaeae;
  border-bottom: none;
  border-radius: 0 0 .3rem .3rem;
}

.react-datepicker__header-wrapper {
  position: relative;
}

.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 2px;
}

.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll {
  margin: 0 15px;
  display: inline-block;
}

.react-datepicker__month-select, .react-datepicker__year-select, .react-datepicker__month-year-select {
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  background-color: #0000;
  border: 1px solid #aeaeae;
  border-radius: .3rem;
  margin-top: 5px;
  padding: 2px 5px;
}

.react-datepicker__month-select:focus-visible, .react-datepicker__year-select:focus-visible, .react-datepicker__month-year-select:focus-visible {
  outline: 1px auto;
}

.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
  color: #000;
  margin-top: 0;
  font-size: .944rem;
  font-weight: bold;
}

h2.react-datepicker__current-month {
  margin: 0;
  padding: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  text-align: center;
  cursor: pointer;
  z-index: 1;
  text-indent: -999em;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  position: absolute;
  top: 2px;
  overflow: hidden;
}

.react-datepicker__navigation--previous {
  left: 2px;
}

.react-datepicker__navigation--next {
  right: 2px;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}

.react-datepicker__navigation--years {
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
  top: 0;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
}

.react-datepicker__navigation:hover :before {
  border-color: #a6a6a6;
}

.react-datepicker__navigation-icon {
  width: 0;
  font-size: 20px;
  position: relative;
  top: -1px;
}

.react-datepicker__navigation-icon--next {
  left: -2px;
}

.react-datepicker__navigation-icon--next:before {
  left: -7px;
  transform: rotate(45deg);
}

.react-datepicker__navigation-icon--previous {
  right: -2px;
}

.react-datepicker__navigation-icon--previous:before {
  right: -7px;
  transform: rotate(225deg);
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  text-align: center;
  margin: .5em;
}

.react-datepicker__year-wrapper {
  flex-wrap: wrap;
  max-width: 180px;
  display: flex;
}

.react-datepicker__year .react-datepicker__year-text {
  width: 5em;
  margin: 2px;
  display: inline-block;
}

.react-datepicker__month {
  text-align: center;
  margin: .5em;
}

.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
  width: 5em;
  margin: 2px;
  display: inline-block;
}

.react-datepicker__input-time-container {
  clear: both;
  float: left;
  text-align: left;
  width: 100%;
  margin: 5px 0 10px 15px;
}

.react-datepicker__input-time-container .react-datepicker-time__caption, .react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  margin-left: 10px;
  display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
  -moz-appearance: textfield;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}

.react-datepicker__time-container--with-today-button {
  border: 1px solid #aeaeae;
  border-radius: .375em;
  display: inline;
  position: absolute;
  top: 0;
  right: -87px;
}

.react-datepicker__time-container .react-datepicker__time {
  background: #fff;
  border-bottom-right-radius: .375em;
  position: relative;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  text-align: center;
  border-bottom-right-radius: .375em;
  width: 85px;
  margin: 0 auto;
  overflow-x: hidden;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  box-sizing: content-box;
  width: 100%;
  height: calc(195px + 1.0625em);
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
  overflow-y: scroll;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  white-space: nowrap;
  height: 30px;
  padding: 5px 10px;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  color: #fff;
  background-color: #216ba5;
  font-weight: bold;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: #0000;
}

.react-datepicker__week-number {
  color: #ccc;
  text-align: center;
  width: 2.125em;
  margin: .208em;
  line-height: 2.125em;
  display: inline-block;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  background-color: #f0f0f0;
  border-radius: .3rem;
}

.react-datepicker__week-number--selected {
  color: #fff;
  background-color: #216ba5;
  border-radius: .3rem;
}

.react-datepicker__week-number--selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day-names {
  text-align: center;
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
  color: #000;
  text-align: center;
  width: 2.125em;
  margin: .208em;
  line-height: 2.125em;
  display: inline-block;
}

.react-datepicker__day-name--disabled, .react-datepicker__day--disabled, .react-datepicker__time-name--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text {
  cursor: pointer;
}

.react-datepicker__day:not([aria-disabled="true"]):hover, .react-datepicker__month-text:not([aria-disabled="true"]):hover, .react-datepicker__quarter-text:not([aria-disabled="true"]):hover, .react-datepicker__year-text:not([aria-disabled="true"]):hover {
  background-color: #f0f0f0;
  border-radius: .3rem;
}

.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted {
  color: #fff;
  background-color: #3dcc4a;
  border-radius: .3rem;
}

.react-datepicker__day--highlighted:not([aria-disabled="true"]):hover, .react-datepicker__month-text--highlighted:not([aria-disabled="true"]):hover, .react-datepicker__quarter-text--highlighted:not([aria-disabled="true"]):hover, .react-datepicker__year-text--highlighted:not([aria-disabled="true"]):hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 {
  color: #f0f;
}

.react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--holidays, .react-datepicker__month-text--holidays, .react-datepicker__quarter-text--holidays, .react-datepicker__year-text--holidays {
  color: #fff;
  background-color: #ff6803;
  border-radius: .3rem;
  position: relative;
}

.react-datepicker__day--holidays .overlay, .react-datepicker__month-text--holidays .overlay, .react-datepicker__quarter-text--holidays .overlay, .react-datepicker__year-text--holidays .overlay {
  color: #fff;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  border-radius: 4px;
  padding: 4px;
  transition: visibility, opacity .3s ease-in-out;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.react-datepicker__day--holidays:not([aria-disabled="true"]):hover, .react-datepicker__month-text--holidays:not([aria-disabled="true"]):hover, .react-datepicker__quarter-text--holidays:not([aria-disabled="true"]):hover, .react-datepicker__year-text--holidays:not([aria-disabled="true"]):hover {
  background-color: #cf5300;
}

.react-datepicker__day--holidays:hover .overlay, .react-datepicker__month-text--holidays:hover .overlay, .react-datepicker__quarter-text--holidays:hover .overlay, .react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
  color: #fff;
  background-color: #216ba5;
  border-radius: .3rem;
}

.react-datepicker__day--selected:not([aria-disabled="true"]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover, .react-datepicker__day--in-range:not([aria-disabled="true"]):hover, .react-datepicker__month-text--selected:not([aria-disabled="true"]):hover, .react-datepicker__month-text--in-selecting-range:not([aria-disabled="true"]):hover, .react-datepicker__month-text--in-range:not([aria-disabled="true"]):hover, .react-datepicker__quarter-text--selected:not([aria-disabled="true"]):hover, .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled="true"]):hover, .react-datepicker__quarter-text--in-range:not([aria-disabled="true"]):hover, .react-datepicker__year-text--selected:not([aria-disabled="true"]):hover, .react-datepicker__year-text--in-selecting-range:not([aria-disabled="true"]):hover, .react-datepicker__year-text--in-range:not([aria-disabled="true"]):hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
  color: #000;
  background-color: #bad9f1;
  border-radius: .3rem;
}

.react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover, .react-datepicker__month-text--keyboard-selected:not([aria-disabled="true"]):hover, .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled="true"]):hover, .react-datepicker__year-text--keyboard-selected:not([aria-disabled="true"]):hover {
  color: #fff;
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
  background-color: #216ba580;
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) {
  color: #000;
  background-color: #f0f0f0;
}

.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled .overlay, .react-datepicker__month-text--disabled .overlay, .react-datepicker__quarter-text--disabled .overlay, .react-datepicker__year-text--disabled .overlay {
  color: #fff;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  border-radius: 4px;
  padding: 4px;
  transition: visibility, opacity .3s ease-in-out;
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
}

.react-datepicker__input-container {
  width: 100%;
  display: inline-block;
  position: relative;
}

.react-datepicker__input-container .react-datepicker__calendar-icon {
  box-sizing: content-box;
  padding: .625em;
  position: absolute;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view {
  border: 1px solid #0000;
  border-radius: .3rem;
  position: relative;
}

.react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}

.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
  top: 0;
  right: -16px;
  transform: rotate(135deg);
}

.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {
  z-index: 1;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #aeaeae;
  border-radius: .3rem;
  width: 50%;
  position: absolute;
  top: 30px;
  left: 25%;
}

.react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  line-height: 20px;
  display: block;
}

.react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
}

.react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  user-select: none;
  border-bottom-right-radius: .3rem;
  border-bottom-left-radius: .3rem;
}

.react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}

.react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  vertical-align: middle;
  background-color: #0000;
  border: 0;
  outline: 0;
  height: 100%;
  padding: 0 6px 0 0;
  display: table-cell;
  position: absolute;
  top: 0;
  right: 0;
}

.react-datepicker__close-icon:after {
  cursor: pointer;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  content: "×";
  background-color: #216ba5;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  display: table-cell;
}

.react-datepicker__close-icon--disabled {
  cursor: default;
}

.react-datepicker__close-icon--disabled:after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  cursor: pointer;
  text-align: center;
  clear: left;
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  padding: 5px 0;
  font-weight: bold;
}

.react-datepicker__portal {
  z-index: 2147483647;
  background-color: #000c;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.react-datepicker__children-container {
  width: 17.25em;
  height: auto;
  margin: .5em;
  padding-left: .25em;
  padding-right: .25em;
}

.react-datepicker__aria-live {
  clip-path: circle(0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.react-datepicker__calendar-icon {
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
}

.react-datepicker-popper-offset {
  margin-top: -.7em;
}

.PinturaModal {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --editor-modal-border-radius: 0;
  --editor-modal-overlay-opacity: .95;
  --editor-modal-shadow: 0 1em 2em -1em #00000040,0 1.5em 1.5em -2em #00000080;
  --editor-modal-outline: inset 0 0 0 1px var(--color-foreground-3);
  z-index: 2147483646;
  background-color: rgba(var(--color-background),var(--editor-modal-overlay-opacity, var(--editor-modal-overlay-opacity-default, .95)));
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

@supports (height: 100dvh) {
  .PinturaModal {
    height: 100dvh;
  }
}

.PinturaModal > .PinturaRoot[data-env~="is-centered"] {
  box-shadow: var(--editor-modal-shadow);
  border-radius: var(--editor-modal-border-radius);
}

.PinturaModal > .PinturaRoot[data-env~="is-centered"]:after {
  pointer-events: none;
  border-radius: inherit;
  content: "";
  box-shadow: var(--editor-modal-outline);
  z-index: 2147483646;
  position: absolute;
  inset: 0;
}

.PinturaModal[style*="--viewport-pad-footer:1"] {
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}

.PinturaModal + .PinturaModal {
  --editor-modal-overlay-opacity-default: .75;
}

@media (min-width: 600px) and (min-height: 600px) {
  .PinturaModal + .PinturaModal .PinturaRoot {
    --editor-max-width-default: calc(100vw - 8em);
    --editor-max-height-default: calc(100vh - 8em);
  }
}

.PinturaDocumentStyles {
  scrollbar-gutter: auto;
}

.PinturaDocumentLock, .PinturaDocumentLock body {
  height: calc(var(--pintura-document-height) - 1px);
  box-sizing: border-box;
  overflow-y: hidden;
}

.PinturaDocumentLock body {
  position: relative;
}

.PinturaDocumentLock .PinturaModal {
  height: 100% !important;
}

.PinturaUtilPanel[data-util="redact"] .PinturaUtilFooter {
  padding: 0;
}

.PinturaUtilPanel[data-util="redact"] .PinturaUtilFooter > div {
  height: 1px;
}

.PinturaUtilPanel[data-util="retouch"] .PinturaControlListScroller + .PinturaControlListScroller {
  margin-top: 1em;
}

.pintura-editor, pintura-editor {
  --color-primary: #ffd843;
  --color-primary-dark: #ffc343;
  --color-primary-text: #000;
  --color-secondary: #03a9f4;
  --color-secondary-dark: #046bbf;
  --color-focus: 4,107,191;
  --color-focus-100: rgba(var(--color-focus),1);
  --color-focus-50: rgba(var(--color-focus),.5);
  --color-focus-25: rgba(var(--color-focus),.25);
  --color-error: 255,87,34;
  --color-error-100: rgb(var(--color-error));
  --color-error-75: rgba(var(--color-error),.75);
  --color-error-50: rgba(var(--color-error),.5);
  --color-error-25: rgba(var(--color-error),.25);
  --color-error-10: rgba(var(--color-error),.1);
  --color-foreground: 0,0,0;
  --color-background: 255,255,255;
  --color-preview-outline: var(--color-foreground);
  --color-transition-duration: .25s;
  --button-cursor: pointer;
  --font-size: 16px;
  --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --backdrop-filter-bright: brightness(110%) saturate(180%) blur(10px);
  --backdrop-filter-dark: brightness(90%) saturate(180%) blur(10px);
  --border-radius-round: 9999em;
  --border-radius: .625em;
  --filter-disabled: grayscale(95%) opacity(40%);
  --editor-inset-top: 0px;
  --editor-inset-bottom: 0px;
  --safe-area-inset-top: 0px;
  --safe-area-inset-bottom: 0px;
  --pattern-transparent: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h4v4H0zm4 4h4v4H4z' fill='%23E5E5E5'/%3E%3C/svg%3E");
  --grid-color-even: rgba(var(--color-foreground),.1);
  --grid-color-odd: rgba(var(--color-background),.1);
  --grid-size: 24;
}

.pintura-editor, .pintura-editor-panel, pintura-editor {
  --color-foreground-100: rgba(var(--color-foreground),1);
  --color-foreground-95: rgba(var(--color-foreground),.95);
  --color-foreground-90: rgba(var(--color-foreground),.9);
  --color-foreground-80: rgba(var(--color-foreground),.8);
  --color-foreground-70: rgba(var(--color-foreground),.7);
  --color-foreground-60: rgba(var(--color-foreground),.6);
  --color-foreground-50: rgba(var(--color-foreground),.5);
  --color-foreground-40: rgba(var(--color-foreground),.4);
  --color-foreground-30: rgba(var(--color-foreground),.3);
  --color-foreground-20: rgba(var(--color-foreground),.25);
  --color-foreground-15: rgba(var(--color-foreground),.2);
  --color-foreground-10: rgba(var(--color-foreground),.15);
  --color-foreground-5: rgba(var(--color-foreground),.075);
  --color-foreground-3: rgba(var(--color-foreground),.05);
  --color-foreground-1: rgba(var(--color-foreground),.02);
  --color-foreground-0: rgba(var(--color-foreground),0);
  --color-background-100: rgba(var(--color-background),1);
  --color-background-95: rgba(var(--color-background),.95);
  --color-background-90: rgba(var(--color-background),.9);
  --color-background-80: rgba(var(--color-background),.8);
  --color-background-70: rgba(var(--color-background),.7);
  --color-background-60: rgba(var(--color-background),.6);
  --color-background-50: rgba(var(--color-background),.5);
  --color-background-40: rgba(var(--color-background),.4);
  --color-background-30: rgba(var(--color-background),.3);
  --color-background-20: rgba(var(--color-background),.2);
  --color-background-15: rgba(var(--color-background),.15);
  --color-background-10: rgba(var(--color-background),.1);
  --color-background-5: rgba(var(--color-background),.05);
  --color-background-3: rgba(var(--color-background),.03);
  --color-background-1: rgba(var(--color-background),.01);
  --color-background-0: rgba(var(--color-background),0);
}

.pintura-editor, .PinturaRootWrapper, pintura-editor {
  display: block;
}

.PinturaRootWrapper {
  height: 100%;
}

.PinturaScrollableContent {
  max-height: var(--panel-max-height, 100vh);
  scrollbar-color: var(--color-foreground-30) transparent;
  scrollbar-width: thin;
  overflow: hidden auto;
}

.PinturaScrollableContent::-webkit-scrollbar {
  cursor: pointer;
  width: 1em;
}

.PinturaScrollableContent::-webkit-scrollbar-track {
  background: none;
}

.PinturaScrollableContent::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-clip: padding-box;
  background-color: var(--color-foreground-30);
  border: .3125em solid #0000;
  border-radius: 9999em;
}

.PinturaRoot[data-env~="is-animated"] {
  --transition-duration-multiplier: 1;
}

.PinturaRoot[data-env~="is-transparent"] {
  background: none;
}

.PinturaRoot {
  --nav-group-margin: .5em;
  --editor-calculated-inset-top: calc(var(--safe-area-inset-top) + var(--editor-inset-top));
  --editor-calculated-inset-bottom: calc(var(--safe-area-inset-bottom) + var(--editor-inset-bottom));
  --transition-duration-10: calc(var(--transition-duration-multiplier, 0) * .1s);
  --transition-duration-25: calc(var(--transition-duration-multiplier, 0) * .25s);
  --transition-duration-50: calc(var(--transition-duration-multiplier, 0) * .5s);
  box-sizing: border-box;
  width: var(--editor-width, 100%);
  height: var(--editor-height, 100%);
  padding-top: var(--editor-calculated-inset-top);
  padding-bottom: var(--editor-calculated-inset-bottom);
  max-width: var(--editor-max-width, var(--editor-max-width-default, none));
  max-height: var(--editor-max-height, var(--editor-max-height-default, none));
  contain: strict;
  -webkit-user-select: none;
  user-select: none;
  line-height: normal;
  font-size: var(--font-size);
  font-family: var(--font-family);
  touch-action: manipulation;
  text-align: left;
  text-transform: none;
  text-rendering: optimizelegibility;
  color: var(--color-foreground-90);
  background-color: var(--color-background-100);
  outline-color: rgba(var(--color-preview-outline),1);
  transition: background-color 1ms,outline-color 1ms,color var(--transition-duration-10) ease-in-out,dir 1ms;
  direction: ltr;
  font-weight: 450;
  display: grid;
  position: relative;
  overflow: hidden;
}

.PinturaRoot[dir="rtl"] button {
  direction: rtl;
}

.PinturaRoot .PinturaUtilMain {
  cursor: var(--cursor);
}

.PinturaRoot * {
  box-sizing: content-box;
  word-wrap: normal;
}

.PinturaRoot div:empty {
  display: block;
}

.PinturaRoot button, .PinturaRoot fieldset, .PinturaRoot input, .PinturaRoot legend {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  background: none;
  border: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.PinturaRoot button[disabled] {
  pointer-events: none;
}

.PinturaRoot canvas {
  display: block;
}

.PinturaRoot svg {
  width: auto;
  max-width: none;
  height: auto;
  display: inline-block;
}

.PinturaRoot p {
  margin: 0;
}

.PinturaRoot li, .PinturaRoot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.PinturaRoot a {
  color: inherit;
  text-decoration: none;
}

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

.PinturaRoot .PinturaFixedWidthCharacters {
  font-variant: tabular-nums;
}

.PinturaRoot .PinturaStage {
  pointer-events: none;
  flex: 1;
  align-self: stretch;
  display: flex;
}

.PinturaRoot .PinturaStage[tabindex="-1"] {
  outline: none;
}

.PinturaRoot .PinturaRootPortal, .PinturaRoot > .PinturaCanvas {
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaRoot > .PinturaCanvas {
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.PinturaRoot > .PinturaCanvas canvas {
  width: 100%;
  height: 100%;
  position: absolute;
}

.PinturaRoot > .PinturaCanvas:after {
  content: "";
  background-repeat: no-repeat;
  position: absolute;
  inset: 0;
}

.PinturaRoot > .PinturaStatus {
  z-index: 99999;
  background-color: var(--color-background-90);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaRoot > .PinturaStatus > p {
  white-space: nowrap;
  transition: opacity var(--transition-duration-50) ease-out;
  align-items: center;
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: 50%;
}

.PinturaRoot .PinturaStatusMessage {
  font-size: .875em;
  position: absolute;
}

.PinturaRoot .PinturaStatusAside {
  position: absolute;
  left: 0;
}

.PinturaRoot .PinturaStatusAside svg {
  width: 1.25em;
  height: 1.25em;
}

.PinturaRoot .PinturaStatusAside .PinturaProgressIndicator {
  margin-left: .5em;
}

.PinturaRoot .PinturaStatusAside .PinturaButton {
  border-radius: var(--border-radius-round);
  background-color: var(--color-foreground-5);
  transition: background-color var(--transition-duration-10) ease-out,color var(--transition-duration-10) ease-out;
  -webkit-backdrop-filter: var(--backdrop-filter-dark);
  backdrop-filter: var(--backdrop-filter-dark);
  outline: #0000;
  margin-left: .75em;
  padding: .25em;
  font-size: .875em;
}

.PinturaRoot .PinturaStatusAside .PinturaButton .PinturaButtonInner {
  pointer-events: none;
}

.PinturaRoot .PinturaStatusAside .PinturaButton:not([disabled])[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot .PinturaStatusAside .PinturaButton:not([disabled]):hover {
  background-color: var(--color-foreground-10);
}

.PinturaRoot .PinturaStatusIcon svg {
  margin-top: .25em;
  margin-left: .5em;
  font-size: .875em;
}

.PinturaRoot > .PinturaNav {
  z-index: 3;
  position: relative;
}

.PinturaRoot > .PinturaNav:empty {
  display: none !important;
}

.PinturaRoot > .PinturaNav .PinturaButton {
  transition: background-color var(--transition-duration-10) ease-out,color var(--transition-duration-10) ease-out;
  outline: #0000;
}

.PinturaRoot > .PinturaNav .PinturaButton svg {
  width: 1em;
  transition: opacity var(--transition-duration-10) ease-out;
}

.PinturaRoot > .PinturaNav .PinturaButton > span {
  justify-content: center;
}

.PinturaRoot > .PinturaNav .PinturaButtonIconOnly .PinturaButtonInner, .PinturaRoot > .PinturaNav .PinturaDropdownIconOnly .PinturaButtonInner {
  width: 1.75em;
}

.PinturaRoot > .PinturaNav .PinturaButton .PinturaButtonInner {
  height: 1.75em;
}

.PinturaRoot > .PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly) {
  padding-left: .75em;
  padding-right: .75em;
}

.PinturaRoot > .PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly) .PinturaButtonLabel {
  font-size: .75em;
  line-height: 2;
}

.PinturaRoot > .PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly):not(.PinturaDropdownButton) {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaRoot > .PinturaNav .PinturaButton:only-of-type {
  border-radius: var(--border-radius-round);
}

.PinturaRoot > .PinturaNav .PinturaButton:only-of-type + * {
  margin-left: .5em;
}

.PinturaRoot > .PinturaNav .PinturaButton[disabled] .PinturaButtonLabel, .PinturaRoot > .PinturaNav .PinturaButton[disabled] svg {
  opacity: .25;
}

.PinturaRoot > .PinturaNav .PinturaButton:not(.PinturaButtonExport):not([disabled])[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot > .PinturaNav .PinturaButton:not(.PinturaButtonExport):not([disabled]):hover {
  background-color: var(--color-foreground-10);
}

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

.PinturaRoot .PinturaButtonExport:hover {
  background-color: var(--color-primary-dark);
}

.PinturaRoot .PinturaButtonExport[data-focus-visible] {
  color: var(--color-primary-text);
  background-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5),0 0 0 3px var(--color-focus-50);
  background-color: var(--color-primary-dark);
}

.PinturaRoot .PinturaButtonExport:not(.PinturaButtonIconOnly) {
  flex: 1;
  padding: 0 .75em;
}

.PinturaRoot > .PinturaNavMain {
  display: flex;
  overflow: hidden;
}

.PinturaRoot > .PinturaNavMain [aria-selected="true"] {
  -webkit-backdrop-filter: var(--backdrop-filter-dark);
  backdrop-filter: var(--backdrop-filter-dark);
  background-color: var(--color-foreground-10);
}

.PinturaRoot > .PinturaNavMain button svg {
  align-self: center;
  width: 1.5em;
}

.PinturaRoot > .PinturaNavMain button span, .PinturaRoot > .PinturaNavMain button svg {
  pointer-events: none;
}

.PinturaRoot > .PinturaNavMain button svg + span {
  margin-top: .75em;
}

.PinturaRoot > .PinturaNavMain button span {
  text-overflow: ellipsis;
  width: calc(100% - 1em);
  width: inherit;
  max-width: calc(100% - 1em);
  font-size: .875em;
  display: block;
  overflow: hidden;
}

.PinturaRoot > .PinturaNavMain button {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  transition: background-color var(--transition-duration-10) ease-out,color var(--transition-duration-10) ease-out,box-shadow var(--transition-duration-10) ease-out;
}

.PinturaRoot > .PinturaNavMain button:hover {
  box-shadow: inset 0 0 0 1px var(--color-foreground-10);
}

.PinturaRoot > .PinturaNavMain button[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot > .PinturaNavTools {
  box-sizing: border-box;
  pointer-events: none;
  max-width: 100%;
}

.PinturaRoot > .PinturaNavTools:empty {
  display: none;
}

.PinturaRoot > .PinturaNavTools, .PinturaRoot > .PinturaNavTools .PinturaNavGroup, .PinturaRoot > .PinturaNavTools .PinturaNavSet {
  justify-content: center;
  align-items: center;
  display: flex;
}

.PinturaRoot > .PinturaNavTools .PinturaButton, .PinturaRoot > .PinturaNavTools .PinturaNavSet {
  pointer-events: all;
}

.PinturaRoot > .PinturaNavTools .PinturaButton[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot .PinturaNavGroup {
  margin: 0 var(--nav-group-margin);
}

.PinturaRoot .PinturaNavGroup > * {
  border-radius: var(--border-radius-round);
}

.PinturaRoot .PinturaNavGroup > * + * {
  margin-left: .5em;
}

.PinturaRoot .PinturaNavGroup:first-of-type:not(.PinturaNavGroupFloat) {
  margin-left: 0;
  margin-right: auto;
}

.PinturaRoot .PinturaNavGroup:last-of-type:not(.PinturaNavGroupFloat) {
  margin-left: auto;
  margin-right: 0;
}

.PinturaRoot .PinturaNavSet {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaRoot .PinturaNavSet > :not(:only-child) {
  border: 1px solid var(--color-foreground-3);
  border-top: 0;
  border-bottom: 0;
}

.PinturaRoot .PinturaNavSet > :first-child:not(:only-child) {
  border-left: 0;
}

.PinturaRoot .PinturaNavSet > :last-child:not(:only-child) {
  border-right: 0;
}

.PinturaRoot .PinturaNavSet > * + * {
  margin-left: -1px;
}

.PinturaRoot .PinturaNavSet > .PinturaButton:hover, .PinturaRoot .PinturaNavSet > .PinturaButton[data-focus-visible] {
  z-index: 1;
  position: relative;
}

.PinturaRoot .PinturaNavSet > :only-child {
  border-radius: var(--border-radius-round);
}

.PinturaRoot .PinturaNavSet > :first-child:not(:only-child) .PinturaButtonInner {
  padding: 0 .125em 0 .25em;
}

.PinturaRoot .PinturaNavSet > :first-child:not(:only-child) {
  border-top-left-radius: var(--border-radius-round);
  border-bottom-left-radius: var(--border-radius-round);
}

.PinturaRoot .PinturaNavSet > :last-child:not(:only-child) .PinturaButtonInner {
  padding: 0 .25em 0 .125em;
}

.PinturaRoot .PinturaNavSet > :last-child:not(:only-child) {
  border-top-right-radius: var(--border-radius-round);
  border-bottom-right-radius: var(--border-radius-round);
}

.PinturaRoot[data-env~="overlay"] .PinturaNavSet {
  background-color: var(--color-background-50);
  -webkit-backdrop-filter: var(--backdrop-filter-bright);
  backdrop-filter: var(--backdrop-filter-bright);
  box-shadow: inset 0 0 0 1px var(--color-background-15),0 .0625em .125em #00000040,0 .125em .35em #00000059;
}

.PinturaRoot[data-env~="overlay"] .PinturaNavSet .PinturaButton:not(.PinturaButtonExport):not([disabled]):hover, .PinturaRoot[data-env~="overlay"] .PinturaNavSet > * {
  border-color: var(--color-background-15);
}

.PinturaRoot[data-env~="overlay"] .PinturaNavGroup > .PinturaButton {
  box-shadow: 0 .0625em .125em #00000040, 0 .125em .35em #00000059;
}

.PinturaRoot[data-env~="overlay"] .PinturaNavGroup .PinturaButtonExport {
  box-shadow: inset 0 0 .125em #00000040, 0 .0625em .125em #00000040, 0 .125em .35em #00000059;
}

.PinturaRoot .PinturaNavGroupFloat {
  pointer-events: none;
}

.PinturaRoot .PinturaNavGroupFloat > * {
  pointer-events: all;
}

.PinturaRoot .PinturaNavGroupFloat:not(:only-child) {
  position: absolute;
  left: 0;
  right: 0;
}

.PinturaRoot .PinturaUtilFooter .PinturaScrollable > div {
  padding-left: 1em;
  padding-right: 1em;
}

.PinturaRoot > .PinturaMain {
  max-width: 100vw;
}

.PinturaRoot:not([data-env~="has-toolbar"]) .PinturaUtilHeader {
  margin-bottom: -1em;
  padding-top: 0;
  padding-bottom: 1em;
}

.PinturaRoot[data-env~="landscape"] {
  grid-template-rows: -webkit-min-content auto;
  grid-template-rows: min-content auto;
  grid-template-columns: auto;
}

.PinturaRoot[data-env~="landscape"] > .PinturaNavTools {
  z-index: 3;
  grid-area: 1 / 1;
  padding: 1em 1em 0;
}

.PinturaRoot[data-env~="landscape"] > .PinturaNavMain {
  left: 1em;
  top: calc(1em + var(--editor-calculated-inset-top));
  bottom: calc(1em + var(--editor-calculated-inset-bottom));
  justify-content: flex-end;
  align-items: center;
  position: absolute;
}

.PinturaRoot[data-env~="landscape"] > .PinturaNavMain .PinturaTabList {
  flex-direction: column;
}

.PinturaRoot[data-env~="landscape"] > .PinturaNavMain .PinturaTabList button {
  display: flex;
}

.PinturaRoot[data-env~="landscape"] > .PinturaNavMain .PinturaTabList button + button {
  margin: .5em 0 0;
}

.PinturaRoot[data-env~="landscape"] > .PinturaNavMain button {
  border-radius: var(--border-radius);
  flex: 1;
  justify-content: center;
  min-width: 4em;
  min-height: 4em;
}

.PinturaRoot[data-env~="landscape"] > .PinturaNavMain button span {
  margin-top: .5em;
  font-size: .6875em;
}

.PinturaRoot[data-env~="landscape"] > .PinturaNavMain button svg {
  width: 1em;
  margin-top: .25em;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-toolbar"] > .PinturaNavMain {
  top: calc(4em + var(--editor-calculated-inset-top));
  bottom: calc(4em + var(--editor-calculated-inset-bottom));
}

.PinturaRoot[data-env~="landscape"][data-env~="has-limited-space"] > .PinturaNavMain {
  bottom: calc(1em + var(--editor-calculated-inset-bottom));
  align-items: flex-start;
}

.PinturaRoot[data-env~="landscape"] > .PinturaMain {
  grid-area: 2 / 1;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-toolbar-preference-bottom"] {
  grid-template-rows: auto -webkit-min-content;
  grid-template-rows: auto min-content;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-toolbar-preference-bottom"] > .PinturaNavTools {
  grid-row: 2;
  padding-top: 0;
  padding-bottom: 1em;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-toolbar-preference-bottom"] > .PinturaMain {
  grid-row: 1;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"] {
  grid-template-columns: 6em auto;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"]:not([data-env~="narrow"]) .PinturaNavGroupFloat {
  margin: 0 0 0 7em;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"] > .PinturaNavTools {
  grid-column: 1 / span 2;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"] > .PinturaMain {
  grid-column: 2;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"]:not([data-env~="has-navigation-preference-right"]) .PinturaUtilMain {
  padding-left: 0;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"]:not([data-env~="has-navigation-preference-right"]) .PinturaUtilFooter {
  padding-right: 1em;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"][data-env~="has-navigation-preference-right"] {
  grid-template-columns: auto 6em;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"][data-env~="has-navigation-preference-right"]:not([data-env~="narrow"]) .PinturaNavGroupFloat {
  margin: 0 7em 0 0;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"][data-env~="has-navigation-preference-right"] > .PinturaNavMain {
  left: auto;
  right: 1em;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"][data-env~="has-navigation-preference-right"] > .PinturaMain {
  grid-column: 1;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"][data-env~="has-navigation-preference-right"] .PinturaUtilMain {
  padding-right: 0;
}

.PinturaRoot[data-env~="landscape"][data-env~="has-navigation"][data-env~="has-navigation-preference-right"] .PinturaUtilFooter {
  padding-left: 1em;
}

.PinturaRoot[data-env~="portrait"] {
  grid-template-rows: -webkit-min-content auto -webkit-min-content;
  grid-template-rows: min-content auto min-content;
  grid-template-columns: auto;
}

.PinturaRoot[data-env~="portrait"] > * {
  grid-column: 1;
}

.PinturaRoot[data-env~="portrait"] > .PinturaNavTools {
  grid-row: 1;
  padding: .75em .75em 0;
}

.PinturaRoot[data-env~="portrait"] > .PinturaNavMain {
  grid-row: 3;
  justify-content: center;
  margin-bottom: .75em;
}

.PinturaRoot[data-env~="portrait"] > .PinturaNavMain .PinturaTabList {
  padding: 0 .875em;
}

.PinturaRoot[data-env~="portrait"] > .PinturaNavMain button + button {
  margin-left: .5em;
}

.PinturaRoot[data-env~="portrait"] > .PinturaNavMain[data-state~="overflows"] {
  overflow: visible;
}

.PinturaRoot[data-env~="portrait"] > .PinturaNavMain button {
  border-radius: var(--border-radius);
  flex: 1;
  justify-content: center;
  min-width: 4em;
  min-height: 4em;
}

.PinturaRoot[data-env~="portrait"] > .PinturaNavMain button span {
  margin-top: .5em;
  font-size: .6875em;
}

.PinturaRoot[data-env~="portrait"] > .PinturaNavMain button svg {
  width: 1em;
  margin-top: .25em;
}

.PinturaRoot[data-env~="portrait"] > .PinturaMain {
  grid-area: 2 / 1;
}

.PinturaRoot[data-env~="portrait"][data-env~="has-toolbar-preference-bottom"] {
  grid-template-rows: auto -webkit-min-content -webkit-min-content;
  grid-template-rows: auto min-content min-content;
}

.PinturaRoot[data-env~="portrait"][data-env~="has-toolbar-preference-bottom"] > .PinturaNavTools {
  grid-row: 3;
  padding: 0 .75em .75em;
}

.PinturaRoot[data-env~="portrait"][data-env~="has-toolbar-preference-bottom"] > .PinturaNavMain {
  grid-row: 2;
}

.PinturaRoot[data-env~="portrait"][data-env~="has-toolbar-preference-bottom"] > .PinturaMain {
  grid-row: 1;
}

.PinturaRoot[data-env~="portrait"]:not([data-env~="narrow"])[data-env~="has-navigation-preference-top"] {
  grid-template-rows: -webkit-min-content -webkit-min-content auto;
  grid-template-rows: min-content min-content auto;
}

.PinturaRoot[data-env~="portrait"]:not([data-env~="narrow"])[data-env~="has-navigation-preference-top"] > .PinturaMain {
  grid-row: 3;
}

.PinturaRoot[data-env~="portrait"]:not([data-env~="narrow"])[data-env~="has-navigation-preference-top"] > .PinturaNavMain {
  grid-row: 2;
  margin-top: .75em;
  margin-bottom: 0;
}

.PinturaRoot[data-env~="portrait"]:not([data-env~="narrow"])[data-env~="has-navigation-preference-top"][data-env~="has-toolbar-preference-bottom"] {
  grid-template-rows: -webkit-min-content auto -webkit-min-content;
  grid-template-rows: min-content auto min-content;
}

.PinturaRoot[data-env~="portrait"]:not([data-env~="narrow"])[data-env~="has-navigation-preference-top"][data-env~="has-toolbar-preference-bottom"] > .PinturaNavMain {
  grid-row: 1;
}

.PinturaRoot[data-env~="portrait"]:not([data-env~="narrow"])[data-env~="has-navigation-preference-top"][data-env~="has-toolbar-preference-bottom"] > .PinturaMain {
  grid-row: 2;
}

.PinturaRoot[data-env~="portrait"]:not([data-env~="narrow"])[data-env~="has-navigation-preference-top"][data-env~="has-toolbar-preference-bottom"] > .PinturaNavTools {
  grid-row: 3;
}

.PinturaRoot[data-env~="landscape"][data-env~="is-compact"] > .PinturaNavMain button {
  border-radius: var(--border-radius);
  flex-direction: row;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 6em;
  height: auto;
  min-height: auto;
  padding: .625em 0;
}

.PinturaRoot[data-env~="landscape"][data-env~="is-compact"] > .PinturaNavMain button span {
  text-align: left;
  margin: 0 .625em 0 0;
  font-size: .6875em;
  line-height: 1.2;
}

.PinturaRoot[data-env~="landscape"][data-env~="is-compact"] > .PinturaNavMain button svg {
  min-width: 1em;
  margin: 0 .5em 0 .625em;
}

.PinturaRoot[data-env~="landscape"][data-env~="is-compact"][data-env~="has-navigation"] {
  grid-template-columns: 8em auto;
}

.PinturaRoot[data-env~="landscape"][data-env~="is-compact"][data-env~="has-navigation"][data-env~="has-navigation-preference-right"] {
  grid-template-columns: auto 8em;
}

.PinturaRoot[data-env~="landscape"][data-env~="is-compact"][dir="rtl"] > .PinturaNavMain button {
  padding-left: .625em;
}

.PinturaRoot[data-env~="landscape"][data-env~="is-compact"][dir="rtl"] > .PinturaNavMain svg {
  margin-left: 0;
}

.PinturaRoot[data-env~="narrow"] .PinturaNavGroupFloat {
  margin: 0;
  position: static;
}

.PinturaRoot[data-env~="portrait"][data-env~="is-compact"] > .PinturaNavMain button {
  border-radius: 9999em;
  justify-content: center;
  min-width: 4em;
  min-height: 4em;
  padding: 0;
  font-size: .625em;
}

.PinturaRoot[data-env~="portrait"][data-env~="is-compact"] > .PinturaNavMain button span {
  visibility: hidden;
  margin: 0;
  font-size: 0;
}

.PinturaRoot[data-env~="portrait"][data-env~="is-compact"] > .PinturaNavMain button svg {
  width: 1.6em;
  margin-top: 0;
}

.PinturaRoot[data-env~="portrait"][data-env~="is-compact"] > .PinturaNavMain button svg [stroke-width] {
  stroke-width: .15em;
}

.PinturaRoot[data-env~="portrait"][data-env~="narrow"] {
  --nav-group-margin: .25em;
  grid-template-rows: -webkit-min-content auto -webkit-min-content;
  grid-template-rows: min-content auto min-content;
  grid-template-columns: auto;
}

.PinturaRoot[data-env~="portrait"][data-env~="narrow"] > * {
  grid-column: 1;
}

.PinturaRoot[data-env~="portrait"][data-env~="narrow"] .PinturaUtilFooter .PinturaControlList .PinturaControlListOption span, .PinturaRoot[data-env~="portrait"][data-env~="narrow"] .PinturaUtilFooter .PinturaControlList [role="tab"] span {
  font-size: .6875em;
}

.PinturaRoot[data-env~="portrait"][data-env~="narrow"] .PinturaToolbar .PinturaToolbarInner > * {
  margin: 0 .25em;
}

.PinturaRoot[data-env~="portrait"][data-env~="narrow"][data-env~="has-toolbar-preference-bottom"] {
  grid-template-rows: auto -webkit-min-content -webkit-min-content;
  grid-template-rows: auto min-content min-content;
}

.PinturaRoot[data-env~="overlay"] {
  grid-template-rows: auto !important;
  grid-template-columns: auto !important;
}

.PinturaRoot[data-env~="overlay"] .PinturaNav {
  z-index: 3;
}

.PinturaRoot[data-env~="overlay"] .PinturaMain {
  grid-area: 1 / 1;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilMain {
  z-index: -1;
  padding: 0;
  position: absolute;
  inset: 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter, .PinturaRoot[data-env~="overlay"] .PinturaUtilHeader {
  position: absolute;
  left: 0;
  right: 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilHeader {
  top: 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter {
  bottom: 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaNavMain {
  background: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaNavTools {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.PinturaRoot[data-env~="overlay"][data-env~="has-controlgroups-preference-top"] .PinturaUtilFooter {
  top: 0;
  bottom: auto;
}

.PinturaRoot[data-env~="overlay"][data-env~="has-toolbar-preference-bottom"] .PinturaNavTools {
  top: auto;
  bottom: 0;
}

.PinturaRoot[data-env~="has-swipe-navigation"] .PinturaUtilMain {
  padding-left: 2em;
  padding-right: 2em;
}

.PinturaRoot[data-env~="has-swipe-navigation"][data-env~="landscape"] .PinturaUtilMain[data-env~="has-navigation"] {
  padding-left: 0;
  padding-right: 2em;
}

.PinturaRoot[data-env~="has-swipe-navigation"][data-env~="landscape"] .PinturaUtilMain[data-env~="has-navigation"][data-env~="has-navigation-preference-right"] {
  padding-left: 2em;
  padding-right: 0;
}

.PinturaRoot[data-env*="is-disabled"], .PinturaRoot[data-env*="is-disabled"] * {
  pointer-events: none !important;
}

.PinturaRoot[data-env*="is-disabled"] {
  --color-primary: #b4b4b4;
  --color-primary-dark: #a0a0a0;
  --color-primary-text: #000;
  --color-secondary: #969696;
  --color-secondary-dark: #646464;
}

.PinturaRoot[data-env*="is-disabled"] .PinturaCanvas, .PinturaRoot[data-env*="is-disabled"] .PinturaColorPickerButton {
  filter: grayscale();
}

.PinturaRoot .PinturaEditorOverlay {
  z-index: 3;
  background: var(--color-background-50);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: .001dpcm) {
  @supports ((-webkit-appearance: none)) {
    .PinturaNav {
      will-change: transform;
    }
  }
}

.PinturaUtilPanel[data-util="frame"] .PinturaShapeStyleEditor {
  min-height: 3.375em;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption {
  border: 1px dashed var(--color-foreground-15);
  color: var(--color-foreground-70);
  margin: 1em 1em 0 0;
  padding: .125em;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption span {
  color: var(--color-foreground-90);
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption label {
  font-size: .75em;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption img, .PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption svg {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaUtilPanel[data-util="frame"] [data-selected="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.PinturaUtilPanel[data-util="frame"] [data-selected="true"] span {
  color: var(--color-foreground-90);
}

.PinturaUtilPanel[data-util="frame"] [data-layout="row"] > .PinturaRadioGroupOptions > li {
  margin: 0 .5em;
}

.PinturaUtilPanel[data-util="frame"] [data-layout="row"] > .PinturaRadioGroupOptions > li:first-child {
  margin-left: 0;
}

.PinturaUtilPanel[data-util="frame"] [data-layout="row"] > .PinturaRadioGroupOptions > li:last-child {
  margin-right: 0;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOptionGroupLabel {
  width: 1px;
  height: 1px;
  font-size: 0;
  position: absolute;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOptionGroup {
  flex-direction: column-reverse;
  display: flex;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption {
  cursor: var(--button-cursor);
  margin-bottom: 1em;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption span {
  text-align: center;
  padding: 0 1.5em;
  font-size: .625em;
  font-weight: 400;
  display: block;
}

.PinturaUtilPanel[data-util="frame"] [data-focus-visible] + label span {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption {
  width: 3em;
  height: 4em;
  position: relative;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption div {
  cursor: var(--button-cursor);
  border-color: currentColor;
  outline-color: currentColor;
  position: absolute;
}

.PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption div[slot] {
  justify-content: center;
  align-items: center;
  display: flex;
  inset: -1px;
  overflow: hidden;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="frame"] .PinturaUtilFooter > div {
  padding: 0;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption {
  width: 2.25em;
  height: 3em;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="frame"] .PinturaRadioGroupOption span {
  font-size: .5em;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="frame"] [data-layout="row"] > .PinturaRadioGroupOptions > li {
  margin: 0 .25em;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="frame"] [data-layout="row"] > .PinturaRadioGroupOptions > li:first-child {
  margin-left: 0;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="frame"] [data-layout="row"] > .PinturaRadioGroupOptions > li:last-child {
  margin-right: 0;
}

.PinturaUtilPanel[data-util="filter"] .PinturaUtilFooter {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.PinturaUtilPanel[data-util="filter"] .PinturaScrollable {
  width: 40em;
}

.PinturaUtilPanel[data-util="filter"] [data-layout="row"] > .PinturaRadioGroupOptions > li {
  margin: 0 .5em;
}

.PinturaUtilPanel[data-util="filter"] [data-layout="row"] > .PinturaRadioGroupOptions > li:first-child {
  margin-left: 0;
}

.PinturaUtilPanel[data-util="filter"] [data-layout="row"] > .PinturaRadioGroupOptions > li:last-child {
  margin-right: 0;
}

.PinturaUtilPanel[data-util="filter"] .PinturaRadioGroupOptionGroupLabel {
  pointer-events: none;
  width: 1px;
  height: 1px;
  font-size: 0;
  position: absolute;
}

.PinturaUtilPanel[data-util="filter"] .PinturaFilterPreview {
  border-radius: 0;
  transition: border-radius 1ms;
}

.PinturaUtilPanel[data-util="filter"] .PinturaFilterOption {
  border-radius: 0;
}

.PinturaUtilPanel[data-util="filter"] .PinturaRadioGroupOptions .PinturaRadioGroupOption:first-of-type .PinturaFilterPreview {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.PinturaUtilPanel[data-util="filter"] .PinturaRadioGroupOptions .PinturaRadioGroupOption:first-of-type .PinturaFilterOption {
  border-bottom-left-radius: var(--border-radius);
}

.PinturaUtilPanel[data-util="filter"] .PinturaRadioGroupOptions .PinturaRadioGroupOption:last-of-type .PinturaFilterPreview {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.PinturaUtilPanel[data-util="filter"] .PinturaRadioGroupOptions .PinturaRadioGroupOption:last-of-type .PinturaFilterOption {
  border-bottom-right-radius: var(--border-radius);
}

.PinturaUtilPanel[data-util="filter"] .PinturaRadioGroupOptionGroup {
  flex-direction: column-reverse;
  display: flex;
}

.PinturaUtilPanel[data-util="filter"] .PinturaFilterOption {
  cursor: var(--button-cursor);
  margin-bottom: 1em;
}

.PinturaUtilPanel[data-util="filter"] .PinturaFilterOption span {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-left: 1px;
  padding: 0 .3125em;
  font-size: .625em;
  font-weight: 400;
  line-height: 1.75;
  display: block;
  overflow: hidden;
}

.PinturaUtilPanel[data-util="filter"] .PinturaFilterPreview:before {
  transition: background-color var(--transition-duration-10),color var(--transition-duration-10);
}

.PinturaUtilPanel[data-util="filter"] [data-selected="true"] .PinturaFilterOption .PinturaFilterPreview {
  z-index: 1;
  position: relative;
}

.PinturaUtilPanel[data-util="filter"] [data-selected="true"] .PinturaFilterOption .PinturaFilterPreview:before {
  content: "";
  opacity: .35;
  border-radius: inherit;
  background-color: var(--color-primary);
  width: 100%;
  height: 100%;
  position: absolute;
}

.PinturaUtilPanel[data-util="filter"] [data-focus-visible] + label > .PinturaFilterOption span {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
  border-radius: .25em;
}

.PinturaUtilPanel[data-util="filter"] .PinturaFilterOption, .PinturaUtilPanel[data-util="filter"] .PinturaFilterPreview {
  width: 3.75em;
  height: 4.5em;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="filter"] .PinturaUtilFooter > div {
  padding: 0;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="filter"] .PinturaFilterOption, .PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="filter"] .PinturaFilterPreview {
  width: 2.875em;
  height: 3.5em;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="filter"] .PinturaFilterOption span {
  font-size: .5em;
}

.PinturaUtilPanel[data-util="crop"] .PinturaStage {
  touch-action: none;
}

.PinturaUtilPanel[data-util="crop"], .PinturaUtilPanel[data-util="crop"] .PinturaStage, .PinturaUtilPanel[data-util="crop"] .PinturaUtilMain {
  pointer-events: all;
}

.PinturaUtilPanel[data-util="crop"] .PinturaImageInfo {
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.PinturaUtilPanel[data-util="crop"] .PinturaButtonCenter {
  --size: 3em;
  width: var(--size);
  height: var(--size);
  z-index: 1;
  margin-top: calc(var(--size) * (-.5));
  margin-left: calc(var(--size) * (-.5));
  color: #000;
  -webkit-backdrop-filter: var(--backdrop-filter-bright);
  backdrop-filter: var(--backdrop-filter-bright);
  background: #fffc;
  border-radius: 50%;
  outline: none;
  line-height: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.PinturaUtilPanel[data-util="crop"] .PinturaButtonCenter[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot[data-env~="short"] .PinturaUtilPanel[data-util="crop"] .PinturaUtilFooter {
  padding-bottom: .5em;
}

.PinturaImageInfo, .PinturaRoot[data-env~="overlay"] .PinturaUtilPanel[data-util="crop"] .PinturaUtilFooter, .PinturaRoot[data-env~="overlay"] .PinturaUtilPanel[data-util="crop"] .PinturaUtilFooter > [slot]:empty {
  pointer-events: none;
}

.PinturaImageInfo p {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  font-family: Tahoma, Geneva, Verdana, sans-serif;
  font-size: .75em;
  line-height: 1;
}

.PinturaImageInfo:not([data-custom]) p {
  white-space: nowrap;
  contain: strict;
  width: 8em;
  height: 1.25em;
  overflow: hidden;
}

.PinturaUtilPanel[data-util="resize"] form {
  justify-content: center;
  padding: 0 1em;
  display: flex;
}

.PinturaUtilPanel[data-util="resize"] .PinturaFormInner {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.PinturaUtilPanel[data-util="resize"] .PinturaFormInner > button {
  margin-left: 1em;
  position: absolute;
  left: 100%;
}

.PinturaUtilPanel[data-util="resize"] .PinturaFieldsetInner {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.PinturaUtilPanel[data-util="resize"] .PinturaFieldsetInner > * {
  margin: .25em;
}

.PinturaUtilPanel[data-util="resize"] .PinturaResizeLabel {
  font-size: .75em;
}

.PinturaUtilPanel[data-util="resize"] .PinturaDropdownButton {
  background-color: var(--color-foreground-5);
  border-radius: var(--border-radius-round);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  transition: background-color var(--transition-duration-10);
  margin-left: .5em;
  margin-right: .5em;
}

.PinturaUtilPanel[data-util="resize"] .PinturaDropdownButton:hover {
  background-color: var(--color-foreground-10);
}

.PinturaUtilPanel[data-util="resize"] .PinturaDropdownButton .PinturaButtonLabel {
  font-variant-numeric: tabular-nums;
  padding: 0 1em;
  font-size: .75em;
  font-weight: 400;
  line-height: 2.65;
  display: block;
}

.PinturaUtilPanel[data-util="resize"] .PinturaDropdownButton .PinturaButtonLabel:after {
  content: "▼";
  pointer-events: none;
  margin-left: .75em;
  margin-right: -.25em;
  font-size: .6875em;
  position: relative;
  top: -.125em;
}

.PinturaUtilPanel[data-util="resize"] input[type="checkbox"] + label {
  cursor: pointer;
  outline: #0000;
  margin: 0 -.25em;
  padding: 0 .125em;
  display: block;
}

.PinturaUtilPanel[data-util="resize"] input[type="checkbox"][data-focus-visible] + label {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaInputDimension {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.PinturaInputDimension label {
  text-transform: uppercase;
  pointer-events: none;
  color: var(--color-foreground-80);
  z-index: 1;
  font-size: .75em;
  position: absolute;
  right: .625em;
}

.PinturaInputDimension button, .PinturaInputDimension input, .PinturaInputDimension label {
  font-size: .75em;
  font-weight: 400;
}

.PinturaInputDimension button, .PinturaInputDimension input {
  appearance: none;
  -moz-appearance: textfield;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 7em;
  box-shadow: none;
  border: 1px solid var(--color-foreground-80);
  transition: background-color var(--transition-duration-10) ease-in-out,color var(--transition-duration-10) ease-in-out,border-color var(--transition-duration-10) ease-in-out;
  outline: #0000;
  padding: .625em 0 .625em .625em;
}

.PinturaInputDimension button::-moz-selection {
  background-color: var(--color-foreground-20);
}

.PinturaInputDimension input::-moz-selection {
  background-color: var(--color-foreground-20);
}

.PinturaInputDimension button::selection, .PinturaInputDimension input::selection {
  background-color: var(--color-foreground-20);
}

.PinturaInputDimension button:hover, .PinturaInputDimension input:hover {
  background-color: var(--color-foreground-10);
}

.PinturaInputDimension button:focus, .PinturaInputDimension input:focus {
  border-color: var(--color-focus-100);
}

.PinturaInputDimension input {
  background-color: var(--color-foreground-5);
}

.PinturaInputDimension input:-moz-placeholder-shown + label {
  color: var(--color-foreground-20);
}

.PinturaInputDimension input:placeholder-shown + label {
  color: var(--color-foreground-20);
}

.PinturaInputDimension input::-moz-placeholder {
  color: var(--color-foreground-30);
}

.PinturaInputDimension input:-ms-placeholder-shown {
  color: var(--color-foreground-30);
}

.PinturaInputDimension input::placeholder {
  color: var(--color-foreground-30);
}

.PinturaInputDimension input[data-state="invalid"] {
  border-color: var(--color-error-75);
  box-shadow: inset 0 0 .25em var(--color-error-25),0 0 .25em var(--color-error-50);
}

.PinturaInputDimension button {
  width: 10em;
  min-height: 2.65em;
}

.PinturaInputDimension input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.PinturaInputDimension input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.PinturaInputDimension input::-ms-clear {
  display: none;
}

.PinturaRoot[dir="rtl"] .PinturaInputDimension label {
  left: .625em;
  right: auto;
}

.PinturaRoot[dir="rtl"] .PinturaInputDimension input {
  text-align: right;
  padding-left: 0;
  padding-right: .625em;
}

.PinturaUtilPanel[data-util="fill"] [data-layout="row"] > .PinturaRadioGroupOptions > li {
  margin: 0 .25em;
}

.PinturaUtilPanel[data-util="fill"] [data-layout="row"] > .PinturaRadioGroupOptions > li:first-child {
  margin-left: 0;
}

.PinturaUtilPanel[data-util="fill"] [data-layout="row"] > .PinturaRadioGroupOptions > li:last-child {
  margin-right: 0;
}

.PinturaUtilPanel[data-util="fill"] .PinturaRadioGroupOption {
  width: 3em;
  height: 4em;
  position: relative;
}

.PinturaUtilPanel[data-util="fill"] .PinturaFillTile {
  width: 100%;
  height: 100%;
  position: absolute;
}

.PinturaUtilPanel[data-util="fill"] .PinturaFillTile[data-transparent="true"] {
  background-color: #fff;
  background-image: var(--pattern-transparent);
  border-radius: calc(var(--border-radius) + 1px);
}

.PinturaUtilPanel[data-util="fill"] .PinturaFillTile div, .PinturaUtilPanel[data-util="fill"] .PinturaFillTile img {
  cursor: var(--button-cursor);
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--border-radius);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaUtilPanel[data-util="fill"] .PinturaFillTile:after {
  content: "";
  z-index: 3;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  border-radius: var(--border-radius);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaUtilPanel[data-util="fill"] .PinturaRadioGroupOption[data-selected="true"] .PinturaFillTile:after {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5),inset 0 0 0 4px var(--color-primary),inset 0 0 0 5px var(--color-foreground-5);
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="fill"] .PinturaUtilFooter > div {
  padding: 0;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="fill"] .PinturaRadioGroupOption {
  width: 2.25em;
  height: 3em;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="fill"] .PinturaRadioGroupOption span {
  font-size: .5em;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="fill"] [data-layout="row"] > .PinturaRadioGroupOptions > li {
  margin: 0 .175em;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="fill"] [data-layout="row"] > .PinturaRadioGroupOptions > li:first-child {
  margin-left: 0;
}

.PinturaRoot[data-env~="is-compact"] .PinturaUtilPanel[data-util="fill"] [data-layout="row"] > .PinturaRadioGroupOptions > li:last-child {
  margin-right: 0;
}

.PinturaTabPanels {
  flex: 1;
  grid-template-columns: 1fr;
  display: grid;
}

.PinturaTabPanel {
  grid-row-start: 1;
  grid-column-start: 1;
  min-width: 0;
  position: relative;
}

.PinturaTabPanel:not([aria-hidden="true"]) {
  z-index: 2;
  outline: #0000;
}

.PinturaTabPanel[aria-hidden="true"] {
  z-index: 1;
  pointer-events: none;
  display: block !important;
}

.PinturaTabPanel[data-inert="true"] {
  visibility: hidden;
}

@supports not (aspect-ratio: 1) {
  .PinturaTabPanel {
    overflow-x: hidden;
  }
}

.PinturaTabList {
  justify-content: center;
  display: flex;
}

.PinturaTabList button {
  cursor: var(--button-cursor);
  -webkit-tap-highlight-color: transparent;
  outline: #0000;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.PinturaTabList button > * {
  transition: filter var(--transition-duration-10) ease-out;
}

.PinturaTabList button[disabled] > * {
  filter: var(--filter-disabled);
}

.PinturaScrollable {
  --scrollable-feather-start-opacity: 0;
  --scrollable-feather-end-opacity: 0;
  --scrollable-feather-size: 2em;
  contain: paint;
  overflow: hidden;
}

.PinturaScrollable:focus {
  outline: #0000;
}

.PinturaScrollable > div {
  vertical-align: top;
  display: inline-flex;
  position: relative;
}

.PinturaScrollable {
  touch-action: none;
}

.PinturaScrollable[data-direction="x"] {
  --mask-angle: 90deg;
  max-width: 100%;
}

.PinturaScrollable[data-direction="y"] {
  --mask-angle: 180deg;
  max-height: 100%;
}

.PinturaScrollable[data-state~="overflows"] {
  -webkit-mask: linear-gradient(var(--mask-angle),rgba(0,0,0,var(--scrollable-feather-start-opacity)),#000 var(--scrollable-feather-size),#000 calc(100% - var(--scrollable-feather-size)),rgba(0,0,0,var(--scrollable-feather-end-opacity)));
  -webkit-mask: linear-gradient(var(--mask-angle),rgba(0,0,0,var(--scrollable-feather-start-opacity)),#000 var(--scrollable-feather-size),#000 calc(100% - var(--scrollable-feather-size)),rgba(0,0,0,var(--scrollable-feather-end-opacity)));
  mask: linear-gradient(var(--mask-angle),rgba(0,0,0,var(--scrollable-feather-start-opacity)),#000 var(--scrollable-feather-size),#000 calc(100% - var(--scrollable-feather-size)),rgba(0,0,0,var(--scrollable-feather-end-opacity)));
}

.PinturaScrollable[data-state~="scrolling"] > div * {
  pointer-events: none;
}

.PinturaUtilPanel {
  z-index: 1;
  contain: layout size;
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  height: 100%;
  display: flex;
  position: relative;
}

.PinturaUtilPanel, .PinturaUtilPanel > * {
  padding-top: .5em;
  padding-bottom: .5em;
}

.PinturaButton {
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  cursor: var(--button-cursor);
  flex-shrink: 0;
}

.PinturaButton > span {
  vertical-align: top;
  align-items: center;
  min-height: 1em;
  display: inline-flex;
}

.PinturaButton svg + .PinturaButtonLabel {
  margin-left: .5em;
}

.PinturaButton[disabled] {
  cursor: default;
  filter: var(--filter-disabled);
}

.PinturaButtonInner {
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

.PinturaButton:not(.PinturaButtonIconOnly) svg:first-of-type {
  margin-left: -.25em;
}

.PinturaRoot[dir="rtl"] .PinturaButton:not(.PinturaButtonIconOnly) svg:first-of-type {
  margin-right: -.25em;
}

.PinturaRoot[dir="rtl"] .PinturaButton svg + .PinturaButtonLabel {
  margin-left: 0;
  margin-right: 1em;
}

.PinturaProgressIndicator {
  width: 1.25em;
  height: 1.25em;
  display: block;
  position: relative;
}

.PinturaProgressIndicator svg {
  pointer-events: none;
  vertical-align: top;
}

.PinturaProgressIndicator .PinturaProgressIndicatorFill {
  stroke-dashoffset: 0;
}

.PinturaProgressIndicator[data-status="busy"] svg {
  animation: 1s linear infinite image_editor_spin;
}

.PinturaProgressIndicator[data-status="busy"] .PinturaProgressIndicatorFill {
  stroke-dashoffset: -26.5px;
  stroke-dasharray: 26.5 53;
  transition: stroke-dashoffset .5s linear, stroke-dasharray .5s linear;
}

@keyframes image_editor_spin {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .PinturaRoot[data-env~="is-ios"] .PinturaProgressIndicator svg {
    transform-origin: 49% 49%;
  }
}

.PinturaInputForm {
  opacity: 0;
  cursor: auto;
  z-index: 2147483647;
  --width: 30em;
}

.PinturaInputForm:not([data-stick="true"]) {
  width: var(--width);
  bottom: 7.5em;
  left: calc(50% - var(--width) / 2);
  box-shadow: 0 .25em .5em -.5em #000000bf,inset 0 0 0 1px var(--color-foreground-5);
  border-radius: var(--border-radius);
  background-color: var(--color-background-95);
  position: absolute;
}

@media (max-width: 34em) {
  .PinturaInputForm:not([data-stick="true"]) {
    width: auto;
    left: 2em;
    right: 2em;
  }
}

.PinturaInputForm[data-stick="true"] {
  outline: 1px solid var(--color-foreground-15);
  background-color: var(--color-background-100);
  transition: opacity .15s .25s;
  position: absolute;
  left: 0;
  right: 0;
}

.PinturaInputForm[data-stick="true"] > .PinturaInputFormInner {
  background-color: var(--color-foreground-3);
}

.PinturaInputFormInner > .PinturaButton {
  color: var(--color-foreground-100);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  border-radius: 9999em;
}

.PinturaInputFormInner > .PinturaButton:first-of-type {
  left: 1em;
}

.PinturaInputFormInner > .PinturaButton:last-of-type {
  color: var(--color-primary-text);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  right: 1rem;
}

.PinturaInputFormInner > .PinturaButton:not(.PinturaButtonIconOnly) .PinturaButtonInner {
  padding: 0 .875em;
}

.PinturaInputFormInner > .PinturaButton .PinturaButtonIcon {
  width: .875em;
  height: .875em;
}

.PinturaInputFormInner > .PinturaButton.PinturaButtonIconOnly {
  width: 1.875em;
  height: 1.875em;
}

.PinturaInputFormInner > .PinturaButton .PinturaButtonLabel {
  font-size: .75em;
}

.PinturaInputFormInner > .PinturaButton .PinturaButtonInner {
  justify-content: center;
  line-height: 2;
  display: flex;
}

.PinturaInputFormInner {
  padding-top: 1em;
  padding-bottom: 3.5em;
}

.PinturaInputFormInner > .PinturaButton {
  position: absolute;
  bottom: 1em;
}

.PinturaInputFormFields textarea:only-child {
  height: 5em;
  -webkit-mask: linear-gradient(0deg, #0000, #000 1em);
  mask: linear-gradient(0deg, #0000, #000 1em);
}

.PinturaInputFormFields textarea:only-child::-webkit-scrollbar {
  cursor: pointer;
  width: 1em;
}

.PinturaInputFormFields textarea:only-child::-webkit-scrollbar-track {
  background: none;
}

.PinturaInputFormFields textarea:only-child::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-clip: padding-box;
  background-color: var(--color-foreground-70);
  border: .25em solid #0000;
  border-radius: 9999em;
}

.PinturaInputFormFields input:only-child, .PinturaInputFormFields textarea:only-child {
  background: none;
  width: 100%;
  padding: 0 1em .5em;
  display: block;
}

.PinturaInputForm input, .PinturaInputForm textarea {
  box-sizing: border-box;
  resize: none;
  color: var(--color-foreground-100);
  border: none;
  outline: #0000;
  font-size: .875em;
}

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

.PinturaModalBodyLock .PinturaInputForm {
  margin-top: -50px;
}

.PinturaInputForm[data-layout="row"] {
  --width: 30em;
  width: var(--width);
  border-radius: 9999em;
  max-width: calc(100% - 2em);
}

.PinturaInputForm[data-layout="row"] .PinturaInputFormFields {
  flex: 1;
}

.PinturaInputForm[data-layout="row"] .PinturaInputFormInner {
  padding: .5em;
  display: flex;
}

.PinturaInputForm[data-layout="row"] .PinturaInputFormInner input {
  flex: 1;
  padding: 0 .5em;
  font-size: .8125em;
  line-height: 1.75;
}

.PinturaInputForm[data-layout="row"] .PinturaInputFormInner .PinturaButton:first-child {
  margin-right: 0;
}

.PinturaInputForm[data-layout="row"] .PinturaInputFormInner .PinturaButton {
  position: static;
}

.PinturaInputForm[data-layout="row"] .PinturaInputFormInner .PinturaButtonIconOnly {
  width: 1.5em;
  height: 1.5em;
}

.PinturaInputForm[data-layout="row"] .PinturaInputFormInner .PinturaButtonLabel {
  font-size: .625em;
}

.PinturaUtilMain {
  touch-action: none;
  min-height: 1px;
  padding-left: 1em;
  padding-right: 1em;
}

.PinturaUtilMain, .PinturaUtilMain > [slot] {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.PinturaUtilMain > [slot] {
  align-items: center;
}

.PinturaUtilFooter > [slot]:empty {
  min-height: 1em;
}

.PinturaUtilFooter > [slot] {
  pointer-events: all;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
  display: flex;
}

.PinturaUtilFooter .PinturaControlPanel .PinturaImageButtonList, .PinturaUtilFooter .PinturaShapeStyleList {
  align-items: flex-start;
  min-height: 3.5em;
}

.PinturaUtilFooter .PinturaControlList [role="tab"][aria-selected="true"] {
  background-color: var(--color-foreground-10);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label, .PinturaUtilFooter .PinturaControlList [role="tab"] {
  white-space: nowrap;
  border-radius: var(--border-radius-round);
  min-height: 1.75em;
  transition: background-color var(--transition-duration-10) ease-out,color var(--transition-duration-10) ease-out,filter var(--transition-duration-25) ease-out;
  box-shadow: inset 0 0 0 1px var(--color-foreground-0);
  cursor: var(--button-cursor);
  flex-direction: row;
  padding: 0 .75em;
  line-height: 1;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label span, .PinturaUtilFooter .PinturaControlList [role="tab"] span {
  font-size: .75em;
  font-weight: 400;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label svg, .PinturaUtilFooter .PinturaControlList [role="tab"] svg {
  width: .875em;
  font-size: .875em;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label svg:only-child, .PinturaUtilFooter .PinturaControlList [role="tab"] svg:only-child {
  margin-left: -.25em;
  margin-right: -.25em;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label svg:not(:only-child), .PinturaUtilFooter .PinturaControlList [role="tab"] svg:not(:only-child) {
  margin-left: -.25em;
  margin-right: .375em;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label:hover, .PinturaUtilFooter .PinturaControlList [role="tab"]:hover {
  box-shadow: inset 0 0 0 1px var(--color-foreground-10);
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label[data-focus-visible], .PinturaUtilFooter .PinturaControlList [role="tab"][data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaUtilFooter .PinturaControlListOption [slot], .PinturaUtilFooter .PinturaControlListOption label {
  flex-direction: row;
  align-items: center;
  display: flex;
}

.PinturaUtilFooter .PinturaControlListOption[data-selected="true"] label {
  background-color: var(--color-foreground-10);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaUtilFooter .PinturaControlListOption input[data-focus-visible] + label {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaUtilFooter .PinturaControlListOption input[disabled] + label {
  filter: var(--filter-disabled);
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption + .PinturaControlListOption, .PinturaUtilFooter .PinturaControlList > button + button {
  margin-left: .5em;
}

.PinturaUtilFooter .PinturaControlPanels {
  flex: auto;
  grid-template-columns: 1fr;
  width: 40em;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
}

.PinturaUtilFooter .PinturaControlPanel {
  visibility: visible;
  opacity: 1;
  grid-row-start: 1;
  grid-column-start: 1;
  max-width: 100%;
  overflow: hidden;
}

.PinturaUtilFooter .PinturaControlPanel[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition-delay: 0s;
  display: block !important;
}

.PinturaUtilFooter .PinturaControlList[data-layout="compact"] > * + * {
  margin-left: -1px;
}

.PinturaUtilFooter .PinturaControlList[data-layout="compact"] > [role="tab"] {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  border-radius: 0;
  padding-left: .625em;
  padding-right: .625em;
}

.PinturaUtilFooter .PinturaControlList[data-layout="compact"] > [role="tab"]:only-child {
  border-radius: var(--border-radius-round);
}

.PinturaUtilFooter .PinturaControlList[data-layout="compact"] > [role="tab"]:first-child:not(:only-child) {
  border-top-left-radius: var(--border-radius-round);
  border-bottom-left-radius: var(--border-radius-round);
  padding-left: .75em;
}

.PinturaUtilFooter .PinturaControlList[data-layout="compact"] > [role="tab"]:last-child:not(:only-child) {
  border-top-right-radius: var(--border-radius-round);
  border-bottom-right-radius: var(--border-radius-round);
  padding-right: .75em;
}

@supports not (aspect-ratio: 1) {
  .PinturaControlPanel {
    overflow-x: hidden;
  }
}

.PinturaRoot[data-env~="is-animated"] .PinturaUtilFooter .PinturaControlPanel {
  transition: opacity var(--transition-duration-25) ease-in-out,visibility var(--transition-duration-25) linear;
  transition-delay: .1s;
}

.PinturaRoot[data-env~="has-controlgroups-preference-top"] .PinturaUtilHeader {
  order: 1;
}

.PinturaRoot[data-env~="has-controlgroups-preference-top"] .PinturaUtilFooter {
  order: 2;
}

.PinturaRoot[data-env~="has-controlgroups-preference-top"] .PinturaUtilMain {
  order: 3;
}

.PinturaRoot[data-env~="has-controltabs-preference-bottom"] .PinturaUtilFooter .PinturaControlPanels {
  order: -1;
}

.PinturaRoot[data-env~="has-controltabs-preference-bottom"] .PinturaUtilFooter .PinturaRangeInput .PinturaRangeInputReset {
  top: 0;
  bottom: auto;
}

.PinturaRoot[data-env~="has-controltabs-preference-bottom"] .PinturaUtilFooter .PinturaControlPanel .PinturaShapePresetsGrouped {
  padding-bottom: .75em;
}

.PinturaRoot[data-env~="has-controltabs-preference-top"] .PinturaUtilFooter .PinturaControlPanels {
  order: 1;
}

.PinturaRoot[data-env~="has-controltabs-preference-top"] .PinturaUtilFooter .PinturaRangeInput .PinturaRangeInputReset {
  top: auto;
  bottom: 0;
}

.PinturaRoot[data-env~="has-controltabs-preference-top"] .PinturaUtilFooter .PinturaControlPanel .PinturaShapePresetsGrouped {
  padding-top: .75em;
}

.PinturaRoot[data-env~="has-controltabs-preference-top"] .PinturaUtilFooter .PinturaControlPanel .PinturaImageButtonList, .PinturaRoot[data-env~="has-controltabs-preference-top"] .PinturaUtilFooter .PinturaShapeStyleList {
  align-items: flex-end;
}

.PinturaRoot[data-env~="has-controltabs-preference-top"] .PinturaUtilFooter .PinturaShapeStyleLabel {
  order: 1;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter {
  margin: .75em 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlPanels {
  max-width: 24em;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlList {
  margin-top: 1em;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlList > button + button {
  margin-left: 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlList [role="tab"] span {
  font-size: .75em;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlList [role="tab"] {
  background-color: var(--color-background-50);
  -webkit-backdrop-filter: var(--backdrop-filter-bright);
  backdrop-filter: var(--backdrop-filter-bright);
  box-shadow: inset 0 0 0 1px var(--color-background-15),0 .0625em .125em #00000040,0 .125em .35em #00000059;
  border-radius: 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlList [role="tab"]:first-child {
  border-top-left-radius: var(--border-radius-round);
  border-bottom-left-radius: var(--border-radius-round);
  padding-left: .875em;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlList [role="tab"]:last-child {
  border-top-right-radius: var(--border-radius-round);
  border-bottom-right-radius: var(--border-radius-round);
  padding-right: .875em;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlList button:not([aria-selected="true"]) span {
  color: var(--color-foreground-40);
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaControlPanels {
  background-color: var(--color-background-50);
  -webkit-backdrop-filter: var(--backdrop-filter-bright);
  backdrop-filter: var(--backdrop-filter-bright);
  border-radius: var(--border-radius-round);
  box-shadow: inset 0 0 0 1px var(--color-background-15),0 .0625em .125em #00000040,0 .125em .35em #00000059;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaRangeInput {
  height: 1.5em;
  margin-top: 0;
}

.PinturaRoot[data-env~="overlay"] .PinturaUtilFooter .PinturaRangeInputReset {
  opacity: 0;
}

.PinturaRoot[dir="rtl"] .PinturaUtilFooter .PinturaControlListOption [slot], .PinturaRoot[dir="rtl"] .PinturaUtilFooter .PinturaControlListOption label {
  flex-direction: row-reverse;
}

.PinturaRoot[dir="rtl"] .PinturaUtilFooter .PinturaControlList .PinturaControlListOption label svg:not(:only-child), .PinturaRoot[dir="rtl"] .PinturaUtilFooter .PinturaControlList [role="tab"] svg:not(:only-child) {
  margin-left: .375em;
  margin-right: -.25em;
}

.PinturaRangeInput {
  touch-action: none;
  --range-input-feather-left: 2em;
  --range-input-feather-right: 2em;
  --range-input-mask-from: 0%;
  --range-input-mask-to: 100%;
  --range-input-mask-color: #00000040;
  --range-input-line-color: var(--color-foreground-15);
  outline: #0000;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 2em);
  max-width: 24em;
  height: 3.5em;
  margin: auto;
  display: flex;
  position: relative;
}

.PinturaRangeInput[data-focus-visible]:after {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
  content: "";
  border-radius: .25em;
  height: 2em;
  position: absolute;
  top: calc(50% - 1em);
  left: 0;
  right: 0;
}

.PinturaRangeInputInner {
  contain: strict;
  width: 100%;
  height: 100%;
  -webkit-mask: linear-gradient(90deg,transparent 0,#000 var(--range-input-feather-left),#000 calc(50% - 3em),transparent 50%,#000 calc(50% + 3em),#000 calc(100% - var(--range-input-feather-right)),transparent);
  -webkit-mask: linear-gradient(90deg,transparent 0,#000 var(--range-input-feather-left),#000 calc(50% - 3em),transparent 50%,#000 calc(50% + 3em),#000 calc(100% - var(--range-input-feather-right)),transparent);
  mask: linear-gradient(90deg,transparent 0,#000 var(--range-input-feather-left),#000 calc(50% - 3em),transparent 50%,#000 calc(50% + 3em),#000 calc(100% - var(--range-input-feather-right)),transparent);
  position: relative;
  overflow: hidden;
}

.PinturaRangeInputMeter {
  height: 100%;
}

.PinturaRangeInput .PinturaRangeInputMeter svg {
  pointer-events: none;
  fill: currentColor;
  display: block;
}

.PinturaRangeInput > .PinturaRangeInputValue {
  z-index: 1;
  pointer-events: none;
  contain: strict;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  width: 3.5em;
  height: 1.5em;
  font-family: Tahoma, Geneva, Verdana, sans-serif;
  font-size: .75em;
  position: absolute;
  top: calc(50% - .6875em);
  left: calc(50% - 1.75em);
  overflow: hidden;
}

.PinturaRangeInput > .PinturaRangeInputReset {
  z-index: 1;
  width: 2em;
  transition: opacity var(--transition-duration-25);
  opacity: .35;
  cursor: var(--button-cursor);
  outline: #0000;
  margin-top: .125em;
  padding: 0;
  position: absolute;
  top: 0;
  left: calc(50% - 1.0625em);
  overflow: hidden;
  color: #0000 !important;
}

.PinturaRangeInput > .PinturaRangeInputReset:hover {
  opacity: .5;
}

.PinturaRangeInput > .PinturaRangeInputReset[data-focus-visible] {
  opacity: 1;
}

.PinturaRangeInput > .PinturaRangeInputReset[data-focus-visible]:before {
  content: "";
  pointer-events: none;
  z-index: 2;
  background-color: var(--color-focus-50);
  width: 1em;
  height: 1em;
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
  border-radius: .25em;
  position: absolute;
  top: calc(50% - .5em);
  left: calc(50% - .5em);
}

.PinturaRangeInput > .PinturaRangeInputReset[disabled] {
  opacity: .15;
}

.PinturaRangeInput > .PinturaRangeInputReset:after {
  content: "";
  background: var(--color-foreground-100);
  width: 1px;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 50%;
}

.PinturaRangeInputInner[data-value-limited] svg {
  -webkit-mask: linear-gradient(90deg,var(--range-input-mask-color) var(--range-mask-from),#000 var(--range-mask-from),#000 var(--range-mask-to),var(--range-input-mask-color) var(--range-mask-to));
  -webkit-mask: linear-gradient(90deg,var(--range-input-mask-color) var(--range-mask-from),#000 var(--range-mask-from),#000 var(--range-mask-to),var(--range-input-mask-color) var(--range-mask-to));
  mask: linear-gradient(90deg,var(--range-input-mask-color) var(--range-mask-from),#000 var(--range-mask-from),#000 var(--range-mask-to),var(--range-input-mask-color) var(--range-mask-to));
}

.PinturaRangeInputInner[data-value-limited] svg rect {
  x: var(--range-mask-from);
  width: calc(var(--range-mask-to) - var(--range-mask-from));
  fill: var(--range-input-line-color);
}

.PinturaRadioGroup .PinturaRadioGroupOptions {
  flex-direction: column;
  display: flex;
}

.PinturaRadioGroup .PinturaRadioGroupOptionGroup + .PinturaRadioGroupOptionGroup {
  margin-top: .5em;
}

.PinturaRadioGroup .PinturaRadioGroupOption[data-hidden="true"] {
  display: none;
}

.PinturaRadioGroup[data-layout="row"] .PinturaRadioGroupOptions {
  flex-direction: row;
}

.PinturaRadioGroup label {
  -webkit-tap-highlight-color: transparent;
}

.PinturaPresetListFilter .PinturaRadioGroupOptions {
  justify-content: space-evenly;
  padding: .625em 0 .3125em;
}

.PinturaPresetListFilter .PinturaRadioGroupOptions label {
  cursor: pointer;
  display: block;
}

.PinturaPresetListFilter + .PinturaOptionsList {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.PinturaToolbar {
  justify-content: center;
  margin-left: 1em;
  margin-right: 1em;
  display: flex;
}

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

.PinturaToolbar[data-layout="compact"] .PinturaToolbarContentWide, .PinturaToolbar[data-overflow="overflow"] .PinturaToolbarContentOptional {
  display: none;
}

.PinturaToolbar .PinturaButton {
  border-radius: var(--border-radius-round);
  transition: background-color var(--transition-duration-10) ease-out,color var(--transition-duration-10) ease-out,box-shadow var(--transition-duration-10) ease-out;
  outline: #0000;
  padding: .3125em .75em;
  line-height: 1.1;
}

.PinturaToolbar .PinturaButton:hover {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaToolbar .PinturaButton[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaToolbar .PinturaButton .PinturaButtonIcon {
  width: 1em;
}

.PinturaToolbar .PinturaButtonLabel {
  font-size: .75em;
}

.PinturaToolbar .PinturaPanel {
  z-index: 3;
}

.PinturaToolbar .PinturaToolbarInner > * {
  margin: 0 .5em;
}

.PinturaShapeStyleEditor {
  grid-template-columns: 1fr;
  display: grid;
  position: relative;
}

.PinturaShapeStyleEditor > div {
  grid-row-start: 1;
  grid-column-start: 1;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  display: flex;
  overflow: hidden;
}

.PinturaShapeStyleEditorOverflow > div {
  justify-content: flex-start;
  overflow: visible;
}

.PinturaShapeStyleEditorOverflow .PinturaShapeStyleList {
  min-height: auto;
  margin-left: 1em;
}

.PinturaShapeStyleEditorOverflow .PinturaShapeStyle {
  --control-height: 1.75em;
}

.PinturaShapeStyles {
  position: relative;
}

.PinturaShapeStyles:not([data-state~="overflows"]) {
  justify-content: center;
  display: flex;
}

.PinturaShapeStyleList {
  display: flex;
}

.PinturaShapeStyleList .PinturaButton, .PinturaShapeStyleList .PinturaInput {
  outline: #0000;
}

.PinturaShapeStyleList .PinturaInput {
  padding: 0 0 0 .625em;
  font-size: .75em;
  line-height: 2.25;
}

.PinturaShapeStyleList .PinturaShapeStyleLabel {
  text-transform: lowercase;
  pointer-events: none;
  text-align: center;
  color: var(--color-foreground-50);
  white-space: nowrap;
  padding: 0 .75em;
  font-size: .625em;
  font-weight: 300;
  line-height: 1.75;
}

.PinturaShapeStyleList .PinturaShapeStyle {
  border-radius: var(--border-radius-round);
}

.PinturaShapeStyleList .PinturaShapeStyle + .PinturaShapeStyle {
  margin-left: 1em;
}

.PinturaShapeStyle {
  --control-height: 1.5em;
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.PinturaShapeStyle .PinturaPanelButton {
  border-radius: inherit;
}

.PinturaShapeStyle > .PinturaButton:hover, .PinturaShapeStyle > .PinturaButton[data-focus-visible] {
  z-index: 1;
  position: relative;
}

.PinturaShapeStyle .PinturaColorPickerButton .PinturaButtonLabel {
  border-radius: inherit;
  display: block;
}

.PinturaShapeStyle .PinturaColorPickerButton {
  justify-content: center;
  display: flex;
}

.PinturaShapeStyle .PinturaColorPreview {
  border-radius: inherit;
  background-color: #fff;
  background-size: 4px;
  width: 1.5em;
  height: 1.5em;
}

.PinturaShapeStyle .PinturaColorPreview span {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaShapeStyle [data-focus-visible] .PinturaColorPreview span:before {
  border-radius: inherit;
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
  content: "";
  z-index: 1;
  position: absolute;
  inset: 0;
}

.PinturaShapeStyle > .PinturaColorPickerButtonStroke .PinturaColorPreview {
  -webkit-mask: radial-gradient(circle, #0000 5.5px, #000 6px) 0 0 / cover;
  mask: radial-gradient(circle, #0000 5.5px, #000 6px) 0 0 / cover;
}

.PinturaShapeStyle > .PinturaColorPickerButtonStroke .PinturaColorPreview span:after {
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--color-foreground-5);
  content: "";
  position: absolute;
  inset: 6px;
}

.PinturaShapeStyle > .PinturaSliderButton .PinturaButtonLabel, .PinturaShapeStyle > .PinturaSliderButton .PinturaButtonLabelPrefix {
  font-size: .6875em;
  line-height: 2.25;
  display: block;
}

.PinturaShapeStyle > .PinturaSliderButton .PinturaButtonLabelPrefix {
  color: var(--color-foreground-40);
  margin-right: -.25em;
  padding-left: .625em;
}

.PinturaShapeStyle > .PinturaSliderButton .PinturaButtonLabel {
  padding: 0 1em;
}

.PinturaShapeStyle > .PinturaDropdownButton .PinturaButtonLabel, .PinturaShapeStyle > .PinturaRadioGroup .PinturaButtonLabel, .PinturaShapeStyle > .PinturaRadioGroupOption label {
  padding: 0 1em;
  font-size: .6875em;
  line-height: 2.25;
  display: block;
}

.PinturaShapeStyle .PinturaButton:not(.PinturaColorPickerButton)[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapeStyle .PinturaInputField {
  width: 3em;
  height: 2em;
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  border-radius: var(--border-radius);
  padding: 0 .75em;
  line-height: 2em;
}

.PinturaShapeStyle .PinturaPromptInputGroup {
  align-items: flex-start;
  display: flex;
  position: relative;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaInput {
  width: 18em;
  padding: 0;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaInput input {
  padding-right: 2em;
}

.PinturaShapeStyle .PinturaPromptInputGroup > .PinturaButton:not(.PinturaButtonIconOnly) {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  background-color: var(--color-foreground-10);
  border-radius: var(--border-radius);
  margin-left: .5em;
  padding: 0 1em;
  font-size: .6875em;
  line-height: 2.125;
  display: block;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaButtonIconOnly {
  width: 1.75em;
  height: 1.75em;
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  border-radius: var(--border-radius);
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaButtonIconOnly svg {
  width: .875em;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaProgressIndicator {
  pointer-events: none;
  width: .875em;
  height: .875em;
  position: absolute;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaProgressIndicator svg {
  width: .875em;
}

.PinturaShapeStyle .PinturaPromptInputWrapper {
  align-items: center;
  display: flex;
  position: relative;
}

.PinturaShapeStyle .PinturaPromptInputWrapper .PinturaProgressIndicator {
  right: .3125em;
}

.PinturaShapeStyle .PinturaGenerateMoreButtonWrapper {
  justify-content: center;
  align-items: center;
  margin-top: .3125em;
  margin-left: .75em;
  display: flex;
  position: relative;
}

.PinturaShapeStyle .PinturaPromptOptions {
  align-items: center;
  margin-left: .5em;
  display: flex;
}

.PinturaShapeStyle .PinturaPromptOption {
  border-radius: .5em;
  margin-left: .5em;
  padding: 0;
  position: relative;
}

.PinturaShapeStyle .PinturaPromptOption:after, .PinturaShapeStyle .PinturaPromptOption img {
  pointer-events: none;
  border-radius: .5em;
}

.PinturaShapeStyle .PinturaPromptOption:after {
  content: "";
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  position: absolute;
  inset: 0;
}

.PinturaShapeStyle .PinturaPromptOption img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 2.5em;
  height: 2.5em;
  display: block;
}

.PinturaShapeStyle > .PinturaDropdownButton {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  transition: background-color var(--transition-duration-10);
}

.PinturaShapeStyle > .PinturaDropdownButton:hover {
  background-color: var(--color-foreground-10);
}

.PinturaShapeStyle > .PinturaDropdownButton .PinturaButtonLabel:after, .PinturaShapeStyle > .PinturaDropdownButton .PinturaComboBox:after {
  content: "▼";
  pointer-events: none;
  margin-left: .75em;
  margin-right: -.25em;
  font-size: .6875em;
  position: relative;
  top: -.125em;
}

.PinturaShapeStyle > .PinturaDropdownButton .PinturaComboBox:after {
  margin-left: .375em;
  font-size: .472656em;
  top: 0;
}

.PinturaShapeStyle .PinturaComboBox {
  padding-right: .75em;
}

.PinturaShapeStyle .PinturaComboBox .PinturaInput {
  padding-left: 0;
}

.PinturaShapeStyle .PinturaComboBox .PinturaInput input {
  box-shadow: none;
}

.PinturaShapeStyle .PinturaComboBox .PinturaInputField {
  padding-right: .375em;
}

.PinturaShapeStyle > .PinturaRadioGroup > .PinturaRadioGroupOptions {
  flex-direction: row;
}

.PinturaShapeStyle > .PinturaRadioGroup > .PinturaRadioGroupOptions label {
  cursor: var(--button-cursor);
  height: var(--control-height);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  transition: background-color var(--transition-duration-10);
  align-items: center;
  padding: 0 .25em;
  display: flex;
}

.PinturaShapeStyle > .PinturaRadioGroup > .PinturaRadioGroupOptions label:hover {
  background-color: var(--color-foreground-20);
}

.PinturaShapeStyle > .PinturaRadioGroup > .PinturaRadioGroupOptions svg {
  width: 1.125em;
  height: 1.125em;
}

.PinturaShapeStyle > .PinturaRadioGroup > .PinturaRadioGroupOptions .PinturaRadioGroupOption:first-of-type label {
  border-top-left-radius: var(--border-radius-round);
  border-bottom-left-radius: var(--border-radius-round);
  padding-left: .5em;
}

.PinturaShapeStyle > .PinturaRadioGroup > .PinturaRadioGroupOptions .PinturaRadioGroupOption:last-of-type label {
  border-top-right-radius: var(--border-radius-round);
  border-bottom-right-radius: var(--border-radius-round);
  padding-right: .5em;
}

.PinturaShapeStyle > .PinturaRadioGroup > .PinturaRadioGroupOptions [data-selected="true"] label {
  background-color: var(--color-foreground-10);
}

.PinturaRoot[dir="rtl"] .PinturaShapeStyle > .PinturaDropdownButton .PinturaButtonLabel:after, .PinturaRoot[dir="rtl"] .PinturaShapeStyle > .PinturaDropdownButton .PinturaComboBox:after {
  margin-left: -.25em;
  margin-right: .75em;
}

.PinturaRectManipulator {
  --size: 1.25em;
  touch-action: none;
  transform: translate3d(calc(var(--tx) * 1px),calc(var(--ty) * 1px),0) scale(var(--sx),var(--sy));
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaRectManipulator:not([data-shape="edge"]) {
  width: var(--size);
  height: var(--size);
  z-index: 2;
}

.PinturaRectManipulator:not([data-shape="edge"]):after {
  border-radius: inherit;
  content: "";
  position: absolute;
  inset: -.5em;
}

.PinturaRectManipulator:not([data-shape="edge"])[data-focus-visible]:after {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRectManipulator[data-shape~="circle"] {
  margin-left: calc(var(--size) * (-.5));
  margin-top: calc(var(--size) * (-.5));
  line-height: var(--size);
  background-color: var(--color-foreground-100);
  box-shadow: 0 0 2px var(--color-background-50);
  border-radius: 50%;
}

.PinturaRectManipulator[data-shape="hook"] {
  border: 3px solid var(--color-foreground-100);
}

.PinturaRectManipulator[data-shape="hook"][data-direction*="t"] {
  border-bottom: 0;
  margin-top: -3px;
}

.PinturaRectManipulator[data-shape="hook"][data-direction*="r"] {
  margin-left: calc(var(--size) * (-1));
  border-left: 0;
}

.PinturaRectManipulator[data-shape="hook"][data-direction*="b"] {
  margin-top: calc(var(--size) * (-1));
  border-top: 0;
}

.PinturaRectManipulator[data-shape="hook"][data-direction*="l"] {
  border-right: 0;
  margin-left: -3px;
}

.PinturaRectManipulator[data-shape~="edge"] {
  z-index: 1;
  width: 1px;
  height: 1px;
}

.PinturaRectManipulator[data-shape~="edge"][data-focus-visible] {
  background-color: var(--color-focus-50);
}

.PinturaRectManipulator[data-direction="b"], .PinturaRectManipulator[data-direction="t"] {
  cursor: ns-resize;
  height: var(--size);
  margin-top: calc(var(--size) * (-.5));
  transform-origin: 0;
}

.PinturaRectManipulator[data-direction="l"], .PinturaRectManipulator[data-direction="r"] {
  cursor: ew-resize;
  width: var(--size);
  margin-left: calc(var(--size) * (-.5));
  transform-origin: 50% 0;
}

.PinturaRectManipulator[data-direction="bl"], .PinturaRectManipulator[data-direction="tr"] {
  cursor: nesw-resize;
}

.PinturaRectManipulator[data-direction="br"], .PinturaRectManipulator[data-direction="tl"] {
  cursor: nwse-resize;
}

.PinturaRoot[data-env~="pointer-coarse"] .PinturaRectManipulator[data-shape="edge"]:active {
  background-color: var(--color-foreground-5);
}

.PinturaRoot[data-env~="pointer-coarse"] .PinturaRectManipulator:not([data-shape="edge"]):after {
  inset: -1em;
}

.PinturaRoot[data-env~="pointer-coarse"] .PinturaRectManipulator:not([data-shape="edge"]):active:after {
  background-color: var(--color-foreground-5);
}

.PinturaRoot[data-env*="chrome-"] .PinturaRectManipulator {
  transform: translate3d(calc(var(--tx) * 1px),calc(var(--ty) * 1px),0);
}

.PinturaRoot[data-env*="chrome-"] .PinturaRectManipulator[data-direction="b"], .PinturaRoot[data-env*="chrome-"] .PinturaRectManipulator[data-direction="t"] {
  width: calc(var(--sx) * 1px);
}

.PinturaRoot[data-env*="chrome-"] .PinturaRectManipulator[data-direction="l"], .PinturaRoot[data-env*="chrome-"] .PinturaRectManipulator[data-direction="r"] {
  height: calc(var(--sy) * 1px);
}

.PinturaRoot .PinturaImageButton {
  --thumb-size: 1.75em;
  --thumb-radius: .3125em;
  --thumb-margin: .3125em;
  padding: var(--thumb-margin);
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  cursor: var(--button-cursor);
  outline: #0000;
}

.PinturaRoot .PinturaImageButton > * {
  pointer-events: none;
}

.PinturaRoot .PinturaImageButton {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: #0000;
  transition: filter var(--transition-duration-25) ease-out;
}

.PinturaRoot .PinturaImageButton[disabled] {
  filter: var(--filter-disabled);
}

.PinturaRoot .PinturaImageButton:hover {
  background-color: var(--color-foreground-10);
}

.PinturaRoot .PinturaImageButton text {
  font-family: monospace;
}

.PinturaRoot .PinturaImageButton img, .PinturaRoot .PinturaImageButton svg {
  width: var(--thumb-size);
  height: var(--thumb-size);
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--thumb-radius);
  min-width: auto;
  max-width: none;
  display: block;
}

.PinturaRoot .PinturaImageButton[data-loader]:after, .PinturaRoot .PinturaImageButton[data-loader]:before {
  width: var(--thumb-size);
  height: var(--thumb-size);
  line-height: var(--thumb-size);
  border-radius: var(--thumb-radius);
  display: block;
}

.PinturaRoot .PinturaImageButton[data-error] img {
  display: none;
}

.PinturaRoot .PinturaImageButton[data-error]:after {
  content: "⚠";
  box-shadow: inset 0 0 0 1px var(--color-error-75);
  background-color: var(--color-error-10);
  color: var(--color-error-75);
}

.PinturaRoot .PinturaImageButton[data-loader] {
  position: relative;
}

.PinturaRoot .PinturaImageButton[data-loader]:before {
  content: "";
  left: var(--thumb-margin);
  top: var(--thumb-margin);
  -webkit-animation: pintura-img-loading calc(var(--transition-duration-multiplier, 0) * 1s) infinite alternate ease-in-out;
  animation: pintura-img-loading calc(var(--transition-duration-multiplier, 0) * 1s) infinite alternate ease-in-out;
  background-color: var(--color-foreground-10);
  transition: transform calc(var(--transition-duration-multiplier, 0) * .5s) ease-in;
  z-index: -1;
  position: absolute;
}

.PinturaRoot .PinturaImageButton[data-loader] img {
  opacity: 0;
  transition: opacity calc(var(--transition-duration-multiplier, 0) * .35s) ease-out;
}

.PinturaRoot .PinturaImageButton[data-loader][data-load] img {
  opacity: 1;
}

.PinturaRoot .PinturaImageButton[data-loader][data-error]:before, .PinturaRoot .PinturaImageButton[data-loader][data-load]:before {
  animation-play-state: paused;
  transform: scale(.5);
}

@keyframes pintura-img-loading {
  0% {
    opacity: .5;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: .5;
  }
}

.PinturaImageButtonList, .PinturaImageButtonList > li {
  align-items: center;
  display: flex;
}

.PinturaImageButtonList > li {
  --thumb-size: 1.75em;
  --thumb-radius: .3125em;
  --thumb-margin: .3125em;
  justify-content: center;
  position: relative;
}

.PinturaImageButtonList > li + li {
  margin-left: .5em;
}

.PinturaPanel.PinturaSliderPanel {
  border-radius: var(--border-radius-round);
}

.PinturaPercentageLabel {
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 3em;
}

.PinturaSliderPanel .PinturaSlider {
  --knob-size: .75em;
  --knob-margin-left: .3125em;
  --knob-margin-right: .3125em;
  width: 10em;
}

.PinturaSliderPanel .PinturaSliderTrack {
  --track-background: var(--color-foreground-10);
}

.PinturaSliderPanel .PinturaSliderKnob {
  --knob-background: var(--color-foreground-100);
  box-shadow: 0 .125em .25em #00000059, 0 -.125em .25em #0000001a;
}

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

.PinturaInput input[disabled] {
  filter: var(--filter-disabled);
}

.PinturaInputField {
  outline: #0000;
  flex: 1;
}

.PinturaInputField[type="number"] {
  -moz-appearance: textfield;
}

.PinturaInputField[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.PinturaInputField[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.PinturaInputSpinners {
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  display: flex;
}

.PinturaInputSpinners button {
  outline: #0000;
  width: 2em;
  font-size: .5em !important;
  line-height: 1 !important;
}

.PinturaShorthandControl {
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  flex-direction: row;
  padding-left: .25em;
}

.PinturaShorthandControl > .PinturaSliderButton + .PinturaSliderButton {
  border-left: 1px solid var(--color-foreground-5);
  border-radius: 0;
}

.PinturaShorthandControl .PinturaSliderButton .PinturaButtonLabel {
  padding: 0 .5em;
}

.PinturaShorthandControl .PinturaColorPreview {
  width: 1em;
  height: 1em;
  margin-top: .25em;
  margin-right: .25em;
}

.PinturaShapePresetsPalette {
  text-align: center;
  width: 40em;
  max-width: 100%;
  overflow: hidden;
}

.PinturaShapePresetsPalette .PinturaShapePresetSelect {
  vertical-align: top;
  display: inline-block;
}

.PinturaShapePresetsPalette .PinturaScrollable:not([data-state~="overflows"]) {
  justify-content: center;
  display: flex;
}

.PinturaShapePresetsPalette .PinturaButton + .PinturaButton {
  margin-left: .5em;
}

.PinturaShapePresetsPalette .PinturaButton {
  border-radius: var(--border-radius-round);
  box-shadow: inset 0 0 0 1px var(--color-foreground-5);
  cursor: var(--button-cursor);
  transition: background-color var(--transition-duration-10) ease-out,color var(--transition-duration-10) ease-out,box-shadow var(--transition-duration-10) ease-out;
  outline: none;
  flex-direction: row;
  padding: .3125em .75em;
  line-height: 1.1;
}

.PinturaShapePresetsPalette .PinturaButton .PinturaButtonIcon {
  width: 1em;
}

.PinturaShapePresetsPalette .PinturaButton .PinturaButtonLabel {
  font-size: .75em;
}

.PinturaShapePresetsPalette .PinturaButton:hover {
  box-shadow: inset 0 0 0 1px var(--color-foreground-10);
}

.PinturaShapePresetsPalette .PinturaButton[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapePresetsPalette .PinturaShapePresetsFlat > * + *, .PinturaShapePresetsPalette .PinturaShapePresetsGroups > * + *, .PinturaShapePresetsPalette .PinturaShapePresetsGroups > div > * + * {
  margin-left: .5em;
}

.PinturaShapePresetsGroups {
  display: flex;
}

.PinturaShapePresetsGrouped {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.PinturaShapePresetsGrouped [role="tab"] {
  white-space: nowrap;
}

.PinturaShapePresetsFlat {
  justify-content: center;
  align-items: center;
  display: flex;
}

.PinturaShapePresetsFlat > .PinturaButton {
  margin-left: 1em;
}

.PinturaShapeList {
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-duration-10) ease-in-out;
  z-index: 1;
  border-radius: var(--border-radius);
  width: max-content;
  color: var(--color-foreground-100);
  background: var(--color-background-70);
  box-shadow: 0 0 0 1px var(--color-foreground-5);
  position: absolute;
  top: 1em;
  left: 1em;
}

.PinturaShapeList li + li {
  margin-top: -.3125em;
}

.PinturaShapeList[data-visible="true"] {
  opacity: 1;
}

.PinturaShapeList .PinturaColorPreview {
  border-radius: .25em;
  width: .75em;
  height: .75em;
  margin-right: .25em;
}

.PinturaShapeList .PinturaShapeListItem {
  outline: none;
  align-items: center;
  padding: .25em .5em;
  display: flex;
}

.PinturaShapeList .PinturaShapeListItem > span {
  margin-left: -.325em;
  padding: 0 .325em;
  font-size: .75em;
  line-height: 1.75;
}

.PinturaShapeList .PinturaShapeListItem[data-focus-visible] > span {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapeList[data-visible="true"] .PinturaShapeListItem {
  pointer-events: all;
}

.PinturaShapeEditor {
  touch-action: none;
  outline: none;
  width: 100%;
  height: 100%;
}

.PinturaShapeControls {
  z-index: 3;
  pointer-events: none;
  align-items: center;
  display: flex;
  top: 0;
  left: 0;
  position: absolute !important;
}

.PinturaShapeControlsGroup {
  pointer-events: all;
  color: #eee;
  background: #222;
  border-radius: .25em;
  box-shadow: 0 .125em .25em #00000040;
}

.PinturaShapeControlsGroup, .PinturaShapeControlsGroup .PinturaShapeControlsGroupToggle {
  min-height: 1.75em;
  display: inline-flex;
}

.PinturaShapeControlsGroup + .PinturaShapeControlsGroup {
  margin-left: .5em;
}

.PinturaShapeControlsGroup .PinturaShapeControlsGroupToggle {
  position: relative;
}

.PinturaShapeControlsGroup .PinturaButton {
  outline: #0000;
}

.PinturaShapeControlsGroup .PinturaButton[data-focus-visible] {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapeControlsGroup .PinturaButton[disabled] > span {
  opacity: .5;
  pointer-events: all;
  cursor: not-allowed;
}

.PinturaShapeControlsGroup > .PinturaButton {
  transition: background-color var(--transition-duration-10);
  outline: #0000;
  font-weight: 700;
  display: block;
}

.PinturaShapeControlsGroup > .PinturaButton:hover {
  background-color: #ffffff26;
}

.PinturaShapeControlsGroup > .PinturaButton .PinturaButtonLabel {
  padding: 0 .75em;
  font-size: .6875em;
  line-height: 1.7em;
  display: block;
}

.PinturaShapeControlsGroup .PinturaButtonIconOnly {
  width: 1.75em;
  transition: background-color var(--transition-duration-10);
}

.PinturaShapeControlsGroup .PinturaButtonIconOnly:hover {
  background-color: #ffffff26;
}

.PinturaShapeControlsGroup > button:first-of-type {
  border-radius: .25em 0 0 .25em;
}

.PinturaShapeControlsGroup > button:last-of-type {
  border-radius: 0 .25em .25em 0;
}

.PinturaShapeControlsGroup > button:only-of-type {
  border-radius: .25em;
}

.PinturaShapeControlsGroup > * + * {
  border-left: 1px solid #00000080;
}

.PinturaShapeControlsGroup svg {
  pointer-events: none;
}

.PinturaInlineInput {
  transform-origin: center;
  margin: 0;
  padding: 0;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaInlineInput:before {
  content: "";
  width: 0;
  height: var(--line-height);
}

.PinturaContentEditable {
  width: calc(100% / var(--font-scalar));
  height: calc((100% / var(--font-scalar)) - var(--bottom-inset, 0));
  vertical-align: top;
  outline: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.PinturaOptionsList, .PinturaOptionsListWrapper {
  border-radius: inherit;
}

.PinturaOptionsList .PinturaListOption {
  transition: background-color var(--transition-duration-10);
  border-radius: inherit;
  position: relative;
}

.PinturaOptionsList .PinturaListOption label {
  border-radius: inherit;
  white-space: nowrap;
  margin: 0;
  display: block;
}

.PinturaOptionsList .PinturaListOption svg {
  min-width: 1.5em;
  margin-left: -.5em;
  margin-right: .25em;
}

.PinturaOptionsList .PinturaListOption svg:only-child {
  margin-left: 0;
  margin-right: 0;
}

.PinturaOptionsList .PinturaListOption [slot] {
  align-items: center;
  padding: .325em .75em;
  display: flex;
}

.PinturaOptionsList .PinturaDropdownOptionLabel {
  flex-direction: column;
  margin-left: -.325em;
  padding: 0 .325em;
  font-size: .75em;
  line-height: 1.75;
  display: inline-flex;
}

.PinturaOptionsList .PinturaDropdownOptionSublabel {
  opacity: .5;
  margin-top: -.5em;
  font-size: .75em;
}

.PinturaOptionsList .PinturaListOptionGroup > span {
  text-transform: uppercase;
  color: var(--color-foreground-50);
  padding: .75em 1em;
  font-size: .75em;
  display: block;
}

.PinturaOptionsList [data-disabled="true"] {
  color: var(--color-foreground-50);
}

.PinturaOptionsList [data-selected="false"]:not([data-disabled="true"]):hover {
  background-color: var(--color-foreground-10);
}

.PinturaOptionsList [data-selected="true"] {
  color: var(--color-foreground-100);
  background-color: var(--color-foreground-20);
}

.PinturaOptionsList [data-focus-visible] + label .PinturaDropdownOptionLabel {
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
  border-radius: .25em;
}

.PinturaListOption label {
  margin: 0;
}

.PinturaRoot[dir="rtl"] .PinturaDropdownOptionLabel {
  align-items: flex-end;
  margin-right: -.325em;
}

.PinturaRoot[dir="rtl"] .PinturaListOption svg {
  margin-left: -.5em;
  margin-right: auto;
}

.PinturaRoot[dir="rtl"] .PinturaListOption svg + span {
  margin-left: .25em;
}

.PinturaRoot[dir="rtl"] .PinturaListOption [slot] {
  justify-content: flex-end;
}

.PinturaColorPickerPanel {
  touch-action: none;
  max-width: 14em;
  padding: .5em;
  overflow: visible;
}

.PinturaColorPickerPanel .PinturaEyeDropper {
  color: var(--color-foreground-70);
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: .25em;
  display: flex;
}

.PinturaColorPickerPanel .PinturaEyeDropper svg {
  width: 1em;
  height: 1em;
}

.PinturaColorPickerPanel .PinturaColorPickerButton {
  outline: #0000;
}

.PinturaColorPickerPanel .PinturaColorPickerButton[data-focus-visible] {
  box-shadow: inset 0 0 0 1px var(--color-foreground-70);
}

.PinturaColorPickerPanel .PinturaColorPreview {
  border-radius: .25em;
  width: 1.25em;
  height: 1.25em;
}

.PinturaColorPickerPanel .PinturaColorPreview span {
  box-shadow: inset 0 0 0 1px var(--color-foreground-20);
  border-radius: .2em;
}

.PinturaColorPickerPanel .PinturaColorPresets legend {
  color: var(--color-foreground-50);
  margin: 0 0 .25em .3125em;
  font-size: .75em;
}

.PinturaColorPickerPanel .PinturaColorPresets:only-child legend {
  display: none;
}

.PinturaColorPickerPanel .PinturaColorPresetsGrid .PinturaRadioGroupOptions {
  flex-flow: wrap;
  display: flex;
}

.PinturaColorPickerPanel .PinturaColorPresetsGrid .PinturaListOption {
  padding: .25em;
  display: block;
}

.PinturaColorPickerPanel .PinturaColorPresetsGrid .PinturaListOption label, .PinturaColorPickerPanel .PinturaColorPresetsGrid .PinturaListOption label span {
  cursor: var(--button-cursor);
  display: block;
}

.PinturaColorPickerPanel .PinturaColorPresetsGrid input[data-focus-visible] + label .PinturaColorPreview:after {
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
  position: absolute;
  inset: -.3125em;
}

.PinturaColorPickerPanel .PinturaSlider {
  margin-left: -.325em;
  margin-right: -.325em;
}

.PinturaColorPickerPanel .PinturaSlider > .PinturaSliderControl {
  z-index: 2;
  position: relative;
}

.PinturaColorPickerPanel .PinturColorPickerInputGroup {
  flex-direction: row;
  align-items: center;
  margin: .75em 0 .25em .3125em;
  display: flex;
}

.PinturaColorPickerPanel .PinturaPicker {
  width: 100%;
}

.PinturaColorPickerPanel .PinturaPicker + .PinturaColorPresets {
  margin-top: .5em;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaPickerKnob, .PinturaColorPickerPanel .PinturaPicker .PinturaSliderKnob {
  border-radius: 9999em;
  box-shadow: inset 0 .06125em .06125em #0000001a, 0 0 0 .06125em #fff, 0 .1875em .25em #00000059, 0 -.125em .25em #0000001a;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaPickerKnob {
  pointer-events: none;
  z-index: 1;
  visibility: visible;
  outline: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: -.625em;
  margin-left: -.625em;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaPickerKnob[data-focus-visible]:after {
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
  position: absolute;
  inset: -.3125em;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaPickerKnobController {
  visibility: hidden;
  position: absolute;
  inset: 0;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaSaturationPicker {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background-image: linear-gradient(#0000, #000), linear-gradient(90deg, #fff, #0000);
  height: 7em;
  margin: -.5em -.5em .5em;
  position: relative;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaHuePicker .PinturaSliderTrack {
  background-image: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
}

.PinturaColorPickerPanel .PinturaPicker .PinturaSliderTrack {
  box-shadow: inset 0 0 1px var(--color-foreground-50);
}

.PinturaColorPickerPanel .PinturaPicker .PinturaOpacityPicker .PinturaSliderKnob:before, .PinturaColorPickerPanel .PinturaPicker .PinturaOpacityPicker .PinturaSliderTrack:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  background-color: #fff;
  background-image: var(--pattern-transparent);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaOpacityPicker .PinturaSliderKnob:before {
  background-position: calc(var(--slider-position) * -2px) 0;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaOpacityPicker {
  margin-top: .5em;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaColorPickerInput {
  color: var(--color-foreground-80);
  text-indent: .5em;
  border: 1px solid var(--color-foreground-20);
  font-variant: tabular-nums;
  text-transform: uppercase;
  border-radius: .25em;
  width: calc(100% - .625em);
  font-size: .875em;
  line-height: 1.75;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaColorPickerInput:focus {
  border-color: var(--color-focus-100);
  outline: #0000;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaColorPickerInput[disabled] {
  color: var(--color-foreground-40);
}

.PinturaPanel {
  --color-inset: #ffffff1a;
  --color-fill: var(--color-foreground-5);
  z-index: 2147483647;
  cursor: auto;
  width: max-content;
  box-shadow: inset 0 0 0 1px var(--color-inset),0 .125em .25em #00000040,0 .125em .75em #00000026,0 .125em .125em #0000001a;
  border-radius: var(--border-radius);
  outline: #0000;
  top: 0;
  left: 0;
}

.PinturaPanel, .PinturaPanelTip {
  color: var(--color-foreground-90);
  background-color: var(--color-background-100);
  background-image: linear-gradient(var(--color-fill),var(--color-fill));
  background-blend-mode: screen;
  position: absolute;
}

.PinturaPanelTip {
  --tip-mask: transparent calc(50% - 1.5px),#000 calc(50% - 1.5px);
  z-index: -1;
  width: .5em;
  height: .5em;
  box-shadow: inset -1px -1px 0 0 var(--color-inset);
  -webkit-mask: linear-gradient(to bottom right,var(--tip-mask));
  -webkit-mask: linear-gradient(to bottom right,var(--tip-mask));
  mask: linear-gradient(to bottom right,var(--tip-mask));
  pointer-events: none;
  margin-top: -.25em;
  margin-left: -.25em;
}

.PinturaPanelTip[data-top="true"] {
  box-shadow: inset 1px 1px 0 0 var(--color-inset);
  -webkit-mask: linear-gradient(to top left,var(--tip-mask));
  -webkit-mask: linear-gradient(to top left,var(--tip-mask));
  mask: linear-gradient(to top left,var(--tip-mask));
}

.PinturaColorPreview {
  --color: transparent;
  color: var(--color);
  pointer-events: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h4v4H0zm4 4h4v4H4z' fill='%23E5E5E5'/%3E%3C/svg%3E");
  position: relative;
}

.PinturaColorPreview span {
  background-color: var(--color);
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

.PinturaContentEditable {
  white-space: pre-line !important;
  word-break: break-word !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  display: inline-block !important;
}

.PinturaContentEditable[data-wrap-content="nowrap"] {
  white-space: nowrap !important;
  word-break: normal !important;
}

.PinturaContentEditable[data-wrap-content="nowrap"] br {
  display: none;
}

.PinturaContentEditable {
  -webkit-user-drag: none;
  min-width: auto !important;
  max-width: none !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.PinturaShapeManipulator {
  touch-action: none;
  transform: translate3d(calc(var(--tx) * 1px),calc(var(--ty) * 1px),0) rotate(var(--r)) scale(var(--sx),var(--sy));
  --size: .75em;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
}

.PinturaShapeManipulator:not([data-control="edge"]) {
  margin-left: calc(var(--size) * (-.5));
  margin-top: calc(var(--size) * (-.5));
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  border-radius: 9999em;
}

.PinturaShapeManipulator:not([data-control="edge"]):after {
  content: "";
  position: absolute;
  inset: -.5em;
}

.PinturaShapeManipulator:not([data-control="edge"])[data-focus-visible]:after {
  border-radius: inherit;
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapeManipulator[data-control="point"], .PinturaShapeManipulator[data-control="scale"] {
  background: linear-gradient(90deg,var(--color-secondary-dark),var(--color-secondary));
  z-index: 3;
  box-shadow: 0 0 0 2px #fff, 0 0 4px #000;
}

.PinturaShapeManipulator[data-control="point"][data-selected="true"]:before, .PinturaShapeManipulator[data-control="scale"][data-selected="true"]:before {
  content: "";
  width: calc(var(--size) * .5);
  height: calc(var(--size) * .5);
  margin-left: calc(var(--size) * .25);
  margin-top: calc(var(--size) * .25);
  background: #fff;
  border-radius: 9999em;
  display: block;
}

.PinturaShapeManipulator[data-control="scale"] {
  cursor: -webkit-grab;
  cursor: grab;
}

.PinturaShapeManipulator[data-control="edge"] {
  margin-top: calc(var(--size) * (-.5));
  height: var(--size);
  z-index: 1;
  width: 1px;
  transform-origin: 0 calc(var(--size) * .5);
}

.PinturaShapeManipulator[data-control="edge"][data-focus-visible] {
  background-color: var(--color-focus-50);
}

.PinturaShapeManipulator[data-control="rotate"] {
  box-shadow: 0 0 0 2px var(--color-secondary-dark),0 0 4px #000;
  z-index: 2;
  cursor: -webkit-grab;
  cursor: grab;
  background: linear-gradient(90deg, #fff, #ddd);
  border-radius: 9999em;
}

.PinturaRoot[data-env*="chrome-"] .PinturaShapeManipulator[data-control="edge"] {
  width: calc(var(--sx) * 1px);
  transform: translate3d(calc(var(--tx) * 1px),calc(var(--ty) * 1px),0) rotate(var(--r));
}

.PinturaSlider {
  --track-offset-x: .5em;
  --track-offset-y: .5em;
  --track-size: 1.5em;
  --knob-size: 1em;
  --knob-margin-top: 0em;
  --knob-margin-right: 0em;
  --knob-margin-bottom: 0em;
  --knob-margin-left: 0em;
  touch-action: none;
  align-items: center;
  display: flex;
  position: relative;
}

.PinturaSlider[data-direction="y"] {
  flex-direction: column;
}

.PinturaSlider .PinturaSliderControl {
  flex: 1;
  position: relative;
}

.PinturaSlider > button {
  z-index: 1;
  width: var(--track-size);
  height: var(--track-size);
  cursor: pointer;
  flex-shrink: none;
  position: relative;
  overflow: hidden;
}

.PinturaSlider > button svg {
  stroke-width: .125em;
  width: 1.25em;
  height: 1.25em;
  stroke: var(--color-foreground-50);
  margin: .125em;
}

.PinturaSlider > button:first-of-type {
  order: 2;
  margin-left: -.325em;
  padding-right: .125em;
}

.PinturaSlider > button:last-of-type {
  order: 1;
  margin-right: -.325em;
  padding-left: .125em;
}

.PinturaSlider > .PinturaSliderControl {
  order: 2;
}

.PinturaSlider .PinturaSliderKnob {
  visibility: visible;
  width: var(--knob-size);
  height: var(--knob-size);
  margin-left: calc(var(--knob-size) * -.5);
  margin-top: calc(var(--knob-size) * -.5);
  background: var(--knob-background);
  border-radius: 9999em;
  top: 50%;
  left: 0;
}

.PinturaSlider .PinturaSliderKnob, .PinturaSlider .PinturaSliderKnobController, .PinturaSlider .PinturaSliderTrack {
  pointer-events: none;
  position: absolute;
}

.PinturaSlider .PinturaSliderTrack {
  top: var(--track-offset-y);
  bottom: var(--track-offset-y);
  left: var(--track-offset-x);
  right: var(--track-offset-x);
  background: var(--track-background);
}

.PinturaSlider .PinturaSliderKnobController {
  visibility: hidden;
  top: calc(var(--track-offset-y) + var(--knob-margin-top));
  bottom: calc(var(--track-offset-y) + var(--knob-margin-bottom));
  left: calc(var(--track-offset-x) + var(--knob-margin-left));
  right: calc(var(--track-offset-x) + var(--knob-margin-right));
}

.PinturaSlider .PinturaSliderTrack {
  border-radius: 9999em;
}

.PinturaSlider[data-direction="x"] input[type="range"] {
  height: var(--track-size);
  margin-left: var(--track-offset-x);
  width: calc(100% - (var(--track-offset-x) * 2));
}

.PinturaSlider[data-direction="y"] input[type="range"] {
  width: var(--track-size);
  margin-top: var(--track-offset-y);
  height: calc(100% - (var(--track-offset-y) * 2));
}

.PinturaSlider input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  display: block;
}

.PinturaSlider input[type="range"]::-webkit-slider-runnable-track {
  background: none;
}

.PinturaSlider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.PinturaSlider input[type="range"]::-moz-range-thumb {
  visibility: hidden;
  border: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.PinturaSlider input[type="range"]::-ms-thumb {
  border: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.PinturaSlider input[type="range"]::-ms-ticks-before {
  display: none;
}

.PinturaSlider input[type="range"]::-ms-tooltip {
  display: none;
}

.PinturaSlider input[type="range"]::-ms-ticks-after {
  display: none;
}

.PinturaSlider input[type="range"]::-ms-track {
  color: #0000;
  background: none;
  border: none;
}

.PinturaSlider input[type="range"]::-ms-fill-lower {
  background: none;
}

.PinturaSlider input[type="range"]::-ms-fill-upper {
  background: none;
}

.PinturaSlider input[type="range"]:focus {
  outline: #0000;
}

.PinturaSlider input[type="range"][data-focus-visible] ~ .PinturaSliderKnobController .PinturaSliderKnob:after {
  border-radius: inherit;
  content: "";
  background-color: var(--color-focus-50);
  box-shadow: inset 0 0 0 1px var(--color-focus-100);
  pointer-events: none;
  position: absolute;
  inset: -.3125em;
}

:root {
  --color-scheme: dark;
  --color-canvas: #08090d;
  --color-canvas-translucent: #08090de0;
  --color-surface-1: #101218;
  --color-surface-2: #171a22;
  --color-surface-3: #20242e;
  --color-overlay: #151820;
  --color-border: #ffffff14;
  --color-border-strong: #ffffff26;
  --color-text: #f4f6fb;
  --color-text-muted: #a4acba;
  --color-text-subtle: #717a8b;
  --color-accent: #5147e8;
  --color-accent-hover: #6258f0;
  --color-accent-soft: #a8a2ff;
  --color-success: #1fa855;
  --color-danger: #c9364f;
  --color-danger-text: #ff9aaa;
  --color-focus: #7d74ff8c;
  --color-status-online: #2982f7;
  --color-status-idle: #e3ad35;
  --color-status-dnd: #e14a5f;
  --color-status-playing: #28e657;
  --color-status-offline: #70798a;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --control-height-sm: 36px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --shadow-overlay: 0 18px 50px #00000073;
  --content-width: 1440px;
}

html[data-theme="light"] {
  --color-scheme: light;
  --color-canvas: #f7f8fc;
  --color-canvas-translucent: #ffffffe6;
  --color-surface-1: #fff;
  --color-surface-2: #f1f3f9;
  --color-surface-3: #e7eaf3;
  --color-overlay: #fff;
  --color-border: #3834701f;
  --color-border-strong: #38347038;
  --color-text: #171a2b;
  --color-text-muted: #586174;
  --color-text-subtle: #747d91;
  --color-accent: #5147e8;
  --color-accent-hover: #4339d8;
  --color-accent-soft: #6258f0;
  --color-success: #188a49;
  --color-danger: #c9364f;
  --color-danger-text: #a51f39;
  --color-focus: #5147e86b;
  --color-status-online: #176fdc;
  --color-status-idle: #a86e00;
  --color-status-dnd: #c9364f;
  --color-status-playing: #15943d;
  --color-status-offline: #70798a;
  --shadow-overlay: 0 18px 50px #2a265b2e;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-canvas);
}

html[data-theme="light"] body {
  background-color: var(--color-canvas);
  color: var(--color-text);
}

html[data-theme="light"] select {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

html[data-theme="light"] select option {
  background-color: var(--color-surface-1);
  color: var(--color-text);
}

html[data-theme="light"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text) !important;
}

html[data-theme="light"] input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text) !important;
}

html[data-theme="light"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text) !important;
}

html[data-theme="light"] input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text) !important;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
}

::selection {
  color: #fff;
  background: #6258f073;
}

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

:root {
  --font-sans: var(--font-zalando), ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
  --background: #08090d;
  --btn-primary: #2463eb;
  --btn-primary-start: #2d7fdd;
  --btn-primary-via: #4375e0;
  --btn-secondary: #000;
  --btn-success: #1abd4b;
  --btn-danger: #f1284a;
  --btn-warning: #000;
}

input:-webkit-autofill {
  transition: background-color 9999s ease-in-out;
  -webkit-text-fill-color: white !important;
  caret-color: #fff !important;
  box-shadow: inset 0 0 0 1000px #0000 !important;
}

input:-webkit-autofill:hover {
  transition: background-color 9999s ease-in-out;
  -webkit-text-fill-color: white !important;
  caret-color: #fff !important;
  box-shadow: inset 0 0 0 1000px #0000 !important;
}

input:-webkit-autofill:focus {
  transition: background-color 9999s ease-in-out;
  -webkit-text-fill-color: white !important;
  caret-color: #fff !important;
  box-shadow: inset 0 0 0 1000px #0000 !important;
}

input:-webkit-autofill:active {
  transition: background-color 9999s ease-in-out;
  -webkit-text-fill-color: white !important;
  caret-color: #fff !important;
  box-shadow: inset 0 0 0 1000px #0000 !important;
}

body {
  background-color: var(--background);
  color: #fff;
  font-family: var(--font-sans);
}

button, input, div, span, p, a {
  font-family: var(--font-sans);
}

select {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

select option {
  color: #fff;
  background-color: #0e1216;
}

.dela {
  font-family: Dela Gothic One, sans-serif;
}

.alexandria {
  font-family: Alexandria, sans-serif;
}

.zalando-extended {
  font-family: Zalando Sans Expanded, zalandoSansExpanded, sans-serif;
}

.zalando {
  font-family: Zalando Sans, zalandoSans, sans-serif;
}

@keyframes reenitee-floater {
  0% {
    transform: translate3d(0, 0, 0)rotate(0);
  }

  50% {
    transform: translate3d(-48px, -40px, 0);
  }

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

.animate-reenitee-floater {
  will-change: transform;
  animation: 5.5s ease-in-out infinite reenitee-floater;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  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-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

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

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

/*# sourceMappingURL=apps_www_src_app_0744wmf._.css.map*/