:root {
	--black: #000;
  --freq: #070708;
  --osc: #151516;
  --daw: #19191A;
  --gate: #38383A;
  --phase: #616163;
  --stereo: #8D8D8E;
  --detune: #CECECF;
  --wave: #E3E3E4;
  --init: #F1F1F2;
  --input: #FCFCFD;
  --white: #FFF;

  --eq: #E51C00;
  --eq-01: #FFFBFB;
  --eq-02: #FFF6F6;
  --eq-03: #FFEDEC;
  --eq-04: #FEE9E8;
  --eq-05: #FEE2E1;
  --eq-06: #FEDAD9;
  --eq-07: #FED3D1;
  --eq-08: #FEC3C1;
  --eq-09: #FDB0AC;
  --eq-10: #FD817A;
  --eq-11: #EF4D2F;
  --eq-12: var(--eq);
  --eq-13: #B5260B;
  --eq-14: #8E1F0B;
  --eq-15: #5F1507;
  --eq-16: #2F0A04;

  --filter: #FF9500;
  --filter-01: #FFF9EC;
  --filter-02: #FFF3D9;
  --filter-03: #FFEDC7;
  --filter-04: #FFE6B4;
  --filter-05: #FFDEA1;
  --filter-06: #FFD68E;
  --filter-07: #FFCC7A;
  --filter-08: #FFB957;
  --filter-09: var(--filter);
  --filter-10: #E58800;
  --filter-11: #B26A00;
  --filter-12: #945800;
  --filter-13: #7A4700;
  --filter-14: #5C3600;
  --filter-15: #402500;
  --filter-16: #241500;


  --flanger: #FFE600;
  --flanger-01: #FFFDF6;
  --flanger-02: #FFF8DB;
  --flanger-03: #FFF4BF;
  --flanger-04: #FFEF9D;
  --flanger-05: #FFEB78;
  --flanger-06: var(--flanger);
  --flanger-07: #F7DF00;
  --flanger-08: #EAD300;
  --flanger-09: #E1CB00;
  --flanger-10: #C5B200;
  --flanger-11: #998A00;
  --flanger-12: #827500;
  --flanger-13: #695F00;
  --flanger-14: #4F4700;
  --flanger-15: #332E00;
  --flanger-16: #1F1C00;

  --lfo: #00D959;
  --lfo-01: #F8FFFB; 
  --lfo-02: #D4FBE9;
  --lfo-03: #BAF6D9;
  --lfo-04: #A0F1C8;
  --lfo-05: #86ECB7;
  --lfo-06: #6BE8A5;
  --lfo-07: #51E593;
  --lfo-08: #38E280;
  --lfo-09: #1FDE6D;
  --lfo-10: var(--lfo);
  --lfo-11: #16AC59;
  --lfo-12: #12934E;
  --lfo-13: #0F7A42;
  --lfo-14: #0B6136;
  --lfo-15: #084728;
  --lfo-16: #092A1B;

  --tempo: #00AC9F;
  --tempo-01: #F8FFFE;
  --tempo-02: #E7FCFA;
  --tempo-03: #D6F9F6;
  --tempo-04: #C1F7F2;
  --tempo-05: #A8F5ED;
  --tempo-06: #87F4E9;
  --tempo-07: #6FF0E3;
  --tempo-08: #58E7DB;
  --tempo-09: #2CE0D2;
  --tempo-10: #1EC6BB;
  --tempo-11: var(--tempo);
  --tempo-12: #009384;
  --tempo-13: #00786E;
  --tempo-14: #006157;
  --tempo-15: #004B42;
  --tempo-16: #003630;

  --clip: #0064E8;
  --clip-01: #FBFCFF;
  --clip-02: #F2F6FF;
  --clip-03: #EAF2FF;
  --clip-04: #DFEEFF;
  --clip-05: #D5EAFF;
  --clip-06: #CADEFF;
  --clip-07: #C0D7FF;
  --clip-08: #A8CDFF;
  --clip-09: #91C4FF;
  --clip-10: #63B5FF;
  --clip-11: #1889FF;
  --clip-12: var(--clip);
  --clip-13: #0054CC;
  --clip-14: #003F99;
  --clip-15: #002E72;
  --clip-16: #00184D;

  --delay: #7126FF;
  --delay-01: #FDFDFF;
  --delay-02: #F8F7FF;
  --delay-03: #F3F1FF;
  --delay-04: #EFECFF;
  --delay-05: #E9E5FF;
  --delay-06: #E4DEFF;
  --delay-07: #DFD9FF;
  --delay-08: #D4CCFF;
  --delay-09: #C7BCFF;
  --delay-10: #AA95FF;
  --delay-11: #9474FF;
  --delay-12: #8051FF;
  --delay-13: var(--delay);
  --delay-14: #5700D1;
  --delay-15: #3B0093;
  --delay-16: #1C004F;

  --stickz-gradient:
    linear-gradient(
      100deg,
      hsl(14deg 100% 64%) 4%,
      hsl(13deg 100% 64%) 7%,
      hsl(12deg 100% 64%) 9%,
      hsl(11deg 100% 64%) 12%,
      hsl(10deg 100% 64%) 15%,
      hsl(9deg 100% 64%) 19%,
      hsl(8deg 100% 64%) 22%,
      hsl(7deg 100% 64%) 26%,
      hsl(6deg 100% 64%) 29%,
      hsl(4deg 100% 64%) 33%,
      hsl(3deg 100% 64%) 37%,
      hsl(2deg 100% 64%) 41%,
      hsl(0deg 100% 64%) 45%,
      hsl(350deg 90% 62%) 49%,
      hsl(341deg 81% 60%) 54%,
      hsl(333deg 73% 58%) 58%,
      hsl(324deg 65% 56%) 62%,
      hsl(314deg 57% 54%) 67%,
      hsl(303deg 49% 52%) 71%,
      hsl(291deg 54% 53%) 76%,
      hsl(281deg 62% 56%) 81%,
      hsl(272deg 71% 58%) 86%,
      hsl(264deg 80% 60%) 90%,
      hsl(256deg 90% 62%) 95%,
      hsl(249deg 100% 64%) 100%
    );

  --ff-inter: InterVar,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,sans-serif;
  --ff-stickz: StickySans,InterVar,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,sans-serif;

  --ff-i-10-w4: 450;
  --ff-i-10-w5: 530;
  --ff-i-10-w6: 612;
  --ff-i-10-w7: 680;
  --ff-i-10-sp4: 0.0204rem;
  --ff-i-10-sp5: 0.010199999999999999rem;
  --ff-i-10-sp6: 0.0204rem;
  --ff-i-10-sp7: 0.010199999999999999rem;

  --ff-i-12-w4: 460;
  --ff-i-12-w5: 530;
  --ff-i-12-w6: 612;
  --ff-i-12-w7: 680;
  --ff-i-12-sp4: 0rem;
  --ff-i-12-sp5: 0rem;
  --ff-i-12-sp6: 0rem;
  --ff-i-12-sp7: 0rem;

  --ff-i-15-w4: 466;
  --ff-i-15-w5: 531;
  --ff-i-15-w6: 614;
  --ff-i-15-w7: 682;
  --ff-i-15-sp4: -0.0010666666666666667rem;
  --ff-i-15-sp5: -0.0005333333333333334rem;
  --ff-i-15-sp6: -0.0006rem;
  --ff-i-15-sp7: -0.0005333333333333334rem;

  --ff-i-17-w4: 468;
  --ff-i-17-w5: 533;
  --ff-i-17-w6: 616;
  --ff-i-17-w7: 684;
  --ff-i-17-sp4: -0.001411764705882353rem;
  --ff-i-17-sp5: -0.001411764705882353rem;
  --ff-i-17-sp6: -0.0007058823529411765rem;
  --ff-i-17-sp7: -0.0009411764705882353rem;

  --ff-i-19-w4: 448;
  --ff-i-19-w5: 529;
  --ff-i-19-w6: 605;
  --ff-i-19-w7: 691;
  --ff-i-19-sp4: -0.008052631578947369rem;
  --ff-i-19-sp5: -0.007105263157894737rem;
  --ff-i-19-sp6: -0.007484210526315789rem;
  --ff-i-19-sp7: -0.006821052631578947rem;

  --ff-i-21-w4: 438;
  --ff-i-21-w5: 527;
  --ff-i-21-w6: 611;
  --ff-i-21-w7: 692;
  --ff-i-21-sp4: -0.008714285714285714rem;
  --ff-i-21-sp5: -0.013214285714285715rem;
  --ff-i-21-sp6: -0.014371428571428571rem;
  --ff-i-21-sp7: -0.01302857142857143rem;

  --ff-i-24-w4: 428;
  --ff-i-24-w5: 525;
  --ff-i-24-w6: 618;
  --ff-i-24-w7: 696;
  --ff-i-24-sp4: -0.014rem;
  --ff-i-24-sp5: -0.017499999999999998rem;
  --ff-i-24-sp6: -0.0185rem;
  --ff-i-24-sp7: -0.0168rem;

  --ff-i-28-w6: 622;
  --ff-i-28-w7: 696;
  --ff-i-28-sp6: -0.019571428571428573rem;
  --ff-i-28-sp7: -0.01834285714285714rem;

  --ff-i-32-w6: 620;
  --ff-i-32-w7: 703;
  --ff-i-32-sp6: -0.020625rem;
  --ff-i-32-sp7: -0.0195rem;

  --ff-i-36-w6: 620;
  --ff-i-36-w7: 707;
  --ff-i-36-sp6: -0.0224rem;
  --ff-i-36-sp7: -0.0236rem;

  --ff-i-40-w6: 628;
  --ff-i-40-w7: 708;
  --ff-i-40-sp6: -0.0306rem;
  --ff-i-40-sp7: -0.030262499999999998rem;

  --ff-i-48-w6: 620;
  --ff-i-48-w7: 709;
  --ff-i-48-sp6: -0.0311375rem;
  --ff-i-48-sp7: -0.033897916666666666rem;

  --ff-i-56-w6: 624;
  --ff-i-56-w7: 712;
  --ff-i-56-sp6: -0.03050089285714286rem;
  --ff-i-56-sp7: -0.03050089285714286rem;

  --ff-i-64-w6: 620;
  --ff-i-64-w7: 716;
  --ff-i-64-sp6: -0.0300234375rem;
  --ff-i-64-sp7: -0.0300234375rem;

  --ff-i-72-w7: 716;
  --ff-i-72-sp7: -0.02555rem;

  --ff-i-80-w7: 717;
  --ff-i-80-sp7: -0.0245275rem;

  --ff-i-92-w7: 718;
  --ff-i-92-sp7: -0.023348351648351647rem;

  --ff-ss-10-sp4: 0.009rem;
  --ff-ss-10-sp6: 0.016rem;
  --ff-ss-10-sp7: 0.016rem;

  --ff-ss-12-sp4: 0rem;
  --ff-ss-12-sp6: 0.006666666666666667rem;
  --ff-ss-12-sp7: 0.006666666666666667rem;

  --ff-ss-15-sp4: -0.0005333333333333334rem;
  --ff-ss-15-sp6: 0rem;
  --ff-ss-15-sp7: 0rem;

  --ff-ss-17-sp4: -0.0007058823529411765rem;
  --ff-ss-17-sp6: -0.00035294117647058826rem;
  --ff-ss-17-sp7: -0.00047058823529411766rem;

  --ff-ss-19-sp4: -0.004026315789473684rem;
  --ff-ss-19-sp6: -0.0037421052631578947rem;
  --ff-ss-19-sp7: -0.0034105263157894737rem;

  --ff-ss-21-sp4: -0.004357142857142857rem;
  --ff-ss-21-sp6: -0.007185714285714286rem;
  --ff-ss-21-sp7: -0.006514285714285715rem;

  --ff-ss-24-sp4: -0.007rem;
  --ff-ss-24-sp6: -0.00925rem;
  --ff-ss-24-sp7: -0.0084rem;

  --ff-ss-28-sp6: -0.009785714285714286rem;
  --ff-ss-28-sp7: -0.00917142857142857rem;

  --ff-ss-32-sp6: -0.0103125rem;
  --ff-ss-32-sp7: -0.00975rem;

  --ff-ss-36-sp6: -0.0112rem;
  --ff-ss-36-sp7: -0.0118rem;

  --ff-ss-40-sp6: -0.0153rem;
  --ff-ss-40-sp7: -0.015131249999999999rem;

  --ff-ss-48-sp6: -0.01556875rem;
  --ff-ss-48-sp7: -0.016948958333333333rem;

  --ff-ss-56-sp6: -0.01525044642857143rem;
  --ff-ss-56-sp7: -0.015875rem;

  --ff-ss-64-sp6: -0.01501171875rem;
  --ff-ss-64-sp7: -0.01501171875rem;

  --ff-ss-72-sp7: -0.013266666666666668rem;

  --ff-ss-80-sp7: -0.012765000000000002rem;

  --ff-ss-92-sp7: -0.012053260869565218rem;

  --ff-10-s: 0.625rem;
  --ff-10-hs: 1.4em;
  --ff-10-hm: 1.6em;
  --ff-10-hl: 1.8em;

  --ff-12-s: 0.75rem;
  --ff-12-hs: 1.3333333333333333em;
  --ff-12-hm: 1.5em;
  --ff-12-hl: 1.6666666666666667em;

  --ff-15-s: 0.9375rem;
  --ff-15-hs: 1.3333333333333333em;
  --ff-15-hm: 1.4666666666666666em;
  --ff-15-hl: 1.6em;

  --ff-17-s: 1.0625rem;
  --ff-17-hs: 1.2941176470588236em;
  --ff-17-hm: 1.4235294117647058em;
  --ff-17-hl: 1.5294117647058822em;

  --ff-19-s: 1.1875rem;
  --ff-19-hs: 1.263157894736842em;
  --ff-19-hm: 1.394736842105263em;
  --ff-19-hl: 1.4736842105263157em;

  --ff-21-s: 1.3125rem;
  --ff-21-hs: 1.2380952380952381em;
  --ff-21-hm: 1.369047619047619em;
  --ff-21-hl: 1.4285714285714286em;

  --ff-24-s: 1.5rem;
  --ff-24-hs: 1.1666666666666667em;
  --ff-24-hm: 1.3em;
  --ff-24-hl: 1.3333333333333333em;

  --ff-28-s: 1.75rem;
  --ff-28-hs: 1.1428571428571428em;
  --ff-28-hm: 1.2714285714285714em;
  --ff-28-hl: 1.2857142857142858em;

  --ff-32-s: 2rem;
  --ff-32-hs: 1.125em;
  --ff-32-hm: 1.25em;
  --ff-32-hl: 1.25em;

  --ff-36-s: 2.25rem;
  --ff-36-hs: 1.1111111111111112em;
  --ff-36-hm: 1.2333333333333334em;
  --ff-36-hl: 1.2222222222222223em;

  --ff-40-s: 2.5rem;
  --ff-40-hs: 1.1em;
  --ff-40-hm: 1.22em;
  --ff-40-hl: 1.2em;

  --ff-48-s: 3rem;
  --ff-48-hs: 1.0833333333333333em;
  --ff-48-hm: 1.2em;
  --ff-48-hl: 1.1666666666666667em;

  --ff-56-s: 3.5rem;
  --ff-56-hs: 1.0714285714285714em;
  --ff-56-hm: 1.1857142857142857em;
  --ff-56-hl: 1.1428571428571428em;

  --ff-64-s: 4rem;
  --ff-64-hs: 1.0625em;
  --ff-64-hm: 1.175em;
  --ff-64-hl: 1.125em;

  --ff-72-s: 4.5rem;
  --ff-72-hs: 1.0555555555555556em;
  --ff-72-hm: 1.0833333333333333em;
  --ff-72-hl: 1.1111111111111112em;

  --ff-80-s: 5rem;
  --ff-80-hs: 1.05em;
  --ff-80-hm: 1.075em;
  --ff-80-hl: 1.1em;

  --ff-92-s: 5.75rem;
  --ff-92-hs: 1.0434782608695652em;
  --ff-92-hm: 1.065217391304348em;
  --ff-92-hl: 1.0869565217391304em; 

  --s-light-bevel:
          1px 0px 0px 0px rgba(0, 0, 0, 0.14) inset,
          -1px 0px 0px 0px rgba(0, 0, 0, 0.14) inset,
          0px -1px 0px 0px rgba(0, 0, 0, 0.16) inset,
          0px 1px 0px 0px rgba(206, 206, 207, 0.50) inset;
  --s-dark-bevel: 
      1px 0px 0px 0px rgba(0, 0, 0, 0.60) inset,
      -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset,
      0px -1px 0px 0px rgba(0, 0, 0, 0.80) inset,
      0px 1px 0px 0px rgba(206, 206, 207, 0.20) inset;

  --s-light-100: 0px 1px 0px 0px rgba(0, 0, 0, 0.08);
  --s-light-200: 0px 3px 1px -1px rgba(0, 0, 0, 0.08);
  --s-light-300: 0px 4px 6px -2px rgba(0, 0, 0, 0.20);
  --s-light-400: 0px 8px 16px -4px rgba(0, 0, 0, 0.22);
  --s-light-500: 0px 12px 20px -8px rgba(0, 0, 0, 0.24);
  --s-light-600: 0px 20px 20px -8px rgba(0, 0, 0, 0.28);

  --s-dark-100: 0px 1px 0px 0px rgba(0, 0, 0, 0.40);
  --s-dark-200: 0px 3px 1px -1px rgba(0, 0, 0, 0.40);
  --s-dark-300: 0px 4px 6px -2px rgba(0, 0, 0, 0.80);
  --s-dark-400: 0px 8px 16px -4px rgba(0, 0, 0, 0.84);
  --s-dark-500: 0px 12px 20px -8px rgba(0, 0, 0, 0.88);
  --s-dark-600: 0px 20px 20px -8px rgba(0, 0, 0, 0.92);

  --t-fast: 100ms;
  --t-base: 200ms;
  --t-slow: 300ms;
  --t-slower: 450ms;
  --t-slowest: 675ms;
  --t-reduced-motion: 1ms;
  --t-animation: 1s;
  --t-timing: cubic-bezier(0.4,0.0,0.2,1);
  --t-ease: cubic-bezier(0.3,0.7,0.4,1);
  --t-spring: cubic-bezier(0.3,0.7,0.4,1.5);

  --container: 80rem;
  --container-compact: 68rem;
  --dynamic-padding: 2.5rem;
}

@media screen and (max-width: 999px) {
  :root {
    --dynamic-padding: 5vw;
  }
}

.light-bevel::before,
.dark-bevel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: luminosity;
}

.light-bevel::before {
  box-shadow: var(--s-light-bevel);
}

.dark-bevel::before {
  box-shadow: var(--s-dark-bevel);
}

@media (prefers-reduced-motion) {
  :root {
    --t-fast: var(--t-reduced-motion);
    --t-base: var(--t-reduced-motion);
    --t-slow: var(--t-reduced-motion);
    --t-slower: var(--t-reduced-motion);
    --t-slowest: var(--t-reduced-motion);
    --t-animation: 2s;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
  
body {
  -webkit-font-smoothing: subpixel-antialiased;
  font: normal var(--ff-i-15-w4) var(--ff-15-s) / var(--ff-15-hl) var(--ff-inter) !important;
  letter-spacing: var(--ff-i-15-sp4);
  font-feature-settings: 'liga' 1, 'calt' 1;
}

body, #cs-content {
  background-color: var(--_body);
  isolation: isolate;
}
  
body, html {
  min-width: 320px;
}

.x-text :is(strong, b) {
  font-weight: var(--ff-i-15-w7);
  letter-spacing: var(--ff-i-15-sp7);
  margin-right: calc(var(--ff-i-15-sp7)* -1);
}

.x-text a,
.emphasized-link span[class*="text-primary"] {
  --_color: var(--_highlight, var(--clip));
  position: relative;
  display: inline-block;
  z-index: 1;
  transition: 
  	color var(--t-base) var(--t-timing);
}

.x-text a::before,
.emphasized-link span[class*="text-primary"]::before {
  content: '';
  position: absolute;
  display: block;
  z-index: -1;
  height: 0.125rem;
  width: calc(100% + 0rem);
  inset: auto auto 0rem 0rem;
  background-color: var(--_color);
  border-radius: 0.5rem;
  transition: 
  	inset var(--t-base) var(--t-timing),
    background-color var(--t-base) var(--t-timing),
    height var(--t-base) var(--t-timing), 
    width var(--t-base) var(--t-timing);
}

.x-text a:is(:hover,:focus,:active)::before,
.emphasized-link span[class*="text-primary"]:is(:hover,:focus,:active)::before {
  height: 100%;
  width: calc(100% + 0.75rem);
  inset: auto auto 0rem -0.375rem;
}

.x-text a:active::before,
.emphasized-link span[class*="text-primary"]:active::before {
  background-color: color-mix(in srgb,var(--_color) 60%,var(--black) 40%);
}
  
.x-text a:is(:hover,:focus,:active),
.emphasized-link span[class*="text-primary"]:is(:hover,:focus,:active) {
  color: color-mix(in srgb,var(--white) 90%,var(--_color) 10%);
}

.highlight-invert .x-text a:is(:hover,:focus,:active),
.highlight-invert .emphasized-link span[class*="text-primary"]:is(:hover,:focus,:active) {
  color: color-mix(in srgb,var(--black) 90%,var(--_color) 10%);
}

.x-text .highlight {
  background-color: var(--_highlight, var(--wave));
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
  text-wrap: nowrap
}

.inline-icon a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.box-border::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: lighten;
  box-shadow: 0 0 0 0.094rem color-mix(in srgb, var(--black) 85%, var(--white) 15%);
}

.box-border:is(.scheme-white)::before {
  mix-blend-mode: darken;
  box-shadow: 0 0 0 0.094rem color-mix(in srgb, var(--white) 85%, var(--black) 15%);
}

.box-border:is(.scheme-grey)::before {
  mix-blend-mode: darken;
  box-shadow: 0 0 0 0.094rem color-mix(in srgb, var(--white) 70%, var(--black) 30%);
}

.box-border:is(.scheme-blue)::before {
  display: none;
  box-shadow: none;
}

.ui5-dropdown-material:is(.scheme-light) {
    --_bg: color-mix(in srgb, var(--input) 82%, transparent 18%);
    --_primary: var(--black); 
    --_secondary: color-mix(in srgb, var(--_primary) 60%, transparent 40%);
    --_depth-01: color-mix(in srgb, var(--_primary) 6%, transparent 94%);
    --_depth-02: color-mix(in srgb, var(--_primary) 12%, transparent 88%);
}

.ui5-dropdown-material:is(.scheme-dark) {
    --_bg: color-mix(in srgb, var(--freq) 82%, transparent 18%);
    --_primary: var(--init); 
    --_secondary: color-mix(in srgb, var(--_primary) 60%, transparent 40%);
    --_depth-01: color-mix(in srgb, var(--_primary) 6%, transparent 94%);
    --_depth-02: color-mix(in srgb, var(--_primary) 12%, transparent 88%);
}

.ui5-dropdown-material.x-dropdown:not(.x-active) {
    display: flex;
}

.ui5-dropdown-material {
  transition:
    opacity var(--t-slower) var(--t-timing),
    transform var(--t-slower) var(--t-timing) var(--t-slower),
    filter var(--t-slower) var(--t-timing);
	transform: translate3d(0, -20%, 0) scale(0.909);
  filter: blur(2px);

  box-shadow: var(--s-light-400);
  -webkit-backdrop-filter: blur(20px) saturate(2);
  backdrop-filter: blur(20px) saturate(2);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.25rem;
  max-width: 15rem;
  border-radius: 0.906rem;
  padding-block: 0.375rem;
  padding-inline: 0;
  background-color: var(--_bg);
}

.ui5-dropdown-material.scheme-dark {
  box-shadow: var(--s-dark-400);
}

.ui5-dropdown-material[data-x-stem*=u] {
  transform: translate3d(0, 20%, 0) scale(0.909);
}

.ui5-dropdown-material:is(.x-active-animate) {
  transition:
    opacity var(--t-slower) var(--t-timing),
    transform var(--t-slow) var(--t-spring),
    filter var(--t-slower) var(--t-timing);
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px);
}

.ui5-dropdown-material[data-x-stem="dl"] {
  margin-block: 0.25rem 0;
  margin-inline: 0 -1rem;
}

.ui5-dropdown-material[data-x-stem="ul"] {
  margin-block: 0 0.25rem;
  margin-inline: 0 -1rem;
}

.ui5-dropdown-material[data-x-stem="dr"] {
  margin-block: 0.25rem 0;
  margin-inline: -1rem 0;
}

.ui5-dropdown-material[data-x-stem="ur"] {
  margin-block: 0 0.25rem;
  margin-inline: -1rem 0;
}

body:is(.cart-active) .ui5-dropdown-material,
body:is(.nav-active) .ui5-dropdown-material {
  opacity: 0;
}

.ui5-modal-material.x-modal:is(.scheme-light) {
    --_bg: var(--white);
    --_overlay: color-mix(in srgb,var(--detune) 80%,transparent 20%);
    --_shadow: var(--s-light-600);
    --_primary: var(--black);
    --_secondary: var(--phase);
    --_tertiary: var(--black);
    --_highlight: var(--clip);
}

.ui5-modal-material.x-modal:is(.scheme-dark) {
    --_bg: var(--freq);
    --_overlay: color-mix(in srgb,var(--osc) 80%,transparent 20%);
    --_shadow: 0px 28px 40px -16px rgba(0, 0, 0, 0.8), var(--s-dark-600);
    --_primary: var(--detune);
    --_secondary: var(--phase);
    --_tertiary: var(--stereo);
    --_highlight: var(--clip);
}

.ui5-modal-material.x-modal {
    --_depth-01: color-mix(in srgb,var(--_primary) 8%,transparent 92%);
    --_depth-02: color-mix(in srgb,var(--_primary) 16%,transparent 84%);
    transition: 
        opacity calc(var(--t-slower)* 2) var(--t-timing) var(--t-slower),
        visibility calc(var(--t-slower)* 2) var(--t-timing) var(--t-slower);
    opacity: 1;
}

.ui5-modal-material.x-modal:is(.x-active) {
    transition:
        opacity 0ms var(--t-timing) 0ms,
        visibility 0ms var(--t-timing) 0ms;
}

.ui5-modal-material.x-modal .x-modal-bg {
    -webkit-backdrop-filter: blur(6px) saturate(2);
    backdrop-filter: blur(6px) saturate(2);

    transition: 
        opacity var(--t-slower) var(--t-timing) var(--t-slower),
        visibility var(--t-slower) step-end var(--t-slower);
    transform: none;
    visibility: hidden;
    opacity: 0;
}

.ui5-modal-material.x-modal:is(.x-active) .x-modal-bg {
  transition: 
    opacity var(--t-slower) var(--t-timing) 0ms,
    visibility var(--t-slower) step-start 0ms;
  transform: none;
  visibility: visible;
  opacity: 1;
}

.ui5-modal-material.x-modal .x-modal-content {
  padding-block: var(--_padding-block, 2.5rem);
  padding-inline: var(--_padding-inline, 0);
  width: 100%;
  max-width: var(--_max-width, 42.5rem);

  transition:
    opacity var(--t-slower) var(--t-timing) 0ms,
    transform var(--t-slower) var(--t-timing) var(--t-slower),
    filter var(--t-slower) var(--t-timing) 0ms,
    visibility var(--t-slower) step-end 0ms;
  transform: translate3d(0, 20%, 0) scale(0.909);
  filter: blur(8px);
  visibility: hidden;
  opacity: 0;
}

.ui5-modal-material.x-modal:is(.x-active) .x-modal-content {
  transition:
    opacity var(--t-slower) var(--t-timing) var(--t-slower),
    transform var(--t-slower) var(--t-timing) var(--t-slower),
    filter var(--t-slower) var(--t-timing) var(--t-slower),
    visibility var(--t-slower) step-start var(--t-slower);
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px);
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 749px) {
  .ui5-modal-material.x-modal .x-modal-content {
    padding-inline: var(--dynamic-padding);
  }
}

.ui5-modal-material .modal-container {
  box-shadow: var(--_shadow);
  background-color: var(--_bg);
  border-radius: 2rem;
  padding-top: var(--_container-padding-top, 0);
  padding-right: var(--_container-padding-right, 5rem);
  padding-bottom: var(--_container-padding-bottom, 3.75rem);
  padding-left: var(--_container-padding-left, 5rem);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: stretch;
}

@media screen and (min-width: 750px) and (max-width: 999px) {
  .ui5-modal-material .modal-container {
    border-radius: 1.75rem;
  }
}

@media screen and (max-width: 749px) {
  .ui5-modal-material .modal-container {
    border-radius: 1.25rem;
    padding-right: var(--_container-padding-right, 1.5rem);
    padding-left: var(--_container-padding-left, 1.5rem);
  }
}

.ui5-modal-material.x-modal:focus-visible,
.ui5-modal-material.x-modal .x-modal-content-scroll-area:focus-visible {
	outline: none !important;
}

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

.tw-pretty {
  text-wrap: pretty;
}

input:where([type="text"], [type="email"], [type="number"]),
select {
  font: inherit;
  line-height: var(--ff-15-hs);
  letter-spacing: inherit;
  color: var(--black);
  text-overflow: ellipsis;

  position: relative;
  padding-block: 0.875rem;
  padding-inline: 1.25rem;
  margin: 0;
  min-width: 0px;
  width: 100%;
  max-width: none;

  background-color: var(--white);
  border: 1.5px solid var(--detune);
  border-radius: 0.5rem;

  box-shadow: none;
  outline: none;

  -webkit-appearance: none; 
  -moz-appearance: none;
  appearance: none;

  transition:
    border var(--t-base) var(--t-timing),
    box-shadow var(--t-base) var(--t-timing);
}

select {
  padding-inline-start: 1.25rem;
  padding-inline-end: 2rem;
}

input:where([type="text"], [type="email"], [type="number"]):hover,
select:hover {
  border-color: var(--black);
}
  
input:where([type="text"], [type="email"], [type="number"]):is(:active,:focus,:focus-visible),
select:is(:active,:focus,:focus-visible) {
  border-color: var(--clip);
  box-shadow: 0 0 0 1.5px var(--clip);
}

/* Input Label Styles - If label comes after input */
input:where([type="text"], [type="email"], [type="number"]) + label,
select + label {
  font: inherit;
  line-height: var(--ff-15-hs);
  letter-spacing: inherit;
  color: var(--phase);
  text-overflow: ellipsis;
  white-space: nowrap;

  position: absolute;
  inset: 0.938rem auto auto 1rem;
  padding-inline: 0.375rem;
  padding-block: 0;
  margin: 0;
  width: auto;
  max-width: calc(100% - 2.5rem);

  background-color: var(--white);
  pointer-events: none;
  overflow: hidden;

  transition: 
  	color var(--t-base) var(--t-timing),
    inset var(--t-base) var(--t-timing),
    font var(--t-base) var(--t-timing);
}

input:where([type="text"], [type="email"], [type="number"]):focus + label, 
input:where([type="text"], [type="email"], [type="number"]):not(:placeholder-shown) + label,
select:focus + label, 
select:not(:placeholder-shown) + label {
  font-size: var(--ff-12-s);
  font-weight: var(--ff-i-12-w4);
  letter-spacing: var(--ff-i-12-sp4);
  line-height: var(--ff-12-hs);

  inset: -0.5rem auto auto 1rem;
}

input:where([type="text"], [type="email"], [type="number"]):where(:hover):not(:placeholder-shown) + label,
select:where(:hover):not(:placeholder-shown) + label {
  color: var(--black);
}

.input-wrapper {
  position: relative;
}

.input-wrapper:focus-within label {
  color: var(--clip);

  font-weight: var(--ff-i-12-w6);
  letter-spacing: var(--ff-i-12-sp6);
}

select ~ .dropdown-chevron {
  pointer-events: none;
  position: absolute;
  inset: 0.875rem 1rem auto auto;
  width: 0.75rem;
  height: 1.5rem;
  color: var(--black);
}

input:where([type="text"], [type="email"], [type="number"]) ~ .dropdown-chevron {
  display: none;
}

button[type="submit"] {
  font: inherit;
  font-weight: var(--ff-i-15-w5);
  line-height: var(--ff-15-hm);
  letter-spacing: inherit;
  margin: 0;
  margin-right: calc(var(--ff-i-15-sp5)* -1);
  color: color-mix(in srgb,var(--white) 90%,var(--black) 10%);
  text-align: center;
  white-space: nowrap;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 0.5rem;
  padding-inline: 1rem;

  background-color: var(--black);
  border-radius: 4rem;
  border: none;

  transition:
    background-color var(--t-base) var(--t-timing);
}

button[type="submit"]:is(:hover,:focus) {
  background-color: color-mix(in srgb,var(--black) 80%,var(--init) 20%);
}

button[type="submit"]:active {
  background-color: var(--black);
}

button[type="submit"]:not([data-busy="true"]):disabled {
  color: color-mix(in srgb,var(--white) 60%,var(--black) 40%);
  background-color: color-mix(in srgb,var(--black) 10%,var(--white) 90%);
}
  
button[type="submit"]:disabled {
  cursor: default;
}

.not-busy {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  filter: blur(0px);
  transition:
    opacity var(--t-base) var(--t-timing),
    filter var(--t-base) var(--t-timing);
}

[data-busy="true"] .not-busy {
  opacity: 0;
  filter: blur(8px);
}

.is-busy svg {
  display: flex;
}

.is-busy {
  width: 1.063rem;
  height: 1.063rem;
  position: absolute;
  margin-block: 0;
  margin-inline: auto;
  animation: loader-spin var(--t-animation) var(--t-timing) infinite;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--t-base) var(--t-timing) calc(var(--t-base) / 2),
    filter var(--t-base) var(--t-timing) calc(var(--t-base) / 2);
}

[data-busy="true"] .is-busy {
  opacity: 1;
  filter: blur(0px);
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wavesurfer {
	display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.wavesurfer div:not(.waveform-controls) {
  flex: 1;
}

.waveform-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

.waveform-controls button {
  width: 1.5rem;
  height: 1.5rem;
  opacity: 1;
  filter: blur(0px);
  margin: 0;
  padding: 0;
  font: inherit;
  background: none;
  color: var(--wave-controls);
  transition:
    color var(--t-base) var(--t-timing),
    transform var(--t-base) var(--t-ease);
}

.waveform-controls button:hover {
  color: var(--wave-controls-hover);
  transform: scale(1.0808);
}

.waveform-controls button > div {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.wavesurfer[data-state="playing"] .play-button,
.wavesurfer:not([data-state="playing"]) .pause-button {
  display: none;
  visibility: hidden;
}

/* 
.x-ttf,.x-div,.x-row,.x-col,.x-grid,.x-cell,.x-section,.x-acc-header,.x-acc-header-indicator,.x-crumbs-link,.x-paginate-inner>*,.x-anchor,.x-anchor-text-primary,.x-anchor-text-secondary,.x-anchor-sub-indicator,.x-anchor.has-int-content .x-anchor-content,.x-bar-is-sticky,.x-bar-is-sticky .x-bar-content,[data-x-toggle-collapse],.x-graphic-child,.x-image,.x-line,.x-mini-cart li,.x-mini-cart a:not(.x-anchor),.x-modal-close,.x-search,.x-search-btn,.x-search-input,.x-icon,.x-text,.x-text-content-text-primary,.x-text-content-text-subheadline,.x-text-typing,.x-typed-cursor,.x-menu-first-level,.x-menu-layered:not(.x-menu-first-level),.x-card,.x-card-faces,.x-statbar,.x-statbar-bar,.x-statbar-label,.x-wc-add-to-cart-form,.x-wc-shop-sort,[data-x-particle],.x-bar,.x-bar-scroll-button,.x-bar-container,.x-slide,.x-slide-pagination,.x-slide-pagination li {
  transition-timing-function: var(--t-timing);
}

.x-td,.x-div,.x-row,.x-col,.x-grid,.x-cell,.x-section,.x-acc-header,.x-acc-header-indicator,.x-crumbs-link,.x-paginate-inner>*,.x-anchor,.x-anchor-text-primary,.x-anchor-text-secondary,.x-anchor-sub-indicator,.x-anchor.has-int-content .x-anchor-content,.x-bar-is-sticky,.x-bar-is-sticky .x-bar-content,[data-x-toggle-collapse],.x-graphic-child,.x-image,.x-line,.x-mini-cart li,.x-mini-cart a:not(.x-anchor),.x-modal-close,.x-search,.x-search-btn,.x-search-input,.x-icon,.x-text,.x-text-content-text-primary,.x-text-content-text-subheadline,.x-text-typing,.x-typed-cursor,.x-menu-first-level,.x-menu-layered:not(.x-menu-first-level),.x-wc-add-to-cart-form,.x-wc-shop-sort,[data-x-particle],.x-bar,.x-bar-scroll-button,.x-bar-container,.x-slide,.x-slide-pagination,.x-slide-pagination li {
  transition-duration: var(--t-base);
} */