@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  html,
  body,
  #root {
    height: 100%;
  }
}

@layer components {
  .clothoid-corner-unset {
    clip-path: unset;
  }

  .clothoid-corner-2 {
    clip-path: polygon(
      0.694506rem 0rem,
      calc(100% - 0.694506rem) 0rem,
      calc(100% - 0.621587rem) 0.000344rem,
      calc(100% - 0.548707rem) 0.002527rem,
      calc(100% - 0.476033rem) 0.008232rem,
      calc(100% - 0.403964rem) 0.019115rem,
      calc(100% - 0.333375rem) 0.037217rem,
      calc(100% - 0.265618rem) 0.063907rem,
      calc(100% - 0.202485rem) 0.100088rem,
      calc(100% - 0.146321rem) 0.146321rem,
      calc(100% - 0.100088rem) 0.202485rem,
      calc(100% - 0.063907rem) 0.265618rem,
      calc(100% - 0.037217rem) 0.333375rem,
      calc(100% - 0.019115rem) 0.403964rem,
      calc(100% - 0.008232rem) 0.476033rem,
      calc(100% - 0.002527rem) 0.548707rem,
      calc(100% - 0.000344rem) 0.621587rem,
      calc(100% - 0.000344rem) calc(100% - 0.621587rem),
      calc(100% - 0.002527rem) calc(100% - 0.548707rem),
      calc(100% - 0.008232rem) calc(100% - 0.476033rem),
      calc(100% - 0.019115rem) calc(100% - 0.403964rem),
      calc(100% - 0.037217rem) calc(100% - 0.333375rem),
      calc(100% - 0.063907rem) calc(100% - 0.265618rem),
      calc(100% - 0.100088rem) calc(100% - 0.202485rem),
      calc(100% - 0.146321rem) calc(100% - 0.146321rem),
      calc(100% - 0.202485rem) calc(100% - 0.100088rem),
      calc(100% - 0.265618rem) calc(100% - 0.063907rem),
      calc(100% - 0.333375rem) calc(100% - 0.037217rem),
      calc(100% - 0.403964rem) calc(100% - 0.019115rem),
      calc(100% - 0.476033rem) calc(100% - 0.008232rem),
      calc(100% - 0.548707rem) calc(100% - 0.002527rem),
      calc(100% - 0.621587rem) calc(100% - 0.000344rem),
      calc(100% - 0.694506rem) 100%,
      0.694506rem 100%,
      0.621587rem calc(100% - 0.000344rem),
      0.548707rem calc(100% - 0.002527rem),
      0.476033rem calc(100% - 0.008232rem),
      0.403964rem calc(100% - 0.019115rem),
      0.333375rem calc(100% - 0.037217rem),
      0.265618rem calc(100% - 0.063907rem),
      0.202485rem calc(100% - 0.100088rem),
      0.146321rem calc(100% - 0.146321rem),
      0.100088rem calc(100% - 0.202485rem),
      0.063907rem calc(100% - 0.265618rem),
      0.037217rem calc(100% - 0.333375rem),
      0.019115rem calc(100% - 0.403964rem),
      0.008232rem calc(100% - 0.476033rem),
      0.002527rem calc(100% - 0.548707rem),
      0.000344rem calc(100% - 0.621587rem),
      0.000344rem 0.621587rem,
      0.002527rem 0.548707rem,
      0.008232rem 0.476033rem,
      0.019115rem 0.403964rem,
      0.037217rem 0.333375rem,
      0.063907rem 0.265618rem,
      0.100088rem 0.202485rem,
      0.146321rem 0.146321rem,
      0.202485rem 0.100088rem,
      0.265618rem 0.063907rem,
      0.333375rem 0.037217rem,
      0.403964rem 0.019115rem,
      0.476033rem 0.008232rem,
      0.548707rem 0.002527rem,
      0.621587rem 0.000344rem,
      0.694506rem 0rem
    );
  }

  .clothoid-corner-6 {
    clip-path: polygon(
      2.083518rem 0rem,
      calc(100% - 2.083518rem) 0rem,
      calc(100% - 1.864762rem) 0.001033rem,
      calc(100% - 1.646122rem) 0.007582rem,
      calc(100% - 1.4281rem) 0.024695rem,
      calc(100% - 1.211891rem) 0.057345rem,
      calc(100% - 1.000126rem) 0.111651rem,
      calc(100% - 0.796855rem) 0.191721rem,
      calc(100% - 0.607454rem) 0.300265rem,
      calc(100% - 0.438963rem) 0.438963rem,
      calc(100% - 0.300265rem) 0.607454rem,
      calc(100% - 0.191721rem) 0.796855rem,
      calc(100% - 0.111651rem) 1.000126rem,
      calc(100% - 0.057345rem) 1.211891rem,
      calc(100% - 0.024695rem) 1.4281rem,
      calc(100% - 0.007582rem) 1.646122rem,
      calc(100% - 0.001033rem) 1.864762rem,
      calc(100% - 0.001033rem) calc(100% - 1.864762rem),
      calc(100% - 0.007582rem) calc(100% - 1.646122rem),
      calc(100% - 0.024695rem) calc(100% - 1.4281rem),
      calc(100% - 0.057345rem) calc(100% - 1.211891rem),
      calc(100% - 0.111651rem) calc(100% - 1.000126rem),
      calc(100% - 0.191721rem) calc(100% - 0.796855rem),
      calc(100% - 0.300265rem) calc(100% - 0.607454rem),
      calc(100% - 0.438963rem) calc(100% - 0.438963rem),
      calc(100% - 0.607454rem) calc(100% - 0.300265rem),
      calc(100% - 0.796855rem) calc(100% - 0.191721rem),
      calc(100% - 1.000126rem) calc(100% - 0.111651rem),
      calc(100% - 1.211891rem) calc(100% - 0.057345rem),
      calc(100% - 1.4281rem) calc(100% - 0.024695rem),
      calc(100% - 1.646122rem) calc(100% - 0.007582rem),
      calc(100% - 1.864762rem) calc(100% - 0.001033rem),
      calc(100% - 2.083518rem) 100%,
      2.083518rem 100%,
      1.864762rem calc(100% - 0.001033rem),
      1.646122rem calc(100% - 0.007582rem),
      1.4281rem calc(100% - 0.024695rem),
      1.211891rem calc(100% - 0.057345rem),
      1.000126rem calc(100% - 0.111651rem),
      0.796855rem calc(100% - 0.191721rem),
      0.607454rem calc(100% - 0.300265rem),
      0.438963rem calc(100% - 0.438963rem),
      0.300265rem calc(100% - 0.607454rem),
      0.191721rem calc(100% - 0.796855rem),
      0.111651rem calc(100% - 1.000126rem),
      0.057345rem calc(100% - 1.211891rem),
      0.024695rem calc(100% - 1.4281rem),
      0.007582rem calc(100% - 1.646122rem),
      0.001033rem calc(100% - 1.864762rem),
      0.001033rem 1.864762rem,
      0.007582rem 1.646122rem,
      0.024695rem 1.4281rem,
      0.057345rem 1.211891rem,
      0.111651rem 1.000126rem,
      0.191721rem 0.796855rem,
      0.300265rem 0.607454rem,
      0.438963rem 0.438963rem,
      0.607454rem 0.300265rem,
      0.796855rem 0.191721rem,
      1.000126rem 0.111651rem,
      1.211891rem 0.057345rem,
      1.4281rem 0.024695rem,
      1.646122rem 0.007582rem,
      1.864762rem 0.001033rem,
      2.083518rem 0rem
    );
  }

  .clothoid-corner-\[18\.18\%\] {
    clip-path: polygon(
      25.252243% 0%,
      calc(100% - 25.252243%) 0%,
      calc(100% - 22.600915%) 0.012515%,
      calc(100% - 19.951002%) 0.09189%,
      calc(100% - 17.308571%) 0.299299%,
      calc(100% - 14.688122%) 0.695018%,
      calc(100% - 12.121527%) 1.353205%,
      calc(100% - 9.657887%) 2.323653%,
      calc(100% - 7.362342%) 3.639209%,
      calc(100% - 5.320226%) 5.320226%,
      calc(100% - 3.639209%) 7.362342%,
      calc(100% - 2.323653%) 9.657887%,
      calc(100% - 1.353205%) 12.121527%,
      calc(100% - 0.695018%) 14.688122%,
      calc(100% - 0.299299%) 17.308571%,
      calc(100% - 0.09189%) 19.951002%,
      calc(100% - 0.012515%) 22.600915%,
      calc(100% - 0.012515%) calc(100% - 22.600915%),
      calc(100% - 0.09189%) calc(100% - 19.951002%),
      calc(100% - 0.299299%) calc(100% - 17.308571%),
      calc(100% - 0.695018%) calc(100% - 14.688122%),
      calc(100% - 1.353205%) calc(100% - 12.121527%),
      calc(100% - 2.323653%) calc(100% - 9.657887%),
      calc(100% - 3.639209%) calc(100% - 7.362342%),
      calc(100% - 5.320226%) calc(100% - 5.320226%),
      calc(100% - 7.362342%) calc(100% - 3.639209%),
      calc(100% - 9.657887%) calc(100% - 2.323653%),
      calc(100% - 12.121527%) calc(100% - 1.353205%),
      calc(100% - 14.688122%) calc(100% - 0.695018%),
      calc(100% - 17.308571%) calc(100% - 0.299299%),
      calc(100% - 19.951002%) calc(100% - 0.09189%),
      calc(100% - 22.600915%) calc(100% - 0.012515%),
      calc(100% - 25.252243%) 100%,
      25.252243% 100%,
      22.600915% calc(100% - 0.012515%),
      19.951002% calc(100% - 0.09189%),
      17.308571% calc(100% - 0.299299%),
      14.688122% calc(100% - 0.695018%),
      12.121527% calc(100% - 1.353205%),
      9.657887% calc(100% - 2.323653%),
      7.362342% calc(100% - 3.639209%),
      5.320226% calc(100% - 5.320226%),
      3.639209% calc(100% - 7.362342%),
      2.323653% calc(100% - 9.657887%),
      1.353205% calc(100% - 12.121527%),
      0.695018% calc(100% - 14.688122%),
      0.299299% calc(100% - 17.308571%),
      0.09189% calc(100% - 19.951002%),
      0.012515% calc(100% - 22.600915%),
      0.012515% 22.600915%,
      0.09189% 19.951002%,
      0.299299% 17.308571%,
      0.695018% 14.688122%,
      1.353205% 12.121527%,
      2.323653% 9.657887%,
      3.639209% 7.362342%,
      5.320226% 5.320226%,
      7.362342% 3.639209%,
      9.657887% 2.323653%,
      12.121527% 1.353205%,
      14.688122% 0.695018%,
      17.308571% 0.299299%,
      19.951002% 0.09189%,
      22.600915% 0.012515%,
      25.252243% 0%
    );
  }

  .bubble-tail-l,
  .bubble-tail-r {
    position: relative;
  }

  .bubble-tail-l:after {
    content: "";
    position: absolute;
    top: 13px;
    left: -5px;
    display: block;
    width: 5px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='5' height='18' viewBox='0 0 5 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 18c0-2.82-1.59-4.36-2.97-5.72C.95 11.24 0 10.31 0 9c0-1.3.95-2.24 2.03-3.28C3.4 4.36 5 2.82 5 0v18Z' fill='white'/%3E%3C/svg%3E")
      no-repeat;
  }

  .bubble-tail-r:after {
    content: "";
    position: absolute;
    top: 13px;
    right: -5px;
    display: block;
    width: 5px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='5' height='18' viewBox='0 0 5 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 18c0-2.82 1.59-4.36 2.97-5.72C4.05 11.24 5 10.31 5 9c0-1.3-.95-2.24-2.03-3.28C1.6 4.36 0 2.82 0 0v18Z' fill='%2395EB69'/%3E%3C/svg%3E")
      no-repeat;
  }

  .bubble-tail-none:after {
    display: none;
  }

  .mask-bubble-tail-l {
    mask:
      0 13px / 5px 18px url("data:image/svg+xml,%3Csvg width='5' height='18' viewBox='0 0 5 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 18c0-2.82-1.59-4.36-2.97-5.72C.95 11.24 0 10.31 0 9c0-1.3.95-2.24 2.03-3.28C3.4 4.36 5 2.82 5 0v18Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      5px top / 10px url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 10h10V0C8.141 0 7.212 0 6.44.154A8 8 0 0 0 .153 6.439C0 7.212 0 8.141 0 10Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      right top / 10px url("data:image/svg+xml, %3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v10h10c0-1.859 0-2.788-.154-3.56A8 8 0 0 0 3.561.153C2.788 0 1.859 0 0 0Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      right bottom / 10px url("data:image/svg+xml, %3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0H0v10c1.859 0 2.788 0 3.56-.154a8 8 0 0 0 6.286-6.285C10 2.788 10 1.859 10 0Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      5px bottom / 10px url("data:image/svg+xml, %3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 10V0H0c0 1.859 0 2.788.154 3.56a8 8 0 0 0 6.285 6.286C7.212 10 8.141 10 10 10Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      linear-gradient(
        to right,
        transparent calc(5px + 10px),
        blue calc(5px + 10px),
        blue calc(100% - 10px),
        transparent calc(100% - 10px)
      ) no-repeat,
      right center / calc(100% - 5px) 100% linear-gradient(
        to bottom,
        transparent 10px,
        green 10px,
        green calc(100% - 10px),
        transparent calc(100% - 10px)
      ) no-repeat;
  }

  .mask-bubble-tail-r {
    mask:
      right 13px / 5px 18px url("data:image/svg+xml,%3Csvg width='5' height='18' viewBox='0 0 5 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 18c0-2.82 1.59-4.36 2.97-5.72C4.05 11.24 5 10.31 5 9c0-1.3-.95-2.24-2.03-3.28C1.6 4.36 0 2.82 0 0v18Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      left top / 10px url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 10h10V0C8.141 0 7.212 0 6.44.154A8 8 0 0 0 .153 6.439C0 7.212 0 8.141 0 10Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      right 5px top / 10px url("data:image/svg+xml, %3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v10h10c0-1.859 0-2.788-.154-3.56A8 8 0 0 0 3.561.153C2.788 0 1.859 0 0 0Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      right 5px bottom / 10px url("data:image/svg+xml, %3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0H0v10c1.859 0 2.788 0 3.56-.154a8 8 0 0 0 6.286-6.285C10 2.788 10 1.859 10 0Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      left bottom / 10px url("data:image/svg+xml, %3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 10V0H0c0 1.859 0 2.788.154 3.56a8 8 0 0 0 6.285 6.286C7.212 10 8.141 10 10 10Z' fill='red'/%3E%3C/svg%3E") no-repeat,
      left center / calc(100% - 5px) 100% linear-gradient(
        to right,
        transparent 10px,
        blue 10px,
        blue calc(100% - 10px),
        transparent calc(100% - 10px)
      ) no-repeat,
      left center / calc(100% - 5px) 100% linear-gradient(
        to bottom,
        transparent 10px,
        green 10px,
        green calc(100% - 10px),
        transparent calc(100% - 10px)
      ) no-repeat;
  }

  .mask-bubble-tail-none {
    mask: none;
  }
}

.gradient-blur {
  z-index: 5;
  pointer-events: none;
}

.gradient-blur:after,
.gradient-blur:before,
.gradient-blur > div {
  position: absolute;
  inset: 0;
}

.gradient-blur:before {
  content: "";
  z-index: 1;
  -webkit-backdrop-filter: blur(.5px);
  backdrop-filter: blur(.5px);
  mask: linear-gradient(
    180deg,
    transparent 0,
    #000 12.5%,
    #000 25%,
    transparent 37.5%
  );
}

.gradient-blur > div:first-of-type {
  z-index: 2;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  mask: linear-gradient(
    180deg,
    transparent 12.5%,
    #000 25%,
    #000 37.5%,
    transparent 50%
  );
}

.gradient-blur > div:nth-of-type(2) {
  z-index: 3;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  mask: linear-gradient(
    180deg,
    transparent 25%,
    #000 37.5%,
    #000 50%,
    transparent 62.5%
  );
}

.gradient-blur > div:nth-of-type(3) {
  z-index: 4;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  mask: linear-gradient(
    180deg,
    transparent 37.5%,
    #000 50%,
    #000 62.5%,
    transparent 75%
  );
}

.gradient-blur > div:nth-of-type(4) {
  z-index: 5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  mask: linear-gradient(
    180deg,
    transparent 50%,
    #000 62.5%,
    #000 75%,
    transparent 87.5%
  );
}

.gradient-blur > div:nth-of-type(5) {
  z-index: 6;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  mask: linear-gradient(
    180deg,
    transparent 62.5%,
    #000 75%,
    #000 87.5%,
    transparent
  );
}

.gradient-blur > div:nth-of-type(6) {
  z-index: 7;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  mask: linear-gradient(180deg, transparent 75%, #000 87.5%, #000);
}

.gradient-blur:after {
  content: "";
  z-index: 8;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  mask: linear-gradient(180deg, transparent 87.5%, #000);
}
