@layer zui.reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
  }

  #root {
    isolation: isolate;
  }
}

@layer zui.base {
  :root {
    --animation-fade-in: fade-in .5s var(--ease);
    --animation-fade-out: fade-out .5s var(--ease);
    --animation-scale-up: scale-up .5s var(--ease);
    --animation-scale-down: scale-down .5s var(--ease);
    --animation-slide-out-up: slide-out-up .5s var(--ease);
    --animation-slide-out-down: slide-out-down .5s var(--ease);
    --animation-slide-out-right: slide-out-right .5s var(--ease);
    --animation-slide-out-left: slide-out-left .5s var(--ease);
    --animation-slide-in-up: slide-in-up .5s var(--ease);
    --animation-slide-in-down: slide-in-down .5s var(--ease);
    --animation-slide-in-right: slide-in-right .5s var(--ease);
    --animation-slide-in-left: slide-in-left .5s var(--ease);
    --animation-shake-x: shake-x .75s var(--ease-out);
    --animation-shake-y: shake-y .75s var(--ease-out);
    --animation-shake-z: shake-z 1s var(--ease-in-out);
    --animation-spin: spin 2s linear infinite;
    --animation-ping: ping 5s var(--ease-out) infinite;
    --animation-blink: blink 1s var(--ease-out) infinite;
    --animation-float: float 3s var(--ease-in-out) infinite;
    --animation-bounce: bounce 2s var(--ease-squish) infinite;
    --animation-pulse: pulse 2s var(--ease-out) infinite;
  }

  @keyframes fade-in {
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  @keyframes scale-up {
    to {
      transform: scale(1.25);
    }
  }

  @keyframes scale-down {
    to {
      transform: scale(.75);
    }
  }

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

  @keyframes slide-out-down {
    to {
      transform: translateY(100%);
    }
  }

  @keyframes slide-out-right {
    to {
      transform: translateX(100%);
    }
  }

  @keyframes slide-out-left {
    to {
      transform: translateX(-100%);
    }
  }

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

  @keyframes slide-in-down {
    from {
      transform: translateY(-100%);
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(-100%);
    }
  }

  @keyframes slide-in-left {
    from {
      transform: translateX(100%);
    }
  }

  @keyframes shake-x {
    0%, 100% {
      transform: translateX(0%);
    }

    20% {
      transform: translateX(-5%);
    }

    40% {
      transform: translateX(5%);
    }

    60% {
      transform: translateX(-5%);
    }

    80% {
      transform: translateX(5%);
    }
  }

  @keyframes shake-y {
    0%, 100% {
      transform: translateY(0%);
    }

    20% {
      transform: translateY(-5%);
    }

    40% {
      transform: translateY(5%);
    }

    60% {
      transform: translateY(-5%);
    }

    80% {
      transform: translateY(5%);
    }
  }

  @keyframes shake-z {
    0%, 100% {
      transform: rotate(0);
    }

    20% {
      transform: rotate(-2deg);
    }

    40% {
      transform: rotate(2deg);
    }

    60% {
      transform: rotate(-2deg);
    }

    80% {
      transform: rotate(2deg);
    }
  }

  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes ping {
    90%, 100% {
      opacity: 0;
      transform: scale(2);
    }
  }

  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }

    50% {
      opacity: .5;
    }
  }

  @keyframes float {
    50% {
      transform: translateY(-25%);
    }
  }

  @keyframes bounce {
    25% {
      transform: translateY(-20%);
    }

    40% {
      transform: translateY(-3%);
    }

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

  @keyframes pulse {
    50% {
      transform: scale(.9);
    }
  }

  :root {
    --ratio-square: 1;
    --ratio-landscape: 4/3;
    --ratio-portrait: 3/4;
    --ratio-widescreen: 16/9;
    --ratio-ultrawide: 18/5;
    --ratio-golden: 1.618/1;
    --color-inherit: inherit;
    --color-current: currentcolor;
    --color-transparent: transparent;
    --color-black: #000;
    --color-white: #fff;
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-gray-950: oklch(13% .028 261.692);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% .001 286.375);
    --color-zinc-200: oklch(92% .004 286.32);
    --color-zinc-300: oklch(87.1% .006 286.286);
    --color-zinc-400: oklch(70.5% .015 286.067);
    --color-zinc-500: oklch(55.2% .016 285.938);
    --color-zinc-600: oklch(44.2% .017 285.786);
    --color-zinc-700: oklch(37% .013 285.805);
    --color-zinc-800: oklch(27.4% .006 286.033);
    --color-zinc-900: oklch(21% .006 285.885);
    --color-zinc-950: oklch(14.1% .005 285.823);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-stone-50: oklch(98.5% .001 106.423);
    --color-stone-100: oklch(97% .001 106.424);
    --color-stone-200: oklch(92.3% .003 48.717);
    --color-stone-300: oklch(86.9% .005 56.366);
    --color-stone-400: oklch(70.9% .01 56.259);
    --color-stone-500: oklch(55.3% .013 58.071);
    --color-stone-600: oklch(44.4% .011 73.639);
    --color-stone-700: oklch(37.4% .01 67.558);
    --color-stone-800: oklch(26.8% .007 34.298);
    --color-stone-900: oklch(21.6% .006 56.043);
    --color-stone-950: oklch(14.7% .004 49.25);
    --color-mauve-50: oklch(98.5% 0 0);
    --color-mauve-100: oklch(96% .003 325.6);
    --color-mauve-200: oklch(92.2% .005 325.62);
    --color-mauve-300: oklch(86.5% .012 325.68);
    --color-mauve-400: oklch(71.1% .019 323.02);
    --color-mauve-500: oklch(54.2% .034 322.5);
    --color-mauve-600: oklch(43.5% .029 321.78);
    --color-mauve-700: oklch(36.4% .029 323.89);
    --color-mauve-800: oklch(26.3% .024 320.12);
    --color-mauve-900: oklch(21.2% .019 322.12);
    --color-mauve-950: oklch(14.5% .008 326);
    --color-olive-50: oklch(98.8% .003 106.5);
    --color-olive-100: oklch(96.6% .005 106.5);
    --color-olive-200: oklch(93% .007 106.5);
    --color-olive-300: oklch(88% .011 106.6);
    --color-olive-400: oklch(73.7% .021 106.9);
    --color-olive-500: oklch(58% .031 107.3);
    --color-olive-600: oklch(46.6% .025 107.3);
    --color-olive-700: oklch(39.4% .023 107.4);
    --color-olive-800: oklch(28.6% .016 107.4);
    --color-olive-900: oklch(22.8% .013 107.4);
    --color-olive-950: oklch(15.3% .006 107.1);
    --color-mist-50: oklch(98.7% .002 197.1);
    --color-mist-100: oklch(96.3% .002 197.1);
    --color-mist-200: oklch(92.5% .005 214.3);
    --color-mist-300: oklch(87.2% .007 219.6);
    --color-mist-400: oklch(72.3% .014 214.4);
    --color-mist-500: oklch(56% .021 213.5);
    --color-mist-600: oklch(45% .017 213.2);
    --color-mist-700: oklch(37.8% .015 216);
    --color-mist-800: oklch(27.5% .011 216.9);
    --color-mist-900: oklch(21.8% .008 223.9);
    --color-mist-950: oklch(14.8% .004 228.8);
    --color-taupe-50: oklch(98.6% .002 67.8);
    --color-taupe-100: oklch(96% .002 17.2);
    --color-taupe-200: oklch(92.2% .005 34.3);
    --color-taupe-300: oklch(86.8% .007 39.5);
    --color-taupe-400: oklch(71.4% .014 41.2);
    --color-taupe-500: oklch(54.7% .021 43.1);
    --color-taupe-600: oklch(43.8% .017 39.3);
    --color-taupe-700: oklch(36.7% .016 35.7);
    --color-taupe-800: oklch(26.8% .011 36.5);
    --color-taupe-900: oklch(21.4% .009 43.1);
    --color-taupe-950: oklch(14.7% .004 49.3);
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-red-950: oklch(25.8% .092 26.042);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-300: oklch(83.7% .128 66.29);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-orange-800: oklch(47% .157 37.304);
    --color-orange-900: oklch(40.8% .123 38.172);
    --color-orange-950: oklch(26.6% .079 36.259);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-amber-950: oklch(27.9% .077 45.635);
    --color-yellow-50: oklch(98.7% .026 102.212);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-yellow-800: oklch(47.6% .114 61.907);
    --color-yellow-900: oklch(42.1% .095 57.708);
    --color-yellow-950: oklch(28.6% .066 53.813);
    --color-lime-50: oklch(98.6% .031 120.757);
    --color-lime-100: oklch(96.7% .067 122.328);
    --color-lime-200: oklch(93.8% .127 124.321);
    --color-lime-300: oklch(89.7% .196 126.665);
    --color-lime-400: oklch(84.1% .238 128.85);
    --color-lime-500: oklch(76.8% .233 130.85);
    --color-lime-600: oklch(64.8% .2 131.684);
    --color-lime-700: oklch(53.2% .157 131.589);
    --color-lime-800: oklch(45.3% .124 130.933);
    --color-lime-900: oklch(40.5% .101 131.063);
    --color-lime-950: oklch(27.4% .072 132.109);
    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-300: oklch(87.1% .15 154.449);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-green-900: oklch(39.3% .095 152.535);
    --color-green-950: oklch(26.6% .065 152.934);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-emerald-900: oklch(37.8% .077 168.94);
    --color-emerald-950: oklch(26.2% .051 172.552);
    --color-teal-50: oklch(98.4% .014 180.72);
    --color-teal-100: oklch(95.3% .051 180.801);
    --color-teal-200: oklch(91% .096 180.426);
    --color-teal-300: oklch(85.5% .138 181.071);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-teal-500: oklch(70.4% .14 182.503);
    --color-teal-600: oklch(60% .118 184.704);
    --color-teal-700: oklch(51.1% .096 186.391);
    --color-teal-800: oklch(43.7% .078 188.216);
    --color-teal-900: oklch(38.6% .063 188.416);
    --color-teal-950: oklch(27.7% .046 192.524);
    --color-cyan-50: oklch(98.4% .019 200.873);
    --color-cyan-100: oklch(95.6% .045 203.388);
    --color-cyan-200: oklch(91.7% .08 205.041);
    --color-cyan-300: oklch(86.5% .127 207.078);
    --color-cyan-400: oklch(78.9% .154 211.53);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-cyan-600: oklch(60.9% .126 221.723);
    --color-cyan-700: oklch(52% .105 223.128);
    --color-cyan-800: oklch(45% .085 224.283);
    --color-cyan-900: oklch(39.8% .07 227.392);
    --color-cyan-950: oklch(30.2% .056 229.695);
    --color-sky-50: oklch(97.7% .013 236.62);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-sky-400: oklch(74.6% .16 232.661);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-sky-600: oklch(58.8% .158 241.966);
    --color-sky-700: oklch(50% .134 242.749);
    --color-sky-800: oklch(44.3% .11 240.79);
    --color-sky-900: oklch(39.1% .09 240.876);
    --color-sky-950: oklch(29.3% .066 243.157);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-blue-950: oklch(28.2% .091 267.935);
    --color-indigo-50: oklch(96.2% .018 272.314);
    --color-indigo-100: oklch(93% .034 272.788);
    --color-indigo-200: oklch(87% .065 274.039);
    --color-indigo-300: oklch(78.5% .115 274.713);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-indigo-800: oklch(39.8% .195 277.366);
    --color-indigo-900: oklch(35.9% .144 278.697);
    --color-indigo-950: oklch(25.7% .09 281.288);
    --color-violet-50: oklch(96.9% .016 293.756);
    --color-violet-100: oklch(94.3% .029 294.588);
    --color-violet-200: oklch(89.4% .057 293.283);
    --color-violet-300: oklch(81.1% .111 293.571);
    --color-violet-400: oklch(70.2% .183 293.541);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-600: oklch(54.1% .281 293.009);
    --color-violet-700: oklch(49.1% .27 292.581);
    --color-violet-800: oklch(43.2% .232 292.759);
    --color-violet-900: oklch(38% .189 293.745);
    --color-violet-950: oklch(28.3% .141 291.089);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-200: oklch(90.2% .063 306.703);
    --color-purple-300: oklch(82.7% .119 306.383);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-purple-800: oklch(43.8% .218 303.724);
    --color-purple-900: oklch(38.1% .176 304.987);
    --color-purple-950: oklch(29.1% .149 302.717);
    --color-fuchsia-50: oklch(97.7% .017 320.058);
    --color-fuchsia-100: oklch(95.2% .037 318.852);
    --color-fuchsia-200: oklch(90.3% .076 319.62);
    --color-fuchsia-300: oklch(83.3% .145 321.434);
    --color-fuchsia-400: oklch(74% .238 322.16);
    --color-fuchsia-500: oklch(66.7% .295 322.15);
    --color-fuchsia-600: oklch(59.1% .293 322.896);
    --color-fuchsia-700: oklch(51.8% .253 323.949);
    --color-fuchsia-800: oklch(45.2% .211 324.591);
    --color-fuchsia-900: oklch(40.1% .17 325.612);
    --color-fuchsia-950: oklch(29.3% .136 325.661);
    --color-pink-50: oklch(97.1% .014 343.198);
    --color-pink-100: oklch(94.8% .028 342.258);
    --color-pink-200: oklch(89.9% .061 343.231);
    --color-pink-300: oklch(82.3% .12 346.018);
    --color-pink-400: oklch(71.8% .202 349.761);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-pink-600: oklch(59.2% .249 .584);
    --color-pink-700: oklch(52.5% .223 3.958);
    --color-pink-800: oklch(45.9% .187 3.815);
    --color-pink-900: oklch(40.8% .153 2.432);
    --color-pink-950: oklch(28.4% .109 3.907);
    --color-rose-50: oklch(96.9% .015 12.422);
    --color-rose-100: oklch(94.1% .03 12.58);
    --color-rose-200: oklch(89.2% .058 10.001);
    --color-rose-300: oklch(81% .117 11.638);
    --color-rose-400: oklch(71.2% .194 13.428);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-rose-600: oklch(58.6% .253 17.585);
    --color-rose-700: oklch(51.4% .222 16.935);
    --color-rose-800: oklch(45.5% .188 13.697);
    --color-rose-900: oklch(41% .159 10.272);
    --color-rose-950: oklch(27.1% .105 12.094);
    --ease: cubic-bezier(.25, 0, .5, 1);
    --ease-in: cubic-bezier(.25, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .75, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --ease-elastic-out: cubic-bezier(.5, .75, .75, 1.25);
    --ease-elastic-in: cubic-bezier(.5, -.25, .75, 1);
    --ease-elastic-in-out: cubic-bezier(.5, -.1, .1, 1.5);
    --ease-elastic: var(--ease-elastic-out);
    --ease-squish: var(--ease-elastic-in-out);
    --ease-spring: linear(0,
      .006,
      .025 2.8%,
      .101 6.1%,
      .539 18.9%,
      .721 25.3%,
      .849 31.5%,
      .937 38.1%,
      .968 41.8%,
      .991 45.7%,
      1.006 50.1%,
      1.015 55%,
      1.017 63.9%,
      1.001);
    --step--4: clamp(.6243rem, .6276rem + -.004vw, .6269rem);
    --step--3: clamp(.6689rem, .6585rem + .052vw, .7023rem);
    --step--2: clamp(.7137rem, .6899rem + .1188vw, .7901rem);
    --step--1: clamp(.7615rem, .7219rem + .1979vw, .8889rem);
    --step-0: clamp(.8125rem, .7542rem + .2913vw, 1rem);
    --step-1: clamp(.8669rem, .7868rem + .4009vw, 1.125rem);
    --step-2: clamp(.925rem, .8192rem + .5291vw, 1.2656rem);
    --step-3: clamp(.987rem, .8513rem + .6786vw, 1.4238rem);
    --step-4: clamp(1.0531rem, .8827rem + .8523vw, 1.6018rem);
    --step-5: clamp(1.1237rem, .9129rem + 1.0537vw, 1.802rem);
    --step-6: clamp(1.199rem, .9416rem + 1.2867vw, 2.0273rem);
    --step-7: clamp(1.2793rem, .9682rem + 1.5556vw, 2.2807rem);
    --step-8: clamp(1.365rem, .992rem + 1.8653vw, 2.5658rem);
    --step-9: clamp(1.4565rem, 1.0122rem + 2.2214vw, 2.8865rem);
    --step-10: clamp(1.5541rem, 1.028rem + 2.6303vw, 3.2473rem);
    --font-stack-sans: system-ui, sans-serif;
    --font-stack-serif: Charter, "Bitstream Charter", "Sitka Text", Georgia, Cambria, serif;
    --font-stack-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
      Consolas, "DejaVu Sans Mono", monospace;
    --font-weight-1: 100;
    --font-weight-2: 200;
    --font-weight-3: 300;
    --font-weight-4: 400;
    --font-weight-5: 500;
    --font-weight-6: 600;
    --font-weight-7: 700;
    --font-weight-8: 800;
    --font-weight-9: 900;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --letter-spacing-2xs: -.05em;
    --letter-spacing-xs: .025em;
    --letter-spacing-sm: .05em;
    --letter-spacing-md: .075em;
    --letter-spacing-lg: .15em;
    --letter-spacing-xl: .3em;
    --line-height-2xs: 1;
    --line-height-xs: 1.25;
    --line-height-sm: 1.375;
    --line-height-md: 1.5;
    --line-height-lg: 1.625;
    --line-height-xl: 2;
    --line-height-2xl: 1.625;
    --line-height-heading: 1.1;
    --radius-sm: calc(3px * var(--radius-scale));
    --radius-md: calc(5px * var(--radius-scale));
    --radius-lg: calc(6px * var(--radius-scale));
    --radius-xl: calc(8px * var(--radius-scale));
    --radius-2xl: calc(12px * var(--radius-scale));
    --radius-3xl: calc(16px * var(--radius-scale));
    --radius-full: calc(9999px * var(--radius-scale));
    --radius-round: 50%;
    --shadow-color: oklch(from var(--color-background) calc(l - .3) c h);
    --shadow-sm: 0 1px 2px 0 oklch(from var(--shadow-color) l c h / 5%);
    --shadow: 0 1px 3px 0 oklch(from var(--shadow-color) l c h / 10%),
      0 1px 2px -1px oklch(from var(--shadow-color) l c h / 10%);
    --shadow-md: 0 4px 6px -1px oklch(from var(--shadow-color) l c h / 10%),
      0 2px 4px -2px oklch(from var(--shadow-color) l c h / 10%);
    --shadow-lg: 0 10px 15px -3px oklch(from var(--shadow-color) l c h / 10%),
      0 4px 6px -4px oklch(from var(--shadow-color) l c h / 10%);
    --shadow-xl: 0 20px 25px -5px oklch(from var(--shadow-color) l c h / 10%),
      0 8px 10px -6px oklch(from var(--shadow-color) l c h / 10%);
    --shadow-2xl: 0 25px 50px -12px oklch(from var(--shadow-color) l c h / 25%);
    --size-0: 0;
    --size-px: 1px;
    --size-quarter: 25%;
    --size-third: 33.3333%;
    --size-half: 50%;
    --size-twothirds: 66.6667%;
    --size-threequarters: 75%;
    --size-fifth: 20%;
    --size-twofifths: 40%;
    --size-threefifths: 60%;
    --size-fourfifths: 80%;
    --size-full: 100%;
    --size-auto: auto;
    --size-svw: 100svw;
    --size-lvw: 100lvw;
    --size-dvw: 100dvw;
    --size-svh: 100svh;
    --size-lvh: 100lvh;
    --size-dvh: 100dvh;
    --size-min: min-content;
    --size-max: max-content;
    --size-fit: fit-content;
    --space-0: 0;
    --space-px: 1px;
    --space-5xs: clamp(.1875rem, .1681rem + .0971vw, .25rem);
    --space-4xs: clamp(.25rem, .2306rem + .0971vw, .3125rem);
    --space-3xs: clamp(.375rem, .3362rem + .1942vw, .5rem);
    --space-2xs: clamp(.5rem, .4612rem + .1942vw, .625rem);
    --space-xs: clamp(.75rem, .6917rem + .2913vw, .9375rem);
    --space-sm: clamp(1rem, .9223rem + .3883vw, 1.25rem);
    --space-md: clamp(1.5rem, 1.3835rem + .5825vw, 1.875rem);
    --space-lg: clamp(2rem, 1.8447rem + .7767vw, 2.5rem);
    --space-xl: clamp(3rem, 2.767rem + 1.165vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.6893rem + 1.5534vw, 5rem);
    --space-3xl: clamp(6rem, 5.534rem + 2.3301vw, 7.5rem);
    --space-5xs-4xs: clamp(.1875rem, .1487rem + .1942vw, .3125rem);
    --space-4xs-3xs: clamp(.25rem, .1723rem + .3883vw, .5rem);
    --space-3xs-2xs: clamp(.375rem, .2973rem + .3883vw, .625rem);
    --space-2xs-xs: clamp(.5rem, .3641rem + .6796vw, .9375rem);
    --space-xs-sm: clamp(.75rem, .5947rem + .7767vw, 1.25rem);
    --space-sm-md: clamp(1rem, .7282rem + 1.3592vw, 1.875rem);
    --space-md-lg: clamp(1.5rem, 1.1893rem + 1.5534vw, 2.5rem);
    --space-lg-xl: clamp(2rem, 1.4563rem + 2.7184vw, 3.75rem);
    --space-xl-2xl: clamp(3rem, 2.3786rem + 3.1068vw, 5rem);
    --space-2xl-3xl: clamp(4rem, 2.9126rem + 5.4369vw, 7.5rem);
    --space-sm-lg: clamp(1rem, .534rem + 2.3301vw, 2.5rem);
    --z--1: -1;
    --z-0: 0;
    --z-1: 1000;
    --z-2: 2000;
    --z-3: 3000;
    --z-4: 4000;
    --z-5: 5000;
    --z-6: 6000;
    --z-7: 7000;
    --z-8: 8000;
    --z-9: 9000;
    --z-important: 2147480000;
    --color-theme: light-dark(var(--color-mist-600), var(--color-mist-400));
    --color-accent: light-dark(var(--color-sky-600), var(--color-sky-400));
    --color-background: light-dark(var(--color-mist-200), var(--color-mist-800));
    --color-surface: light-dark(var(--color-mist-100), var(--color-mist-900));
    --color-border: light-dark(var(--color-mist-300), var(--color-mist-700));
    --color-text: light-dark(var(--color-mist-700), var(--color-mist-300));
    --color-success: light-dark(var(--color-emerald-600), var(--color-emerald-400));
    --color-error: light-dark(var(--color-red-600), var(--color-red-400));
    --color-warning: light-dark(var(--color-amber-600), var(--color-amber-400));
    --font-body: var(--font-stack-sans);
    --font-display: var(--font-body);
    --font-code: Geist Mono, var(--font-stack-mono);
    --line-height: var(--line-height-md);
    --radius-scale: 1;
    --border-style: solid;
  }

  :root.zui-dark {
    color-scheme: dark;
  }

  :root.zui-light {
    color-scheme: light;
  }

  html {
    color-scheme: light dark;
    font-family: var(--font-body);
    line-height: var(--line-height);
    min-height: 100dvh;
    color: var(--color-text);
    background-color: var(--color-background);
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    height: stretch;
    accent-color: var(--color-theme);
    margin: 0;
  }

  body {
    line-height: var(--line-height);
  }

  ::selection {
    background-color: light-dark(oklch(from var(--color-theme) calc(l - .1) c h), oklch(from var(--color-theme) calc(l + .1) c h / 30%));
    color: oklch(from var(--color-theme) calc(l + .7) c h);
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: light-dark(oklch(from var(--color-theme) calc(l - .1) c h), oklch(from var(--color-theme) calc(l + .1) c h / 30%)) transparent;
  }

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

@layer zui.components {
  .zui-button {
    --zui-btn-accent-fg: light-dark(oklch(from var(--zui-btn-accent) 1 calc(c - .2) h), oklch(from var(--zui-btn-accent) .3 calc(c - .2) h));
    --zui-btn-accent-hover: oklch(from var(--zui-btn-accent) calc(l - .1) c h);
    --zui-btn-accent-subtle-bg: oklch(from var(--zui-btn-accent) l c h / 15%);
    --zui-btn-accent-subtle-fg: oklch(from var(--zui-btn-accent) l c h);
    --zui-btn-accent-subtle-hover-bg: oklch(from var(--zui-btn-accent) l c h / 25%);
    --zui-btn-radius: var(--radius-lg);
    --zui-btn-border-style: var(--border-style, solid);
    --zui-btn-padding-block: var(--space-3xs);
    --zui-btn-padding-inline: var(--space-xs);
    --auto-threshold: .6;
    --auto-light-text-l: 1;
    --auto-dark-text-l: .5;
    --auto-lightness: clamp(0,
      (l / var(--auto-threshold, .623) - 1) * -infinity,
      1);
    --auto-color: light-dark(oklch(from var(--zui-btn-bg)
          clamp(var(--auto-dark-text-l),
            calc(((l * alpha + 1 - alpha) / var(--auto-threshold) - 1) * -infinity),
            var(--auto-light-text-l))
          0 0 / 1), oklch(from var(--zui-btn-bg)
          clamp(var(--auto-dark-text-l),
            calc(((l * alpha) / var(--auto-threshold) - 1) * -infinity),
            var(--auto-light-text-l))
          0 0 / 1));
    justify-content: center;
    align-items: center;
    gap: var(--space-3xs-2xs);
    min-height: var(--zui-btn-height, 2rem);
    border: 1px var(--zui-btn-border-style) var(--zui-btn-border, transparent);
    border-radius: var(--zui-btn-radius, .375rem);
    background-color: var(--zui-btn-bg);
    font-family: inherit;
    font-size: var(--zui-btn-font-size, var(--step--1));
    padding-block: var(--zui-btn-padding-block);
    padding-inline: var(--zui-btn-padding-inline);
    cursor: pointer;
    text-decoration: var(--zui-btn-text-decoration, none);
    font-weight: 500;
    line-height: 1;
    transition-property: background-color, color, border-color, scale;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    display: inline-flex;
    color: var(--zui-btn-fg, var(--auto-color)) !important;

    & > svg, & > i {
      font-size: var(--step-0);
    }
  }

  .zui-button:not(:disabled):hover {
    background-color: var(--zui-btn-hover-bg);
    color: var(--zui-btn-hover-fg, var(--auto-color));
    border-color: var(--zui-btn-hover-border, transparent);
  }

  .zui-button:not(:disabled):active {
    scale: .97;
  }

  .zui-button:disabled {
    cursor: not-allowed;
    filter: grayscale() opacity(50%);
  }

  .zui-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .zui-button, .zui-button.zui-button-color-theme {
    --zui-btn-accent: var(--color-theme);
  }

  .zui-button.zui-button-color-accent {
    --zui-btn-accent: var(--color-accent);
  }

  .zui-button.zui-button-color-destructive {
    --zui-btn-accent: var(--color-error);
  }

  .zui-button, .zui-button.zui-button-variant-fill {
    --zui-btn-bg: var(--zui-btn-accent);
    --zui-btn-fg: var(--zui-btn-accent-fg);
    --zui-btn-hover-bg: var(--zui-btn-accent-hover);
    --zui-btn-hover-fg: var(--zui-btn-accent-fg);
  }

  .zui-button.zui-button-variant-subtle {
    --zui-btn-bg: var(--zui-btn-accent-subtle-bg);
    --zui-btn-fg: light-dark(oklch(from var(--zui-btn-accent) calc(l - .1) c h), oklch(from var(--zui-btn-accent) calc(l + .1) c h));
    --zui-btn-hover-bg: var(--zui-btn-accent-subtle-hover-bg);
    --zui-btn-hover-fg: light-dark(oklch(from var(--zui-btn-accent) calc(l - .15) c h), oklch(from var(--zui-btn-accent) calc(l + .15) c h));
  }

  .zui-button.zui-button-variant-outline {
    --zui-btn-bg: transparent;
    --zui-btn-fg: var(--zui-btn-accent);
    --zui-btn-border: oklch(from var(--zui-btn-accent) l c h / 30%);
    --zui-btn-hover-bg: oklch(from var(--zui-btn-accent) l c h / 20%);
    --zui-btn-hover-fg: var(--zui-btn-accent);
    --zui-btn-hover-border: oklch(from var(--zui-btn-accent) l c h / 40%);
  }

  .zui-button.zui-button-variant-ghost {
    --zui-btn-bg: transparent;
    --zui-btn-fg: var(--zui-btn-accent);
    --zui-btn-hover-bg: var(--zui-btn-accent-subtle-bg);
    --zui-btn-hover-fg: var(--zui-btn-accent-subtle-fg);
  }

  .zui-button.zui-button-variant-link {
    --zui-btn-bg: transparent;
    --zui-btn-fg: var(--zui-btn-accent);
    --zui-btn-hover-bg: transparent;
    --zui-btn-hover-fg: oklch(from var(--zui-btn-fg) l c h / 90%);
    --zui-btn-text-decoration: underline .2ex .3ex oklch(from var(--zui-btn-fg) l c h / 50%);
    padding: 0;

    &:hover {
      text-decoration-color: oklch(from var(--zui-btn-fg) l c h / 90%);
    }
  }

  .zui-button.zui-button-size-xs {
    --zui-btn-height: 1.2rem;
    --zui-btn-font-size: var(--step--3);
    --zui-btn-padding-block: var(--space-5xs);
    --zui-btn-padding-inline: var(--space-3xs);

    & > svg, & > i {
      font-size: var(--step--4);
    }
  }

  .zui-button.zui-button-size-sm {
    --zui-btn-height: 1.5rem;
    --zui-btn-font-size: var(--step--2);
    --zui-btn-padding-block: var(--space-4xs);
    --zui-btn-padding-inline: var(--space-2xs);

    & > svg, & > i {
      font-size: var(--step--3);
    }
  }

  .zui-button.zui-button-size-lg {
    --zui-btn-height: 2.3rem;
    --zui-btn-font-size: (--step-0);
    --zui-btn-padding-block: var(--space-2xs);
    --zui-btn-padding-inline: var(--space-md);

    & > svg, & > i {
      font-size: var(--step-1);
    }
  }

  .zui-button.zui-button-size-xl {
    --zui-btn-height: 3rem;
    --zui-btn-font-size: 1.125rem;
    --zui-btn-padding-block: var(--space-xs);
    --zui-btn-padding-inline: var(--space-lg);

    & > svg, & > i {
      font-size: var(--step-2);
    }
  }

  .zui-button.zui-button-shape-hard {
    --zui-btn-radius: 0;
  }

  .zui-button.zui-button-shape-soft {
    --zui-btn-radius: 9999px;
  }

  .zui-button.zui-button-shape-squircle {
    @supports (corner-shape: squircle) {
      corner-shape: superellipse(1.25);
      border-radius: 20px;
    }
  }

  .zui-button.zui-button-icon {
    min-width: var(--zui-btn-height, 2.25rem);
    padding: 0;
  }

  .zui-input {
    --zui-input-radius: var(--radius-lg);
    --zui-input-border: var(--color-border);
    --zui-input-bg: var(--color-background);
    --zui-input-fg: var(--color-text);
    --zui-input-padding-block: var(--space-3xs);
    --zui-input-padding-inline: var(--space-xs);
    width: 100%;
    padding-block: var(--zui-input-padding-block);
    padding-inline: var(--zui-input-padding-inline);
    border: 1px var(--border-style, solid) var(--zui-input-border);
    border-radius: var(--zui-input-radius);
    background-color: var(--zui-input-bg);
    color: var(--zui-input-fg);
    font-family: inherit;
    font-size: var(--step-0);
    line-height: var(--line-height-md);
    transition-property: border-color, box-shadow;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    display: block;
  }

  .zui-input::placeholder {
    color: color-mix(in oklch, var(--color-text) 50%, transparent);
  }

  .zui-input:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-color: var(--color-theme);
  }

  .zui-input:disabled {
    cursor: not-allowed;
    filter: grayscale() opacity(50%);
  }

  .zui-input[aria-invalid="true"], .zui-input:user-invalid {
    border-color: var(--color-error);
  }

  .zui-textarea {
    --zui-textarea-radius: var(--radius-lg);
    --zui-textarea-border: var(--color-border);
    --zui-textarea-bg: var(--color-background);
    --zui-textarea-fg: var(--color-text);
    --zui-textarea-padding: var(--space-xs);
    width: 100%;
    min-height: 6rem;
    padding: var(--zui-textarea-padding);
    border: 1px var(--border-style, solid) var(--zui-textarea-border);
    border-radius: var(--zui-textarea-radius);
    background-color: var(--zui-textarea-bg);
    color: var(--zui-textarea-fg);
    font-family: inherit;
    font-size: var(--step-0);
    line-height: var(--line-height-md);
    resize: vertical;
    field-sizing: content;
    transition-property: border-color, box-shadow;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    display: block;
  }

  .zui-textarea::placeholder {
    color: color-mix(in oklch, var(--color-text) 50%, transparent);
  }

  .zui-textarea:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-color: var(--color-theme);
  }

  .zui-textarea:disabled {
    cursor: not-allowed;
    filter: grayscale() opacity(50%);
  }

  .zui-textarea[aria-invalid="true"], .zui-textarea:user-invalid {
    border-color: var(--color-error);
  }

  .zui-label {
    font-size: var(--step--1);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    color: var(--color-text);
    margin-block-end: var(--space-3xs);
    display: block;
  }

  .zui-label-required:after {
    content: " *";
    color: var(--color-error);
  }

  .zui-label-description {
    font-size: var(--step--2);
    font-weight: var(--font-weight-regular);
    color: color-mix(in oklch, var(--color-text) 65%, transparent);
    margin-block-start: var(--space-5xs);
    display: block;
  }

  .zui-select {
    --zui-select-radius: var(--radius-lg);
    --zui-select-border: var(--color-border);
    --zui-select-bg: var(--color-background);
    --zui-select-fg: var(--color-text);
    --zui-select-padding-block: var(--space-3xs);
    --zui-select-padding-inline: var(--space-xs);
    width: 100%;
    padding-block: var(--zui-select-padding-block);
    padding-inline: var(--zui-select-padding-inline);
    border: 1px var(--border-style, solid) var(--zui-select-border);
    border-radius: var(--zui-select-radius);
    background-color: var(--zui-select-bg);
    color: var(--zui-select-fg);
    font-family: inherit;
    font-size: var(--step-0);
    line-height: var(--line-height-md);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-xs) center;
    cursor: pointer;
    background-size: 1em;
    padding-inline-end: var(--space-lg);
    transition-property: border-color, box-shadow;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    display: block;
  }

  .zui-select:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-color: var(--color-theme);
  }

  .zui-select:disabled {
    cursor: not-allowed;
    filter: grayscale() opacity(50%);
  }

  .zui-select[aria-invalid="true"], .zui-select:user-invalid {
    border-color: var(--color-error);
  }

  .zui-radio {
    align-items: center;
    gap: var(--space-2xs);
    cursor: pointer;
    font-size: var(--step-0);
    line-height: var(--line-height-sm);
    color: var(--color-text);
    display: flex;
  }

  .zui-radio input[type="radio"] {
    appearance: none;
    outline: 3px var(--border-style, solid) var(--color-border, currentColor);
    outline-offset: 3px;
    border-radius: var(--radius-full);
    cursor: pointer;
    flex-shrink: 0;
    width: .8em;
    height: .8em;
    transition-property: border-color, background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
  }

  .zui-radio input[type="radio"]:checked {
    background-color: var(--color-accent);
  }

  .zui-radio input[type="radio"]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .zui-radio input[type="radio"]:disabled {
    cursor: not-allowed;
    filter: grayscale() opacity(50%);
  }

  .zui-radio input[type="radio"]:disabled ~ * {
    cursor: not-allowed;
    opacity: .5;
  }

  .zui-radio-list {
    gap: var(--space-2xs);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .zui-checkbox {
    align-items: center;
    gap: var(--space-2xs);
    cursor: pointer;
    font-size: var(--step-0);
    line-height: var(--line-height-sm);
    color: var(--color-text);
    display: flex;
  }

  .zui-checkbox input[type="checkbox"] {
    appearance: none;
    border: 2px var(--border-style, solid) var(--color-accent, currentColor);
    border-radius: var(--radius-sm);
    background-color: var(--color-background);
    cursor: pointer;
    flex-shrink: 0;
    place-content: center;
    width: 1.25em;
    height: 1.25em;
    transition-property: border-color, background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    display: grid;
  }

  .zui-checkbox input[type="checkbox"]:before {
    content: "";
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: #fff;
    width: .65em;
    height: .65em;
    transition: transform .15s ease-in-out;
    transform: scale(0);
  }

  .zui-checkbox input[type="checkbox"]:checked {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
  }

  .zui-checkbox input[type="checkbox"]:checked:before {
    transform: scale(1);
  }

  .zui-checkbox input[type="checkbox"]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .zui-checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    filter: grayscale() opacity(50%);
  }

  .zui-checkbox input[type="checkbox"]:disabled ~ * {
    cursor: not-allowed;
    opacity: .5;
  }

  .zui-checkbox-list {
    gap: var(--space-2xs);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .zui-card {
    --zui-card-radius: var(--radius-xl);
    --zui-card-border: var(--color-border);
    --zui-card-bg: var(--color-surface);
    --zui-card-padding: var(--space-md);
    padding: var(--zui-card-padding);
    border: 1px var(--border-style, solid) var(--zui-card-border);
    border-radius: var(--zui-card-radius);
    background-color: var(--zui-card-bg);
  }

  .zui-card-header {
    margin-block-end: var(--space-sm);
  }

  .zui-card-title {
    font-size: var(--step-1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-sm);
    color: var(--color-text);
  }

  .zui-card-description {
    font-size: var(--step--1);
    color: color-mix(in oklch, var(--color-text) 65%, transparent);
    margin-block-start: var(--space-3xs);
  }

  .zui-card-body {
    font-size: var(--step-0);
  }

  .zui-card-footer {
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
    display: flex;
  }

  .zui-card-elevated {
    box-shadow: var(--shadow-lg);
    border-color: #0000;
  }

  .zui-card-interactive {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition-property: border-color, box-shadow, scale;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    display: block;
  }

  .zui-card-interactive:hover {
    border-color: var(--color-theme);
  }

  .zui-card-interactive:active {
    scale: .99;
  }

  .zui-badge {
    --zui-badge-accent: var(--color-theme);
    --zui-badge-radius: var(--radius-full);
    align-items: center;
    gap: var(--space-4xs);
    padding: var(--space-4xs) var(--space-2xs);
    border-radius: var(--zui-badge-radius);
    font-size: var(--step--2);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    background-color: oklch(from var(--zui-badge-accent) l c h / 15%);
    color: var(--zui-badge-accent);
    line-height: 1;
    display: inline-flex;
  }

  .zui-badge.zui-badge-variant-fill {
    background-color: var(--zui-badge-accent);
    color: light-dark(oklch(from var(--zui-badge-accent) calc(l + .4) 0 0), oklch(from var(--zui-badge-accent) calc(l - .4) 0 0));
  }

  .zui-badge.zui-badge-variant-outline {
    border: 1px var(--border-style, solid)
      oklch(from var(--zui-badge-accent) l c h / 40%);
    color: var(--zui-badge-accent);
    background-color: #0000;
  }

  .zui-badge.zui-badge-color-red {
    --zui-badge-accent: light-dark(var(--color-red-600), var(--color-red-400));
  }

  .zui-badge.zui-badge-color-orange {
    --zui-badge-accent: light-dark(var(--color-orange-600), var(--color-orange-400));
  }

  .zui-badge.zui-badge-color-amber {
    --zui-badge-accent: light-dark(var(--color-amber-600), var(--color-amber-400));
  }

  .zui-badge.zui-badge-color-yellow {
    --zui-badge-accent: light-dark(var(--color-yellow-600), var(--color-yellow-400));
  }

  .zui-badge.zui-badge-color-lime {
    --zui-badge-accent: light-dark(var(--color-lime-600), var(--color-lime-400));
  }

  .zui-badge.zui-badge-color-green {
    --zui-badge-accent: light-dark(var(--color-green-600), var(--color-green-400));
  }

  .zui-badge.zui-badge-color-emerald {
    --zui-badge-accent: light-dark(var(--color-emerald-600), var(--color-emerald-400));
  }

  .zui-badge.zui-badge-color-teal {
    --zui-badge-accent: light-dark(var(--color-teal-600), var(--color-teal-400));
  }

  .zui-badge.zui-badge-color-cyan {
    --zui-badge-accent: light-dark(var(--color-cyan-600), var(--color-cyan-400));
  }

  .zui-badge.zui-badge-color-sky {
    --zui-badge-accent: light-dark(var(--color-sky-600), var(--color-sky-400));
  }

  .zui-badge.zui-badge-color-blue {
    --zui-badge-accent: light-dark(var(--color-blue-600), var(--color-blue-400));
  }

  .zui-badge.zui-badge-color-indigo {
    --zui-badge-accent: light-dark(var(--color-indigo-600), var(--color-indigo-400));
  }

  .zui-badge.zui-badge-color-violet {
    --zui-badge-accent: light-dark(var(--color-violet-600), var(--color-violet-400));
  }

  .zui-badge.zui-badge-color-purple {
    --zui-badge-accent: light-dark(var(--color-purple-600), var(--color-purple-400));
  }

  .zui-badge.zui-badge-color-fuchsia {
    --zui-badge-accent: light-dark(var(--color-fuchsia-600), var(--color-fuchsia-400));
  }

  .zui-badge.zui-badge-color-pink {
    --zui-badge-accent: light-dark(var(--color-pink-600), var(--color-pink-400));
  }

  .zui-badge.zui-badge-color-rose {
    --zui-badge-accent: light-dark(var(--color-rose-600), var(--color-rose-400));
  }

  .zui-badge.zui-badge-color-gray {
    --zui-badge-accent: light-dark(var(--color-gray-600), var(--color-gray-400));
  }

  .zui-table {
    caption-side: bottom;
    font-variant-numeric: tabular-nums;
    table-layout: fixed;
    border-collapse: collapse;
    border: 0;
    width: 100%;
  }

  .zui-table-row {
    border-bottom: 1px solid oklch(from currentColor l c h / 15%);
    transition: background-color .15s ease-in-out;
  }

  .zui-table-body .zui-table-row:hover {
    background-color: oklch(from currentColor l c h / 10%);
  }

  .zui-table-row[data-state="selected"] {
    background-color: oklch(from currentColor l c h / 25%);
  }

  .zui-table-head {
    line-height: var(--line-height-xl);
    padding-inline: var(--space-2xs);
    text-align: left;
    vertical-align: middle;
    font-weight: var(--font-weight-bold);
    border-bottom: 1px solid oklch(from currentColor l c h / 15%);
  }

  .zui-table-cell {
    padding: var(--space-2xs);
    vertical-align: middle;
  }

  .zui-table-footer {
    border-top: 1px solid oklch(from currentColor l c h / 15%);
    background-color: oklch(from currentColor l c h / 5%);
    font-weight: var(--font-weight-bold);
  }

  .zui-table-footer > tr:last-child {
    border-bottom: 0;
  }

  .zui-table-caption {
    margin-top: var(--space-2xs);
    font-size: var(--step--1);
    color: oklch(from currentColor l c h / 80%);
  }

  .zui-tooltip {
    display: inline-block;
    position: relative;
  }

  .zui-tooltip-content {
    --zui-tooltip-bg: light-dark(var(--color-mist-700), var(--color-mist-200));
    --zui-tooltip-fg: light-dark(var(--color-mist-50), var(--color-mist-900));
    background-color: var(--zui-tooltip-bg);
    color: var(--zui-tooltip-fg);
    padding: var(--space-4xs) var(--space-2xs);
    border-radius: var(--radius-md);
    font-size: var(--step--2);
    line-height: var(--line-height-sm);
    width: max-content;
    max-width: 20rem;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    z-index: var(--z-2);
    position-area: block-start center;
    opacity: 0;
    transition: opacity .15s var(--ease-out),
      translate .15s var(--ease-out),
      display .15s var(--ease-out) allow-discrete,
      overlay .15s var(--ease-out) allow-discrete;
    border: none;
    margin: 0;
    margin-block-end: var(--space-3xs);
    translate: 0 4px;

    &::backdrop {
      display: none;
    }

    &:popover-open {
      opacity: 1;
      translate: 0;
    }

    @starting-style {
      &:popover-open {
        opacity: 0;
        translate: 0 4px;
      }
    }
  }

  .zui-tooltip-placement-top {
    position-area: block-start center;
    margin-block-end: var(--space-3xs);

    @starting-style {
      &:popover-open {
        translate: 0 4px;
      }
    }
  }

  .zui-tooltip-placement-bottom {
    position-area: block-end center;
    margin-block-start: var(--space-3xs);

    @starting-style {
      &:popover-open {
        translate: 0 -4px;
      }
    }
  }

  .zui-tooltip-placement-left {
    position-area: center inline-start;
    margin-inline-end: var(--space-3xs);

    @starting-style {
      &:popover-open {
        translate: 4px;
      }
    }
  }

  .zui-tooltip-placement-right {
    position-area: center inline-end;
    margin-inline-start: var(--space-3xs);

    @starting-style {
      &:popover-open {
        translate: -4px;
      }
    }
  }

  .zui-popover {
    --zui-popover-bg: var(--color-surface);
    --zui-popover-border: var(--color-border);
    --zui-popover-radius: var(--radius-lg);
    --zui-popover-shadow: var(--shadow-lg);
    --zui-popover-padding: var(--space-xs);
    background-color: var(--zui-popover-bg);
    border-radius: var(--zui-popover-radius);
    box-shadow: var(--zui-popover-shadow);
    padding: var(--zui-popover-padding);
    position-area: block-end center;
    min-width: 12rem;
    opacity: 0;
    transition: opacity .15s ease,
      display .15s ease allow-discrete,
      overlay .15s ease allow-discrete;
    border: 0;
    margin: 0;
    margin-block-start: var(--space-3xs);

    &:popover-open {
      opacity: 1;
    }

    &:popover-open::backdrop {
      opacity: 1;
    }

    @starting-style {
      &:popover-open {
        opacity: 0;
      }

      &:popover-open::backdrop {
        opacity: 0;
      }
    }
  }

  .zui-dialog {
    --zui-dialog-bg: var(--color-surface);
    --zui-dialog-border: var(--color-border);
    --zui-dialog-radius: var(--radius-xl);
    --zui-dialog-shadow: var(--shadow-2xl);
    --zui-dialog-padding: var(--space-md);
    --zui-dialog-max-width: 32rem;
    background-color: var(--zui-dialog-bg);
    border: 1px var(--border-style, solid) var(--zui-dialog-border);
    border-radius: var(--zui-dialog-radius);
    box-shadow: var(--zui-dialog-shadow);
    padding: var(--zui-dialog-padding);
    max-width: var(--zui-dialog-max-width);
    width: calc(100vw - var(--space-lg));
    margin: auto;

    &::backdrop {
      backdrop-filter: blur(2px);
      background-color: oklch(0% 0 0 / .5);
    }

    opacity: 0;
    transition: opacity .2s ease,
      display .2s ease allow-discrete,
      overlay .2s ease allow-discrete;

    &[open] {
      opacity: 1;
    }

    @starting-style {
      &[open] {
        opacity: 0;
      }
    }

    &::backdrop {
      opacity: 0;
      transition: opacity .2s ease,
        display .2s ease allow-discrete,
        overlay .2s ease allow-discrete;
    }

    &[open]::backdrop {
      opacity: 1;
    }

    @starting-style {
      &[open]::backdrop {
        opacity: 0;
      }
    }
  }

  .zui-dialog-header {
    margin-block-end: var(--space-sm);
  }

  .zui-dialog-title {
    font-size: var(--step-1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-sm);
    color: var(--color-text);
  }

  .zui-dialog-description {
    font-size: var(--step--1);
    color: color-mix(in oklch, var(--color-text) 65%, transparent);
    margin-block-start: var(--space-3xs);
  }

  .zui-dialog-body {
    font-size: var(--step-0);
  }

  .zui-dialog-footer {
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
    display: flex;
  }

  .zui-dialog-close {
    top: var(--space-sm);
    right: var(--space-sm);
    position: absolute;
  }

  .zui-dialog-size-sm {
    --zui-dialog-max-width: 24rem;
  }

  .zui-dialog-size-lg {
    --zui-dialog-max-width: 42rem;
  }

  .zui-dialog-size-full {
    --zui-dialog-max-width: none;
    width: calc(100vw - var(--space-lg));
    height: calc(100vh - var(--space-lg));
  }

  .zui-collapsible {
    --zui-collapsible-border: var(--color-border);
    --zui-collapsible-radius: var(--radius-md);
    --zui-collapsible-bg: var(--color-surface);
    --zui-collapsible-padding-x: var(--space-sm);
    --zui-collapsible-padding-y: var(--space-sm);
    border: 1px var(--border-style, solid) var(--zui-collapsible-border);
    border-radius: var(--zui-collapsible-radius);
    background-color: var(--zui-collapsible-bg);
  }

  .zui-collapsible-trigger {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--zui-collapsible-padding-y) var(--zui-collapsible-padding-x);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--step-0);
    color: var(--color-text);
    user-select: none;
    list-style: none;
    display: flex;

    &::-webkit-details-marker {
      display: none;
    }

    &::marker {
      content: "";
    }

    @starting-style {
      & details[open]::details-content {
        opacity: 0;
        block-size: 0;
      }
    }

    &:after {
      content: "";
      width: .45em;
      height: .45em;
      transition: transform .2s var(--ease-out, ease-out);
      border-bottom: 1.5px solid;
      border-right: 1.5px solid;
      flex-shrink: 0;
      display: inline-block;
      transform: rotate(45deg) translateY(-1px);
    }
  }

  .zui-collapsible[open] > .zui-collapsible-trigger:after {
    transform: rotate(-135deg) translateY(1px);
  }

  .zui-collapsible-content {
    padding: 0 var(--zui-collapsible-padding-x) var(--zui-collapsible-padding-y);
    font-size: var(--step-0);
    color: var(--color-text);
  }

  .zui-accordion {
    --zui-accordion-border: var(--color-border);
    --zui-accordion-radius: var(--radius-md);
    --zui-accordion-bg: var(--color-surface);
    --zui-accordion-padding-x: var(--space-sm);
    --zui-accordion-padding-y: var(--space-sm);
    border: 1px var(--border-style, solid) var(--zui-accordion-border);
    border-radius: var(--zui-accordion-radius);
    background-color: var(--zui-accordion-bg);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .zui-accordion-item {
    border-block-start: 1px var(--border-style, solid) var(--zui-accordion-border);

    &:first-child {
      border-block-start: none;
    }
  }

  .zui-accordion-trigger {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--zui-accordion-padding-y) var(--zui-accordion-padding-x);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--step-0);
    color: var(--color-text);
    user-select: none;
    width: 100%;
    list-style: none;
    display: flex;

    &::-webkit-details-marker {
      display: none;
    }

    &::marker {
      content: "";
    }

    &:after {
      content: "";
      width: .45em;
      height: .45em;
      transition: transform .2s var(--ease-out, ease-out);
      border-bottom: 1.5px solid;
      border-right: 1.5px solid;
      flex-shrink: 0;
      display: inline-block;
      transform: rotate(45deg) translateY(-1px);
    }
  }

  .zui-accordion-item[open] > .zui-accordion-trigger:after {
    transform: rotate(-135deg) translateY(1px);
  }

  .zui-accordion-content {
    padding: 0 var(--zui-accordion-padding-x) var(--zui-accordion-padding-y);
    font-size: var(--step-0);
    color: var(--color-text);
  }

  .zui-accordion-flush {
    background: none;
    border: none;
    border-radius: 0;

    & .zui-accordion-item {
      border-block-start: 1px var(--border-style, solid) var(--zui-accordion-border);
    }

    & .zui-accordion-item:first-child {
      border-block-start: none;
    }

    & .zui-accordion-item:last-child {
      border-block-end: 1px var(--border-style, solid) var(--zui-accordion-border);
    }
  }
}

@layer zui.utilities {
  .m-0 {
    margin: var(--space-0);
  }

  .m-auto {
    margin: auto;
  }

  .m-2xs {
    margin: var(--space-2xs);
  }

  .m-xs {
    margin: var(--space-xs);
  }

  .m-sm {
    margin: var(--space-sm);
  }

  .m-md {
    margin: var(--space-md);
  }

  .m-lg {
    margin: var(--space-lg);
  }

  .m-xl {
    margin: var(--space-xl);
  }

  .m-2xl {
    margin: var(--space-2xl);
  }

  .m-3xl {
    margin: var(--space-3xl);
  }

  .m-4xl {
    margin: var(--space-4xl);
  }

  .mx-0 {
    margin-inline: var(--space-0);
  }

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

  .mx-2xs {
    margin-inline: var(--space-2xs);
  }

  .mx-xs {
    margin-inline: var(--space-xs);
  }

  .mx-sm {
    margin-inline: var(--space-sm);
  }

  .mx-md {
    margin-inline: var(--space-md);
  }

  .mx-lg {
    margin-inline: var(--space-lg);
  }

  .mx-xl {
    margin-inline: var(--space-xl);
  }

  .mx-2xl {
    margin-inline: var(--space-2xl);
  }

  .mx-3xl {
    margin-inline: var(--space-3xl);
  }

  .mx-4xl {
    margin-inline: var(--space-4xl);
  }

  .ml-0 {
    margin-inline-start: var(--space-0);
  }

  .ml-auto {
    margin-inline-start: auto;
  }

  .ml-2xs {
    margin-inline-start: var(--space-2xs);
  }

  .ml-xs {
    margin-inline-start: var(--space-xs);
  }

  .ml-sm {
    margin-inline-start: var(--space-sm);
  }

  .ml-md {
    margin-inline-start: var(--space-md);
  }

  .ml-lg {
    margin-inline-start: var(--space-lg);
  }

  .ml-xl {
    margin-inline-start: var(--space-xl);
  }

  .ml-2xl {
    margin-inline-start: var(--space-2xl);
  }

  .ml-3xl {
    margin-inline-start: var(--space-3xl);
  }

  .ml-4xl {
    margin-inline-start: var(--space-4xl);
  }

  .my-0 {
    margin-block: var(--space-0);
  }

  .my-auto {
    margin-block: auto;
  }

  .my-2xs {
    margin-block: var(--space-2xs);
  }

  .my-xs {
    margin-block: var(--space-xs);
  }

  .my-sm {
    margin-block: var(--space-sm);
  }

  .my-md {
    margin-block: var(--space-md);
  }

  .my-lg {
    margin-block: var(--space-lg);
  }

  .my-xl {
    margin-block: var(--space-xl);
  }

  .my-2xl {
    margin-block: var(--space-2xl);
  }

  .my-3xl {
    margin-block: var(--space-3xl);
  }

  .my-4xl {
    margin-block: var(--space-4xl);
  }

  .mr-0 {
    margin-inline-end: var(--space-0);
  }

  .mr-auto {
    margin-inline-end: auto;
  }

  .mr-2xs {
    margin-inline-end: var(--space-2xs);
  }

  .mr-xs {
    margin-inline-end: var(--space-xs);
  }

  .mr-sm {
    margin-inline-end: var(--space-sm);
  }

  .mr-md {
    margin-inline-end: var(--space-md);
  }

  .mr-lg {
    margin-inline-end: var(--space-lg);
  }

  .mr-xl {
    margin-inline-end: var(--space-xl);
  }

  .mr-2xl {
    margin-inline-end: var(--space-2xl);
  }

  .mr-3xl {
    margin-inline-end: var(--space-3xl);
  }

  .mr-4xl {
    margin-inline-end: var(--space-4xl);
  }

  .mt-0 {
    margin-block-start: var(--space-0);
  }

  .mt-auto {
    margin-block-start: auto;
  }

  .mt-2xs {
    margin-block-start: var(--space-2xs);
  }

  .mt-xs {
    margin-block-start: var(--space-xs);
  }

  .mt-sm {
    margin-block-start: var(--space-sm);
  }

  .mt-md {
    margin-block-start: var(--space-md);
  }

  .mt-lg {
    margin-block-start: var(--space-lg);
  }

  .mt-xl {
    margin-block-start: var(--space-xl);
  }

  .mt-2xl {
    margin-block-start: var(--space-2xl);
  }

  .mt-3xl {
    margin-block-start: var(--space-3xl);
  }

  .mt-4xl {
    margin-block-start: var(--space-4xl);
  }

  .mb-0 {
    margin-block-end: var(--space-0);
  }

  .mb-auto {
    margin-block-end: auto;
  }

  .mb-2xs {
    margin-block-end: var(--space-2xs);
  }

  .mb-xs {
    margin-block-end: var(--space-xs);
  }

  .mb-sm {
    margin-block-end: var(--space-sm);
  }

  .mb-md {
    margin-block-end: var(--space-md);
  }

  .mb-lg {
    margin-block-end: var(--space-lg);
  }

  .mb-xl {
    margin-block-end: var(--space-xl);
  }

  .mb-2xl {
    margin-block-end: var(--space-2xl);
  }

  .mb-3xl {
    margin-block-end: var(--space-3xl);
  }

  .mb-4xl {
    margin-block-end: var(--space-4xl);
  }

  .p-0 {
    padding: var(--space-0);
  }

  .p-2xs {
    padding: var(--space-2xs);
  }

  .p-xs {
    padding: var(--space-xs);
  }

  .p-sm {
    padding: var(--space-sm);
  }

  .p-md {
    padding: var(--space-md);
  }

  .p-lg {
    padding: var(--space-lg);
  }

  .p-xl {
    padding: var(--space-xl);
  }

  .p-2xl {
    padding: var(--space-2xl);
  }

  .p-3xl {
    padding: var(--space-3xl);
  }

  .p-4xl {
    padding: var(--space-4xl);
  }

  .px-0 {
    padding-inline: var(--space-0);
  }

  .px-2xs {
    padding-inline: var(--space-2xs);
  }

  .px-xs {
    padding-inline: var(--space-xs);
  }

  .px-sm {
    padding-inline: var(--space-sm);
  }

  .px-md {
    padding-inline: var(--space-md);
  }

  .px-lg {
    padding-inline: var(--space-lg);
  }

  .px-xl {
    padding-inline: var(--space-xl);
  }

  .px-2xl {
    padding-inline: var(--space-2xl);
  }

  .px-3xl {
    padding-inline: var(--space-3xl);
  }

  .px-4xl {
    padding-inline: var(--space-4xl);
  }

  .pl-0 {
    padding-inline-start: var(--space-0);
  }

  .pl-2xs {
    padding-inline-start: var(--space-2xs);
  }

  .pl-xs {
    padding-inline-start: var(--space-xs);
  }

  .pl-sm {
    padding-inline-start: var(--space-sm);
  }

  .pl-md {
    padding-inline-start: var(--space-md);
  }

  .pl-lg {
    padding-inline-start: var(--space-lg);
  }

  .pl-xl {
    padding-inline-start: var(--space-xl);
  }

  .pl-2xl {
    padding-inline-start: var(--space-2xl);
  }

  .pl-3xl {
    padding-inline-start: var(--space-3xl);
  }

  .pl-4xl {
    padding-inline-start: var(--space-4xl);
  }

  .pr-0 {
    padding-inline-end: var(--space-0);
  }

  .pr-2xs {
    padding-inline-end: var(--space-2xs);
  }

  .pr-xs {
    padding-inline-end: var(--space-xs);
  }

  .pr-sm {
    padding-inline-end: var(--space-sm);
  }

  .pr-md {
    padding-inline-end: var(--space-md);
  }

  .pr-lg {
    padding-inline-end: var(--space-lg);
  }

  .pr-xl {
    padding-inline-end: var(--space-xl);
  }

  .pr-2xl {
    padding-inline-end: var(--space-2xl);
  }

  .pr-3xl {
    padding-inline-end: var(--space-3xl);
  }

  .pr-4xl {
    padding-inline-end: var(--space-4xl);
  }

  .py-0 {
    padding-block: var(--space-0);
  }

  .py-2xs {
    padding-block: var(--space-2xs);
  }

  .py-xs {
    padding-block: var(--space-xs);
  }

  .py-sm {
    padding-block: var(--space-sm);
  }

  .py-md {
    padding-block: var(--space-md);
  }

  .py-lg {
    padding-block: var(--space-lg);
  }

  .py-xl {
    padding-block: var(--space-xl);
  }

  .py-2xl {
    padding-block: var(--space-2xl);
  }

  .py-3xl {
    padding-block: var(--space-3xl);
  }

  .py-4xl {
    padding-block: var(--space-4xl);
  }

  .pt-0 {
    padding-block-start: var(--space-0);
  }

  .pt-2xs {
    padding-block-start: var(--space-2xs);
  }

  .pt-xs {
    padding-block-start: var(--space-xs);
  }

  .pt-sm {
    padding-block-start: var(--space-sm);
  }

  .pt-md {
    padding-block-start: var(--space-md);
  }

  .pt-lg {
    padding-block-start: var(--space-lg);
  }

  .pt-xl {
    padding-block-start: var(--space-xl);
  }

  .pt-2xl {
    padding-block-start: var(--space-2xl);
  }

  .pt-3xl {
    padding-block-start: var(--space-3xl);
  }

  .pt-4xl {
    padding-block-start: var(--space-4xl);
  }

  .pb-0 {
    padding-block-end: var(--space-0);
  }

  .pb-2xs {
    padding-block-end: var(--space-2xs);
  }

  .pb-xs {
    padding-block-end: var(--space-xs);
  }

  .pb-sm {
    padding-block-end: var(--space-sm);
  }

  .pb-md {
    padding-block-end: var(--space-md);
  }

  .pb-lg {
    padding-block-end: var(--space-lg);
  }

  .pb-xl {
    padding-block-end: var(--space-xl);
  }

  .pb-2xl {
    padding-block-end: var(--space-2xl);
  }

  .pb-3xl {
    padding-block-end: var(--space-3xl);
  }

  .pb-4xl {
    padding-block-end: var(--space-4xl);
  }

  .gap-0 {
    gap: var(--space-0);
  }

  .gap-2xs {
    gap: var(--space-2xs);
  }

  .gap-xs {
    gap: var(--space-xs);
  }

  .gap-sm {
    gap: var(--space-sm);
  }

  .gap-md {
    gap: var(--space-md);
  }

  .gap-lg {
    gap: var(--space-lg);
  }

  .gap-xl {
    gap: var(--space-xl);
  }

  .gap-2xl {
    gap: var(--space-2xl);
  }

  .gap-3xl {
    gap: var(--space-3xl);
  }

  .gap-4xl {
    gap: var(--space-4xl);
  }

  .gapx-0 {
    column-gap: var(--space-0);
  }

  .gapx-2xs {
    column-gap: var(--space-2xs);
  }

  .gapx-xs {
    column-gap: var(--space-xs);
  }

  .gapx-sm {
    column-gap: var(--space-sm);
  }

  .gapx-md {
    column-gap: var(--space-md);
  }

  .gapx-lg {
    column-gap: var(--space-lg);
  }

  .gapx-xl {
    column-gap: var(--space-xl);
  }

  .gapx-2xl {
    column-gap: var(--space-2xl);
  }

  .gapx-3xl {
    column-gap: var(--space-3xl);
  }

  .gapx-4xl {
    column-gap: var(--space-4xl);
  }

  .gapy-0 {
    row-gap: var(--space-0);
  }

  .gapy-2xs {
    row-gap: var(--space-2xs);
  }

  .gapy-xs {
    row-gap: var(--space-xs);
  }

  .gapy-sm {
    row-gap: var(--space-sm);
  }

  .gapy-md {
    row-gap: var(--space-md);
  }

  .gapy-lg {
    row-gap: var(--space-lg);
  }

  .gapy-xl {
    row-gap: var(--space-xl);
  }

  .gapy-2xl {
    row-gap: var(--space-2xl);
  }

  .gapy-3xl {
    row-gap: var(--space-3xl);
  }

  .gapy-4xl {
    row-gap: var(--space-4xl);
  }

  .flex {
    display: flex;
  }

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

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

  .inline-flex-center {
    align-items: center;
    display: inline-flex;
  }

  .flex-auto {
    flex: auto;
    min-width: 0;
    min-height: 0;
  }

  .flex-none {
    flex: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .self-baseline {
    align-self: baseline;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .flex-grow {
    flex-grow: 1;
  }

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

  .prose {
    --prose-accent-color: var(--color-theme);
    --prose-link-color: var(--color-text);
    --prose-link-color-decoration: oklch(from var(--color-text) l c h / 50%);
    --prose-link-color-decoration-hover: oklch(from var(--color-text) l c h / 90%);
    --prose-code-color: oklch(from var(--color-text) calc(l + .1) c h);
    --prose-code-bg-color: oklch(from var(--color-background) calc(l + .1) c h);
    --prose-scroll-margin: 1.5rem;
    color: var(--prose-color, var(--color-text));

    & [id] {
      scroll-margin-top: var(--prose-scroll-margin);
    }

    & * {
      font-size: var(--step-0);
      margin: 0;
    }

    & > * + * {
      margin-block-start: var(--flow-space, 1em);
    }

    & :is(h1, h2, h3, blockquote) {
      --flow-space: 2rem;
    }

    & :is(h1, h2, h3) + * {
      --flow-space: 1rem;
    }

    & ul, & ol {
      padding-inline-start: 0;
      list-style-position: inside;

      & ul, & ol {
        padding-inline-start: 1rem;
      }
    }

    & ul {
      list-style-type: disc;

      & ul {
        list-style-type: circle;

        & ul {
          list-style-type: square;
        }
      }
    }

    & ol {
      list-style-type: decimal;

      & ol {
        list-style-type: lower-roman;

        & ol {
          list-style-type: lower-alpha;
        }
      }
    }

    & blockquote {
      border-inline-start: .3em solid;
      padding-inline-start: 1em;
      font-style: italic;
    }

    & h1 {
      font-size: var(--step-3);
      color: var(--prose-color);
    }

    & h2 {
      font-size: var(--step-2);
      color: var(--prose-accent-color);
    }

    & h3 {
      font-size: var(--step-1);
    }

    & h4 {
      font-size: var(--step-0);
    }

    & h1, & h2, & h3 {
      text-wrap: balance;
      line-height: 1.1;
      font-family: var(--font-display);
      font-weight: var(--font-weight-7);
    }

    & h4 {
      text-wrap: balance;
      line-height: 1.1;
      font-family: var(--font-display);
    }

    & a:not(.zui-button) {
      color: var(--prose-link-color);
      text-decoration-color: var(--prose-link-color-decoration);
      text-underline-offset: .3ex;
      transition: color .2s var(--ease-in-out),
        background-color .2s var(--ease-in-out);
      border-radius: var(--radius-md);
      text-decoration-line: underline;
      text-decoration-thickness: .2ex;

      &:hover {
        color: var(--prose-link-color);
        text-decoration-color: var(--prose-link-color-decoration-hover);
      }
    }

    & pre, & code {
      font-family: var(--font-code);
      background-color: var(--prose-code-bg-color);
      color: var(--prose-code-color);
      font-feature-settings: "ss09" 1;
    }

    & code {
      font-size: var(--step--1);
      border-radius: var(--radius-md);
      line-height: var(--line-height-xs);
      font-feature-settings: "ss09" 1;
      padding: 2px 4px;
      display: inline-block;
    }

    & pre {
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-xl);
      max-width: 100%;
      box-shadow: var(--shadow-sm);
      position: relative;

      & code {
        all: unset;
      }
    }

    & img, & iframe, & video {
      border-radius: var(--radius-xl);
      border: 3px solid var(--black-a3);

      &.no-border {
        border: none;
      }
    }

    & hr {
      margin: calc(var(--flow-space) * 2);
      background-color: var(--border-color);
      border: 0;
      height: 1px;
    }
  }

  .prose.inverted {
    --prose-color: var(--text-color-inverted);
    --prose-accent-color: var(--accent-6);
    --prose-link-color: var(--accent-7);
    --prose-link-color-decoration: var(--accent-7);
    --prose-link-color-decoration-hover: var(--accent-6);
    --prose-code-color: var(--violet-6);
    --prose-code-bg-color: var(--violet-12);
  }

  .prose.max-width-p > p {
    max-width: 65ch;
  }

  .flow {
    & > * + * {
      margin-block-start: var(--flow-space, 1em);
    }

    & :is(h1, h2, h3, blockquote) {
      --flow-space: 2rem;
    }

    & :is(h1, h2, h3) + * {
      --flow-space: 1rem;
    }
  }

  [class*="zui-text-"] {
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-regular);
    margin: 0;
  }

  .zui-text--4 {
    font-size: var(--step--4);
  }

  .zui-text--3 {
    font-size: var(--step--3);
  }

  .zui-text--2 {
    font-size: var(--step--2);
  }

  .zui-text--1 {
    font-size: var(--step--1);
  }

  .zui-text-base {
    font-size: var(--step-0);
  }

  .zui-text-1 {
    font-size: var(--step-1);
  }

  .zui-text-2 {
    font-size: var(--step-2);
  }

  .zui-text-3 {
    font-size: var(--step-3);
  }

  .zui-text-4 {
    font-size: var(--step-4);
  }

  .zui-text-5 {
    font-size: var(--step-5);
  }

  .zui-text-6 {
    font-size: var(--step-6);
  }

  .zui-color-muted {
    color: oklch(from var(--color-text) l c h / 70%);
  }

  .zui-color-faint {
    color: oklch(from var(--color-text) l c h / 50%);
  }

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

  .zui-link {
    --link-color: var(--color-text);
    --link-color-decoration: oklch(from var(--color-text) l c h / 50%);
    --link-color-decoration-hover: oklch(from var(--color-text) l c h / 90%);
    color: var(--link-color);
    text-decoration-color: var(--link-color-decoration);
    text-underline-offset: .3ex;
    transition: color .2s var(--ease-in-out),
      background-color .2s var(--ease-in-out);
    border-radius: var(--radius-md);
    text-decoration-line: underline;
    text-decoration-thickness: .2ex;

    &:hover {
      color: oklch(from var(--color-text) l c h / 90%);
      text-decoration-color: var(--link-color-decoration-hover);
    }
  }

  .zui-pre, .zui-code {
    --zui-code-color: oklch(from var(--color-text) calc(l + .1) c h);
    --zui-code-bg-color: oklch(from var(--color-background) calc(l + .1) c h);
    font-family: var(--font-code);
    background-color: var(--zui-code-bg-color);
    color: var(--zui-code-color);
  }

  .zui-pre {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-xl);
    max-width: 100%;
    box-shadow: var(--shadow-sm);
    position: relative;

    & code {
      all: unset;
    }
  }

  .zui-code {
    font-size: var(--step--1);
    border-radius: var(--radius-md);
    line-height: var(--line-height-xs);
    padding: 2px 4px;
    display: inline-block;
  }
}

@media print {
  *, :before, :after {
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  a, a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: .8em;
  }

  a[href^="#"]:after, a[href^="javascript:"]:after {
    content: "";
  }

  img {
    page-break-inside: avoid;
    max-width: 100% !important;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  p, blockquote, ul, ol, dl, table, pre {
    page-break-inside: avoid;
  }

  .no-print {
    display: none !important;
  }
}